refactor(dms): 重构故障工单处理页面

- 移除提交按钮,Web端不再创建工单
- 调整页面布局和样式,优化用户体验
- 重构表单验证逻辑,简化规则设置
- 移除不必要的功能和代码,提高页面性能
master
zangchenhao 3 weeks ago
parent 0090a925dd
commit 364575595a

@ -4,20 +4,7 @@
<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>
<!-- 移除提交按钮Web端不再创建工单 -->
<el-button
v-if="approvalButtonShow"
:loading="buttonLoading"
@ -86,150 +73,84 @@
</el-form>
</el-card>
<!-- 当前步骤处理区域 -->
<!-- PDA端创建的工单详情只读显示 -->
<el-card shadow="never">
<h4 class="form-header">{{ currentStepTitle }}</h4>
<h4 class="form-header">PDA端创建的工单详情只读</h4>
<el-form
ref="processFormRef"
v-loading="loading"
:disabled="routeParams.type === 'view'"
:model="form"
:rules="rules"
label-width="120px">
<el-row>
<!-- 第一步故障报修信息 -->
<template v-if="currentStepOrder === 1">
<el-col :span="8">
<el-form-item label="故障类型" prop="faultType">
<el-select v-model="form.faultType" placeholder="请选择故障类型">
<el-option
v-for="dict in activity_fault_type"
: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="repairType">
<el-select
v-model="form.repairType"
placeholder="请选择维修类型"
@change="updateOutsourcingValidation">
<el-option
v-for="dict in fault_repair_type"
: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="outsourcingId">
<el-input v-model="form.outsourcingId" placeholder="请输入外协单位" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="故障描述" prop="faultDescription">
<el-input
v-model="form.faultDescription"
type="textarea"
:rows="3"
placeholder="请输入故障描述" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="涉及操作" prop="designOperations">
<el-input
v-model="form.designOperations"
type="textarea"
:rows="2"
placeholder="请输入涉及操作" />
</el-form-item>
</el-col>
</template>
<!-- 故障报修信息只读显示 -->
<el-col :span="8">
<el-form-item label="故障类型">
<el-input v-model="form.faultType" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修类型">
<el-input v-model="form.repairType" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="外协单位">
<el-input v-model="outsourcingName" disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="故障描述">
<el-input
v-model="form.faultDescription"
type="textarea"
:rows="3"
disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="涉及操作">
<el-input
v-model="form.designOperations"
type="textarea"
:rows="2"
disabled />
</el-form-item>
</el-col>
<!-- 第二步维修处理 -->
<template v-if="currentStepOrder === 2">
<el-col :span="8">
<el-form-item label="故障类型">
<el-input v-model="form.faultType" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修类型">
<el-input v-model="form.repairType" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修人" prop="repairer">
<el-input v-model="form.repairer" placeholder="请输入维修人" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="检查后的故障判断" prop="checkedFault">
<el-input
v-model="form.checkedFault"
type="textarea"
:rows="3"
placeholder="请输入检查后的故障判断" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="维修措施" prop="protectedMethod">
<el-input
v-model="form.protectedMethod"
type="textarea"
:rows="3"
placeholder="请输入维修措施" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="维修内容" prop="repairContent">
<el-input
v-model="form.repairContent"
type="textarea"
:rows="4"
placeholder="请输入维修内容" />
</el-form-item>
</el-col>
</template>
<!-- 第三步维修确认 -->
<template v-if="currentStepOrder === 3">
<!-- 维修处理信息只读显示 -->
<template v-if="form.repairer">
<el-col :span="8">
<el-form-item label="维修人">
<el-input v-model="form.repairer" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="维修结果" prop="repairConfirm">
<el-select v-model="form.repairConfirm" placeholder="请选择维修结果">
<el-option
v-for="dict in fault_repair_confirm"
: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="componentsPartsId">
<el-input v-model="form.componentsPartsId" placeholder="请输入关联更换零部件内容" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="维修内容">
<el-input v-model="form.repairContent" type="textarea" :rows="3" disabled />
<el-form-item label="检查后的故障判断">
<el-input
v-model="form.checkedFault"
type="textarea"
:rows="3"
disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="维修措施">
<el-input v-model="form.protectedMethod" type="textarea" :rows="3" disabled />
<el-input
v-model="form.protectedMethod"
type="textarea"
:rows="3"
disabled />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="维修内容">
<el-input
v-model="form.repairContent"
type="textarea"
:rows="4"
disabled />
</el-form-item>
</el-col>
</template>
@ -249,7 +170,7 @@
</el-form-item>
</el-col>
<!-- 处理意见除第一步外都需要 -->
<!-- 处理意见审批时需要 -->
<el-col :span="24" v-if="needProcessResolution">
<el-form-item label="处理意见" prop="processHandleResolution">
<el-input
@ -277,13 +198,11 @@
<script setup name="FaultWorkOrderProcess" lang="ts">
//
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs, watch } from 'vue';
import { ref, reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { ElMessageBox, type FormInstance } from 'element-plus';
import type { ComponentInternalInstance } from 'vue';
import { getDmsBillsFaultInstance, approveWorkOrder, confirmRepairResult } from '@/api/dms/dmsBillsFaultInstance';
import { addDmsFaultInstanceActivity } from '@/api/dms/dmsFaultInstanceActivity';
import { pageByTaskWait } from '@/api/workflow/task';
import { getCurrentDateTime } from '@/utils/dateUtils';
import { getDmsBaseOutsourcingInfoList } from '@/api/dms/dmsBaseOutsourcingInfo';
import SubmitVerify from '@/views/dms/dmsFaultInstanceActivity/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
@ -300,15 +219,14 @@ const routeParams = ref<Record<string, any>>({});
const workOrder = ref<any>({});
const workOrderStatusText = ref('');
const outsourceList = ref<any[]>([]);
const outsourcingName = ref('');
//
const processFormRef = ref<ElFormInstance>();
const processFormRef = ref<FormInstance>();
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>({});
//
@ -326,7 +244,6 @@ const initFormData = {
repairConfirm: undefined,
componentsPartsId: undefined,
processHandleResolution: undefined,
processStepOrder: undefined,
approveStatus: undefined
};
@ -334,38 +251,20 @@ const form = reactive({ ...initFormData });
//
const rules = reactive({
faultType: [{ required: false, message: '故障类型不能为空', trigger: 'change' }],
faultDescription: [{ required: false, message: '故障描述不能为空', trigger: 'blur' }],
repairType: [{ required: false, message: '维修类型不能为空', trigger: 'change' }],
outsourcingId: [{ required: false, message: '外协单位不能为空', trigger: 'change' }],
repairer: [{ required: false, message: '维修人不能为空', trigger: 'blur' }],
checkedFault: [{ required: false, message: '检查后的故障判断不能为空', trigger: 'blur' }],
protectedMethod: [{ required: false, message: '维修措施不能为空', trigger: 'blur' }],
repairContent: [{ required: false, message: '维修内容不能为空', trigger: 'blur' }],
repairConfirm: [{ required: false, message: '维修结果不能为空', trigger: 'change' }],
processHandleResolution: [{ required: false, message: '处理意见不能为空', trigger: 'blur' }],
approveStatus: [{ required: false, message: '审批状态不能为空', trigger: 'change' }]
approveStatus: [{ required: false, message: '审批状态不能为空', trigger: 'change' }],
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 needProcessResolution = computed(() => {
return isApprovalStage.value || confirmButtonShow.value;
});
const currentStepTitle = computed(() => {
const stepTitles = {
1: '步骤1故障报修要求参数',
2: '步骤2维修处理实际参数',
3: '步骤3维修确认'
};
return stepTitles[currentStepOrder.value] || '工单处理';
const currentStepName = computed(() => {
if (workOrder.value?.approveStatus === '1') {
return '审批工单';
}
return '处理工单';
});
const approvalButtonShow = computed(() => {
@ -386,16 +285,6 @@ const isApprovalStage = computed(() => {
return workOrder.value?.approveStatus === '1';
});
//
const submitButtonShow = computed(() => {
return (
routeParams.value.type === 'add' ||
(routeParams.value.type === 'update' &&
workOrder.value?.billsStatus &&
(workOrder.value.billsStatus === 'draft' || workOrder.value.billsStatus === 'cancel' || workOrder.value.billsStatus === 'back'))
);
});
//
onMounted(async () => {
routeParams.value = route.query;
@ -408,11 +297,6 @@ onMounted(async () => {
//
await getOutsourceList();
//
if (routeParams.value.type === 'approval' || routeParams.value.type === 'confirm') {
await loadCurrentTask();
}
//
initializeFormData();
@ -421,28 +305,19 @@ onMounted(async () => {
} catch (error) {
console.error('初始化失败:', error);
proxy?.$modal.msgError('加载数据失败');
(proxy as any)?.$modal.msgError('加载数据失败');
} finally {
loading.value = false;
}
});
//
watch(() => form.repairType, (newValue) => {
updateOutsourcingValidation();
//
if (newValue !== '2') {
form.outsourcingId = undefined;
}
});
//
const loadWorkOrderInfo = async () => {
// querybusinessId
const businessId = routeParams.value.id;
if (!businessId) {
proxy?.$modal.msgError('缺少工单ID参数');
(proxy as any)?.$modal.msgError('缺少工单ID参数');
return;
}
@ -453,50 +328,10 @@ const loadWorkOrderInfo = async () => {
workOrderStatusText.value = getStatusText(workOrder.value.billsStatus || '');
};
//
const loadCurrentTask = async () => {
// querybusinessIdtaskId
const businessId = routeParams.value.id;
const taskId = routeParams.value.taskId;
// taskIdbusinessId
const taskRes = await pageByTaskWait({
pageNum: 1,
pageSize: 10,
flowCode: 'Fault01' //
});
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.repairInstanceId = workOrder.value?.repairInstanceId;
form.processStepOrder = currentStepOrder.value;
// undefined
form.faultType = workOrder.value?.faultType || '';
@ -511,83 +346,18 @@ const initializeFormData = () => {
form.repairConfirm = workOrder.value?.repairConfirm || '';
form.componentsPartsId = workOrder.value?.componentsPartsId || '';
//
if (form.outsourcingId && outsourceList.value.length > 0) {
const outsourcing = outsourceList.value.find(item => item.outsourcingId === form.outsourcingId);
outsourcingName.value = outsourcing?.outsourcingName || '';
}
//
if (routeParams.value.type === 'approval' && !form.approveStatus) {
form.approveStatus = undefined; //
}
};
//
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 addDmsFaultInstanceActivity({
repairInstanceId: form.repairInstanceId,
faultType: form.faultType,
faultDescription: form.faultDescription,
designOperations: form.designOperations,
repairType: form.repairType,
outsourcingId: form.outsourcingId,
checkedFault: form.checkedFault || '',
repairContent: form.repairContent || '',
protectedMethod: form.protectedMethod || '',
repairer: form.repairer || '',
repairConfirm: form.repairConfirm,
componentsPartsId: form.componentsPartsId,
processHandleResolution: form.processHandleResolution || '',
processStepOrder: form.processStepOrder,
handleTime: getCurrentDateTime()
});
proxy?.$modal.msgSuccess('暂存成功');
goBack();
} else {
//
//
taskVariables.value = {
entity: {
repairInstanceId: form.repairInstanceId,
faultType: form.faultType,
faultDescription: form.faultDescription,
designOperations: form.designOperations,
repairType: form.repairType,
outsourcingId: form.outsourcingId,
checkedFault: form.checkedFault || '',
repairContent: form.repairContent || '',
protectedMethod: form.protectedMethod || '',
repairer: form.repairer || '',
repairConfirm: form.repairConfirm,
componentsPartsId: form.componentsPartsId,
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;
@ -595,7 +365,7 @@ const approvalVerifyOpen = async () => {
try {
const valid = await processFormRef.value.validate();
if (valid) {
await proxy?.$modal.confirm('是否确认提交审批?');
await (proxy as any)?.$modal.confirm('是否确认提交审批?');
buttonLoading.value = true;
@ -606,7 +376,7 @@ const approvalVerifyOpen = async () => {
await approveWorkOrder(form.repairInstanceId, approveStatus, message);
const statusText = approveStatus === '2' ? '通过' : '拒绝';
proxy?.$modal.msgSuccess(`审批${statusText}成功`);
(proxy as any)?.$modal.msgSuccess(`审批${statusText}成功`);
//
goBack();
@ -614,7 +384,7 @@ const approvalVerifyOpen = async () => {
} catch (error: any) {
if (error !== 'cancel' && error !== 'close') {
console.error('审批失败:', error);
proxy?.$modal.msgError('审批失败:' + (error.message || '未知错误'));
(proxy as any)?.$modal.msgError('审批失败:' + (error.message || '未知错误'));
}
} finally {
buttonLoading.value = false;
@ -628,35 +398,14 @@ const submitCallback = async (approvalResult?: any) => {
//
const confirmResult = form.repairConfirm || '1'; //
await confirmRepairResult(form.repairInstanceId, confirmResult);
proxy?.$modal.msgSuccess('确认完成');
} else {
//
await addDmsFaultInstanceActivity({
repairInstanceId: form.repairInstanceId,
faultType: form.faultType,
faultDescription: form.faultDescription,
designOperations: form.designOperations,
repairType: form.repairType,
outsourcingId: form.outsourcingId,
checkedFault: form.checkedFault || '',
repairContent: form.repairContent || '',
protectedMethod: form.protectedMethod || '',
repairer: form.repairer || '',
repairConfirm: form.repairConfirm,
componentsPartsId: form.componentsPartsId,
processHandleResolution: form.processHandleResolution || '',
processStepOrder: form.processStepOrder,
handleTime: getCurrentDateTime()
});
proxy?.$modal.msgSuccess(`${currentStepName.value}完成`);
(proxy as any)?.$modal.msgSuccess('确认完成');
}
//
goBack();
} catch (error: any) {
console.error('操作失败:', error);
proxy?.$modal.msgError('操作失败:' + (error.message || '未知错误'));
(proxy as any)?.$modal.msgError('操作失败:' + (error.message || '未知错误'));
}
};
@ -682,7 +431,7 @@ const handleConfirm = async () => {
//
await confirmRepairResult(form.repairInstanceId, form.repairConfirm);
proxy?.$modal.msgSuccess('确认通过完成');
(proxy as any)?.$modal.msgSuccess('确认通过完成');
goBack();
} catch (action: any) {
@ -692,11 +441,11 @@ const handleConfirm = async () => {
buttonLoading.value = true;
form.repairConfirm = '2'; // 2
await confirmRepairResult(form.repairInstanceId, form.repairConfirm);
proxy?.$modal.msgSuccess('退回维修环节完成');
(proxy as any)?.$modal.msgSuccess('退回维修环节完成');
goBack();
} catch (confirmError: any) {
console.error('退回操作失败:', confirmError);
proxy?.$modal.msgError('退回操作失败:' + (confirmError.message || '未知错误'));
(proxy as any)?.$modal.msgError('退回操作失败:' + (confirmError.message || '未知错误'));
} finally {
buttonLoading.value = false;
}
@ -705,7 +454,7 @@ const handleConfirm = async () => {
console.log('用户取消了确认操作');
} else {
console.error('确认失败:', action);
proxy?.$modal.msgError('确认失败:' + (action.message || '未知错误'));
(proxy as any)?.$modal.msgError('确认失败:' + (action.message || '未知错误'));
}
} finally {
if (form.repairConfirm === '1') {
@ -721,7 +470,7 @@ const handleApprovalRecord = () => {
//
const goBack = () => {
proxy?.$tab.closePage(proxy?.$route);
(proxy as any)?.$tab.closePage((proxy as any)?.$route);
router.go(-1);
};
@ -735,16 +484,6 @@ const getOutsourceList = async () => {
}
};
//
const updateOutsourcingValidation = () => {
//
if (routeParams.value.type !== 'approval' && form.repairType === '2') {
rules.outsourcingId = [{ required: true, message: '外协单位不能为空', trigger: 'change' }];
} else {
rules.outsourcingId = [{ required: false, message: '外协单位不能为空', trigger: 'change' }];
}
};
//
const setDynamicValidationRules = () => {
//
@ -760,36 +499,9 @@ const setDynamicValidationRules = () => {
} else if (workOrder.value?.billsStatus === '2' &&
workOrder.value?.approveStatus === '2' &&
workOrder.value?.repairConfirm === '0') {
//
rules.repairConfirm = [{ required: true, message: '维修结果不能为空', trigger: 'change' }];
//
rules.processHandleResolution = [{ required: true, message: '处理意见不能为空', trigger: 'blur' }];
} else if (routeParams.value.type === 'add' || routeParams.value.type === 'update') {
//
if (currentStepOrder.value === 1) {
//
rules.faultType = [{ required: true, message: '故障类型不能为空', trigger: 'change' }];
rules.faultDescription = [{ required: true, message: '故障描述不能为空', trigger: 'blur' }];
rules.repairType = [{ required: true, message: '维修类型不能为空', trigger: 'change' }];
} else if (currentStepOrder.value === 2) {
//
rules.repairer = [{ required: true, message: '维修人不能为空', trigger: 'blur' }];
rules.checkedFault = [{ required: true, message: '检查后的故障判断不能为空', trigger: 'blur' }];
rules.protectedMethod = [{ required: true, message: '维修措施不能为空', trigger: 'blur' }];
rules.repairContent = [{ required: true, message: '维修内容不能为空', trigger: 'blur' }];
if (needProcessResolution.value) {
rules.processHandleResolution = [{ required: true, message: '处理意见不能为空', trigger: 'blur' }];
}
} else if (currentStepOrder.value === 3) {
//
rules.repairConfirm = [{ required: true, message: '维修结果不能为空', trigger: 'change' }];
if (needProcessResolution.value) {
rules.processHandleResolution = [{ required: true, message: '处理意见不能为空', trigger: 'blur' }];
}
}
}
//
updateOutsourcingValidation();
};
//

Loading…
Cancel
Save