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">
                      <el-form-item :prop="'products.'+scope.$index+'.parValue'" :rules="newCouponRules.productsRules.parValue">
                        <el-input v-model.number="scope.row.parValue" maxlength="3" @change="tableParValueChange(scope.row)" />
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="操作"
                    align="center"
                    width="100%"
                  >
                    <template slot-scope="scope">
                      <a v-if="type === 'add'" @click="delProducts(scope.row)">删除</a>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col>
                <el-button v-if="type === 'add'" type="text" @click="reselect"> 重新选择</el-button>
              </el-col>
            </el-col>
          </el-form-item>
        </el-row>

        <el-row v-if="couponType !== 'A_COUPON' && newCouponForm.productRange === 0">
          <el-col :span="10">
            <el-form-item
              label="面额"
              prop="parValue"
            >
              <el-input v-model.number="newCouponForm.parValue" placeholder="1-500以内" maxlength="3" @change="OnNewCouponFormparValue">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="couponType !== 'A_COUPON' && newCouponForm.productRange === 0">
          <el-form-item label="面额示例">
            <div style="background-color: #DCDBDC;width: 35%;">
              <el-row style="padding: 8px;">
                <el-col :span="6" style="font-size: 30px;font-family: ‘Microsoft YaHei’;padding-top: 10px;">
                  ￥
                  <span v-if="newCouponForm.parValue === null">--</span>
                  <span v-else>{
   
   { newCouponForm.parValue }}</span>
                </el-col>
                <el-col :span="18" style="border-left: 1px solid gray;padding-left: 10px;">
                  <el-col>
                    满
                    <span v-if="newCouponForm.bound === ''">--</span>
                    <span v-else>{
   
   { newCouponForm.bound }}</span>
                    元可用
                  </el-col>
                  <el-col>
                    <span v-if="newCouponForm.date === null || newCouponForm.date.length === 0"> -- </span>
                    <span v-else>{
   
   { newCouponForm.date[0] | parseTime('{y}年{m}月{d}日') }} - {
   
   { newCouponForm.date[1] | parseTime('{y}年{m}月{d}日') }}</span>
                  </el-col>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-row>

        <el-row v-if="couponType !== 'A_COUPON' && newCouponForm.productRange === 0">
          <el-col :span="12">
            <el-form-item
              label="使用条件"
              prop="bound"
            >
              <el-col :span="1" style="font-weight:700;font-size:13px;color:#606266;">
                <span style="margin-left:-10px">满</span>
              </el-col>
              <el-col :span="18">
                <el-input v-model.number="newCouponForm.bound" :disabled="newCouponForm.parValue === null" placeholder="请先填写面额" maxlength="5">
                  <template slot="append">元</template>
                </el-input>
              </el-col>
              <el-col :span="2" style="padding-left: 10px;width:50px;font-weight:700;font-size:13px;color:#606266;">可用</el-col>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="couponType !== 'A_COUPON' && newCouponForm.productRange === 0">
          <el-col :span="10">
            <el-form-item
              label="发行张数"
              prop="quantity"
            >
              <el-input v-model.number="newCouponForm.quantity" placeholder="请填写小于等于50000的整数数字" maxlength="5">
                <template slot="append">张</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="couponType !== 'C_COUPON'">
          <el-form-item label="每人限领" prop="limited">
            <el-select v-model="newCouponForm.limited">
              <el-option
                v-for="item in limiteds"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>

        <el-row v-if="couponType === 'C_COUPON'">
          <el-form-item label="每人发放" prop="limited">
            <el-select v-model="newCouponForm.limited">
              <el-option
                v-for="item in limiteds"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button type="primary" @click="establish('newCouponForm')">创建</el-button>
            <el-button @click="cancel('newCouponForm')">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 优惠券类型 -->
      <el-dialog title="优惠券类型" :visible.sync="changeTypeDialog">
        <el-row>
          <el-col :span="7" class="changeType">
            <el-col :span="17">
              <el-radio v-model="changeTypeFrom.couponType" label="A_COUPON" class="changeTypeFirstLeft">单品立减券</el-radio>
            </el-col>
            <el-col :span="7" class="changeTypeFirstRight">
              商品券
            </el-col>
            <el-col class="changeTypeSecond">
              针对单一商品使用的无门槛优惠券
            </el-col>
          </el-col>
          <el-col :span="7" class="changeType" style="margin-left: 22px;">
            <el-col :span="17">
              <el-radio v-model="changeTypeFrom.couponType" label="B_COUPON" class="changeTypeFirstLeft">全店满减券</el-radio>
            </el-col>
            <el-col :span="7" class="changeTypeFirstRight">
              通用券
            </el-col>
            <el-col class="changeTypeSecond">
              消费者店铺内消费达到一定金额，即可使用
            </el-col>
          </el-col>
          <el-col :span="7" class="changeType" style="margin-left: 22px;">
            <el-col :span="11">
              <el-radio v-model="changeTypeFrom.couponType" label="C_COUPON" class="changeTypeFirstLeft">新人券</el-radio>
            </el-col>
            <el-col :span="13" class="changeTypeFirstRight">
              通用券/商品券
            </el-col>
            <el-col class="changeTypeSecond">
              新会员注册时发放，吸引会员首次下单的优惠券
            </el-col>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="changeTypeConfirm">确认选择</el-button>
          <el-button @click="changeTypeCancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 选择优惠券商品 -->
      <el-dialog title="选择优惠券商品" :visible.sync="selectCouponProductDialog" width="80%" @close="selectCouponProductDialogClose">
        <el-row>
          <el-col :span="16">
            <el-col :span="12" style="padding-bottom: 20px;">
              <el-row type="flex">
                <el-input v-model="selectProduct.requestData.productNumber" placeholder="请输入商品名称或ID" />
                <el-button style="margin-left:10px" type="primary" @click="queryCouponProductList">查询</el-button>
              </el-row>

            </el-col>
            <el-table
              ref="multipleTable"
              :key="selectCouponProductTableKey"
              :data="selectCouponProductTableData"
              border
              tooltip-effect="dark"
              style="width: 100%;"
              :select-on-indeterminate="false"
              @select="handleSelect"
              @select-all="selectAll"
            >
              <el-table-column
                type="selection"
                width="55"
              />
              <el-table-column
                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" style="padding-top: 10px;">
                      {
   
   { 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="100%"
              />
              <el-table-column
                prop="salePrice"
                label="价格"
                width="100%"
              />
              <el-table-column
                prop="activityPrice"
                label="活动价"
                width="100%"
              />
            </el-table>

            <pagination v-show="total" :total="total" :page.sync="selectProduct.currentPage" :limit.sync="selectProduct.pageSize" @pagination="selectCouponProductList" />
          </el-col>
          <el-col :span="8" style="padding-left: 50px;">
            <el-col>
              <span>已选商品（{
   
   { selectedProducts.length }}/10)</span>
              <div v-for="(item, index) in selectedProducts" :key="index">
                <el-row class="selectedProducts">
                  <el-col :span="8">
                    <img :src="selectedProducts[index].url" width="60px" height="50px">
                  </el-col>
                  <el-col :span="15">
                    ID：{
   
   { selectedProducts[index].productNumber }}
                  </el-col>
                  <el-col :span="15" style="padding-top: 5px;">
                    {
   
   { selectedProducts[index].productName }}
                  </el-col>
                  <el-col :span="1">
                    <el-button type="text" style="color: black;" @click="deleteSelectedProduct(selectedProducts[index])">×</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="selectCouponProductConfirm">确认选择</el-button>
          <el-button @click="selectCouponProductCancel">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 面额大于50显示对话框 -->
      <el-dialog
        title="面额大于等于50,您确定创建？"
        :visible.sync="greaterFiftydialogVisible"
        width="30%"
      >
        <span slot="footer" class="dialog-footer">
          <el-button @click="greaterFiftydialogVisibleCancel">取 消</el-button>
          <el-button type="primary" @click="greaterFiftydialogVisibleConfirm">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import {
     
      selectProductPage, couponsInfo, updateCoupon } from '@/views/promo/coupon/api/index'
import {
     
      wxCompany } from '@/views/store/api/index'
import Pagination from '@/components/Pagination'

export default {
     
     
  name: 'CouponCreation',
  components: {
     
      Pagination },
  data() {
     
     
    const numberRule = (rule, value, callback) => {
     
     
      if (value === '') {
     
     
        callback(new Error('不能为空'))
      } else {
     
     
        if (Number(value) < this.newCouponForm.parValue) {
     
     
          callback(new Error('不能小于' + this.newCouponForm.parValue))
        } else if (Number(value) > (this.newCouponForm.parValue * 100)) {
     
     
          callback(new Error('不能大于' + this.newCouponForm.parValue * 100))
        } else {
     
     
          callback()
        }
      }
    }
    const tableParValue = (rule, value, callback) => {
     
     
      if (value === '') {
     
     
        callback(new Error('不能为空'))
      } else {
     
     
        if (Number(value) < 1) {
     
     
          callback(new Error('优惠面额最小为1'))
        } else if (this.row.activityPrice) {
     
     
          if (Number(value) > Number(this.row.activityPrice)) {
     
     
            callback(new Error('不能大于' + this.row.activityPrice))
          }
        } else if (Number(value) > Number(this.row.salePrice)) {
     
     
          console.log(this.row.salePrice, 'this.row.salePrice')
          callback(new Error('不能大于' + this.row.salePrice))
        } else {
     
     
          callback()
        }
      }
    }
    return {
     
     
      isshow: false,
      greaterFiftydialogVisible: false,
      pickerOptions: {
     
     
        onPick: (obj) => {
     
     
          this.pickerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: (time) => {
     
     
          if (this.pickerMinDate) {
     
     
            const day1 = 90 * 24 * 3600 * 1000
            const maxTime = this.pickerMinDate + day1
            const minTime = this.pickerMinDate - day1
            return time.getTime() > maxTime || time.getTime() < minTime || time.getTime() <= new Date().setDate(new Date().getDate() - 1)
          } else {
     
     
            return time.getTime() <= new Date().setDate(new Date().getDate() - 1)
          }
        }
      },
      findWxCompany: {
     
     
        requestdata: {
     
     
          baseCode: ''
        }
      },
      newCouponForm: {
     
     
        brand: this.$store.state.user.role.brandAlias,
        companyCode: this.$store.state.user.user.user.companyCode,
        couponTemType: '',
        productRange: 0,
        name: '',
        couponTemCompany: '',
        date: [],
        startDate: '',
        endDate: '',
        limited: 1,
        parValue: null,
        bound: '',
        products: [],
        quantity: '',
        validDate: '',
        couponTemCompanyName: ''
      },
      row: {
     
     },
      newCouponRules: {
     
     
        name: [
          {
     
      required: true, message: '不能为空', trigger: 'blur' }
        ],
        couponTemCompany: [
          {
     
      required: true, message: '不能为空', trigger: 'change' }
        ],
        date: [
          {
     
      required: true, message: '不能为空', trigger: 'change' }
        ],
        products: [
          {
     
      type: 'array', required: true, message: '请选择商品', trigger: 'blur' }
        ],
        productsRules: {
     
     
          quantity: [
            {
     
      required: true, message: '不能为空', trigger: 'blur' },
            {
     
      pattern: /^(?:[1-9]\d{0,3}|50000|[1-4]\d{4})$/, message: '不能小于1，大于50000', trigger: 'blur' }

          ],
          parValue: [
            {
     
      required: true, message: '不能为空', trigger: 'blur' },
            {
     
      validator: tableParValue, trigger: 'blur' }
          ]
        },
        parValue: [
          {
     
      pattern: /^(500|[1-4][0-9][0-9]|[1-9][0-9]|[1-9])$/, message: '不能小于1，大于500', trigger: 'blur' },
          {
     
      required: true, message: '不能为空', trigger: 'blur' }
        ],
        bound: [
          {
     
      validator: numberRule, trigger: 'blur' }
        ],
        quantity: [
          {
     
      pattern: /^(?:[1-9]\d{0,3}|50000|[1-4]\d{4})$/, message: '不能小于1，大于50000,', trigger: 'blur' },
          {
     
      required: true, message: '不能为空', trigger: 'blur' }

        ],
        validDate: [
          {
     
      required: true, message: '不能为空', trigger: 'change' }
        ]
      },
      numberRule: numberRule,
      tableParValue: tableParValue,
      days: '--',
      couponType: '',
      companyCodes: [],
      selectProduct: {
     
     
        pageSize: 20,
        currentPage: 1,
        requestData: {
     
     
          companyCode: '',
          channelCode: 'O2ODDSEC',
          productNumber: ''
        }
      },
      limiteds: [{
     
      value: 1, label: '1张' }, {
     
      value: 2, label: '2张' }, {
     
      value: 3, label: '3张' }],
      validDates: [{
     
      value: 'SIX_HOUR', label: '6小时' }, {
     
      value: 'TWENTYFOUR_HOUR', label: '24小时' }, {
     
      value: 'TWO_DAY', label: '2天' }, {
     
      value: 'SEVEN_DAY', label: '7天' }],
      changeTypeDialog: false,
      changeTypeFrom: {
     
     
        couponType: ''
      },
      selectCouponProductDialog: false,
      selectCouponProductForm: {
     
     },
      total: 0,
      selectCouponProductTableKey: 0,
      selectCouponProductTableData: [],
      addProducts: false,
      addProductFirst: true,
      addProductSecond: false,
      selectedProducts: [],
      couponsCreate: {
     
     
        requestData: {
     
     

        }
      },
      type: '',
      updateCoupon: {
     
     
        requestData: {
     
     

        }
      },
      denomination: 0,
      isTable: true,
      checkAll: {
     
     }
    }
  },
  created() {
     
     
    const param = JSON.parse(this.$route.query.param)

    if (param !== undefined) {
     
     
      if (param.type === 'add') {
     
     
        this.type = param.type
        this.couponType = param.couponType
        this.newCouponForm.couponTemType = this.couponType
        if (this.couponType === 'A_COUPON') {
     
     
          this.newCouponForm.productRange = 1
        }
      }
      if (param.type === 'edit') {
     
     
        this.type = param.type
        this.couponType = param.list.couponTemType
        this.newCouponForm.couponTemType = this.couponType
        this.newCouponForm.bound = param.list.bound
        this.newCouponForm.couponTemCode = param.list.couponTemCode
        this.newCouponForm.couponTemCompany = param.list.couponTemCompany
        this.newCouponForm.couponTemId = param.list.couponTemId
        this.newCouponForm.limited = param.list.limited
        this.newCouponForm.name = param.list.name
        this.newCouponForm.parValue = param.list.parValue
        this.newCouponForm.date = param.list.date
        this.newCouponForm.productRange = param.list.productRange
        this.newCouponForm.quantity = param.list.quantity
        this.newCouponForm.validDate = param.list.validDate
        this.newCouponForm.startDate = param.list.startDate
        this.newCouponForm.endDate = param.list.endDate
        this.newCouponForm.products.push({
     
     
          url: param.list.url,
          productName: param.list.productName,
          productNumber: param.list.productNumber,
          stock: param.list.stock,
          quantity: param.list.quantity,
          salePrice: param.list.salePrice,
          activityPrice: param.activityPrice,
          parValue: param.list.parValue
        })

        this.onChangeDate(this.newCouponForm.date)

        // if (this.newCouponForm.products.length > 0) {
     
     
        //   this.addProductFirst = false
        //   this.addProductSecond = false
        // }
      }
    }
    this.findWxCompany.requestdata.baseCode = this.$store.state.user.role.brandCode
    this.wxCompany()
  },
  methods: {
     
     

    OnNewCouponFormparValue() {
     
     
      this.newCouponForm.bound = ''
    },
    // 查开通小程序的分司
    wxCompany() {
     
     
      wxCompany(this.findWxCompany).then(result => {
     
     
        if (result.data.code === '90001') {
     
     
          this.companyCodes = result.data.data
          console.log(result.data.data, '公司名称')
        } else {
     
     
          this.$message({
     
     
            message: result.data.msg,
            type: 'warning'
          })
        }
      })
    },
    // 修改类型
    changeType() {
     
     
      this.changeTypeFrom.couponType = this.couponType
      this.changeTypeDialog = true
    },
    // 确认选择优惠券类型
    changeTypeConfirm() {
     
     
      this.addProductFirst = true
      // this.$refs.newCouponForm.resetFields()
      this.couponType = this.changeTypeFrom.couponType
      this.newCouponForm = {
     
     
        brand: this.$store.state.user.role.brandAlias,
        companyCode: this.$store.state.user.user.user.companyCode,
        couponTemType: this.couponType,
        productRange: 0,
        name: '',
        couponTemCompany: '',
        date: [],
        startDate: '',
        endDate: '',
        limited: 1,
        parValue: null,
        bound: '',
        products: [],
        quantity: '',
        validDate: '',
        couponTemCompanyName: ''
      }

      this.changeTypeDialog = false
      this.days = ''
      // this.newCouponForm.couponTemType = this.couponType

      if (this.newCouponForm.couponTemType === 'A_COUPON') {
     
     
        this.newCouponForm.productRange = 1
      }
      if (this.newCouponForm.couponTemType === 'B_COUPON') {
     
     
        this.newCouponForm.productRange = 0
      }
      if (this.newCouponForm.couponTemType === 'C_COUPON') {
     
     
        this.newCouponForm.productRange = 0
        this.newCouponForm.parValue = null
      }
      // this.newCouponForm.date = []
    },
    // 取消选择优惠券类型
    changeTypeCancel() {
     
     
      this.changeTypeDialog = false
    },
    // 选择分公司
    companyCodeChange(val) {
     
     
      this.newCouponForm.products = []
      this.companyCodes.forEach(item => {
     
     
        if (val === item.companyCode) {
     
     
          this.newCouponForm.couponTemCompanyName = item.companyName
        }
      })
      if (this.newCouponForm.date !== null) {
     
     
        if (this.newCouponForm.date.length > 0 && this.newCouponForm.couponTemCompany !== '') {
     
     
          this.addProductFirst = false
          this.addProductSecond = true
        } else {
     
     
          this.addProductFirst = true
          this.addProductSecond = false
        }
      } else {
     
     
        this.addProductFirst = true
        this.addProductSecond = false
      }

      // if (this.newCouponForm.products.length > 0) {
     
     
      //   this.addProductFirst = false
      //   this.addProductSecond = false
      // }
    },
    // 选择时间
    onChangeDate(val) {
     
     
      if (val) {
     
     
        var startDate = Date.parse(val[0])
        var endDate = Date.parse(val[1])
        this.days = parseInt(Math.abs(endDate - startDate) / 1000 / 60 / 60 / 24) + 1
        console.log(parseInt(Math.abs(endDate - startDate) / 1000 / 60 / 60 / 24) + 1, 'val')

        this.newCouponForm.startDate = val[0]
        this.newCouponForm.endDate = val[1]
      } else {
     
     
        if (this.newCouponForm.date === null) {
     
     
          this.newCouponForm.date = []
        }
        this.newCouponForm.startDate = ''
        this.newCouponForm.endDate = ''
        this.days = '--'
      }

      if (this.newCouponForm.date !== null) {
     
     
        if (this.newCouponForm.date.length > 0 && this.newCouponForm.couponTemCompany !== '') {
     
     
          this.addProductFirst = false
          this.addProductSecond = true
        } else {
     
     
          this.addProductFirst = true
          this.addProductSecond = false
        }
      } else {
     
     
        this.addProductFirst = true
        this.addProductSecond = false
      }

      if (this.newCouponForm.products.length > 0) {
     
     
        this.addProductFirst = false
        this.addProductSecond = false
      }
    },
    // 添加商品
    addProduct() {
     
     
      this.selectProduct.requestData.companyCode = this.newCouponForm.couponTemCompany
      this.selectCouponProductList()
      this.selectCouponProductDialog = true
      this.selectProduct.requestData.productNumber = ''

      this.queryCouponProductList()
    },
    // 查询优惠券商品列表
    queryCouponProductList() {
     
     
      this.selectProduct.currentPage = 1
      this.selectCouponProductList()
      this.selectCouponProductTableData = []
    },
    // 选择优惠券商品列表
    selectCouponProductList(val) {
     
     
      selectProductPage(this.selectProduct).then(result => {
     
     
        if (result.data.code === '90001') {
     
     
          this.total = result.data.data.total
          this.selectCouponProductTableData = result.data.data.list.map((item) => {
     
     
            return {
     
     
              ...item,
              page: this.selectProduct.currentPage
            }
          })
          this.selectCouponProductTableData.forEach(data => {
     
     
            if (this.newCouponForm.productRange === 1) {
     
     
              this.$set(data, 'productType', 'PRODUCT_NUMBER')
            } else if (this.newCouponForm.productRange === 0) {
     
     
              this.$set(data, 'productType', 'ALL')
            }
          })
          this.toggleSelection(this.selectedProducts)
        } else {
     
     
          this.$message({
     
     
            message: result.data.msg,
            type: 'warning'
          })
        }
      })
    },
    // 表格内勾选
    handleSelect(rows, row) {
     
     
      if (this.checkAll[this.selectProduct.currentPage]) {
     
     
        this.selectedProducts = this.selectedProducts.filter(
          (item) => item.productNumber !== row.productNumber
        )
      } else {
     
     
        const index = this.selectedProducts.findIndex(
          (item) => item.productNumber === row.productNumber
        )
        if (index !== -1) {
     
     
          this.selectedProducts.splice(index, 1)
        } else {
     
     
          this.selectedProducts.push(row)
        }
      }

      if (rows.length === this.selectCouponProductTableData.length) {
     
     
        this.checkAll = {
     
      [this.currentPage]: true }
      } else {
     
     
        this.checkAll = {
     
      [this.currentPage]: false }
      }
    },
    // 全选
    selectAll(val) {
     
     
      if (val.length === this.selectCouponProductTableData.length) {
     
     
        this.checkAll = {
     
      [this.selectProduct.currentPage]: true }
        val.forEach((item) => {
     
     
          const index = this.selectedProducts.findIndex(
            (el) => el.productNumber === item.productNumber
          )
          if (index === -1) {
     
     
            this.selectedProducts.push(item)
          }
        })
      } else {
     
     
        this.checkAll = {
     
      [this.selectProduct.currentPage]: false }
        this.selectedProducts = this.selectedProducts.filter(
          (item) => item.page !== this.selectProduct.currentPage
        )
      }
    },

    // 关闭选择商品对话框
    selectCouponProductDialogClose() {
     
     
      this.isshow = false
      this.selectedProducts = []
    },
    // 表格内默认勾选
    toggleSelection(rows) {
     
     
      this.$nextTick(() => {
     
     
        this.$refs.multipleTable.clearSelection()
        if (rows.length > 0) {
     
     
          rows.forEach(row => {
     
     
            for (let index = 0; index < this.selectCouponProductTableData.length; index++) {
     
     
              if (this.selectCouponProductTableData[index].productNumber === row.productNumber) {
     
     
                this.$refs.multipleTable.toggleRowSelection(this.selectCouponProductTableData[index], true)
              }
            }
          })
        } else {
     
     
          this.$refs.multipleTable.clearSelection()
        }
      })
    },
    // 表格中优惠面额校验
    tableParValueChange(row) {
     
     
      this.row = row
      console.log(this.row)
      this.denomination = row.parValue
    },

    // 删除已选择的商品(弹窗中)
    deleteSelectedProduct(val) {
     
     
      for (let index = 0; index < this.selectedProducts.length; index++) {
     
     
        if (this.selectedProducts[index].productNumber === val.productNumber) {
     
     
          this.selectedProducts.splice(index, 1)
        }
      }
      this.toggleSelection(this.selectedProducts)

      // 如果已选商品长度大于等于0  将全选状态设置为false
      if (this.selectedProducts.length <= 0) {
     
     
        this.isshow = false
        // console.log(this.isshow, '全选')
      }
    },
    // 确认选择优惠券商品
    selectCouponProductConfirm() {
     
     
      if (this.selectedProducts.length > 10) {
     
     
        this.$message({
     
     
          message: '选择商品不能大于10条',
          type: 'warning'
        })
        return false
      } else {
     
     
        this.newCouponForm.products = this.selectedProducts
      }

      if (this.newCouponForm.products.length > 0) {
     
     
        this.addProductSecond = false
      } else {
     
     
        this.addProductSecond = true
      }
      this.selectCouponProductDialog = false
    },
    // 取消选择优惠券商品
    selectCouponProductCancel() {
     
     
      this.selectCouponProductDialog = false
      this.isshow = false
      this.selectedProducts = []

      if (this.newCouponForm.products.length > 0) {
     
     
        this.addProductFirst = false
        this.addProductSecond = false
      }
    },
    // 删除已选择的商品(表单中)
    delProducts(val) {
     
     
      for (let index = 0; index < this.newCouponForm.products.length; index++) {
     
     
        if (this.newCouponForm.products[index].productNumber === val.productNumber) {
     
     
          this.newCouponForm.products.splice(index, 1)
        }
      }
      this.deleteSelectedProduct(val)

      if (this.newCouponForm.products.length <= 0) {
     
     
        this.addProductSecond = true
      }
    },
    // 重新选择
    reselect() {
     
     
      this.selectCouponProductDialog = true
      this.isshow = false
      this.selectedProducts = []
      this.newCouponForm.products.forEach(item => {
     
     
        this.selectedProducts.push(item)
      })
    },
    // 取消
    greaterFiftydialogVisibleCancel() {
     
     
      this.greaterFiftydialogVisible = false
    },
    // 确定
    greaterFiftydialogVisibleConfirm() {
     
     
      this.greaterFiftydialogVisible = false
      this.couponsCreate.requestData = this.newCouponForm
      couponsInfo(this.couponsCreate).then((result) => {
     
     
        if (result.data.code === '90001') {
     
     
          this.$message({
     
     
            type: 'success',
            message: result.data.msg
          })
          this.cancel()
        } else {
     
     
          this.$message({
     
     
            message: result.data.msg,
            type: 'warning'
          })
        }
      })
    },
    // 创建
    establish(formName) {
     
     
      this.$refs.newCouponForm.validate((valid) => {
     
     
        if (valid) {
     
     
          if (this.type === 'add') {
     
     
            if (this.newCouponForm.parValue >= 50 || this.denomination >= 50) {
     
     
              this.greaterFiftydialogVisible = true
            } else {
     
     
              this.couponsCreate.requestData = this.newCouponForm
              couponsInfo(this.couponsCreate).then((result) => {
     
     
                if (result.data.code === '90001') {
     
     
                  this.$message({
     
     
                    type: 'success',
                    message: result.data.msg
                  })
                  this.cancel()
                } else {
     
     
                  this.$message({
     
     
                    message: result.data.msg,
                    type: 'warning'
                  })
                }
              })
            }
          } else if (this.type === 'edit') {
     
     
            this.updateCoupon.requestData = this.newCouponForm
            updateCoupon(this.updateCoupon).then(result => {
     
     
              if (result.data.code === '90001') {
     
     
                this.$message({
     
     
                  type: 'success',
                  message: result.data.msg
                })
                this.cancel()
              } else {
     
     
                this.$message({
     
     
                  message: result.data.msg,
                  type: 'warning'
                })
              }
            })
          }
        } else {
     
     
          return false
        }
      })
    },
    // 取消
    cancel(formName) {
     
     
      this.$router.go(-1)
      this.$route.query.fn()
      this.$refs.newCouponForm.resetFields()
    },
  }
}
</script>