@@ -34,7 +34,11 @@ | |||
ref="waiting-list-table" | |||
:table-data="list" | |||
:page="queryParams.pageNo" | |||
:limit="queryParams.pageSize" /> | |||
:limit="queryParams.pageSize" | |||
@edit="handleEdit" | |||
@detail="handleDetail" | |||
@delete="handleDelete" | |||
@confirm="handleConfirm" /> | |||
<!-- 分页组件 --> | |||
<pagination | |||
@@ -127,204 +131,204 @@ export default { | |||
// 'specialType', | |||
], | |||
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: [ | |||
// { | |||
// type: 'select', | |||
@@ -437,6 +441,8 @@ export default { | |||
basePath: '/base/equipment-maintain-log', | |||
mode: null, | |||
allSpecialEquipments: [], | |||
openPlannedDialog: false, | |||
openUnplannedDialog: false, | |||
}; | |||
}, | |||
watch: { | |||
@@ -481,12 +487,8 @@ export default { | |||
switch (btn.btnName) { | |||
case 'batchConfirm': | |||
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( | |||
'selectedPlan', | |||
this.$refs['waiting-list-table'].selectedPlan | |||
@@ -617,7 +619,11 @@ export default { | |||
lineId: null, | |||
startTime: null, | |||
endTime: null, | |||
planStartTime: null, | |||
planEndTime: null, | |||
confirmed: null, | |||
remark: null, | |||
special: false, | |||
}; | |||
this.resetForm('form'); | |||
}, | |||
@@ -664,15 +670,21 @@ export default { | |||
this.title = '添加待确认保养记录'; | |||
}, | |||
/** 修改按钮操作 */ | |||
handleUpdate(row) { | |||
async handleUpdate(row) { | |||
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() { | |||
@@ -722,13 +734,25 @@ export default { | |||
}); | |||
}); | |||
}, | |||
/** 确认 */ | |||
handleConfirm(row) { | |||
console.log('confirm', row); | |||
}, | |||
/** 编辑 */ | |||
handleEdit(row) { | |||
console.log('edit', row); | |||
}, | |||
/** 删除按钮操作 */ | |||
handleDelete(row) { | |||
console.log('delete', row); | |||
return; | |||
const id = row.id; | |||
this.$modal | |||
.confirm('是否确认删除设备名称为"' + row.equipmentName + '"的数据项?') | |||
.confirm( | |||
'是否确认删除设备保养单号为"' + row.maintainOrderNumber + '"的数据项?' | |||
) | |||
.then(function () { | |||
return deleteEqMaintainLog(id); | |||
// return deleteEqMaintainLog(id); | |||
}) | |||
.then(() => { | |||
this.getList(); | |||
@@ -736,13 +760,15 @@ export default { | |||
}) | |||
.catch(() => {}); | |||
}, | |||
handleDetail({ id }) { | |||
handleDetail(row) { | |||
console.log('detail', row); | |||
return; | |||
this.reset(); | |||
this.mode = 'detail'; | |||
this.info({ id }).then((response) => { | |||
this.form = response.data; | |||
this.open = true; | |||
this.title = '查看保养记录详情'; | |||
// this.open = true; | |||
// this.title = '查看保养记录详情'; | |||
}); | |||
}, | |||
/** 导出按钮操作 */ | |||
@@ -16,13 +16,16 @@ | |||
color: '#606266', | |||
}" | |||
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"> | |||
<template slot="header"> | |||
<el-popover placement="bottom-start" width="300" trigger="click"> | |||
<div class="setting-box" style="max-height: 400px; overflow-y: auto"> | |||
<el-checkbox | |||
v-for="(item, index) in tableProps" | |||
v-for="(item, index) in tablePropsLabelList" | |||
:key="'cb' + index" | |||
v-model="selectedBox[index]" | |||
:label="item.label" /> | |||
@@ -114,7 +117,8 @@ | |||
<el-button | |||
type="text" | |||
style="margin: 5px 0; padding: 0" | |||
@click="handleConfirm(scope.row)"> | |||
:disabled="!checkSelectable(scope.row)" | |||
@click="$emit('confirm', scope.row)"> | |||
确认 | |||
</el-button> | |||
</el-tooltip> | |||
@@ -124,7 +128,7 @@ | |||
<el-button | |||
type="text" | |||
style="margin: 5px 0; padding: 0" | |||
@click="handelDetail(scope.row)"> | |||
@click="$emit('detail', scope.row)"> | |||
<i class="iconfont icon-detail primary-color" /> | |||
</el-button> | |||
</el-tooltip> | |||
@@ -134,7 +138,7 @@ | |||
<el-button | |||
type="text" | |||
style="margin: 5px 0; padding: 0" | |||
@click="handleEdit(scope.row)"> | |||
@click="$emit('edit', scope.row)"> | |||
<i class="iconfont icon-edit primary-color" /> | |||
</el-button> | |||
</el-tooltip> | |||
@@ -144,7 +148,7 @@ | |||
<el-button | |||
type="text" | |||
style="margin: 5px 0; padding: 0" | |||
@click="handleDelete(scope.row)"> | |||
@click="$emit('delete', scope.row)"> | |||
<i class="iconfont icon-delete delete-color" /> | |||
</el-button> | |||
</el-tooltip> | |||
@@ -161,13 +165,14 @@ export default { | |||
components: {}, | |||
props: ['tableData', 'page', 'limit'], | |||
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) => | |||
val != null ? ['-', '计划型', '非计划型'][val] : '-', | |||
}, | |||
data() { | |||
return { | |||
tableProps: [ | |||
tablePropsLabelList: [ | |||
{ | |||
label: '设备保养单号', | |||
}, | |||
@@ -227,6 +232,13 @@ export default { | |||
}, | |||
}, | |||
methods: { | |||
checkSelectable(row, index) { | |||
return ( | |||
row.relatePlan == 2 || | |||
(row.relatePlan == 1 && | |||
(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime())) | |||
); | |||
}, | |||
handleSelectionChange(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> |