hwmom-ui/src/views/dms/dmsBillsLubeInstanceActivity/trae.vue

<template>
    <div class="p-2">
      <!-- 顶部操作按钮区域 -->
      <el-card shadow="never" class="mb-[10px]">
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-button v-if="submitButtonShow" :loading="buttonLoading" type="info" @click="submitForm('draft')">暂存
            </el-button>
            <el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary" @click="submitForm('submit')">提交
            </el-button>
            <el-button v-if="approvalButtonShow" :loading="buttonLoading" type="primary" @click="approvalVerifyOpen">
              审批
            </el-button>
            <el-button v-if="billsInfo.billsLubeInstanceId && billsInfo.lubeStatus !== 'draft'" type="primary"
                      @click="handleApprovalRecord">
              流程进度
            </el-button>
          </div>
          <div>
            <el-button style="float: right" @click="goBack()">返回</el-button>
          </div>
        </div>
      </el-card>
      
      <!-- 工单信息区域 -->
      <h4 class="form-header h4">工单信息</h4>
      <el-card shadow="never" class="mb-[10px]">
        <el-form label-width="120px">
          <el-row>
            <el-col :span="8" :offset="2">
              <el-form-item label="工单编号">
                <el-input v-model="billsInfo.billsLubeCode" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="工单状态">
                <el-input v-model="billsStatusCheck" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="申请人">
                <el-input v-model="billsInfo.createBy" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-form-item label="申请时间">
                <el-input v-model="billsInfo.createTime" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16" :offset="2">
              <el-form-item label="备注">
                <el-input v-model="billsInfo.remark" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
      <!-- 流程步骤展示区域 -->
      <el-card shadow="never" class="mb-[10px]">
        <el-form ref="stepFormRef" :model="form" label-width="100px">
          <!-- 第一步 -->
          <h4 class="form-header h4" v-if="dmsBillsLubeInstanceActivityList.length > 0">已处理节点：步骤1</h4>
          <el-row v-if="dmsBillsLubeInstanceActivityList.length > 0">
            <el-col :span="8">
              <el-form-item label="润滑级别" prop="lubeLevel">
                <el-select v-model="form.lubeLevel" placeholder="润滑级别" disabled>
                  <el-option
                    v-for="dict in lube_level"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="润滑组别" prop="lubeGroup">
                <el-input v-model="form.lubeGroup" placeholder="请输入润滑组别" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="润滑负责人" prop="lubeSupervisor">
                <el-input v-model="form.lubeSupervisor" placeholder="请输入润滑负责人" disabled />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 中间步骤 (已处理的后续节点) -->
          <template v-for="(activity) in dmsBillsLubeInstanceActivityList" :key="activity.instanceActivityId">
            <div v-if="activity.processStepOrder && activity.processStepOrder > 1">
              <h4 class="form-header h4">{{ `已处理节点：步骤${activity.processStepOrder}` }}</h4>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="润滑级别">
                    <el-select
                      v-model="activity.lubeLevel"
                      placeholder="润滑级别"
                      disabled>
                      <el-option
                        v-for="dict in lube_level"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="润滑组别">
                    <el-input
                      v-model="activity.lubeGroup"
                      disabled
                      placeholder="润滑组别">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="润滑负责人">
                    <el-input
                      v-model="activity.lubeSupervisor"
                      disabled
                      placeholder="润滑负责人">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="处理意见">
                    <el-input
                      v-model="activity.processHandleResolution"
                      disabled
                      placeholder="处理意见">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </template>
  
          <!-- 当前步骤表单 (用于提交新节点) -->
          <div v-if="isUpdate">
            <h4 class="form-header h4">当前处理节点：步骤{{ nextStepOrder }}</h4>
            <el-form ref="nextStepFormRef" :model="nextStepForm" :rules="nextStepFormRules" label-width="100px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="润滑级别" prop="lubeLevel">
                    <el-select v-model="nextStepForm.lubeLevel" placeholder="润滑级别">
                      <el-option
                        v-for="dict in lube_level"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="润滑组别" prop="lubeGroup">
                    <el-input v-model="nextStepForm.lubeGroup" placeholder="润滑组别"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="润滑负责人" prop="lubeSupervisor">
                    <el-input v-model="nextStepForm.lubeSupervisor" placeholder="润滑负责人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="处理意见" prop="processHandleResolution">
                    <el-input v-model="nextStepForm.processHandleResolution" placeholder="处理意见"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="text-center mt-4">
                  <el-button type="primary" @click="submitNextStep">提 交</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-form>
      </el-card>
  
      <!-- 润滑计划详情区域 -->
      <el-card shadow="never">
        <h4 class="form-header h4 text-center">润滑计划详细信息</h4>
        <el-table v-loading="loading" :data="planLubeDetail">
          <el-table-column label="计划ID" align="center" prop="planLubeId" />
          <el-table-column label="设备名称" align="center" prop="deviceName" />
          <el-table-column label="润滑部位" align="center" prop="lubeStationName" />
          <el-table-column label="润滑标准" align="center" prop="lubeStandardCode" />
          <el-table-column label="操作描述" align="center" prop="operationDescription" />
        </el-table>
      </el-card>
      
      <!-- 提交组件 -->
      <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
      <!-- 审批记录 -->
      <approvalRecord ref="approvalRecordRef" />
      <el-dialog v-model="dialogVisible.visible" :title="dialogVisible.title" :before-close="handleClose" width="500">
        <el-select v-model="flowCode" placeholder="Select" style="width: 240px">
          <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="submitFlow()">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup name="DmsBillsLubeInstanceActivity" lang="ts">
  import { ref, reactive, toRefs, getCurrentInstance, onMounted, computed } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import type { FormInstance, FormRules } from 'element-plus';
  import { startWorkFlow } from '@/api/workflow/task';
  import SubmitVerify from '@/components/Process/submitVerify.vue';
  import ApprovalRecord from '@/components/Process/approvalRecord.vue';
  import { AxiosResponse } from 'axios';
  import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
  import {
    listDmsBillsLubeInstanceActivity,
    addDmsBillsLubeInstanceActivity
  } from '@/api/dms/dmsBillsLubeInstanceActivity';
  import {
    DmsBillsLubeInstanceActivityVO,
    DmsBillsLubeInstanceActivityForm
  } from '@/api/dms/dmsBillsLubeInstanceActivity/types';
  import { listDmsBillsLubeInstance, updateDmsBillsLubeInstance } from '@/api/dms/dmsBillsLubeInstance';
  import { getDmsPlanLubeDetail } from '@/api/dms/dmsPlanLubeDetail';
  import { DmsPlanLubeDetailVO } from "@/api/dms/dmsPlanLubeDetail/types";
  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const { lube_level, process_handle_status } = toRefs<any>(proxy?.useDict('lube_level', 'process_handle_status'));
  const route = useRoute();
  const router = useRouter();
  
  // 表单实例
  const stepFormRef = ref<FormInstance>();
  const nextStepFormRef = ref<FormInstance>();
  
  // 基础数据定义
  const loading = ref(true);
  const buttonLoading = ref(false);
  const dmsBillsLubeInstanceActivityList = ref<DmsBillsLubeInstanceActivityVO[]>([]);
  const billsInfo = ref<any>({});
  const planLubeDetail = ref<DmsPlanLubeDetailVO[]>([]);
  const billsStatusCheck = ref('');
  const isUpdate = ref(true);
  const planLubeId = ref('');
  const lubeInstanceId = route.params.lubeInstanceId as string;
  
  // 工作流相关
  const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
  const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
  const routeParams = ref<Record<string, any>>({});
  
  const flowCodeOptions = [
    {
      value: 'planlube',
      label: '润滑工单申请'
    }
  ];
  
  const flowCode = ref<string>('');
  
  const dialogVisible = reactive<DialogOption>({
    visible: false,
    title: '流程定义'
  });
  
  const submitFormData = ref<StartProcessBo>({
    businessId: '',
    flowCode: '',
    variables: {}
  });
  
  const taskVariables = ref<Record<string, any>>({});
  
  // 计算下一步序号
  const nextStepOrder = computed(() => {
    return dmsBillsLubeInstanceActivityList.value.length + 1;
  });
  
  // 表单数据 (用于展示第一个已处理节点的信息)
  const form = reactive<Partial<DmsBillsLubeInstanceActivityForm>>({
    lubeGroup: undefined,
    lubeSupervisor: undefined,
    lubeLevel: undefined,
    remark: undefined,
  });
  
  // 下一步表单 (用于提交新的节点)
  const nextStepForm = reactive<DmsBillsLubeInstanceActivityForm>({
    instanceActivityId: undefined,
    lubeInstanceId: lubeInstanceId,
    lubeGroup: undefined,
    lubeSupervisor: undefined,
    lubeLevel: undefined,
    processHandleResolution: undefined,
    processHandleStatus: undefined,
    processStepOrder: undefined,
    startTime: undefined,
    endTime: undefined,
    handleUserId: undefined,
    handleBy: undefined,
    handleTime: undefined,
    transferUserId: undefined,
    attr1: undefined,
    remark: undefined,
  });
  
  // 下一步表单校验规则
  const nextStepFormRules = reactive<FormRules>({
    lubeLevel: [{ required: true, message: "润滑级别不能为空", trigger: "change" }],
    lubeGroup: [{ required: true, message: "润滑组别不能为空", trigger: "blur" }],
    lubeSupervisor: [{ required: true, message: "润滑负责人不能为空", trigger: "blur" }],
    processHandleResolution: [{ required: true, message: "处理意见不能为空", trigger: "blur" }],
  });
  
  // 查询参数
  const queryParams = reactive({
    pageNum: 1,
    pageSize: 50,
    lubeInstanceId: lubeInstanceId,
  });
  
  // 初始化数据
  onMounted(() => {
    // 判断当前页面是查看还是编辑
    routeParams.value = proxy.$route.query;
    if(route.name === 'childDmsBillsLubeInstanceActivity') {
      isUpdate.value = true;
    } else if(route.name === 'selectChildDmsBillsLubeInstanceActivity') {
      isUpdate.value = false;
    }
  
    // 加载工单实例数据
    getDmsBillsLubeInstance();
    // 加载工单实例节点数据
    getList();
  });
  
  // 获取工单实例数据
  const getDmsBillsLubeInstance = async () => {
    try {
      const res = await listDmsBillsLubeInstance(queryParams);
      if (res.rows && res.rows.length > 0) {
        billsInfo.value = res.rows[0];
        // 确保 planLubeId 是字符串类型
        const lubeIdFromServer = res.rows[0].planLubeId;
        planLubeId.value = typeof lubeIdFromServer === 'number' ? String(lubeIdFromServer) : lubeIdFromServer;
  
        // 设置工单状态显示文本
        if (lube_level.value && billsInfo.value.lubeStatus !== undefined) {
          const statusItem = lube_level.value.find((item: any) => String(item.value) === String(billsInfo.value.lubeStatus));
          billsStatusCheck.value = statusItem ? statusItem.label : '未知状态';
        } else {
          billsStatusCheck.value = '未知状态';
        }
  
        // 获取润滑计划详情
        if (planLubeId.value) {
          getPlanLubeDetailData();
        }
      } else {
        proxy?.$modal.msgError("未查询到工单信息");
      }
    } catch (error) {
      console.error('获取工单实例数据失败', error);
      proxy?.$modal.msgError("获取工单实例数据失败");
    }
  };
  
  // 获取润滑计划详情
  const getPlanLubeDetailData = async () => {
    if (!planLubeId.value) return;
    loading.value = true;
    try {
      const res = await getDmsPlanLubeDetail(planLubeId.value);
      planLubeDetail.value = res && res.rows ? [res.rows] : [];
    } catch (error) {
      console.error('获取润滑计划详情失败', error);
      proxy?.$modal.msgError("获取润滑计划详情失败");
    } finally {
      loading.value = false;
    }
  };
  
  // 获取工单实例节点数据
  const getList = async () => {
    loading.value = true;
    try {
      const res = await listDmsBillsLubeInstanceActivity(queryParams);
      dmsBillsLubeInstanceActivityList.value = res.rows;
  
      // 填充第一步数据 (用于表单展示)
      if (res.rows && res.rows.length > 0) {
        Object.assign(form, {
          lubeGroup: res.rows[0].lubeGroup,
          lubeSupervisor: res.rows[0].lubeSupervisor,
          lubeLevel: res.rows[0].lubeLevel,
          remark: res.rows[0].remark
        });
  
        // 初始化下一步表单数据 (基于最后一个已处理节点)
        const lastActivity = res.rows[res.rows.length - 1];
        Object.assign(nextStepForm, {
          lubeGroup: lastActivity.lubeGroup,
          lubeSupervisor: lastActivity.lubeSupervisor,
          lubeLevel: lastActivity.lubeLevel,
          processHandleResolution: null,
          remark: ''
        });
      } else {
        // 如果没有已处理节点，则 nextStepForm 可能需要全新初始化或默认值
        Object.assign(nextStepForm, {
          lubeGroup: undefined,
          lubeSupervisor: undefined,
          lubeLevel: undefined,
          processHandleResolution: null,
          remark: ''
        });
      }
    } catch (error) {
      console.error('获取工单实例节点数据失败', error);
      proxy?.$modal.msgError("获取工单实例节点数据失败");
    } finally {
      loading.value = false;
    }
  };
  
  // 提交下一步节点
  const submitNextStep = async () => {
    if (!nextStepFormRef.value) return;
    
    await nextStepFormRef.value.validate(async (valid: boolean) => {
      if (valid) {
        try {
          loading.value = true;
          // 设置步骤序号
          nextStepForm.processStepOrder = nextStepOrder.value;
          
          // 提交新节点
          await addDmsBillsLubeInstanceActivity(nextStepForm);
          proxy?.$modal.msgSuccess("提交成功");
          
          // 刷新数据
          await getList();
          
          // 清空表单
          Object.assign(nextStepForm, {
            processHandleResolution: null,
            remark: ''
          });
        } catch (error) {
          console.error('提交节点失败', error);
          proxy?.$modal.msgError("提交失败");
        } finally {
          loading.value = false;
        }
      }
    });
  };
  
  // 工作流相关方法
  const handleClose = () => {
    dialogVisible.visible = false;
    flowCode.value = '';
    buttonLoading.value = false;
  };
  
  // 提交按钮
  const submitForm = (status: string) => {
    try {
      buttonLoading.value = true;
      if (status === 'draft') {
        // 暂存逻辑
        buttonLoading.value = false;
        proxy?.$modal.msgSuccess('暂存成功');
        goBack();
      } else {
        // 提交逻辑
        if ((billsInfo.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
          flowCode.value = flowCodeOptions[0].value;
          dialogVisible.visible = true;
          return;
        }
        
        // 说明启动过先随意传个参数
        if (flowCode.value === '' || flowCode.value === null) {
          flowCode.value = 'xx';
        }
        
        handleStartWorkFlow(billsInfo.value);
      }
    } finally {
      buttonLoading.value = false;
    }
  };
  
  const submitFlow = async () => {
    handleStartWorkFlow(billsInfo.value);
    dialogVisible.visible = false;
  };
  
  // 提交申请
  const handleStartWorkFlow = async (data: any): Promise<void> => {
    try {
      submitFormData.value.flowCode = flowCode.value;
      submitFormData.value.businessId = data.lubeInstanceId;
      // 流程变量
      taskVariables.value = {
        data: data
      };
      submitFormData.value.variables = taskVariables.value;
      const resp = await startWorkFlow(submitFormData.value);
      if (submitVerifyRef.value) {
        buttonLoading.value = false;
        submitVerifyRef.value.openDialog(resp.data.taskId);
      }
    } finally {
      buttonLoading.value = false;
    }
  };
  
  // 审批记录
  const handleApprovalRecord = (): void => {
    approvalRecordRef.value?.init(billsInfo.value.lubeInstanceId);
  };
  
  // 提交回调
  const submitCallback = async () => {
    await proxy.$tab.closePage(proxy.$route);
    goBack();
    // 不要返回任何值，确保函数返回void
  };
  
  // 返回
  const goBack = () => {
    proxy.$tab.closePage(proxy.$route);
    proxy.$router.go(-1);
  };
  
  // 审批
  const approvalVerifyOpen = async () => {
    submitVerifyRef.value?.openDialog(routeParams.value.taskId);
  };
  
  // 校验提交按钮是否显示
  const submitButtonShow = computed(() => {
    return (
      routeParams.value.type === 'add' ||
      (routeParams.value.type === 'update' &&
        billsInfo.value.status &&
        (billsInfo.value.status === 'draft' || billsInfo.value.status === 'cancel' || billsInfo.value.status === 'back'))
    );
  });
  
  // 校验审批按钮是否显示
  const approvalButtonShow = computed(() => {
    return routeParams.value.type === 'approval' && billsInfo.value.status && billsInfo.value.status === 'waiting';
  });
  </script>