finish 基本完成dialog“

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

@@ -1,41 +1,36 @@
 <template>
-	<el-dialog :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" :visible.sync="visible" @close="handleClose">
+	<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">
 			<!-- 如果需要更精细一点的布局，可以根据配置项实现地再复杂一点，但此处暂时全部采用一行两列布局  -->
 			<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
-						"
+					<el-form-item
+						v-if="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
+						:prop="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name"
 						: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)]) }}
+						:label="getLabel(n, c)"
+					>
 						<!-- 暂时先不实现部分输入方式 -->
-						<!-- <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-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-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>
@@ -143,20 +138,25 @@ export default {
 	},
 	mounted() {
 		this.$nextTick(() => {
+			/** 转换 configs.fields 的结构，把纯字符串转为对象 */
+			this.configs.fields = this.configs.fields.map(item => {
+				if (typeof item === 'string') {
+					return { name: item }
+				}
+				return item
+			})
+
 			/** 动态设置dataForm字段 */
 			this.configs.fields.forEach(item => {
-				if (typeof item === 'string') {
-					this.$set(this.dataForm, [item], '')
-				} else if (typeof item === 'object') {
 				this.$set(this.dataForm, [item.name], '')
 				if (item.api) {
 					/** 自动请求并填充 */
 					this.$http({
 						url: this.$http.adornUrl(item.api),
-							methods: 'get'
+						method: 'POST' // 也可以改成动态决定
 					}).then(({ data: res }) => {
-							if (data & (data.code === 0)) {
-								this.dataFrom[item.name] = res.data // <=== 此处需要对接口
+						if (res && res.code === 0) {
+							this.dataForm[item.name] = res.data // <=== 此处需要对接口
 						}
 					})
 				} // end if (item.api)
@@ -193,7 +193,6 @@ export default {
 						this.$set(this.dataFormRules, [item.name], [...item.rules])
 					}
 				} // end if (item.rules)
-				}
 			})
 
 			/** 检查是否需要额外的组件 */
@@ -226,19 +225,75 @@ export default {
 	// }
 	// },
 	methods: {
+		getLabel(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				// if opt is valid
+				return opt.label ? opt.label : this.defaultNames[opt.name]
+			}
+		},
+		getType(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			if (opt) {
+				if (!opt.type || ['input', 'number' /** add more.. */].includes(opt.type)) {
+					return 'input'
+				} else if (['select' /** add more.. */].includes(opt.type)) {
+					return 'select'
+				}
+				// add more...
+			} else {
+				return 'input'
+			}
+		},
 		init() {
 			this.visible = true
 		},
 		handleClick(btn) {
+			this.$refs['dataForm'].validate(valid => {
+				if (valid) {
+					/** 提取url */
+					const urls = {}
+					this.configs.operations.map(item => {
+						urls[item.name] = item.url
+					})
+					/** 操作 */
 					switch (btn.name) {
 						case 'save':
-					break
 						case 'update':
-					break
+							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) {
+									this.$message({
+										message: btn.name === 'save' ? '添加成功!' : '更新成功!',
+										type: 'success',
+										duration: 1500,
+										onClose() {
+											this.$emit('refreshDataList')
+											this.visible = false
+										}
+									})
+								}
+							})
+							return
 						case 'reset':
+							for (const key of Object.keys(this.dataForm)) {
+								if (typeof this.dataForm[key] === 'string') {
+									this.dataForm[key] = ''
+								} else if (this.dataForm[key] instanceof Array) {
+									this.dataForm[key].splice(0)
+								} else {
+									this.dataForm[key] = null
+								}
+							}
+							console.log('after reset: ', JSON.stringify(this.dataForm))
 							break
 						// add more..
 					}
+				}
+			})
 		},
 		handleClose() {
 			if (this.isAdd || this.isUpdated) this.$emit('refreshDataList')
@@ -247,3 +302,9 @@ export default {
 	}
 }
 </script>
+
+<style scoped>
+.super-flexible-dialog >>> .el-select {
+	width: 100%;
+}
+</style>

src/views/main-navbar.vue

@@ -91,9 +91,9 @@ export default {
 			})
 				.then(() => {
 					this.$http
-						.post(this.$http.adornUrl('/doLogout'))
+						.post(this.$http.adornUrl('/logout'))
 						.then(({ data: res }) => {
-							if (res.code !== 200) {
+							if (res.code !== 0) {
 								return this.$message.error(res.msg)
 							}
 							clearLoginInfo()

src/views/modules/monitoring/product.vue

@@ -100,10 +100,12 @@ const addOrUpdateConfigs = {
 		'name',
 		{
 			name: 'code',
-			api: 'xx/code'
+			api: '/monitoring/product/getCode'
 		},
 		{
 			name: 'processTime',
+			label: '加工时间',
+			placeholder: '请输入加工时间',
 			type: 'number', // type: number(input+number) | default(input) | textarea | select(options在父组件里获取) | datetime
 			required: true,
 			rules: [
@@ -120,6 +122,10 @@ const addOrUpdateConfigs = {
 		'specifications',
 		{
 			name: 'typeDictValue',
+			// rules: [
+			// 	{required: true, trigger: 'blur'}
+			// ],
+			label: '产品类型', // 对于非常见属性，最好自己指定label
 			type: 'select',
 			options: [
 				// 动态获取
@@ -129,6 +135,7 @@ const addOrUpdateConfigs = {
 		},
 		{
 			name: 'unitDictValue',
+			label: '单位',
 			type: 'select',
 			options: [
 				// 动态获取

src/views/pages/login.vue

@@ -101,14 +101,20 @@ export default {
 					this.$http
 						.post(this.$http.adornUrl('/login'), this.dataForm)
 						.then(({ data: res }) => {
-							if (res.code !== 200) {
+							if (res.code !== 0) {
 								// this.getCaptcha()
 								return this.$message.error(res.msg)
 							}
 							Cookies.set('token', res.data.token)
 							this.$router.replace({ name: 'home' })
 						})
-						.catch(() => {})
+						.catch((err) => {
+							this.$message({
+								message: err.message,
+								type: 'error',
+								duration: 2000
+							})
+						})
 				})
 			},
 			1000,