@@ -34,7 +34,11 @@ | |||||
ref="waiting-list-table" | ref="waiting-list-table" | ||||
:table-data="list" | :table-data="list" | ||||
:page="queryParams.pageNo" | :page="queryParams.pageNo" | ||||
:limit="queryParams.pageSize" /> | |||||
:limit="queryParams.pageSize" | |||||
@edit="handleEdit" | |||||
@detail="handleDetail" | |||||
@delete="handleDelete" | |||||
@confirm="handleConfirm" /> | |||||
<!-- 分页组件 --> | <!-- 分页组件 --> | ||||
<pagination | <pagination | ||||
@@ -127,204 +131,204 @@ export default { | |||||
// 'specialType', | // 'specialType', | ||||
], | ], | ||||
tobeConfirmedIdList: [], | tobeConfirmedIdList: [], | ||||
tableBtn: [ | |||||
// this.$auth.hasPermi('equipment:maintain-record:update') | |||||
// ? { | |||||
// type: 'detail', | |||||
// btnName: '详情', | |||||
// } | |||||
// : undefined, | |||||
{ | |||||
type: 'confirm', | |||||
btnName: '确认', | |||||
}, | |||||
{ | |||||
type: 'edit', | |||||
btnName: '编辑', | |||||
}, | |||||
{ | |||||
type: 'delete', | |||||
btnName: '删除', | |||||
}, | |||||
], | |||||
tableProps: [ | |||||
// { | |||||
// prop: 'createTime', | |||||
// label: '添加时间', | |||||
// fixed: true, | |||||
// width: 150, | |||||
// filter: timeFilter, | |||||
// }, | |||||
{ | |||||
type: 'selection', | |||||
// prop: '_selection', | |||||
// label: '批量选择', | |||||
width: 48, | |||||
subcomponent: { | |||||
props: ['injectData'], | |||||
data() { | |||||
return { | |||||
outside: false, | |||||
selected: false, | |||||
}; | |||||
}, | |||||
watch: { | |||||
selected(val) { | |||||
if (!this.outside) { | |||||
console.log('emit row-selected...'); | |||||
this.$emit('emitData', { | |||||
action: 'row-selected', | |||||
value: { | |||||
row: this.injectData, | |||||
selected: val, | |||||
}, | |||||
}); | |||||
} | |||||
}, | |||||
injectData: { | |||||
deep: true, | |||||
immediate: true, | |||||
handler: function (val) { | |||||
this.outside = true; | |||||
this.selected = !!((val._selection & 0b01) != 0); | |||||
this.$nextTick(() => { | |||||
this.outside = false; | |||||
}); | |||||
}, | |||||
}, | |||||
}, | |||||
render(h) { | |||||
const enabled = 0b10 & this.injectData._selection; | |||||
// return this.injectData?._selection ? h('h1', null, 'hello') : h('h1', null, '1'); | |||||
return ( | |||||
<div> | |||||
<span>{this.selected}</span> | |||||
<el-checkbox disabled={!enabled} v-model={this.selected} /> | |||||
</div> | |||||
); | |||||
}, | |||||
}, | |||||
}, | |||||
{ | |||||
prop: 'maintainOrderNumber', | |||||
label: '设备保养单号', | |||||
width: 110, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'planName', | |||||
label: '保养计划名称', | |||||
width: 110, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'departmentName', | |||||
label: '部门', | |||||
width: 110, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'lineName', | |||||
label: '产线名', | |||||
width: 110, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'planStartTime', | |||||
label: '计划开始时间', | |||||
filter: timeFilter, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'planEndTime', | |||||
label: '计划结束时间', | |||||
filter: timeFilter, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'startTime', | |||||
label: '实际开始时间', | |||||
filter: timeFilter, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'endTime', | |||||
label: '实际结束时间', | |||||
filter: timeFilter, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'confirmDueTime', | |||||
label: '确认截止时间', | |||||
filter: timeFilter, | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
}, | |||||
{ | |||||
prop: 'relatePlan', | |||||
label: '保养计划类型', | |||||
minWidth: 150, | |||||
showOverflowtooltip: true, | |||||
filter: (val) => | |||||
val != null ? ['-', '计划型', '非计划型'][val] : '-', | |||||
}, | |||||
{ | |||||
prop: '_detail', | |||||
label: '详情', | |||||
name: '详情', | |||||
minWidth: 60, | |||||
subcomponent: btn, | |||||
}, | |||||
// { | |||||
// prop: 'equipmentCategory', | |||||
// label: '设备大类', | |||||
// minWidth: 100, | |||||
// showOverflowtooltip: true, | |||||
// filter: (val) => | |||||
// val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-', | |||||
// }, | |||||
// { | |||||
// prop: 'equipmentName', | |||||
// label: '设备名称', | |||||
// minWidth: 100, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'maintainWorker', | |||||
// label: '保养人员', | |||||
// minWidth: 100, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'relatePlan', | |||||
// label: '是否计划保养', | |||||
// width: 120, | |||||
// filter: (v) => (v != null ? ['', '是', '否'][v] : ''), | |||||
// }, | |||||
// { | |||||
// prop: 'planName', | |||||
// label: '保养计划名称', | |||||
// minWidth: 120, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'maintainDuration', | |||||
// label: '计划保养用时(h)', | |||||
// minWidth: 130, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { prop: 'timeUsed', label: '实际保养用时(h)', minWidth: 130 }, | |||||
// { | |||||
// prop: 'remark', | |||||
// label: '备注', | |||||
// minWidth: 100, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
], | |||||
// tableBtn: [ | |||||
// // this.$auth.hasPermi('equipment:maintain-record:update') | |||||
// // ? { | |||||
// // type: 'detail', | |||||
// // btnName: '详情', | |||||
// // } | |||||
// // : undefined, | |||||
// { | |||||
// type: 'confirm', | |||||
// btnName: '确认', | |||||
// }, | |||||
// { | |||||
// type: 'edit', | |||||
// btnName: '编辑', | |||||
// }, | |||||
// { | |||||
// type: 'delete', | |||||
// btnName: '删除', | |||||
// }, | |||||
// ], | |||||
// tableProps: [ | |||||
// // { | |||||
// // prop: 'createTime', | |||||
// // label: '添加时间', | |||||
// // fixed: true, | |||||
// // width: 150, | |||||
// // filter: timeFilter, | |||||
// // }, | |||||
// { | |||||
// type: 'selection', | |||||
// // prop: '_selection', | |||||
// // label: '批量选择', | |||||
// width: 48, | |||||
// subcomponent: { | |||||
// props: ['injectData'], | |||||
// data() { | |||||
// return { | |||||
// outside: false, | |||||
// selected: false, | |||||
// }; | |||||
// }, | |||||
// watch: { | |||||
// selected(val) { | |||||
// if (!this.outside) { | |||||
// console.log('emit row-selected...'); | |||||
// this.$emit('emitData', { | |||||
// action: 'row-selected', | |||||
// value: { | |||||
// row: this.injectData, | |||||
// selected: val, | |||||
// }, | |||||
// }); | |||||
// } | |||||
// }, | |||||
// injectData: { | |||||
// deep: true, | |||||
// immediate: true, | |||||
// handler: function (val) { | |||||
// this.outside = true; | |||||
// this.selected = !!((val._selection & 0b01) != 0); | |||||
// this.$nextTick(() => { | |||||
// this.outside = false; | |||||
// }); | |||||
// }, | |||||
// }, | |||||
// }, | |||||
// render(h) { | |||||
// const enabled = 0b10 & this.injectData._selection; | |||||
// // return this.injectData?._selection ? h('h1', null, 'hello') : h('h1', null, '1'); | |||||
// return ( | |||||
// <div> | |||||
// <span>{this.selected}</span> | |||||
// <el-checkbox disabled={!enabled} v-model={this.selected} /> | |||||
// </div> | |||||
// ); | |||||
// }, | |||||
// }, | |||||
// }, | |||||
// { | |||||
// prop: 'maintainOrderNumber', | |||||
// label: '设备保养单号', | |||||
// width: 110, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'planName', | |||||
// label: '保养计划名称', | |||||
// width: 110, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'departmentName', | |||||
// label: '部门', | |||||
// width: 110, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'lineName', | |||||
// label: '产线名', | |||||
// width: 110, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'planStartTime', | |||||
// label: '计划开始时间', | |||||
// filter: timeFilter, | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'planEndTime', | |||||
// label: '计划结束时间', | |||||
// filter: timeFilter, | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'startTime', | |||||
// label: '实际开始时间', | |||||
// filter: timeFilter, | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'endTime', | |||||
// label: '实际结束时间', | |||||
// filter: timeFilter, | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'confirmDueTime', | |||||
// label: '确认截止时间', | |||||
// filter: timeFilter, | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// }, | |||||
// { | |||||
// prop: 'relatePlan', | |||||
// label: '保养计划类型', | |||||
// minWidth: 150, | |||||
// showOverflowtooltip: true, | |||||
// filter: (val) => | |||||
// val != null ? ['-', '计划型', '非计划型'][val] : '-', | |||||
// }, | |||||
// { | |||||
// prop: '_detail', | |||||
// label: '详情', | |||||
// name: '详情', | |||||
// minWidth: 60, | |||||
// subcomponent: btn, | |||||
// }, | |||||
// // { | |||||
// // prop: 'equipmentCategory', | |||||
// // label: '设备大类', | |||||
// // minWidth: 100, | |||||
// // showOverflowtooltip: true, | |||||
// // filter: (val) => | |||||
// // val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-', | |||||
// // }, | |||||
// // { | |||||
// // prop: 'equipmentName', | |||||
// // label: '设备名称', | |||||
// // minWidth: 100, | |||||
// // showOverflowtooltip: true, | |||||
// // }, | |||||
// // { | |||||
// // prop: 'maintainWorker', | |||||
// // label: '保养人员', | |||||
// // minWidth: 100, | |||||
// // showOverflowtooltip: true, | |||||
// // }, | |||||
// // { | |||||
// // prop: 'relatePlan', | |||||
// // label: '是否计划保养', | |||||
// // width: 120, | |||||
// // filter: (v) => (v != null ? ['', '是', '否'][v] : ''), | |||||
// // }, | |||||
// // { | |||||
// // prop: 'planName', | |||||
// // label: '保养计划名称', | |||||
// // minWidth: 120, | |||||
// // showOverflowtooltip: true, | |||||
// // }, | |||||
// // { | |||||
// // prop: 'maintainDuration', | |||||
// // label: '计划保养用时(h)', | |||||
// // minWidth: 130, | |||||
// // showOverflowtooltip: true, | |||||
// // }, | |||||
// // { prop: 'timeUsed', label: '实际保养用时(h)', minWidth: 130 }, | |||||
// // { | |||||
// // prop: 'remark', | |||||
// // label: '备注', | |||||
// // minWidth: 100, | |||||
// // showOverflowtooltip: true, | |||||
// // }, | |||||
// ], | |||||
searchBarFormConfig: [ | searchBarFormConfig: [ | ||||
// { | // { | ||||
// type: 'select', | // type: 'select', | ||||
@@ -437,6 +441,8 @@ export default { | |||||
basePath: '/base/equipment-maintain-log', | basePath: '/base/equipment-maintain-log', | ||||
mode: null, | mode: null, | ||||
allSpecialEquipments: [], | allSpecialEquipments: [], | ||||
openPlannedDialog: false, | |||||
openUnplannedDialog: false, | |||||
}; | }; | ||||
}, | }, | ||||
watch: { | watch: { | ||||
@@ -481,12 +487,8 @@ export default { | |||||
switch (btn.btnName) { | switch (btn.btnName) { | ||||
case 'batchConfirm': | case 'batchConfirm': | ||||
if (this.$refs['waiting-list-table'].selectedPlan.length == 0) { | if (this.$refs['waiting-list-table'].selectedPlan.length == 0) { | ||||
console.log( | |||||
'selectedPlan', | |||||
this.$refs['waiting-list-table'].selectedPlan | |||||
); | |||||
alert('no data...'); | |||||
}; | |||||
this.$message.warning('请选择待确认的设备保养记录'); | |||||
} | |||||
console.log( | console.log( | ||||
'selectedPlan', | 'selectedPlan', | ||||
this.$refs['waiting-list-table'].selectedPlan | this.$refs['waiting-list-table'].selectedPlan | ||||
@@ -617,7 +619,11 @@ export default { | |||||
lineId: null, | lineId: null, | ||||
startTime: null, | startTime: null, | ||||
endTime: null, | endTime: null, | ||||
planStartTime: null, | |||||
planEndTime: null, | |||||
confirmed: null, | |||||
remark: null, | remark: null, | ||||
special: false, | |||||
}; | }; | ||||
this.resetForm('form'); | this.resetForm('form'); | ||||
}, | }, | ||||
@@ -664,15 +670,21 @@ export default { | |||||
this.title = '添加待确认保养记录'; | this.title = '添加待确认保养记录'; | ||||
}, | }, | ||||
/** 修改按钮操作 */ | /** 修改按钮操作 */ | ||||
handleUpdate(row) { | |||||
async handleUpdate(row) { | |||||
this.reset(); | this.reset(); | ||||
const id = row.id; | |||||
this.info({ id }).then((response) => { | |||||
this.form = response.data; | |||||
this.open = true; | |||||
this.form.maintainWorker = this.form.maintainWorker.split(','); | |||||
this.title = '修改保养记录'; | |||||
}); | |||||
if (row.relatePlan == 1) { | |||||
// 计划型 | |||||
const res = await this.info(); | |||||
this.form = res.data; | |||||
this.form.maintainWorker = res.data.maintainWorker.split(','); | |||||
this.openPlannedDialog = true; | |||||
} else { | |||||
// 非计划型 2 | |||||
const res = await this.info(); | |||||
this.form = res.data; | |||||
this.form.maintainWorker = res.data.maintainWorker.split(','); | |||||
this.openUnplannedDialog = true; | |||||
} | |||||
}, | }, | ||||
/** 提交按钮 */ | /** 提交按钮 */ | ||||
submitForm() { | submitForm() { | ||||
@@ -722,13 +734,25 @@ export default { | |||||
}); | }); | ||||
}); | }); | ||||
}, | }, | ||||
/** 确认 */ | |||||
handleConfirm(row) { | |||||
console.log('confirm', row); | |||||
}, | |||||
/** 编辑 */ | |||||
handleEdit(row) { | |||||
console.log('edit', row); | |||||
}, | |||||
/** 删除按钮操作 */ | /** 删除按钮操作 */ | ||||
handleDelete(row) { | handleDelete(row) { | ||||
console.log('delete', row); | |||||
return; | |||||
const id = row.id; | const id = row.id; | ||||
this.$modal | this.$modal | ||||
.confirm('是否确认删除设备名称为"' + row.equipmentName + '"的数据项?') | |||||
.confirm( | |||||
'是否确认删除设备保养单号为"' + row.maintainOrderNumber + '"的数据项?' | |||||
) | |||||
.then(function () { | .then(function () { | ||||
return deleteEqMaintainLog(id); | |||||
// return deleteEqMaintainLog(id); | |||||
}) | }) | ||||
.then(() => { | .then(() => { | ||||
this.getList(); | this.getList(); | ||||
@@ -736,13 +760,15 @@ export default { | |||||
}) | }) | ||||
.catch(() => {}); | .catch(() => {}); | ||||
}, | }, | ||||
handleDetail({ id }) { | |||||
handleDetail(row) { | |||||
console.log('detail', row); | |||||
return; | |||||
this.reset(); | this.reset(); | ||||
this.mode = 'detail'; | this.mode = 'detail'; | ||||
this.info({ id }).then((response) => { | this.info({ id }).then((response) => { | ||||
this.form = response.data; | this.form = response.data; | ||||
this.open = true; | |||||
this.title = '查看保养记录详情'; | |||||
// this.open = true; | |||||
// this.title = '查看保养记录详情'; | |||||
}); | }); | ||||
}, | }, | ||||
/** 导出按钮操作 */ | /** 导出按钮操作 */ | ||||
@@ -16,13 +16,16 @@ | |||||
color: '#606266', | color: '#606266', | ||||
}" | }" | ||||
class="waiting-list-table"> | class="waiting-list-table"> | ||||
<el-table-column type="selection" :width="50" /> | |||||
<el-table-column | |||||
type="selection" | |||||
:width="50" | |||||
:selectable="checkSelectable" /> | |||||
<el-table-column prop="_pageIndex" width="80" align="center"> | <el-table-column prop="_pageIndex" width="80" align="center"> | ||||
<template slot="header"> | <template slot="header"> | ||||
<el-popover placement="bottom-start" width="300" trigger="click"> | <el-popover placement="bottom-start" width="300" trigger="click"> | ||||
<div class="setting-box" style="max-height: 400px; overflow-y: auto"> | <div class="setting-box" style="max-height: 400px; overflow-y: auto"> | ||||
<el-checkbox | <el-checkbox | ||||
v-for="(item, index) in tableProps" | |||||
v-for="(item, index) in tablePropsLabelList" | |||||
:key="'cb' + index" | :key="'cb' + index" | ||||
v-model="selectedBox[index]" | v-model="selectedBox[index]" | ||||
:label="item.label" /> | :label="item.label" /> | ||||
@@ -114,7 +117,8 @@ | |||||
<el-button | <el-button | ||||
type="text" | type="text" | ||||
style="margin: 5px 0; padding: 0" | style="margin: 5px 0; padding: 0" | ||||
@click="handleConfirm(scope.row)"> | |||||
:disabled="!checkSelectable(scope.row)" | |||||
@click="$emit('confirm', scope.row)"> | |||||
确认 | 确认 | ||||
</el-button> | </el-button> | ||||
</el-tooltip> | </el-tooltip> | ||||
@@ -124,7 +128,7 @@ | |||||
<el-button | <el-button | ||||
type="text" | type="text" | ||||
style="margin: 5px 0; padding: 0" | style="margin: 5px 0; padding: 0" | ||||
@click="handelDetail(scope.row)"> | |||||
@click="$emit('detail', scope.row)"> | |||||
<i class="iconfont icon-detail primary-color" /> | <i class="iconfont icon-detail primary-color" /> | ||||
</el-button> | </el-button> | ||||
</el-tooltip> | </el-tooltip> | ||||
@@ -134,7 +138,7 @@ | |||||
<el-button | <el-button | ||||
type="text" | type="text" | ||||
style="margin: 5px 0; padding: 0" | style="margin: 5px 0; padding: 0" | ||||
@click="handleEdit(scope.row)"> | |||||
@click="$emit('edit', scope.row)"> | |||||
<i class="iconfont icon-edit primary-color" /> | <i class="iconfont icon-edit primary-color" /> | ||||
</el-button> | </el-button> | ||||
</el-tooltip> | </el-tooltip> | ||||
@@ -144,7 +148,7 @@ | |||||
<el-button | <el-button | ||||
type="text" | type="text" | ||||
style="margin: 5px 0; padding: 0" | style="margin: 5px 0; padding: 0" | ||||
@click="handleDelete(scope.row)"> | |||||
@click="$emit('delete', scope.row)"> | |||||
<i class="iconfont icon-delete delete-color" /> | <i class="iconfont icon-delete delete-color" /> | ||||
</el-button> | </el-button> | ||||
</el-tooltip> | </el-tooltip> | ||||
@@ -161,13 +165,14 @@ export default { | |||||
components: {}, | components: {}, | ||||
props: ['tableData', 'page', 'limit'], | props: ['tableData', 'page', 'limit'], | ||||
filters: { | filters: { | ||||
timeFilter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'), | |||||
timeFilter: (val) => | |||||
val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---', | |||||
relatePlanFilter: (val) => | relatePlanFilter: (val) => | ||||
val != null ? ['-', '计划型', '非计划型'][val] : '-', | val != null ? ['-', '计划型', '非计划型'][val] : '-', | ||||
}, | }, | ||||
data() { | data() { | ||||
return { | return { | ||||
tableProps: [ | |||||
tablePropsLabelList: [ | |||||
{ | { | ||||
label: '设备保养单号', | label: '设备保养单号', | ||||
}, | }, | ||||
@@ -227,6 +232,13 @@ export default { | |||||
}, | }, | ||||
}, | }, | ||||
methods: { | methods: { | ||||
checkSelectable(row, index) { | |||||
return ( | |||||
row.relatePlan == 2 || | |||||
(row.relatePlan == 1 && | |||||
(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime())) | |||||
); | |||||
}, | |||||
handleSelectionChange(val) { | handleSelectionChange(val) { | ||||
this.selectedPlan = val; | this.selectedPlan = val; | ||||
}, | }, | ||||
@@ -0,0 +1,571 @@ | |||||
<!-- | |||||
filename: WaitingListUnplanned--edit.vue | |||||
author: liubin | |||||
date: 2023-08-22 14:38:56 | |||||
description: | |||||
--> | |||||
<template> | |||||
<el-drawer | |||||
:visible="visible" | |||||
:show-close="false" | |||||
:wrapper-closable="false" | |||||
class="drawer" | |||||
custom-class="mes-drawer" | |||||
size="60%" | |||||
@closed="$emit('destroy')"> | |||||
<SmallTitle slot="title"> | |||||
{{ | |||||
mode.includes('detail') | |||||
? '详情' | |||||
: mode.includes('edit') | |||||
? '编辑' | |||||
: '新增' | |||||
}} | |||||
</SmallTitle> | |||||
<div class="drawer-body flex"> | |||||
<div class="drawer-body__content"> | |||||
<div class="form-part" style="margin-bottom: 32px"> | |||||
<el-skeleton v-if="!showForm" animated /> | |||||
<el-form | |||||
class="equipment-info-form" | |||||
ref="form" | |||||
:model="form" | |||||
label-width="200px" | |||||
label-position="top" | |||||
v-loading="formLoading"> | |||||
<el-row :gutter="20"> | |||||
<el-col :span="12"> | |||||
<el-form-item | |||||
label="设备名称" | |||||
prop="name" | |||||
:rules="[ | |||||
{ | |||||
required: true, | |||||
message: '设备名称不能为空', | |||||
trigger: 'blur', | |||||
}, | |||||
]"> | |||||
<el-input | |||||
v-model="form.name" | |||||
:disabled="disabled" | |||||
placeholder="请输入设备名称"></el-input> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="设备编码" prop="code" :rules="[]"> | |||||
<el-input | |||||
v-model="form.code" | |||||
:disabled="disabled" | |||||
placeholder="请输入设备编码"></el-input> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="20"> | |||||
<el-col :span="12"> | |||||
<el-form-item label="所在区域" prop="location"> | |||||
<el-input | |||||
v-model="form.location" | |||||
:disabled="disabled" | |||||
placeholder="请输入所在区域"></el-input> | |||||
</el-form-item> | |||||
</el-col> | |||||
<el-col :span="12"> | |||||
<el-form-item label="负责人" prop="responsiblePeopleId"> | |||||
<el-select | |||||
v-model="form.responsiblePeopleId" | |||||
:disabled="disabled" | |||||
placeholder="请输入负责人"> | |||||
<el-option | |||||
v-for="rp in rpList" | |||||
:key="rp.id" | |||||
:label="rp.name" | |||||
:value="rp.id"></el-option> | |||||
</el-select> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="20"> | |||||
<el-col v-if="isFireEquipment" :span="12"> | |||||
<el-form-item label="有效期至" prop="dueDate" :rules="[]"> | |||||
<el-date-picker | |||||
v-model="form.dueDate" | |||||
:disabled="disabled" | |||||
type="datetime" | |||||
placeholder="请选择生产日期" | |||||
value-format="timestamp"></el-date-picker> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
<el-row :gutter="20"> | |||||
<!-- 上传资料 --> | |||||
<el-col> | |||||
<el-form-item label="上传图片" prop="assets" :rules="[]"> | |||||
<AssetsUpload v-model="form.assets" :disabled="disabled" /> | |||||
</el-form-item> | |||||
</el-col> | |||||
</el-row> | |||||
</el-form> | |||||
</div> | |||||
<SmallTitle>保养内容</SmallTitle> | |||||
<div style="margin-top: 12px; position: relative"> | |||||
<div | |||||
v-if="!mode.includes('detail')" | |||||
style="position: absolute; top: -40px; right: 0"> | |||||
<el-button @click="handleAddAttr" type="text"> | |||||
<i class="el-icon-plus"></i> | |||||
添加属性 | |||||
</el-button> | |||||
</div> | |||||
<base-table | |||||
v-loading="attrListLoading" | |||||
:table-props="section.props" | |||||
:page="attrQuery?.params.pageNo || 1" | |||||
:limit="attrQuery?.params.pageSize || 10" | |||||
:table-data="list" | |||||
@emitFun="handleEmitFun"> | |||||
<method-btn | |||||
v-if="section.tableBtn" | |||||
slot="handleBtn" | |||||
label="操作" | |||||
:method-list="tableBtn" | |||||
@clickBtn="handleTableBtnClick" /> | |||||
</base-table> | |||||
<!-- 分页组件 --> | |||||
<pagination | |||||
v-show="total > 0" | |||||
:total="total" | |||||
:page.sync="attrQuery.params.pageNo" | |||||
:limit.sync="attrQuery.params.pageSize" | |||||
@pagination="getAttrList" /> | |||||
</div> | |||||
</div> | |||||
<div class="drawer-body__footer"> | |||||
<el-button style="" @click="handleCancel">取消</el-button> | |||||
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit"> | |||||
编辑 | |||||
</el-button> | |||||
<el-button v-else type="primary" @click="handleConfirm">保存</el-button> | |||||
<!-- sections的第二项必须是 属性列表 --> | |||||
<!-- <el-button | |||||
v-if="sections[1].allowAdd" | |||||
type="primary" | |||||
@click="handleAddAttr"> | |||||
添加属性 | |||||
</el-button> --> | |||||
</div> | |||||
</div> | |||||
<!-- 属性对话框 --> | |||||
<base-dialog | |||||
v-if="sections[1].allowAdd" | |||||
:dialogTitle="attrTitle" | |||||
:dialogVisible="attrFormVisible" | |||||
width="35%" | |||||
:append-to-body="true" | |||||
custom-class="baseDialog" | |||||
@close="closeAttrForm" | |||||
@cancel="closeAttrForm" | |||||
@confirm="submitAttrForm"> | |||||
<DialogForm | |||||
v-if="attrFormVisible" | |||||
ref="attrForm" | |||||
:dataForm="attrForm" | |||||
:rows="attrRows" /> | |||||
</base-dialog> | |||||
</el-drawer> | |||||
</template> | |||||
<script> | |||||
import DialogForm from './DialogForm'; | |||||
import EquipmentInfoForm from './EquipmentInfoForm.vue'; | |||||
const SmallTitle = { | |||||
name: 'SmallTitle', | |||||
props: ['size'], | |||||
components: {}, | |||||
data() { | |||||
return {}; | |||||
}, | |||||
methods: {}, | |||||
render: function (h) { | |||||
return h( | |||||
'span', | |||||
{ | |||||
class: 'small-title', | |||||
style: { | |||||
fontSize: '18px', | |||||
lineHeight: | |||||
this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px', | |||||
fontWeight: 500, | |||||
fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif', | |||||
}, | |||||
}, | |||||
this.$slots.default | |||||
); | |||||
}, | |||||
}; | |||||
export default { | |||||
components: { SmallTitle, DialogForm, EquipmentInfoForm }, | |||||
props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段 | |||||
data() { | |||||
return { | |||||
visible: false, | |||||
showForm: false, | |||||
btnLoading: false, | |||||
total: 0, | |||||
form: {}, | |||||
list: [], | |||||
attrTitle: '', | |||||
attrForm: { | |||||
id: null, | |||||
equipmentId: null, | |||||
name: '', | |||||
value: '', | |||||
}, | |||||
attrFormVisible: false, | |||||
attrRows: [ | |||||
[ | |||||
{ | |||||
input: true, | |||||
label: '属性名称', | |||||
prop: 'name', | |||||
rules: [ | |||||
{ required: true, message: '属性名称不能为空', trigger: 'blur' }, | |||||
], | |||||
}, | |||||
], | |||||
[ | |||||
{ | |||||
input: true, | |||||
label: '属性值', | |||||
prop: 'value', | |||||
}, | |||||
], | |||||
], | |||||
attrQuery: { | |||||
params: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
}, // 属性列表的请求 | |||||
infoQuery: null, // 基本信息的请求 | |||||
attrFormSubmitting: false, | |||||
attrListLoading: false, | |||||
syncFileListFlag: null, | |||||
}; | |||||
}, | |||||
computed: { | |||||
formRows() { | |||||
return this.sections[0].rows.map((row) => { | |||||
return row.map((col) => { | |||||
if (col.key == 'eq-pics') { | |||||
// 重置图片的位置 | |||||
return { | |||||
...col, | |||||
bind: { | |||||
...col.bind, | |||||
}, | |||||
style: { | |||||
left: 0, | |||||
right: 'unset', | |||||
}, | |||||
}; | |||||
} | |||||
return { | |||||
...col, | |||||
bind: { | |||||
...col.bind, | |||||
// 详情 模式下,禁用各种输入 | |||||
disabled: this.mode == 'detail', | |||||
}, | |||||
}; | |||||
}); | |||||
}); | |||||
}, | |||||
tableBtn() { | |||||
return this.mode == 'detail' ? [] : this.sections[1].tableBtn; | |||||
}, | |||||
}, | |||||
mounted() { | |||||
for (const section of this.sections) { | |||||
// 请求具体信息 | |||||
if ('url' in section) { | |||||
const query = { | |||||
url: section.url, | |||||
method: section.method || 'get', | |||||
params: section.queryParams || null, | |||||
data: section.data || null, | |||||
}; | |||||
this.$axios(query).then(({ data }) => { | |||||
if (section.key == 'base') { | |||||
this.form = data; | |||||
this.showForm = true; | |||||
this.infoQuery = query; | |||||
} else if (section.key == 'attrs') { | |||||
this.attrQuery = query; | |||||
this.list = data.list; | |||||
this.total = data.total; | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
}, | |||||
methods: { | |||||
handleTableBtnClick({ type, data }) { | |||||
switch (type) { | |||||
case 'edit': | |||||
this.handleEditAttr(data.id); | |||||
break; | |||||
case 'delete': | |||||
this.handleDeleteAttr(data.id); | |||||
break; | |||||
} | |||||
}, | |||||
async handleConfirm() { | |||||
this.btnLoading = true; | |||||
this.syncFileListFlag = Math.random(); | |||||
this.$nextTick(async () => { | |||||
const { code, data } = await this.$axios({ | |||||
url: this.sections[0].urlUpdate, | |||||
method: 'put', | |||||
data: this.form, | |||||
}); | |||||
if (code == 0) { | |||||
this.$modal.msgSuccess('更新成功'); | |||||
} | |||||
this.btnLoading = false; | |||||
this.$emit('refreshDataList'); | |||||
this.handleCancel(); | |||||
}); | |||||
}, | |||||
handleEmitFun(val) { | |||||
console.log('handleEmitFun', val); | |||||
}, | |||||
init() { | |||||
this.visible = true; | |||||
}, | |||||
async getAttrList() { | |||||
this.attrListLoading = true; | |||||
const res = await this.$axios(this.attrQuery); | |||||
if (res.code == 0) { | |||||
this.list = res.data.list; | |||||
this.total = res.data.total; | |||||
} | |||||
this.attrListLoading = false; | |||||
}, | |||||
// 保存表单 | |||||
handleSave() { | |||||
this.$refs['form'][0].validate(async (valid) => { | |||||
if (valid) { | |||||
const isEdit = this.mode == 'edit'; | |||||
await this.$axios({ | |||||
url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'], | |||||
method: isEdit ? 'put' : 'post', | |||||
data: this.form, | |||||
}); | |||||
this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`); | |||||
this.visible = false; | |||||
this.$emit('refreshDataList'); | |||||
} | |||||
}); | |||||
}, | |||||
handleCancel() { | |||||
this.visible = false; | |||||
}, | |||||
// 开启编辑 | |||||
toggleEdit() { | |||||
this.$emit('update-mode', 'edit'); | |||||
}, | |||||
// 新增属性 | |||||
handleAddAttr() { | |||||
if (!this.dataId) return this.$message.error('请先创建设备信息'); | |||||
this.attrForm = { | |||||
id: null, | |||||
equipmentId: this.dataId, | |||||
name: '', | |||||
value: '', | |||||
}; | |||||
this.attrTitle = '添加设备属性'; | |||||
this.attrFormVisible = true; | |||||
}, | |||||
// 编辑属性 | |||||
async handleEditAttr(attrId) { | |||||
const res = await this.$axios({ | |||||
url: this.sections[1].urlDetail, | |||||
method: 'get', | |||||
params: { id: attrId }, | |||||
}); | |||||
if (res.code == 0) { | |||||
this.attrForm = res.data; | |||||
this.attrTitle = '编辑设备属性'; | |||||
this.attrFormVisible = true; | |||||
} | |||||
}, | |||||
// 删除属性 | |||||
handleDeleteAttr(attrId) { | |||||
this.$confirm('确定删除该属性?', '提示', { | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning', | |||||
}) | |||||
.then(async () => { | |||||
const res = await this.$axios({ | |||||
url: this.sections[1].urlDelete, | |||||
method: 'delete', | |||||
params: { id: attrId }, | |||||
}); | |||||
if (res.code == 0) { | |||||
this.$message({ | |||||
message: '删除成功', | |||||
type: 'success', | |||||
duration: 1500, | |||||
onClose: () => { | |||||
this.getAttrList(); | |||||
}, | |||||
}); | |||||
} | |||||
}) | |||||
.catch(() => {}); | |||||
}, | |||||
// 提交属性表 | |||||
submitAttrForm() { | |||||
this.$refs['attrForm'].validate(async (valid) => { | |||||
if (!valid) { | |||||
return; | |||||
} | |||||
try { | |||||
const isEdit = this.attrForm.id != null; | |||||
this.attrFormSubmitting = true; | |||||
const res = await this.$axios({ | |||||
url: isEdit | |||||
? this.sections[1].urlUpdate | |||||
: this.sections[1].urlCreate, | |||||
method: isEdit ? 'put' : 'post', | |||||
data: this.attrForm, | |||||
}); | |||||
if (res.code == 0) { | |||||
this.closeAttrForm(); | |||||
this.$message({ | |||||
message: `${isEdit ? '更新' : '创建'}成功`, | |||||
type: 'success', | |||||
duration: 1500, | |||||
onClose: () => { | |||||
this.getAttrList(); | |||||
}, | |||||
}); | |||||
} | |||||
this.attrFormSubmitting = false; | |||||
} catch (err) { | |||||
this.$message({ | |||||
message: err, | |||||
type: 'error', | |||||
duration: 1500, | |||||
}); | |||||
this.attrFormSubmitting = false; | |||||
} | |||||
}); | |||||
}, | |||||
closeAttrForm() { | |||||
this.attrFormVisible = false; | |||||
}, | |||||
handleClick(raw) { | |||||
if (raw.type === 'delete') { | |||||
this.$confirm( | |||||
`确定对${ | |||||
raw.data.name | |||||
? '[名称=' + raw.data.name + ']' | |||||
: '[序号=' + raw.data._pageIndex + ']' | |||||
}进行删除操作?`, | |||||
'提示', | |||||
{ | |||||
confirmButtonText: '确定', | |||||
cancelButtonText: '取消', | |||||
type: 'warning', | |||||
} | |||||
) | |||||
.then(() => { | |||||
deleteProductAttr(raw.data.id).then(({ data }) => { | |||||
this.$message({ | |||||
message: '操作成功', | |||||
type: 'success', | |||||
duration: 1500, | |||||
onClose: () => { | |||||
this.getList(); | |||||
}, | |||||
}); | |||||
}); | |||||
}) | |||||
.catch(() => {}); | |||||
} else { | |||||
this.addNew(raw.data.id); | |||||
} | |||||
}, | |||||
}, | |||||
}; | |||||
</script> | |||||
<style scoped> | |||||
.drawer >>> .el-drawer { | |||||
border-radius: 8px 0 0 8px; | |||||
} | |||||
.drawer >>> .el-drawer__header { | |||||
margin: 0; | |||||
padding: 32px 32px 24px; | |||||
border-bottom: 1px solid #dcdfe6; | |||||
margin-bottom: 0px; | |||||
} | |||||
.small-title::before { | |||||
content: ''; | |||||
display: inline-block; | |||||
vertical-align: top; | |||||
width: 4px; | |||||
height: 22px; | |||||
border-radius: 1px; | |||||
margin-right: 8px; | |||||
background-color: #0b58ff; | |||||
} | |||||
.drawer-body { | |||||
display: flex; | |||||
flex-direction: column; | |||||
height: 100%; | |||||
} | |||||
.drawer-body__content { | |||||
flex: 1; | |||||
/* background: #eee; */ | |||||
padding: 20px 30px; | |||||
overflow-y: auto; | |||||
} | |||||
.drawer-body__footer { | |||||
display: flex; | |||||
justify-content: flex-end; | |||||
padding: 18px; | |||||
} | |||||
</style> |