zhxy-jsd/src/pages/view/hr/teacherProfile/PositionInfo.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: "xj",
  //   label: "薪级",
  //   component: "BasicPicker",
  //   componentProps: {
  //     api: dicApi,
  //     param: { pid: 434953981 },
  //     rangeKey: "dictionaryValue",
  //     savaKey: "dictionaryCode",
  //   },
  // },
  {
    field: "gwjbId",
    label: "岗位类别",
    component: "BasicPicker",
    componentProps: {
      api: dicApi,
      param: { pid: 260783972 },
      rangeKey: "dictionaryValue",
      savaKey: "dictionaryCode",
    },
  },
  {
    field: "gwrztime",
    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.gwpyjssj;
          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: "gwpyjssj",
    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.gwrztime;
          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 };
  });
  
  // 回显数据后，重新计算所有任岗年限
  nextTick(() => {
    education.xl.forEach((item: any, index: number) => {
      if (item.value.gwrztime) {
        const years = calculatePositionYears(
          item.value.gwrztime,
          item.value.gwpyjssj
        );
        item.value.gwrznx = years;
        console.log(`回显数据-表单项${index}计算结果:`, { 
          gwrztime: item.value.gwrztime,
          gwpyjssj: item.value.gwpyjssj,
          gwrznx: years,
          是否为0: years === "0"
        });
      } else {
        // 没有开始时间时，清空任岗年限
        item.value.gwrznx = "";
      }
    });
    // 强制重新渲染确保界面更新
    forceUpdateKey.value++;
  });
}

// 手动触发计算所有项目的任岗年限
const calculateAllPositionYears = () => {
  education.xl.forEach((item: any, index: number) => {
    if (item.value.gwrztime) {
      const years = calculatePositionYears(
        item.value.gwrztime,
        item.value.gwpyjssj
      );
      item.value.gwrznx = years;
      console.log(`表单项${index}计算结果:`, { 
        gwrztime: item.value.gwrztime,
        gwpyjssj: item.value.gwpyjssj,
        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(() => {
  // 如果有回显数据，再次确保计算正确
  if (getFile.rgqkList && getFile.rgqkList.length > 0) {
    nextTick(() => {
      console.log("组件挂载后处理回显数据");
      calculateAllPositionYears();
    });
  }
});
</script>
<style>
.delete-icon {
  position: absolute;
  right: -13px;
  top: -14px;
  z-index: 1;
}
</style>