update: 卡券选择器调整

src/views/ecm/form.vue

@@ -251,7 +251,7 @@
       <section class="dm-form__wrap">
         <h3 class="dm-title__label">营销事件</h3>
         <!-- 只有实时才是单图文 -->
-        <marketing-event :readOnly="isInfo" ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume'" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1"></marketing-event>
+        <marketing-event :readOnly="isInfo" show-out-coupon-icon ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume'" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1"></marketing-event>
         <!-- 只有非实时&&选择卡券了展示提示 -->
         <div v-if="currentCard.comName && form.effectType != 0 && couponAutoGetFlag" class="fz13 regular-font-color line-height2" style="margin-left:120px;margin-top:30px;">
           * 用户在领取卡券后需要<b class="bold">同步至ERP</b>，如果关闭用户<b class="bold">手动领取</b>，卡券在<b class="bold">批量投放</b>时会需要将卡券信息批量同步至ERP。 <br />

src/views/ecm/marketing-event/components/lib-card.vue

@@ -22,9 +22,13 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column :show-overflow-tooltip="true" width="140" align="left" prop="cardName" label="卡券名称">
+      <el-table-column width="140" align="left" prop="cardName" label="卡券名称">
         <template slot-scope="scope">
-          <p style="line-height:22px;">{{ scope.row.cardName }}</p>
+          <el-tooltip v-if="scope.row.showTooltip" :content="scope.row.cardName" placement="top">
+            <span class="card-name" :style="{ 'max-width': showOutCouponIcon && (scope.row.gicCouponType == 3 || scope.row.gicCouponType == 4) ? '65px' : '115px' }">{{ scope.row.cardName }}</span>
+          </el-tooltip>
+          <span v-else class="card-name">{{ scope.row.cardName }}</span>
+          <i class="out-coupon-icon" v-if="showOutCouponIcon && (scope.row.gicCouponType == 3 || scope.row.gicCouponType == 4)">外部券</i>
           <p style="line-height:20px;color:#909399;font-size:13px;">{{ scope.row.subName }}</p>
         </template>
       </el-table-column>
@@ -71,6 +75,11 @@ export default {
     cardLimitType: {
       type: Number,
       default: 1
+    },
+    // 是否展示外部券标识 true：展示 false不展示
+    showOutCouponIcon: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -113,6 +122,17 @@ export default {
     this.getCardList();
   },
   methods: {
+    getTextWidth(text) {
+      const span = document.createElement('span');
+      span.innerHTML = text;
+      span.style.position = 'fixed';
+      span.style.zIndex = -1;
+      span.style.opacity = 0;
+      document.body.appendChild(span);
+      const width = span.offsetWidth;
+      document.body.removeChild(span);
+      return width;
+    },
     handleSizeChange(val) {
       this.listParams.pageSize = val;
       this.getCardList();
@@ -125,7 +145,11 @@ export default {
       this.loading = true;
       getCardList(this.listParams).then(res => {
         if (res.errorCode === 0) {
-          this.tableList = res.result.result || [];
+          this.tableList = (res.result.result || []).map(el => {
+            // 如果是外部券，而且配置显示外部券标识，需要缩短cardName的显示长度
+            el.showTooltip = this.getTextWidth(el.cardName) > (this.showOutCouponIcon && (el.gicCouponType == 3 || el.gicCouponType == 4) ? 65 : 115);
+            return el;
+          });
           this.total = res.result.totalCount;
         }
         this.loading = false;
@@ -160,3 +184,25 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.card-name {
+  display: inline-block;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 22px;
+}
+.out-coupon-icon {
+  margin-left: 5px;
+  padding: 3px 4px;
+  background: #fff1f0;
+  border-radius: 2px;
+  border: 1px solid #ffa39e;
+  font-size: 12px;
+  font-weight: 400;
+  color: #f5222d;
+  font-style: normal;
+}
+</style>

src/views/ecm/marketing-event/index.vue

@@ -32,7 +32,7 @@
       </transition>
     </div>
     <!-- 弹窗组件 -->
-    <component :is="dialogCom" @sendItem="saveToList" :item="currentItem" :show.sync="dialogShow" :isSupportVar="isSupportVar" :cardLimitType="cardLimitType" :integralMultiple="integralMultiple" :singleFlag="singleFlag"></component>
+    <component :is="dialogCom" @sendItem="saveToList" :showOutCouponIcon="showOutCouponIcon" :item="currentItem" :show.sync="dialogShow" :isSupportVar="isSupportVar" :cardLimitType="cardLimitType" :integralMultiple="integralMultiple" :singleFlag="singleFlag"></component>
   </section>
 </template>
 
@@ -125,6 +125,11 @@ export default {
       // 只读
       type: Boolean,
       default: false
+    },
+    // 是否展示外部券标识，仅用于卡券选择器中控制外部券标识展示 true：展示 false不展示
+    showOutCouponIcon: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/views/ecm/scan-form.vue

@@ -57,7 +57,7 @@
       <h3 class="title mt46">营销事件</h3>
       <div>
         <!-- 只有实时才是单图文 -->
-        <marketing-event style="margin-top:0;" :readOnly="isInfo" ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume'" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1"></marketing-event>
+        <marketing-event style="margin-top:0;" show-out-coupon-icon :readOnly="isInfo" ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume'" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1"></marketing-event>
         <!-- 只有存在卡券的情况下出现卡券通知方式 -->
         <section v-if="currentCard.comName">
           <h3 class="title mt46">卡券通知方式配置</h3>