|
|
@@ -0,0 +1,174 @@
|
|
|
+<template>
|
|
|
+ <Dialog v-model="dialogVisible" title="分配用户">
|
|
|
+ <el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
|
|
|
+ <el-form-item label="角色名称">
|
|
|
+ <el-tag>{{ formData.name }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="角色标识">
|
|
|
+ <el-tag>{{ formData.code }}</el-tag>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="选择用户">
|
|
|
+ <el-input
|
|
|
+ v-model="userSearch.nickName"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入用户名搜索"
|
|
|
+ class="mb-14px"
|
|
|
+ @keyup.enter="fetchUserList"
|
|
|
+ >
|
|
|
+ <template #append>
|
|
|
+ <el-button @click="fetchUserList">
|
|
|
+ <Icon icon="ep:search" />
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ <SmartTable
|
|
|
+ ref="userTableRef"
|
|
|
+ v-model:pageNo="userSearch.pageNo"
|
|
|
+ v-model:pagesize="userSearch.pageSize"
|
|
|
+ :total="userSearch.total"
|
|
|
+ :columns="userColumns"
|
|
|
+ :data="userTableData"
|
|
|
+ :buttons="[]"
|
|
|
+ :showSettingTools="false"
|
|
|
+ :showSearch="false"
|
|
|
+ :showRefresh="false"
|
|
|
+ @on-page-size-change="onPageSizeChange"
|
|
|
+ @on-page-no-change="onPageNoChange"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ </template>
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import * as RoleApi from '@/api/system/role'
|
|
|
+import * as UserApi from '@/api/system/user'
|
|
|
+import SmartTable from '@/components/SmartTable/SmartTable'
|
|
|
+
|
|
|
+defineOptions({ name: 'SystemRoleAssignUserForm' })
|
|
|
+
|
|
|
+const message = useMessage()
|
|
|
+
|
|
|
+const dialogVisible = ref(false)
|
|
|
+const formLoading = ref(false)
|
|
|
+const formData = reactive({
|
|
|
+ roleId: undefined as number | undefined,
|
|
|
+ name: '',
|
|
|
+ code: ''
|
|
|
+})
|
|
|
+const formRef = ref()
|
|
|
+
|
|
|
+// 用户搜索条件
|
|
|
+const userSearch = reactive({
|
|
|
+ nickName: '',
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+// 用户表格
|
|
|
+const userTableRef = ref()
|
|
|
+const userTableData = ref<any[]>([])
|
|
|
+const userColumns = [
|
|
|
+ { type: 'selection', width: '50px' },
|
|
|
+ { label: '工号', prop: 'employeeNo' },
|
|
|
+ { label: '用户名', prop: 'nickname' },
|
|
|
+ { label: '部门', prop: 'deptName' }
|
|
|
+]
|
|
|
+
|
|
|
+/** 获取用户列表 */
|
|
|
+const fetchUserList = async () => {
|
|
|
+ const params: PageParam = {
|
|
|
+ pageNo: userSearch.pageNo,
|
|
|
+ pageSize: userSearch.pageSize,
|
|
|
+ nickName: userSearch.nickName || undefined
|
|
|
+ }
|
|
|
+ const data = await UserApi.getUserPage(params)
|
|
|
+ userTableData.value = data.list || []
|
|
|
+ userSearch.total = data.total || 0
|
|
|
+
|
|
|
+ // 预选已有该角色的用户
|
|
|
+ await nextTick()
|
|
|
+ preSelectRows()
|
|
|
+}
|
|
|
+
|
|
|
+/** 根据角色预选已有的用户 */
|
|
|
+const preSelectRows = async () => {
|
|
|
+ if (!formData.roleId) return
|
|
|
+ const existingUserIds = await RoleApi.getRoleUserIdList(formData.roleId)
|
|
|
+ if (!existingUserIds || existingUserIds.length === 0) return
|
|
|
+ const tableRef = userTableRef.value?.getTableRef?.()
|
|
|
+ if (!tableRef) return
|
|
|
+ userTableData.value.forEach((row: any) => {
|
|
|
+ if (existingUserIds.includes(String(row.id))) {
|
|
|
+ tableRef.toggleRowSelection(row, true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+const onPageSizeChange = (val: number) => {
|
|
|
+ userSearch.pageSize = val
|
|
|
+ fetchUserList()
|
|
|
+}
|
|
|
+const onPageNoChange = (val: number) => {
|
|
|
+ userSearch.pageNo = val
|
|
|
+ fetchUserList()
|
|
|
+}
|
|
|
+
|
|
|
+/** 打开弹窗 */
|
|
|
+const open = async (row: RoleApi.RoleVO) => {
|
|
|
+ dialogVisible.value = true
|
|
|
+ resetForm()
|
|
|
+ formData.roleId = row.id
|
|
|
+ formData.name = row.name
|
|
|
+ formData.code = row.code
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ await fetchUserList()
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+defineExpose({ open })
|
|
|
+
|
|
|
+/** 提交表单 */
|
|
|
+const emit = defineEmits(['success'])
|
|
|
+const submitForm = async () => {
|
|
|
+ if (!formData.roleId) {
|
|
|
+ message.error('角色信息异常')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ formLoading.value = true
|
|
|
+ try {
|
|
|
+ const tableRef = userTableRef.value?.getTableRef?.()
|
|
|
+ // 获取所有选中的行(跨页选中)
|
|
|
+ const selectedRows = tableRef?.getSelectionRows?.() || []
|
|
|
+ const selectedUserIds: string[] = selectedRows.map((row: any) => String(row.id))
|
|
|
+ if (selectedUserIds.length === 0) {
|
|
|
+ message.warning('请至少选择一个用户')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ await RoleApi.assignRoleUsers({
|
|
|
+ roleId: String(formData.roleId),
|
|
|
+ userIds: selectedUserIds
|
|
|
+ })
|
|
|
+ message.success('分配用户成功')
|
|
|
+ dialogVisible.value = false
|
|
|
+ emit('success')
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 重置 */
|
|
|
+const resetForm = () => {
|
|
|
+ userSearch.nickName = ''
|
|
|
+ userSearch.pageNo = 1
|
|
|
+ userSearch.pageSize = 10
|
|
|
+ userSearch.total = 0
|
|
|
+ userTableData.value = []
|
|
|
+}
|
|
|
+</script>
|