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>
			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
		</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
		}
	},
	computed: {
		rows() {
			// 本组件只实现了'一行两列'的表单布局
			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
		}
	},
	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
			}
		},
		handleClose() {
			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
			this.visible = false
		}
	}
}
</script>