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

@@ -1,3 +1,48 @@
 <template>
-  <el-dialog></el-dialog>
+	<el-dialog :title="isDetail ? '详情' : !dataForm.id ? '新增' : '修改'" :visible.sync="visible" @close="handleClose"> </el-dialog>
 </template>
+
+<script>
+const compareCache = (dataForm, cache) => {
+	// 一个简单的比对 dataForm 和 cache 的方法，也许需要优化地更精细
+	// 由于js不保证对象属性的顺序，所以此方法可能在某些情况下失效
+  // 或者使用 _.isEqual() --- 也不是很完美
+	return JSON.stringify(dataForm) === JSON.stringify(cache)
+}
+export default {
+	name: 'AddOrUpdateDialog',
+	data() {
+		return {
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
+			isUpdated: false
+		}
+	},
+	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
+		},
+		handleClose() {
+			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
+			this.visible = false
+		}
+	}
+}
+</script>

src/views/modules/monitoring/product.vue

@@ -7,7 +7,6 @@
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
 				<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
 			</el-form-item>
 		</el-form>
 		<!-- <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
@@ -92,9 +91,52 @@ const tableConfigs = [
 	// { "prop": "version", "name": "版本号" }
 ]
 
+const addOrUpdateConfigs = {
+	type: 'dialog', // dialog | drawer | page
+	fields: [
+		'name',
+		{
+			name: 'code',
+			api: 'xx/code'
+		},
+		{
+			name: 'processTime',
+			type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
+			required: true,
+			validator: false // 是否需要验证
+		},
+		'remark',
+		'specifications',
+		{
+			name: 'typeDictValue',
+			type: 'select',
+			options: [
+				// 动态获取
+				{ label: 'ces', value: 1 },
+				{ label: 'sec', value: 2 }
+			]
+		},
+		{
+			name: 'unitDictValue',
+			type: 'select',
+			options: [
+				// 动态获取
+				{ label: 'h', value: 'h' },
+				{ label: 'l', value: 'l' }
+			]
+		}
+	],
+	operations: [
+		{ add: 'api/product/add' },
+		{ update:  'api/product/update' },
+		{ reset: true }
+	]
+}
+
 export default {
 	data() {
-		return {tableConfigs,
+		return {
+			tableConfigs,
 			tableConfigs,
 			dataForm: {
 				key: ''