From e3a8cfa1f235815519d281a2f74590c432818a26 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期六, 12 十一月 2022 09:36:48 +0800
Subject: [PATCH] 123

---
 src/views/AuthorizationManagement/menuRoleAuthorization.vue |  386 +++++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 261 insertions(+), 125 deletions(-)

diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
index 92bfac7..36f9d76 100644
--- a/src/views/AuthorizationManagement/menuRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="menuSettings_box">
-    <div class="menuSettings_tree">
-      <My-bread
-        :list="[
-          `${$t('operatManage.operatManage')}`,
+    <My-bread
+      :list="[
+        `${$t('operatManage.operatManage')}`,
 
-          `${$t('operatManage.MenuRoleAuthorization')}`,
-        ]"
-      ></My-bread>
-
-      <el-divider />
-      <div class="menuTreeBox">
+        `${$t('operatManage.MenuRoleAuthorization')}`,
+      ]"
+    ></My-bread>
+    <el-divider />
+    <div class="menuTreeBox">
+      <div class="left_tree">
         <el-tree
           :data="depList"
           :props="defaultProps"
@@ -24,12 +23,91 @@
         >
         </el-tree>
       </div>
+      <div class="right_menu">
+        <div
+          style="
+            font-size: 14px;
+            color: #409eff;
+            line-height: 1;
+            cursor: text;
+            position: relative;
+            top: 5px;
+            margin-left: 10px;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <span>
+            {{
+              $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
+            }}</span
+          >
+          <div class="btn" style="margin-left: auto">
+            <el-button
+              v-if="menuStatus.insert"
+              type="primary"
+              icon="el-icon-circle-plus-outline"
+              size="small"
+              :disabled="roleid == null ? true : false"
+              @click="adduser"
+              style="background: #409eff"
+              >{{
+                $t('operatManage.UserRoleAuthorizationObj.Added')
+              }}</el-button
+            >
+            <el-button
+              v-if="menuStatus.delete"
+              type="danger"
+              icon="el-icon-delete"
+              size="small"
+              @click="deletesUser"
+              :disabled="roleid == null ? true : false"
+              >{{
+                $t('operatManage.UserRoleAuthorizationObj.delete')
+              }}</el-button
+            >
+          </div>
+        </div>
+        <el-divider class="divider" />
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          height="80%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column
+            align="center"
+            type="index"
+            :label="$t('dataManage.styleObj.index')"
+          />
+          <el-table-column
+            prop="authName"
+            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+          >
+          </el-table-column>
+        </el-table>
+
+        <div
+          style="margin-top: 20px; text-align: center"
+          class="pagination_box"
+        >
+          <el-pagination
+            @size-change="userhandleSizeChange"
+            @current-change="userhandleCurrentChange"
+            :current-page="userlistData.pageIndex"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="userlistData.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="usercount"
+          >
+          </el-pagination>
+        </div>
+      </div>
     </div>
 
-    <div class="menuSettings">
-      <!-- <div class="title_box">
-        <h4>璇︾粏淇℃伅</h4>
-      </div> -->
+    <!-- <div class="menuSettings">
+
       <div
         style="
           font-size: 14px;
@@ -56,6 +134,7 @@
             size="small"
             :disabled="roleid == null ? true : false"
             @click="adduser"
+            style="background: #409eff"
             >{{ $t('operatManage.UserRoleAuthorizationObj.Added') }}</el-button
           >
           <el-button
@@ -71,42 +150,8 @@
       </div>
       <el-divider class="divider" />
 
-      <el-table
-        :data="tableData"
-        stripe
-        style="width: 100%"
-        height="85%"
-        @selection-change="handleSelectionChange"
-        :header-cell-style="{
-          background: 'transparent',
-        }"
-      >
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column
-          align="center"
-          type="index"
-          :label="$t('dataManage.styleObj.index')"
-        />
-        <el-table-column
-          prop="authName"
-          :label="$t('operatManage.UserRoleAuthorizationObj.name')"
-        >
-        </el-table-column>
-      </el-table>
 
-      <div style="margin-top: 20px; text-align: center" class="pagination_box">
-        <el-pagination
-          @size-change="userhandleSizeChange"
-          @current-change="userhandleCurrentChange"
-          :current-page="userlistData.pageIndex"
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="userlistData.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="usercount"
-        >
-        </el-pagination>
-      </div>
-    </div>
+    </div> -->
     <el-dialog
       :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
       :visible.sync="dialogTableVisible"
