lb #1
@@ -1,41 +1,28 @@
 | 
			
		||||
<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 || configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]"
 | 
			
		||||
						: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]"
 | 
			
		||||
						/>
 | 
			
		||||
						<el-radio v-if="getType(n, c) === 'radio'"></el-radio>
 | 
			
		||||
						<el-checkbox v-if="getType(n, c) === 'check'"></el-checkbox>
 | 
			
		||||
						<el-select v-if="getType(n, c) === 'select'" :placeholder="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].placeholder || ''"></el-select>
 | 
			
		||||
						<el-switch v-if="getType(n, c) === 'switch'"></el-switch>
 | 
			
		||||
						<el-cascader v-if="getType(n, c) === 'tree'"></el-cascader>
 | 
			
		||||
						<el-time-select v-if="getType(n, c) === 'time'"></el-time-select>
 | 
			
		||||
						<el-date-picker v-if="getType(n, c) === 'date'"></el-date-picker>
 | 
			
		||||
					</el-form-item>
 | 
			
		||||
				</el-col>
 | 
			
		||||
			</el-row>
 | 
			
		||||
@@ -140,6 +127,14 @@ export default {
 | 
			
		||||
			// 本组件只实现了'一行两列'的表单布局
 | 
			
		||||
			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
 | 
			
		||||
		}
 | 
			
		||||
		// computedModel: {
 | 
			
		||||
		// 	get(n, c) {
 | 
			
		||||
		// 		return this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name
 | 
			
		||||
		// 			? dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]
 | 
			
		||||
		// 			: dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]]
 | 
			
		||||
		// 	},
 | 
			
		||||
		// 	set() {}
 | 
			
		||||
		// }
 | 
			
		||||
	},
 | 
			
		||||
	mounted() {
 | 
			
		||||
		this.$nextTick(() => {
 | 
			
		||||
@@ -226,6 +221,26 @@ 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 typeof opt === 'string' ? this.defaultNames[opt] : 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
 | 
			
		||||
		},
 | 
			
		||||
@@ -247,3 +262,9 @@ export default {
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style scoped>
 | 
			
		||||
.super-flexible-dialog >>> .el-select {
 | 
			
		||||
	width: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -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()
 | 
			
		||||
 
 | 
			
		||||
@@ -104,6 +104,8 @@ const addOrUpdateConfigs = {
 | 
			
		||||
		},
 | 
			
		||||
		{
 | 
			
		||||
			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: [
 | 
			
		||||
				// 动态获取
 | 
			
		||||
 
 | 
			
		||||
@@ -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,
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user