web-base-admin/src/views/marketing/rechargeCard/addRechargeCard.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <div class="" style="background: #f9f9f9">
    <topBar
      v-if="topList.length > 0"
      style="margin: 20px 0"
      :top-list="topList"
      :moren="moren"
    />
    <div class="main">
      <div class="tit">
        <span class="color-style" />
        <span style="margin: 5px 0 0 10px">{{ '提货配置' }}</span>
      </div>
      <div class="xian" />
      <div class="table">
        <!-- 批量操作 -->
        <table>
          <tr>
            <th
              v-if="addFlag"
              colspan="5"
              class="tableLeft"
            >
              <el-button
                type="primary"
                size="mini"
                :disabled="addBtnDisabled"
                @click="addNewGoods"
              >添加
              </el-button>
            </th>
            <th
              colspan="7"
              style="padding-bottom:0"
            >
              <div class="tableFlex">
                <div class="tableFlex_i">
                  <!-- <el-input placeholder="赠送产品"
                              @focus="getProduct('','')"
                              v-model='plcz.productName'></el-input> -->
                </div>
                <div class="tableFlex_i">
                  <!-- <el-input placeholder="产品规格"
                              disabled
                              v-model='plcz.specsName'></el-input> -->
                </div>

                <div class="tableAdd" />
              </div>
            </th>
          </tr>
        </table>
        <table
          v-for="item in allData"
          v-show="item.orderType == isArea"
          :key="item.orderType"
          class="table_b"
        >
          <tr style="border-top:0">
            <td colspan="2">会员编号</td>
            <td colspan="2">会员名称</td>
            <td colspan="4">产品名称</td>
            <td colspan="4">产品规格</td>
            <td colspan="2">提货基数</td>
            <td colspan="2">可提数量</td>
            <td colspan="2">增加数量</td>
            <td colspan="2">截止日期</td>
            <td colspan="2">包邮类型</td>
            <td colspan="2">提货来源</td>
          </tr>
          <tr
            v-for="ctem,cndex in item.consumeRuleConfigList"
            :key="cndex"
          >
            <td colspan="2" style="border-right: 1px solid #fff">
              <el-input
                v-model="ctem.memberCode"
                placeholder=""
                :disabled="disableds"
                @blur="checkName(ctem)"
              />
            </td>
            <td colspan="2" style="border-right: 1px solid #fff">
              <el-input v-model="ctem.memberName" disabled="disabled" />
            </td>
            <td
              colspan="8"
              style="padding-bottom:0;border-right: 1px solid #fff"
            >
              <div
                v-for="stem,sndex in ctem.waresGiftConfigList"
                v-show="ctem.waresGiftConfigList.length>0"
                :key="sndex"
                class="tableFlex"
              >
                <div class="tableFlex_i">
                  <el-input
                    v-model="stem.productName"
                    :disabled="disableds"
                    :placeholder="'请选择产品'"
                    @focus="getProduct(cndex,sndex)"
                  />
                </div>
                <div class="tableFlex_i">
                  <el-input
                    v-model="stem.specsName"
                    disabled
                  />
                </div>
                <!--                <div class="tableFlex_i">-->
                <!--                  <el-input v-model="stem.quantity"></el-input>-->
                <!--                </div>-->
              </div>
              <div
                v-show="ctem.waresGiftConfigList.length==0"
                class="tableAddPro"
              >
                {{ '添加产品' }}
                <img
                  src="@/assets/images/iconadd.png"
                  alt=""
                  @click="addProduct(cndex)"
                >
              </div>
            </td>
            <!-- 提货基数 -->
            <td colspan="2" style="border-right: 1px solid #fff">
              <el-input
                v-model="ctem.baseQuantity"
                :disabled="deled || ctem.pickType == 8"
              />
            </td>
            <!-- 可提数量 -->
            <td colspan="2" style="border-right: 1px solid #fff">
              <el-input v-model="ctem.usableQuantity" disabled />
            </td>
            <!-- 增加数量 -->
            <td colspan="2" style="border-right: 1px solid #fff">
              <el-input v-model="ctem.quantity" :disabled="deled" />
            </td>
            <!-- 截止日期 -->
            <td colspan="2" style="border-right: 1px solid #fff">
              <!--              <el-input v-model="ctem.orderAchieve"></el-input>-->
              <el-date-picker
                v-model="ctem.receiveTime"
                :disabled="deled || (ctem.pickType == 8 && !addFlag)"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                :placeholder="'请选择时间'"
              />
            </td>
            <!-- 包邮类型 -->
            <td colspan="2">
              <el-select
                v-model="ctem.isFreeMail"
                clearable
                :disabled="deled || (ctem.pickType == 8 && !addFlag)"
              >
                <el-option
                  v-for="item in postList"
                  :key="item.val"
                  :label="item.text"
                  :value="item.val"
                />
              </el-select>
              <div
                v-show="ctem.isFreeMail == 1"
                class="baoyou"
              >
                <el-radio v-model="ctem.radio1" :label="1" border @change="changeGroup(ctem)">{{ '陆运' }}</el-radio>
                <el-radio v-model="ctem.radio1" :label="2" border @change="changeGroup(ctem)">{{ '空运' }}</el-radio>
                <el-radio v-model="ctem.radio1" :label="3" border @change="changeGroup(ctem)">{{ '海运' }}</el-radio>
                <el-checkbox-group
                  v-model="ctem.checkList"
                >
                  <el-select
                    v-show="ctem.radio1 == 1"
                    v-model="ctem.pkPostage"
                    clearable
                  >
                    <el-option
                      v-for="item in postMoneyList1"
                      :key="item.pkId"
                      :label="item.tempName"
                      :value="item.pkId"
                    />
                  </el-select>
                  <el-select
                    v-show="ctem.radio1 == 2"
                    v-model="ctem.pkPostage"
                    clearable
                  >
                    <el-option
                      v-for="item in postMoneyList2"
                      :key="item.pkId"
                      :label="item.tempName"
                      :value="item.pkId"
                    />
                  </el-select>
                  <el-select
                    v-show="ctem.radio1 == 3"
                    v-model="ctem.pkPostage"
                    clearable
                  >
                    <el-option
                      v-for="item in postMoneyList3"
                      :key="item.pkId"
                      :label="item.tempName"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-checkbox-group>
              </div>
            </td>
            <td colspan="2">
              <el-select
                v-model="ctem.pickType"
                :disabled="disableds"
                @change="(val) => pickTypeChange(val, ctem)"
              >
                <el-option v-for="item in pickTypeList" :key="item.val" :label="item.text" :value="item.val" />
              </el-select>
            </td>
          </tr>
        </table>
      </div>

      <!-- <div class="footer">
        <el-button size="small"
                   class="thebtn2"> {{ '取消' }}</el-button>
        <el-button size="small"
                   @click="submit"
                   class="thebtn1"> {{ '确认' }}</el-button>
      </div> -->
      <el-dialog
        :title="'添加'"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        width="40%"
        center
        :before-close="handleClose"
      >
        <div class="cpHeight">
          <el-row>
            <el-col :span="22"> <el-input
              v-model="select.queryInfo"
              clearable
              :placeholder="'请输入'"
              prefix-icon="el-icon-search"
              @keyup.enter.native="getDataList"
            />
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                size="small"
                @click="getDataList"
              > {{ '搜索' }}</el-button>
            </el-col>
          </el-row>
          <div style="height:10px" />
          <el-table
            ref="multipleTable"
            :data="dialogList"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
            :row-class-name="tableRowClassName"
            @select-all="onSelectAll"
            @select="selected"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            />
            <el-table-column
              align="center"
              prop="productCode"
              :label="'产品编号'"
            />
            <el-table-column
              align="center"
              prop="productName"
              :label="'规格'"
            >
              <template slot-scope="scope">
                <div
                  v-show="scope.row.selSkuNameList==''||scope.row.selSkuNameList==undefined"
                  class="blueCor"
                  @click="selSku(scope.row.pkId,scope.$index)"
                >{{ '选择规格' }}</div>
                <div
                  v-show="scope.row.selSkuNameList!=''&&scope.row.selSkuNameList!=undefined"
                  class="blueCor"
                  @click="selSku(scope.row.pkId,scope.$index)"
                >{{ scope.row.selSkuNameList }}</div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productName"
              :label="'商品数量'"
            >
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.quantity"
                  size="mini"
                  :min="1"
                />
              </template>
            </el-table-column>
          </el-table>

        </div>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataList"
        />
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="handleClose">{{ '取消' }}</el-button>
          <el-button
            type="primary"
            @click="sureProduct"
          >{{ '确认' }}</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="'规格'"
        :visible.sync="ggVisible"
        :close-on-click-modal="false"
        width="40%"
        center
        :before-close="handleCloseGg"
      >
        <div>
          <el-form>
            <el-form-item
              v-for="item,index in skuList"
              :key="index"
              :label="item.typeName"
            >
              <el-radio-group v-model="item.pkProductSku">
                <el-radio
                  v-for="ctem,cndex in item.specsList"
                  :key="ctem.pkId"
                  :label="ctem.pkId"
                  @change="getCheckBox(item.pkId,item.specsName)"
                >{{ ctem.specsName }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="handleCloseGg">{{ '取消' }}</el-button>
          <el-button
            type="primary"
            @click="sureSku"
          >{{ '确认' }}</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          class="thebtn"
          style="background: #F9F9F9;border: none "
          @click="cancelCz"
        > {{ '取消' }}</el-button>
        <el-button
          v-if="!deled"
          type="primary"
          class="thebtn"
          style="margin-left:20px"
          @click="saveDate"
        > {{ '确认' }}</el-button>
        <el-button
          v-else
          type="primary"
          class="thebtn"
          style="margin-left:20px"
          @click="saveDate1"
        > {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/giftGoods.js'
import * as apis from '@/api/product.js'
import * as api_s from '@/api/financial.js'
import topBar from '@/components/topBar'
import { pickDetail } from '@/api/manage'
import * as man from '@/api/manage'
export default {
  components: {
    topBar
  },
  data() {
    return {
      dialogVisible: false,
      ggVisible: false,
      disableds: false,
      deled: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      moren: 'RechargeCardList',
      topList: [
        {
          name: '充值提货卡',
          path: 'RechargeCardList'
        }
      ],
      detailList: [], // 商品数据
      allData: [], // 全部数据
      areaList: [], // 全部专区
      allGoods: [], // 全部商品
      isArea: '',
      plcz: {},
      select: {}, // 产品筛选
      dialogList: [], // 产品数组
      selectData: undefined, // 选中
      skuList: [], // 规格数组
      selSkuList: '',
      selSkuNameList: '',
      selIndex: '',
      showCndex: '',
      showIndex: '',
      pageData: {},
      // 邮费模板
      postMoneyList1: [],
      postMoneyList2: [],
      postMoneyList3: [],
      flags: 0,
      addFlag: true,
      // 海陆空
      transportTypeList: [],
      postList: [
        {
          text: '包邮',
          val: 0
        },
        {
          text: '不包邮',
          val: 1
        }
      ],
      pickTypeList: [
        {
          text: '提货产品',
          val: 0
        },
        {
          text: '法宝券',
          val: 8
        }
      ]
    }
  },
  computed: {
    addBtnDisabled() {
      return this.allData.some(item => item.consumeRuleConfigList.length > 0)
    }
  },
  mounted() {
    const geturl = window.location.href
    const getqyinfo = geturl.split('?')[1]
    const getqys = new URLSearchParams('?' + getqyinfo)
    const type = getqys.get('type')
    const pkId = getqys.get('pkId')
    this.getPostageList()
    if (type == 2) {
      this.getThDetails(pkId)
      this.disableds = true
      this.addFlag = false
      this.isArea = 1
    } else if (type == 3) {
      this.getThDetails(pkId)
      this.disableds = true
      this.deled = true
      this.addFlag = false
      this.isArea = 1
    } else {
      this.getData()
    }
  },
  methods: {
    // 获取提货卡详情
    getThDetails(pkId) {
      const that = this
      pickDetail({ pkId: pkId }).then((res) => {
        // console.error(res)
        if (res.data.detailList) {
          that.allData = [{ 'consumeRuleConfigList': [{
            memberName: res.data.memberName,
            memberCode: res.data.memberCode,
            pkId: res.data.pkId,
            baseQuantity: res.data.baseQuantity,
            receiveTime: res.data.receiveTime,
            usableQuantity: res.data.usableQuantity,
            quantity: 0,
            isFreeMail: res.data.isFreeMail,
            pickType: res.data.pickType,
            waresGiftConfigList: [
              {
                pkProduct: res.data.detailList[0].pkProduct,
                productName: res.data.detailList[0].productName,
                specsName: res.data.detailList[0].specsName,
                specsNameId: res.data.detailList[0].specsNameId,
                quantity: res.data.detailList[0].quantity
              }
            ] }], 'orderType': 1 }]
        } else {
          that.allData = [{ 'consumeRuleConfigList': [{
            memberName: res.data.memberName,
            memberCode: res.data.memberCode,
            pkId: res.data.pkId,
            baseQuantity: res.data.baseQuantity,
            receiveTime: res.data.receiveTime,
            usableQuantity: res.data.usableQuantity,
            quantity: 0,
            isFreeMail: res.data.isFreeMail,
            pickType: res.data.pickType,
            waresGiftConfigList: [
              {
                pkProduct: '',
                productName: '',
                specsName: '',
                specsNameId: '',
                quantity: 0
              }
            ] }], 'orderType': 1 }]
        }
      })
      this.$forceUpdate()
    },
    // 根据会员编号查询会员姓名
    checkName(data) {
      api_s.getMemberName({ memberCode: data.memberCode }).then((res) => {
        data.memberName = res.memberName
        this.$forceUpdate()
      })
    },
    changeGroup(ctem) {
      if (ctem.pkPostage) {
        ctem.pkPostage = ''
      }
    },
    getPostageList() {
      // 陆运
      apis.getPostageList({ tranType: 1 }).then((res) => {
        this.postMoneyList1 = res.data
      })
      // 空运
      apis.getPostageList({ tranType: 2 }).then((res) => {
        this.postMoneyList2 = res.data
      })
      // 海运
      apis.getPostageList({ tranType: 3 }).then((res) => {
        this.postMoneyList3 = res.data
      })
    },
    saveDate() {
      const dataList = []
      this.allData[0].consumeRuleConfigList.forEach((item) => {
        dataList.push(
          { 'memberCode': item.memberCode,
            'pkProduct': item.waresGiftConfigList[0].pkProduct,
            'memberName': item.memberName,
            'productName': item.waresGiftConfigList[0].productName + item.waresGiftConfigList[0].specsName,
            'receiveTime': item.receiveTime,
            'specsName': item.waresGiftConfigList[0].specsName,
            'specsNameId': item.waresGiftConfigList[0].specsNameId,
            'baseQuantity': item.baseQuantity,
            'quantity': item.quantity,
            'isFreeMail': item.isFreeMail,
            'pkPostage': item.pkPostage,
            'pkId': item.pkId ? item.pkId : '',
            'pickType': item.pickType
          }
        )
      })
      dataList.forEach((res) => {
        if (res.memberCode === '' || res.memberCode == undefined) {
          this.flags = 1
          return
        } else {
          this.flags = 2
        }
        if (res.memberName === '' || res.memberName == undefined) {
          this.flags = 1
          return
        } else {
          this.flags = 2
        }
        if (res.specsName === '' || res.specsName == undefined) {
          this.flags = 1
          return
        } else {
          this.flags = 2
        }

        if (res.baseQuantity === '' || res.baseQuantity == undefined) {
          this.flags = 1
          return
        } else {
          this.flags = 2
        }
        if (res.quantity === '' || res.quantity == undefined) {
          this.flags = 3

          return false
        } else {
          this.flags = 2
        }
        if (res.isFreeMail === '') {
          this.flags = 1
          return
        }
        if (res.isFreeMail === 0) {
          this.flags = 2

          return
        }
        if (res.isFreeMail === 1 && (res.pkPostage == '' || res.pkPostage == undefined)) {
          this.flags = 1
          return
        } else if (res.isFreeMail === 1 && res.pkPostage) {
          this.flags = 2
          return
        }
      })
      if (this.flags == 1) {
        this.$message({
          message: '请完整填写表单内容',
          type: 'warning'
        })
      } else if (this.flags == 3) {
        this.$message({
          message: '请输入增加数量',
          type: 'warning'
        })
      } else {
        const params = {
          detailList: dataList,
          signType: 0, // 普通件，急件，密件
          remark: '', // 备注
          fileList: [], // 附件[]
          userIdList: [], // 审批流程[]
          sendIdList: [] // 审批流程[]
        }
        man.rechargeConfirm(params).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$router.go(-1)
          }
        })
      }
    },
    saveDate1() {
      const dataList = []
      this.allData[0].consumeRuleConfigList.forEach((res) => {
        dataList.push(
          { 'memberCode': res.memberCode, 'pkProduct': res.waresGiftConfigList[0].pkProduct, 'memberName': res.memberName,
            'productName': res.waresGiftConfigList[0].productName + res.waresGiftConfigList[0].specsName,
            'receiveTime': res.receiveTime,
            'specsName': res.waresGiftConfigList[0].specsName, 'specsNameId': res.waresGiftConfigList[0].specsNameId,
            'baseQuantity': res.baseQuantity, 'quantity': res.quantity, 'isFreeMail': res.isFreeMail, 'pkPostage': res.pkPostage,
            'pkId': res.pkId ? res.pkId : ''
          }
        )
      })
      const params = {
        detailList: dataList
      }
      man.rechargeDel(params).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          })
          this.$router.go(-1)
        }
      })
      // this.$router.push({
      //   path: 'rechargeQc',
      //   query: {
      //     data: JSON.stringify(dataList),
      //     approvalBusiness: 701,
      //     type: this.deled
      //   }
      // })
    },
    getPage(allData) {
      this.allData = allData
    },
    cancelCz() {
      this.$router.push({
        path: 'RechargeCardList'
      })
    },
    getData() {
      api.specialArea().then((res) => {
        this.areaList = res.data
        // this.allData
        const arr = []
        this.areaList.forEach((item) => {
          arr.push({
            orderType: item.value,
            consumeRuleConfigList: []
          })
        })
        this.allData = arr
        this.isArea = res.data[0].value
      })
      api.waresList().then((res) => {
        this.allGoods = res.data
      })
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], 'selSkuList', this.selSkuList)
      this.$set(
        this.dialogList[this.selIndex],
        'selSkuNameList',
        this.selSkuNameList
      )
      this.ggVisible = false
    },
    sureProduct() {
      if (!this.selectData) {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        })
      } else {
        if (!this.selectData.selSkuNameList || this.selectData.selSkuNameList.length === 0) {
          this.$message({
            message: '请选择产品规格',
            type: 'warning'
          })
          return
        }
        this.allData.forEach((item) => {
          if (this.isArea == item.orderType) {
            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
            ].pkProduct = this.selectData.pkId

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
            ].productName = this.selectData.productName

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
            ].specsName = this.selectData.selSkuNameList

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
            ].specsNameId = this.selectData.selSkuList

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
            ].quantity = this.selectData.quantity
          }
        })

        // this.dialogVisible = false
        this.handleClose()
        this.$forceUpdate()
      }
    },
    toPlcz() {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList.forEach((ctem) => {
            ctem.waresGiftConfigList.forEach((stem) => {
              stem.quantity = this.plcz.quantity
            })
          })
        }
      })
    },
    reset() {
      this.plcz = {}
    },
    getCheckBox() {
      const arr1 = []
      const arr2 = []
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkId == item.pkProductSku) {
            arr1.push(ctem.pkId)
            arr2.push(ctem.specsName)
          }
        })
      })
      this.selSkuList = arr1.join(',')
      this.selSkuNameList = arr2.join(',')
    },
    setArea(val) {
      this.isArea = val
    },
    handleClose() {
      this.selectData = undefined
      this.dialogVisible = false
    },
    handleCloseGg() {
      this.ggVisible = false
    },
    getProduct(cndex, index) {
      this.showCndex = cndex
      this.showIndex = index
      this.getDataList()
      this.dialogVisible = true
    },
    addProduct(cndex, sndex) {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList[cndex].waresGiftConfigList.push({
            pkProduct: '',
            productName: '',
            specsName: '',
            specsNameId: '',
            quantity: ''
          })
        }
      })
    },
    reduceProduct(cndex, sndex) {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList[cndex].waresGiftConfigList.splice(sndex, 1)
        }
      })
    },
    addNewGoods() {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList.push({
            memberCode: '',
            isFreeMail: '',
            waresGiftConfigList: [
              {
                pkProduct: '',
                productName: '',
                specsName: '',
                specsNameId: '',
                quantity: ''

              }
            ],
            pickType: 0
          })
        }
      })
      // this.allData
      console.log(
        '%c [ this.allData ]-439',
        'font-size:13px; background:#4e52da; color:#9296ff;',
        this.allData
      )
    },
    selSku(pkId, index) {
      this.selIndex = index
      api
        .getProductSpecs({
          pkProduct: pkId
        })
        .then((res) => {
          const arr1 = []
          const arr2 = []
          res.data.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkId
            arr1.push(item.specsList[0].pkId)
            arr2.push(item.specsList[0].specsName)
          })
          this.selSkuList = arr1.join(',')
          this.selSkuNameList = arr2.join(',')

          this.skuList = res.data
          this.ggVisible = true
        })
    },
    getDataList() {
      api
        .getProductAll(Object.assign({ isPutOn: 0 }, this.queryParams, this.select, { isExistSpecs: 1 }))
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
          })
          this.dialogList = res.rows
          this.total = res.total
        })
    },
    submit() {
      const obj = Object.assign({}, this.pageData, {
        waresConfigParam: this.allData
      })
      console.log(
        '%c [ obj ]-445',
        'font-size:13px; background:#6f1b1a; color:#b35f5e;',
        obj
      )
      api.activitySave(obj).then((res) => {
        if (res.code == 200) {
          // this.$router.push({
          //   path: '/announcement/fbZxqc',
          //   query: {
          //     data: JSON.stringify(res.data),
          //   },
          // })
        }
      })
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      // 清除 所有勾选项
      if (selection.length === 0) {
        this.selectData = undefined
      } else {
        this.selectData = row
      }

      this.$refs.multipleTable.clearSelection()
      this.$refs.multipleTable.toggleRowSelection(row, true)
      // // 当表格数据都没有被勾选的时候 就返回
      // // 主要用于将当前勾选的表格状态清除
      // this.$nextTick(() => {
      //   if (selection.length == 0) return
      //   this.$refs.multipleTable.toggleRowSelection(row, true)
      //   this.selectData = row
      // })
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
    pickTypeChange(val, item) {
      if (val === 8) {
        this.$set(item, 'baseQuantity', '1')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.baoyou{
  text-align: center;
}
::v-deep .el-radio.is-bordered+.el-radio.is-bordered{
  margin-left: 0;
}
::v-deep .el-radio.is-bordered{
  padding: 0;
  margin: 10px 0;
  width: 100px;
  text-align: center;
  line-height: 34px;
}
::v-deep .el-date-editor.el-input{
  width: 100%;
}
.color-style{
  width: 5px;
  height: 19px;
  background: #c8161d;
  display: block;
  margin-top: 3px;
}
.app-main{
  background: #f9f9f9!important;
  padding: 0 20px;
}
.content{
  background: #fff;
  padding: 0 30px;
  height: 1100px;
  box-shadow: 0px 2px 20px 0px rgba(238,238,238,0.5);
  border-radius: 8px 8px 8px 8px;

}
::v-deep th{
  border:none !important;
}
// .page {
//   padding: 20px;
//   background: #f9f9f9;
//   font-size: 14px;
.main_a {
  // height: calc(100vh - 124px);
  // display: flex;
  // flex-direction: column;
  // height: calc(100vh - 164px);
  // height: 100%;
}
.main {
  background: #ffffff;
  border-radius: 8px;
  margin: 0 20px;
  height: calc(100vh - 230px);
  padding-bottom: 20px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
  width: 100%;
}
// }
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.thebtn{
  width: 137px;
  height: 38px;
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 10px 10px 5px 0px;
  margin: 0px 0 10px 0;
  display: flex;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
  padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.table {
  padding: 0 40px 100px 40px;
  margin-top: 1px;
  margin-top: 30px;
  max-height: 630px;
  overflow-y: auto;
}

table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
.table_b {
  border-top: 0;
}
th {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
  border-top: 0;
}
td {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  border-top: 0;
  overflow: hidden;
}
.tableFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tableFlex_i {
    flex: 1;
    ::v-deep .el-input__inner {
      width: 90%;
    }
  }
}
.tableAdd {
  width: 50px;
  img {
    width: 19px;
    height: 19px;
  }
}
.tableAddPro {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 19px;
    height: 19px;
    margin-left: 10px;
  }
}
.tableLeft {
  text-align: left;
  border: 0!important;
}
.tabList {
  display: flex;
  align-items: center;
  padding: 20px 0px 0 20px;
  .tabList_i {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .tabAct {
    background: #108ee9;
    color: #fff;
  }
}
.clearBtm {
  border-bottom: 0;
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon{
  line-height: 33px;
}
::v-deep .el-button{
  margin-top: 0;
}
</style>