diff --git a/src/views/specialEquipment/maintain/WaitingList.vue b/src/views/specialEquipment/maintain/WaitingList.vue
index 817e2cc4..0ddc57c8 100644
--- a/src/views/specialEquipment/maintain/WaitingList.vue
+++ b/src/views/specialEquipment/maintain/WaitingList.vue
@@ -34,7 +34,11 @@
 			ref="waiting-list-table"
 			:table-data="list"
 			:page="queryParams.pageNo"
-			:limit="queryParams.pageSize" />
+			:limit="queryParams.pageSize"
+			@edit="handleEdit"
+			@detail="handleDetail"
+			@delete="handleDelete"
+			@confirm="handleConfirm" />
 
 		<!-- 分页组件 -->
 		<pagination
@@ -127,204 +131,204 @@ export default {
 				// 'specialType',
 			],
 			tobeConfirmedIdList: [],
-			tableBtn: [
-				// this.$auth.hasPermi('equipment:maintain-record:update')
-				// 	? {
-				// 			type: 'detail',
-				// 			btnName: '详情',
-				// 	  }
-				// 	: undefined,
-				{
-					type: 'confirm',
-					btnName: '确认',
-				},
-				{
-					type: 'edit',
-					btnName: '编辑',
-				},
-				{
-					type: 'delete',
-					btnName: '删除',
-				},
-			],
-			tableProps: [
-				// {
-				// 	prop: 'createTime',
-				// 	label: '添加时间',
-				// 	fixed: true,
-				// 	width: 150,
-				// 	filter: timeFilter,
-				// },
-				{
-					type: 'selection',
-					// prop: '_selection',
-					// label: '批量选择',
-					width: 48,
-					subcomponent: {
-						props: ['injectData'],
-						data() {
-							return {
-								outside: false,
-								selected: false,
-							};
-						},
-						watch: {
-							selected(val) {
-								if (!this.outside) {
-									console.log('emit row-selected...');
-									this.$emit('emitData', {
-										action: 'row-selected',
-										value: {
-											row: this.injectData,
-											selected: val,
-										},
-									});
-								}
-							},
-							injectData: {
-								deep: true,
-								immediate: true,
-								handler: function (val) {
-									this.outside = true;
-									this.selected = !!((val._selection & 0b01) != 0);
-									this.$nextTick(() => {
-										this.outside = false;
-									});
-								},
-							},
-						},
-						render(h) {
-							const enabled = 0b10 & this.injectData._selection;
-							// return this.injectData?._selection ? h('h1', null, 'hello') : h('h1', null, '1');
-							return (
-								<div>
-									<span>{this.selected}</span>
-									<el-checkbox disabled={!enabled} v-model={this.selected} />
-								</div>
-							);
-						},
-					},
-				},
-				{
-					prop: 'maintainOrderNumber',
-					label: '设备保养单号',
-					width: 110,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'planName',
-					label: '保养计划名称',
-					width: 110,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'departmentName',
-					label: '部门',
-					width: 110,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'lineName',
-					label: '产线名',
-					width: 110,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'planStartTime',
-					label: '计划开始时间',
-					filter: timeFilter,
-					minWidth: 150,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'planEndTime',
-					label: '计划结束时间',
-					filter: timeFilter,
-					minWidth: 150,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'startTime',
-					label: '实际开始时间',
-					filter: timeFilter,
-					minWidth: 150,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'endTime',
-					label: '实际结束时间',
-					filter: timeFilter,
-					minWidth: 150,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'confirmDueTime',
-					label: '确认截止时间',
-					filter: timeFilter,
-					minWidth: 150,
-					showOverflowtooltip: true,
-				},
-				{
-					prop: 'relatePlan',
-					label: '保养计划类型',
-					minWidth: 150,
-					showOverflowtooltip: true,
-					filter: (val) =>
-						val != null ? ['-', '计划型', '非计划型'][val] : '-',
-				},
-				{
-					prop: '_detail',
-					label: '详情',
-					name: '详情',
-					minWidth: 60,
-					subcomponent: btn,
-				},
-				// {
-				// 	prop: 'equipmentCategory',
-				// 	label: '设备大类',
-				// 	minWidth: 100,
-				// 	showOverflowtooltip: true,
-				// 	filter: (val) =>
-				// 		val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
-				// },
-				// {
-				// 	prop: 'equipmentName',
-				// 	label: '设备名称',
-				// 	minWidth: 100,
-				// 	showOverflowtooltip: true,
-				// },
-				// {
-				// 	prop: 'maintainWorker',
-				// 	label: '保养人员',
-				// 	minWidth: 100,
-				// 	showOverflowtooltip: true,
-				// },
-				// {
-				// 	prop: 'relatePlan',
-				// 	label: '是否计划保养',
-				// 	width: 120,
-				// 	filter: (v) => (v != null ? ['', '是', '否'][v] : ''),
-				// },
-				// {
-				// 	prop: 'planName',
-				// 	label: '保养计划名称',
-				// 	minWidth: 120,
-				// 	showOverflowtooltip: true,
-				// },
-				// {
-				// 	prop: 'maintainDuration',
-				// 	label: '计划保养用时(h)',
-				// 	minWidth: 130,
-				// 	showOverflowtooltip: true,
-				// },
-				// { prop: 'timeUsed', label: '实际保养用时(h)', minWidth: 130 },
-				// {
-				// 	prop: 'remark',
-				// 	label: '备注',
-				// 	minWidth: 100,
-				// 	showOverflowtooltip: true,
-				// },
-			],
+			// tableBtn: [
+			// 	// this.$auth.hasPermi('equipment:maintain-record:update')
+			// 	// 	? {
+			// 	// 			type: 'detail',
+			// 	// 			btnName: '详情',
+			// 	// 	  }
+			// 	// 	: undefined,
+			// 	{
+			// 		type: 'confirm',
+			// 		btnName: '确认',
+			// 	},
+			// 	{
+			// 		type: 'edit',
+			// 		btnName: '编辑',
+			// 	},
+			// 	{
+			// 		type: 'delete',
+			// 		btnName: '删除',
+			// 	},
+			// ],
+			// tableProps: [
+			// 	// {
+			// 	// 	prop: 'createTime',
+			// 	// 	label: '添加时间',
+			// 	// 	fixed: true,
+			// 	// 	width: 150,
+			// 	// 	filter: timeFilter,
+			// 	// },
+			// 	{
+			// 		type: 'selection',
+			// 		// prop: '_selection',
+			// 		// label: '批量选择',
+			// 		width: 48,
+			// 		subcomponent: {
+			// 			props: ['injectData'],
+			// 			data() {
+			// 				return {
+			// 					outside: false,
+			// 					selected: false,
+			// 				};
+			// 			},
+			// 			watch: {
+			// 				selected(val) {
+			// 					if (!this.outside) {
+			// 						console.log('emit row-selected...');
+			// 						this.$emit('emitData', {
+			// 							action: 'row-selected',
+			// 							value: {
+			// 								row: this.injectData,
+			// 								selected: val,
+			// 							},
+			// 						});
+			// 					}
+			// 				},
+			// 				injectData: {
+			// 					deep: true,
+			// 					immediate: true,
+			// 					handler: function (val) {
+			// 						this.outside = true;
+			// 						this.selected = !!((val._selection & 0b01) != 0);
+			// 						this.$nextTick(() => {
+			// 							this.outside = false;
+			// 						});
+			// 					},
+			// 				},
+			// 			},
+			// 			render(h) {
+			// 				const enabled = 0b10 & this.injectData._selection;
+			// 				// return this.injectData?._selection ? h('h1', null, 'hello') : h('h1', null, '1');
+			// 				return (
+			// 					<div>
+			// 						<span>{this.selected}</span>
+			// 						<el-checkbox disabled={!enabled} v-model={this.selected} />
+			// 					</div>
+			// 				);
+			// 			},
+			// 		},
+			// 	},
+			// 	{
+			// 		prop: 'maintainOrderNumber',
+			// 		label: '设备保养单号',
+			// 		width: 110,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'planName',
+			// 		label: '保养计划名称',
+			// 		width: 110,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'departmentName',
+			// 		label: '部门',
+			// 		width: 110,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'lineName',
+			// 		label: '产线名',
+			// 		width: 110,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'planStartTime',
+			// 		label: '计划开始时间',
+			// 		filter: timeFilter,
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'planEndTime',
+			// 		label: '计划结束时间',
+			// 		filter: timeFilter,
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'startTime',
+			// 		label: '实际开始时间',
+			// 		filter: timeFilter,
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'endTime',
+			// 		label: '实际结束时间',
+			// 		filter: timeFilter,
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'confirmDueTime',
+			// 		label: '确认截止时间',
+			// 		filter: timeFilter,
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 	},
+			// 	{
+			// 		prop: 'relatePlan',
+			// 		label: '保养计划类型',
+			// 		minWidth: 150,
+			// 		showOverflowtooltip: true,
+			// 		filter: (val) =>
+			// 			val != null ? ['-', '计划型', '非计划型'][val] : '-',
+			// 	},
+			// 	{
+			// 		prop: '_detail',
+			// 		label: '详情',
+			// 		name: '详情',
+			// 		minWidth: 60,
+			// 		subcomponent: btn,
+			// 	},
+			// 	// {
+			// 	// 	prop: 'equipmentCategory',
+			// 	// 	label: '设备大类',
+			// 	// 	minWidth: 100,
+			// 	// 	showOverflowtooltip: true,
+			// 	// 	filter: (val) =>
+			// 	// 		val != null ? ['-', '安全设备', '消防设备', '特种设备'][val] : '-',
+			// 	// },
+			// 	// {
+			// 	// 	prop: 'equipmentName',
+			// 	// 	label: '设备名称',
+			// 	// 	minWidth: 100,
+			// 	// 	showOverflowtooltip: true,
+			// 	// },
+			// 	// {
+			// 	// 	prop: 'maintainWorker',
+			// 	// 	label: '保养人员',
+			// 	// 	minWidth: 100,
+			// 	// 	showOverflowtooltip: true,
+			// 	// },
+			// 	// {
+			// 	// 	prop: 'relatePlan',
+			// 	// 	label: '是否计划保养',
+			// 	// 	width: 120,
+			// 	// 	filter: (v) => (v != null ? ['', '是', '否'][v] : ''),
+			// 	// },
+			// 	// {
+			// 	// 	prop: 'planName',
+			// 	// 	label: '保养计划名称',
+			// 	// 	minWidth: 120,
+			// 	// 	showOverflowtooltip: true,
+			// 	// },
+			// 	// {
+			// 	// 	prop: 'maintainDuration',
+			// 	// 	label: '计划保养用时(h)',
+			// 	// 	minWidth: 130,
+			// 	// 	showOverflowtooltip: true,
+			// 	// },
+			// 	// { prop: 'timeUsed', label: '实际保养用时(h)', minWidth: 130 },
+			// 	// {
+			// 	// 	prop: 'remark',
+			// 	// 	label: '备注',
+			// 	// 	minWidth: 100,
+			// 	// 	showOverflowtooltip: true,
+			// 	// },
+			// ],
 			searchBarFormConfig: [
 				// {
 				// 	type: 'select',
@@ -437,6 +441,8 @@ export default {
 			basePath: '/base/equipment-maintain-log',
 			mode: null,
 			allSpecialEquipments: [],
+			openPlannedDialog: false,
+			openUnplannedDialog: false,
 		};
 	},
 	watch: {
@@ -481,12 +487,8 @@ export default {
 			switch (btn.btnName) {
 				case 'batchConfirm':
 					if (this.$refs['waiting-list-table'].selectedPlan.length == 0) {
-						console.log(
-							'selectedPlan',
-							this.$refs['waiting-list-table'].selectedPlan
-						);
-						alert('no data...');
-					};
+						this.$message.warning('请选择待确认的设备保养记录');
+					}
 					console.log(
 						'selectedPlan',
 						this.$refs['waiting-list-table'].selectedPlan
@@ -617,7 +619,11 @@ export default {
 				lineId: null,
 				startTime: null,
 				endTime: null,
+				planStartTime: null,
+				planEndTime: null,
+				confirmed: null,
 				remark: null,
+				special: false,
 			};
 			this.resetForm('form');
 		},
@@ -664,15 +670,21 @@ export default {
 			this.title = '添加待确认保养记录';
 		},
 		/** 修改按钮操作 */
-		handleUpdate(row) {
+		async handleUpdate(row) {
 			this.reset();
-			const id = row.id;
-			this.info({ id }).then((response) => {
-				this.form = response.data;
-				this.open = true;
-				this.form.maintainWorker = this.form.maintainWorker.split(',');
-				this.title = '修改保养记录';
-			});
+			if (row.relatePlan == 1) {
+				// 计划型
+				const res = await this.info();
+				this.form = res.data;
+				this.form.maintainWorker = res.data.maintainWorker.split(',');
+				this.openPlannedDialog = true;
+			} else {
+				// 非计划型 2
+				const res = await this.info();
+				this.form = res.data;
+				this.form.maintainWorker = res.data.maintainWorker.split(',');
+				this.openUnplannedDialog = true;
+			}
 		},
 		/** 提交按钮 */
 		submitForm() {
@@ -722,13 +734,25 @@ export default {
 				});
 			});
 		},
