Industrial-image-management-system---web/src/views/hr/salary/insurance/personal-info/index.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>