|
@@ -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>
|