kd-aiot-frontend-eom/src/views/contractManage/contractReview/components/addDialog.vue

<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible="addFlag"
    :title="title"
    append-to-body
    :close-on-click-modal="false"
    width="1100px"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <div style="height: 100%;">
      <div>
        <el-form
          class="ele-form-search"
        >
          <el-row
            :gutter="15"
            style="display: flex; align-items: center"
          >
            <el-col v-bind="{ span: 10 }">
              <el-form-item label="单据：" label-width="60px">
                <el-select v-model="formId"
                    @change="init"
                >
                  <el-option
                    v-for="(item, index) in list"
                    :key="index"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="display: flex; height: 100%; justify-content: space-between">
        <div class="form-box">
          <el-form
            ref="form1"
            :rules="rules"
            class="el-form-box"
            :model="form"
            label-width="90px"
            :label-position="'left'"
            style="padding: 10px"
          >
            <el-row>
              <el-col :span="24">
                <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="24">
                <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-form>
          <fm-generate-form
            :preview="true"
            class="el-form-box"
            v-if="Object.keys(form?.formJson || {}).length !== 0"
            :data="jsonData"
            :value="form.valueJson"
            ref="generateForm"
          >
            <!-- 客户名称 -->
            <template v-slot:eom_contact="scope">
              <div class="eom_contact">
                <el-input
                  v-model="scope.model.eom_contact.name"
                  style="width: 100%"
                  @click.native="addContact('eom_contact')"
                ></el-input>
              </div>
            </template>
          
          </fm-generate-form>
        </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.type !== 70 &&
                      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 ||
                      scope.row.type === 70 ||
                      scope.row.type === 80
                    "
                  >
                    {{ 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>

    <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>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="small" v-click-once @click="submit">提交</el-button>
      <el-button size="small" @click="cancel">关闭</el-button>
      <staffSelection
        ref="staffSelection"
        @confirm="getTreeList"
      ></staffSelection>
    </div>
    <parentList
      ref="parentRef"
      @changeParent="handleConcatConfirm"
    ></parentList>
  </ele-modal>
</template>
<script>
  import {
    getModelPage,
    getProcessDefinitionBpmnXML,
    processInstanceCreateAPI,
    getTaskAssignRuleList,
    listAllUserBind,
    listSimpleUserGroups,
  } from './api';
  import { listRoles } from '@/api/system/role';
  import dictMixins from '@/mixins/dictMixins';
  import { getModel } from '@/api/bpm/model';
  import { getToken } from '@/utils/token-util';
  import { mapGetters } from 'vuex';
  import staffSelection from '@/components/staffSelection/staffSelection.vue';
  import dayjs from 'dayjs';
  import parentList from '@/views/saleManage/contact/components/parentList.vue';

  import { treeClassifyCodeEnum } from '@/enum/dict';
  import { listOrganizations } from '@/api/system/organization';
  import { getByCode } from '@/api/system/dictionary-data';
  import { getGroupUserTree, getProduceTreeByCode } from '@/api/main';
  import { topLevel1, topLevel2, topLevel3 } from '@/enum/dict';
  import { parameterGetByCode } from '@/api/main/index.js';
  export default {
    name: 'processSubmitDialog',
    components: { staffSelection, parentList },
    mixins: [dictMixins],
    props: {
      addFlag: {
        type: Boolean,
        default: false
      },
      list: {
        type: Array,
        default: () => []
      },
    },
    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: ''
        },
        formId: '',
        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: {},
        editForm: {
          start: '',
          end: '',
          days: ''
        },
      };
    },
    computed: {
      ...mapGetters(['user']),
      modelWidth() {
        let width =
          this.jsonData.config?.platform &&
          this.jsonData.config.platform === 'pc'
            ? 1100
            : 450;
        if (this.isRight) {
          return width + 350 + 'px';
        } else {
          return width + 'px';
        }
      }
    },
    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() {
    },
    methods: {
      async addContact(type) {
        console.log(type);
        let data = await this.$refs.generateForm.getData(false);
        console.log('data', data);
        data[type] = {
          id: '',
          name: ''
        };
        this.$refs.generateForm.setData({
          type: data[type]
        });
        let item = {
          id: data[type].id
        };
        this.$refs.parentRef.open(item);
      },

      async handleConcatConfirm(item) {
        console.log('选择的客户', item);

        let data = await this.$refs.generateForm.getData(false);
        data['eom_contact'] = {
          id: item.id,
          name: item.name
        }
        this.$refs.generateForm.setData({
          'eom_contact': data['eom_contact']
        });
        console.log('data~~~~', data);
      },
      async init(id) {
        const row = this.list.find(item => item.id === id) || {};
        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);
        console.log('jsonData', this.jsonData);

        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.groupIdList;
            }
          }
          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 });
        parameterGetByCode({
          code: 'wt_collaborative_bpm'
        }).then((res) => {
          if (!res.value||res.value=='1') {
            this.form.FQLC = info?.id;
            this.form.name = this.title;
            this.form.key = info?.key;
          }
        });
        this.form.LCFL = info?.category;

        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;
        } else if (row.type === 70) {
          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 + ')';
      },

      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) => {
          console.log('data~~~', data);
          return data;
        }).catch((err) => {
          this.$message.error(err);
          console.log('err~~~', err);
        });
      },

      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';
        console.log('formformformform', this.form);
        await processInstanceCreateAPI({
          ...this.form,
          variables: { 
            ...this.form.valueJson, 
            businessCode: this.form.code,
            businessName: this.form.name,
            businessType: this.form.categoryName 
          }
        });
        this.$message('提交审核成功');
        this.$emit('reload');
        this.cancel();
      },
      cancel() {
        this.$emit('update:addFlag', false);
      },
      getDays(start, end) {
        const startDay = dayjs(start);
        const endDay = dayjs(end);
        const diffInMilliseconds = endDay.diff(startDay);

        // 计算天数
        const days = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
        // 计算剩余小时数
        const hours = Math.floor(
          (diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
        );
        // 计算剩余分钟数
        const minutes = Math.floor(
          (diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60)
        );
        // 计算剩余秒数
        const seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);

        let result = '';
        if (days > 0) result += `${days} 天 `;
        if (hours > 0) result += `${hours} 小时 `;
        if (minutes > 0) result += `${minutes} 分钟 `;
        if (seconds > 0) result += `${seconds} 秒`;
        return result.trim();
      }
    }
  };
</script>
<style scoped lang="scss">
  .form-box {
    // max-height: 500px;
    min-width: 400px;
    overflow: auto;
    background: #4298fd0d;
  }
  ::v-deep .el-dialog {
    min-width: 400px;
    .el-dialog__header {
      background: #1890ffd6;
    }
    .el-dialog__title,
    .el-dialog__close {
      color: #ffffff;
    }
  }
</style>