web-zk-admin/src/views/goodsManage/productRelease/productDetail.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-31 13:55:20
-->
<template>
  <div class="page">
    <div class="topbox">
      <div
        v-for="(item, index) in topList"
        :key="index"
        class="levelList_i"
        :class="tabActive == item.id ? 'act' : ''"
        @click.prevent="handleLink(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="main">
      <div class="contain">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="auto"
        >
          <div v-show="tabActive==0">
            <el-row :gutter="10">
              <el-col class="el-col-40">
                <el-form-item
                  :label="'产品名称'"
                  prop="productName"
                >
                  <el-input
                    v-model="form.productName"
                    clearable
                    :disabled="methods"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'产品编号'"
                  prop="productCode"
                >
                  <el-input
                    v-model="form.productCode"
                    clearable
                    disabled
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'划线价'"
                  prop="retailPrice"
                >
                  <el-input
                    v-model="form.retailPrice"
                    clearable
                    :disabled="methods"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'发货类型'"
                  prop="shippingChannel"
                >
                  <el-select
                    v-model="form.shippingChannel"
                    clearable
                    :disabled="methods"
                  >
                    <el-option
                      v-for="item in fhTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  label="保质期"
                  prop="shelfLife"
                >
                  <el-input
                    v-model="form.shelfLife"
                    clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >{{ '天' }} </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  label="
                  单位"
                  prop="unit"
                >
                  <el-select
                    v-model="form.unit"
                    clearable
                    :disabled="methods"
                  >
                    <el-option
                      v-for="item in dwList"
                      :key="item.pkId"
                      :label="item.name"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'重量'"
                  prop="weight"
                >
                  <el-input
                    v-model="form.weight"
                    clearable
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >KG </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'邮费重量'"
                  prop="postageWeight"
                >
                  <el-input
                    v-model="form.postageWeight"
                    clearable
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >KG </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'产品属性'"
                  prop="productAttr"
                >
                  <el-select
                    v-model="form.productAttr"
                    clearable
                    :disabled="methods"
                  >
                    <el-option
                      v-for="item in productTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'所属分类'"
                  prop="pkClassify"
                >
                  <el-select
                    v-model="form.pkClassify"
                    clearable
                    :disabled="methods"
                  >
                    <el-option
                      v-for="item in classifyList"
                      :key="item.pkId"
                      :label="item.name"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'排列序号'"
                  prop="sort"
                >
                  <el-input
                    v-model="form.sort"
                    clearable
                    oninput="value = value.replace(/[^\d]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'长'"
                  prop="length"
                >
                  <el-input
                    v-model="form.length"
                    clearable
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >CM </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'宽'"
                  prop="width"
                >
                  <el-input
                    v-model="form.width"
                    clearable
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >CM </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'高'"
                  prop="height"
                >
                  <el-input
                    v-model="form.height"
                    clearable
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    :disabled="methods"
                    :placeholder="'请输入'"
                  >
                    <i
                      slot="suffix"
                      class="neibu"
                    >CM </i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item :label="'复购类型'">
                  <el-select
                    v-model="form.repurchaseType"
                    clearable
                    :disabled="methods"
                  >
                    <el-option
                      v-for="item in repurchaseTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item :label="'上架状态'" prop="isPutOn">
                  <el-select v-model="form.isPutOn" clearable>
                    <el-option
                      v-for="item in agreeList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col class="el-col-20">
                <el-form-item label="供应商" prop="pkCubasdoc">
                  <el-select
                    v-model="form.pkCubasdoc"
                    clearable
                    :placeholder="'请选择'"
                  >
                    <el-option
                      v-for="item in supplierList"
                      :key="item.pkId"
                      :label="item.custName"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="el-col-20">
                <el-form-item
                  :label="'产品主图'"
                  prop="cover"
                >
                  <el-upload
                    :headers="headers"
                    :disabled="methods"
                    :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
                    :action="uploadImgUrl"
                    :file-list="form.coverList"
                    :on-success="handlePictureSuccess"
                    :on-change="uploadImgChange"
                    list-type="picture-card"
                    :limit="1"
                    :on-remove="handleRemove"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <div class="jy">建议尺寸452×452，大小为200K</div>
                </el-form-item>
              </el-col>
              <el-col key="wmsCode" class="el-col-20">
                <el-form-item label="仓储编号" prop="wmsCode">
                  <el-input v-model="form.wmsCode" :disabled="methods" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-show="tabActive==1">
            <el-form-item
              :label="'规格'"
              prop="pkSpecsType"
            >
              <el-tag
                v-for="item,index in ggList"
                v-show="item.checked"
                :key="item.pkId"
                :closable="!methods"
                class="elTag"
                :disable-transitions="false"
                @close="handleClose(item.pkId)"
              >
                {{ item.typeName }}
              </el-tag>
              <el-button
                v-show="!methods"
                class="button-new-tag"
                size="small"
                @click="openDiag=true"
              >{{ '添加' }}</el-button>
            </el-form-item>
          </div>
          <div v-show="tabActive==2">
            <el-col class="el-col-20">
              <el-form-item
                :label="'抽奖礼品'"
                prop="isPrize"
              >
                <el-select
                  v-model="form.isPrize"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'特惠礼品'"
                prop="isGift"
              >
                <el-select
                  v-model="form.isGift"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'提货商品'"
                prop="isPickUp"
              >
                <el-select
                  v-model="form.isPickUp"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'合并发货'"
                prop="isMerge"
              >
                <el-select
                  v-model="form.isMerge"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'冷链运输'"
                prop="isFresh"
              >
                <el-select
                  v-model="form.isFresh"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'追溯编号'"
                prop="isBarCode"
              >
                <el-select
                  v-model="form.isBarCode"
                  clearable
                  :disabled="methods"
                >
                  <el-option
                    v-for="item in agreeList"
                    :key="item.val"
                    :label="item.text"
                    :value="item.val"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col class="el-col-20">
              <el-form-item
                :label="'运输方式'"
                prop="ysList"
              >
                <el-checkbox-group
                  v-model="form.ysList"
                  :disabled="methods"
                  @change="changeYsfs"
                >
                  <el-checkbox
                    v-for="item,index in transportTypeList"
                    :key="item.value"
                    :label="item.value"
                  >{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
      </div>
      <div
        v-show="!methods"
        class="footer"
      >
        <el-button
          size="small"
          class="thebtn2"
        > {{ '取消' }}</el-button>
        <el-button
          size="small"
          class="thebtn1"
          @click="submit('form')"
        > {{ '确认' }}</el-button>
      </div>
    </div>
    <!-- 产品弹框 -->
    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="50%"
      center
      :before-close="handleClose1"
    >
      <div class="cpHeight">
        <el-row>
          <el-col :span="22">
            <el-input
              v-model="select.query"
              clearable
              :placeholder="'请输入'"
              prefix-icon="el-icon-search"
              @keyup.enter.native="getProduct"
            />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" @click="getProduct">
              {{ '搜索' }}</el-button>
          </el-col>
        </el-row>
        <div style="height: 10px" />
        <el-table
          ref="multipleTable"
          :data="productList"
          height="500px"
          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="unitStr" :label="'单位'" />
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getProduct"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose1">{{ '取消' }}</el-button>
        <el-button type="primary" @click="sureProduct">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 规格 -->
    <el-dialog
      :title="'添加'"
      :visible.sync="openDiag"
      :close-on-click-modal="false"
      width="30%"
      center
    >
      <el-checkbox-group
        v-model="form.checkList"
        class="check"
      >
        <el-checkbox
          v-for="item,index in ggList"
          :key="item.pkId"
          class="check_i"
          :label="item.pkId"
        >{{ item.typeName }}</el-checkbox>
      </el-checkbox-group>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="openDiag = false">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="checkTrue"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import * as api from '@/api/product.js'
import * as supply from '@/api/supply.js'

import { productUpdate, productSave } from '@/api/product.js'
export default {
  name: 'Jcsz',
  data() {
    return {
      selectData: {},
      select: {},
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      dialogVisible: false,
      rules: {
        shippingChannel: [
          {
            required: true,
            message: '请输入发货类型',
            trigger: 'change'
          }
        ],
        unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
        productName: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        productCode: [
          { required: true, message: '请输入产品编号', trigger: 'blur' }
        ],
        retailPrice: [
          { required: true, message: '请输入划线价', trigger: 'blur' }
        ],
        shelfLife: [
          { required: true, message: '请输入保质期', trigger: 'blur' }
        ],
        weight: [{ required: true, message: '请输入重量', trigger: 'blur' }],
        postageWeight: [
          { required: true, message: '请输入邮费重量', trigger: 'blur' }
        ],
        productAttr: [
          {
            required: true,
            message: '请选择产品属性',
            trigger: 'change'
          }
        ],
        pkClassify: [
          {
            required: true,
            message: '请选择所属分类',
            trigger: 'change'
          }
        ],
        sort: [
          { required: true, message: '请输入排列序号', trigger: 'blur' }
        ],
        length: [{ required: true, message: '请输入长', trigger: 'blur' }],
        width: [{ required: true, message: '请输入宽', trigger: 'blur' }],
        height: [{ required: true, message: '请输入高', trigger: 'blur' }],
        cover: [
          { required: true, message: '请上传产品主图', trigger: 'change' }
        ],
        pkSpecsType: [
          { required: true, message: '请选择规格', trigger: 'change' }
        ],
        isPutOn: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        productBasName: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isPrize: [
          {
            required: true,
            message: '抽奖礼品',
            trigger: 'change'
          }
        ],
        pkCubasdoc: [
          {
            required: true,
            message: '请选择',
            trigger: 'change'
          }
        ],
        isGift: [
          { required: true, message: '请选择特惠礼品', trigger: 'change' }
        ],
        isPickUp: [
          { required: true, message: '请选择提货商品', trigger: 'change' }
        ],
        isMerge: [
          {
            required: true,
            message: '请选择合并发货',
            trigger: 'change'
          }
        ],
        isFresh: [
          {
            required: true,
            message: '冷链运输',
            trigger: 'change'
          }
        ],
        isBarCode: [
          { required: true, message: '请选择条码管理', trigger: 'change' }
        ],
        ysList: [
          { required: true, message: '请选择运输方式', trigger: 'change' }
        ],
        wmsCode: [
          { required: true, message: '请输入仓储编号', trigger: 'blur' }
        ]
      },
      ggList: [],
      // 规格名称弹框
      openDiag: false,
      showImg: true, // 默认展示
      noneUploadImg: false, //
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      headers: {
        Authorization: getToken()
      },
      form: {
        sort: '',
        sptw: '',
        checkList: [],
        ysList: [],
        coverList: [],
        sort: '',
        postageWeight: '',
        height: '',
        width: '',
        length: '',
        weight: '',
        shelfLife: '',
        wmsCode: ''
      },
      tabActive: 0,
      agreeList: [
        {
          text: '允许',
          val: 0
        },
        {
          text: '禁止',
          val: 1
        }
      ],
      topList: [
        {
          name: '基础设置',
          id: 0
        },
        {
          name: '规格明细',
          id: 1
        },
        {
          name: '拓展设置',
          id: 2
        }
      ],
      productTypeList: [],
      fhTypeList: [],
      dwList: [],
      classifyList: [],
      transportTypeList: [],
      productId: '',
      methods: true,
      wahtMethods: 0,
      repurchaseTypeList: [],
      productList: [],
      isType: 0,
      supplierList: []
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.isType = 0
      this.productId = this.$route.query.id
    }
    if (this.$route.query.pkProductBas) {
      this.isType = 1
      this.productId = this.$route.query.pkProductBas
      // this.form.pkProductBas = this.$route.query.pkProductBas
    }

    this.methods = !this.$route.query.methods
    this.wahtMethods = this.$route.query.methods
    // 获取规格list
    this.getGg()
    // // 产品属性枚举
    this.getProductType()
    // 发货类型
    this.getShipping()
    // 单位
    this.getUnit()
    // 所属分类
    this.getClassifyAll()
    // 运输方式
    this.getTransportType()
    // 复购类型
    this.getRepurchaseType()
    this.getProduct()
  },
  methods: {
    sureProduct() {
      this.form.productBasName = this.selectData.productName
      this.form.pkProductBas = this.selectData.pkId
      this.dialogVisible = false
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length == 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.selectData = row
    },
    handleClose1() {
      this.dialogVisible = false
    },
    opProduct() {
      this.dialogVisible = true
    },
    getProduct() {
      api.productFind1(Object.assign({}, this.queryParams, this.select)).then((res) => {
        this.productList = res.rows
        this.total = res.total
      })
    },
    getRepurchaseType() {
      api.repurchaseType().then((res) => {
        this.repurchaseTypeList = res.data
      })
      supply.supplierList().then((res) => {
        this.supplierList = res.rows
      })
    },
    getProductCode() {
      api.getProductCode().then((res) => {
        this.form.productCode = res.msg
      })
    },
    getAllData() {
      api.productDetailt({ productId: this.productId }).then((res) => {
        this.form = res.data
        if (res.data.cover) {
          this.noneUploadImg = true
        }
        this.form.coverList = [{ url: res.data.cover }]
        this.form = res.data
        //  let ysList =
        this.$set(this.form, 'ysList', [
          res.data.isLandTrans == 0 ? 1 : '',
          res.data.isAirTrans == 0 ? 2 : '',
          res.data.isOceanTrans == 0 ? 3 : ''
        ])
        // this.form.checkList = this.form.pkSpecsType
        this.$set(this.form, 'checkList', this.form.pkSpecsType)
        this.ggList.forEach((item) => {
          this.form.pkSpecsType.forEach((child) => {
            if (item.pkId == child) {
              // item.checked = true
              this.$set(item, 'checked', true)
            }
          })
        })
        if (!this.form.wmsCode) {
          this.$set(this.form, 'wmsCode', this.form.productCode)
        }
        if (this.wahtMethods == 2) {
          this.getProductCode()
        }
        this.$forceUpdate()
      })
    },
    getAllData1() {
      api.productDetailBas({ pkProductBas: this.productId }).then((res) => {
        if (res.data) {
          this.form = res.data
          this.productId = this.$route.query.pkProductBas
          this.$set(this.form, 'pkProductBas', this.productId)
          if (res.data.cover) {
            this.noneUploadImg = true
          }
          this.form.coverList = [{ url: res.data.cover }]
          this.form = res.data
          //  let ysList =
          this.$set(this.form, 'ysList', [
            res.data.isLandTrans == 0 ? 1 : '',
            res.data.isAirTrans == 0 ? 2 : '',
            res.data.isOceanTrans == 0 ? 3 : ''
          ])
          // this.form.checkList = this.form.pkSpecsType
          this.$set(this.form, 'checkList', this.form.pkSpecsType)
          this.ggList.forEach((item) => {
            this.form.pkSpecsType.forEach((child) => {
              if (item.pkId == child) {
                // item.checked = true
                this.$set(item, 'checked', true)
              }
            })
          })
        } else {
          this.$set(this.form, 'pkProductBas', this.productId)
        }
        this.$forceUpdate()
      })
    },
    // 运输方式单独三个字段
    changeYsfs(val) {
      // 有陆运
      if (val.indexOf(1) > -1) {
        this.form.isLandTrans = 0
      } else {
        this.form.isLandTrans = 1
      }
      // 有空运
      if (val.indexOf(2) > -1) {
        this.form.isAirTrans = 0
      } else {
        this.form.isAirTrans = 1
      }
      // 海运
      if (val.indexOf(3) > -1) {
        this.form.isOceanTrans = 0
      } else {
        this.form.isOceanTrans = 1
      }
    },
    // 运输方式
    getTransportType() {
      api.transportType().then((res) => {
        this.transportTypeList = res.data
      })
    },
    // 所属分类
    getClassifyAll() {
      api.classifyAll().then((res) => {
        this.classifyList = res.data
      })
    },
    // 选完规格
    checkTrue() {
      this.ggList.forEach((item) => {
        item.checked = false
      })
      this.ggList.forEach((item) => {
        this.form.checkList.forEach((child) => {
          if (item.pkId == child) {
            item.checked = true
          }
        })
      })
      this.openDiag = false
      this.form.pkSpecsType = this.form.checkList
    },
    // 获取规格
    getGg() {
      api.findAll().then((res) => {
        res.data.forEach((item) => {
          item.checked = false
        })
        this.ggList = res.data
        if (this.isType == 0) {
          this.getAllData()
        } else {
          this.getAllData1()
        }
      })
    },
    // 产品属性枚举
    getProductType() {
      api.productType().then((res) => {
        this.productTypeList = res.data
      })
    },
    // 发货类型
    getShipping() {
      api.getShipping().then((res) => {
        this.fhTypeList = res.data
      })
    },
    // 单位
    getUnit() {
      api.unitAll().then((res) => {
        this.dwList = res.data
      })
    },
    // 移除规格
    handleClose(pkId) {
      // 引藏全规格中选中字段
      this.ggList.forEach((item) => {
        if (item.pkId == pkId) {
          item.checked = false
        }
      })
      // 移除表单选中
      this.form.checkList.splice(this.form.checkList.indexOf(pkId), 1)
      this.$forceUpdate()
    },
    submit(form) {
      let urlRequir = ''
      if (this.wahtMethods == 1) {
        urlRequir = productUpdate
      } else {
        urlRequir = productSave
      }
      this.$refs[form].validate((valid) => {
        if (valid) {
          urlRequir(this.form).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$router.go(-1)
            }
          })
        } else {
          return false
        }
      })
    },
    // 切换tab
    handleLink(id) {
      this.tabActive = id
    },
    uploadImgChange(file, fileList) {
      this.noneUploadImg = fileList.length > 0
      this.$refs.form.clearValidate('cover')
    },
    // 图片上传成功后的回调
    handlePictureSuccess(res, file) {
      this.form.cover = res.data.url
    },
    // 图片上传删除
    handleRemove(file, fileList) {
      this.form.cover = ''
      this.noneUploadImg = fileList.length > 0
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.el-col-20 {
  width: 20%;
}
.el-col-60 {
  width: 60%;
}
.el-col-40 {
  width: 40%;
}
.topbox {
  align-items: center;
  padding: 0px 0 0px 0;
  display: flex; //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 3px 10px;
    // width: 88px;
    // height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    // line-height: 34px;
  }
  .act {
    color: #ffffff;
    background: #c8161d;
  }
  .act1 {
    border-bottom: 3px solid #1890ff !important;
  }
  .cha {
    font-size: 16px;
    color: #606266;
    position: absolute;
    top: 10px;
  }
  .li {
    width: 40px;
    margin: 0 auto;
    border-bottom: 3px solid transparent;
  }
}
.page {
  height: calc(100vh - 50px);
  overflow: hidden;
  background: #f9f9f9;
  padding-top: 20px;
}

.main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 124px);
  overflow: hidden;
}
.contain {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  // margin: 10px 20px 0 20px;
  flex: 1;
  padding-top: 10px;
}
.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;
}
.thebtn1 {
  background: #c8161d;
  color: #ffffff;
  padding: 9px 45px;
}
.thebtn2 {
  background: #cccccc;
  color: #ffffff;
  padding: 9px 45px;
}
.neibu {
  margin-right: 10px;
  color: #666666;
  font-style: normal;
}
.elTag {
  margin-right: 10px;
}
.check {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  // justify-content: center;
  .check_i {
    width: 50%;
    text-align: left;
    margin-right: 0 !important;
  }
}
.jy {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
::v-deep .el-form-item {
  margin-bottom: 15px !important;
}
</style>