<template>
|
<div class="employee-page">
|
<div class="page-card">
|
<h3 class="card-title">员工管理</h3>
|
|
<!-- 搜索和操作栏 -->
|
<div class="toolbar">
|
<el-input
|
v-model="searchForm.name"
|
placeholder="请输入员工名称"
|
style="width: 200px"
|
clearable
|
@keyup.enter="handleSearch"
|
>
|
<template #prefix>
|
<el-icon><Search /></el-icon>
|
</template>
|
</el-input>
|
<el-button type="primary" @click="handleSearch">
|
<el-icon><Search /></el-icon>
|
搜索
|
</el-button>
|
<el-button type="success" @click="handleAdd">
|
<el-icon><Plus /></el-icon>
|
新增员工
|
</el-button>
|
</div>
|
|
<!-- 员工列表 -->
|
<el-table :data="tableData" style="width: 100%" v-loading="loading">
|
<el-table-column prop="name" label="员工名称" min-width="120" />
|
<el-table-column prop="phone" label="联系电话" width="140" />
|
<el-table-column prop="roleId" label="角色" width="120" align="center">
|
<template #default="{ row }">
|
<el-tag :type="getRoleType(row.roleId)">{{ getRoleText(row.roleId) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" width="180">
|
<template #default="{ row }">
|
{{ formatDateTime(row.createTime) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="180" fixed="right">
|
<template #default="{ row }">
|
<div class="table-actions">
|
<el-button type="warning" size="small" @click="handleEdit(row)">
|
编辑
|
</el-button>
|
<el-button type="danger" size="small" @click="handleDelete(row)">
|
删除
|
</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<!-- 空状态 -->
|
<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: ''
|
})
|
|
// 表格数据
|
const tableData = ref<Employee[]>([])
|
|
// 获取角色标签类型
|
const getRoleType = (roleId: string) => {
|
const typeMap: Record<string, string> = {
|
'ADMIN': 'danger',
|
'MANAGER': 'warning',
|
'STAFF': 'primary',
|
'REVIEWER': 'success'
|
}
|
return typeMap[roleId] || 'info'
|
}
|
|
// 获取角色文本
|
const getRoleText = (roleId: string) => {
|
const textMap: Record<string, string> = {
|
'ADMIN': '管理员',
|
'MANAGER': '经理',
|
'STAFF': '工作人员',
|
'REVIEWER': '审核员'
|
}
|
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 = () => {
|
loadData()
|
}
|
|
// 新增员工
|
const handleAdd = () => {
|
currentEmployee.value = null
|
formVisible.value = true
|
}
|
|
// 编辑员工
|
const handleEdit = (row: Employee) => {
|
currentEmployee.value = row
|
formVisible.value = true
|
}
|
|
// 删除员工
|
const handleDelete = async (row: Employee) => {
|
try {
|
await ElMessageBox.confirm(`确定要删除员工"${row.name}"吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
|
loading.value = true
|
await employeeApi.deleteEmployee(row.id)
|
ElMessage.success('删除成功')
|
await loadData()
|
} catch (error: any) {
|
if (error !== 'cancel') {
|
ElMessage.error(error.message || '删除失败')
|
}
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 表单提交成功
|
const handleFormSuccess = () => {
|
formVisible.value = false
|
loadData()
|
}
|
|
// 加载数据
|
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
|
}
|
}
|
|
onMounted(() => {
|
loadData()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.employee-page {
|
.card-title {
|
margin-bottom: 20px;
|
color: #303133;
|
font-size: 16px;
|
font-weight: 500;
|
}
|
|
.toolbar {
|
display: flex;
|
gap: 12px;
|
margin-bottom: 20px;
|
align-items: center;
|
}
|
|
.table-actions {
|
display: flex;
|
gap: 8px;
|
flex-wrap: wrap;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
</style>
|
