代码提交:

0830用户信息代码提交

src/views/modules/sys/userInfo/UserInfoForm.vue

@@ -9,7 +9,7 @@
       @keyup.enter.native="doSubmit"
       :visible.sync="visible">
       <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'"
-               label-width="150px">
+               label-width="150px" >
 
         <el-row  :gutter="15">
           <el-col :span="10">
@@ -18,16 +18,29 @@
             </el-form-item>
           </el-col>
 
-          <el-col :span="10">
+          <el-col :span="10" style="position:relative">
             <el-form-item label="姓名" prop="name"
-                 :rules="[
+                          :rules="[
                   {required: true, message:'请输入姓名', trigger:'blur'}
                  ]">
               <el-input v-model="inputForm.name"></el-input>
             </el-form-item>
+            <el-form-item label=""  prop="headPortraitUrl"
+                          style="position:absolute;top:0px;left:350px">
+              <el-upload
+                class="avatar-uploader"
+                :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=headPortraitUrl`"
+                :on-success="handleAvatarSuccess1"
+                :before-upload="beforeAvatarUpload"
+                :show-file-list="false">
+                <img v-if="inputForm.headPortraitUrl" :src="inputForm.headPortraitUrl" class="avatar-uploader">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <div>头像</div>
+              </el-upload>
+            </el-form-item>
           </el-col>
 
-          <el-col :span="10">
+          <el-col :span="10" >
             <el-form-item label="性别" prop="sex">
               <el-select v-model="inputForm.sex" placeholder="请选择性别" style="width:100%;">
                 <el-option
@@ -322,17 +335,17 @@
           </el-input>
         </el-form-item>
 
-        <el-form-item label="头像"  prop="headPortraitUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=headPortraitUrl`"
-            :on-success="handleAvatarSuccess1"
-            :before-upload="beforeAvatarUpload"
-            :show-file-list="false">
-            <img v-if="inputForm.headPortraitUrl" :src="inputForm.headPortraitUrl" class="avatar">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item>
+<!--        <el-form-item label="头像"  prop="headPortraitUrl">-->
+<!--          <el-upload-->
+<!--            class="avatar-uploader"-->
+<!--            :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=headPortraitUrl`"-->
+<!--            :on-success="handleAvatarSuccess1"-->
+<!--            :before-upload="beforeAvatarUpload"-->
+<!--            :show-file-list="false">-->
+<!--            <img v-if="inputForm.headPortraitUrl" :src="inputForm.headPortraitUrl" class="avatar">-->
+<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
+<!--          </el-upload>-->
+<!--        </el-form-item>-->
 
         <el-form-item label="手签章" prop="signatureUrl">
           <el-upload
@@ -341,7 +354,7 @@
             :on-success="handleAvatarSuccess2"
             :before-upload="beforeAvatarUpload"
             :show-file-list="false">
-            <img v-if="inputForm.signatureUrl" :src="inputForm.signatureUrl" class="avatar">
+            <img v-if="inputForm.signatureUrl" :src="inputForm.signatureUrl" class="avatar-uploader">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>
@@ -428,22 +441,27 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="educationCertificateUrl" title="学历证书" :edit-render="{}">
-            <template v-slot:edit="scope" >
+            <template v-slot="{row}">
+              <img class="img" :src="row.educationCertificateUrl"/>
+            </template>
+           <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=educationCertificateUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess3(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
                 :show-file-list="false">
-                <img v-if="scope.row.educationCertificateUrl" :src="scope.row.educationCertificateUrl" class="avatar">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <img :src="scope.row.educationCertificateUrl" class="avatar">
               </el-upload>
             </template>
           </vxe-table-column>
           <vxe-table-column field="degreeCertificateUrl" title="学位证书" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.degreeCertificateUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=degreeCertificateUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess4(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -526,9 +544,12 @@
           </template>
         </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess5(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -538,11 +559,11 @@
               </el-upload>
             </template>
           </vxe-table-column>
-        <vxe-table-column title="操作" width="100">
-          <template v-slot="scope">
-            <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'contract')">删除</el-button>
-          </template>
-        </vxe-table-column>
+          <vxe-table-column title="操作" width="100">
+            <template v-slot="scope">
+              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex,'contract')">删除</el-button>
+            </template>
+          </vxe-table-column>
         </vxe-table>
 
         <el-form-item style="margin-top: 20px" label="外语语种" prop="sysUserLanguages">
@@ -602,9 +623,12 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess6(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -750,9 +774,12 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess7(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -815,9 +842,12 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess8(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -963,9 +993,12 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess9(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -1203,9 +1236,12 @@
             </template>
           </vxe-table-column>
           <vxe-table-column field="fileUrl" title="文件" :edit-render="{}">
+            <template v-slot="{row}">
+              <img class="img" :src="row.fileUrl"/>
+            </template>
             <template v-slot:edit="scope" >
               <el-upload
-                class="avatar-uploader"
+                class="avatar"
                 :action="`${$http.BASE_URL}/sys/file/webupload/upload?uploadPath=fileUrl`"
                 :on-success="(res,file)=> handleAvatarSuccess10(res,file,scope)"
                 :before-upload="beforeAvatarUpload"
@@ -2127,7 +2163,10 @@
       closePop () {
         this.visable = false
       },
-
+      showPhoto (url) {
+        this.onPreview(url)
+        return
+      },
       // 身份证验证
       async validID (rule, value, callback) {
         // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
@@ -2143,7 +2182,6 @@
       // 实现自动生成生日/年龄
       go (val) {
         let iden = this.inputForm.idCard
-        // let sex = null
         let birth = null
         let myDate = new Date()
         let month = myDate.getMonth() + 1
@@ -2152,13 +2190,11 @@
 
         if (val === 18) {
           age = myDate.getFullYear() - iden.substring(6, 10) - 1
-          // sex = iden.substring(16, 17)
           birth = iden.substring(6, 10) + '-' + iden.substring(10, 12) + '-' + iden.substring(12, 14)
           if ((iden.substring(10, 12) < month || iden.substring(10, 12) === month) && iden.substring(12, 14) <= day) age++
         }
         if (val === 15) {
           age = myDate.getFullYear() - iden.substring(6, 8) - 1901
-          // sex = iden.substring(13, 14)
           birth = '19' + iden.substring(6, 8) + '-' + iden.substring(8, 10) + '-' + iden.substring(10, 12)
           if ((iden.substring(8, 10) < month || iden.substring(8, 10) === month) && iden.substring(10, 12) <= day) age++
         }
@@ -2187,11 +2223,29 @@
 </style>
 
 <style scoped>
+  .avatar-uploader{
+    height: 150px;
+  }
   .avatar{
-    height: 100px;
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
   }
   .el-divider__text {
     font-weight: bold;
     font-size: 16px;
   }
+  .img {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+  }
 </style>