finish 基本完成dialog“

update 改版完成
update 对dialog进行改版之前
2022-08-09 16:54:45 +08:00 · 2022-08-09 16:24:18 +08:00 · 2022-08-09 16:16:34 +08:00
4 changed files with 164 additions and 90 deletions
--- a/src/components/base-dialog/addOrUpdate/index.vue
+++ b/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,57 +138,61 @@ 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'
-						}).then(({ data: res }) => {
-							if (data & (data.code === 0)) {
-								this.dataFrom[item.name] = res.data // <=== 此处需要对接口
-							}
-						})
-					} // end if (item.api)
+				this.$set(this.dataForm, [item.name], '')
+				if (item.api) {
+					/** 自动请求并填充 */
+					this.$http({
+						url: this.$http.adornUrl(item.api),
+						method: 'POST' // 也可以改成动态决定
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							this.dataForm[item.name] = res.data // <=== 此处需要对接口
+						}
+					})
+				} // end if (item.api)

-					if (item.required) {
-						const requiredRule = {
-							required: true,
-							message: '请输入必填项',
-							trigger: 'change'
+				if (item.required) {
+					const requiredRule = {
+						required: true,
+						message: '请输入必填项',
+						trigger: 'change'
+					}
+					/** 检查是否已经存在该字段的规则 */
+					const exists = this.dataFormRules[item.name] || null
+					/** 设置验证规则  */
+					if (exists) {
+						const unset = true
+						for (const rule of exists) {
+							if (rule.required) unset = false
 						}
-						/** 检查是否已经存在该字段的规则 */
-						const exists = this.dataFormRules[item.name] || null
-						/** 设置验证规则  */
-						if (exists) {
-							const unset = true
-							for (const rule of exists) {
-								if (rule.required) unset = false
-							}
-							if (unset) {
-								exists.push(requiredRule)
-							}
-						} else {
-							/** 不存在已有规则 */
-							this.$set(this.dataFormRules, [item.name], [requiredRule])
+						if (unset) {
+							exists.push(requiredRule)
 						}
-					} // end if (item.required)
+					} else {
+						/** 不存在已有规则 */
+						this.$set(this.dataFormRules, [item.name], [requiredRule])
+					}
+				} // end if (item.required)

-					if (item.rules) {
-						const exists = this.dataFormRules[item.name] || null
-						if (exists) {
-							// 浅拷贝过去
-							exists.push(...item.rules)
-						} else {
-							this.$set(this.dataFormRules, [item.name], [...item.rules])
-						}
-					} // end if (item.rules)
-				}
+				if (item.rules) {
+					const exists = this.dataFormRules[item.name] || null
+					if (exists) {
+						// 浅拷贝过去
+						exists.push(...item.rules)
+					} else {
+						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) {
-			switch (btn.name) {
-				case 'save':
-					break
-				case 'update':
-					break
-				case 'reset':
-					break
-				// add more..
-			}
+			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':
+						case 'update':
+							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>
--- a/src/views/main-navbar.vue
+++ b/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()
--- a/src/views/modules/monitoring/product.vue
+++ b/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: [
 				// 动态获取
--- a/src/views/pages/login.vue
+++ b/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,
Author	SHA1	Message	Date
g7hoo	cfec6ff3f5	finish 基本完成dialog“	2022-08-09 16:54:45 +08:00
g7hoo	5d8f537d05	update 改版完成	2022-08-09 16:24:18 +08:00
g7hoo	669c8f90c6	update 对dialog进行改版之前	2022-08-09 16:16:34 +08:00