303 lines
8.4 KiB
Vue
303 lines
8.4 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<view class="p-15">
|
||
<view v-if="education.xl.length > 0">
|
||
<template v-for="(item, index) in education.xl" :key="index">
|
||
<view class="po-re mb-15">
|
||
<BasicForm
|
||
:index="index"
|
||
v-model="item.value"
|
||
:schema="schema"
|
||
:key="`form-${index}-${forceUpdateKey}`"
|
||
:formsProps="{ labelWidth: 100 }"
|
||
/>
|
||
<view
|
||
@click="deleteMemberFamily(index, item.value)"
|
||
class="delete-icon"
|
||
>
|
||
<BasicIcon type="clear" size="30"/>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view
|
||
class="flex-row items-center justify-center pb-10 pt-5"
|
||
style="border: 1px solid #e8e8e8"
|
||
@click="addEducation"
|
||
>
|
||
<uni-icons type="plus" size="16" color="#447ADE"></uni-icons>
|
||
<view class="ml-5 cor-447ADE">新增</view>
|
||
</view>
|
||
</view>
|
||
<template #bottom>
|
||
<view class="flex-row items-center pb-10 pt-5">
|
||
<u-button
|
||
text="测试计算"
|
||
class="ml-15 mr-7"
|
||
:plain="true"
|
||
@click="calculateAllPositionYears"
|
||
/>
|
||
<u-button
|
||
text="上一步"
|
||
class="ml-15 mr-7"
|
||
:plain="true"
|
||
@click="navigateBack"
|
||
/>
|
||
<u-button
|
||
text="下一步"
|
||
class="mr-15 mr-7"
|
||
type="primary"
|
||
@click="submit"
|
||
/>
|
||
</view>
|
||
</template>
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {dicApi} from "@/api/system/dic";
|
||
import {useDataStore} from "@/store/modules/data";
|
||
import {navigateBack, navigateTo} from "@/utils/uniapp";
|
||
import {cloneDeep, map} from "lodash";
|
||
import dayjs from "dayjs";
|
||
|
||
// 计算任岗年限
|
||
const calculatePositionYears = (startDate: string, endDate?: string) => {
|
||
if (!startDate) return "";
|
||
const start = dayjs(startDate);
|
||
const end = endDate ? dayjs(endDate) : dayjs();
|
||
const years = end.diff(start, "year");
|
||
console.log("计算任岗年限:", {startDate, endDate, years});
|
||
// 确保0值也能显示，转换为字符串
|
||
return years.toString();
|
||
};
|
||
|
||
// 强制重新渲染的键
|
||
const forceUpdateKey = ref(0);
|
||
|
||
// 更新指定项的任岗年限
|
||
const updatePositionYears = (itemValue: any) => {
|
||
const {gwrztime, gwpyjssj} = itemValue;
|
||
if (gwrztime) {
|
||
const years = calculatePositionYears(gwrztime, gwpyjssj);
|
||
itemValue.gwrznx = years;
|
||
}
|
||
};
|
||
|
||
const schema = reactive<FormsSchema[]>([
|
||
{
|
||
field: "gwlbId",
|
||
label: "岗位类别",
|
||
component: "BasicPicker",
|
||
componentProps: {
|
||
api: dicApi,
|
||
param: {pid: 260783972},
|
||
rangeKey: "dictionaryValue",
|
||
savaKey: "dictionaryCode",
|
||
},
|
||
},
|
||
{
|
||
field: "gwjbId",
|
||
label: "岗位级别",
|
||
component: "BasicPicker",
|
||
componentProps: {
|
||
api: dicApi,
|
||
param: {pid: 434953981},
|
||
rangeKey: "dictionaryValue",
|
||
savaKey: "dictionaryCode",
|
||
},
|
||
},
|
||
{
|
||
field: "gwrzkstime",
|
||
label: "岗位聘用开始时间",
|
||
component: "BasicDateTime",
|
||
componentProps: {
|
||
mode: "year-month",
|
||
ok: (e: any, attrs: any) => {
|
||
console.log("岗位聘用开始时间选择:", e, attrs);
|
||
const formIndex = attrs.index;
|
||
if (formIndex !== undefined && education.xl[formIndex]) {
|
||
// 获取当前表单项的结束时间
|
||
const endTime = education.xl[formIndex].value.gwrzjstime;
|
||
console.log("当前表单项数据:", education.xl[formIndex].value);
|
||
// 计算任岗年限
|
||
const years = calculatePositionYears(e.value, endTime);
|
||
// 更新任岗年限
|
||
education.xl[formIndex].value.gwrznx = years;
|
||
console.log("更新后的任岗年限:", education.xl[formIndex].value.gwrznx);
|
||
// 强制重新渲染
|
||
forceUpdateKey.value++;
|
||
}
|
||
},
|
||
},
|
||
},
|
||
{
|
||
field: "gwrzjstime",
|
||
label: "岗位聘用结束时间",
|
||
component: "BasicDateTime",
|
||
componentProps: {
|
||
mode: "year-month",
|
||
ok: (e: any, attrs: any) => {
|
||
console.log("岗位聘用结束时间选择:", e, attrs);
|
||
const formIndex = attrs.index;
|
||
if (formIndex !== undefined && education.xl[formIndex]) {
|
||
// 获取当前表单项的开始时间
|
||
const startTime = education.xl[formIndex].value.gwrzkstime;
|
||
console.log("当前表单项数据:", education.xl[formIndex].value);
|
||
if (startTime) {
|
||
// 计算任岗年限
|
||
const years = calculatePositionYears(startTime, e.value);
|
||
// 更新任岗年限
|
||
education.xl[formIndex].value.gwrznx = years;
|
||
console.log("更新后的任岗年限:", education.xl[formIndex].value.gwrznx);
|
||
// 强制重新渲染
|
||
forceUpdateKey.value++;
|
||
}
|
||
}
|
||
},
|
||
},
|
||
},
|
||
{
|
||
field: "gwrznx",
|
||
label: "岗位任职年限",
|
||
component: "BasicInput",
|
||
componentProps: {
|
||
disabled: true,
|
||
placeholder: "请选择岗位聘用时间",
|
||
},
|
||
},
|
||
// {
|
||
// field: "zrxk",
|
||
// label: "主任学科",
|
||
// component: "BasicInput",
|
||
// componentProps: {},
|
||
// },
|
||
// {
|
||
// field: "jrxk",
|
||
// label: "兼任学科",
|
||
// component: "BasicInput",
|
||
// componentProps: {},
|
||
// },
|
||
// {
|
||
// field: "bzrBjId",
|
||
// label: "班主任班级",
|
||
// component: "BasicDataPicker",
|
||
// componentProps: {
|
||
// api: findAllNjBjTreeApi,
|
||
// rangeKey: "title",
|
||
// savaKey: "key",
|
||
// },
|
||
// },
|
||
/*{
|
||
field: "dzzw",
|
||
label: "职务",
|
||
component: "BasicPicker",
|
||
componentProps: {
|
||
api: dicApi,
|
||
param: { pid: 1063530116 },
|
||
rangeKey: "dictionaryValue",
|
||
savaKey: "dictionaryCode",
|
||
},
|
||
},*/
|
||
]);
|
||
|
||
const education = reactive<any>({
|
||
xl: [{value: {}}],
|
||
});
|
||
|
||
const {getFile, setFile} = useDataStore();
|
||
if (getFile.rgqkList && getFile.rgqkList.length > 0) {
|
||
education.xl = map(getFile.rgqkList, (item) => {
|
||
return {value: item};
|
||
});
|
||
|
||
// 回显数据后，直接使用数据库返回的gwrznx值，不重新计算
|
||
nextTick(() => {
|
||
education.xl.forEach((item: any, index: number) => {
|
||
console.log(`回显数据-表单项${index}数据:`, {
|
||
gwrzkstime: item.value.gwrzkstime,
|
||
gwrzjstime: item.value.gwrzjstime,
|
||
gwrznx: item.value.gwrznx, // 直接使用数据库返回的值
|
||
来源: "数据库回显"
|
||
});
|
||
});
|
||
// 强制重新渲染确保界面更新
|
||
forceUpdateKey.value++;
|
||
});
|
||
}
|
||
|
||
// 手动触发计算所有项目的任岗年限
|
||
const calculateAllPositionYears = () => {
|
||
education.xl.forEach((item: any, index: number) => {
|
||
if (item.value.gwrzkstime) {
|
||
const years = calculatePositionYears(
|
||
item.value.gwrzkstime,
|
||
item.value.gwrzjstime
|
||
);
|
||
item.value.gwrznx = years;
|
||
console.log(`表单项${index}计算结果:`, {
|
||
gwrzkstime: item.value.gwrzkstime,
|
||
gwrzjstime: item.value.gwrzjstime,
|
||
gwrznx: years,
|
||
是否为0: years === "0"
|
||
});
|
||
} else {
|
||
// 没有开始时间时，清空任岗年限
|
||
item.value.gwrznx = "";
|
||
}
|
||
});
|
||
forceUpdateKey.value++;
|
||
};
|
||
|
||
function addEducation() {
|
||
education.xl.push({value: {}});
|
||
// 强制重新渲染
|
||
forceUpdateKey.value++;
|
||
}
|
||
|
||
function deleteMemberFamily(index: number, item: any) {
|
||
const list = cloneDeep(education.xl);
|
||
list.splice(index, 1);
|
||
education.xl = list;
|
||
// 强制重新渲染
|
||
forceUpdateKey.value++;
|
||
}
|
||
|
||
function submit() {
|
||
setFile({
|
||
...getFile,
|
||
rgqkList: map(education.xl, (item) => {
|
||
return item.value;
|
||
}),
|
||
});
|
||
navigateTo("/pages/view/hr/teacherProfile/ExperienceInfo");
|
||
}
|
||
|
||
// 组件挂载完成后处理回显数据
|
||
onMounted(() => {
|
||
// 如果有回显数据，直接使用数据库返回的gwrznx值，不重新计算
|
||
if (getFile.rgqkList && getFile.rgqkList.length > 0) {
|
||
nextTick(() => {
|
||
console.log("组件挂载后处理回显数据，直接使用数据库返回的gwrznx值");
|
||
education.xl.forEach((item: any, index: number) => {
|
||
console.log(`挂载后-表单项${index}数据:`, {
|
||
gwrzkstime: item.value.gwrzkstime,
|
||
gwrzjstime: item.value.gwrzjstime,
|
||
gwrznx: item.value.gwrznx, // 直接使用数据库返回的值
|
||
来源: "数据库回显-挂载后"
|
||
});
|
||
});
|
||
forceUpdateKey.value++;
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
<style>
|
||
.delete-icon {
|
||
position: absolute;
|
||
right: -13px;
|
||
top: -14px;
|
||
z-index: 1;
|
||
}
|
||
</style>
|