add 角色关联用户数

src/views/system/role/index.vue

@@ -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: {
+      isShowDialog: false,
-				data: [],
+      deptData: [],
-				total: 0,
+      userListParam: {
-				loading: false,
+        roleId: undefined,
-				param: {
+      },
-          roleName:'',
+			selectRow:{},
-          roleStatus:'',
+      tableData: {
-					pageNum: 1,
+        data: [],
-					pageSize: 10,
+        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,

src/views/system/user/component/userList.vue

@@ -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>

src/views/system/user/index.vue

@@ -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" />
+          <UserList ref="userListRef" :dept-data="deptData" :gender-data="sys_user_sex" :param="param" @getUserList="userList"/>
-            <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"
-          />
         </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 UserList from '/@/views/system/user/component/userList.vue'; 
-import {getUserList, getDeptTree, resetUserPwd, changeUserStatus, deleteUser} from '/@/api/system/user/index';
+import {getDeptTree} from '/@/api/system/user/index';
-
+ 
-interface TableDataState {
+interface QueryParam { 
   ids:number[];
   deptProps:{};
   deptData:any[];
-	tableData: {
+  param: { 
-		data: any[];
+    deptId:string;
-		total: number;
+    mobile:string;
-		loading: boolean;
+    status:string;
-		param: {
+    keyWords:string;
-			pageNum: number;
+    dateRange: string[];
-			pageSize: number;
+  };
-      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,77 +162,31 @@ export default defineComponent({
           ],
         },
       ],
-			tableData: {
+      param: {
-				data: [],
+        deptId:'',
-				total: 0,
+        mobile:'',
-				loading: false,
+        status:'',
-				param: {
+        keyWords:'',
-          pageNum: 1,
+        dateRange:[]
-          pageSize: 10,
+      },
-          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)=>{
+      userListRef.value.userList();
-        state.tableData.data = res.data.userList??[];
-        state.tableData.total = res.data.total;
-      });
     };
 		// 打开新增用户弹窗
 		const onOpenAddUser = () => {
-      editUserRef.value.openDialog();
+      userListRef.value.onOpenAddUser();
-		};
+		}; 
-		// 打开修改用户弹窗
-		const onOpenEditUser = (row:any) => {
-			editUserRef.value.openDialog(row);
-		};
 		// 删除用户
-		const onRowDel = (row:any) => {
+		const onRowDel = () => {
-      let msg = '你确定要删除所选用户？';
+      userListRef.value.onRowDel(null); 
-      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;
-		};
 		// 页面加载时
 		onMounted(() => {
 			initTableData();
@@ -290,46 +197,12 @@ export default defineComponent({
     const deptFilterNode = (value: string, data:any) => {
       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,
+			onOpenAddUser, 
-			onOpenEditUser,
+			onRowDel, 
-			onRowDel,
-			onHandleSizeChange,
-			onHandleCurrentChange,
       deptFilterNode,
       filterText,
       treeRef,
       search,
       sys_user_sex,
-      userList,
+      userList, 
-      handleSelectionChange,
       handleNodeClick,
-      handleResetPwd,
-      handleStatusChange,
       resetQuery,
 			...toRefs(state),
 		};