Skip to content

phsl / admin

Go to a project
Commit 66460539 by fengjingtao
Options

feat: 优化重构用户管理代码

parent a1609e30
Showing with 313 additions and 290 deletions
src/types/auto-components.d.ts
......@@ -67,11 +67,7 @@ declare module '@vue/runtime-core' {
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree']
ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
ElUpload: typeof import('element-plus/es')['ElUpload']
......
src/views/system/user/RoleForm.vue → src/views/system/user/components/UserAssignRoleForm.vue
<template>
<el-dialog title="分配角色" :modelValue="show" width="500px" append-to-body @close="closeDialog">
<el-form :model="formData" label-width="80px" ref="formRef">
<el-form-item label="用户名称">
<el-input v-model="formData.username" :disabled="true" />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="formData.nickname" :disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submit">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
// TODO el-dialog 用 Dialog 组件
import { assignUserRoleApi, PermissionAssignUserRoleReqVO } from '@/api/system/permission'
interface Props {
show: boolean
roleOptions: any[]
formInitValue?: Recordable & Partial<typeof initParams>
}
const props = withDefaults(defineProps<Props>(), {
show: false,
roleOptions: () => [],
formInitValue: () => ({})
})
const emits = defineEmits(['update:show', 'success'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 表单初始化参数
const initParams = {
nickname: '',
id: 0,
username: '',
roleIds: [] as number[]
}
const formData = ref<Recordable>({ ...initParams })
watch(
() => props.formInitValue,
(val) => {
formData.value = { ...val }
},
{ deep: true }
)
/* 弹框按钮操作 */
// 点击取消
const cancel = () => {
closeDialog()
}
// 关闭弹窗
const closeDialog = () => {
emits('update:show', false)
}
// 提交
const submit = async () => {
const data = ref<PermissionAssignUserRoleReqVO>({
userId: formData.value.id,
roleIds: formData.value.roleIds
})
try {
await assignUserRoleApi(data.value)
message.success(t('common.updateSuccess'))
emits('success', true)
closeDialog()
} catch (error) {
console.error(error)
}
}
</script>
<template>
<Dialog
title="分配角色"
:modelValue="showDialog"
width="500px"
append-to-body
@close="closeDialog"
>
<el-form :model="formData" label-width="80px" ref="formRef">
<el-form-item label="用户名称">
<el-input v-model="formData.username" :disabled="true" />
</el-form-item>
<el-form-item label="用户昵称">
<el-input v-model="formData.nickname" :disabled="true" />
</el-form-item>
<el-form-item label="角色">
<el-select v-model="formData.roleIds" multiple placeholder="请选择角色">
<el-option
v-for="item in roleOptions"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submit">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import {
assignUserRoleApi,
listUserRolesApi,
PermissionAssignUserRoleReqVO
} from '@/api/system/permission'
import { UserVO } from '@/api/system/user'
import * as RoleApi from '@/api/system/role'
const emits = defineEmits(['success'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 表单初始化参数
const initParams = {
nickname: '',
id: 0,
username: '',
roleIds: [] as number[]
}
const formData = ref<Recordable>({ ...initParams })
/* 弹框按钮操作 */
// 点击取消
const cancel = () => {
closeDialog()
}
// 关闭弹窗
const closeDialog = () => {
showDialog.value = false
}
// 提交
const submit = async () => {
const data = ref<PermissionAssignUserRoleReqVO>({
userId: formData.value.id,
roleIds: formData.value.roleIds
})
try {
await assignUserRoleApi(data.value)
message.success(t('common.updateSuccess'))
emits('success', true)
closeDialog()
} catch (error) {
console.error(error)
}
}
const roleOptions = ref()
const userRole = reactive(initParams)
const showDialog = ref(false)
const formRef = ref()
const openForm = async (row: UserVO) => {
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>
src/views/system/user/components/UserDeptTree.vue 0 → 100644
<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>
src/views/system/user/ImportForm.vue → src/views/system/user/components/UserImportForm.vue
<template>
<el-dialog
:title="upload.title"
:modelValue="modelValue"
width="400px"
append-to-body
@close="closeDialog"
>
<el-upload
ref="uploadRef"
accept=".xlsx, .xls"
:limit="1"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-exceed="handleExceed"
:on-error="excelUploadError"
:auto-upload="false"
drag
>
<Icon icon="ep:upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { importUserTemplateApi } from '@/api/system/user'
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
interface Props {
modelValue: boolean
}
// const props =
withDefaults(defineProps<Props>(), {
modelValue: false
})
const emits = defineEmits(['update:modelValue', 'success'])
const message = useMessage() // 消息弹窗
const uploadRef = ref()
// 用户导入参数
const upload = reactive({
// // 是否显示弹出层（用户导入）
// open: false,
// 弹出层标题（用户导入）
title: '用户导入',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
},
// 上传的地址
url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
})
// 文件上传中处理
const handleFileUploadProgress = () => {
upload.isUploading = true
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
if (response.code !== 0) {
message.error(response.msg)
return
}
upload.isUploading = false
uploadRef.value?.clearFiles()
// 拼接提示语
const data = response.data
let text = '上传成功数量：' + data.createUsernames.length + ';'
for (let username of data.createUsernames) {
text += '< ' + username + ' >'
}
text += '更新成功数量：' + data.updateUsernames.length + ';'
for (const username of data.updateUsernames) {
text += '< ' + username + ' >'
}
text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
for (const username in data.failureUsernames) {
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
}
message.alert(text)
emits('success')
closeDialog()
}
// 文件数超出提示
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
// 上传错误提示
const excelUploadError = (): void => {
message.error('导入数据失败，请您重新上传！')
}
/** 下载模板操作 */
const importTemplate = async () => {
try {
const res = await importUserTemplateApi()
download.excel(res, '用户导入模版.xls')
} catch (error) {
console.error(error)
}
}
/* 弹框按钮操作 */
// 点击取消
const cancel = () => {
closeDialog()
}
// 关闭弹窗
const closeDialog = () => {
emits('update:modelValue', false)
}
// 提交上传文件
const submitFileForm = () => {
uploadRef.value?.submit()
}
</script>
<template>
<Dialog
:title="upload.title"
:modelValue="showDialog"
width="400px"
append-to-body
@close="closeDialog"
>
<el-upload
ref="uploadRef"
accept=".xlsx, .xls"
:limit="1"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:on-exceed="handleExceed"
:on-error="excelUploadError"
:auto-upload="false"
drag
>
<Icon icon="ep:upload" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { importUserTemplateApi } from '@/api/system/user'
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
const emits = defineEmits(['success'])
const message = useMessage() // 消息弹窗
const showDialog = ref(false)
const uploadRef = ref()
// 用户导入参数
const upload = reactive({
// // 是否显示弹出层（用户导入）
// open: false,
// 弹出层标题（用户导入）
title: '用户导入',
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的用户数据
updateSupport: 0,
// 设置上传的请求头部
headers: {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
},
// 上传的地址
url: import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
})
// 文件上传中处理
const handleFileUploadProgress = () => {
upload.isUploading = true
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
if (response.code !== 0) {
message.error(response.msg)
return
}
upload.isUploading = false
uploadRef.value?.clearFiles()
// 拼接提示语
const data = response.data
let text = '上传成功数量：' + data.createUsernames.length + ';'
for (let username of data.createUsernames) {
text += '< ' + username + ' >'
}
text += '更新成功数量：' + data.updateUsernames.length + ';'
for (const username of data.updateUsernames) {
text += '< ' + username + ' >'
}
text += '更新失败数量：' + Object.keys(data.failureUsernames).length + ';'
for (const username in data.failureUsernames) {
text += '< ' + username + ': ' + data.failureUsernames[username] + ' >'
}
message.alert(text)
emits('success')
closeDialog()
}
// 文件数超出提示
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
// 上传错误提示
const excelUploadError = (e): void => {
console.log(e)
message.error('导入数据失败，请您重新上传！')
}
/** 下载模板操作 */
const importTemplate = async () => {
try {
const res = await importUserTemplateApi()
download.excel(res, '用户导入模版.xls')
} catch (error) {
console.error(error)
}
}
/* 弹框按钮操作 */
// 点击取消
const cancel = () => {
closeDialog()
}
// 关闭弹窗
const closeDialog = () => {
showDialog.value = false
}
// 提交上传文件
const submitFileForm = () => {
uploadRef.value?.submit()
}
const openForm = () => {
uploadRef.value?.clearFiles()
showDialog.value = true
}
defineExpose({
openForm
})
</script>
src/views/system/user/utils.ts deleted 100644 → 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
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment