From 644bf8e20a9a3aedb11a49fe8e7295dea2b79776 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 17 十月 2023 11:28:12 +0800
Subject: [PATCH] 1.新增APP菜单

---
 src/views/basicSettings/powerDivider.vue |  151 ++++++++++++++++++++++++++++++++++---------------
 1 files changed, 104 insertions(+), 47 deletions(-)

diff --git a/src/views/basicSettings/powerDivider.vue b/src/views/basicSettings/powerDivider.vue
index 539039b..6d20ffd 100644
--- a/src/views/basicSettings/powerDivider.vue
+++ b/src/views/basicSettings/powerDivider.vue
@@ -52,7 +52,7 @@
           >淇� 瀛�
           </el-button>
 
-          <el-tabs v-model="activeName" type="border-card">
+          <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
             <el-tab-pane label="PC绔�" name="PC">
               <div style="display: flex;">
                 <div
@@ -68,7 +68,7 @@
                   </div>
 
                   <el-tree
-                    ref="treeCenterRef"
+                    ref="treeCenterPCRef"
                     style="padding-top: 10px;"
                     :data="treeCenter"
                     highlight-current
@@ -81,57 +81,86 @@
                     @node-click="getLeftTreeNode"
                   />
                 </div>
-<!--                <div-->
-<!--                  ref="scrollCenter"-->
-<!--                  style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
-<!--                  :style="{height:(tableHeight-40)+'px'}"-->
-<!--                  @scroll="scrollCenterScroll()"-->
-<!--                  @mouseover="isScroll='center'"-->
-<!--                >-->
-<!--                  <div style=" ">-->
-<!--                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鎸夐挳鏉冮檺-->
-<!--                  </div>-->
+                <!--                <div-->
+                <!--                  ref="scrollCenter"-->
+                <!--                  style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto;"-->
+                <!--                  :style="{height:(tableHeight-40)+'px'}"-->
+                <!--                  @scroll="scrollCenterScroll()"-->
+                <!--                  @mouseover="isScroll='center'"-->
+                <!--                >-->
+                <!--                  <div style=" ">-->
+                <!--                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鎸夐挳鏉冮檺-->
+                <!--                  </div>-->
 
-<!--                  <el-checkbox-->
-<!--                    v-model="buttonIsChecked"-->
-<!--                    style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
-<!--                    @change=" handleCheckAllChange "-->
-<!--                  >鍏ㄩ��-->
-<!--                  </el-checkbox>-->
+                <!--                  <el-checkbox-->
+                <!--                    v-model="buttonIsChecked"-->
+                <!--                    style="height: 26px;display:flex;align-items: center;margin-top:10px;width:200px"-->
+                <!--                    @change=" handleCheckAllChange "-->
+                <!--                  >鍏ㄩ��-->
+                <!--                  </el-checkbox>-->
 
-<!--                  <div v-if="treeCenter.length>0">-->
-<!--                    <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->
+                <!--                  <div v-if="treeCenter.length>0">-->
+                <!--                    <div v-for="(item,index) in treeCenter[0].children" :key="item.menucode">-->
 
-<!--                      <div-->
-<!--                        v-if="!item.buttoncodelist"-->
-<!--                        style="margin-left: 40px;height:26px;display: flex;"-->
-<!--                      />-->
+                <!--                      <div-->
+                <!--                        v-if="!item.buttoncodelist"-->
+                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->
+                <!--                      />-->
 
-<!--                      <el-checkbox-group-->
-<!--                        v-for="it in item.children"-->
-<!--                        v-if="item.expanded"-->
-<!--                        :key="it.menucode"-->
-<!--                        v-model="it.buttonChecked"-->
-<!--                        style="margin-left: 40px;height:26px;display: flex;"-->
-<!--                        @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
-<!--                      >-->
+                <!--                      <el-checkbox-group-->
+                <!--                        v-for="it in item.children"-->
+                <!--                        v-if="item.expanded"-->
+                <!--                        :key="it.menucode"-->
+                <!--                        v-model="it.buttonChecked"-->
+                <!--                        style="margin-left: 40px;height:26px;display: flex;"-->
+                <!--                        @change="val=>handleCheckedButtonChange(val,it.menucode,it.buttonChecked)"-->
+                <!--                      >-->
 
-<!--                        <el-checkbox-->
-<!--                          v-for="i in it.buttoncodelist"-->
-<!--                          :key="i"-->
-<!--                          :label="i"-->
-<!--                          style="display:flex;align-items: center;"-->
-<!--                        />-->
-<!--                      </el-checkbox-group>-->
+                <!--                        <el-checkbox-->
+                <!--                          v-for="i in it.buttoncodelist"-->
+                <!--                          :key="i"-->
+                <!--                          :label="i"-->
+                <!--                          style="display:flex;align-items: center;"-->
+                <!--                        />-->
+                <!--                      </el-checkbox-group>-->
 
-<!--                    </div>-->
+                <!--                    </div>-->
 
-<!--                  </div>-->
+                <!--                  </div>-->
 
-<!--                </div>-->
+                <!--                </div>-->
               </div>
             </el-tab-pane>
-            <el-tab-pane label="APP绔�" name="APP">APP绔�</el-tab-pane>
+            <el-tab-pane label="APP绔�" name="APP">
+              <div style="display: flex;">
+                <div
+                  ref="scrollLeft"
+                  style="border-right: 1px solid rgba(0,0,0,0.2);width:100%;
+                                overflow-y: auto;overflow-x:hidden;"
+                  :style="{height:(tableHeight-40)+'px'}"
+                  @scroll="scrollLeftScroll()"
+                  @mouseover="isScroll='left'"
+                >
+                  <div style=" ">
+                    <i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 鑿滃崟鏉冮檺
+                  </div>
+
+                  <el-tree
+                    ref="treeCenterAPPRef"
+                    style="padding-top: 10px;"
+                    :data="treeCenter"
+                    highlight-current
+                    :props="defaultPropsCenter"
+                    show-checkbox
+                    node-key="menucode"
+                    :default-expand-all="true"
+                    @check-change="handleTreeCenterCheckChange"
+                    @check="handleTreeCenterCheck"
+                    @node-click="getLeftTreeNode"
+                  />
+                </div>
+              </div>
+            </el-tab-pane>
             <el-tab-pane label="宸ユ帶绔�" name="宸ユ帶绔�">宸ユ帶绔�</el-tab-pane>
           </el-tabs>
 
@@ -220,6 +249,11 @@
         this.$notify.error('璇峰厛寤虹浉瀵瑰簲鐨勮鑹诧紒')
       }
     },
+    async tabClick() {
+      this.treeCenter = []
+      await this.getRolePermissionSearchRoleMenuButton(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬鏁版嵁鍥炴樉
+      await this.getRolePermissionSearchRoleMenu(this.$refs.treeLeftRef.getCurrentKey())// 鐢ㄤ簬娓叉煋椤甸潰
+    },
 
     // 鑾峰彇鑿滃崟鏉冮檺瀵瑰簲鐨勬寜閽�
     async getRolePermissionSearchRoleMenuButton(rolecode) {
@@ -264,7 +298,12 @@
     handleData() {
       this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
       this.$nextTick(() => {
-        this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
+        if (this.activeName === 'PC') {
+          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
+        }
+        if (this.activeName === 'APP') {
+          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
+        }
       })
 
       this.treeCenter[0].children.forEach(item => {
@@ -301,7 +340,13 @@
 
     // 鍏ㄩ�夋敼鍙�
     handleCheckAllChange(val) {
-      const checkedKeys = this.$refs.treeCenterRef.getCheckedKeys()
+      let checkedKeys
+      if (this.activeName === 'PC') {
+        checkedKeys = this.$refs.treeCenterPCRef.getCheckedKeys()
+      }
+      if (this.activeName === 'APP') {
+        checkedKeys = this.$refs.treeCenterAPPRef.getCheckedKeys()
+      }
 
       if (val) {
         this.treeCenter[0].children.forEach(item => {
@@ -335,7 +380,12 @@
         } else if (this.menuCheckedCodeArr.includes(code) && oldValue.length === 1 && newValue.length === 0) { // 鏄�
           this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== code)
         }
-        this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
+        if (this.activeName === 'PC') {
+          this.$refs.treeCenterPCRef.setCheckedKeys(this.menuCheckedCodeArr)
+        }
+        if (this.activeName === 'APP') {
+          this.$refs.treeCenterAPPRef.setCheckedKeys(this.menuCheckedCodeArr)
+        }
       }
 
       // 杩欓噷鏄垽鏂叏閫塩heckbox 鏄惁閫変腑
@@ -420,7 +470,14 @@
     async saveClick() {
       const rolecode = this.$refs.treeLeftRef.getCurrentKey()
       const datacode = this.treeLeft.find(i => i.code === rolecode).datarange !== 'CUSTOM' ? this.treeLeft.find(i => i.code === rolecode).datarange : this.treeLeft.find(i => i.code === rolecode).datapermissions
-      const menuKeyArr = this.$refs.treeCenterRef.getCheckedKeys()
+      let menuKeyArr
+      if (this.activeName === 'PC') {
+        menuKeyArr = this.$refs.treeCenterPCRef.getCheckedKeys()
+      }
+      if (this.activeName === 'APP') {
+        menuKeyArr = this.$refs.treeCenterAPPRef.getCheckedKeys()
+      }
+
       const arr = []
       this.treeCenter[0].children.forEach(item => {
         if (item.children && item.children.length) {

--
Gitblit v1.9.3