新增产品修复

src/views/data/Product.vue

@@ -82,7 +82,7 @@
                 </el-form-item>
                 <el-form-item label="配置数据">
                     <el-button type="primary" @click="configData">配置数据权限</el-button>
-                    <div class="type-wrap" ref="typeWrap" @scroll="loadType" style="display: none">
+                    <div class="type-wrap" ref="typeWrap" @scroll="loadType" v-show="checkedIds.length">
                         <el-tree ref="type" :data="typeList" show-checkbox accordion node-key="id" :default-expanded-keys="checkedIds" :default-checked-keys="checkedIds" :props="defaultProps" @node-expand="typeExpand">
                             <span class="custom-tree-node" slot-scope="{ node, data }">
                                 <span :title="node.label">{{ node.label }}</span>
@@ -137,7 +137,7 @@
             </el-container>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="configVisible = false">取 消</el-button>
-                <el-button type="primary" @click="confirmConfig">确 定</el-button>
+                <el-button type="primary" :loading="configLoading" @click="confirmConfig">确 定</el-button>
             </span>
         </el-dialog>
 
@@ -194,11 +194,9 @@ export default {
             typeUnit: 20,
             typeScrollTop: 0,
             typeTimer: null,
-            tableId: [],
 
             configVisible: false,
-            configChecked: [],
-            configCheckedTableId: [],
+            configLoading: false,
             categoryId: '',
             configIds: [],
             updateTime: '',
@@ -294,6 +292,7 @@ export default {
                     })
                 }
                 handleId(res)
+                this.typeConfigList = JSON.parse(JSON.stringify(res))
 
                 // 获取分类下的表
                 function getTable(data){
@@ -381,7 +380,6 @@ export default {
                 const data = res.product
                 this.productName = data.productName
                 this.market = data.market
-                this.configChecked = data.tableId
                 this.checkedIds = this.handleType(data.tableId.split(','),this.typeList)
                 this.$refs.type.setCheckedNodes(this.checkedIds)
             }).catch(res => {})
@@ -415,8 +413,8 @@ export default {
             }).catch(err => {})
         },
         preview(row){
-            this.isDetail = true
             this.getType()
+            this.isDetail = true
             this.id = row.id
             this.getDetail()
         },
@@ -460,21 +458,19 @@ export default {
             this.isDetail = false
             this.typeIndex = 100000
             this.typeList = []
-            this.tableId = []
-            this.configChecked = []
             this.configIds = []
         },
         // 获取tableId,提交的时候需要
