From 71aab2df9a5d5324ae2d8f2de925a9349f736186 Mon Sep 17 00:00:00 2001
From: lb <liubin_9396@163.com>
Date: Sun, 4 Feb 2024 15:43:33 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BF=9D=E5=85=BB=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../maintain/Monitor--detail.vue              | 461 ++++++++++++++++++
 .../specialEquipment/maintain/Monitor.vue     | 235 +++++----
 .../maintain/PlanConfig--add.vue              |  12 +-
 3 files changed, 616 insertions(+), 92 deletions(-)
 create mode 100644 src/views/specialEquipment/maintain/Monitor--detail.vue

diff --git a/src/views/specialEquipment/maintain/Monitor--detail.vue b/src/views/specialEquipment/maintain/Monitor--detail.vue
new file mode 100644
index 00000000..704c6ba2
--- /dev/null
+++ b/src/views/specialEquipment/maintain/Monitor--detail.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>
diff --git a/src/views/specialEquipment/maintain/Monitor.vue b/src/views/specialEquipment/maintain/Monitor.vue
index 2223ac45..64b79b93 100644
--- a/src/views/specialEquipment/maintain/Monitor.vue
+++ b/src/views/specialEquipment/maintain/Monitor.vue
@@ -52,6 +52,11 @@
 				:has-files="false"
 				:rows="rows" />
 		</base-dialog>
+
+		<MonitorDetail
+			v-if="monitorDetailVisible"
+			ref="monitorDetailDrawer"
+			@closed="monitorDetailVisible = false" />
 	</div>
 </template>
 
@@ -62,6 +67,8 @@ import basicPageMixin from '@/mixins/lb/basicPageMixin';
 import { exportMaintainMonitorExcel } from '@/api/equipment/base/maintain/record';
 import { parseTime } from '@/utils/ruoyi';
 
