oil/admin-vue/src/views/goods/modules/MultiCoupon.vue

<template>
  <div>
    <a-form-item
        label="优惠券"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
    >
      <!-- 添加按钮 -->
      <div class="sku-batch">
        <a-button @click="handleAddCoupon">添加优惠券</a-button>
      </div>

      <!-- 优惠券列表 -->
      <a-table
          class="sku-list"
          :columns="columns"
          :dataSource="multiCouponData"
          :scroll="{ x: true }"
          :pagination="false"
          bordered
          rowKey="row_id"
      >
        <!-- 选择优惠券 -->
        <template slot="coupon_id" slot-scope="text, item">
          <a-select
              v-model="item.coupon_id"
              placeholder="请选择优惠券"
              style="width: 100%"
              @change="emitChange"
          >
            <a-select-option
                v-for="(sub_item, index) in couponList"
                :key="index"
                :value="sub_item.coupon_id"
            >
              {{ sub_item.name }}
            </a-select-option>
          </a-select>
        </template>

        <!-- 发送数量 -->
        <template slot="send_num" slot-scope="text, item">
          <a-input-number
              v-model="item.send_num"
              size="small"
              :min="0"
              :precision="0"
              @change="emitChange"
          />
        </template>

        <!-- 删除操作 -->
        <template slot="action" slot-scope="text, item">
          <a @click="handleDelete(item)">删除</a>
        </template>
      </a-table>
    </a-form-item>
  </div>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'

// 表格表头
const columns = [
  {
    title: '优惠券',
    dataIndex: 'coupon_id',
    width: 120,
    scopedSlots: { customRender: 'coupon_id' }
  },
  {
    title: '数量',
    dataIndex: 'send_num',
    width: 120,
    scopedSlots: { customRender: 'send_num' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  props: {
    couponList: PropTypes.any,
    defaultCouponList: PropTypes.array.def([]),
    isCouponLocked: PropTypes.bool.def(false)
  },
  data () {
    return {
      columns,
      labelCol: { span: 3 },
      wrapperCol: { span: 21 },
      multiCouponData: []
    }
  },
  watch: {
    defaultCouponList (val) {
      if (val.length) {
        this.getData()
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      this.multiCouponData = this.defaultCouponList.map((item, index) => ({
        ...item,
        row_id: item.row_id || Date.now() + index
      }))
      this.emitChange()
    },
    handleAddCoupon () {
      this.multiCouponData.push({
        coupon_id: null,
        send_num: 1,
        row_id: Date.now()
      })
      this.emitChange()
    },
    handleDelete (record) {
      this.multiCouponData = this.multiCouponData.filter(item => item !== record)
      this.emitChange()
    },
    emitChange () {
      this.$emit('change', this.multiCouponData)
    }
  }
}
</script>
<style lang="less" scoped>
// 商品多规格
.spec-group {
  width: 895px;
  margin-bottom: 15px;
  line-height: normal;

  .ant-input {
    height: 28px;
    padding: 4px 11px;
    font-size: @font-size-base;
    line-height: 1.5;

    &::placeholder {
      font-size: @font-size-base;
    }
  }

  .form-item-help {
    line-height: 36px;
  }

  .spec-group-item {
    background: #f4f5f9;
    padding: 7px 12px;
    line-height: 28px;

    .group-item-input {
      float: left;
      width: 180px;
    }

    .group-item-delete {
      font-size: 12px;
      float: right;
    }
  }

  .spec-value {
    background: #fbfbfb;
    padding: 8px 35px;

    .spec-value-add,
    .spec-value-item {
      float: left;
      margin-bottom: 6px;
      margin-top: 6px;
    }

    .spec-value-add {
      height: 28px;
      line-height: 28px;

      a {
        font-size: 12px;
      }
    }

    .spec-value-item {
      position: relative;
      margin-right: 20px;

      .value-item-input {
        width: 186px;
      }

      &:hover {
        .icon-close {
          display: block;
        }
      }

      .icon-close {
        display: none;
        position: absolute;
        top: -8px;
        right: -8px;
        cursor: pointer;
        font-size: 16px;
        color: #7d7d7d;
      }
    }
  }
}

// 添加规格按钮
.spec-group-add-btn {
  font-size: @font-size-base;
}

// 批量设置sku
.sku-batch {
  line-height: 40px;
  margin-bottom: 12px;
  .title {
    line-height: 28px;
    margin-right: 15px;
    font-size: @font-size-base;
  }
  /deep/.ant-input,
  /deep/.ant-input-number {
    width: 120px;
    margin-right: 15px;
  }
  /deep/.ant-input {
    width: 140px;
  }
}

// sku列表
.sku-list {
  width: 895px;
  /deep/.ant-table-thead > tr > th,
  /deep/.ant-table-tbody > tr > td {
    white-space: nowrap;
  }
  /deep/.ant-table-tbody > tr > td {
    padding: 12px 18px;
  }

  /deep/.ant-input-sm,
  /deep/.ant-input-number-sm {
    height: 28px;
  }
  /deep/.ant-input-number-sm input {
    height: 26px;
  }
}
</style>