From 20c1c455c45b42ebe7f294f28dd03dd337fc9590 Mon Sep 17 00:00:00 2001
From: TsMask <340112800@qq.com>
Date: Thu, 14 Nov 2024 20:08:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DTelInput=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=8F=B7=E7=A0=81=E6=97=A0=E6=B3=95=E8=A7=A3=E6=9E=90?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IntlTelInput/index.vue      | 35 ++++++++++------------
 src/typings/vite-env.d.ts                  |  5 ++++
 src/views/account/components/base-info.vue |  2 +-
 src/views/system/user/index.vue            |  2 +-
 4 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/IntlTelInput/index.vue b/src/components/IntlTelInput/index.vue
index 7a6d7d90..314a7a05 100644
--- a/src/components/IntlTelInput/index.vue
+++ b/src/components/IntlTelInput/index.vue
@@ -1,9 +1,9 @@
 <!-- https://github.com/jackocnr/intl-tel-input/blob/master/react/src/intl-tel-input/react.tsx -->
 <script lang="ts" setup>
-import intlTelInput, { Iti, SomeOptions } from 'intl-tel-input';
+import { Iti } from 'intl-tel-input';
+import intlTelInput from 'intl-tel-input/intlTelInputWithUtils';
 import 'intl-tel-input/build/css/intlTelInput.min.css';
-import 'intl-tel-input/build/js/utils.js';
-import { ref, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import useI18n from '@/hooks/useI18n';
 const { currentLocale } = useI18n();
 const emit = defineEmits(['update:value', 'update:change']);
@@ -45,13 +45,13 @@ const itiRef = ref<Iti | null>(null);
 function fnChange() {
   if (!itiRef.value) return;
 
-  const num = itiRef.value?.getNumber() || '';
+  const number = itiRef.value?.getNumber() || '';
   const countryIso = itiRef.value?.getSelectedCountryData().iso2 || '';
   // note: this number will be in standard E164 format, but any container component can use
   // intlTelInputUtils.formatNumber() to convert this to another format
   // as well as intlTelInputUtils.getNumberType() etc. if need be
   let data = {
-    num,
+    number,
     countryIso,
     validity: false,
     errorCode: -1,
@@ -69,21 +69,11 @@ function fnChange() {
     data.errorCode = errorCode;
   }
   // console.log(data);
-  emit('update:value', num);
+
+  emit('update:value', number);
   emit('update:change', data);
 }
 
-watch(
-  () => props.value,
-  v => {
-    if (v) {
-      itiRef.value?.setNumber(v);
-    } else {
-      itiRef.value?.setNumber('');
-    }
-  }
-);
-
 onMounted(() => {
   nextTick(async () => {
     if (inputRef.value) {
@@ -106,7 +96,13 @@ onMounted(() => {
         formatOnDisplay: true,
         autoPlaceholder: 'polite',
         i18n: i18n,
-      } as SomeOptions);
+      });
+      if (props.value) {
+        itiRef.value.setNumber(props.value);
+      }
+      if (props.disabled) {
+        itiRef.value.setDisabled(props.disabled);
+      }
       inputRef.value.addEventListener('countrychange', fnChange);
     }
   });
@@ -124,8 +120,7 @@ onBeforeUnmount(() => {
   <input
     type="tel"
     class="ant-input"
-    ref="inputRef"
-    :value="value"
+    ref="inputRef" 
     :disabled="disabled"
     :placeholder="placeholder"
     :maxlength="maxlength"
diff --git a/src/typings/vite-env.d.ts b/src/typings/vite-env.d.ts
index 5713034d..5e910109 100644
--- a/src/typings/vite-env.d.ts
+++ b/src/typings/vite-env.d.ts
@@ -8,3 +8,8 @@ declare module '*.vue' {
 }
 
 declare module 'vue3-smooth-dnd';
+
+declare module 'intl-tel-input/intlTelInputWithUtils' {
+  import intlTelInput from 'intl-tel-input';
+  export default intlTelInput;
+}
diff --git a/src/views/account/components/base-info.vue b/src/views/account/components/base-info.vue
index 7287b028..77d99f9f 100644
--- a/src/views/account/components/base-info.vue
+++ b/src/views/account/components/base-info.vue
@@ -169,7 +169,7 @@ onMounted(() => {
           <IntlTelInput
             v-model:value="stateForm.form.phonenumber"
             allow-clear
-            :maxlength="16"
+            :maxlength="20"
             :placeholder="t('views.account.settings.phonenumberPleace')"
           ></IntlTelInput>
         </a-form-item>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index fbe844bb..f30d787c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1367,7 +1367,7 @@ onMounted(() => {
               <IntlTelInput
                 v-model:value="modalState.from.phonenumber"
                 allow-clear
-                :maxlength="16"
+                :maxlength="20"
                 :placeholder="t('common.inputPlease')"
               ></IntlTelInput>
             </a-form-item>