个人信息表单校验及部分样式修改

@@ -20,16 +20,17 @@
               v-for="(item, index) in sexList"
               v-for="(item, index) in sexList"
               :key="index"
               :key="index"
               :label="item.value"
               :label="item.value"
-            >{{ item.name }}</el-radio>
+              >{{ item.name }}</el-radio
+            >
           </el-radio-group>
           </el-radio-group>
         </el-form-item>
         </el-form-item>
         <el-form-item label="身份证号:" prop="idCard">
         <el-form-item label="身份证号:" prop="idCard">
           <el-input v-model="form.idCard" clearable />
           <el-input v-model="form.idCard" clearable />
         </el-form-item>
         </el-form-item>
         <el-form-item label="手机号码:" prop="mobilePhone">
         <el-form-item label="手机号码:" prop="mobilePhone">
-          <el-input v-model="form.mobilePhone" clearable type="number" />
+          <el-input v-model="form.mobilePhone" clearable />
         </el-form-item>
         </el-form-item>
-        <el-form-item label="办公电话:">
+        <el-form-item label="办公电话:" prop="telephone">
           <el-input v-model="form.telephone" clearable />
           <el-input v-model="form.telephone" clearable />
         </el-form-item>
         </el-form-item>
         <el-form-item label="办公地址:">
         <el-form-item label="办公地址:">
