日期选择手动输入

src/utils/dataformat.ts

@@ -0,0 +1,59 @@
+// 获取 dom 方法
+export function gainFocus(e: string, data: any[]) {
+
+  // 检查元素是否存在
+  const container = document.getElementById(e);
+  console.log(container);
+  if (!container) {
+    return data;
+  }
+  const inputs = container.getElementsByTagName("input");
+  // 只处理前八个输入元素
+  const maxInputs = 8;
+  const inputCount = Math.min(inputs.length, maxInputs);
+  for (let i = 0; i < inputCount; i++) {
+    const input = inputs[i];
+    input.addEventListener("input", createTapEvent(input, i));
+  }
+  if (inputs.length > maxInputs) {
+  }
+  // 创建事件处理函数
+  function createTapEvent(input: any, index: number) {
+    return function() {
+
+      setTimeout(() => {
+        const formattedValue = disposeData(input.value);
+        input.value = formattedValue;
+        // 确保数据更新
+        if(Array.isArray(data) && index < data.length) {
+          // 使用splice方法更新数组，确保 Vue 3 能够检测到变化
+          data.splice(index, 1, formattedValue);
+        }
+      }, 100);
+    };
+  }
+  console.log(data);
+  return data;
+}
+
+// 更改格式
+function disposeData(str) {
+  var value = str.split("");
+  console.log(value);
+  if (value.length == 4) {
+    value.splice(4, 0, "-");
+  }
+  if (value.length == 7) {
+    value.splice(7, 0, "-");
+  }
+  if (value.length == 10) {
+    value.splice(10, 0, " ");
+  }
+  if (value.length == 13) {
+    value.splice(13, 0, ":");
+  }
+  if (value.length == 16) {
+    value.splice(16, 0, ":");
+  }
+  return value.join("");
+}

src/views/insurancePolicy/index.vue

@@ -134,15 +134,21 @@
             <el-col :span="6">
               <!-- 注册日期选择器 -->
               <el-form-item label="注册日期" prop="registerDate">
-                <el-date-picker v-model="insurancePolicyForm.registerDate" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%" />
+                <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)" />
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <!-- 发证日期选择器 -->
               <el-form-item label="发证日期" prop="issueDate">
-                <el-date-picker v-model="insurancePolicyForm.issueDate" type="date" placeholder="请选择"
-                  value-format="YYYY-MM-DD" style="width: 100%" @change="issueDateChange" />
+                <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)" />
+                </div>
               </el-form-item>
             </el-col>
 
@@ -284,18 +290,21 @@
             <el-col :span="6">
               <!-- 证件有效期起期选择器 -->
               <el-form-item prop="identifyValidDate1" label="有效期起期">
-                <el-date-picker v-model="insurancePolicyForm.identifyValidDate1" type="date" placeholder="请选择"
+                <div id="identifyValidDate1" style="width: 100%">
+                  <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)" />
+                  @blur="(e: any) => insurancePolicyForm.identifyValidDate1 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate1', insurancePolicyForm.identifyValidDate1)" />
+                </div>
+
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <!-- 证件有效期止期选择器 -->
               <el-form-item prop="identifyValidEndDate1" label="有效期止期">
-                <div style="display: flex; align-items: center; justify-content: flex-start; width: 100%">
+                <div id="identifyValidEndDate1" style="width: 100%">
                   <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)" />
+                    @blur="(e: any) => insurancePolicyForm.identifyValidEndDate1 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate1', insurancePolicyForm.identifyValidEndDate1)" />
                   <el-button type="primary" @click="longTime">长期</el-button>
                 </div>
               </el-form-item>
@@ -433,16 +442,20 @@
 
             <el-col :span="6">
               <el-form-item prop="identifyValidDate2" label="有效期起期">
-                <el-date-picker v-model="insurancePolicyForm.identifyValidDate2" type="date" placeholder="请选择"
+                <div id="identifyValidDate2" style="width: 100%">
+                  <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)" />
+                  @blur="(e: any) => insurancePolicyForm.identifyValidDate2 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate2', insurancePolicyForm.identifyValidDate2)" />
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item prop="identifyValidEndDate2" label="有效期止期">
-                <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate2" type="date" placeholder="请选择"
+                <div id="identifyValidEndDate2" style="width: 100%">
+                  <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)" />
+                  @blur="(e: any) => insurancePolicyForm.identifyValidEndDate2 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate2', insurancePolicyForm.identifyValidEndDate2)" />
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -572,16 +585,21 @@
 
             <el-col :span="6">
               <el-form-item prop="identifyValidDate3" label="有效期起期">
