update subform

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