add: 自提点组件

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

@@ -23,7 +23,8 @@
         :filter-method="onFilterStore"
         :props="{ key: 'storeCode', label: 'name' }"
         :data="pickupList"
-        @change="onTransferChange">
+        @change="onTransferChange"
+        @left-check-change="onCheckChange">
         <div slot-scope="{ option }" class="transfer-item">
           <el-tooltip popper-class="transfer-tip" :content="option.name" placement="top-start" v-if="option.nameIsOverflow">
             <p class="store-name">{{ option.name }}</p>
@@ -34,15 +35,40 @@
       </el-transfer>
     </el-popover>
     <!-- 批量导入 -->
-    <template v-if="data.shopSelectType == 2">
+    <div class="pickup-upload" v-if="data.shopSelectType == 2">
       <!-- 导入 -->
       <dm-upload-file
-        :action="`${origin}${api.giftShopListUpload}`"
         accept=".xls,.xlsx"
         with-credentials
+        :action="api.giftShopListUpload"
+        :headers="{ isControl: true }"
+        :show-file-list="false"
         :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">
+          <el-button style="margin-right: 30px" type="text" @click="onDownloadTemplate">下载文件模板</el-button>
+          <el-popover trigger="click" placement="right" popper-class="upload-popper">
+            <el-button slot="reference" type="text">查看导入规则</el-button>
+            <div class="upload-tip-text">
+              <p>1. 自提点code请至自提设置中导出；<el-button type="text" @click="$router.push('/setting/pickup-list')">前去设置</el-button></p>
+              <p>2. 重新导入后将会覆盖原有全部门店；</p>
+              <p>3. 上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“5000”条。</p>
+            </div>
+          </el-popover>
+        </div>
+        <div slot="file-item" slot-scope="{fileData}">{{ fileData.name }}</div>
       </dm-upload-file>
-    </template>
+      <div class="pickup-list">
+        <p class="pickup-list-name">
+          <i class="iconfont-welfare4 icon-wenjian1 file-icon"></i>
+          华南区自提点.xls
+          <el-button type="text" class="download-pickup">
+            <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>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -67,7 +93,7 @@
  *    shopImportUuid: 123
  * }
  */
-import { origin } from '@/config/index.js';
+import { origin, welfarePrefix } from '@/config/index.js';
 import api from '@/api/gift.js';
 const { getPickupList } = api;
 export default {
@@ -85,9 +111,9 @@ export default {
       api: {
         // method: 'post',
         // useFormData: true
-        giftShopListUpload: '/gift-shop-list-upload', // 上传礼品自提点列表EXCEL
-        giftShopListDownload: '/gift-shop-list-download', // 下载礼品自提点列表EXCEL
-        downloadGiftTemplate: '/gift/template-download', // 下载模板
+        giftShopListUpload: `${welfarePrefix}/gift-shop-list-upload`, // 上传礼品自提点列表EXCEL
+        giftShopListDownload: `${welfarePrefix}/gift-shop-list-download`, // 下载礼品自提点列表EXCEL
+        downloadGiftTemplate: `${welfarePrefix}/template-download`, // 下载模板
       },
       // 自提点类型 0 所有自提点 1 部分自提点 2 批量导入
       pickupType: [
@@ -99,6 +125,9 @@ export default {
       isFocus: false,
       // 部分自提点-穿梭框的选项数据
       pickupList: [],
+      pickupListFile: [
+        { name: 'text', size: 1024 }
+      ]
     };
   },
   created() {
@@ -148,6 +177,12 @@ export default {
     onTransferChange(shopCodeList) {
       this.$emit('change', Object.assign({}, this.data, { shopCodeList }));
     },
+    // 部分自提点-左侧选中的自提点
+    onCheckChange(shopCodeList) {
+      if (shopCodeList.length >= 100) {
+        this.$message.warning('最多只能选择100个');
+      }
+    },
     // 部分自提点-穿梭框的搜索方法
     onFilterStore(query, item) {
       return (typeof item.name == 'string' && item.name.indexOf(query) >= 0) || item.storeCode.toString().indexOf(query) >= 0;
@@ -159,6 +194,9 @@ export default {
         this.isFocus = false;
       }
     },
+    onDownloadTemplate() {
+      window.location.href = `${origin}${this.api.downloadGiftTemplate}`;
+    },
     // 自提点上传
     onUploadSucc(resp) {
       const { uuid, errorList } = resp.result;
@@ -223,6 +261,12 @@ export default {
     background: url('../../../assets/images/no-data_icon1.png') center no-repeat;
     background-size: contain;
   }
+  /deep/ .el-transfer-panel__header  {
+    pointer-events: none;
+    .el-checkbox__input {
+      display: none;
+    }
+  }
   .transfer-item {
     display: flex;
     flex-direction: column;
@@ -258,8 +302,63 @@ export default {
     }
   }
 }
+.pickup-upload {
+  display: inline-block;
+  vertical-align: top;
+  margin-left: 10px;
+  .upload-trigger {
+    border-style: dashed;
+    .upload-icon {
+      font-size: 14px;
+    }
+  }
+  .upload-tip {
+    display: inline-block;
+  }
+  .pickup-list {
+    margin-top: 18px;
+    .pickup-list-name {
+      font-size: 14px;
+      font-weight: 400;
+      color: $gray01;
+      line-height: 20px;
+      .file-icon {
+        font-size: 14px;
+      }
+      .download-pickup .download-icon {
+        color: $gray03;
+      }
+    }
+    .pickup-list-total {
+      margin-top: 8px;
+      font-size: 12px;
+      font-weight: 400;
+      color: $gray03;
+      line-height: 17px;
+      .pickup-list-number {
+        padding: 0 5px;
+        color: $gray01;
+      }
+    }
+  }
+}
+.upload-tip-text {
+  width: 308px;
+  p {
+    font-size: 12px;
+    font-weight: 400;
+    color: #303133;
+    line-height: 16px;
+    & + p {
+      margin-top: 9px;
+    }
+  }
+}
 </style>
 <style>
+.upload-popper {
+  padding: 10px 12px!important;
+}
 .transfer-tip {
   width: auto !important;
 }