<template>
|
<div class="page">
|
<div class="page-title">
|
<div>
|
<h2>完工信息查阅</h2>
|
<p>按故障汇总，同一故障的多张派工单共用故障信息，完工处理情况和更换器材按多条明细展示</p>
|
</div>
|
<el-tag type="info">共 {{ rows.length }} 个故障</el-tag>
|
</div>
|
|
<div class="toolbar">
|
<el-input v-model="filters.keyword" placeholder="故障编号 / rk_X号 / 派工单编号 / 工程名称 / 承修单位" clearable style="width:380px" @keyup.enter.native="load"></el-input>
|
<el-input v-model="filters.contractorName" placeholder="承修单位" clearable style="width:190px" @keyup.enter.native="load"></el-input>
|
<el-select v-model="filters.completionStatus" placeholder="完工状态" clearable style="width:140px">
|
<el-option v-for="(meta, key) in completionStatuses" :key="key" :label="meta.text" :value="key"></el-option>
|
</el-select>
|
<el-date-picker v-model="filters.completionDate" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="完工开始日期" end-placeholder="完工结束日期" style="width:270px"></el-date-picker>
|
<el-button type="primary" icon="el-icon-search" v-permission="'completion:query:query'" @click="load">查询</el-button>
|
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
|
<div class="table-panel">
|
<el-table v-loading="loading" :data="displayRows" border size="small" :span-method="spanMethod" row-key="rowKey">
|
<el-table-column label="序号" width="62" align="center">
|
<template slot-scope="{ row }">{{ row.faultIndex }}</template>
|
</el-table-column>
|
<el-table-column prop="faultCode" label="故障编号" width="150"></el-table-column>
|
<el-table-column prop="xNo" label="rk_X号" width="72"></el-table-column>
|
<el-table-column prop="equipmentName" label="设备名称" width="130" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="engineeringNameDesc" label="工程名称及损坏情况" min-width="190" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="reportUnit" label="上报单位" width="130" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="reportDate" label="上报日期" width="105"></el-table-column>
|
|
<el-table-column prop="workOrderNo" label="派工单编号" width="155"></el-table-column>
|
<el-table-column prop="contractorName" label="承修单位" width="150" show-overflow-tooltip></el-table-column>
|
<el-table-column label="完工状态" width="100">
|
<template slot-scope="{ row }">
|
<el-tag size="mini" :type="completionMeta(row.completionStatus).type">{{ completionMeta(row.completionStatus).text }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="engineeringNo" label="工程编号" width="145"></el-table-column>
|
<el-table-column label="开工 / 完工" width="190">
|
<template slot-scope="{ row }">{{ formatPeriod(row.startDate, row.finishDate) }}</template>
|
</el-table-column>
|
<el-table-column prop="contractorPerson" label="承修人" width="100"></el-table-column>
|
<el-table-column label="完工处理情况" min-width="260">
|
<template slot-scope="{ row }">
|
<div v-if="row.solutions && row.solutions.length" class="detail-list">
|
<div v-for="(item, index) in row.solutions" :key="index" class="detail-line">
|
<span class="detail-index">{{ index + 1 }}</span>
|
<span>{{ item.content || '-' }}</span>
|
</div>
|
</div>
|
<span v-else class="muted">-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="更换器材" min-width="300">
|
<template slot-scope="{ row }">
|
<div v-if="row.materials && row.materials.length" class="detail-list">
|
<div v-for="(item, index) in row.materials" :key="index" class="material-line">
|
<span class="detail-index">{{ index + 1 }}</span>
|
<div>
|
<div><strong>{{ item.name || '-' }}</strong><span v-if="item.specification"> / {{ item.specification }}</span><span v-if="item.quantity != null"> × {{ item.quantity }}{{ item.unit || '' }}</span></div>
|
<div class="material-meta">{{ materialMeta(item) }}</div>
|
</div>
|
</div>
|
</div>
|
<span v-else class="muted">-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="qualityInfo" label="修后质量情况" min-width="180" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="reasonAnalysis" label="原因分析" min-width="180" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="submitTime" label="提交时间" width="160"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import api from '@/api'
|
import { completionStatuses, statusMeta } from '@/utils/dict'
|
|
export default {
|
name: 'CompletionQuery',
|
data() {
|
return {
|
loading: false,
|
completionStatuses,
|
rows: [],
|
filters: {
|
keyword: '',
|
contractorName: '',
|
completionStatus: '',
|
completionDate: []
|
}
|
}
|
},
|
computed: {
|
displayRows() {
|
const rows = []
|
this.rows.forEach((fault, faultIndex) => {
|
const workOrders = fault.workOrders || []
|
const total = workOrders.length || 1
|
if (!workOrders.length) {
|
rows.push({ ...fault, faultIndex: faultIndex + 1, faultRowspan: 1, rowKey: fault.faultId + '-empty' })
|
return
|
}
|
workOrders.forEach((workOrder, index) => {
|
rows.push({
|
...fault,
|
...workOrder,
|
faultIndex: faultIndex + 1,
|
faultRowspan: index === 0 ? total : 0,
|
rowKey: fault.faultId + '-' + workOrder.workOrderId
|
})
|
})
|
})
|
return rows
|
}
|
},
|
created() {
|
this.load()
|
},
|
methods: {
|
load() {
|
this.loading = true
|
const range = this.filters.completionDate || []
|
api.get('/work-orders/completion/query', {
|
params: {
|
keyword: this.filters.keyword || undefined,
|
contractorName: this.filters.contractorName || undefined,
|
completionStatus: this.filters.completionStatus || undefined,
|
startDate: range[0] || undefined,
|
endDate: range[1] || undefined
|
}
|
}).then(res => {
|
this.rows = res.data || []
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
reset() {
|
this.filters = { keyword: '', contractorName: '', completionStatus: '', completionDate: [] }
|
this.load()
|
},
|
completionMeta(value) {
|
return statusMeta(completionStatuses, value)
|
},
|
spanMethod({ row, columnIndex }) {
|
if (columnIndex <= 6) {
|
return row.faultRowspan === 0 ? { rowspan: 0, colspan: 0 } : { rowspan: row.faultRowspan, colspan: 1 }
|
}
|
return { rowspan: 1, colspan: 1 }
|
},
|
formatPeriod(startDate, finishDate) {
|
return [startDate || '-', finishDate || '-'].join(' 至 ')
|
},
|
materialMeta(item) {
|
const parts = []
|
if (item.technicalParameter) parts.push(item.technicalParameter)
|
if (item.source) parts.push('来源：' + item.source)
|
if (item.outboundNo) parts.push('出库单：' + item.outboundNo)
|
if (item.certificate) parts.push('合格证明：' + item.certificate)
|
if (item.remark) parts.push('备注：' + item.remark)
|
return parts.join('；') || '-'
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.table-panel {
|
overflow-x: auto;
|
}
|
.detail-list {
|
display: flex;
|
flex-direction: column;
|
gap: 5px;
|
}
|
.detail-line,
|
.material-line {
|
display: flex;
|
align-items: flex-start;
|
gap: 6px;
|
line-height: 20px;
|
}
|
.material-line > div {
|
min-width: 0;
|
}
|
.detail-index {
|
flex: 0 0 auto;
|
min-width: 16px;
|
height: 16px;
|
margin-top: 2px;
|
border-radius: 50%;
|
color: #fff;
|
background: #7b8fa6;
|
font-size: 11px;
|
line-height: 16px;
|
text-align: center;
|
}
|
.material-meta {
|
color: #7b8a9a;
|
font-size: 12px;
|
}
|
.muted {
|
color: #a3afbc;
|
}
|
</style>
|
