feat(mes/eqp): 新增设备巡检管理模块及相关组件
本次提交新增了完整的设备巡检管理功能： 1. 新增QRCode组件，支持带文字描述的二维码展示 2. 新增检验部位、设备检验清单、巡检记录的CRUD API 3. 新增检验清单选择器组件 4. 新增巡检部位管理、检验清单管理、巡检记录管理页面 5. 新增设备巡检总览页面，支持拖拽分栏管理部位和检验清单，附带二维码生成打印功能 6. 新增单日设备巡检日报页面
This commit is contained in:
44
klp-ui/src/api/mes/eqp/equipmentChecklist.js
Normal file
44
klp-ui/src/api/mes/eqp/equipmentChecklist.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询设备检验清单列表
|
||||
export function listEquipmentChecklist(query) {
|
||||
return request({
|
||||
url: '/eqp/equipmentChecklist/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询设备检验清单详细
|
||||
export function getEquipmentChecklist(checkId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentChecklist/' + checkId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增设备检验清单
|
||||
export function addEquipmentChecklist(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentChecklist',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改设备检验清单
|
||||
export function updateEquipmentChecklist(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentChecklist',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除设备检验清单
|
||||
export function delEquipmentChecklist(checkId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentChecklist/' + checkId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
klp-ui/src/api/mes/eqp/equipmentInspectionRecord.js
Normal file
44
klp-ui/src/api/mes/eqp/equipmentInspectionRecord.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询设备巡检记录列表
|
||||
export function listEquipmentInspectionRecord(query) {
|
||||
return request({
|
||||
url: '/eqp/equipmentInspectionRecord/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询设备巡检记录详细
|
||||
export function getEquipmentInspectionRecord(recordId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentInspectionRecord/' + recordId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增设备巡检记录
|
||||
export function addEquipmentInspectionRecord(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentInspectionRecord',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改设备巡检记录
|
||||
export function updateEquipmentInspectionRecord(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentInspectionRecord',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除设备巡检记录
|
||||
export function delEquipmentInspectionRecord(recordId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentInspectionRecord/' + recordId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
44
klp-ui/src/api/mes/eqp/equipmentPart.js
Normal file
44
klp-ui/src/api/mes/eqp/equipmentPart.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询检验部位列表
|
||||
export function listEquipmentPart(query) {
|
||||
return request({
|
||||
url: '/eqp/equipmentPart/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询检验部位详细
|
||||
export function getEquipmentPart(partId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentPart/' + partId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增检验部位
|
||||
export function addEquipmentPart(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentPart',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改检验部位
|
||||
export function updateEquipmentPart(data) {
|
||||
return request({
|
||||
url: '/eqp/equipmentPart',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除检验部位
|
||||
export function delEquipmentPart(partId) {
|
||||
return request({
|
||||
url: '/eqp/equipmentPart/' + partId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
72
klp-ui/src/components/ChecklistSelect/index.vue
Normal file
72
klp-ui/src/components/ChecklistSelect/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="innerValue"
|
||||
filterable
|
||||
:loading="loading"
|
||||
placeholder="请选择检验清单"
|
||||
clearable
|
||||
@change="handleChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.checkId"
|
||||
:label="`${item.checkNo || '无编号'} - ${item.partName || ''}`"
|
||||
:value="item.checkId"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEquipmentChecklist } from "@/api/mes/eqp/equipmentChecklist";
|
||||
|
||||
export default {
|
||||
name: "ChecklistSelect",
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
options: [],
|
||||
innerValue: this.value
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.innerValue = val;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadAll();
|
||||
},
|
||||
methods: {
|
||||
async loadAll() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const res = await listEquipmentChecklist({ pageNum: 1, pageSize: 9999 });
|
||||
if (res.code === 200) {
|
||||
this.options = res.rows || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("获取检验清单列表失败", e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleChange(val) {
|
||||
if (!val) {
|
||||
this.$emit('input', "");
|
||||
this.$emit('change', "", null);
|
||||
} else {
|
||||
this.$emit('input', val);
|
||||
const row = this.options.find(o => o.checkId === val);
|
||||
this.$emit('change', val, row || null);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<canvas ref="qrcode"></canvas>
|
||||
<div class="qrcode-wrapper">
|
||||
<canvas ref="qrcode"></canvas>
|
||||
<p v-if="text" class="qrcode-text">{{ text }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -15,8 +18,12 @@ export default {
|
||||
size: {
|
||||
type: Number,
|
||||
default: 90
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
qrcode: null
|
||||
@@ -48,4 +55,18 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qrcode-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.qrcode-text {
|
||||
margin-top: 8px;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
181
klp-ui/src/views/mes/eqp/check/day.vue
Normal file
181
klp-ui/src/views/mes/eqp/check/day.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<el-row>
|
||||
<el-form label-width="80px" inline>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker v-model="queryDate" type="date" value-format="yyyy-MM-dd"
|
||||
placeholder="选择日期" @change="handleQuery" style="width: 200px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线">
|
||||
<dict-select v-model="productionLine" dict-type="sys_lines" placeholder="请选择产线"
|
||||
clearable @change="handleQuery" style="width: 150px;" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-descriptions title="巡检日报" :column="4" border style="margin-bottom: 16px;">
|
||||
<el-descriptions-item label="巡检部位数">{{ summary.partCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="巡检项数">{{ summary.checklistCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="总巡检次数">{{ summary.totalCount }}</el-descriptions-item>
|
||||
<el-descriptions-item label="通过">
|
||||
<el-tag type="success" size="small">{{ summary.passCount }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="不通过">
|
||||
<el-tag type="danger" size="small">{{ summary.failCount }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="通过率">{{ summary.passRate }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-table :data="tableData" border stripe style="width: 100%" :cell-style="cellStyle"
|
||||
@cell-mouse-enter="handleCellEnter" @cell-mouse-leave="handleCellLeave">
|
||||
<el-table-column label="巡检部位" align="center" prop="partName" width="140" />
|
||||
<el-table-column label="巡检内容" align="center" prop="checkContent" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="白班" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.dayRecords && scope.row.dayRecords.length" style="display: flex; gap: 8px;">
|
||||
<div v-for="(r, idx) in scope.row.dayRecords" :key="idx" style="margin:2px 0;">
|
||||
<el-tooltip placement="top" popper-class="inspect-tooltip">
|
||||
<div slot="content">
|
||||
<div>{{ r.inspectTime }} | 白班 | {{ r.inspector }} | {{ r.runStatus == 1 ? '通过' : '不通过' }}{{ r.abnormalDesc ? '异常: ' + r.abnormalDesc : '' }}</div>
|
||||
</div>
|
||||
<span v-if="r.runStatus == 1" class="result-icon result-pass">✓</span>
|
||||
<span v-else class="result-icon result-fail">✗</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="result-none">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="夜班" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.nightRecords && scope.row.nightRecords.length" style="display: flex; gap: 8px;">
|
||||
<div v-for="(r, idx) in scope.row.nightRecords" :key="idx" style="margin:2px 0;">
|
||||
<el-tooltip placement="top" popper-class="inspect-tooltip">
|
||||
<div slot="content">
|
||||
<div>{{ r.inspectTime }} | 夜班 | {{ r.inspector }} | {{ r.runStatus == 1 ? '通过' : '不通过' }} {{ r.abnormalDesc ? '异常: ' + r.abnormalDesc : '' }}</div>
|
||||
</div>
|
||||
<span v-if="r.runStatus == 1" class="result-icon result-pass">✓</span>
|
||||
<span v-else class="result-icon result-fail">✗</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="result-none">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEquipmentPart } from "@/api/mes/eqp/equipmentPart";
|
||||
import { listEquipmentChecklist } from "@/api/mes/eqp/equipmentChecklist";
|
||||
import { listEquipmentInspectionRecord } from "@/api/mes/eqp/equipmentInspectionRecord";
|
||||
|
||||
export default {
|
||||
name: "DailyInspectionReport",
|
||||
dicts: ['sys_lines'],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
queryDate: this.getToday(),
|
||||
productionLine: '酸轧线',
|
||||
partList: [],
|
||||
checklistList: [],
|
||||
records: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tableData() {
|
||||
const recordMap = {};
|
||||
this.records.forEach(r => {
|
||||
const key = `${r.checkId}_${r.shift}`;
|
||||
if (!recordMap[key]) recordMap[key] = [];
|
||||
recordMap[key].push(r);
|
||||
});
|
||||
|
||||
return this.checklistList.map(cl => {
|
||||
const dayRecords = recordMap[`${cl.checkId}_1`] || [];
|
||||
const nightRecords = recordMap[`${cl.checkId}_2`] || [];
|
||||
|
||||
return {
|
||||
checkId: cl.checkId,
|
||||
partName: cl.partName,
|
||||
checkContent: cl.checkContent,
|
||||
dayRecords,
|
||||
nightRecords,
|
||||
};
|
||||
});
|
||||
},
|
||||
summary() {
|
||||
const totalCount = this.records.length;
|
||||
const passCount = this.records.filter(r => r.runStatus === 1).length;
|
||||
const failCount = this.records.filter(r => r.runStatus === 2).length;
|
||||
return {
|
||||
partCount: this.partList.length,
|
||||
checklistCount: this.checklistList.length,
|
||||
totalCount,
|
||||
passCount,
|
||||
failCount,
|
||||
passRate: totalCount > 0 ? (passCount / totalCount * 100).toFixed(1) + "%" : "0%",
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getToday() {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
|
||||
},
|
||||
cellStyle({ columnIndex }) {
|
||||
if (columnIndex === 2 || columnIndex === 3) return { fontSize: "20px", padding: "4px" };
|
||||
},
|
||||
handleCellEnter(row, column) {},
|
||||
handleCellLeave(row, column) {},
|
||||
async handleQuery() {
|
||||
if (!this.queryDate) return;
|
||||
this.loading = true;
|
||||
try {
|
||||
const partParams = {};
|
||||
if (this.productionLine) partParams.productionLine = this.productionLine;
|
||||
const [partRes, checklistRes, recordRes] = await Promise.all([
|
||||
listEquipmentPart(partParams),
|
||||
listEquipmentChecklist(partParams),
|
||||
listEquipmentInspectionRecord({ startTime: this.queryDate, endTime: this.queryDate, pageSize: 9999 }),
|
||||
]);
|
||||
if (partRes.code === 200) this.partList = partRes.rows || [];
|
||||
if (checklistRes.code === 200) this.checklistList = checklistRes.rows || [];
|
||||
if (recordRes.code === 200) this.records = recordRes.rows || [];
|
||||
} catch (e) {
|
||||
console.error("查询失败", e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.handleQuery();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.result-icon {
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
.result-pass { color: #67c23a; }
|
||||
.result-fail { color: #f56c6c; }
|
||||
.result-none { color: #c0c4cc; font-size: 16px; }
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.inspect-tooltip {
|
||||
max-width: 400px;
|
||||
line-height: 1.6;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
674
klp-ui/src/views/mes/eqp/check/index.vue
Normal file
674
klp-ui/src/views/mes/eqp/check/index.vue
Normal file
@@ -0,0 +1,674 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<dict-select v-model="sharedQueryParams.productionLine" dict-type="sys_lines" placeholder="请选择产线" renderType="radio"
|
||||
clearable kisv @change="handleQuery" />
|
||||
|
||||
<DragResizePanel direction="horizontal" :initialSize="500" :minSize="350"
|
||||
style="height: calc(100vh - 164px); margin-top: 10px;">
|
||||
<template #panelA>
|
||||
<div style="height: 100%; padding: 0 10px; display: flex; flex-direction: column;">
|
||||
<el-form :model="partQueryParams" size="small" :inline="true" label-width="80px">
|
||||
<el-form-item label="巡检部位" prop="inspectPart">
|
||||
<el-input v-model="partQueryParams.inspectPart" placeholder="请输入巡检部位" clearable
|
||||
@keyup.enter.native="handlePartQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线段" prop="lineSection">
|
||||
<el-input v-model="sharedQueryParams.lineSection" placeholder="请输入产线段" clearable
|
||||
@keyup.enter.native="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handlePartQuery">搜索</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handlePartAdd">新增</el-button>
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="partSingle"
|
||||
@click="handlePartUpdate">修改</el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="partMultiple"
|
||||
@click="handlePartDelete">删除</el-button>
|
||||
</el-row>
|
||||
|
||||
<div v-loading="partLoading" style="flex: 1; overflow-y: auto; overflow-x: hidden;">
|
||||
<div v-for="item in equipmentPartList" :key="item.partId" class="part-card"
|
||||
:class="{ 'part-card-selected': isCurrentPart(item) }" @click="handlePartRowClick(item)">
|
||||
<el-checkbox :value="!!partCheckedMap[item.partId]" @click.stop @change="togglePartSelect(item)"
|
||||
class="part-checkbox" />
|
||||
<div class="part-card-body">
|
||||
<div class="part-card-name">
|
||||
<pre>{{ item.inspectPart }}</pre>
|
||||
</div>
|
||||
<div class="part-card-meta">
|
||||
<span>{{ item.productionLine }}</span>
|
||||
<template v-if="item.lineSection"> / {{ item.lineSection }}</template>
|
||||
<template v-if="item.remark"> | {{ item.remark }}</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="part-card-actions" @click.stop>
|
||||
<el-button size="mini" type="text" icon="el-icon-document-copy" @click="handlePartCopy(item)" />
|
||||
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAddChecklistForPart(item)" />
|
||||
<el-button size="mini" type="text" icon="el-icon-full-screen" @click="handleShowQRCode(item)" />
|
||||
<el-button size="mini" type="text" icon="el-icon-edit" @click="handlePartUpdate(item)" />
|
||||
<el-button size="mini" type="text" icon="el-icon-delete" @click="handlePartDelete(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #panelB>
|
||||
<div style="height: 100%; padding: 0 10px; display: flex; flex-direction: column; overflow: hidden;">
|
||||
<el-form :model="checklistQueryParams" ref="checklistQueryForm" size="small" :inline="true"
|
||||
label-width="80px">
|
||||
<el-form-item label="检验编号" prop="checkNo">
|
||||
<el-input v-model="checklistQueryParams.checkNo" placeholder="请输入检验编号" clearable
|
||||
@keyup.enter.native="handleChecklistQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检验部位" prop="partId">
|
||||
<el-select v-model="checklistQueryParams.partId" placeholder="请选择检验部位" clearable size="mini"
|
||||
@change="handleChecklistQuery" style="width: 150px;">
|
||||
<el-option v-for="item in equipmentPartList" :key="item.partId" :label="item.inspectPart"
|
||||
:value="item.partId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="equipmentState">
|
||||
<el-select v-model="checklistQueryParams.equipmentState" placeholder="请选择设备状态" clearable
|
||||
@change="handleChecklistQuery" style="width: 150px;">
|
||||
<el-option label="运行" value="运行" />
|
||||
<el-option label="停止" value="停止" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验标准" prop="checkStandard">
|
||||
<el-input v-model="checklistQueryParams.checkStandard" placeholder="请输入检验标准" clearable
|
||||
@keyup.enter.native="handleChecklistQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleChecklistQuery">搜索</el-button>
|
||||
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleChecklistAdd">新增</el-button>
|
||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="checklistSingle"
|
||||
@click="handleChecklistUpdate">修改</el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="checklistMultiple"
|
||||
@click="handleChecklistDelete">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div v-loading="checklistLoading" style="flex: 1; overflow: hidden;">
|
||||
<el-table :data="equipmentChecklistList" height="calc(100% - 20px)"
|
||||
@selection-change="handleChecklistSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="检验编号" align="center" prop="checkNo" width="120" />
|
||||
<el-table-column label="设备部件名称" align="center" prop="partName" width="120" />
|
||||
<el-table-column label="检验内容" align="center" prop="checkContent" min-width="120" />
|
||||
<el-table-column label="设备状态" align="center" prop="equipmentState" width="80" />
|
||||
<el-table-column label="检验标准" align="center" prop="checkStandard" min-width="120" />
|
||||
<el-table-column label="备注" align="center" prop="remark" width="120" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" icon="el-icon-document-copy"
|
||||
@click.stop="handleChecklistCopy(scope.row)">
|
||||
</el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-edit"
|
||||
@click.stop="handleChecklistUpdate(scope.row)"></el-button>
|
||||
<el-button size="mini" type="text" icon="el-icon-delete"
|
||||
@click.stop="handleChecklistDelete(scope.row)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- <pagination v-show="checklistTotal > 0" :total="checklistTotal" :page.sync="checklistQueryParams.pageNum"
|
||||
:limit.sync="checklistQueryParams.pageSize" @pagination="getChecklistList" /> -->
|
||||
</div>
|
||||
</template>
|
||||
</DragResizePanel>
|
||||
|
||||
<el-dialog :title="partTitle" :visible.sync="partOpen" width="500px" append-to-body>
|
||||
<el-form ref="partForm" :model="partForm" :rules="partRules" label-width="80px">
|
||||
<el-form-item label="产线" prop="productionLine">
|
||||
<dict-select v-model="partForm.productionLine" dict-type="sys_lines" kisv placeholder="请选择产线" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线段" prop="lineSection">
|
||||
<el-input v-model="partForm.lineSection" placeholder="请输入产线段" />
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检部位" prop="inspectPart">
|
||||
<el-input v-model="partForm.inspectPart" placeholder="请输入巡检部位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="partForm.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="partButtonLoading" type="primary" @click="submitPartForm">确 定</el-button>
|
||||
<el-button @click="cancelPart">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="qrCodeTitle" :visible.sync="qrCodeOpen" width="360px" append-to-body>
|
||||
<div ref="qrCodeWrapper" style="display: flex; flex-direction: column; align-items: center; padding: 10px 0;">
|
||||
<QRCode ref="qrCodeRef" :content="qrCodeContent" :size="200" :text="qrCodeText" />
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="qrCodeLoading" type="primary" @click="saveQRCodeImage">保存图片</el-button>
|
||||
<el-button :loading="qrCodeLoading" type="primary" @click="printQRCode">打印</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :title="checklistTitle" :visible.sync="checklistOpen" width="500px" append-to-body>
|
||||
<el-form ref="checklistForm" :model="checklistForm" :rules="checklistRules" label-width="80px">
|
||||
<el-form-item label="检验编号" prop="checkNo">
|
||||
<el-input v-model="checklistForm.checkNo" placeholder="请输入检验编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检验部位" prop="partId">
|
||||
<el-select v-model="checklistForm.partId" placeholder="请选择检验部位" clearable style="width: 100%;">
|
||||
<el-option v-for="item in equipmentPartList" :key="item.partId" :label="item.inspectPart"
|
||||
:value="item.partId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验内容">
|
||||
<el-input v-model="checklistForm.checkContent" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="equipmentState">
|
||||
<el-select v-model="checklistForm.equipmentState" placeholder="请选择设备状态" clearable style="width: 100%;">
|
||||
<el-option label="运行" value="运行" />
|
||||
<el-option label="停止" value="停止" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验标准" prop="checkStandard">
|
||||
<el-input v-model="checklistForm.checkStandard" type="textarea" placeholder="请输入检验标准" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="checklistForm.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="checklistButtonLoading" type="primary" @click="submitChecklistForm">确 定</el-button>
|
||||
<el-button @click="cancelChecklist">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DragResizePanel from "@/components/DragResizePanel";
|
||||
import QRCode from "@/components/QRCode";
|
||||
import domToImage from 'dom-to-image';
|
||||
import html2canvas from 'html2canvas';
|
||||
import { PDFDocument } from 'pdf-lib';
|
||||
import { listEquipmentPart, getEquipmentPart, delEquipmentPart, addEquipmentPart, updateEquipmentPart } from "@/api/mes/eqp/equipmentPart";
|
||||
import { listEquipmentChecklist, getEquipmentChecklist, delEquipmentChecklist, addEquipmentChecklist, updateEquipmentChecklist } from "@/api/mes/eqp/equipmentChecklist";
|
||||
|
||||
export default {
|
||||
name: "EquipmentPartChecklist",
|
||||
components: { DragResizePanel, QRCode },
|
||||
dicts: ['sys_lines'],
|
||||
data() {
|
||||
return {
|
||||
showSearch: true,
|
||||
|
||||
// Shared query params (productionLine & lineSection)
|
||||
sharedQueryParams: {
|
||||
productionLine: '酸轧线',
|
||||
lineSection: undefined
|
||||
},
|
||||
|
||||
// Part (left side)
|
||||
partLoading: false,
|
||||
partButtonLoading: false,
|
||||
partIds: [],
|
||||
partSingle: true,
|
||||
partMultiple: true,
|
||||
partTotal: 0,
|
||||
equipmentPartList: [],
|
||||
partTitle: "",
|
||||
partOpen: false,
|
||||
partQueryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
inspectPart: undefined,
|
||||
},
|
||||
partCheckedMap: {},
|
||||
partForm: {},
|
||||
partRules: {
|
||||
inspectPart: [
|
||||
{ required: true, message: "巡检部位不能为空", trigger: "blur" }
|
||||
],
|
||||
productionLine: [
|
||||
{ required: true, message: "产线不能为空", trigger: "blur" }
|
||||
],
|
||||
lineSection: [
|
||||
{ required: true, message: "产线段不能为空", trigger: "blur" }
|
||||
]
|
||||
},
|
||||
|
||||
// Checklist (right side)
|
||||
checklistLoading: false,
|
||||
checklistButtonLoading: false,
|
||||
checklistIds: [],
|
||||
checklistSingle: true,
|
||||
checklistMultiple: true,
|
||||
checklistTotal: 0,
|
||||
equipmentChecklistList: [],
|
||||
checklistTitle: "",
|
||||
checklistOpen: false,
|
||||
checklistQueryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
checkNo: undefined,
|
||||
partId: undefined,
|
||||
partName: undefined,
|
||||
equipmentState: undefined,
|
||||
checkStandard: undefined,
|
||||
responsiblePerson: undefined
|
||||
},
|
||||
checklistForm: {},
|
||||
checklistRules: {},
|
||||
currentPart: {},
|
||||
|
||||
// QR Code
|
||||
qrCodeOpen: false,
|
||||
qrCodeTitle: '',
|
||||
qrCodeContent: '',
|
||||
qrCodeText: '',
|
||||
qrCodeLoading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentPartId() {
|
||||
return this.currentPart?.partId || "";
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getPartList();
|
||||
this.getChecklistList();
|
||||
},
|
||||
methods: {
|
||||
// ========== Shared ==========
|
||||
applySharedParams() {
|
||||
this.partQueryParams.productionLine = this.sharedQueryParams.productionLine;
|
||||
this.partQueryParams.lineSection = this.sharedQueryParams.lineSection;
|
||||
this.checklistQueryParams.productionLine = this.sharedQueryParams.productionLine;
|
||||
this.checklistQueryParams.lineSection = this.sharedQueryParams.lineSection;
|
||||
},
|
||||
handleQuery() {
|
||||
this.partQueryParams.pageNum = 1;
|
||||
this.checklistQueryParams.pageNum = 1;
|
||||
this.applySharedParams();
|
||||
this.getPartList(true);
|
||||
// this.getChecklistList();
|
||||
},
|
||||
resetQuery() {
|
||||
this.sharedQueryParams.productionLine = undefined;
|
||||
this.sharedQueryParams.lineSection = undefined;
|
||||
this.handleQuery();
|
||||
},
|
||||
|
||||
// ========== Part (Left) ==========
|
||||
getPartList(splitChild = false) {
|
||||
this.partLoading = true;
|
||||
this.applySharedParams();
|
||||
listEquipmentPart(this.partQueryParams).then(response => {
|
||||
this.equipmentPartList = response.rows;
|
||||
if (splitChild) {
|
||||
this.checklistLoading = true;
|
||||
// 收集所有的checklistList
|
||||
this.equipmentChecklistList = this.equipmentPartList.flatMap(item => item.checklistList || []);
|
||||
this.checklistLoading = false;
|
||||
}
|
||||
this.partTotal = response.total;
|
||||
this.partLoading = false;
|
||||
});
|
||||
},
|
||||
handlePartQuery() {
|
||||
this.partQueryParams.pageNum = 1;
|
||||
this.getPartList();
|
||||
},
|
||||
isCurrentPart(item) {
|
||||
return this.currentPart && this.currentPart.partId === item.partId;
|
||||
},
|
||||
togglePartSelect(item) {
|
||||
const checked = !this.partCheckedMap[item.partId];
|
||||
this.$set(this.partCheckedMap, item.partId, checked);
|
||||
this.updatePartSelection();
|
||||
},
|
||||
updatePartSelection() {
|
||||
const selected = this.equipmentPartList.filter(item => this.partCheckedMap[item.partId]);
|
||||
this.partIds = selected.map(item => item.partId);
|
||||
this.partSingle = selected.length !== 1;
|
||||
this.partMultiple = !selected.length;
|
||||
},
|
||||
handlePartRowClick(row) {
|
||||
this.checklistQueryParams.partId = row.partId;
|
||||
this.checklistQueryParams.pageNum = 1;
|
||||
this.currentPart = row;
|
||||
this.getChecklistList();
|
||||
},
|
||||
resetPartForm() {
|
||||
this.partForm = {
|
||||
partId: undefined,
|
||||
inspectPart: undefined,
|
||||
remark: undefined,
|
||||
productionLine: undefined,
|
||||
lineSection: undefined
|
||||
};
|
||||
this.resetForm("partForm");
|
||||
},
|
||||
cancelPart() {
|
||||
this.partOpen = false;
|
||||
this.resetPartForm();
|
||||
},
|
||||
handlePartAdd() {
|
||||
this.resetPartForm();
|
||||
if (this.sharedQueryParams.productionLine) {
|
||||
this.partForm.productionLine = this.sharedQueryParams.productionLine;
|
||||
}
|
||||
if (this.sharedQueryParams.lineSection) {
|
||||
this.partForm.lineSection = this.sharedQueryParams.lineSection;
|
||||
}
|
||||
this.partOpen = true;
|
||||
this.partTitle = "添加检验部位";
|
||||
},
|
||||
handlePartUpdate(row) {
|
||||
this.partLoading = true;
|
||||
this.resetPartForm();
|
||||
const partId = row.partId || this.partIds;
|
||||
getEquipmentPart(partId).then(response => {
|
||||
this.partLoading = false;
|
||||
this.partForm = response.data;
|
||||
this.partOpen = true;
|
||||
this.partTitle = "修改检验部位";
|
||||
});
|
||||
},
|
||||
submitPartForm() {
|
||||
this.$refs["partForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.partButtonLoading = true;
|
||||
if (this.partForm.partId != null) {
|
||||
updateEquipmentPart(this.partForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.partOpen = false;
|
||||
this.getPartList();
|
||||
}).finally(() => {
|
||||
this.partButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEquipmentPart(this.partForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.partOpen = false;
|
||||
this.getPartList();
|
||||
}).finally(() => {
|
||||
this.partButtonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handlePartDelete(row) {
|
||||
const partIds = row.partId || this.partIds;
|
||||
this.$modal.confirm('是否确认删除检验部位编号为"' + partIds + '"的数据项？').then(() => {
|
||||
this.partLoading = true;
|
||||
return delEquipmentPart(partIds);
|
||||
}).then(() => {
|
||||
this.partLoading = false;
|
||||
this.getPartList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => { }).finally(() => {
|
||||
this.partLoading = false;
|
||||
});
|
||||
},
|
||||
handlePartCopy(row) {
|
||||
this.partLoading = true;
|
||||
this.resetPartForm();
|
||||
getEquipmentPart(row.partId).then(response => {
|
||||
this.partLoading = false;
|
||||
this.partForm = response.data;
|
||||
this.partForm.partId = undefined;
|
||||
this.partOpen = true;
|
||||
this.partTitle = "复制新增检验部位";
|
||||
});
|
||||
},
|
||||
handleAddChecklistForPart(row) {
|
||||
this.resetChecklistForm();
|
||||
this.checklistForm.partId = row.partId;
|
||||
this.checklistOpen = true;
|
||||
this.checklistTitle = "添加设备检验清单";
|
||||
},
|
||||
handleShowQRCode(row) {
|
||||
this.qrCodeContent = `eqpPart::${row.partId}`;
|
||||
this.qrCodeText = row.inspectPart;
|
||||
this.qrCodeTitle = `二维码 - ${row.inspectPart}`;
|
||||
this.qrCodeOpen = true;
|
||||
},
|
||||
async saveQRCodeImage() {
|
||||
const el = this.$refs.qrCodeWrapper;
|
||||
if (!el) return;
|
||||
this.qrCodeLoading = true;
|
||||
try {
|
||||
const dataUrl = await domToImage.toPng(el);
|
||||
const link = document.createElement('a');
|
||||
link.href = dataUrl;
|
||||
link.download = `二维码_${this.qrCodeText}_${new Date().getTime()}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
this.$modal.msgSuccess('图片保存成功');
|
||||
} catch (error) {
|
||||
console.error('保存二维码图片失败:', error);
|
||||
this.$modal.msgError('保存图片失败');
|
||||
} finally {
|
||||
this.qrCodeLoading = false;
|
||||
}
|
||||
},
|
||||
async printQRCode() {
|
||||
const el = this.$refs.qrCodeWrapper;
|
||||
if (!el) return;
|
||||
this.qrCodeLoading = true;
|
||||
try {
|
||||
const canvas = await html2canvas(el, {
|
||||
backgroundColor: '#ffffff',
|
||||
scale: 3,
|
||||
useCORS: true,
|
||||
});
|
||||
const mmToPt = 72 / 25.4;
|
||||
const sizeMm = 100;
|
||||
const sizePt = sizeMm * mmToPt;
|
||||
const pdfDoc = await PDFDocument.create();
|
||||
const imgPng = await pdfDoc.embedPng(canvas.toDataURL('image/png'));
|
||||
const page = pdfDoc.addPage([sizePt, sizePt]);
|
||||
const imgDims = imgPng.scale(1);
|
||||
const scale = Math.min(sizePt / imgDims.width, sizePt / imgDims.height);
|
||||
const dw = imgDims.width * scale;
|
||||
const dh = imgDims.height * scale;
|
||||
page.drawImage(imgPng, {
|
||||
x: (sizePt - dw) / 2,
|
||||
y: (sizePt - dh) / 2,
|
||||
width: dw,
|
||||
height: dh,
|
||||
});
|
||||
const pdfBytes = await pdfDoc.save();
|
||||
const blob = new Blob([pdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
window.open(url, '_blank');
|
||||
} catch (error) {
|
||||
console.error('打印二维码失败:', error);
|
||||
this.$modal.msgError('打印失败');
|
||||
} finally {
|
||||
this.qrCodeLoading = false;
|
||||
}
|
||||
},
|
||||
handlePartExport() {
|
||||
this.download('eqp/equipmentPart/export', {
|
||||
...this.partQueryParams
|
||||
}, `equipmentPart_${new Date().getTime()}.xlsx`);
|
||||
},
|
||||
|
||||
// ========== Checklist (Right) ==========
|
||||
getChecklistList() {
|
||||
this.checklistLoading = true;
|
||||
this.applySharedParams();
|
||||
listEquipmentChecklist(this.checklistQueryParams).then(response => {
|
||||
this.equipmentChecklistList = response.rows;
|
||||
this.checklistTotal = response.total;
|
||||
this.checklistLoading = false;
|
||||
});
|
||||
},
|
||||
handleChecklistQuery() {
|
||||
this.checklistQueryParams.pageNum = 1;
|
||||
this.getChecklistList();
|
||||
},
|
||||
handleChecklistSelectionChange(selection) {
|
||||
this.checklistIds = selection.map(item => item.checkId);
|
||||
this.checklistSingle = selection.length !== 1;
|
||||
this.checklistMultiple = !selection.length;
|
||||
},
|
||||
resetChecklistForm() {
|
||||
this.checklistForm = {
|
||||
checkId: undefined,
|
||||
checkNo: undefined,
|
||||
partId: undefined,
|
||||
partName: undefined,
|
||||
checkContent: undefined,
|
||||
equipmentState: undefined,
|
||||
checkStandard: undefined,
|
||||
responsiblePerson: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("checklistForm");
|
||||
},
|
||||
cancelChecklist() {
|
||||
this.checklistOpen = false;
|
||||
this.resetChecklistForm();
|
||||
},
|
||||
handleChecklistAdd() {
|
||||
this.resetChecklistForm();
|
||||
if (this.currentPart?.partId) {
|
||||
this.checklistForm.partId = this.currentPart.partId;
|
||||
}
|
||||
this.checklistOpen = true;
|
||||
this.checklistTitle = "添加设备检验清单";
|
||||
},
|
||||
handleChecklistCopy(row) {
|
||||
this.checklistLoading = true;
|
||||
this.resetChecklistForm();
|
||||
getEquipmentChecklist(row.checkId).then(response => {
|
||||
this.checklistLoading = false;
|
||||
this.checklistForm = response.data;
|
||||
this.checklistForm.checkId = undefined;
|
||||
this.checklistOpen = true;
|
||||
this.checklistTitle = "复制新增设备检验清单";
|
||||
});
|
||||
},
|
||||
handleChecklistUpdate(row) {
|
||||
this.checklistLoading = true;
|
||||
this.resetChecklistForm();
|
||||
const checkId = row.checkId || this.checklistIds;
|
||||
getEquipmentChecklist(checkId).then(response => {
|
||||
this.checklistLoading = false;
|
||||
this.checklistForm = response.data;
|
||||
this.checklistOpen = true;
|
||||
this.checklistTitle = "修改设备检验清单";
|
||||
});
|
||||
},
|
||||
submitChecklistForm() {
|
||||
this.$refs["checklistForm"].validate(valid => {
|
||||
if (valid) {
|
||||
this.checklistButtonLoading = true;
|
||||
if (this.checklistForm.checkId != null) {
|
||||
updateEquipmentChecklist(this.checklistForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.checklistOpen = false;
|
||||
this.getChecklistList();
|
||||
}).finally(() => {
|
||||
this.checklistButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEquipmentChecklist(this.checklistForm).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.checklistOpen = false;
|
||||
this.getChecklistList();
|
||||
}).finally(() => {
|
||||
this.checklistButtonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChecklistDelete(row) {
|
||||
const checkIds = row.checkId || this.checklistIds;
|
||||
this.$modal.confirm('是否确认删除设备检验清单编号为"' + checkIds + '"的数据项？').then(() => {
|
||||
this.checklistLoading = true;
|
||||
return delEquipmentChecklist(checkIds);
|
||||
}).then(() => {
|
||||
this.checklistLoading = false;
|
||||
this.getChecklistList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => { }).finally(() => {
|
||||
this.checklistLoading = false;
|
||||
});
|
||||
},
|
||||
handleChecklistExport() {
|
||||
this.download('eqp/equipmentChecklist/export', {
|
||||
...this.checklistQueryParams
|
||||
}, `equipmentChecklist_${new Date().getTime()}.xlsx`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.part-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.part-card:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
.part-card-selected {
|
||||
background-color: #ecf5ff;
|
||||
border-left-color: #409eff;
|
||||
}
|
||||
|
||||
.part-checkbox {
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.part-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.part-card-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.part-card-meta {
|
||||
font-size: 11px;
|
||||
color: #909399;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.part-card-actions {
|
||||
flex-shrink: 0;
|
||||
margin-left: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.part-card-actions .el-button {
|
||||
padding: 2px 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
339
klp-ui/src/views/mes/eqp/check/list.vue
Normal file
339
klp-ui/src/views/mes/eqp/check/list.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="检验编号" prop="checkNo">
|
||||
<el-input
|
||||
v-model="queryParams.checkNo"
|
||||
placeholder="请输入检验编号"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验部位表" prop="partId">
|
||||
<el-input
|
||||
v-model="queryParams.partId"
|
||||
placeholder="请输入检验部位表"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备部件名称" prop="partName">
|
||||
<el-input
|
||||
v-model="queryParams.partName"
|
||||
placeholder="请输入设备部件名称"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态 运行/停止" prop="equipmentState">
|
||||
<el-input
|
||||
v-model="queryParams.equipmentState"
|
||||
placeholder="请输入设备状态 运行/停止"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="检验标准" prop="checkStandard">
|
||||
<el-input
|
||||
v-model="queryParams.checkStandard"
|
||||
placeholder="请输入检验标准"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" prop="responsiblePerson">
|
||||
<el-input
|
||||
v-model="queryParams.responsiblePerson"
|
||||
placeholder="请输入责任人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="equipmentChecklistList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="检验清单ID" align="center" prop="checkId" v-if="true"/>
|
||||
<el-table-column label="检验编号" align="center" prop="checkNo" />
|
||||
<el-table-column label="检验部位表" align="center" prop="partId" />
|
||||
<el-table-column label="设备部件名称" align="center" prop="partName" />
|
||||
<el-table-column label="检验内容" align="center" prop="checkContent" />
|
||||
<el-table-column label="设备状态 运行/停止" align="center" prop="equipmentState" />
|
||||
<el-table-column label="检验标准" align="center" prop="checkStandard" />
|
||||
<el-table-column label="责任人" align="center" prop="responsiblePerson" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改设备检验清单对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="检验编号" prop="checkNo">
|
||||
<el-input v-model="form.checkNo" placeholder="请输入检验编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检验部位表" prop="partId">
|
||||
<el-input v-model="form.partId" placeholder="请输入检验部位表" />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备部件名称" prop="partName">
|
||||
<el-input v-model="form.partName" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检验内容">
|
||||
<editor v-model="form.checkContent" :min-height="192"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态 运行/停止" prop="equipmentState">
|
||||
<el-input v-model="form.equipmentState" placeholder="请输入设备状态 运行/停止" />
|
||||
</el-form-item>
|
||||
<el-form-item label="检验标准" prop="checkStandard">
|
||||
<el-input v-model="form.checkStandard" placeholder="请输入检验标准" />
|
||||
</el-form-item>
|
||||
<el-form-item label="责任人" prop="responsiblePerson">
|
||||
<el-input v-model="form.responsiblePerson" placeholder="请输入责任人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEquipmentChecklist, getEquipmentChecklist, delEquipmentChecklist, addEquipmentChecklist, updateEquipmentChecklist } from "@/api/mes/eqp/equipmentChecklist";
|
||||
|
||||
export default {
|
||||
name: "EquipmentChecklist",
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备检验清单表格数据
|
||||
equipmentChecklistList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
checkNo: undefined,
|
||||
partId: undefined,
|
||||
partName: undefined,
|
||||
checkContent: undefined,
|
||||
equipmentState: undefined,
|
||||
checkStandard: undefined,
|
||||
responsiblePerson: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询设备检验清单列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEquipmentChecklist(this.queryParams).then(response => {
|
||||
this.equipmentChecklistList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
checkId: undefined,
|
||||
checkNo: undefined,
|
||||
partId: undefined,
|
||||
partName: undefined,
|
||||
checkContent: undefined,
|
||||
equipmentState: undefined,
|
||||
checkStandard: undefined,
|
||||
responsiblePerson: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.checkId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加设备检验清单";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const checkId = row.checkId || this.ids
|
||||
getEquipmentChecklist(checkId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改设备检验清单";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.checkId != null) {
|
||||
updateEquipmentChecklist(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEquipmentChecklist(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const checkIds = row.checkId || this.ids;
|
||||
this.$modal.confirm('是否确认删除设备检验清单编号为"' + checkIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEquipmentChecklist(checkIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('eqp/equipmentChecklist/export', {
|
||||
...this.queryParams
|
||||
}, `equipmentChecklist_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
300
klp-ui/src/views/mes/eqp/check/part.vue
Normal file
300
klp-ui/src/views/mes/eqp/check/part.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<el-form-item label="巡检部位" prop="inspectPart">
|
||||
<el-input
|
||||
v-model="queryParams.inspectPart"
|
||||
placeholder="请输入巡检部位"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线" prop="productionLine">
|
||||
<el-input
|
||||
v-model="queryParams.productionLine"
|
||||
placeholder="请输入产线"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产线段" prop="lineSection">
|
||||
<el-input
|
||||
v-model="queryParams.lineSection"
|
||||
placeholder="请输入产线段"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="equipmentPartList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="巡检记录ID" align="center" prop="partId" v-if="true"/>
|
||||
<el-table-column label="巡检部位" align="center" prop="inspectPart" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="产线" align="center" prop="productionLine" />
|
||||
<el-table-column label="产线段" align="center" prop="lineSection" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改检验部位对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="巡检部位" prop="inspectPart">
|
||||
<el-input v-model="form.inspectPart" placeholder="请输入巡检部位" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线" prop="productionLine">
|
||||
<el-input v-model="form.productionLine" placeholder="请输入产线" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产线段" prop="lineSection">
|
||||
<el-input v-model="form.lineSection" placeholder="请输入产线段" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEquipmentPart, getEquipmentPart, delEquipmentPart, addEquipmentPart, updateEquipmentPart } from "@/api/mes/eqp/equipmentPart";
|
||||
|
||||
export default {
|
||||
name: "EquipmentPart",
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 检验部位表格数据
|
||||
equipmentPartList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
inspectPart: undefined,
|
||||
productionLine: undefined,
|
||||
lineSection: undefined
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
partId: [
|
||||
{ required: true, message: "巡检记录ID不能为空", trigger: "blur" }
|
||||
],
|
||||
productionLine: [
|
||||
{ required: true, message: "产线不能为空", trigger: "blur" }
|
||||
],
|
||||
lineSection: [
|
||||
{ required: true, message: "产线段不能为空", trigger: "blur" }
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询检验部位列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEquipmentPart(this.queryParams).then(response => {
|
||||
this.equipmentPartList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
partId: undefined,
|
||||
inspectPart: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined,
|
||||
productionLine: undefined,
|
||||
lineSection: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.partId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加检验部位";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const partId = row.partId || this.ids
|
||||
getEquipmentPart(partId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改检验部位";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.partId != null) {
|
||||
updateEquipmentPart(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEquipmentPart(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const partIds = row.partId || this.ids;
|
||||
this.$modal.confirm('是否确认删除检验部位编号为"' + partIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEquipmentPart(partIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('eqp/equipmentPart/export', {
|
||||
...this.queryParams
|
||||
}, `equipmentPart_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
370
klp-ui/src/views/mes/eqp/check/record.vue
Normal file
370
klp-ui/src/views/mes/eqp/check/record.vue
Normal file
@@ -0,0 +1,370 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
|
||||
<!-- <el-form-item label="检验清单ID" prop="checkId">
|
||||
<el-input
|
||||
v-model="queryParams.checkId"
|
||||
placeholder="请输入检验清单ID"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="班次" prop="shift">
|
||||
<el-select v-model="queryParams.shift" placeholder="请选择班次" clearable
|
||||
@change="handleQuery" style="width: 150px;">
|
||||
<el-option label="白班" :value="1" />
|
||||
<el-option label="夜班" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检时间">
|
||||
<el-date-picker clearable
|
||||
v-model="dateRange"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
@change="handleDateRangeChange">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检人" prop="inspector">
|
||||
<el-input
|
||||
v-model="queryParams.inspector"
|
||||
placeholder="请输入巡检人"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="异常描述" prop="abnormalDesc">
|
||||
<el-input
|
||||
v-model="queryParams.abnormalDesc"
|
||||
placeholder="请输入异常描述"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
>新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
icon="el-icon-edit"
|
||||
size="mini"
|
||||
:disabled="single"
|
||||
@click="handleUpdate"
|
||||
>修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
@click="handleDelete"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
icon="el-icon-download"
|
||||
size="mini"
|
||||
@click="handleExport"
|
||||
>导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table v-loading="loading" :data="equipmentInspectionRecordList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<!-- <el-table-column label="巡检记录ID" align="center" prop="recordId" v-if="true"/> -->
|
||||
<el-table-column label="设备部件名称" align="center" prop="partName" />
|
||||
<!-- <el-table-column label="检验清单ID" align="center" prop="checkId" /> -->
|
||||
<el-table-column label="班次" align="center" prop="shift">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.shift == 1 ? '白班' : '夜班' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检时间" align="center" prop="inspectTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.inspectTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="运行状态" align="center" prop="runStatus">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.runStatus == 1 ? '正常' : '故障' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="巡检人" align="center" prop="inspector" />
|
||||
<el-table-column label="异常描述" align="center" prop="abnormalDesc" />
|
||||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total>0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改设备巡检记录对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="检验清单" prop="checkId">
|
||||
<checklist-select v-model="form.checkId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="班次" prop="shift">
|
||||
<el-select v-model="form.shift" placeholder="请选择班次">
|
||||
<el-option label="白班" :value="1" />
|
||||
<el-option label="夜班" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检时间" prop="inspectTime">
|
||||
<el-date-picker clearable
|
||||
v-model="form.inspectTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="请选择巡检时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="运行状态" prop="runStatus">
|
||||
<el-select v-model="form.runStatus" placeholder="请选择运行状态">
|
||||
<el-option label="正常" :value="1" />
|
||||
<el-option label="故障" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="巡检人" prop="inspector">
|
||||
<el-input v-model="form.inspector" placeholder="请输入巡检人" />
|
||||
</el-form-item>
|
||||
<el-form-item label="异常描述" prop="abnormalDesc">
|
||||
<el-input v-model="form.abnormalDesc" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listEquipmentInspectionRecord, getEquipmentInspectionRecord, delEquipmentInspectionRecord, addEquipmentInspectionRecord, updateEquipmentInspectionRecord } from "@/api/mes/eqp/equipmentInspectionRecord";
|
||||
import ChecklistSelect from "@/components/ChecklistSelect";
|
||||
|
||||
export default {
|
||||
name: "EquipmentInspectionRecord",
|
||||
components: { ChecklistSelect },
|
||||
data() {
|
||||
return {
|
||||
// 按钮loading
|
||||
buttonLoading: false,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 设备巡检记录表格数据
|
||||
equipmentInspectionRecordList: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
// 时间段筛选
|
||||
dateRange: undefined,
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
checkId: undefined,
|
||||
shift: undefined,
|
||||
startTime: undefined,
|
||||
endTime: undefined,
|
||||
runStatus: undefined,
|
||||
inspector: undefined,
|
||||
abnormalDesc: undefined,
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询设备巡检记录列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listEquipmentInspectionRecord(this.queryParams).then(response => {
|
||||
this.equipmentInspectionRecordList = response.rows;
|
||||
this.total = response.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
recordId: undefined,
|
||||
checkId: undefined,
|
||||
shift: undefined,
|
||||
inspectTime: undefined,
|
||||
runStatus: undefined,
|
||||
inspector: undefined,
|
||||
abnormalDesc: undefined,
|
||||
remark: undefined,
|
||||
createBy: undefined,
|
||||
createTime: undefined,
|
||||
updateBy: undefined,
|
||||
updateTime: undefined,
|
||||
delFlag: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
if (this.dateRange && Array.isArray(this.dateRange)) {
|
||||
this.queryParams.startTime = this.dateRange[0];
|
||||
this.queryParams.endTime = this.dateRange[1];
|
||||
} else {
|
||||
this.queryParams.startTime = undefined;
|
||||
this.queryParams.endTime = undefined;
|
||||
}
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleDateRangeChange(val) {
|
||||
if (!val) {
|
||||
this.queryParams.startTime = undefined;
|
||||
this.queryParams.endTime = undefined;
|
||||
}
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.dateRange = undefined;
|
||||
this.handleQuery();
|
||||
},
|
||||
// 多选框选中数据
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.recordId)
|
||||
this.single = selection.length!==1
|
||||
this.multiple = !selection.length
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.title = "添加设备巡检记录";
|
||||
},
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.loading = true;
|
||||
this.reset();
|
||||
const recordId = row.recordId || this.ids
|
||||
getEquipmentInspectionRecord(recordId).then(response => {
|
||||
this.loading = false;
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改设备巡检记录";
|
||||
});
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
this.buttonLoading = true;
|
||||
if (this.form.recordId != null) {
|
||||
updateEquipmentInspectionRecord(this.form).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
} else {
|
||||
addEquipmentInspectionRecord(this.form).then(response => {
|
||||
this.$modal.msgSuccess("新增成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}).finally(() => {
|
||||
this.buttonLoading = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
const recordIds = row.recordId || this.ids;
|
||||
this.$modal.confirm('是否确认删除设备巡检记录编号为"' + recordIds + '"的数据项？').then(() => {
|
||||
this.loading = true;
|
||||
return delEquipmentInspectionRecord(recordIds);
|
||||
}).then(() => {
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 导出按钮操作 */
|
||||
handleExport() {
|
||||
this.download('eqp/equipmentInspectionRecord/export', {
|
||||
...this.queryParams
|
||||
}, `equipmentInspectionRecord_${new Date().getTime()}.xlsx`)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user