From 535cb490b1ba512e87ecc007bd771a7856b90f3c Mon Sep 17 00:00:00 2001
From: g7hoo <liubin_9396@163.com>
Date: Thu, 11 Aug 2022 11:00:43 +0800
Subject: [PATCH] update subform

---
 src/components/base-dialog/AttrForm/index.vue | 247 ++++++++++++++++++
 .../base-dialog/addOrUpdate/index.vue         |  43 +--
 src/views/modules/monitoring/product.vue      |   4 +-
 3 files changed, 252 insertions(+), 42 deletions(-)
 create mode 100644 src/components/base-dialog/AttrForm/index.vue

diff --git a/src/components/base-dialog/AttrForm/index.vue b/src/components/base-dialog/AttrForm/index.vue
new file mode 100644
index 0000000..ab4ef86
--- /dev/null
+++ b/src/components/base-dialog/AttrForm/index.vue
@@ -0,0 +1,247 @@
+<template>
+	<div class="attr-form">
+		<h3>{{ title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
+		<div v-if="!showAddAttr">
+			<component
+				key="sub-table"
+				:is="require('../../base-table/index.vue').default"
+				:table-head-configs="tableConfigs"
+				:data="dataList"
+				:max-height="500"
+				@operate-event="handleOperations"
+			/>
+			<el-pagination
+				@size-change="sizeChangeHandle"
+				@current-change="currentChangeHandle"
+				:current-page="pageIndex"
+				:page-sizes="[5, 10, 20, 50]"
+				:page-size="pageSize"
+				:total="totalPage"
+				layout="total, sizes, prev, pager, next, jumper"
+			>
+			</el-pagination>
+		</div>
+		<div v-else style="background: #eee; border-radius: 8px; padding: 12px;">
+			<el-row>
+				<el-col :span="10" :offset="7">
+					<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules" :inline="true">
+						<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
+							<el-input v-model="AttrForm[field.prop]" clearable />
+							<!-- add more...  -->
+						</el-form-item>
+					</el-form>
+				</el-col>
+			</el-row>
+			<el-row style="text-align: center;">
+				<el-button size="small" @click="handleCloseAttrForm">取消</el-button>
+				<el-button type="success" size="small" @click="handleSaveAttrForm">保存</el-button>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script>
+import BaseTable from '@/components/base-table'
+import { pick } from 'lodash/object'
+
+export default {
+	name: 'AttrForm',
+	components: { BaseTable },
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		/** subtable 需要设置的属性 */
+		title: {
+			type: String,
+			default: ''
+		},
+		url: {
+			type: String,
+			default: ''
+		},
+		tableConfigs: {
+			type: Array,
+			default: () => []
+		},
+		/** 表单提交需要的属性 */
+		pId: {
+			type: String,
+			default: null
+		}
+	},
+	data() {
+		return {
+			showAddAttr: false,
+			dataList: [],
+			pageIndex: 1,
+			pageSize: 10,
+			totalPage: 0,
+			AttrForm: {}, // 需动态设置
+			AttrFormRules: {} // 需动态设置
+		}
+	},
+	computed: {
+		attrFormFields() {
+			const _ = this.tableConfigs.filter(item => item.formField)
+			/** 顺带配置 AttrForm */
+			_.forEach(item => {
+				this.$set(this.AttrForm, [item.prop], '')
+			})
+
+			this.$set(this.AttrForm, 'id', null)
+			return _
+		}
+	},
+	mounted() {
+		this.getDataList()
+    /** 设置 AttrForm 的 rules */
+    for(const config of this.tableConfigs) {
+      if (config.rules) {
+        this.$set(this.AttrFormRules, [config.prop], config.rules)
+      }
+    }
+	},
+	methods: {
+		/** init dataform */
+		initAttrForm() {
+			Object.entries(this.AttrForm).forEach(([key, value]) => {
+				if (typeof value === 'object' || typeof value === 'number') {
+					this.AttrForm[key] = null
+				} else if (Array.isArray(value)) {
+					this.AttrForm[key] = []
+				} else {
+					this.AttrForm[key] = ''
+				}
+			})
+		},
+
+		/** requests */
+		getDataList() {
+			this.dataListLoading = true
+			// 获取动态属性列表
+			this.$http({
+				url: this.$http.adornUrl(`${this.url}/page`),
+				method: 'get',
+				params: this.$http.adornParams({
+					page: this.pageIndex,
+					limit: this.pageSize,
+					productId: this.pId
+					// order: 'asc/desc',
+					// orderField: 'name'
+				})
+			}).then(({ data: res }) => {
+				if (res && res.code === 0) {
+					this.dataList = res.data.list
+					this.totalPage = res.data.total
+				} else {
+					this.dataList = []
+					this.totalPage = 0
+				}
+				this.dataListLoading = false
+			})
+		},
+
+		/** handlers */
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'edit':
+					{
+						this.showAddAttr = true
+						this.$nextTick(() => {
+							this.$http.get(this.$http.adornUrl(`${this.url}/${id}`)).then(({ data: res }) => {
+								if (res && res.code === 0 && res.data) {
+									const neededFields = [...this.attrFormFields.map(item => item.prop), 'id']
+									const filtered = pick(res.data, neededFields)
+									for (let field of neededFields) {
+										this.AttrForm[field] = filtered[field]
+									}
+								}
+							})
+						})
+					}
+					break
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		deleteHandle(id) {
+			var ids = id ? [id] : []
+
+			this.$confirm(`确定对id=${ids.join(',')}进行${id ? '删除' : '批量删除'}操作?`, '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				this.$http({
+					url: this.$http.adornUrl(this.url),
+					method: 'delete',
+					data: this.$http.adornData(ids, false, 'raw')
+				}).then(({ data }) => {
+					if (data && data.code === 0) {
+						this.$message({
+							message: '操作成功',
+							type: 'success',
+							duration: 1500,
+							onClose: () => {
+								this.getDataList()
+							}
+						})
+					} else {
+						this.$message.error(data.msg)
+					}
+				})
+			})
+		},
+
+		handleCloseAttrForm() {
+			this.showAddAttr = false
+			this.initAttrForm()
+		},
+
+		handleSaveAttrForm() {
+			this.$refs['AttrForm'].validate(valid => {
+				if (valid) {
+					this.$http({
+						// url: this.$http.adornUrl(`${this.url}/${!this.AttrForm.id ? '' : this.AttrForm.id}`),
+						url: this.$http.adornUrl(this.url),
+						method: this.AttrForm.id ? 'put' : 'post',
+						headers: {
+							'Content-Type': 'application/json'
+						},
+						data: JSON.stringify({ ...this.AttrForm, productId: this.pId })
+					}).then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: '操作成功',
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.showAddAttr = false
+									this.getDataList()
+									this.initAttrForm()
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
+				}
+			})
+		},
+
+		// 每页数
+		sizeChangeHandle(val) {
+			this.pageSize = val
+			this.pageIndex = 1
+			this.getDataList()
+		},
+		// 当前页
+		currentChangeHandle(val) {
+			this.pageIndex = val
+			this.getDataList()
+		}
+	}
+}
+</script>
diff --git a/src/components/base-dialog/addOrUpdate/index.vue b/src/components/base-dialog/addOrUpdate/index.vue
index 7d36a13..3f94ccd 100644
--- a/src/components/base-dialog/addOrUpdate/index.vue
+++ b/src/components/base-dialog/addOrUpdate/index.vue
@@ -45,33 +45,7 @@
 			</el-form>
 
 			<template v-if="dataForm.id && configs.subtable">
