车险报价表单信息增加正则检验

加大写转换

src/views/insurancePolicy/index.vue

@@ -43,12 +43,12 @@
             </el-col>
             <el-col :span="6">
               <el-form-item :disabled="insurancePolicyForm.isRegistered=='2'" label="车牌" prop="licenseNo">
-                <el-input v-model="insurancePolicyForm.licenseNo" minlength="7" maxlength="8" placeholder="输入车牌号" @change="getQuoteNumber"></el-input>
+                <el-input v-model="insurancePolicyForm.licenseNo" minlength="7" maxlength="8" placeholder="输入车牌号" @input="upperCaseType('licenseNo')" @change="getQuoteNumber"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
               <el-form-item label="车牌识别代码" prop="vinNo">
-                <el-input v-model="insurancePolicyForm.vinNo" placeholder="请输入车辆识别代码" @change="getQuoteNumber">
+                <el-input v-model="insurancePolicyForm.vinNo" placeholder="请输入车辆识别代码" @input="upperCaseType('vinNo')" @change="getQuoteNumber">
                   <template #append>
                     <el-button icon="Search" @click="handleCarNumber" />
                   </template>
@@ -57,7 +57,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="品牌型号" prop="brandName">
-                <el-input v-model="insurancePolicyForm.brandName" placeholder="请输入品牌型号">
+                <el-input v-model="insurancePolicyForm.brandName" placeholder="请输入品牌型号" @input="upperCaseType('brandName')" >
                   <template #append>
                     <el-button icon="Search" @click="handleCarCode" />
                   </template>
@@ -67,7 +67,7 @@
 
             <el-col :span="6">
               <el-form-item label="发动机号" prop="engineNo">
-                <el-input v-model="insurancePolicyForm.engineNo" placeholder="请输入发动机号" @change="getQuoteNumber"></el-input>
+                <el-input v-model="insurancePolicyForm.engineNo" placeholder="请输入发动机号" @input="upperCaseType('engineNo')" @change="getQuoteNumber"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
@@ -132,7 +132,7 @@
 
             <el-col :span="6">
               <el-form-item label="整备质量" prop="completeKerbMass">
-                <el-input v-model="insurancePolicyForm.completeKerbMass" placeholder="输入整备质量">
+                <el-input v-model="insurancePolicyForm.completeKerbMass" type="number" placeholder="输入整备质量">
                   <template #append>
                     <span>千克（KG）</span>
                   </template>
@@ -141,7 +141,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="核定载质量" prop="limitLoad">
-                <el-input v-model="insurancePolicyForm.limitLoad" placeholder="请输入核定载质量">
+                <el-input v-model="insurancePolicyForm.limitLoad" type="number" placeholder="请输入核定载质量">
                   <template #append>
                     <span>千克（KG）</span>
                   </template>
@@ -150,7 +150,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="座位数" prop="seatCount">
-                <el-input v-model="insurancePolicyForm.seatCount" placeholder="请输入座位数">
+                <el-input v-model="insurancePolicyForm.seatCount" type="number" placeholder="请输入座位数">
                   <template #append>
                     <span>座</span>
                   </template>
@@ -159,13 +159,13 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="年款" prop="carYear">
-                <el-input v-model="insurancePolicyForm.carYear" placeholder="请输入年款"></el-input>
+                <el-input v-model="insurancePolicyForm.carYear" type="number" placeholder="请输入年款"></el-input>
               </el-form-item>
             </el-col>
 
             <el-col :span="6">
               <el-form-item label="新车购置价" prop="purchasePrice">
-                <el-input v-model="insurancePolicyForm.purchasePrice" placeholder="请输入新车购置价">
+                <el-input v-model="insurancePolicyForm.purchasePrice" type="number" placeholder="请输入新车购置价">
                   <template #append>
                     <span>元</span>
                   </template>
@@ -174,7 +174,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="排量" prop="displacement">
-                <el-input v-model="insurancePolicyForm.displacement" placeholder="请输入排量">
+                <el-input v-model="insurancePolicyForm.displacement" type="number" placeholder="请输入排量">
                   <template #append>
                     <span>升（L）</span>
                   </template>
@@ -183,7 +183,7 @@
             </el-col>
             <el-col :span="6">
               <el-form-item label="功率" prop="powerScale">
-                <el-input v-model="insurancePolicyForm.powerScale" placeholder="输入功率">
+                <el-input v-model="insurancePolicyForm.powerScale" type="number" placeholder="输入功率">
                   <template #append>
                     <span>千瓦（KW）</span>
                   </template>
@@ -1149,7 +1149,7 @@
             </el-table-column>
             <el-table-column prop="" align="center">
               <template #header>
-                <div style="display: flex; align-items: center; ">
+                <div style="">
                   <span style="margin-right: 10px">报价结果</span>
                   <el-checkbox @change="handleViewSuccess">仅查看报价成功</el-checkbox>
                 </div>
@@ -1185,22 +1185,8 @@
 <!--                    <div class="quoteReason">{{ scope.row.quoteResult?.failMsg }}</div>-->
                   </div>
                 </div>
