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/roleMenuAuthorization.vue |  526 +++++++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 405 insertions(+), 121 deletions(-)

diff --git a/src/views/AuthorizationManagement/roleMenuAuthorization.vue b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
index f5237ec..85c69ce 100644
--- a/src/views/AuthorizationManagement/roleMenuAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
@@ -1,19 +1,193 @@
 <template>
   <div class="menuSettings_box">
     <!-- 瑙掕壊锛屽崟浣� -->
-    <div
-      class="menuSettings_tree"
-      style="margin-left: 10px; width: calc(50% - 172px)"
-    >
-      <My-bread
-        :list="[
-          `${$t('operatManage.operatManage')}`,
-          `${$t('operatManage.RoleMenuAuthorization')}`,
-        ]"
-      ></My-bread>
+    <div class="menuSettings_tree">
+      <div class="content_box">
+        <My-bread
+          :list="[
+            `${$t('operatManage.operatManage')}`,
+            `${$t('operatManage.RoleMenuAuthorization')}`,
+          ]"
+        ></My-bread>
+        <el-divider />
+        <el-form ref="form" :model="selFrom">
+          <el-form-item label="鍗曚綅">
+            <el-select
+              ref="multiSelect"
+              style="width: 300px"
+              v-model="selFrom.name"
+              placeholder="璇烽�夋嫨鍗曚綅鍚嶇О..."
+              @change="chooseCustom('multiSelect')"
+            >
+              <el-option
+                :value="selectTree"
+                style="overflow: auto; backgrond: transparent; height: 200px"
+                disabled
+              >
+                <el-tree
+                  :data="depList"
+                  :props="defaultProps"
+                  :check-on-click-node="true"
+                  :check-strictly="true"
+                  node-key="id"
+                  ref="treeForm"
+                  @node-click="addAdminHandleNodeClick"
+                  :default-expanded-keys="[1]"
+                >
+                </el-tree>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          @row-click="singleElection"
+          highlight-current-row
+          height="83%"
+        >
+          <el-table-column align="center" width="55">
+            <template slot-scope="scope">
+              <el-radio
+                class="radio"
+                v-model="templateSelection"
+                :label="scope.row.id"
+                >&nbsp;</el-radio
+              >
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            type="index"
+            :label="$t('dataManage.styleObj.index')"
+          />
+          <el-table-column
+            prop="name"
+            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+          >
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="content_box">
+        <div
+          style="
+            font-size: 14px;
+            color: #216fe6;
+            line-height: 1;
+            cursor: text;
+            position: relative;
+            top: 5px;
+            margin-left: 10px;
+            display: flex;
+            align-items: center;
+          "
+        >
+          <span>
+            {{
+              $t('operatManage.UserRoleAuthorizationObj.PermissionTable')
+            }}</span
+          >
+        </div>
+        <el-divider />
+        <div style="height: 90%; overflow-y: auto">
+          <el-tree
+            :data="menuList"
+            :props="defaultMenuProps"
+            :show-checkbox="true"
+            :check-on-click-node="true"
+            :check-strictly="true"
+            node-key="id"
+            @check="menuTreeCheck"
+            ref="treeForm"
+            :default-expanded-keys="[1]"
+          >
+          </el-tree>
+        </div>
+      </div>
+      <div class="content_box">
+        <div
+          style="
+            font-size: 14px;
+            color: #216fe6;
+            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"
+              @click="adduser"
+              :disabled="menuid == null ? true : false"
+              style="background-color: #216fe6"
+              >{{
+                $t('operatManage.UserRoleAuthorizationObj.Added')
+              }}</el-button
+            >
+            <el-button
+              v-if="menuStatus.delete"
+              type="danger"
+              icon="el-icon-delete"
+              size="small"
+              @click="deletesUser"
+              :disabled="menuid == null ? true : false"
+              >{{
+                $t('operatManage.UserRoleAuthorizationObj.delete')
+              }}</el-button
+            >
+          </div>
+        </div>
+        <el-divider class="divider" />
+        <el-table
+          :data="menuTableData"
+          stripe
+          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="name"
+            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
+          >
+          </el-table-column>
+        </el-table>
 
-      <el-divider />
-      <el-form ref="form" :model="selFrom">
+        <div
+          style="margin-top: 20px; text-align: center"
+          class="pagination_box"
+        >
+          <el-pagination
+            @size-change="authhandleSizeChange"
+            @current-change="authhandleCurrentChange"
+            :current-page="rolMenuListData.pageIndex"
+            :page-sizes="[10, 20, 30, 40]"
+            :page-size="rolMenuListData.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="roleMenuCount"
+          >
+          </el-pagination>
+        </div>
+      </div>
+      <!--  -->
+      <!-- <el-form ref="form" :model="selFrom">
         <el-form-item label="鍗曚綅">
           <el-select
             ref="multiSelect"
@@ -44,38 +218,7 @@
         </el-form-item>
       </el-form>
       <div style="height: 75%">
-        <el-table
-          :data="tableData"
-          style="width: 100%"
-          @row-click="singleElection"
-          highlight-current-row
-          height="85%"
-          :header-cell-style="{
-            background: 'transparent',
-          }"
-        >
-          <el-table-column align="center" width="55">
-            <template slot-scope="scope">
-              <!-- 鍙互鎵嬪姩鐨勪慨鏀筶abel鐨勫�硷紝浠庤�屾帶鍒堕�夋嫨鍝竴椤� -->
-              <el-radio
-                class="radio"
-                v-model="templateSelection"
-                :label="scope.row.id"
-                >&nbsp;</el-radio
-              >
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            type="index"
-            :label="$t('dataManage.styleObj.index')"
-          />
-          <el-table-column
-            prop="name"
-            :label="$t('operatManage.UserRoleAuthorizationObj.name')"
-          >
-          </el-table-column>
-        </el-table>
+
       </div>
       <div style="margin-top: 20px; text-align: center" class="pagination_box">
         <el-pagination
