Эх сурвалжийг харах

fix: 修复设备档案树形的树节点显示

yanglzh 8 сар өмнө
parent
commit
6896bbe78e

+ 41 - 17
src/views/iot/property/attribute/index.vue

@@ -28,15 +28,23 @@
 			</el-form-item>
 			</el-form-item>
 		</el-form>
 		</el-form>
 		<div class="page page-full-part flex-row gap-4">
 		<div class="page page-full-part flex-row gap-4">
-			<el-card style="width: 250px;" shadow="nover">
-				<el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" :node-key="'id'" highlight-current>
+			<el-card style="width: 250px" shadow="nover">
+				<el-tree
+					:data="mergedData"
+					:props="defaultProps"
+					accordion
+					default-expand-all
+					@node-click="handleNodeClick"
+					:node-key="'id'"
+					highlight-current
+				>
 					<template #default="{ node, data }">
 					<template #default="{ node, data }">
 						<div class="custom-tree-node">
 						<div class="custom-tree-node">
 							<span class="tree-label">
 							<span class="tree-label">
 								<el-icon v-if="data.is_type != '2'">
 								<el-icon v-if="data.is_type != '2'">
 									<Folder />
 									<Folder />
 								</el-icon>
 								</el-icon>
-								<SvgIcon name="iconfont icon-siweidaotu" v-if="data.is_type == '2'"></SvgIcon>
+								<SvgIcon name="iconfont icon-siweidaotu" v-else></SvgIcon>
 								{{ node.label }}
 								{{ node.label }}
 							</span>
 							</span>
 						</div>
 						</div>
@@ -59,7 +67,13 @@
 							</template>
 							</template>
 						</el-table-column>
 						</el-table-column>
 					</el-table>
 					</el-table>
-					<pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+					<pagination
+						v-if="params.total"
+						:total="params.total"
+						v-model:page="params.pageNum"
+						v-model:limit="params.pageSize"
+						@pagination="getList()"
+					/>
 				</div>
 				</div>
 			</el-card>
 			</el-card>
 		</div>
 		</div>
@@ -70,7 +84,7 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
 import device from '/@/api/device'
 import device from '/@/api/device'
 import { useSearch } from '/@/hooks/useCommon'
 import { useSearch } from '/@/hooks/useCommon'
-import { Folder } from '@element-plus/icons-vue';
+import { Folder } from '@element-plus/icons-vue'
 
 
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import EditForm from './edit.vue'
 import EditForm from './edit.vue'
@@ -91,16 +105,16 @@ const productData = ref([])
 const mergedData = ref()
 const mergedData = ref()
 const cateData = ref()
 const cateData = ref()
 const editFormRef = ref()
 const editFormRef = ref()
-const productIno = ref();
+const productIno = ref()
 const ids = ref<number[]>([])
 const ids = ref<number[]>([])
 
 
 const { params, tableData, getList, loading } = useSearch<any[]>(device.dev_asset_metadata.getList, 'Data', { keyWord: '' })
 const { params, tableData, getList, loading } = useSearch<any[]>(device.dev_asset_metadata.getList, 'Data', { keyWord: '' })
 onMounted(() => {
 onMounted(() => {
 	getCateList()
 	getCateList()
-});
+})
 const handleSelectionChange = (selection: any[]) => {
 const handleSelectionChange = (selection: any[]) => {
-	ids.value = selection.map((item) => item.id);
-};
+	ids.value = selection.map((item) => item.id)
+}
 const addOrEdit = async (row?: any) => {
 const addOrEdit = async (row?: any) => {
 	if (row) {
 	if (row) {
 		editFormRef.value.open(row, productIno.value)
 		editFormRef.value.open(row, productIno.value)
@@ -112,24 +126,24 @@ const addOrEdit = async (row?: any) => {
 
 
 const getCateList = () => {
 const getCateList = () => {
 	device.category.getList({}).then((res: any) => {
 	device.category.getList({}).then((res: any) => {
-		cateData.value = res.category;
+		cateData.value = res.category
 
 
 		device.product.getLists({}).then((res: any) => {
 		device.product.getLists({}).then((res: any) => {
-			productData.value = res.product;
+			productData.value = res.product
 			params.productKey = res.product[0].key
 			params.productKey = res.product[0].key
 			getList()
 			getList()
-			mergedData.value = matchProductsToCategories(productData.value, cateData.value);
-		});
+			mergedData.value = matchProductsToCategories(productData.value, cateData.value)
+		})
 	})
 	})
 }
 }
 
 
 const handleNodeClick = (data: any) => {
 const handleNodeClick = (data: any) => {
 	if (data.is_type === '2') {
 	if (data.is_type === '2') {
-		productIno.value = data;
+		productIno.value = data
 		params.productKey = data.key
 		params.productKey = data.key
 		getList()
 		getList()
 	} else {
 	} else {
-		productIno.value = '';
+		productIno.value = ''
 	}
 	}
 }
 }
 
 
@@ -152,6 +166,17 @@ const buildTree = (category: any, productData: any) => {
 	}
 	}
 
 
 	if (category.children && category.children.length > 0) {
 	if (category.children && category.children.length > 0) {
+		const products = productData.filter((product: any) => product.categoryId === category.id)
+		for (let product of products) {
+			const productNode = {
+				id: product.id,
+				label: product.name,
+				key: product.key,
+				is_type: '2', // 2是产品
+			}
+			treeNode.children.push(productNode)
+		}
+
 		for (let child of category.children) {
 		for (let child of category.children) {
 			const childNode = buildTree(child, productData)
 			const childNode = buildTree(child, productData)
 			treeNode.children.push(childNode)
 			treeNode.children.push(childNode)
@@ -193,7 +218,6 @@ const del = (row: any) => {
 		getList()
 		getList()
 	})
 	})
 }
 }
-
 </script>
 </script>
 <style scoped lang="scss">
 <style scoped lang="scss">
 .custom-tree-node {
 .custom-tree-node {
@@ -219,4 +243,4 @@ const del = (row: any) => {
 		}
 		}
 	}
 	}
 }
 }
-</style>
+</style>