root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

REVIEW 用户管理（列表）

Browse Source
This commit is contained in:
YunaiV 2023-03-31 07:54:33 +08:00
parent 1434cdabe0
commit 643b387367
5 changed files with 130 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/system/user/index.ts
View File

@ -17,23 +17,8 @@ export interface UserVO {
createTime: Date
}
export interface UserPageReqVO extends PageParam {
deptId?: number
username?: string
mobile?: string
status?: number
createTime?: Date[]
}
export interface UserExportReqVO {
code?: string
name?: string
status?: number
createTime?: Date[]
}
// 查询用户管理列表
export const getUserPageApi = (params: UserPageReqVO) => {
export const getUserPage = (params: PageParam) => {
return request.get({ url: '/system/user/page', params })
}
@ -53,12 +38,12 @@ export const updateUserApi = (data: UserVO | Recordable) => {
}
// 删除用户
export const deleteUserApi = (id: number) => {
export const deleteUser = (id: number) => {
return request.delete({ url: '/system/user/delete?id=' + id })
}
// 导出用户
export const exportUserApi = (params: UserExportReqVO) => {
export const exportUser = (params) => {
return request.download({ url: '/system/user/export', params })
}

2
src/views/system/tenantPackage/index.vue
View File

@ -112,7 +112,7 @@ const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams: Record<string, any> = ref<Record<string, any>>({
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: null,

29
src/views/system/user/components/UserDeptTree.vue → src/views/system/user/DeptTree.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable style="margin-bottom: 20px">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable class="mb-20px">
<template #prefix>
<Icon icon="ep:search" />
</template>
@ -8,15 +8,15 @@
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:data="deptList"
:props="defaultProps"
node-key="id"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="treeRef"
node-key="id"
default-expand-all
highlight-current
@node-click="handleDeptNodeClick"
@node-click="handleNodeClick"
/>
</div>
</template>
@ -26,25 +26,30 @@ import { ElTree } from 'element-plus'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'
const emits = defineEmits(['node-click'])
const deptName = ref('')
const deptOptions = ref<Tree[]>([]) // 树形结构
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()
/** 获得部门树 */
const getTree = async () => {
const res = await DeptApi.getSimpleDeptList()
deptOptions.value = []
deptOptions.value.push(...handleTree(res))
deptList.value = []
deptList.value.push(...handleTree(res))
}
const filterNode = (value: string, data: Tree) => {
if (!value) return true
return data.name.includes(value)
/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
if (!name) return true
return data.name.includes(name)
}
const handleDeptNodeClick = async (row: { [key: string]: any }) => {
/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
emits('node-click', row)
}
const emits = defineEmits(['node-click'])
/** 初始化 */
onMounted(async () => {
await getTree()
})

10
src/views/system/user/components/UserForm.vue
View File

@ -56,7 +56,7 @@
<el-select v-model="formData.sex" placeholder="请选择">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value as number"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
@ -70,7 +70,7 @@
v-for="item in postOptions"
:key="item.id"
:label="item.name"
:value="item.id as number"
:value="item.id"
/>
</el-select>
</el-form-item>
@ -102,7 +102,6 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { defaultProps, handleTree } from '@/utils/tree'
import { ElForm, FormItemRule } from 'element-plus'
import { Arrayable } from 'element-plus/es/utils'
import { UserVO } from '@/api/login/types'
type Form = InstanceType<typeof ElForm>
@ -210,7 +209,8 @@ const cancel = () => {
}
/* 打开弹框 */
const openForm = (row: undefined | UserVO) => {
const open = (type: string, id?: number) => {
console.log(type, id)
resetForm()
getTree() // 部门树
if (row && row.id) {
@ -232,6 +232,6 @@ onMounted(async () => {
defineExpose({
resetForm,
openForm
open
})
</script>

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

@ -1,20 +1,19 @@
<template>
<!-- 搜索工作栏 -->
<el-row :gutter="20">
<!--部门数据-->
<!-- 左侧部门树 -->
<el-col :span="4" :xs="24">
<content-wrap class="h-1/1">
<UserDeptTree @node-click="handleDeptNodeClick" />
<DeptTree @node-click="handleDeptNodeClick" />
</content-wrap>
</el-col>
<!--用户数据-->
<el-col :span="20" :xs="24">
<!-- 搜索 -->
<content-wrap>
<el-form
class="-mb-15px"
:model="queryParams"
ref="queryFormRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="用户名称" prop="username">
@ -22,8 +21,8 @@
v-model="queryParams.username"
placeholder="请输入用户名称"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="手机号码" prop="mobile">
@ -31,8 +30,8 @@
v-model="queryParams.mobile"
placeholder="请输入手机号码"
clearable
style="width: 240px"
@keyup.enter="handleQuery"
class="!w-240px"
/>
</el-form-item>
<el-form-item label="状态" prop="status">
@ -40,7 +39,7 @@
v-model="queryParams.status"
placeholder="用户状态"
clearable
style="width: 240px"
class="!w-240px"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@ -53,31 +52,30 @@
<el-form-item label="创建时间" prop="createTime">
<el-date-picker
v-model="queryParams.createTime"
style="width: 240px"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
class="!w-240px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
<el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
<el-button type="primary" plain @click="handleAdd" v-hasPermi="['system:user:create']">
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['system:user:create']"
>
<Icon icon="ep:plus" /> 新增
</el-button>
<el-button
type="info"
size="small"
@click="handleImport"
v-hasPermi="['system:user:import']"
>
<el-button type="info" plain @click="handleImport" v-hasPermi="['system:user:import']">
<Icon icon="ep:upload" /> 导入
</el-button>
<el-button
type="warning"
size="small"
plain
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:user:export']"
@ -88,28 +86,18 @@
</el-form>
</content-wrap>
<content-wrap>
<el-table v-loading="loading" :data="userList">
<el-table-column
label="用户编号"
align="center"
key="id"
prop="id"
v-if="columns[0].visible"
/>
<el-table v-loading="loading" :data="list">
<el-table-column label="用户编号" align="center" key="id" prop="id" />
<el-table-column
label="用户名称"
align="center"
key="username"
prop="username"
v-if="columns[1].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="用户昵称"
align="center"
key="nickname"
prop="nickname"
v-if="columns[2].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
@ -117,18 +105,10 @@
align="center"
key="deptName"
prop="dept.name"
v-if="columns[3].visible"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号码"
align="center"
key="mobile"
prop="mobile"
v-if="columns[4].visible"
width="120"
/>
<el-table-column label="状态" key="status" v-if="columns[5].visible" align="center">
<el-table-column label="手机号码" align="center" prop="mobile" width="120" />
<el-table-column label="状态" key="status">
<template #default="scope">
<el-switch
v-model="scope.row.status"
@ -142,28 +122,20 @@
label="创建时间"
align="center"
prop="createTime"
v-if="columns[6].visible"
width="160"
>
<template #default="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="160"
class-name="small-padding fixed-width"
>
:formatter="dateFormatter"
width="180"
/>
<el-table-column label="操作" align="center" width="160">
<template #default="scope">
<div class="flex justify-center items-center">
<el-button
type="primary"
link
@click="handleUpdate(scope.row)"
@click="openForm('update', scope.row.id)"
v-hasPermi="['system:user:update']"
><Icon icon="ep:edit" />修改</el-button
>
<Icon icon="ep:edit" />修改
</el-button>
<el-dropdown
@command="(command) => handleCommand(command, scope.$index, scope.row)"
v-hasPermi="[
@ -172,25 +144,25 @@
'system:permission:assign-user-role'
]"
>
<el-button type="primary" link><Icon icon="ep:d-arrow-right" />更多</el-button>
<el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
<template #dropdown>
<el-dropdown-menu>
<!-- div包住避免控制台报错：Runtime directive used on component with non-element root node -->
<div v-if="scope.row.id !== 1" v-hasPermi="['system:user:delete']">
<el-dropdown-item command="handleDelete" type="text"
><Icon icon="ep:delete" />删除</el-dropdown-item
>
<div v-hasPermi="['system:user:delete']">
<el-dropdown-item command="handleDelete">
<Icon icon="ep:delete" />删除
</el-dropdown-item>
</div>
<div v-hasPermi="['system:user:update-password']">
<el-dropdown-item command="handleResetPwd" type="text"
><Icon icon="ep:key" />重置密码</el-dropdown-item
></div
>
<el-dropdown-item command="handleResetPwd">
<Icon icon="ep:key" />重置密码
</el-dropdown-item>
</div>
<div v-hasPermi="['system:permission:assign-user-role']">
<el-dropdown-item command="handleRole" type="text"
><Icon icon="ep:circle-check" />分配角色</el-dropdown-item
></div
>
<el-dropdown-item command="handleRole">
<Icon icon="ep:circle-check" />分配角色
</el-dropdown-item>
</div>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -198,8 +170,7 @@
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@ -210,36 +181,32 @@
</el-row>
<!-- 添加或修改用户对话框 -->
<UserForm ref="userFormRef" @success="getList" />
<UserForm ref="formRef" @success="getList" />
<!-- 用户导入对话框 -->
<UserImportForm ref="userImportFormRef" @success="getList" />
<UserImportForm ref="importFormRef" @success="getList" />
<!-- 分配角色 -->
<UserAssignRoleForm ref="userAssignRoleFormRef" @success="getList" />
<UserAssignRoleForm ref="assignRoleFormRef" @success="getList" />
</template>
<script setup lang="ts" name="User">
import download from '@/utils/download'
import { parseTime } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { CommonStatusEnum } from '@/utils/constants'
import {
deleteUserApi,
exportUserApi,
resetUserPwdApi,
updateUserStatusApi,
getUserPageApi,
UserVO
} from '@/api/system/user'
import { resetUserPwdApi, updateUserStatusApi, UserVO } from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import UserForm from './components/UserForm.vue'
import UserImportForm from './components/UserImportForm.vue'
import UserAssignRoleForm from './components/UserAssignRoleForm.vue'
import UserDeptTree from './components/UserDeptTree.vue'
import DeptTree from './DeptTree.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
@ -249,35 +216,18 @@ const queryParams = reactive({
deptId: undefined,
createTime: []
})
const showSearch = ref(true)
const handleDeptNodeClick = async (row: { [key: string]: any }) => {
queryParams.deptId = row.id
getList()
}
// 用户列表
const userList = ref<UserVO[]>([])
const loading = ref(false)
const total = ref(0)
const columns = ref([
{ key: 0, label: `用户编号`, visible: true },
{ key: 1, label: `用户名称`, visible: true },
{ key: 2, label: `用户昵称`, visible: true },
{ key: 3, label: `部门`, visible: true },
{ key: 4, label: `手机号码`, visible: true },
{ key: 5, label: `状态`, visible: true },
{ key: 6, label: `创建时间`, visible: true }
])
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getList = () => {
const getList = async () => {
loading.value = true
getUserPageApi(queryParams).then((response) => {
userList.value = response.list
total.value = response.total
try {
const data = await UserApi.getUserPage(queryParams.value)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
})
}
}
/** 搜索按钮操作 */
@ -287,54 +237,35 @@ const handleQuery = () => {
}
/** 重置按钮操作 */
const queryFormRef = ref()
const resetQuery = () => {
queryFormRef.value?.resetFields()
handleQuery()
}
// 添加或编辑
const userFormRef = ref()
// 添加用户
const handleAdd = () => {
userFormRef.value?.openForm()
/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
queryParams.deptId = row.id
await getList()
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
// 用户导入
const userImportFormRef = ref()
const importFormRef = ref()
const handleImport = () => {
userImportFormRef.value?.openForm()
}
// 用户导出
const exportLoading = ref(false)
const handleExport = () => {
message
.confirm('是否确认导出所有用户数据项?')
.then(async () => {
// 处理查询参数
let params = { ...queryParams }
params.pageNo = 1
params.pageSize = 99999
exportLoading.value = true
const response = await exportUserApi(params)
download.excel(response, '用户数据.xls')
})
.catch(() => {})
.finally(() => {
exportLoading.value = false
})
importFormRef.value?.openForm()
}
// 操作分发
const handleCommand = (command: string, index: number, row: UserVO) => {
const handleCommand = (command: string, index: number, row: UserApi.UserVO) => {
console.log(index)
switch (command) {
case 'handleUpdate':
handleUpdate(row) //修改客户信息
break
case 'handleDelete':
handleDelete(row) //红号变更
handleDelete(row.id)
break
case 'handleResetPwd':
handleResetPwd(row)
@ -366,25 +297,33 @@ const handleStatusChange = (row: UserVO) => {
})
}
// 具体数据单行操作
/** 修改按钮操作 */
const handleUpdate = (row: UserVO) => {
userFormRef.value?.openForm(row)
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await UserApi.deleteUser(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
// 删除用户
const handleDelete = (row: UserVO) => {
const ids = row.id
message
.confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
.then(async () => {
await deleteUserApi(ids)
message.success('删除成功')
getList()
})
.catch((e) => {
console.error(e)
})
/** 导出按钮操作 */
const exportLoading = ref(false)
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await UserApi.exportUser(queryParams)
download.excel(data, '用户数据.xls')
} catch {
} finally {
exportLoading.value = false
}
}
// 重置密码
@ -401,13 +340,13 @@ const handleResetPwd = (row: UserVO) => {
}
// 分配角色
const userAssignRoleFormRef = ref()
const assignRoleFormRef = ref()
const handleRole = (row: UserVO) => {
userAssignRoleFormRef.value?.openForm(row)
assignRoleFormRef.value?.openForm(row)
}
// ========== 初始化 ==========
onMounted(async () => {
/** 初始化 */
onMounted(() => {
getList()
})
</script>