forked from angelo/web-retail-admin
				
			
		
			
				
	
	
		
			979 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			979 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			Vue
		
	
	
	
<!--
 | 
						||
 * @Descripttion:
 | 
						||
 * @version:
 | 
						||
 * @Author: kBank
 | 
						||
 * @Date: 2022-10-28 09:02:23
 | 
						||
-->
 | 
						||
<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
 | 
						||
                    :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
 | 
						||
                    :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
 | 
						||
                    oninput="value=value.replace(/[^\d.]/g,'')"
 | 
						||
                    :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>
 | 
						||
                    <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,'')"
 | 
						||
                    :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>
 | 
						||
                    <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,'')"
 | 
						||
                    :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,'')"
 | 
						||
                    :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>
 | 
						||
                    <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>
 | 
						||
                    <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,'')"
 | 
						||
                    :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,'')"
 | 
						||
                    :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,'')"
 | 
						||
                    :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,'')"
 | 
						||
                    :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>
 | 
						||
                    <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"
 | 
						||
                             :class="{ uploadIconOne: showImg, uploadIcon: noneUploadImg }"
 | 
						||
                             :action="uploadImgUrl"
 | 
						||
                             :on-success="handlePictureSuccess"
 | 
						||
                             :on-change="uploadImgChange"
 | 
						||
                             list-type="picture-card"
 | 
						||
                             :limit="1"
 | 
						||
                             :on-remove="handleRemove">
 | 
						||
                    <i class="el-icon-plus"></i>
 | 
						||
                  </el-upload> -->
 | 
						||
                  <imageUpload v-model="form.cover" />
 | 
						||
                  <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
 | 
						||
                class="elTag"
 | 
						||
                :disable-transitions="false"
 | 
						||
                @close="handleClose(item.pkId)"
 | 
						||
              >
 | 
						||
                {{ item.typeName }}
 | 
						||
              </el-tag>
 | 
						||
              <el-button
 | 
						||
                class="button-new-tag"
 | 
						||
                size="small"
 | 
						||
                @click="openDiag = true"
 | 
						||
              >{{ '添加' }}</el-button>
 | 
						||
            </el-form-item>
 | 
						||
          </div>
 | 
						||
          <div v-show="tabActive == 2">
 | 
						||
            <el-row>
 | 
						||
              <el-col class="el-col-20">
 | 
						||
                <el-form-item :label="'抽奖礼品'" prop="isPrize">
 | 
						||
                  <el-select v-model="form.isPrize" 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="isGift">
 | 
						||
                  <el-select v-model="form.isGift" 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="isPickUp">
 | 
						||
                  <el-select v-model="form.isPickUp" 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="isMerge">
 | 
						||
                  <el-select v-model="form.isMerge" 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="isFresh">
 | 
						||
                  <el-select v-model="form.isFresh" 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="isBarCode">
 | 
						||
                  <el-select v-model="form.isBarCode" 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="ysList">
 | 
						||
                  <el-checkbox-group v-model="form.ysList" @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>
 | 
						||
            </el-row>
 | 
						||
          </div>
 | 
						||
        </el-form>
 | 
						||
      </div>
 | 
						||
      <div class="footer">
 | 
						||
        <el-button size="small" class="cancelBtn">
 | 
						||
          {{ '取消' }}</el-button>
 | 
						||
        <el-button
 | 
						||
          v-hasButtons="['ProductReleaseConfirm']"
 | 
						||
          size="small"
 | 
						||
          style="background: #c8161d; border: none"
 | 
						||
          class="sureBtn"
 | 
						||
          @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
 | 
						||
    >
 | 
						||
      <div class="addCheck">
 | 
						||
        <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>
 | 
						||
      </div>
 | 
						||
      <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 ImageUpload from '@/components/ImageUpload'
 | 
						||
import * as supply from '@/api/supply.js'
 | 
						||
 | 
						||
