注册页面第3版

src/dashoo.cn/frontend_web/src/pages/signup.vue

@@ -41,26 +41,48 @@
                     <el-input v-model="formData.OrganCode"  placeholder="请输入组织机构代码"></el-input>           
                   </el-form-item>
                 </el-col>
-                <el-col :span="7">
+                <el-col :span="8">
                   <el-form-item label="法定代表人姓名" style="width: 100%" prop="LegalPerson">
                     <el-input v-model="formData.LegalPerson"  placeholder="法定代表人姓名"></el-input>           
                   </el-form-item>
                 </el-col>
-                <el-col :span="17">
+                <el-col :span="10">
                   <el-form-item label="法定代表人身份证号" label-width="150px" style="width: 100%" prop="LegalPersonId">
                     <el-input v-model="formData.LegalPersonId"  placeholder="法定代表人身份证号"></el-input>           
                   </el-form-item>
                 </el-col>
-                <el-col :span="7">
-                  <el-form-item label="联系人姓名"   style="width: 100%" prop="ContactName">
+                <el-col :span="6">
+                  <el-form-item label="" label-width="60px" prop="LegalPersonImg">
+                    <el-upload action="" ref="LegalPersonUpload"
+                      :limit="1"
+                      :http-request="uploadRequest"
+                      :show-file-list="true" 
+                      :before-upload="beforeUpload">
+                      <el-button size="small" type="primary">上传身份证扫描件<i class="el-icon-upload el-icon--right"></i></el-button>
+                    </el-upload>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="联系人姓名" style="width: 100%" prop="ContactName">
                     <el-input v-model="formData.ContactName"  placeholder="请输入联系人姓名"></el-input>           
                   </el-form-item>
                 </el-col>
-                <el-col :span="17">
+                <el-col :span="10">
                   <el-form-item label="联系人身份证号" label-width="150px" style="width: 100%" prop="ContactId">
                     <el-input v-model="formData.ContactId"  placeholder="请输入联系人身份证号"></el-input>           
                   </el-form-item>
                 </el-col>
+                <el-col :span="6">
+                  <el-form-item label="" label-width="60px" prop="ContactImg">
+                    <el-upload action="" ref="ContactUpload"
+                      :limit="1"
+                      :http-request="uploadRequest"
+                      :show-file-list="true" 
+                      :before-upload="beforeUpload">
+                      <el-button size="small" type="primary">上传身份证扫描件<i class="el-icon-upload el-icon--right"></i></el-button>
+                    </el-upload>
+                  </el-form-item>
+                </el-col>
               </el-row>
               <el-row>
                 <el-col :span="6">
@@ -120,6 +142,7 @@
   import Sticky from '@/components/Sticky'
   import axios from 'axios'
   import api from '@/api/oilsupplier/supplier'
+  import uploadajax from '../assets/js/uploadajax.js'
 
   @Component({
     data () {
@@ -139,12 +162,18 @@
           }
         }
       };
