<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-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-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 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">
|
<template #default="{ row }">
|
<el-tag :type="getRoleType(row.role)">{{ getRoleText(row.role) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" width="180" />
|
<el-table-column label="操作" width="150" 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 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>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref, onMounted } from 'vue'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const loading = ref(false)
|
|
// 搜索表单
|
const searchForm = reactive({
|
name: '',
|
role: ''
|
})
|
|
// 分页信息
|
const pagination = reactive({
|
page: 1,
|
size: 10,
|
total: 0
|
})
|
|
// 表格数据
|
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 getRoleType = (role: string) => {
|
const typeMap: Record<string, string> = {
|
'admin': 'danger',
|
'staff': 'primary',
|
'reviewer': 'success'
|
}
|
return typeMap[role] || 'info'
|
}
|
|
// 获取角色文本
|
const getRoleText = (role: string) => {
|
const textMap: Record<string, string> = {
|
'admin': '管理员',
|
'staff': '工作人员',
|
'reviewer': '审核员'
|
}
|
return textMap[role] || '未知'
|
}
|
|
// 搜索
|
const handleSearch = () => {
|
pagination.page = 1
|
loadData()
|
}
|
|
// 新增员工
|
const handleAdd = () => {
|
ElMessage.info('新增员工功能待开发')
|
}
|
|
// 编辑员工
|
const handleEdit = (row: any) => {
|
ElMessage.info(`编辑员工：${row.name}`)
|
}
|
|
// 删除员工
|
const handleDelete = async (row: any) => {
|
try {
|
await ElMessageBox.confirm(`确定要删除员工"${row.name}"吗？`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
|
ElMessage.success('删除成功')
|
loadData()
|
} catch {
|
// 用户取消
|
}
|
}
|
|
// 分页大小改变
|
const handleSizeChange = (size: number) => {
|
pagination.size = size
|
loadData()
|
}
|
|
// 当前页改变
|
const handleCurrentChange = (page: number) => {
|
pagination.page = page
|
loadData()
|
}
|
|
// 加载数据
|
const loadData = () => {
|
loading.value = true
|
// TODO: 调用API加载数据
|
setTimeout(() => {
|
pagination.total = 3
|
loading.value = false
|
}, 500)
|
}
|
|
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>
|
