修改车险报价页面日期自动添加横杠的bug，修改完日期最新值无法更新的bug

src/utils/dataformat.ts

@@ -1,51 +1,44 @@
-// 获取 dom 方法
-export function gainFocus(e: string, data: any[]) {
+// 获取 dom 方法 - 给输入框添加格式化处理，并更新响应式数据
+export function gainFocus(elementId: string, formObj: any, fieldName: string) {
 
-  // 检查元素是否存在
-  const container = document.getElementById(e);
+  const container = document.getElementById(elementId);
   if (!container) {
-    return data;
+    return;
   }
   const inputs = container.getElementsByTagName("input");
-  // 只处理前八个输入元素
-  const maxInputs = 8;
-  const inputCount = Math.min(inputs.length, maxInputs);
-  for (let i = 0; i < inputCount; i++) {
+  for (let i = 0; i < inputs.length; i++) {
     const input = inputs[i];
-    input.addEventListener("input", createTapEvent(input, i));
+    if ((input as any)._formattedBound) continue;
+    (input as any)._formattedBound = true;
+    input.addEventListener("input", createTapEvent(input));
   }
-  if (inputs.length > maxInputs) {
-  }
-  // 创建事件处理函数
-  function createTapEvent(input: any, index: number) {
+
+  function createTapEvent(input: any) {
     return function() {
-      // 保存当前光标位置
+      // 防止 dispatchEvent 触发递归
+      if ((input as any)._isFormatting) return;
+      (input as any)._isFormatting = true;
+
       const cursorPosition = input.selectionStart;
       const oldValue = input.value;
-
-      // 计算光标前有多少个数字
       const digitsBeforeCursor = oldValue.substring(0, cursorPosition).replace(/[^0-9]/g, '').length;
 
       setTimeout(() => {
         const formattedValue = disposeData(input.value);
         input.value = formattedValue;
-
-        // 根据光标前的数字个数，计算在新字符串中的位置
         const newCursorPosition = getCursorPosition(formattedValue, digitsBeforeCursor);
-
-        // 恢复光标位置
         input.setSelectionRange(newCursorPosition, newCursorPosition);
 
-        // 确保数据更新
-        if(Array.isArray(data) && index < data.length) {
-          // 使用splice方法更新数组，确保 Vue 3 能够检测到变化
-          data.splice(index, 1, formattedValue);
-        }
+        // 触发 input 事件让 Vue 的 v-model 自动捕获值的变化
+        const event = new Event('input', { bubbles: true });
+        input.dispatchEvent(event);
+
+        // 重置标志位
+        (input as any)._isFormatting = false;
       }, 0);
     };
   }
 
-  // 根据数字个数计算光标在格式化字符串中的位置
   function getCursorPosition(formattedValue: string, digitCount: number) {
     let count = 0;
     for (let i = 0; i < formattedValue.length; i++) {
@@ -58,8 +51,6 @@ export function gainFocus(e: string, data: any[]) {
     }
     return formattedValue.length;
   }
-  console.log(data);
-  return data;
 }
 
 // 更改格式 - 智能格式化日期时间字符串

src/views/additionalOrder/additional/index.vue

@@ -246,7 +246,7 @@
                       <div id="registerDate" style="width: 100%">
                         <el-date-picker v-model="additionalForm.registerDate" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 100%"
-                          @focus="inParkingDataFocus('registerDate', additionalForm.registerDate)" />
+                          @focus="inParkingDataFocus('registerDate', 'registerDate')" />
                       </div>
 
                     </el-form-item>
@@ -256,7 +256,7 @@
                       <div id="issueDate" style="width: 100%">
                         <el-date-picker v-model="additionalForm.issueDate" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 100%"
-                          @focus="inParkingDataFocus('issueDate', additionalForm.issueDate)" />
+                          @focus="inParkingDataFocus('issueDate', 'issueDate')" />
                       </div>
                     </el-form-item>
                   </el-col>
@@ -408,7 +408,7 @@
                   <div id="registerDate1" style="width: 100%">
                     <el-date-picker v-model="additionalForm.registerDate" type="date" placeholder="请选择"
                       value-format="YYYY-MM-DD" style="width: 100%"
-                      @focus="inParkingDataFocus('registerDate1', additionalForm.registerDate)" />
+                      @focus="inParkingDataFocus('registerDate1', 'registerDate')" />
                   </div>
                 </el-form-item>
               </el-col>
@@ -417,7 +417,7 @@
                   <div id="issueDate1" style="width: 100%">
                     <el-date-picker v-model="additionalForm.issueDate" type="date" placeholder="请选择"
                       value-format="YYYY-MM-DD" style="width: 100%"
-                      @focus="inParkingDataFocus('issueDate1', additionalForm.issueDate)" />
+                      @focus="inParkingDataFocus('issueDate1', 'issueDate')" />
                   </div>
                 </el-form-item>
               </el-col>
@@ -575,7 +575,7 @@
                       <div id="identifyValidDate1" style="width: 100%">
                         <el-date-picker v-model="additionalForm.identifyValidDate1" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 100%"
-                          @focus="inParkingDataFocus('identifyValidDate1', additionalForm.identifyValidDate1)" />
+                          @focus="inParkingDataFocus('identifyValidDate1', 'identifyValidDate1')" />
                       </div>
                     </el-form-item>
                   </el-col>
@@ -585,7 +585,7 @@
                         style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                         <el-date-picker v-model="additionalForm.identifyValidEndDate1" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 80%"
-                          @focus="inParkingDataFocus('identifyValidEndDate1', additionalForm.identifyValidEndDate1)" />
+                          @focus="inParkingDataFocus('identifyValidEndDate1', 'identifyValidEndDate1')" />
                         <el-button type="primary" @click="longTime(1)">长期</el-button>
                       </div>
                     </el-form-item>
@@ -692,7 +692,7 @@
                   <div id="identifyValidDate2" style="width: 100%">
                     <el-date-picker v-model="additionalForm.identifyValidDate1" type="date" placeholder="请选择"
                       value-format="YYYY-MM-DD" style="width: 100%"
-                      @focus="inParkingDataFocus('identifyValidDate2', additionalForm.identifyValidDate1)" />
+                      @focus="inParkingDataFocus('identifyValidDate2', 'identifyValidDate2')" />
                   </div>
                 </el-form-item>
               </el-col>
@@ -702,7 +702,7 @@
                     style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                     <el-date-picker v-model="additionalForm.identifyValidEndDate1" type="date" placeholder="请选择"
                       value-format="YYYY-MM-DD" style="width: 80%"
-                      @focus="inParkingDataFocus('identifyValidEndDate2', additionalForm.identifyValidEndDate1)" />
+                      @focus="inParkingDataFocus('identifyValidEndDate2', 'identifyValidEndDate2')" />
                     <el-button type="primary" @click="longTime(1)">长期</el-button>
                   </div>
                 </el-form-item>
@@ -873,7 +873,7 @@
                       <div id="identifyValidDate3" style="width: 100%">
                         <el-date-picker v-model="additionalForm.identifyValidDate2" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 100%"
-                          @focus="inParkingDataFocus('identifyValidDate3', additionalForm.identifyValidDate2)" />
+                          @focus="inParkingDataFocus('identifyValidDate3', 'identifyValidDate3')" />
                       </div>
                     </el-form-item>
                   </el-col>
@@ -883,7 +883,7 @@
                         style="display: flex; align-items: center; justify-content: space-between; width: 100%">
                         <el-date-picker v-model="additionalForm.identifyValidEndDate2" type="date" placeholder="请选择"
                           value-format="YYYY-MM-DD" style="width: 80%"
-                          @focus="inParkingDataFocus('identifyValidEndDate3', additionalForm.identifyValidEndDate2)" />
+                          @focus="inParkingDataFocus('identifyValidEndDate3', 'identifyValidEndDate3')" />
                         <el-button type="primary" @click="longTime(2)">长期</el-button>
                       </div>
                     </el-form-item>
@@ -2154,9 +2154,8 @@ const taps = ref([
     active: equities1
   }
 ])
-const inParkingDataFocus = (e: string, data: any) => {
-  const arr = gainFocus(e, data)
-  data = arr
+const inParkingDataFocus = (e: string, fieldName: string) => {
+  gainFocus(e, additionalForm, fieldName);
 }
 const handleTap = (item, index) => {
   tapIndex.value = index
@@ -4892,4 +4891,4 @@ onMounted(() => {
     padding: 0;
   }
 }
-</style>
+</style>

src/views/insurancePolicy/index.vue

@@ -137,7 +137,7 @@
                 <div id="registerDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.registerDate" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
-                    @focus="inParkingDataFocus('registerDate', insurancePolicyForm.registerDate)" />
+                    @focus="inParkingDataFocus('registerDate', 'registerDate')" />
                 </div>
               </el-form-item>
             </el-col>
@@ -147,7 +147,7 @@
                 <div id="issueDate" style="width: 100%">
                   <el-date-picker v-model="insurancePolicyForm.issueDate" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%" @change="issueDateChange"
-                    @focus="inParkingDataFocus('issueDate', insurancePolicyForm.issueDate)" />
+                    @focus="inParkingDataFocus('issueDate', 'issueDate')" />
                 </div>
               </el-form-item>
             </el-col>
@@ -294,7 +294,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate1" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
                     @blur="(e: any) => insurancePolicyForm.identifyValidDate1 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidDate1', insurancePolicyForm.identifyValidDate1)" />
+                    @focus="inParkingDataFocus('identifyValidDate1', 'identifyValidDate1')" />
                 </div>
 
               </el-form-item>
@@ -306,7 +306,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate1" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: calc(100% - 64px)"
                     @blur="(e: any) => insurancePolicyForm.identifyValidEndDate1 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidEndDate1', insurancePolicyForm.identifyValidEndDate1)" />
+                    @focus="inParkingDataFocus('identifyValidEndDate1', 'identifyValidEndDate1')" />
                   <el-button type="primary" @click="longTime">长期</el-button>
                 </div>
               </el-form-item>
@@ -449,7 +449,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate2" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
                     @blur="(e: any) => insurancePolicyForm.identifyValidDate2 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidDate2', insurancePolicyForm.identifyValidDate2)" />
+                    @focus="inParkingDataFocus('identifyValidDate2', 'identifyValidDate2')" />
                 </div>
               </el-form-item>
             </el-col>
@@ -459,7 +459,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate2" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
                     @blur="(e: any) => insurancePolicyForm.identifyValidEndDate2 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidEndDate2', insurancePolicyForm.identifyValidEndDate2)" />
+                    @focus="inParkingDataFocus('identifyValidEndDate2', 'identifyValidEndDate2')" />
                 </div>
               </el-form-item>
             </el-col>
@@ -595,7 +595,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidDate3" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
                     @blur="(e: any) => insurancePolicyForm.identifyValidDate3 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidDate3', insurancePolicyForm.identifyValidDate3)" />
+                    @focus="inParkingDataFocus('identifyValidDate3', 'identifyValidDate3')" />
                 </div>
               </el-form-item>
 
@@ -606,7 +606,7 @@
                   <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate3" type="date" placeholder="请选择"
                     value-format="YYYY-MM-DD" style="width: 100%"
                     @blur="(e: any) => insurancePolicyForm.identifyValidEndDate3 = changeDate(e)"
-                    @focus="inParkingDataFocus('identifyValidEndDate3', insurancePolicyForm.identifyValidEndDate3)" />
+                    @focus="inParkingDataFocus('identifyValidEndDate3', 'identifyValidEndDate3')" />
                 </div>
               </el-form-item>
             </el-col>
@@ -861,7 +861,7 @@
                   <el-date-picker v-model="insurancePolicyForm.JQStartDate" type="datetime" placeholder="请选择"
                     value-format="YYYY-MM-DD HH:mm:ss" style="width: 250px" @change="jqChange"
                     :disabled-date="disabledDate"
-                    @focus="inParkingDataFocus('JQStartDate', insurancePolicyForm.JQStartDate)" />
+                    @focus="inParkingDataFocus('JQStartDate', 'JQStartDate')" />
                 </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
@@ -870,7 +870,7 @@
                   <el-date-picker v-model="insurancePolicyForm.JQEndDate" type="datetime" placeholder="请选择"
                     value-format="YYYY-MM-DD HH:mm:ss" style="width: 250px" @change="jqChange"
                     :disabled-date="disabledDate"
-                    @focus="inParkingDataFocus('JQEndDate', insurancePolicyForm.JQEndDate)" />
+                    @focus="inParkingDataFocus('JQEndDate', 'JQEndDate')" />
                 </div>
               </el-form-item>
             </div>
@@ -886,7 +886,7 @@
                   <el-date-picker v-model="insurancePolicyForm.SYStartDate" type="datetime" placeholder="请选择"
                     value-format="YYYY-MM-DD HH:mm:ss" style="width: 250px" @change="syChange"
                     :disabled-date="disabledDate"
-                    @focus="inParkingDataFocus('SYStartDate', insurancePolicyForm.SYStartDate)" />
+                    @focus="inParkingDataFocus('SYStartDate', 'SYStartDate')" />
                 </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
@@ -895,7 +895,7 @@
                   <el-date-picker v-model="insurancePolicyForm.SYEndDate" type="datetime" placeholder="请选择"
                     value-format="YYYY-MM-DD HH:mm:ss" style="width: 250px" @change="syChange"
                     :disabled-date="disabledDate"
-                    @focus="inParkingDataFocus('SYEndDate', insurancePolicyForm.SYEndDate)" />
+                    @focus="inParkingDataFocus('SYEndDate', 'SYEndDate')" />
                 </div>
               </el-form-item>
             </div>
@@ -1594,9 +1594,8 @@ const changeDate = (e: any) => {
   return dayjs(e.target.value).format('YYYY-MM-DD')
 }
 
-const inParkingDataFocus = (e: string, data: any) => {
-  const arr = gainFocus(e, data)
-  data = arr
+const inParkingDataFocus = (e: string, fieldName: string) => {
+  gainFocus(e, insurancePolicyForm, fieldName);
 }
 /**
  * 初始化详情数据
@@ -4378,4 +4377,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>