update README

AddOrUpdateConfig.md

@@ -152,3 +152,15 @@ const addOrUpdateConfigs = {
     - subcomponent: 同 base-table 的 subcomponent
     - options: 表格操作列需要哪些操作
       - 值：`edit` | `delete` | `detail`，需要其他可自行添加（修改 base-table 组件）
+
+### extraComponents
+含义: 需要在对话框里使用的自定义组件列表
+类型: Array<object>
+对象选项：
+ - name: 该组件对应的 dataForm 字段（需要参照后端文档来指定）
+ - hasModel: boolean, 上传组件一般设置为 false，设置是否和 dataForm 关联
+ - label
+ - fieldType: 设置该组件的数据将以什么数据类型形式来保存
+ - component: 组件
+ - props 传给组件的配置
+ 

package-lock.json

@@ -5283,6 +5283,19 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "ckeditor4-integrations-common": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ckeditor4-integrations-common/-/ckeditor4-integrations-common-1.0.0.tgz",
+      "integrity": "sha512-OAoQT/gYrHkg0qgzf6MS/rndYhq3SScLVQ3rtXQeuCE8ju7nFHg3qZ7WGA2XpFxcZzsMP6hhugXqdel5vbcC3g=="
+    },
+    "ckeditor4-vue": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ckeditor4-vue/-/ckeditor4-vue-2.1.1.tgz",
+      "integrity": "sha512-BBmpT1BYxOmaA+qy9+hvhG0tDYCGqFve1eDSol0ZNwWCm1hZvmPAke809AhkHFUjb834dbNRlTwH3c2qedjtkQ==",
+      "requires": {
+        "ckeditor4-integrations-common": "^1.0.0"
+      }
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.19.2",
     "babel-eslint": "^8.0.1",
     "babel-plugin-component": "^1.1.1",
+    "ckeditor4-vue": "^2.1.1",
     "core-js": "^3.6.5",
     "element-theme": "^2.0.1",
     "element-ui": "^2.15.7",

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

@@ -4,7 +4,8 @@
 			<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-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)]"
@@ -37,16 +38,27 @@
 								: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-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
+							<el-date-picker
+								v-if="getType(n, c) === 'date'"
+								v-bind="configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].props"
+								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">
+					<el-form-item v-for="(ec, index) in configs.extraComponents" :key="ec.name + index" :label="ec.label" class="extra-components">
-						<!-- <component :is="ec.component" v-model="dataForm[ec.name]"></component> -->
+						<component style="margin-top: 40px;" v-if="ec.hasModel" :is="ec.component" v-bind="ec.props" v-model="dataForm[ec.name]" @ready="handleEditorReady" />
-						<component :is="ec.component" v-bind="ec.props" />
+						<!-- <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>
@@ -137,6 +149,11 @@ export default {
 			return defaultNames[name]
 		}
 	},
+	// provide() {
+	// 	return {
+	// 		_df: this.dataForm
+	// 	}
+	// },
 	data() {
 		return {
 			COLUMN_PER_ROW,
@@ -160,7 +177,9 @@ export default {
 			dataForm: {},
 			dataFormRules: {},
 			tempForm: [], // 临时保存自动生成的code，或其他数据
-			shouldWait: null
+			shouldWait: null,
+			fileForm: {}, // 文件上传分流用、合并用的表单，根据 typeCode 进行分流，在请求时合并
+			fileList: {} // 文件加载时分流，依据 typeCode
 		}
 	},
 	computed: {
@@ -236,18 +255,42 @@ export default {
 				} // end if (item.rules)
 			})
 
+			/** 计算默认值 */
+			function calDefault(type) {
+				switch (type) {
+					case 'array':
+						return []
+					// more case...
+					default:
+						return ''
+				}
+			}
 			/** 检查是否需要额外的组件 */
 			this.configs.extraComponents &&
 				this.configs.extraComponents.forEach(item => {
-					this.$set(this.dataForm, [item.name], '')
+					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) {
@@ -283,6 +326,8 @@ export default {
 					return 'select'
 				} else if (['cascader'].includes(opt.type)) {
 					return 'cascader'
+				} else if (['date'].includes(opt.type)) {
+					return 'date'
 				}
 				// add more...
 			} else {
@@ -302,7 +347,35 @@ export default {
 					}).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 {
@@ -310,15 +383,22 @@ export default {
 					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))
 							}
 						})
 				}
 			})
 		},
 
