修改前端问题

src/main.js

@@ -12,6 +12,8 @@ import utils from '@/utils'
 import sortUtils from '@/utils/sortUtils'
 import '@/utils/filter'
 import validator from '@/utils/validator'
+import validatorXG from '@/utils/validatorXG'
+import validateXG from '@/utils/validateXG'
 import cloneDeep from 'lodash/cloneDeep'
 import lodash from 'lodash/object'
 import axios from 'axios'
@@ -92,7 +94,6 @@ Vue.use(Header)
       .use(Export)
       .use(Keyboard)
       .use(Validator)
-
       // 可选组件
       .use(Column)
       .use(Colgroup)
@@ -150,6 +151,8 @@ Vue.prototype.recover = utils.recover
 Vue.prototype.recoverNotNull = utils.recoverNotNull
 Vue.prototype.$axios = axios
 Vue.prototype.validator = validator
+Vue.prototype.validatorXG = validatorXG
+Vue.prototype.validateXG = validateXG
 Vue.prototype.lodash = lodash
 Vue.prototype.moment = moment
 Vue.prototype.deepClone = utils.deepClone

src/utils/validateXG.js

@@ -0,0 +1,43 @@
+/**
+ * 移动电话号码验证
+ * @param str
+ * @returns {boolean}
+ */
+export function isMobile (str) {
+  const mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(19[0-9]{1}))+\d{8})$/
+  return mobile.test(str)
+}
+
+/**
+ * 固定电话号码验证
+ * @param str
+ * @returns {boolean}
+ */
+export function isPhone (str) {
+  const phone = /(^(\d{3,4}-)?\d{6,8}$)|(^(\d{3,4}-)?\d{6,8}(-\d{1,5})?$)|(\d{6,20})/
+  return phone.test(str)
+}
+
+/**
+ * 开户行账号验证
+ * 开户行账号只能为数字、长度限定为25
+ * @param str
+ * @returns {boolean}
+ */
+export function isBankNumber (str) {
+  const bankNumber = /^[0-9]\d{24}$/
+  return bankNumber.test(str)
+}
+
+/**
+ * 联系人联系方式验证
+ * 联系人联系方式只能为数字，长度限定为20
+ * @param str
+ * @returns {boolean}
+ */
+export function isLinkMobile (str) {
+  const linkMobile = /^[0-9]\d{19}$/
+  return linkMobile.test(str)
+}
+
+export default {isMobile, isPhone, isBankNumber, isLinkMobile}

src/utils/validatorXG.js

@@ -0,0 +1,35 @@
+import validateXG from './validateXG'
+
+var isMobile = (rule, value, callback) => {
+  if (value && !validateXG.isMobile(value)) {
+    callback(new Error('请输入正确的电话号码'))
+  } else {
+    callback()
+  }
+}
+
+var isPhone = (rule, value, callback) => {
+  if (value && !validateXG.isPhone(value)) {
+    callback(new Error('请输入正确的电话号码'))
+  } else {
+    callback()
+  }
+}
+
+var isBankNumber = (rule, value, callback) => {
+  if (value && !validateXG.isBankNumber(value)) {
+    callback(new Error('请输入正确的开户行账号'))
+  } else {
+    callback()
+  }
+}
+
+var isLinkMobile = (rule, value, callback) => {
+  if (value && !validateXG.isLinkMobile(value)) {
+    callback(new Error('请输入正确的联系人联系方式'))
+  } else {
+    callback()
+  }
+}
+
+export default {isMobile, isPhone, isBankNumber, isLinkMobile}

src/views/modules/sys/workClient/WorkClientForm.vue

@@ -156,7 +156,7 @@
           <el-col :span="12">
             <el-form-item label="公司电话" prop="workClientInfo.telephone"
                           :rules="[
-                   {required: true, message:'请填写公司电话', trigger:'blur'}
+                   {validator: this.validatorXG.isMobile, trigger: 'blur'}
                  ]">
               <el-input v-model="inputForm.workClientInfo.telephone" placeholder="请填写公司电话"></el-input>
             </el-form-item>
@@ -319,8 +319,8 @@
           </template>
         </vxe-table-column>
         </vxe-table>
-
-        <el-upload  ref="upload" style="display: inline-block; margin-left: 5em; :show-header='status' ;margin-top: 20px;" action=""
+        <el-divider content-position="left"><i class="el-icon-document"></i> 附件信息</el-divider>
+        <el-upload  ref="upload" style="display: inline-block; margin-left: 5em; :show-header='status' ;" action=""
                    :limit="999" :http-request="httpRequest"
                    multiple
                    :on-exceed="(files, fileList) =>{
@@ -332,7 +332,7 @@
                    :file-list="filesArra2">
           <el-button type="info" size="mini" v-if="inputForm.permissionFlag&&showVi">点击上传</el-button>
           </el-upload>
-          <div style="height: calc(100% - 80px);margin-top: 30px">
+          <div style="height: calc(100% - 80px);margin-top: 10px">
           <vxe-table
             style="margin-left: 5em"
             border="inner"
@@ -395,7 +395,6 @@
   export default {
     data () {
       return {
-        keyNum: 0,
         visable: false,
         gridData: [],
         radio: 0,
@@ -725,10 +724,17 @@
                   this.$message.error('开户银行未填写')
                   this.loading = false
                   flag = false
+                  return
                 } else if (item.bankNumber === null || item.bankNumber === undefined || item.bankNumber === '') {
                   this.$message.error('开户账号未填写')
                   this.loading = false
                   flag = false
+                  return
+                }
+                if (!this.validateXG.isBankNumber(item.bankNumber)) {
+                  this.$message.error('请输入正确的开户行账号')
+                  this.loading = false
+                  flag = false
                 }
               })
               if (flag === false) {
@@ -746,12 +752,25 @@
                   this.$message.error('联系人姓名未填写')
                   this.loading = false
                   flag = false
+                  return
+                }
+                if (!this.validateXG.isMobile(item.linkPhone)) {
+                  this.$message.error('联系人联系方式1填写不正确')
+                  this.loading = false
+                  flag = false
+                  return
+                }
+                if (!this.validateXG.isMobile(item.linkMobile)) {
+                  this.$message.error('联系人联系方式2填写不正确')
+                  this.loading = false
+                  flag = false
                 }
               })
               if (flag === false) {
                 return
               }
             }
+
             this.inputForm.workClientInfo.deputy = this.inputForm.workClientInfo.deputyList.join(',')
 
             this.workClientService.save(this.inputForm).then(({data}) => {
@@ -965,8 +984,25 @@
 </script>
 
 <style>
+  .tid_40 .vxe-body--column .vxe-cell{
+    padding: 1px;
+    text-align: center;
+  }
+  .tid_40 .vxe-header--row .col--last{
+    text-align: center;
+  }
   .tid_45 .vxe-body--column .vxe-cell{
-    padding: 0px;
+    padding: 1px;
     text-align: center;
   }
+  .tid_45 .vxe-header--row .col--last{
+    text-align: center;
+  }
+  .avatar{
+    height: 100px;
+  }
+  .el-divider__text {
+    font-weight: bold;
+    font-size: 16px;
+  }
 </style>