二期开发

src/modules/home/api.js

@@ -32,3 +32,16 @@ export function getOrderList(params) {
 export function uploadPay(data) {
   return httpRequest.post('/api/register/v1/activity/upload-pay', data)
 }
+/**
+ * 导入
+ */
+export function importPeople(data) {
+  return httpRequest({
+    url: '/api/register/v1/activity/upload-file',
+    method: 'post',
+    headers: { 'Content-Type': 'multipart/form-data' },
+    timeout: 900000,
+    data,
+    withCredentials: true
+  })
+}

src/modules/home/components/BatchImport.vue

+<template>
+  <div class="main">
+    <!-- 111
+    <a href="https://webapp-pub.ezijing.com/admission/prp/%E6%8A%A5%E5%90%8D%E8%AE%B0%E5%BD%951111.xlsx">下载</a>
+    <div @click="idShowPopup = true">aaa</div> -->
+    <van-popup
+      round
+      closeable
+      close-icon-position="top-right"
+      v-bind="$attrs"
+      v-on="$listeners"
+      position="bottom"
+      :style="{ height: '30%' }"
+      class="main_upload"
+    >
+      <van-uploader
+        v-model="fileList"
+        :before-read="handleBeforeRead"
+        :after-read="handleAfterRead"
+        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
+        :max-count="1"
+        :upload-icon="icon"
+      >
+      </van-uploader>
+      <div class="upload_tips" @click="down">下载人员模板</div>
+      <van-button class="upload_btn" @click="onSubmit">确定</van-button>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant'
+import { importPeople } from '../api.js'
+export default {
+  props: {
+    stepList: { type: Array },
+    data: { type: Object }
+  },
+
+  data() {
+    return {
+      icon: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/highway/h5/form_add.png',
+      fileList: [],
+      fileData: {}
+    }
+  },
+  methods: {
+    down() {
+      window.location.href = `${window.location.origin}/api/register/v1/activity/download-file?activity_detail_id=${this.data.id}`
+    },
+    // 上传前置处理
+    handleBeforeRead(file) {
+      if (file.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+        Toast('请上传正确的文件格式')
+        return false
+      }
+      return true
+    },
+    // 上传文件后的处理
+    handleAfterRead(file) {
+      this.fileData = file.file
+    },
+    // 提交
+    onSubmit() {
+      const params = {
+        file: this.fileData,
+        activity_detail_id: this.data.id
+      }
+      importPeople(params).then(res => {
+        this.$emit('upload', res.data)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  background-color: #f7f7f7;
+
+  .main_content {
+    padding: 0.21rem 0.3rem 4.13rem 0.3rem;
+    .main_content_banner {
+      margin-top: 0.84rem;
+      width: 100%;
+    }
+    .main_content_form {
+      width: 6.9rem;
+      opacity: 1;
+      margin-top: 0.32rem;
+    }
+    .main_content_form_list {
+      border-radius: 20px;
+      margin-top: 0.43rem;
+      background: #fff;
+      padding-bottom: 0.68rem;
+      padding-top: 0.4rem;
+      .formItemList_item {
+        .showTime {
+          cursor: pointer;
+        }
+        .showSelectPicker {
+          cursor: pointer;
+        }
+      }
+      .btn_minus {
+        float: right;
+        width: 0.5072rem;
+        height: 0.5072rem;
+        margin: 0.3rem 0.3rem 0 0;
+        cursor: pointer;
+      }
+    }
+    .btn_operate {
+      margin-top: 0.15rem;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      .btn_import {
+        width: 2.35rem;
+        height: 0.81rem;
+        line-height: 0.81rem;
+        background: rgba(255, 255, 255, 0.39);
+        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.09);
+        border-radius: 0.44rem;
+        font-size: 0.28rem;
+        font-weight: 400;
+        color: #333333;
+        text-align: center;
+      }
+      img {
+        width: 0.5072rem;
+        height: 0.5072rem;
+      }
+      .btn_add {
+        cursor: pointer;
+        margin-left: 0.3rem;
+        margin-right: 0.31rem;
+      }
+    }
+  }
+
+  .main_footer {
+    width: 100%;
+    height: 1.81rem;
+    background: #fff;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    flex-direction: column;
+    .main_footer_top {
+      font-size: 0.24rem;
+      font-weight: 400;
+      color: #999999;
+      margin-left: 0.8rem;
+      margin-top: 0.15rem;
+    }
+    .main_footer_bottom {
+      margin-top: -0.18rem;
+      cursor: pointer;
+      width: 6.9rem;
+      display: flex;
+      justify-content: center;
+
+      align-items: center;
+      .main_content_btn {
+        background: #b80140;
+        color: #ffffff;
+        margin-left: 0.28rem;
+        margin-top: -0.18rem;
+      }
+      .main_content_btn1 {
+        background: #b80140;
+        color: #ffffff;
+        margin-left: 0.28rem;
+        margin-top: 0.3rem;
+      }
+    }
+  }
+  .main_upload {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-direction: column;
+    padding-top: 1rem;
+    .upload_tips {
+      color: #b80140;
+      font-size: 0.16rem;
+    }
+    .upload_btn {
+      border-radius: 3rem;
+      width: 3rem;
+      background: #b80140;
+      color: #ffffff;
+    }
+  }
+}
+::v-deep {
+  .van-checkbox__icon {
+    border-radius: 3px;
+    overflow: hidden;
+  }
+  .main_content_banner p img {
+    width: 6.9rem;
+    height: 100%;
+    border-radius: 0.1rem;
+  }
+  .van-uploader__upload {
+    width: 120px;
+    height: 120px;
+  }
+}
+</style>

src/modules/home/components/SignForm.vue

@@ -98,7 +98,7 @@
             </div>
             <div style="display:flex;" v-if="formIndex === 0">
               <div class="btn_operate" style="margin-left:auto;">
-                <div class="batch-import">批量导入人员</div>
+                <div class="batch-import" @click="isbatchImport = true">批量导入人员</div>
                 <img src="https://webapp-pub.ezijing.com/highway/h5/form_add.png" class="btn_add" @click="handleAdd" />
               </div>
             </div>
@@ -123,15 +123,18 @@
         >
       </div>
     </div>
+    <batch-import @upload="upload" :data="data" v-model="isbatchImport"></batch-import>
   </div>
 </template>
 
 <script>
 import { Toast } from 'vant'
+import BatchImport from '../components/BatchImport.vue'
 import Commonheader from '../components/Commonheader.vue'
 import { saveStepInfo } from '../api'
+import allFormList from '@/utils/formList'
 export default {
-  components: { Commonheader },
+  components: { Commonheader, BatchImport },
   props: {
     stepList: { type: Array },
     data: { type: Object }
@@ -139,6 +142,7 @@ export default {
 
   data() {
     return {
+      isbatchImport: false,
       title: '报名',
       checkedPay: false, // 勾选是否跳过按钮
       index: 0,
@@ -148,6 +152,23 @@ export default {
   },
   mounted() {},
   methods: {
+    // 批量上传
+    upload(data) {
+      const arr = []
+      // 回显信息
+      data.forEach((item, index) => {
+        arr.push([])
+        Object.keys(item).forEach(cItem => {
+          const fd = allFormList.find(f => f.key === cItem)
+          const clone = Object.assign({}, fd)
+          clone.value = item[cItem]
+          cItem === 'gender' ? clone.value = item[cItem].toString() : clone.value = item[cItem]
+          fd && arr[index].push(Object.assign({}, clone))
+        })
+      })
+      this.data.user_fields = [...this.data.user_fields, ...arr]
+      this.isbatchImport = false
+    },
     isRemoveInfo(item) {
       return !!item.find(f => f.enable_edit === false)
     },
@@ -210,7 +231,6 @@ export default {
                 // 完成步骤跳转
                 this.$router.push({ path: '/' })
               } else {
-                console.log(this.stepList, 'stepList')
                 this.$emit('next', res.data)
               }
             }