From 3be54099e45ac94d52d67fa5de9ad3690127d540 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 24 Dec 2021 15:17:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9E=B6=E6=9E=84=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E8=A1=A8=E5=8F=8A=E4=BA=A7=E5=93=81=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?uuid=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            | 21 ++++++++++
 package.json                 |  1 +
 src/views/data/Framework.vue | 80 +++++++++++++++++++++---------------
 src/views/data/Product.vue   |  6 +--
 4 files changed, 72 insertions(+), 36 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 675399b..1e524b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1047,6 +1047,11 @@
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/uuid": {
+      "version": "8.3.3",
+      "resolved": "https://registry.npmmirror.com/@types/uuid/download/@types/uuid-8.3.3.tgz?cache=0&sync_timestamp=1637271089246&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fuuid%2Fdownload%2F%40types%2Fuuid-8.3.3.tgz",
+      "integrity": "sha512-0LbEEx1zxrYB3pgpd1M5lEhLcXjKJnYghvhTRgaBeUivLHMDM1TzF3IJ6hXU2+8uA4Xz+5BA63mtZo5DjVT8iA=="
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
@@ -12728,6 +12733,22 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-uuid": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npm.taobao.org/vue-uuid/download/vue-uuid-2.0.2.tgz",
+      "integrity": "sha1-DPtznmYKOvHU4zQnQ1eBFPebJDg=",
+      "requires": {
+        "@types/uuid": "^8.0.0",
+        "uuid": "^8.1.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmmirror.com/uuid/download/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
+      }
+    },
     "vuedraggable": {
       "version": "2.23.2",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz",
diff --git a/package.json b/package.json
index 9cca2ce..bd2454f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.1",
     "vue-schart": "^2.0.0",
+    "vue-uuid": "^2.0.2",
     "vuedraggable": "^2.17.0",
     "vuex": "^3.1.2"
   },
diff --git a/src/views/data/Framework.vue b/src/views/data/Framework.vue
index dd17821..f8585a0 100644
--- a/src/views/data/Framework.vue
+++ b/src/views/data/Framework.vue
@@ -154,6 +154,8 @@
     </div>
 </template>
 <script>
