kd-aiot-frontend-eom/src/views/salesServiceManagement/components/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"
    :maxable="true"
    :resizable="true"
  >
    <div style="display: flex; height: 100%; justify-content: space-between">
      <div class="form-box">
        <fm-generate-form
          :data="formSchema"
          :value="form.valueJson"
          :remote="remoteFuncs"
          ref="generateForm"
          class="el-form-box"
        ></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="processForm"
          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.type !== 80 &&
                    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-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,
  getTaskAssignRuleList,
  listAllUserBind,
  listSimpleUserGroups,
  getModel
} 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';
import { topLevel1, topLevel2, topLevel3 } from '@/enum/dict';
import { getToken } from '@/utils/token-util';
import { mapGetters } from 'vuex';

export default {
  name: 'processSubmitDialog',
  mixins: [dictMixins],
  props: {
    processSubmitDialogFlag: {
      type: Boolean,
      default: false
    },
    formSchema: {
      type: Object,
      default: () => ({})
    },
    carByTemplate: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      title: '用车',
      isRight: false,
      remoteFuncs: {},

      // 流程核心数据：key默认值设为TYCSLC
      form: {
        LCFL: '', // 流程分类ID
        FQLC: '', // 发起流程ID（流程模型ID）
        processDefinitionId: '', // 流程定义ID
        name: '', // 流程名称
        key: 'TYCSLC', // 流程标识默认值
        valueJson: {}, // 表单提交数据
        processModelId: '' // 流程模型ID
      },

      // 流程基础选项列表
      LCFLList: [],
      processList: [],
      datasource: [],
      bpmnXML: null,

      // 执行人解析依赖数据
      roleOptions: [],
      deptOptions: [],
      userOptions: [],
      userGroupOptions: [],
      dictList: {}
    };
  },
  computed: {
    ...mapGetters(['user'])
  },
  async created() {
    // 1. 初始化基础数据（分类、角色、部门等）
    await this.initProcessBaseData();
    // 2. 通过流程标识（TYCSLC）查询关联的流程模型，自动赋值相关字段
    await this.initDefaultProcessByKey('TYCSLC');
  },
  methods: {
    /**
     * 1. 初始化流程基础数据（分类、角色、部门、用户组）
     */
    async initProcessBaseData() {
      // 加载流程分类列表
      const typeObj = await getProduceTreeByCode(
        treeClassifyCodeEnum['PROCESSTYPE']
      );
      this.LCFLList = typeObj[0]?.children || [];

      // 加载角色、部门、用户、用户组（用于执行人解析）
      await this.initBaseOptions();
    },

    /**
     * 2. 初始化角色/部门/用户/用户组选项
     */
    async initBaseOptions() {
      // 角色列表
      const roleRes = await listRoles({ current: 1, size: 9999 });
      this.roleOptions = roleRes.list || [];

      // 部门列表
      const deptRes = await listOrganizations();
      this.deptOptions = deptRes || [];

      // 用户列表
      const userRes = await listAllUserBind();
      this.userOptions = userRes || [];

      // 用户组列表
      const userGroupRes = await listSimpleUserGroups();
      this.userGroupOptions = userGroupRes || [];

      // 加载流程相关字典
      await this.getDictList(this.dictEnum['工作流任务分配自定义脚本']);
      await this.getDictList(this.dictEnum['工种类型']);
    },

    /**
     * 3. 新增：通过流程标识（key）查询关联流程模型，自动赋值分类、名称等字段
     * @param {string} targetKey - 目标流程标识（如TYCSLC）
     */
    async initDefaultProcessByKey(targetKey) {
      try {
        // 调用接口：按流程标识筛选流程模型（只查1条匹配数据）
        const { list } = await getModelPage({
          pageNo: 1,
          pageSize: 1,
          key: targetKey // 核心筛选条件：流程标识
        });

        if (list.length === 0) {
          this.$message.warning(`未找到标识为【${targetKey}】的流程模型，请检查配置`);
          return;
        }

        // 获取匹配的流程模型
        const defaultModel = list[0];
        // 自动赋值核心字段
        this.form.LCFL = defaultModel.category; // 流程分类（模型的分类ID）
        this.form.FQLC = defaultModel.id; // 发起流程（模型ID）
        this.form.name = defaultModel.name; // 流程名称（模型名称）
        this.form.processModelId = defaultModel.id; // 保存模型ID

        // 加载该分类下的流程列表（让“发起流程”下拉框显示可选项）
        await this.getProcessList(defaultModel.category);
        // 加载流程图和执行人列表（让默认流程显示完整信息）
        await this.changeFQLC(defaultModel.id);
      } catch (error) {
        console.error('通过流程标识初始化默认流程失败：', error);
        this.$message.error('默认流程加载失败，请手动选择流程');
      }
    },

    /**
     * 4. 切换流程分类：加载对应流程列表（修复清空key和name的问题）
     */
    async changeLCFL(val) {
      this.bpmnXML = null;
      this.form.processDefinitionId = '';
      this.form.FQLC = '';
      // 保留流程标识和名称，不清空
      // this.form.name = ''; 
      // this.form.key = '';

      // 加载当前分类下的流程列表
      await this.getProcessList(val);
    },

    /**
     * 5. 获取指定分类下的流程列表
     */
    async getProcessList(processTypeId) {
      const { list } = await getModelPage({
        pageNo: 1,
        pageSize: 999,
        processTypeId
      });
      // 过滤出有流程定义的有效流程
      this.processList = list.filter((item) => item.processDefinition);
    },

    /**
     * 6. 切换发起流程：加载流程图和执行人列表
     */
    async changeFQLC(val) {
      if (!val) return;

      const selectedProcess = this.processList.find((item) => item.id === val) || {};
      const processDef = selectedProcess.processDefinition || {};

      // 更新流程信息（选中流程时覆盖名称和标识）
      this.form.name = selectedProcess.name || this.title;
      this.form.key = selectedProcess.key || 'TYCSLC'; // 无key时 fallback 到默认值
      this.form.processDefinitionId = processDef.id || '';
      this.form.processModelId = val;

      // 加载流程图
      await this.getProcessDefinitionBpmnXMLInfo(val);
      // 加载执行人列表
      await this.getTaskAssignRuleListInfo({
        modelId: val,
        processDefinitionId: processDef.id
      });
    },

    /**
     * 7. 加载流程图XML数据
     */
    async getProcessDefinitionBpmnXMLInfo(modelId) {
      const res = await getModel(modelId);
      this.bpmnXML = res.bpmnXml;
    },

    /**
     * 8. 加载流程执行人列表
     */
    async getTaskAssignRuleListInfo(params) {
      this.datasource = await getTaskAssignRuleList(params);
    },

    /**
     * 9. 解析执行人显示名称
     */
    getAssignRuleOptionName(row, option) {
      if (row.type === 10) {
        const role = this.roleOptions.find((item) => item.id === option);
        return role?.name || `未知角色(${option})`;
      } else if (row.type === 20 || row.type === 21) {
        const dept = this.deptOptions.find((item) => item.id === option);
        return dept?.name || `未知部门(${option})`;
      } else if (row.type === 22) {
        return this.getDictV(this.dictEnum['工种类型'], option + '') || `未知工种(${option})`;
      } else if (row.type === 30 || row.type === 31 || row.type === 32) {
        const user = this.userOptions.find((item) => item.id === option);
        return user?.nickname || user?.name || `未知用户(${option})`;
      } else if (row.type === 40) {
        const group = this.userGroupOptions.find((item) => item.id === option);
        return group?.name || `未知用户组(${option})`;
      } else if (row.type === 50) {
        return this.getDictV(this.dictEnum['工作流任务分配自定义脚本'], option + '') || `未知脚本(${option})`;
      } else if (row.type === 60) {
        return row.variableName || '变量执行人';
      } else if (row.type === 70) {
        const data = JSON.parse(row.variableName || '{}');
        const levelList = data.direction === 1 ? topLevel2 : topLevel1;
        return levelList.find((item) => item.value === data.topLevel)?.label || '未知层级';
      } else if (row.type === 80) {
        const data = JSON.parse(row.variableName || '{}');
        return topLevel3.find((item) => item.value === data.topLevel)?.label || '未知层级';
      }
      return `未知类型(${option || '无'})`;
    },

    /**
     * 10. 获取字典标签
     */
    getDictV(dictCode, val) {
      if (!this.dictList[dictCode]) return '';
      return this.dictList[dictCode].find((item) => item.value === val)?.label || '';
    },

    /**
     * 11. 加载字典列表
     */
    async getDictList(dictCode) {
      const { data: res } = await getByCode(dictCode);
      this.dictList[dictCode] = res.map((item) => {
        const keys = Object.keys(item);
        return { value: keys[0], label: item[keys[0]] };
      });
    },

    /**
     * 12. 表单验证
     */
    generateFormValid(validate = true) {
      return this.$refs.generateForm.getData(validate).then((data) => data);
    },

    /**
     * 13. 提交流程
     */
    async submit() {
      try {
        this.form.valueJson = await this.generateFormValid();

        const submitData = {
          ...this.form,
          ...this.carByTemplate,
          processType: '1',
          variables: { ...this.form.valueJson }
        };

        this.$emit('formSubmit', submitData);
        this.cancel();
      } catch (error) {
        console.error('表单验证失败：', error);
        this.$message.warning('表单验证失败，请检查填写内容');
      }
    },

    /**
     * 14. 关闭弹窗：重置数据（保留key默认值）
     */
    cancel() {
      this.$emit('update:processSubmitDialogFlag', false);
      this.isRight = false;
      this.bpmnXML = null;
      this.datasource = [];
      // 重置时保留流程标识默认值TYCSLC
      this.form = {
        LCFL: '',
        FQLC: '',
        processDefinitionId: '',
        name: '',
        key: 'TYCSLC', // 保留默认值
        valueJson: {},
        processModelId: ''
      };
    }
  }
};
</script>

<style scoped lang="scss">
.form-box {
  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;
  }
}

::v-deep .el-table {
  margin-top: 10px;
  .el-table__header th {
    background: #f5f7fa;
  }
}

::v-deep .bpmn-viewer {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
</style>