<template>
|
<div>
|
<el-form-item required label="奖品券：">
|
<el-button type="primary" v-show="!tableData.length" @click="showCoupon">选择奖品券</el-button>
|
</el-form-item>
|
<el-form-item prop="tableData">
|
<el-table size="mini" :data="tableData" border>
|
<el-table-column label="奖品券名称" prop="couponName"></el-table-column>
|
<el-table-column label="用券时间">
|
<template slot-scope="scope">
|
<span v-if="scope.row.couponTimeType === '2'">{{scope.row.effectiveStartDate}} ~ {{scope.row.effectiveEndDate}}</span>
|
<span v-else>领取{{scope.row.effectiveDays}}日内有效</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="奖品券类型" prop="recordType">
|
<template slot-scope="scope">
|
{{getLabel(recordTypeArr,scope.row.recordType)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="发放总量" prop="totalAmountIssued">
|
<template slot-scope="scope">
|
{{scope.row.totalAmountIssued === -1 ? '无限制':scope.row.totalAmountIssued}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button
|
type="danger"
|
@click="deleteItem(scope.row, scope.$index)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<coupon-selected :show.sync ='selectedCouponDialog.show' :appendToBody="true" :recordType="'7'" :title="selectedCouponDialog.title" :multipleSelected="false">
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button type="success" @click="choiceCoupon(scope.row)" size="mini">添加</el-button>
|
</template>
|
</el-table-column>
|
</coupon-selected>
|
</div>
|
</template>
|
|
<script>
|
import couponSelected from '@/views/integralProd/components/couponSelected.vue'
|
import couponType from '@/utils/constant/couponType'
|
import { getArrayLable } from '@/utils/getArrayLable'
|
export default {
|
props: ['tableData', 'formRules'],
|
components: { couponSelected },
|
data () {
|
return {
|
recordTypeArr: couponType,
|
selectedCouponDialog: {
|
show: false,
|
title: '选择奖品券'
|
}
|
}
|
},
|
methods: {
|
/**
|
* 获取数组的label
|
*/
|
getLabel (array, id) {
|
return getArrayLable(array, id)
|
},
|
showCoupon () {
|
this.selectedCouponDialog.show = true // 打开选择奖品券弹窗
|
},
|
// 选择奖品券
|
choiceCoupon (row) {
|
this.tableData.push({
|
commonId: row.couponInfoId,
|
couponName: row.couponName,
|
totalAmountIssued: row.totalAmountIssued,
|
couponTimeType: row.couponTimeType,
|
effectiveStartDate: row.effectiveStartDate,
|
effectiveEndDate: row.effectiveEndDate,
|
effectiveDays: row.effectiveDays,
|
recordType: row.recordType
|
})
|
this.selectedCouponDialog.show = false
|
this.$parent.clearValidate('tableData')
|
},
|
deleteItem (row, index) {
|
this.tableData.splice(index, 1)
|
}
|
}
|
}
|
</script>
|
|
<style>
|
|
</style>
|
