Browse Source

组件优化:重构角色和用户管理操作按钮,将下拉菜单改为独立按钮显示

刘博博 1 tuần trước cách đây
mục cha
commit
9ac9ae348d
2 tập tin đã thay đổi với 31 bổ sung45 xóa
  1. 15 22
      src/views/system/role/index.vue
  2. 16 23
      src/views/system/user/index.vue

+ 15 - 22
src/views/system/role/index.vue

@@ -134,15 +134,20 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:role:remove']"
           >删除</el-button>
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
-            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
-                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
-              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
-                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-circle-check"
+            @click="handleDataScope(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >数据权限</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-user"
+            @click="handleAuthUser(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >分配用户</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -454,19 +459,7 @@ export default {
       this.single = selection.length!=1
       this.multiple = !selection.length
     },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleDataScope":
-          this.handleDataScope(row);
-          break;
-        case "handleAuthUser":
-          this.handleAuthUser(row);
-          break;
-        default:
-          break;
-      }
-    },
+
     // 树权限(展开/折叠)
     handleCheckedTreeExpand(value, type) {
       if (type == 'menu') {

+ 16 - 23
src/views/system/user/index.vue

@@ -161,7 +161,7 @@
           <el-table-column
             label="操作"
             align="center"
-            width="160"
+            width="300"
             class-name="small-padding fixed-width"
             fixed="right"
           >
@@ -180,15 +180,20 @@
                 @click="handleDelete(scope.row)"
                 v-hasPermi="['system:user:remove']"
               >删除</el-button>
-              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:user:resetPwd', 'system:user:edit']">
-                <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item command="handleResetPwd" icon="el-icon-key"
-                    v-hasPermi="['system:user:resetPwd']">重置密码</el-dropdown-item>
-                  <el-dropdown-item command="handleAuthRole" icon="el-icon-circle-check"
-                    v-hasPermi="['system:user:edit']">分配角色</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-key"
+                @click="handleResetPwd(scope.row)"
+                v-hasPermi="['system:user:resetPwd']"
+              >重置密码</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-circle-check"
+                @click="handleAuthRole(scope.row)"
+                v-hasPermi="['system:user:edit']"
+              >分配角色</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -547,19 +552,7 @@ export default {
       this.single = selection.length != 1;
       this.multiple = !selection.length;
     },
-    // 更多操作触发
-    handleCommand(command, row) {
-      switch (command) {
-        case "handleResetPwd":
-          this.handleResetPwd(row);
-          break;
-        case "handleAuthRole":
-          this.handleAuthRole(row);
-          break;
-        default:
-          break;
-      }
-    },
+
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();