权限设置样式调整

src/components/index.vue

@@ -2018,7 +2018,7 @@
       this.allWindowWidth = allWindowWidth - 50 - 220 - 60;
       let maxLength = parseInt(allWindowWidth / 110);
       this.maxLength = maxLength;
-      this.testApi();
+      //this.testApi();
       //this.testEmp();
       let userinfo = this.getLocalStorage();
       let ActionMenuCode = userinfo.ActionMenuCode;
@@ -2194,7 +2194,7 @@
       //测试方法
       testEmp() {
         var postMsg = {
-          EmPassword: "US9TjP7aGsU="
+          EmPassword: ""
         };
         this.apipost(
           "admin_get_AnalysisPassword", postMsg,

src/components/platformModule/permissionList.vue

 <style>
-.per_title {
+  .per_title {
     font-size: 14px;
     color: #333;
     border-left: 3px solid #e95252;
@@ -7,22 +7,27 @@
     line-height: 14px;
     margin: 40px 0;
     padding-left: 15px;
-}
-.mentTable {
+  }
+
+  .mentTable {
     background: #bcbcbc;
     width: 100%;
     font-size: 14px;
-}
-.mentTable td {
+  }
+
+  .mentTable td {
     background: #fff;
     height: 30px;
-}
-.per_first_menu {
+  }
+
+  .per_first_menu {
     overflow: hidden;
-}
-.per_first_menu li {
+  }
+
+  .per_first_menu li {
     float: left;
     margin-right: 30px;
+    margin-top: 5px;
     position: relative;
     cursor: pointer;
     background: #fff;
@@ -33,21 +38,26 @@
     padding: 10px 0;
     border-radius: 4px;
     text-align: center;
-}
-.per_first_menu li.FirsrMenuCked {
+  }
+
+  .per_first_menu li.FirsrMenuCked {
     background: #e95252;
     color: #f1f1f1;
-}
-.per_first_menu li i {
+  }
+
+  .per_first_menu li i {
     font-size: 30px;
     line-height: 35px;
-}
-.per_first_menu-set {
+  }
+
+  .per_first_menu-set {
     overflow: hidden;
-}
-.per_first_menu-set li {
+  }
+
+  .per_first_menu-set li {
     float: left;
     margin-right: 30px;
+    margin-top: 5px;
     position: relative;
     cursor: pointer;
     background: #fff;
@@ -58,57 +68,67 @@
     padding: 0 10px;
     border-radius: 4px;
     border-bottom: 1px solid #eee
-}
-.per_first_menu-set li.FirsrMenuCked {
+  }
+
+  .per_first_menu-set li.FirsrMenuCked {
     background: #e95252;
     color: #f1f1f1;
-}
-.per_first_menu-set li i {
+  }
+
+  .per_first_menu-set li i {
     font-size: 30px;
-}
-.per_detail_menu {
+  }
+
+  .per_detail_menu {
     width: 100%;
     height: 300px;
     padding: 20px;
     margin: 40px 0;
     background: #fff;
     border-radius: 8px;
-}
-.per_secondMenu {
+  }
+
+  .per_secondMenu {
     height: auto;
     overflow: hidden;
     margin-bottom: 20px;
-}
-.per_secondMenu li {
+  }
+
+  .per_secondMenu li {
     float: left;
     height: 24px;
     font-size: 12px;
     cursor: pointer;
     padding: 0 30px;
     position: relative;
-}
-.per_secondMenu li > div {
+  }
+
+  .per_secondMenu li>div {
     width: 0;
     height: 3px;
     background: #f26262;
     margin: 5px auto 0;
-}
-.per_secondMenu li:hover > div {
+  }
+
+  .per_secondMenu li:hover>div {
     width: 17px;
     transition: width 0.3s;
-}
-.per_secondMenu li.per_secondLevelCked > div {
+  }
+
+  .per_secondMenu li.per_secondLevelCked>div {
     width: 17px;
-}
-.per_secondMenu li .liSplit {
+  }
+
+  .per_secondMenu li .liSplit {
     height: 12px;
     width: 1px;
     background: #dcdfe6;
     position: absolute;
     right: 0;
     top: 2px;
-}
-.per_thirdMenu li {
+  }
+
+  .per_thirdMenu li {
     float: left;
     margin: 0 50px 50px 0;
     width: 80px;
@@ -121,133 +141,110 @@
     text-align: center;
     border-radius: 4px;
     background: #ebebeb;
-}
-.per_thirdMenu li i {
+  }
+
+  .per_thirdMenu li i {
     position: absolute;
     bottom: 10px;
     right: 10px;
     font-size: 20px;
-}
-.per_SaveBtn {
+  }
+
+  .per_SaveBtn {
     float: right;
     margin-top: 50px;
     margin-left: 15px;
-}
-.per_thirdMenu li.thirdLevelMenuCked {
+  }
+
+  .per_thirdMenu li.thirdLevelMenuCked {
     background: #e95252;
     color: #f1f1f1;
-}
-.per_firstLevelCkbox {
+  }
+
+  .per_firstLevelCkbox {
     position: absolute !important;
     right: 3px;
     top: 0;
-}
-.per_thirdLevelAllCked {
+  }
+
+  .per_thirdLevelAllCked {
     float: right;
-}
+  }
+
 </style>
 <template>
   <div>
     <div class="per_title">{{$t('objFill.quanxianshezhi')}}</div>
     <div class="per_first_menu">
       <ul>
-        <li
-          v-model="item.IsShow"
-          v-for="(item, index) in MenuList"
-          @click="getSecondLevelMenu(index)"
-          :class="{ FirsrMenuCked: index == firstLevel }"
-        >
+        <template v-for="(item, index) in MenuList">
+          <li v-model="item.IsShow" @click="getSecondLevelMenu(index)" :class="{ FirsrMenuCked: index == firstLevel }"
+            :key="`f_`+index">
             <i :class="[fontPub, item.icon]"></i><br />{{ item.MenuName }}
-          <el-checkbox
-            :indeterminate="item.choseParent"
-            class="per_firstLevelCkbox"
-            type="checkbox"
-            :value="item.IsShow"
-            v-model="item.IsShow"
-            @change="firstCheckAll"
-            v-bind:checked="item.IsShow"
-          ></el-checkbox>
+            <el-checkbox :indeterminate="item.choseParent" class="per_firstLevelCkbox" type="checkbox"
+              :value="item.IsShow" v-model="item.IsShow" @change="firstCheckAll" v-bind:checked="item.IsShow">
+            </el-checkbox>
           </li>
-
-        <input
-          type="button"
-          :value="$t('pub.saveBtn')"
-          class="normalBtn per_SaveBtn"
-          @click="updateMenu()"
-        />
-        <!-- <input type="button" :value="$t('pub.returnBack')" class="hollowFixedBtn per_SaveBtn" @click="goback"/>-->
+        </template>
+        <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="updateMenu()">
+          {{$t('pub.saveBtn')}}</el-button>
       </ul>
     </div>
     <div class="per_detail_menu">
-      <div
-        class="per_secondMenu"
-        v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null"
-      >
-        <li
-          v-model="item.IsShow"
-          :class="{ per_secondLevelCked: index == secondLevel }"
-          v-for="(item, index) in MenuList[firstLevel].ChildMenu"
-          @click="getThirdLevelMenu(index)"
-        >
+      <div class="per_secondMenu" v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null">
+        <template v-for="(item, index) in MenuList[firstLevel].ChildMenu">
+          <li v-model="item.IsShow" :class="{ per_secondLevelCked: index == secondLevel }"
+            @click="getThirdLevelMenu(index)" :key="`f_`+firstLevel+`_s_`+index">
             {{ item.MenuName }}
             <div></div>
             <span class="liSplit"></span>
           </li>
-        <el-checkbox
-          class="per_thirdLevelAllCked"
-          @change="checkedAll($event)"
-          v-model="secondChkAllState"
-          >{{$t('system.table_chekAll')}}</el-checkbox
-        >
+        </template>
+        <el-checkbox class="per_thirdLevelAllCked" @change="checkedAll($event)" v-model="secondChkAllState">
+          {{$t('system.table_chekAll')}}</el-checkbox>
       </div>
-      <div
-        class="per_thirdMenu"
-        v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null"
-      >
-        <li
-          v-model="item.IsShow"
-          @click="thirdLevelMenuCked(item)"
-          :class="{ thirdLevelMenuCked: item.IsShow }"
-          v-for="(item, index) in MenuList[firstLevel].ChildMenu[secondLevel]
-            .ChildMenu"
-        >
+      <div class="per_thirdMenu" v-if="MenuList.length > 0 && MenuList[firstLevel].ChildMenu != null">
+        <template v-for="(item, index) in MenuList[firstLevel].ChildMenu[secondLevel]
+            .ChildMenu">
+          <li v-model="item.IsShow" @click="thirdLevelMenuCked(item)" :class="{ thirdLevelMenuCked: item.IsShow }"
+            :key="`f_`+firstLevel+`_s_`+secondLevel+`_t_`+index">
             {{ item.MenuName }}<i :class="[fontPub, item.icon]"></i>
           </li>
+        </template>
       </div>
     </div>
-
+    <el-row>
+      <el-col :span="12">
         <div class="per_title">{{$t('objFill.gongnenggl')}}</div>
+      </el-col>
+      <el-col :span="12">
+        <el-tooltip class="item" effect="dark" content="保存功能权限" placement="top-start">
+          <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="saveAction()">
+            {{$t('pub.saveBtn')}}</el-button>
+        </el-tooltip>
+      </el-col>
+    </el-row>
     <div class="per_first_menu-set">
       <ul>
-        <li
-          v-model="item.IsShow"
-          v-for="(item, index) in actionList"
-          @click="item.IsShow = !item.IsShow"
-        >
-          <el-checkbox
-            type="checkbox"
-            :value="item.IsShow"
-            v-model="item.IsShow"
-            v-bind:checked="item.IsShow"
-          ></el-checkbox>
-          <i :class="[fontPub, item.icon]"></i
-          ><span>{{ item.ActionName }}</span>
+        <template v-for="(item, index) in actionList">
+          <el-tooltip :key="`a_t_`+index" class="item" effect="dark" :content="item.Remarks" v-if="item.Remarks!=''"
+            placement="top-start">
+            <li v-model="item.IsShow" @click="item.IsShow = !item.IsShow" :key="`a_`+index">
+              <el-checkbox type="checkbox" :value="item.IsShow" v-model="item.IsShow" v-bind:checked="item.IsShow">
+              </el-checkbox>
+              <i :class="[fontPub, item.icon]"></i><span>{{ item.ActionName }}</span>
               <div></div>
               <span>{{ item.ActionCode }}</span>
             </li>
-        <input
-          type="button"
-          :value="$t('pub.saveBtn')"
-          class="normalBtn per_SaveBtn"
-          @click="saveAction()"
-        />
+          </el-tooltip>
+        </template>
       </ul>
     </div>
   </div>
 </template>
 
 <script>
-export default {
+  export default {
     data() {
       return {
         fontPub: "iconfont",
@@ -263,9 +260,9 @@ export default {
         firstLevel: 0,
         secondLevel: 0,
         secondChkAllState: false,
-
         //功能菜单
         actionList: [],
+        saveLoading: false,
       };
     },
     mounted() {
@@ -283,8 +280,7 @@ export default {
             if (res.data.resultCode == 1) {
               let tempList = res.data.data;
               this.actionList = tempList;
-          } else {
-          }
+            } else {}
           },
           (err) => {}
         );
@@ -306,8 +302,7 @@ export default {
                   this.MenuList.push(x);
                 }
               });
-          } else {
-          }
+            } else {}
           },
           (err) => {}
         );