@@ -381,94 +426,185 @@
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .menuSettings_box {
-  //   background: rgb(240, 242, 245);
-  border-radius: 10px;
-  height: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  display: flex;
-  .menuSettings_tree {
+  width: 97%;
+  height: 81%;
+
+  position: absolute;
+  .menuTreeBox {
+    width: 100%;
+    height: 91%;
     position: relative;
-    width: 30%;
-    height: 100%;
-    background: rgb(240, 242, 245);
-    padding: 20px;
-    border-radius: 10px;
-    box-sizing: border-box;
-    overflow: auto;
-    .saveBtn {
-      position: absolute;
-      left: 250px;
-      top: 23px;
-    }
-    .menuTreeBox {
-      height: 90%;
-      overflow: auto;
-      .el-tree {
+
+    .left_tree {
+      width: 30%;
+      height: 94%;
+      padding: 20px;
+      border: 1px solid rgb(202, 201, 204);
+      border-radius: 5px;
+      float: left;
+      overflow-y: auto;
+      // 鏇存敼鎸囨爣鏍戝浘鏍囬鑹�
+      /deep/ .el-tree .el-icon-caret-right:before {
+        color: white; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/
+      }
+      /deep/ .el-tree {
+        color: white; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/
         background: transparent;
-        font-size: 15px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #000000;
-        // /deep/ .el-tree-node__label {
-        //   font-size: 18px;
-        // }
-        /deep/ .el-tree-node {
-          padding-top: 10px;
-          // padding-bottom: 10px;
-        }
-        /deep/ .el-tree-node:focus > .el-tree-node__content {
-          background-color: #b9b9b9;
-        }
-        /deep/ .el-tree-node__content:hover {
-          background-color: rgb(153, 153, 153);
-        }
-        .btnBox {
-          margin-left: 5px;
-          .el-button + .el-button {
-            margin-left: 5px;
-          }
+      }
+      /deep/.el-tree-node__content {
+        &:hover {
+          background-color: rgba(255, 255, 255, 0.3) !important;
         }
       }
+      /deep/.el-tree-node.is-current > .el-tree-node__content {
+        background-color: rgba(255, 255, 255, 0.3) !important;
+        color: #409eff;
+      }
     }
-  }
-  .menuSettings {
-    width: 70%;
-    border-radius: 10px;
-    background: rgb(240, 242, 245);
-    margin-left: 10px;
-    height: 100%;
-    padding: 20px;
-    box-sizing: border-box;
-    .title_box {
-      background: #fff;
-      padding: 10px;
-      margin-bottom: 24px;
-      display: flex;
-      border-radius: 10px;
+    .right_menu {
+      width: 63%;
+      height: 94%;
+      padding: 20px;
       border: 1px solid rgb(202, 201, 204);
-      box-sizing: border-box;
+      border-radius: 5px;
+      float: right;
     }
   }
-  .table_box {
-    padding: 10px;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    overflow: auto;
-    height: 85%;
+  /*閲岄潰鐨勪唬鐮佸彲浠ユ牴鎹嚜宸遍渶姹傚幓杩涜鏇存敼*/
+  /* 璁剧疆婊氬姩鏉$殑鏍峰紡 */
+  ::-webkit-scrollbar {
+    width: 4px;
   }
-  .divider {
-    margin-top: 8px;
+  /* 婊氬姩妲� */
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+  }
+  /* 婊氬姩鏉℃粦鍧� */
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: #8b8b8b;
+    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
+  }
+  ::-webkit-scrollbar-thumb:window-inactive {
+    background: #8b8b8b;
+    height: 289px;
+  }
+  .pagination_box {
+    /deep/.el-input__inner {
+      background-color: transparent !important;
+      border: 1px solid;
+      color: white;
+    }
+    /deep/.el-pagination__total {
+      color: white;
+    }
+    /deep/.el-pagination__jump {
+      color: white;
+    }
+    /deep/.el-pager li.active {
+      color: #1890ff;
+    }
+    /deep/.el-pager li {
+      color: white;
+      background: transparent;
+    }
+    /deep/.el-pager li {
+      color: white;
+    }
+    /deep/.btn-prev {
+      background: transparent;
+    }
+    /deep/.btn-next {
+      background: transparent;
+    }
+  }
+  /deep/ .el-dialog {
+    background: #303030;
+  }
+  /deep/.el-range-editor.is-active,
+  .el-range-editor.is-active:hover,
+  .el-select .el-input.is-focus .el-input__inner {
+    border: 1px solid;
+  }
+  /deep/.el-dialog__title {
+    color: white;
+  }
+  /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+  /deep/ .el-table {
+    background-color: transparent;
+
+    th,
+    td {
+      background-color: transparent;
+    }
+    .el-table__expanded-cell {
+      background-color: transparent !important;
+    }
+
+    // 琛ㄥご鑳屾櫙鑹�
+    th.el-table__cell {
+      background-color: #303030;
+      color: #fff;
+    }
+    tr > td {
+      background-color: #303030;
+      color: #fff;
+    }
+
+    // hover鏁堟灉
+    tr:hover > td {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.3) !important;
+      // text-align: center;
+    }
+
+    // 婊氬姩鏉″楂�
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      height: 5px;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 5px;
+      /*婊氬姩鏉″搴�*/
+      height: 10px;
+      /*婊氬姩鏉¢珮搴�*/
+    }
+    /*瀹氫箟婊氬姩鏉¤建閬� 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-track {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      /*婊氬姩鏉$殑鑳屾櫙鍖哄煙鐨勫唴闃村奖*/
+      border-radius: 10px;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
+    }
   }
 }
-.el-table,
-.el-table /deep/ .el-table__expanded-cell {
-  background-color: transparent;
+</style>
+<style>
+.el-select-dropdown {
+  background: #303030 !important;
+  border-color: 1px solid !important;
 }
 
-.el-table /deep/ th,
-.el-table /deep/ tr {
-  background-color: transparent;
+.el-scrollbar__wrap {
+  margin-bottom: -20px !important;
+  margin-right: -20px !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: rgba(255, 255, 255, 0.3) !important;
+}
+.el-select-dropdown__item {
+  color: white !important;
 }
 </style>

--
Gitblit v1.9.3