| | |
| | | <el-icon><Search /></el-icon> |
| | | </template> |
| | | </el-input> |
| | | <el-select |
| | | v-model="searchForm.role" |
| | | placeholder="选择角色" |
| | | style="width: 150px" |
| | | clearable |
| | | > |
| | | <el-option label="管理员" value="admin" /> |
| | | <el-option label="工作人员" value="staff" /> |
| | | <el-option label="审核员" value="reviewer" /> |
| | | </el-select> |
| | | <el-button type="primary" @click="handleSearch"> |
| | | <el-icon><Search /></el-icon> |
| | | 搜索 |
| | |
| | | |
| | | <!-- 员工列表 --> |
| | | <el-table :data="tableData" style="width: 100%" v-loading="loading"> |
| | | <el-table-column label="头像" width="80" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-avatar :src="row.avatar" :size="40"> |
| | | <el-icon><User /></el-icon> |
| | | </el-avatar> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="name" label="员工名称" min-width="120" /> |
| | | <el-table-column prop="phone" label="联系电话" width="140" /> |
| | | <el-table-column prop="role" label="角色" width="120" align="center"> |
| | | <el-table-column prop="roleId" label="角色" width="120" align="center"> |
| | | <template #default="{ row }"> |
| | | <el-tag :type="getRoleType(row.role)">{{ getRoleText(row.role) }}</el-tag> |
| | | <el-tag :type="getRoleType(row.roleId)">{{ getRoleText(row.roleId) }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="createTime" label="创建时间" width="180" /> |
| | | <el-table-column prop="createTime" label="创建时间" width="180"> |
| | | <template #default="{ row }"> |
| | | {{ formatDateTime(row.createTime) }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作" width="150" fixed="right"> |
| | | <template #default="{ row }"> |
| | | <div class="table-actions"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <!-- 分页 --> |
| | | <div class="pagination"> |
| | | <el-pagination |
| | | v-model:current-page="pagination.page" |
| | | v-model:page-size="pagination.size" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | :total="pagination.total" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | | <!-- 空状态 --> |
| | | <div v-if="!loading && tableData.length === 0" class="empty-state"> |
| | | <el-empty description="暂无员工数据" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 员工详情对话框 --> |
| | | <EmployeeForm |
| | | v-model:visible="formVisible" |
| | | :employee="currentEmployee" |
| | | @success="handleFormSuccess" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { reactive, ref, onMounted } from 'vue' |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | import { employeeApi, type Employee } from '@/api/employee' |
| | | import EmployeeForm from './EmployeeForm.vue' |
| | | |
| | | const loading = ref(false) |
| | | const formVisible = ref(false) |
| | | const currentEmployee = ref<Employee | null>(null) |
| | | |
| | | // 搜索表单 |
| | | const searchForm = reactive({ |
| | | name: '', |
| | | role: '' |
| | | }) |
| | | |
| | | // 分页信息 |
| | | const pagination = reactive({ |
| | | page: 1, |
| | | size: 10, |
| | | total: 0 |
| | | name: '' |
| | | }) |
| | | |
| | | // 表格数据 |
| | | const tableData = ref([ |
| | | { |
| | | id: 1, |
| | | name: '管理员', |
| | | avatar: '', |
| | | phone: '13800138000', |
| | | role: 'admin', |
| | | createTime: '2024-01-01 09:00:00' |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: '工作人员A', |
| | | avatar: '', |
| | | phone: '13800138001', |
| | | role: 'staff', |
| | | createTime: '2024-01-02 10:30:00' |
| | | }, |
| | | { |
| | | id: 3, |
| | | name: '审核员B', |
| | | avatar: '', |
| | | phone: '13800138002', |
| | | role: 'reviewer', |
| | | createTime: '2024-01-03 14:15:00' |
| | | } |
| | | ]) |
| | | const tableData = ref<Employee[]>([]) |
| | | |
| | | // 获取角色标签类型 |
| | | const getRoleType = (role: string) => { |
| | | const getRoleType = (roleId: string) => { |
| | | const typeMap: Record<string, string> = { |
| | | 'admin': 'danger', |
| | | 'staff': 'primary', |
| | | 'reviewer': 'success' |
| | | 'ADMIN': 'danger', |
| | | 'MANAGER': 'warning', |
| | | 'STAFF': 'primary', |
| | | 'REVIEWER': 'success' |
| | | } |
| | | return typeMap[role] || 'info' |
| | | return typeMap[roleId] || 'info' |
| | | } |
| | | |
| | | // 获取角色文本 |
| | | const getRoleText = (role: string) => { |
| | | const getRoleText = (roleId: string) => { |
| | | const textMap: Record<string, string> = { |
| | | 'admin': '管理员', |
| | | 'staff': '工作人员', |
| | | 'reviewer': '审核员' |
| | | 'ADMIN': '管理员', |
| | | 'MANAGER': '经理', |
| | | 'STAFF': '工作人员', |
| | | 'REVIEWER': '审核员' |
| | | } |
| | | return textMap[role] || '未知' |
| | | return textMap[roleId] || roleId |
| | | } |
| | | |
| | | // 格式化日期时间 |
| | | const formatDateTime = (dateTime: string | undefined) => { |
| | | if (!dateTime) return '-' |
| | | return new Date(dateTime).toLocaleString('zh-CN', { |
| | | year: 'numeric', |
| | | month: '2-digit', |
| | | day: '2-digit', |
| | | hour: '2-digit', |
| | | minute: '2-digit' |
| | | }) |
| | | } |
| | | |
| | | // 搜索 |
| | | const handleSearch = () => { |
| | | pagination.page = 1 |
| | | loadData() |
| | | } |
| | | |
| | | // 新增员工 |
| | | const handleAdd = () => { |
| | | ElMessage.info('新增员工功能待开发') |
| | | currentEmployee.value = null |
| | | formVisible.value = true |
| | | } |
| | | |
| | | // 编辑员工 |
| | | const handleEdit = (row: any) => { |
| | | ElMessage.info(`编辑员工:${row.name}`) |
| | | const handleEdit = (row: Employee) => { |
| | | currentEmployee.value = row |
| | | formVisible.value = true |
| | | } |
| | | |
| | | // 删除员工 |
| | | const handleDelete = async (row: any) => { |
| | | const handleDelete = async (row: Employee) => { |
| | | try { |
| | | await ElMessageBox.confirm(`确定要删除员工"${row.name}"吗?`, '提示', { |
| | | confirmButtonText: '确定', |
| | |
| | | type: 'warning' |
| | | }) |
| | | |
| | | loading.value = true |
| | | await employeeApi.deleteEmployee(row.id) |
| | | ElMessage.success('删除成功') |
| | | loadData() |
| | | } catch { |
| | | // 用户取消 |
| | | await loadData() |
| | | } catch (error: any) { |
| | | if (error !== 'cancel') { |
| | | ElMessage.error(error.message || '删除失败') |
| | | } |
| | | } finally { |
| | | loading.value = false |
| | | } |
| | | } |
| | | |
| | | // 分页大小改变 |
| | | const handleSizeChange = (size: number) => { |
| | | pagination.size = size |
| | | loadData() |
| | | } |
| | | |
| | | // 当前页改变 |
| | | const handleCurrentChange = (page: number) => { |
| | | pagination.page = page |
| | | // 表单提交成功 |
| | | const handleFormSuccess = () => { |
| | | formVisible.value = false |
| | | loadData() |
| | | } |
| | | |
| | | // 加载数据 |
| | | const loadData = () => { |
| | | loading.value = true |
| | | // TODO: 调用API加载数据 |
| | | setTimeout(() => { |
| | | pagination.total = 3 |
| | | const loadData = async () => { |
| | | try { |
| | | loading.value = true |
| | | const name = searchForm.name.trim() |
| | | |
| | | if (name) { |
| | | tableData.value = await employeeApi.searchEmployees(name) |
| | | } else { |
| | | tableData.value = await employeeApi.getEmployees() |
| | | } |
| | | } catch (error: any) { |
| | | ElMessage.error(error.message || '加载数据失败') |
| | | tableData.value = [] |
| | | } finally { |
| | | loading.value = false |
| | | }, 500) |
| | | } |
| | | } |
| | | |
| | | onMounted(() => { |