kd-aiot-frontend-wt/src/BIZComponents/processSubmitDialog/processSubmitDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible="processSubmitDialogFlag"
    :title="title"
    append-to-body
    :close-on-click-modal="false"
    :width="isRight ? '800px' : '450px'"
    :before-close="cancel"
  >
    <div style="display: flex; height: 100%; justify-content: space-between">
      <div class="form-box">
        <!--        <div style="text-align: center; padding: 5px">-->
        <!--          {{ form.name }}-->
        <!--        </div>-->
        <fm-generate-form
          :preview="true"
          class="el-form-box"
          v-if="Object.keys(form?.formJson || {}).length !== 0"
          :data="jsonData"
          :value="form.valueJson"
          ref="generateForm"
        >
        </fm-generate-form>
        <!--              <el-tree-->
        <!--                @check-change="handleTreeChange"-->
        <!--                show-checkbox-->
        <!--                node-key="id"-->
        <!--                class="filter-tree"-->
        <!--                check-strictly-->
        <!--                :data="treeData"-->
        <!--                :props="defaultProps"-->
        <!--                :filter-node-method="filterNode"-->
        <!--                ref="tree"-->
        <!--              >-->
        <!--              </el-tree>-->
      </div>
      <div
        style="
          align-self: center;
          display: flex;
          color: #1890ff;
          cursor: pointer;
          width: 15px;
        "
        @click="() => (isRight = !isRight)"
      >
        <span
          style="
            align-self: center;

            transform: scale(1.5);
          "
          :class="isRight ? 'el-icon-caret-left' : 'el-icon-caret-right'"
        >
        </span>
        <span style="writing-mode: vertical-rl">选择流程</span>
      </div>
      <div style="flex: 1" v-if="isRight">
        <el-form
          ref="form"
          :rules="rules"
          class="el-form-box"
          :model="form"
          label-width="80px"
        >
          <el-row>
            <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>
            <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
            title="流程执行人/流程图"
            style="margin-top: 30px"
          ></headerTitle>
          <el-table
            :data="datasource"
            height="150px"
            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
            style="min-width: 100%; height: 200px"
            key="designer"
            v-model="bpmnXML"
          />
        </el-form>
      </div>
    </div>

    <div slot="footer">
      <el-form :model="form">
        <el-form-item label="通知人：">
          <el-button
            style="float: left; margin-top: 5px"
            icon="el-icon-circle-plus-outline"
            round
            @click="handleEditDataScope"
          ></el-button>
          <div style="display: flex; flex-direction: row; flex-wrap: wrap">
            <el-tag
              style="float: left; margin: 5px 5px 0 5px"
              v-for="(item, index) in form.noticeScope"
              :key="item.name"
              effect="plain"
              closable
              :title="item.name"
              @close="handleCloseTag(index)"
            >
              {{
                item.name.length > 3
                  ? item.name[0] + item.name[1] + item.name[2] + '...'
                  : item.name
              }}
            </el-tag>
          </div>

          <!--          <ele-tree-select-->
          <!--            @change="handleTreeChange"-->
          <!--            filterable-->
          <!--            style="width: 100%"-->
          <!--            ref="treeSelect"-->
          <!--            multiple-->
          <!--            clearable-->
          <!--            :data="treeData"-->
          <!--            v-model="treeList"-->
          <!--            placeholder="请选择"-->
          <!--            valueKey="id"-->
          <!--            labelKey="name"-->
          <!--            :checkStrictly="true"-->
          <!--          />-->
        </el-form-item>
      </el-form>
      <!--      <el-button-->
      <!--        type="primary"-->
      <!--        size="small"-->
      <!--        v-if="active == 0"-->
      <!--        @click="() => ((active = 1), (isRight = true))"-->
      <!--        >下一步-->
      <!--      </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>
      <!--      <visibility-range-dialog-->
      <!--        :visibilityRangeDialogFlag.sync="visibilityRangeDialogFlag"-->
      <!--        v-if="visibilityRangeDialogFlag"-->
      <!--        @getTreeList="getTreeList"-->
      <!--        ref="visibilityRangeDialogRef"-->
      <!--      ></visibility-range-dialog>-->
      <staffSelection
        ref="staffSelection"
        @confirm="getTreeList"
      ></staffSelection>
    </div>
  </ele-modal>
