【新增】教师管理页面
This commit is contained in:
任维炳
96
src/views/exam/teacher/TeacherAssignRoleForm.vue
Normal file
96
src/views/exam/teacher/TeacherAssignRoleForm.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" title="分配角色">
|
||||
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
|
||||
<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 roleList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import * as PermissionApi from '@/api/system/permission'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import * as RoleApi from '@/api/system/role'
|
||||
|
||||
defineOptions({ name: 'SystemUserAssignRoleForm' })
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref({
|
||||
id: -1,
|
||||
nickname: '',
|
||||
username: '',
|
||||
roleIds: []
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const roleList = ref([] as RoleApi.RoleVO[]) // 角色的列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (row: UserApi.UserVO) => {
|
||||
dialogVisible.value = true
|
||||
resetForm()
|
||||
// 设置数据
|
||||
formData.value.id = row.id
|
||||
formData.value.username = row.username
|
||||
formData.value.nickname = row.nickname
|
||||
// 获得角色拥有的菜单集合
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value.roleIds = await PermissionApi.getUserRoleList(row.id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
// 获得角色列表
|
||||
roleList.value = await RoleApi.getSimpleRoleList()
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
await PermissionApi.assignUserRole({
|
||||
userId: formData.value.id,
|
||||
roleIds: formData.value.roleIds
|
||||
})
|
||||
message.success(t('common.updateSuccess'))
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success', true)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: -1,
|
||||
nickname: '',
|
||||
username: '',
|
||||
roleIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
287
src/views/exam/teacher/TeacherForm.vue
Normal file
287
src/views/exam/teacher/TeacherForm.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="formLoading"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="教师昵称" prop="nickname">
|
||||
<el-input v-model="formData.nickname" placeholder="请输入教师昵称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input v-model="formData.mobile" maxlength="11" placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-col :span="12">-->
|
||||
<!-- <el-form-item label="归属部门" prop="deptId">-->
|
||||
<!-- <el-tree-select-->
|
||||
<!-- v-model="formData.deptId"-->
|
||||
<!-- :data="deptList"-->
|
||||
<!-- :props="defaultProps"-->
|
||||
<!-- check-strictly-->
|
||||
<!-- node-key="id"-->
|
||||
<!-- placeholder="请选择归属部门"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="formData.id === undefined" label="教师账号" prop="username">
|
||||
<el-input v-model="formData.username" placeholder="请输入教师账号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="formData.id === undefined" label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
placeholder="请输入密码"
|
||||
show-password
|
||||
type="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="formData.sex" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="班级">
|
||||
<el-select v-model="formData.classIds" multiple placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in classList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id!"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item label="头像" prop="avatar">
|
||||
<UploadImg v-model="formData.avatar" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="专业权限">
|
||||
<el-card class="w-full h-400px !overflow-y-scroll" shadow="never">
|
||||
<template #header>
|
||||
全选/全不选:
|
||||
<el-switch
|
||||
v-model="treeNodeAll"
|
||||
active-text="是"
|
||||
inactive-text="否"
|
||||
inline-prompt
|
||||
@change="handleCheckedTreeNodeAll"
|
||||
/>
|
||||
全部展开/折叠:
|
||||
<el-switch
|
||||
v-model="menuExpand"
|
||||
active-text="展开"
|
||||
inactive-text="折叠"
|
||||
inline-prompt
|
||||
@change="handleCheckedTreeExpand"
|
||||
/>
|
||||
</template>
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="menuOptions"
|
||||
:props="defaultProps"
|
||||
empty-text="加载中，请稍候"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
/>
|
||||
</el-card>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import {defaultProps, handleTree} from '@/utils/tree'
|
||||
import * as DeptApi from '@/api/system/dept'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import * as ClassApi from '@/api/exam/class'
|
||||
import * as SpecialtyApi from '@/api/exam/specialty'
|
||||
|
||||
import { FormRules } from 'element-plus'
|
||||
import * as PermissionApi from "@/api/system/permission";
|
||||
|
||||
defineOptions({ name: 'SystemUserForm' })
|
||||
const treeNodeAll = ref(false) // 全选/全不选
|
||||
const menuExpand = ref(false) // 展开/折叠
|
||||
const treeRef = ref() // 菜单树组件 Ref
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
const menuOptions = ref<any[]>([]) // 菜单树形结构
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
userType: '1',
|
||||
nickname: '',
|
||||
deptId: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
id: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
sex: undefined,
|
||||
classIds: [],
|
||||
remark: '',
|
||||
avatar: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
roleIds: [],
|
||||
specialtyIds: []
|
||||
})
|
||||
const formRules = reactive<FormRules>({
|
||||
username: [{ required: true, message: '教师名称不能为空', trigger: 'blur' }],
|
||||
nickname: [{ required: true, message: '教师昵称不能为空', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '教师密码不能为空', trigger: 'blur' }],
|
||||
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: '请输入正确的手机号码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const deptList = ref<Tree[]>([]) // 树形结构
|
||||
const classList = ref([] as ClassApi.ClassIdVO[] ) // 岗位列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 加载 Menu 列表。注意，必须放在前面，不然下面 setChecked 没数据节点
|
||||
menuOptions.value = handleTree(await SpecialtyApi.getSpecialtyPart())
|
||||
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await UserApi.getUser(id)
|
||||
try {
|
||||
formData.value.specialtyIds = await PermissionApi.getTeacherSpecialtyList(id)
|
||||
// 设置选中
|
||||
formData.value.specialtyIds.forEach((menuId: number) => {
|
||||
treeRef.value.setChecked(menuId, true, false)
|
||||
})
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载部门树
|
||||
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
// 加载岗位列表
|
||||
classList.value = await ClassApi.ClassApi.getClassIdName()
|
||||
}
|
||||
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef) return
|
||||
const valid = await formRef.value.validate()
|
||||
formData.value.userType = "1"
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
const datas = {
|
||||
menuIds: [
|
||||
...(treeRef.value.getCheckedKeys(false) as unknown as Array<number>), // 获得当前选中节点
|
||||
...(treeRef.value.getHalfCheckedKeys() as unknown as Array<number>) // 获得半选中的父节点
|
||||
]
|
||||
}
|
||||
formData.value.specialtyIds = datas.menuIds
|
||||
console.log(formData.value)
|
||||
const data = formData.value as unknown as UserApi.UserVO
|
||||
if (formType.value === 'create') {
|
||||
await UserApi.createTeacher(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await UserApi.updateTeacher(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
userType: '0',
|
||||
nickname: '',
|
||||
deptId: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
id: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
sex: undefined,
|
||||
postIds: [],
|
||||
remark: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
roleIds: [],
|
||||
specialtyIds: []
|
||||
}
|
||||
treeNodeAll.value = false
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
/** 全选/全不选 */
|
||||
const handleCheckedTreeNodeAll = () => {
|
||||
treeRef.value.setCheckedNodes(treeNodeAll.value ? menuOptions.value : [])
|
||||
}
|
||||
|
||||
/** 展开/折叠全部 */
|
||||
const handleCheckedTreeExpand = () => {
|
||||
const nodes = treeRef.value?.store.nodesMap
|
||||
for (let node in nodes) {
|
||||
if (nodes[node].expanded === menuExpand.value) {
|
||||
continue
|
||||
}
|
||||
nodes[node].expanded = menuExpand.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
138
src/views/exam/teacher/TeacherImportForm.vue
Normal file
138
src/views/exam/teacher/TeacherImportForm.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" title="用户导入" width="400">
|
||||
<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 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="updateSupport" />
|
||||
是否更新已经存在的用户数据
|
||||
</div>
|
||||
<span>仅允许导入 xls、xlsx 格式文件。</span>
|
||||
<el-link
|
||||
:underline="false"
|
||||
style="font-size: 12px; vertical-align: baseline"
|
||||
type="primary"
|
||||
@click="importTemplate"
|
||||
>
|
||||
下载模板
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</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 uploadRef = ref()
|
||||
const importUrl =
|
||||
import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/system/student/import'
|
||||
const uploadHeaders = ref() // 上传 Header 头
|
||||
const fileList = ref([]) // 文件列表
|
||||
const updateSupport = ref(0) // 是否更新已经存在的用户数据
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = () => {
|
||||
dialogVisible.value = true
|
||||
updateSupport.value = 0
|
||||
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)
|
||||
formLoading.value = false
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emits('success')
|
||||
}
|
||||
|
||||
/** 上传错误提示 */
|
||||
const submitFormError = (): void => {
|
||||
message.error('上传失败，请您重新上传！')
|
||||
formLoading.value = false
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = async (): Promise<void> => {
|
||||
// 重置上传状态和文件
|
||||
formLoading.value = false
|
||||
await nextTick()
|
||||
uploadRef.value?.clearFiles()
|
||||
}
|
||||
|
||||
/** 文件数超出提示 */
|
||||
const handleExceed = (): void => {
|
||||
message.error('最多只能上传一个文件！')
|
||||
}
|
||||
|
||||
/** 下载模板操作 */
|
||||
const importTemplate = async () => {
|
||||
const res = await UserApi.importUserTemplate()
|
||||
download.excel(res, '用户导入模版.xls')
|
||||
}
|
||||
</script>
|
||||
324
src/views/exam/teacher/index.vue
Normal file
324
src/views/exam/teacher/index.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="教师名称" prop="username">
|
||||
<el-input
|
||||
v-model="queryParams.username"
|
||||
placeholder="请输入教师名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="mobile">
|
||||
<el-input
|
||||
v-model="queryParams.mobile"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
placeholder="请选择教师状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="创建时间" prop="createTime">-->
|
||||
<!-- <el-date-picker-->
|
||||
<!-- v-model="queryParams.createTime"-->
|
||||
<!-- value-format="YYYY-MM-DD HH:mm:ss"-->
|
||||
<!-- type="datetimerange"-->
|
||||
<!-- start-placeholder="开始日期"-->
|
||||
<!-- end-placeholder="结束日期"-->
|
||||
<!-- class="!w-240px"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<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="openForm('create')"
|
||||
>
|
||||
<Icon icon="ep:plus" /> 新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
plain
|
||||
@click="handleImport"
|
||||
>
|
||||
<Icon icon="ep:upload" /> 导入
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
plain
|
||||
@click="handleExport"
|
||||
:loading="exportLoading"
|
||||
>
|
||||
<Icon icon="ep:download" />导出
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="教师编号" align="center" key="id" prop="id" />
|
||||
<el-table-column
|
||||
label="教师账号"
|
||||
align="center"
|
||||
prop="username"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="教师昵称"
|
||||
align="center"
|
||||
prop="nickname"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column label="手机号码" align="center" prop="mobile" width="120" />
|
||||
<el-table-column label="状态" key="status" align="center" >
|
||||
<template #default="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
:active-value="0"
|
||||
:inactive-value="1"
|
||||
@change="handleStatusChange(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="创建时间"
|
||||
align="center"
|
||||
prop="createTime"
|
||||
:formatter="dateFormatter"
|
||||
width="180"
|
||||
/>
|
||||
<el-table-column label="操作" align="center" width="260">
|
||||
<template #default="scope">
|
||||
<div class="flex items-center justify-center">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
@click="openForm('update', scope.row.id)"
|
||||
>
|
||||
<Icon icon="ep:edit" />修改
|
||||
</el-button>
|
||||
<el-dropdown
|
||||
@command="(command) => handleCommand(command, scope.row)"
|
||||
>
|
||||
<el-button type="primary" link><Icon icon="ep:d-arrow-right" /> 更多</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
command="handleDelete"
|
||||
>
|
||||
<Icon icon="ep:delete" />删除
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
command="handleResetPwd"
|
||||
>
|
||||
<Icon icon="ep:key" />重置密码
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
command="handleRole"
|
||||
>
|
||||
<Icon icon="ep:circle-check" />分配角色
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 添加或修改用户对话框 -->
|
||||
<TeacherForm ref="formRef" @success="getList" />
|
||||
<!-- 用户导入对话框 -->
|
||||
<TeacherImportForm ref="importFormRef" @success="getList" />
|
||||
<!-- 分配角色 -->
|
||||
<TeacherAssignRoleForm ref="assignRoleFormRef" @success="getList" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import download from '@/utils/download'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import TeacherForm from './TeacherForm.vue'
|
||||
import TeacherImportForm from './TeacherImportForm.vue'
|
||||
import TeacherAssignRoleForm from './TeacherAssignRoleForm.vue'
|
||||
|
||||
defineOptions({ name: 'SystemUser' })
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
userType: "1",
|
||||
username: undefined,
|
||||
mobile: undefined,
|
||||
status: undefined,
|
||||
deptId: undefined,
|
||||
createTime: []
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await UserApi.getUserPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
|
||||
|
||||
/** 用户导入 */
|
||||
const importFormRef = ref()
|
||||
const handleImport = () => {
|
||||
importFormRef.value.open()
|
||||
}
|
||||
|
||||
/** 修改用户状态 */
|
||||
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 getList()
|
||||
} catch {
|
||||
// 取消后，进行恢复按钮
|
||||
row.status =
|
||||
row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
|
||||
}
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
/** 操作分发 */
|
||||
const handleCommand = (command: string, row: UserApi.UserVO) => {
|
||||
switch (command) {
|
||||
case 'handleDelete':
|
||||
handleDelete(row.id)
|
||||
break
|
||||
case 'handleResetPwd':
|
||||
handleResetPwd(row)
|
||||
break
|
||||
case 'handleRole':
|
||||
handleRole(row)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
// 删除的二次确认
|
||||
await message.delConfirm()
|
||||
// 发起删除
|
||||
await UserApi.deleteUser(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
// 刷新列表
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 重置密码 */
|
||||
const handleResetPwd = async (row: UserApi.UserVO) => {
|
||||
try {
|
||||
// 重置的二次确认
|
||||
const result = await message.prompt(
|
||||
'请输入"' + row.username + '"的新密码',
|
||||
t('common.reminder')
|
||||
)
|
||||
const password = result.value
|
||||
// 发起重置
|
||||
await UserApi.resetUserPassword(row.id, password)
|
||||
message.success('修改成功，新密码是：' + password)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 分配角色 */
|
||||
const assignRoleFormRef = ref()
|
||||
const handleRole = (row: UserApi.UserVO) => {
|
||||
assignRoleFormRef.value.open(row)
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user