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

!76 用户管理代码二次重构

Browse Source 
Merge pull request !76 from fessor/dev
This commit is contained in:
芋道源码 2023-03-30 01:42:08 +00:00 committed by Gitee
commit d28179d196
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 596 additions and 670 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/system/user/RoleForm.vue → src/views/system/user/components/UserAssignRoleForm.vue
View File

@ -1,89 +1,108 @@
<template> <template>
<el-dialog title="分配角色" :modelValue="show" width="500px" append-to-body @close="closeDialog"> <Dialog
<el-form :model="formData" label-width="80px" ref="formRef"> title="分配角色"
<el-form-item label="用户名称"> :modelValue="showDialog"
<el-input v-model="formData.username" :disabled="true" /> width="500px"
</el-form-item> append-to-body
<el-form-item label="用户昵称"> @close="closeDialog"
<el-input v-model="formData.nickname" :disabled="true" /> >
</el-form-item> <el-form :model="formData" label-width="80px" ref="formRef">
<el-form-item label="角色"> <el-form-item label="用户名称">
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色"> <el-input v-model="formData.username" :disabled="true" />
<el-option </el-form-item>
v-for="item in roleOptions" <el-form-item label="用户昵称">
:key="item.id" <el-input v-model="formData.nickname" :disabled="true" />
:label="item.name" </el-form-item>
:value="item.id" <el-form-item label="角色">
/> <el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
</el-select> <el-option
</el-form-item> v-for="item in roleOptions"
</el-form> :key="item.id"
<template #footer> :label="item.name"
<div class="dialog-footer"> :value="item.id"
<el-button type="primary" @click="submit">确 定</el-button> />
<el-button @click="cancel">取 消</el-button> </el-select>
</div> </el-form-item>
</template> </el-form>
</el-dialog> <template #footer>
</template> <div class="dialog-footer">
<el-button type="primary" @click="submit">确 定</el-button>
<script setup lang="ts"> <el-button @click="cancel">取 消</el-button>
// TODO el-dialog 用 Dialog 组件 </div>
import { assignUserRoleApi, PermissionAssignUserRoleReqVO } from '@/api/system/permission' </template>
</Dialog>
interface Props { </template>
show: boolean
roleOptions: any[] <script setup lang="ts">
formInitValue?: Recordable & Partial<typeof initParams> import {
} assignUserRoleApi,
listUserRolesApi,
const props = withDefaults(defineProps<Props>(), { PermissionAssignUserRoleReqVO
show: false, } from '@/api/system/permission'
roleOptions: () => [], import { UserVO } from '@/api/system/user'
formInitValue: () => ({}) import * as RoleApi from '@/api/system/role'
})
const emits = defineEmits(['update:show', 'success']) const emits = defineEmits(['success'])
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
// 表单初始化参数 // 表单初始化参数
const initParams = { const initParams = {
nickname: '', nickname: '',
id: 0, id: 0,
username: '', username: '',
roleIds: [] as number[] roleIds: [] as number[]
} }
const formData = ref<Recordable>({ ...initParams }) const formData = ref<Recordable>({ ...initParams })
watch(
() => props.formInitValue, /* 弹框按钮操作 */
(val) => { // 点击取消
formData.value = { ...val } const cancel = () => {
}, closeDialog()
{ deep: true } }
) // 关闭弹窗
/* 弹框按钮操作 */ const closeDialog = () => {
// 点击取消 showDialog.value = false
const cancel = () => { }
closeDialog() // 提交
} const submit = async () => {
// 关闭弹窗 const data = ref<PermissionAssignUserRoleReqVO>({
const closeDialog = () => { userId: formData.value.id,
emits('update:show', false) roleIds: formData.value.roleIds
} })
// 提交 try {
const submit = async () => { await assignUserRoleApi(data.value)
const data = ref<PermissionAssignUserRoleReqVO>({ message.success(t('common.updateSuccess'))
userId: formData.value.id, emits('success', true)
roleIds: formData.value.roleIds closeDialog()
}) } catch (error) {
try { console.error(error)
await assignUserRoleApi(data.value) }
message.success(t('common.updateSuccess')) }
emits('success', true)
closeDialog() const roleOptions = ref()
} catch (error) { const userRole = reactive(initParams)
console.error(error) const showDialog = ref(false)
} const formRef = ref()
} const openForm = async (row: UserVO) => {
</script> formRef.value?.resetFields()
userRole.id = row.id
userRole.username = row.username
userRole.nickname = row.nickname
// 获得角色列表
const roleOpt = await RoleApi.getSimpleRoleList()
roleOptions.value = [...roleOpt]
// 获得角色拥有的菜单集合
const roles = await listUserRolesApi(row.id)
userRole.roleIds = roles
formData.value = { ...userRole }
showDialog.value = true
}
defineExpose({
openForm
})
</script>

