init base-detail-page

src/components/base-detail-page/index.vue

@@ -0,0 +1,548 @@
+<template>
+	<div class="super-flexible-dialog" :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" @close="handleClose">
+		<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="getSpan(n, c)">
+						<!-- <el-col v-for="c in COLUMN_PER_ROW" :key="`${n}+'col'+${c}`" :span="24 / COLUMN_PER_ROW"> -->
+						<!-- :class="{ 'hidden-input': configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].hidden }" -->
+						<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="getLabel(n, c)"
+						>
+							<!-- 暂时先不实现部分输入方式 -->
+							<el-input
+								v-if="getType(n, c) === 'input'"
+								:placeholder="getPlaceholder(n, c)"
+								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="getPlaceholder(n, c)"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								clearable
+								@change="emitSelectChange(configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name, $event)"
+							>
+								<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) === 'cascader'"
+								v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"
+								:options="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].options"
+								:props="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+							></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-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+								:placeholder="getPlaceholder(n, c)"
+								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, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
+						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
+						<!-- <component v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" /> -->
+						<component
+							v-else
+							:is="ec.component"
+							v-bind="ec.props"
+							@uploader-update-filelist="handleUploadListUpdate($event, ec.props.extraParams.typeCode)"
+							:uploader-inject-file-list="/*用于设备分流的*/ fileList[ec.props.extraParams.typeCode]"
+						/>
+					</el-form-item>
+				</template>
+			</el-form>
+
+			<template v-if="dataForm.id && configs.subtable">
+				<attr-form :pId="dataForm.id" v-bind="configs.subtable" />
+			</template>
+		</div>
+		<span slot="footer" class="dialog-footer">
+			<template v-for="(operate, index) in configs.operations">
+				<!-- {{ operate.name | btnNameFilter }} -->
+				<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>
+	</div>
+</template>
+
+<script>
+import AttrForm from '../AttrForm'
+import { pick } from 'lodash/object'
+
+// 标题 for i18n
+const title = {
+	detail: '详情',
+	add: '新增',
+	edit: '编辑'
+}
+
+// 或者也可以改造成自定义颜色：
+const btnType = {
+	save: 'success',
+	update: 'primary',
+	reset: 'text'
+	// cancel: 'text'
+	// add more...
+}
+
+const btnName = {
+	// for i18n
+	save: '保存',
+	update: '更新',
+	reset: '重置',
+	cancel: '取消'
+	// add more...
+}
+
+// 每行的列数
+const COLUMN_PER_ROW = 2
+
+export default {
+	name: 'AddOrUpdateDialog',
+	components: { AttrForm },
+	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], 操作名和对应的接口地址，还有permission(如，sys:dict:update)
+			 */
+			type: Object,
+			default: () => ({}) // 此处省去类型检查，使用者自行注意就好
+		}
+	},
+	filters: {
+		nameFilter: function(name) {
+			if (!name) return null
+			// for i18n
+			const defaultNames = {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				description: '描述',
+				specifications: '规格'
+				// add more...
+			}
+
+			return defaultNames[name]
+		}
+	},
+	// provide() {
+	// 	return {
+	// 		_df: this.dataForm
+	// 	}
+	// },
+	data() {
+		return {
+			COLUMN_PER_ROW,
+			title,
+			/** 按钮相关属性 */
+			btnName,
+			btnType,
+			defaultNames: {
+				name: '名称',
+				code: '编码',
+				remark: '备注',
+				description: '描述',
+				specifications: '规格'
+				// add more...
+			},
+			defaultPlaceholders: {}, // 自动根据 defaultNames 计算得来
+			/** 表单相关属性 */
+			visible: false,
+			isEdit: false,
+			isDetail: false,
+			dataForm: {},
+			dataFormRules: {},
+			tempForm: [], // 临时保存自动生成的code，或其他数据
+			shouldWait: null,
+			fileForm: {}, // 文件上传分流用、合并用的表单，根据 typeCode 进行分流，在请求时合并
+			fileList: {} // 文件加载时分流，依据 typeCode
+		}
+	},
+	computed: {
+		rows() {
+			// 本组件只实现了'一行两列'的表单布局
+			return Math.ceil(this.configs.fields.length / COLUMN_PER_ROW)
+		}
+	},
+	mounted() {
+		/** 计算 defaultPlaceholders */
+		const prefix = '请输入'
+		Object.entries(this.defaultNames).map(([key, value]) => {
+			this.defaultPlaceholders[key] = prefix + value
+		})
+
+		/** 转换 configs.fields 的结构，把纯字符串转为对象 */
+		this.$nextTick(() => {
+			this.configs.fields = this.configs.fields.map(item => {
+				if (typeof item === 'string') {
+					return { name: item }
+				}
+				return item
+			})
+
+			/** 动态设置dataForm字段 */
+			this.configs.fields.forEach(item => {
+				this.$set(this.dataForm, [item.name], '')
+
+				/** select 的默认值设置 */
+				if (item.type === 'select') {
+					const opts = item.options || []
+					const dft = opts.find(item => item.default || false)
+					if (dft) {
+						this.$set(this.dataForm, [item.name], dft.value)
+					}
+				}
+
+				if (item.api) {
+					/** 自动请求并填充 */
+					// or this.shouldWaitPool = []
+					this.shouldWait = this.$http({
+						url: this.$http.adornUrl(item.api),
+						method: 'POST' // 也可以改成动态决定
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							// this.dataForm[item.name] = res.data // <=== 此处需要对接口
+							this.tempForm.push({ name: item.name, data: res.data })
+						}
+					})
+				} // end if (item.api)
+
+				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
+						}
+						if (unset) {
+							exists.push(requiredRule)
+						}
+					} 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)
+			})
+
+			/** 计算默认值 */
+			function calDefault(type) {
+				switch (type) {
+					case 'array':
+						return []
+					// more case...
+					default:
+						return ''
+				}
+			}
+			/** 检查是否需要额外的组件 */
+			this.configs.extraComponents &&
+				this.configs.extraComponents.forEach(item => {
+					if (Object.hasOwn(this.dataForm, [item.name])) {
+						console.log('有了!')
+						return
+					} else {
+						console.log('新建！')
+						this.$set(this.dataForm, [item.name], calDefault(item.fieldType))
+					}
+
+					console.log('component: ', item.component)
+				})
+
+			/** 单独设置 id */
+			this.$set(this.dataForm, 'id', null)
+			console.log('mounted: this.dataForm', JSON.stringify(this.dataForm))
+		})
+	},
+
+	methods: {
+		getSpan(n, c) {
+			const opt = this.configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)]
+			return opt && opt.span ? opt.span : 24 / COLUMN_PER_ROW
+		},
+
+		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]
+			}
+		},
+
+		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]
+					? this.defaultPlaceholders[opt.name]
+					: opt.label
+					? (opt.type === 'select' ? '请选择' : '请输入') + opt.label
+					: null
+
+				// : opt.type === 'select'
+				// ? '请选择'
+				// : '请输入'
+			}
+		},
+
+		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'
+				} else if (['cascader'].includes(opt.type)) {
+					return 'cascader'
+				} else if (['date'].includes(opt.type)) {
+					return 'date'
+				}
+				// add more...
+			} else {
+				return 'input'
+			}
+		},
+
+		init(id) {
+			this.visible = true
+			this.$nextTick(() => {
+				this.$refs['dataForm'].resetFields()
+				this.dataForm.id = id || null
+				if (this.dataForm.id) {
+					this.$http({
+						url: this.$http.adornUrl(`${this.configs.infoUrl}/${this.dataForm.id}`),
+						method: 'get'
+					}).then(({ data: res }) => {
+						if (res && res.code === 0) {
+							const dataFormKeys = Object.keys(this.dataForm)
+							console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
+							this.dataForm = pick(res.data, dataFormKeys)
+
+							// LABEL: FILE_RELATED
+							/** 对文件下载进行分流 */
+							this.fileList = {}
+							if (this.dataForm.files) {
+								console.log('files: ', this.dataForm.files)
+								this.dataForm.files.forEach(file => {
+									// const fileName = file.fileUrl.split('/').pop()
+									/** [1] 处理 fileList */
+									if (Object.hasOwn(this.fileList, file.typeCode)) {
+										/** 已存在 */
+										// this.fileList[file.typeCode].push({ id: file.id, name: fileName, typeCode: file.typeCode })
+										this.fileList[file.typeCode].push(file)
+									} else {
+										// this.fileList[file.typeCode] = [{ id: file.id, name: fileName, typeCode: file.typeCode }]
+										this.fileList[file.typeCode] = [file]
+									}
+
+									/** [2] 处理 fileForm */
+									if (Object.hasOwn(this.fileForm, file.typeCode)) {
+										this.fileForm[file.typeCode].push(file.id)
+									} else {
+										this.fileForm[file.typeCode] = [file.id]
+									}
+								})
+								console.log('after分流：', this.fileList)
+							}
+						}
+					})
+				} else {
+					/** 如果不是编辑，就填充自动生成的数据 */
+					if (this.shouldWait)
+						this.shouldWait.then(() => {
+							if (this.tempForm.length) {
+								console.log('create new, tempform', JSON.stringify(this.tempForm.length))
+								this.tempForm.forEach(item => {
+									console.log('item data', item.data)
+									this.dataForm[item.name] = item.data
+								})
+								console.log('create new, dataform', JSON.stringify(this.dataForm))
+							}
+						})
+				}
+			})
+		},
+
+		emitSelectChange(name, id) {
+			this.$emit('select-change', { name, id })
+		},
+
+		handleEditorReady(val) {
+			console.log('editor  rready..', val)
+		},
+
+		handleClick(btn) {
+			/** 提取url */
+			const urls = {}
+			this.configs.operations.map(item => {
+				urls[item.name] = {}
+				urls[item.name].url = item.url
+				urls[item.name].extraFields = item.extraFields || {}
+			})
+			/** 操作 */
+			switch (btn.name) {
+				case 'save':
+				case 'update':
+					/** 需要验证表单的操作 */
+					this.$refs['dataForm'].validate(valid => {
+						if (valid) {
+							/** 对于文件上传的单独处理（合并处理） */
+							if (Object.keys(this.fileForm).length) {
+								console.log('fileform 有值')
+								// LABEL: FILE_RELATED
+								let fileIds = []
+								for (const [key, item] of Object.entries(this.fileForm)) {
+									if (Array.isArray(item)) {
+										fileIds = fileIds.concat(item)
+									} else {
+										console.error('handleClick(): 上传文件数组类型不正确')
+									}
+								}
+								this.$set(this.dataForm, 'fileIds', fileIds)
+							}
+
+							console.log('before send: ', this.dataForm)
+
+							this.$http({
+								url: this.$http.adornUrl(urls[btn.name].url),
+								method: btn.name === 'save' ? 'POST' : 'PUT',
+								data: { ...this.dataForm, ...urls[btn.name].extraFields }
+							})
+								.then(({ data: res }) => {
+									if (res && res.code === 0) {
+										this.$message({
+											message: btn.name === 'save' ? '添加成功!' : '更新成功!',
+											type: 'success',
+											duration: 1500,
+											onClose: () => {
+												this.$emit('refreshDataList')
+												this.visible = false
+											}
+										})
+									} else {
+										this.$message.error(res.msg)
+									}
+								})
+								.catch(err => {
+									this.$message({
+										message: err,
+										type: 'error',
+										duration: 2000
+									})
+								})
+						}
+					})
+					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
+						}
+					}
+					break
+				case 'cancel':
+					this.visible = false
+				// add more..
+			}
+		},
+
+		// LABEL: FILE_RELATED
+		handleUploadListUpdate(filelist, typeCode = 'DefaultTypeCode') {
+			console.log('before handleUploadListUpdate(): ', JSON.parse(JSON.stringify(this.fileForm)))
+			// 设备类型 typeCode: EquipmentTypeFile
+			// 设备信息 typeCode: EquipmentInfoFile | EquipmentInfoImage
+
+			// 原先写法：直接更新 dataForm 对象，不适用于有多个上传组件的需求
+			// this.$set(
+			// 	this.dataForm,
+			// 	'fileIds',
+			// 	filelist.map(item => item.id)
+			// )
+			// console.log('handleUploadListUpdate(): ', this.dataForm)
+			// 现更改为分流写法
+			this.$set(
+				this.fileForm,
+				typeCode,
+				filelist.map(item => item.id)
+			)
+			console.log('after handleUploadListUpdate(): ', this.fileForm)
+		},
+
+		handleClose() {
+			this.$emit('destory-dialog')
+			this.visible = false
+		}
+	}
+}
+</script>
+
+<style scoped>
+.super-flexible-dialog >>> .el-select,
+.super-flexible-dialog >>> .el-cascader {
+	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;
+}
+
+.super-flexible-dialog >>> .hidden-input {
+	display: none;
+}
+</style>