</template>
<script>
  import {
    getModelPage,
    getProcessDefinitionBpmnXML,
    getProcessDefinitionInfo,
    getTaskAssignRuleList,
    listAllUserBind,
    listSimpleUserGroups,
    processInstanceCreateAPI
  } 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 { getGroupUserTree, getProduceTreeByCode } from '@/api/main';
  import visibilityRangeDialog from './visibilityRangeDialog.vue';
  import { getModel } from '@/api/bpm/model';
  import { getProcessDefinitionList } from '@/api/bpm/definition';
  import { getToken } from '@/utils/token-util';
  import { mapGetters } from 'vuex';
  import staffSelection from '@/components/staffSelection/staffSelection.vue';
  export default {
    name: 'processSubmitDialog',
    components: { visibilityRangeDialog, staffSelection },
    mixins: [dictMixins],
    props: {
      processSubmitDialogFlag: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        visibilityRangeDialogFlag: false,
        isRight: false,
        jsonData: {},
        form: {
          LCFL: '',
          FQLC: '',
          processDefinitionId: '',
          name: '',
          businessId: '',
          noticeScope: [],
          formJson: {},
          valueJson: {},
          businessKey: ''
        },
        title: '',
        active: 0,
        bpmnXML: null,
        filterText: null,
        treeList: [],
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        LCFLList: [],
        processList: [],
        datasource: [],
        roleOptions: [],
        deptOptions: [],
        deptTreeOptions: [],
        postOptions: [],
        userOptions: [],
        userGroupOptions: [],
        dictList: {},
        rules: {}
      };
    },
    computed: {
      ...mapGetters(['user'])
    },
    async created() {
      let typeObj = await getProduceTreeByCode(
        treeClassifyCodeEnum['PROCESSTYPE']
      );
      //  await this.getTreeData();
      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['工种类型']);
    },
    mounted() {
      //this.isRight = false
    },
    methods: {
      async init(row = {}) {
        this.title = row.name; //'新建' + row.name + '单';
        this.form = _.cloneDeep(row);
        this.form.formId = row.id;
        this.$set(this.form, 'noticeScope', []);
        this.$set(this.form, 'LCFL', '');
        this.$set(this.form, 'FQLC', '');
        this.$set(this.form, 'name', '');
        this.$set(this.form, 'key', '');
        this.$set(this.form, 'valueJson', {});
        this.jsonData = JSON.parse(this.form.formJson.makingJson);
        this.jsonData.config.dataSource &&
          this.jsonData.config.dataSource.forEach((item) => {
            item.headers = {
              Authorization: getToken()
            };
            // item.url = item.url && item.url.replace('/api', this.APIUrl);
          });
        this.jsonData.list.forEach((item) => {
          if (item.type == 'deptAndUserCascader') {
          }
          if (item.type == 'deptCascader') {
            if (item.options.isDefaultLoginUser) {
              this.form.valueJson[item.model] = this.user.info.groupId;
            }
          }
          if (item.type == 'userSelect') {
            if (item.options.isDefaultLoginUser) {
              this.form.valueJson[item.model] = this.user.info.userId;
            }
          }
          if (item.type == 'imgupload') {
            // this.form.valueJson[item.model].length &&
            //   this.form.valueJson[item.model].forEach((item) => {
            //     //item.objectUrl = this.APIUrl +'/kd-aiot' + item.storePath
            //     // item.objectUrl = item.url;
            //     // console.log(item);
            //   });
          }
        });
        await this.getProcessDefinitionBpmnXMLInfo(this.form.processModelId);
        await this.getTaskAssignRuleListInfo({
          modelId: this.form.processModelId,
          processDefinitionId: this.form.processDefinitionId
        });
        await this.getDefaultInfo(row.processModelId);
      },
      async getDefaultInfo(businessKey) {
        let info = await getModel(businessKey);
        //let info = await getProcessDefinitionInfo({ id: businessKey });
        this.form.LCFL = info?.category;
        this.form.FQLC = info?.id;
        this.form.name = this.title;
        this.form.key = info?.key;
        if (this.form.LCFL) await this.getProcessList(this.form.LCFL);
      },
      async getProcessList(val) {
        let params = {
          pageNo: 1,
          pageSize: 999,
          processTypeId: val
        };
        const { list } = await getModelPage(params);
        this.processList = list.filter((item) => item.processDefinition);
      },
      async getProcessDefinitionBpmnXML(val) {
        this.bpmnXML = await getProcessDefinitionBpmnXML(val);
      },
      async getProcessDefinitionBpmnXMLInfo(val) {
        // 加载流程图
        let res = await getModel(val);
        this.bpmnXML = res.bpmnXml;
      },
      async getTaskAssignRuleListInfo(find) {
        this.datasource = await getTaskAssignRuleList({
          modelId: find.modelId,
          processDefinitionId: find.processDefinitionId
        });
      },
      handleEditDataScope() {
        this.$refs.staffSelection.open(this.form.noticeScope);
        // this.visibilityRangeDialogFlag = true;
        // this.$nextTick(() => {
        //   this.$refs.visibilityRangeDialogRef.init(this.form);
        // });
      },
      getTreeList(list) {
        list.forEach((item) => {
          item.type = 1;
        });
        this.form.noticeScope = list;
      },
      handleCloseTag(index) {
        this.form.noticeScope.splice(index, 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;
        }
        return '未知(' + option + ')';
      },
      async getTreeData() {
        this.treeData = await getGroupUserTree();
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -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]]
          };
        });
      },
      generateFormValid(validate = true) {
        return this.$refs.generateForm.getData(validate).then((data) => {
          return data;
        });
      },
      handleTreeChange() {
        this.$nextTick(() => {
          this.form.noticeScope =
            this.$refs.treeSelect.$refs.tree.getCheckedNodes();
          console.log(this.form.noticeScope);
        });
      },
      async changeLCFL(val) {
        this.bpmnXML = null;
        this.form.processDefinitionId = null;
        this.form.FQLC = null;
        await this.getProcessList(val);
      },
      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;
        this.form.processModelId = val;
        await this.getProcessDefinitionBpmnXML(find.processDefinition.id);
        await this.getTaskAssignRuleListInfo({
          modelId: find.id,
          processDefinitionId: find.processDefinition.id
        });
      },
      async submit() {
        this.form.valueJson = await this.generateFormValid();
        this.form.processType = '1';

        await processInstanceCreateAPI({
          ...this.form,
          variables: { ...this.form.valueJson }
        });
        this.$message('提交审核成功');
        this.$emit('reload');
        this.cancel();
      },
      cancel() {
        this.$emit('update:processSubmitDialogFlag', false);
      }
    }
  };
</script>
<style scoped lang="scss">
  .box {
    display: flex;
    height: 450px;

    .left-box {
      width: 55%;
      border-right: 1px solid #e2e4e7;
      padding-right: 15px;
      height: 100%;

      .el-tree {
        height: 85%;
        overflow-y: auto;
      }
    }

    .right-box {
      flex: 1;
      padding-left: 20px;
      height: 100%;

      .right-box-item {
        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .form-box {
    max-height: 500px;
    min-width: 400px;
    overflow: auto;
  }
  ::v-deep .el-dialog {
    min-width: 400px;
    .el-dialog__header {
      background: #1890ffd6;
    }
    .el-dialog__title,
    .el-dialog__close {
      color: #ffffff;
    }
  }
</style>