add: 自提点组件

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

@@ -5,7 +5,7 @@
       <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-popover v-if="data.shopSelectType == 1" v-model="isFocus" placement="bottom-start" trigger="click">
       <el-input
         placeholder="请选择自提点"
         slot="reference"
@@ -104,6 +104,12 @@ export default {
   created() {
     this.init();
   },
+  mounted() {
+    document.addEventListener('click', this.onClosePopover, true);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.onClosePopover, true);
+  },
   methods: {
     init() {
       // 获取所有自提点
@@ -146,6 +152,13 @@ export default {
     onFilterStore(query, item) {
       return (typeof item.name == 'string' && item.name.indexOf(query) >= 0) || item.storeCode.toString().indexOf(query) >= 0;
     },
+    // 点击下拉列表时，关闭部分自提点的popover
+    onClosePopover(event) {
+      const parentNode = event.target.parentNode;
+      if (parentNode && parentNode.parentNode.className.indexOf('el-select') >= 0) {
+        this.isFocus = false;
+      }
+    },
     // 自提点上传
     onUploadSucc(resp) {
       const { uuid, errorList } = resp.result;
@@ -164,6 +177,22 @@ export default {
 .transfer-trigger {
   margin-left: 10px;
   width: 160px;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    cursor: pointer;
+  }
+  &:focus {
+    outline: none;
+  }
   &.is-focus {
     /deep/ .el-input__inner {
       border-color: $blue;
@@ -185,6 +214,15 @@ export default {
       top: 10px;
     }
   }
+  /deep/ .el-transfer-panel__empty::before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 30px;
+    height: 30px;
+    background: url('../../../assets/images/no-data_icon1.png') center no-repeat;
+    background-size: contain;
+  }
   .transfer-item {
     display: flex;
     flex-direction: column;