add: 自提点

src/views/gift-manage/module/select-pickup-store.vue

@@ -41,7 +41,9 @@
         with-credentials
         :action="api.giftShopListUpload"
         :headers="{ isControl: true }"
+        :data="{ giftId }"
         :show-file-list="false"
+        :before-upload="onBeforeUpload"
         :on-success="onUploadSucc">
         <el-button class="upload-trigger"><i class="iconfont-components4 icon-cp-shangc upload-icon"></i> 上传</el-button>
         <div slot="tip" class="upload-tip">
@@ -57,17 +59,34 @@
         </div>
         <div slot="file-item" slot-scope="{fileData}">{{ fileData.name }}</div>
       </dm-upload-file>
-      <div class="pickup-list">
+      <!-- 上传的文件列表 -->
+      <div class="pickup-list" v-if="isEdit && uploadFile.status == 0">
+        <!-- 编辑时展示示上传成功的数量 -->
+        <p class="pickup-list-total">
+          共上传<span class="pickup-list-number">{{ shopNum || 0 }}</span>个自提点
+          <el-button type="text" class="download-pickup" @click="downloadPickup">
+            <i class="iconfont-welfare4 icon-xiazai download-icon"></i>
+          </el-button>
+        </p>
+      </div>
+      <!-- 上传成功后展示文件名，导入成功的数量，导入失败的数量，失败原因 -->
+      <div class="pickup-list" v-if="uploadFile.status == 1">
         <p class="pickup-list-name">
           <i class="iconfont-welfare4 icon-wenjian1 file-icon"></i>
-          华南区自提点.xls
-          <el-button type="text" class="download-pickup">
+          {{ uploadFile.name }}
+          <el-button type="text" class="download-pickup" @click="downloadPickup">
             <i class="iconfont-welfare4 icon-xiazai download-icon"></i>
           </el-button>
         </p>
-        <p class="pickup-list-total">共上传<span class="pickup-list-number">3000</span>个自提点</p>
+        <p class="pickup-list-total">
+          成功<span class="pickup-list-success">{{ uploadFile.successNum || 0 }}</span>个，失败<span class="pickup-list-error">{{ uploadFile.errorNum || 0 }}</span>个。
+          <el-button type="text" @click="showErrorList = true">查看失败原因</el-button>
+        </p>
       </div>
     </div>
+    <el-dialog title="查看失败原因" :visible.sync="showErrorList" width="500" class="error-list">
+      <div v-for="(el, index) in uploadFile.errorList" :key="index" class="error-item">{{ el }}</div>
+    </el-dialog>
   </div>
 </template>
 
@@ -85,7 +104,6 @@
 
 // 组件的返回结果
 /**
- * 点击穿梭框下面的确定按钮或者文件上传完成后返回如下数据
  * {
  *    shopSelectType: 1,
  *    shopCodeList: [],
@@ -98,8 +116,13 @@ const { getPickupList } = api;
 export default {
   name: 'SelectPickupStore',
   props: {
+    // 是否是编辑，true：编辑 false：新增
+    isEdit: {
+      type: Boolean,
+      default: false
+    },
     giftId: String, // 礼品id
-    sum: Number, // 批量导入的数量
+    shopNum: Number, // 批量导入的数量
     data: {
       type: Object,
       default: () => ({ shopSelectType: '', shopCodeList: [], shopImportUuid: '' })
@@ -108,11 +131,9 @@ export default {
   data() {
     return {
       api: {
-        // method: 'post',
-        // useFormData: true
         giftShopListUpload: `${welfarePrefix}/gift/gift-shop-list-upload`, // 上传礼品自提点列表EXCEL
         giftShopListDownload: `${welfarePrefix}/gift/gift-shop-list-download`, // 下载礼品自提点列表EXCEL
-        downloadGiftTemplate: `${welfarePrefix}/gift/template-download`, // 下载模板
+        downloadGiftTemplate: '/welfare/static/自提点模板.xlsx', // 下载模板
       },
       // 自提点类型 0 所有自提点 1 部分自提点 2 批量导入
       pickupType: [
@@ -124,9 +145,16 @@ export default {
       isFocus: false,
       // 部分自提点-穿梭框的选项数据
       pickupList: [],
-      pickupListFile: [
-        { name: 'text', size: 1024 }
-      ]
+      // 批量导入-上传的文件
+      uploadFile: {
+        status: 0, // 文件上传状态 0：从未上传过 1：上传成功 其他上传不成功
+        name: 'text', // 文件名
+        successNum: 0, // 导入成功的数量
+        errorNum: 0, // 导入失败的数量
+        errorList: [], // 导入失败的错误原因
+      },
+      // 查看失败原图的弹窗
+      showErrorList: false,
     };
   },
   created() {
@@ -187,17 +215,26 @@ export default {
         this.isFocus = false;
       }
     },
+    // 自提点上传-模板下载
     onDownloadTemplate() {
       window.location.href = `${origin}${this.api.downloadGiftTemplate}`;
     },
-    // 自提点上传
-    onUploadSucc(resp) {
-      const { uuid, errorList } = resp.result;
-      console.log(uuid, errorList);
+    // 自提点上传-上传之前
+    onBeforeUpload(file) {
+      this.uploadFile.name = file.name;
+      this.uploadFile.status = 2;
+    },
+    // 自提点上传-上传成功
+    onUploadSucc(res) {
+      const { successNum, errorNum, errorList } = res.result;
+      while(errorList.length < 5) {
+        errorList.push('第一行：code 填入值格式不合法');
+      }
+      Object.assign(this.uploadFile, { status: 1, successNum, errorNum, errorList });
     },
     // 自提点下载
     downloadPickup() {
-      window.location.href = `${origin}${this.api.giftShopListDownload}?id=${this.giftId}`;
+      window.location.href = `${origin}${this.api.giftShopListDownload}?giftId=${this.giftId}`;
     },
   }
 };
@@ -318,9 +355,9 @@ export default {
       .file-icon {
         font-size: 14px;
       }
-      .download-pickup .download-icon {
-        color: $gray03;
-      }
+    }
+    .download-pickup {
+      margin-left: 8px;
     }
     .pickup-list-total {
       margin-top: 8px;
@@ -328,10 +365,18 @@ export default {
       font-weight: 400;
       color: $gray03;
       line-height: 17px;
-      .pickup-list-number {
+      .pickup-list-number, .pickup-list-success, .pickup-list-error {
         padding: 0 5px;
+      }
+      .pickup-list-number {
         color: $gray01;
       }
+      .pickup-list-success {
+        color: $green-success;
+      }
+      .pickup-list-error {
+        color: $red-error;
+      }
     }
   }
 }
@@ -347,6 +392,21 @@ export default {
     }
   }
 }
+.error-item {
+  font-size: 14px;
+  font-weight: 400;
+  color: $gray01;
+  line-height: 20px;
+  & + .error-item {
+    margin-top: 10px;
+  }
+}
+.error-list {
+  /deep/ .el-dialog__body {
+    max-height: 400px;
+    overflow-y: auto;
+  }
+}
 </style>
 <style>
 .upload-popper {