+import { uuid } from 'vue-uuid'
+import { Loading } from 'element-ui'
 export default {
     data() {
         return {
@@ -179,8 +181,9 @@ export default {
             pageSize: 10,
             total: 0,
             multipleSelection: [],
+            importLoading: null,
+            tablePromises: [],
             importTypeList: [],
-            importTypeIndex: 100000,
             fieldData: [],
             fieldHead: [],
             tableName: '',
@@ -489,39 +492,45 @@ export default {
         },
         // 查询分类下的表
         getTable(n,isConcat){
-            this.$post(`${this.api.originalListById}?categoryId=${n.realId}&pageNum=${n.typeTreePage ? n.typeTreePage : 1}&pageSize=${this.typeTreeUnit}`).then(res => {
-                let list = res.list.records
-                list.map(n => {
-                    n.label = n.showName
-                    n.id = String(n.id)
-                    // 已经存在的表,禁止再次勾选
-                    if(this.defaultTypeChecked.includes(n.id)){
-                        n.disabled = true
+            this.tablePromises.push(new Promise((resolve,reject) => {
+                this.$post(`${this.api.originalListById}?categoryId=${n.realId}&pageNum=${n.typeTreePage ? n.typeTreePage : 1}&pageSize=${this.typeTreeUnit}`).then(res => {
+                    let list = res.list.records
+                    list.map(n => {
+                        n.label = n.showName
+                        n.id = String(n.id)
+                        // 已经存在的表,禁止再次勾选
+                        if(this.defaultTypeChecked.includes(n.id)){
+                            n.disabled = true
+                        }
+                    })
+                    // 如果是懒加载,则拼接
+                    if(isConcat){
+                        n.children = n.children.concat(list)
+                    }else{
+                        n.children = list
+                        n.tableLen = res.list.total
                     }
+                    // 每次加载完,分页码数自动+1
+                    n.typeTreePage++
+                    resolve()
+                }).catch(res => {
+                    reject()
                 })
-                // 如果是懒加载,则拼接
-                if(isConcat){
-                    n.children = n.children.concat(list)
-                }else{
-                    n.children = list
-                    n.tableLen = res.list.total
-                }
-                // 每次加载完,分页码数自动+1
-                n.typeTreePage++
-            }).catch(res => {})
+            }))
         },
         // 导入数据
         batchImport(){
+            this.importLoading = Loading.service({
+                background: 'rgba(255, 255, 255, .5)'
+            })
             // 这里查的是原始分类，跟其他任何地方查分类的接口都不一样，不要混淆，如果要改这个地方，要跟后端沟通
             this.$post(this.api.originalList).then(res => {
-                const that = this
                 // 处理id和label。因为这个树形要同时展示分类和表，所以name的key统一用label（分类和表的name的key不一样）
                 function handleId(data){
                     data.map(n => {
-                        that.importTypeIndex++
                         n.realId = n.id
-                        // 分类id跟表id可能会冲突,所以就加了个基数
-                        n.id = String(that.importTypeIndex + n.id)
+                        // 分类id跟表id可能会冲突，所以加上uuid
+                        n.id = uuid.v4()
                         n.label = n.categoryName
                         if(n.children.length){
                             handleId(n.children)
@@ -529,20 +538,19 @@ export default {
                     })
                 }
                 handleId(res)
-                // 查询表。pageSize传3000是防止选中的表在下面，查的太少的话无法选中分类，后续可根据需求修改
+                // 查询该分类下已勾选的表。pageSize传3000是防止查的表太少，无法选中分类，因为每个分类初始化的时候只查子下的20个表，后续可根据需求修改
                 this.$post(`${this.api.getIdQueryTable}?categoryId=${this.categoryId}&showName=${this.keyword}&pageNum=1&pageSize=3000&updateTime=${this.updateTime ? this.updateTime : ''}`).then(res1 => {
                     let list = res1.pageList.records
                     this.defaultTypeChecked = list.map(n => n.copyId) // copyId为原始表id，通过这个id才能选中表
-                    const that = this
                     // 递归处理分页
-                    function handleId(data){
+                    const handleId = data => {
                         data.map(n => {
                             if(n.children.length){
                                 handleId(n.children)
                             }else{
                                 // 默认分页码数为1
                                 n.typeTreePage = 1
-                                that.getTable(n)
+                                this.getTable(n)
                             }
                         })
                     }
@@ -556,14 +564,20 @@ export default {
                             }
                         })
                     }
-                    setTimeout(() => {
+                    Promise.all(this.tablePromises).then(_ => {
                         handleDisabled(res)
                         this.importTypeList = res
-                    },500)
-                }).catch(res => {})
-                
-                this.importVisible = true
-            }).catch(res => {})
+                        this.importLoading.close()
+                        this.importVisible = true
+                        console.log('全部分类：', res)
+                        console.log('该分类下已选的表id：', this.defaultTypeChecked)
+                    })
+                }).catch(res => {
+                    this.importLoading.close()
+                })
+            }).catch(res => {
+                this.importLoading.close()
+            })
         },
         // 查询表的字段
         getFields(){
diff --git a/src/views/data/Product.vue b/src/views/data/Product.vue
index f3246a7..fa33bcc 100644
--- a/src/views/data/Product.vue
+++ b/src/views/data/Product.vue
@@ -151,6 +151,7 @@
 </template>
 
 <script>
+import { uuid } from 'vue-uuid'
 export default {
     data() {
         return {
@@ -189,7 +190,6 @@ export default {
             },
             checkedIds: [],
             isDetail: false,
-            typeIndex: 100000,
             curExpand: '',
             typeUnit: 20,
             typeScrollTop: 0,
@@ -287,7 +287,8 @@ export default {
                 function handleId(data){
                     data.map(n => {
                         n.originId = n.id
-                        n.id = String(++that.typeIndex) // 分类id跟表id有可能会重复，所以把分类id都加上个基数，防止冲突，同时用originId保存起来真正的id
+                        // 分类id跟表id可能会冲突，所以加上uuid，同时用originId保存原始id
+                        n.id = uuid.v4()
                         n.label = n.categoryName
                         n.disabled = true // 一律禁止勾选
                         if(n.children.length){
@@ -466,7 +467,6 @@ export default {
             this.productName = ''
             this.market = ''
             this.isDetail = false
-            this.typeIndex = 100000
             this.typeList = []
             this.configIds = []
         },