+		handleEditorReady(val) {
+			console.log('editor  rready..', val)
+		},
+
 		handleClick(btn) {
 			/** 提取url */
 			const urls = {}
@@ -334,6 +414,23 @@ export default {
 					/** 需要验证表单的操作 */
 					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',
@@ -381,6 +478,28 @@ export default {
 			}
 		},
 
+		// 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

src/components/base-upload/index.vue

@@ -1,6 +1,17 @@
 <template>
 	<div class="base-upload" style="border-radius: 8px; margin-top: 38px; padding: 0; max-height: 500px;">
-		<el-upload class="yd-upload" action="#" :http-request="handleUpload" multiple :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove">
+		<el-upload
+			class="yd-upload"
+			action="#"
+			:http-request="handleUpload"
+			multiple
+			:file-list="fileList"
+			:on-preview="handleDownload"
+			:on-remove="handleRemove"
+			:before-upload="/.*?image.*?/i.test(extraParams.typeCode) ? validateImage : validateFile"
+		>
+			<!-- :before-remove="beforeRemove" -->
+			<!-- accept="image/*" -->
 			<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
 			<el-button size="small" type="primary">{{ buttonContent }}</el-button>
 			<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
@@ -9,6 +20,8 @@
 </template>
 
 <script>
+import { pick } from 'lodash/object'
+
 export default {
 	name: 'BaseUpload',
 	props: {
@@ -21,13 +34,40 @@ export default {
 		extraParams: {
 			type: Object,
 			default: () => ({})
+		},
+		uploaderInjectFileList: {
+			// 从外部传进来 fileList，用于展示文件列表用
+			type: Array,
+			default: () => []
 		}
 	},
+	// inject: {
+	// 	parentDataForm: "_df"
+	// },
 	data() {
 		return {
 			fileList: []
 		}
 	},
+	mounted() {
+		this.fileList.splice(0)
+
+		this.$watch('uploaderInjectFileList', function(val) {
+			if (val && val.length) {
+				console.log('this.uploaderInjectFileList', this.uploaderInjectFileList)
+				/** uploaderInjectFileList 里关于文件的信息比较全，需要手动过滤一下 */
+				this.fileList = val.map(item => {
+					const name = item.fileUrl.split('/').pop()
+					return { ...pick(item, ['id', 'fileName', 'typeCode']), name }
+				})
+			}
+			console.log('fillist: ', this.fileList)
+		})
+
+		// if (this.parentDataForm) {
+		// 	console.log('parent dataform: ', this.parentDataForm)
+		// }
+	},
 	methods: {
 		/** 自定义上传行为 */
 		handleUpload(file) {
@@ -44,19 +84,93 @@ export default {
 				}
 			}).then(({ data: res }) => {
 				if (res && res.code === 0) {
-          console.log(this.fileList)
+					res.data.forEach(item => {
-          this.fileList.splice(0)
+						const ext = item.fileUrl.split('.').reverse()[0]
-          res.data.forEach(item => {
+						const name = `${item.fileName}.${ext}`
-            this.fileList.push(item) // <== 此处的数据结构可能要调整
+						this.fileList.push({ ...pick(item, ['id', 'fileName', 'typeCode']), name })
-          })
+					})
-          // TODO: 在新增和更新阶段，带入 files[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
+					// TODO: 在新增和更新阶段，带入 fileIds[] 数组给后端，就可完成文件和设备类型的绑定、删除操作
-        }
+					this.$emit('uploader-update-filelist', this.fileList)
+				}
 			})
 		},
-		beforeRemove(file, filelist) {
+
-			return this.$confirm(`确定移除 ${file.name}?`)
+		/** 大小验证，由配置文件开启 */
+		validateFile(file) {
+			console.log('[*] 验证文件大小')
+
+			const isRightSize = file.size / 1024 / 1024 < 2
+			if (!isRightSize) {
+				// this.$message.error(this.$t('upload.picSizeAlarm'))
+				this.$message.error('文件不应超过 2MB')
+			}
+			return isRightSize
 		},
-		handleRemove(file, filelist) {}
+
+		/** 图片验证，由配置文件开启 */
+		validateImage(file) {
+			console.log('[*] 验证图片')
+
+			const isRightSize = file.size / 1024 / 1024 < 2
+			if (!isRightSize) {
+				this.$message.error('文件不应超过 2MB')
+				// this.$message.error(this.$t('upload.picSizeAlarm'))
+			}
+
+			const isAccept = new RegExp('image/*').test(file.type)
+			if (!isAccept) {
+				// this.$message.error(this.$t('upload.picAlarm'))
+				this.$message.error('只允许上传图片')
+			}
+			return isRightSize && isAccept
+		},
+
+		/** 点击下载 */
+		handleDownload({ id: fileId, name: fileName }) {
+			const type = {
+				download: 1,
+				preview: 0
+			}
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/attachment/downloadFile'),
+				method: 'get',
+				params: this.$http.adornParams({
+					attachmentId: fileId,
+					type: type.download
+					// fileName,
+					// outputQuality,
+					// scale
+				}),
+				responseType: 'blob'
+			}).then(({ data: res }) => {
+				const blob = new Blob([res])
+				console.log('blob', blob)
+				if ('download' in document.createElement('a')) {
+					const alink = document.createElement('a')
+					console.log('filename: ', fileName)
+					alink.download = fileName
+					alink.style.display = 'none'
+					alink.target = '_blank'
+					alink.href = URL.createObjectURL(blob)
+					console.log('下载地址：', alink.href)
+					document.body.appendChild(alink)
+					alink.click()
+					URL.revokeObjectURL(alink.href)
+					document.body.removeChild(alink)
+				} else {
+					navigator.msSaveBlob(blob, fileName)
+				}
+			})
+		},
+
+		// beforeRemove(file, filelist) {
+		// 	return this.$confirm(`确定移除 ${file.name}?`)
+		// },
+
+		handleRemove(file, filelist) {
+			// 把更新后的 fileList 传递出去
+			this.$emit('uploader-update-filelist', filelist)
+		}
 	}
 }
 </script>