-                <el-date-picker v-model="insurancePolicyForm.identifyValidDate3" type="date" placeholder="请选择"
+                <div id="identifyValidDate3" style="width: 100%">
+                  <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)" />
+                  @blur="(e: any) => insurancePolicyForm.identifyValidDate3 = changeDate(e)" @focus="inParkingDataFocus('identifyValidDate3', insurancePolicyForm.identifyValidDate3)" />
+                </div>
               </el-form-item>
+
             </el-col>
             <el-col :span="6">
               <el-form-item prop="identifyValidEndDate3" label="有效期止期">
-                <el-date-picker v-model="insurancePolicyForm.identifyValidEndDate3" type="date" placeholder="请选择"
+                <div id="identifyValidEndDate3" style="width: 100%">
+                  <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)" />
+                  @blur="(e: any) => insurancePolicyForm.identifyValidEndDate3 = changeDate(e)" @focus="inParkingDataFocus('identifyValidEndDate3', insurancePolicyForm.identifyValidEndDate3)" />
+                </div>
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -831,14 +849,19 @@
               @click="JQChange(item)">{{ item.text }}</span>
             <div class="time">
               <el-form-item prop="startDate" label="">
-                <el-date-picker v-model="insurancePolicyForm.JQStartDate" type="datetime" placeholder="请选择"
+                <div id="JQStartDate" style="width: 100%">
+                  <el-date-picker v-model="insurancePolicyForm.JQStartDate" type="datetime" placeholder="请选择"
                   value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
-                  :disabled-date="disabledDate" />
+                  :disabled-date="disabledDate" @focus="inParkingDataFocus('JQStartDate', insurancePolicyForm.JQStartDate)" />
+                </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
               <el-form-item prop="endDate" label="">
-                <el-date-picker v-model="insurancePolicyForm.JQEndDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
+                <div id="JQEndDate" style="width: 100%">
+                  <el-date-picker v-model="insurancePolicyForm.JQEndDate" type="datetime" placeholder="请选择"
+                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="jqChange"
+                  :disabled-date="disabledDate" @focus="inParkingDataFocus('JQEndDate', insurancePolicyForm.JQEndDate)" />
+                </div>
               </el-form-item>
             </div>
           </div>
@@ -849,14 +872,19 @@
               @click="SYChange(item)">{{ item.text }}</span>
             <div class="time">
               <el-form-item prop="startDate" label="">
-                <el-date-picker v-model="insurancePolicyForm.SYStartDate" type="datetime" placeholder="请选择"
+                <div id="SYStartDate" style="width: 100%">
+                  <el-date-picker v-model="insurancePolicyForm.SYStartDate" type="datetime" placeholder="请选择"
                   value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
-                  :disabled-date="disabledDate" />
+                  :disabled-date="disabledDate" @focus="inParkingDataFocus('SYStartDate', insurancePolicyForm.SYStartDate)" />
+                </div>
               </el-form-item>
               <span class="ml-5 mr-5">至</span>
               <el-form-item prop="endDate" label="">
-                <el-date-picker v-model="insurancePolicyForm.SYEndDate" type="datetime" placeholder="请选择"
-                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
+                <div id="SYEndDate" style="width: 100%">
+                  <el-date-picker v-model="insurancePolicyForm.SYEndDate" type="datetime" placeholder="请选择"
+                  value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" @change="syChange"
+                  :disabled-date="disabledDate" @focus="inParkingDataFocus('SYEndDate', insurancePolicyForm.SYEndDate)" />
+                </div>
               </el-form-item>
             </div>
           </div>
@@ -999,7 +1027,7 @@
                           <el-table-column label="产品名称" prop="productName" align="center">
                             <template #default="props">
                               <el-button link type="primary" @click="getJYXDetail(props.row)">{{ props.row.productName
-                                }}</el-button>
+                              }}</el-button>
                             </template>
                           </el-table-column>
                           <el-table-column label="数量" align="center">
@@ -1185,15 +1213,15 @@
             <el-table-column label="操作" align="center" width="360">
               <template #default="scope">
                 <div v-if="currentRow.some((a: any) => a.id === scope.row.id)">
-                  <el-button v-if="scope.row.quoteResult?.code===200" link type="primary"
+                  <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary"
                     @click="handleCount(scope)">优惠测算</el-button>
-                  <el-button v-if="scope.row.quoteResult?.code===200" link type="primary"
+                  <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary"
                     @click="toDetail(scope.row.quoteResult.ordersNo)">详情</el-button>
                   <el-button link type="primary" :loading="scope.row.loading"
                     @click="handleSubmit(InsurancePolicyRefs, scope)">计算保费</el-button>
