增加岗位角色多选，部门单选，完善新增编辑删除

src/api/system/index.ts

@@ -2,7 +2,7 @@ import { get, post, del, put } from '/@/utils/request';
 
 export default {
   role: {
-    getRoleList: (params: object) => get('/system/role/tree', params),
+    getList: (params: object) => get('/system/role/tree', params),
     getRole: (id: number) => get('/system/role/getInfoById', { id }),
     addRole: (data: object) => post('/system/role/add', data),
     deleteRole: (id: number) => del('/system/role/delInfoById', { id }),

src/views/system/role/component/editRole.vue

@@ -175,7 +175,7 @@ export default defineComponent({
 								ElMessage.success('角色添加成功');
 								closeDialog(); // 关闭弹窗
 								resetMenuSession();
-								emit('getRoleList');
+								emit('getList');
 							})
 							.finally(() => {
 								state.loading = false;
@@ -187,7 +187,7 @@ export default defineComponent({
 								ElMessage.success('角色修改成功');
 								closeDialog(); // 关闭弹窗
 								resetMenuSession();
-								emit('getRoleList');
+								emit('getList');
 							})
 							.finally(() => {
 								state.loading = false;

src/views/system/role/index.vue

@@ -63,7 +63,7 @@
       </el-table>
       <!-- <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="roleList" /> -->
     </el-card>
-    <EditRole ref="editRoleRef" @getRoleList="roleList" :list="tableData.data" />
+    <EditRole ref="editRoleRef" @getList="roleList" :list="tableData.data" />
     <permissionVue ref="permissionRef" />
   </div>
 </template>
@@ -120,7 +120,7 @@ export default defineComponent({
 			roleList();
 		};
 		const roleList = () => {
-			api.role.getRoleList(state.tableData.param).then((res: Array<TableData>) => {
+			api.role.getList(state.tableData.param).then((res: Array<TableData>) => {
 				state.tableData.data = res || [];
 			});
 		};

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

@@ -20,10 +20,12 @@
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="关联角色" prop="roleIds">
-              <el-select v-model="ruleForm.roleIds" placeholder="请选择" clearable class="w100" multiple>
-                <el-option v-for="role in roleList" :key="'role-'+role.id" :label="role.name" :value="role.id">
-                </el-option>
-              </el-select>
+              <el-cascader :options="roleData" :props="{ checkStrictly: true,multiple:true,emitPath: false, value: 'id', label: 'name' }" placeholder="请选择部门" clearable class="w100" v-model="ruleForm.roleIds">
+                <template #default="{ node, data }">
+                  <span>{{ data.name }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -57,10 +59,12 @@
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
             <el-form-item label="岗位" prop="postIds">
-              <el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
-                <el-option v-for="post in postList" :key="'post-'+post.postId" :label="post.postName" :value="post.postId">
-                </el-option>
-              </el-select>
+              <el-cascader :options="postData" :props="{ checkStrictly: true,multiple:true,emitPath: false, value: 'postId', label: 'postName' }" placeholder="请选择部门" clearable class="w100" v-model="ruleForm.postIds">
+                <template #default="{ node, data }">
+                  <span>{{ data.postName }}</span>
+                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+                </template>
+              </el-cascader>
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
@@ -102,7 +106,7 @@ interface DialogRow {
 	id?: number;
 	userName: string; // 用户名
 	userNickname: string; // 用户昵称
-	deptId: number; // 部门id
+	deptId: number | null; // 部门id
 	mobile: string; // 中国手机不带国家代码，国际手机号格式为：国家代码-手机号
 	roleIds: number[]; // 角色ID数组
 	postIds: number[]; // 岗位ID数组
@@ -122,7 +126,7 @@ interface DialogRow {
 const baseForm: DialogRow = {
 	userName: '',
 	userNickname: '',
-	deptId: 0,
+	deptId: null,
 	mobile: '',
 	birthday: '',
 	userPassword: '',
@@ -146,13 +150,16 @@ export default defineComponent({
 			type: Array,
 			default: () => [],
 		},
-		genderData: {
+		roleData: {
+			type: Array,
+			default: () => [],
+		},
+		postData: {
 			type: Array,
 			default: () => [],
 		},
 	},
 	setup(prop, { emit }) {
-		const roleList = ref([]);
 		const postList = ref([]);
 		const formRef = ref<HTMLElement | null>(null);
 		const state = reactive({
@@ -165,6 +172,8 @@ export default defineComponent({
 				userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
 				userNickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
 				deptId: [{ required: true, message: '归属部门不能为空', trigger: 'blur' }],
+				postIds: [{ required: true, message: '岗位不能为空', trigger: 'blur' }],
+				roleIds: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
 				mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
 				password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
 				userEmail: [
@@ -184,7 +193,7 @@ export default defineComponent({
 					state.ruleForm = user;
 				});
 			}
-      state.isShowDialog = true;
+			state.isShowDialog = true;
 		};
 		// 关闭弹窗
 		const closeDialog = () => {
@@ -200,7 +209,7 @@ export default defineComponent({
 			if (!formWrap) return;
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
-					if (state.ruleForm.id === 0) {
+					if (!state.ruleForm.id) {
 						//添加
 						api.user.add(state.ruleForm).then(() => {
 							ElMessage.success('用户添加成功');
@@ -220,11 +229,6 @@ export default defineComponent({
 		};
 		// 初始化部门数据
 		const initTableData = () => {
-			//获取角色岗位选项
-			// getParams().then((res:any)=>{
-			//   roleList.value = res.roleList??[];
-			//   postList.value = res.posts??[];
-			// });
 		};
 		// 页面加载时
 		onMounted(() => {
@@ -240,7 +244,6 @@ export default defineComponent({
 			closeDialog,
 			onCancel,
 			onSubmit,
-			roleList,
 			postList,
 			formRef,
 			...toRefs(state),

src/views/system/user/index.vue

@@ -58,7 +58,7 @@
               </el-form-item>
             </el-form>
           </div>
-          <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+          <el-table :data="tableData.data" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
             <!-- <el-table-column type="selection" width="55" align="center" /> -->
             <el-table-column type="index" label="序号" width="60" align="center" />
             <el-table-column prop="userName" label="账户名称" min-width="120" show-overflow-tooltip></el-table-column>
@@ -89,12 +89,12 @@
         </el-card>
       </el-col>
     </el-row>
-    <EditUser ref="editUserRef" :dept-data="deptData" :gender-data="sys_user_sex" @getUserList="userList" />
+    <EditUser ref="editUserRef" :dept-data="deptData" :post-data="postData" :role-data="roleData" @getUserList="userList" />
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentInstance } from 'vue';
+import { toRefs, reactive, onMounted, ref, defineComponent, watch } from 'vue';
 import { ElMessageBox, ElMessage, ElTree, FormInstance } from 'element-plus';
 import { Search } from '@element-plus/icons-vue';
 import EditUser from '/@/views/system/user/component/editUser.vue';
@@ -103,12 +103,14 @@ import useCommon from '/@/hooks/useCommon';
 
 interface TableDataState {
 	ids: number[];
+	loading: boolean;
 	deptProps: {};
 	deptData: any[];
+	roleData: any[];
+	postData: any[];
 	tableData: {
 		data: any[];
 		total: number;
-		loading: boolean;
 		param: {
 			pageNum: number;
 			pageSize: number;
@@ -125,8 +127,6 @@ export default defineComponent({
 	name: 'systemUser',
 	components: { EditUser },
 	setup() {
-		const { proxy } = <any>getCurrentInstance();
-		const { sys_user_sex } = proxy.useDict('sys_user_sex');
 		const editUserRef = ref();
 		const queryRef = ref();
 		const filterText = ref('');
@@ -134,6 +134,7 @@ export default defineComponent({
 		const search = Search;
 		const { statusParams } = useCommon();
 		const state = reactive<TableDataState>({
+			loading: false,
 			ids: [],
 			deptProps: {
 				id: 'deptId',
@@ -141,10 +142,11 @@ export default defineComponent({
 				label: 'deptName',
 			},
 			deptData: [],
+			postData: [],
+			roleData: [],
 			tableData: {
 				data: [],
 				total: 0,
-				loading: false,
 				param: {
 					status: -1,
 					pageNum: 1,
@@ -161,13 +163,25 @@ export default defineComponent({
 			api.dept.getList(statusParams).then((res: any) => {
 				state.deptData = res;
 			});
+			api.post.getList(statusParams).then((res: any) => {
+				state.postData = res;
+			});
+			api.role.getList(statusParams).then((res: any) => {
+				state.roleData = res;
+			});
 			userList();
 		};
 		const userList = () => {
-			api.user.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.list;
-				state.tableData.total = res.total;
-			});
+			state.loading = true;
+			api.user
+				.getList(state.tableData.param)
+				.then((res: any) => {
+					state.tableData.data = res.list;
+					state.tableData.total = res.total;
+				})
+				.finally(() => {
+					state.loading = false;
+				});
 		};
 		// 打开新增用户弹窗
 		const onOpenAddUser = () => {
@@ -285,7 +299,6 @@ export default defineComponent({
 			filterText,
 			treeRef,
 			search,
-			sys_user_sex,
 			userList,
 			handleSelectionChange,
 			handleNodeClick,