用户管理增加角色名称的下拉检索查询

yudao-ui-admin-vue3/src/views/system/user/index.vue

@@ -62,6 +62,23 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item label="角色" prop="roleIds">
+            <el-select
+              v-model="queryParams.roleIds"
+              placeholder="请选择角色"
+              clearable
+              multiple
+              filterable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="role in roleList"
+                :key="role.id"
+                :label="role.name"
+                :value="role.id"
+              />
+            </el-select>
+          </el-form-item>
           <el-form-item label="创建时间" prop="createTime">
             <el-date-picker
               v-model="queryParams.createTime"
@@ -214,6 +231,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { CommonStatusEnum } from '@/utils/constants'
 import * as UserApi from '@/api/system/user'
+import * as RoleApi from '@/api/system/role'
 import UserForm from './UserForm.vue'
 import UserImportForm from './UserImportForm.vue'
 import UserAssignRoleForm from './UserAssignRoleForm.vue'
@@ -237,9 +255,11 @@ const queryParams = reactive({
   mobile: undefined,
   status: undefined,
   deptId: undefined,
+  roleIds: [],
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
+const roleList = ref() //角色信息
 
 /** 查询列表 */
 const getList = async () => {
@@ -374,7 +394,8 @@ const handleRole = (row: UserApi.UserVO) => {
 }
 
 /** 初始化 */
-onMounted(() => {
+onMounted(async () => {
+  roleList.value = await RoleApi.getSimpleRoleList()
   getList()
 })
 </script>