export default {
 | 
						||
  name: 'Jcsz',
 | 
						||
  components: {
 | 
						||
    ImageUpload
 | 
						||
  },
 | 
						||
  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' }
 | 
						||
        ],
 | 
						||
        retailPrice: [
 | 
						||
          { required: true, message: '请输入划线价', trigger: 'blur' }
 | 
						||
        ],
 | 
						||
        shelfLife: [
 | 
						||
          { required: true, message: '请输入保质期', trigger: 'blur' }
 | 
						||
        ],
 | 
						||
        weight: [{ required: true, message: '请输入重量', trigger: 'blur' }],
 | 
						||
        productCode: [
 | 
						||
          { required: true, message: '请输入产品编号', trigger: 'blur' }
 | 
						||
        ],
 | 
						||
        postageWeight: [
 | 
						||
          { required: true, message: '请输入邮费重量', trigger: 'blur' }
 | 
						||
        ],
 | 
						||
        productAttr: [
 | 
						||
          {
 | 
						||
            required: true,
 | 
						||
            message: '请选择产品属性',
 | 
						||
            trigger: 'change'
 | 
						||
          }
 | 
						||
        ],
 | 
						||
        isPutOn: [
 | 
						||
          { required: true, message: '请选择', trigger: 'change' }
 | 
						||
        ],
 | 
						||
        productBasName: [
 | 
						||
          { 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' }
 | 
						||
        ],
 | 
						||
        isPrize: [
 | 
						||
          {
 | 
						||
            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'
 | 
						||
          }
 | 
						||
        ],
 | 
						||
        pkCubasdoc: [
 | 
						||
          {
 | 
						||
            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: {
 | 
						||
        productBasName: '',
 | 
						||
        productCode: '',
 | 
						||
        sptw: '',
 | 
						||
        checkList: [],
 | 
						||
        ysList: [],
 | 
						||
        sort: '',
 | 
						||
        postageWeight: '',
 | 
						||
        height: '',
 | 
						||
        width: '',
 | 
						||
        length: '',
 | 
						||
        weight: '',
 | 
						||
        shelfLife: '',
 | 
						||
        retailPrice: '',
 | 
						||
        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: [],
 | 
						||
      repurchaseTypeList: [],
 | 
						||
      productList: [],
 | 
						||
      supplierList: []
 | 
						||
    }
 | 
						||
  },
 | 
						||
  mounted() {
 | 
						||
    // 获取规格list
 | 
						||
    this.getGg()
 | 
						||
    // // 产品属性枚举
 | 
						||
    this.getProductType()
 | 
						||
    // 发货类型
 | 
						||
    this.getShipping()
 | 
						||
    // 单位
 | 
						||
    this.getUnit()
 | 
						||
    // 复购类型
 | 
						||
    this.getRepurchaseType()
 | 
						||
    // 所属分类
 | 
						||
    this.getClassifyAll()
 | 
						||
    // 运输方式
 | 
						||
    this.getTransportType()
 | 
						||
    // 获取产品编号
 | 
						||
    this.getProductCode()
 | 
						||
    // 获取排序
 | 
						||
    this.getSort()
 | 
						||
    // // 获取产品
 | 
						||
    // 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
 | 
						||
      })
 | 
						||
    },
 | 
						||
    getSort() {
 | 
						||
      api.getMaxSort().then((res) => {
 | 
						||
        this.form.sort = res.data
 | 
						||
      })
 | 
						||
    },
 | 
						||
    getProductCode() {
 | 
						||
      api.getProductCode().then((res) => {
 | 
						||
        this.form.productCode = res.msg
 | 
						||
        this.form.wmsCode = res.msg
 | 
						||
      })
 | 
						||
    },
 | 
						||
    // 运输方式单独三个字段
 | 
						||
    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
 | 
						||
      })
 | 
						||
    },
 | 
						||
    // 产品属性枚举
 | 
						||
    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) {
 | 
						||
      this.$refs[form].validate((valid) => {
 | 
						||
        if (valid) {
 | 
						||
          api.productSave(this.form).then((res) => {
 | 
						||
            if (res.code == 200) {
 | 
						||
              this.$message({
 | 
						||
                message: '添加成功',
 | 
						||
                type: 'success'
 | 
						||
              })
 | 
						||
              this.$router.replace({
 | 
						||
                path: '/goodsManage/productList'
 | 
						||
              })
 | 
						||
            } else {
 | 
						||
              this.$message({
 | 
						||
                message: res.msg,
 | 
						||
                type: 'warning',
 | 
						||
                duration: 3000
 | 
						||
              })
 | 
						||
            }
 | 
						||
          })
 | 
						||
        } else {
 | 
						||
          return false
 | 
						||
        }
 | 
						||
      })
 | 
						||
    },
 | 
						||
    // 切换tab
 | 
						||
    handleLink(id) {
 | 
						||
      this.tabActive = id
 | 
						||
    },
 | 
						||
    tableRowClassName({ row, rowIndex }) {
 | 
						||
      if (rowIndex % 2 == 1) {
 | 
						||
        return 'warning-row'
 | 
						||
      } else if (rowIndex % 2 == 0) {
 | 
						||
        return 'success-row'
 | 
						||
      }
 | 
						||
      return ''
 | 
						||
    }
 | 
						||
    // 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
 | 
						||
    // },
 | 
						||
  }
 | 
						||
}
 | 
						||