@@ -316,17 +311,21 @@ export default {
         this.MenuList.forEach((x) => {});
         this.updateMsg.Permission = [];
         this.getCkdId(this.MenuList);
+        this.saveLoading = true;
         this.apipost(
           "admin_post_RoleUpdateRolePermission",
           this.updateMsg,
           (res) => {
+            this.saveLoading = false;
             if (res.data.resultCode == 1) {
               this.$message.success(this.$t('tips.saveYes'));
             } else {
               this.$message.error(this.$t('objFill.baocunshibai'));
             }
           },
-        (err) => {}
+          (err) => {
+            this.saveLoading = false;
+          }
         );
       },
       getSecondLevelMenu(index) {
@@ -428,17 +427,21 @@ export default {
       saveAction() {
         this.updateMsg.Permission = [];
         this.getCkdActionId(this.actionList);
+        this.saveLoading = true;
         this.apipost(
           "admin_post_RoleUpdateRolePermissionAction",
           this.updateMsg,
           (res) => {
+            this.saveLoading = false;
             if (res.data.resultCode == 1) {
               this.$message.success(this.$t('tips.saveYes'));
             } else {
               this.$message.error(this.$t('objFill.baocunshibai'));
             }
           },
-        (err) => {}
+          (err) => {
+            this.saveLoading = false;
+          }
         );
       },
 
@@ -464,6 +467,6 @@ export default {
         history.back(-1);
       },
     },
-};
-</script>
+  };
 
