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

@@ -2,6 +2,13 @@
 	<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
 		<el-form>
 			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+
+			<!-- 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">
+					<component :is="ec.component" v-model="dataForm[ec.name]"></component>
+				</el-form-item>
+			</template>
 		</el-form>
 
 		<span slot="footer" class="dialog-footer">
@@ -63,7 +70,9 @@ export default {
 			isEdit: false,
 			isDetail: false,
 			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
-			isUpdated: false
+			isUpdated: false,
+			dataForm: null,
+			dataFormRules: {}
 		}
 	},
 	computed: {
@@ -72,6 +81,71 @@ export default {
 			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
 		}
 	},
+	mounted() {
+		this.$nextTick(() => {
+			/** 动态设置dataForm字段 */
+			this.configs.fields.forEach(item => {
+				if (typeof item === 'string') {
+					this.$set(this.dataForm, [item], '')
+				} else if (typeof item === 'object') {
+					if (item.api) {
+						/** 自动请求并填充 */
+						this.$set(this.dataForm, [item.name], '')
+						this.$http({
+							url: this.$http.adornUrl(item.api),
+							methods: 'get'
+						}).then(({ data: res }) => {
+							if (data & (data.code === 0)) {
+								this.dataFrom[item.name] = res.data // <=== 此处需要对接口
+							}
+						})
+					} // end if (item.api)
+
+					if (item.required) {
+						const requiredRule = {
+							required: true,
+							message: '请输入必填项',
+							trigger: 'change'
+						}
+						/** 检查是否已经存在该字段的规则 */
+						const exists = this.dataFormRules[item.name] || null
+						/** 设置验证规则  */
+						if (exists) {
+							const unset = true
+							for (const rule of exists) {
+								if (rule.required) unset = false
+							}
+							if (unset) {
+								exists.push(requiredRule)
+							}
+						} else {
+							/** 不存在已有规则 */
+							this.$set(this.dataFormRules, [item.name], [requiredRule])
+						}
+					} // end if (item.required)
+
+					if (item.rules) {
+						const exists = this.dataFormRules[item.name] || null
+						if (exists) {
+							// 浅拷贝过去
+							exists.push(...item.rules)
+						} else {
+							this.$set(this.dataFormRules, [item.name], [...item.rules])
+						}
+					} // end if (item.rules)
+				}
+			})
+
+			/** 检查是否需要额外的组件 */
+			this.configs.extraComponents.forEach(item => {
+				this.$set(this.dataForm, [item.name], '')
+			})
+
+			// TODO：delete next lines
+			console.log('dataform: ', this.dataForm)
+			console.log('rules: ', this.dataFormRules)
+		})
+	},
 	updated() {
 		this.isUpdated = true // 此时如果点击保存就会 emit(refreshDataList)
 	},
@@ -99,6 +173,7 @@ export default {
 					break
 				case 'reset':
 					break
+				// add more..
 			}
 		},
 		handleClose() {

src/views/modules/monitoring/product.vue

@@ -103,7 +103,15 @@ const addOrUpdateConfigs = {
 			name: 'processTime',
 			type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
 			required: true,
-			validator: false // 是否需要验证
+			rules: [
+				// 除了required之外的验证规则
+				{
+					type: 'number',
+					trigger: 'blur',
+					transform: val => Number(val),
+					message: '必须输入数字'
+				}
+			]
 		},
 		'remark',
 		'specifications',
@@ -130,7 +138,14 @@ const addOrUpdateConfigs = {
 		{ name: 'save', url: 'api/product/add' },
 		{ name: 'update', url: 'api/product/update' },
 		{ name: 'reset', url: true }
-	]
+	],
+	// extraComponents: [
+	// 	{
+	// 		name: 'CompName',
+	// 		label: 'markdown编辑器',
+	// 		component: () => import('xx.vue')
+	// 	}
+	// ]
 }
 
 export default {