51
src/views/system/user/components/UserDeptTree.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable style="margin-bottom: 20px">
<template #prefix>
<Icon icon="ep:search" />
</template>
</el-input>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="treeRef"
node-key="id"
default-expand-all
highlight-current
@node-click="handleDeptNodeClick"
/>
</div>
</template>
<script setup lang="ts" name="UserDeptTree">
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 treeRef = ref<InstanceType<typeof ElTree>>()
const getTree = async () => {
const res = await DeptApi.getSimpleDeptList()
deptOptions.value = []
deptOptions.value.push(...handleTree(res))
}
const filterNode = (value: string, data: Tree) => {
if (!value) return true
return data.name.includes(value)
}
const handleDeptNodeClick = async (row: { [key: string]: any }) => {
emits('node-click', row)
}
onMounted(async () => {
await getTree()
})
</script>

460
src/views/system/user/AddForm.vue → src/views/system/user/components/UserForm.vue
View File

@ -1,223 +1,237 @@
<template> <template>
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog <Dialog :title="title" :modelValue="showDialog" width="600px" append-to-body @close="closeDialog">
:title="title" <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
:modelValue="modelValue" <el-row>
width="600px" <el-col :span="12">
append-to-body <el-form-item label="用户昵称" prop="nickname">
@close="closeDialog" <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
> </el-form-item>
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px"> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item label="归属部门" prop="deptId">
<el-form-item label="用户昵称" prop="nickname"> <el-tree-select
<el-input v-model="formData.nickname" placeholder="请输入用户昵称" /> node-key="id"
</el-form-item> v-model="formData.deptId"
</el-col> :data="deptOptions"
<el-col :span="12"> :props="defaultProps"
<el-form-item label="归属部门" prop="deptId"> check-strictly
<el-tree-select placeholder="请选择归属部门"
node-key="id" />
v-model="formData.deptId" </el-form-item>
:data="deptOptions" </el-col>
:props="defaultProps" </el-row>
check-strictly <el-row>
placeholder="请选择归属部门" <el-col :span="12">
/> <el-form-item label="手机号码" prop="mobile">
</el-form-item> <el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" />
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item label="邮箱" prop="email">
<el-form-item label="手机号码" prop="mobile"> <el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" />
<el-input v-model="formData.mobile" placeholder="请输入手机号码" maxlength="11" /> </el-form-item>
</el-form-item> </el-col>
</el-col> </el-row>
<el-col :span="12"> <el-row>
<el-form-item label="邮箱" prop="email"> <el-col :span="12">
<el-input v-model="formData.email" placeholder="请输入邮箱" maxlength="50" /> <el-form-item v-if="formData.id === undefined" label="用户名称" prop="username">
</el-form-item> <el-input v-model="formData.username" placeholder="请输入用户名称" />
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> <el-col :span="12">
<el-col :span="12"> <el-form-item v-if="formData.id === undefined" label="用户密码" prop="password">
<el-form-item v-if="formData.id === undefined" label="用户名称" prop="username"> <el-input
<el-input v-model="formData.username" placeholder="请输入用户名称" /> v-model="formData.password"
</el-form-item> placeholder="请输入用户密码"
</el-col> type="password"
<el-col :span="12"> show-password
<el-form-item v-if="formData.id === undefined" label="用户密码" prop="password"> />
<el-input </el-form-item>
v-model="formData.password" </el-col>
placeholder="请输入用户密码" </el-row>
type="password" <el-row>
show-password <el-col :span="12">
/> <el-form-item label="用户性别">
</el-form-item> <el-select v-model="formData.sex" placeholder="请选择">
</el-col> <el-option
</el-row> v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
<el-row> :key="dict.value as number"
<el-col :span="12"> :label="dict.label"
<el-form-item label="用户性别"> :value="dict.value"
<el-select v-model="formData.sex" placeholder="请选择"> />
<el-option </el-select>
v-for="dict in sexDictDatas" </el-form-item>
:key="parseInt(dict.value)" </el-col>
:label="dict.label" <el-col :span="12">
:value="parseInt(dict.value)" <el-form-item label="岗位">
/> <el-select v-model="formData.postIds" multiple placeholder="请选择">
</el-select> <el-option
</el-form-item> v-for="item in postOptions"
</el-col> :key="item.id"
<el-col :span="12"> :label="item.name"
<el-form-item label="岗位"> :value="item.id as number"
<el-select v-model="formData.postIds" multiple placeholder="请选择"> />
<el-option </el-select>
v-for="item in postOptions" </el-form-item>
:key="item.id" </el-col>
:label="item.name" </el-row>
:value="item.id" <el-row>
/> <el-col :span="24">
</el-select> <el-form-item label="备注">
</el-form-item> <el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" />
</el-col> </el-form-item>
</el-row> </el-col>
<el-row> </el-row>
<el-col :span="24"> </el-form>
<el-form-item label="备注"> <template #footer>
<el-input v-model="formData.remark" type="textarea" placeholder="请输入内容" /> <div class="dialog-footer">
</el-form-item> <el-button type="primary" @click="submitForm">确 定</el-button>
</el-col> <el-button @click="cancel">取 消</el-button>
</el-row> </div>
</el-form> </template>
<template #footer> </Dialog>
<div class="dialog-footer"> </template>
<el-button type="primary" @click="submitForm">确 定</el-button> <script lang="ts" setup>
<el-button @click="cancel">取 消</el-button> import { PostVO } from '@/api/system/post'
</div> import * as PostApi from '@/api/system/post'
</template> import { createUserApi, getUserApi, updateUserApi } from '@/api/system/user'
</el-dialog> import * as DeptApi from '@/api/system/dept'
</template>
<script lang="ts" setup> import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { PostVO } from '@/api/system/post' import { defaultProps, handleTree } from '@/utils/tree'
import { createUserApi, updateUserApi } from '@/api/system/user' import { ElForm, FormItemRule } from 'element-plus'
import { DICT_TYPE, getDictOptions } from '@/utils/dict' import { Arrayable } from 'element-plus/es/utils'
import { defaultProps } from '@/utils/tree' import { UserVO } from '@/api/login/types'
import { ElForm, FormItemRule } from 'element-plus'
import { Arrayable } from 'element-plus/es/utils' type Form = InstanceType<typeof ElForm>
type Form = InstanceType<typeof ElForm> const emits = defineEmits(['success'])
interface Props {
deptOptions?: Tree[] const { t } = useI18n() // 国际化
postOptions?: PostVO[] //岗位列表 const message = useMessage() // 消息弹窗
modelValue: boolean
formInitValue?: Recordable & Partial<typeof initParams> const showDialog = ref(false)
} // 弹出层标题
const title = computed(() => {
const props = withDefaults(defineProps<Props>(), { return formData.value?.id ? '修改用户' : '添加用户'
deptOptions: () => [], })
postOptions: () => [],
modelValue: false, const deptOptions = ref<Tree[]>([]) // 树形结构
formInitValue: () => ({}) const getTree = async () => {
}) const res = await DeptApi.getSimpleDeptList()
const emits = defineEmits(['update:modelValue', 'success']) deptOptions.value = []
deptOptions.value.push(...handleTree(res))
const { t } = useI18n() // 国际化 }
const message = useMessage() // 消息弹窗 // 获取岗位列表
// 弹出层标题 const postOptions = ref<PostVO[]>([]) //岗位列表
const title = computed(() => { const getPostOptions = async () => {
return formData.value?.id ? '修改用户' : '添加用户' const res = (await PostApi.getSimplePostList()) as PostVO[]
}) postOptions.value.push(...res)
}
// 性别字典
const sexDictDatas = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX) // 表单初始化参数
const initParams = {
// 表单初始化参数 nickname: '',
const initParams = { deptId: '',
nickname: '', mobile: '',
deptId: '', email: '',
mobile: '', id: undefined,
email: '', username: '',
id: undefined, password: '',
username: '', sex: 1,
password: '', postIds: [],
sex: 1, remark: '',
postIds: [], status: '0',
remark: '', roleIds: []
status: '0', }
roleIds: []
} // 校验规则
const rules = {
// 校验规则 username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
const rules = { nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }], password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }], email: [
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }], {
email: [ type: 'email',
{ message: '请输入正确的邮箱地址',
type: 'email', trigger: ['blur', 'change']
message: "'请输入正确的邮箱地址", }
trigger: ['blur', 'change'] ],
} mobile: [
], {
mobile: [ pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
{ message: '请输入正确的手机号码',
pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/, trigger: 'blur'
message: '请输入正确的手机号码', }
trigger: 'blur' ]
} } as Partial<Record<string, Arrayable<FormItemRule>>>
] const formRef = ref<Form | null>()
} as Partial<Record<string, Arrayable<FormItemRule>>> const formData = ref<Recordable>({ ...initParams })
const formRef = ref<Form | null>()
const formData = ref<Recordable>({ ...initParams }) const resetForm = () => {
watch( let form = formRef?.value
() => props.formInitValue, if (!form) return
(val) => { formData.value = { ...initParams }
formData.value = { ...val } form && (form as Form).resetFields()
}, }
{ deep: true } const closeDialog = () => {
) showDialog.value = false
}
const resetForm = () => { // 操作成功
let form = formRef?.value const operateOk = () => {
if (!form) return emits('success', true)
formData.value = { ...initParams } closeDialog()
form && (form as Form).resetFields() }
} const submitForm = () => {
const closeDialog = () => { let form = formRef.value as Form
emits('update:modelValue', false) form.validate(async (valid) => {
} let data = formData.value
// 操作成功 if (valid) {
const operateOk = () => { try {
emits('success', true) if (data?.id !== undefined) {
closeDialog() await updateUserApi(data)
} message.success(t('common.updateSuccess'))
const submitForm = () => { operateOk()
let form = formRef.value as Form } else {
form.validate(async (valid) => { await createUserApi(data)
let data = formData.value message.success(t('common.createSuccess'))
if (valid) { operateOk()
try { }
if (data?.id !== undefined) { } catch (err) {
await updateUserApi(data) console.error(err)
message.success(t('common.updateSuccess')) }
operateOk() }
} else { })
await createUserApi(data) }
message.success(t('common.createSuccess')) /* 取消 */
operateOk() const cancel = () => {
} closeDialog()
} catch (err) { }
console.error(err)
} /* 打开弹框 */
} const openForm = (row: undefined | UserVO) => {
}) resetForm()
} getTree() // 部门树
const cancel = () => { if (row && row.id) {
closeDialog() const id = row.id
} getUserApi(id).then((response) => {
formData.value = response
defineExpose({ })
resetForm } else {
}) formData.value = { ...initParams }
</script> }
showDialog.value = true
}
// ========== 初始化 ==========
onMounted(async () => {
await getPostOptions()
})
defineExpose({
resetForm,
openForm
})
</script>