+</script>

src/components/platformModule/versionspermissionList.vue

@@ -27,6 +27,7 @@
   .per_first_menu li {
     float: left;
     margin-right: 30px;
+    margin-top: 5px;
     position: relative;
     cursor: pointer;
     background: #fff;
@@ -141,54 +142,102 @@
     float: right;
   }
 
+  .per_first_menu-set {
+    overflow: hidden;
+  }
+
+  .per_first_menu-set li {
+    float: left;
+    margin-right: 30px;
+    margin-top: 5px;
+    position: relative;
+    cursor: pointer;
+    background: #fff;
+    color: #999;
+    width: 140px;
+    font-size: 12px;
+    height: 80px;
+    padding: 0 10px;
+    border-radius: 4px;
+    border-bottom: 1px solid #eee
+  }
+
+  .per_first_menu-set li.FirsrMenuCked {
+    background: #e95252;
+    color: #f1f1f1;
+  }
+
+  .per_first_menu-set li i {
+    font-size: 30px;
+  }
+
 </style>
 <template>
-
   <div>
     <div class="per_title">{{$t('objFill.quanxianshezhi')}}</div>
     <div class="per_first_menu">
       <ul>
-        <li v-model="item.IsShow" v-for="(item,index) in MenuList" @click="getSecondLevelMenu(index)"
+        <template v-for="(item,index) in MenuList">
+          <li v-model="item.IsShow" @click="getSecondLevelMenu(index)" :key="`f_`+index"
             :class="{FirsrMenuCked:index==firstLevel}">
             <i :class="[fontPub,item.icon]"></i><br />{{item.MenuName}}
             <el-checkbox :indeterminate="item.choseParent" class="per_firstLevelCkbox" type="checkbox"
               :value="item.IsShow" v-model="item.IsShow" @change="firstCheckAll" v-bind:checked="item.IsShow">
             </el-checkbox>
           </li>
-
-        <input type="button" :value="$t('pub.saveBtn')" class="normalBtn per_SaveBtn" @click="updateMenu()" />
-        <!-- <input type="button" :value="$t('pub.returnBack')" class="hollowFixedBtn per_SaveBtn" @click="goback"/>-->
+        </template>
+        <el-tooltip class="item" effect="dark" content="保存菜单权限" placement="top-start">
+          <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="updateMenu()">
+            {{$t('pub.saveBtn')}}</el-button>
+        </el-tooltip>
       </ul>
     </div>
     <div class="per_detail_menu">
       <div class="per_secondMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
-        <li v-model="item.IsShow" :class="{per_secondLevelCked:index==secondLevel}"
-          v-for="(item,index) in MenuList[firstLevel].ChildMenu" @click="getThirdLevelMenu(index)">{{item.MenuName}}
+        <template v-for="(item,index) in MenuList[firstLevel].ChildMenu">
+          <li v-model="item.IsShow" :class="{per_secondLevelCked:index==secondLevel}" :key="`f_`+firstLevel+`_s_`+index"
+            @click="getThirdLevelMenu(index)">{{item.MenuName}}
             <div></div><span class="liSplit"></span></li>
+        </template>
         <el-checkbox class='per_thirdLevelAllCked' @change='checkedAll($event)' v-model='secondChkAllState'>全选
         </el-checkbox>
       </div>
       <div class="per_thirdMenu" v-if="MenuList.length>0 && MenuList[firstLevel].ChildMenu!=null">
+        <template v-for="(item,index) in MenuList[firstLevel].ChildMenu[secondLevel].ChildMenu">
           <li v-model="item.IsShow" @click="thirdLevelMenuCked(item)" :class="{thirdLevelMenuCked:item.IsShow}"
