linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

维修履历样式改成和其他履历一样，适配图片

Browse Source
main
ck-chenkang 6 days ago
parent bd2e645ab3
commit c01cbad539
1 changed files with 116 additions and 81 deletions
Show Stats Download Patch File Download Diff File

197
src/views/mes/deviceledger/detail/index.vue
Unescape Escape View File

@ -317,34 +317,54 @@
<Icon icon="ep:download" class="mr-5px" /> {{ t('action.export') }}
</el-button>
</div>
<el-empty v-if="!repairGroups.length" />
<el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
<el-collapse-item v-for="group in repairGroups" :key="group.key" :name="group.key">
<el-empty v-if="!repairStepRows.length" />
<el-steps
v-else
direction="vertical"
class="device-ledger-history-steps"
:active="repairStepRows.length"
>
<el-step v-for="row in repairStepRows" :key="row.key" style="margin-top:8px">
<template #title>
<div class="device-ledger-repair-title">
<span class="device-ledger-repair-name">{{ group.name }}</span>
<span class="device-ledger-repair-meta">共{{ group.items.length }}条</span>
<div class="device-ledger-history-title">
<span class="device-ledger-history-time">[{{ row.time }}]</span>
<span class="device-ledger-history-operator">
{{ t('EquipmentManagement.DvRepair.acceptedBy') }}: {{ row.operator }}
</span>
</div>
</template>
<template #description>
<div class="device-ledger-history-items">
<div
v-for="row in group.items"
:key="String(row.id ?? row.subjectId ?? row.subjectCode)"
class="device-ledger-history-item"
>
<div class="device-ledger-history-item">
<div class="device-ledger-history-item-head">
<el-tag type="info" effect="light">{{ row.subjectCode ?? '-' }}</el-tag>
<span class="device-ledger-history-item-text">{{ row.subjectName ?? '-' }}</span>
<el-tag type="info" effect="light">{{ row.repairCode ?? '-' }}</el-tag>
<span class="device-ledger-history-item-text">{{ row.repairName ?? '-' }}</span>
</div>
<div class="device-ledger-history-item-body">
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.projectName') }}</span>
<span class="device-ledger-history-item-value">{{ row.subjectContent ?? '-' }}</span>
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.faultPhenomenon') }}</span>
<span class="device-ledger-history-item-value">{{ row.faultPhenomenon || '-' }}</span>
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.faultDescription') }}</span>
<span class="device-ledger-history-item-value">{{ row.faultDescription || '-' }}</span>
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.handlingMeasures') }}</span>
<span class="device-ledger-history-item-value">{{ row.handlingMeasures || '-' }}</span>
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.replacementParts') }}</span>
<span class="device-ledger-history-item-value">{{ row.replacementParts || '-' }}</span>
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.repairContent') }}</span>
<span class="device-ledger-history-item-value">{{ row.repairContent || '-' }}</span>
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.repairResult') }}</span>
<span class="device-ledger-history-item-value">
<el-tag :type="getResultTagType(row.result ?? row.repairResult)">
<el-tag :type="getResultTagType(row.repairResult ?? row.result)">
{{ getResultLabel(row.repairResult ?? row.result) }}
</el-tag>
</span>
@ -355,28 +375,50 @@
</div>
<div class="device-ledger-history-item-row">
<span class="device-ledger-history-item-label">{{ t('EquipmentManagement.EquipmentLedger.finishDate') }}</span>
<span class="device-ledger-history-item-value">{{ String(formatHistoryTime(row.finishDate)).split(' ')[0] }}</span>
<span class="device-ledger-history-item-value">{{ row.time }}</span>
</div>
<div v-if="row.malfunctionImages?.length" class="device-ledger-history-item-images">
<el-image
v-for="img in row.malfunctionImages"
:key="img"
:src="img"
:preview-src-list="row.malfunctionImages"
preview-teleported
fit="cover"
class="device-ledger-history-item-image"
>
<template #error>
<div class="device-ledger-history-image-error">图片加载失败</div>
</template>
</el-image>
<div v-if="row.faultImageList.length" class="device-ledger-history-image-group">
<div class="device-ledger-history-image-title">{{ t('EquipmentManagement.DvRepair.faultImages') }}</div>
<div class="device-ledger-history-item-images">
<el-image
v-for="img in row.faultImageList"
:key="img"
:src="img"
:preview-src-list="row.faultImageList"
preview-teleported
fit="cover"
class="device-ledger-history-item-image"
>
<template #error>
<div class="device-ledger-history-image-error">图片加载失败</div>
</template>
</el-image>
</div>
</div>
<div v-if="row.repairedImageList.length" class="device-ledger-history-image-group">
<div class="device-ledger-history-image-title">{{ t('EquipmentManagement.DvRepair.repairedImages') }}</div>
<div class="device-ledger-history-item-images">
<el-image
v-for="img in row.repairedImageList"
:key="img"
:src="img"
:preview-src-list="row.repairedImageList"
preview-teleported
fit="cover"
class="device-ledger-history-item-image"
>
<template #error>
<div class="device-ledger-history-image-error">图片加载失败</div>
</template>
</el-image>
</div>
</div>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</template>
</el-step>
</el-steps>
</el-tab-pane>
<el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.criticalComponent')" name="criticalComponent">
@ -731,6 +773,10 @@ type RepairHistoryRow = {
repairId?: any
repairCode?: any
repairName?: any
acceptedBy?: any
confirmBy?: any
creator?: any
creatorName?: any
subjectId?: any
subjectCode?: any
subjectName?: any
@ -739,41 +785,43 @@ type RepairHistoryRow = {
malfunction?: any
malfunctionUrl?: any
repairDes?: any
faultPhenomenon?: any
faultDescription?: any
faultImages?: any
handlingMeasures?: any
replacementParts?: any
repairContent?: any
repairedImages?: any
remark?: any
createTime?: any
finishDate?: any
result?: any
repairResult?: any
malfunctionImages?: string[]
}
type RepairHistoryGroup = { key: string; name: string; items: RepairHistoryRow[] }
type RepairHistoryStepRow = RepairHistoryRow & {
key: string
time: string
operator: string
faultImageList: string[]
repairedImageList: string[]
}
const repairActiveNames = ref<string[]>([])
const repairList = ref<RepairHistoryRow[]>([])
const repairGroups = computed<RepairHistoryGroup[]>(() => {
const groupsMap = new Map<string, RepairHistoryGroup>()
for (const row of repairList.value ?? []) {
const key = String(row.repairCode ?? row.repairId ?? row.subjectName ?? '-')
if (!groupsMap.has(key)) {
groupsMap.set(key, {
key,
name: String(row.repairName ?? row.repairCode ?? key),
items: []
})
}
const group = groupsMap.get(key)!
group.items.push({
...row,
malfunctionImages: parseImages(row?.malfunctionUrl)
const repairStepRows = computed<RepairHistoryStepRow[]>(() => {
return (repairList.value ?? [])
.map((row) => {
const time = formatHistoryTime(row.finishDate ?? row.createTime)
return {
...row,
key: String(row.id ?? row.repairId ?? row.repairCode ?? `${row.repairName ?? '-'}__${time}`),
time,
operator: String(row.acceptedBy ?? row.confirmBy ?? row.creatorName ?? row.creator ?? '-'),
faultImageList: parseImages(row.faultImages),
repairedImageList: parseImages(row.repairedImages)
}
})
}
const groups = Array.from(groupsMap.values()).filter((g) => g.items.length)
return groups.sort((a, b) => {
const at = formatHistoryTime(a.items?.[0]?.finishDate ?? a.items?.[0]?.createTime)
const bt = formatHistoryTime(b.items?.[0]?.finishDate ?? b.items?.[0]?.createTime)
return String(bt).localeCompare(String(at))
})
.sort((a, b) => String(b.time).localeCompare(String(a.time)))
})
const inspectionExportLoading = ref(false)
@ -943,8 +991,6 @@ const getDetail = async () => {
await fetchInspectionHistory()
await fetchMaintainHistory()
await fetchRepairHistory()
const keys = repairGroups.value.map((g) => g.key)
repairActiveNames.value = keys.length ? [keys[0]] : []
} finally {
detailLoading.value = false
}
@ -1217,6 +1263,16 @@ onMounted(async () => {
margin-top: 4px;
}
.device-ledger-history-image-group {
margin-top: 4px;
}
.device-ledger-history-image-title {
margin-bottom: 6px;
color: var(--el-text-color-secondary);
font-size: 13px;
}
.device-ledger-history-item-image {
width: 76px;
height: 76px;
@ -1235,27 +1291,6 @@ onMounted(async () => {
justify-content: center;
}
.device-ledger-repair-collapse {
padding: 8px 8px 0;
}
.device-ledger-repair-title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.device-ledger-repair-name {
font-weight: 600;
color: var(--el-text-color-primary);
}
.device-ledger-repair-meta {
font-size: 12px;
color: var(--el-text-color-secondary);
}
.device-ledger-history-item-text {
color: var(--el-text-color-regular);
}

Write Preview
Loading…
Cancel
Save