-                  <el-button v-if="scope.row.quoteResult?.code===200" link type="primary"
+                  <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary"
                     @click="handleShare(scope.row.quoteResult.ordersNo)">分享</el-button>
-                  <el-button v-if="scope.row.quoteResult?.code===200" link type="primary" :loading="scope.row.loading"
+                  <el-button v-if="scope.row.quoteResult?.code === 200" link type="primary" :loading="scope.row.loading"
                     @click="handleUnderwriting(scope)">核保</el-button>
                 </div>
               </template>
@@ -1258,12 +1286,12 @@
                   </div>
                 </el-popover>
                 <el-button link type="primary" v-if="scope.row.orderStatus === '1'" :loading="scope.row.loading"
-                  @click="historyhandleUnderwriting(scope.row.orderNo,scope)">核保</el-button>
+                  @click="historyhandleUnderwriting(scope.row.orderNo, scope)">核保</el-button>
                 <el-button link type="primary" v-if="scope.row.orderStatus === '4'"
                   @click="getPayCode(scope.row.orderNo)">支付码</el-button>
                 <!--                <el-button link type="primary" v-if="scope.row.orderStatus === '1'" @click="handleImageSave(scope)">上传影像</el-button>-->
                 <el-button link type="primary" v-if="scope.row.orderStatus === '7'" :loading="scope.row.loading"
-                  @click="historyhandleUnderwriting(scope.row.orderNo,scope)">重新核保</el-button>
+                  @click="historyhandleUnderwriting(scope.row.orderNo, scope)">重新核保</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -1400,6 +1428,8 @@ import Equities from './modules/Equities.vue' // 驾意险详情模块
 import QRCode from 'qrcode'
 // 导入日期处理库
 import dayjs from "dayjs"
+// 导入日期格式化函数
+import { gainFocus } from "@/utils/dataformat"
 
 // 下拉选项接口定义
 interface OptionItem {
@@ -1459,6 +1489,10 @@ 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
+}
 /**
  * 初始化详情数据
  * 从路由参数获取订单号，请求订单详情并填充表单
@@ -1495,7 +1529,7 @@ const initDetail = () => {
       // 设置车主信息
       insurancePolicyForm.value.name1 = obj?.ownersInfo?.name
       insurancePolicyForm.value.mobile1 = obj?.ownersInfo?.mobile
-      insurancePolicyForm.value.identifyType1 = obj?.ownersInfo?.identifyType?('0'+obj.ownersInfo.identifyType):''
+      insurancePolicyForm.value.identifyType1 = obj?.ownersInfo?.identifyType ? ('0' + obj.ownersInfo.identifyType) : ''
       insurancePolicyForm.value.identifyNumber1 = obj?.ownersInfo?.identifyNumber
       insurancePolicyForm.value.identifyValidDate1 = obj?.ownersInfo?.identifyValidDate
       insurancePolicyForm.value.addr1 = obj?.ownersInfo?.addr
@@ -1512,7 +1546,7 @@ const initDetail = () => {
       // 设置投保人信息
       insurancePolicyForm.value.name2 = obj?.policyHolderInfo?.name
       insurancePolicyForm.value.mobile2 = obj?.policyHolderInfo?.mobile
-      insurancePolicyForm.value.identifyType2 = obj?.policyHolderInfo?.identifyType?('0'+obj.policyHolderInfo.identifyType):''
+      insurancePolicyForm.value.identifyType2 = obj?.policyHolderInfo?.identifyType ? ('0' + obj.policyHolderInfo.identifyType) : ''
       insurancePolicyForm.value.identifyNumber2 = obj?.policyHolderInfo?.identifyNumber
       insurancePolicyForm.value.identifyValidDate2 = obj?.policyHolderInfo?.identifyValidDate
       insurancePolicyForm.value.addr2 = obj?.policyHolderInfo?.addr
@@ -1526,7 +1560,7 @@ const initDetail = () => {
       // 设置被保人信息
       insurancePolicyForm.value.name3 = obj?.insuredPersonInfo?.name
       insurancePolicyForm.value.mobile3 = obj?.insuredPersonInfo?.mobile
-      insurancePolicyForm.value.identifyType3 = obj?.insuredPersonInfo?.identifyType?('0'+obj.insuredPersonInfo.identifyType):''
+      insurancePolicyForm.value.identifyType3 = obj?.insuredPersonInfo?.identifyType ? ('0' + obj.insuredPersonInfo.identifyType) : ''
       insurancePolicyForm.value.identifyNumber3 = obj?.insuredPersonInfo?.identifyNumber
       insurancePolicyForm.value.identifyValidDate3 = obj?.insuredPersonInfo?.identifyValidDate
       insurancePolicyForm.value.addr3 = obj?.insuredPersonInfo?.addr
@@ -1616,7 +1650,7 @@ const initDetail = () => {
       insurancePolicyForm.value.SYStartDate = obj?.biRiskInfoVo?.startDate
       insurancePolicyForm.value.SYEndDate = obj?.biRiskInfoVo?.endDate
       insurancePolicyForm.value.imageVoList = obj?.imageVoList
-      images.value = obj?.imageVoList.map(v=>({imageType:v.imageCode,fileUrl:v.imageBase64List[0]?.imageBase64Str})) || []
+      images.value = obj?.imageVoList.map(v => ({ imageType: v.imageCode, fileUrl: v.imageBase64List[0]?.imageBase64Str })) || []
 
       // 获取报价号
       getQuoteNumber()
@@ -2607,12 +2641,12 @@ const handleClickRow = (a: any, b: any) => {
  * 根据视图成功状态过滤报价数据
  * @returns {Array} 过滤后的报价数据列表。当 isViewSuccess 为 true 时，仅返回报价结果成功的记录（code === 200）；否则返回全部报价数据
  */
