You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
528 lines
19 KiB
528 lines
19 KiB
<template>
|
|
<el-container>
|
|
<el-header>
|
|
<backIndex />
|
|
</el-header>
|
|
|
|
<el-container>
|
|
<el-main class="emain">
|
|
<div class="management-container">
|
|
<!-- 用户管理 -->
|
|
<div class="section">
|
|
<h3>用户管理</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<!-- 搜索框和添加用户按钮的容器 -->
|
|
<div class="toolbar">
|
|
<!-- 用户搜索框 -->
|
|
<el-input v-model="userSearch" placeholder="输入员工id或用户id" class="user-search" prefix-icon="el-icon-search">
|
|
</el-input>
|
|
|
|
<!-- 添加用户按钮 -->
|
|
<el-button @click="handleAddUser" type="primary" class="add-user-button">
|
|
添加用户
|
|
</el-button>
|
|
</div>
|
|
|
|
<!-- 用户表格 -->
|
|
<el-table :data="paginatedUsers" stripe style="width: 90%; margin: 20px auto;" border>
|
|
<el-table-column prop="id" label="用户ID" align="center"></el-table-column>
|
|
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
|
|
<el-table-column prop="password" label="密码" align="center"></el-table-column>
|
|
<el-table-column prop="phone" label="电话号" align="center"></el-table-column>
|
|
<el-table-column prop="lastLogin" label="最后登录时间" align="center"></el-table-column>
|
|
<el-table-column prop="registerTime" label="注册时间" align="center"></el-table-column>
|
|
<el-table-column label="操作" width="220" align="center">
|
|
<template v-slot="scope">
|
|
<div class="button-group">
|
|
<el-button @click="handleEditUser(scope.row)" size="mini" type="primary" plain>编辑</el-button>
|
|
<el-button @click="handleDeleteUser(scope.row)" size="mini" type="danger" plain>删除</el-button>
|
|
<el-button @click="handleViewUser(scope.row)" size="mini" type="info" plain>查看详情</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页控件 -->
|
|
<el-pagination :current-page="userCurrentPage" :page-size="userPageSize" :total="userData.length"
|
|
@current-change="handleUserPageChange" layout="prev, pager, next, jumper" class="pagination" />
|
|
</div>
|
|
|
|
<!-- 快递员管理 -->
|
|
<div class="section">
|
|
<h3>快递员管理</h3>
|
|
|
|
<!-- 添加快递员按钮 -->
|
|
<div class="action-buttons">
|
|
<el-button @click="handleAddCourier" type="primary">添加快递员</el-button>
|
|
</div>
|
|
|
|
<el-table :data="paginatedCouriers" stripe style="width: 90%; margin: 0 auto;" border>
|
|
<el-table-column prop="id" label="员工号" align="center"></el-table-column>
|
|
<el-table-column prop="name" label="姓名" align="center"></el-table-column>
|
|
<el-table-column prop="status" label="在职状态" align="center"></el-table-column>
|
|
<el-table-column prop="phone" label="电话" align="center"></el-table-column>
|
|
<el-table-column prop="entryTime" label="入职时间" align="center"></el-table-column>
|
|
<el-table-column label="操作" width="220" align="center">
|
|
<template v-slot="scope">
|
|
<div class="button-group">
|
|
<el-button @click="handleEditCourier(scope.row)" size="mini" type="primary" plain>编辑</el-button>
|
|
<el-button @click="handleDeleteCourier(scope.row)" size="mini" type="danger" plain>删除</el-button>
|
|
<el-button @click="handleViewCourier(scope.row)" size="mini" type="info" plain>查看详情</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<!-- 分页控件 -->
|
|
<el-pagination :current-page="courierCurrentPage" :page-size="courierPageSize" :total="courierData.length"
|
|
@current-change="handleCourierPageChange" layout="prev, pager, next, jumper" class="pagination" />
|
|
</div>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
<el-footer>
|
|
<Footer />
|
|
</el-footer>
|
|
|
|
<!-- 编辑用户对话框 -->
|
|
<el-dialog title="编辑用户" v-model="editUserDialogVisible">
|
|
<el-form :model="currentUser">
|
|
<el-form-item label="用户ID">
|
|
<el-input v-model="currentUser.id" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="currentUser.email" />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="currentUser.password" />
|
|
</el-form-item>
|
|
<el-form-item label="电话号">
|
|
<el-input v-model="currentUser.phone" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="editUserDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSaveUserEdit">保存</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 添加用户对话框 -->
|
|
<el-dialog title="添加用户" v-model="addUserDialogVisible">
|
|
<el-form :model="newUser" label-width="100px">
|
|
<el-form-item label="用户ID">
|
|
<el-input v-model="newUser.id" placeholder="请输入用户ID" />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="newUser.email" placeholder="请输入邮箱" />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="newUser.password" placeholder="请输入密码" />
|
|
</el-form-item>
|
|
<el-form-item label="电话号">
|
|
<el-input v-model="newUser.phone" placeholder="请输入电话号码" />
|
|
</el-form-item>
|
|
<el-form-item label="注册时间">
|
|
<el-date-picker v-model="newUser.registerTime" type="date" placeholder="选择注册时间" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="addUserDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSaveNewUser">保存</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑快递员对话框 -->
|
|
<el-dialog title="编辑快递员" v-model="editCourierDialogVisible">
|
|
<el-form :model="currentCourier">
|
|
<el-form-item label="员工号">
|
|
<el-input v-model="currentCourier.id" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="currentCourier.name" />
|
|
</el-form-item>
|
|
<el-form-item label="在职状态">
|
|
<el-input v-model="currentCourier.status" />
|
|
</el-form-item>
|
|
<el-form-item label="电话">
|
|
<el-input v-model="currentCourier.phone" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="editCourierDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSaveCourierEdit">保存</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 添加快递员对话框 -->
|
|
<el-dialog title="添加快递员" v-model="addCourierDialogVisible">
|
|
<el-form :model="newCourier" label-width="100px">
|
|
<el-form-item label="员工号">
|
|
<el-input v-model="newCourier.id" placeholder="请输入员工号" />
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="newCourier.name" placeholder="请输入姓名" />
|
|
</el-form-item>
|
|
<el-form-item label="在职状态">
|
|
<el-input v-model="newCourier.status" placeholder="请输入在职状态（如：在职、离职）" />
|
|
</el-form-item>
|
|
<el-form-item label="电话">
|
|
<el-input v-model="newCourier.phone" placeholder="请输入电话号码" />
|
|
</el-form-item>
|
|
<el-form-item label="入职时间">
|
|
<el-date-picker v-model="newCourier.entryTime" type="date" placeholder="选择入职时间" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="addCourierDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleSaveNewCourier">保存</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 查看快递员详情对话框 -->
|
|
<el-dialog title="快递员详情" v-model="viewCourierDialogVisible">
|
|
<el-form :model="currentCourier" label-width="100px">
|
|
<el-form-item label="员工号">
|
|
<el-input v-model="currentCourier.id" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="姓名">
|
|
<el-input v-model="currentCourier.name" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="在职状态">
|
|
<el-input v-model="currentCourier.status" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="电话">
|
|
<el-input v-model="currentCourier.phone" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="入职时间">
|
|
<el-input v-model="currentCourier.entryTime" readonly />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="viewCourierDialogVisible = false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- 查看详情对话框 -->
|
|
<!-- 查看用户详情对话框 -->
|
|
<el-dialog title="查看用户详情" v-model="viewUserDialogVisible">
|
|
<el-form :model="currentUser" label-width="100px" readonly>
|
|
<el-form-item label="用户ID">
|
|
<el-input v-model="currentUser.id" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input v-model="currentUser.email" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="currentUser.password" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="电话号">
|
|
<el-input v-model="currentUser.phone" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="最后登录时间">
|
|
<el-input v-model="currentUser.lastLogin" readonly />
|
|
</el-form-item>
|
|
<el-form-item label="注册时间">
|
|
<el-input v-model="currentUser.registerTime" readonly />
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="viewUserDialogVisible = false">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</el-container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue'
|
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
|
// 查看用户详情
|
|
const viewUserDialogVisible = ref(false)
|
|
|
|
|
|
const handleViewUser = (user) => {
|
|
currentUser.value = { ...user } // 将选中的用户数据赋值给当前用户对象
|
|
viewUserDialogVisible.value = true // 显示查看详情对话框
|
|
}
|
|
// 查看快递员
|
|
const viewCourierDialogVisible = ref(false) // 控制查看对话框的显示
|
|
const handleViewCourier = (courier: any) => {
|
|
currentCourier.value = { ...courier } // 将当前选择的快递员数据赋值
|
|
viewCourierDialogVisible.value = true // 打开查看对话框
|
|
}
|
|
|
|
// 添加用户
|
|
const addUserDialogVisible = ref(false) // 控制添加用户对话框的显示
|
|
const newUser = ref({
|
|
id: '', // 用户ID
|
|
email: '', // 用户邮箱
|
|
password: '', // 用户密码
|
|
phone: '', // 用户电话
|
|
registerTime: '' // 注册时间
|
|
})
|
|
|
|
const handleAddUser = () => {
|
|
newUser.value = { id: '', email: '', password: '', phone: '', registerTime: '' } // 初始化表单
|
|
addUserDialogVisible.value = true // 打开添加对话框
|
|
}
|
|
|
|
const handleSaveNewUser = () => {
|
|
if (!newUser.value.id || !newUser.value.email || !newUser.value.phone) {
|
|
ElMessage.warning('请完整填写信息')
|
|
return
|
|
}
|
|
// 添加到用户数据
|
|
|
|
ElMessage.success('用户添加成功')
|
|
addUserDialogVisible.value = false // 关闭对话框
|
|
}
|
|
|
|
// 用户和快递员数据
|
|
const userData = ref([
|
|
{ id: '001', email: 'user1@example.com', password: 'password123', phone: '13800000001', lastLogin: '2024-11-01 10:30:00', registerTime: '2023-01-15 14:20:00' },
|
|
{ id: '002', email: 'user2@example.com', password: 'password123', phone: '13800000002', lastLogin: '2024-11-02 12:00:00', registerTime: '2023-02-10 09:15:00' },
|
|
|
|
|
|
// ... 其他用户数据
|
|
]);
|
|
const courierData = ref([
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
// ... 其他快递员数据
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
{ id: '001', name: '小刘', status: '在职', phone: '13800000001', entryTime: '2022-03-01' },
|
|
{ id: '002', name: '小王', status: '离职', phone: '13800000002', entryTime: '2021-06-15' },
|
|
|
|
]);
|
|
|
|
// 当前用户/快递员
|
|
const currentUser = ref<any>({})
|
|
const currentCourier = ref<any>({})
|
|
|
|
// 对话框可见性
|
|
const editUserDialogVisible = ref(false)
|
|
const editCourierDialogVisible = ref(false)
|
|
|
|
// 当前页和分页大小
|
|
const userPageSize = 5
|
|
const courierPageSize = 5
|
|
const userCurrentPage = ref(1)
|
|
const courierCurrentPage = ref(1)
|
|
const userSearch = ref('')
|
|
// 添加快递员
|
|
const addCourierDialogVisible = ref(false) // 控制添加快递员对话框的显示
|
|
const newCourier = ref({
|
|
id: '', // 员工号
|
|
name: '', // 姓名
|
|
status: '', // 在职状态
|
|
phone: '', // 电话
|
|
entryTime: '' // 入职时间
|
|
})
|
|
|
|
const handleAddCourier = () => {
|
|
newCourier.value = { id: '', name: '', status: '', phone: '', entryTime: '' } // 初始化表单
|
|
addCourierDialogVisible.value = true // 打开添加对话框
|
|
}
|
|
|
|
const handleSaveNewCourier = () => {
|
|
if (!newCourier.value.id || !newCourier.value.name || !newCourier.value.phone) {
|
|
ElMessage.warning('请完整填写信息')
|
|
return
|
|
}
|
|
// 添加到快递员数据
|
|
courierData.value.push({ ...newCourier.value })
|
|
ElMessage.success('快递员添加成功')
|
|
addCourierDialogVisible.value = false // 关闭对话框
|
|
}
|
|
|
|
// 分页后的用户和快递员数据
|
|
const paginatedUsers = computed(() => {
|
|
const start = (userCurrentPage.value - 1) * userPageSize
|
|
return userData.value.slice(start, start + userPageSize)
|
|
})
|
|
const paginatedCouriers = computed(() => {
|
|
const start = (courierCurrentPage.value - 1) * courierPageSize
|
|
return courierData.value.slice(start, start + courierPageSize)
|
|
})
|
|
|
|
// 编辑用户
|
|
const handleEditUser = (user: any) => {
|
|
currentUser.value = { ...user }
|
|
editUserDialogVisible.value = true
|
|
}
|
|
|
|
// 编辑快递员
|
|
const handleEditCourier = (courier: any) => {
|
|
currentCourier.value = { ...courier }
|
|
editCourierDialogVisible.value = true
|
|
}
|
|
|
|
// 删除用户
|
|
const handleDeleteUser = (user: any) => {
|
|
ElMessageBox.confirm(
|
|
'确定删除该用户吗？',
|
|
'删除确认',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
).then(() => {
|
|
// 删除操作
|
|
const index = userData.value.findIndex(u => u.id === user.id)
|
|
if (index !== -1) userData.value.splice(index, 1)
|
|
ElMessage.success('删除成功')
|
|
}).catch(() => {
|
|
ElMessage.info('删除已取消')
|
|
})
|
|
}
|
|
|
|
// 删除快递员
|
|
const handleDeleteCourier = (courier: any) => {
|
|
ElMessageBox.confirm(
|
|
'确定删除该快递员吗？',
|
|
'删除确认',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}
|
|
).then(() => {
|
|
// 删除操作
|
|
const index = courierData.value.findIndex(c => c.id === courier.id)
|
|
if (index !== -1) courierData.value.splice(index, 1)
|
|
ElMessage.success('删除成功')
|
|
}).catch(() => {
|
|
ElMessage.info('删除已取消')
|
|
})
|
|
}
|
|
|
|
// 保存用户编辑
|
|
const handleSaveUserEdit = () => {
|
|
const index = userData.value.findIndex(u => u.id === currentUser.value.id)
|
|
if (index !== -1) {
|
|
userData.value[index] = { ...currentUser.value }
|
|
ElMessage.success('用户信息已更新')
|
|
}
|
|
editUserDialogVisible.value = false
|
|
}
|
|
|
|
// 保存快递员编辑
|
|
const handleSaveCourierEdit = () => {
|
|
const index = courierData.value.findIndex(c => c.id === currentCourier.value.id)
|
|
if (index !== -1) {
|
|
courierData.value[index] = { ...currentCourier.value }
|
|
ElMessage.success('快递员信息已更新')
|
|
}
|
|
editCourierDialogVisible.value = false
|
|
}
|
|
|
|
// 分页变化
|
|
const handleUserPageChange = (page: number) => userCurrentPage.value = page
|
|
const handleCourierPageChange = (page: number) => courierCurrentPage.value = page
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
/* 将内容对齐到右边 */
|
|
align-items: center;
|
|
width: 90%;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
.user-search {
|
|
flex: 0 0 200px;
|
|
/* 搜索框的固定宽度 */
|
|
margin-right: 10px;
|
|
/* 可以根据需要调整这个值 */
|
|
}
|
|
|
|
/* 添加用户按钮 */
|
|
.add-user-button {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.emain {
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.management-container {
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.management-container h2 {
|
|
font-size: 24px;
|
|
color: #333;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.section h3 {
|
|
font-size: 20px;
|
|
color: #666;
|
|
margin-bottom: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.el-table {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.el-button {
|
|
min-width: 60px;
|
|
font-size: 12px;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.el-table-column {
|
|
text-align: center;
|
|
}
|
|
|
|
.el-table__header-wrapper th {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
.action-buttons {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
margin-right: 100px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|