483 lines
11 KiB
Vue
483 lines
11 KiB
Vue
<!--
|
||
filename: PlanConfig--addContent.vue
|
||
author: liubin
|
||
date: 2024-02-04 09:40:04
|
||
description: 计划配置-添加内容
|
||
-->
|
||
|
||
<template>
|
||
<el-drawer
|
||
:visible.sync="visible"
|
||
:show-close="false"
|
||
:wrapperClosable="true"
|
||
:close-on-click-modal="true"
|
||
:before-close="handleConfirmClose"
|
||
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">
|
||
<section>
|
||
<div class="form-part" style="margin-bottom: 32px">
|
||
<el-skeleton v-if="!showForm" animated />
|
||
<el-form
|
||
v-else
|
||
ref="form"
|
||
:model="form"
|
||
label-position="top"
|
||
v-loading="formLoading">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-form-item label="保养计划名称" prop="name">
|
||
<span>{{ form.name || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="部门" prop="departmentName">
|
||
<span>{{ form.departmentName || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="产线名" prop="lineName">
|
||
<span>{{ form.lineName || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="保养频率" prop="maintenancePeriod">
|
||
<span>{{ form.maintenancePeriod || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="保养时长" prop="maintainDuration">
|
||
<span>{{ form.maintainDuration || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
<el-col :span="8">
|
||
<el-form-item label="计划保养人员" prop="maintainer">
|
||
<span>{{ form.maintainer || '---' }}</span>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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="handleAddDetail" type="text">
|
||
<i class="el-icon-plus"></i>
|
||
添加详情
|
||
</el-button>
|
||
</div>
|
||
<base-table
|
||
v-loading="detailLoading"
|
||
:table-props="detailTableProps"
|
||
:page="detailTableQuery.pageNo || 1"
|
||
:limit="detailTableQuery.pageSize || 10"
|
||
:table-data="detailList"
|
||
@emitFun="handleDetailTableAction">
|
||
<method-btn
|
||
slot="handleBtn"
|
||
label="操作"
|
||
width="100"
|
||
:method-list="detailTableBtns"
|
||
@clickBtn="handleDetailTableBtnClicked" />
|
||
</base-table>
|
||
|
||
<!-- 分页组件 -->
|
||
<pagination
|
||
v-show="detailTotal > 0"
|
||
:total="detailTotal"
|
||
:page.sync="detailTableQuery.pageNo"
|
||
:limit.sync="detailTableQuery.pageSize"
|
||
@pagination="refreshDetailList" />
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="drawer-body__footer">
|
||
<el-button style="" @click="cancel">取消</el-button>
|
||
<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
|
||
编辑
|
||
</el-button>
|
||
<el-button v-else type="primary" @click="confirm">保存</el-button>
|
||
</div>
|
||
|
||
<!-- 属性对话框 -->
|
||
<base-dialog
|
||
dialogTitle="保养详情"
|
||
:dialogVisible="detailAddVisible"
|
||
width="35%"
|
||
:append-to-body="true"
|
||
custom-class="baseDialog"
|
||
@close="detailAddVisible = false"
|
||
@cancel="detailAddVisible = false"
|
||
@confirm="submitDetailForm">
|
||
<DialogForm
|
||
v-if="detailAddVisible"
|
||
ref="detailForm"
|
||
v-model="detailForm"
|
||
:rows="detailRows" />
|
||
</base-dialog>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
import DialogForm from '@/components/DialogForm';
|
||
import BaseDialogWrapper from '../components/BaseDialogWrapper.vue';
|
||
import SmallTitle from '../components/SmallTitle.js';
|
||
|
||
export default {
|
||
name: 'PlanConfig--addContent',
|
||
components: { SmallTitle, DialogForm, BaseDialog: BaseDialogWrapper },
|
||
props: ['maintainData'],
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
mode: 'edit',
|
||
showForm: false,
|
||
form: {
|
||
departmentName: null,
|
||
id: null,
|
||
lineName: null,
|
||
maintainDuration: null,
|
||
maintainer: null,
|
||
maintenancePeriod: null,
|
||
name: null,
|
||
},
|
||
formLoading: false,
|
||
equipmentOptions: [],
|
||
detailList: [],
|
||
detailAddVisible: false,
|
||
detailPageProps: ['equipmentName', 'program'],
|
||
detailForm: {
|
||
planId: null,
|
||
equipmentId: null,
|
||
program: '',
|
||
maintenanceDes: '',
|
||
remark: '',
|
||
},
|
||
detailRows: [
|
||
[
|
||
{
|
||
select: true,
|
||
label: '设备',
|
||
prop: 'equipmentId',
|
||
options: [],
|
||
rules: [
|
||
{ required: true, message: '设备不能为空', trigger: 'blur' },
|
||
],
|
||
},
|
||
],
|
||
[
|
||
{
|
||
input: true,
|
||
label: '保养项目',
|
||
prop: 'program',
|
||
rules: [
|
||
{ required: true, message: '保养项目不能为空', trigger: 'blur' },
|
||
],
|
||
},
|
||
],
|
||
[
|
||
{
|
||
input: true,
|
||
label: '保养描述',
|
||
prop: 'maintenanceDes',
|
||
rules: [
|
||
{ required: true, message: '包养描述不能为空', trigger: 'blur' },
|
||
],
|
||
},
|
||
],
|
||
],
|
||
detailLoading: false,
|
||
detailTableProps: [
|
||
{ prop: 'equipmentName', label: '设备名称' },
|
||
{ prop: 'program', label: '保养项目' },
|
||
// { prop: 'remark', label: '备注' },
|
||
],
|
||
detailTableQuery: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
},
|
||
detailTableBtns: [
|
||
{
|
||
type: 'edit',
|
||
btnName: '编辑',
|
||
},
|
||
{
|
||
type: 'delete',
|
||
btnName: '删除',
|
||
},
|
||
],
|
||
detailTotal: 0,
|
||
detailList: [],
|
||
equipmentList: [],
|
||
};
|
||
},
|
||
computed: {},
|
||
mounted() {
|
||
this.loadEquipments();
|
||
},
|
||
methods: {
|
||
/** 确认是否关闭 */
|
||
async handleConfirmClose() {
|
||
if (this.mode.includes('detail')) return this.cancel();
|
||
if (document.querySelector('.small-title').innerText.includes('添加内容')) return this.cancel();
|
||
try {
|
||
if (
|
||
await this.$confirm(
|
||
<div style="position: relative; margin-bottom: 26px; overflow: visible;">
|
||
<h1 style="font-size: 16px; font-weight: bold; color: #000c;">
|
||
确认要关闭页面吗?
|
||
</h1>
|
||
<p style="font-size: 14px; color: #0008; position: absolute; top: 24px;">
|
||
确定关闭将不保留编辑内容
|
||
</p>
|
||
</div>,
|
||
{
|
||
confirmButtonText: '确 定',
|
||
cancelButtonText: '取 消',
|
||
type: 'warning',
|
||
}
|
||
)
|
||
) {
|
||
this.cancel();
|
||
}
|
||
} catch (err) {
|
||
return false;
|
||
}
|
||
},
|
||
|
||
show({
|
||
departmentName,
|
||
id,
|
||
lineName,
|
||
maintainDuration,
|
||
maintainer,
|
||
maintenancePeriod,
|
||
name,
|
||
}) {
|
||
this.form = Object.assign(
|
||
{},
|
||
{
|
||
departmentName,
|
||
id,
|
||
lineName,
|
||
maintainDuration,
|
||
maintainer,
|
||
maintenancePeriod,
|
||
name,
|
||
}
|
||
);
|
||
this.$nextTick(() => {
|
||
this.refreshDetailList();
|
||
});
|
||
this.visible = true;
|
||
this.showForm = true;
|
||
},
|
||
cancel() {
|
||
this.visible = false;
|
||
setTimeout(() => {
|
||
this.$emit('closed');
|
||
}, 500);
|
||
},
|
||
confirm() {
|
||
this.cancel();
|
||
},
|
||
toggleEdit() {
|
||
this.mode == 'edit' ? 'detail' : 'edit';
|
||
},
|
||
async loadEquipments() {
|
||
// TODO: 很有可能此处要改成动态刷新/获取/加载设备列表，当总的特殊设备数量大于100的时候...
|
||
const res = await this.$axios('/base/core-equipment/page', {
|
||
params: {
|
||
pageNo: 1,
|
||
pageSize: 100,
|
||
special: true,
|
||
},
|
||
});
|
||
this.equipmentList = res.data?.list || [];
|
||
this.detailRows[0][0].options = (res.data?.list || []).map((item) => ({
|
||
label: item.name,
|
||
value: item.id,
|
||
}));
|
||
},
|
||
|
||
resetForm() {
|
||
this.detailForm = {
|
||
planId: null,
|
||
equipmentId: null,
|
||
program: '',
|
||
maintenanceDes: '',
|
||
remark: '',
|
||
};
|
||
},
|
||
|
||
closeDetailForm() {
|
||
this.detailAddVisible = false;
|
||
},
|
||
|
||
async submitDetailForm() {
|
||
// validation
|
||
this.$refs.detailForm.validate(async (valid) => {
|
||
if (!valid) return;
|
||
const res = await this.$axios[this.detailForm.id ? 'put' : 'post'](
|
||
`/base/equipment-maintain-plan-det/${
|
||
this.detailForm.id ? 'update' : 'create'
|
||
}`,
|
||
{
|
||
...this.detailForm,
|
||
planId: this.form.id,
|
||
}
|
||
);
|
||
if (res.code == 0) {
|
||
this.detailAddVisible = false;
|
||
this.$message.success('添加成功');
|
||
this.refreshDetailList();
|
||
} else {
|
||
this.detailAddVisible = false;
|
||
this.$message.error('出错');
|
||
}
|
||
});
|
||
},
|
||
async refreshDetailList() {
|
||
this.detailLoading = true;
|
||
if (!this.form.id)
|
||
return this.$message.info('没有找到保养计划相关信息...');
|
||
const res = await this.$axios('/base/equipment-maintain-plan-det/page', {
|
||
params: {
|
||
pageNo: this.detailTableQuery.pageNo,
|
||
pageSize: this.detailTableQuery.pageSize,
|
||
planId: this.form.id,
|
||
},
|
||
});
|
||
this.detailList = res.data?.list || [];
|
||
this.detailTotal = res.data?.total || 0;
|
||
this.detailLoading = false;
|
||
},
|
||
//
|
||
handleDetailTableAction() {},
|
||
handleDetailTableBtnClicked({ data, type }) {
|
||
switch (type) {
|
||
case 'edit':
|
||
const { id, equipmentId, planId, program, maintenanceDes, remark } =
|
||
data;
|
||
this.detailAddVisible = true;
|
||
this.$nextTick(() => {
|
||
this.detailForm = Object.assign(
|
||
{},
|
||
{
|
||
id,
|
||
equipmentId,
|
||
planId,
|
||
program,
|
||
maintenanceDes,
|
||
remark,
|
||
}
|
||
);
|
||
});
|
||
break;
|
||
case 'delete':
|
||
if (!data.id) return;
|
||
this.$confirm('确认移除该详情吗？', '提示', {
|
||
confirmButtonText: '确 认',
|
||
cancelButtonText: '取 消',
|
||
})
|
||
.then(async () => {
|
||
const res = await this.$axios.delete(
|
||
'/base/equipment-maintain-plan-det/delete',
|
||
{
|
||
params: {
|
||
id: data.id,
|
||
},
|
||
}
|
||
);
|
||
if (res.code == 0) {
|
||
this.$message.success('删除成功!');
|
||
this.refreshDetailList();
|
||
}
|
||
})
|
||
.catch(console.error);
|
||
break;
|
||
case 'detail':
|
||
this.handleDetail(data);
|
||
break;
|
||
default:
|
||
this.handleTableActions({ data, type });
|
||
}
|
||
},
|
||
handleAddDetail() {
|
||
this.resetForm();
|
||
this.$nextTick(() => {
|
||
this.detailAddVisible = true;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</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: calc(100% - 72px);
|
||
}
|
||
|
||
.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>
|