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

@@ -12,7 +12,8 @@
 		:wrapper-closable="false"
 		class="drawer"
 		custom-class="mes-drawer"
-		size="60%">
+		size="60%"
+		@closed="$emit('destroy')">
 		<SmallTitle slot="title">
 			{{
 				mode.includes('detail')
@@ -27,12 +28,17 @@
 			<div class="drawer-body__content">
 				<section v-for="(section, index) in sections" :key="section.key">
 					<SmallTitle v-if="index != 0">{{ section.name }}</SmallTitle>
+
+					<div class="form-part" v-if="section.key == 'base'">
+						<el-skeleton v-if="!showForm" animated />
 						<DialogForm
-						v-if="section.key == 'base'"
+							v-if="showForm"
 							ref="form"
 							:dataForm="form"
 							:rows="section.rows" />
-					<div v-if="section.key == 'attrs'">
+					</div>
+
+					<div v-if="section.key == 'attrs'" style="margin-top: 12px">
 						<base-table
 							:table-props="section.props"
 							:page="section.pageNo || 1"
@@ -51,16 +57,42 @@
 			</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 style="margin-right: 10px" @click="handleCancel">
+					返回
+				</el-button>
+				<el-button v-if="mode == 'detail'" type="primary" @click="toggleEdit">
 					编辑
 				</el-button>
 				<span v-else>
-					<el-button type="primary" @click="dataFormSubmit()">保存</el-button>
-					<el-button type="primary" @click="addNew()">添加属性</el-button>
+					<el-button type="primary" @click="handleSave">保存</el-button>
+					<!-- sections的第二项必须是 属性列表  -->
+					<el-button
+						v-if="sections[1].allowAdd"
+						type="primary"
+						@click="handleAddAttr">
+						添加属性
+					</el-button>
 				</span>
 			</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>
 
@@ -94,55 +126,123 @@ const SmallTitle = {
 
 export default {
 	components: { SmallTitle, DialogForm },
-	props: ['sections', 'mode', 'dataForm'],
+	props: ['sections', 'mode'],
 	data() {
 		return {
 			visible: false,
+			showForm: false,
 			total: 0,
 			form: {},
-            list: []
+			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',
+					},
+				],
+			],
 		};
 	},
+	mounted() {
+		for (const section of this.sections) {
+			// 请求具体信息
+			if ('url' in section) {
+				this.$axios({
+					url: section.url,
+					method: section.method || 'get',
+					params: section.queryParams || null,
+					data: section.data || null,
+				}).then(({ data }) => {
+					if (section.key == 'base') {
+						this.form = data;
+						this.showForm = true;
+						console.log('setting form: ', this.form, data);
+					} else if (section.key == 'attrs') {
+						this.list = data.list;
+						this.total = data.total;
+					}
+				});
+			}
+		}
+	},
 	methods: {
 		handleTableBtnClick() {},
 
 		handleEmitFun() {},
 
-		init(id) {
+		init() {
 			this.visible = true;
+		},
 
-			return;
-
-			this.$nextTick(() => {
-				this.$refs['dataForm'].resetFields();
-
-				if (this.dataForm.id) {
-					// 获取产品详情
-					getProduct(id).then((response) => {
-						this.dataForm = response.data;
-					});
-					// 获取产品的属性列表
-					this.getList();
-				} else {
-					getCode().then((res) => {
-						this.dataForm.code = res.data;
+		// 保存表单
+		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');
 				}
 			});
 		},
 
-		getList() {
-			// 获取产品的属性列表
-			const params = {
-				pageSize: 10,
-				pageNo: 1,
-				productId: this.dataForm.id,
+		handleCancel() {
+			this.visible = false;
+		},
+
+		// 开启编辑
+		toggleEdit() {
+			this.mode = 'edit';
+		},
+
+		// 开启属性编辑/新增
+		handleAddAttr() {
+			this.attrForm = {
+				id: null,
+				equipmentId: null,
+				name: '',
+				value: '',
 			};
-			getProductAttrPage(params).then((response) => {
-				this.productAttributeList = response.data.list;
-				this.listQuery.total = response.data.total;
+			this.attrTitle = '添加设备属性';
+			this.attrFormVisible = true;
+		},
+
+		// 提交属性表
+		submitAttrForm() {
+			this.$refs['form'].validate((valid) => {
+				if (!valid) {
+					return;
+				}
 			});
 		},
+
+		closeAttrForm() {
+			this.attrFormVisible = false;
+		},
+
 		handleClick(raw) {
 			if (raw.type === 'delete') {
 				this.$confirm(
@@ -175,31 +275,7 @@ export default {
 				this.addNew(raw.data.id);
 			}
 		},
-		// 表单提交
-		dataFormSubmit() {
-			this.$refs['dataForm'].validate((valid) => {
-				if (valid) {
-					// 修改的提交
-					if (this.dataForm.id) {
-						updateProduct(this.dataForm).then((response) => {
-							this.$modal.msgSuccess('修改成功');
-							this.visible = false;
-							this.$emit('refreshDataList');
-						});
-						return;
-					}
-					// 添加的提交
-					createProduct(this.dataForm).then((response) => {
-						this.$modal.msgSuccess('新增成功');
-						this.visible = false;
-						this.$emit('refreshDataList');
-					});
-				}
-			});
-		},
-		goEdit() {
-			this.isdetail = false;
-		},
+
 		// 新增 / 修改
 		addNew(id) {
 			this.addOrUpdateVisible = true;
@@ -207,11 +283,6 @@ export default {
 				this.$refs.addOrUpdate.init(id);
 			});
 		},
-		goback() {
-			this.$emit('refreshDataList');
-			this.visible = false;
-			this.initData();
-		},
 	},
 };
 </script>
@@ -221,10 +292,6 @@ export default {
 	border-radius: 8px 0 0 8px;
 }
 
-.drawer >>> .el-form-item__label {
-	padding: 0;
-}
-
 .drawer >>> .el-drawer__header {
 	margin: 0;
 	padding: 32px 32px 24px;
@@ -232,10 +299,6 @@ export default {
 	margin-bottom: 0px;
 }
 
-.small-title {
-	color: #000;
-}
-
 .small-title::before {
 	content: '';
 	display: inline-block;
@@ -255,7 +318,7 @@ export default {
 
 .drawer-body__content {
 	flex: 1;
-	background: #eee;
+	/* background: #eee; */
 	padding: 20px 30px;
 	overflow-y: auto;
 }

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

@@ -45,26 +45,35 @@
 			ref="drawer"
 			:mode="editMode"
 			:sections="[
-				{ name: '基本信息', key: 'base', rows: rows, dataForm: form },
+				{
+					name: '基本信息',
+					key: 'base',
+					rows: rows,
+					url: '/base/equipment/get',
+					urlUpdate: '/base/equipment/update',
+					urlCreate: '/base/equipment/create',
+					queryParams: { id: form.id },
+				},
 				{
 					name: '属性列表',
 					key: 'attrs',
 					props: drawerListProps,
-					url: '',
-					navigator: true, // 是否显示分页器
-					pageNo: null,
-					pageSize: null,
+					url: '/base/equipment-attr/page',
+					queryParams: {
+						equipmentId: form.id,
+						pageNo: 1,
+						pageSize: 10,
+					},
 					tableBtns: [
 						{ name: 'edit', url: '', permission: '' },
 						{ name: 'delete', url: '', permission: '' },
 					],
+					allowAdd: true,
 				},
 			]"
-			@confirm="submitForm"
+			@refreshDataList="getList"
 			@cancel="editVisible = false"
-			@destroy="editVisible = false">
-			<h1>Ceshi ceshi ceshi</h1>
-		</EquipmentDrawer>
+			@destroy="editVisible = false" />
 	</div>
 </template>
 
@@ -363,7 +372,9 @@ export default {
 				name: '',
 			},
 			// 表单参数
-			form: {},
+			form: {
+				id: null,
+			},
 		};
 	},
 	created() {
@@ -489,18 +500,24 @@ export default {
 		},
 		// 重写 basicPageMixin 里的 处理表格按钮 方法
 		handleTableBtnClick({ data, type }) {
+			console.log('[handleTableBtnClick]', data, type);
 			switch (type) {
 				case 'edit':
-					this.editMode = 'edit';
 					this.reset();
-					const id = data.id;
-					getEquipment(id).then((response) => {
-						this.form = response.data;
+					this.editMode = 'edit';
+					this.form.id = data.id;
 					this.editVisible = true;
 					this.$nextTick(() => {
 						this.$refs['drawer'].init();
 					});
-					});
+
+					// getEquipment(id).then((response) => {
+					// 	this.form = response.data;
+					// 	this.editVisible = true;
+					// 	this.$nextTick(() => {
+					// 		this.$refs['drawer'].init();
+					// 	});
+					// });
 					break;
 				case 'delete':
 					this.handleDelete(data);