src/views/modules/monitoring/equipment.vue

@@ -6,12 +6,12 @@
 			</el-form-item>
 			<el-form-item>
 				<el-button @click="getDataList()">查询</el-button>
+				<el-button @click="test()">test</el-button>
 				<el-button v-if="$hasPermission('monitoring:equipment:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-				
 			</el-form-item>
 		</el-form>
 
-		<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"
 			@current-change="currentChangeHandle"
@@ -22,41 +22,150 @@
 			layout="total, sizes, prev, pager, next, jumper"
 		></el-pagination>
 		<!-- 弹窗, 新增 / 修改 -->
-		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :configs="addOrUpdateConfigs" @refreshDataList="getDataList" @destory-dialog="addOrUpdateVisible = false" />
 	</div>
 </template>
 
 <script>
-import AddOrUpdate from './equipment-add-or-update'
+import AddOrUpdate from '@/components/base-dialog/addOrUpdate'
+// import AddOrUpdate from './equipment-add-or-update'
 import BaseTable from '@/components/base-table'
 import TableOperateComponent from '@/components/base-table/components/operationComponent'
 import TableTextComponent from '@/components/base-table/components/detailComponent'
+import moment from 'moment'
+import CKEditor from 'ckeditor4-vue'
 
 const tableConfigs = [
 	{
 		type: 'index',
-		name: '序号',
+		name: '序号'
-		more: {
+		// more: {
-			index: function(index) {
+		// 	index: function(index) {
-				return (index + 1) * 2
+		// 		return (index + 1) * 2
-			}
+		// 	}
-		}
+		// }
 	},
-	{ prop: 'createTime', name: '添加时间' },
+	{ prop: 'createTime', name: '添加时间', filter: val => moment(val).format('YYYY-MM-DD HH:mm:ss') },
 	{ prop: 'name', name: '设备名称' },
 	{ prop: 'code', name: '设备编码' },
-	{ prop: 'equipmentTypeId', name: '设备类型' },
+	{ prop: 'equipmentTypeName', name: '设备类型' },
-	{ prop: 'groupId', name: '设备分组' },
+	{ prop: 'groupName', name: '设备分组' },
 	{ prop: 'enName', name: '英文名称' },
 	{ prop: 'abbr', name: '缩写' },
-	{ prop: 'details', name: '详情', subcomponent: TableTextComponent },
+	{ prop: 'details', name: '详情', subcomponent: TableTextComponent, actionName: 'view-detail' },
 	{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['edit', 'delete'] }
 ]
 
