forked from mt-fe-group/mt-yd-ui
		
	update 改版完成
This commit is contained in:
		@@ -6,14 +6,14 @@
 | 
			
		||||
				<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
 | 
			
		||||
					<el-form-item
 | 
			
		||||
						v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
 | 
			
		||||
						:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name || configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
 | 
			
		||||
						:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
 | 
			
		||||
						:key="`${n}-col-${c}-item`"
 | 
			
		||||
						:label="getLabel(n, c)"
 | 
			
		||||
					>
 | 
			
		||||
						<!-- 暂时先不实现部分输入方式 -->
 | 
			
		||||
						<el-input
 | 
			
		||||
							v-if="getType(n, c) === 'input'"
 | 
			
		||||
							:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
 | 
			
		||||
							:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || '...'"
 | 
			
		||||
							v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
 | 
			
		||||
						/>
 | 
			
		||||
						<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
 | 
			
		||||
@@ -127,68 +127,64 @@ export default {
 | 
			
		||||
			// 本组件只实现了'一行两列'的表单布局
 | 
			
		||||
			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
 | 
			
		||||
		}
 | 
			
		||||
		// computedModel: {
 | 
			
		||||
		// 	get(n, c) {
 | 
			
		||||
		// 		return this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name
 | 
			
		||||
		// 			? dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]
 | 
			
		||||
		// 			: dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]
 | 
			
		||||
		// 	},
 | 
			
		||||
		// 	set() {}
 | 
			
		||||
		// }
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
			/** 转换 configs.fields 的结构,把纯字符串转为对象 */
 | 
			
		||||
			this.configs.fields = this.configs.fields.map(item => {
 | 
			
		||||
				if (typeof item === 'string') {
 | 
			
		||||
					return { name: item }
 | 
			
		||||
				}
 | 
			
		||||
				return item
 | 
			
		||||
			})
 | 
			
		||||
 | 
			
		||||
			/** 动态设置dataForm字段 */
 | 
			
		||||
			this.configs.fields.forEach(item => {
 | 
			
		||||
				if (typeof item === 'string') {
 | 
			
		||||
					this.$set(this.dataForm, [item], '')
 | 
			
		||||
				} else if (typeof item === 'object') {
 | 
			
		||||
					this.$set(this.dataForm, [item.name], '')
 | 
			
		||||
					if (item.api) {
 | 
			
		||||
						/** 自动请求并填充 */
 | 
			
		||||
						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)
 | 
			
		||||
				this.$set(this.dataForm, [item.name], '')
 | 
			
		||||
				if (item.api) {
 | 
			
		||||
					/** 自动请求并填充 */
 | 
			
		||||
					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'
 | 
			
		||||
				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
 | 
			
		||||
						}
 | 
			
		||||
						/** 检查是否已经存在该字段的规则 */
 | 
			
		||||
						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])
 | 
			
		||||
						if (unset) {
 | 
			
		||||
							exists.push(requiredRule)
 | 
			
		||||
						}
 | 
			
		||||
					} // end if (item.required)
 | 
			
		||||
					} 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)
 | 
			
		||||
				}
 | 
			
		||||
				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)
 | 
			
		||||
			})
 | 
			
		||||
 | 
			
		||||
			/** 检查是否需要额外的组件 */
 | 
			
		||||
@@ -225,7 +221,7 @@ export default {
 | 
			
		||||
			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
 | 
			
		||||
			if (opt) {
 | 
			
		||||
				// if opt is valid
 | 
			
		||||
				return typeof opt === 'string' ? this.defaultNames[opt] : opt.label ? opt.label : this.defaultNames[opt.name]
 | 
			
		||||
				return opt.label ? opt.label : this.defaultNames[opt.name]
 | 
			
		||||
			}
 | 
			
		||||
		},
 | 
			
		||||
		getType(n, c) {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user