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="modelWidth"
    :before-close="cancel"
    :maxable="true"
    :resizable="true"
  >
    <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:blank_adopzrdd="scope">
            <el-button
              type="primary"
              size="small"
              @click="addNewRow('blank_adopzrdd')"
              style="margin-bottom: 10px"
              >添加报销事项</el-button
            >

            <div
              v-for="(item, index) in scope.model.blank_adopzrdd"
              :key="index"
            >
              <div class="blank_adopzrdd">
                <span>{{ index + 1 }}报销事项：</span>
                <el-input
                  v-model="scope.model.blank_adopzrdd[index].remark"
                  type="textarea"
                  style="width: calc(100% - 80px)"
                ></el-input>
              </div>
              <div class="blank_adopzrdd">
                <span @click="delNewRow('blank_adopzrdd', index)"
                  ><i
                    class="el-icon-delete"
                    style="color: #f56c6c; cursor: pointer"
                  ></i
                  >金额：</span
                >
                <el-input
                  v-model="scope.model.blank_adopzrdd[index].price"
                  type="number"
                  style="width: calc(100% - 80px)"
                  @change="changePrice(scope.model.blank_adopzrdd)"
                ></el-input>
              </div>
              <div class="blank_adopzrdd">
                <span>附件：</span>
                <fileMain v-model="scope.model.blank_adopzrdd[index].file" ></fileMain>
              </div>
            </div>
          </template>

          <!-- 客户名称 -->
          <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>
          <!-- 关联工单 -->
          <template v-slot:manage_workorder="scope">
            <div class="manage_workorder">
              <el-input
                v-model="scope.model.manage_workorder.code"
                style="width: 100%"
                @click.native="addWorkOrder('manage_workorder')"
                placeholder="点击选择关联工单"
              ></el-input>
            </div>
          </template>
          <!-- 差旅交通 -->
          <template v-slot:blank_business_component="scope">
            <businessComponent
              ref="blank_business_component"
              id="blank_business_component"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></businessComponent>
          </template>

          <!-- 印章使用 -->
          <template v-slot:blank_use_seal="scope">
            <useSealComponent
              ref="blank_use_seal"
              id="blank_use_seal"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></useSealComponent>
          </template>

          <!-- 资质使用 -->
          <template v-slot:blank_use_qualification="scope">
            <useQualificationComponent
              ref="blank_use_qualification"
              id="blank_use_qualification"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></useQualificationComponent>
          </template>

          <!-- 产品规格 -->
          <template v-slot:blank_product_specification="scope">
            <productSpecificationComponent
              ref="blank_product_specification"
              id="blank_product_specification"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></productSpecificationComponent>
          </template>

          <!-- 事件 -->
          <template v-slot:blank_event_component="scope">
            <eventComponent
              ref="blank_event_component"
              id="blank_event_component"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></eventComponent>
          </template>

          <!-- 补发 -->
          <template v-slot:blank_reissue_component="scope">
            <reissueComponent
              ref="blank_reissue_component"
              id="blank_reissue_component"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></reissueComponent>
          </template>
          <!-- 申领单（临床/非临床） -->
          <template v-slot:blank_application_component="scope">
            <applicationComponent
              ref="blank_application_component"
              id="blank_application_component"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></applicationComponent>
          </template>  
          <!-- 采购申请单（行政采购） -->
          <template v-slot:blank_purchase_requisition="scope">
            <purchaseRequisitionComponent
              ref="blank_purchase_requisition"
              id="blank_purchase_requisition"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></purchaseRequisitionComponent>
          </template>
          <!-- 出差申请单 -->
          <template v-slot:blank_business_trip="scope">
            <businessTripComponent
              ref="blank_business_trip"
              id="blank_business_trip"
              :generateForm="$refs.generateForm"
              :info="scope.model"
            ></businessTripComponent>
          </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 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" v-click-once @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>
    <parentList
      ref="parentRef"
      @changeParent="handleConcatConfirm"
    ></parentList>

    <SHGDListDialog
      ref="SHGDListDialogRef"
      @changeParent="getSHGDData"
    ></SHGDListDialog>
  </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';
  import { topLevel1, topLevel2, topLevel3 } from '@/enum/dict';
  import dayjs from 'dayjs';
  import parentList from './components/parentList.vue';
  import { number } from 'echarts';
  import { del } from 'vue';
  import businessComponent from './components/businessComponent.vue';
  import useSealComponent from './components/useSealComponent.vue';
  import useQualificationComponent from './components/useQualificationComponent.vue';
  import productSpecificationComponent from './components/productSpecificationComponent.vue';
  import eventComponent from './components/eventComponent.vue';
  import reissueComponent from './components/reissueComponent.vue';
  import SHGDListDialog from './components/SHGDListDialog.vue';
  import applicationComponent from './components/applicationComponent.vue';
  import purchaseRequisitionComponent from './components/purchaseRequisitionComponent.vue';
  import businessTripComponent from './components/businessTripComponent.vue';
  import { parameterGetByCode } from '@/api/main/index.js';

  export default {
    name: 'processSubmitDialog',
    components: {
      visibilityRangeDialog,
      staffSelection,
      parentList,
      businessComponent,
      useSealComponent,
      useQualificationComponent,
      productSpecificationComponent,
      eventComponent,
      reissueComponent,
      SHGDListDialog,
      applicationComponent,
      purchaseRequisitionComponent,
      businessTripComponent
    },
    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: {},
        editForm: {
          start: '',
          end: '',
          days: ''
        },
        componentRef: [
          'blank_business_component',
          'blank_use_seal',
          'blank_use_qualification',
          'blank_product_specification',
          'blank_event_component',
          'blank_reissue_component',
          'blank_application_component',
          'blank_purchase_requisition',
          'blank_business_trip'
        ]
      };
    },
    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['工种类型']);
      await this.getDictList(this.dictEnum['协同办公分类']);
    },
    mounted() {
      //this.isRight = false
    },
    methods: {
      async addNewRow(key) {
        console.log(key);
        let data = await this.$refs.generateForm.getData(false);
        data[key].push({
          price: '',
          remark: ''
        });
        this.$refs.generateForm.setData({
          key: data[key]
        });
      },
      async delNewRow(key, index) {
        let data = await this.$refs.generateForm.getData(false);
        data[key] = data[key].filter((item, index1) => index1 != index);
        this.$refs.generateForm.setData({
          [key]: data[key]
        });
        this.changePrice(data[key]);
      },
      changePrice(data) {
        let num = 0;
        data.forEach((item) => {
          num += Number(item.price);
        });
        this.$refs.generateForm.setData({
          input_jd9ouzyh: num
        });
      },

      // 获取组件的中文名称，用于错误提示
      getComponentName(componentKey) {
        const nameMap = {
          blank_business_component: '差旅交通',
          blank_use_seal: '印章使用',
          blank_use_qualification: '资质使用',
          blank_product_specification: '产品规格',
          blank_event_component: '事件',
          blank_reissue_component: '补发信息',
          blank_application_component: '申领单',
          blank_purchase_requisition: '采购申请单',
          blank_business_trip: '出差申请单'
        };
        return nameMap[componentKey] || componentKey;
      },

      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 addWorkOrder(type) {
        this.$refs.SHGDListDialogRef.open();
      },
      getSHGDData(workOrder) {
        if (!workOrder?.code) {
          this.$message.warning('选中的工单缺少编码，请重新选择');
          return;
        }
        this.$refs.generateForm.getData(false).then((currentFormData) => {
          currentFormData.manage_workorder = {
            code: workOrder.code,
            id: workOrder.id || '',
            name: workOrder.name || ''
          };
          this.$refs.generateForm.setData({
            manage_workorder: currentFormData.manage_workorder
          });
          this.form.valueJson.manage_workorder =
            currentFormData.manage_workorder;
        });
      },
      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(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);
        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 == 11) {
          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) => {
            return data;
          })
          .catch((err) => {
            this.$message.error(err);
            console.log(err);
            throw 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() {
        try {
          // console.log('this.form~~~', this.$refs.businessComponentRef.form);

          // const businessComponentForm = this.$refs.businessComponentRef.form;
          let data = await this.$refs.generateForm.getData(false);
          // data['blank_business_component'] = businessComponentForm.blank_business_component;
          // this.$refs.generateForm.setData({
          //   'blank_business_component': data['blank_business_component']
          // });
          // 获取所有组件的引用
          let validArr = [];
          // 过滤出存在于componentRef中的键
          Object.keys(data).forEach((key) => {
            if (this.componentRef.includes(key)) {
              validArr.push(key);
            }
          });

          // 检查每个组件的数据是否为空
          let emptyComponents = [];
          validArr.forEach((item) => {
            const val = data[item];
            // 为空（null/undefined/空字符串）或为数组且长度为0，均视为未填写
            if (
              val === null ||
              val === undefined ||
              val === '' ||
              (Array.isArray(val) && val.length === 0)
            ) {
              emptyComponents.push(item);
            }
          });

          // 如果有未填写的组件，显示提示信息
          if (emptyComponents.length > 0) {
            this.$message.warning(
              `请填写完整信息：${emptyComponents
                .map((comp) => this.getComponentName(comp))
                .join('、')}`
            );
            // this.$message.warning(`请填写完整信息`);
            return false;
          }

          // 使用Promise.all并行校验所有组件
          // try {
          //   await Promise.all(validArr.map(key => {
          //     if (this.$refs[key] && typeof this.$refs[key].validateForm === 'function') {
          //       return this.$refs[key].validateForm();
          //     }
          //     return Promise.resolve(true); // 如果组件不存在或没有validateForm方法，默认通过
          //   }));
          //   console.log('所有组件校验通过');
          // } catch (error) {
          //   console.error('表单校验失败:', error);
          //   this.$message.error('表单校验失败，请检查必填项');
          //   return false; // 任一组件校验失败则整体失败
          // }
          // console.log('data~~~~', data);
          this.form.valueJson = await this.generateFormValid();
          this.form.processType = '1';
          console.log('formformformform', this.form);
          console.log('this.form.dictList', this.dictList);
          await processInstanceCreateAPI({
            ...this.form,
            variables: {
              ...this.form.valueJson,
              businessCode: this.form.code,
              businessName: this.form.name,
              businessType: this.dictList['collaborative_type']?.find(
                (item) => item.value == this.form.dictType
              )?.label
            }
          });
          this.$message('提交审核成功');
          this.$emit('reload');
          this.cancel();
        } catch (error) {
          console.error('提交失败:', error);
          // 错误已经在generateFormValid中处理，这里不需要重复处理
        }
      },
      cancel() {
        this.$emit('update:processSubmitDialogFlag', 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">
  .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;
    background: #4298fd0d;
  }
  ::v-deep .el-dialog {
    min-width: 400px;
    .el-dialog__header {
      background: #1890ffd6;
    }
    .el-dialog__title,
    .el-dialog__close {
      color: #ffffff;
    }
  }
  .blank_adopzrdd {
    display: flex;
    align-items: center;
    > span {
      display: inline-block;
      width: 80px;
    }
    margin-bottom: 10px;
  }
</style>