isoftstone/lc_frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
juncaiq
2025-10-17 10:31:13 +08:00
commit e6e86f2ce0
1043 changed files with 1031839 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/system/user/UserImportForm.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<DesignPopup v-model="dialogVisible" title="用户导入" width="400" :is-footer="true">
<div class="p-20px">
<el-upload
ref="uploadRef"
v-model:file-list="fileList"
:action="importUrl + '?updateSupport=' + updateSupport"
:auto-upload="false"
:disabled="formLoading"
:headers="uploadHeaders"
:limit="1"
:on-error="submitFormError"
:on-exceed="handleExceed"
:on-success="submitFormSuccess"
accept=".xlsx, .xls"
drag
>
<Icon :size="50" icon="ep:upload-filled" />
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<template #tip>
<div class="el-upload__tip text-center">
<div class="el-upload__tip flex items-center justify-center">
<el-checkbox v-model="updateSupport" />
<span class="ml-5px text-14px">是否更新已经存在的用户数据</span>
</div>
<span>仅允许导入 xls、xlsx 格式文件。</span>
<el-link
:underline="false"
style="font-size: 12px; vertical-align: baseline"
type="primary"
@click="importTemplate"
v-loading="downLoading"
>
下载模板
</el-link>
</div>
</template>
</el-upload>
</div>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">开始导入</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</DesignPopup>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import { getAccessToken, getTenantId } from '@/utils/auth'
import download from '@/utils/download'
defineOptions({ name: 'SystemUserImportForm' })
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中
const downLoading = ref(false)
const uploadRef = ref()
const importUrl =
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/user/import'
const uploadHeaders = ref() // 上传 Header 头
const fileList = ref([]) // 文件列表
const updateSupport = ref(0) // 是否更新已经存在的用户数据
/** 打开弹窗 */
const open = () => {
dialogVisible.value = true
fileList.value = []
resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const submitForm = async () => {
if (fileList.value.length == 0) {
message.error('请上传文件')
return
}
// 提交请求
uploadHeaders.value = {
Authorization: 'Bearer ' + getAccessToken(),
'tenant-id': getTenantId()
}
formLoading.value = true
uploadRef.value!.submit()
}
/** 文件上传成功 */
const emits = defineEmits(['success'])
const submitFormSuccess = (response: any) => {
if (response.code !== 0) {
message.error(response.msg)
formLoading.value = false
return
}
// 拼接提示语
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')
}
/** 上传错误提示 */
const submitFormError = (): void => {
message.error('上传失败，请您重新上传！')
formLoading.value = false
}
/** 重置表单 */
const resetForm = () => {
// 重置上传状态和文件
formLoading.value = false
uploadRef.value?.clearFiles()
}
/** 文件数超出提示 */
const handleExceed = (): void => {
message.error('最多只能上传一个文件！')
}
/** 下载模板操作 */
const importTemplate = async () => {
downLoading.value = true
const res = await UserApi.importUserTemplate()
download.excel(res, '用户导入模版.xls')
downLoading.value = false
}
</script>

670
src/views/system/user/index.vue Normal file
View File

@@ -0,0 +1,670 @@
<template>
<el-row :gutter="20">
<el-col :span="4">
<ContentWrap>
<avue-tree
ref="treeRef"
:option="treeOption"
:data="treeData"
@node-click="nodeClick"
></avue-tree>
</ContentWrap>
</el-col>
<el-col :span="20">
<ContentWrap>
<avue-crud
ref="crudRef"
v-model="tableForm"
v-model:page="tablePage"
v-model:search="tableSearch"
:table-loading="loading"
:data="tableData"
:option="tableOption"
:permission="permission"
:before-open="beforeOpen"
@search-change="searchChange"
@search-reset="resetChange"
@row-save="rowSave"
@row-update="rowUpdate"
@refresh-change="getTableData"
@size-change="sizeChange"
@current-change="currentChange"
>
<template #menu-left="{ size }">
<el-button
type="warning"
plain
@click="handleImport"
v-hasPermi="['system:user:import']"
>
<Icon icon="ep:upload" /> 导入
</el-button>
<el-button
type="success"
plain
:size="size"
icon="el-icon-download"
@click="handleExport"
:loading="exportLoading"
v-hasPermi="['system:user:export']"
>导出</el-button
>
</template>
<template #menu="{ row }">
<el-dropdown
@command="(command) => handleCommand(command, row)"
v-hasPermi="[
'system:user:delete',
'system:user:update-password',
'system:permission:assign-user-role'
]"
>
<div class="pt-3px pr-2px pb-4px pl-2px cursor-pointer">
<el-text type="primary">
<span>更多</span>
<Icon :size="16" icon="iconamoon:arrow-down-2-light" />
</el-text>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
command="handleResetPwd"
v-if="checkPermi(['system:user:update-password'])"
>
<Icon icon="ep:key" />重置密码
</el-dropdown-item>
<el-dropdown-item
command="handleDelete"
v-if="checkPermi(['system:user:delete'])"
>
<Icon icon="ep:delete" />删除
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template #status="scope">
<el-switch
v-if="scope.row.status != undefined"
v-model="scope.row.status"
:active-value="0"
:inactive-value="1"
@change="handleStatusChange(scope.row)"
/>
</template>
<template #deptName="{ row }">
<div class="flex flex-wrap gap-2px justify-center">
<div v-for="(dept, deptIndex) in row.deptInfoList" :key="dept.deptId">
<el-popover placement="right" width="240" trigger="hover">
<template #reference>
<el-tag type="primary" class="cursor-pointer">{{ dept.deptName }}</el-tag>
</template>
<div class="flex flex-col gap-y-4px">
<template v-for="type in keyList" :key="type.value">
<div class="flex" v-if="row.deptInfoList[deptIndex][type.value]">
<span class="flex-basis-42px flex-shrink-0 c-#909399"
>{{ type.label }}：</span
>
<span class="flex-1">{{ row.deptInfoList[deptIndex][type.value] }}</span>
</div>
</template>
</div>
</el-popover>
</div>
</div>
</template>
<template #deptInfoList-form>
<avue-crud ref="deptCrudRef" :option="deptOption" :data="tableForm.deptInfoList">
<template #menu="{ size, index }">
<el-button text :size="size" type="danger" @click="delDeptTableRow(index)">
<Icon icon="ep:delete"></Icon>
<span>删除</span>
</el-button>
</template>
<template #deptId-form="{ index, column, disabled }">
<DeptSelect
v-model="tableForm.deptInfoList[index].deptId"
:column="column"
:disabled="disabled"
type="edit"
prop="deptId"
></DeptSelect>
</template>
</avue-crud>
</template>
</avue-crud>
</ContentWrap>
</el-col>
</el-row>
<!-- 用户导入对话框 -->
<UserImportForm ref="importFormRef" @success="getTableData" />
</template>
<script setup lang="ts">
import * as UserApi from '@/api/system/user'
import * as DeptApi from '@/api/system/dept'
import { checkPermi } from '@/utils/permission'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { handleTree } from '@/utils/tree'
import { CommonStatusEnum } from '@/utils/constants'
import { dateFormatter, getSearchDate } from '@/utils/formatTime'
import download from '@/utils/download'
import { useLowStoreWithOut } from '@/store/modules/low'
import UserImportForm from './UserImportForm.vue'
import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'SystemUser' })
const keyList = [
{ label: '部门', value: 'deptName' },
{ label: '角色', value: 'roleInfoList' },
{ label: '职务', value: 'dutyInfoList' },
{ label: '职位', value: 'positionInfoList' },
{ label: '岗位', value: 'postInfoList' }
]
// 树数据
const treeOption = reactive({
defaultExpandAll: true,
addBtn: false,
formOption: {
column: [{ label: '自定义项', prop: 'test' }]
},
props: { label: 'name', value: 'id', children: 'children' }
})
const treeData = ref<Tree[]>([])
const crudRef = ref()
const treeRef = ref()
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const { getCurrPermi } = useCrudPermi()
const lowStore = useLowStoreWithOut()
const loading = ref(true) // 列表的加载中
const tableOption = ref({
delBtn: false,
align: 'center',
headerAlign: 'center',
searchMenuSpan: 6,
searchMenuPosition: 'left',
labelSuffix: ' ',
span: 12,
dialogWidth: '80%',
menuWidth: 160,
dialogCustomClass: 'system-user-form',
column: {
username: { label: '用户账号', search: true, minWidth: 90, display: false },
nickname: { label: '用户昵称', search: true, minWidth: 100, display: false },
deptName: { label: '部门', minWidth: 100, display: false },
mobile: { label: '手机号码', search: true, width: 120, display: false },
status: {
label: '状态',
type: 'select',
dicData: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
search: true,
display: false
},
createTime: {
label: '创建时间',
search: true,
searchRange: true,
type: 'date',
searchType: 'daterange',
valueFormat: 'YYYY-MM-DD',
width: 180,
startPlaceholder: '开始时间',
endPlaceholder: '结束时间',
formatter: (row, val, value, column) => {
return dateFormatter(row, column, val)
},
display: false
}
},
group: [
{
label: '基本信息',
collapse: true,
prop: 'group_info',
column: {
username: {
label: '用户账号',
addDisplay: true,
editDisplay: false,
viewDisplay: false,
rules: [{ required: true, message: '用户账号不能为空', trigger: 'blur' }]
},
password: {
label: '用户密码',
hide: true,
addDisplay: true,
editDisplay: false,
viewDisplay: false,
rules: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
},
nickname: {
label: '用户昵称',
rules: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }]
},
mobile: { label: '手机号码' },
email: {
label: '邮箱',
rules: [
{
validator: (rule, value, callback) => {
if (
value === '' ||
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)
) {
callback()
} else callback(new Error('请输入正确的邮箱'))
},
trigger: 'blur'
}
]
},
sex: {
label: '用户性别',
type: 'select',
dicData: getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX),
value: ''
},
rankIds: {
label: '职级',
type: 'select',
multiple: true,
cell: true,
dicUrl: '/system/rank/simple-list',
dataType: 'array',
props: { label: 'name', value: 'id' }
},
remark: { label: '备注', span: 24, type: 'textarea', minRows: 2, maxRows: 4 }
}
},
{
label: '部门信息',
collapse: true,
prop: 'group_dept',
labelWidth: 20,
display: true,
column: {
deptInfoList: {
hide: false,
span: 24,
dataType: 'array',
value: [
{ $cellEdit: true, deptId: '', roleIds: [], dutyIds: [], positionIds: [], postIds: [] }
],
rules: [
{
validator: (rule, value, callback) => {
if (value?.length) callback()
else callback(new Error('请添加用户部门信息'))
},
trigger: 'blur'
}
]
}
}
}
]
}) //表格配置
const tableForm = ref<any>({})
const tableData = ref([])
const tableSearch = ref<any>({})
const tablePage = ref({
currentPage: 1,
pageSize: 10,
total: 0,
deptId: null
})
const permission = getCurrPermi(['system:user'])
const exportLoading = ref(false) // 导出的加载中
const deptOption = ref({
addBtn: false,
editBtn: false,
addRowBtn: true,
refreshBtn: false,
columnBtn: false,
addBtnText: '新增部门',
index: true,
menuWidth: 120,
height: undefined,
calcHeight: undefined,
maxHeight: 300,
column: {
deptId: {
label: '所属部门',
findType: 'all',
multiple: false,
cell: true,
rules: [{ required: true, message: '请选择所属部门', trigger: 'change' }]
},
roleIds: {
label: '角色',
type: 'select',
multiple: true,
cell: true,
dataType: 'array',
dicUrl: '/system/role/simple-list',
props: { label: 'name', value: 'id' },
dicFormatter: (res) => {
//剔除超级管理员和租户管理员
return res.filter((item) => !['super_admin', 'tenant_admin'].includes(item.code))
}
},
dutyIds: {
label: '职务',
type: 'select',
multiple: true,
cell: true,
dataType: 'array',
dicUrl: '/system/duty/simple-list',
props: { label: 'name', value: 'id' }
},
positionIds: {
label: '职位',
type: 'select',
multiple: true,
cell: true,
dataType: 'array',
dicUrl: '/system/position/simple-list',
props: { label: 'name', value: 'id' }
},
postIds: {
label: '岗位',
type: 'select',
multiple: true,
cell: true,
dataType: 'array',
dicUrl: '/system/post/simple-list',
props: { label: 'name', value: 'id' }
}
}
})
const deptCrudRef = ref()
const nodeClick = (row: any) => {
if (tablePage.value.deptId == row.id) {
tablePage.value.deptId = null
treeRef.value.setCurrentKey(null)
} else {
tablePage.value.deptId = row.id
}
getTableData()
}
/** 查询列表 */
const getTableData = async () => {
loading.value = true
let searchObj = {
...tableSearch.value,
pageNo: tablePage.value.currentPage,
pageSize: tablePage.value.pageSize,
deptId: tablePage.value.deptId
}
if (searchObj.createTime?.length) {
searchObj.createTime = getSearchDate(searchObj.createTime)
} else delete searchObj.createTime
for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
try {
const data = await UserApi.getUserPage(searchObj)
tableData.value = data.list.map((item) => {
item.deptInfoList = item.deptInfoList.map((dept) => {
keyList.forEach(({ value }) => {
if (value === 'deptName') return
if (dept[value]?.length) dept[value] = dept[value].map((info) => info.name).join('、')
else dept[value] = ''
})
return dept
})
return item
})
tablePage.value.total = data.total
} finally {
loading.value = false
}
}
useCrudHeight(crudRef)
/** 搜索按钮操作 */
const searchChange = (params, done) => {
tablePage.value.currentPage = 1
getTableData().finally(() => {
done()
})
}
/** 清空按钮操作 */
const resetChange = () => {
searchChange({}, () => {})
}
const sizeChange = (pageSize) => {
tablePage.value.pageSize = pageSize
resetChange()
}
const currentChange = (currentPage) => {
tablePage.value.currentPage = currentPage
getTableData()
}
/** 表单打开前 */
const beforeOpen = async (done, type) => {
let bool = true
if (['edit', 'view'].includes(type) && tableForm.value.id) {
loading.value = true
const currData = await UserApi.getUser(tableForm.value.id)
if (currData.rankInfoList?.length) {
currData.rankIds = currData.rankInfoList.map((item) => item.id)
}
delete currData.rankInfoList
if (currData.deptInfoList?.length) {
const deptObj = {}
currData.deptInfoList = currData.deptInfoList.map((dept) => {
keyList.forEach(({ value }) => {
dept.deptId = dept.deptId + ''
if (value === 'deptName') deptObj[dept.deptId] = dept[value]
else {
const key = value.split('InfoList')[0] + 'Ids'
dept[key] = dept[value].map((info) => info.id)
}
delete dept[value]
})
if (type == 'edit') dept.$cellEdit = true
return dept
})
lowStore.setDicObj('deptSelect', deptObj)
} else {
currData.deptInfoList = cloneDeep(tableOption.value.group[1].column.deptInfoList?.value)
}
if (currData.supAdminFlag || currData.tenantAdminFlag) {
delete currData.deptInfoList
bool = false
}
tableForm.value = currData
loading.value = false
}
tableOption.value.group[1].display = bool
done()
}
const verifydeptTable = () => {
return new Promise((resolve) => {
deptCrudRef.value.validateCellForm().then((res) => {
if (res) {
const dom = document.querySelector('.system-user-form .el-dialog__body')
if (dom) dom.scrollTop = dom.scrollHeight
}
resolve(!res)
})
})
}
/** 新增操作 */
const rowSave = async (form, done, loading) => {
const verify = await verifydeptTable()
if (!verify) return loading()
let bool = await UserApi.createUser(form).catch(() => false)
if (bool) {
message.success(t('common.createSuccess'))
resetChange()
done()
} else loading()
}
/** 编辑操作 */
const rowUpdate = async (form, index, done, loading) => {
const verify = await verifydeptTable()
if (!verify) return loading()
delete form.password
if (form.supAdminFlag || form.tenantAdminFlag) delete form.deptInfoList
let bool = await UserApi.updateUser(form).catch(() => false)
if (bool) {
message.success(t('common.updateSuccess'))
getTableData()
done()
} else loading()
}
/** 操作分发 */
const handleCommand = (command: string, row: UserApi.UserVO) => {
switch (command) {
case 'handleDelete':
rowDel(row)
break
case 'handleResetPwd':
handleResetPwd(row)
break
case 'handleRole':
handleRole(row)
break
default:
break
}
}
/** 删除按钮操作 */
const rowDel = async (form) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await UserApi.deleteUser(form.id)
message.success(t('common.delSuccess'))
// 刷新列表
await getTableData()
} catch {}
}
/** 重置密码 */
const handleResetPwd = async (row: UserApi.UserVO) => {
try {
// 重置的二次确认
const result = await message.prompt(
'请输入"' + row.username + '"的新密码',
t('common.reminder')
)
const password = result.value
// 发起重置
await UserApi.resetUserPwd(row.id, password)
message.success('修改成功，新密码是：' + password)
} catch {}
}
/** 分配角色 */
const assignRoleFormRef = ref()
const handleRole = (row: UserApi.UserVO) => {
assignRoleFormRef.value.open(row)
}
/** 修改用户状态 */
const handleStatusChange = async (row: UserApi.UserVO) => {
try {
// 修改状态的二次确认
const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
await message.confirm('确认要"' + text + '""' + row.username + '"用户吗?')
// 发起修改状态
await UserApi.updateUserStatus(row.id, row.status)
// 刷新列表
await getTableData()
} catch {
// 取消后，进行恢复按钮
row.status =
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
}
}
/** 用户导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
/** 导出按钮操作 */
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
let searchObj = { ...tableSearch.value }
if (tablePage.value.deptId) {
searchObj.deptId = tablePage.value.deptId
}
for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
const data = await UserApi.exportUser(searchObj)
download.excel(data, '用户管理列表.xls')
} catch {
} finally {
exportLoading.value = false
}
}
const delDeptTableRow = (index) => {
tableForm.value.deptInfoList.splice(index, 1)
}
onMounted(async () => {
DeptApi.getSimpleDeptList().then((res) => {
const tree = handleTree(res)
treeData.value = tree
})
getTableData()
})
</script>
<style lang="scss" scoped>
.el-select {
width: 100%;
}
.el-dropdown {
padding: 4px 2px;
}
</style>
<style lang="scss">
.system-user-form {
.el-dialog__body {
padding-top: 0 !important;
}
.avue-crud {
.avue-crud__empty {
padding: 0;
.el-empty {
padding: 0;
}
.el-empty__description {
margin: 0;
}
}
}
}
</style>