hl-core 0.0.7-beta.14 → 0.0.7-beta.16

package/components/Form/MemberForm.vue

@@ -0,0 +1,983 @@
+<template>
+  <section class="flex flex-col gap-4 px-[10px]">
+    <v-form v-if="member" ref="vForm" @submit="submitForm" class="max-h-[82svh] overflow-y-scroll">
+      <base-form-section :title="$t('form.personalData')">
+        <base-form-input
+          v-model="member.iin"
+          :label="$t('form.iin')"
+          maska="###-###-###-###"
+          :readonly="isDisabled || isIinPhoneDisabled"
+          :clearable="!isDisabled"
+          append-inner-icon="mdi mdi-magnify"
+          @append="searchMember"
+          :rules="$rules.required.concat($rules.iinRight)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.phoneNumber"
+          :label="$t('form.phoneNumber')"
+          maska="+7 (7##) ### ## ##"
+          :readonly="isDisabled || isIinPhoneDisabled"
+          :clearable="!isDisabled"
+          :append-inner-icon="otpCondition ? 'mdi mdi-phone-message' : ''"
+          @append="sendOtp(false)"
+          @keyup.enter.prevent="otpCondition ? sendOtp(false) : null"
+          :rules="$rules.required.concat($rules.phoneFormat)"
+        ></base-form-input>
+        <base-fade-transition>
+          <base-form-input
+            v-if="otpCondition && member.otpTokenId"
+            v-model="member.otpCode"
+            :label="$t('form.otpCode')"
+            maska="# # # #"
+            :append-inner-icon="hasOtp ? 'mdi mdi-check' : ''"
+            @keyup.enter.prevent="hasOtp ? checkOtp() : null"
+          ></base-form-input>
+        </base-fade-transition>
+        <base-form-input
+          v-model="member.lastName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.lastName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.firstName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.firstName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.middleName"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.middleName')"
+          :rules="$rules.required.concat($rules.cyrillic)"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.birthDate"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.birthDate')"
+          :rules="$rules.required.concat($rules.birthDate)"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.age"
+          :label="$t('form.age')"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :rules="$rules.required.concat($rules.numbers)"
+        ></base-form-input>
+        <base-panel-input
+          v-model="member.gender"
+          :value="member.gender.nameRu"
+          :readonly="isDisabled || isFromGBD"
+          :clearable="!isDisabled"
+          :label="$t('form.gender')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.gender'), $dataStore.gender, 'gender')"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.familyStatus"
+          :value="member.familyStatus.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.familyStatus')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.familyStatus'), [], 'familyStatus', $dataStore.getFamilyStatuses)"
+        ></base-panel-input>
+        <base-panel-input
+          v-if="(whichForm === formStore.beneficiaryFormKey || whichForm === formStore.insuredFormKey) && member.iin !== formStore.policyholderForm.iin"
+          v-model="member.relationDegree"
+          :value="member.relationDegree.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.relations')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.relations'), [], 'relationDegree', $dataStore.getRelationTypes)"
+        ></base-panel-input>
+        <base-form-input
+          v-if="whichForm === formStore.beneficiaryFormKey"
+          v-model="member.percentageOfPayoutAmount"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.percentageOfPayoutAmount')"
+          :rules="$rules.required.concat($rules.numbers)"
+        ></base-form-input>
+        <base-form-toggle v-if="$dataStore.isGons" :disabled="isDisabled" :has-border="false" v-model="member.isPdl" :title="$dataStore.t('isMemberIPDL')"></base-form-toggle>
+      </base-form-section>
+      <base-form-section :title="$t('policyholdersRepresentative.PowerOfAttorney')" v-if="whichForm === formStore.policyholdersRepresentativeFormKey">
+        <base-form-input
+          v-model="member.fullNameRod"
+          :label="$t('policyholdersRepresentative.NameParentCase')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocTypeKz"
+          :label="$t('policyholdersRepresentative.basisDocKz')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocType"
+          :label="$t('policyholdersRepresentative.basisDocRu')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocTypeRod"
+          :label="$t('policyholdersRepresentative.basisDocRuParentCase')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocNumber"
+          :label="$t('policyholdersRepresentative.numberDoc')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocIssueDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.confirmDocExpireDate"
+          :label="$t('form.documentExpire')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input v-model="member.migrationCard" :label="$t('policyholdersRepresentative.numberVisa')"></base-form-input>
+        <base-form-input
+          v-model="member.migrationCardIssueDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.migrationCardExpireDate"
+          :label="$t('form.documentExpire')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.date"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-form-toggle
+          v-model="formStore.policyholdersRepresentativeForm.isNotary"
+          :disabled="isDisabled"
+          :has-border="false"
+          :title="$t('policyholdersRepresentative.confirmAuthority')"
+        ></base-form-toggle>
+        <base-form-input
+          v-model="member.notaryLongName"
+          :label="$t('policyholdersRepresentative.name')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseNumber"
+          :label="$t('policyholdersRepresentative.numberLicense')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseIssuer"
+          :label="$t('policyholdersRepresentative.documentIssuers')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required : []"
+        ></base-form-input>
+        <base-form-input
+          v-model="member.notaryLicenseDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="formStore.policyholdersRepresentativeForm.isNotary ? $rules.required.concat($rules.date) : []"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.jobData')" v-if="$dataStore.hasJobSection(whichForm)">
+        <base-form-input v-model="member.job" :label="$t('form.job')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPosition" :label="$t('form.jobPosition')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+        <base-form-input v-model="member.jobPlace" :label="$t('form.jobPlace')" :readonly="isDisabled" :clearable="!isDisabled" :rules="$rules.required"></base-form-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.placeRegistration')" v-if="$dataStore.hasPlaceSection(whichForm)">
+        <base-panel-input
+          v-model="member.registrationCountry"
+          :value="member.registrationCountry.nameRu"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :label="$t('form.Country')"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Country'), [], 'registrationCountry', $dataStore.getCountries)"
+        ></base-panel-input>
+        <base-fade-transition>
+          <div class="flex flex-col gap-[1px]" v-if="member.registrationCountry.nameRu === 'Казахстан' || member.registrationCountry.nameRu === null">
+            <base-panel-input
+              v-model="member.registrationProvince"
+              :value="member.registrationProvince.nameRu"
+              :label="$t('form.Province')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.Province'), [], 'registrationProvince', $dataStore.getStates, 'registrationCountry')"
+            ></base-panel-input>
+            <base-panel-input
+              v-model="member.registrationRegionType"
+              :value="member.registrationRegionType.nameRu"
+              :label="$t('form.RegionType')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.RegionType'), [], 'registrationRegionType', $dataStore.getLocalityTypes)"
+            ></base-panel-input>
+            <base-panel-input
+              v-if="member.registrationRegionType.nameRu !== 'город'"
+              v-model="member.registrationRegion"
+              :value="member.registrationRegion.nameRu"
+              :label="$t('form.Region')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.Region'), [], 'registrationRegion', $dataStore.getRegions, 'registrationProvince')"
+            ></base-panel-input>
+            <base-panel-input
+              v-model="member.registrationCity"
+              :value="member.registrationCity.nameRu"
+              :label="$t('form.City')"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :rules="$rules.objectRequired"
+              append-inner-icon="mdi mdi-chevron-right"
+              @append="openPanel($t('form.City'), [], 'registrationCity', $dataStore.getCities, 'registrationProvince')"
+            ></base-panel-input>
+            <!-- <base-form-input v-if="$dataStore.isGons" v-model="member.postIndex" :readonly="isDisabled"
+          :clearable="!isDisabled" :label="$t('form.postIndex')" maska="######"></base-form-input> -->
+            <base-form-input v-model="member.registrationQuarter" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.Quarter')"></base-form-input>
+            <base-form-input v-model="member.registrationMicroDistrict" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.MicroDistrict')"></base-form-input>
+            <base-form-input
+              v-model="member.registrationStreet"
+              :rules="$rules.required"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :label="$t('form.Street')"
+            ></base-form-input>
+            <base-form-input
+              v-model="member.registrationNumberHouse"
+              :rules="$rules.required"
+              :readonly="isDisabled"
+              :clearable="!isDisabled"
+              :label="$t('form.NumberHouse')"
+            ></base-form-input>
+            <base-form-input v-model="member.registrationNumberApartment" :readonly="isDisabled" :clearable="!isDisabled" :label="$t('form.NumberApartment')"></base-form-input>
+          </div>
+        </base-fade-transition>
+      </base-form-section>
+      <base-form-section :title="$t('form.birthData')" v-if="$dataStore.hasBirthSection(whichForm)">
+        <base-panel-input
+          v-model="member.birthPlace"
+          :value="member.birthPlace.nameRu"
+          :label="$t('form.Country')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Country'), [], 'birthPlace', $dataStore.getCountries)"
+        ></base-panel-input>
+        <!-- TODO -->
+        <!-- <base-panel-input
+          v-model="member.birthRegion"
+          :value="member.birthRegion.nameRu"
+          :label="$t('form.Region')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.Region'), [], 'birthRegion', $dataStore.getRegions)"
+        ></base-panel-input> -->
+      </base-form-section>
+      <base-form-section :title="$t('form.documentData')" v-if="$dataStore.hasDocumentSection(whichForm)">
+        <base-panel-input
+          v-model="member.documentType"
+          :value="member.documentType.nameRu"
+          :label="$t('form.documentType')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.documentType'), [], 'documentType', $dataStore.getDocumentTypes)"
+        ></base-panel-input>
+        <base-form-input
+          v-model="member.documentNumber"
+          :label="$t('form.documentNumber')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required"
+        ></base-form-input>
+        <base-file-input v-if="!memberDocument" :disabled="isDisabled" :clearable="!isDisabled" @input="attachFile($event)"></base-file-input>
+        <base-empty-form-field v-if="memberDocument" @click="!isDisabled && openCustomPanel('document')" class="justify-between">
+          {{ `${memberDocument.fileTypeName} - ${memberDocument.fileName}` }}
+          <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i>
+        </base-empty-form-field>
+        <base-panel-input
+          v-model="member.documentIssuers"
+          :value="member.documentIssuers.nameRu"
+          :label="$t('form.documentIssuers')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.documentIssuers'), [], 'documentIssuers', $dataStore.getDocumentIssuers)"
+        ></base-panel-input>
+        <base-form-input
+          v-model="member.documentDate"
+          :label="$t('form.documentDate')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.required.concat($rules.date)"
+          maska="##.##.####"
+          append-inner-icon="mdi mdi-calendar-blank-outline"
+        ></base-form-input>
+        <base-fade-transition>
+          <base-form-input
+            v-if="member.documentType.ids !== 'SBI' && member.documentType.ids !== 'VNZ'"
+            v-model="member.documentExpire"
+            :label="$t('form.documentExpire')"
+            :readonly="isDisabled"
+            :clearable="!isDisabled"
+            :rules="$rules.required.concat($rules.date)"
+            maska="##.##.####"
+            append-inner-icon="mdi mdi-calendar-blank-outline"
+          ></base-form-input>
+        </base-fade-transition>
+        <base-panel-input
+          v-model="member.signOfResidency"
+          :value="member.signOfResidency.nameRu"
+          :label="$t('form.signOfResidency')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.signOfResidency'), [], 'signOfResidency', $dataStore.getResidents)"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.countryOfTaxResidency"
+          :value="member.countryOfTaxResidency.nameRu"
+          :label="$t('form.countryOfTaxResidency')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.countryOfTaxResidency'), [], 'countryOfTaxResidency', $dataStore.getTaxCountries)"
+        ></base-panel-input>
+        <base-fade-transition>
+          <base-panel-input
+            v-if="member.countryOfTaxResidency.ids === '500014.3'"
+            v-model="member.addTaxResidency"
+            :value="member.addTaxResidency.nameRu"
+            :label="$t('form.addTaxResidency')"
+            :readonly="isDisabled"
+            :clearable="!isDisabled"
+            :rules="$rules.objectRequired"
+            append-inner-icon="mdi mdi-chevron-right"
+            @append="openPanel($t('form.addTaxResidency'), [], 'addTaxResidency', $dataStore.getAdditionalTaxCountries)"
+          ></base-panel-input>
+        </base-fade-transition>
+        <base-panel-input
+          v-model="member.signOfIPDL"
+          :value="member.signOfIPDL.nameRu"
+          :label="$t('form.signOfIPDL')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.signOfIPDL'), $dataStore.ipdl, 'signOfIPDL')"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.countryOfCitizenship"
+          :value="member.countryOfCitizenship.nameRu"
+          :label="$t('form.countryOfCitizenship')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.countryOfCitizenship'), [], 'countryOfCitizenship', $dataStore.getCitizenshipCountries)"
+        ></base-panel-input>
+        <base-panel-input
+          v-model="member.economySectorCode"
+          :value="member.economySectorCode.nameRu"
+          :label="$t('form.economySectorCode')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="$rules.objectRequired"
+          append-inner-icon="mdi mdi-chevron-right"
+          @append="openPanel($t('form.economySectorCode'), [], 'economySectorCode', $dataStore.getSectorCodeList)"
+        ></base-panel-input>
+      </base-form-section>
+      <base-form-section :title="$t('form.contactsData')" v-if="$dataStore.hasContactSection(whichForm)">
+        <base-form-input
+          v-model="member.homePhone"
+          maska="+7 (7##) ### ## ##"
+          placeholder="+7 7"
+          :label="$t('form.homePhone')"
+          :readonly="isDisabled"
+          :clearable="!isDisabled"
+          :rules="whichForm === formStore.beneficiaryFormKey ? [] : $rules.phoneFormat"
+        ></base-form-input>
+        <base-form-input v-model.trim="member.email" :label="$t('form.email')" :rules="$rules.email"></base-form-input>
+      </base-form-section>
+    </v-form>
+    <base-btn v-if="!isDisabled && isTask && $dataStore.isInitiator()" :loading="isButtonLoading || isSubmittingForm" :text="$t('buttons.save')" @click="submitForm"></base-btn>
+    <Teleport v-if="isPanelOpen" to="#panel-actions">
+      <div :class="[$libStyles.scrollPage]" class="flex flex-col items-center">
+        <base-rounded-input v-model="searchQuery" :label="$t('labels.search')" class="w-full p-2" :hide-details="true"></base-rounded-input>
+        <div v-if="panelList && isPanelLoading === false" class="w-full flex flex-col gap-2 p-2">
+          <base-panel-select-item :text="$t('form.notChosen')" :selected="panelValue.nameRu === null" @click="pickPanelValue(new Value())"></base-panel-select-item>
+          <base-panel-select-item
+            v-for="(item, index) of panelList.filter(i => i.nameRu && (i.nameRu as string).match(new RegExp(searchQuery, 'i')))"
+            :key="index"
+            :text="item.nameRu as string"
+            :selected="item.nameRu === panelValue.nameRu"
+            @click="pickPanelValue(item)"
+          ></base-panel-select-item>
+        </div>
+        <base-loader v-if="isPanelLoading" class="absolute mt-10" :size="50"></base-loader>
+      </div>
+    </Teleport>
+    <Teleport v-if="isSearchOpen" to="#panel-actions">
+      <div :class="[$libStyles.flexColNav]">
+        <base-btn v-if="$dataStore.controls.hasGBDFL" :loading="isButtonLoading" :text="$t('buttons.fromGBDFL')" @click="getContragentFromGBDFL"></base-btn>
+        <base-btn v-if="$dataStore.controls.hasInsis" :loading="isButtonLoading" :text="$t('buttons.fromInsis')" @click="getContragent"></base-btn>
+      </div>
+    </Teleport>
+    <Teleport v-if="isDocumentOpen" to="#panel-actions">
+      <div :class="[$libStyles.flexColNav]">
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Открыть" @click="getFile('view')"></base-btn>
+        <base-btn :disabled="documentLoading" :loading="documentLoading" text="Скачать" @click="getFile('download')"></base-btn>
+      </div>
+    </Teleport>
+  </section>
+</template>
+
+<script lang="ts">
+import { LocationQueryValue } from 'vue-router';
+import { Value, DocumentItem } from '@/composables/classes';
+import { uuid } from 'vue-uuid';
+
+export default {
+  setup() {
+    type FileActions = 'view' | 'download';
+
+    const vForm = ref<any>();
+    const route = useRoute();
+    const router = useRouter();
+    const dataStore = useDataStore();
+    const formStore = useFormStore();
+    const memberStore = useMemberStore();
+    const getMember = (whichForm: LocationQueryValue | LocationQueryValue[], whichIndex?: LocationQueryValue | LocationQueryValue[]) =>
+      memberStore.getMemberFromStore(whichForm as keyof typeof formStore, Number((whichIndex ? whichIndex : '0') as string))!;
+    const member = ref(getMember(route.query.tab, route.query.i));
+    const isPanelOpen = ref<boolean>(false);
+    const memberDocument = ref<DocumentItem>();
+    const isButtonLoading = ref<boolean>(false);
+    const isSubmittingForm = ref<boolean>(false);
+    const documentLoading = ref<boolean>(false);
+    const isSearchOpen = ref<boolean>(false);
+    const isDocumentOpen = ref<boolean>(false);
+    const isPanelLoading = ref<boolean>(false);
+    const panelValue = ref<Value>(new Value());
+    const panelList = ref<Value[]>([]);
+    const currentPanel = ref<keyof typeof member.value>();
+    const searchQuery = ref<string>('');
+    const fileData = ref<{ file: any }>();
+
+    const whichForm = computed(() => route.query.tab);
+    const whichIndex = computed(() => route.query.i);
+    const hasOtp = computed(() => member.value.otpCode && member.value.otpCode.length === 7);
+    const isDisabled = computed(() => !memberStore.isStatementEditible(whichForm.value as string));
+    const isTask = computed(() => route.params.taskId === '0' || dataStore.isTask());
+    const isIinPhoneDisabled = computed(() => formStore.applicationData && 'regNumber' in formStore.applicationData && whichForm.value === formStore.policyholderFormKey);
+    const isFromGBD = computed(() => !!member.value.gosPersonData);
+
+    const getOtpConditionByMember = () => {
+      switch (whichForm.value) {
+        case formStore.policyholderFormKey:
+          return route.params.taskId === '0';
+        case formStore.policyholdersRepresentativeFormKey:
+          return route.query.id === '0';
+        case formStore.insuredFormKey:
+          return route.query.id === '0';
+        case formStore.beneficiaryFormKey:
+          return route.query.id === '0';
+        case formStore.beneficialOwnerFormKey:
+          return route.query.id === '0';
+      }
+    };
+    const otpCondition = computed(() => {
+      // Add conditions by product
+      if (member.value.hasAgreement) return false;
+      if (!member.value.phoneNumber || (member.value.phoneNumber && member.value.phoneNumber.length !== 18)) return false;
+      return getOtpConditionByMember();
+    });
+
+    const searchMember = async () => {
+      if (!isDisabled.value) {
+        dataStore.panelAction = null;
+        dataStore.panel.title = 'Поиск клиента';
+        dataStore.panel.open = true;
+        isSearchOpen.value = true;
+        isDocumentOpen.value = false;
+        isPanelOpen.value = false;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const openCustomPanel = (type: 'document' = 'document') => {
+      dataStore.panelAction = null;
+      if (type === 'document' && memberDocument.value) {
+        dataStore.panel.title = memberDocument.value.fileTypeName!;
+        isDocumentOpen.value = true;
+        isSearchOpen.value = false;
+        isPanelOpen.value = false;
+      }
+      dataStore.panel.open = true;
+    };
+
+    const openPanel = async (title: string, list: Value[], key: string, asyncFunction?: Function, filterKey?: string) => {
+      if (!isDisabled.value) {
+        isSearchOpen.value = false;
+        isDocumentOpen.value = false;
+        // Feature
+        // const notAllowedToChange = ['gender', 'documentType', 'documentIssuers'];
+        // if (member.value.gotFromInsis === false && notAllowedToChange.includes(key)) {
+        //   dataStore.showToaster('error', 'Запрещенео менять значения этого поля');
+        //   return;
+        // }
+        searchQuery.value = '';
+        currentPanel.value = key as keyof typeof member.value;
+        isPanelOpen.value = true;
+        dataStore.panelAction = null;
+        dataStore.panel.open = true;
+        dataStore.panel.title = title;
+
+        let newList = list;
+        if (asyncFunction) {
+          isPanelLoading.value = true;
+          newList = await asyncFunction(filterKey, member.value);
+        }
+        panelList.value = newList;
+        panelValue.value = member.value[currentPanel.value];
+        isPanelLoading.value = false;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const pickPanelValue = (item: Value) => {
+      if (formStore.isDisabled[whichForm.value as keyof typeof formStore.isDisabled] === false) {
+        dataStore.panel.open = false;
+        isPanelOpen.value = false;
+        // @ts-ignore
+        member.value[currentPanel.value] = item.nameRu === null ? new Value() : item;
+      } else {
+        dataStore.showToaster('error', dataStore.t('toaster.viewErrorText'));
+      }
+    };
+
+    const uploadFile = async (processInstanceId: string | number) => {
+      const selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.nameRu === member.value.documentType.nameRu);
+      const formData = new FormData();
+      const information: any = [];
+      const uuidV4 = uuid.v4();
+      if (fileData.value) {
+        Object.values(fileData.value.file).map((value: any) => {
+          formData.append('file', value);
+          const ext = value.name.substr(value.name.lastIndexOf('.'));
+          information.push({
+            identifier: `${uuidV4}${ext}`,
+            iin: member.value.iin ? member.value.iin.replaceAll('-', '') : null,
+            processInstanceId: processInstanceId,
+            fileTypeCode: selectedDocument ? selectedDocument.code : null,
+            fileTypeId: selectedDocument ? selectedDocument.id : null,
+            fileName: value.name,
+          });
+        });
+        formData.append('fileData', JSON.stringify(information));
+        await dataStore.uploadFiles(formData, false);
+      }
+    };
+
+    const attachFile = (event: InputEvent) => {
+      if (event.target) {
+        fileData.value = { file: (event.target as HTMLInputElement).files };
+      } else {
+        if (event.dataTransfer) {
+          fileData.value = { file: (event.dataTransfer as DataTransfer).files };
+        }
+      }
+    };
+
+    const getFile = async (type: FileActions) => {
+      if (memberDocument.value) {
+        documentLoading.value = true;
+        const fileExtension = memberDocument.value.fileName!.match(/\.([0-9a-z]+)(?:[\?#]|$)/i)![1];
+        await dataStore.getFile(memberDocument.value, type, fileExtension);
+        documentLoading.value = false;
+      }
+    };
+
+    const getContragentFromGBDFL = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'), 3000);
+        return;
+      }
+      if (!member.value.iin || member.value.iin.length !== 15 || !member.value.phoneNumber || member.value.phoneNumber.length !== 18) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', 'Номер телефона, ИИН'), 5000);
+        return;
+      }
+      isButtonLoading.value = true;
+      await dataStore.getContragentFromGBDFL(member.value.iin, member.value.phoneNumber, whichForm.value, whichIndex.value ? Number(whichIndex.value) : null);
+      member.value.gotFromInsis = true;
+      isSearchOpen.value = false;
+      dataStore.panel.open = false;
+      isButtonLoading.value = false;
+    };
+
+    const getContragent = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'), 3000);
+        return;
+      }
+      if (!member.value.iin || member.value.iin.length !== 15) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', 'ИИН'), 5000);
+        return;
+      }
+      isButtonLoading.value = true;
+      await dataStore.getContragent(member.value, whichForm.value, whichIndex.value, false);
+      isSearchOpen.value = false;
+      dataStore.panel.open = false;
+      isButtonLoading.value = false;
+    };
+
+    const validateESBD = async (docTypeNumber: number) => {
+      const data = {
+        personType: 1,
+        iin: member.value.iin!.replaceAll('-', ''),
+        lastName: member.value.lastName,
+        firstName: member.value.firstName,
+        middleName: member.value.middleName,
+        birthDate: member.value.getDateByKey('birthDate'),
+        sex: member.value.gender.id,
+        docType: docTypeNumber,
+        docNumber: member.value.documentNumber,
+        docIssuedDate: member.value.getDateByKey('documentDate'),
+        docIssuedBy: member.value.documentIssuers.nameRu,
+        activityKindId: 0,
+        economicsSectorId: Number((member.value.economySectorCode.ids! as string).at(-1)),
+        resident: member.value.signOfResidency.ids === '500011.2' || member.value.signOfResidency.ids === null ? 0 : 1,
+        countryId: Number((member.value.countryOfTaxResidency.ids! as string).at(-1)),
+      };
+      return await dataStore.getValidateClientESBD(data);
+    };
+
+    const saveMember = async () => {
+      const hasSaved = await dataStore.saveContragent(member.value, whichForm.value, whichIndex.value, true);
+      if (hasSaved === false) {
+        dataStore.isLoading = false;
+        return false;
+      }
+      const isInsured = formStore.isPolicyholderInsured;
+      if (whichForm.value == formStore.policyholderFormKey) {
+        if (route.params.taskId === '0') {
+          try {
+            const taskId = await dataStore.startApplication(member.value);
+            if (taskId) {
+              await dataStore.getApplicationData(taskId, false, false, false, false);
+              await router.replace({
+                name: route.name!,
+                params: { taskId },
+                query: { ...route.query },
+              });
+              dataStore.showToaster('success', dataStore.t('toaster.successStatementCreation'));
+            } else {
+              formStore.applicationData = { processInstanceId: 0 };
+              return;
+            }
+            dataStore.isLoading = false;
+          } catch (err) {
+            formStore.applicationData = { processInstanceId: 0 };
+            dataStore.isLoading = false;
+            return;
+          }
+        }
+        if (fileData.value && fileData.value.file) {
+          await uploadFile(formStore.applicationData.processInstanceId);
+        }
+      }
+      const memberFromApplicaiton = memberStore.getMemberFromApplication(whichForm.value as keyof typeof formStore, whichIndex.value ? Number(whichIndex.value) : undefined);
+      const isSaved = await dataStore.saveMember(member.value, memberStore.getMemberCode(whichForm.value as keyof typeof formStore), memberFromApplicaiton);
+      if (!isSaved) return false;
+      if (whichForm.value === formStore.policyholderFormKey && isInsured === true) {
+        formStore.insuredForm[0] = formStore.policyholderForm;
+        const isInsuredSaved = await dataStore.saveMember(
+          member.value,
+          memberStore.getMemberCode(formStore.insuredFormKey as keyof typeof formStore),
+          memberStore.getMemberFromApplication(formStore.insuredFormKey as keyof typeof formStore, formStore.insuredFormIndex),
+        );
+        if (!isInsuredSaved) return false;
+      }
+      await router.replace({
+        name: route.name!,
+        query: { ...route.query, id: member.value.id },
+      });
+      await dataStore.getApplicationData(route.params.taskId, false, false, false, false);
+      if (dataStore.controls.hasCalculator) {
+        if (dataStore.additionalInsuranceTermsWithout && dataStore.additionalInsuranceTermsWithout.length !== 0) {
+          dataStore.additionalInsuranceTerms.forEach((term: any) => {
+            const defaultTerm = dataStore.additionalInsuranceTermsWithout.find((i: any) => i.coverTypeId === term.coverTypeId);
+            if (defaultTerm) {
+              term.coverSumName = defaultTerm.coverSumName;
+              term.coverSumId = defaultTerm.coverSumId;
+            }
+          });
+        }
+      }
+      dataStore.showToaster('success', dataStore.t('toaster.successSaved'));
+      dataStore.isLoading = false;
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    const submitForm = async () => {
+      if (member.value.hasAgreement === false) {
+        dataStore.showToaster('error', dataStore.t('toaster.needAgreement'));
+        return;
+      }
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          isSubmittingForm.value = true;
+          const docType = member.value.documentType.ids;
+          if (member.value.gotFromInsis === true && (docType === '1UDL' || docType === 'SBI')) {
+            dataStore.isLoading = true;
+            const ESBDResponse = await validateESBD(docType === '1UDL' ? 1 : 3);
+            if (!ESBDResponse) {
+              dataStore.isLoading = false;
+              return;
+            }
+            const initialPoint = `${member.value.iin!.replaceAll('-', '')}.`;
+            const RESPONSE = ESBDMessage(ESBDResponse, initialPoint);
+            let errorMessage = RESPONSE !== false ? RESPONSE : 'Что-то произошло не так';
+            if (ESBDResponse.errorCode === 0) {
+              member.value.verifyType = 'ESBD';
+              member.value.verifyDate = ESBDResponse.verifiedDate;
+              const hasMemberSaved = await saveMember();
+            } else {
+              dataStore.isLoading = false;
+              dataStore.showToaster('error', errorMessage, 5000);
+            }
+          } else {
+            member.value.gotFromInsis = true;
+            const hasMemberSaved = await saveMember();
+          }
+          isSubmittingForm.value = false;
+        } else {
+          const errors = document.querySelector('.v-input--error');
+          if (errors) {
+            const errorText = errors.querySelector('.v-label.v-field-label');
+            if (errorText) {
+              dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorText.innerHTML?.replace(/[-<>!//.]/g, '')));
+            } else {
+              const errorFieldText = errors.querySelector('.v-input__control');
+              if (errorFieldText) {
+                dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', errorFieldText.innerHTML?.replace(/[-<>!//.]/g, '')));
+              }
+            }
+            errors.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+              inline: 'nearest',
+            });
+          }
+        }
+      });
+    };
+
+    const checkOtp = async () => {
+      if (!member.value.otpCode || member.value.iin?.length !== 15 || member.value.phoneNumber?.length !== 18) {
+        dataStore.showToaster('error', dataStore.t('toaster.errorFormField').replace('{text}', dataStore.t('form.otpCode')), 3000);
+        return;
+      }
+      const checked = await memberStore.checkOtp(member.value);
+      if (typeof checked !== 'undefined') {
+        member.value.hasAgreement = checked;
+      }
+    };
+
+    const sendOtp = async (onInit = false) => {
+      const response = await memberStore.sendOtp(member.value, formStore.applicationData.processInstanceId, onInit);
+      if (response) {
+        if (member.value.hasAgreement === null) member.value.hasAgreement = response.otpStatus;
+      }
+    };
+
+    const onInit = async () => {
+      if (route.params.taskId === '0' || (route.params.taskId !== '0' && dataStore.isProcessEditable(formStore.applicationData.statusCode))) {
+        await dataStore.getSignedDocList(formStore.applicationData.processInstanceId);
+      }
+      if (getOtpConditionByMember()) {
+        await sendOtp(true);
+      } else {
+        if (member.value.hasAgreement === null) member.value.hasAgreement = true;
+      }
+      if (route.query.id !== '0' && !member.value.id) {
+        await dataStore.getContragentById(route.query.id, whichForm.value, true);
+      }
+      if (member.value.id && route.query.id === '0') {
+        await router.replace({
+          name: route.name!,
+          query: { ...route.query, id: member.value.id },
+        });
+      }
+      if (member.value.id) {
+        const filteredDocuments: DocumentItem[] = dataStore.getFilesByIIN(member.value.iin!.replace(/-/g, '')) as DocumentItem[];
+        if (filteredDocuments && filteredDocuments.length) memberDocument.value = filteredDocuments[0];
+      }
+    };
+
+    onMounted(async () => {
+      await onInit();
+    });
+
+    onBeforeRouteUpdate(to => {
+      if ('tab' in to.query && to.query.tab !== 'productConditions') {
+        member.value = getMember(to.query.tab, to.query.i);
+      }
+    });
+
+    watch(
+      () => member.value.percentageOfPayoutAmount,
+      val => {
+        if (val) {
+          if (val < 0) {
+            member.value.percentageOfPayoutAmount = 0;
+            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+          } else if (val > 100) {
+            member.value.percentageOfPayoutAmount = 100;
+            dataStore.showToaster('error', dataStore.t('toaster.incorrectInput'), 1000);
+          }
+        }
+      },
+    );
+
+    watch(
+      () => member.value.birthDate,
+      val => {
+        if (val && val.length === 10) {
+          const calculatedAge = member.value.getAgeByBirthDate();
+          if (calculatedAge) member.value.age = calculatedAge;
+        }
+      },
+    );
+
+    watch(
+      () => member.value.otpCode,
+      async () => {
+        if (member.value.otpCode && member.value.otpCode.length === 7) {
+          await checkOtp();
+        }
+      },
+    );
+
+    watch(
+      () => dataStore.panel.open,
+      () => {
+        if (dataStore.panel.open === false) {
+          isPanelOpen.value = false;
+          isDocumentOpen.value = false;
+          isSearchOpen.value = false;
+          dataStore.panelAction = null;
+        }
+      },
+      { immediate: true },
+    );
+
+    watch(searchQuery, () => {
+      if (searchQuery.value === null) {
+        searchQuery.value = '';
+      }
+    });
+
+    return {
+      // State
+      vForm,
+      formStore,
+      memberStore,
+      member,
+      isPanelOpen,
+      isSearchOpen,
+      isDocumentOpen,
+      isPanelLoading,
+      isButtonLoading,
+      isSubmittingForm,
+      documentLoading,
+      panelValue,
+      panelList,
+      searchQuery,
+      Value,
+      memberDocument,
+
+      // Computed
+      whichForm,
+      whichIndex,
+      otpCondition,
+      hasOtp,
+      isDisabled,
+      isTask,
+      isIinPhoneDisabled,
+      isFromGBD,
+
+      // Functions
+      searchMember,
+      openPanel,
+      openCustomPanel,
+      pickPanelValue,
+      submitForm,
+      checkOtp,
+      sendOtp,
+      getContragentFromGBDFL,
+      getContragent,
+      attachFile,
+      getFile,
+    };
+  },
+};
+</script>