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

<template>
  <div class="p-2">
    <!-- 操作按钮区域 -->
    <el-card shadow="never">
      <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">
            {{ currentStepName }}
          </el-button>
          <el-button 
            v-if="workOrder?.wfDefinitionId" 
            type="primary" 
            @click="handleApprovalRecord">
            流程进度
          </el-button>
        </div>
        <div>
          <el-button @click="goBack()">返回</el-button>
        </div>
      </div>
    </el-card>

    <!-- 工单基本信息区域 -->
    <el-card shadow="never" class="mb-[10px]">
      <h4 class="form-header">工单基本信息</h4>
      <el-form label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工单编号">
              <el-input v-model="workOrder.billsLubeCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工单状态">
              <el-input v-model="workOrderStatusText" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人">
              <el-input v-model="workOrder.createBy" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 当前步骤处理区域 -->
    <el-card shadow="never">
      <h4 class="form-header">{{ currentStepTitle }}</h4>
      <el-form 
        ref="processFormRef" 
        v-loading="loading" 
        :disabled="routeParams.type === 'view'" 
        :model="form" 
        :rules="rules" 
        label-width="120px">
        
        <el-row>
          <el-col :span="8">
            <el-form-item label="润滑级别" prop="lubeLevel">
              <el-select v-model="form.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="form.lubeGroup" placeholder="请输入润滑组别" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="润滑负责人" prop="lubeSupervisor">
              <el-input v-model="form.lubeSupervisor" placeholder="请输入润滑负责人" />
            </el-form-item>
          </el-col>
          
          <!-- 处理意见：除第一步外都需要 -->
          <el-col :span="24" v-if="needProcessResolution">
            <el-form-item label="处理意见" prop="processHandleResolution">
              <el-input 
                v-model="form.processHandleResolution" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入处理意见" />
                </el-form-item>
              </el-col>
            </el-row>
      </el-form>
    </el-card>

    <!-- 审批组件 -->
    <submitVerify 
      ref="submitVerifyRef" 
      :task-variables="taskVariables" 
      @submit-callback="submitCallback" />
    
    <!-- 审批记录组件 -->
    <approvalRecord ref="approvalRecordRef" />
  </div>
</template>
<script setup name="LubeWorkOrderProcess" lang="ts">
// 导入相关模块
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDmsBillsLubeInstance } from '@/api/dms/dmsBillsLubeInstance';
import { addDmsBillsLubeInstanceActivity } from '@/api/dms/dmsBillsLubeInstanceActivity';
import { pageByTaskWait } from '@/api/workflow/task';
import { getCurrentDateTime } from '@/utils/dateUtils';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { lube_level } = toRefs<any>(proxy?.useDict('lube_level'));
const route = useRoute();
const router = useRouter();

// 基础数据
const loading = ref(true);
const buttonLoading = ref(false);
const routeParams = ref<Record<string, any>>({});
const workOrder = ref<any>({});
const workOrderStatusText = ref('');

// 表单相关
const processFormRef = ref<ElFormInstance>();
const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();

// 当前任务信息
const currentTask = ref<any>(null);
const currentStepOrder = ref(1);
const taskVariables = ref<any>({});

// 表单数据
const initFormData = {
  lubeInstanceId: undefined,
  lubeLevel: undefined,
  lubeGroup: undefined,
  lubeSupervisor: undefined,
  processHandleResolution: undefined,
  processStepOrder: undefined
};

const form = reactive({ ...initFormData });

// 表单验证规则
const rules = reactive({
  lubeLevel: [{ required: true, message: '润滑级别不能为空', trigger: 'change' }],
  lubeGroup: [{ required: true, message: '润滑组别不能为空', trigger: 'blur' }],
  lubeSupervisor: [{ required: true, message: '润滑负责人不能为空', trigger: 'blur' }],
  processHandleResolution: [{ required: false, message: '处理意见不能为空', trigger: 'blur' }]
});

// 计算属性
const needProcessResolution = computed(() => currentStepOrder.value > 1);

const currentStepName = computed(() => {
  const stepNames = {
    1: '工单创建',
    2: '工单处理', 
    3: '工单完成'
  };
  return stepNames[currentStepOrder.value] || '处理工单';
});

const currentStepTitle = computed(() => {
  const stepTitles = {
    1: '步骤1：工单创建（要求参数）',
    2: '步骤2：工单处理（实际参数）',
    3: '步骤3：工单完成确认'
  };
  return stepTitles[currentStepOrder.value] || '工单处理';
});

const approvalButtonShow = computed(() => {
  return routeParams.value.type === 'approval' && currentTask.value;
});

// 新增：提交按钮显示控制逻辑
const submitButtonShow = computed(() => {
  return (
    routeParams.value.type === 'add' ||
    (routeParams.value.type === 'update' &&
      workOrder.value.status &&
      (workOrder.value.status === 'draft' || workOrder.value.status === 'cancel' || workOrder.value.status === 'back'))
  );
});

// 初始化
onMounted(async () => {
  routeParams.value = route.query;
  loading.value = true;
  
  try {
    // 获取工单信息
    await loadWorkOrderInfo();
    
    // 获取当前任务信息
    if (routeParams.value.type === 'approval') {
      await loadCurrentTask();
    }
    
    // 初始化表单数据
    initializeFormData();
    
  } catch (error) {
    console.error('初始化失败:', error);
    proxy?.$modal.msgError('加载数据失败');
  } finally {
    loading.value = false;
  }
});

// 加载工单信息
const loadWorkOrderInfo = async () => {
  // 从query参数获取businessId
  const businessId = routeParams.value.id;
  
  if (!businessId) {
    proxy?.$modal.msgError('缺少工单ID参数');
    return;
  }
  
  const res = await getDmsBillsLubeInstance(businessId);
  workOrder.value = res.data;
  
  // 设置状态显示文本
  workOrderStatusText.value = getStatusText(workOrder.value.status);
};