-        getIds(){
+        getIds(list){
             // 获取已经勾选的分类
-            let list = this.checkedIds
-            this.tableId = []
+            this.checkedIds = []
             const proList = []
+            this.configLoading = true
             // 勾选的分类id分别去查询下面的表id，也可以全部id用逗号分隔去查，这里遍历去查是因为这样速度更快
             list.map(e => {
                 proList.push(new Promise((resolve,reject) => {
                     this.$get(`${this.api.getAllTableIdBycategoryId}?categoryId=${e}`).then(res => {
-                        res.tableId && this.tableId.push(...res.tableId.split(','))
+                        res.tableId && this.checkedIds.push(...res.tableId.split(','))
                         resolve()
                     }).catch(res => {
                         this.submited = false
@@ -483,8 +479,11 @@ export default {
             })
             // 全部分类id遍历查询完resolve回去
             return Promise.all(proList).then(res => {
+                this.configLoading = false
                 resolve()
-            }).catch(err => {})
+            }).catch(err => {
+                this.configLoading = false
+            })
         },
         confirm(){
             if(this.submited) return false
@@ -493,57 +492,52 @@ export default {
             if(isNaN(this.market)) return this.$message.warning('市场价格请输入数字')
             if(!this.checkedIds.length) return this.$message.warning('请选择数据')
             this.submited = true // 提交状态
-            this.getIds().then(() => {
-                let tableId = Array.from(new Set(this.tableId))
-                if(!tableId.length) return this.$message.warning('请选择数据')
-                let data = {
-                    id: this.id,
-                    productName: this.productName,
-                    market: this.market,
-                    tableId: tableId.join(),
-                    userId: this.userId,
-                    userName: this.userName,
-                    createTime: '',
-                    orderNum: '',
-                    status: '',
-                    tableNum: tableId.length,
-                    updateTime: ''
-                }
-                if(this.id){
-                    this.$post(this.api.updateProduct,data).then(res => {
-                        this.$message.success('新增成功')
-                        this.productVisible = false
-                        this.getData()
-                        this.submited = false
-                    }).catch(res => {
-                        this.submited = false
-                    })
-                }else{
-                    this.$post(this.api.saveProduct,data).then(res => {
-                        this.$message.success('新增成功')
-                        this.productVisible = false
-                        this.getData()
-                        this.submited = false
-                    }).catch(res => {
-                        this.submited = false
-                    })
-                }
-            })
+            let tableId = this.checkedIds
+            if(!tableId.length) return this.$message.warning('请选择数据')
+            let data = {
+                id: this.id,
+                productName: this.productName,
+                market: this.market,
+                tableId: tableId.join(),
+                userId: this.userId,
+                userName: this.userName,
+                createTime: '',
+                orderNum: '',
+                status: '',
+                tableNum: tableId.length,
+                updateTime: ''
+            }
+            if(this.id){
+                this.$post(this.api.updateProduct,data).then(res => {
+                    this.$message.success('新增成功')
+                    this.productVisible = false
+                    this.getData()
+                    this.submited = false
+                }).catch(res => {
+                    this.submited = false
+                })
+            }else{
+                this.$post(this.api.saveProduct,data).then(res => {
+                    this.$message.success('新增成功')
+                    this.productVisible = false
+                    this.getData()
+                    this.submited = false
+                }).catch(res => {
+                    this.submited = false
+                })
+            }
         },
         configData(){
             this.configVisible = true
             this.getConfigType()
             // 编辑的时候才需要获取外面的弹框的已选数据，传到配置数据里去默认勾选
-            if (this.id) {
+            if (this.checkedIds.length) {
                 let list = this.$refs.type.getCheckedNodes()
-                let configIds = []
-                list.map(n => {
-                    if(!n.name) configIds.push(n.originId) // 分类没有name。只需要分类id，因为配置数据里是以分类为维度的，所以获取表id无法默认勾选
-                })
-                this.configIds = configIds
+                this.configIds = list.filter(n => !n.name).map(n => n.id)
+                this.$refs.typeConfig.setCheckedKeys(this.configIds)
             }
         },
-        typeConfigClick(data,node){
+        typeConfigClick(data){
             this.categoryId = data.id
             this.getConfigTable()
         },
@@ -553,25 +547,22 @@ export default {
         },
         // 获取配置数据里面的分类
         getConfigType(){
-            this.$post(this.api.getTableByClassification).then(res => {
-                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.typeConfigList = res
-                if(res[0].children.length){
-                    this.categoryId = res[0].children[0].id
-                }else{
-                    this.categoryId = res[0].id
-                }
-                this.getConfigTable()
-            }).catch(res => {})
+            const list = this.typeConfigList
+            function handleId(data){
+                data.map(n => {
+                    n.disabled = false // 配置数据都是可选的
+                    if(n.children.length){
+                        handleId(n.children)
+                    }
+                })
+            }
+            handleId(list)
+            if(list[0].children.length){
+                this.categoryId = list[0].children[0].id
+            }else{
+                this.categoryId = list[0].id
+            }
+            this.getConfigTable()
         },
         // 获取配置数据里面分类下的表
         getConfigTable(){
@@ -614,26 +605,11 @@ export default {
                 this.previewVisible = true
             }).catch(res => {})
         },
-        // 递归获取选中的分类id
-        getTableId(list){
-            let checked = this.configChecked
-            list.map(n => {
-                if(n.children && n.children.length){
-                    this.getTableId(n.children)
-                    if(checked.includes(n.originId) && n.children[0].name){ // 选中的并且是表（表才有name）
-                        this.configCheckedTableId = [...this.configCheckedTableId,...n.children.map(n => n.id)]
-                    }else{
-                        this.getTableId(n.children)
-                    }
-                }
-            })
-        },
         confirmConfig(){
-            this.configChecked = this.$refs.typeConfig.getCheckedKeys().map(n => n) // 获取选中的id
-            this.checkedIds = this.configChecked
-            this.configVisible = false
-            this.$nextTick(() => {
-                this.$refs.type.setCheckedNodes(this.checkedIds)
+            const list = this.$refs.typeConfig.getCheckedNodes().map(e => e.originId) // 获取选中的id
+            this.getIds(list).then(() => {
+                this.$refs.type.setCheckedKeys(this.checkedIds)
+                this.configVisible = false
             })
         }
     }