update 保养计划配置

src/views/specialEquipment/maintain/PlanConfig--addContent.vue

@@ -0,0 +1,461 @@
+<!-- 
+    filename: PlanConfig--addContent.vue
+    author: liubin
+    date: 2024-02-04 09:40:04
+    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">
+				<section>
+					<SmallTitle>保养信息</SmallTitle>
+					<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="closeDetailForm"
+			@cancel="closeDetailForm"
+			@confirm="submitDetailForm">
+			<DialogForm
+				v-if="detailAddVisible"
+				ref="detailForm"
+				v-model="detailForm"
+				:rows="detailRows" />
+		</base-dialog>
+	</el-drawer>
+</template>
+
+<script>
+import DialogForm from '@/components/DialogForm';
+
+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 {
+	name: 'PlanConfig--addContent',
+	components: { SmallTitle, DialogForm },
+	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: {
+		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,
+			}));
+		},
+		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.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>

src/views/specialEquipment/maintain/PlanConfig.vue

@@ -44,8 +44,18 @@
 			@close="cancel"
 			@cancel="cancel"
 			@confirm="submitForm">
-			<DialogForm v-if="open" ref="form" :edit="form.id != null" v-model="form" :has-files="false" />
+			<DialogForm
+				v-if="open"
+				ref="form"
+				:edit="form.id != null"
+				v-model="form"
+				:has-files="false" />
 		</base-dialog>
+
+		<PlanConfigAddContent
+			v-if="addContentDrawerVisible"
+			ref="planConfigDetailDrawer"
+			@closed="addContentDrawerVisible = false" />
 	</div>
 </template>
 
@@ -55,10 +65,11 @@ import basicPageMixin from '@/mixins/lb/basicPageMixin';
 import { deleteEqMaintainPlan } from '@/api/equipment/base/maintain/record';
 import { publicFormatter } from '@/utils/dict';
 import PlanConfigAdd from './PlanConfig--add.vue';
+import PlanConfigAddContent from './PlanConfig--addContent.vue';
 
 export default {
 	name: 'SpecialEquipmentPlanConfig',
-	components: { DialogForm: PlanConfigAdd },
+	components: { DialogForm: PlanConfigAdd, PlanConfigAddContent },
 	mixins: [basicPageMixin],
 	data() {
 		const t = new Date();
@@ -305,6 +316,8 @@ export default {
 			// 表单参数
 			form: {},
 			basePath: '/base/equipment-maintain-plan',
+			addContentDrawerVisible: false,
+			maintainData: null,
 		};
 	},
 	created() {
@@ -357,11 +370,14 @@ export default {
 			};
 			this.resetForm('form');
 		},
-		handleTableActions({data, type}) {
-			switch(type) {
+		handleTableActions({ data, type }) {
+			switch (type) {
 				case 'addContent':
 					// 添加内容
-					alert('添加内容...')
+					this.addContentDrawerVisible = true;
+					this.$nextTick(() => {
+						this.$refs.planConfigDetailDrawer.show(data);
+					});
 					break;
 			}
 		},