|
|
<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> |