</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%;
 | 
						||
}
 | 
						||
.page {
 | 
						||
  padding-top: 20px;
 | 
						||
  background: #f9f9f9;
 | 
						||
}
 | 
						||
.topbox {
 | 
						||
  align-items: center;
 | 
						||
  padding: 0px 0 0px 0;
 | 
						||
  display: flex;
 | 
						||
  //   background: skyblue;
 | 
						||
  .levelList_i {
 | 
						||
    margin-left: 20px;
 | 
						||
    position: relative;
 | 
						||
    cursor: pointer;
 | 
						||
    // padding: 0 5px;
 | 
						||
    // width: 88px;
 | 
						||
    // height: 34px;
 | 
						||
    border-radius: 17px;
 | 
						||
    border: 1px solid #cccccc;
 | 
						||
    font-size: 12px;
 | 
						||
    font-family: MicrosoftYaHei;
 | 
						||
    text-align: center;
 | 
						||
    padding: 4px 15px;
 | 
						||
    // line-height: 32px;
 | 
						||
  }
 | 
						||
  .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;
 | 
						||
  }
 | 
						||
}
 | 
						||
.main {
 | 
						||
  display: flex;
 | 
						||
  flex-direction: column;
 | 
						||
}
 | 
						||
.contain {
 | 
						||
  background: #ffffff;
 | 
						||
  border-radius: 8px;
 | 
						||
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
 | 
						||
  margin: 0px 0px 0 0px;
 | 
						||
  flex: 1;
 | 
						||
  padding: 10px;
 | 
						||
}
 | 
						||
.footer {
 | 
						||
  height: 68px;
 | 
						||
  background: #ffffff;
 | 
						||
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
 | 
						||
  margin: 0 0px;
 | 
						||
  display: flex;
 | 
						||
  justify-content: center;
 | 
						||
  align-items: center;
 | 
						||
}
 | 
						||
.thebtn1 {
 | 
						||
  background: #48b2fd;
 | 
						||
  color: #ffffff;
 | 
						||
  padding: 9px 45px;
 | 
						||
}
 | 
						||
.thebtn2 {
 | 
						||
  background: #f9f9f9;
 | 
						||
  color: #333;
 | 
						||
  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-bottom: 10px;
 | 
						||
    margin-right: 0 !important;
 | 
						||
  }
 | 
						||
}
 | 
						||
.jy {
 | 
						||
  font-size: 10px;
 | 
						||
  font-family: PingFang SC-Regular, PingFang SC;
 | 
						||
  font-weight: 400;
 | 
						||
  color: #999999;
 | 
						||
}
 | 
						||
.addCheck {
 | 
						||
  padding-left: 20px;
 | 
						||
}
 | 
						||
::v-deep .el-dialog__body {
 | 
						||
  border-top: 1px solid #eee;
 | 
						||
  border-bottom: 1px solid #eee;
 | 
						||
}
 | 
						||
::v-deep .el-form-item {
 | 
						||
  margin-bottom: 15px !important;
 | 
						||
}
 | 
						||
</style>
 |