+import MonitorDetail from './Monitor--detail.vue';
+
 const remainBox = {
 	name: 'RemainBox',
 	props: ['injectData'],
@@ -120,22 +127,28 @@ const btn = {
 
 export default {
 	name: 'SpecialEquipmentMaintainMonitor',
-	components: {},
+	components: { MonitorDetail },
 	mixins: [basicPageMixin],
 	data() {
 		return {
-			searchBarKeys: ['planId', 'specialType', 'equipmentId'],
+			monitorDetailVisible: false,
+			searchBarKeys: ['planId'],
 			tableProps: [
-				// {
-				// 	prop: 'createTime',
-				// 	label: '添加时间',
-				// 	fixed: true,
-				// 	width: 180,
-				// 	filter: parseTime(createTime),
-				// },
+				{
+					prop: 'code',
+					label: '保养计划单号',
+					minWidth: 118,
+					showOverflowtooltip: true,
+				},
 				{
 					prop: 'name',
-					label: '保养计划',
+					label: '保养计划名称',
+					minWidth: 118,
+					showOverflowtooltip: true,
+				},
+				{
+					prop: 'departmentName',
+					label: '部门',
 					minWidth: 100,
 					showOverflowtooltip: true,
 				},
@@ -146,61 +159,101 @@ export default {
 					showOverflowtooltip: true,
 				},
 				{
-					prop: 'equipmentCategory',
-					label: '设备大类',
-					minWidth: 100,
+					prop: 'lastPlanMaintainTime',
+					label: '上次计划保养时间',
+					filter: parseTime,
+					minWidth: 158,
 					showOverflowtooltip: true,
-					filter: (val) =>
-						val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
-				},
-				{
-					prop: 'equipmentName',
-					label: '设备名称',
-					minWidth: 100,
-					showOverflowtooltip: true,
-				},
-				{ prop: 'maintenancePeriod', label: '保养频率' },
-				{
-					prop: 'maintainType',
-					label: '保养类型',
-					showOverflowtooltip: true,
-					filter: publicFormatter(this.DICT_TYPE.MAINTAIN_TYPE),
 				},
 				{
 					prop: 'lastMaintainTime',
-					label: '上次保养时间',
+					label: '上次实际保养时间',
 					filter: parseTime,
-					minWidth: 150,
+					minWidth: 158,
 					showOverflowtooltip: true,
 				},
 				{
-					prop: 'nextMaintainTime',
-					label: '计划下次保养时间',
+					prop: 'nextPlanMaintainTime',
+					label: '下次计划保养时间',
 					filter: parseTime,
-					minWidth: 150,
+					minWidth: 158,
 					showOverflowtooltip: true,
 				},
 				{
-					prop: 'remainDays',
-					label: '距离保养时间(天)',
-					subcomponent: remainBox,
-					minWidth: 150,
-					// showOverflowtooltip: true
-				},
-				{
-					prop: 'opt1',
-					label: '设备保养',
-					name: '操作',
-					subcomponent: btn,
-					width: 100,
+					prop: 'maintainer',
+					label: '计划保养人员',
+					minWidth: 158,
+					showOverflowtooltip: true,
 				},
 				{
 					prop: 'opt2',
-					label: '保养记录',
-					name: '查看详情',
+					label: '保养内容',
+					name: '详情',
 					subcomponent: btn,
 					width: 100,
 				},
+				{
+					prop: 'remainDays',
+					label: '距离下次保养剩余时间(天)',
+					subcomponent: remainBox,
+					minWidth: 210,
+				},
+				// {
+				// 	prop: 'createTime',
+				// 	label: '添加时间',
+				// 	fixed: true,
+				// 	width: 180,
+				// 	filter: parseTime(createTime),
+				// },
+				// {
+				// 	prop: 'equipmentCategory',
+				// 	label: '设备大类',
+				// 	minWidth: 100,
+				// 	showOverflowtooltip: true,
+				// 	filter: (val) =>
+				// 		val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
+				// },
+				// {
+				// 	prop: 'equipmentName',
+				// 	label: '设备名称',
+				// 	minWidth: 100,
+				// 	showOverflowtooltip: true,
+				// },
+				// { prop: 'maintenancePeriod', label: '保养频率' },
+				// {
+				// 	prop: 'maintainType',
+				// 	label: '保养类型',
+				// 	showOverflowtooltip: true,
+				// 	filter: publicFormatter(this.DICT_TYPE.MAINTAIN_TYPE),
+				// },
+				// {
+				// 	prop: 'lastMaintainTime',
+				// 	label: '上次保养时间',
+				// 	filter: parseTime,
+				// 	minWidth: 150,
+				// 	showOverflowtooltip: true,
+				// },
+				// {
+				// 	prop: 'remainDays',
+				// 	label: '距离保养时间(天)',
+				// 	subcomponent: remainBox,
+				// 	minWidth: 150,
+				// 	// showOverflowtooltip: true
+				// },
+				// {
+				// 	prop: 'opt1',
+				// 	label: '设备保养',
+				// 	name: '操作',
+				// 	subcomponent: btn,
+				// 	width: 100,
+				// },
+				// {
+				// 	prop: 'opt2',
+				// 	label: '保养记录',
+				// 	name: '查看详情',
+				// 	subcomponent: btn,
+				// 	width: 100,
+				// },
 			],
 			searchBarFormConfig: [
 				{
@@ -210,26 +263,26 @@ export default {
 					param: 'planId',
 					filterable: true,
 				},
-				{
-					type: 'select',
-					label: '设备大类',
-					placeholder: '请选择设备大类',
-					param: 'specialType',
-					onchange: true,
-					selectOptions: [
-						{ id: 1, name: '安全设备' },
-						{ id: 2, name: '消防设备' },
-						{ id: 3, name: '特种设备' },
-					],
-					filterable: true,
-				},
-				{
-					type: 'select',
-					label: '设备名',
-					placeholder: '请选择设备',
-					param: 'equipmentId',
-					filterable: true,
-				},
+				// {
+				// 	type: 'select',
+				// 	label: '设备大类',
+				// 	placeholder: '请选择设备大类',
+				// 	param: 'specialType',
+				// 	onchange: true,
+				// 	selectOptions: [
+				// 		{ id: 1, name: '安全设备' },
+				// 		{ id: 2, name: '消防设备' },
+				// 		{ id: 3, name: '特种设备' },
+				// 	],
+				// 	filterable: true,
+				// },
+				// {
+				// 	type: 'select',
+				// 	label: '设备名',
+				// 	placeholder: '请选择设备',
+				// 	param: 'equipmentId',
+				// 	filterable: true,
+				// },
 				{
 					type: 'button',
 					btnName: '查询',
@@ -255,10 +308,8 @@ export default {
 			queryParams: {
 				pageNo: 1,
 				pageSize: 10,
-				equipmentName: null,
-				createTime: null,
+				planId: null,
 				special: true,
-				specialType: null,
 			},
 			// 表单参数
 			form: {},
@@ -331,28 +382,34 @@ export default {
 			});
 		},
 		handleEmitFun({ action, value }) {
+			console.log('handleEmitFun .... ', action, value);
 			switch (action) {
-				// 查看详情
-				case '设备保养':
-					this.$router.push({
-						path: '/equipment/base/maintain/record',
-						query: {
-							addRecord: 1,
-							row: value,
-						},
-					});
-					break;
-				case '保养记录':
-					const queryData = {
-						equipmentId: value.equipmentId,
-						maintainPlanId: value.id,
-						relatePlan: value.lastMaintainTime ? 1 : 2,
-					};
-					this.$router.push({
-						path: '/equipment/base/maintain/record',
-						query: queryData,
+				case '保养内容':
+					this.monitorDetailVisible = true;
+					this.$nextTick(() => {
+						this.$refs.monitorDetailDrawer.show(value);
 					});
 					break;
+				// case '设备保养':
+				// 	this.$router.push({
+				// 		path: '/equipment/base/maintain/record',
+				// 		query: {
+				// 			addRecord: 1,
+				// 			row: value,
+				// 		},
+				// 	});
+				// 	break;
+				// case '保养记录':
+				// 	const queryData = {
+				// 		equipmentId: value.equipmentId,
+				// 		maintainPlanId: value.id,
+				// 		relatePlan: value.lastMaintainTime ? 1 : 2,
+				// 	};
+				// 	this.$router.push({
+				// 		path: '/equipment/base/maintain/record',
+				// 		query: queryData,
+				// 	});
+				// 	break;
 			}
 		},
 		/** 查询列表 */
diff --git a/src/views/specialEquipment/maintain/PlanConfig--add.vue b/src/views/specialEquipment/maintain/PlanConfig--add.vue
index 34f9f437..0d2e016d 100644
--- a/src/views/specialEquipment/maintain/PlanConfig--add.vue
+++ b/src/views/specialEquipment/maintain/PlanConfig--add.vue
@@ -199,7 +199,12 @@
 			</el-col>
 
 			<el-col :span="12">
-				<el-form-item label="首次保养时间" prop="firstMaintenanceTime">
+				<el-form-item
+					label="首次保养时间"
+					prop="firstMaintenanceTime"
+					:rules="[
+						{ required: true, message: '请选择首次保养时间', trigger: 'blur' },
+					]">
 					<el-date-picker
 						v-model="form.firstMaintenanceTime"
 						type="datetime"
@@ -297,14 +302,15 @@ export default {
 			],
 			lineList: [],
 			maintainerList: [],
-			departmentList: []
+			departmentList: [],
 		};
 	},
 	watch: {
 		dataForm: {
 			handler(val) {
 				this.form = JSON.parse(JSON.stringify(val));
-				if (typeof val.maintainer == 'string') this.form.maintainer = val.maintainer.split(',')
+				if (typeof val.maintainer == 'string')
+					this.form.maintainer = val.maintainer.split(',');
 				if (this.form.equipmentCategory != null) {
 					setTimeout(() => {
 						this.equipmentOptions = this.equipmentList