huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-29 18:51:53 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

!18 解决页面操作按钮繁多时的用户体验问题

Browse Source 
Merge pull request !18 from 幕羽/feature/muyu
This commit is contained in:
芋道源码 2021-03-13 19:41:23 +08:00 committed by Gitee
commit 82b73994cb
1 changed files with 751 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
ruoyi-ui/src/views/system/user/index.vue
View File

@ -122,10 +122,10 @@
<el-table-column label="状态" align="center"> <el-table-column label="状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
v-model="scope.row.status" v-model="scope.row.status"
:active-value="0" :active-value="0"
:inactive-value="1" :inactive-value="1"
@change="handleStatusChange(scope.row)" @change="handleStatusChange(scope.row)"
></el-switch> ></el-switch>
</template> </template>
</el-table-column> </el-table-column>
@ -142,34 +142,41 @@
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="large"
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:user:edit']" v-hasPermi="['system:role:edit']"
>修改</el-button> >修改</el-button>
<el-button <el-dropdown @command="(command) => handleCommand(command, scope.$index, scope.row)">
v-if="scope.row.id !== 1" <span class="el-dropdown-link">
size="mini" 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
type="text" </span>
icon="el-icon-delete" <el-dropdown-menu slot="dropdown">
@click="handleDelete(scope.row)" <el-dropdown-item
v-hasPermi="['system:user:remove']" command="handleDelete"
>删除</el-button> v-if="scope.row.id !== 1"
<el-button size="mini"
size="mini" type="text"
type="text" icon="el-icon-delete"
icon="el-icon-key" v-hasPermi="['system:user:remove']"
@click="handleResetPwd(scope.row)" >删除</el-dropdown-item>
v-hasPermi="['system:user:resetPwd']" <el-dropdown-item
>重置</el-button> command="handleResetPwd"
<el-button size="mini"
size="mini" type="text"
type="text" icon="el-icon-key"
icon="el-icon-circle-check" v-hasPermi="['system:user:resetPwd']"
@click="handleRole(scope.row)" >重置</el-dropdown-item>
v-hasPermi="['system:permission:assign-user-role']" <el-dropdown-item
>分配角色</el-button> command="handleRole"
size="mini"
type="text"
icon="el-icon-circle-check"
v-hasPermi="['system:permission:assign-user-role']"
>分配角色</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -452,6 +459,25 @@ export default {
}); });
}, },
methods: { methods: {
// 更多操作
handleCommand(command, index, row) {
switch (command) {
case 'handleUpdate':
this.handleUpdate(row);//修改客户信息
break;
case 'handleDelete':
this.handleDelete(row);//红号变更
break;
case 'handleResetPwd':
this.handleResetPwd(row);
break;
case 'handleRole':
this.handleRole(row);
break;
default:
break;
}
},
/** 查询用户列表 */ /** 查询用户列表 */
getList() { getList() {
this.loading = true; this.loading = true;
@ -713,3 +739,13 @@ export default {
} }
}; };
</script> </script>
<style>
.el-dropdown-link {
cursor: pointer;
color: #1890ff;
margin-left: 5px;
}
.el-icon-arrow-down {
font-size: 14px;
}
</style>