zhengyiming
2025-07-29 fc78e30665636cdf945da9bdc3139388d8bb4980
src/views/Home/components/UploadInsurePersonDialog.vue
@@ -3,6 +3,8 @@
    title="上传投保人员清单"
    v-model="innerVisible"
    destroy-on-close
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    draggable
    bodyNoPaddingBottom
    @close="onDialogClose"
@@ -10,15 +12,75 @@
  >
    <ProForm :model="innerForm" ref="dialogForm" label-width="120px">
      <ProFormItemV2
        label="批次号:"
        prop="materialName"
        :check-rules="[{ message: '请输入批次号' }]"
        label="投保产品:"
        prop="productIdNumber"
        :check-rules="[{ message: '请选择投保产品' }]"
        v-if="allUserInsureProductSettingList.length > 0"
      >
        <ProFormSelect
          placeholder="请选择投保产品"
          :value-enum="allUserInsureProductSettingList"
          clearable
          v-model="form.productIdNumber"
          enum-label-key="productName"
          enum-value-key="productIdNumber"
          @change="handleProductChange"
          :disabled="isSupply"
        ></ProFormSelect>
      </ProFormItemV2>
      <ProFormItemV2
        label="投保产品方案:"
        prop="productSchemeIdNumber"
        :check-rules="[{ message: '请选择投保产品方案' }]"
        v-if="allUserInsureProductSettingList.length > 0"
      >
        <ProFormSelect
          placeholder="请选择投保产品方案"
          :value-enum="allInsureProductSchemeList"
          clearable
          v-model="form.productSchemeIdNumber"
          enum-label-key="name"
          enum-value-key="idNumber"
          :disabled="isSupply"
        ></ProFormSelect>
      </ProFormItemV2>
      <ProFormItemV2 label="批次号:" prop="serialNum" :check-rules="[{ message: '请输入批次号' }]">
        <ProFormText
          placeholder="请输入批次号"
          v-model.trim="innerForm.orderNo"
          v-model.trim="innerForm.serialNum"
          :maxlength="30"
          :disabled="isSupply"
        ></ProFormText>
      </ProFormItemV2>
      <ProFormItemV2
        label="起保日期:"
        prop="effectStartTime"
        :check-rules="[{ message: '请选择起保日期' }]"
      >
        <ProFormDatePicker
          v-model="form.effectStartTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择起保日期"
          :disabled-date="disabledStartDate"
          :disabled="isSupply"
          @change="handleStartDateChange"
        ></ProFormDatePicker>
      </ProFormItemV2>
      <ProFormItemV2
        label="截止日期:"
        prop="effectEndTime"
        :check-rules="[{ message: '请选择截止日期' }]"
        v-if="currentInsureProductScheme?.period === InsurancePeriodEnum['1-29D']"
      >
        <ProFormDatePicker
          v-model="form.effectEndTime"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="请选择截止日期"
          :disabled-date="disabledEndDate"
          :disabled="isSupply"
        ></ProFormDatePicker>
      </ProFormItemV2>
      <ProFormItemV2
        label="上传文件:"
@@ -48,6 +110,7 @@
</template>
<script setup lang="ts">
import { useUserInsureProductSetting, useInsureProductSchemeAllList } from '@/hooks';
import {
  ProDialog,
  UploadUserFile,
@@ -55,8 +118,13 @@
  ProFormItemV2,
  ProFormText,
  ProFormUpload,
  ProFormSelect,
  ProFormDatePicker,
} from '@bole-core/components';
import dayjs from 'dayjs';
import { FormInstance } from 'element-plus';
import _ from 'lodash';
import { InsurancePeriodEnum } from '@/constants';
defineOptions({
  name: 'UploadInsurePersonDialog',
@@ -65,13 +133,20 @@
type Props = {
  modelValue: boolean;
  form?: {
    orderNo: string;
    serialNum: string;
    url: UploadUserFile[];
    productIdNumber: string;
    productSchemeIdNumber: string;
    effectStartTime: string;
    effectEndTime: string;
  };
  //是否是补提
  isSupply?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  isSupply: false,
});
const emit = defineEmits<{
@@ -81,6 +156,39 @@
  (e: 'onCancel'): void;
}>();
const { allUserInsureProductSettingList, getInsureProductIdByIdNumber } =
  useUserInsureProductSetting();
const { allInsureProductSchemeList, getInsureProductSchemeByIdNumber } =
  useInsureProductSchemeAllList({
    insureProductId: computed(() => getInsureProductIdByIdNumber(props.form.productIdNumber)),
  });
const currentInsureProductScheme = computed(() =>
  getInsureProductSchemeByIdNumber(props.form.productSchemeIdNumber)
);
function handleProductChange() {
  innerForm.value.productSchemeIdNumber = '';
}
const disabledStartDate = (time: Date) => {
  return dayjs(time).isBefore(dayjs()) || dayjs(time).isAfter(dayjs().add(60, 'day'));
};
const disabledEndDate = (time: Date) => {
  const startDate = dayjs(props.form.effectStartTime);
  return (
    dayjs(time).isBefore(startDate) ||
    dayjs(time).isAfter(dayjs(props.form.effectStartTime).add(28, 'day'))
  );
};
function handleStartDateChange() {
  if (disabledEndDate(props.form.effectEndTime as any)) {
    innerForm.value.effectEndTime = '';
  }
}
const innerVisible = computed({
  get() {
    return props.modelValue;