update

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

@@ -1,11 +1,48 @@
 <template>
 	<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
-		<el-form>
+		<el-form :model="dataForm" :rules="dataFormRules">
 			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+			<el-row v-for="n in rows" :key="n" :gutter="20">
+				<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
+					<!-- <el-form-item
+						v-for="field in configs.fields"
+						:key="field.name || field"
+						:prop="field.name || field"
+						:label="field.label || field.name | nameFilter || field | nameFilter"
+					> -->
+					<!-- <el-form-item
+						:prop="
+							typeof configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)] === 'string'
+								? configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+								: configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].type
+						"
+						:key="`${n}-col-${c}-item`"
+						:label="
+							`
+							${configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].label ||
+								(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name && defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]) ||
+								defaultNames[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]}
+						`
+						"
+					> -->
+					<el-form-item :prop="`${n}-test-${c}`" :key="`${n}-col-${c}-item`" :label="'f'">
+						{{ n - c - JSON.stringify(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]) }}
+						<!-- 暂时先不实现部分输入方式 -->
+						<!-- <el-input></el-input>
+						<el-radio></el-radio>
+						<el-checkbox></el-checkbox>
+						<el-select></el-select>
+						<el-switch></el-switch>
+						<el-cascader></el-cascader>
+						<el-time-select></el-time-select>
+						<el-date-picker></el-date-picker> -->
+					</el-form-item>
+				</el-col>
+			</el-row>
 
 			<!-- extra components , like Markdown or RichEdit -->
-			<template v-if="extraComponents.length > 0">
+			<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
-				<el-form-item v-for="ec in extraComponents" :key="ec.name" :label="ec.label">
+				<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
 					<component :is="ec.component" v-model="dataForm[ec.name]"></component>
 				</el-form-item>
 			</template>
@@ -61,8 +98,24 @@ export default {
 			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
 		}
 	},
+	filters: {
+		nameFilter: function(name) {
+			if (!name) return null
+			// for i18n
+			const defaultNames = {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				specifications: '规格'
+				// add more...
+			}
+
+			return defaultNames[name]
+		}
+	},
 	data() {
 		return {
+			COLUMN_PER_ROW,
 			title,
 			btnName,
 			btnType,
@@ -71,8 +124,15 @@ export default {
 			isDetail: false,
 			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
 			isUpdated: false,
-			dataForm: null,
+			dataForm: {},
-			dataFormRules: {}
+			dataFormRules: {},
+			defaultNames: {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				specifications: '规格'
+				// add more...
+			}
 		}
 	},
 	computed: {
@@ -88,9 +148,9 @@ export default {
 				if (typeof item === 'string') {
 					this.$set(this.dataForm, [item], '')
 				} else if (typeof item === 'object') {
+					this.$set(this.dataForm, [item.name], '')
 					if (item.api) {
 						/** 自动请求并填充 */
-						this.$set(this.dataForm, [item.name], '')
 						this.$http({
 							url: this.$http.adornUrl(item.api),
 							methods: 'get'
@@ -137,10 +197,14 @@ export default {
 			})
 
 			/** 检查是否需要额外的组件 */
+			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
 					this.$set(this.dataForm, [item.name], '')
 				})
 
+			/** 单独设置 id */
+			this.$set(this.dataForm, 'id', null)
+
 			// TODO：delete next lines
 			console.log('dataform: ', this.dataForm)
 			console.log('rules: ', this.dataFormRules)

src/views/modules/monitoring/product.vue

@@ -6,6 +6,7 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
+				<el-button @click="test()">测试</el-button>
 				<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
 			</el-form-item>
 		</el-form>
@@ -52,6 +53,8 @@
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
 		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+
+		<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs"></base-dialog>
 	</div>
 </template>
 
@@ -60,7 +63,7 @@ import AddOrUpdate from './product-add-or-update'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import TableTextComponent from '@/components/base-table/components/detailComponent'
-
+import BaseDialog from '@/components/base-dialog/addOrUpdate'
 const tableConfigs = [
 	{ type: 'index', name: '序号' },
 	{ prop: 'updateTime', name: '添加时间' },
@@ -135,10 +138,10 @@ const addOrUpdateConfigs = {
 		}
 	],
 	operations: [
+		{ name: 'reset', url: true },
 		{ name: 'save', url: 'api/product/add' },
-		{ name: 'update', url: 'api/product/update' },
+		{ name: 'update', url: 'api/product/update' }
-		{ name: 'reset', url: true }
+	]
-	],
 	// extraComponents: [
 	// 	{
 	// 		name: 'CompName',
@@ -162,17 +165,27 @@ export default {
 			totalPage: 0,
 			dataListLoading: false,
 			dataListSelections: [],
-			addOrUpdateVisible: false
+			addOrUpdateVisible: false,
+			addOrUpdateConfigs,
+			showbasedialog: false
 		}
 	},
 	components: {
 		AddOrUpdate,
-		BaseTable
+		BaseTable,
+		BaseDialog
 	},
 	activated() {
 		this.getDataList()
 	},
 	methods: {
+		//
+		test() {
+			this.showbasedialog = true
+			this.$nextTick(() => {
+				this.$refs.basedialog.init()
+			})
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true