// 加载当前任务信息
const loadCurrentTask = async () => {
  // 从query参数获取businessId和taskId
  const businessId = routeParams.value.id;
  const taskId = routeParams.value.taskId;
  
  // 通过taskId或businessId获取当前任务
  const taskRes = await pageByTaskWait({
    pageNum: 1,
    pageSize: 10,
    flowCode: 'Lube01'
  });
  
  const tasks = taskRes.rows.filter(task => 
    task.businessId === businessId || task.id === taskId
  );
  
  if (tasks.length > 0) {
    currentTask.value = tasks[0];
    
    // 根据节点名称确定当前步骤
    const nodeName = currentTask.value.nodeName;
    if (nodeName === '工单创建') {
      currentStepOrder.value = 1;
    } else if (nodeName === '工单处理') {
      currentStepOrder.value = 2;
    } else if (nodeName === '工单完成') {
      currentStepOrder.value = 3;
    }
    
    // 动态设置处理意见校验规则
    if (needProcessResolution.value) {
      rules.processHandleResolution = [
        { required: true, message: '处理意见不能为空', trigger: 'blur' }
      ];
    }
  }
};

// 初始化表单数据
const initializeFormData = () => {
  // 基础信息从工单获取
  form.lubeInstanceId = workOrder.value.lubeInstanceId;
  form.processStepOrder = currentStepOrder.value;
  
  if (currentStepOrder.value === 1) {
    // 第一步：工单创建，表单为空等待用户填写
    form.lubeLevel = workOrder.value.lubeLevel;
    form.lubeGroup = workOrder.value.lubeGroup;
    form.lubeSupervisor = workOrder.value.lubeSupervisor;
    } else {
    // 第二步、第三步：从工单基础信息预填充
    form.lubeLevel = workOrder.value.lubeLevel;
    form.lubeGroup = workOrder.value.lubeGroup;
    form.lubeSupervisor = workOrder.value.lubeSupervisor;
  }
};

// 新增：提交表单方法
const submitForm = async (status: string) => {
  if (!processFormRef.value) return;
  
  try {
    const valid = await processFormRef.value.validate();
    if (valid) {
      buttonLoading.value = true;

      if (status === 'draft') {
        // 暂存逻辑
        await addDmsBillsLubeInstanceActivity({
          lubeInstanceId: form.lubeInstanceId,
          lubeLevel: form.lubeLevel,
          lubeGroup: form.lubeGroup,
          lubeSupervisor: form.lubeSupervisor,
          processHandleResolution: form.processHandleResolution || '',
          processStepOrder: form.processStepOrder,
          handleTime: getCurrentDateTime()
        });
        
        proxy?.$modal.msgSuccess('暂存成功');
        goBack();
      } else {
        // 提交逻辑
        // 准备任务变量
        taskVariables.value = {
          entity: {
            lubeInstanceId: form.lubeInstanceId,
            lubeLevel: form.lubeLevel,
            lubeGroup: form.lubeGroup,
            lubeSupervisor: form.lubeSupervisor,
            processHandleResolution: form.processHandleResolution || '',
            processStepOrder: form.processStepOrder
          }
        };
        
        // 启动工作流或继续处理
        if (routeParams.value.taskId) {
          submitVerifyRef.value?.openDialog(routeParams.value.taskId);
        } else {
          // 处理新建状态的提交
          proxy?.$modal.msgSuccess('提交成功');
          goBack();
        }
      }
    }
  } catch (error) {
    console.error('提交失败:', error);
    proxy?.$modal.msgError('提交失败');
  } finally {
    buttonLoading.value = false;
  }
};

// 审批处理
const approvalVerifyOpen = async () => {
  if (!processFormRef.value) return;
  
  try {
    const valid = await processFormRef.value.validate();
    if (valid) {
      // 准备任务变量
      taskVariables.value = {
        entity: {
          lubeInstanceId: form.lubeInstanceId,
          lubeLevel: form.lubeLevel,
          lubeGroup: form.lubeGroup,
          lubeSupervisor: form.lubeSupervisor,
          processHandleResolution: form.processHandleResolution || '',
          processStepOrder: form.processStepOrder
        }
      };
      
      // 直接使用传入的taskId进行审批
      submitVerifyRef.value?.openDialog(routeParams.value.taskId);
    }
  } catch (error) {
    proxy?.$modal.msgError('表单验证失败，请检查输入项');
  }
};

// 提交回调
const submitCallback = async () => {
  try {
    // 保存工单实例活动记录
    await addDmsBillsLubeInstanceActivity({
      lubeInstanceId: form.lubeInstanceId,
      lubeLevel: form.lubeLevel,
      lubeGroup: form.lubeGroup,
      lubeSupervisor: form.lubeSupervisor,
      processHandleResolution: form.processHandleResolution || '',
      processStepOrder: form.processStepOrder,
      handleTime: getCurrentDateTime()
    });
    
    proxy?.$modal.msgSuccess(`${currentStepName.value}完成`);
    
    // 关闭页面返回
    goBack();
  } catch (error) {
    console.error('保存业务数据失败:', error);
    proxy?.$modal.msgError('保存业务数据失败');
  }
};

// 审批记录
const handleApprovalRecord = () => {
  approvalRecordRef.value?.init(routeParams.value.id);
};

// 返回
const goBack = () => {
  proxy?.$tab.closePage(proxy?.$route);
  router.go(-1);
};

// 工具函数
const getStatusText = (status: string) => {
  const statusMap = {
    'draft': '草稿',
    'waiting': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancel': '已取消'
  };
  return statusMap[status] || '未知状态';
};
</script>