@@ -55,46 +56,53 @@ export default {
   data() {
   data() {
     return {
     return {
       form: {
       form: {
-    "id": "3127e455-43ba-45ff-9326-0e02ef89485e",
-    "name": "超级管理员",
-    "sort": 1,
-    "loginName": "admin",
-    "email": null,
-    "lastLoginTime": null,
-    "mobilePhone": "18291003568",
-    "isLocked": false,
-    "status": "ACTIVE",
-    "passwordChangeTime": "2021-12-10T08:01:01.569+0000",
-    "idCard": "612725202111021521",
-    "departmentId": "2eae5304-544f-4f5b-b354-8f5d47433c9b",
-    "departmentName": null,
-    "organizationId": "0bca67ae-1d9e-4b41-b057-f165586d24aa",
-    "sex": "0",
-    "isDuty": true,
-    "code": "123324",
-    "jobLevel": null,
-    "telephone": "028-87720898",
-    "address": "办公地点修改测试"
-},
+        id: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        name: "超级管理员",
+        sort: 1,
+        loginName: "admin",
+        email: null,
+        lastLoginTime: null,
+        mobilePhone: "18291003568",
+        isLocked: false,
+        status: "ACTIVE",
+        passwordChangeTime: "2021-12-10T08:01:01.569+0000",
+        idCard: "612725202111021521",
+        departmentId: "2eae5304-544f-4f5b-b354-8f5d47433c9b",
+        departmentName: null,
+        organizationId: "0bca67ae-1d9e-4b41-b057-f165586d24aa",
+        sex: "0",
+        isDuty: true,
+        code: "123324",
+        jobLevel: null,
+        telephone: "028-87720898",
+        address: "办公地点修改测试",
+      },
       sexList: [],
       sexList: [],
       rules: {
       rules: {
         mobilePhone: [
         mobilePhone: [
           {
           {
             pattern:
             pattern:
               /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
               /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
-            message: '手机号码格式有误',
-            trigger: 'blur'
-          }
+            message: "手机号码格式有误",
+            trigger: "blur",
+          },
         ],
         ],
         idCard: [
         idCard: [
           {
           {
             pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
             pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
-            message: '身份证号格式有误',
-            trigger: 'blur'
-          }
-        ]
-      }
-    }
+            message: "身份证号格式有误",
+            trigger: "blur",
+          },
+        ],
+        telephone: [
+          {
+            pattern: /^((d{3,4})|d{3,4}-|s)?d{7,14}$/,
+            message: "办公电话格式有误",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
   },
   },
   watch: {
   watch: {
     // userInfo: {
     // userInfo: {
@@ -108,71 +116,71 @@ export default {
   mounted() {
   mounted() {
     // getDictItems('XB').then((res) => {
     // getDictItems('XB').then((res) => {
     //   if (res.status === 1) {
     //   if (res.status === 1) {
-        this.sexList = [
-    {
-        "id": "079c72b2-f3de-4a4f-b2a1-e5c8f085cc5f",
-        "createdAt": "2021-06-11T02:42:02.000+0000",
-        "updatedAt": "2021-09-03T09:21:46.000+0000",
-        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "sort": 2,
-        "name": "男",
-        "description": "",
-        "code": "N362",
-        "value": "0",
-        "parentId": null,
-        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
-        "version": 1,
-        "valid": true,
-        "standard": false,
-        "standardName": null,
-        "standardValue": null,
-        "children": [],
-        "commonName": "男(N362)"
-    },
-    {
-        "id": "4d6f845d-6f6a-4848-8fc2-a3760764c196",
-        "createdAt": "2021-06-11T02:42:12.000+0000",
-        "updatedAt": "2021-09-03T09:21:46.000+0000",
-        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "sort": 1,
-        "name": "女",
-        "description": "",
-        "code": "N922",
-        "value": "1",
-        "parentId": null,
-        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
-        "version": 1,
-        "valid": true,
-        "standard": false,
-        "standardName": null,
-        "standardValue": null,
-        "children": [],
-        "commonName": "女(N922)"
-    },
-    {
-        "id": "637c360b-d4e2-4afb-aa18-33624cf3abcb",
-        "createdAt": "2021-06-11T02:42:29.000+0000",
-        "updatedAt": "2021-09-03T09:21:43.000+0000",
-        "createdBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "updatedBy": "3127e455-43ba-45ff-9326-0e02ef89485e",
-        "sort": 0,
-        "name": "保密",
-        "description": "",
-        "code": "BM816",
-        "value": "2",
-        "parentId": null,
-        "baseDataCategoryId": "11441374-5e2a-4635-bfa5-d1a430222019",
-        "version": 1,
-        "valid": true,
-        "standard": false,
-        "standardName": null,
-        "standardValue": null,
-        "children": [],
-        "commonName": "保密(BM816)"
-    }
-]
+    this.sexList = [
+      {
+        id: "079c72b2-f3de-4a4f-b2a1-e5c8f085cc5f",
+        createdAt: "2021-06-11T02:42:02.000+0000",
+        updatedAt: "2021-09-03T09:21:46.000+0000",
+        createdBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        updatedBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        sort: 2,
+        name: "男",
+        description: "",
+        code: "N362",
+        value: "0",
+        parentId: null,
+        baseDataCategoryId: "11441374-5e2a-4635-bfa5-d1a430222019",
+        version: 1,
+        valid: true,
+        standard: false,
+        standardName: null,
+        standardValue: null,
+        children: [],
+        commonName: "男(N362)",
+      },
+      {
+        id: "4d6f845d-6f6a-4848-8fc2-a3760764c196",
+        createdAt: "2021-06-11T02:42:12.000+0000",
+        updatedAt: "2021-09-03T09:21:46.000+0000",
+        createdBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        updatedBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        sort: 1,
+        name: "女",
+        description: "",
+        code: "N922",
+        value: "1",
+        parentId: null,
+        baseDataCategoryId: "11441374-5e2a-4635-bfa5-d1a430222019",
+        version: 1,
+        valid: true,
+        standard: false,
+        standardName: null,
+        standardValue: null,
+        children: [],
+        commonName: "女(N922)",
+      },
+      {
+        id: "637c360b-d4e2-4afb-aa18-33624cf3abcb",
+        createdAt: "2021-06-11T02:42:29.000+0000",
+        updatedAt: "2021-09-03T09:21:43.000+0000",
+        createdBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        updatedBy: "3127e455-43ba-45ff-9326-0e02ef89485e",
+        sort: 0,
+        name: "保密",
+        description: "",
+        code: "BM816",
+        value: "2",
+        parentId: null,
+        baseDataCategoryId: "11441374-5e2a-4635-bfa5-d1a430222019",
+        version: 1,
+        valid: true,
+        standard: false,
+        standardName: null,
+        standardValue: null,
+        children: [],
+        commonName: "保密(BM816)",
+      },
+    ];
     //   } else {
     //   } else {
     //     this.$message.error({ message: res.message, showClose: true })
     //     this.$message.error({ message: res.message, showClose: true })
     //   }
     //   }
@@ -202,14 +210,14 @@ export default {
       //     })
       //     })
       //   }
       //   }
       // })
       // })
-    }
-  }
-}
+    },
+  },
+};
 </script>
 </script>
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .user-info {
 .user-info {
-  margin: .1875rem 1.0417rem;
+  margin: 0.1875rem 1.0417rem;
   background: #ffffff;
   background: #ffffff;
   max-height: 90%;
   max-height: 90%;
   overflow-y: auto;
   overflow-y: auto;
@@ -224,7 +232,7 @@ export default {
         padding: 0 8px;
         padding: 0 8px;
         height: 40px;
         height: 40px;
         line-height: 40px;
         line-height: 40px;
-        border: 1px solid #dfe7f3;
+        border: 1px solid #6BC1FC;
       }
       }
     }
     }
   }
   }

@@ -124,7 +124,7 @@ export default {
         padding: 0 8px;
         padding: 0 8px;
         height: 40px;
         height: 40px;
         line-height: 40px;
         line-height: 40px;
-        border: 1px solid #dfe7f3;
+        border: 1px solid #6BC1FC;
       }
       }
     }
     }
   }
   }