kd-aiot-frontend-pro/src/BIZComponents/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="60%"
    :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: 300px"
        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">完成</el-button>
      <el-button size="small" @click="cancel">关闭</el-button>
    </div>
  </ele-modal>
</template>
<script>
import {
  getModelPage,
  getProcessDefinitionBpmnXML,
  getProcessDefinitionInfo,
  getTaskAssignRuleList,
  processInstanceCreateAPI,
  listAllUserBind,
  listSimpleUserGroups
} 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 {getProduceTreeByCode} from "@/api/main";

export default {
  name: 'processSubmitDialog',
  mixins: [dictMixins],
  props: {
    processSubmitDialogFlag: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      form: {
        LCFL: '',
        FQLC: '',
        processDefinitionId: '',
        name: '',
        businessId: '',
        noticeScope: [],
        businessKey: ''
      },
      active: 0,
      bpmnXML: null,
      LCFLList: [],
      processList: [],
      datasource: [],
      roleOptions: [],
      deptOptions: [],
      deptTreeOptions: [],
      postOptions: [],
      userOptions: [],
      userGroupOptions: [],
      dictList: {},
      rules: {}
    };
  },
  async created() {
    let typeObj = await getProduceTreeByCode(
      treeClassifyCodeEnum['PROCESSTYPE']
    );
    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 = Object.assign( this.form, row);
      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) {
      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;
      }
      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()
    },
    cancel() {
      this.$emit('update:processSubmitDialogFlag', false);
    }
  }
};
</script>
<style scoped lang="scss"></style>