修改滚动条样式；简历批量上传交互；表单校验

src/components/vInput/vInput.vue

@@ -34,22 +34,6 @@
             <span class="tool" v-for="(item,index) in btn" :key="index">
                 <el-button v-if="item.type!=='upload'" :icon="item.icon" size="small" :type="item.type" @click="btnMethods(item)">{{item.name}}
                 </el-button>
-                <el-upload
-                  style="display:inline-block"
-                  v-else
-                  :action="action"
-                  :file-list="fileList"
-                  :before-upload="handleBefore"
-                  :on-success="handleSuccess"
-                  :show-file-list="false"
-                  :headers="{
-                    Authorization:token
-                  }"
-                  :data="{
-                    companyId: 12
-                  }">
-                  <el-button size="small" type="primary">{{item.name}}</el-button>
-                </el-upload>
                 <span class="prompt" v-if="item.message">{{item.message}}</span>
             </span>
         </el-form-item>
@@ -59,7 +43,6 @@
 </template>
 
 <script>
-import { Loading } from 'element-ui'
 export default {
   props: {
     list: {
@@ -75,10 +58,7 @@ export default {
   data () {
     return {
       form: {},
-      date: null,
-      fileList: [],
-      token: localStorage.getItem('token'),
-      action: process.env.VUE_APP_API + '/admin/resumeInfo/batchUploadResume'
+      date: null
     }
   },
   mounted () {
@@ -104,27 +84,6 @@ export default {
       this.date && this.date.length && (reqdata.beginTime = this.date[0])
       this.date && this.date.length && (reqdata.endTime = this.date[1])
       this.$emit(item.method, reqdata)
-    },
-    handleBefore (file) {
-      if (file.type !== 'application/x-zip-compressed') {
-        this.$message.error('请上传zip格式')
-        return false
-      }
-      Loading.service({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-    },
-    handleSuccess (result) {
-      Loading.service({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      }).close()
-      this.$emit('success', result)
     }
   }
 }

src/views/candidateManage/candidateAll.vue

@@ -4,11 +4,11 @@
  * @Autor: XuTongZhang
  * @Date: 2020-07-30 10:17:25
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-02-07 19:47:19
+ * @LastEditTime : 2021-02-23 18:34:32
 -->
 <template>
 <div class="indexPage">
-    <v-input :btn="btn" :list="list" @search="search" @exports="exports" @upload="upload=true" @excel="handleExcel" @success="handleSuccess"></v-input>
+    <v-input :btn="btn" :list="list" @search="search" @exports="exports" @upload="upload=true" @excel="handleExcel"></v-input>
     <v-table :table="table" :tableList="tableList" :sortType="true" :queryData="queryData" :form="searchForm" @details="details" @update="update" @duplicate="handleDuplicate" @delete="handleDelete"></v-table>
     <v-pager @page="callPage" :total="totalrecords"></v-pager>
     <!-- <resume :dialogFormVisible="dialogFormVisible" :close="close" :info="info" :searchForm="searchForm" :queryData="queryData"></resume> -->
@@ -55,8 +55,8 @@
     </el-dialog>
     <!-- upload -->
     <el-dialog :visible.sync="upload" width="600px" :before-close="() => {upload=false}" :close-on-click-modal="false">
-        <el-form label-width="140px" label-position="right">
-            <el-form-item label="姓名">
+        <el-form ref="uploadFormRef" label-width="140px" :model="uploadForm" label-position="right" :rules="uploadRules">
+            <el-form-item label="姓名" prop="delivererName">
                 <el-input placeholder="请输入姓名" v-model="uploadForm.delivererName" maxlength="32" show-word-limit></el-input>
             </el-form-item>
             <el-form-item label="性别">
@@ -73,10 +73,10 @@
                   placeholder="选择日期">
                 </el-date-picker>
             </el-form-item>
-            <el-form-item label="手机号码">
+            <el-form-item label="手机号码" prop="delivererPhone">
                 <el-input placeholder="请输入手机号码" v-model.number="uploadForm.delivererPhone" maxlength="11" show-word-limit></el-input>
             </el-form-item>
-            <el-form-item label="邮箱">
+            <el-form-item label="邮箱" prop="delivererMail">
                 <el-input placeholder="请输入邮箱" v-model="uploadForm.delivererMail" maxlength="32" show-word-limit></el-input>
             </el-form-item>
             <el-form-item label="国籍">
@@ -141,6 +141,36 @@
             </el-form-item>
         </el-form>
     </el-dialog>
+    <!-- uploadDialog -->
+    <el-dialog :visible.sync="importVisible">
+      <el-form label-width="140px" :model="uploadForm" label-position="right">
+            <el-form-item label="选择简历文件：">
+              <el-upload
+                  style="display:inline-block"
+                  ref="upload"
+                  :before-upload="handleBefore"
+                  :action="action"
+                  :show-file-list="true"
+                  :auto-upload="false"
+                  :file-list="fileList"
+                  :headers="{
+                    Authorization:token
+                  }"
+                  :data="{
+                    companyId: companyId
+                  }"
+                  :limit="1"
+                  :on-success="handleSuccess">
+                  <el-button size="small" type="primary">点击选择文件</el-button>
+                  <div>文件格式仅限zip</div>
+                </el-upload>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="importVisible = false">取 消</el-button>
+                <el-button type="primary" @click="handleImport">上传文件</el-button>
+            </el-form-item>
+      </el-form>
+    </el-dialog>
     <el-dialog :visible.sync="duplicate" width="90%" :before-close="()=>{duplicate=false}" :close-on-click-modal="false">
         <v-table :table="table" :tableList="duplicateList" :sortType="true" @update="update" @delete="handleDelete" readonly></v-table>
     </el-dialog>
@@ -148,6 +178,7 @@
 </template>
 
 <script>
+import { Loading } from 'element-ui'
 export default {
   data () {
     let validator = (rule, value, callback) => {
@@ -164,15 +195,20 @@ export default {
       tableList: [],
       dialogFormVisible: false,
       dialogVisible: false,
+      importVisible: false,
       duplicate: false,
       upload: false,
       page: 1,
       totalrecords: 0,
       pickList: [],
+      fileList: [],
       duplicateList: [],
       downList1: [],
       searchForm: {},
       form: {},
+      action: process.env.VUE_APP_API + '/admin/resumeInfo/batchUploadResume',
+      token: localStorage.getItem('token'),
+      companyId: localStorage.getItem('managerid') - 0,
       uploadForm: {
         delivererName: '',
         delivererSex: 0,
@@ -212,6 +248,23 @@ export default {
           label: '10年以上工作经验'
         }
       ],
+      uploadRules: {
+        delivererName: [{
+          required: true,
+          message: '请输入姓名',
+          trigger: 'change'
+        }],
+        delivererPhone: [{
+          required: true,
+          validator,
+          trigger: 'change'
+        }],
+        delivererMail: [{
+          required: true,
+          message: '请输入邮箱',
+          trigger: 'change'
+        }]
+      },
       rules: {
         delivererEducation: [{
           required: true,
@@ -323,7 +376,7 @@ export default {
       },
       {
         name: '批量导入简历',
-        type: 'upload',
+        type: 'primary',
         method: 'excel'
       }
       ],
@@ -557,40 +610,44 @@ export default {
     },
     handleSubmit () {
       const reg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/
-      if (!reg.test(this.uploadForm.delivererMail)) {
-        this.$message.error('请输入正确的邮箱')
-        return false
-      }
-      this.$api.post('/resumeInfo/uploadResume', {
-        reqdata: {
-          ...this.uploadForm,
-          delivererIntention: `${this.uploadForm.delivererIntention[0]} ${this.uploadForm.delivererIntention[1]}`
-        }
-      }).then(result => {
-        this.upload = false
-        this.uploadForm = {
-          delivererName: '',
-          delivererSex: 0,
-          delivererBirthday: '',
-          delivererPhone: '',
-          delivererMail: '',
-          delivererNationality: '',
-          delivererAddress: '',
-          delivererIntention: '',
-          delivererEducation: '',
-          delivererGrade: '',
-          delivererLanguageAbility: '',
-          delivererExpectSalary: '',
-          delivererWorkExp: ''
+      this.$refs['uploadFormRef'].validate((valid) => {
+        if (valid) {
+          if (!reg.test(this.uploadForm.delivererMail)) {
+            this.$message.error('请输入正确的邮箱')
+            return false
+          }
+          this.$api.post('/resumeInfo/uploadResume', {
+            reqdata: {
+              ...this.uploadForm,
+              delivererIntention: `${this.uploadForm.delivererIntention[0]} ${this.uploadForm.delivererIntention[1]}`
+            }
+          }).then(result => {
+            this.upload = false
+            this.uploadForm = {
+              delivererName: '',
+              delivererSex: 0,
+              delivererBirthday: '',
+              delivererPhone: '',
+              delivererMail: '',
+              delivererNationality: '',
+              delivererAddress: '',
+              delivererIntention: '',
+              delivererEducation: '',
+              delivererGrade: '',
+              delivererLanguageAbility: '',
+              delivererExpectSalary: '',
+              delivererWorkExp: ''
+            }
+            this.queryData()
+          })
         }
-        this.queryData()
       })
     },
     handleExcel () {
-      this.$api.post('/admin/resumeInfo/batchUploadResume').then(result => {
-        this.$message.success('导入成功')
-        this.queryData()
-      })
+      if (this.$refs.upload) {
+        this.$refs.upload.clearFiles()
+      }
+      this.importVisible = true
     },
     handleDuplicate (param) {
       this.$api.post('/resumeInfo/duplicateResume', {
@@ -649,18 +706,48 @@ export default {
         })
       })
     },
-    handleSuccess (result) {
-      if (result.list.length) {
-        console.log(111)
-        this.$alert(`
-          <div>以下文件上传失败，请检查无误后重新上传</div>
-          <div>${result.list}</div>
-        `, '上传提示', {
-          dangerouslyUseHTMLString: true
-        })
-      } else {
-        this.$message.success('上传成功')
+    handleSuccess (response) {
+      Loading.service({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      }).close()
+      if (response.state === 100) {
+        if (response.object) {
+          this.$alert(`
+            <div>成功处理简历：${response.object.successFile}</div>
+            <div>处理失败简历：${response.object.errorFile}</div>
+          `, '解压完成', {
+            dangerouslyUseHTMLString: true
+          }).then(response => {
+            this.queryData()
+            this.importVisible = false
+            this.$message.success('上传成功')
+            this.$refs.upload.clearFiles()
+          })
+        } else {
+          this.queryData()
+          this.importVisible = false
+          this.$message.success('上传成功')
+          this.$refs.upload.clearFiles()
+        }
       }
+    },
+    handleBefore (file) {
+      if (file.type !== 'application/x-zip-compressed') {
+        this.$message.error('请上传zip格式')
+        return false
+      }
+      Loading.service({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+    },
+    handleImport () {
+      this.$refs.upload.submit()
     }
   }
 }