Skip to content

H
hr-mobile-view
Commit bbd619d0 authored by 刘斌's avatar 刘斌
Browse files
Options

fix: 修改个人履历和家庭成员的布局样式

parent 0456d616
Show whitespace changes
Inline Side-by-side
Showing with 288 additions and 104 deletions
src/App.vue
View file @ bbd619d0
......@@ -74,8 +74,8 @@
>
<template #input>
<van-radio-group v-model="form.maritalStatus" direction="horizontal">
<van-radio name="1">已婚</van-radio>
<van-radio name="2">未婚</van-radio>
<van-radio name="1">已婚</van-radio>
<van-radio name="3">离异</van-radio>
</van-radio-group>
</template>
......@@ -145,7 +145,7 @@
:rules="[{ required: true, message: '请输入家庭地址' }]"
>
<template #extra>
<div class="extra">例如：**市**区**街道**小区*号楼*单位*0*（具体到门牌号，写现居住地址)</div>
<div class="extra">例如：**市**区**街道**小区*号楼*单元*0*（具体到门牌号，写现居住地址)</div>
</template>
</van-field>
<van-field
......@@ -260,117 +260,151 @@
/>
</van-cell-group>
<van-cell-group inset>
<van-cell-group inset style="background: transparent; padding: 0;">
<template #title>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
<span>外部个人履历</span>
<span style="font-size: 12px; color: #969799; font-weight: normal;">滑动填写更多<van-icon name="arrow-double-right" /></span>
</div>
</template>
<div class="resume-table" v-if="form.externalResumeItems.length">
<div class="resume-row resume-header">
<div>开始年月</div>
<div>结束年月</div>
<div>单位名称</div>
<div>职务</div>
<div>操作</div>
</div>
<div class="resume-row" v-for="(item, i) in form.externalResumeItems" :key="i">
<div>
<div class="resume-list">
<div class="resume-card" v-for="(item, i) in form.externalResumeItems" :key="i">
<div class="resume-card-header">
<span class="index-badge">{{ i + 1 }}</span> 编辑履历
</div>
<div class="form-item">
<div class="item-label">单位名称<span style="color: #ee0a24">*</span></div>
<van-field
v-model="item.startDate"
placeholder="开始年月"
readonly
is-link
@click="onResumeStartClick(i)"
v-model="item.company"
class="custom-input"
placeholder="请输入单位名称"
:border="false"
/>
</div>
<div>
<div class="form-item">
<div class="item-label">担任职务<span style="color: #ee0a24">*</span></div>
<van-field
v-model="item.endDate"
placeholder="结束年月"
readonly
is-link
@click="onResumeEndClick(i)"
v-model="item.position"
class="custom-input"
placeholder="请输入担任职务"
:border="false"
/>
</div>
<div>
<van-field v-model="item.company" placeholder="单位名称" />
<div class="form-row-2col">
<div class="form-col">
<div class="item-label">开始年月<span style="color: #ee0a24">*</span></div>
<div class="date-input-box" @click="onResumeStartClick(i)">
<span>{{ item.startDate || '请选择' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
</div>
<div>
<van-field v-model="item.position" placeholder="职务" />
<div class="form-col">
<div class="item-label">结束年月<span style="color: #ee0a24">*</span></div>
<div class="date-input-box" @click="onResumeEndClick(i)">
<span>{{ item.endDate || '请选择' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
<div>
<van-button size="small" type="danger" plain @click="removeResumeItem(i)">删除</van-button>
</div>
</div>
<div class="delete-btn-wrapper">
<van-button
block
color="#feecec"
style="color: #ee0a24; border: none;"
icon="delete-o"
@click="removeResumeItem(i)"
>
删除这段履历
</van-button>
</div>
<div class="resume-actions">
<van-button block type="success" icon="newspaper" @click="addResumeItem">新增履历</van-button>
</div>
</div>
<div class="resume-actions" style="margin-top: 12px;">
<van-button block type="primary" plain icon="newspaper-o" @click="addResumeItem">新增履历</van-button>
</div>
</van-cell-group>
<van-cell-group inset>
<van-cell-group inset style="background: transparent; padding: 0;">
<template #title>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>家庭主要成员</span>
<span style="font-size: 12px; color: #969799; font-weight: normal;">滑动填写更多<van-icon name="arrow-double-right" /></span>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
<span style="font-size: 16px; font-weight: 600; color: #323233;">家庭主要成员</span>
</div>
</template>
<div class="family-table" v-if="form.familyMembers.length">
<div class="family-row family-header">
<div>关系</div>
<div>姓名</div>
<div>出生年月</div>
<div>工作单位职务</div>
<div>联系方式</div>
<div>紧急联系人</div>
<div>操作</div>
</div>
<div
class="family-row"
v-for="(fm, i) in form.familyMembers"
:key="i"
>
<div>
<van-field
v-model="fm.relation"
placeholder="请选择关系"
readonly
is-link
@click="onFamilyRelationClick(i)"
/>
<div class="family-list">
<div class="family-card" v-for="(fm, i) in form.familyMembers" :key="i">
<!-- Header -->
<div class="family-card-header">
<div class="avatar-wrapper">
<div class="avatar">{{ fm.relation ? fm.relation.charAt(0) : '无' }}</div>
<span class="name">{{ fm.name || '姓名' }}</span>
</div>
<div>
<van-field v-model="fm.name" placeholder="姓名" />
<van-icon name="delete-o" size="20" color="#969799" @click="removeFamilyMember(i)" />
</div>
<div>
<van-field
v-model="fm.birthDate"
placeholder="请选择"
is-link
readonly
@click="onFamilyBirthClick(i)"
/>
<!-- Row 1 -->
<div class="form-row-2col">
<div class="form-col">
<div class="item-label">关系 <span style="color: #ee0a24">*</span></div>
<div class="custom-input dropdown-input" @click="onFamilyRelationClick(i)">
<span style="color: #323233">{{ fm.relation || '请选择' }}</span>
<van-icon name="arrow-down" color="#969799" size="12" />
</div>
<div>
<van-field v-model="fm.companyAndJob" placeholder="单位与职务" />
</div>
<div>
<van-field v-model="fm.contact" type="tel" placeholder="手机号" />
<div class="form-col">
<div class="item-label">姓名 <span style="color: #ee0a24">*</span></div>
<div class="custom-input">
<input v-model="fm.name" placeholder="姓名" class="native-input" />
</div>
<div>
<van-radio-group v-model="form.familyEmergencyIndex">
<van-radio :name="i">是</van-radio>
</van-radio-group>
</div>
<div>
<van-button size="small" type="danger" plain @click="removeFamilyMember(i)">删除</van-button>
</div>
<!-- Row 2 -->
<div class="form-item">
<div class="item-label">出生年月</div>
<div class="date-input-box" @click="onFamilyBirthClick(i)">
<span>{{ fm.birthDate || 'YYYY-MM-DD' }}</span>
<van-icon name="calendar-o" color="#969799" />
</div>
</div>
<!-- Row 3 -->
<div class="form-item">
<div class="item-label">工作单位及职务</div>
<div class="custom-input">
<input v-model="fm.companyAndJob" placeholder="单位与职务" class="native-input" />
</div>
</div>
<div class="family-actions">
<van-button block type="success" icon="friends" @click="addFamilyMember">新增家庭成员</van-button>
<!-- Row 4 -->
<div class="form-item">
<div class="item-label">联系方式</div>
<div class="custom-input">
<input v-model="fm.contact" type="tel" placeholder="手机号" class="native-input" />
</div>
</div>
<!-- Row 5 -->
<div class="emergency-row">
<div class="emergency-text">
<div class="e-title">设为紧急联系人</div>
<div class="e-desc">该成员将作为主要紧急联系对象</div>
</div>
<van-switch
:model-value="form.familyEmergencyIndex === i"
@update:model-value="(val) => { if(val) form.familyEmergencyIndex = i; }"
size="24px"
active-color="#1989fa"
/>
</div>
</div>
</div>
<div class="family-actions" style="margin-top: 16px;">
<van-button block type="success" plain icon="friends-o" @click="addFamilyMember">新增家庭成员</van-button>
</div>
</van-cell-group>
......@@ -823,6 +857,15 @@ async function onSubmit() {
externalResumeValue += `${item.startDate}-${item.endDate} 在${item.company}担任${item.position}职务；\n`;
}
}
if (form.familyMembers && form.familyMembers.length > 0) {
for (const item of form.familyMembers) {
if (!item.name || !item.relation) {
showFailToast('家庭成员信息不全！');
submitting.value = false;
return;
}
}
}
const payload = {
name: form.name,
phoneNumber: form.phoneNumber,
......@@ -932,29 +975,170 @@ void [phoneRules, idRules];
padding-left: 4px;
}
.family-table {
overflow-x: auto;
margin-bottom: 8px;
.family-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.family-card {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid #ebedf0;
}
.family-row {
display: grid;
grid-template-columns: 88px 90px 128px 160px 110px 100px 50px;
gap: 8px;
.family-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.avatar-wrapper {
display: flex;
align-items: center;
gap: 12px;
}
.avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #eef2ff;
color: #1989fa;
display: flex;
align-items: center;
padding: 6px 0;
justify-content: center;
font-weight: 600;
font-size: 16px;
}
.name {
font-size: 16px;
font-weight: 500;
color: #323233;
}
.native-input {
width: 100%;
border: none;
background: transparent;
outline: none;
padding: 0;
margin: 0;
font-size: 14px;
color: #323233;
}
.family-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
.resume-table {
overflow-x: auto;
.dropdown-input {
display: flex;
justify-content: space-between;
align-items: center;
}
.emergency-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #f5f6f7;
}
.emergency-text {
display: flex;
flex-direction: column;
}
.e-title {
font-size: 14px;
font-weight: 500;
color: #323233;
margin-bottom: 4px;
}
.e-desc {
font-size: 12px;
color: #969799;
}
.resume-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.resume-card {
background: #fff;
border-radius: 12px;
padding: 16px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
border: 1px solid #ebedf0;
}
.resume-card-header {
font-size: 16px;
font-weight: 600;
color: #323233;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.index-badge {
display: inline-flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #eef2ff;
color: #4b7aff;
font-size: 12px;
margin-right: 8px;
font-weight: bold;
}
.form-item {
margin-bottom: 16px;
}
.item-label {
font-size: 14px;
color: #646566;
margin-bottom: 8px;
}
.resume-row {
display: grid;
grid-template-columns: 110px 110px 160px 120px 60px;
gap: 8px;
.custom-input {
background-color: #f7f8fa;
border-radius: 8px;
padding: 10px 12px;
}
.form-row-2col {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.form-col {
flex: 1;
}
.date-input-box {
background-color: #f7f8fa;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: #323233;
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
}
.resume-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
.delete-btn-wrapper {
margin-top: 20px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment