update

package-lock.json

@@ -2603,6 +2603,12 @@
       "resolved": "https://registry.npm.taobao.org/@types/json-schema/download/@types/json-schema-7.0.5.tgz",
       "integrity": "sha1-3M5EMOZLRDuolF8CkPtWStW6xt0="
     },
+    "@types/lodash": {
+      "version": "4.14.182",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.182.tgz",
+      "integrity": "sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npm.taobao.org/@types/minimatch/download/@types/minimatch-3.0.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fminimatch%2Fdownload%2F%40types%2Fminimatch-3.0.3.tgz",
@@ -10942,6 +10948,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",

package.json

@@ -18,9 +18,10 @@
     "element-ui": "^2.15.7",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.19",
-    "sass": "^1.26.5",
+    "moment": "^2.29.4",
     "qs": "^6.9.4",
     "quill": "^1.3.7",
+    "sass": "^1.26.5",
     "sass-loader": "^9.0.2",
     "screenfull": "^4.2.1",
     "svg-sprite-loader": "^5.0.0",
@@ -31,6 +32,7 @@
     "vuex": "^3.5.1"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.182",
     "@vue/cli-plugin-babel": "^4.4.6",
     "@vue/cli-service": "^4.4.6",
     "element-theme-chalk": "^2.15.7",

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

@@ -1,58 +1,100 @@
 <template>
 	<el-dialog class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
-		<el-form :model="dataForm" :rules="dataFormRules">
+		<div style="max-height: 60vh; overflow-y: scroll; overflow-x: hidden;">
-			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
+			<el-form ref="dataForm" :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-row v-for="n in rows" :key="n" :gutter="20">
-					<el-form-item
+					<el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW">
-						v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
+						<el-form-item
-						:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
+							v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
-						:key="`${n}-col-${c}-item`"
+							:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
-						:label="getLabel(n, c)"
+							:key="`${n}-col-${c}-item`"
-					>
+							:label="getLabel(n, c)"
-						<!-- 暂时先不实现部分输入方式 -->
-						<el-input
-							v-if="getType(n, c) === 'input'"
-							:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || '...'"
-							v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
-							clearable
-						/>
-						<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
-						<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
-						<el-select
-							v-if="getType(n, c) === 'select'"
-							:placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"
-							v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
-							clearable
 						>
-							<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :value="opt.value" />
+							<!-- 暂时先不实现部分输入方式 -->
-						</el-select>
+							<el-input
-						<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
+								v-if="getType(n, c) === 'input'"
-						<el-cascader v-if="getType(n, c) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-cascader>
+								:placeholder="getPlaceholder(n, c)"
-						<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
-						<el-date-picker v-if="getType(n, c) === 'date'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
+								clearable
+							/>
+							<el-radio v-if="getType(n, c) === 'radio'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-radio>
+							<el-checkbox v-if="getType(n, c) === 'check'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-checkbox>
+							<el-select
+								v-if="getType(n, c) === 'select'"
+								:placeholder="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+							>
+								<el-option v-for="opt in configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options" :key="opt.label" :label="opt.label" :value="opt.value" />
+							</el-select>
+							<el-switch v-if="getType(n, c) === 'switch'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-switch>
+							<el-cascader v-if="getType(n, c) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-cascader>
+							<el-time-select v-if="getType(n, c) === 'time'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-time-select>
+							<el-date-picker v-if="getType(n, c) === 'date'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
+						</el-form-item>
+					</el-col>
+				</el-row>
+
+				<!-- extra components , like Markdown or RichEdit -->
+				<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+					<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>
-				</el-col>
+				</template>
-			</el-row>
+			</el-form>
 
-			<!-- extra components , like Markdown or RichEdit -->
+			<template v-if="dataForm.id && configs.subtable">
-			<template v-if="configs.extraComponents && configs.extraComponents.length > 0">
+				<h3>{{ configs.subtable.title }} <el-button style="margin-left: 8px;" type="text" @click="showAddAttr = true">添加</el-button></h3>
-				<el-form-item v-for="ec in configs.extraComponents" :key="ec.name" :label="ec.label">
+				<component
-					<component :is="ec.component" v-model="dataForm[ec.name]"></component>
+					v-if="!showAddAttr"
-				</el-form-item>
+					key="sub-table"
+					:is="require('../../base-table/index.vue').default"
+					:table-head-configs="configs.subtable.tableConfigs"
+					:data="subtableDataList"
+					:max-height="500"
+					@operate-event="handleOperations"
+					@refreshDataList="getDataList"
+				/>
+				<div v-else style="background: #eee; border-radius: 8px; height: 200px;">
+					<el-row>
+						<el-form ref="AttrForm" :model="AttrForm" :rules="AttrFormRules">
+							<el-form-item v-for="field in attrFormFields" :key="field.prop" :prop="field.prop" :label="field.name">
+								<!-- 子窗口只给input吧，太麻烦了，有特殊需求就不用这个组件了 -->
+								<el-input v-model="AttrForm[field.prop]" clearable />
+								<!-- TODO: mounted里初始化AttrForm，configs里设置AttrFormRules，mounted里设置attrFormFields -->
+								<!-- TODO: 单独用一个组件来展示动态属性这一部分 -->
+							</el-form-item>
+						</el-form>
+					</el-row>
+					<el-row>
+						<el-button size="small" @click="showAddAttr = false">取消</el-button>
+						<el-button type="primary" size="small" @click="handleSaveAttrForm">保存</el-button>
+					</el-row>
+				</div>
 			</template>
-		</el-form>
+		</div>
-
 		<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)">