+		/** 确认 */
+		handleConfirm(row) {
+			console.log('confirm', row);
+		},
+		/** 编辑 */
+		handleEdit(row) {
+			console.log('edit', row);
+		},
 		/** 删除按钮操作 */
 		handleDelete(row) {
+			console.log('delete', row);
+			return;
 			const id = row.id;
 			this.$modal
-				.confirm('是否确认删除设备名称为"' + row.equipmentName + '"的数据项?')
+				.confirm(
+					'是否确认删除设备保养单号为"' + row.maintainOrderNumber + '"的数据项?'
+				)
 				.then(function () {
-					return deleteEqMaintainLog(id);
+					// return deleteEqMaintainLog(id);
 				})
 				.then(() => {
 					this.getList();
@@ -736,13 +760,15 @@ export default {
 				})
 				.catch(() => {});
 		},
-		handleDetail({ id }) {
+		handleDetail(row) {
+			console.log('detail', row);
+			return;
 			this.reset();
 			this.mode = 'detail';
 			this.info({ id }).then((response) => {
 				this.form = response.data;
-				this.open = true;
-				this.title = '查看保养记录详情';
+				// this.open = true;
+				// this.title = '查看保养记录详情';
 			});
 		},
 		/** 导出按钮操作 */
diff --git a/src/views/specialEquipment/maintain/WaitingListTable.vue b/src/views/specialEquipment/maintain/WaitingListTable.vue
index 97c3b065..52262a61 100644
--- a/src/views/specialEquipment/maintain/WaitingListTable.vue
+++ b/src/views/specialEquipment/maintain/WaitingListTable.vue
@@ -16,13 +16,16 @@
 			color: '#606266',
 		}"
 		class="waiting-list-table">
-		<el-table-column type="selection" :width="50" />
+		<el-table-column
+			type="selection"
+			:width="50"
+			:selectable="checkSelectable" />
 		<el-table-column prop="_pageIndex" width="80" align="center">
 			<template slot="header">
 				<el-popover placement="bottom-start" width="300" trigger="click">
 					<div class="setting-box" style="max-height: 400px; overflow-y: auto">
 						<el-checkbox
-							v-for="(item, index) in tableProps"
+							v-for="(item, index) in tablePropsLabelList"
 							:key="'cb' + index"
 							v-model="selectedBox[index]"
 							:label="item.label" />
@@ -114,7 +117,8 @@
 					<el-button
 						type="text"
 						style="margin: 5px 0; padding: 0"
-						@click="handleConfirm(scope.row)">
+						:disabled="!checkSelectable(scope.row)"
+						@click="$emit('confirm', scope.row)">
 						确认
 					</el-button>
 				</el-tooltip>
@@ -124,7 +128,7 @@
 					<el-button
 						type="text"
 						style="margin: 5px 0; padding: 0"
-						@click="handelDetail(scope.row)">
+						@click="$emit('detail', scope.row)">
 						<i class="iconfont icon-detail primary-color" />
 					</el-button>
 				</el-tooltip>
@@ -134,7 +138,7 @@
 					<el-button
 						type="text"
 						style="margin: 5px 0; padding: 0"
-						@click="handleEdit(scope.row)">
+						@click="$emit('edit', scope.row)">
 						<i class="iconfont icon-edit primary-color" />
 					</el-button>
 				</el-tooltip>
@@ -144,7 +148,7 @@
 					<el-button
 						type="text"
 						style="margin: 5px 0; padding: 0"
-						@click="handleDelete(scope.row)">
+						@click="$emit('delete', scope.row)">
 						<i class="iconfont icon-delete delete-color" />
 					</el-button>
 				</el-tooltip>
@@ -161,13 +165,14 @@ export default {
 	components: {},
 	props: ['tableData', 'page', 'limit'],
 	filters: {
-		timeFilter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+		timeFilter: (val) =>
+			val ? moment(val).format('yyyy-MM-DD HH:mm:ss') : '---',
 		relatePlanFilter: (val) =>
 			val != null ? ['-', '计划型', '非计划型'][val] : '-',
 	},
 	data() {
 		return {
-			tableProps: [
+			tablePropsLabelList: [
 				{
 					label: '设备保养单号',
 				},
@@ -227,6 +232,13 @@ export default {
 		},
 	},
 	methods: {
+		checkSelectable(row, index) {
+			return (
+				row.relatePlan == 2 ||
+				(row.relatePlan == 1 &&
+					(!row.confirmDueTime || +row.confirmDueTime >= new Date().getTime()))
+			);
+		},
 		handleSelectionChange(val) {
 			this.selectedPlan = val;
 		},
diff --git a/src/views/specialEquipment/maintain/WaitingListUnplanned--edit.vue b/src/views/specialEquipment/maintain/WaitingListUnplanned--edit.vue
new file mode 100644
index 00000000..3588e1b3
--- /dev/null
+++ b/src/views/specialEquipment/maintain/WaitingListUnplanned--edit.vue
@@ -0,0 +1,571 @@
+<!-- 
+    filename: WaitingListUnplanned--edit.vue
+    author: liubin
+    date: 2023-08-22 14:38:56
+    description: 
+-->
+
+<template>
+	<el-drawer
+		:visible="visible"
+		:show-close="false"
+		:wrapper-closable="false"
+		class="drawer"
+		custom-class="mes-drawer"
+		size="60%"
+		@closed="$emit('destroy')">
+		<SmallTitle slot="title">
+			{{
+				mode.includes('detail')
+					? '详情'
+					: mode.includes('edit')
+					? '编辑'
+					: '新增'
+			}}
+		</SmallTitle>
+
+		<div class="drawer-body flex">
+			<div class="drawer-body__content">
+				<div class="form-part" style="margin-bottom: 32px">
+					<el-skeleton v-if="!showForm" animated />
+					<el-form
+						class="equipment-info-form"
+						ref="form"
+						:model="form"
+						label-width="200px"
+						label-position="top"
+						v-loading="formLoading">
+						<el-row :gutter="20">
+							<el-col :span="12">
+								<el-form-item
+									label="设备名称"
+									prop="name"
+									:rules="[
+										{
+											required: true,
+											message: '设备名称不能为空',
+											trigger: 'blur',
+										},
+									]">
+									<el-input
+										v-model="form.name"
+										:disabled="disabled"
+										placeholder="请输入设备名称"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="12">
+								<el-form-item label="设备编码" prop="code" :rules="[]">
+									<el-input
+										v-model="form.code"
+										:disabled="disabled"
+										placeholder="请输入设备编码"></el-input>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col :span="12">
+								<el-form-item label="所在区域" prop="location">
+									<el-input
+										v-model="form.location"
+										:disabled="disabled"
+										placeholder="请输入所在区域"></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :span="12">
+								<el-form-item label="负责人" prop="responsiblePeopleId">
+									<el-select
+										v-model="form.responsiblePeopleId"
+										:disabled="disabled"
+										placeholder="请输入负责人">
+										<el-option
+											v-for="rp in rpList"
+											:key="rp.id"
+											:label="rp.name"
+											:value="rp.id"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<el-col v-if="isFireEquipment" :span="12">
+								<el-form-item label="有效期至" prop="dueDate" :rules="[]">
+									<el-date-picker
+										v-model="form.dueDate"
+										:disabled="disabled"
+										type="datetime"
+										placeholder="请选择生产日期"
+										value-format="timestamp"></el-date-picker>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<el-row :gutter="20">
+							<!-- 上传资料  -->
+							<el-col>
+								<el-form-item label="上传图片" prop="assets" :rules="[]">
+									<AssetsUpload v-model="form.assets" :disabled="disabled" />
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+				</div>
+
+				<SmallTitle>保养内容</SmallTitle>
+
+				<div style="margin-top: 12px; position: relative">
+					<div
+						v-if="!mode.includes('detail')"
+						style="position: absolute; top: -40px; right: 0">
+						<el-button @click="handleAddAttr" type="text">
+							<i class="el-icon-plus"></i>
+							添加属性
+						</el-button>
+					</div>
+					<base-table
+						v-loading="attrListLoading"
+						:table-props="section.props"
+						:page="attrQuery?.params.pageNo || 1"
+						:limit="attrQuery?.params.pageSize || 10"
+						:table-data="list"
+						@emitFun="handleEmitFun">
+						<method-btn
+							v-if="section.tableBtn"
+							slot="handleBtn"
+							label="操作"
+							:method-list="tableBtn"
+							@clickBtn="handleTableBtnClick" />
+					</base-table>
+
+					<!-- 分页组件 -->
+					<pagination
+						v-show="total > 0"
+						:total="total"
+						:page.sync="attrQuery.params.pageNo"
+						:limit.sync="attrQuery.params.pageSize"
+						@pagination="getAttrList" />
+				</div>
+			</div>
+
+			<div class="drawer-body__footer">
+				<el-button style="" @click="handleCancel">取消</el-button>
+				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
+					编辑
+				</el-button>
+				<el-button v-else type="primary" @click="handleConfirm">保存</el-button>
+				<!-- sections的第二项必须是 属性列表  -->
+				<!-- <el-button
+						v-if="sections[1].allowAdd"
+						type="primary"
+						@click="handleAddAttr">
+						添加属性
+					</el-button> -->
+			</div>
+		</div>
+
+		<!-- 属性对话框 -->
+		<base-dialog
+			v-if="sections[1].allowAdd"
+			:dialogTitle="attrTitle"
+			:dialogVisible="attrFormVisible"
+			width="35%"
+			:append-to-body="true"
+			custom-class="baseDialog"
+			@close="closeAttrForm"
+			@cancel="closeAttrForm"
+			@confirm="submitAttrForm">
+			<DialogForm
+				v-if="attrFormVisible"
+				ref="attrForm"
+				:dataForm="attrForm"
+				:rows="attrRows" />
+		</base-dialog>
+	</el-drawer>
+</template>
+
+<script>
+import DialogForm from './DialogForm';
+import EquipmentInfoForm from './EquipmentInfoForm.vue';
+
+const SmallTitle = {
+	name: 'SmallTitle',
+	props: ['size'],
+	components: {},
+	data() {
+		return {};
+	},
+	methods: {},
+	render: function (h) {
+		return h(
+			'span',
+			{
+				class: 'small-title',
+				style: {
+					fontSize: '18px',
+					lineHeight:
+						this.size == 'lg' ? '24px' : this.size == 'sm' ? '18px' : '20px',
+					fontWeight: 500,
+					fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
+				},
+			},
+			this.$slots.default
+		);
+	},
+};
+
+export default {
+	components: { SmallTitle, DialogForm, EquipmentInfoForm },
+	props: ['sections', 'mode', 'dataId'], // dataId 作为一个通用的存放id的字段
+	data() {
+		return {
+			visible: false,
+			showForm: false,
+			btnLoading: false,
+			total: 0,
+			form: {},
+			list: [],
+			attrTitle: '',
+			attrForm: {
+				id: null,
+				equipmentId: null,
+				name: '',
+				value: '',
+			},
+			attrFormVisible: false,
+			attrRows: [
+				[
+					{
+						input: true,
+						label: '属性名称',
+						prop: 'name',
+						rules: [
+							{ required: true, message: '属性名称不能为空', trigger: 'blur' },
+						],
+					},
+				],
+				[
+					{
+						input: true,
+						label: '属性值',
+						prop: 'value',
+					},
+				],
+			],
+			attrQuery: {
+				params: {
+					pageNo: 1,
+					pageSize: 10,
+				},
+			}, // 属性列表的请求
+			infoQuery: null, // 基本信息的请求
+			attrFormSubmitting: false,
+			attrListLoading: false,
+			syncFileListFlag: null,
+		};
+	},
+	computed: {
+		formRows() {
+			return this.sections[0].rows.map((row) => {
+				return row.map((col) => {
+					if (col.key == 'eq-pics') {
+						// 重置图片的位置
+						return {
+							...col,
+							bind: {
+								...col.bind,
+							},
+							style: {
+								left: 0,
+								right: 'unset',
+							},
+						};
+					}
+					return {
+						...col,
+						bind: {
+							...col.bind,
+							// 详情 模式下，禁用各种输入
+							disabled: this.mode == 'detail',
+						},
+					};
+				});
+			});
+		},
+		tableBtn() {
+			return this.mode == 'detail' ? [] : this.sections[1].tableBtn;
+		},
+	},
+	mounted() {
+		for (const section of this.sections) {
+			// 请求具体信息
+			if ('url' in section) {
+				const query = {
+					url: section.url,
+					method: section.method || 'get',
+					params: section.queryParams || null,
+					data: section.data || null,
+				};
+				this.$axios(query).then(({ data }) => {
+					if (section.key == 'base') {
+						this.form = data;
+						this.showForm = true;
+						this.infoQuery = query;
+					} else if (section.key == 'attrs') {
+						this.attrQuery = query;
+						this.list = data.list;
+						this.total = data.total;
+					}
+				});
+			}
+		}
+	},
+	methods: {
+		handleTableBtnClick({ type, data }) {
+			switch (type) {
+				case 'edit':
+					this.handleEditAttr(data.id);
+					break;
+				case 'delete':
+					this.handleDeleteAttr(data.id);
+					break;
+			}
+		},
+		async handleConfirm() {
+			this.btnLoading = true;
+			this.syncFileListFlag = Math.random();
+
+			this.$nextTick(async () => {
+				const { code, data } = await this.$axios({
+					url: this.sections[0].urlUpdate,
+					method: 'put',
+					data: this.form,
+				});
+				if (code == 0) {
+					this.$modal.msgSuccess('更新成功');
+				}
+
+				this.btnLoading = false;
+				this.$emit('refreshDataList');
+				this.handleCancel();
+			});
+		},
+
+		handleEmitFun(val) {
+			console.log('handleEmitFun', val);
+		},
+
+		init() {
+			this.visible = true;
+		},
+
+		async getAttrList() {
+			this.attrListLoading = true;
+			const res = await this.$axios(this.attrQuery);
+			if (res.code == 0) {
+				this.list = res.data.list;
+				this.total = res.data.total;
+			}
+			this.attrListLoading = false;
+		},
+
+		// 保存表单
+		handleSave() {
+			this.$refs['form'][0].validate(async (valid) => {
+				if (valid) {
+					const isEdit = this.mode == 'edit';
+					await this.$axios({
+						url: this.sections[0][isEdit ? 'urlUpdate' : 'urlCreate'],
+						method: isEdit ? 'put' : 'post',
+						data: this.form,
+					});
+					this.$modal.msgSuccess(`${isEdit ? '更新' : '创建'}成功`);
+					this.visible = false;
+					this.$emit('refreshDataList');
+				}
+			});
+		},
+
+		handleCancel() {
+			this.visible = false;
+		},
+
+		// 开启编辑
+		toggleEdit() {
+			this.$emit('update-mode', 'edit');
+		},
+
+		// 新增属性
+		handleAddAttr() {
+			if (!this.dataId) return this.$message.error('请先创建设备信息');
+			this.attrForm = {
+				id: null,
+				equipmentId: this.dataId,
+				name: '',
+				value: '',
+			};
+			this.attrTitle = '添加设备属性';
+			this.attrFormVisible = true;
+		},
+
+		// 编辑属性
+		async handleEditAttr(attrId) {
+			const res = await this.$axios({
+				url: this.sections[1].urlDetail,
+				method: 'get',
+				params: { id: attrId },
+			});
+			if (res.code == 0) {
+				this.attrForm = res.data;
+				this.attrTitle = '编辑设备属性';
+				this.attrFormVisible = true;
+			}
+		},
+
+		// 删除属性
+		handleDeleteAttr(attrId) {
+			this.$confirm('确定删除该属性?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(async () => {
+					const res = await this.$axios({
+						url: this.sections[1].urlDelete,
+						method: 'delete',
+						params: { id: attrId },
+					});
+					if (res.code == 0) {
+						this.$message({
+							message: '删除成功',
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getAttrList();
+							},
+						});
+					}
+				})
+				.catch(() => {});
+		},
+
+		// 提交属性表
+		submitAttrForm() {
+			this.$refs['attrForm'].validate(async (valid) => {
+				if (!valid) {
+					return;
+				}
+
+				try {
+					const isEdit = this.attrForm.id != null;
+					this.attrFormSubmitting = true;
+					const res = await this.$axios({
+						url: isEdit
+							? this.sections[1].urlUpdate
+							: this.sections[1].urlCreate,
+						method: isEdit ? 'put' : 'post',
+						data: this.attrForm,
+					});
+
+					if (res.code == 0) {
+						this.closeAttrForm();
+						this.$message({
+							message: `${isEdit ? '更新' : '创建'}成功`,
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getAttrList();
+							},
+						});
+					}
+					this.attrFormSubmitting = false;
+				} catch (err) {
+					this.$message({
+						message: err,
+						type: 'error',
+						duration: 1500,
+					});
+					this.attrFormSubmitting = false;
+				}
+			});
+		},
+
+		closeAttrForm() {
+			this.attrFormVisible = false;
+		},
+
+		handleClick(raw) {
+			if (raw.type === 'delete') {
+				this.$confirm(
+					`确定对${
+						raw.data.name
+							? '[名称=' + raw.data.name + ']'
+							: '[序号=' + raw.data._pageIndex + ']'
+					}进行删除操作?`,
+					'提示',
+					{
+						confirmButtonText: '确定',
+						cancelButtonText: '取消',
+						type: 'warning',
+					}
+				)
+					.then(() => {
+						deleteProductAttr(raw.data.id).then(({ data }) => {
+							this.$message({
+								message: '操作成功',
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.getList();
+								},
+							});
+						});
+					})
+					.catch(() => {});
+			} else {
+				this.addNew(raw.data.id);
+			}
+		},
+	},
+};
+</script>
+
+<style scoped>
+.drawer >>> .el-drawer {
+	border-radius: 8px 0 0 8px;
+}
+
+.drawer >>> .el-drawer__header {
+	margin: 0;
+	padding: 32px 32px 24px;
+	border-bottom: 1px solid #dcdfe6;
+	margin-bottom: 0px;
+}
+
+.small-title::before {
+	content: '';
+	display: inline-block;
+	vertical-align: top;
+	width: 4px;
+	height: 22px;
+	border-radius: 1px;
+	margin-right: 8px;
+	background-color: #0b58ff;
+}
+
+.drawer-body {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.drawer-body__content {
+	flex: 1;
+	/* background: #eee; */
+	padding: 20px 30px;
+	overflow-y: auto;
+}
+
+.drawer-body__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 18px;
+}
+</style>