@@ -88,11 +231,11 @@
           :total="roleDepCount"
         >
         </el-pagination>
-      </div>
+      </div> -->
     </div>
 
     <!-- 鑿滃崟琛� -->
-    <div
+    <!-- <div
       class="menuSettings_tree"
       style="margin-left: 10px; width: calc(50% - 172px)"
     >
@@ -133,9 +276,7 @@
     </div>
 
     <div class="menuSettings">
-      <!-- <div class="title_box">
-        <h4>璇︾粏淇℃伅</h4>
-      </div> -->
+
       <div
         style="
           font-size: 14px;
@@ -212,7 +353,7 @@
         >
         </el-pagination>
       </div>
-    </div>
+    </div> -->
     <el-dialog
       :title="$t('operatManage.UserRoleAuthorizationObj.Added')"
       :visible.sync="dialogTableVisible"
@@ -527,94 +668,237 @@
 <style lang="less" scoped>
 //@import url(); 寮曞叆鍏叡css绫�
 .menuSettings_box {
-  //   background: rgb(240, 242, 245);
   border-radius: 10px;
-  height: 100%;
-  padding: 10px;
+  height: 81%;
+  width: 97%;
+  position: absolute;
   box-sizing: border-box;
-  display: flex;
   .menuSettings_tree {
-    position: relative;
-    width: 344px;
-    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 {
-        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;
+    display: flex;
+    justify-content: space-around;
+    .content_box {
+      padding: 10px;
+      width: 31%;
+      height: 720px;
+      border: 1px solid rgb(202, 201, 204);
+      border-radius: 5px;
+      /deep/ .el-input__inner {
+        background-color: transparent !important;
+        border: 1px solid;
+        color: white;
+      }
+      /deep/.el-form-item__label {
+        color: white;
+      }
+      /*淇敼table 琛ㄤ綋鐨勮儗鏅鑹插拰鏂囧瓧棰滆壊*/
+      /deep/ .el-table {
+        background-color: transparent;
+
+        th,
+        td {
+          background-color: transparent;
         }
-        /deep/ .el-tree-node:focus > .el-tree-node__content {
-          background-color: #b9b9b9;
+        .el-table__expanded-cell {
+          background-color: transparent !important;
         }
-        /deep/ .el-tree-node__content:hover {
-          background-color: rgb(153, 153, 153);
+
+        // 琛ㄥご鑳屾櫙鑹�
+        th.el-table__cell {
+          background-color: #303030;
+          color: #fff;
         }
-        .btnBox {
-          margin-left: 5px;
-          .el-button + .el-button {
-            margin-left: 5px;
-          }
+        tr > td {
+          background-color: #303030;
+          color: #fff;
+        }
+
+        // hover鏁堟灉
+        tr:hover > td {
+          background-color: rgba(255, 255, 255, 0.1) !important;
+        }
+
+        tbody tr:hover {
+          background-color: rgba(255, 255, 255, 0.1) !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;
         }
       }
     }
   }
-  .menuSettings {
-    width: calc(50% - 172px);
-    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;
+  /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.1) !important;
+    }
+
+    tbody tr:hover {
+      background-color: rgba(255, 255, 255, 0.1) !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;
-      border: 1px solid rgb(202, 201, 204);
-      box-sizing: border-box;
+    }
+
+    /*瀹氫箟婊戝潡 鍐呴槾褰�+鍦嗚*/
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      box-shadow: 0px 1px 3px #216fe6 inset;
+      border-radius: 6px;
+      background-color: #216fe6;
     }
   }
-  .table_box {
-    padding: 10px;
-    background: #fff;
-    border-radius: 5px;
-    border: 1px solid rgb(202, 201, 204);
-    overflow: auto;
-    height: 85%;
+  .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;
+    }
   }
-  .divider {
-    margin-top: 8px;
+  /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;
   }
 }
-.el-table,
-.el-table /deep/ .el-table__expanded-cell {
-  background-color: transparent;
+</style>
+<style>
+.el-tree .el-icon-caret-right:before {
+  color: white !important; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/
+}
+.el-tree {
+  color: white !important; /** 杩欓噷鏄淇敼鍥炬爣鐨勯鑹� **/
+  background: transparent !important;
+}
+.el-tree-node__content {
+  background: transparent !important;
 }
 
-.el-table /deep/ th,
-.el-table /deep/ tr {
-  background-color: transparent;
+.el-tree-node.is-current > .el-tree-node__content {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+  color: #409eff;
+}
+/*閲岄潰鐨勪唬鐮佸彲浠ユ牴鎹嚜宸遍渶姹傚幓杩涜鏇存敼*/
+/* 璁剧疆婊氬姩鏉$殑鏍峰紡 */
+::-webkit-scrollbar {
+  width: 4px;
+}
+/* 婊氬姩妲� */
+::-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;
+}
+.el-select-dropdown {
+  background: #303030;
+  border-color: white;
+}
+/* //鍙充晶鍜屼笅鏂圭殑鐧借竟 */
+.el-scrollbar__wrap {
+  margin-bottom: -20px !important;
+  margin-right: -20px !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background: rgba(0, 0, 0, 0.1) !important;
+}
+.el-select-dropdown__item {
+  color: white;
 }
 </style>

--
Gitblit v1.9.3