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

style：模具组-维修记录字段样式调整

Browse Source
main
黄伟杰 6 days ago
parent f144dc8fc8
commit 0f1bb51d5e
1 changed files with 276 additions and 34 deletions
Show Stats Download Patch File Download Diff File

310
src/views/erp/mold/detail/brand.vue
Unescape Escape View File

@ -157,7 +157,12 @@
</el-form>
<el-empty v-if="!repairList.length" />
<el-collapse v-else v-model="repairActiveNames" class="device-ledger-repair-collapse">
<el-collapse-item v-for="row in repairList" :key="row.id ?? row.repairCode" :name="String(row.id ?? row.repairCode)">
<el-collapse-item
v-for="row in repairList"
:key="row.id ?? row.repairCode"
:name="String(row.id ?? row.repairCode)"
class="device-ledger-repair-collapse-item"
>
<template #title>
<div class="device-ledger-repair-title">
<span class="device-ledger-repair-name">{{ row.repairCode ?? '-' }}</span>
@ -165,42 +170,143 @@
</template>
<div class="device-ledger-history-items">
<div class="device-ledger-history-item">
<div class="device-ledger-history-item-body">
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.moldCode') }}</span><span
class="device-ledger-history-item-value">{{ row.moldCode ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.repairStatus') }}</span><span
class="device-ledger-history-item-value"><el-tag
:type="getRepairStatusTagType(row.status)">{{
getRepairStatusLabel(row.status) }}</el-tag></span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.repairStatus') }}</span><span
class="device-ledger-history-item-value"><el-tag
<div class="device-ledger-repair-overview">
<div class="device-ledger-history-item-body">
<div class="device-ledger-repair-section-title">基本信息</div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.repairCode') }}</span><span
class="device-ledger-history-item-value">{{ row.repairCode ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.repairName') }}</span><span
class="device-ledger-history-item-value">{{ row.repairName ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.requireDate') }}</span><span
class="device-ledger-history-item-value">{{ formatHistoryTime(row.requireDate) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.repairUser') }}</span><span
class="device-ledger-history-item-value">{{ row.acceptedByName ?? row.acceptedName ?? row.acceptedBy ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.confirmUser') }}</span><span
class="device-ledger-history-item-value">{{ row.confirmByName ?? row.confirmName ?? row.confirmBy ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.repairStatus') }}</span><span
class="device-ledger-history-item-value"><el-tag
:type="getRepairStatusTagType(row.status)">{{
getRepairStatusLabel(row.status) }}</el-tag></span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('EquipmentManagement.DvRepair.repairStatus') }}</span><span
class="device-ledger-history-item-value"><el-tag
:type="getRepairResultTagType(row.repairStatus)">{{
getRepairResultLabel(row.repairStatus) }}</el-tag></span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.requireDate') }}</span><span
class="device-ledger-history-item-value">{{ formatHistoryTime(row.requireDate) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.finishDate') }}</span><span
class="device-ledger-history-item-value">{{ formatHistoryTime(row.finishDate) }}</span></div>
<div class="device-ledger-history-item-row device-ledger-history-item-row--images"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.faultImages') }}</span><span
class="device-ledger-history-item-value">
<div v-if="parseImages(row.faultImages).length" class="device-ledger-repair-images">
<el-image
v-for="image in parseImages(row.faultImages)"
:key="image"
:src="image"
:preview-src-list="parseImages(row.faultImages)"
preview-teleported
fit="cover"
class="device-ledger-repair-image"
</div>
<div class="device-ledger-history-item-body">
<div class="device-ledger-repair-section-title">维修对象</div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.moldName') }}</span><span
class="device-ledger-history-item-value">{{ row.moldName ?? row.machineryName ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.moldCode') }}</span><span
class="device-ledger-history-item-value">{{ row.moldCode ?? row.machineryCode ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">规格型号</span><span
class="device-ledger-history-item-value">{{ row.machinerySpec ?? row.moldSpec ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">品牌</span><span
class="device-ledger-history-item-value">{{ row.machineryBrand ?? row.moldBrand ?? '-' }}</span></div>
</div>
<div class="device-ledger-history-item-body">
<div class="device-ledger-repair-section-title">故障信息</div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.faultLevel') }}</span><span
class="device-ledger-history-item-value">
<dict-tag
v-if="row.faultLevel !== undefined && row.faultLevel !== null && row.faultLevel !== ''"
:type="DICT_TYPE.FAILURE_LEVEL"
:value="row.faultLevel"
/>
</div>
<div v-else class="device-ledger-repair-image-placeholder">-</div>
</span></div>
<span v-else>-</span>
</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.isShutdown') }}</span><span
class="device-ledger-history-item-value">{{ formatBooleanLabel(row.shutdown ?? row.isShutdown) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.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('MoldManagement.MoldRepair.faultDescription') }}</span><span
class="device-ledger-history-item-value">{{ row.faultDescription ?? '-' }}</span></div>
<div class="device-ledger-history-item-row device-ledger-history-item-row--images"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.faultImages') }}</span><span
class="device-ledger-history-item-value">
<div v-if="parseImages(row.faultImages).length" class="device-ledger-repair-images">
<el-image
v-for="image in parseImages(row.faultImages)"
:key="image"
:src="image"
:preview-src-list="parseImages(row.faultImages)"
preview-teleported
fit="cover"
class="device-ledger-repair-image"
/>
</div>
<div v-else class="device-ledger-repair-image-placeholder">-</div>
</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.remark') }}</span><span
class="device-ledger-history-item-value">{{ row.remark ?? '-' }}</span></div>
</div>
</div>
<div v-if="shouldShowRepairResult(row)" class="device-ledger-repair-result">
<div class="device-ledger-repair-result-head">
<span class="device-ledger-repair-section-title">处理结果</span>
<el-button link type="primary" @click="toggleRepairResult(row)">
{{ isRepairResultExpanded(row) ? '收起' : '展开' }}
</el-button>
</div>
<div v-show="isRepairResultExpanded(row)" class="device-ledger-history-item-body">
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.repairResult') }}</span><span
class="device-ledger-history-item-value"><el-tag
:type="getRepairResultTagType(row.repairStatus)">{{
getRepairResultLabel(row.repairStatus) }}</el-tag></span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldBrandDetail.finishDate') }}</span><span
class="device-ledger-history-item-value">{{ formatHistoryTime(row.finishDate) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.confirmDate') }}</span><span
class="device-ledger-history-item-value">{{ formatHistoryTime(row.confirmDate) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.downtimeDuration') }}</span><span
class="device-ledger-history-item-value">{{ formatDowntimeDuration(row.downtimeDuration) }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.faultReason') }}</span><span
class="device-ledger-history-item-value">{{ row.faultReason ?? '-' }}</span></div>
<div class="device-ledger-history-item-row"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.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('MoldManagement.MoldRepair.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('MoldManagement.MoldRepair.repairContent') }}</span><span
class="device-ledger-history-item-value">{{ row.repairContent ?? '-' }}</span></div>
<div class="device-ledger-history-item-row device-ledger-history-item-row--images"><span
class="device-ledger-history-item-label">{{ t('MoldManagement.MoldRepair.repairedImages') }}</span><span
class="device-ledger-history-item-value">
<div v-if="parseImages(row.repairedImages).length" class="device-ledger-repair-images">
<el-image
v-for="image in parseImages(row.repairedImages)"
:key="image"
:src="image"
:preview-src-list="parseImages(row.repairedImages)"
preview-teleported
fit="cover"
class="device-ledger-repair-image"
/>
</div>
<div v-else class="device-ledger-repair-image-placeholder">-</div>
</span></div>
</div>
</div>
</div>
</div>
@ -443,6 +549,7 @@ const installDateRange = ref<string[] | undefined>()
const installOperateType = ref<string | undefined>()
const moldList = ref<any[]>([])
const repairActiveNames = ref<string[]>([])
const repairResultActiveNames = ref<string[]>([])
const inspectionDateRange = ref<string[] | undefined>()
const maintainDateRange = ref<string[] | undefined>()
const repairDateRange = ref<string[] | undefined>()
@ -485,6 +592,36 @@ const formatHistoryTime = (value: any) => {
return String(raw)
}
const formatBooleanLabel = (value: any) => {
if (value === undefined || value === null || value === '') return '-'
if (value === true || value === 1 || value === '1' || value === 'true') return t('common.yes')
if (value === false || value === 0 || value === '0' || value === 'false') return t('common.no')
return String(value)
}
const formatDowntimeDuration = (value: any) => {
if (value === undefined || value === null || value === '') return '-'
return `${value}小时`
}
const shouldShowRepairResult = (row: any) => {
const value = row?.repairStatus ?? row?.repairResult
const status = value === undefined || value === null || value === '' ? '0' : String(value)
return status !== '0'
}
const getRepairRowKey = (row: any) => String(row?.id ?? row?.repairCode ?? '')
const isRepairResultExpanded = (row: any) => repairResultActiveNames.value.includes(getRepairRowKey(row))
const toggleRepairResult = (row: any) => {
const key = getRepairRowKey(row)
if (!key) return
repairResultActiveNames.value = isRepairResultExpanded(row)
? repairResultActiveNames.value.filter((item) => item !== key)
: [...repairResultActiveNames.value, key]
}
const parseImages = (value: any): string[] => {
if (!value) return []
if (Array.isArray(value)) return value.map(String).filter(Boolean)
@ -782,6 +919,7 @@ const fetchRepairHistory = async () => {
const data = await MoldRepairApi.getMoldRepairList(params)
repairList.value = Array.isArray(data) ? data : []
repairActiveNames.value = repairList.value.map((row: any) => String(row.id ?? row.repairCode))
repairResultActiveNames.value = []
} finally {
repairLoading.value = false
}
@ -1092,6 +1230,39 @@ onMounted(() => {
margin-top: 10px;
}
.device-ledger-repair-collapse {
border-top: 0;
border-bottom: 0;
}
.device-ledger-repair-collapse :deep(.device-ledger-repair-collapse-item) {
overflow: hidden;
margin-bottom: 14px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 8px rgb(31 45 61 / 6%);
}
.device-ledger-repair-collapse :deep(.device-ledger-repair-collapse-item:nth-child(even)) {
background: #fbfdff;
}
.device-ledger-repair-collapse :deep(.device-ledger-repair-collapse-item:last-child) {
margin-bottom: 0;
}
.device-ledger-repair-collapse :deep(.device-ledger-repair-collapse-item .el-collapse-item__header) {
height: 46px;
padding: 0 14px;
border-bottom-color: var(--el-border-color-lighter);
}
.device-ledger-repair-collapse :deep(.device-ledger-repair-collapse-item .el-collapse-item__content) {
padding: 14px;
}
.device-ledger-history-title,
.device-ledger-repair-title {
display: flex;
@ -1117,6 +1288,24 @@ onMounted(() => {
border-radius: 12px;
}
.device-ledger-repair-collapse .device-ledger-history-item {
position: relative;
padding: 16px;
border-color: var(--el-border-color);
background: #fff;
}
.device-ledger-repair-collapse .device-ledger-history-item::before {
position: absolute;
top: 16px;
bottom: 16px;
left: 0;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--el-color-primary);
content: '';
}
.device-ledger-history-item-head {
display: flex;
align-items: center;
@ -1129,6 +1318,50 @@ onMounted(() => {
gap: 8px;
}
.device-ledger-repair-overview {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.device-ledger-repair-overview > .device-ledger-history-item-body {
padding: 12px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
background: var(--el-fill-color-lighter);
}
.device-ledger-repair-overview .device-ledger-history-item-row,
.device-ledger-repair-result .device-ledger-history-item-row {
grid-template-columns: 128px minmax(0, 1fr);
}
.device-ledger-repair-result {
margin-top: 14px;
padding: 12px;
border: 1px solid var(--el-border-color-lighter);
border-radius: 8px;
background: var(--el-fill-color-lighter);
}
.device-ledger-repair-result-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.device-ledger-repair-section-title {
margin-top: 4px;
padding-bottom: 2px;
font-weight: 600;
color: var(--el-text-color-primary);
}
.device-ledger-repair-section-title:first-child {
margin-top: 0;
}
.device-ledger-history-item-row {
display: grid;
grid-template-columns: 88px minmax(0, 1fr);
@ -1143,6 +1376,11 @@ onMounted(() => {
color: var(--el-text-color-secondary);
}
.device-ledger-history-item-value {
min-width: 0;
word-break: break-word;
}
.device-ledger-repair-images {
display: flex;
flex-wrap: wrap;
@ -1192,5 +1430,9 @@ onMounted(() => {
.mold-brand-detail__grid {
grid-template-columns: 1fr;
}
.device-ledger-repair-overview {
grid-template-columns: 1fr;
}
}
</style>

Write Preview
Loading…
Cancel
Save