update

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

@@ -1,11 +1,48 @@
 <template>
 	<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
-		<el-form>
+		<el-form :model="dataForm" :rules="dataFormRules">
 			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+			<el-row v-for="n in rows" :key="n" :gutter="20">
+				<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
+					<!-- <el-form-item
+						v-for="field in configs.fields"
+						:key="field.name || field"
+						:prop="field.name || field"
+						:label="field.label || field.name | nameFilter || field | nameFilter"
+					> -->
+					<!-- <el-form-item
+						:prop="
+							typeof configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] === 'string'
+								? configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+								: configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].type
+						"
+						:key="`${n}-col-${c}-item`"
+						:label="
+							`
+							${configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].label ||
+								(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name && defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]) ||
+								defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]}
+						`
+						"
+					> -->
+					<el-form-item :prop="`${n}-test-${c}`" :key="`${n}-col-${c}-item`" :label="'f'">
+						{{ n - c - JSON.stringify(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]) }}
+						<!-- 暂时先不实现部分输入方式 -->
+						<!-- <el-input></el-input>
+						<el-radio></el-radio>
+						<el-checkbox></el-checkbox>
+						<el-select></el-select>
+						<el-switch></el-switch>
+						<el-cascader></el-cascader>
+						<el-time-select></el-time-select>
+						<el-date-picker></el-date-picker> -->
+					</el-form-item>
+				</el-col>
+			</el-row>
 
 			<!-- extra components , like Markdown or RichEdit -->
-			<template v-if="extraComponents.length > 0">
-				<el-form-item v-for="ec in extraComponents" :key="ec.name" :label="ec.label">
+			<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+				<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
 					<component :is="ec.component" v-model="dataForm[ec.name]"></component>
 				</el-form-item>
 			</template>
@@ -61,8 +98,24 @@ export default {
 			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
 		}
 	},
+	filters: {
+		nameFilter: function(name) {
+			if (!name) return null
+			// for i18n
+			const defaultNames = {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				specifications: '规格'
+				// add more...
+			}
+
+			return defaultNames[name]
+		}
+	},
 	data() {
 		return {
+			COLUMN_PER_ROW,
 			title,
 			btnName,
 			btnType,
@@ -71,8 +124,15 @@ export default {
 			isDetail: false,
 			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
 			isUpdated: false,
-			dataForm: null,
-			dataFormRules: {}
+			dataForm: {},
+			dataFormRules: {},
+			defaultNames: {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				specifications: '规格'
+				// add more...
+			}
 		}
 	},
 	computed: {
@@ -88,9 +148,9 @@ export default {
 				if (typeof item === 'string') {
 					this.$set(this.dataForm, [item], '')
 				} else if (typeof item === 'object') {
+					this.$set(this.dataForm, [item.name], '')
 					if (item.api) {
 						/** 自动请求并填充 */
-						this.$set(this.dataForm, [item.name], '')
 						this.$http({
 							url: this.$http.adornUrl(item.api),
 							methods: 'get'
@@ -137,9 +197,13 @@ export default {
 			})
 
 			/** 检查是否需要额外的组件 */
-			this.configs.extraComponents.forEach(item => {
-				this.$set(this.dataForm, [item.name], '')
-			})
+			this.configs.extraComponents &&
+				this.configs.extraComponents.forEach(item => {
+					this.$set(this.dataForm, [item.name], '')
+				})
+
+			/** 单独设置 id */
+			this.$set(this.dataForm, 'id', null)
 
 			// TODO：delete next lines
 			console.log('dataform: ', this.dataForm)