From ee36747f2db9ac3a641e1cbaeb01f726ce9faa98 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期一, 24 三月 2025 16:02:28 +0800
Subject: [PATCH] feat: 页面
---
src/views/InsuranceClaim/InsuranceClaimDetail.vue | 582 ---------------------------------------------------------
1 files changed, 3 insertions(+), 579 deletions(-)
diff --git a/src/views/InsuranceClaim/InsuranceClaimDetail.vue b/src/views/InsuranceClaim/InsuranceClaimDetail.vue
index af72b53..c78ea3c 100644
--- a/src/views/InsuranceClaim/InsuranceClaimDetail.vue
+++ b/src/views/InsuranceClaim/InsuranceClaimDetail.vue
@@ -1,587 +1,11 @@
<template>
- <LoadingLayout :loading="isLoading">
- <AppScrollContainer>
- <ChunkCell title="鎶ユ淇℃伅">
- <ProForm :model="form" ref="formRef" label-width="120px">
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="韬唤璇佸彿鐮�:"
- prop="idNumber"
- :check-rules="[{ message: '璇疯緭鍏ヨ韩浠借瘉鍙风爜', type: 'idCard' }]"
- >
- <ProFormText
- v-model.trim="form.idNumber"
- placeholder="璇疯緭鍏ヨ韩浠借瘉鍙风爜"
- @change="handleIdNumberChange"
- />
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="鎶ユ鏃堕棿:"
- prop="reportedTime"
- :check-rules="[{ message: '璇烽�夋嫨鎶ユ鏃堕棿' }]"
- >
- <ProFormDatePicker
- v-model="form.reportedTime"
- type="datetime"
- format="YYYY-MM-DD HH:mm:ss"
- value-format="YYYY-MM-DD HH:mm:ss"
- placeholder="璇烽�夋嫨鎶ユ鏃堕棿"
- :disabled-date="disabledReportedDate"
- @change="handleReportedTimeChange"
- :key="datePickerKey"
- ></ProFormDatePicker>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="鑱旂郴鐢佃瘽:"
- prop="contactNumber"
- :check-rules="[{ message: '璇疯緭鍏ヨ仈绯荤數璇�', type: 'phone' }]"
- >
- <ProFormText v-model.trim="form.contactNumber" placeholder="璇疯緭鍏ヨ仈绯荤數璇�" />
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="澶囩敤鑱旂郴鐢佃瘽:"
- prop="bakContactNumber"
- :check-rules="[{ message: '璇疯緭鍏ュ鐢ㄨ仈绯荤數璇�', type: 'phone', required: false }]"
- >
- <ProFormText
- v-model.trim="form.bakContactNumber"
- placeholder="璇疯緭鍏ュ鐢ㄨ仈绯荤數璇�"
- />
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="濮撳悕:" prop="name" :check-rules="[{ message: '璇疯緭鍏ュ鍚�' }]">
- <ProFormText v-model.trim="form.name" placeholder="璇疯緭鍏ュ鍚�" :maxlength="30" />
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- </ProForm>
- </ChunkCell>
- <ChunkCell title="淇濆崟淇℃伅">
- <ProForm :model="form" ref="insuranceBaseFormRef" label-width="120px">
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="鍙備繚鏈烘瀯:"
- prop="insuredInstitution"
- :check-rules="[{ message: '璇烽�夋嫨鍙備繚鏈烘瀯' }]"
- >
- <ProFormSelect
- placeholder="璇烽�夋嫨鍙備繚鏈烘瀯"
- :value-enum="InsuredInstitutionEnum"
- clearable
- v-model="form.insuredInstitution"
- ></ProFormSelect>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="鎶曚繚鏂规:"
- prop="insuranceScheme"
- :check-rules="[{ message: '璇烽�夋嫨鎶曚繚鏂规' }]"
- >
- <ProFormSelect
- placeholder="璇烽�夋嫨鎶曚繚鏂规"
- :value-enum="InsuranceSchemeEnum"
- clearable
- v-model="form.insuranceScheme"
- ></ProFormSelect>
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- <ProFormMixinsItemContainer>
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="璧蜂繚鏃ユ湡:" prop="insuranceBeginTime" mode="read">
- <ProFormDatePicker
- v-model="form.insuranceBeginTime"
- type="date"
- value-format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨璧蜂繚鏃ユ湡"
- ></ProFormDatePicker>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="鍔冲姩鍚堝悓鍗曚綅:" prop="laborContractEnterprise" mode="read">
- <ProFormText
- v-model.trim="form.laborContractEnterprise"
- placeholder="璇疯緭鍏ュ姵鍔ㄥ悎鍚屽崟浣�"
- />
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="宸ョ:" prop="workType" mode="read">
- <ProFormText v-model.trim="form.workType" placeholder="璇疯緭鍏ュ伐绉�" />
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- </ProFormMixinsItemContainer>
- <ProFormMixinsItemContainer>
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="缁堜繚鏃ユ湡:" prop="insuranceEndTime" mode="read">
- <ProFormDatePicker
- v-model="form.insuranceEndTime"
- type="date"
- value-format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨缁堜繚鏃ユ湡"
- ></ProFormDatePicker>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="瀹為檯宸ヤ綔鍗曚綅:" prop="workEnterprise" mode="read">
- <ProFormText
- v-model.trim="form.workEnterprise"
- placeholder="璇疯緭鍏ュ疄闄呭伐浣滃崟浣�"
- />
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- </ProFormMixinsItemContainer>
- </ProForm>
- </ChunkCell>
- <ChunkCell title="淇濆崟淇℃伅">
- <ProForm :model="form" ref="insuranceFormRef" label-width="120px">
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="浜嬫晠绫诲瀷:"
- prop="accidentType"
- :check-rules="[{ message: '璇烽�夋嫨浜嬫晠绫诲瀷' }]"
- >
- <ProFormSelect
- placeholder="璇烽�夋嫨浜嬫晠绫诲瀷"
- :value-enum="AccidentTypeEnum"
- clearable
- v-model="form.accidentType"
- ></ProFormSelect>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2
- label="浜嬫晠鍙戠敓鏃堕棿:"
- prop="accidentTime"
- :check-rules="[{ message: '璇烽�夋嫨浜嬫晠鍙戠敓鏃堕棿' }]"
- >
- <ProFormDatePicker
- v-model="form.accidentTime"
- type="datetime"
- format="YYYY-MM-DD HH:mm:ss"
- placeholder="璇烽�夋嫨浜嬫晠鍙戠敓鏃堕棿"
- ></ProFormDatePicker>
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="浼ゆ畫姣斾緥:" prop="disabilityRatio">
- <ProFormInputNumber
- v-model="form.disabilityRatio"
- :controls="false"
- :min="0"
- :max="100"
- unit="%"
- ></ProFormInputNumber>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="18">
- <ProFormItemV2
- label="浜嬪彂鍦扮偣:"
- prop="accidentAddress"
- :check-rules="[{ message: '璇疯緭鍏ヤ簨鍙戝湴鐐�' }]"
- >
- <ProFormText
- v-model.trim="form.accidentAddress"
- placeholder="璇疯緭鍏ヤ簨鍙戝湴鐐�"
- :maxlength="100"
- />
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- <ProFormCol>
- <ProFormColItem :span="24">
- <ProFormItemV2
- label="浜嬫晠缁忚繃:"
- prop="accidentProcess"
- :check-rules="[{ message: '璇疯緭鍏ヤ簨鏁呯粡杩�' }]"
- >
- <ProFormTextArea
- v-model="form.accidentProcess"
- :rows="10"
- placeholder="璇疯緭鍏ヤ簨鏁呯粡杩�"
- :maxlength="500"
- show-word-limit
- ></ProFormTextArea>
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- <div class="attachments-wrapper">
- <div class="attachments">
- <ProFormItemV2 label="浼よ�呰韩浠借瘉鐓х墖锛堟鍙嶏級:">
- <div class="id-imgUrl-wrapper">
- <ProFormItemV2 prop="attachmentFrontIdCards" class="pro-form-item-label-hidden">
- <ProFormImageUpload
- v-model:file-url="form.attachmentFrontIdCards"
- :limitFileSize="10"
- btnText="韬唤璇佷汉鍍忛潰"
- :showTip="false"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- <ProFormItemV2 prop="attachmentBackIdCards" class="pro-form-item-label-hidden">
- <ProFormImageUpload
- v-model:file-url="form.attachmentBackIdCards"
- :limitFileSize="10"
- btnText="韬唤璇佸浗寰介潰"
- :showTip="false"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- </div>
- </ProFormItemV2>
- <ProFormItemV2 prop="attachmentSites" label="鍙椾激鍦哄湴:">
- <ProFormImageUpload
- v-model:file-url="form.attachmentSites"
- :limitFileSize="10"
- :showTip="false"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- <ProFormItemV2 prop="attachmentHandheldIdCards" label="浼よ�呮墜鎸佽韩浠借瘉鐓�:">
- <ProFormImageUpload
- v-model:file-url="form.attachmentHandheldIdCards"
- :limitFileSize="10"
- :showTip="false"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- <ProFormItemV2 prop="attachmentAreas" label="鍙椾激閮ㄤ綅:">
- <ProFormImageUpload
- v-model:file-url="form.attachmentAreas"
- :limitFileSize="10"
- :showTip="false"
- :limitFileCount="0"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- <ProFormItemV2 prop="attachmentCases" label="鐥呬緥鐓х墖:">
- <ProFormImageUpload
- v-model:file-url="form.attachmentCases"
- :limitFileSize="10"
- :showTip="false"
- :limitFileCount="0"
- >
- </ProFormImageUpload>
- </ProFormItemV2>
- </div>
- <ClaimPicDemoView />
- </div>
- <div class="chuck-add-or-edit-actions">
- <el-button @click="handleBack">鍏抽棴</el-button>
- <el-button type="primary" @click="handleSubmit">鎻愪氦</el-button>
- </div>
- </ProForm>
- </ChunkCell>
- <!-- <ChunkCell title="鐞嗚禂缁撴灉">
- <ProForm :model="form" ref="claimFormRef" label-width="120px">
- <ProFormCol>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="鐞嗚禂缁撴灉:" prop="claimResult">
- <ProFormSelect
- placeholder="璇烽�夋嫨鐞嗚禂缁撴灉"
- :value-enum="InsuranceClaimResultEnumText"
- clearable
- v-model="form.claimResult"
- ></ProFormSelect>
- </ProFormItemV2>
- </ProFormColItem>
- <ProFormColItem :span="6">
- <ProFormItemV2 label="缁�/鎾ゆ鏃堕棿:" prop="claimResultTime">
- <ProFormDatePicker
- v-model="form.claimResultTime"
- type="datetime"
- format="YYYY-MM-DD"
- value-format="YYYY-MM-DD"
- placeholder="璇烽�夋嫨缁�/鎾ゆ鏃堕棿"
- ></ProFormDatePicker>
- </ProFormItemV2>
- </ProFormColItem>
- </ProFormCol>
- <ProFormItemV2 label="涓嬫閲戦:" prop="downPaymentAmount">
- <ProFormInputNumber
- v-model="form.downPaymentAmount"
- :controls="false"
- :min="0"
- :precision="2"
- ></ProFormInputNumber>
- </ProFormItemV2>
- <div class="chuck-add-or-edit-actions">
- <el-button @click="handleBack">鍏抽棴</el-button>
- <el-button type="primary" @click="handleSubmit">鎻愪氦</el-button>
- </div>
- </ProForm>
- </ChunkCell> -->
- </AppScrollContainer>
- <SelectOrderDialog v-bind="dialogProps" />
- </LoadingLayout>
+ <InsuranceClaimView :isDetail="true"></InsuranceClaimView>
</template>
<script setup lang="ts">
-import * as insuranceOrderServices from '@/services/api/InsuranceOrder';
-import * as insuranceClaimServices from '@/services/api/InsuranceClaim';
-import {
- ChunkCell,
- AppScrollContainer,
- LoadingLayout,
- ProForm,
- ProFormCol,
- ProFormColItem,
- ProFormText,
- ProFormDatePicker,
- ProFormSelect,
- ProFormImageUpload,
- ProFormTextArea,
- ProFormItemV2,
- ProFormMixinsItemContainer,
- ProFormInputNumber,
- useFormDialog,
-} from '@bole-core/components';
-import { FormInstance, DatePickerInstance } from 'element-plus';
-import { validateFormList, format } from '@/utils';
-import { convertFormToattAchments } from './utils';
-import {
- InsuredInstitutionEnum,
- InsuranceSchemeEnum,
- AccidentTypeEnum,
- InsuranceClaimAttachmentBusinessTypeEnum,
- InsuranceClaimResultEnumText,
-} from '@/constants';
-import { useRouteView } from '@/hooks';
-import { Message, BoleRegExp } from '@bole-core/core';
-import { useInsuranceClaimDetail, useInsuranceOrderListByOrderRelevance } from './hooks';
-import ClaimPicDemoView from './components/ClaimPicDemoView.vue';
-import SelectOrderDialog from './components/SelectOrderDialog.vue';
-import { useQueryClient } from '@tanstack/vue-query';
+import InsuranceClaimView from './components/InsuranceClaimView.vue';
defineOptions({
- name: 'InsuranceClaimDetail',
+ name: 'InsuranceClaim',
});
-
-const route = useRoute();
-const insuranceOrderId = (route.params.id as string) ?? '';
-const { closeViewPush } = useRouteView();
-
-const datePickerKey = ref(1);
-
-const { form, isLoading, claimDetail, disabledReportedDate, queryClaimDetailByOrderId, resetForm } =
- useInsuranceClaimDetail({
- insuranceOrderId,
- });
-
-// const { existedInsuranceOrderList } = useInsuranceOrderListByOrderRelevance({
-// params: computed(() => ({
-// idIdNumber: form.idNumber,
-// reportedTime: form.reportedTime,
-// })),
-// onSuccess(data) {
-// if (data.length == 1) {
-// // importInsuranceOrderData(data[0]);
-// form.insuranceOrderId = data[0].id;
-// } else if (data.length > 1) {
-// handleAdd({
-// insuranceOrderList: data,
-// });
-// }
-// },
-// });
-
-const { dialogProps, handleAdd, editForm } = useFormDialog({
- onConfirm: handleSelectedOrder,
- defaultFormParams: {
- insuranceOrderId: '',
- insuranceOrderList: [] as API.InsuranceOrderListOutput[],
- },
-});
-
-async function handleSelectedOrder() {
- try {
- datePickerKey.value += 1;
- resetForm();
- await nextTick();
- form.insuranceOrderId = editForm.insuranceOrderId;
- // let claimDetail = await queryClaimDetailByOrderId();
- // if (claimDetail) {
- // Message.errorMessage('璇ヤ繚鍗曞凡鐞嗚禂');
- // }
- } catch (error) {}
-}
-
-const queryClient = useQueryClient();
-
-async function ensureInsuranceOrderList() {
- try {
- if (BoleRegExp.RegIDCard.test(form.idNumber) && !!form.reportedTime) {
- let params: API.QueryInsuranceOrderListByOrderRelevanceInput = {
- idIdNumber: form.idNumber,
- reportedTime: form.reportedTime,
- };
- let existedInsuranceOrderList = await queryClient.ensureQueryData({
- queryKey: ['insuranceOrderServices/getInsuranceOrderListByOrderRelevance', params],
- queryFn: async () => {
- return await insuranceOrderServices.getInsuranceOrderListByOrderRelevance(params, {
- showLoading: false,
- });
- },
- });
- if (existedInsuranceOrderList.length == 1) {
- form.insuranceOrderId = existedInsuranceOrderList[0].id;
- } else if (existedInsuranceOrderList.length > 1) {
- handleAdd({
- insuranceOrderList: existedInsuranceOrderList,
- });
- } else {
- Message.errorMessage('鏈壘鍒板尮閰嶇殑淇濆崟淇℃伅');
- }
- }
-
- // return existedInsuranceOrderList;
- } catch (error) {}
-}
-
-function handleIdNumberChange() {
- ensureInsuranceOrderList();
-}
-
-function handleReportedTimeChange() {
- if (form.accidentTime === '') {
- form.accidentTime = form.reportedTime;
- }
- ensureInsuranceOrderList();
-}
-
-const formRef = ref<FormInstance>();
-const insuranceBaseFormRef = ref<FormInstance>();
-const insuranceFormRef = ref<FormInstance>();
-const claimFormRef = ref<FormInstance>();
-
-async function handleSubmit() {
- try {
- const valid = await validateFormList([
- formRef.value,
- insuranceBaseFormRef.value,
- insuranceFormRef.value,
- ]);
-
- if (valid) {
- addInsuranceClaim();
- }
- } catch (error) {}
-}
-
-async function addInsuranceClaim() {
- try {
- if (claimDetail.value === undefined) {
- Message.errorMessage('鏈壘鍒板尮閰嶇殑淇濆崟淇℃伅');
- return;
- }
- let params: API.AddInsuranceClaimInput = {
- channel: form.channel,
- name: form.name,
- idNumber: form.idNumber,
- workType: form.workType,
- laborContractEnterprise: form.laborContractEnterprise,
- workEnterprise: form.workEnterprise,
- insuranceBeginTime: format(form.insuranceBeginTime),
- insuranceEndTime: format(form.insuranceEndTime),
- insuredInstitution: form.insuredInstitution,
- insuranceScheme: form.insuranceScheme,
- onJobFlag: form.onJobFlag,
- gender: form.gender,
- age: form.age,
- premiumAmount: form.premiumAmount,
- incDecAmount: form.incDecAmount,
- insuranceOrderId: form.insuranceOrderId,
- reportedTime: format(form.reportedTime, 'YYYY-MM-DD HH:mm:ss'),
- contactNumber: form.contactNumber,
- bakContactNumber: form.bakContactNumber,
- accidentType: form.accidentType,
- accidentTime: format(form.accidentTime, 'YYYY-MM-DD HH:mm:ss'),
- // disabilityRatio: form.disabilityRatio,
- accidentAddress: form.accidentAddress,
- accidentProcess: form.accidentProcess,
- // claimResult: form.claimResult,
- // claimResultTime: form.claimResultTime,
- attachments: [
- ...convertFormToattAchments(
- form.attachmentFrontIdCards,
- InsuranceClaimAttachmentBusinessTypeEnum.InjuredIdCardImg
- ),
- ...convertFormToattAchments(
- form.attachmentBackIdCards,
- InsuranceClaimAttachmentBusinessTypeEnum.InjuredIdCardImg
- ),
- ...convertFormToattAchments(
- form.attachmentSites,
- InsuranceClaimAttachmentBusinessTypeEnum.InjurySiteImg
- ),
- ...convertFormToattAchments(
- form.attachmentHandheldIdCards,
- InsuranceClaimAttachmentBusinessTypeEnum.InjuredHandheldIdCardImg
- ),
- ...convertFormToattAchments(
- form.attachmentAreas,
- InsuranceClaimAttachmentBusinessTypeEnum.InjuredAreaImg
- ),
- ...convertFormToattAchments(
- form.attachmentCases,
- InsuranceClaimAttachmentBusinessTypeEnum.CasesImg
- ),
- ],
- };
- // if (form.downPaymentAmount) params.downPaymentAmount = form.downPaymentAmount;
- if (form.disabilityRatio) params.disabilityRatio = form.disabilityRatio;
- let res: number;
- // if (!!claimDetail.value) {
- // Message.errorMessage('璇ヤ繚鍗曞凡鐞嗚禂');
- // } else {
- res = await insuranceClaimServices.addInsuranceClaim(params);
- // }
- if (res) {
- Message.successMessage('鎿嶄綔鎴愬姛');
- handleBack();
- }
- } catch (error) {}
-}
-
-function handleBack() {
- closeViewPush(route, {
- name: 'Home',
- });
-}
</script>
-
-<style lang="scss" scoped>
-@use '@/style/common.scss' as *;
-
-.attachments-wrapper {
- position: relative;
- display: flex;
-
- .attachments {
- flex: 1;
- min-width: 0;
- }
-}
-
-.id-imgUrl-wrapper {
- display: flex;
- gap: 40px;
-}
-</style>
--
Gitblit v1.9.1