+			<template v-for="(operate, index) in configs.operations">
 				<!-- {{ operate.name | btnNameFilter }} -->
-				{{ btnName[operate.name] }}
+				<el-button
-			</el-button>
+					v-if="
+						operate.showAlways ||
+							(((dataForm.id && operate.showOnEdit) || (!dataForm.id && !operate.showOnEdit)) && (operate.permission ? $hasPermission(operate.permission) : true))
+					"
+					:key="`operate-${index}`"
+					:type="btnType[operate.name]"
+					@click="handleClick(operate)"
+					>{{ btnName[operate.name] }}</el-button
+				>
+			</template>
 		</span>
 	</el-dialog>
 </template>
 
 <script>
+import { pick } from 'lodash/object'
+
 // 标题 for i18n
 const title = {
 	detail: '详情',
@@ -65,6 +107,7 @@ const btnType = {
 	save: 'success',
 	update: 'primary',
 	reset: 'text'
+	// cancel: 'text'
 	// add more...
 }
 
@@ -72,7 +115,8 @@ const btnName = {
 	// for i18n
 	save: '保存',
 	update: '更新',
-	reset: '重置'
+	reset: '重置',
+	cancel: '取消'
 	// add more...
 }
 
@@ -81,13 +125,15 @@ const COLUMN_PER_ROW = 2
 
 export default {
 	name: 'AddOrUpdateDialog',
+	components: {},
 	props: {
 		configs: {
 			/**
+			 * TODO: 定义及使用方式，应改用README.md文件记录
 			 * 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], 操作名和对应的接口地址
+			 * operations: Array[object], 操作名和对应的接口地址，还有permission(如，sys:dict:update)
 			 */
 			type: Object,
 			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
@@ -112,22 +158,30 @@ export default {
 		return {
 			COLUMN_PER_ROW,
 			title,
+			/** 按钮相关属性 */
 			btnName,
 			btnType,
-			visible: false,
-			isEdit: false,
-			isDetail: false,
-			// cached: false // 不采用缓存比较的方案了，采用 updated 方案： 如果更新了dataForm就在 confirm 时 emit(refreshDataList)
-			isUpdated: false,
-			dataForm: {},
-			dataFormRules: {},
 			defaultNames: {
 				name: '名称',
 				code: '编码',
 				remark: '备注',
 				specifications: '规格'
 				// add more...
-			}
+			},
+			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
+			/** 表单相关属性 */
+
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			isUpdated: false,
+			dataForm: {},
+			dataFormRules: {},
+			/** 子列表相关属性 */
+			subtableDataList: [],
+			showAddAttr: false,
+			AttrForm: {},
+			AttrFormRules: {}
 		}
 	},
 	computed: {
@@ -137,8 +191,14 @@ export default {
 		}
 	},
 	mounted() {
+		/** 计算 defaultPlaceholders */
+		const prefix = '请输入'
+		Object.entries(this.defaultNames).map(([key, value]) => {
+			this.defaultPlaceholders[key] = prefix + value
+		})
+
+		/** 转换 configs.fields 的结构，把纯字符串转为对象 */
 		this.$nextTick(() => {
-			/** 转换 configs.fields 的结构，把纯字符串转为对象 */
 			this.configs.fields = this.configs.fields.map(item => {
 				if (typeof item === 'string') {
 					return { name: item }
@@ -203,27 +263,12 @@ export default {
 
 			/** 单独设置 id */
 			this.$set(this.dataForm, 'id', null)
-
-			// TODO：delete next lines
-			console.log('dataform: ', this.dataForm)
-			console.log('rules: ', this.dataFormRules)
 		})
 	},
 	updated() {
 		this.isUpdated = true // 此时如果点击保存就会 emit(refreshDataList)
 	},
-	// beforeDestroy() {
+
-	// 缓存比较方案：
-	// 在组件快要销毁时，比较localStorage和dataForm里的值
-	// 如果有改变则 emit
-	// 否则直接销毁
-	// 清除localStorage里的缓存
-	// if (cached && compareCache(this.dataForm, localStorage...) || !isEdit) {
-	//   // 如果是编辑页面，并且已经更新了内容；或者是新增页面，就emit刷新列表
-	//   clearCache()
-	//   this.$emit('refreshDataList')
-	// }
-	// },
 	methods: {
 		getLabel(n, c) {
 			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
@@ -232,6 +277,15 @@ export default {
 				return opt.label ? opt.label : this.defaultNames[opt.name]
 			}
 		},
+
+		getPlaceholder(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				// if opt is valid
+				return opt.placeholder ? opt.placeholder : this.defaultPlaceholders[opt.name]
+			}
+		},
+
 		getType(n, c) {
 			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
 			if (opt) {
@@ -245,56 +299,82 @@ export default {
 				return 'input'
 			}
 		},
-		init() {
+
+		init(id) {
 			this.visible = true
-		},
+			this.$nextTick(() => {
-		handleClick(btn) {
+				this.$refs['dataForm'].resetFields()
-			this.$refs['dataForm'].validate(valid => {
+				this.dataForm.id = id || null
-				if (valid) {
+				if (this.dataForm.id) {
-					/** 提取url */
+					this.$http({
-					const urls = {}
+						url: this.$http.adornUrl(`${this.configs.infoUrl}/${this.dataForm.id}`),
-					this.configs.operations.map(item => {
+						method: 'get'
-						urls[item.name] = item.url
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							const dataFormKeys = Object.keys(this.dataForm)
+							this.dataForm = pick(res.data, dataFormKeys)
+						}
 					})
-					/** 操作 */
+				}
-					switch (btn.name) {
+			})
-						case 'save':
+		},
-						case 'update':
+
+		handleClick(btn) {
+			/** 提取url */
+			const urls = {}
+			this.configs.operations.map(item => {
+				urls[item.name] = item.url
+			})
+			/** 操作 */
+			switch (btn.name) {
+				case 'save':
+				case 'update':
+					/** 需要验证表单的操作 */
+					this.$refs['dataForm'].validate(valid => {
+						if (valid) {
 							this.$http({
 								url: this.$http.adornUrl(urls[btn.name]),
 								method: btn.name === 'save' ? 'POST' : 'PUT',
 								data: this.dataForm
 							}).then(({ data: res }) => {
-								if (data && data.code === 0) {
+								if (res && res.code === 0) {
 									this.$message({
 										message: btn.name === 'save' ? '添加成功!' : '更新成功!',
 										type: 'success',
 										duration: 1500,
-										onClose() {
+										onClose: () => {
 											this.$emit('refreshDataList')
 											this.visible = false
 										}
 									})
 								}
 							})
-							return
+						}
-						case 'reset':
+					})
-							for (const key of Object.keys(this.dataForm)) {
+					return
-								if (typeof this.dataForm[key] === 'string') {
+				case 'reset':
-									this.dataForm[key] = ''
+					for (const key of Object.keys(this.dataForm)) {
-								} else if (this.dataForm[key] instanceof Array) {
+						if (typeof this.dataForm[key] === 'string') {
-									this.dataForm[key].splice(0)
+							this.dataForm[key] = ''
-								} else {
+						} else if (this.dataForm[key] instanceof Array) {
-									this.dataForm[key] = null
+							this.dataForm[key].splice(0)
-								}
+						} else {
-							}
+							this.dataForm[key] = null
-							console.log('after reset: ', JSON.stringify(this.dataForm))
+						}
-							break
-						// add more..
 					}
-				}
+					break
-			})
+				case 'cancel':
+					this.visible = false
+				// add more..
+			}
 		},
+
+		handleOperations() {},
+
+		getDataList() {},
+
+		handleSaveAttrForm() {},
+
 		handleClose() {
 			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
 			this.visible = false
@@ -307,4 +387,16 @@ export default {
 .super-flexible-dialog >>> .el-select {
 	width: 100%;
 }
+
+.super-flexible-dialog >>> ::-webkit-scrollbar {
+	width: 4px;
+	border-radius: 4px;
+	background: #fff;
+}
+
+.super-flexible-dialog >>> ::-webkit-scrollbar-thumb {
+	width: 4px;
+	border-radius: 4px;
+	background: #ccc;
+}
 </style>

src/components/base-table/components/operationComponent.js

@@ -27,7 +27,7 @@ export default {
         // add more...
       },
       text: {
-        // for i18n inject:
+        // TODO: i18n
         edit: '编辑',
         detail: '详情',
         delete: '删除',
@@ -38,12 +38,15 @@ export default {
   },
   methods: {
     // 发射事件
+    emit(eventType) {
+      this.$emit('emit-data', { type: eventType, data: this.injectData.head?.emitFullData ? this.injectData : this.injectData.id })
+    }
   },
   render: function (h) {
     let btns = []
     for (const optionStr of this.injectData.head?.options) {
       // btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
-      btns.push(h('el-button', { props: { type: 'text' }, style: { color: this.colors[optionStr] || '#409EFF' } }, this.text[optionStr]))
+      btns.push(h('el-button', { props: { type: 'text' }, style: { color: this.colors[optionStr] || '#409EFF' }, on: { click: this.emit.bind(null, optionStr) } }, this.text[optionStr]))
     }
     return h('span', null, btns)
   }

src/components/base-table/index.vue

@@ -30,7 +30,7 @@
 				>
 					<!-- 子组件 -->
 					<template v-if="head.prop" slot-scope="scope">
-						<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
+						<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emit-data="handleSubEmitData" />
 						<!-- 直接展示数据或应用过滤器 -->
 						<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
 					</template>

src/mixins/dictlist-module.js

@@ -0,0 +1,24 @@
+
+export default {
+  data() {
+    return {
+      dictList: {}
+    }
+  },
+  methods: {
+    initDictList(dictTypeIdList) {
+      const allDictList = JSON.parse(localStorage.getItem('dictList'))
+      if (!Object.keys(allDictList).length) {
+        return this.$message({
+          // TODO: i18n
+          message: '未能获取数据字典',
+          type: 'error',
+          duration: 2000
+        })
+      }
+      dictTypeIdList.forEach(id => {
+        this.dictList[id] = allDictList[id].map(item => ({ label: item.dictLabel, value: item.dictValue }))
+      })
+    }
+  }
+}

src/utils/filters.js

@@ -0,0 +1,7 @@
+/** filters */
+
+export const dictFilter = dictTypeId => {
+	return val => {
+		return JSON.parse(localStorage.getItem('dictList'))[dictTypeId].find(item => item.dictValue === val)?.dictLabel || '-'
+	}
+}

src/utils/request.js

@@ -96,7 +96,8 @@ http.adornData = (data = {}, openDefaultdata = true, contentType = 'json') => {
     't': new Date().getTime()
   }
   data = openDefaultdata ? merge(defaults, data) : data
-  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+  return contentType === 'raw' ? data : contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+  // return contentType === 'json' ? JSON.stringify(data, (_, v) => typeof v === 'bigint' ? v.toString() : v) : qs.stringify(data)
 }
 
 

src/views/modules/monitoring/product-add-or-update.vue

@@ -129,25 +129,25 @@ export default {
 						params: this.$http.adornParams()
 					}).then(({ data }) => {
 						if (data && data.code === 0) {
-							this.dataForm.code = data.product.code
+							this.dataForm.code = data.data.code
-							this.dataForm.name = data.product.name
+							this.dataForm.name = data.data.name
-							this.dataForm.description = data.product.description
+							this.dataForm.description = data.data.description
-							this.dataForm.externalCode = data.product.externalCode
+							this.dataForm.externalCode = data.data.externalCode
-							this.dataForm.specifications = data.product.specifications
+							this.dataForm.specifications = data.data.specifications
-							this.dataForm.unitDictValue = data.product.unitDictValue
+							this.dataForm.unitDictValue = data.data.unitDictValue
-							this.dataForm.area = data.product.area
+							this.dataForm.area = data.data.area
-							this.dataForm.processTime = data.product.processTime
+							this.dataForm.processTime = data.data.processTime
-							this.dataForm.typeDictValue = data.product.typeDictValue
+							this.dataForm.typeDictValue = data.data.typeDictValue
-							this.dataForm.enabled = data.product.enabled
+							this.dataForm.enabled = data.data.enabled
-							this.dataForm.remark = data.product.remark
+							this.dataForm.remark = data.data.remark
-							this.dataForm.valid = data.product.valid
+							this.dataForm.valid = data.data.valid
-							this.dataForm.creatorId = data.product.creatorId
+							this.dataForm.creatorId = data.data.creatorId
-							this.dataForm.creatorName = data.product.creatorName
+							this.dataForm.creatorName = data.data.creatorName
-							this.dataForm.createTime = data.product.createTime
+							this.dataForm.createTime = data.data.createTime
-							this.dataForm.updaterId = data.product.updaterId
+							this.dataForm.updaterId = data.data.updaterId
-							this.dataForm.updaterName = data.product.updaterName
+							this.dataForm.updaterName = data.data.updaterName
-							this.dataForm.updateTime = data.product.updateTime
+							this.dataForm.updateTime = data.data.updateTime
-							this.dataForm.version = data.product.version
+							this.dataForm.version = data.data.version
 						}
 					})
 				}

src/views/modules/monitoring/product.vue

@@ -6,7 +6,7 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
-				<el-button @click="test()">测试</el-button>
+				<el-button @click="addOrEdit()">测试</el-button>
 				<el-button v-if="$hasPermission('monitoring:product:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
 			</el-form-item>
 		</el-form>
@@ -40,7 +40,7 @@
 			</el-table-column>
 		</el-table> -->
 
-		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" />
+		<base-table :data="dataList" :table-head-configs="tableConfigs" :max-height="500" @operate-event="handleOperations" @refreshDataList="getDataList" />
 
 		<el-pagination
 			@size-change="sizeChangeHandle"
@@ -54,7 +54,7 @@
 		<!-- 弹窗, 新增 / 修改 -->
 		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
 
-		<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs"></base-dialog>
+		<base-dialog v-if="showbasedialog" ref="basedialog" :configs="addOrUpdateConfigs" @refreshDataList="getDataList"></base-dialog>
 	</div>
 </template>
 
@@ -64,13 +64,19 @@ 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'
+import moment from 'moment'
+import dictListMixin from '@/mixins/dictlist-module'
+import { dictFilter } from '@/utils/filters'
+
+const UnitDictTypeId = '1557173812109242370'
+const ProductTypeDictTypeId = '1557179530308616193'
 const tableConfigs = [
 	{ type: 'index', name: '序号' },
-	{ prop: 'updateTime', name: '添加时间' },
+	{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
 	{ prop: 'name', name: '产品名称' },
 	{ prop: 'code', name: '产品编码' },
 	{ prop: 'specifications', name: '规格' },
-	{ prop: 'unitDictValue', name: '单位' },
+	{ prop: 'unitDictValue', name: '单位', filter: dictFilter(UnitDictTypeId) },
 	// { prop: 'unitDictValue', name: '单位value，对应到数据字典label_value' },
 	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['viewAttr', 'delete'] }
 
@@ -96,6 +102,7 @@ const tableConfigs = [
 
 const addOrUpdateConfigs = {
 	type: 'dialog', // dialog | drawer | page
+	infoUrl: '/monitoring/product',
 	fields: [
 		'name',
 		{
@@ -129,26 +136,36 @@ const addOrUpdateConfigs = {
 			type: 'select',
 			options: [
 				// 动态获取
-				{ label: 'ces', value: 1 },
-				{ label: 'sec', value: 2 }
 			]
 		},
 		{
 			name: 'unitDictValue',
 			label: '单位',
 			type: 'select',
+			// placeholder: '请选择单位',
 			options: [
 				// 动态获取
-				{ label: 'h', value: 'h' },
-				{ label: 'l', value: 'l' }
 			]
 		}
 	],
 	operations: [
-		{ name: 'reset', url: true },
+		// { name: 'reset', url: true },
-		{ name: 'save', url: 'api/product/add' },
+		{ name: 'cancel', url: true, showAlways: true },
-		{ name: 'update', url: 'api/product/update' }
+		{ name: 'save', url: '/monitoring/product', permission: '', showOnEdit: false },
-	]
+		{ name: 'update', url: '/monitoring/product', permission: '', showOnEdit: true }
+	],
+	subtable: {
+		// for i18n
+		title: '动态属性',
+		url: '/monitoring/productArrt/page',
+		tableConfigs: [
+			{ type: 'index', name: '序号' },
+			{ prop: 'createTime', name: '添加时间', filter: val => (val ? moment(val).format('YYYY-MM-DD hh:mm:ss') : '-') },
+			{ prop: 'name', name: '属性名', formField: true },
+			{ prop: 'code', name: '属性值', formField: true },
+			{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
+		]
+	}
 	// extraComponents: [
 	// 	{
 	// 		name: 'CompName',
@@ -159,9 +176,9 @@ const addOrUpdateConfigs = {
 }
 
 export default {
+	mixins: [dictListMixin],
 	data() {
 		return {
-			tableConfigs,
 			tableConfigs,
 			dataForm: {
 				key: ''
@@ -182,19 +199,34 @@ export default {
 		BaseTable,
 		BaseDialog
 	},
+	created() {
+		this.initDictList([UnitDictTypeId, ProductTypeDictTypeId])
+		this.addOrUpdateConfigs.fields.forEach(item => {
+			if (item.name) {
+				if (item.name === 'typeDictValue') {
+					console.log('dict : ', this.dictList)
+					item.options = this.dictList[ProductTypeDictTypeId]
+				} else if (item.name === 'unitDictValue') {
+					item.options = this.dictList[UnitDictTypeId]
+				}
+			}
+		})
+	},
 	activated() {
 		this.getDataList()
 	},
 	methods: {
 		//
-		test() {
+		addOrEdit(id) {
 			this.showbasedialog = true
 			this.$nextTick(() => {
-				this.$refs.basedialog.init()
+				this.$refs.basedialog.init(id)
 			})
 		},
 		// 获取数据列表
 		getDataList() {
+			// console.log("after dialog close: ", this.showbasedialog)
+			this.showbasedialog = false // 清理弹窗
 			this.dataListLoading = true
 			this.$http({
 				url: this.$http.adornUrl('/monitoring/product/page'),
@@ -237,11 +269,22 @@ export default {
 				this.$refs.addOrUpdate.init(id)
 			})
 		},
+		// 表格操作事件管理
+		handleOperations({ type, data }) {
+			switch (type) {
+				case 'viewAttr': // <== 对照 tableConfig
+					return this.addOrEdit(data)
+				case 'delete':
+					return this.deleteHandle(data)
+			}
+		},
 		// 删除
 		deleteHandle(id) {
+			console.log('id is: ', id)
 			var ids = id
 				? [id]
-				: this.dataListSelections.map(item => {
+				: // ? [1556817256347828335]
+				  this.dataListSelections.map(item => {
 						return item.id
 				  })
 			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
@@ -252,21 +295,24 @@ export default {
 				this.$http({
 					url: this.$http.adornUrl('/monitoring/product'),
 					method: 'delete',
-					data: this.$http.adornData(ids, false)
+					data: ids
-				}).then(({ data }) => {
+					// or : data: this.$http.adornData(ids, false, 'raw')
-					if (data && data.code === 0) {
-						this.$message({
-							message: '操作成功',
-							type: 'success',
-							duration: 1500,
-							onClose: () => {
-								this.getDataList()
-							}
-						})
-					} else {
-						this.$message.error(data.msg)
-					}
 				})
+					// or: this.$http.delete(this.$http.adornUrl('/monitoring/product'), { data: this.$http.adornData(ids, false) })
+					.then(({ data }) => {
+						if (data && data.code === 0) {
+							this.$message({
+								message: '操作成功',
+								type: 'success',
+								duration: 1500,
+								onClose: () => {
+									this.getDataList()
+								}
+							})
+						} else {
+							this.$message.error(data.msg)
+						}
+					})
 			})
 		}
 	}

src/views/modules/sys/dict-data-add-or-update.vue

@@ -78,7 +78,7 @@ export default {
 					if (!valid) {
 						return false
 					}
-					this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dict/data', this.dataForm)
+					this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/dict/data'), this.dataForm)
 						.then(({ data: res }) => {
 							if (res.code !== 0) {
 								return this.$message.error(res.msg)
@@ -92,6 +92,20 @@ export default {
 									this.$emit('refreshDataList')
 								}
 							})
+
+							/** 刷新dictlist */
+							this.$http.get(this.$http.adornUrl('/sys/dict/data/getAll')).then(({ data: res }) => {
+								if (res && res.code === 0) {
+									localStorage.setItem('dictList', JSON.stringify(res.data))
+								} else {
+									this.$message({
+										message: '数据字典拉取失败，请检查!',
+										type: 'error',
+										duration: 2000
+									})
+								}
+							})
+
 						})
 						.catch(() => {})
 				})

src/views/modules/sys/dict-type-add-or-update.vue

@@ -77,7 +77,7 @@ export default {
 					if (!valid) {
 						return false
 					}
-					this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/dict/type', this.dataForm)
+					this.$http[!this.dataForm.id ? 'post' : 'put'](this.$http.adornUrl('/sys/dict/type'), this.dataForm)
 						.then(({ data: res }) => {
 							if (res.code !== 0) {
 								return this.$message.error(res.msg)

src/views/pages/login.vue

@@ -106,9 +106,23 @@ export default {
 								return this.$message.error(res.msg)
 							}
 							Cookies.set('token', res.data.token)
+
+							/** 保存dictlist */
+							this.$http.get(this.$http.adornUrl('/sys/dict/data/getAll')).then(({ data: res }) => {
+								if (res && res.code === 0) {
+									localStorage.setItem('dictList', JSON.stringify(res.data))
+								} else {
+									this.$message({
+										message: '数据字典拉取失败，请检查!',
+										type: 'error',
+										duration: 2000
+									})
+								}
+							})
+
 							this.$router.replace({ name: 'home' })
 						})
-						.catch((err) => {
+						.catch(err => {
 							this.$message({
 								message: err.message,
 								type: 'error',