+const addOrUpdateConfigs = {
+	type: 'dialog',
+	infoUrl: '/monitoring/equipment',
+	fields: [
+		{ name: 'name', label: '设备名称', required: true },
+		{ name: 'code', label: '设备编码' },
+		{ name: 'enName', label: '英文名称' },
+		{ name: 'abbr', label: '缩写' },
+		{ name: 'equipmentTypeId', label: '设备类型', required: true, type: 'select', options: [] },
+		{ name: 'groupId', label: '设备分组', required: true, type: 'select', options: [] },
+		{
+			name: 'productionTime',
+			label: '生产日期',
+			type: 'date',
+			props: {
+				'type': 'date', // element-ui 的配置
+				'placeholder': '请选择日期',
+				'value-format': 'yyyy-MM-ddTHH:mm:ss',
+				'style': {
+					width: '100%'
+				}
+			}
+		},
+		{
+			name: 'enterTime',
+			label: '进厂日期',
+			type: 'date',
+			props: {
+				'type': 'date', // element-ui 的配置
+				'placeholder': '请选择日期',
+				'value-format': 'yyyy-MM-ddTHH:mm:ss',
+				'style': {
+					width: '100%'
+				}
+			}
+		},
+		{ name: 'tvalue', label: '设备TT值', required: true, rules: [{ type: 'number', message: '请输入正确的浮点值', trigger: 'blur', transform: val => Number(val) }] },
+		{ name: 'processingTime', label: '单件产品加工时间(秒)', rules: [{ type: 'number', message: '请输入正确的数值', trigger: 'blur', transform: val => Number(val) }] },
+		{ name: 'manufacturer', label: '制造商' },
+		{ name: 'spec', label: '设备规格' },
+		{
+			name: 'dataType',
+			label: '数据类别',
+			required: true,
+			type: 'select',
+			options: [
+				{ value: 0, label: '无类别' },
+				{ value: 1, label: '上片数据设备' },
+				{ value: 2, label: '下片数据设备' }
+			]
+		},
+		{ name: 'remark', label: '备注 ' }
+	],
+	// TODO: 富文本  √
+	// TODO: 设备资料上传 √
+	// TODO: 设备图片上传 √
+	extraComponents: [
+		{
+			name: 'description',
+			hasModel: true,
+			label: '功能描述',
+			fieldType: 'string',
+			component: CKEditor.component,
+			props: {
+				value: 'tests',
+				config: {
+					// ckeditor 的配置: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
+					// toolbar: [['Bold']]
+				}
+			}
+		},
+		{
+			name: 'files',
+			label: '上传资料',
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentInfoFile' },
+				buttonContent: '点击上传',
+				tip: '上传文件大小不要超过 2mb (2048kb)'
+			}
+		},
+		{
+			name: 'files',
+			label: '设备图片',
+			fieldType: 'array',
+			component: () => import('@/components/base-upload'),
+			props: {
+				// 上传组件需要的 props
+				url: '/monitoring/attachment/uploadFileFormData',
+				extraParams: { typeCode: 'EquipmentInfoImage' },
+				buttonContent: '点击上传',
+				tip: '上传图片文件，且大小不要超过 2mb (2048kb)'
+			}
+		}
+	],
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{ name: 'save', url: '/monitoring/equipment', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipment', permission: '', showOnEdit: true }
+	]
+}
+
 export default {
 	data() {
 		return {
 			tableConfigs,
+			addOrUpdateConfigs,
 			dataForm: {
 				key: ''
 			},
@@ -76,8 +185,40 @@ export default {
 	activated() {
 		console.log('activated')
 		this.getDataList()
+		this.getGroupList()
+		this.getTypeList()
 	},
 	methods: {
+		// 获取设备类型列表
+		getTypeList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentType/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const eqTypeConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'equipmentTypeId')
+				eqTypeConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
+		// 获取设备分组列表
+		getGroupList() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentGroup/page'),
+				method: 'get',
+				params: this.$http.adornParams({
+					// page: this.pageIndex,
+					// limit: this.pageSize,
+					// key: this.dataForm.key
+				})
+			}).then(({ data }) => {
+				const groupConfig = this.addOrUpdateConfigs.fields.find(item => item.name === 'groupId')
+				groupConfig.options = data.data?.list?.map(item => ({ value: item.id, label: item.name })) || []
+			})
+		},
 		// 获取数据列表
 		getDataList() {
 			this.dataListLoading = true
@@ -115,12 +256,42 @@ export default {
 		selectionChangeHandle(val) {
 			this.dataListSelections = val
 		},
+		handleOperations({ type, data: id }) {
+			switch (type) {
+				case 'view-detail':
+					// const { name, code } = this.dataList.find(item => item.id === id)
+					this.$router.push({
+						name: 'monitoring-equipmentAdd',
+						params: {
+							isdetail: true,
+							equipmentId: id
+						}
+					})
+					break
+				case 'edit':
+					return this.addOrUpdateHandle(id)
+				case 'delete':
+					return this.deleteHandle(id)
+			}
+		},
+		test() {
+			this.addOrUpdateVisible = true
+			this.$nextTick(() => {
+				this.$refs.addOrUpdate.init()
+			})
+		},
 		// 新增 / 修改
 		addOrUpdateHandle(id) {
 			this.addOrUpdateVisible = true
 			this.$nextTick(() => {
 				this.$refs.addOrUpdate.init(id)
 			})
+			// this.$router.push({
+			// 	name: 'monitoring-equipmentAdd',
+			// 	params: {
+			// 		equipmentId: id
+			// 	}
+			// })
 		},
 		// 删除
 		deleteHandle(id) {

src/views/modules/monitoring/equipmentAdd.vue

@@ -0,0 +1,32 @@
+<template>
+	<div class="equipment-add">
+		<h2>{{ $route.params.isdetail ? '查看详情' : $route.params.equipmentId ? '编辑' : '新增' }}</h2>
+		<p>id: {{ $route.params.equipmentId }}</p>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'EquipmentAdd',
+	props: {},
+	data() {
+		return {}
+	},
+	watch: {
+		'$route.params': function(val, oldVal) {}
+	},
+	methods: {}
+}
+</script>
+
+<style scoped>
+.equipment-add {
+	background: #fff;
+	padding: 12px;
+	min-height: 50vh;
+}
+
+h2 {
+	margin: 8px 0;
+}
+</style>

src/views/modules/monitoring/equipmentType.vue

@@ -81,12 +81,13 @@ const addOrUpdateConfigs = {
 	],
 	extraComponents: [
 		{
-			name: 'file-upload-key',
+			name: 'files',
+			fieldType: 'array',
 			label: '上传资料',
 			component: () => import('@/components/base-upload'),
 			props: { // 上传组件需要的 props
 				url: "/monitoring/attachment/uploadFileFormData",
-				extraParams: { typeCode: 123 },
+				extraParams: { typeCode: "EquipmentTypeFile" },
 				buttonContent: '点击上传',
 				tip: '上传文件大小不要超过 2mb (2048kb)'
 			}