基础设置
This commit is contained in:
qsh
108
src/views/Basic/User/DeptTree.vue
Normal file
108
src/views/Basic/User/DeptTree.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="head-container">
|
||||
<el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
|
||||
<template #prefix>
|
||||
<Icon icon="ep:search" />
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="head-container">
|
||||
<el-tree
|
||||
ref="treeRef"
|
||||
:data="deptList"
|
||||
:expand-on-click-node="false"
|
||||
:filter-node-method="filterNode"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
highlight-current
|
||||
node-key="id"
|
||||
@node-click="handleNodeClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="SystemUserDeptTree" setup>
|
||||
import { ElTree } from 'element-plus'
|
||||
// import * as DeptApi from '@/api/system/dept'
|
||||
import { defaultProps, handleTree } from '@/utils/tree'
|
||||
|
||||
const deptName = ref('')
|
||||
const deptList = ref<Tree[]>([]) // 树形结构
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
|
||||
/** 获得部门树 */
|
||||
const getTree = async () => {
|
||||
// const res = await DeptApi.getSimpleDeptList()
|
||||
const res = [
|
||||
{
|
||||
id: 100,
|
||||
name: '芋道源码',
|
||||
parentId: 0
|
||||
},
|
||||
{
|
||||
id: 101,
|
||||
name: '深圳总公司',
|
||||
parentId: 100
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: '研发部门',
|
||||
parentId: 101
|
||||
},
|
||||
{
|
||||
id: 108,
|
||||
name: '市场部门',
|
||||
parentId: 102
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: '长沙分公司',
|
||||
parentId: 100
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
name: '市场部门',
|
||||
parentId: 101
|
||||
},
|
||||
{
|
||||
id: 109,
|
||||
name: '财务部门',
|
||||
parentId: 102
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
name: '测试部门',
|
||||
parentId: 101
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
name: '财务部门',
|
||||
parentId: 101
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
name: '运维部门',
|
||||
parentId: 101
|
||||
}
|
||||
]
|
||||
deptList.value = []
|
||||
deptList.value.push(...handleTree(res))
|
||||
}
|
||||
|
||||
/** 基于名字过滤 */
|
||||
const filterNode = (name: string, data: Tree) => {
|
||||
if (!name) return true
|
||||
return data.name.includes(name)
|
||||
}
|
||||
|
||||
/** 处理部门被点击 */
|
||||
const handleNodeClick = async (row: { [key: string]: any }) => {
|
||||
emits('node-click', row)
|
||||
}
|
||||
const emits = defineEmits(['node-click'])
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await getTree()
|
||||
})
|
||||
</script>
|
||||
94
src/views/Basic/User/UserAssignRoleForm.vue
Normal file
94
src/views/Basic/User/UserAssignRoleForm.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<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" name="SystemUserAssignRoleForm" setup>
|
||||
import * as PermissionApi from '@/api/system/permission'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import * as RoleApi from '@/api/system/role'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
nickname: '',
|
||||
username: '',
|
||||
roleIds: []
|
||||
})
|
||||
const formRef = ref() // 表单 Ref
|
||||
const roleList = ref([]) // 角色的列表
|
||||
|
||||
/** 打开弹窗 */
|
||||
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: undefined,
|
||||
nickname: '',
|
||||
username: '',
|
||||
roleIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
228
src/views/Basic/User/UserForm.vue
Normal file
228
src/views/Basic/User/UserForm.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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="用户性别">
|
||||
<el-radio-group v-model="formData.sex">
|
||||
<el-radio :label="1"> 男 </el-radio>
|
||||
<el-radio :label="2"> 女 </el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<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-col :span="12">
|
||||
<el-form-item label="角色" prop="role">
|
||||
<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-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<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="email">
|
||||
<el-input v-model="formData.email" maxlength="50" 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="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="formData.remark" placeholder="请输入内容" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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" name="SystemUserForm" setup>
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import { defaultProps } from '@/utils/tree'
|
||||
// import * as PostApi from '@/api/system/post'
|
||||
// import * as DeptApi from '@/api/system/dept'
|
||||
// import * as UserApi from '@/api/system/user'
|
||||
|
||||
const { t } = useI18n() // 国际化
|
||||
const message = useMessage() // 消息弹窗
|
||||
|
||||
const dialogVisible = ref(false) // 弹窗的是否展示
|
||||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const formData = ref({
|
||||
nickname: '',
|
||||
deptId: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
id: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
sex: 1,
|
||||
postIds: [],
|
||||
remark: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
roleIds: []
|
||||
})
|
||||
const formRules = {
|
||||
username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
|
||||
nickname: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }],
|
||||
email: [
|
||||
{
|
||||
type: 'email',
|
||||
message: '请输入正确的邮箱地址',
|
||||
trigger: ['blur', 'change']
|
||||
}
|
||||
],
|
||||
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 postList = ref([]) // 岗位列表
|
||||
const roleOptions = ref([])
|
||||
|
||||
/** 打开弹窗 */
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
// 修改时，设置数据
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
// formData.value = await UserApi.getUser(id)
|
||||
formData.value = {
|
||||
nickname: '',
|
||||
deptId: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
id: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
sex: 1,
|
||||
postIds: [],
|
||||
remark: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
roleIds: []
|
||||
}
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
// 加载部门树
|
||||
// deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
||||
deptList.value = []
|
||||
// 加载岗位列表
|
||||
// postList.value = await PostApi.getSimplePostList()
|
||||
postList.value = []
|
||||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
// 校验表单
|
||||
if (!formRef.value) return
|
||||
const valid = await formRef.value.validate()
|
||||
if (!valid) return
|
||||
// 提交请求
|
||||
formLoading.value = true
|
||||
try {
|
||||
// const data = formData.value as unknown as UserApi.UserVO
|
||||
if (formType.value === 'create') {
|
||||
// await UserApi.createUser(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
// await UserApi.updateUser(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
// 发送操作成功的事件
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 重置表单 */
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
nickname: '',
|
||||
deptId: '',
|
||||
mobile: '',
|
||||
email: '',
|
||||
id: undefined,
|
||||
username: '',
|
||||
password: '',
|
||||
sex: undefined,
|
||||
postIds: [],
|
||||
remark: '',
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
roleIds: []
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
184
src/views/Basic/User/index.vue
Normal file
184
src/views/Basic/User/index.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<el-row :gutter="20">
|
||||
<!-- 左侧部门树 -->
|
||||
<el-col :span="4" :xs="24">
|
||||
<DeptTree @node-click="handleDeptNodeClick" />
|
||||
</el-col>
|
||||
<el-col :span="20" :xs="24">
|
||||
<!-- 搜索 -->
|
||||
<el-form :model="queryParams" ref="queryFormRef" inline 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>
|
||||
<el-button @click="handleQuery">搜索</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
<el-button type="primary" plain @click="openForm('create')"> 新增 </el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column label="用户编号" key="id" prop="id" />
|
||||
<el-table-column label="用户名称" prop="username" />
|
||||
<el-table-column label="用户昵称" prop="nickname" />
|
||||
<el-table-column label="部门" key="deptName" prop="dept.name" />
|
||||
<el-table-column label="手机号码" prop="mobile" width="120" />
|
||||
<el-table-column label="状态" key="status">
|
||||
<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="创建时间" prop="createTime" width="180" />
|
||||
<el-table-column label="操作" width="260">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link @click="openForm('update', scope.row.id)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="handleDelete(scope.row.id)"> 删除 </el-button>
|
||||
<el-button type="primary" link @click="handleResetPwd(scope.row)"> 重置密码 </el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 添加或修改用户对话框 -->
|
||||
<UserForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
<script setup lang="ts" name="SystemUser">
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
import * as UserApi from '@/api/system/user'
|
||||
import UserForm from './UserForm.vue'
|
||||
import DeptTree from './DeptTree.vue'
|
||||
const message = useMessage() // 消息弹窗
|
||||
const { t } = useI18n() // 国际化
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const total = ref(0) // 列表的总页数
|
||||
const list = ref([]) // 列表的数
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
username: undefined,
|
||||
mobile: undefined,
|
||||
deptId: undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
// const data = await UserApi.getUserPage(queryParams)
|
||||
const data = {
|
||||
list: [{ username: '测试', status: 0 }],
|
||||
total: 0
|
||||
}
|
||||
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 handleDeptNodeClick = async (row) => {
|
||||
queryParams.deptId = row.id
|
||||
await getList()
|
||||
}
|
||||
|
||||
/** 添加/修改操作 */
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
/** 修改用户状态 */
|
||||
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 handleDelete = async (id: number) => {
|
||||
try {
|
||||
console.log(id)
|
||||
|
||||
// 删除的二次确认
|
||||
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.resetUserPwd(row.id, password)
|
||||
message.success('修改成功，新密码是：' + password)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user