add: 自提点组件

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

 <template>
   <div>
-    <!-- 穿梭框 -->
-    <el-transfer
-      filterable
-      filter-placeholder="请输入自提点名称"
-      v-model="checked.shopCodeList"
-      :filter-method="(query, item) => (typeof item.name == 'string' && item.name.indexOf(query) >= 0)"
-      :props="{ key: 'storeCode', label: 'name' }"
-      :data="pickupList">
-    </el-transfer>
-    <!-- 导入 -->
-    <dm-upload-file
-      :action="`${origin}${api.giftShopListUpload}`"
-      accept=".xls,.xlsx"
-      with-credentials
-      :on-success="onUploadSucc">
-    </dm-upload-file>
+    <!-- 自提点类型 -->
+    <el-select style="width: 160px" :value="isNaN(Number(data.shopSelectType)) ? '' : Number(data.shopSelectType)" @change="onTypeChange">
+      <el-option v-for="el in pickupType" :key="el.value" :label="el.label" :value="el.value"></el-option>
+    </el-select>
+    <!-- 部分自提点 穿梭框 -->
+    <el-popover v-if="data.shopSelectType == 1" placement="bottom-start" trigger="click" @show="isFocus = true" @hide="isFocus = false">
+      <el-input
+        placeholder="请选择自提点"
+        slot="reference"
+        :class="['transfer-trigger', { 'is-focus': isFocus }]"
+        :value="data.shopCodeList.length > 0 ? `已选择 ${data.shopCodeList.length} 家` : ''">
+        <i slot="suffix" class="el-input__icon el-icon-arrow-down"></i>
+      </el-input>
+      <!-- 穿梭框 -->
+      <el-transfer
+        class="transfer"
+        filterable
+        filter-placeholder="请输入门店名称/code"
+        :value="data.shopCodeList"
+        :titles="['所有门店', '已选门店']"
+        :filter-method="onFilterStore"
+        :props="{ key: 'storeCode', label: 'name' }"
+        :data="pickupList"
+        @change="onTransferChange">
+        <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>
+          </el-tooltip>
+          <p class="store-name" v-else>{{ option.name || '--' }}</p>
+          <p class="store-code">{{ option.storeCode || '--' }}</p>
+        </div>
+      </el-transfer>
+    </el-popover>
+    <!-- 批量导入 -->
+    <template v-if="data.shopSelectType == 2">
+      <!-- 导入 -->
+      <dm-upload-file
+        :action="`${origin}${api.giftShopListUpload}`"
+        accept=".xls,.xlsx"
+        with-credentials
+        :on-success="onUploadSucc">
+      </dm-upload-file>
+    </template>
   </div>
 </template>
 
@@ -24,7 +51,7 @@
  * 所有自提点
  * 部分自提点
  *  获取所有自提点
- *  回显时根据礼品id获取当前礼品的所有自提点
+ *  回显时根据礼品id获取当前礼品的所有自提点-由组件外部获取，取到之后通过data.shopCodeList传入
  * 批量导入
  *  上传礼品自提点列表
  *  部分自提点时的回显，只需要回显导入的数量
@@ -35,20 +62,23 @@
 /**
  * 点击穿梭框下面的确定按钮或者文件上传完成后返回如下数据
  * {
- *    type: 1,
+ *    shopSelectType: 1,
  *    shopCodeList: [],
- *    uuid: 123
+ *    shopImportUuid: 123
  * }
  */
 import { origin } from '@/config/index.js';
 import api from '@/api/gift.js';
