src/views/core/base/equipment/components/EquipmentDrawer.vue

@@ -7,80 +7,71 @@
 
 <template>
 	<el-drawer
-		:visible.sync="visible"
+		:visible="visible"
 		:show-close="false"
 		:wrapper-closable="false"
 		class="drawer"
+		custom-class="mes-drawer"
 		size="60%">
 		<SmallTitle slot="title">
-			{{ isdetail ? '详情' : !dataForm.id ? '新增' : '编辑' }}
+			{{
+				mode.includes('detail')
+					? '详情'
+					: mode.includes('edit')
+					? '编辑'
+					: '新增'
+			}}
 		</SmallTitle>
 
-		<div class="content">
-			<div class="visual-part">
-				<SmallTitle
-					style="margin: 16px 0; padding-left: 8px"
-					:no-padding="true">
-					产品属性列表
-				</SmallTitle>
+		<div class="drawer-body flex">
+			<div class="drawer-body__content">
+				<section v-for="(section, index) in sections" :key="section.key">
+					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
+					<DialogForm
+						v-if="section.key == 'base'"
+						ref="form"
+						:dataForm="form"
+						:rows="section.rows" />
+					<div v-if="section.key == 'attrs'">
+						<base-table
+							:table-props="section.props"
+							:page="section.pageNo || 1"
+							:limit="section.pageSize || 10"
+							:table-data="list"
+							@emitFun="handleEmitFun">
+							<method-btn
+								v-if="section.tableBtn"
+								slot="handleBtn"
+								label="操作"
+								:method-list="section.tableBtn"
+								@clickBtn="handleTableBtnClick" />
+						</base-table>
+					</div>
+				</section>
+			</div>
 
-				<!-- <div class="attr-list">
-					<base-table
-						:table-props="tableProps"
-						:page="listQuery.pageNo"
-						:limit="listQuery.pageSize"
-						:table-data="productAttributeList">
-						<method-btn
-							v-if="!isdetail"
-							slot="handleBtn"
-							:width="120"
-							label="操作"
-							:method-list="tableBtn"
-							@clickBtn="handleClick" />
-					</base-table>
-					<pagination
-						v-show="listQuery.total > 0"
-						:total="listQuery.total"
-						:page.sync="listQuery.current"
-						:limit.sync="listQuery.size"
-						:page-sizes="[5, 10, 15]"
-						@pagination="getList" />
-				</div> -->
+			<div class="drawer-body__footer">
+				<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
+				<el-button v-if="mode == 'detail'" type="primary" @click="goEdit()">
+					编辑
+				</el-button>
+				<span v-else>
+					<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
+					<el-button type="primary" @click="addNew()">添加属性</el-button>
+				</span>
 			</div>
 		</div>
-
-		<div style="position: absolute; bottom: 24px; right: 24px">
-			<el-button style="margin-right: 10px" @click="goback()">返回</el-button>
-			<el-button v-if="isdetail" type="primary" @click="goEdit()">
-				编辑
-			</el-button>
-			<span v-if="!isdetail">
-				<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
-				<el-button
-					v-if="dataForm.id && !isdetail"
-					type="primary"
-					@click="addNew()">
-					添加属性
-				</el-button>
-			</span>
-		</div>
-
-		<!-- <product-attr-add
-			v-if="addOrUpdateVisible"
-			ref="addOrUpdate"
-			:product-id="dataForm.id"
-			@refreshDataList="getList" /> -->
 	</el-drawer>
 </template>
 
 <script>
