角色总览修改

src/views/permissionManagement/roleOverview.vue

@@ -1,34 +1,27 @@
 <template>
     <div class="container">
-        <div class="left-pane">
-            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
-            <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
-                :filter-node-method="filterNode" @node-click="handleNodeClick">
-            </el-tree>
-            <el-button><i class="el-icon-s-order"></i>新建角色</el-button>
-        </div>
-        <div class="right-pane">
+        <div class="header">
             <p class="info">角色总览</p>
-            <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
-                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" style="width: 100%"
-                @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="50">
-                </el-table-column>
-                <el-table-column prop="rolename" label="角色名称">
-                </el-table-column>
-                <el-table-column prop="role_desc" label="角色描述">
-                </el-table-column>
-                <el-table-column prop="role_members" label="角色成员">
-                </el-table-column>
-                <el-table-column prop="associated_ORN" label="关联组织">
-                </el-table-column>
-                <el-table-column prop="operation" label="操作">
-                    <el-button size="mini" type="text">查看</el-button>
-                    <el-button size="mini" type="text">编辑</el-button>
-                    <el-button size="mini" type="text">删除</el-button>
-                </el-table-column>
-            </el-table>
+            <el-input class="searchBox" placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
         </div>
+        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell-style="{ textAlign: 'center' }"
+            :cell-style="{ textAlign: 'center' }" height="400" style="width: 98%" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="50">
+            </el-table-column>
+            <el-table-column prop="rolename" label="角色名称">
+            </el-table-column>
+            <el-table-column prop="role_desc" label="角色描述">
+            </el-table-column>
+            <el-table-column prop="role_members" label="角色成员">
+            </el-table-column>
+            <el-table-column prop="associated_ORN" label="关联组织">
+            </el-table-column>
+            <el-table-column prop="operation" label="操作">
+                <el-button size="mini" type="text">查看</el-button>
+                <el-button size="mini" type="text">编辑</el-button>
+                <el-button size="mini" type="text">删除</el-button>
+            </el-table-column>
+        </el-table>
         <div class="bottom">
             <div class="bottom_button" v-show="show">
                 <el-button class="delete" type="text">批量删除</el-button>
@@ -140,77 +133,125 @@ export default {
     text-align: center;
     box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
-    .left-pane {
-        width: 300px;
-        padding: 15px;
-
-        .el-tree {
-            height: 700px;
-            margin-top: 15px;
-            background-color: rgb(247, 245, 243);
+    .header {
+        padding-top: 20px;
+        .info {
+            text-align: left;
+            padding: 20px;
+            font-size: 25px;
         }
 
-        .el-button {
+        .searchBox {
             position: absolute;
-            left: 35px;
-            bottom: 40px;
-            width: 250px;
-            background-color: rgb(131, 208, 243);
+            top: 15px;
+            right: 141px;
+            bottom: 11px;
+            width: 350px;
+            height: 35px;
+            line-height: 20px;
+            border-radius: 3px;
+            background-color: #F7F9FA;
+            color: #D7D8D8;
+            font-size: 14px;
             text-align: center;
-            font-size: 16px;
+
+            /deep/.el-input__inner {
+                height: 35px;
+            }
         }
     }
 
-    .right-pane {
-        width: 1340px;
-        position: absolute;
-        margin-left: 330px;
-        top: 0;
-        margin-right: 20px;
-    }
-}
+    .el-table {
+        position: relative;
+        top: 10px;
+        margin-left: 1%;
+        border: 1px solid #f0f2f2;
+        font-size: 0.95rem;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #b2b2b2;
+        background: rgba(255, 255, 255, 0.8);
 
-.info {
-    text-align: left;
-    padding: 20px;
-    font-size: 25px;
-}
+        /deep/th {
+            background: #f7fbff;
+        }
 
-.bottom {
-    position: absolute;
-    left: 330px;
-    right: 16px;
-    bottom: 20px;
-    height: 50px;
-    line-height: 20px;
-    background-color: rgba(255, 255, 255, 1);
-    text-align: center;
+        /deep/.el-checkbox {
+            color: #b2b2b2;
 
-    .checkbox {
-        position: absolute;
-        left: 30px;
-        top: 15px;
-        font-size: 14px;
+            .el-checkbox__input.is-checked+.el-checkbox__label {
+                color: #2ea8e6;
+            }
+
+            .el-checkbox__input.is-checked .el-checkbox__inner::after {
+                width: 70%;
+                height: 70%;
+                background: #2ea8e6;
+                border-radius: 0;
+                transform: rotate(0deg) scaleY(1);
+                position: static;
+                // border: 1px solid #8DD9FF;
+            }
+
+            .el-checkbox__inner {
+                border: 1px solid #8dd9ff;
+                background: rgba(0, 170, 255, 0);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: static;
+
+                &::after {
+                    transition: 0ms;
+                }
+            }
+
+            .el-checkbox__label {
+                padding-left: 0;
+                font-size: 15px;
+                position: absolute;
+                top: 1px;
+                left: 25px;
+            }
+        }
     }
 
-    .check-cancel {
+    .bottom {
         position: absolute;
-        // line-height: 20px;
-        font-size: 14px;
+        left: 330px;
+        right: 16px;
+        bottom: 20px;
+        height: 50px;
+        line-height: 20px;
+        background-color: rgba(255, 255, 255, 1);
         text-align: center;
-        left: 140px;
-        top: 10px;
-    }
 
-    .bottom_button {
-        position: absolute;
-        left: 200px;
-        margin-top: 15px;
+        .checkbox {
+            position: absolute;
+            left: 30px;
+            top: 15px;
+            font-size: 14px;
+        }
 
-        .delete {
+        .check-cancel {
+            position: absolute;
+            // line-height: 20px;
             font-size: 14px;
             text-align: center;
-            padding: 1px;
+            left: 140px;
+            top: 10px;
+        }
+
+        .bottom_button {
+            position: absolute;
+            left: 200px;
+            margin-top: 15px;
+
+            .delete {
+                font-size: 14px;
+                text-align: center;
+                padding: 1px;
+            }
         }
     }
 }

src/views/userManagement/personManagement/tables/deactiveUser.vue

@@ -2,7 +2,7 @@
     <div>
         <div class="batch_button">
             <el-button class="export" @click="exportData">导出数据</el-button>
-            <el-button class="disabled" @click="batchActivate">批量禁用</el-button>
+            <el-button class="disabled" @click="batchDisabled">批量禁用</el-button>
             <el-button class="delete" @click="batchDelete">批量删除</el-button>
         </div>
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
@@ -111,6 +111,15 @@ export default {
             this.currentPageSize = val;
             this.getTableData(this.currentPage);
         },
+        exportData(){
+
+        },
+        batchDelete(){
+
+        },
+        batchDisabled(){
+            
+        }
     }
 }
 </script>