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

@@ -1,14 +1,64 @@
 <template>
-	<el-dialog :title="isDetail ? '详情' : !dataForm.id ? '新增' : '修改'" :visible.sync="visible" @close="handleClose"> </el-dialog>
+	<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,
@@ -16,6 +66,12 @@ export default {
 			isUpdated: false
 		}
 	},
+	computed: {
+		rows() {
+			// 本组件只实现了'一行两列'的表单布局
+			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
+		}
+	},
 	updated() {
 		this.isUpdated = true // 此时如果点击保存就会 emit(refreshDataList)
 	},
@@ -35,6 +91,16 @@ export default {
 		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

src/views/modules/monitoring/product.vue

@@ -127,9 +127,9 @@ const addOrUpdateConfigs = {
 		}
 	],
 	operations: [
-		{ add: 'api/product/add' },
-		{ update:  'api/product/update' },
-		{ reset: true }
+		{ name: 'save', url: 'api/product/add' },
+		{ name: 'update', url: 'api/product/update' },
+		{ name: 'reset', url: true }
 	]
 }