+import DialogForm from '@/components/DialogForm';
+
 const SmallTitle = {
 	name: 'SmallTitle',
 	props: ['size'],
 	data() {
-		return {
-			title: 'Default title',
-		};
+		return {};
 	},
 	methods: {},
 	render: function (h) {
@@ -96,96 +87,32 @@ const SmallTitle = {
 					fontFamily: '微软雅黑, Microsoft YaHei, Arial, Helvetica, sans-serif',
 				},
 			},
-			this.title
+			this.$slots.default
 		);
 	},
 };
 
 export default {
-	components: { SmallTitle },
+	components: { SmallTitle, DialogForm },
+	props: ['sections', 'mode', 'dataForm'],
 	data() {
 		return {
 			visible: false,
-			addOrUpdateVisible: false,
-			productAttributeList: [],
-			dataForm: {
-				id: null,
-				name: '', // 产品名称
-				code: '', // 产品编码
-				area: 0, // 单位平方数(float only)
-				typeDictValue: null, // 产品类型id
-				processTime: null, // 单位产品用时 (s)
-				specifications: '', // 规格
-				unitDictValue: '', // 单位id
-			},
-			listQuery: {
-				pageSize: 10,
-				pageNo: 1,
-				total: 0,
-			},
-			dataRule: {
-				code: [
-					{
-						required: true,
-						message: '产品编码不能为空',
-						trigger: 'blur',
-					},
-					// {
-					// 	type: 'number',
-					// 	message: '产品编码为数字类型',
-					// 	trigger: 'blur',
-					// 	transfom: 'val => Number(val)',
-					// },
-				],
-				name: [
-					{
-						required: true,
-						message: '产品名称不能为空',
-						trigger: 'blur',
-					},
-				],
-				typeDictValue: [
-					{
-						required: true,
-						message: '产品类型不能为空',
-						trigger: 'blur',
-					},
-				],
-				area: [
-					// {
-					// 	type: 'float',
-					// 	message: '单位平方数为浮点类型',
-					// 	trigger: 'blur',
-					// 	transfom: 'val => Float(val)',
-					// },
-				],
-				processTime: [
-					{
-						required: true,
-						message: '完成单位产品用时不能为空',
-						trigger: 'blur',
-					},
-					// {
-					// 	type: 'number',
-					// 	message: '完成单位产品用时为浮点类型',
-					// 	trigger: 'blur',
-					// 	transfom: 'val => Number(val)',
-					// },
-				],
-			},
-			isdetail: false,
+			total: 0,
+			form: {},
+            list: []
 		};
 	},
 	methods: {
-		initData() {
-			this.productAttributeList.splice(0);
-		},
-		init(id, isdetail) {
-			this.initData();
-			this.isdetail = isdetail || false;
-			this.dataForm.id = id || null;
+        handleTableBtnClick() {},
+
+        handleEmitFun(){},
+
+		init(id) {
 			this.visible = true;
 
+			return;
+
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields();
 
@@ -302,30 +229,40 @@ export default {
 	margin: 0;
 	padding: 32px 32px 24px;
 	border-bottom: 1px solid #dcdfe6;
-	margin-bottom: 30px;
+	margin-bottom: 0px;
 }
 
-.drawer >>> .content {
-	padding: 0 24px 30px;
+.small-title {
+	color: #000;
+}
+
+.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 >>> .visual-part {
-	flex: 1 auto;
-	max-height: 76vh;
-	overflow: hidden;
-	overflow-y: scroll;
-	padding-right: 10px; /* 调整滚动条样式 */
+.drawer-body__content {
+	flex: 1;
+	background: #eee;
+	padding: 20px 30px;
+	overflow-y: auto;
 }
 
-.drawer >>> .el-form,
-.drawer >>> .attr-list {
-	padding: 0 16px;
-}
-
-.small-title {
-	color: red;
+.drawer-body__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 18px;
 }
 </style>

src/views/core/base/equipment/index.vue

@@ -42,7 +42,24 @@
 		<!-- 设备 详情 - 编辑 -->
 		<EquipmentDrawer
 			v-if="editVisible"
+			ref="drawer"
 			:mode="editMode"
+			:sections="[
+				{ name: '基本信息', key: 'base', rows: rows, dataForm: form },
+				{
+					name: '属性列表',
+					key: 'attrs',
+					props: drawerListProps,
+					url: '',
+					navigator: true, // 是否显示分页器
+					pageNo: null,
+					pageSize: null,
+					tableBtns: [
+						{ name: 'edit', url: '', permission: '' },
+						{ name: 'delete', url: '', permission: '' },
+					],
+				},
+			]"
 			@confirm="submitForm"
 			@cancel="editVisible = false"
 			@destroy="editVisible = false">
@@ -322,10 +339,22 @@ export default {
 					},
 				],
 			],
-			// 是否显示弹出层
-			open: false,
 			editVisible: false,
 			editMode: 'edit', // 'edit', 'detail'
+			// drawer 里的设备属性列表配置项
+			drawerListProps: [
+				{
+					prop: 'createTime',
+					label: '添加时间',
+					fixed: true,
+					width: 180,
+					filter: (val) => moment(val).format('yyyy-MM-DD HH:mm:ss'),
+				},
+				{ prop: 'keyName', label: '属性名称', align: 'center' },
+				{ prop: 'keyValue', label: '属性值', align: 'center' },
+			],
+			// 是否显示弹出层
+			open: false,
 			// 查询参数
 			queryParams: {
 				pageNo: 1,
@@ -468,6 +497,9 @@ export default {
 					getEquipment(id).then((response) => {
 						this.form = response.data;
 						this.editVisible = true;
+						this.$nextTick(() => {
+							this.$refs['drawer'].init();
+						});
 					});
 					break;
 				case 'delete':