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.
1254 lines
36 KiB
1254 lines
36 KiB
<!--个人资料详情页面-->
|
|
<template>
|
|
<view class="personal-info-container">
|
|
<!-- 自定义导航栏 -->
|
|
<uni-nav-bar
|
|
:statusBar="true"
|
|
backgroundColor="#181A20"
|
|
color="#fff"
|
|
title="个人资料"
|
|
:leftIcon="true"
|
|
@clickLeft="goBack"
|
|
/>
|
|
|
|
<!-- 页面内容 -->
|
|
<view class="content-wrapper">
|
|
<scroll-view scroll-y class="scroll-container">
|
|
|
|
<!-- 头像区域 -->
|
|
<view class="avatar-section">
|
|
<view class="avatar-container" @click="handleAvatarUpload">
|
|
<image
|
|
:src="formData.head_img || $util.img('/static/icon-img/tou.png')"
|
|
mode="aspectFill"
|
|
class="avatar-image"
|
|
/>
|
|
<view class="avatar-overlay">
|
|
<uni-icons type="camera" size="24" color="#fff"></uni-icons>
|
|
<text class="avatar-text">点击更换头像</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 基本信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">基本信息</view>
|
|
<view class="form-content">
|
|
|
|
<!-- 姓名 -->
|
|
<view class="form-item">
|
|
<text class="form-label">姓名</text>
|
|
<input
|
|
v-model="formData.name"
|
|
class="form-input"
|
|
placeholder="请输入姓名"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 员工编号（只读） -->
|
|
<view class="form-item">
|
|
<text class="form-label">员工编号</text>
|
|
<input
|
|
v-model="formData.employee_number"
|
|
class="form-input readonly"
|
|
placeholder="暂无编号"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="form-item">
|
|
<text class="form-label">性别</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="genderOptions"
|
|
range-key="label"
|
|
:value="genderIndex"
|
|
@change="handleGenderChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ genderOptions[genderIndex]?.label || '请选择性别' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="genderOptions[genderIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 生日 -->
|
|
<view class="form-item">
|
|
<text class="form-label">生日</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="formData.birthday"
|
|
@change="handleDateChange('birthday', $event)"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ formData.birthday || '请选择生日' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="formData.birthday || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 手机号 -->
|
|
<view class="form-item">
|
|
<text class="form-label">手机号</text>
|
|
<input
|
|
v-model="formData.phone"
|
|
class="form-input"
|
|
placeholder="请输入手机号"
|
|
type="number"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 邮箱 -->
|
|
<view class="form-item">
|
|
<text class="form-label">邮箱</text>
|
|
<input
|
|
v-model="formData.email"
|
|
class="form-input"
|
|
placeholder="请输入邮箱"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 微信号 -->
|
|
<view class="form-item">
|
|
<text class="form-label">微信号</text>
|
|
<input
|
|
v-model="formData.wx"
|
|
class="form-input"
|
|
placeholder="请输入微信号"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 联系信息 -->
|
|
<view class="info-section">
|
|
<view class="section-title">联系信息</view>
|
|
<view class="form-content">
|
|
|
|
<!-- 家庭住址 -->
|
|
<view class="form-item">
|
|
<text class="form-label">家庭住址</text>
|
|
<textarea
|
|
v-model="formData.address"
|
|
class="form-textarea"
|
|
placeholder="请输入家庭住址"
|
|
:disabled="!isEditing"
|
|
maxlength="200"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 祖籍 -->
|
|
<view class="form-item">
|
|
<text class="form-label">祖籍</text>
|
|
<input
|
|
v-model="formData.native_place"
|
|
class="form-input"
|
|
placeholder="请输入祖籍"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 应急联系人电话 -->
|
|
<view class="form-item">
|
|
<text class="form-label">应急联系人电话</text>
|
|
<input
|
|
v-model="formData.emergency_contact_phone"
|
|
class="form-input"
|
|
placeholder="请输入应急联系人电话"
|
|
type="number"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 教育背景 -->
|
|
<view class="info-section">
|
|
<view class="section-title">教育背景</view>
|
|
<view class="form-content">
|
|
|
|
<!-- 学历 -->
|
|
<view class="form-item">
|
|
<text class="form-label">学历</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="educationOptions"
|
|
range-key="label"
|
|
:value="educationIndex"
|
|
@change="handleEducationChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ educationOptions[educationIndex]?.label || '请选择学历' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="educationOptions[educationIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 个人简介 -->
|
|
<view class="form-item">
|
|
<text class="form-label">个人简介</text>
|
|
<textarea
|
|
v-model="formData.profile"
|
|
class="form-textarea"
|
|
placeholder="请输入个人简介"
|
|
:disabled="!isEditing"
|
|
maxlength="500"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证件 -->
|
|
<view class="info-section">
|
|
<view class="section-title">身份证件</view>
|
|
<view class="form-content">
|
|
|
|
<!-- 身份证正面 -->
|
|
<view class="form-item">
|
|
<text class="form-label">身份证正面</text>
|
|
<view class="image-upload-container">
|
|
<view
|
|
class="image-upload-item"
|
|
@click="handleIdCardUpload('front')"
|
|
:class="{ 'disabled': !isEditing }"
|
|
>
|
|
<image
|
|
v-if="formData.id_card_front"
|
|
:src="$util.img(formData.id_card_front)"
|
|
mode="aspectFill"
|
|
class="uploaded-image"
|
|
/>
|
|
<view v-else class="upload-placeholder">
|
|
<uni-icons type="camera" size="32" color="#666"></uni-icons>
|
|
<text>点击上传身份证正面</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 身份证反面 -->
|
|
<view class="form-item">
|
|
<text class="form-label">身份证反面</text>
|
|
<view class="image-upload-container">
|
|
<view
|
|
class="image-upload-item"
|
|
@click="handleIdCardUpload('back')"
|
|
:class="{ 'disabled': !isEditing }"
|
|
>
|
|
<image
|
|
v-if="formData.id_card_back"
|
|
:src="$util.img(formData.id_card_back)"
|
|
mode="aspectFill"
|
|
class="uploaded-image"
|
|
/>
|
|
<view v-else class="upload-placeholder">
|
|
<uni-icons type="camera" size="32" color="#666"></uni-icons>
|
|
<text>点击上传身份证反面</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 详细信息 -->
|
|
<view class="info-section" v-if="personnelInfo">
|
|
<view class="section-title">详细信息</view>
|
|
<view class="form-content">
|
|
|
|
<!-- 花名 -->
|
|
<view class="form-item">
|
|
<text class="form-label">花名</text>
|
|
<input
|
|
v-model="personnelInfo.name"
|
|
class="form-input"
|
|
placeholder="请输入花名"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 门店 -->
|
|
<view class="form-item">
|
|
<text class="form-label">门店</text>
|
|
<input
|
|
v-model="personnelInfo.store"
|
|
class="form-input"
|
|
placeholder="请输入门店"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 民族 -->
|
|
<view class="form-item">
|
|
<text class="form-label">民族</text>
|
|
<input
|
|
v-model="personnelInfo.ethnicity"
|
|
class="form-input"
|
|
placeholder="请输入民族"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 司龄（只读） -->
|
|
<view class="form-item">
|
|
<text class="form-label">司龄</text>
|
|
<input
|
|
v-model="personnelInfo.tenure"
|
|
class="form-input readonly"
|
|
placeholder="自动计算"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 转正时间 -->
|
|
<view class="form-item">
|
|
<text class="form-label">转正时间</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="personnelInfo.regular_date"
|
|
@change="handleDateChange('regular_date', $event)"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ personnelInfo.regular_date || '请选择转正时间' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="personnelInfo.regular_date || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 是否转正 -->
|
|
<view class="form-item">
|
|
<text class="form-label">是否转正</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="regularOptions"
|
|
range-key="label"
|
|
:value="regularIndex"
|
|
@change="handleRegularChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ regularOptions[regularIndex]?.label || '请选择是否转正' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="regularOptions[regularIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 政治面貌 -->
|
|
<view class="form-item">
|
|
<text class="form-label">政治面貌</text>
|
|
<input
|
|
v-model="personnelInfo.politics"
|
|
class="form-input"
|
|
placeholder="请输入政治面貌"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 毕业院校 -->
|
|
<view class="form-item">
|
|
<text class="form-label">毕业院校</text>
|
|
<input
|
|
v-model="personnelInfo.university"
|
|
class="form-input"
|
|
placeholder="请输入毕业院校"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 专业 -->
|
|
<view class="form-item">
|
|
<text class="form-label">专业</text>
|
|
<input
|
|
v-model="personnelInfo.major"
|
|
class="form-input"
|
|
placeholder="请输入专业"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 毕业时间 -->
|
|
<view class="form-item">
|
|
<text class="form-label">毕业时间</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="personnelInfo.graduation_date"
|
|
@change="handleDateChange('graduation_date', $event)"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ personnelInfo.graduation_date || '请选择毕业时间' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="personnelInfo.graduation_date || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 户籍所在地 -->
|
|
<view class="form-item">
|
|
<text class="form-label">户籍所在地</text>
|
|
<input
|
|
v-model="personnelInfo.household_place"
|
|
class="form-input"
|
|
placeholder="请输入户籍所在地"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 户籍类型 -->
|
|
<view class="form-item">
|
|
<text class="form-label">户籍类型</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="householdTypeOptions"
|
|
range-key="label"
|
|
:value="householdTypeIndex"
|
|
@change="handleHouseholdTypeChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ householdTypeOptions[householdTypeIndex]?.label || '请选择户籍类型' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="householdTypeOptions[householdTypeIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 户籍地址 -->
|
|
<view class="form-item">
|
|
<text class="form-label">户籍地址</text>
|
|
<textarea
|
|
v-model="personnelInfo.household_address"
|
|
class="form-textarea"
|
|
placeholder="请输入户籍地址"
|
|
:disabled="!isEditing"
|
|
maxlength="200"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 现居地址 -->
|
|
<view class="form-item">
|
|
<text class="form-label">现居地址</text>
|
|
<textarea
|
|
v-model="personnelInfo.current_address"
|
|
class="form-textarea"
|
|
placeholder="请输入现居地址"
|
|
:disabled="!isEditing"
|
|
maxlength="200"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 紧急联系人 -->
|
|
<view class="form-item">
|
|
<text class="form-label">紧急联系人</text>
|
|
<input
|
|
v-model="personnelInfo.emergency_contact"
|
|
class="form-input"
|
|
placeholder="请输入紧急联系人姓名"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 紧急联系人电话 -->
|
|
<view class="form-item">
|
|
<text class="form-label">紧急联系人电话</text>
|
|
<input
|
|
v-model="personnelInfo.emergency_phone"
|
|
class="form-input"
|
|
placeholder="请输入紧急联系人电话"
|
|
type="number"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 婚姻状况 -->
|
|
<view class="form-item">
|
|
<text class="form-label">婚姻状况</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="maritalOptions"
|
|
range-key="label"
|
|
:value="maritalIndex"
|
|
@change="handleMaritalChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ maritalOptions[maritalIndex]?.label || '请选择婚姻状况' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="maritalOptions[maritalIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 银行卡号 -->
|
|
<view class="form-item">
|
|
<text class="form-label">银行卡号</text>
|
|
<input
|
|
v-model="personnelInfo.bank_card"
|
|
class="form-input"
|
|
placeholder="请输入银行卡号"
|
|
type="number"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 开户行 -->
|
|
<view class="form-item">
|
|
<text class="form-label">开户行</text>
|
|
<input
|
|
v-model="personnelInfo.bank_name"
|
|
class="form-input"
|
|
placeholder="请输入开户行"
|
|
:disabled="!isEditing"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 合同到期时间 -->
|
|
<view class="form-item">
|
|
<text class="form-label">合同到期时间</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="date"
|
|
:value="personnelInfo.contract_expire"
|
|
@change="handleDateChange('contract_expire', $event)"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ personnelInfo.contract_expire || '请选择合同到期时间' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="personnelInfo.contract_expire || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 是否复聘 -->
|
|
<view class="form-item">
|
|
<text class="form-label">是否复聘</text>
|
|
<picker
|
|
v-if="isEditing"
|
|
mode="selector"
|
|
:range="rehiredOptions"
|
|
range-key="label"
|
|
:value="rehiredIndex"
|
|
@change="handleRehiredChange"
|
|
class="form-picker"
|
|
>
|
|
<view class="picker-content">
|
|
{{ rehiredOptions[rehiredIndex]?.label || '请选择是否复聘' }}
|
|
<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<input
|
|
v-else
|
|
:value="rehiredOptions[rehiredIndex]?.label || '未设置'"
|
|
class="form-input readonly"
|
|
disabled
|
|
/>
|
|
</view>
|
|
|
|
<!-- 备注 -->
|
|
<view class="form-item">
|
|
<text class="form-label">备注</text>
|
|
<textarea
|
|
v-model="personnelInfo.remark"
|
|
class="form-textarea"
|
|
placeholder="请输入备注信息"
|
|
:disabled="!isEditing"
|
|
maxlength="500"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<view class="bottom-actions">
|
|
<view v-if="!isEditing" class="action-btn edit-btn" @click="startEdit">
|
|
编辑资料
|
|
</view>
|
|
<template v-else>
|
|
<view class="action-btn cancel-btn" @click="cancelEdit">
|
|
取消
|
|
</view>
|
|
<view class="action-btn save-btn" @click="saveData">
|
|
保存
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js'
|
|
|
|
export default {
|
|
name: 'PersonalInfo',
|
|
data() {
|
|
return {
|
|
isEditing: false,
|
|
loading: false,
|
|
|
|
// 基本信息数据
|
|
formData: {
|
|
id: null,
|
|
name: '',
|
|
head_img: '',
|
|
gender: 0,
|
|
birthday: '',
|
|
phone: '',
|
|
email: '',
|
|
wx: '',
|
|
address: '',
|
|
native_place: '',
|
|
education: '',
|
|
profile: '',
|
|
emergency_contact_phone: '',
|
|
id_card_front: '',
|
|
id_card_back: '',
|
|
employee_number: ''
|
|
},
|
|
|
|
// 详细信息数据
|
|
personnelInfo: null,
|
|
|
|
// 备份数据（用于取消编辑时恢复）
|
|
originalData: {},
|
|
originalPersonnelInfo: {},
|
|
|
|
// 选择器选项
|
|
genderOptions: [
|
|
{ label: '未设置', value: 0 },
|
|
{ label: '男', value: 1 },
|
|
{ label: '女', value: 2 }
|
|
],
|
|
|
|
educationOptions: [
|
|
{ label: '未设置', value: '' },
|
|
{ label: '小学', value: '小学' },
|
|
{ label: '初中', value: '初中' },
|
|
{ label: '高中', value: '高中' },
|
|
{ label: '中专', value: '中专' },
|
|
{ label: '大专', value: '大专' },
|
|
{ label: '本科', value: '本科' },
|
|
{ label: '硕士', value: '硕士' },
|
|
{ label: '博士', value: '博士' }
|
|
],
|
|
|
|
regularOptions: [
|
|
{ label: '未设置', value: '' },
|
|
{ label: '是', value: '是' },
|
|
{ label: '否', value: '否' }
|
|
],
|
|
|
|
householdTypeOptions: [
|
|
{ label: '未设置', value: '' },
|
|
{ label: '城镇户口', value: '城镇户口' },
|
|
{ label: '农村户口', value: '农村户口' }
|
|
],
|
|
|
|
maritalOptions: [
|
|
{ label: '未设置', value: '' },
|
|
{ label: '未婚', value: '未婚' },
|
|
{ label: '已婚', value: '已婚' },
|
|
{ label: '离异', value: '离异' },
|
|
{ label: '丧偶', value: '丧偶' }
|
|
],
|
|
|
|
rehiredOptions: [
|
|
{ label: '未设置', value: '' },
|
|
{ label: '是', value: '是' },
|
|
{ label: '否', value: '否' }
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
// 性别选择器当前索引
|
|
genderIndex() {
|
|
return this.genderOptions.findIndex(item => item.value === this.formData.gender) || 0
|
|
},
|
|
|
|
// 学历选择器当前索引
|
|
educationIndex() {
|
|
return this.educationOptions.findIndex(item => item.value === this.formData.education) || 0
|
|
},
|
|
|
|
// 是否转正选择器当前索引
|
|
regularIndex() {
|
|
return this.regularOptions.findIndex(item => item.value === this.personnelInfo?.is_regular) || 0
|
|
},
|
|
|
|
// 户籍类型选择器当前索引
|
|
householdTypeIndex() {
|
|
return this.householdTypeOptions.findIndex(item => item.value === this.personnelInfo?.household_type) || 0
|
|
},
|
|
|
|
// 婚姻状况选择器当前索引
|
|
maritalIndex() {
|
|
return this.maritalOptions.findIndex(item => item.value === this.personnelInfo?.marital_status) || 0
|
|
},
|
|
|
|
// 是否复聘选择器当前索引
|
|
rehiredIndex() {
|
|
return this.rehiredOptions.findIndex(item => item.value === this.personnelInfo?.is_rehired) || 0
|
|
}
|
|
},
|
|
|
|
onLoad() {
|
|
this.loadData()
|
|
},
|
|
|
|
methods: {
|
|
// 返回上一页
|
|
goBack() {
|
|
if (this.isEditing) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '正在编辑中，确定要返回吗？未保存的修改将丢失。',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
})
|
|
} else {
|
|
uni.navigateBack()
|
|
}
|
|
},
|
|
|
|
// 加载数据
|
|
async loadData() {
|
|
try {
|
|
uni.showLoading({ title: '加载中...' })
|
|
|
|
// 从本地存储获取用户ID
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (!userInfo || !userInfo.id) {
|
|
uni.showToast({ title: '用户信息异常', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
// 获取基本信息
|
|
const personnelRes = await apiRoute.getPersonnelInfo({ id: userInfo.id })
|
|
if (personnelRes.code === 1 && personnelRes.data) {
|
|
this.formData = {
|
|
...this.formData,
|
|
...personnelRes.data
|
|
}
|
|
}
|
|
|
|
// 获取详细信息
|
|
const infoRes = await apiRoute.getPersonnelDetailInfo({ person_id: userInfo.id })
|
|
if (infoRes.code === 1 && infoRes.data) {
|
|
this.personnelInfo = infoRes.data
|
|
} else {
|
|
// 如果没有详细信息，创建默认对象
|
|
this.personnelInfo = {
|
|
person_id: userInfo.id,
|
|
name: '',
|
|
store: '',
|
|
ethnicity: '',
|
|
age: null,
|
|
tenure: '',
|
|
regular_date: '',
|
|
is_regular: '',
|
|
politics: '',
|
|
university: '',
|
|
major: '',
|
|
graduation_date: '',
|
|
household_place: '',
|
|
household_type: '',
|
|
household_address: '',
|
|
current_address: '',
|
|
emergency_contact: '',
|
|
emergency_phone: '',
|
|
marital_status: '',
|
|
bank_card: '',
|
|
bank_name: '',
|
|
contract_expire: '',
|
|
is_rehired: '',
|
|
remark: ''
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('加载个人资料失败:', error)
|
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
// 开始编辑
|
|
startEdit() {
|
|
this.isEditing = true
|
|
// 备份原始数据
|
|
this.originalData = JSON.parse(JSON.stringify(this.formData))
|
|
this.originalPersonnelInfo = JSON.parse(JSON.stringify(this.personnelInfo))
|
|
},
|
|
|
|
// 取消编辑
|
|
cancelEdit() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要取消编辑吗？未保存的修改将丢失。',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
// 恢复原始数据
|
|
this.formData = JSON.parse(JSON.stringify(this.originalData))
|
|
this.personnelInfo = JSON.parse(JSON.stringify(this.originalPersonnelInfo))
|
|
this.isEditing = false
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 保存数据
|
|
async saveData() {
|
|
try {
|
|
// 表单验证
|
|
if (!this.formData.name.trim()) {
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '保存中...' })
|
|
|
|
// 保存基本信息
|
|
const personnelRes = await apiRoute.updatePersonnelInfo(this.formData)
|
|
if (personnelRes.code !== 1) {
|
|
throw new Error(personnelRes.msg || '保存基本信息失败')
|
|
}
|
|
|
|
// 保存详细信息
|
|
if (this.personnelInfo) {
|
|
const infoRes = await apiRoute.updatePersonnelDetailInfo(this.personnelInfo)
|
|
if (infoRes.code !== 1) {
|
|
throw new Error(infoRes.msg || '保存详细信息失败')
|
|
}
|
|
}
|
|
|
|
uni.showToast({ title: '保存成功', icon: 'success' })
|
|
this.isEditing = false
|
|
|
|
// 更新本地用户信息
|
|
const userInfo = uni.getStorageSync('userInfo') || {}
|
|
Object.assign(userInfo, {
|
|
name: this.formData.name,
|
|
avatar: this.formData.head_img,
|
|
phone: this.formData.phone
|
|
})
|
|
uni.setStorageSync('userInfo', userInfo)
|
|
|
|
} catch (error) {
|
|
console.error('保存个人资料失败:', error)
|
|
uni.showToast({ title: error.message || '保存失败', icon: 'none' })
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
// 处理头像上传
|
|
handleAvatarUpload() {
|
|
if (!this.isEditing) return
|
|
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.uploadImage(res.tempFilePaths[0], (fileData) => {
|
|
this.formData.head_img = fileData.url
|
|
uni.showToast({ title: '头像上传成功', icon: 'success' })
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 处理身份证上传
|
|
handleIdCardUpload(type) {
|
|
if (!this.isEditing) return
|
|
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
this.uploadImage(res.tempFilePaths[0], (fileData) => {
|
|
if (type === 'front') {
|
|
this.formData.id_card_front = fileData.url
|
|
} else {
|
|
this.formData.id_card_back = fileData.url
|
|
}
|
|
uni.showToast({ title: '身份证上传成功', icon: 'success' })
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 上传图片通用方法
|
|
uploadImage(filePath, successCallback) {
|
|
this.$util.uploadFile(
|
|
filePath,
|
|
successCallback,
|
|
(error) => {
|
|
console.error('图片上传失败:', error)
|
|
uni.showToast({ title: '图片上传失败', icon: 'none' })
|
|
}
|
|
)
|
|
},
|
|
|
|
// 处理性别变化
|
|
handleGenderChange(e) {
|
|
this.formData.gender = this.genderOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理学历变化
|
|
handleEducationChange(e) {
|
|
this.formData.education = this.educationOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理是否转正变化
|
|
handleRegularChange(e) {
|
|
this.personnelInfo.is_regular = this.regularOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理户籍类型变化
|
|
handleHouseholdTypeChange(e) {
|
|
this.personnelInfo.household_type = this.householdTypeOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理婚姻状况变化
|
|
handleMaritalChange(e) {
|
|
this.personnelInfo.marital_status = this.maritalOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理是否复聘变化
|
|
handleRehiredChange(e) {
|
|
this.personnelInfo.is_rehired = this.rehiredOptions[e.detail.value].value
|
|
},
|
|
|
|
// 处理日期变化
|
|
handleDateChange(field, e) {
|
|
const date = e.detail.value
|
|
if (this.personnelInfo && ['regular_date', 'graduation_date', 'contract_expire'].includes(field)) {
|
|
this.personnelInfo[field] = date
|
|
} else {
|
|
this.formData[field] = date
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.personal-info-container {
|
|
background-color: #181A20;
|
|
min-height: 100vh;
|
|
color: #fff;
|
|
}
|
|
|
|
.content-wrapper {
|
|
height: calc(100vh - 44px - 120rpx); // 减去导航栏和底部按钮高度
|
|
}
|
|
|
|
.scroll-container {
|
|
height: 100%;
|
|
padding: 0 30rpx 40rpx;
|
|
}
|
|
|
|
/* 头像区域 */
|
|
.avatar-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 60rpx 0;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 4rpx solid #29d3b4;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.avatar-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.avatar-container:active .avatar-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.avatar-text {
|
|
font-size: 20rpx;
|
|
color: #fff;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
/* 信息区域 */
|
|
.info-section {
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #29d3b4;
|
|
margin-bottom: 30rpx;
|
|
padding-bottom: 15rpx;
|
|
border-bottom: 2rpx solid #29d3b4;
|
|
}
|
|
|
|
.form-content {
|
|
background-color: #292929;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 40rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
.form-input, .form-textarea {
|
|
width: 100%;
|
|
background-color: #3a3a3a;
|
|
border: 2rpx solid #444;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
|
|
&:focus {
|
|
border-color: #29d3b4;
|
|
outline: none;
|
|
}
|
|
|
|
&.readonly {
|
|
background-color: #2a2a2a;
|
|
color: #666;
|
|
border-color: #333;
|
|
}
|
|
|
|
&:disabled {
|
|
background-color: #2a2a2a;
|
|
color: #666;
|
|
border-color: #333;
|
|
}
|
|
}
|
|
|
|
.form-textarea {
|
|
min-height: 120rpx;
|
|
resize: none;
|
|
}
|
|
|
|
/* 选择器样式 */
|
|
.form-picker {
|
|
width: 100%;
|
|
}
|
|
|
|
.picker-content {
|
|
background-color: #3a3a3a;
|
|
border: 2rpx solid #444;
|
|
border-radius: 12rpx;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 图片上传样式 */
|
|
.image-upload-container {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.image-upload-item {
|
|
width: 200rpx;
|
|
height: 120rpx;
|
|
border: 2rpx dashed #666;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #3a3a3a;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active:not(.disabled) {
|
|
border-color: #29d3b4;
|
|
background-color: rgba(41, 211, 180, 0.1);
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.uploaded-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.upload-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #666;
|
|
|
|
text {
|
|
font-size: 20rpx;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
/* 底部操作按钮 */
|
|
.bottom-actions {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #181A20;
|
|
padding: 30rpx;
|
|
border-top: 2rpx solid #333;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
.action-btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
}
|
|
|
|
.edit-btn {
|
|
background-color: #29d3b4;
|
|
color: #fff;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #666;
|
|
color: #fff;
|
|
}
|
|
|
|
.save-btn {
|
|
background-color: #29d3b4;
|
|
color: #fff;
|
|
}
|
|
</style>
|