Skip to content

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

feat: 增加家庭成员

parent ba661454
Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 25 deletions
src/App.vue
View file @ ff2c9819
......@@ -9,6 +9,14 @@
placeholder="请输入姓名"
:rules="[{ required: true, message: '请填写姓名' }]"
/>
<van-field
v-model="form.phoneNumber"
name="phoneNumber"
type="tel"
label="手机号码"
placeholder="请输入手机号码"
:rules="phoneRules"
/>
<van-field
v-model="form.gender"
name="gender"
......@@ -102,16 +110,9 @@
/>
</van-cell-group>
<van-cell-group inset title="联系信息">
<van-field
v-model="form.phoneNumber"
name="phoneNumber"
type="tel"
label="手机号码"
placeholder="请输入手机号码"
:rules="phoneRules"
/>
<van-field
<!-- <van-cell-group inset title="联系信息"> -->
<!-- <van-field
v-model="form.emergencyContact"
name="emergencyContact"
label="紧急联系人"
......@@ -129,8 +130,8 @@
label="紧急联系人电话"
placeholder="请输入紧急联系人电话"
:rules="phoneRules"
/>
</van-cell-group>
/> -->
<!-- </van-cell-group> -->
<van-cell-group inset title="地址信息">
<van-field
......@@ -275,6 +276,65 @@
</van-field>
</van-cell-group>
<van-cell-group inset title="家庭主要成员">
<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>
<div>
<van-field v-model="fm.name" placeholder="姓名" />
</div>
<div>
<van-field
v-model="fm.birthDate"
placeholder="请选择"
is-link
readonly
@click="onFamilyBirthClick(i)"
/>
</div>
<div>
<van-field v-model="fm.companyAndJob" placeholder="单位与职务" />
</div>
<div>
<van-field v-model="fm.contact" type="tel" placeholder="手机号" />
</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>
</div>
</div>
</van-cell-group>
<div class="family-actions">
<van-button block type="primary" size="small" plain @click="addFamilyMember">新增家庭成员</van-button>
</div>
<div class="actions">
<van-button round block type="primary" :loading="submitting" native-type="submit">提交</van-button>
</div>
......@@ -330,13 +390,34 @@
@cancel="showPartGraduatePicker = false"
/>
</van-popup>
<van-popup v-model:show="showFamilyBirthPicker" position="bottom">
<van-date-picker
v-model="familyBirthValues"
title="选择日期"
:min-date="minDate"
:max-date="maxDate"
@confirm="onFamilyBirthConfirm"
@cancel="showFamilyBirthPicker = false"
/>
</van-popup>
<van-popup v-model:show="showFamilyRelationPicker" position="bottom">
<van-picker :columns="relationOptions" @confirm="onFamilyRelationConfirm" @cancel="showFamilyRelationPicker = false" />
</van-popup>
</div>
</template>
<script setup lang="ts">
import axios from 'axios';
import type { UploaderFileListItem } from 'vant';
import { reactive, ref, watch } from 'vue';
import { reactive, ref, watch, nextTick } from 'vue';
interface FamilyMemberModel {
relation: string;
name: string;
birthDate: string;
companyAndJob: string;
contact: string;
}
const form = reactive({
name: '',
......@@ -372,6 +453,8 @@ const form = reactive({
nonFulltimeGraduationDate: '',
nonFulltimeDegree: '',
externalResume: '',
familyMembers: [] as Array<FamilyMemberModel>,
familyEmergencyIndex: -1,
tid: '',
});
const _today = new Date();
......@@ -381,10 +464,7 @@ const minDate = new Date(_todayYear - 75, 0, 1);
const maxDate = new Date(_todayYear - 10, 0, 1);
const graduationMinDate = new Date(_todayYear - 50, 1);
const graduationMaxDate = new Date(
_todayYear + 3,
12
);
const graduationMaxDate = new Date(_todayYear + 3, 12);
const workStartMinDate = new Date(_todayYear - 50, 1);
const workStartMaxDate = _today;
......@@ -409,6 +489,8 @@ const submitSuccess = ref(false);
const showWorkStartPicker = ref(false);
const showFullGraduatePicker = ref(false);
const showPartGraduatePicker = ref(false);
const showFamilyBirthPicker = ref(false);
const showFamilyRelationPicker = ref(false);
// function beforeRead(file: File | File[]) {
// const files = Array.isArray(file) ? file : [file];
// const limit = 20 * 1024 * 1024;
......@@ -484,12 +566,25 @@ const politicalOptions = [
// value: o.key,
// }));
const birthValues = ref<string[]>([(_todayYear - 25) + '', '01', '01']);
const workStartValues = ref<string[]>([(_todayYear - 10) + '', '01']);
const fullGraduateValues = ref<string[]>([(_todayYear - 10) + '', '01']);
const partGraduateValues = ref<string[]>([(_todayYear - 10) + '', '01']);
const birthValues = ref<string[]>([_todayYear - 25 + '', '01', '01']);
const workStartValues = ref<string[]>([_todayYear - 10 + '', '01']);
const fullGraduateValues = ref<string[]>([_todayYear - 10 + '', '01']);
const partGraduateValues = ref<string[]>([_todayYear - 10 + '', '01']);
const familyBirthValues = ref<string[]>([_todayYear - 30 + '', '01', '01']);
const activeFamilyIndex = ref<number>(-1);
const relationOptions = [
{ value: '父亲', text: '父亲' },
{ value: '母亲', text: '母亲' },
{ value: '夫妻', text: '夫妻' },
{ value: '儿子', text: '儿子' },
{ value: '女儿', text: '女儿' },
{ value: '哥哥', text: '哥哥' },
{ value: '弟弟', text: '弟弟' },
{ value: '姐姐', text: '姐姐' },
{ value: '妹妹', text: '妹妹' },
];
void [ageRules, politicalOptions, birthValues];
void [ageRules, politicalOptions, relationOptions, birthValues];
// 性别与婚姻状况改为单选，不再需要确认回调
......@@ -522,6 +617,58 @@ function onPartGraduateConfirm(payload: { selectedValues: string[] }) {
form.nonFulltimeGraduationDate = `${y}-${m}`;
showPartGraduatePicker.value = false;
}
function onFamilyBirthClick(i: number) {
activeFamilyIndex.value = i;
showFamilyBirthPicker.value = true;
}
function onFamilyBirthConfirm(payload: { selectedValues: string[] }) {
const [y, m, d] = payload.selectedValues;
const idx = activeFamilyIndex.value;
if (idx >= 0 && form.familyMembers[idx]) {
form.familyMembers[idx].birthDate = `${y}-${m}-${d}`;
}
showFamilyBirthPicker.value = false;
}
function addFamilyMember() {
form.familyMembers.push({
relation: '',
name: '',
birthDate: '',
companyAndJob: '',
contact: '',
});
nextTick(() => {
const el = document.scrollingElement || document.documentElement;
window.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
});
}
function removeFamilyMember(i: number) {
if (i < 0 || i >= form.familyMembers.length) return;
form.familyMembers.splice(i, 1);
if (form.familyEmergencyIndex === i) {
form.familyEmergencyIndex = -1;
} else if (form.familyEmergencyIndex > i) {
form.familyEmergencyIndex--;
}
}
function onFamilyRelationClick(i: number) {
activeFamilyIndex.value = i;
showFamilyRelationPicker.value = true;
}
function onFamilyRelationConfirm(payload: {
selectedOptions?: { text: string }[];
selectedValues?: string[];
}) {
const idx = activeFamilyIndex.value;
const val =
payload?.selectedOptions?.[0]?.text ?? payload?.selectedValues?.[0] ?? '';
if (idx >= 0 && form.familyMembers[idx]) {
form.familyMembers[idx].relation = val;
}
showFamilyRelationPicker.value = false;
}
watch(
() => form.birthDate,
......@@ -563,20 +710,28 @@ async function onSubmit() {
emergencyContact: form.emergencyContact,
emergencyContactPhone: form.emergencyContactPhone,
householdRegistrationAddress: form.householdRegistrationAddress,
workStartDate: form.workStartDisplay + '-01',
workStartDate: form.workStartDisplay ? form.workStartDisplay + '-01' : form.workStartDisplay,
professionalTitle: form.professionalTitle,
certificateStatus: form.certificateStatus,
fulltimeEducation: form.fulltimeEducation,
fulltimeSchool: form.fulltimeSchool,
fulltimeMajor: form.fulltimeMajor,
fulltimeGraduationDate: form.fulltimeGraduationDate+ '-01',
fulltimeGraduationDate: form.fulltimeGraduationDate ? form.fulltimeGraduationDate + '-01' : form.fulltimeGraduationDate,
fulltimeDegree: form.fulltimeDegree,
nonFulltimeEducation: form.nonFulltimeEducation,
nonFulltimeSchool: form.nonFulltimeSchool,
nonFulltimeMajor: form.nonFulltimeMajor,
nonFulltimeGraduationDate: form.nonFulltimeGraduationDate+ '-01',
nonFulltimeGraduationDate: form.nonFulltimeGraduationDate ? form.nonFulltimeGraduationDate + '-01' : form.nonFulltimeGraduationDate,
nonFulltimeDegree: form.nonFulltimeDegree,
externalResume: form.externalResume,
familyMembers: form.familyMembers.map((fm, i) => ({
relation: fm.relation,
name: fm.name,
birthDate: fm.birthDate,
companyAndJob: fm.companyAndJob,
contact: fm.contact,
emergencyFlag: i === form.familyEmergencyIndex ? 'Y' : 'N',
})),
ossId: form.ossId,
tenantId: form.tid,
// photo:
......@@ -648,4 +803,17 @@ void [phoneRules, idRules];
color: var(--van-text-color-2);
padding-left: 4px;
}
.family-table {
overflow-x: auto;
margin-bottom: 8px;
}
.family-row {
display: grid;
grid-template-columns: 88px 90px 128px 160px 110px 100px 50px;
gap: 8px;
align-items: center;
padding: 6px 0;
}
.family-header { color: var(--van-text-color-2); font-size: 12px; text-align: center;}
</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