角色权限自动切换保存 提示信息友好修改

web/src/view/superAdmin/authority/authority.vue

@@ -51,15 +51,15 @@
     </el-dialog>
 
     <el-drawer :visible.sync="drawer" :with-header="false" size="40%" title="角色配置" v-if="drawer">
-      <el-tabs class="role-box" type="border-card">
+      <el-tabs class="role-box" type="border-card" :before-leave="autoEnter">
         <el-tab-pane label="角色菜单">
-          <Menus :row="activeRow" />
+          <Menus :row="activeRow" ref="menus"/>
         </el-tab-pane>
         <el-tab-pane label="角色api">
-          <apis :row="activeRow" />
+          <apis :row="activeRow"  ref="apis"/>
         </el-tab-pane>
         <el-tab-pane label="资源权限">
-          <Datas :authority="tableData" :row="activeRow" />
+          <Datas :authority="tableData" :row="activeRow"  ref="datas"/>
         </el-tab-pane>
       </el-tabs>
     </el-drawer>
@@ -124,6 +124,15 @@ export default {
     Datas
   },
   methods: {
+    autoEnter(activeName, oldActiveName){
+      const paneArr = ["menus","apis","datas"]
+      if(oldActiveName){
+        if(this.$refs[paneArr[oldActiveName]].needConfirm){
+          this.$refs[paneArr[oldActiveName]].enterAndNext()
+          this.$refs[paneArr[oldActiveName]].needConfirm = false
+        }
+      }
+    },
     // 拷贝角色
     copyAuthority(row) {
       this.setOptions()

web/src/view/superAdmin/authority/components/apis.vue

@@ -7,6 +7,7 @@
       :data="apiTreeData"
       :default-checked-keys="apiTreeIds"
       :props="apiDefaultProps"
+      @check="nodeChange"
       default-expand-all
       highlight-current
       node-key="onlyId"
@@ -32,6 +33,7 @@ export default {
     return {
       apiTreeData: [],
       apiTreeIds: [],
+      needConfirm:false,
       apiDefaultProps: {
         children: 'children',
         label: 'description'
@@ -39,6 +41,13 @@ export default {
     }
   },
   methods: {
+    nodeChange(){
+      this.needConfirm = true
+    },
+    // 暴露给外层使用的切换拦截统一方法
+    enterAndNext(){
+      this.authApiEnter()
+    },
     // 创建api树方法
     buildApiTree(apis) {
       const apiObj = new Object()
@@ -78,7 +87,7 @@ export default {
         casbinInfos
       })
       if (res.code == 0) {
-        this.$message({ type: 'success', message: res.msg })
+        this.$message({ type: 'success', message: "api设置成功" })
       }
     }
   },

web/src/view/superAdmin/authority/components/datas.vue

@@ -3,8 +3,8 @@
       <div class="clearflex" style="margin:18px">
       <el-button @click="authDataEnter" class="fl-right" size="small" type="primary">确 定</el-button>
       <el-button @click="all" class="fl-left" size="small" type="primary">全选</el-button>
-      <el-button @click="self" class="fl-left" size="small" type="primary">本部门</el-button>
-      <el-button @click="selfAndChildren" class="fl-left" size="small" type="primary">部门及以下</el-button>
+      <el-button @click="self" class="fl-left" size="small" type="primary">本角色</el-button>
+      <el-button @click="selfAndChildren" class="fl-left" size="small" type="primary">本角色及子角色</el-button>
     </div>
      <el-checkbox-group v-model="dataAuthorityId" @change="selectAuthority">
         <el-checkbox v-for="(item,key) in authoritys" :label="item" :key="key">{{item.authorityName}}</el-checkbox>
@@ -18,7 +18,8 @@ export default {
   data() {
     return {
         authoritys:[],
-        dataAuthorityId:[]
+        dataAuthorityId:[],
+        needConfirm:false
     }
   },
   props: {
@@ -36,20 +37,26 @@ export default {
     }
   },
   methods:{
+    // 暴露给外层使用的切换拦截统一方法
+      enterAndNext(){
+        this.authDataEnter()
+      },
       all(){
          this.dataAuthorityId = [...this.authoritys]
          this.row.dataAuthorityId = this.dataAuthorityId
-
+         this.needConfirm = true
       },
       self(){
           this.dataAuthorityId = this.authoritys.filter(item=>item.authorityId===this.row.authorityId)
           this.row.dataAuthorityId = this.dataAuthorityId
+          this.needConfirm = true
       },
       selfAndChildren(){
          const arrBox = []
          this.getChildrenId(this.row,arrBox)
          this.dataAuthorityId = this.authoritys.filter(item=>arrBox.indexOf(item.authorityId)>-1)
          this.row.dataAuthorityId = this.dataAuthorityId
+         this.needConfirm = true
       },
       getChildrenId(row,arrBox){
           arrBox.push(row.authorityId)
@@ -61,7 +68,7 @@ export default {
       async authDataEnter(){
           const res = await setDataAuthority(this.row)
           if(res.code == 0){
-              this.$message({ type: 'success', message: res.msg })
+              this.$message({ type: 'success', message: "资源设置成功" })
           }
       },
     //   平铺角色
@@ -79,6 +86,7 @@ export default {
     //   选择
       selectAuthority(){
           this.row.dataAuthorityId = this.dataAuthorityId
+          this.needConfirm = true
       }
   },
   created() {

web/src/view/superAdmin/authority/components/menus.vue

@@ -7,6 +7,7 @@
       :data="menuTreeData"
       :default-checked-keys="menuTreeIds"
       :props="menuDefaultProps"
+      @check="nodeChange"
       default-expand-all
       highlight-current
       node-key="ID"
@@ -32,6 +33,7 @@ export default {
     return {
       menuTreeData: [],
       menuTreeIds: [],
+      needConfirm:false,
       menuDefaultProps: {
         children: 'children',
         label: function(data){
@@ -41,6 +43,13 @@ export default {
     }
   },
   methods: {
+    nodeChange(){
+      this.needConfirm = true
+    },
+    // 暴露给外层使用的切换拦截统一方法
+    enterAndNext(){
+      this.relation()
+    },
     // 关联树 确认方法
     async relation() {
       const checkArr = this.$refs.menuTree.getCheckedNodes(false, true)
@@ -51,7 +60,7 @@ export default {
       if (res.code == 0) {
         this.$message({
           type: 'success',
-          message: '添加成功!'
+          message: '菜单设置成功!'
         })
       }
     }