-const { getPickupList, getGiftShopList } = api;
+const { getPickupList } = api;
 export default {
   name: 'SelectPickupStore',
   props: {
     giftId: String, // 礼品id
-    type: String, // 门店自提类型
     sum: Number, // 批量导入的数量
+    data: {
+      type: Object,
+      default: () => ({ shopSelectType: '', shopCodeList: [], shopImportUuid: '' })
+    }
   },
   data() {
     return {
@@ -59,13 +89,16 @@ export default {
         giftShopListDownload: '/gift-shop-list-download', // 下载礼品自提点列表EXCEL
         downloadGiftTemplate: '/gift/template-download', // 下载模板
       },
-      pickupList: [], // 所有自提点
-      giftPickupList: [], // 礼品的自提点
-      // 选择自提点相关的数据
-      checked: {
-        shopCodeList: [],
-        uuid: ''
-      },
+      // 自提点类型 0 所有自提点 1 部分自提点 2 批量导入
+      pickupType: [
+        { label: '所有门店', value: 0 },
+        { label: '部分门店', value: 1 },
+        { label: '批量导入', value: 2 },
+      ],
+      // 部分自提点-输入框是否处于焦点
+      isFocus: false,
+      // 部分自提点-穿梭框的选项数据
+      pickupList: [],
     };
   },
   created() {
@@ -78,13 +111,41 @@ export default {
       this.pickupList = [];
       getPickupList({ currentPage: 1, pageSize: 20 }).then(res => {
         const { result } = res.result || {};
-        this.pickupList = this.pickupList.concat(result);
-      });
-      // 编辑而且是部分自提点时，获取礼品自提点
-      getGiftShopList().then(res => {
-        this.giftPickupList = res.result || [];
+        if (Array.isArray(result) && result.length > 0) {
+          this.pickupList = this.pickupList.concat(result.map(el => {
+            el.nameIsOverflow = this.getOffsetWidth(el.name) > 129;
+            return el;
+          }));
+        }
       });
     },
+    // 获取字符串的offsetWidth宽度
+    getOffsetWidth(str) {
+      const span = document.createElement('span');
+      span.style.position = 'fixed';
+      span.style.top = '-100%';
+      span.style.left = '-100%';
+      span.style.zIndex = -1;
+      span.style.opacity = 0;
+      span.innerHTML = str;
+      document.body.appendChild(span);
+      const width = span.offsetWidth;
+      document.body.removeChild(span);
+      return width;
+    },
+    // 改变自提点类型，需要重置shopCodeList和shopImportUuid
+    onTypeChange(shopSelectType) {
+      this.isFocus = false;
+      this.$emit('change', Object.assign({}, this.data, { shopSelectType, shopCodeList: [], shopImportUuid: '' }));
+    },
+    // 部分自提点-保存选择的自提点code
+    onTransferChange(shopCodeList) {
+      this.$emit('change', Object.assign({}, this.data, { shopCodeList }));
+    },
+    // 部分自提点-穿梭框的搜索方法
+    onFilterStore(query, item) {
+      return (typeof item.name == 'string' && item.name.indexOf(query) >= 0) || item.storeCode.toString().indexOf(query) >= 0;
+    },
     // 自提点上传
     onUploadSucc(resp) {
       const { uuid, errorList } = resp.result;
@@ -94,10 +155,74 @@ export default {
     downloadPickup() {
       window.location.href = `${origin}${this.api.giftShopListDownload}?id=${this.giftId}`;
     },
-    // 向外传递数据
-    onChange() {
-      this.$emit('change', this.checked);
-    }
   }
 };
 </script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/colors.scss';
+.transfer-trigger {
+  margin-left: 10px;
+  width: 160px;
+  &.is-focus {
+    /deep/ .el-input__inner {
+      border-color: $blue;
+      box-shadow: 0 0 0 2px rgba(47, 84, 237, 0.2);
+    }
+    .el-input__icon {
+      transform: rotateZ(-180deg);
+    }
+  }
+}
+.transfer {
+  /deep/ .el-transfer-panel__item {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    width: 100%;
+    height: auto;
+    line-height: normal;
+    .el-checkbox__input {
+      top: 10px;
+    }
+  }
+  .transfer-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    .store-name {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      font-weight: 400;
+      color: $gray01;
+      line-height: 22px;
+    }
+    .store-code {
+      font-size: 12px;
+      font-weight: 400;
+      color: $gray01;
+      line-height: 16px;
+    }
+  }
+  /deep/ .el-transfer__buttons .el-button {
+    padding: 0;
+    width: 24px;
+    min-width: 24px;
+    &:first-child {
+      margin-bottom: 0;
+      transform: translateY(calc(100% + 4px));
+    }
+    &:last-child {
+      transform: translateY(-100%);
+    }
+  }
+}
+</style>
+<style>
+.transfer-tip {
+  width: auto !important;
+}
+</style>