init general dialog

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

@@ -1,3 +1,48 @@
 <template>
-  <el-dialog></el-dialog>
-</template>
+	<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>