人员列表
This commit is contained in:
杨
parent
e9c9dcd9c5
commit
019d09df3e
|
|
@ -0,0 +1,45 @@
|
||||||
|
import { request } from '@/api';
|
||||||
|
import type {
|
||||||
|
WorkerListResponse,
|
||||||
|
WorkerFormParams,
|
||||||
|
EditWorkerParams,
|
||||||
|
WorkerRoleOption,
|
||||||
|
WorkerRoleOptionResponse,
|
||||||
|
} from '@/api/types/system/worker.d';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取员工列表
|
||||||
|
* @param params 查询参数（用户名）
|
||||||
|
* @returns Promise<WorkerListResponse> 员工列表数据
|
||||||
|
*/
|
||||||
|
export async function getWorkerListApi(params: { username?: string } = {}): Promise<WorkerListResponse> {
|
||||||
|
return request.get<WorkerListResponse>('/worker/getWorkerList', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取员工角色下拉选项
|
||||||
|
* @returns Promise<WorkerRoleOptionResponse> 角色选项列表
|
||||||
|
*/
|
||||||
|
export async function getWorkerRoleIdOptionApi(): Promise<WorkerRoleOptionResponse> {
|
||||||
|
return request.get<WorkerRoleOptionResponse>('/worker/getWorkerRoleIdOptions', undefined, { showMessage: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增员工
|
||||||
|
* @param params 员工表单参数（username、email、role_id）
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
export async function addWorkerApi(params: WorkerFormParams): Promise<void> {
|
||||||
|
return request.post<void>('/worker/addWorker', params);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑员工
|
||||||
|
* @param params 编辑员工参数（user_id、username、email、status）
|
||||||
|
* @returns Promise<void>
|
||||||
|
*/
|
||||||
|
export async function editWorkerApi(params: EditWorkerParams): Promise<void> {
|
||||||
|
return request.post<void>('/worker/editWorker', params, { showMessage: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { WorkerRoleOption };
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
import type { ApiResponse } from '../index';
|
||||||
|
|
||||||
|
/** 员工角色信息 */
|
||||||
|
export interface WorkerRoleInfo {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 员工列表单条数据 */
|
||||||
|
export interface WorkerItem {
|
||||||
|
id: number;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
role_id: number;
|
||||||
|
status: number; // 1:正常 2:封禁
|
||||||
|
created_at: string;
|
||||||
|
role: WorkerRoleInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 员工列表响应 */
|
||||||
|
export type WorkerListResponse = WorkerItem[];
|
||||||
|
|
||||||
|
/** 员工角色下拉选项 */
|
||||||
|
export interface WorkerRoleOption {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 员工角色下拉选项响应 */
|
||||||
|
export type WorkerRoleOptionResponse = WorkerRoleOption[];
|
||||||
|
|
||||||
|
/** 新增员工表单参数 */
|
||||||
|
export interface WorkerFormParams {
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
role_id: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 编辑员工表单参数 */
|
||||||
|
export interface EditWorkerParams {
|
||||||
|
user_id: number;
|
||||||
|
username: string;
|
||||||
|
email: string;
|
||||||
|
status: number; // 1:正常 2:封禁
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 接口返回结构（兼容 data 包裹场景） */
|
||||||
|
export interface WorkerListApiResponse extends ApiResponse<WorkerItem[]> {}
|
||||||
|
export interface WorkerRoleOptionApiResponse extends ApiResponse<WorkerRoleOption[]> {}
|
||||||
|
|
@ -0,0 +1,285 @@
|
||||||
|
<template>
|
||||||
|
<div class="system table_form-container">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<WorkerSearch
|
||||||
|
:search-form="searchForm"
|
||||||
|
:buttonLoading="loading"
|
||||||
|
:search-options="searchOptions"
|
||||||
|
@search="handleSearch"
|
||||||
|
@reset="handleReset"
|
||||||
|
>
|
||||||
|
<template #button>
|
||||||
|
<el-button type="primary" @click="handleAdd" v-auth="'worker_addWorker'">新增员工</el-button>
|
||||||
|
</template>
|
||||||
|
</WorkerSearch>
|
||||||
|
|
||||||
|
<!-- 表格 -->
|
||||||
|
<WorkerTable
|
||||||
|
:table-data="workerList"
|
||||||
|
:columns="tableColumnsOptions"
|
||||||
|
row-key="id"
|
||||||
|
:loading="loading"
|
||||||
|
>
|
||||||
|
<template #status="{ row }">
|
||||||
|
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
|
||||||
|
{{ row.status === 1 ? '正常' : '封禁' }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<el-button link type="primary" size="small" @click="handleEdit(row)" v-auth="'worker_editWorker'">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</WorkerTable>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<WorkerDialog
|
||||||
|
:visible="dialogVisible"
|
||||||
|
:title="dialogTitle"
|
||||||
|
:type="dialogType"
|
||||||
|
:button-loading="submitLoading"
|
||||||
|
@confirm="handleSubmit"
|
||||||
|
@cancel="handleCancel"
|
||||||
|
@close="handleClose"
|
||||||
|
>
|
||||||
|
<WorkerForm
|
||||||
|
:form-data="workerForm"
|
||||||
|
:form-rules="workerFormRules"
|
||||||
|
:form-items="workerFormItemOptions"
|
||||||
|
:options-map="workerFormOptionsMap"
|
||||||
|
ref="workerFormRef"
|
||||||
|
:key="formKey"
|
||||||
|
/>
|
||||||
|
</WorkerDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineOptions({
|
||||||
|
name: 'Worder'
|
||||||
|
})
|
||||||
|
|
||||||
|
import type { FormInstance } from 'element-plus'
|
||||||
|
import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
|
||||||
|
|
||||||
|
const { loading, startLoading, stopLoading } = usePageLoading()
|
||||||
|
const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()
|
||||||
|
|
||||||
|
// 组件
|
||||||
|
import WorkerSearch from '@/components/common/Search.vue'
|
||||||
|
import WorkerTable from '@/components/common/Table.vue'
|
||||||
|
import WorkerDialog from '@/components/common/Dialog.vue'
|
||||||
|
import WorkerForm from '@/components/common/Form.vue'
|
||||||
|
|
||||||
|
// 配置以及表单验证
|
||||||
|
import { search, tableColumns, addFormItem, editFormItem } from './options'
|
||||||
|
import { addRules, editRules } from './rules'
|
||||||
|
|
||||||
|
// 接口
|
||||||
|
import {
|
||||||
|
getWorkerListApi,
|
||||||
|
getWorkerRoleIdOptionApi,
|
||||||
|
addWorkerApi,
|
||||||
|
editWorkerApi,
|
||||||
|
} from '@/api/modules/system/worker'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 定义搜索数据
|
||||||
|
*/
|
||||||
|
const searchForm = ref({
|
||||||
|
username: '',
|
||||||
|
})
|
||||||
|
const searchOptions = ref(search)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 定义表格数据
|
||||||
|
*/
|
||||||
|
const workerList = ref<any[]>([])
|
||||||
|
const tableColumnsOptions = ref(tableColumns)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 定义弹窗数据
|
||||||
|
*/
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const dialogTitle = ref('')
|
||||||
|
const dialogType = ref<'add' | 'edit'>('add')
|
||||||
|
// 切换弹窗类型时强制刷新表单组件，避免表单字段切换时旧值残留
|
||||||
|
const formKey = ref(0)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 定义表单数据
|
||||||
|
*/
|
||||||
|
const workerForm = ref<any>({
|
||||||
|
user_id: 0,
|
||||||
|
username: '',
|
||||||
|
email: '',
|
||||||
|
role_id: null as number | null,
|
||||||
|
status: 1,
|
||||||
|
})
|
||||||
|
const workerFormRef = ref<FormInstance>()
|
||||||
|
const workerFormRules = ref<any>({})
|
||||||
|
const workerFormItemOptions = ref<any[]>([])
|
||||||
|
// 表单下拉选项映射（角色 / 状态）
|
||||||
|
const workerFormOptionsMap = ref<Record<string, { label: string; value: number }[]>>({
|
||||||
|
role_id: [],
|
||||||
|
status: [
|
||||||
|
{ label: '正常', value: 1 },
|
||||||
|
{ label: '封禁', value: 2 },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 角色下拉数据加载
|
||||||
|
*/
|
||||||
|
const fetchRoleOptions = async () => {
|
||||||
|
try {
|
||||||
|
const data: any = await getWorkerRoleIdOptionApi()
|
||||||
|
const list = Array.isArray(data) ? data : (data?.data || [])
|
||||||
|
workerFormOptionsMap.value.role_id = list.map((item: any) => ({
|
||||||
|
label: item.title,
|
||||||
|
value: item.id,
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('获取员工角色选项失败', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 获取员工列表
|
||||||
|
*/
|
||||||
|
const fetchWorkerList = async () => {
|
||||||
|
startLoading()
|
||||||
|
try {
|
||||||
|
const params: any = {
|
||||||
|
username: searchForm.value.username || undefined,
|
||||||
|
}
|
||||||
|
const data: any = await getWorkerListApi(params)
|
||||||
|
const list = Array.isArray(data) ? data : (data?.data || [])
|
||||||
|
workerList.value = list.map((item: any) => ({
|
||||||
|
...item,
|
||||||
|
roleTitle: item.role?.title || '-',
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('获取员工列表失败', err)
|
||||||
|
} finally {
|
||||||
|
stopLoading()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 页面挂载
|
||||||
|
*/
|
||||||
|
onMounted(async () => {
|
||||||
|
await Promise.all([fetchRoleOptions(), fetchWorkerList()])
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 搜索 / 重置
|
||||||
|
*/
|
||||||
|
const handleSearch = () => {
|
||||||
|
fetchWorkerList()
|
||||||
|
}
|
||||||
|
const handleReset = () => {
|
||||||
|
searchForm.value = { username: '' }
|
||||||
|
fetchWorkerList()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 新增
|
||||||
|
* 入参字段：email、role_id
|
||||||
|
*/
|
||||||
|
const handleAdd = () => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = '新增员工'
|
||||||
|
dialogType.value = 'add'
|
||||||
|
workerFormItemOptions.value = addFormItem as any
|
||||||
|
workerFormRules.value = addRules()
|
||||||
|
formKey.value++
|
||||||
|
workerForm.value = {
|
||||||
|
user_id: 0,
|
||||||
|
email: '',
|
||||||
|
role_id: null,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 编辑
|
||||||
|
* 入参字段：username、email、status
|
||||||
|
*/
|
||||||
|
const handleEdit = (row: any) => {
|
||||||
|
dialogVisible.value = true
|
||||||
|
dialogTitle.value = '编辑员工'
|
||||||
|
dialogType.value = 'edit'
|
||||||
|
workerFormItemOptions.value = editFormItem as any
|
||||||
|
workerFormRules.value = editRules()
|
||||||
|
formKey.value++
|
||||||
|
workerForm.value = {
|
||||||
|
user_id: row.id,
|
||||||
|
username: row.username,
|
||||||
|
email: row.email,
|
||||||
|
status: row.status,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 提交表单
|
||||||
|
*/
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
startSubmitLoading()
|
||||||
|
try {
|
||||||
|
await workerFormRef.value?.validate()
|
||||||
|
if (dialogType.value === 'add') {
|
||||||
|
const params = {
|
||||||
|
email: workerForm.value.email,
|
||||||
|
role_id: workerForm.value.role_id,
|
||||||
|
}
|
||||||
|
await addWorkerApi(params)
|
||||||
|
ElNotification({
|
||||||
|
message: '新增成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 2000,
|
||||||
|
customClass: 'global-notification',
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
const params = {
|
||||||
|
user_id: workerForm.value.user_id,
|
||||||
|
username: workerForm.value.username,
|
||||||
|
email: workerForm.value.email,
|
||||||
|
status: workerForm.value.status,
|
||||||
|
}
|
||||||
|
await editWorkerApi(params)
|
||||||
|
ElNotification({
|
||||||
|
message: '编辑成功',
|
||||||
|
type: 'success',
|
||||||
|
duration: 2000,
|
||||||
|
customClass: 'global-notification',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
dialogVisible.value = false
|
||||||
|
await fetchWorkerList()
|
||||||
|
} catch (err: any) {
|
||||||
|
if (err?.message) {
|
||||||
|
ElNotification({
|
||||||
|
message: err.message || '操作失败',
|
||||||
|
type: 'error',
|
||||||
|
duration: 2000,
|
||||||
|
customClass: 'global-notification',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
stopSubmitLoading()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 取消 / 关闭弹窗
|
||||||
|
*/
|
||||||
|
const handleCancel = () => {
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
const handleClose = () => {
|
||||||
|
dialogVisible.value = false
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss"></style>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/**
|
||||||
|
* @description: 搜索配置
|
||||||
|
*/
|
||||||
|
export const search = [
|
||||||
|
{
|
||||||
|
prop: 'username',
|
||||||
|
label: '用户名',
|
||||||
|
type: 'input' as const,
|
||||||
|
placeholder: '请输入用户名',
|
||||||
|
width: '220px',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 表格列配置
|
||||||
|
*/
|
||||||
|
export const tableColumns = [
|
||||||
|
{ prop: 'username', label: '用户名' },
|
||||||
|
{ prop: 'email', label: '邮箱' },
|
||||||
|
{ prop: 'roleTitle', label: '角色' },
|
||||||
|
{ slotName: 'status', label: '状态' },
|
||||||
|
{ prop: 'created_at', label: '创建时间' },
|
||||||
|
{ slotName: 'action', label: '操作' },
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 新增员工表单配置
|
||||||
|
* 入参：email（校验格式）、role_id（下拉）
|
||||||
|
*/
|
||||||
|
export const addFormItem = [
|
||||||
|
{
|
||||||
|
prop: 'email',
|
||||||
|
label: '邮箱',
|
||||||
|
type: 'input' as const,
|
||||||
|
placeholder: '请输入邮箱',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'role_id',
|
||||||
|
label: '角色',
|
||||||
|
type: 'select' as const,
|
||||||
|
placeholder: '请选择角色',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 编辑员工表单配置
|
||||||
|
* 入参：username、email、status
|
||||||
|
*/
|
||||||
|
export const editFormItem = [
|
||||||
|
{
|
||||||
|
prop: 'username',
|
||||||
|
label: '用户名',
|
||||||
|
type: 'input' as const,
|
||||||
|
placeholder: '请输入用户名',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'email',
|
||||||
|
label: '邮箱',
|
||||||
|
type: 'input' as const,
|
||||||
|
placeholder: '请输入邮箱',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
prop: 'status',
|
||||||
|
label: '状态',
|
||||||
|
type: 'radio' as const,
|
||||||
|
placeholder: '请选择状态',
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
import type { FormRules } from 'element-plus'
|
||||||
|
|
||||||
|
/** 邮箱格式校验 */
|
||||||
|
const emailValidator = (rule: any, value: any, callback: any) => {
|
||||||
|
if (!value) {
|
||||||
|
callback()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const emailReg = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
|
||||||
|
if (!emailReg.test(value)) {
|
||||||
|
callback(new Error('邮箱格式不正确'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 新增员工表单校验规则
|
||||||
|
* 入参：email、role_id
|
||||||
|
*/
|
||||||
|
export const addRules = (): FormRules => {
|
||||||
|
return {
|
||||||
|
email: [
|
||||||
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||||
|
{ validator: emailValidator, trigger: 'blur' },
|
||||||
|
],
|
||||||
|
role_id: [
|
||||||
|
{ required: true, message: '请选择角色', trigger: 'change' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description: 编辑员工表单校验规则
|
||||||
|
* 入参：username、email、status
|
||||||
|
*/
|
||||||
|
export const editRules = (): FormRules => {
|
||||||
|
return {
|
||||||
|
username: [
|
||||||
|
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||||
|
{ min: 2, max: 50, message: '用户名长度在 2 到 50 个字符', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
email: [
|
||||||
|
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||||
|
{ validator: emailValidator, trigger: 'blur' },
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{ required: true, message: '请选择状态', trigger: 'change' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 兼容旧引用 */
|
||||||
|
export const rules = (): FormRules => editRules()
|
||||||
Loading…
Reference in New Issue