307
src/views/system/user/ImportForm.vue → src/views/system/user/components/UserImportForm.vue
View File

@ -1,153 +1,154 @@
<template> <template>
<el-dialog <Dialog
:title="upload.title" :title="upload.title"
:modelValue="modelValue" :modelValue="showDialog"
width="400px" width="400px"
append-to-body append-to-body
@close="closeDialog" @close="closeDialog"
> >
<el-upload <el-upload
ref="uploadRef" ref="uploadRef"
accept=".xlsx, .xls" accept=".xlsx, .xls"
:limit="1" :limit="1"
:headers="upload.headers" :headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport" :action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading" :disabled="upload.isUploading"
:on-progress="handleFileUploadProgress" :on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess" :on-success="handleFileSuccess"
:on-exceed="handleExceed" :on-exceed="handleExceed"
:on-error="excelUploadError" :on-error="excelUploadError"
:auto-upload="false" :auto-upload="false"
drag drag
> >
<Icon icon="ep:upload" /> <Icon icon="ep:upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip> <template #tip>
<div class="el-upload__tip text-center"> <div class="el-upload__tip text-center">
<div class="el-upload__tip"> <div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据 <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div> </div>
<span>仅允许导入xls、xlsx格式文件。</span> <span>仅允许导入xls、xlsx格式文件。</span>
<el-link <el-link
type="primary" type="primary"
:underline="false" :underline="false"
style="font-size: 12px; vertical-align: baseline" style="font-size: 12px; vertical-align: baseline"
@click="importTemplate" @click="importTemplate"
>下载模板</el-link >下载模板</el-link
> >
</div> </div>
</template> </template>
</el-upload> </el-upload>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button> <el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</template> </template>
</el-dialog> </Dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { importUserTemplateApi } from '@/api/system/user' import { importUserTemplateApi } from '@/api/system/user'
import { getAccessToken, getTenantId } from '@/utils/auth' import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download' import download from '@/utils/download'
interface Props { const emits = defineEmits(['success'])
modelValue: boolean
} const message = useMessage() // 消息弹窗
// const props = const showDialog = ref(false)
withDefaults(defineProps<Props>(), { const uploadRef = ref()
modelValue: false
}) // 用户导入参数
const upload = reactive({
const emits = defineEmits(['update:modelValue', 'success']) // // 是否显示弹出层（用户导入）
// open: false,
const message = useMessage() // 消息弹窗 // 弹出层标题（用户导入）
title: '用户导入',
const uploadRef = ref() // 是否禁用上传
isUploading: false,
// 用户导入参数 // 是否更新已经存在的用户数据
const upload = reactive({ updateSupport: 0,
// // 是否显示弹出层（用户导入） // 设置上传的请求头部
// open: false, headers: {
// 弹出层标题（用户导入） Authorization: 'Bearer ' + getAccessToken(),
title: '用户导入', 'tenant-id': getTenantId()
// 是否禁用上传 },
isUploading: false, // 上传的地址
// 是否更新已经存在的用户数据 url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
updateSupport: 0, })
// 设置上传的请求头部
headers: { // 文件上传中处理
Authorization: 'Bearer ' + getAccessToken(), const handleFileUploadProgress = () => {
'tenant-id': getTenantId() upload.isUploading = true
}, }
// 上传的地址 // 文件上传成功处理
url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import' const handleFileSuccess = (response: any) => {
}) if (response.code !== 0) {
message.error(response.msg)
// 文件上传中处理 return
const handleFileUploadProgress = () => { }
upload.isUploading = true upload.isUploading = false
} uploadRef.value?.clearFiles()
// 文件上传成功处理 // 拼接提示语
const handleFileSuccess = (response: any) => { const data = response.data
if (response.code !== 0) { let text = '上传成功数量：' + data.createUsernames.length + ';'
message.error(response.msg) for (let username of data.createUsernames) {
return text += '< ' + username + ' >'
} }
upload.isUploading = false text += '更新成功数量：' + data.updateUsernames.length + ';'
uploadRef.value?.clearFiles() for (const username of data.updateUsernames) {
// 拼接提示语 text += '< ' + username + ' >'
const data = response.data }
let text = '上传成功数量：' + data.createUsernames.length + ';' text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
for (let username of data.createUsernames) { for (const username in data.failureUsernames) {
text += '< ' + username + ' >' text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
} }
text += '更新成功数量：' + data.updateUsernames.length + ';' message.alert(text)
for (const username of data.updateUsernames) { emits('success')
text += '< ' + username + ' >' closeDialog()
} }
text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
for (const username in data.failureUsernames) { // 文件数超出提示
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >' const handleExceed = (): void => {
} message.error('最多只能上传一个文件！')
message.alert(text) }
emits('success') // 上传错误提示
closeDialog() const excelUploadError = (e): void => {
} console.log(e)
message.error('导入数据失败，请您重新上传！')
// 文件数超出提示 }
const handleExceed = (): void => {
message.error('最多只能上传一个文件！') /** 下载模板操作 */
} const importTemplate = async () => {
// 上传错误提示 try {
const excelUploadError = (): void => { const res = await importUserTemplateApi()
message.error('导入数据失败，请您重新上传！') download.excel(res, '用户导入模版.xls')
} } catch (error) {
console.error(error)
/** 下载模板操作 */ }
const importTemplate = async () => { }
try {
const res = await importUserTemplateApi() /* 弹框按钮操作 */
download.excel(res, '用户导入模版.xls') // 点击取消
} catch (error) { const cancel = () => {
console.error(error) closeDialog()
} }
} // 关闭弹窗
const closeDialog = () => {
/* 弹框按钮操作 */ showDialog.value = false
// 点击取消 }
const cancel = () => { // 提交上传文件
closeDialog() const submitFileForm = () => {
} uploadRef.value?.submit()
// 关闭弹窗 }
const closeDialog = () => {
emits('update:modelValue', false) const openForm = () => {
} uploadRef.value?.clearFiles()
// 提交上传文件 showDialog.value = true
const submitFileForm = () => { }
uploadRef.value?.submit() defineExpose({
} openForm
</script> })
</script>

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

@ -5,31 +5,7 @@
<el-row :gutter="20"> <el-row :gutter="20">
<!--部门数据--> <!--部门数据-->
<el-col :span="4" :xs="24"> <el-col :span="4" :xs="24">
<div class="head-container"> <UserDeptTree @node-click="handleDeptNodeClick" />
<el-input
v-model="deptName"
placeholder="请输入部门名称"
clearable
style="margin-bottom: 20px"
>
<template #prefix>
<Icon icon="ep:search" />
</template>
</el-input>
</div>
<div class="head-container">
<el-tree
:data="deptOptions"
:props="defaultProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="treeRef"
node-key="id"
default-expand-all
highlight-current
@node-click="handleDeptNodeClick"
/>
</div>
</el-col> </el-col>
<!--用户数据--> <!--用户数据-->
<el-col :span="20" :xs="24"> <el-col :span="20" :xs="24">
@ -66,10 +42,10 @@
style="width: 240px" style="width: 240px"
> >
<el-option <el-option
v-for="dict in statusDictDatas" v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="parseInt(dict.value)" :key="dict.value as number"
:label="dict.label" :label="dict.label"
:value="parseInt(dict.value)" :value="dict.value as number"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -244,51 +220,34 @@
</el-row> </el-row>
</content-wrap> </content-wrap>
<!-- 添加或修改用户对话框 --> <!-- 添加或修改用户对话框 -->
<AddForm <UserForm ref="userFormRef" @success="getList" />
ref="addEditFormRef"
v-model="showAddDialog"
:dept-options="deptOptions"
:post-options="postOptions"
:form-init-value="addFormInitValue"
@success="getList"
/>
<!-- 用户导入对话框 --> <!-- 用户导入对话框 -->
<ImportForm v-model="importDialogVisible" @success="getList" /> <UserImportForm ref="userImportFormRef" @success="getList" />
<!-- 分配角色 --> <!-- 分配角色 -->
<RoleForm <UserAssignRoleForm ref="userAssignRoleFormRef" @success="getList" />
ref="roleFormRef"
v-model:show="roleDialogVisible"
:role-options="roleOptions"
:form-init-value="userRole"
@success="getList"
/>
</div> </div>
</template> </template>
<script setup lang="ts" name="User"> <script setup lang="ts" name="User">
import type { ElTree } from 'element-plus' import download from '@/utils/download'
import { handleTree, defaultProps } from '@/utils/tree' import { parseTime } from '@/utils/formatTime'
// 原vue3版本api方法都是Api结尾觉得见名知义，个人觉得这个可以形成规范 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
// TODO 使用 DeptApi 这种形式哈 import { CommonStatusEnum } from '@/utils/constants'
import { getSimpleDeptList as getSimpleDeptListApi } from '@/api/system/dept'
import { getSimplePostList as getSimplePostListApi, PostVO } from '@/api/system/post'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { import {
deleteUserApi, deleteUserApi,
exportUserApi, exportUserApi,
resetUserPwdApi, resetUserPwdApi,
updateUserStatusApi, updateUserStatusApi,
getUserPageApi,
UserVO UserVO
} from '@/api/system/user' } from '@/api/system/user'
import { parseTime } from './utils' // TODO 可以使用 formatTime 里的方法
import AddForm from './AddForm.vue' // TODO 改成 UserForm import UserForm from './components/UserForm.vue'
import ImportForm from './ImportForm.vue' // TODO 改成 UserImportForm import UserImportForm from './components/UserImportForm.vue'
import RoleForm from './RoleForm.vue' // TODO 改成 UserAssignRoleForm import UserAssignRoleForm from './components/UserAssignRoleForm.vue'
import { getUserApi, getUserPageApi } from '@/api/system/user' import UserDeptTree from './components/UserDeptTree.vue'
import { getSimpleRoleList as getSimpleRoleListApi } from '@/api/system/role'
import { listUserRolesApi } from '@/api/system/permission'
import { CommonStatusEnum } from '@/utils/constants'
import download from '@/utils/download'
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化 const { t } = useI18n() // 国际化
@ -302,42 +261,12 @@ const queryParams = reactive({
createTime: [] createTime: []
}) })
const showSearch = ref(true) const showSearch = ref(true)
const showAddDialog = ref(false)
// 数据字典- // TODO 可以直接 vue 那 getIntDictOptions，这样一方面少个变量，也可以 getIntDictOptions
const statusDictDatas = getDictOptions(DICT_TYPE.COMMON_STATUS)
// ========== 创建部门树结构 ==========
// TODO 要不把部门树拆成一个左侧的组件，然后点击后触发 handleDeptNodeClick
const deptName = ref('')
watch(
() => deptName.value,
(val) => {
treeRef.value?.filter(val)
}
)
const deptOptions = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()
const getTree = async () => {
const res = await getSimpleDeptListApi()
deptOptions.value = []
deptOptions.value.push(...handleTree(res))
}
const filterNode = (value: string, data: Tree) => {
if (!value) return true
return data.name.includes(value)
}
const handleDeptNodeClick = async (row: { [key: string]: any }) => { const handleDeptNodeClick = async (row: { [key: string]: any }) => {
queryParams.deptId = row.id queryParams.deptId = row.id
getList() getList()
} }
// 获取岗位列表
const postOptions = ref<PostVO[]>([]) //岗位列表
const getPostOptions = async () => {
const res = await getSimplePostListApi()
postOptions.value.push(...res)
}
// 用户列表 // 用户列表
const userList = ref<UserVO[]>([]) const userList = ref<UserVO[]>([])
const loading = ref(false) const loading = ref(false)
@ -374,37 +303,30 @@ const resetQuery = () => {
} }
// 添加或编辑 // 添加或编辑
const addEditFormRef = ref() const userFormRef = ref()
// 添加用户 // 添加用户
// TODO 可以参考别的模块哈，openForm；然后 tree 和 position 可以里面在加载下，让组件自己维护自己哈。
const handleAdd = () => { const handleAdd = () => {
addEditFormRef?.value.resetForm() userFormRef.value?.openForm()
// 获得下拉数据
getTree()
// 打开表单，并设置初始化
showAddDialog.value = true
} }
// 用户导入 // 用户导入
const userImportFormRef = ref()
const handleImport = () => { const handleImport = () => {
importDialogVisible.value = true userImportFormRef.value?.openForm()
} }
// 用户导出 // 用户导出
// TODO 改成 await 的风格；
const exportLoading = ref(false) const exportLoading = ref(false)
const handleExport = () => { const handleExport = () => {
message message
.confirm('是否确认导出所有用户数据项?') .confirm('是否确认导出所有用户数据项?')
.then(() => { .then(async () => {
// 处理查询参数 // 处理查询参数
let params = { ...queryParams } let params = { ...queryParams }
params.pageNo = 1 params.pageNo = 1
params.pageSize = 99999 params.pageSize = 99999
exportLoading.value = true exportLoading.value = true
return exportUserApi(params) const response = await exportUserApi(params)
})
.then((response) => {
download.excel(response, '用户数据.xls') download.excel(response, '用户数据.xls')
}) })
.catch(() => {}) .catch(() => {})
@ -435,17 +357,14 @@ const handleCommand = (command: string, index: number, row: UserVO) => {
} }
// 用户状态修改 // 用户状态修改
// TODO 改成 await 的风格；
const handleStatusChange = (row: UserVO) => { const handleStatusChange = (row: UserVO) => {
let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用' let text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
message message
.confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder')) .confirm('确认要"' + text + '""' + row.username + '"用户吗?', t('common.reminder'))
.then(function () { .then(async () => {
row.status = row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.ENABLE : CommonStatusEnum.DISABLE row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.ENABLE : CommonStatusEnum.DISABLE
return updateUserStatusApi(row.id, row.status) await updateUserStatusApi(row.id, row.status)
})
.then(() => {
message.success(text + '成功') message.success(text + '成功')
// 刷新列表 // 刷新列表
getList() getList()
@ -457,81 +376,47 @@ const handleStatusChange = (row: UserVO) => {
} }
// 具体数据单行操作 // 具体数据单行操作
const addFormInitValue = ref<Recordable>({})
/** 修改按钮操作 */ /** 修改按钮操作 */
const handleUpdate = (row: UserVO) => { const handleUpdate = (row: UserVO) => {
addEditFormRef.value?.resetForm() userFormRef.value?.openForm(row)
getTree()
const id = row.id
getUserApi(id).then((response) => {
addFormInitValue.value = response
showAddDialog.value = true
})
} }
// 删除用户 // 删除用户
// TODO 改成 await 的风格；
const handleDelete = (row: UserVO) => { const handleDelete = (row: UserVO) => {
const ids = row.id const ids = row.id
message message
.confirm('是否确认删除用户编号为"' + ids + '"的数据项?') .confirm('是否确认删除用户编号为"' + ids + '"的数据项?')
.then(() => { .then(async () => {
return deleteUserApi(ids) await deleteUserApi(ids)
})
.then(() => {
getList()
message.success('删除成功') message.success('删除成功')
getList()
})
.catch((e) => {
console.error(e)
}) })
.catch(() => {})
} }
// 重置密码 // 重置密码
// TODO 改成 await 的风格；
const handleResetPwd = (row: UserVO) => { const handleResetPwd = (row: UserVO) => {
message.prompt('请输入"' + row.username + '"的新密码', t('common.reminder')).then(({ value }) => { message
resetUserPwdApi(row.id, value) .prompt('请输入"' + row.username + '"的新密码', t('common.reminder'))
.then(() => { .then(async ({ value }) => {
message.success('修改成功，新密码是：' + value) await resetUserPwdApi(row.id, value)
}) message.success('修改成功，新密码是：' + value)
.catch((e) => { })
console.error(e) .catch((e) => {
}) console.error(e)
}) })
} }
// 分配角色 // 分配角色
const roleDialogVisible = ref(false) const userAssignRoleFormRef = ref()
const roleOptions = ref() const handleRole = (row: UserVO) => {
const userRole = reactive({ userAssignRoleFormRef.value?.openForm(row)
id: 0,
username: '',
nickname: '',
roleIds: []
})
const handleRole = async (row: UserVO) => {
addEditFormRef.value?.resetForm()
userRole.id = row.id
userRole.username = row.username
userRole.nickname = row.nickname
// 获得角色列表
const roleOpt = await getSimpleRoleListApi()
roleOptions.value = [...roleOpt]
// 获得角色拥有的菜单集合
const roles = await listUserRolesApi(row.id)
userRole.roleIds = roles
roleDialogVisible.value = true
} }
/* 用户导入 */
const importDialogVisible = ref(false)
// ========== 初始化 ========== // ========== 初始化 ==========
onMounted(async () => { onMounted(async () => {
getList() getList()
await getPostOptions()
await getTree()
}) })
</script> </script>

44
src/views/system/user/utils.ts
View File

@ -1,44 +0,0 @@
export const parseTime = (time) => {
if (!time) {
return null
}
const format = '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
time = parseInt(time)
} else if (typeof time === 'string') {
time = time
.replace(new RegExp(/-/gm), '/')
.replace('T', ' ')
.replace(new RegExp(/\.[\d]{3}/gm), '')
}
if (typeof time === 'number' && time.toString().length === 10) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') {
return ['日', '一', '二', '三', '四', '五', '六'][value]
}
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}