fix : 修复通讯录手机号码校验

src/views/phone-traffic-management/address-book-management/index.vue

@@ -1,10 +1,13 @@
 <template>
-  <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
-  <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
-           @selectionChange="selectionChange"></fvTable>
-  <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
-                :form-schema="formSchema" :form-rules="formRules" @dialogCancel="handleCancel"
-                @dialogSubmit="handleSubmit"></fvFormDialog>
+  <div class="address-book">
+
+    <fvSearchForm :searchConfig="searchConfig" @search="search"></fvSearchForm>
+    <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"
+             @selectionChange="selectionChange"></fvTable>
+    <fvFormDialog ref="formDialogRef" :title="dialogTitle" :dialogType="dialogType"
+                  :form-schema="formSchema" :form-rules="formRules" @dialogCancel="handleCancel"
+                  @dialogSubmit="handleSubmit"></fvFormDialog>
+  </div>
 </template>
 
 <script setup lang="jsx">
@@ -19,6 +22,23 @@ const delBtnDisabled = ref(true)
 const contactIds = ref("");
 const dialogTitle = ref("");
 const dialogType = ref("");
+
+
+// 手机号验证
+const checkPhone = (rule, value, callback) => {
+  const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/
+  setTimeout(() => {
+    if (!Number.isInteger(+value)) {
+      callback(new Error('请输入数字值'))
+    } else {
+      if (phoneReg.test(value)) {
+        callback()
+      } else {
+        callback(new Error('手机号码格式不正确'))
+      }
+    }
+  }, 100)
+};
 const formRules = reactive({
   siteName: [
     {required: true, message: "请输入电站", trigger: ["change", "blur"]}
@@ -30,7 +50,8 @@ const formRules = reactive({
     {required: true, message: "请输入姓名", trigger: ["change", "blur"]}
   ],
   phone: [
-    {required: true, message: "请输入手机号", trigger: ["change", "blur"]}
+    {required: true, message: "请输入手机号码",   trigger: ["change", "blur"]},
+    { validator: checkPhone,  trigger: ["change", "blur"]},
   ]
 });
 const formSchema = computed(() => {
@@ -76,13 +97,14 @@ const formSchema = computed(() => {
     {
       label: '手机号',
       prop: 'phone',
-      component: 'el-input',
+      component: 'el-input-number',
       colProps: {
         span: 24
       },
       props: {
         placeholder: '请输入手机号',
         clearable: true,
+        controls:false
       },
     },
     {
@@ -287,8 +309,6 @@ const deleteContactMethod = (contactsId) => {
   })
 }
 const handleMoreDelete = () => {
-  console.info("🚀 ~method:contactIds -----", contactIds.value)
-
     if(contactIds.value){
       ElMessageBox.confirm(`确认删除选择的通讯录吗?`, '系统提示', {
         confirmButtonText: '确定',
@@ -300,7 +320,6 @@ const handleMoreDelete = () => {
     }else{
       ElMessage.warning("请选择要删除的通讯录")
     }
-
 }
 const handleSingleDelete = (row) => {
   ElMessageBox.confirm(`确认删除姓名为${row.name}的通讯录吗?`, '系统提示', {
@@ -340,7 +359,14 @@ const handleSubmit = async (formInstance) => {
   }
 }
 </script>
+<style lang="scss">
+.address-book{
 
-<style scoped>
-
+  .el-input-number {
+    width: 100% !important;
+    .el-input__inner{
+      text-align: left;
+    }
+  }
+}
 </style>