-          v-for="(item,index) in MenuList[firstLevel].ChildMenu[secondLevel].ChildMenu">{{item.MenuName}}<i
-            :class="[fontPub,item.icon]"></i></li>
+            :key="`f_`+firstLevel+`_s_`+secondLevel+`_t_`+index">{{item.MenuName}}<i :class="[fontPub,item.icon]"></i>
+          </li>
+        </template>
       </div>
     </div>
-
+    <el-row>
+      <el-col :span="12">
         <div class="per_title">{{$t('objFill.gongnenggl')}}</div>
-    <div class="per_first_menu">
+      </el-col>
+      <el-col :span="12">
+        <el-tooltip class="item" effect="dark" content="保存功能权限" placement="top-start">
+          <el-button type="primary" class="normalBtn per_SaveBtn" :loading="saveLoading" @click="saveAction()">
+            {{$t('pub.saveBtn')}}</el-button>
+        </el-tooltip>
+      </el-col>
+    </el-row>
+    <div class="per_first_menu-set">
       <ul>
-        <li v-model="item.IsShow" v-for="(item,index) in actionList" @click="item.IsShow = !item.IsShow;">
-          <i :class="[fontPub,item.icon]"></i><br />{{item.ActionName}}
-          <el-checkbox class="per_firstLevelCkbox" type="checkbox" :value="item.IsShow" v-model="item.IsShow"
-            v-bind:checked="item.IsShow"></el-checkbox>
+        <template v-for="(item,index) in actionList">
+          <el-tooltip :key="`a_t_`+index" class="item" effect="dark" :content="item.Remarks" v-if="item.Remarks!=''"
+            placement="top-start">
+            <li v-model="item.IsShow" @click="item.IsShow = !item.IsShow" :key="`a_`+index">
+              <el-checkbox type="checkbox" :value="item.IsShow" v-model="item.IsShow" v-bind:checked="item.IsShow">
+              </el-checkbox>
+              <i :class="[fontPub,item.icon]"></i>{{item.ActionName}}
+              <div></div>
+              <span>{{ item.ActionCode }}</span>
             </li>
-        <input type="button" :value="$t('pub.saveBtn')" class="normalBtn per_SaveBtn" @click="saveAction()" />
+          </el-tooltip>
+        </template>
       </ul>
     </div>
-
   </div>
-
 </template>
 
 <script>
@@ -208,10 +257,9 @@
         firstLevel: 0,
         secondLevel: 0,
         secondChkAllState: false,
-
         //功能菜单
         actionList: [],
-
+        saveLoading: false,
       }
     },
     mounted() {
@@ -226,7 +274,7 @@
           if (res.data.resultCode == 1) {
             let tempList = res.data.data;
             this.actionList = tempList;
-          } else {}
+          }
         }, err => {})
       },
       getMenu() {
@@ -250,29 +298,35 @@
         this.MenuList.forEach(x => {})
         this.updateMsg.Permission = []
         this.getCkdId(this.MenuList);
+        this.saveLoading = true;
         this.apipost("admin_post_UpdateVersionsPermission", this.updateMsg, res => {
+          this.saveLoading = false;
           if (res.data.resultCode == 1) {
             this.$message.success('保存成功！')
           } else {
             this.$message.error('保存失败！')
           }
-        }, err => {})
+        }, err => {
+          this.saveLoading = false;
+        })
       },
       //保存功能管理
       saveAction() {
         this.updateMsg.Permission = []
         this.getCkdActionId(this.actionList);
+        this.saveLoading = true;
         this.apipost("admin_post_UpdateVersionsPermissionAction", this.updateMsg, res => {
+          this.saveLoading = false;
           if (res.data.resultCode == 1) {
             this.$message.success('保存成功！')
           } else {
             this.$message.error('保存失败！')
           }
-        }, err => {})
+        }, err => {
+          this.saveLoading = false;
+        })
       },
-
       getSecondLevelMenu(index) {
-
         this.firstLevel = index;
         this.secondLevel = 0;
         this.threeChange();
@@ -319,7 +373,6 @@
           })
         }
         this.threeChange()
-
       },
       threeChange() {
         let chkCount = 0
@@ -341,7 +394,6 @@
           }
           x.IsShow = secondCheckCount > 0
         })
-
         this.MenuList[this.firstLevel].IsShow = chkCount > 0
         this.MenuList[this.firstLevel].choseParent = chkCount > 0 && chkCount < count
       },