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

@@ -30,7 +30,12 @@
 								<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) === 'tree'" v-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-cascader>
+							<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-model="dataForm[configs.fields[(n - 1) * COLUMN_PER_ROW + (c - 1)].name]"></el-date-picker>
 						</el-form-item>
@@ -275,6 +280,8 @@ export default {
 					return 'input'
 				} else if (['select' /** add more.. */].includes(opt.type)) {
 					return 'select'
+				} else if (['cascader'].includes(opt.type)) {
+					return 'cascader'
 				}
 				// add more...
 			} else {
@@ -329,7 +336,7 @@ export default {
 							this.$http({
 								url: this.$http.adornUrl(urls[btn.name].url),
 								method: btn.name === 'save' ? 'POST' : 'PUT',
-								data: { ...this.dataForm, ...urls[btn.name].extraFields}
+								data: { ...this.dataForm, ...urls[btn.name].extraFields }
 							})
 								.then(({ data: res }) => {
 									if (res && res.code === 0) {
@@ -382,7 +389,8 @@ export default {
 </script>
 
 <style scoped>
-.super-flexible-dialog >>> .el-select {
+.super-flexible-dialog >>> .el-select,
+.super-flexible-dialog >>> .el-cascader {
 	width: 100%;
 }
 

src/views/modules/monitoring/equipmentType.vue

@@ -71,10 +71,14 @@ const addOrUpdateConfigs = {
 	fields: [
 		{ name: 'name', label: '设备类型名称' },
 		{ name: 'code', label: '设备类型编码', api: '/monitoring/equipmentType/getCode' },
-		{ name: 'parentId', label: '父类', type: 'tree' },
+		{ name: 'parentId', label: '父类', type: 'cascader', props: { label: 'name', value: 'id', checkStrictly: true, emitPath: false }, options: [] },
 		'remark'
 	],
-	operations: [],
+	operations: [
+		{ name: 'cancel', showAlways: true },
+		{ name: 'save', url: '/monitoring/equipmentType', permission: '', showOnEdit: false },
+		{ name: 'update', url: '/monitoring/equipmentType', permission: '', showOnEdit: true }
+	],
 	extraComponents: null
 }
 
@@ -100,9 +104,23 @@ export default {
 		BaseTable
 	},
 	activated() {
+		this.getTreeEquipmentType()
 		this.getDataList()
 	},
 	methods: {
+		// 获取设备类型树形数据
+		getTreeEquipmentType() {
+			this.$http({
+				url: this.$http.adornUrl('/monitoring/equipmentType/getTree'),
+				method: 'post'
+			}).then(({ data: res }) => {
+				if (res && res.code === 0 && res.data.length) {
+					this.addOrUpdateConfigs.fields.find(item => item.name === 'parentId').options = res.data
+				} else {
+					this.addOrUpdateConfigs.fields.find(item => item.name === 'parentId').options.splice(0)
+				}
+			})
+		},
 		// 获取数据列表
 		getDataList() {
 			this.addOrUpdateVisible = false
@@ -151,6 +169,8 @@ export default {
 		},
 		// 新增 / 修改
 		addOrUpdateHandle(id) {
+			// 更新树形结构
+			this.getTreeEquipmentType()
 			this.addOrUpdateVisible = true
 			this.$nextTick(() => {
 				this.$refs.addOrUpdate.init(id)