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

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible="processSubmitDialogFlag"
    v-if="processSubmitDialogFlag"
    title="提交审核"
    append-to-body
    :close-on-click-modal="false"
    width="50%"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <!--    <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="200px"
        >
          <template v-slot="scope">
            <div
              v-if="
                scope.row.type !== 60 &&
                scope.row.type !== 70 &&
                scope.row.type !== 71 &&
                scope.row.options.length > 0
              "
              style="display: flex; flex-wrap: wrap; gap: 4px; justify-content: center;"
            >
              <el-tag
                size="small"
                :key="option"
                v-for="option in scope.row.options"
                style="margin: 1px;"
                hit
              >
                {{ getAssignRuleOptionName(scope.row, option) }}
              </el-tag>
            </div>

            <el-tag
              size="small"
              v-if="
                scope.row.type === 60 ||
                scope.row.type === 70 ||
                scope.row.type === 80 ||
                scope.row.type === 71
              "
            >
              {{ getAssignRuleOptionName(scope.row) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="审批人选择"
          align="center"
          min-width="240px"
        >
          <template v-slot="scope">
            <el-select
              v-if="!isInitiatorNode(scope.row)"
              v-model="scope.row.selectedUsers"
              multiple
              filterable
              clearable
              placeholder="请选择审批人"
              style="width: 100%;"
            >
              <el-option
                v-for="user in getFilteredUserOptions(scope.row)"
                :key="user.id"
                :label="user.nickname || user.name"
                :value="user.id"
              />
            </el-select>
            <span v-else style="color: #909399; font-size: 12px;">发起人</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审批方式"
          align="center"
          prop="approvalType"
          width="100"
        >
          <template v-slot="scope">
            <el-tag
              :type="scope.row.approvalType === 1 ? 'success' : 'warning'"
              size="small"
            >
              {{ getApprovalTypeName(scope.row.approvalType) }}
            </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"
        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,
    produceroutingRelease
  } 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';
  import { topLevel1, topLevel2, topLevel3 } from '@/enum/dict';

  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: ''
      },
      customSubmit: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        form: {
          LCFL: '',
          FQLC: '',
          processDefinitionId: '',
          name: '',
          businessId: '',
          noticeScope: [],
          businessKey: '',
          formCreateUserId: ''
        },
        produceroutingRelease,
        active: 0,
        bpmnXML: null,
        LCFLList: [],
        processList: [],
        datasource: [],
        roleOptions: [],
        deptOptions: [],
        deptTreeOptions: [],
        postOptions: [],
        userOptions: [],
        userGroupOptions: [],
        dictList: {},
        rules: {},
        loading: null
      };
    },
    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(this.dictEnum['工作流任务分配自定义脚本']);
      await this.getDictList(this.dictEnum['工种类型']);
    },
    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
        });
        // 从 bpmnXML 解析每个节点是否是多实例，用于判断审批方式
        this.datasource.forEach(row => {
          row.approvalType = this.getApprovalTypeFromBpmn(row.taskDefinitionKey);
        });
      },
      getApprovalTypeFromBpmn(taskDefinitionKey) {
        // 如果 bpmnXML 不存在，默认单人审批
        if (!this.bpmnXML) return 1;
        // 在 BPMN XML 中找到该 userTask 节点的内容
        const regex = new RegExp(
          `<[^:]*:?userTask[^>]*\\s(id="${taskDefinitionKey}")[^>]*>[\\s\\S]*?</[^:]*:?userTask>`
        );
        const match = this.bpmnXML.match(regex);
        // 没有匹配到或没有多实例配置 → 单人审批；有多实例配置 → 多人审批
        return match && match[0].includes('multiInstanceLoopCharacteristics') ? 2 : 1;
      },
      getAssignRuleOptionName(row, option) {
        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(this.dictEnum['工种类型'], 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(
            this.dictEnum['工作流任务分配自定义脚本'],
            option
          );
        } else if (row.type === 60) {
          return row.variableName;
        } else if (row.type === 70 || row.type == 71) {
          let data = JSON.parse(row.variableName);
          if (data.direction == 1) {
            return topLevel2.find((item) => item.value == data.topLevel)?.label;
          } else {
            return topLevel1.find((item) => item.value == data.topLevel)?.label;
          }
        } else if (row.type === 80) {
          let data = JSON.parse(row.variableName);
          return topLevel3.find((item) => item.value == data.topLevel)?.label;
        }
        return '未知(' + option + ')';
      },
      isInitiatorNode(row) {
        return row.type === 60;
      },
      getFilteredUserOptions(row) {
        return this.userOptions;
      },
      getApprovalTypeName(type) {
        return type === 1 ? '单人审批' : '多人审批';
      },
      /**
       * 构造树型结构数据
       * @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() {
        this.loading = this.$loading({
          lock: true,
          text: '提交中',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        // 从表格中构建审批人映射: { taskDefinitionKey: [userId1, userId2] }
        const assignee = {};
        this.datasource.forEach(row => {
          if (row.selectedUsers && row.selectedUsers.length > 0) {
            assignee[row.taskDefinitionKey] = row.selectedUsers;
          }
        });
        this.form.assignee = assignee;
        const submitPromise = this.customSubmit
          ? this.customSubmit(this.form.businessId, this.form)
          : processInstanceCreateAPI(this.form);
        await submitPromise
          .then((res) => {
            console.log(res, 'res');
            this.loading.close();
            this.$message('提交成功');
            this.cancel();
          })
          .catch((err) => {
            this.loading.close();
            console.error(err, 'err');
          });
      },
      async submit1() {
        this.loading = this.$loading({
          lock: true,
          text: '提交中',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let params = {
          id: this.form.businessId,
          approvalStatus: this.approvalStatus,
          ...this.form
        };
        // 从表格中构建审批人映射
        const assignee = {};
        this.datasource.forEach(row => {
          if (row.selectedUsers && row.selectedUsers.length > 0) {
            assignee[row.taskDefinitionKey] = row.selectedUsers;
          }
        });
        params.assignee = assignee;
        await this[this.apiFunName](params)
          .then((res) => {
            console.log(res, 'res');
            this.loading.close();
            this.$message('提交成功');
            this.cancel();
          })
          .catch((err) => {
            console.error(err, 'err');
            this.loading.close();
            // this.$message.error(err.message || '提交审核失败');
          });
        //await processInstanceUpdateStatusAPI(params);
        // this.$message('提交发布成功');
        // this.loading.close();
        // this.$emit('reload');
        // this.cancel();
      },
      cancel() {
        this.$emit('update:processSubmitDialogFlag', false);
        this.$emit('reload');
      }
    }
  };
</script>
<style scoped lang="scss"></style>