hxd/zky_mandate_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 角色关联用户数

Browse Source
This commit is contained in:
yxh 2023-03-16 11:42:10 +08:00
parent 22a33fb02c
commit b253e340e9
3 changed files with 319 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/system/role/index.vue
View File

@ -32,6 +32,12 @@
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="listOrder" label="排序" show-overflow-tooltip></el-table-column>
<el-table-column prop="userCnt" label="用户数量" align="center">
<template #default="scope">
<el-link type="primary" @click="onOpenUserList(scope.row)">{{scope.row.userCnt}}</el-link>
</template>
</el-table-column>
<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status===1">启用</el-tag>
@ -58,6 +64,10 @@
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList"/>
<DataScope ref="dataScopeRef" @getRoleList="roleList"/>
<el-dialog :title="selectRow.name+'-用户列表'" v-model="isShowDialog" width="70vw">
<UserList v-if="isShowDialog" ref="userListRef" :dept-data="deptData" :gender-data="sys_user_sex" :param="userListParam" @getUserList="userList"/>
</el-dialog>
</div>
</template>
@ -67,6 +77,9 @@ import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/system/role/component/editRole.vue';
import DataScope from '/@/views/system/role/component/dataScope.vue';
import {deleteRole, getRoleList} from "/@/api/system/role";
import {getDeptTree} from '/@/api/system/user/index';
import UserList from '/@/views/system/user/component/userList.vue';
// 定义接口来定义对象的类型
interface TableData {
id:number;
@ -76,8 +89,15 @@ interface TableData {
remark: string;
dataScope:number;
createdAt: string;
userCnt: number;
}
interface TableDataState {
isShowDialog:boolean;
selectRow:object;
deptData:any[];
userListParam: {
roleId:number | undefined;
};
tableData: {
data: Array<TableData>;
total: number;
@ -93,25 +113,33 @@ interface TableDataState {
export default defineComponent({
name: 'apiV1SystemRoleList',
components: {EditRole,DataScope},
components: {EditRole,DataScope,UserList},
setup() {
const {proxy} = getCurrentInstance() as any;
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const addRoleRef = ref();
const userListRef = ref();
const editRoleRef = ref();
const dataScopeRef =ref();
const state = reactive<TableDataState>({
tableData: {
data: [],
total: 0,
loading: false,
param: {
roleName:'',
roleStatus:'',
pageNum: 1,
pageSize: 10,
},
},
});
isShowDialog: false,
deptData: [],
userListParam: {
roleId: undefined,
},
selectRow:{},
tableData: {
data: [],
total: 0,
loading: false,
param: {
roleName: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
},
},
});
// 初始化表格数据
const initTableData = () => {
roleList()
@ -128,6 +156,7 @@ export default defineComponent({
name: item.name,
remark: item.remark,
dataScope:item.dataScope,
userCnt:item.userCnt,
createdAt: item.createdAt,
});
})
@ -135,6 +164,19 @@ export default defineComponent({
state.tableData.total = res.data.total;
})
};
// 打开角色用户列表
const onOpenUserList = (row: TableData) => {
state.selectRow = row
state.userListParam.roleId = row.id
if (state.deptData.length == 0){
getDeptTree().then((res:any)=>{
state.deptData = res.data.deps
state.isShowDialog = true
})
}else{
state.isShowDialog = true
}
};
// 打开新增角色弹窗
const onOpenAddRole = () => {
editRoleRef.value.openDialog();
@ -171,6 +213,9 @@ export default defineComponent({
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
};
const userList = ()=>{
userListRef.value.userList();
};
// 页面加载时
onMounted(() => {
initTableData();
@ -179,6 +224,9 @@ export default defineComponent({
addRoleRef,
editRoleRef,
dataScopeRef,
sys_user_sex,
userList,
onOpenUserList,
onOpenAddRole,
onOpenEditRole,
onRowDel,

216
src/views/system/user/component/userList.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<div class="system-user-list-container">
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
<el-table-column prop="dept.deptName" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column label="角色" align="center" prop="roleInfo" :show-overflow-tooltip="true" >
<template #default="scope">
<span v-for="(item,index) of scope.row.roleInfo" :key="'role-'+index"> {{item.name+' '}} </span>
</template>
</el-table-column>
<el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="userStatus" label="用户状态" show-overflow-tooltip>
<template #default="scope">
<el-switch
v-model="scope.row.userStatus"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="启"
inactive-text="禁"
@change="handleStatusChange(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
<el-button size="small" text type="primary" @click="handleResetPwd(scope.row)">重置</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="tableData.total>0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="userList"
/>
<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
</div>
</template>
<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage} from 'element-plus';
import EditUser from '/@/views/system/user/component/editUser.vue';
import {getUserList, resetUserPwd, changeUserStatus, deleteUser} from '/@/api/system/user/index';
interface TableDataState {
ids:number[];
deptProps:{};
tableData: {
data: any[];
total: number;
loading: boolean;
param: TableParam;
};
}
interface TableParam {
pageNum: number;
pageSize: number;
deptId:string;
roleId:number | undefined;
mobile:string;
status:string;
keyWords:string;
dateRange: string[];
}
export default defineComponent({
name: 'systemUserList',
props:{
deptData:{
type:Array,
default:()=>[]
},
param:{
type:Object,
default:()=>{}
},
genderData:{
type:Array,
default:()=>[]
}
},
components: { EditUser },
setup() {
const {proxy,props} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const editUserRef = ref();
const state = reactive<TableDataState>({
ids:[],
deptProps:{
id:"deptId",
children: "children",
label: "deptName"
},
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
roleId:undefined,
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
},
});
// 初始化表格数据
const initTableData = () => {
userList();
};
const userList = ()=>{
const param = {...state.tableData.param, ...props.param};
getUserList(param).then((res:any)=>{
state.tableData.data = res.data.userList??[];
state.tableData.total = res.data.total;
});
};
// 打开新增用户弹窗
const onOpenAddUser = () => {
editUserRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEditUser = (row:any) => {
editUserRef.value.openDialog(row);
};
// 删除用户
const onRowDel = (row:any) => {
let msg = '你确定要删除所选用户？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteUser(ids).then(()=>{
ElMessage.success('删除成功');
userList();
})
})
.catch(() => {});
};
// 页面加载时
onMounted(() => {
initTableData();
});
// 多选框选中数据
const handleSelectionChange = (selection:any[])=> {
state.ids = selection.map(item => item.id)
};
/** 重置密码按钮操作 */
const handleResetPwd = (row:any)=> {
ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetUserPwd(row.id, value).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 用户状态修改
const handleStatusChange = (row:any)=> {
let text = row.userStatus === 1 ? "启用" : "停用";
ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeUserStatus(row.id, row.userStatus);
}).then(() => {
ElMessage.success(text + "成功");
}).catch(function() {
row.userStatus =row.userStatus === 0 ?1 : 0;
});
};
return {
editUserRef,
onOpenAddUser,
onOpenEditUser,
onRowDel,
sys_user_sex,
userList,
handleSelectionChange,
handleResetPwd,
handleStatusChange,
...toRefs(state),
};
},
});
</script>

201
src/views/system/user/index.vue
View File

@ -22,10 +22,10 @@
<el-col :span="20">
<el-card shadow="hover">
<div class="system-user-search mb15">
<el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
<el-form :model="param" ref="queryRef" :inline="true" label-width="68px">
<el-form-item label="关键字" prop="keyWords">
<el-input
v-model="tableData.param.keyWords"
v-model="param.keyWords"
placeholder="请输入用户账号或姓名"
clearable
size="default"
@ -35,7 +35,7 @@
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
<el-input
v-model="tableData.param.mobile"
v-model="param.mobile"
placeholder="请输入手机号码"
clearable
size="default"
@ -45,7 +45,7 @@
</el-form-item>
<el-form-item label="状态" prop="status" style="width: 200px;">
<el-select
v-model="tableData.param.status"
v-model="param.status"
placeholder="用户状态"
clearable
size="default"
@ -57,7 +57,7 @@
</el-form-item>
<el-form-item label="创建时间" prop="dateRange">
<el-date-picker
v-model="tableData.param.dateRange"
v-model="param.dateRange"
size="default"
style="width: 240px"
value-format="YYYY-MM-DD"
@ -95,93 +95,46 @@
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
<el-table-column prop="dept.deptName" label="部门" show-overflow-tooltip></el-table-column>
<el-table-column label="角色" align="center" prop="roleInfo" :show-overflow-tooltip="true" >
<template #default="scope">
<span v-for="(item,index) of scope.row.roleInfo" :key="'role-'+index"> {{item.name+' '}} </span>
</template>
</el-table-column>
<el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
<el-table-column prop="userStatus" label="用户状态" show-overflow-tooltip>
<template #default="scope">
<el-switch
v-model="scope.row.userStatus"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="启"
inactive-text="禁"
@change="handleStatusChange(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" width="200">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditUser(scope.row)">修改</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
<el-button size="small" text type="primary" @click="handleResetPwd(scope.row)">重置</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="tableData.total>0"
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="userList"
/>
<UserList ref="userListRef" :dept-data="deptData" :gender-data="sys_user_sex" :param="param" @getUserList="userList"/>
</el-card>
</el-col>
</el-row>
<EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList"/>
</div>
</template>
<script lang="ts">
import {toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance} from 'vue';
import {ElMessageBox, ElMessage, ElTree,FormInstance} from 'element-plus';
import {ElTree,FormInstance} from 'element-plus';
import { Search } from '@element-plus/icons-vue'
import EditUser from '/@/views/system/user/component/editUser.vue';
import {getUserList, getDeptTree, resetUserPwd, changeUserStatus, deleteUser} from '/@/api/system/user/index';
import UserList from '/@/views/system/user/component/userList.vue';
import {getDeptTree} from '/@/api/system/user/index';
interface TableDataState {
interface QueryParam {
ids:number[];
deptProps:{};
deptData:any[];
tableData: {
data: any[];
total: number;
loading: boolean;
param: {
pageNum: number;
pageSize: number;
deptId:string;
mobile:string;
status:string;
keyWords:string;
dateRange: string[];
};
};
param: {
deptId:string;
mobile:string;
status:string;
keyWords:string;
dateRange: string[];
};
}
export default defineComponent({
name: 'systemUser',
components: { EditUser },
components: { UserList },
setup() {
const {proxy} = <any>getCurrentInstance();
const {sys_user_sex} = proxy.useDict('sys_user_sex')
const editUserRef = ref();
const userListRef = ref();
const queryRef = ref();
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const search = Search
const state = reactive<TableDataState>({
const state = reactive<QueryParam>({
ids:[],
deptProps:{
id:"deptId",
@ -209,76 +162,30 @@ export default defineComponent({
],
},
],
tableData: {
data: [],
total: 0,
loading: false,
param: {
pageNum: 1,
pageSize: 10,
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
},
param: {
deptId:'',
mobile:'',
status:'',
keyWords:'',
dateRange:[]
},
});
// 初始化表格数据
const initTableData = () => {
getDeptTree().then((res:any)=>{
state.deptData = res.data.deps
})
userList();
};
const userList = ()=>{
getUserList(state.tableData.param).then((res:any)=>{
state.tableData.data = res.data.userList??[];
state.tableData.total = res.data.total;
});
userListRef.value.userList();
};
// 打开新增用户弹窗
const onOpenAddUser = () => {
editUserRef.value.openDialog();
};
// 打开修改用户弹窗
const onOpenEditUser = (row:any) => {
editUserRef.value.openDialog(row);
userListRef.value.onOpenAddUser();
};
// 删除用户
const onRowDel = (row:any) => {
let msg = '你确定要删除所选用户？';
let ids:number[] = [] ;
if(row){
msg = `此操作将永久删除用户：“${row.userName}”，是否继续?`
ids = [row.id]
}else{
ids = state.ids
}
if(ids.length===0){
ElMessage.error('请选择要删除的数据。');
return
}
ElMessageBox.confirm(msg, '提示', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
deleteUser(ids).then(()=>{
ElMessage.success('删除成功');
userList();
})
})
.catch(() => {});
};
// 分页改变
const onHandleSizeChange = (val: number) => {
state.tableData.param.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
state.tableData.param.pageNum = val;
const onRowDel = () => {
userListRef.value.onRowDel(null);
};
// 页面加载时
onMounted(() => {
@ -291,45 +198,11 @@ export default defineComponent({
if (!value) return true;
return data.deptName.includes(value)
};
// 多选框选中数据
const handleSelectionChange = (selection:any[])=> {
state.ids = selection.map(item => item.id)
};
// 节点单击事件
const handleNodeClick = (data:any) => {
state.tableData.param.deptId = data.deptId;
state.param.deptId = data.deptId;
userList();
};
/** 重置密码按钮操作 */
const handleResetPwd = (row:any)=> {
ElMessageBox.prompt('请输入"' + row.userName + '"的新密码', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消"
}).then(({ value }) => {
if(!value || value==''){
ElMessage.success('密码不能为空');
return
}
resetUserPwd(row.id, value).then(() => {
ElMessage.success("修改成功，新密码是：" + value);
});
}).catch(() => {});
};
// 用户状态修改
const handleStatusChange = (row:any)=> {
let text = row.userStatus === 1 ? "启用" : "停用";
ElMessageBox.confirm('确认要"' + text + '"："' + row.userName + '"用户吗?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return changeUserStatus(row.id, row.userStatus);
}).then(() => {
ElMessage.success(text + "成功");
}).catch(function() {
row.userStatus =row.userStatus === 0 ?1 : 0;
});
};
/** 重置按钮操作 */
const resetQuery = (formEl: FormInstance | undefined) => {
if (!formEl) return
@ -338,22 +211,16 @@ export default defineComponent({
};
return {
queryRef,
editUserRef,
userListRef,
onOpenAddUser,
onOpenEditUser,
onRowDel,
onHandleSizeChange,
onHandleCurrentChange,
deptFilterNode,
filterText,
treeRef,
search,
sys_user_sex,
userList,
handleSelectionChange,
handleNodeClick,
handleResetPwd,
handleStatusChange,
resetQuery,
...toRefs(state),
};