update 保养记录

src/mixins/lb/basicPageMixin.js

@@ -138,7 +138,7 @@ export default {
 			}
 		},
 		handleEmitFun(val) {
-			console.log('emit unf', val);
+			console.log('[basicPageMixin handleEmitFun]', val);
 			switch (val.action) {
 				// 查看详情
 				case 'show-detail':

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>

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;
 			}
 		},
 		/** 查询列表 */

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

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;
 			}
 		},

src/views/specialEquipment/maintain/Record--detail.vue

@@ -0,0 +1,421 @@
+<!-- 
+    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="12">
+									<el-form-item label="计划保养人员" prop="planMaintainWorker">
+										<span>{{ form.planMaintainWorker }}</span>
+									</el-form-item>
+								</el-col>
+
+								<el-col :span="12">
+									<el-form-item label="实际保养人员" prop="maintainWorker">
+										<span>{{ form.maintainWorker }}</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: {
+				id: null,
+				maintainWorker: null,
+				planMaintainWorker: 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({ planMaintainWorker, id, maintainWorker }) {
+			this.form = Object.assign(
+				{},
+				{
+					planMaintainWorker,
+					id,
+					maintainWorker,
+				}
+			);
+			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/Record.vue

@@ -11,7 +11,6 @@
 		<SearchBar
 			:formConfigs="searchBarFormConfig"
 			ref="search-bar"
-			:is-fold="true"
 			@select-changed="handleSearchBarChange"
 			@headBtnClick="handleSearchBarBtnClick" />
 
@@ -22,13 +21,13 @@
 			:limit="queryParams.pageSize"
 			:table-data="list"
 			@emitFun="handleEmitFun">
-			<method-btn
+			<!-- <method-btn
 				v-if="tableBtn.length"
 				slot="handleBtn"
 				label="操作"
 				:width="120"
 				:method-list="tableBtn"
-				@clickBtn="handleTableBtnClick" />
+				@clickBtn="handleTableBtnClick" /> -->
 		</base-table>
 
 		<!-- 分页组件 -->
@@ -60,6 +59,11 @@
 				</el-col>
 			</el-row>
 		</base-dialog>
+
+		<RecordDetail
+			v-if="recordDetailVisible"
+			ref="recordDetailDrawer"
+			@closed="recordDetailVisible = false" />
 	</div>
 </template>
 
@@ -72,21 +76,47 @@ import {
 	deleteEqMaintainLog,
 	exportMaintainLogExcel,
 } from '@/api/equipment/base/maintain/record';
+import RecordDetail from './Record--detail.vue';
 
 const timeFilter = (val) => moment(val).format('yyyy-MM-DD HH:mm:ss');
 
+const btn = {
+	name: 'tableBtn',
+	props: ['injectData'],
+	data() {
+		return {};
+	},
+	methods: {
+		handleClick() {
+			this.$emit('emitData', {
+				action: this.injectData.label,
+				value: this.injectData,
+			});
+		},
+	},
+	render: function (h) {
+		return (
+			<el-button type="text" onClick={this.handleClick}>
+				{this.injectData.name}
+			</el-button>
+		);
+	},
+};
+
 export default {
 	name: 'SpecialEquipmentMaintainRecord',
-	components: { DialogForm },
+	components: { DialogForm, RecordDetail },
 	mixins: [basicPageMixin],
 	data() {
 		return {
+			recordDetailVisible: false,
 			searchBarKeys: [
 				'maintainPlanId',
 				'startTime',
-				'relatePlan',
-				'equipmentId',
-				'specialType',
+				'special',
+				// 'relatePlan',
+				// 'equipmentId',
+				// 'specialType',
 			],
 			tableBtn: [
 				this.$auth.hasPermi('equipment:maintain-record:update')
@@ -122,99 +152,146 @@ export default {
 					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: '开始时间',
+					label: '实际开始时间',
 					filter: timeFilter,
 					minWidth: 150,
 					showOverflowtooltip: true,
 				},
 				{
 					prop: 'endTime',
-					label: '结束时间',
+					label: '实际结束时间',
 					filter: timeFilter,
 					minWidth: 150,
 					showOverflowtooltip: true,
 				},
 				{
-					prop: 'equipmentCategory',
-					label: '设备大类',
+					prop: 'relatePlan',
+					label: '保养计划类型',
 					minWidth: 100,
 					showOverflowtooltip: true,
 					filter: (val) =>
-						val != null ? ['-', '安全设备', '消防设备', '特种设备'][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,
+					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',
+				// 	label: '设备大类',
+				// 	placeholder: '请选择设备大类',
+				// 	param: 'specialType',
+				// 	onchange: true,
+				// 	selectOptions: [
+				// 		{ id: 1, name: '安全设备' },
+				// 		{ id: 2, name: '消防设备' },
+				// 		{ id: 3, name: '特种设备' },
+				// 	],
+				// 	filterable: true,
+				// 	defaultSelect: null
+				// },
+				// {
+				// 	type: 'select',
+				// 	label: '设备',
+				// 	placeholder: '请选择设备',
+				// 	param: 'equipmentId',
+				// 	defaultSelect: null
+				// },
 				{
 					type: 'select',
-					label: '设备大类',
-					placeholder: '请选择设备大类',
-					param: 'specialType',
-					onchange: true,
-					selectOptions: [
-						{ id: 1, name: '安全设备' },
-						{ id: 2, name: '消防设备' },
-						{ id: 3, name: '特种设备' },
-					],
-					filterable: true,
-					defaultSelect: null
-				},
-				{
-					type: 'select',
-					label: '设备',
-					placeholder: '请选择设备',
-					param: 'equipmentId',
-					defaultSelect: null
-				},
-				{
-					type: 'select',
-					label: '计划名称',
-					placeholder: '请选择计划名称',
+					label: '保养计划名称',
+					placeholder: '请选择保养计划名称',
 					param: 'maintainPlanId',
-					defaultSelect: null
+					defaultSelect: null,
 				},
 				// 开始结束时间
 				{
 					type: 'datePicker',
-					label: '保养开始时间',
+					label: '实际开始时间',
 					dateType: 'daterange', // datetimerange
 					format: 'yyyy-MM-dd',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
@@ -223,19 +300,19 @@ export default {
 					endPlaceholder: '结束日期',
 					defaultTime: ['00:00:00', '23:59:59'],
 					param: 'startTime',
-					defaultSelect: null
+					defaultSelect: null,
 					// width: 350,
 				},
-				{
-					type: 'select',
-					label: '是否计划保养',
-					selectOptions: [
-						{ name: '是', id: 1 },
-						{ name: '否', id: 2 },
-					],
-					defaultSelect: null,
-					param: 'relatePlan',
-				},
+				// {
+				// 	type: 'select',
+				// 	label: '是否计划保养',
+				// 	selectOptions: [
+				// 		{ name: '是', id: 1 },
+				// 		{ name: '否', id: 2 },
+				// 	],
+				// 	defaultSelect: null,
+				// 	param: 'relatePlan',
+				// },
 				{
 					type: 'button',
 					btnName: '查询',
@@ -254,15 +331,15 @@ export default {
 					plain: true,
 					color: 'primary',
 				},
-				{
-					type: this.$auth.hasPermi('equipment:maintain-record:create')
-						? 'button'
-						: '',
-					btnName: '新增',
-					name: 'add',
-					plain: true,
-					color: 'success',
-				},
+				// {
+				// 	type: this.$auth.hasPermi('equipment:maintain-record:create')
+				// 		? 'button'
+				// 		: '',
+				// 	btnName: '新增',
+				// 	name: 'add',
+				// 	plain: true,
+				// 	color: 'success',
+				// },
 			],
 			rows: [
 				[
@@ -422,12 +499,11 @@ export default {
 				pageNo: 1,
 				pageSize: 10,
 				maintainPlanId: null,
-				maintainPlanId: null,
 				startTime: null,
-				relatePlan: null,
-				equipmentId: null,
+				// relatePlan: null,
+				// equipmentId: null,
 				special: true,
-				specialType: null,
+				// specialType: null,
 			},
 			// 表单参数
 			form: {},
@@ -438,32 +514,47 @@ export default {
 	},
 	created() {
 		this.initSearchBar();
-		if (this.$route.query) {
-			this.queryParams.specialType =
-				this.$route.query?.specialType ?? undefined;
-			this.queryParams.equipmentId =
-				this.$route.query?.equipmentId ?? undefined;
-			this.queryParams.maintainPlanId =
-				this.$route.query?.maintainPlanId ?? undefined;
-			this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
-			this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
-			this.searchBarFormConfig[0].defaultSelect =
-				this.$route.query.specialType ?? undefined;
-			this.searchBarFormConfig[1].defaultSelect =
-				this.$route.query.equipmentId ?? undefined;
-			this.searchBarFormConfig[2].defaultSelect =
-				this.$route.query.maintainPlanId ?? undefined;
-			this.searchBarFormConfig[3].defaultSelect =
-				this.$route.query?.createTime ?? undefined;
-			this.searchBarFormConfig[4].defaultSelect =
-				Number(this.$route.query.relatePlan) ?? undefined;
-		}
+		// if (this.$route.query) {
+		// 	this.queryParams.specialType =
+		// 		this.$route.query?.specialType ?? undefined;
+		// 	this.queryParams.equipmentId =
+		// 		this.$route.query?.equipmentId ?? undefined;
+		// 	this.queryParams.maintainPlanId =
+		// 		this.$route.query?.maintainPlanId ?? undefined;
+		// 	this.queryParams.relatePlan = this.$route.query?.relatePlan ?? undefined;
+		// 	this.queryParams.startTime = this.$route.query?.createTime ?? undefined;
+		// 	this.searchBarFormConfig[0].defaultSelect =
+		// 		this.$route.query.specialType ?? undefined;
+		// 	this.searchBarFormConfig[1].defaultSelect =
+		// 		this.$route.query.equipmentId ?? undefined;
+		// 	this.searchBarFormConfig[2].defaultSelect =
+		// 		this.$route.query.maintainPlanId ?? undefined;
+		// 	this.searchBarFormConfig[3].defaultSelect =
+		// 		this.$route.query?.createTime ?? undefined;
+		// 	this.searchBarFormConfig[4].defaultSelect =
+		// 		Number(this.$route.query.relatePlan) ?? undefined;
+		// }
 		this.getList();
-		if (this.$route.query.addRecord) {
-			this.handleAdd();
-		}
+		// if (this.$route.query.addRecord) {
+		// 	this.handleAdd();
+		// }
 	},
 	methods: {
+		handleEmitFun({ action, value }) {
+			switch (action) {
+				case '详情':
+					this.recordDetailVisible = true;
+					this.$nextTick(() => {
+						this.$refs.recordDetailDrawer.show({
+							id: value.id,
+							planMaintainWorker: value.planMaintainWorker,
+							maintainWorker: value.maintainWorker,
+						});
+					});
+					break;
+			}
+		},
+
 		handleSearchBarChange({ param, value }) {
 			if ('specialType' === param) {
 				if (!value) {
@@ -475,28 +566,29 @@ export default {
 				);
 			}
 		},
-		setSearchBarEquipmentList(eqList) {
-			this.$set(
-				this.searchBarFormConfig[1],
-				'selectOptions',
-				eqList.map((item) => ({
-					name: item.name,
-					id: item.id,
-				}))
-			);
-		},
+		// setSearchBarEquipmentList(eqList) {
+		// 	this.$set(
+		// 		this.searchBarFormConfig[1],
+		// 		'selectOptions',
+		// 		eqList.map((item) => ({
+		// 			name: item.name,
+		// 			id: item.id,
+		// 		}))
+		// 	);
+		// },
 		initSearchBar() {
-			this.http('/base/core-equipment/listAll', 'get').then(({ data }) => {
-				this.allSpecialEquipments = data.filter((item) => item.special);
-				this.setSearchBarEquipmentList(data.filter((item) => item.special));
-			});
+			// this.http('/base/core-equipment/listAll', 'get').then(({ data }) => {
+			// 	this.allSpecialEquipments = data.filter((item) => item.special);
+			// 	this.setSearchBarEquipmentList(data.filter((item) => item.special));
+			// });
 			this.http('/base/equipment-maintain-plan/page', 'get', {
 				pageNo: 1,
 				pageSize: 100,
 				special: true,
 			}).then(({ data }) => {
 				this.$set(
-					this.searchBarFormConfig[2],
+					this.searchBarFormConfig[0],
+					// this.searchBarFormConfig[2],
 					'selectOptions',
 					(data?.list || []).map((item) => ({
 						name: item.name,
@@ -509,8 +601,21 @@ export default {
 		getList() {
 			this.loading = true;
 			// 执行查询
-			this.recv(this.queryParams).then((response) => {
-				this.list = response.data.list;
+			this.recv({ ...this.queryParams, special: true }).then((response) => {
+				this.list = [
+					{
+						id: 213,
+						maintainOrderNumber: 123,
+						planName: 'hhh',
+						departmentName: 'asdf',
+						lineName: 456,
+						planStartTime: '2024-01-01',
+						planEndTime: '2024-01-01',
+						startTime: '2024-01-01',
+						endTime: '2024-01-01',
+						relatePlan: 1,
+					},
+				]; // response.data.list;
 				this.total = response.data.total;
 				this.loading = false;
 			});