element 全选/取消全选

项目需求:
选择商品并添加到右侧
在这里插入图片描述

代码

 <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">
                      
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值