351 lines
10 KiB
Vue
351 lines
10 KiB
Vue
<template>
|
||
<GiPageLayout>
|
||
<div class="personal-info-container">
|
||
<!-- 页面标题 -->
|
||
<div class="page-header">
|
||
<h2 class="page-title">个人信息</h2>
|
||
<a-button type="primary" @click="handleEdit">
|
||
<template #icon><icon-edit /></template>
|
||
编辑信息
|
||
</a-button>
|
||
</div>
|
||
|
||
<!-- 个人信息展示 -->
|
||
<a-card class="info-card" :bordered="false">
|
||
<div class="info-sections">
|
||
<!-- 基本信息 -->
|
||
<div class="info-section">
|
||
<h3 class="section-title">基本信息</h3>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">姓名：</span>
|
||
<span class="info-value">{{ personalInfo.name }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">性别：</span>
|
||
<span class="info-value">{{ personalInfo.gender }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">出生日期：</span>
|
||
<span class="info-value">{{ personalInfo.birthDate }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">身份证号：</span>
|
||
<span class="info-value">{{ personalInfo.idCard }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">婚姻状况：</span>
|
||
<span class="info-value">{{ personalInfo.maritalStatus }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">民族：</span>
|
||
<span class="info-value">{{ personalInfo.nationality }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 联系信息 -->
|
||
<div class="info-section">
|
||
<h3 class="section-title">联系信息</h3>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">手机号码：</span>
|
||
<span class="info-value">{{ personalInfo.phone }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">邮箱地址：</span>
|
||
<span class="info-value">{{ personalInfo.email }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">现住址：</span>
|
||
<span class="info-value">{{ personalInfo.address }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">紧急联系人：</span>
|
||
<span class="info-value">{{ personalInfo.emergencyContact }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">紧急联系电话：</span>
|
||
<span class="info-value">{{ personalInfo.emergencyPhone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 工作信息 -->
|
||
<div class="info-section">
|
||
<h3 class="section-title">工作信息</h3>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">员工编号：</span>
|
||
<span class="info-value">{{ personalInfo.employeeId }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">部门：</span>
|
||
<span class="info-value">{{ personalInfo.department }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">职位：</span>
|
||
<span class="info-value">{{ personalInfo.position }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">入职日期：</span>
|
||
<span class="info-value">{{ personalInfo.joinDate }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">工作年限：</span>
|
||
<span class="info-value">{{ personalInfo.workYears }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">直属上级：</span>
|
||
<span class="info-value">{{ personalInfo.supervisor }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 编辑信息弹窗 -->
|
||
<a-modal
|
||
v-model:visible="editModalVisible"
|
||
title="编辑个人信息"
|
||
width="800px"
|
||
@ok="handleSave"
|
||
@cancel="handleCancel"
|
||
>
|
||
<a-form :model="editForm" layout="vertical">
|
||
<div class="form-sections">
|
||
<!-- 基本信息 -->
|
||
<div class="form-section">
|
||
<h4 class="form-section-title">基本信息</h4>
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item label="姓名">
|
||
<a-input v-model="editForm.name" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="性别">
|
||
<a-select v-model="editForm.gender">
|
||
<a-option value="男">男</a-option>
|
||
<a-option value="女">女</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item label="出生日期">
|
||
<a-date-picker v-model="editForm.birthDate" style="width: 100%" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="婚姻状况">
|
||
<a-select v-model="editForm.maritalStatus">
|
||
<a-option value="未婚">未婚</a-option>
|
||
<a-option value="已婚">已婚</a-option>
|
||
<a-option value="离异">离异</a-option>
|
||
<a-option value="丧偶">丧偶</a-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
|
||
<!-- 联系信息 -->
|
||
<div class="form-section">
|
||
<h4 class="form-section-title">联系信息</h4>
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item label="手机号码">
|
||
<a-input v-model="editForm.phone" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="邮箱地址">
|
||
<a-input v-model="editForm.email" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
<a-form-item label="现住址">
|
||
<a-input v-model="editForm.address" />
|
||
</a-form-item>
|
||
<a-row :gutter="20">
|
||
<a-col :span="12">
|
||
<a-form-item label="紧急联系人">
|
||
<a-input v-model="editForm.emergencyContact" />
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="紧急联系电话">
|
||
<a-input v-model="editForm.emergencyPhone" />
|
||
</a-form-item>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</a-form>
|
||
</a-modal>
|
||
</div>
|
||
</GiPageLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive } from 'vue'
|
||
import { Message } from '@arco-design/web-vue'
|
||
import { IconEdit } from '@arco-design/web-vue/es/icon'
|
||
|
||
// 个人信息数据
|
||
const personalInfo = reactive({
|
||
name: '张三',
|
||
gender: '男',
|
||
birthDate: '1990-05-15',
|
||
idCard: '11010219900515****',
|
||
maritalStatus: '已婚',
|
||
nationality: '汉族',
|
||
phone: '138****8888',
|
||
email: 'zhangsan@example.com',
|
||
address: '北京市朝阳区XX街道XX号',
|
||
emergencyContact: '李四',
|
||
emergencyPhone: '139****9999',
|
||
employeeId: 'EMP001',
|
||
department: '技术部',
|
||
position: '高级工程师',
|
||
joinDate: '2020-03-01',
|
||
workYears: '3年8个月',
|
||
supervisor: '王五'
|
||
})
|
||
|
||
// 编辑表单数据
|
||
const editForm = reactive({
|
||
name: '',
|
||
gender: '',
|
||
birthDate: '',
|
||
maritalStatus: '',
|
||
phone: '',
|
||
email: '',
|
||
address: '',
|
||
emergencyContact: '',
|
||
emergencyPhone: ''
|
||
})
|
||
|
||
// 编辑弹窗状态
|
||
const editModalVisible = ref(false)
|
||
|
||
// 编辑信息
|
||
const handleEdit = () => {
|
||
// 复制当前信息到编辑表单
|
||
Object.assign(editForm, {
|
||
name: personalInfo.name,
|
||
gender: personalInfo.gender,
|
||
birthDate: personalInfo.birthDate,
|
||
maritalStatus: personalInfo.maritalStatus,
|
||
phone: personalInfo.phone,
|
||
email: personalInfo.email,
|
||
address: personalInfo.address,
|
||
emergencyContact: personalInfo.emergencyContact,
|
||
emergencyPhone: personalInfo.emergencyPhone
|
||
})
|
||
editModalVisible.value = true
|
||
}
|
||
|
||
// 保存信息
|
||
const handleSave = () => {
|
||
// 更新个人信息
|
||
Object.assign(personalInfo, editForm)
|
||
editModalVisible.value = false
|
||
Message.success('个人信息更新成功')
|
||
}
|
||
|
||
// 取消编辑
|
||
const handleCancel = () => {
|
||
editModalVisible.value = false
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.personal-info-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin: 0;
|
||
}
|
||
|
||
.info-card {
|
||
background: white;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.info-sections {
|
||
padding: 20px;
|
||
}
|
||
|
||
.info-section {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.info-section:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #e5e6eb;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: 600;
|
||
width: 120px;
|
||
flex-shrink: 0;
|
||
color: #1d2129;
|
||
}
|
||
|
||
.info-value {
|
||
color: #4e5969;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.form-sections {
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.form-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.form-section-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #1d2129;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e5e6eb;
|
||
}
|
||
</style> |