-const showQuoteData=computed(()=>{
-  if(isViewSuccess.value) return quoteData.value.filter(v=>v.quoteResult?.code===200)
+const showQuoteData = computed(() => {
+  if (isViewSuccess.value) return quoteData.value.filter(v => v.quoteResult?.code === 200)
   return quoteData.value
 })
 // 是否仅查看报价成功
-const isViewSuccess=ref(false)
+const isViewSuccess = ref(false)
 
 // 选择险种
 let insuranceShow = ref(false)
@@ -2888,11 +2922,11 @@ let underwritingShow = ref(false)
 let underwritingIndex = ref(-1)
 const handleUnderwriting = (scope: any) => {
   underwritingIndex.value = scope.$index
-  scope.row.loading=true
+  scope.row.loading = true
   // insurancePolicyForm.value.imageVoList
   let data = {
     // ordersNo: '1915570359429222400'
-    order:{
+    order: {
       ordersNo: scope.row.quoteResult.ordersNo,
       quoteNo: insurancePolicyForm.value.order.quoteNo,
     },
@@ -2901,7 +2935,7 @@ const handleUnderwriting = (scope: any) => {
   }
   api.insurancePolicyApi.imagesUpload(data).then((res: any) => {
     if (res.code === 200) {
-      scope.row.loading=false
+      scope.row.loading = false
       underwritingShow.value = true
       nextTick(() => {
         UnderwritingRefs.value.initEdit(data)
@@ -2915,11 +2949,11 @@ const handleUnderwriting = (scope: any) => {
     }
   })
 }
-const historyhandleUnderwriting = (ordersNo:String,scope: any) => {
+const historyhandleUnderwriting = (ordersNo: String, scope: any) => {
 
-  scope.row.loading=true
+  scope.row.loading = true
   let data = {
-    order:{
+    order: {
       ordersNo,
       quoteNo: insurancePolicyForm.value.order.quoteNo,
     },
@@ -2928,7 +2962,7 @@ const historyhandleUnderwriting = (ordersNo:String,scope: any) => {
   }
   api.insurancePolicyApi.imagesUpload(data).then((res: any) => {
     if (res.code === 200) {
-      scope.row.loading=false
+      scope.row.loading = false
       underwritingShow.value = true
       nextTick(() => {
         UnderwritingRefs.value.initEdit(data)
@@ -2955,14 +2989,14 @@ const handleUnderwritingClose = (bool: any, dataObj: any) => {
       message: bool.msg,
       type: 'success'
     })
-    if(underwritingIndex.value>=0) quoteData.value[underwritingIndex.value].underwritingMsg = "";
+    if (underwritingIndex.value >= 0) quoteData.value[underwritingIndex.value].underwritingMsg = "";
     underwritingMsgShow.value = true
   } else {
     ElMessage({
       message: bool.msg,
       type: 'error'
     })
-    if(underwritingIndex.value>=0) quoteData.value[underwritingIndex.value].underwritingMsg = bool.msg
+    if (underwritingIndex.value >= 0) quoteData.value[underwritingIndex.value].underwritingMsg = bool.msg
   }
 }
 
@@ -3645,8 +3679,8 @@ const ruleFilterCompany = (item: any) => {
       email: insurancePolicyForm.value.email3,
     },
     // 业务员信息
-    salespersonInfo:{
-      id:salesmanId.value,
+    salespersonInfo: {
+      id: salesmanId.value,
     }
   }
   // 调用API获取符合规则的保险公司列表
@@ -4078,4 +4112,4 @@ onMounted(() => {
     }
   }
 }
-</style>
+</style>