Files
kra-new/web/src/view/superAdmin/user/user.vue
T
2026-08-13 22:35:13 +08:00

754 lines
21 KiB
Vue

<template>
<div>
<warning-bar title="注:右上角头像下拉可切换角色" />
<div class="kra-search-box">
<el-form ref="searchForm" :inline="true" :model="searchInfo">
<el-form-item label="用户名">
<el-input v-model="searchInfo.username" placeholder="用户名" />
</el-form-item>
<el-form-item label="昵称">
<el-input v-model="searchInfo.nickname" placeholder="昵称" />
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="searchInfo.phone" placeholder="手机号" />
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="searchInfo.email" placeholder="邮箱" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="search" @click="onSubmit">
查询
</el-button>
<el-button icon="refresh" @click="onReset"> 重置 </el-button>
</el-form-item>
</el-form>
</div>
<div class="kra-table-box">
<div class="kra-btn-list">
<el-button type="primary" icon="plus" @click="addUser"
>新增用户</el-button
>
</div>
<el-table :data="tableData" row-key="ID" :default-sort="{ prop: 'ID', order: 'descending' }" @sort-change="sortChange">
<el-table-column align="left" label="头像" min-width="75">
<template #default="scope">
<CustomPic style="margin-top: 8px" :pic-src="scope.row.headerImg" />
</template>
</el-table-column>
<el-table-column align="left" label="ID" min-width="50" prop="ID" sortable="custom" />
<el-table-column
align="left"
label="用户名"
min-width="150"
prop="userName"
/>
<el-table-column
align="left"
label="昵称"
min-width="150"
prop="nickName"
/>
<el-table-column
align="left"
label="手机号"
min-width="180"
prop="phone"
/>
<el-table-column
align="left"
label="邮箱"
min-width="180"
prop="email"
/>
<el-table-column align="left" label="用户角色" min-width="200">
<template #default="scope">
<el-cascader
v-model="scope.row.authorityIds"
:options="authOptions"
:show-all-levels="false"
collapse-tags
:props="{
multiple: true,
checkStrictly: true,
label: 'authorityName',
value: 'authorityId',
disabled: 'disabled',
emitPath: false
}"
:clearable="false"
@visible-change="
(flag) => {
changeAuthority(scope.row, flag, 0)
}
"
@remove-tag="
(removeAuth) => {
changeAuthority(scope.row, false, removeAuth)
}
"
/>
</template>
</el-table-column>
<el-table-column align="left" label="所属部门" min-width="200">
<template #default="scope">
<el-cascader
v-model="scope.row.departmentIds"
:options="deptOptions"
:show-all-levels="false"
collapse-tags
:props="{
multiple: true,
checkStrictly: true,
label: 'name',
value: 'ID',
emitPath: false
}"
placeholder="未分配"
@visible-change="
(flag) => {
changeDepartment(scope.row, flag, 0)
}
"
@remove-tag="
(removeId) => {
changeDepartment(scope.row, false, removeId)
}
"
/>
</template>
</el-table-column>
<el-table-column align="left" label="岗位" min-width="180">
<template #default="scope">
<el-select
v-model="scope.row.positionIds"
multiple
collapse-tags
placeholder="未分配"
@visible-change="
(flag) => {
changePosition(scope.row, flag)
}
"
>
<el-option
v-for="p in positionOptions"
:key="p.ID"
:label="p.name"
:value="p.ID"
/>
</el-select>
</template>
</el-table-column>
<el-table-column align="left" label="启用" min-width="150">
<template #default="scope">
<el-switch
v-model="scope.row.enable"
inline-prompt
:active-value="1"
:inactive-value="2"
@change="
() => {
switchEnable(scope.row)
}
"
/>
</template>
</el-table-column>
<el-table-column label="操作" :min-width="appStore.operateMinWith" fixed="right">
<template #default="scope">
<el-button
type="primary"
link
icon="delete"
@click="deleteUserFunc(scope.row)"
>删除</el-button
>
<el-button
type="primary"
link
icon="edit"
@click="openEdit(scope.row)"
>编辑</el-button
>
<el-button
type="primary"
link
icon="magic-stick"
@click="resetPasswordFunc(scope.row)"
>重置密码</el-button
>
</template>
</el-table-column>
</el-table>
<div class="kra-pagination">
<el-pagination
:current-page="page"
:page-size="pageSize"
:page-sizes="[10, 30, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
</div>
</div>
<!-- 重置密码对话框 -->
<el-dialog
v-model="resetPwdDialog"
title="重置密码"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form :model="resetPwdInfo" ref="resetPwdForm" label-width="100px">
<el-form-item label="用户账号">
<el-input v-model="resetPwdInfo.userName" disabled />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="resetPwdInfo.nickName" disabled />
</el-form-item>
<el-form-item label="新密码">
<div class="flex w-full">
<el-input class="flex-1" v-model="resetPwdInfo.password" placeholder="请输入新密码" show-password />
<el-button type="primary" @click="generateRandomPassword" style="margin-left: 10px">
生成随机密码
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="closeResetPwdDialog">取 消</el-button>
<el-button type="primary" @click="confirmResetPassword">确 定</el-button>
</div>
</template>
</el-dialog>
<el-drawer
v-model="addUserDialog"
:size="appStore.drawerSize"
:show-close="false"
>
<template #header>
<div class="flex justify-between items-center">
<span class="text-base">用户</span>
<div>
<el-button @click="closeAddUserDialog">取 消</el-button>
<el-button type="primary" @click="enterAddUserDialog"
>确 定</el-button
>
</div>
</div>
</template>
<el-form
ref="userForm"
:rules="rules"
:model="userInfo"
label-width="80px"
>
<el-form-item
v-if="dialogFlag === 'add'"
label="用户名"
prop="userName"
>
<el-input v-model="userInfo.userName" />
</el-form-item>
<el-form-item v-if="dialogFlag === 'add'" label="密码" prop="password">
<el-input v-model="userInfo.password" />
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input v-model="userInfo.nickName" />
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="userInfo.phone" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="userInfo.email" />
</el-form-item>
<el-form-item label="用户角色" prop="authorityId">
<el-cascader
v-model="userInfo.authorityIds"
style="width: 100%"
:options="authOptions"
:show-all-levels="false"
:props="{
multiple: true,
checkStrictly: true,
label: 'authorityName',
value: 'authorityId',
disabled: 'disabled',
emitPath: false
}"
:clearable="false"
/>
</el-form-item>
<el-form-item label="启用" prop="disabled">
<el-switch
v-model="userInfo.enable"
inline-prompt
:active-value="1"
:inactive-value="2"
/>
</el-form-item>
<el-form-item label="头像" label-width="80px">
<SelectImage v-model="userInfo.headerImg" />
</el-form-item>
</el-form>
</el-drawer>
</div>
</template>
<script setup>
import {
getUserList,
setUserAuthorities,
setUserDepartments,
setUserPositions,
register,
deleteUser
} from '@/api/user'
import { getAuthorityList } from '@/api/authority'
import { getDepartmentList } from '@/api/department'
import { getPositionList } from '@/api/position'
import CustomPic from '@/components/customPic/index.vue'
import WarningBar from '@/components/warningBar/warningBar.vue'
import { setUserInfo, resetPassword } from '@/api/user.js'
import { nextTick, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import SelectImage from '@/components/selectImage/selectImage.vue'
import { useAppStore } from "@/pinia";
import { toSQLLine } from '@/utils/stringFun'
defineOptions({
name: 'User'
})
const appStore = useAppStore()
const searchInfo = ref({
username: '',
nickname: '',
phone: '',
email: ''
})
const onSubmit = () => {
page.value = 1
getTableData()
}
const onReset = () => {
searchInfo.value = {
username: '',
nickname: '',
phone: '',
email: ''
}
orderKey.value = 'id'
desc.value = true
getTableData()
}
// 初始化相关
const setAuthorityOptions = (AuthorityData, optionsData) => {
AuthorityData &&
AuthorityData.forEach((item) => {
if (item.children && item.children.length) {
const option = {
authorityId: item.authorityId,
authorityName: item.authorityName,
children: []
}
setAuthorityOptions(item.children, option.children)
optionsData.push(option)
} else {
const option = {
authorityId: item.authorityId,
authorityName: item.authorityName
}
optionsData.push(option)
}
})
}
const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const orderKey = ref('id')
const desc = ref(true)
const sortChange = ({ prop, order }) => {
if (prop) {
orderKey.value = prop === 'ID' ? 'id' : toSQLLine(prop)
desc.value = order === 'descending'
}
getTableData()
}
// 分页
const handleSizeChange = (val) => {
pageSize.value = val
getTableData()
}
const handleCurrentChange = (val) => {
page.value = val
getTableData()
}
// 查询
const getTableData = async () => {
const table = await getUserList({
page: page.value,
pageSize: pageSize.value,
orderKey: orderKey.value,
desc: desc.value,
...searchInfo.value
})
if (table.code === 0) {
tableData.value = table.data.list
total.value = table.data.total
page.value = table.data.page
pageSize.value = table.data.pageSize
}
}
watch(
() => tableData.value,
() => {
setAuthorityIds()
setDeptPositionIds()
}
)
const authOptions = ref([])
const deptOptions = ref([])
const positionOptions = ref([])
const setOptions = (authData) => {
authOptions.value = []
setAuthorityOptions(authData, authOptions.value)
}
const initPage = async () => {
getTableData()
const res = await getAuthorityList()
setOptions(res.data)
const deptRes = await getDepartmentList()
if (deptRes.code === 0) {
deptOptions.value = deptRes.data || []
}
const posRes = await getPositionList({ page: 1, pageSize: 1000 })
if (posRes.code === 0) {
positionOptions.value = posRes.data.list || []
}
}
initPage()
// 把后端返回的部门/岗位关联映射成前端多选控件需要的 id 数组
const setDeptPositionIds = () => {
tableData.value &&
tableData.value.forEach((user) => {
user.departmentIds = user.departments
? user.departments.map((i) => i.ID)
: []
user.positionIds = user.positions
? user.positions.map((i) => i.ID)
: []
})
}
// 重置密码对话框相关
const resetPwdDialog = ref(false)
const resetPwdForm = ref(null)
const resetPwdInfo = ref({
ID: '',
userName: '',
nickName: '',
password: ''
})
// 生成随机密码
const generateRandomPassword = () => {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*'
let password = ''
for (let i = 0; i < 12; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length))
}
resetPwdInfo.value.password = password
// 复制到剪贴板
navigator.clipboard.writeText(password).then(() => {
ElMessage({
type: 'success',
message: '密码已复制到剪贴板'
})
}).catch(() => {
ElMessage({
type: 'error',
message: '复制失败,请手动复制'
})
})
}
// 打开重置密码对话框
const resetPasswordFunc = (row) => {
resetPwdInfo.value.ID = row.ID
resetPwdInfo.value.userName = row.userName
resetPwdInfo.value.nickName = row.nickName
resetPwdInfo.value.password = ''
resetPwdDialog.value = true
}
// 确认重置密码
const confirmResetPassword = async () => {
if (!resetPwdInfo.value.password) {
ElMessage({
type: 'warning',
message: '请输入或生成密码'
})
return
}
const res = await resetPassword({
ID: resetPwdInfo.value.ID,
password: resetPwdInfo.value.password
})
if (res.code === 0) {
ElMessage({
type: 'success',
message: res.msg || '密码重置成功'
})
resetPwdDialog.value = false
} else {
ElMessage({
type: 'error',
message: res.msg || '密码重置失败'
})
}
}
// 关闭重置密码对话框
const closeResetPwdDialog = () => {
resetPwdInfo.value.password = ''
resetPwdDialog.value = false
}
const setAuthorityIds = () => {
tableData.value &&
tableData.value.forEach((user) => {
user.authorityIds =
user.authorities &&
user.authorities.map((i) => {
return i.authorityId
})
})
}
const deleteUserFunc = async (row) => {
ElMessageBox.confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res = await deleteUser({ id: row.ID })
if (res.code === 0) {
ElMessage.success('删除成功')
await getTableData()
}
})
}
// 弹窗相关
const userInfo = ref({
userName: '',
password: '',
nickName: '',
headerImg: '',
authorityId: '',
authorityIds: [],
enable: 1
})
const rules = ref({
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 5, message: '最低5位字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入用户密码', trigger: 'blur' },
{ min: 6, message: '最低6位字符', trigger: 'blur' }
],
nickName: [{ required: true, message: '请输入用户昵称', trigger: 'blur' }],
phone: [
{
pattern: /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
message: '请输入合法手机号',
trigger: 'blur'
}
],
email: [
{
pattern: /^([0-9A-Za-z\-_.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g,
message: '请输入正确的邮箱',
trigger: 'blur'
}
],
authorityId: [
{ required: true, message: '请选择用户角色', trigger: 'blur' }
]
})
const userForm = ref(null)
const enterAddUserDialog = async () => {
userInfo.value.authorityId = userInfo.value.authorityIds[0]
userForm.value.validate(async (valid) => {
if (valid) {
const req = {
...userInfo.value
}
if (dialogFlag.value === 'add') {
const res = await register(req)
if (res.code === 0) {
ElMessage({ type: 'success', message: '创建成功' })
await getTableData()
closeAddUserDialog()
}
}
if (dialogFlag.value === 'edit') {
const res = await setUserInfo(req)
if (res.code === 0) {
ElMessage({ type: 'success', message: '编辑成功' })
await getTableData()
closeAddUserDialog()
}
}
}
})
}
const addUserDialog = ref(false)
const closeAddUserDialog = () => {
userForm.value.resetFields()
userInfo.value.headerImg = ''
userInfo.value.authorityIds = []
addUserDialog.value = false
}
const dialogFlag = ref('add')
const addUser = () => {
dialogFlag.value = 'add'
addUserDialog.value = true
}
const tempAuth = {}
const changeAuthority = async (row, flag, removeAuth) => {
if (flag) {
if (!removeAuth) {
tempAuth[row.ID] = [...row.authorityIds]
}
return
}
await nextTick()
const res = await setUserAuthorities({
ID: row.ID,
authorityIds: row.authorityIds
})
if (res.code === 0) {
ElMessage({ type: 'success', message: '角色设置成功' })
} else {
if (!removeAuth) {
row.authorityIds = [...tempAuth[row.ID]]
delete tempAuth[row.ID]
} else {
row.authorityIds = [removeAuth, ...row.authorityIds]
}
}
}
// 设置用户归属部门(即时保存,主部门默认沿用原主部门或取首个)
const tempDept = {}
const changeDepartment = async (row, flag, removeId) => {
if (flag) {
if (!removeId) {
tempDept[row.ID] = [...(row.departmentIds || [])]
}
return
}
await nextTick()
const deptIds = row.departmentIds || []
let primaryDeptId = 0
if (deptIds.length) {
primaryDeptId = deptIds.includes(row.deptId) ? row.deptId : deptIds[0]
}
const res = await setUserDepartments({
ID: row.ID,
deptIds,
primaryDeptId
})
if (res.code === 0) {
row.deptId = primaryDeptId
ElMessage({ type: 'success', message: '部门设置成功' })
} else {
if (!removeId) {
row.departmentIds = [...(tempDept[row.ID] || [])]
delete tempDept[row.ID]
} else {
row.departmentIds = [removeId, ...(row.departmentIds || [])]
}
}
}
// 设置用户岗位(即时保存)
const tempPos = {}
const changePosition = async (row, flag) => {
if (flag) {
tempPos[row.ID] = [...(row.positionIds || [])]
return
}
await nextTick()
const res = await setUserPositions({
ID: row.ID,
positionIds: row.positionIds || []
})
if (res.code === 0) {
ElMessage({ type: 'success', message: '岗位设置成功' })
} else {
row.positionIds = [...(tempPos[row.ID] || [])]
delete tempPos[row.ID]
}
}
const openEdit = (row) => {
dialogFlag.value = 'edit'
userInfo.value = JSON.parse(JSON.stringify(row))
addUserDialog.value = true
}
const switchEnable = async (row) => {
userInfo.value = JSON.parse(JSON.stringify(row))
await nextTick()
const req = {
...userInfo.value
}
const res = await setUserInfo(req)
if (res.code === 0) {
ElMessage({
type: 'success',
message: `${req.enable === 2 ? '禁用' : '启用'}成功`
})
await getTableData()
userInfo.value.headerImg = ''
userInfo.value.authorityIds = []
}
}
</script>
<style lang="scss">
.header-img-box {
@apply w-52 h-52 border border-solid border-gray-300 rounded-xl flex justify-center items-center cursor-pointer;
}
</style>