|  |  |  | 
|---|
|  |  |  | title="上传投保人员清单" | 
|---|
|  |  |  | v-model="innerVisible" | 
|---|
|  |  |  | destroy-on-close | 
|---|
|  |  |  | :close-on-click-modal="false" | 
|---|
|  |  |  | :close-on-press-escape="false" | 
|---|
|  |  |  | draggable | 
|---|
|  |  |  | bodyNoPaddingBottom | 
|---|
|  |  |  | @close="onDialogClose" | 
|---|
|  |  |  | width="600px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <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="上传文件:" | 
|---|
|  |  |  | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { useUserInsureProductSetting, useInsureProductSchemeAllList } from '@/hooks'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | ProDialog, | 
|---|
|  |  |  | UploadUserFile, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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', | 
|---|
|  |  |  | 
|---|
|  |  |  | 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<{ | 
|---|
|  |  |  | 
|---|
|  |  |  | (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; | 
|---|