mt-yd-ui/src/components/base-dialog/addOrUpdate/index.vue

<template>
	<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">
			<el-button v-for="(operate, index) in configs.operations" :key="`operate-${index}`" :type="btnType[operate.name]" @click="handleClick(operate)">
				<!-- {{ operate.name | btnNameFilter }} -->
				{{ btnName[operate.name] }}
			</el-button>
		</span>
	</el-dialog>
</template>

<script>
// 标题 for i18n
const title = {
	detail: '详情',
	add: '新增',
	edit: '编辑'
}

// 或者也可以改造成自定义颜色：
const btnType = {
	save: 'success',
	update: 'primary',
	reset: 'text'
	// add more...
}

const btnName = {
	// for i18n
	save: '保存',
	update: '更新',
	reset: '重置'
	// add more...
}

// 每行的列数
const COLUMN_PER_ROW = 2

export default {
	name: 'AddOrUpdateDialog',
	props: {
		configs: {
			/**
			 * type: 'dialog' | 'drawer' | 'page'
			 * fields: Array<string|object>
			 * - fields.object: { name, type: 'number'|'textarea'|'select'|'date'|.., required: boolean,  validator: boolean(是否需要验证), [options]: any[], api: string(自动获取数据的接口，一般为getcode接口)}
			 * operations: Array[object], 操作名和对应的接口地址
			 */
			type: Object,
			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
		}
	},
	data() {
		return {
			title,
			btnName,
			btnType,
			visible: false,
			isEdit: false,
			isDetail: false,
			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
			isUpdated: false,
			dataForm: null,
			dataFormRules: {}
		}
	},
	computed: {
		rows() {
			// 本组件只实现了'一行两列'的表单布局
			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)
	},
	// beforeDestroy() {
	// 缓存比较方案：
	// 在组件快要销毁时，比较localStorage和dataForm里的值
	// 如果有改变则 emit
	// 否则直接销毁
	// 清除localStorage里的缓存
	// if (cached && compareCache(this.dataForm, localStorage...) || !isEdit) {
	//   // 如果是编辑页面，并且已经更新了内容；或者是新增页面，就emit刷新列表
	//   clearCache()
	//   this.$emit('refreshDataList')
	// }
	// },
	methods: {
		init() {
			this.visible = true
		},
		handleClick(btn) {
			switch (btn.name) {
				case 'save':
					break
				case 'update':
					break
				case 'reset':
					break
				// add more..
			}
		},
		handleClose() {
			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
			this.visible = false
		}
	}
}
</script>