设备点检保养记录的详情页面的优化

main
liutao 2 weeks ago
parent f508bb7a4b
commit d4a4e15084

@ -1923,6 +1923,11 @@ export default {
cancelSuccess: 'Cancel task successfully',
cancelFail: 'Cancel task failed',
selectAllDecisionError: 'Please select pass or fail for all pending records first',
placeholderInputValue: 'Please input',
imageLimitExceed: 'Maximum 3 images',
basicInfo: 'Basic Info',
cancelReason: 'Cancel Reason',
save: 'Save',
selectDecisionError: 'Please select pass or fail for pending records first',
updateSuccess: 'Update successfully',
updateFail: 'Update failed',

@ -1890,6 +1890,7 @@ export default {
// 工单管理
WorkOrderManagement: {
basicInfo: '基本信息',
planNo: '单号',
planType: '类型',
planTypeInspect: '点检',

@ -1,182 +1,218 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="1500px">
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
<el-table-column
type="index"
:label="t('EquipmentManagement.WorkOrderManagement.index')"
align="center"
width="70"
/>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.inspectionItemName')"
align="center"
prop="inspectionItemName"
min-width="180"
sortable />
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.inspectionMethod')"
align="center"
prop="inspectionMethod"
min-width="140"
>
<template #default="scope">
<dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
</template>
</el-table-column>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.judgmentCriteria')"
align="center"
prop="judgmentCriteria"
min-width="160"
/>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.inspectionResult')"
align="center"
prop="inspectionResult"
width="120"
>
<template #default="scope">
<el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">
{{ t('EquipmentManagement.WorkOrderManagement.jobResultPending') }}
<div class="ticket-result-page">
<ContentWrap>
<div class="ticket-result-header">
<el-button @click="handleClose">{{ t('common.back') }}</el-button>
<span class="ticket-result-title">{{ pageTitle }}</span>
</div>
<el-descriptions :title="t('EquipmentManagement.WorkOrderManagement.basicInfo')" :column="4" border>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.planNo')">
{{ currentRow?.planNo || '-' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.deviceName')">
{{ currentRow?.deviceName || '-' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.planType')">
<el-tag v-if="String(currentRow?.planType) === '1'" type="primary">
{{ t('EquipmentManagement.WorkOrderManagement.planTypeInspect') }}
</el-tag>
<el-tag v-else-if="String(currentRow?.planType) === '2'" type="success">
{{ t('EquipmentManagement.WorkOrderManagement.planTypeMaintain') }}
</el-tag>
<el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">
<span v-else>-</span>
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.jobStatus')">
<dict-tag :type="'job_status'" :value="jobStatus" />
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.configName')">
{{ currentRow?.configName || '-' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.operatorName')">
{{ currentRow?.operatorName || '-' }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.taskTime')">
{{ formatDisplayTime(currentRow?.taskTime) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.taskEndTime')">
{{ formatDisplayTime(currentRow?.taskEndTime) }}
</el-descriptions-item>
<el-descriptions-item :label="t('EquipmentManagement.WorkOrderManagement.jobResult')">
<el-tag v-if="currentRow?.jobResult == '1' || currentRow?.jobResult == 'OK'" type="success">
{{ t('EquipmentManagement.WorkOrderManagement.jobResultOk') }}
</el-tag>
<el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">
<el-tag v-else-if="currentRow?.jobResult == '2' || currentRow?.jobResult == 'NG'" type="danger">
{{ t('EquipmentManagement.WorkOrderManagement.jobResultNg') }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.images')"
align="center"
prop="images"
width="160"
>
<template #default="scope">
<UploadImg
v-if="String(scope.row.inspectionResult) === '0'"
v-model="imageMap[String(scope.row.id)]"
:drag="false" :show-btn-text="false" width="64px" height="64px" />
<el-image
v-else-if="scope.row.images"
:src="parseFirstImage(scope.row.images)"
:preview-src-list="parseImages(scope.row.images)" preview-teleported fit="cover"
style="width: 64px; height: 64px" />
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType" width="120" sortable>
<template #default="scope">
<el-tag
v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
effect="light" :type="getTagType('value_types', scope.row.valueType)"
:color="getTagColor('value_types', scope.row.valueType)"
:style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
{{ getTagLabel('value_types', scope.row.valueType) }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="输入值" align="center" min-width="200">
<template #default="scope">
<el-input
v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
v-model="scope.row.textInput"
:disabled="String(scope.row.inspectionResult) !== '0'"
clearable
:rows="2"
type="textarea"
style="resize: both;"
placeholder="请输入"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.remark')"
align="center"
prop="remark"
min-width="160"
/>
<el-table-column
:label="t('EquipmentManagement.WorkOrderManagement.operate')"
align="center"
width="200"
fixed="right"
>
<template #default="scope">
<el-radio-group v-if="String(scope.row.inspectionResult) === '0'" v-model="decisionMap[String(scope.row.id)]">
<el-radio :label="'1'">{{ t('EquipmentManagement.WorkOrderManagement.ok') }}</el-radio>
<el-radio :label="'2'">{{ t('EquipmentManagement.WorkOrderManagement.ng') }}</el-radio>
</el-radio-group>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
<el-pagination
v-show="total > 0"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
:background="true"
:page-sizes="[10, 20, 30, 50, 100]"
:pager-count="7"
:total="total"
class="mt-15px mb-15px flex justify-end"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange" />
<div v-if="String(jobStatus) === '4'" class="mt-10px text-14px">
<span>{{ t('EquipmentManagement.WorkOrderManagement.jobStatus') }}</span>
<dict-tag :type="'job_status'" :value="jobStatus" />
<span class="ml-20px">取消原因</span>
<span>{{ cancelReason || '-' }}</span>
</div>
<template #footer>
<el-button @click="dialogVisible = false">{{ t('EquipmentManagement.WorkOrderManagement.dialogCancel') }}</el-button>
<el-button
type="primary"
@click="handleSave"
:loading="submitLoading"
:disabled="submitLoading || !isAllPendingSelected()"
>
{{ t('EquipmentManagement.WorkOrderManagement.dialogSave') }}
</el-button>
</template>
</Dialog>
</el-descriptions-item>
<el-descriptions-item v-if="String(jobStatus) === '4'"
:label="t('EquipmentManagement.WorkOrderManagement.cancelReason')" :span="3">
{{ cancelReason || '-' }}
</el-descriptions-item>
</el-descriptions>
</ContentWrap>
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="getRowKey">
<el-table-column type="index" :label="t('EquipmentManagement.WorkOrderManagement.index')" align="center" width="70" />
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionItemName')" align="center"
prop="inspectionItemName" min-width="200" sortable />
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionMethod')" align="center"
prop="inspectionMethod" min-width="160">
<template #default="scope">
<dict-tag type="Inspection_method" :value="scope.row.inspectionMethod" />
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.judgmentCriteria')" align="center"
prop="judgmentCriteria" min-width="180" />
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inspectionResult')" align="center"
prop="inspectionResult" min-width="140">
<template #default="scope">
<el-tag v-if="String(scope.row.inspectionResult) === '0'" type="info">{{
t('EquipmentManagement.WorkOrderManagement.jobResultPending') }}</el-tag>
<el-tag v-else-if="String(scope.row.inspectionResult) === '1'" type="success">{{
t('EquipmentManagement.WorkOrderManagement.jobResultOk') }}</el-tag>
<el-tag v-else-if="String(scope.row.inspectionResult) === '2'" type="danger">{{
t('EquipmentManagement.WorkOrderManagement.jobResultNg') }}</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.images')" align="center" prop="images" min-width="260">
<template #default="scope">
<div v-if="String(scope.row.inspectionResult) === '0'" v-loading="isImageUploading(String(scope.row.id))"
class="ticket-result-images" :class="{ 'is-full': (imageMap[String(scope.row.id)] || []).length >= 3 }">
<el-upload
v-model:file-list="fileListMap[String(scope.row.id)]"
list-type="picture-card"
:auto-upload="false"
:limit="3"
:on-change="(uploadFile: any) => handleImageChange(uploadFile, String(scope.row.id))"
:on-exceed="handleImageExceed"
>
<el-icon><Plus /></el-icon>
</el-upload>
</div>
<div v-else-if="scope.row.images" class="ticket-result-images">
<template v-for="(img, imgIdx) in parseImages(scope.row.images).slice(0, 3)" :key="imgIdx">
<el-image :src="img" :preview-src-list="parseImages(scope.row.images)" preview-teleported fit="cover"
class="ticket-result-image" />
</template>
</div>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.DvSubject.valueType')" align="center" prop="valueType" width="120" sortable>
<template #default="scope">
<el-tag
v-if="scope.row.valueType !== undefined && scope.row.valueType !== null && String(scope.row.valueType) !== ''"
effect="light" :type="getTagType('value_types', scope.row.valueType)"
:color="getTagColor('value_types', scope.row.valueType)"
:style="getTagStyle('value_types', scope.row.valueType)" disable-transitions>
{{ getTagLabel('value_types', scope.row.valueType) }}
</el-tag>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.inputValue')" align="center" min-width="200">
<template #default="scope">
<el-input
v-if="String(scope.row.valueType) === '0' || String(scope.row.valueType) === '2'"
v-model="scope.row.textInput"
:disabled="String(scope.row.inspectionResult) !== '0'"
clearable
:rows="2"
type="textarea"
style="resize: both;"
:placeholder="t('EquipmentManagement.WorkOrderManagement.placeholderInputValue')"
/>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.remark')" align="center" prop="remark" min-width="180" />
<el-table-column :label="t('EquipmentManagement.WorkOrderManagement.operate')" align="center" width="200" fixed="right">
<template #default="scope">
<el-radio-group v-if="String(scope.row.inspectionResult) === '0'" v-model="decisionMap[String(scope.row.id)]">
<el-radio :label="'1'">{{ t('EquipmentManagement.WorkOrderManagement.ok') }}</el-radio>
<el-radio :label="'2'">{{ t('EquipmentManagement.WorkOrderManagement.ng') }}</el-radio>
</el-radio-group>
<span v-else>-</span>
</template>
</el-table-column>
</el-table>
<el-pagination
v-show="total > 0"
v-model:current-page="queryParams.pageNo"
v-model:page-size="queryParams.pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="total" class="mt-15px mb-15px flex justify-end"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
<div class="ticket-result-footer">
<el-button v-if="String(jobStatus) === '0'" type="primary" @click="handleSave" :loading="submitLoading"
:disabled="hasImageUploading">
{{ t('EquipmentManagement.WorkOrderManagement.dialogSave') }}
</el-button>
</div>
</ContentWrap>
</div>
</template>
<script setup lang="ts">
import { TicketManagementApi, TicketResultVO } from '@/api/mes/ticketManagement'
import { formatDate } from '@/utils/formatTime'
import { getStrDictOptions } from '@/utils/dict'
import { isHexColor } from '@/utils/color'
import { useDictStoreWithOut } from '@/store/modules/dict'
import { TicketManagementApi, TicketResultVO } from '@/api/mes/ticketManagement'
import { isHexColor } from '@/utils/color'
import { Plus } from '@element-plus/icons-vue'
defineOptions({ name: 'TicketResultDialog' })
const emit = defineEmits(['success'])
const message = useMessage()
const { t } = useI18n()
const message = useMessage()
const dictStore = useDictStoreWithOut()
const props = defineProps<{
ticketRow?: any
title?: string
}>()
const emit = defineEmits<{
success: []
closed: []
}>()
const dictReady = ref(false)
const pageTitle = computed(() => props.title || t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault'))
const currentRow = computed(() => props.ticketRow)
const jobStatus = computed(() => props.ticketRow?.jobStatus)
const cancelReason = computed(() => props.ticketRow?.cancelReason)
const dialogVisible = ref(false)
const dialogTitle = ref(t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault'))
const loading = ref(false)
const submitLoading = ref(false)
const list = ref<TicketResultVO[]>([])
const total = ref(0)
const managementId = ref<number | undefined>(undefined)
const jobStatus = ref<string | number | undefined>(undefined)
const cancelReason = ref<string | undefined>(undefined)
const decisionMap = reactive<Record<string, '1' | '2' | undefined>>({})
const imageMap = reactive<Record<string, string>>({})
const imageMap = reactive<Record<string, string[]>>({})
const imageUploadingMap = reactive<Record<string, boolean>>({})
const fileListMap = reactive<Record<string, any[]>>({})
const hasImageUploading = computed(() => Object.values(imageUploadingMap).some(Boolean))
const setImageUploading = (key: string, value: boolean) => {
if (!key) return
if (value) {
imageUploadingMap[key] = true
} else {
delete imageUploadingMap[key]
}
}
const isImageUploading = (key: string) => {
return !!imageUploadingMap[key]
}
const getTagDict = (dictType: string, value: any) => {
if (!dictReady.value) return undefined
@ -214,33 +250,30 @@ const queryParams = reactive({
pageSize: 10
})
const open = async (options: { managementId: number; title?: string; jobStatus?: string | number; cancelReason?: string }) => {
dialogVisible.value = true
dialogTitle.value = options.title || t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
managementId.value = options.managementId
jobStatus.value = options.jobStatus
cancelReason.value = options.cancelReason
const resetResultState = () => {
for (const key of Object.keys(decisionMap)) delete decisionMap[key]
for (const key of Object.keys(imageMap)) delete imageMap[key]
for (const key of Object.keys(imageUploadingMap)) delete imageUploadingMap[key]
for (const key of Object.keys(fileListMap)) delete fileListMap[key]
list.value = []
total.value = 0
queryParams.pageNo = 1
await getList()
}
defineExpose({ open })
onMounted(async () => {
await dictStore.setDictMap()
dictReady.value = true
})
const getList = async () => {
if (!managementId.value) return
const id = managementId.value
if (!id) return
loading.value = true
try {
const data = await TicketManagementApi.getTicketResultsPage({
pageNo: queryParams.pageNo,
pageSize: queryParams.pageSize,
managementId: managementId.value
managementId: id
})
list.value = data.list
total.value = data.total
@ -248,8 +281,8 @@ const getList = async () => {
for (const row of list.value) {
const id = row?.id
if (!id) continue
if (row.images && !imageMap[String(id)]) {
imageMap[String(id)] = parseFirstImage(row.images)
if (!imageMap[String(id)]) {
imageMap[String(id)] = parseImages(row.images).slice(0, 3)
}
}
} finally {
@ -257,6 +290,16 @@ const getList = async () => {
}
}
watch(
() => props.ticketRow?.id,
async (id) => {
resetResultState()
managementId.value = id
if (id) await getList()
},
{ immediate: true }
)
const handleSizeChange = () => {
queryParams.pageNo = 1
getList()
@ -266,25 +309,49 @@ const handleCurrentChange = () => {
getList()
}
const handleSave = async () => {
const hasUnselected = list.value.some((row) => {
if (!row?.id) return false
if (String(row.inspectionResult) !== '0') return false
const decision = decisionMap[String(row.id)]
return !decision
})
if (hasUnselected) {
message.error(t('EquipmentManagement.WorkOrderManagement.selectAllDecisionError'))
return
const handleImageChange = (uploadFile: any, rowKey: string) => {
if (!uploadFile || !rowKey) return
setImageUploading(rowKey, true)
try {
const reader = new FileReader()
reader.onload = (e: any) => {
const base64 = e.target?.result
if (base64) {
if (!imageMap[rowKey]) {
imageMap[rowKey] = []
}
if (imageMap[rowKey].length < 3) {
imageMap[rowKey].push(base64)
}
}
setImageUploading(rowKey, false)
}
reader.onerror = () => {
setImageUploading(rowKey, false)
}
if (uploadFile.raw) {
reader.readAsDataURL(uploadFile.raw)
} else {
setImageUploading(rowKey, false)
}
} catch {
setImageUploading(rowKey, false)
}
}
const handleImageExceed = () => {
message.warning(t('EquipmentManagement.WorkOrderManagement.imageLimitExceed'))
}
const handleSave = async () => {
const payload: TicketResultVO[] = []
for (const row of list.value) {
if (!row?.id) continue
if (String(row.inspectionResult) !== '0') continue
const decision = decisionMap[String(row.id)]
if (!decision) continue
const img = imageMap[String(row.id)]
payload.push({ ...(row as any), inspectionResult: decision, images: img || row.images })
const images = imageMap[String(row.id)]
payload.push({ ...(row as any), inspectionResult: decision, images: Array.isArray(images) ? images.join(',') : row.images })
}
if (!payload.length) {
message.error(t('EquipmentManagement.WorkOrderManagement.selectDecisionError'))
@ -295,7 +362,6 @@ const handleSave = async () => {
await TicketManagementApi.batchUpdateTicketResults(payload)
message.success(t('EquipmentManagement.WorkOrderManagement.updateSuccess'))
emit('success')
dialogVisible.value = false
} catch {
message.error(t('EquipmentManagement.WorkOrderManagement.updateFail'))
} finally {
@ -303,14 +369,12 @@ const handleSave = async () => {
}
}
const isAllPendingSelected = () => {
for (const row of list.value) {
if (!row?.id) continue
if (String(row.inspectionResult) !== '0') continue
const decision = decisionMap[String(row.id)]
if (!decision) return false
}
return true
const handleClose = () => {
emit('closed')
}
const formatDisplayTime = (value: any) => {
return value ? formatDate(value) : '-'
}
const getRowKey = (row: TicketResultVO) => {
@ -326,13 +390,54 @@ const parseImages = (value: any): string[] => {
.filter(Boolean)
}
const parseFirstImage = (value: any): string => {
return parseImages(value)[0] || ''
}
</script>
<style scoped lang="scss">
:deep(.el-upload) {
margin: 0 auto;
}
.ticket-result-images {
display: flex;
justify-content: center;
min-height: 64px;
}
.ticket-result-images :deep(.el-upload-list--picture-card) {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 8px;
}
.ticket-result-images.is-full :deep(.el-upload--picture-card) {
display: none;
}
.ticket-result-image {
width: 64px;
height: 64px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 6px;
margin-right: 6px;
}
.ticket-result-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.ticket-result-title {
font-size: 16px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.ticket-result-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
}
</style>

@ -1,4 +1,5 @@
<template>
<template v-if="!resultVisible">
<ContentWrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="68px">
<el-form-item :label="t('EquipmentManagement.WorkOrderManagement.planNo')" prop="planNo">
@ -193,7 +194,16 @@
/>
</ContentWrap>
<TicketResultDialog ref="resultDialogRef" @success="getList" />
</template>
<TicketResultDialog
v-else
:ticket-row="selectedResultRow"
:title="resultTitle"
@success="handleResultSuccess"
@closed="handleResultClosed"
/>
</template>
<script setup lang="ts">
@ -224,6 +234,16 @@ const total = ref(0)
const selectedIds = ref<number[]>([])
const cancelLoading = ref(false)
const exportLoading = ref(false)
const resultVisible = ref(false)
const selectedResultRow = ref<TicketManagementVO>()
const resultTitle = computed(() => {
const row = selectedResultRow.value
if (!row) return t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
return row.planNo
? "${t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')}-${row.planNo}"
: t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
})
const queryParams = reactive({
pageNo: 1,
@ -310,19 +330,23 @@ const handleExport = async () => {
}
}
const resultDialogRef = ref<InstanceType<typeof TicketResultDialog>>()
const handleRowClick = async (row: TicketManagementVO, column: any) => {
const handleRowClick = (row: TicketManagementVO, column: any) => {
if (column?.type === 'selection') return
if (!row?.id) return
await resultDialogRef.value?.open({
managementId: row.id,
jobStatus: row.jobStatus,
cancelReason: row.cancelReason,
title: row.planNo
? `${t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')}-${row.planNo}`
: t('EquipmentManagement.WorkOrderManagement.dialogTitleDefault')
})
selectedResultRow.value = row
resultVisible.value = true
}
const handleResultClosed = () => {
resultVisible.value = false
selectedResultRow.value = undefined
}
const handleResultSuccess = async () => {
resultVisible.value = false
selectedResultRow.value = undefined
await getList()
}
onMounted(async () => {

Loading…
Cancel
Save