项目需求:
选择商品并添加到右侧
代码
<template>
<div class="app-container">
<div class="filter-container">
<el-form ref="newCouponForm" :model="newCouponForm" :rules="newCouponRules" label-width="120px">
<el-row>
<el-form-item label="优惠券类型">
<el-col :span="4" style="background-color: #DCDBDC;">
<el-col v-if="couponType === 'A_COUPON'">
<el-col class="couponTypeFirst">
单品立减券
</el-col>
<el-col class="couponTypeSecond">
爆款促销
</el-col>
</el-col>
<el-col v-if="couponType === 'B_COUPON'">
<el-col class="couponTypeFirst">
全店满减券
</el-col>
<el-col class="couponTypeSecond">
凑单优惠-提高连带率
</el-col>
</el-col>
<el-col v-if="couponType === 'C_COUPON'">
<el-col class="couponTypeFirst">
新人券
</el-col>
<el-col class="couponTypeSecond">
新用户交易额破零
</el-col>
</el-col>
</el-col>
<el-col>
<el-button v-if="type === 'add'" type="text" @click="changeType">修改类型></el-button>
</el-col>
</el-form-item>
</el-row>
<el-row v-if="couponType === 'C_COUPON'">
<el-col :span="10">
<el-form-item label="使用范围" prop="productRange">
<el-radio-group v-model="newCouponForm.productRange">
<el-radio :label="0">全店商品</el-radio>
<el-radio :label="1">指定商品</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="优惠券名称" prop="name">
<el-input v-model="newCouponForm.name" :maxlength="15" show-word-limit clearable placeholder="该名称将不对买家展示,仅内部可见" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-form-item label="投放分公司" prop="couponTemCompany">
<el-select v-model="newCouponForm.couponTemCompany" placeholder="选择分公司" :disabled="type === 'edit'" clearable @change="companyCodeChange">
<el-option
v-for="item in companyCodes"
v-show="item.companyCode !== '1000' && item.companyCode !== '2000'"
:key="item.companyCode"
:label="item.companyName"
:value="item.companyCode"
/>
</el-select>
</el-form-item>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="领取时间" prop="date">
<el-date-picker
v-model="newCouponForm.date"
type="datetimerange"
align="right"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
format="yyyy年MM月dd日"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:disabled="type === 'edit'"
@change="onChangeDate"
/>
</el-form-item>
</el-col>
<el-col :span="10" style="padding-top: 10px;margin-left:120px;">
<span>活动时间持续 {
{ days }} 天</span>
<span v-if="couponType !== 'C_COUPON'">,有效时间与领取时间一致</span>
</el-col>
</el-row>
<el-row v-if="couponType === 'C_COUPON'">
<el-col :span="12">
<el-form-item label="使用时间" prop="validDate">
<el-col :span="3" style="font-weight:700;font-size:13px;color:#606266;">发放后</el-col>
<el-col :span="16">
<el-select v-model="newCouponForm.validDate">
<el-option
v-for="item in validDates"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="3" style="padding-left: 0px;">内有效</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row v-if="couponType === 'A_COUPON' || newCouponForm.productRange === 1">
<el-form-item label="添加商品" prop="products">
<el-col v-if="addProductFirst" class="addProductFirst">
请先选择分公司及领取时间
</el-col>
<el-col v-if="addProductSecond" class="addProductSecond">
<el-button type="text" @click="addProduct">+ 添加商品(最多选10个)</el-button>
</el-col>
<el-col v-if="newCouponForm.products.length > 0">
<el-col v-if="isTable">
<el-table
:data="newCouponForm.products"
border
style="width: 100%"
>
<el-table-column
prop="date"
label="商品信息"
width="270%"
>
<template slot-scope="scope">
<el-row>
<el-col :span="8">
<img :src="scope.row.url" width="60px" height="50px">
</el-col>
<el-col :span="16">
{
{ scope.row.productName }}
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column
prop="productNumber"
label="商品ID"
width="170%"
/>
<el-table-column
prop="stock"
label="库存"
width="110%"
/>
<el-table-column
label="发行张数"
width="110%"
>
<template slot-scope="scope">
<el-form-item :prop="'products.'+scope.$index+'.quantity'" :rules="newCouponRules.productsRules.quantity">
<el-input v-model.number="scope.row.quantity" maxlength="5" />
</el-form-item>
</template>
</el-table-column>
<el-table-column
prop="salePrice"
label="价格"
width="110%"
/>
<el-table-column
prop="activityPrice"
label="活动价"
width="110%"
/>
<el-table-column
prop="parValue"
label="优惠面额(元)"
width="156%"
>
<template slot-scope="scope">
<el-form-item :prop<