|
@@ -30,14 +30,16 @@
|
|
</el-form>
|
|
</el-form>
|
|
<el-row :gutter="16">
|
|
<el-row :gutter="16">
|
|
<el-col :span="6">
|
|
<el-col :span="6">
|
|
- <el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" style="border: 1px solid #eee;padding: 10px;margin-right: 10px;">
|
|
|
|
|
|
+ <el-tree :data="mergedData" :props="defaultProps" accordion default-expand-all @node-click="handleNodeClick" style="border: 1px solid #eee;padding: 10px;margin-right: 10px;" class="mt-4" :default-expand-all="true" :node-key="'id'" highlight-current>
|
|
<template #default="{ node, data }">
|
|
<template #default="{ node, data }">
|
|
- <span :style="data.is_type === '2' ? { color: '#409eff' } : {}">
|
|
|
|
- <el-icon v-if="data.is_type == '2'">
|
|
|
|
- <Expand />
|
|
|
|
- </el-icon>
|
|
|
|
- {{ node.label }}
|
|
|
|
- </span>
|
|
|
|
|
|
+ <div class="custom-tree-node">
|
|
|
|
+ <span class="tree-label">
|
|
|
|
+ <el-icon v-if="data.is_type == '2'">
|
|
|
|
+ <Expand />
|
|
|
|
+ </el-icon>
|
|
|
|
+ {{ node.label }}
|
|
|
|
+ </span>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
</el-tree>
|
|
</el-tree>
|
|
</el-col>
|
|
</el-col>
|
|
@@ -112,7 +114,6 @@ 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;
|
|
@@ -122,20 +123,22 @@ const getCateList = () => {
|
|
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);
|
|
- })
|
|
|
|
|
|
|
|
|
|
+ // 默认加载第一个设备对应属性
|
|
|
|
+ if (productData.value.length > 0) {
|
|
|
|
+ handleNodeClick(mergedData.value[0].children[0])
|
|
|
|
+ }
|
|
|
|
+ });
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
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 = '';
|
|
-
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -199,6 +202,30 @@ const del = (row: any) => {
|
|
getList()
|
|
getList()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
-getCateList()
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.custom-tree-node {
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ padding-right: 8px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ .tree-label {
|
|
|
|
+ width: 100%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ .tree-options {
|
|
|
|
+ display: block;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|