新增编辑产品展示表，数据架构及数据简介还原成一次加载所有数据分类（懒加载问题很多）

src/views/data/Framework.vue

@@ -5,7 +5,7 @@
                 <div class="plus">
                     <i class="el-icon-circle-plus-outline" @click.stop="addType(0)"></i>
                 </div>
-                <el-tree ref="type" :load="getType" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick">
+                <el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick">
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                         <span :title="node.label">{{ node.label }}</span>
                         <span class="actions">
@@ -77,7 +77,7 @@
                         :default-checked-keys="defaultTypeChecked"
                         :current-node-key="curId"
                         show-checkbox
-                        :props="defaultPropsImport"
+                        :props="defaultProps"
                         highlight-current
                         @node-click="importTypeClick"
                         @node-expand="importTypeExpand"
@@ -156,11 +156,8 @@
 export default {
     data() {
         return {
+            typeList: [],
             defaultProps: {
-                children: 'children',
-                label: 'categoryName'
-            },
-            defaultPropsImport: {
                 children: 'children',
                 label: 'label'
             },
@@ -215,20 +212,37 @@ export default {
             },500)
         }
     },
-    mounted(){},
+    mounted(){
+        this.getType()
+    },
     methods: {
-        getType(node, resolve){
-            this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
-                const list = res.list
-                this.node = node
-                this.resolve = resolve
-                resolve(list)
-                // 取第一个分类的id
-                if (!this.added && list.length) {
-                    this.categoryId = list[0].id
-                    this.defaultActive = [list[0].id]
+        getType(){
+            this.$post(this.api.getTableByClassification).then(res => {
+                // 递归赋值,同时添加层级标识
+                function handleId(data,level = 0){
+                    data.map(n => {
+                        n.id = String(n.id)
+                        n.label = n.categoryName
+                        n.level = level + 1
+                        if(n.children.length){
+                            handleId(n.children,n.level)
+                        }
+                    })
+                }
+                handleId(res)
+
+                this.typeList = res
+                if (!this.added) {
+                    if(res[0].children.length){
+                        this.categoryId = res[0].children[0].id
+                        this.defaultActive = [res[0].children[0].id]
+                    }else{
+                        this.categoryId = res[0].id
+                        this.defaultActive = [res[0].id]
+                    }
+                    // 取第一个分类的id
                     this.$nextTick(() => {
-                        this.$refs.type.setCurrentKey(list[0].id)
+                        this.$refs.type.setCurrentKey(res[0].children[0].id)
                     })
                 }
                 this.added = false
@@ -262,20 +276,14 @@ export default {
             this.getData()
         },
         addType(row){
-            if (row) {
-                this.categoryId = row.data.id
-                this.defaultActive = [row.data.id]
-            }
+            if (row) this.defaultActive = [row.data.id]
             this.typeVisible = true
             this.levelId = row ? row.data.id : 0
-            
         },
         editType(row){
             this.typeVisible = true
             this.id = row.data.id
             this.categoryName = row.data.categoryName
-            this.curNode = row
-            this.categoryId = row.data.id
         },
         delType(row){
             // 该分类下的数据表已存在于产品管理中，是否确认删除？
@@ -285,7 +293,7 @@ export default {
                 this.added = true
                 this.$post(`${this.api.deleteCategory}?categoryId=${row.data.id}`).then(res => {
                     this.$message.success('删除成功')
-                    this.$refs.type.remove(row)
+                    this.getType()
                 }).catch(res => {})
             }).catch(() => {})
         },
@@ -299,9 +307,7 @@ export default {
                     categoryName: this.categoryName
                 }).then(res => {
                     this.$message.success('编辑成功')
-                    this.curNode.data.categoryName = this.categoryName
-                    this.$refs.type.updateKeyChildren(this.id, this.curNode)
-                    this.getType(this.node, this.resolve)
+                    this.getType()
                     this.typeVisible = false
                     setTimeout(() => {
                         this.submited = false
@@ -315,18 +321,7 @@ export default {
                     categoryName: this.categoryName
                 }).then(res => {
                     this.$message.success('添加成功')
-                    this.getType(this.node, this.resolve)
-                    if (this.levelId) {
-                        let node = this.$refs.type.getNode(this.categoryId)
-                        node.loaded = false
-                        node.expand()
-                    } else {
-                        // this.categoryId = ''
-                        // this.defaultProps = []
-                        // this.$refs.type.setCurrentNode(0)
-                        // this.getType(0, this.resolve)
-                        location.reload()
-                    }
+                    this.getType()
                     this.typeVisible = false
                     setTimeout(() => {
                         this.submited = false

src/views/data/Introduce.vue

@@ -2,7 +2,7 @@
     <div>
         <el-container>
             <el-aside width="350px">
-                <el-tree ref="type" :load="getData" lazy node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" :highlight-current="true" @current-change="typeClick"></el-tree>
+                <el-tree ref="type" :data="typeList" node-key="id" accordion :default-expanded-keys="defaultActive" :current-node-key="categoryId" :props="defaultProps" highlight-current @node-click="typeClick"></el-tree>
             </el-aside>
 
             <el-main style="padding-top: 0">
@@ -56,9 +56,10 @@
 export default {
     data() {
         return {
+            typeList: [],
             defaultProps: {
                 children: 'children',
-                label: 'categoryName'
+                label: 'label'
             },
             defaultActive: [],
             editing: false,
@@ -68,10 +69,7 @@ export default {
             introduceText: '',
             categoryId: '',
             keywordList: [],
-            newKeyword: '',
-            node: [],
-            resolve: null,
-            curNode: {}
+            newKeyword: ''
         };
     },
     watch: {
@@ -82,22 +80,42 @@ export default {
             },500)
         }
     },
-    mounted(){},
+    mounted(){
+        this.getData()
+    },
     methods: {
-        getData(node, resolve){
+        getData(){
             // 获取分类
-            this.$post(`${this.api.getLevel}?parentId=${node.level ? node.data.id : 0}`).then(res => {
-                const list = res.list
-                this.node = node
-                this.resolve = resolve
-                resolve(list)
+            this.$post(this.api.getTableByClassification).then(res => {
+                // 递归处理id和label
+                function handleId(data){
+                    data.map(n => {
+                        n.id = String(n.id)
+                        n.label = n.categoryName
+                        if(n.children.length){
+                            handleId(n.children)
+                        }
+                    })
+                }
+                handleId(res)
+
+                this.typeList = res
                 // 取首个的id和简介
-                if (!this.edited && list.length) {
-                    this.categoryId = list[0].id
-                    this.dataSource = list[0].dataSource
-                    this.defaultActive = [list[0].id]
-                    this.introduceText = list[0].introduce
-                    this.introduce = list[0].introduce
+                if (!this.edited) {
+                    if(res[0].children.length){
+                        let item = res[0].children[0]
+                        this.categoryId = item.id
+                        this.dataSource = res[0].children[0].dataSource
+                        this.defaultActive = [item.id]
+                        this.introduceText = item.introduce
+                        this.introduce = item.introduce
+                    }else{
+                        this.categoryId = res[0].id
+                        this.dataSource = res[0].dataSource
+                        this.defaultActive = [res[0].id]
+                        this.introduceText = res[0].introduce
+                        this.introduce = res[0].introduce
+                    }
                 }
                 this.getKeyword()
             }).catch(res => {})

src/views/data/Product.vue

@@ -276,7 +276,7 @@ export default {
             }).catch(res => {})
         },
         // 获取分类
-        getType(){
+        getType(queryDetail){
             this.productVisible = true
             this.$post(this.api.getTableByClassification).then(res => {
                 const that = this
@@ -310,6 +310,7 @@ export default {
 
                 setTimeout(() => {
                     this.typeList = res
+                    queryDetail && this.getDetail()
                 },500)
                 this.importVisible = true
             }).catch(res => {})
@@ -380,8 +381,8 @@ export default {
                 const data = res.product
                 this.productName = data.productName
                 this.market = data.market
-                this.checkedIds = this.handleType(data.tableId.split(','),this.typeList)
-                this.$refs.type.setCheckedNodes(this.checkedIds)
+                this.checkedIds = data.tableId.split(',')
+                this.$refs.type.setCheckedKeys(this.checkedIds)
             }).catch(res => {})
         },
         add(){
@@ -390,12 +391,11 @@ export default {
             this.checkedIds = []
         },
         edit(row){
-            this.getType()
+            this.getType(true)
             this.id = row.id
             this.userId = row.userId
-            this.getDetail()
         },
-        switchOff(val,row,index) {
+        switchOff(val,row) {
             this.$post(this.api.updateProduct,{
                 id: row.id,
                 productName: row.productName,
@@ -413,10 +413,9 @@ export default {
             }).catch(err => {})
         },
         preview(row){
-            this.getType()
+            this.getType(true)
             this.isDetail = true
             this.id = row.id
-            this.getDetail()
         },
         handleDelete(row) {
             this.$confirm('确定要删除吗？', '提示', {
@@ -608,8 +607,9 @@ export default {
         confirmConfig(){
             const list = this.$refs.typeConfig.getCheckedNodes().map(e => e.originId) // 获取选中的id
             this.getIds(list).then(() => {
-                this.$refs.type.setCheckedKeys(this.checkedIds)
                 this.configVisible = false
+                this.$refs.type.setCheckedKeys(this.checkedIds)
+                
             })
         }
     }