<template>
|
<div class="page engineering-print-page">
|
<div class="page-title">
|
<div>
|
<h2>工程单打印</h2>
|
<p>按查询条件筛选故障记录，勾选后套用 Word 模板生成四联工程单，明细可自动多页</p>
|
</div>
|
</div>
|
|
<div class="toolbar query-toolbar">
|
<span class="filter-label">rk_X号</span>
|
<el-select v-model="query.xNo" placeholder="请选择rk_X号" style="width:110px">
|
<el-option v-for="item in xNumbers" :key="item" :label="item" :value="item"></el-option>
|
</el-select>
|
<span class="filter-label">rk_T队专业</span>
|
<el-select v-model="query.teamMajor" placeholder="请选择rk_T队专业" style="width:130px">
|
<el-option v-for="item in teamMajors" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
<span class="filter-label">工程专业</span>
|
<el-select v-model="query.engineeringMajor" placeholder="全部" clearable style="width:130px">
|
<el-option v-for="item in engineeringMajors" :key="item.id" :label="item.name" :value="item.name"></el-option>
|
</el-select>
|
<span class="filter-label">上报单位</span>
|
<el-input v-model="query.reportUnit" placeholder="单位名称" clearable style="width:150px" @keyup.enter.native="search"></el-input>
|
<span class="filter-label">负责人</span>
|
<el-input v-model="query.owner" placeholder="负责人" clearable style="width:110px" @keyup.enter.native="search"></el-input>
|
<span class="filter-label">上报日期</span>
|
<el-date-picker
|
v-model="query.reportDateRange"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
style="width:300px"
|
></el-date-picker>
|
<div class="filter-break"></div>
|
<span class="filter-label">任务状态</span>
|
<el-select v-model="query.status" placeholder="全部" clearable style="width:160px">
|
<el-option v-for="(meta, key) in taskStatuses" :key="key" :label="meta.text" :value="key"></el-option>
|
</el-select>
|
<el-input v-model="query.keyword" placeholder="故障编号/设备名称/工程名称及损坏情况" clearable style="width:320px" @keyup.enter.native="search"></el-input>
|
<el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
|
<el-button icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
|
<el-button icon="el-icon-refresh" @click="load">刷新</el-button>
|
</div>
|
|
<div class="toolbar action-toolbar">
|
<span class="selection-tip">已选择 {{ selection.length }} 条</span>
|
<div class="spacer"></div>
|
<el-button type="primary" icon="el-icon-printer" :loading="printing" :disabled="selection.length === 0" @click="print">打印工程单</el-button>
|
<el-button type="success" icon="el-icon-printer" :loading="printingV2" :disabled="selection.length === 0" @click="printV2">打印工程单2</el-button>
|
</div>
|
|
<div class="table-panel">
|
<el-table
|
ref="table"
|
:data="rows"
|
border
|
stripe
|
height="100%"
|
:header-cell-style="{ textAlign: 'center' }"
|
@selection-change="onSelectionChange"
|
>
|
<el-table-column type="selection" width="46"></el-table-column>
|
<el-table-column prop="taskStatus" label="任务状态" width="130" fixed>
|
<template slot-scope="{ row }"><el-tag size="mini" :type="taskMeta(row.taskStatus).type">{{ taskMeta(row.taskStatus).text }}</el-tag></template>
|
</el-table-column>
|
<el-table-column prop="faultCode" label="故障编号" width="180" fixed></el-table-column>
|
<el-table-column prop="xNo" label="rk_X号" width="70"></el-table-column>
|
<el-table-column prop="equipmentName" label="设备名称" min-width="210" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="engineeringNameDesc" label="工程名称及损坏情况" min-width="220" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="repairRequirement" label="修理技术要求" min-width="200" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="engineeringMajor" label="工程专业" width="100"></el-table-column>
|
<el-table-column prop="teamMajor" label="rk_T队专业" width="100"></el-table-column>
|
<el-table-column prop="owner" label="负责人" width="90"></el-table-column>
|
<el-table-column prop="reportUnit" label="上报单位" min-width="130"></el-table-column>
|
<el-table-column prop="reportDate" label="上报日期" width="110" align="center"></el-table-column>
|
<el-table-column prop="requestedFinishDate" label="要求完工日期" width="120" align="center"></el-table-column>
|
</el-table>
|
</div>
|
|
<div class="pagination-bar">
|
<el-pagination
|
background
|
:current-page="pagination.current"
|
:page-size="pagination.size"
|
:page-sizes="[20, 50, 100]"
|
:total="pagination.total"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
<script>
|
import api from '@/api'
|
import { taskStatuses, statusMeta } from '@/utils/dict'
|
|
export default {
|
name: 'EngineeringPrint',
|
data() {
|
return {
|
taskStatuses,
|
query: { keyword: '', status: '', xNo: '', teamMajor: '', engineeringMajor: '', reportUnit: '', owner: '', reportDateRange: [] },
|
rows: [],
|
selection: [],
|
pagination: { current: 1, size: 20, total: 0 },
|
printing: false,
|
printingV2: false,
|
teamMajors: [],
|
engineeringMajors: [],
|
xNumbers: []
|
}
|
},
|
created() {
|
this.init()
|
},
|
methods: {
|
taskMeta(value) { return statusMeta(taskStatuses, value) },
|
async init() {
|
try {
|
await Promise.all([this.loadXNumbers(), this.loadMajors()])
|
} catch (e) {}
|
this.applyDefaultFilters()
|
this.load()
|
},
|
loadXNumbers() {
|
return api.get('/system/tree/product/x-numbers').then(res => { this.xNumbers = res.data || [] })
|
},
|
loadMajors() {
|
const team = api.get('/system/team-majors').then(res => { this.teamMajors = res.data || [] })
|
const engineering = api.get('/system/engineering-majors').then(res => { this.engineeringMajors = res.data || [] })
|
return Promise.all([team, engineering])
|
},
|
applyDefaultFilters() {
|
if (this.xNumbers.length && !this.xNumbers.includes(this.query.xNo)) {
|
this.query.xNo = this.xNumbers[0]
|
}
|
const teamNames = this.teamMajors.map(item => item.name)
|
if (teamNames.length && !teamNames.includes(this.query.teamMajor)) {
|
this.query.teamMajor = teamNames[0]
|
}
|
},
|
queryParams() {
|
const range = this.query.reportDateRange || []
|
return {
|
keyword: this.query.keyword,
|
status: this.query.status,
|
xNo: this.query.xNo,
|
teamMajor: this.query.teamMajor,
|
engineeringMajor: this.query.engineeringMajor,
|
reportUnit: this.query.reportUnit,
|
owner: this.query.owner,
|
reportDateStart: range[0] || '',
|
reportDateEnd: range[1] || ''
|
}
|
},
|
load() {
|
const params = {
|
...this.queryParams(),
|
current: this.pagination.current,
|
size: this.pagination.size
|
}
|
return api.get('/faults/page', { params }).then(res => {
|
const page = res.data || {}
|
this.rows = page.records || []
|
this.pagination.total = Number(page.total || 0)
|
if (!this.rows.length && this.pagination.current > 1 && this.pagination.total > 0) {
|
this.pagination.current -= 1
|
this.load()
|
}
|
})
|
},
|
search() {
|
this.pagination.current = 1
|
this.load()
|
},
|
resetQuery() {
|
this.query = { keyword: '', status: '', xNo: '', teamMajor: '', engineeringMajor: '', reportUnit: '', owner: '', reportDateRange: [] }
|
this.applyDefaultFilters()
|
this.search()
|
},
|
handleCurrentChange(current) {
|
this.pagination.current = current
|
this.load()
|
},
|
handleSizeChange(size) {
|
this.pagination.size = size
|
this.pagination.current = 1
|
this.load()
|
},
|
onSelectionChange(rows) {
|
this.selection = rows
|
},
|
print() {
|
this.printDocument('/faults/engineering-print', '工程单.docx', 'printing')
|
},
|
printV2() {
|
this.printDocument('/faults/engineering-print-v2', '工程单2.docx', 'printingV2')
|
},
|
printDocument(url, filename, loadingKey) {
|
const ids = this.selection.map(item => item.id)
|
if (!ids.length) return
|
this[loadingKey] = true
|
return api.post(url, { ids }, { responseType: 'blob' })
|
.then(res => this.saveDocument(res, filename))
|
.catch(() => {})
|
.finally(() => { this[loadingKey] = false })
|
},
|
async saveDocument(res, filename) {
|
const blob = res instanceof Blob ? res : new Blob([res])
|
if (blob.type && blob.type.indexOf('json') >= 0) {
|
const text = await blob.text()
|
let message = '生成工程单失败'
|
try {
|
message = JSON.parse(text).message || message
|
} catch (e) {}
|
this.$message.error(message)
|
return
|
}
|
const link = document.createElement('a')
|
link.href = URL.createObjectURL(blob)
|
link.download = filename || '工程单.docx'
|
link.click()
|
URL.revokeObjectURL(link.href)
|
this.$message.success((filename || '工程单').replace('.docx', '') + '已生成')
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.engineering-print-page {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
min-height: 0;
|
overflow: hidden;
|
}
|
.engineering-print-page .page-title,
|
.engineering-print-page .toolbar,
|
.engineering-print-page .pagination-bar {
|
flex: 0 0 auto;
|
}
|
.engineering-print-page .table-panel {
|
flex: 1 1 auto;
|
min-height: 0;
|
}
|
.engineering-print-page ::v-deep .el-table__body-wrapper,
|
.engineering-print-page ::v-deep .el-table__fixed-body-wrapper {
|
scrollbar-width: none;
|
-ms-overflow-style: none;
|
}
|
.engineering-print-page ::v-deep .el-table__body-wrapper::-webkit-scrollbar,
|
.engineering-print-page ::v-deep .el-table__fixed-body-wrapper::-webkit-scrollbar {
|
display: none;
|
width: 0;
|
height: 0;
|
}
|
.query-toolbar { margin-bottom: 8px; }
|
.filter-break { flex-basis: 100%; height: 0; }
|
.query-toolbar ::v-deep .el-range-separator { flex: 0 0 18px; min-width: 18px; }
|
.action-toolbar { min-height: 50px; }
|
.filter-label { margin-left: 4px; color: #4d6073; font-size: 13px; white-space: nowrap; }
|
.selection-tip { color: #6d7f91; font-size: 13px; }
|
.selection-hint { margin-left: 12px; color: #9aa7b4; font-size: 12px; }
|
.pagination-bar { display: flex; justify-content: flex-end; padding: 12px 0 4px; }
|
@media (max-width: 900px) {
|
.query-toolbar .el-date-editor { width: 100% !important; }
|
}
|
</style>
|
