feat(dms):优化故障工单详情页面功能

- 为设备选择器添加过滤和变更处理功能
- 隐藏操作权限列并调整表格字段显示
- 使用 Object.assign 优化表单数据响应式更新- 完善知识库选择与文件上传预览功能
- 增强表单验证与操作记录管理逻辑
- 调整样式与间距提升界面可读性
master
zangch@mesnac.com 1 month ago
parent a68a6c2d70
commit 71f0635be1

@ -54,9 +54,9 @@
<el-row :gutter="20" v-if="!repairInstanceId && !isView"> <el-row :gutter="20" v-if="!repairInstanceId && !isView">
<el-col :span="24"> <el-col :span="24">
<el-form-item label="选择设备" prop="deviceId"> <el-form-item label="选择设备" prop="deviceId">
<el-select <el-select
v-model="faultForm.deviceId" v-model="faultForm.deviceId"
placeholder="请选择设备" placeholder="请选择设备"
filterable filterable
@change="handleDeviceChange" @change="handleDeviceChange"
style="width: 100%"> style="width: 100%">
@ -226,11 +226,11 @@
</el-table-column> </el-table-column>
<el-table-column label="操作人" align="center" prop="handleBy" width="120" /> <el-table-column label="操作人" align="center" prop="handleBy" width="120" />
<el-table-column label="任务" align="center" prop="processActivityName" width="150" /> <el-table-column label="任务" align="center" prop="processActivityName" width="150" />
<el-table-column label="操作权限" align="center" prop="processHandleStatus" width="100"> <!-- <el-table-column label="操作权限" align="center" prop="processHandleStatus" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.dms_handle_status" :value="scope.row.processHandleStatus"/> <dict-tag :options="dict.type.dms_handle_status" :value="scope.row.processHandleStatus"/>
</template> </template>
</el-table-column> </el-table-column>-->
<el-table-column label="处理措施" align="center" prop="processHandleResolution" show-overflow-tooltip /> <el-table-column label="处理措施" align="center" prop="processHandleResolution" show-overflow-tooltip />
<el-table-column label="维修内容" align="center" prop="repairContent" show-overflow-tooltip /> <el-table-column label="维修内容" align="center" prop="repairContent" show-overflow-tooltip />
<el-table-column label="防护措施" align="center" prop="protectedMethod" show-overflow-tooltip /> <el-table-column label="防护措施" align="center" prop="protectedMethod" show-overflow-tooltip />
@ -388,10 +388,10 @@ export default {
repairInstanceId: null, repairInstanceId: null,
// 0 1 2 // 0 1 2
billsStatus: null, billsStatus: null,
// //
deviceList: [], deviceList: [],
// //
deviceForm: { deviceForm: {
deviceCode: '', deviceCode: '',
@ -401,7 +401,7 @@ export default {
location: '', location: '',
deviceSpec: '' deviceSpec: ''
}, },
// //
faultForm: { faultForm: {
deviceId: null, deviceId: null,
@ -414,25 +414,25 @@ export default {
faultDescription: '', faultDescription: '',
designOperations: '' designOperations: ''
}, },
// //
requireForm: { requireForm: {
requireEndTime: null, requireEndTime: null,
verifyMethod: '' verifyMethod: ''
}, },
// //
processOpinion: '', processOpinion: '',
// //
activityList: [], activityList: [],
// //
knowledgeDialogVisible: false, knowledgeDialogVisible: false,
knowledgeList: [], knowledgeList: [],
selectedKnowledge: null, selectedKnowledge: null,
tempSelectedKnowledge: null, tempSelectedKnowledge: null,
// //
startRepairDialogVisible: false, startRepairDialogVisible: false,
startRepairForm: { startRepairForm: {
@ -445,7 +445,7 @@ export default {
{ required: true, message: '请输入维修人', trigger: 'blur' } { required: true, message: '请输入维修人', trigger: 'blur' }
] ]
}, },
// //
recordDialogVisible: false, recordDialogVisible: false,
recordDialogTitle: '', recordDialogTitle: '',
@ -455,21 +455,21 @@ export default {
processHandleResolution: '', processHandleResolution: '',
fileList: [] fileList: []
}, },
// //
uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload', uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload',
uploadHeaders: { uploadHeaders: {
Authorization: 'Bearer ' + getToken() Authorization: 'Bearer ' + getToken()
}, },
// //
previewDialogVisible: false, previewDialogVisible: false,
previewImageUrl: '', previewImageUrl: '',
// //
filesDialogVisible: false, filesDialogVisible: false,
currentFiles: [], currentFiles: [],
// //
rules: { rules: {
deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }], deviceId: [{ required: true, message: '请选择设备', trigger: 'change' }],
@ -478,7 +478,7 @@ export default {
faultType: [{ required: true, message: '请选择故障类型', trigger: 'change' }], faultType: [{ required: true, message: '请选择故障类型', trigger: 'change' }],
faultDescription: [{ required: true, message: '请输入故障描述', trigger: 'blur' }] faultDescription: [{ required: true, message: '请输入故障描述', trigger: 'blur' }]
}, },
recordRules: { recordRules: {
processActivityName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }], processActivityName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
processHandleResolution: [{ required: true, message: '请输入处理措施', trigger: 'blur' }] processHandleResolution: [{ required: true, message: '请输入处理措施', trigger: 'blur' }]
@ -493,7 +493,7 @@ export default {
} }
// //
this.isView = this.$route.query.view === 'true' this.isView = this.$route.query.view === 'true'
// //
if (!this.repairInstanceId || id === 'new') { if (!this.repairInstanceId || id === 'new') {
this.loadDeviceList() this.loadDeviceList()
@ -513,67 +513,67 @@ export default {
location: data.deviceLocation, location: data.deviceLocation,
deviceSpec: data.deviceSpec deviceSpec: data.deviceSpec
} }
// // - 使 Object.assign Vue
this.faultForm = { Object.assign(this.faultForm, {
occurTime: data.applyTime, occurTime: data.applyTime,
applyUser: data.applyUser, applyUser: data.applyUser,
applyUserPhone: data.applyUserPhone || '', applyUserPhone: data.applyUserPhone || '',
faultType: data.faultType, faultType: data.faultType,
faultLevel: data.faultLevel || '', faultLevel: data.faultLevel || '',
isShutdown: data.isShutdown || '0', isShutdown: data.isShutdown || '0',
faultDescription: data.faultDescription, faultDescription: data.faultDescription || '',
designOperations: data.designOperations designOperations: data.designOperations || ''
} })
// // - 使 Object.assign Vue
this.requireForm = { Object.assign(this.requireForm, {
requireEndTime: data.requireEndTime, requireEndTime: data.requireEndTime,
verifyMethod: data.verifyMethod verifyMethod: data.verifyMethod || ''
} })
// //
this.processOpinion = data.processHandleResolution || '' this.processOpinion = data.processHandleResolution || ''
// //
this.activityList = data.dmsFaultInstanceActivityList || [] this.activityList = data.dmsFaultInstanceActivityList || []
// //
this.billsStatus = data.billsStatus || null this.billsStatus = data.billsStatus || null
// ID // ID
this.faultForm.knowledgeRepairId = data.knowledgeRepairId this.faultForm.knowledgeRepairId = data.knowledgeRepairId
// ID // ID
if (data.knowledgeRepairId) { if (data.knowledgeRepairId) {
// TODO: API selectedKnowledge // TODO: API selectedKnowledge
} }
// //
if (data.knowledgeRepairId) { if (data.knowledgeRepairId) {
// TODO: // TODO:
} }
}) })
}, },
/** 打开知识库选择对话框 */ /** 打开知识库选择对话框 */
openKnowledgeDialog() { openKnowledgeDialog() {
this.knowledgeDialogVisible = true this.knowledgeDialogVisible = true
this.loadKnowledgeList() this.loadKnowledgeList()
}, },
/** 加载知识库列表 */ /** 加载知识库列表 */
loadKnowledgeList() { loadKnowledgeList() {
getKnowledgeRepairList({ isFlag: '0' }).then(response => { getKnowledgeRepairList({ isFlag: '0' }).then(response => {
this.knowledgeList = response.data || [] this.knowledgeList = response.data || []
}) })
}, },
/** 选择知识库 */ /** 选择知识库 */
selectKnowledge(row) { selectKnowledge(row) {
this.tempSelectedKnowledge = row this.tempSelectedKnowledge = row
}, },
/** 确认选择知识库 */ /** 确认选择知识库 */
confirmKnowledge() { confirmKnowledge() {
if (this.tempSelectedKnowledge) { if (this.tempSelectedKnowledge) {
@ -588,7 +588,7 @@ export default {
} }
this.knowledgeDialogVisible = false this.knowledgeDialogVisible = false
}, },
/** 添加操作记录 */ /** 添加操作记录 */
handleAddRecord() { handleAddRecord() {
this.recordDialogTitle = '添加操作记录' this.recordDialogTitle = '添加操作记录'
@ -599,7 +599,7 @@ export default {
} }
this.recordDialogVisible = true this.recordDialogVisible = true
}, },
/** 编辑操作记录 */ /** 编辑操作记录 */
handleEditRecord(row) { handleEditRecord(row) {
this.recordDialogTitle = '编辑操作记录' this.recordDialogTitle = '编辑操作记录'
@ -611,7 +611,7 @@ export default {
} }
this.recordDialogVisible = true this.recordDialogVisible = true
}, },
/** 删除操作记录 */ /** 删除操作记录 */
handleDeleteRecord(row) { handleDeleteRecord(row) {
this.$confirm('是否确认删除该操作记录?', '警告', { this.$confirm('是否确认删除该操作记录?', '警告', {
@ -626,14 +626,14 @@ export default {
} }
}) })
}, },
/** 提交操作记录 */ /** 提交操作记录 */
submitRecord() { submitRecord() {
this.$refs.recordForm.validate(valid => { this.$refs.recordForm.validate(valid => {
if (valid) { if (valid) {
// URLs // URLs
const fileUrls = this.recordForm.fileList.map(f => f.filePath || f.url) const fileUrls = this.recordForm.fileList.map(f => f.filePath || f.url)
const record = { const record = {
...this.recordForm, ...this.recordForm,
handleTime: new Date(), handleTime: new Date(),
@ -643,7 +643,7 @@ export default {
fileUrls: fileUrls, // fileUrls: fileUrls, //
dmsInstanceFiles: this.recordForm.fileList // dmsInstanceFiles: this.recordForm.fileList //
} }
if (record.instanceActivityId) { if (record.instanceActivityId) {
// //
const index = this.activityList.findIndex(item => item.instanceActivityId === record.instanceActivityId) const index = this.activityList.findIndex(item => item.instanceActivityId === record.instanceActivityId)
@ -655,13 +655,13 @@ export default {
record.instanceActivityId = -new Date().getTime() record.instanceActivityId = -new Date().getTime()
this.activityList.push(record) this.activityList.push(record)
} }
this.recordDialogVisible = false this.recordDialogVisible = false
this.$message.success('保存成功') this.$message.success('保存成功')
} }
}) })
}, },
/** 文件上传成功 */ /** 文件上传成功 */
handleUploadSuccess(res, file) { handleUploadSuccess(res, file) {
if (res.code === 200) { if (res.code === 200) {
@ -672,42 +672,42 @@ export default {
}) })
} }
}, },
/** 文件移除 */ /** 文件移除 */
handleUploadRemove(file, fileList) { handleUploadRemove(file, fileList) {
this.recordForm.fileList = fileList this.recordForm.fileList = fileList
}, },
/** 查看附件 */ /** 查看附件 */
viewFiles(row) { viewFiles(row) {
this.currentFiles = row.dmsInstanceFiles || [] this.currentFiles = row.dmsInstanceFiles || []
this.filesDialogVisible = true this.filesDialogVisible = true
}, },
/** 下载文件 */ /** 下载文件 */
downloadFile(file) { downloadFile(file) {
window.open(file.url || file.filePath, '_blank') window.open(file.url || file.filePath, '_blank')
}, },
/** 预览文件 */ /** 预览文件 */
previewFile(file) { previewFile(file) {
this.previewImageUrl = file.url || file.filePath this.previewImageUrl = file.url || file.filePath
this.previewDialogVisible = true this.previewDialogVisible = true
}, },
/** 判断是否为图片 */ /** 判断是否为图片 */
isImage(fileName) { isImage(fileName) {
if (!fileName) return false if (!fileName) return false
const ext = fileName.toLowerCase().split('.').pop() const ext = fileName.toLowerCase().split('.').pop()
return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext) return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)
}, },
/** 图片预览 */ /** 图片预览 */
handlePicturePreview(file) { handlePicturePreview(file) {
this.previewImageUrl = file.url this.previewImageUrl = file.url
this.previewDialogVisible = true this.previewDialogVisible = true
}, },
/** 开始维修 - 打开对话框 */ /** 开始维修 - 打开对话框 */
onStartRepair() { onStartRepair() {
if (!this.repairInstanceId) { if (!this.repairInstanceId) {
@ -720,7 +720,7 @@ export default {
} }
this.startRepairDialogVisible = true this.startRepairDialogVisible = true
}, },
/** 确认开始维修 */ /** 确认开始维修 */
confirmStartRepair() { confirmStartRepair() {
this.$refs.startRepairForm.validate((valid) => { this.$refs.startRepairForm.validate((valid) => {
@ -739,7 +739,7 @@ export default {
} }
}) })
}, },
/** 完成维修 */ /** 完成维修 */
onCompleteRepair() { onCompleteRepair() {
if (!this.repairInstanceId) { if (!this.repairInstanceId) {
@ -759,16 +759,16 @@ export default {
this.loadData() this.loadData()
}) })
}, },
/** 提交表单 */ /** 提交表单 */
handleSubmit() { handleSubmit() {
console.log('提交表单, faultForm:', this.faultForm) console.log('提交表单, faultForm:', this.faultForm)
console.log('deviceId:', this.faultForm.deviceId) console.log('deviceId:', this.faultForm.deviceId)
this.$refs.faultForm.validate((valid, errors) => { this.$refs.faultForm.validate((valid, errors) => {
console.log('表单验证结果:', valid) console.log('表单验证结果:', valid)
console.log('验证错误:', errors) console.log('验证错误:', errors)
if (valid) { if (valid) {
const data = { const data = {
...this.faultForm, ...this.faultForm,
@ -777,9 +777,9 @@ export default {
knowledgeRepairId: this.selectedKnowledge ? this.selectedKnowledge.knowledgeRepairId : null, knowledgeRepairId: this.selectedKnowledge ? this.selectedKnowledge.knowledgeRepairId : null,
dmsFaultInstanceActivityList: this.activityList dmsFaultInstanceActivityList: this.activityList
} }
console.log('提交数据:', data) console.log('提交数据:', data)
if (this.repairInstanceId) { if (this.repairInstanceId) {
data.repairInstanceId = this.repairInstanceId data.repairInstanceId = this.repairInstanceId
updateDmsBillsFaultInstance(data).then(() => { updateDmsBillsFaultInstance(data).then(() => {
@ -797,14 +797,14 @@ export default {
} }
}) })
}, },
/** 加载设备列表 */ /** 加载设备列表 */
loadDeviceList() { loadDeviceList() {
getDeviceLedgerList({}).then(response => { getDeviceLedgerList({}).then(response => {
this.deviceList = response.data || [] this.deviceList = response.data || []
}) })
}, },
/** 设备选择变化 */ /** 设备选择变化 */
handleDeviceChange(objId) { handleDeviceChange(objId) {
console.log('设备选择变化, objId:', objId) console.log('设备选择变化, objId:', objId)
@ -825,7 +825,7 @@ export default {
console.error('未找到设备, objId:', objId, '设备列表:', this.deviceList) console.error('未找到设备, objId:', objId, '设备列表:', this.deviceList)
} }
}, },
/** 返回 */ /** 返回 */
goBack() { goBack() {
this.$tab.closePage() this.$tab.closePage()
@ -839,18 +839,18 @@ export default {
.fault-repair-detail { .fault-repair-detail {
.box-card { .box-card {
margin-bottom: 20px; margin-bottom: 20px;
.card-title { .card-title {
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
color: #303133; color: #303133;
} }
} }
.footer-buttons { .footer-buttons {
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
.el-button { .el-button {
min-width: 100px; min-width: 100px;
} }

Loading…
Cancel
Save