-                <div class="loader" v-show="scope.row.loading">
-                  <!-- <i style="color: #d42426" class="el-icon-loading"></i> -->
-                  <p class="text">
-                    <span class="letter letter1">掌</span>
-                    <span class="letter letter2">柜</span>
-                    <span class="letter letter3">正</span>
-                    <span class="letter letter4">在</span>
-                    <span class="letter letter5">为</span>
-                    <span class="letter letter6">您</span>
-                    <span class="letter letter7">报</span>
-                    <span class="letter letter8">价</span>
-                    <span class="letter letter9">.</span>
-                    <span class="letter letter10">.</span>
-                    <span class="letter letter11">.</span>
-                  </p>
-                </div>
+                <!-- loding动效 -->
+                <QuoteLoader v-show="scope.row.loading" />
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center" width="360">
@@ -1796,16 +1782,32 @@ let insurancePolicyRules = ref<FormRules>({
     { required: true, trigger: 'change', message: '请选择车辆是否上牌' },
   ],
   licenseNo: [
-    { required: true, trigger: 'blur', message: '请输入车牌' }
+    { required: true, trigger: 'blur', message: '请输入车牌' },
+    {
+      pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/,
+      message: '请填写正确的车牌号',
+      trigger: 'blur'
+    }
   ],
   vinNo: [
-    { required: true, trigger: 'blur', message: '请输入车牌识别代码' }
+    { required: true, trigger: 'blur', message: '请输入车辆识别代码' },
+    {
+          pattern: /^(?=.*[a-z])(?=.*\d).+$/i,
+          message: '请填写正确的车牌识别代码',
+          trigger: 'blur'
+      }
   ],
   brandName: [
-    { required: true, trigger: 'blur', message: '请输入品牌型号' }
+    { required: true, trigger: 'blur', message: '请输入品牌型号' },
+
   ],
   engineNo: [
-    { required: true, trigger: 'blur', message: '请输入发动机号' }
+    { required: true, trigger: 'blur', message: '请输入发动机号' },
+    {
+          pattern: /^(?=.*[a-z])(?=.*\d).+$/i,
+          message: '请填写正确的发动机号',
+          trigger: 'blur'
+      }
   ],
   carNatureCode: [
     { required: true, trigger: 'change', message: '请选择车辆是否上牌' },
@@ -1867,7 +1869,12 @@ let insurancePolicyRules = ref<FormRules>({
     { required: true, trigger: 'change', message: '请选择证件类型' }
   ],
   identifyNumber1: [
-    { required: true, trigger: 'blur', message: '请输入证件号' }
+    { required: true, trigger: 'blur', message: '请输入证件号' },
+    {
+          pattern: /^[A-Z0-9]+$/i,
+          message: '请填写正确的证件号',
+          trigger: 'blur'
+      }
   ],
   identifyValidDate1: [
     { required: true, trigger: 'change', message: '请选择有效期起期' }
@@ -1893,7 +1900,12 @@ let insurancePolicyRules = ref<FormRules>({
     { required: true, trigger: 'change', message: '请选择证件类型' }
   ],
   identifyNumber2: [
-    { required: true, trigger: 'blur', message: '请输入证件号' }
+    { required: true, trigger: 'blur', message: '请输入证件号' },
+    {
+          pattern: /^[A-Z0-9]+$/i,
+          message: '请填写正确的证件号',
+          trigger: 'blur'
+      }
   ],
   identifyValidDate2: [
     { required: true, trigger: 'change', message: '请选择有效期起期' }
@@ -1919,7 +1931,12 @@ let insurancePolicyRules = ref<FormRules>({
     { required: true, trigger: 'change', message: '请选择证件类型' }
   ],
   identifyNumber3: [
-    { required: true, trigger: 'blur', message: '请输入证件号' }
+    { required: true, trigger: 'blur', message: '请输入证件号' },
+    {
+          pattern: /^[A-Z0-9]+$/i,
+          message: '请填写正确的证件号',
+          trigger: 'blur'
+      }
   ],
   identifyValidDate3: [
     { required: true, trigger: 'change', message: '请选择有效期起期' }
@@ -2039,7 +2056,10 @@ const handleCarCode = () => {
     }
   })
 }
-
+// 大写转换
+const upperCaseType = (type: any) => {
+  insurancePolicyForm.value[type] = (insurancePolicyForm.value[type] as string).toUpperCase()
+}
 
 // 获取报价号
 const getQuoteNumber = () => {
@@ -3780,89 +3800,7 @@ onMounted(() => {
     background: #FFFFFF;
     padding: 16px 0;
   }
-  .loader {
-    /* Wave text loader made by: csozi | Website: english.csozi.hu*/
-    //height: 30px;
-
-    .text {
-      margin: 0;
-      line-height: 24px;
-      color: red;
-      font-weight: bolder;
-      background: -webkit-linear-gradient(45deg,
-        orange,
-        orangered);
-      /* Chrome, Safari */
-      background: linear-gradient(45deg, orange, orangered);
-      /* Standard syntax */
-      -webkit-background-clip: text;
-      /* Chrome, Safari */
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-      /* Chrome, Safari */
-      color: transparent;
-      /* Standard syntax (currently not supported by browsers) */
-      font-family: "'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif'";
-    }
-
-    @keyframes letter {
-      0% {
-        font-size: 14px;
-      }
-
-      50% {
-        font-size: 15px;
-      }
 
-      100% {
-        font-size: 14px;
-      }
-    }
-
-    .letter {
-      animation: letter 1s infinite;
-    }
-
-    .letter1 {
-      animation-delay: 0s;
-    }
-
-    .letter2 {
-      animation-delay: -0.9s;
-    }
-
-    .letter3 {
-      animation-delay: -0.8s;
-    }
-
-    .letter4 {
-      animation-delay: -0.7s;
-    }
-
-    .letter5 {
-      animation-delay: -0.6s;
-    }
-
-    .letter6 {
-      animation-delay: -0.5s;
-    }
-
-    .letter7 {
-      animation-delay: -0.4s;
-    }
-
-    .letter8 {
-      animation-delay: -0.3s;
-    }
-
-    .letter9 {
-      animation-delay: -0.2s;
-    }
-
-    .letter10 {
-      animation-delay: -0.1s;
-    }
-  }
 }
 // 保费因子
 .premiumFactor{