src/components/base-dialog/addOrUpdate/index.vue

@@ -45,8 +45,9 @@
 			</el-form>
 
 			<template v-if="dataForm.id && configs.subtable">
-				<h3>{{ configs.subtable.title }}</h3>
+				<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"
@@ -54,14 +55,26 @@
 					:max-height="500"
 					@operate-event="handleOperations"
 					@refreshDataList="getDataList"
-				></component>
+				/>
+				<div v-else style="background: #eee; border-radius: 8px; height: 200px;">
+					<el-row>
+						<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules"></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>
 			</template>
 		</div>
 		<span slot="footer" class="dialog-footer">
 			<template v-for="(operate, index) in configs.operations">
 				<!-- {{ operate.name | btnNameFilter }} -->
 				<el-button
-					v-if="(operate.showAlways || ((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))"
+					v-if="
+						operate.showAlways ||
+							(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))
+					"
 					:key="`operate-${index}`"
 					:type="btnType[operate.name]"
 					@click="handleClick(operate)"
@@ -137,16 +150,9 @@ export default {
 		return {
 			COLUMN_PER_ROW,
 			title,
+			/** 按钮相关属性 */
 			btnName,
 			btnType,
-			visible: false,
-			isEdit: false,
-			isDetail: false,
-			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
-			isUpdated: false,
-			dataForm: {},
-			subtableDataList: [],
-			dataFormRules: {},
 			defaultNames: {
 				name: '名称',
 				code: '编码',
@@ -154,7 +160,19 @@ export default {
 				specifications: '规格'
 				// add more...
 			},
-			defaultPlaceholders: {} // 自动根据 defaultNames 计算得来
+			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
+			/** 表单相关属性 */	
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			isUpdated: false,
+			dataForm: {},
+			dataFormRules: {},
+			/** 子列表相关属性 */
+			subtableDataList: [],
+			showAddAttr: false,
+			AttrForm: {},
+			AttrFormRules: {}
 		}
 	},
 	computed: {
@@ -164,8 +182,6 @@ export default {
 		}
 	},
 	mounted() {
-		/** 视情况动态加载table组件 */
-
 		/** 计算 defaultPlaceholders */
 		const prefix = '请输入'
 		Object.entries(this.defaultNames).map(([key, value]) => {
@@ -295,20 +311,13 @@ export default {
 			this.$nextTick(() => {
 				this.$refs['dataForm'].resetFields()
 				this.dataForm.id = id || null
-				console.log('dataform ===> ', this.dataForm)
-
 				if (this.dataForm.id) {
-					console.log('here...')
 					this.$http({
 						url: this.$http.adornUrl(`${this.configs.infoUrl}/${this.dataForm.id}`),
 						method: 'get'
 					}).then(({ data: res }) => {
 						if (res && res.code === 0) {
 							const dataFormKeys = Object.keys(this.dataForm)
-							console.log('keys: ', dataFormKeys)
-							console.log('resdata: ', res.data)
-							console.log('pick: ', pick)
-							console.log('after pick data: ', pick(res.data, dataFormKeys))
 							this.dataForm = pick(res.data, dataFormKeys)
 						}
 					})
@@ -360,7 +369,7 @@ export default {
 						}
 					}
 					break
-				case 'cancel': 
+				case 'cancel':
 					this.visible = false
 				// add more..
 			}
@@ -370,6 +379,8 @@ export default {
 
 		getDataList() {},
 
+		handleSaveAttrForm() {},
+
 		handleClose() {
 			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
 			this.visible = false

src/views/modules/monitoring/product.vue

@@ -156,13 +156,14 @@ const addOrUpdateConfigs = {
 	],
 	subtable: {
 		// for i18n
-		title: '动态添加属性',
+		title: '动态属性',
-		url: '',
+		url: '/monitoring/productArrt/page',
 		tableConfigs: [
 			{ type: 'index', name: '序号' },
 			{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
 			{ prop: 'name', name: '属性名' },
-			{ prop: 'code', name: '属性值' }
+			{ prop: 'code', name: '属性值' },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 		]
 	}
 	// extraComponents: [