+      var checkUpload = (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请上传身份证扫描件! '))
+        } else {
+          callback()
+        }
+      };
       return {
         activeIndex: '1',
 
-        dictData: null, //字典信息
         supplierNameList: [], //公司名列表
-        CompanyTypeOptions: [], //公司类型列表
+        waituploads: [], // 等待上传的文件列表
 
         formData: {
           Id: '', //int
@@ -221,12 +250,24 @@
           LegalPersonId: [
             { required: true, message: '请输入法定代表人身份证号', trigger: 'blur' }
           ],
+          LegalPersonImg: [
+            { required: true,
+              validator: checkUpload,
+              trigger: 'blur'
+            }
+          ],
           ContactName: [
             { required: true, message: '请输入联系人姓名', trigger: 'blur' }
           ],
           ContactId: [
             { required: true, message: '请输入联系人身份证号', trigger: 'blur' }
           ],
+          ContactImg: [
+            { required: true,
+              validator: checkUpload,
+              trigger: 'blur'
+            }
+          ],
           UserName: [
             { required: true, message: '请输入账号', trigger: 'blur' }
           ],
@@ -273,7 +314,7 @@
         }
 
         //密码验证 字母数字组成6-10位 正向断言
-        let re2 = /^(?=.*[0-9])[0-9A-Za-z!@#$_&*]{6,10}$/g
+        let re2 = /^(?=.*[0-9])[0-9A-Za-z]{6,10}$/g
         if (!re2.test(_this.formData.UserPass)) {
           this.$alert('请输入正确格式的密码(6——10位，包含英文字母、数字)！', '提示', {
             confirmButtonText: '确定',
@@ -287,12 +328,31 @@
           return
         }
 
+        // 判断法定代表人身份证文件上传是否完成
+        if (!_this.checkSuccess(_this.$refs.LegalPersonUpload.uploadFiles)) {
+          this.$alert('上传文件失败，请重新上传法定代表人身份证文件! ', '提示', {
+            confirmButtonText: '确定',
+          })
+          return
+        }
+        _this.formData.LegalPersonURL = _this.getFileURL(_this.$refs.LegalPersonUpload.uploadFiles) //获取地址
+
+        // 判断联系人身份证文件上传是否完成
+        if (!_this.checkSuccess(_this.$refs.ContactUpload.uploadFiles)) {
+          this.$alert('上传文件失败，请重新上传联系人身份证文件! ', '提示', {
+            confirmButtonText: '确定',
+          })
+          return
+        }
+        _this.formData.ContactURL = _this.getFileURL(_this.$refs.ContactUpload.uploadFiles)
+
         _this.$axios.post('/register/addentity', _this.formData)
           .then(function (response) {
             if (response.data.code === 0) {
-              _this.$alert(response.data.message, '提示', {
-                confirmButtonText: '确定',
-              })
+              _this.$message({
+                type: 'success',
+                message: response.data.message
+              });
               _this.$router.push('/login') //跳转到登录页
             } else {
               _this.$alert(response.data.message, '提示', {
@@ -317,6 +377,76 @@
           })
       },
 
+      //文件大小限制
+      beforeUpload(file) {
+        let isLt10m = file.size / 1024 / 1024 / 10 < 1
+        if (!isLt10m) {
+          this.$message.error('上传文件大小不能超过 10MB!')
+          return false
+        }
+        return true
+      },
+
+      //判断是否上传成功
+      checkSuccess(uploadFiles) {
+        if (uploadFiles.length < 1) {
+          return false
+        } else {
+          for (let i = 0; i < uploadFiles.length; i++) {
+            if (uploadFiles[i].status !== 'success') {
+              return false
+            }
+          }
+        }
+        return true
+      },
+
+      //上传请求
+      uploadRequest(option) {
+        let _this = this
+        axios.post(process.env.upfilehost, {})
+          .then(function (res) {
+            if (res.data && res.data.fid && res.data.fid !== '') {
+              option.action = `http://${res.data.url}/${res.data.fid}`
+              _this.waituploads.push({
+                uid: option.file.uid,
+                url: res.data.publicUrl,
+                fid: res.data.fid
+              })
+              uploadajax(option)
+            } else {
+              _this.$message({
+                type: 'warning',
+                message: '未上传成功！请重新上传！'
+              })
+            }
+          })
+          .catch(function (error) {
+            console.log(error)
+            _this.$message({
+              type: 'warning',
+              message: '未上传成功！请重新上传！'
+            })
+          })
+      },
+
+      //获取上传文件的路径
+      getFileURL(uploadFiles) {
+        let fileURL = ''
+        if (uploadFiles && uploadFiles.length > 0) {
+          for (let i = 0; i < uploadFiles.length; i++) {
+            if (uploadFiles[i].status === 'success') {
+              for (let j = 0; j < this.waituploads.length; j++) {
+                if (this.waituploads[j].uid === uploadFiles[i].uid) {
+                  fileURL =  `${this.waituploads[j].url}/${this.waituploads[j].fid}|${uploadFiles[i].name}`
+                }
+              }
+            }
+          }
+        }
+        return fileURL
+      },
+
       //格式化页面到数据库的时间格式
       formatDateTime(date) {
         var y = date.getFullYear()