-				<h3>{{ configs.subtable.title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
-				<component
-					v-if="!showAddAttr"
-					key="sub-table"
-					:is="require('../../base-table/index.vue').default"
-					:table-head-configs="configs.subtable.tableConfigs"
-					:data="subtableDataList"
-					:max-height="500"
-					@operate-event="handleOperations"
-					@refreshDataList="getDataList"
-				/>
-				<div v-else style="background: #eee; border-radius: 8px; height: 200px;">
-					<el-row>
-						<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules">
-							<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
-								<!-- 子窗口只给input吧，太麻烦了，有特殊需求就不用这个组件了 -->
-								<el-input v-model="AttrForm[field.prop]" clearable />
-								<!-- TODO: mounted里初始化AttrForm，configs里设置AttrFormRules，mounted里设置attrFormFields -->
-								<!-- TODO: 单独用一个组件来展示动态属性这一部分 -->
-							</el-form-item>
-						</el-form>
-					</el-row>
-					<el-row>
-						<el-button size="small" @click="showAddAttr = false">取消</el-button>
-						<el-button type="primary" size="small" @click="handleSaveAttrForm">保存</el-button>
-					</el-row>
-				</div>
+				<attr-form :pId="dataForm.id" v-bind="configs.subtable" />
 			</template>
 		</div>
 		<span slot="footer" class="dialog-footer">
@@ -93,6 +67,7 @@
 </template>
 
 <script>
+import AttrForm from '../AttrForm'
 import { pick } from 'lodash/object'
 
 // 标题 for i18n
@@ -125,7 +100,7 @@ const COLUMN_PER_ROW = 2
 
 export default {
 	name: 'AddOrUpdateDialog',
-	components: {},
+	components: { AttrForm },
 	props: {
 		configs: {
 			/**
@@ -170,18 +145,12 @@ export default {
 			},
 			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
 			/** 表单相关属性 */
-
 			visible: false,
 			isEdit: false,
 			isDetail: false,
 			isUpdated: false,
 			dataForm: {},
 			dataFormRules: {},
-			/** 子列表相关属性 */
-			subtableDataList: [],
-			showAddAttr: false,
-			AttrForm: {},
-			AttrFormRules: {}
 		}
 	},
 	computed: {
@@ -369,12 +338,6 @@ export default {
 			}
 		},
 
-		handleOperations() {},
-
-		getDataList() {},
-
-		handleSaveAttrForm() {},
-
 		handleClose() {
 			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
 			this.visible = false
diff --git a/src/views/modules/monitoring/product.vue b/src/views/modules/monitoring/product.vue
index 7e4eb00..ddcdd51 100644
--- a/src/views/modules/monitoring/product.vue
+++ b/src/views/modules/monitoring/product.vue
@@ -157,11 +157,11 @@ const addOrUpdateConfigs = {
 	subtable: {
 		// for i18n
 		title: '动态属性',
-		url: '/monitoring/productArrt/page',
+		url: '/monitoring/productArrt',
 		tableConfigs: [
 			{ type: 'index', name: '序号' },
 			{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
-			{ prop: 'name', name: '属性名', formField: true },
+			{ prop: 'name', name: '属性名', formField: true, rules: [{ required: true, message: '必填', trigger: 'blur' }] },
 			{ prop: 'code', name: '属性值', formField: true },
 			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 		]