kd-aiot-frontend-aps/src/components/processSubmitDialog/processSubmitDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible="processSubmitDialogFlag"
    title="提交审核"
    append-to-body
    :close-on-click-modal="false"
    width="50%"
    :before-close="cancel"
  >
    <!--    <el-steps :active="active" align-center style="transform: scale(0.8)">-->
    <!--      <el-step title="流程发起"></el-step>-->
    <!--      <el-step title="流程通知"></el-step>-->
    <!--    </el-steps>-->

    <el-form
      ref="form"
      :rules="rules"
      class="el-form-box"
      :model="form"
      label-width="80px"
    >
      <el-row v-show="active == 0">
        <el-col :span="12">
          <el-form-item label="流程分类">
            <ele-tree-select
              @change="changeLCFL"
              clearable
              ref="processTypeRef"
              filterable
              :data="LCFLList"
              v-model="form.LCFL"
              childrenKey="children"
              valueKey="id"
              labelKey="name"
              placeholder="请选择"
              default-expand-all
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发起流程">
            <el-select
              filterable
              v-model="form.FQLC"
              @change="changeFQLC"
              style="width: 100%"
            >
              <el-option
                v-for="item in processList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="active == 0">
        <el-col :span="12">
          <el-form-item label="流程名称">
            <el-input v-model="form.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="流程标识">
            <el-input v-model="form.key" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <headerTitle
        v-show="active == 0"
        title="流程执行人/流程图"
        style="margin-top: 30px"
      ></headerTitle>
      <el-table
        v-show="active == 0"
        :data="datasource"
        border
        style="margin-bottom: 10px"
      >
        <el-table-column
          label="任务节点"
          align="center"
          prop="taskDefinitionName"
          width="140"
          fixed
        />
        <el-table-column
          label="执行人"
          align="center"
          prop="options"
          min-width="140px"
        >
          <template v-slot="scope">
            <div v-if="scope.row.type !== 60 && scope.row.options.length > 0">
              <el-tag
                size="medium"
                :key="option"
                v-for="option in scope.row.options"
              >
                {{ getAssignRuleOptionName(scope.row, option) }}
              </el-tag>
            </div>

            <el-tag size="medium" v-if="scope.row.type === 60">
              {{ getAssignRuleOptionName(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <my-process-viewer
        v-show="active == 0"
        style="min-width: 100%; height: 200px"
        key="designer"
        v-model="bpmnXML"
      />
      <el-table v-show="active == 1" :data="form.noticeScope" border>
        <el-table-column
          label="类型"
          align="center"
          prop="taskDefinitionName"
          width="140"
          fixed
        />
        <el-table-column
          label="结果"
          align="center"
          prop="options"
          min-width="140px"
        >
        </el-table-column>
      </el-table>
    </el-form>

    <div slot="footer">
      <!--      <el-button-->
      <!--        type="primary"-->
      <!--        size="small"-->
      <!--        v-if="active == 0"-->
      <!--        @click="() => (active = 1)"-->
      <!--        >下一步-->
      <!--      </el-button>-->
      <!--      <el-button-->
      <!--        type="primary"-->
      <!--        size="small"-->
      <!--        v-if="active == 1"-->
      <!--        @click="() => (active = 0)"-->
      <!--        >上一步-->
      <!--      </el-button>-->
      <el-button type="primary" size="small" @click="submit" v-click-once
        >提交</el-button
      >
      <el-button
        v-if="isNotNeedProcess && $hasPermission('eom:common:submitrelease')"
        type="primary"
        size="small"
        @click="submit1"
        v-click-once
        >提交并发布</el-button
      >
      <el-button size="small" @click="cancel">关闭</el-button>
    </div>
  </ele-modal>
</template>
<script>
  import {
    getModelPage,
    getProcessDefinitionBpmnXML,
    getProcessDefinitionInfo,
    getTaskAssignRuleList,
    listAllUserBind,
    listSimpleUserGroups,
    processInstanceCreateAPI,getProduceTreeByCode
  } from './api';
  import { treeClassifyCodeEnum } from '@/enum/dict';
  import { listRoles } from '@/api/system/role';
  import { listOrganizations } from '@/api/system/organization';
  import dictMixins from '@/mixins/dictMixins';
  import { getByCode } from '@/api/system/dictionary-data';

  export default {
    name: 'processSubmitDialog',
    mixins: [dictMixins],
    props: {
      processSubmitDialogFlag: {
        type: Boolean,
        default: false
      },
      isNotNeedProcess: {
        type: Boolean,
        default: false
      },
      approvalStatus: {
        type: Number,
        default: 2
      },
      apiFunName: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        form: {
          LCFL: '',
          FQLC: '',
          processDefinitionId: '',
          name: '',
          businessId: '',
          noticeScope: [],
          businessKey: '',
          formCreateUserId: ''
        },
        active: 0,
        bpmnXML: null,
        LCFLList: [],
        processList: [],
        datasource: [],
        roleOptions: [],
        deptOptions: [],
        deptTreeOptions: [],
        postOptions: [],
        userOptions: [],
        userGroupOptions: [],
        dictList: {},
        rules: {}
      };
    },
    async created() {
      let typeObj = await getProduceTreeByCode(
        'PROCESS001'
      );
      this.LCFLList = typeObj[0].children;

      // 获得角色列表
      this.roleOptions = [];
      listRoles({
        current: 1,
        size: 9999
      }).then((data) => {
        this.roleOptions.push(...data.list);
      });
      // 获得部门列表
      this.deptOptions = [];
      this.deptTreeOptions = [];
      listOrganizations().then((data) => {
        this.deptOptions.push(...data);
        this.deptTreeOptions.push(...this.handleTree(data, 'id'));
      });
      // 获得岗位列表 暂无岗位概念
      this.postOptions = [];
      /*listSimplePosts().then(response => {
  this.postOptions.push(...response.data);
});*/
      // 获得用户列表
      this.userOptions = [];
      listAllUserBind().then((data) => {
        this.userOptions.push(...data);
      });
      // 获得用户组列表
      this.userGroupOptions = [];
      listSimpleUserGroups().then((response) => {
        this.userGroupOptions.push(...response);
      });

      //this.dictEnum['工作流任务分配自定义脚本']
      await this.getDictList('bpm_task_assign_script');
      await this.getDictList('work_type');
    },
    methods: {
      init(row = {}) {
        this.form = { ...this.form, ...row };
        // this.form.businessId = row.id;
        // this.form.businessKey = row.businessKey;
        // this.form.formCreateUserId = row.createUserId;
        this.getDefaultInfo(row.businessKey);
      },
      async getDefaultInfo(businessKey) {
        let info = await getProcessDefinitionInfo({ code: businessKey });
        this.form.LCFL = info?.category;
        this.form.FQLC = info?.modelId;
        this.form.name = info?.name;
        this.form.key = info?.key;
        this.form.processDefinitionId = info?.id;
        if (this.form.LCFL) await this.getProcessList(this.form.LCFL);
        if (this.form.FQLC) {
          await this.getProcessDefinitionBpmnXMLInfo(info.id);
          await this.getTaskAssignRuleListInfo({
            modelId: info.modelId,
            processDefinitionId: info.id
          });
        }
      },
      async changeLCFL(val) {
        this.bpmnXML = null;
        this.form.processDefinitionId = null;
        this.form.FQLC = null;
        await this.getProcessList(val);
      },
      async getProcessList(val) {
        let params = {
          pageNo: 1,
          pageSize: 999,
          processTypeId: val
        };
        const { list } = await getModelPage(params);
        this.processList = list.filter((item) => item.processDefinition);
      },
      async changeFQLC(val) {
        if (!val) return;
        let find = this.processList.find((item) => item.id === val) || {};
        this.form.name = find.name;
        this.form.key = find.key;
        this.form.processDefinitionId = find.processDefinition.id;
        await this.getProcessDefinitionBpmnXMLInfo(find.processDefinition.id);
        await this.getTaskAssignRuleListInfo({
          modelId: find.id,
          processDefinitionId: find.processDefinition.id
        });
      },
      async getProcessDefinitionBpmnXMLInfo(val) {
        // 加载流程图
        this.bpmnXML = await getProcessDefinitionBpmnXML(val);
      },
      async getTaskAssignRuleListInfo(find) {
        this.datasource = await getTaskAssignRuleList({
          modelId: find.modelId,
          processDefinitionId: find.processDefinitionId
        });
      },
      getAssignRuleOptionName(row, option) {
        console.log(row,'row')
        if (row.type == 10) {
          for (const roleOption of this.roleOptions) {
            if (roleOption.id === option) {
              return roleOption.name;
            }
          }
        } else if (row.type === 20 || row.type === 21) {
          for (const deptOption of this.deptOptions) {
            if (deptOption.id === option) {
              return deptOption.name;
            }
          }
        } else if (row.type === 22) {
          option = option + ''; // 转换成 string
          return this.getDictV('work_type', option);
        } else if (row.type === 30 || row.type === 31 || row.type === 32) {
          for (const userOption of this.userOptions) {
            if (userOption.id === option) {
              return userOption.nickname || userOption.name;
            }
          }
        } else if (row.type === 40) {
          for (const userGroupOption of this.userGroupOptions) {
            if (userGroupOption.id === option) {
              return userGroupOption.name;
            }
          }
        } else if (row.type === 50) {
          option = option + ''; // 转换成 string
          return this.getDictV(
            'bpm_task_assign_script',
            option
          );
        } else if (row.type === 60) {
          return row.variableName;
        }
        return '未知(' + option + ')';
      },
      /**
       * 构造树型结构数据
       * @param {*} data 数据源
       * @param {*} id id字段 默认 'id'
       * @param {*} parentId 父节点字段 默认 'parentId'
       * @param {*} children 孩子节点字段 默认 'children'
       * @param {*} rootId 根Id 默认 0
       */
      handleTree(data, id, parentId, children, rootId) {
        id = id || 'id';
        parentId = parentId || 'parentId';
        children = children || 'children';
        rootId =
          rootId ||
          Math.min.apply(
            Math,
            data.map((item) => {
              return item[parentId];
            })
          ) ||
          0;
        //对源数据深度克隆
        const cloneData = JSON.parse(JSON.stringify(data));
        //循环所有项
        const treeData = cloneData.filter((father) => {
          let branchArr = cloneData.filter((child) => {
            //返回每一项的子级数组
            return father[id] == child[parentId];
          });
          branchArr.length > 0 ? (father.children = branchArr) : '';
          //返回第一层
          return father[parentId] == rootId;
        });
        return treeData !== '' ? treeData : data;
      },
      getDictV(code, val) {
        if (!this.dictList[code]) return '';
        return this.dictList[code].find((item) => item.value == val)?.label;
      },
      async getDictList(code) {
        let { data: res } = await getByCode(code);
        this.dictList[code] = res.map((item) => {
          let values = Object.keys(item);
          return {
            value: values[0],
            label: item[values[0]]
          };
        });
      },
      async submit() {
        await processInstanceCreateAPI(this.form);
        this.$message('提交审核成功');
        this.$emit('reload');
        this.cancel();
      },
      async submit1() {
        let params = {
          id: this.form.businessId,
          approvalStatus: this.approvalStatus,
          ...this.form
        };
        await this[this.apiFunName](params);
        //await processInstanceUpdateStatusAPI(params);
        this.$message('提交发布成功');
        this.$emit('reload');
        this.cancel();
      },
      cancel() {
        this.$emit('update:processSubmitDialogFlag', false);
      }
    }
  };
</script>
<style scoped lang="scss"></style>