添加银行政府后端接口
This commit is contained in:
@@ -1134,6 +1134,82 @@ export const api = {
|
||||
async batchUpdateStatus(data) {
|
||||
return api.put('/loan-contracts/batch/status', data)
|
||||
}
|
||||
},
|
||||
|
||||
// 员工管理API
|
||||
employees: {
|
||||
/**
|
||||
* 获取员工列表
|
||||
* @param {Object} params - 查询参数
|
||||
* @returns {Promise} 员工列表
|
||||
*/
|
||||
async getList(params = {}) {
|
||||
return api.get('/employees', { params })
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取员工详情
|
||||
* @param {number} id - 员工ID
|
||||
* @returns {Promise} 员工详情
|
||||
*/
|
||||
async getById(id) {
|
||||
return api.get(`/employees/${id}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 创建员工
|
||||
* @param {Object} data - 员工数据
|
||||
* @returns {Promise} 创建结果
|
||||
*/
|
||||
async create(data) {
|
||||
return api.post('/employees', data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新员工信息
|
||||
* @param {number} id - 员工ID
|
||||
* @param {Object} data - 员工数据
|
||||
* @returns {Promise} 更新结果
|
||||
*/
|
||||
async update(id, data) {
|
||||
return api.put(`/employees/${id}`, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 重设密码
|
||||
* @param {number} id - 员工ID
|
||||
* @param {Object} data - 密码数据
|
||||
* @returns {Promise} 重设结果
|
||||
*/
|
||||
async resetPassword(id, data) {
|
||||
return api.put(`/employees/${id}/reset-password`, data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除员工
|
||||
* @param {number} id - 员工ID
|
||||
* @returns {Promise} 删除结果
|
||||
*/
|
||||
async delete(id) {
|
||||
return api.delete(`/employees/${id}`)
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取员工统计信息
|
||||
* @returns {Promise} 统计信息
|
||||
*/
|
||||
async getStats() {
|
||||
return api.get('/employees/stats')
|
||||
},
|
||||
|
||||
/**
|
||||
* 批量更新员工状态
|
||||
* @param {Object} data - 批量操作数据
|
||||
* @returns {Promise} 更新结果
|
||||
*/
|
||||
async batchUpdateStatus(data) {
|
||||
return api.put('/employees/batch/status', data)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,36 @@
|
||||
<template>
|
||||
<div class="employee-management-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<h1>员工管理</h1>
|
||||
<a-button type="primary" @click="handleAdd">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
新增人员
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 搜索筛选区域 -->
|
||||
<div class="search-filter-section">
|
||||
<a-row :gutter="16" align="middle">
|
||||
<a-col :span="4">
|
||||
<a-button type="primary" @click="handleAddEmployee">
|
||||
<plus-outlined /> 新增人员
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="8">
|
||||
<a-input
|
||||
v-model:value="searchText"
|
||||
v-model:value="searchQuery.value"
|
||||
placeholder="请输入员工姓名"
|
||||
allow-clear
|
||||
/>
|
||||
@pressEnter="handleSearch"
|
||||
>
|
||||
<template #prefix>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
<a-button type="primary" @click="handleSearch">
|
||||
<search-outlined /> 搜索
|
||||
<template #icon>
|
||||
<SearchOutlined />
|
||||
</template>
|
||||
搜索
|
||||
</a-button>
|
||||
</a-col>
|
||||
<a-col :span="4">
|
||||
@@ -29,30 +39,57 @@
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<!-- 员工表格 -->
|
||||
<div class="employees-table-section">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="filteredEmployees"
|
||||
:pagination="pagination"
|
||||
:data-source="employees"
|
||||
:loading="loading"
|
||||
row-key="id"
|
||||
:pagination="pagination"
|
||||
:row-selection="rowSelection"
|
||||
@change="handleTableChange"
|
||||
row-key="id"
|
||||
:scroll="{ x: 800 }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<!-- 序号列 -->
|
||||
<template #bodyCell="{ column, index, record }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
|
||||
</template>
|
||||
|
||||
<!-- 员工姓名列 -->
|
||||
<template v-else-if="column.key === 'name'">
|
||||
<span class="employee-name">{{ record.name }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 联系电话列 -->
|
||||
<template v-else-if="column.key === 'phone'">
|
||||
<span class="phone-number">{{ maskPhone(record.phone) }}</span>
|
||||
</template>
|
||||
|
||||
<!-- 贷款专员列 -->
|
||||
<template v-else-if="column.key === 'isLoanSpecialist'">
|
||||
<a-tag :color="record.isLoanSpecialist ? 'green' : 'default'">
|
||||
{{ record.isLoanSpecialist ? '是' : '否' }}
|
||||
</a-tag>
|
||||
</template>
|
||||
|
||||
<!-- 账号状态列 -->
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<a-switch
|
||||
v-model:checked="record.status"
|
||||
checked-children="启用"
|
||||
un-checked-children="禁用"
|
||||
@change="handleToggleStatus(record)"
|
||||
:checked="record.status === 'active'"
|
||||
@change="(checked) => handleStatusChange(record, checked)"
|
||||
:loading="record.statusLoading"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.key === 'action'">
|
||||
<a-space>
|
||||
<a-button type="link" size="small" @click="handleResetPassword(record)">
|
||||
<a-button type="link" @click="handleResetPassword(record)">
|
||||
重设密码
|
||||
</a-button>
|
||||
<a-button type="link" size="small" @click="handleEdit(record)">
|
||||
<a-button type="link" @click="handleEdit(record)">
|
||||
编辑
|
||||
</a-button>
|
||||
</a-space>
|
||||
@@ -61,115 +98,137 @@
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 员工详情模态框 -->
|
||||
<!-- 新增/编辑员工弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="detailModalVisible"
|
||||
title="员工详情"
|
||||
width="800px"
|
||||
:footer="null"
|
||||
v-model:open="editModalVisible"
|
||||
:title="isEdit ? '编辑员工' : '新增员工'"
|
||||
width="600px"
|
||||
:confirm-loading="editLoading"
|
||||
@ok="handleEditSubmit"
|
||||
@cancel="handleEditCancel"
|
||||
>
|
||||
<div v-if="selectedEmployee" class="employee-detail">
|
||||
<div class="employee-header">
|
||||
<a-avatar :src="selectedEmployee.avatar" :size="64">
|
||||
{{ selectedEmployee.name.charAt(0) }}
|
||||
</a-avatar>
|
||||
<div class="employee-info">
|
||||
<h3>{{ selectedEmployee.name }}</h3>
|
||||
<p>{{ getPositionText(selectedEmployee.position) }} - {{ getDepartmentText(selectedEmployee.department) }}</p>
|
||||
<a-tag :color="getStatusColor(selectedEmployee.status)">
|
||||
{{ getStatusText(selectedEmployee.status) }}
|
||||
</a-tag>
|
||||
</div>
|
||||
</div>
|
||||
<a-form
|
||||
ref="editFormRef"
|
||||
:model="editForm"
|
||||
:rules="editFormRules"
|
||||
layout="vertical"
|
||||
v-if="editModalVisible"
|
||||
>
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="员工编号" name="employeeNumber">
|
||||
<a-input
|
||||
v-model:value="editForm.employeeNumber"
|
||||
placeholder="请输入员工编号"
|
||||
:disabled="isEdit"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="员工姓名" name="name">
|
||||
<a-input
|
||||
v-model:value="editForm.name"
|
||||
placeholder="请输入员工姓名"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="联系电话" name="phone">
|
||||
<a-input
|
||||
v-model:value="editForm.phone"
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="邮箱" name="email">
|
||||
<a-input
|
||||
v-model:value="editForm.email"
|
||||
placeholder="请输入邮箱"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="部门" name="department">
|
||||
<a-input
|
||||
v-model:value="editForm.department"
|
||||
placeholder="请输入部门"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="职位" name="position">
|
||||
<a-input
|
||||
v-model:value="editForm.position"
|
||||
placeholder="请输入职位"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-form-item label="是否为贷款专员" name="isLoanSpecialist">
|
||||
<a-switch
|
||||
v-model:checked="editForm.isLoanSpecialist"
|
||||
checked-children="是"
|
||||
un-checked-children="否"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="!isEdit" label="初始密码" name="password">
|
||||
<a-input
|
||||
v-model:value="editForm.password"
|
||||
placeholder="请输入初始密码，默认为123456"
|
||||
type="password"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
||||
<a-descriptions :column="2" bordered style="margin-top: 24px">
|
||||
<a-descriptions-item label="工号">
|
||||
{{ selectedEmployee.employeeId }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="姓名">
|
||||
{{ selectedEmployee.name }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="性别">
|
||||
{{ selectedEmployee.gender }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="年龄">
|
||||
{{ selectedEmployee.age }} 岁
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="手机号">
|
||||
{{ selectedEmployee.phone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="邮箱">
|
||||
{{ selectedEmployee.email }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="身份证号">
|
||||
{{ selectedEmployee.idCard }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="入职日期">
|
||||
{{ selectedEmployee.hireDate }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="部门">
|
||||
<a-tag :color="getDepartmentColor(selectedEmployee.department)">
|
||||
{{ getDepartmentText(selectedEmployee.department) }}
|
||||
</a-tag>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="职位">
|
||||
{{ getPositionText(selectedEmployee.position) }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="直属上级">
|
||||
{{ selectedEmployee.supervisor }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="薪资等级">
|
||||
{{ selectedEmployee.salaryLevel }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="工作地点">
|
||||
{{ selectedEmployee.workLocation }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="紧急联系人">
|
||||
{{ selectedEmployee.emergencyContact }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="紧急联系电话">
|
||||
{{ selectedEmployee.emergencyPhone }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="个人简介" :span="2">
|
||||
{{ selectedEmployee.bio || '暂无' }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<!-- 工作经历 -->
|
||||
<div class="work-experience" v-if="selectedEmployee && selectedEmployee.experience">
|
||||
<h4>工作经历</h4>
|
||||
<a-timeline>
|
||||
<a-timeline-item
|
||||
v-for="exp in selectedEmployee.experience"
|
||||
:key="exp.id"
|
||||
>
|
||||
<div class="experience-item">
|
||||
<div class="experience-header">
|
||||
<span class="experience-title">{{ exp.title }}</span>
|
||||
<span class="experience-period">{{ exp.startDate }} - {{ exp.endDate || '至今' }}</span>
|
||||
</div>
|
||||
<div class="experience-company">{{ exp.company }}</div>
|
||||
<div class="experience-description">{{ exp.description }}</div>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 重设密码弹窗 -->
|
||||
<a-modal
|
||||
v-model:open="resetPasswordModalVisible"
|
||||
title="重设密码"
|
||||
width="400px"
|
||||
:confirm-loading="resetPasswordLoading"
|
||||
@ok="handleResetPasswordSubmit"
|
||||
@cancel="handleResetPasswordCancel"
|
||||
>
|
||||
<a-form
|
||||
ref="resetPasswordFormRef"
|
||||
:model="resetPasswordForm"
|
||||
:rules="resetPasswordFormRules"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-form-item label="新密码" name="newPassword">
|
||||
<a-input
|
||||
v-model:value="resetPasswordForm.newPassword"
|
||||
placeholder="请输入新密码"
|
||||
type="password"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, reactive, onMounted, computed, watch } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import { PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
|
||||
import { api } from '@/utils/api'
|
||||
import api from '@/utils/api'
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const searchText = ref('')
|
||||
const detailModalVisible = ref(false)
|
||||
const selectedEmployee = ref(null)
|
||||
const searchQuery = ref({
|
||||
field: 'name',
|
||||
value: ''
|
||||
})
|
||||
|
||||
// 分页配置
|
||||
const pagination = ref({
|
||||
@@ -185,10 +244,9 @@ const pagination = ref({
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
width: 80,
|
||||
customRender: ({ index }) => index + 1
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '员工姓名',
|
||||
@@ -206,22 +264,20 @@ const columns = [
|
||||
title: '贷款专员',
|
||||
dataIndex: 'isLoanSpecialist',
|
||||
key: 'isLoanSpecialist',
|
||||
width: 120
|
||||
width: 100,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '账号状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 120,
|
||||
filters: [
|
||||
{ text: '启用', value: true },
|
||||
{ text: '禁用', value: false }
|
||||
]
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 200,
|
||||
width: 150,
|
||||
fixed: 'right'
|
||||
}
|
||||
]
|
||||
@@ -229,172 +285,272 @@ const columns = [
|
||||
// 员工数据
|
||||
const employees = ref([])
|
||||
|
||||
// 模拟员工数据（作为备用）
|
||||
const mockEmployees = [
|
||||
{
|
||||
id: 1,
|
||||
name: '刘超',
|
||||
phone: '150****1368',
|
||||
isLoanSpecialist: '否',
|
||||
status: true,
|
||||
employeeId: 'EMP001',
|
||||
gender: '男',
|
||||
age: 28,
|
||||
email: 'liuchao@bank.com',
|
||||
idCard: '110101199001011234',
|
||||
hireDate: '2020-03-15',
|
||||
department: 'admin',
|
||||
position: 'manager',
|
||||
supervisor: '李总',
|
||||
salaryLevel: 'L5',
|
||||
workLocation: '总行',
|
||||
emergencyContact: '刘四',
|
||||
emergencyPhone: '13900139000',
|
||||
bio: '具有5年银行管理经验，擅长团队管理和业务规划',
|
||||
avatar: null,
|
||||
experience: [
|
||||
{
|
||||
id: 1,
|
||||
title: '行政经理',
|
||||
company: '某银行',
|
||||
startDate: '2020-03-15',
|
||||
endDate: null,
|
||||
description: '负责行政部日常管理工作'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
// 调试：监听employees变化
|
||||
watch(employees, (newVal) => {
|
||||
console.log('employees数据变化:', newVal)
|
||||
}, { deep: true })
|
||||
|
||||
// 计算属性
|
||||
const filteredEmployees = computed(() => {
|
||||
let result = employees.value
|
||||
|
||||
if (searchText.value) {
|
||||
result = result.filter(employee =>
|
||||
employee.name.toLowerCase().includes(searchText.value.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
// 编辑弹窗相关
|
||||
const editModalVisible = ref(false)
|
||||
const editLoading = ref(false)
|
||||
const editFormRef = ref()
|
||||
const isEdit = ref(false)
|
||||
const editForm = reactive({
|
||||
id: null,
|
||||
employeeNumber: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
department: '',
|
||||
position: '',
|
||||
isLoanSpecialist: false,
|
||||
password: '123456'
|
||||
})
|
||||
|
||||
// 方法
|
||||
const handleAddEmployee = () => {
|
||||
message.info('新增人员功能开发中...')
|
||||
const editFormRules = {
|
||||
employeeNumber: [
|
||||
{ required: true, message: '请输入员工编号', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '员工编号长度在3-20个字符', trigger: 'blur' }
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '请输入员工姓名', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '员工姓名长度在2-50个字符', trigger: 'blur' }
|
||||
],
|
||||
phone: [
|
||||
{ required: true, message: '请输入联系电话', trigger: 'blur' },
|
||||
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
|
||||
],
|
||||
email: [
|
||||
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
||||
],
|
||||
department: [
|
||||
{ max: 50, message: '部门名称不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
position: [
|
||||
{ max: 50, message: '职位名称不能超过50个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ min: 6, max: 20, message: '密码长度在6-20个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑已在计算属性中处理
|
||||
// 重设密码弹窗相关
|
||||
const resetPasswordModalVisible = ref(false)
|
||||
const resetPasswordLoading = ref(false)
|
||||
const resetPasswordFormRef = ref()
|
||||
const currentEmployee = ref(null)
|
||||
const resetPasswordForm = reactive({
|
||||
newPassword: ''
|
||||
})
|
||||
|
||||
const resetPasswordFormRules = {
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度在6-20个字符', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
searchText.value = ''
|
||||
}
|
||||
// 行选择配置
|
||||
const selectedRowKeys = ref([])
|
||||
const selectedRows = ref([])
|
||||
|
||||
const handleView = (record) => {
|
||||
selectedEmployee.value = record
|
||||
detailModalVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (record) => {
|
||||
message.info(`编辑员工: ${record.name}`)
|
||||
}
|
||||
|
||||
const handleResetPassword = (record) => {
|
||||
message.info(`重设密码: ${record.name}`)
|
||||
}
|
||||
|
||||
const handleToggleStatus = (record) => {
|
||||
record.status = !record.status
|
||||
message.success(`员工账号已${record.status ? '启用' : '禁用'}`)
|
||||
}
|
||||
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
active: 'green',
|
||||
inactive: 'red',
|
||||
suspended: 'orange'
|
||||
const rowSelection = computed(() => ({
|
||||
selectedRowKeys: selectedRowKeys.value,
|
||||
onChange: (keys, rows) => {
|
||||
selectedRowKeys.value = keys
|
||||
selectedRows.value = rows
|
||||
}
|
||||
return colors[status] || 'default'
|
||||
}
|
||||
}))
|
||||
|
||||
const getStatusText = (status) => {
|
||||
const texts = {
|
||||
active: '在职',
|
||||
inactive: '离职',
|
||||
suspended: '停职'
|
||||
}
|
||||
return texts[status] || status
|
||||
}
|
||||
|
||||
const getDepartmentColor = (department) => {
|
||||
const colors = {
|
||||
admin: 'blue',
|
||||
finance: 'green',
|
||||
it: 'purple',
|
||||
hr: 'orange',
|
||||
sales: 'cyan'
|
||||
}
|
||||
return colors[department] || 'default'
|
||||
}
|
||||
|
||||
const getDepartmentText = (department) => {
|
||||
const texts = {
|
||||
admin: '行政部',
|
||||
finance: '财务部',
|
||||
it: '技术部',
|
||||
hr: '人事部',
|
||||
sales: '销售部'
|
||||
}
|
||||
return texts[department] || department
|
||||
}
|
||||
|
||||
const getPositionText = (position) => {
|
||||
const texts = {
|
||||
manager: '经理',
|
||||
supervisor: '主管',
|
||||
staff: '员工',
|
||||
intern: '实习生'
|
||||
}
|
||||
return texts[position] || position
|
||||
}
|
||||
|
||||
// API调用函数
|
||||
const fetchEmployees = async (params = {}) => {
|
||||
// 获取员工列表
|
||||
const fetchEmployees = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const response = await api.employees.getList({
|
||||
page: pagination.value.current,
|
||||
limit: pagination.value.pageSize,
|
||||
search: searchText.value,
|
||||
...params
|
||||
pageSize: pagination.value.pageSize,
|
||||
searchField: searchQuery.value.field,
|
||||
searchValue: searchQuery.value.value
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
employees.value = response.data.employees || []
|
||||
pagination.value.total = response.data.pagination?.total || 0
|
||||
console.log('API响应数据:', response.data)
|
||||
employees.value = response.data.employees.map(emp => ({
|
||||
...emp,
|
||||
statusLoading: false
|
||||
}))
|
||||
pagination.value.total = response.data.pagination.total
|
||||
console.log('设置后的员工数据:', employees.value)
|
||||
} else {
|
||||
message.error(response.message || '获取员工列表失败')
|
||||
// 使用模拟数据作为备用
|
||||
employees.value = mockEmployees
|
||||
pagination.value.total = mockEmployees.length
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取员工列表失败:', error)
|
||||
message.error('获取员工列表失败')
|
||||
// 使用模拟数据作为备用
|
||||
employees.value = mockEmployees
|
||||
pagination.value.total = mockEmployees.length
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleTableChange = (paginationInfo) => {
|
||||
pagination.value = paginationInfo
|
||||
// 搜索
|
||||
const handleSearch = () => {
|
||||
pagination.value.current = 1
|
||||
fetchEmployees()
|
||||
}
|
||||
|
||||
// 重置
|
||||
const handleReset = () => {
|
||||
searchQuery.value = {
|
||||
field: 'name',
|
||||
value: ''
|
||||
}
|
||||
fetchEmployees()
|
||||
}
|
||||
|
||||
// 表格变化
|
||||
const handleTableChange = (pag) => {
|
||||
pagination.value.current = pag.current
|
||||
pagination.value.pageSize = pag.pageSize
|
||||
fetchEmployees()
|
||||
}
|
||||
|
||||
// 新增员工
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
editModalVisible.value = true
|
||||
Object.assign(editForm, {
|
||||
id: null,
|
||||
employeeNumber: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
department: '',
|
||||
position: '',
|
||||
isLoanSpecialist: false,
|
||||
password: '123456'
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑员工
|
||||
const handleEdit = (record) => {
|
||||
isEdit.value = true
|
||||
editModalVisible.value = true
|
||||
Object.assign(editForm, {
|
||||
id: record.id,
|
||||
employeeNumber: record.employeeNumber,
|
||||
name: record.name,
|
||||
phone: record.phone,
|
||||
email: record.email,
|
||||
department: record.department,
|
||||
position: record.position,
|
||||
isLoanSpecialist: record.isLoanSpecialist,
|
||||
password: ''
|
||||
})
|
||||
}
|
||||
|
||||
// 编辑提交
|
||||
const handleEditSubmit = async () => {
|
||||
try {
|
||||
await editFormRef.value.validate()
|
||||
editLoading.value = true
|
||||
|
||||
const data = { ...editForm }
|
||||
if (isEdit.value) {
|
||||
delete data.password // 编辑时不传密码
|
||||
}
|
||||
|
||||
const response = isEdit.value
|
||||
? await api.employees.update(editForm.id, data)
|
||||
: await api.employees.create(data)
|
||||
|
||||
if (response.success) {
|
||||
message.success(isEdit.value ? '更新员工成功' : '创建员工成功')
|
||||
editModalVisible.value = false
|
||||
fetchEmployees()
|
||||
} else {
|
||||
message.error(response.message || (isEdit.value ? '更新员工失败' : '创建员工失败'))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('编辑员工失败:', error)
|
||||
message.error(isEdit.value ? '更新员工失败' : '创建员工失败')
|
||||
} finally {
|
||||
editLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑取消
|
||||
const handleEditCancel = () => {
|
||||
editModalVisible.value = false
|
||||
editFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 重设密码
|
||||
const handleResetPassword = (record) => {
|
||||
currentEmployee.value = record
|
||||
resetPasswordModalVisible.value = true
|
||||
resetPasswordForm.newPassword = ''
|
||||
}
|
||||
|
||||
// 重设密码提交
|
||||
const handleResetPasswordSubmit = async () => {
|
||||
try {
|
||||
await resetPasswordFormRef.value.validate()
|
||||
resetPasswordLoading.value = true
|
||||
|
||||
const response = await api.employees.resetPassword(currentEmployee.value.id, {
|
||||
newPassword: resetPasswordForm.newPassword
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
message.success('重设密码成功')
|
||||
resetPasswordModalVisible.value = false
|
||||
} else {
|
||||
message.error(response.message || '重设密码失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('重设密码失败:', error)
|
||||
message.error('重设密码失败')
|
||||
} finally {
|
||||
resetPasswordLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重设密码取消
|
||||
const handleResetPasswordCancel = () => {
|
||||
resetPasswordModalVisible.value = false
|
||||
resetPasswordFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 状态切换
|
||||
const handleStatusChange = async (record, checked) => {
|
||||
try {
|
||||
record.statusLoading = true
|
||||
const newStatus = checked ? 'active' : 'inactive'
|
||||
|
||||
const response = await api.employees.update(record.id, {
|
||||
status: newStatus
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
record.status = newStatus
|
||||
message.success('状态更新成功')
|
||||
} else {
|
||||
message.error(response.message || '状态更新失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('状态更新失败:', error)
|
||||
message.error('状态更新失败')
|
||||
} finally {
|
||||
record.statusLoading = false
|
||||
}
|
||||
}
|
||||
|
||||
// 手机号脱敏
|
||||
const maskPhone = (phone) => {
|
||||
if (!phone) return ''
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
fetchEmployees()
|
||||
@@ -441,73 +597,13 @@ onMounted(() => {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.employee-detail {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.employee-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.employee-info {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.employee-info h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.employee-info p {
|
||||
margin: 0 0 8px 0;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.work-experience {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.work-experience h4 {
|
||||
margin-bottom: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.experience-item {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.experience-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.experience-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.experience-period {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.experience-company {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.experience-description {
|
||||
.employee-name {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.phone-number {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 表格样式优化 */
|
||||
@@ -525,6 +621,13 @@ onMounted(() => {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* 状态标签样式 */
|
||||
:deep(.ant-tag) {
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
/* 操作按钮样式 */
|
||||
:deep(.ant-btn-link) {
|
||||
padding: 4px 8px;
|
||||
@@ -554,4 +657,4 @@ onMounted(() => {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
254
bank-frontend/src/views/PersonalCenter.vue
Normal file
254
bank-frontend/src/views/PersonalCenter.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="personal-center-page">
|
||||
<!-- 页面头部 -->
|
||||
<div class="page-header">
|
||||
<h1>个人中心 - 修改账号密码</h1>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码表单 -->
|
||||
<div class="password-form-section">
|
||||
<a-card title="修改密码" :bordered="false">
|
||||
<a-form
|
||||
ref="passwordFormRef"
|
||||
:model="passwordForm"
|
||||
:rules="passwordFormRules"
|
||||
layout="vertical"
|
||||
@finish="handlePasswordSubmit"
|
||||
>
|
||||
<a-form-item label="登录账号" name="username">
|
||||
<a-input
|
||||
v-model:value="passwordForm.username"
|
||||
disabled
|
||||
placeholder="登录账号"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="旧密码" name="oldPassword">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.oldPassword"
|
||||
placeholder="请输入旧密码"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="新密码" name="newPassword">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.newPassword"
|
||||
placeholder="请输入新密码"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="确认密码" name="confirmPassword">
|
||||
<a-input-password
|
||||
v-model:value="passwordForm.confirmPassword"
|
||||
placeholder="请再次输入新密码"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-space>
|
||||
<a-button
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
:loading="loading"
|
||||
size="large"
|
||||
>
|
||||
确认
|
||||
</a-button>
|
||||
<a-button
|
||||
@click="handleReset"
|
||||
:disabled="loading"
|
||||
size="large"
|
||||
>
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
// 响应式数据
|
||||
const loading = ref(false)
|
||||
const passwordFormRef = ref()
|
||||
|
||||
// 表单数据
|
||||
const passwordForm = reactive({
|
||||
username: '',
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
// 表单验证规则
|
||||
const passwordFormRules = {
|
||||
oldPassword: [
|
||||
{ required: true, message: '请输入旧密码', trigger: 'blur' }
|
||||
],
|
||||
newPassword: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{ min: 6, max: 20, message: '密码长度在6-20个字符', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,}$/,
|
||||
message: '密码必须包含字母和数字',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
confirmPassword: [
|
||||
{ required: true, message: '请确认新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value) => {
|
||||
if (value !== passwordForm.newPassword) {
|
||||
return Promise.reject('两次输入的密码不一致')
|
||||
}
|
||||
return Promise.resolve()
|
||||
},
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 获取当前用户信息
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const response = await api.auth.getCurrentUser()
|
||||
if (response.success) {
|
||||
passwordForm.username = response.data.username || response.data.phone || '15004901368'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
// 使用默认值
|
||||
passwordForm.username = '15004901368'
|
||||
}
|
||||
}
|
||||
|
||||
// 提交修改密码
|
||||
const handlePasswordSubmit = async () => {
|
||||
try {
|
||||
await passwordFormRef.value.validate()
|
||||
loading.value = true
|
||||
|
||||
const response = await api.auth.changePassword({
|
||||
oldPassword: passwordForm.oldPassword,
|
||||
newPassword: passwordForm.newPassword
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
message.success('密码修改成功')
|
||||
handleReset()
|
||||
} else {
|
||||
message.error(response.message || '密码修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('修改密码失败:', error)
|
||||
if (error.message) {
|
||||
message.error(error.message)
|
||||
} else {
|
||||
message.error('密码修改失败')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 重置表单
|
||||
const handleReset = () => {
|
||||
passwordFormRef.value?.resetFields()
|
||||
passwordForm.oldPassword = ''
|
||||
passwordForm.newPassword = ''
|
||||
passwordForm.confirmPassword = ''
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
fetchUserInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.personal-center-page {
|
||||
padding: 24px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: calc(100vh - 134px);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.password-form-section {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head) {
|
||||
background-color: #fafafa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
:deep(.ant-card-head-title) {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.ant-form-item-label > label) {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
:deep(.ant-input) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.ant-btn) {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-primary) {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
:deep(.ant-btn-primary:hover) {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.personal-center-page {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -183,6 +183,7 @@ import {
|
||||
SafetyOutlined,
|
||||
BellOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import api from '@/utils/api'
|
||||
|
||||
// 响应式数据
|
||||
const editModalVisible = ref(false)
|
||||
@@ -298,7 +299,7 @@ const handleEditCancel = () => {
|
||||
editModalVisible.value = false
|
||||
}
|
||||
|
||||
const handlePasswordSubmit = () => {
|
||||
const handlePasswordSubmit = async () => {
|
||||
if (!passwordForm.value.oldPassword || !passwordForm.value.newPassword || !passwordForm.value.confirmPassword) {
|
||||
message.error('请填写完整信息')
|
||||
return
|
||||
@@ -314,8 +315,28 @@ const handlePasswordSubmit = () => {
|
||||
return
|
||||
}
|
||||
|
||||
passwordModalVisible.value = false
|
||||
message.success('密码修改成功')
|
||||
try {
|
||||
const response = await api.auth.changePassword({
|
||||
oldPassword: passwordForm.value.oldPassword,
|
||||
newPassword: passwordForm.value.newPassword
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
passwordModalVisible.value = false
|
||||
message.success('密码修改成功')
|
||||
// 重置表单
|
||||
passwordForm.value = {
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPassword: ''
|
||||
}
|
||||
} else {
|
||||
message.error(response.message || '密码修改失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('修改密码失败:', error)
|
||||
message.error('密码修改失败')
|
||||
}
|
||||
}
|
||||
|
||||
const handlePasswordCancel = () => {
|
||||
@@ -350,9 +371,36 @@ const getActivityColor = (type) => {
|
||||
return colors[type] || 'default'
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const response = await api.auth.getCurrentUser()
|
||||
if (response.success) {
|
||||
const user = response.data
|
||||
userInfo.value = {
|
||||
name: user.real_name || user.username || '用户',
|
||||
username: user.username || '15004901368',
|
||||
email: user.email || '',
|
||||
phone: user.phone || '15004901368',
|
||||
employeeId: user.employee_id || 'EMP001',
|
||||
position: user.position || '员工',
|
||||
department: user.department || '银行',
|
||||
status: user.status || 'active',
|
||||
hireDate: user.created_at ? new Date(user.created_at).toLocaleDateString() : '2020-03-15',
|
||||
lastLogin: user.last_login ? new Date(user.last_login).toLocaleString() : '2024-01-18 09:30:00',
|
||||
avatar: user.avatar || null,
|
||||
bio: user.bio || '银行员工'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
// 使用默认值
|
||||
}
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化数据
|
||||
fetchUserInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
242
bank-frontend/test-personal-center.html
Normal file
242
bank-frontend/test-personal-center.html
Normal file
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心功能测试</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.test-section {
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.test-section h2 {
|
||||
color: #1890ff;
|
||||
margin-top: 0;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input[type="text"], input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #40a9ff;
|
||||
}
|
||||
.result {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.success {
|
||||
background-color: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
color: #52c41a;
|
||||
}
|
||||
.error {
|
||||
background-color: #fff2f0;
|
||||
border: 1px solid #ffccc7;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
.info {
|
||||
background-color: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>个人中心功能测试</h1>
|
||||
|
||||
<!-- 登录测试 -->
|
||||
<div class="test-section">
|
||||
<h2>1. 用户登录测试</h2>
|
||||
<div class="form-group">
|
||||
<label>用户名:</label>
|
||||
<input type="text" id="loginUsername" value="admin" placeholder="请输入用户名">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码:</label>
|
||||
<input type="password" id="loginPassword" value="NewPassword123" placeholder="请输入密码">
|
||||
</div>
|
||||
<button onclick="testLogin()">登录</button>
|
||||
<div id="loginResult" class="result" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 获取用户信息测试 -->
|
||||
<div class="test-section">
|
||||
<h2>2. 获取用户信息测试</h2>
|
||||
<button onclick="testGetUserInfo()">获取用户信息</button>
|
||||
<div id="userInfoResult" class="result" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 修改密码测试 -->
|
||||
<div class="test-section">
|
||||
<h2>3. 修改密码测试</h2>
|
||||
<div class="form-group">
|
||||
<label>旧密码:</label>
|
||||
<input type="password" id="oldPassword" value="NewPassword123" placeholder="请输入旧密码">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>新密码:</label>
|
||||
<input type="password" id="newPassword" value="Admin123456" placeholder="请输入新密码">
|
||||
</div>
|
||||
<button onclick="testChangePassword()">修改密码</button>
|
||||
<div id="changePasswordResult" class="result" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 测试说明 -->
|
||||
<div class="test-section">
|
||||
<h2>测试说明</h2>
|
||||
<div class="info">
|
||||
<strong>测试账号:</strong><br>
|
||||
• 管理员: admin / NewPassword123 (已修改)<br>
|
||||
• 经理: manager001 / Manager123456<br>
|
||||
• 员工: employee001 / Employee123456<br><br>
|
||||
<strong>测试步骤:</strong><br>
|
||||
1. 先使用管理员账号登录<br>
|
||||
2. 获取用户信息验证API<br>
|
||||
3. 测试修改密码功能<br>
|
||||
4. 重新登录验证密码修改是否生效
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE = 'http://localhost:5351/api';
|
||||
let authToken = '';
|
||||
|
||||
// 显示结果
|
||||
function showResult(elementId, message, type = 'info') {
|
||||
const element = document.getElementById(elementId);
|
||||
element.style.display = 'block';
|
||||
element.className = `result ${type}`;
|
||||
element.textContent = message;
|
||||
}
|
||||
|
||||
// 登录测试
|
||||
async function testLogin() {
|
||||
const username = document.getElementById('loginUsername').value;
|
||||
const password = document.getElementById('loginPassword').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
authToken = data.data.token;
|
||||
showResult('loginResult', `登录成功!\nToken: ${authToken.substring(0, 50)}...`, 'success');
|
||||
} else {
|
||||
showResult('loginResult', `登录失败: ${data.message}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showResult('loginResult', `请求失败: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 获取用户信息测试
|
||||
async function testGetUserInfo() {
|
||||
if (!authToken) {
|
||||
showResult('userInfoResult', '请先登录', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/auth/me`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showResult('userInfoResult', `获取用户信息成功!\n${JSON.stringify(data.data, null, 2)}`, 'success');
|
||||
} else {
|
||||
showResult('userInfoResult', `获取失败: ${data.message}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showResult('userInfoResult', `请求失败: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// 修改密码测试
|
||||
async function testChangePassword() {
|
||||
if (!authToken) {
|
||||
showResult('changePasswordResult', '请先登录', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const oldPassword = document.getElementById('oldPassword').value;
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/auth/change-password`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${authToken}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ oldPassword, newPassword }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showResult('changePasswordResult', `密码修改成功!\n${data.message}`, 'success');
|
||||
} else {
|
||||
showResult('changePasswordResult', `修改失败: ${data.message}`, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showResult('changePasswordResult', `请求失败: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user