order-ui-pc/src/views/goodStore/goodsCost/components/baseForm.vue

<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rulesThis"
    ref="ruleForm"
    :size="'mini'"
    v-loading="loading"
    label-width="110px"
  >
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul style="padding: 140px 0 0 0">
          <li>基</li>
          <li>础</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="cat_id">
              <search-sort
                :value="ruleForm.cat_id"
                :placeholder="'商品分类'"
                :disabled="
                  type === 'view' || type === 'editBase' || type === 'editCoin'
                "
                :size="'mini'"
                :names="cat_id_name"
                :isDetail="type !== 'add'"
                @searchChange="goods_class_change"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品名称" prop="good_name">
              <el-input
                placeholder="商品名称"
                maxlength="100"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.good_name"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务公司" prop="company_id">
              <search-work-company
                :value="ruleForm.company_id"
                :placeholder="'业务公司'"
                :disabled="
                  type === 'view' || type === 'editBase' || type === 'editCoin'
                "
                :size="'mini'"
                :isDetail="type !== 'add'"
                @searchChange="company_idsearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierNo">
              <search-supplier
                :value="ruleForm.supplierNo"
                :placeholder="'供应商'"
                :disabled="type === 'view' || type === 'editCoin'"
                :size="'mini'"
                :names="supplierName"
                :isDetail="type !== 'add'"
                @searchChange="supplierNosearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品品牌" prop="brandid">
              <search-brand
                :value="ruleForm.brandid"
                :disabled="type === 'view' || type === 'editCoin'"
                :size="'mini'"
                :isDetail="type !== 'add'"
                :names="brand_name"
                :placeholder="'商品品牌'"
                @searchChange="brandidsearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售权限" prop="is_auth">
              <el-select
                v-model="ruleForm.is_auth"
                filterable
                clearable
                :disabled="type === 'view' || type === 'editCoin'"
                style="width: 100%"
                placeholder="销售权限"
              >
                <el-option
                  v-for="group in options3"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="单位" prop="unit" label-width="60px">
              <search-unit
                :value="ruleForm.unit"
                :disabled="type === 'view' || type === 'editCoin'"
                :size="'mini'"
                :isDetail="type !== 'add'"
                :names="unit_name"
                :placeholder="'单位'"
                @searchChange="unitsearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="税点" prop="tax" label-width="60px">
              <search-tax
                :value="ruleForm.tax"
                :disabled="
                  type === 'view' || type === 'editBase' || type === 'editCoin'
                "
                :size="'mini'"
                :isDetail="type !== 'add'"
                :placeholder="'税点'"
                @searchChange="taxsearchChange"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专属类型" prop="is_exclusive">
              <search-exclusive
                :disabled="type === 'view' || type === 'editCoin'"
                style="width: 100%"
                :isDetail="type !== 'add'"
                :size="'mini'"
                placeholder="专属类型"
                :value="ruleForm.is_exclusive"
                @selectChange="exclusiveSearchChange"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="商品总重量" prop="weight">
              <digital-input
                :values="ruleForm.weight"
                :name="'ruleForm.weight'"
                :placeholder="'商品总重量'"
                :min="0"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="3"
                :size="'mini'"
                :controls="false"
                :append="'g'"
                @reschange="number_change($event, 'weight')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否库存品" prop="is_stock">
              <el-select
                v-model="ruleForm.is_stock"
                filterable
                clearable
                :disabled="
                  type === 'view' || type === 'editBase' || type === 'editCoin'
                "
                style="width: 100%"
                placeholder="是否库存品"
              >
                <el-option
                  v-for="group in options4"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-show="is_noble">
            <el-row>
              <el-col :span="8">
                <el-form-item label="贵金属重量" prop="noble_weight">
                  <digital-input
                    :values="ruleForm.noble_weight"
                    :placeholder="'贵金属重量'"
                    :name="'ruleForm.noble_weight'"
                    :min="0"
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    :max="100000000000"
                    :position="'right'"
                    :precision="3"
                    :size="'mini'"
                    :controls="false"
                    :append="'g'"
                    @reschange="number_change($event, 'noble_weight')"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="贵金属种类" prop="noble_metal">
                  <search-metal-kind
                    :value="ruleForm.noble_metal"
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    :size="'mini'"
                    :isDetail="type !== 'add'"
                    :placeholder="'贵金属种类'"
                    @searchChange="noble_metalsearchChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="启用实时金价" prop="is_gold_price">
                  <el-select
                    v-model="ruleForm.is_gold_price"
                    filterable
                    clearable
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    style="width: 100%"
                    placeholder="启用实时金价"
                  >
                    <el-option
                      v-for="group in options5"
                      :key="group.id"
                      :label="group.name"
                      :value="group.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="有无工差" prop="is_diff">
                  <el-select
                    v-model="ruleForm.is_diff"
                    filterable
                    clearable
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    style="width: 100%"
                    placeholder="有无工差"
                  >
                    <el-option
                      v-for="group in options8"
                      :key="group.id"
                      :label="group.name"
                      :value="group.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="配置要求" prop="config" label-width="85px">
                  <el-select
                    v-model="ruleForm.config"
                    multiple
                    :disabled="type === 'view'"
                    style="width: 100%"
                    placeholder="配置要求"
                  >
                    <el-option
                      v-for="(item, index) in options9"
                      :key="item + index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他配置要求" prop="other_config">
                  <el-input
                    placeholder="其他配置要求"
                    maxlength="100"
                    :disabled="type === 'view'"
                    v-model="ruleForm.other_config"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="8">
            <el-form-item label="售后说明" prop="after_sales">
              <el-input
                type="textarea"
                :rows="4"
                :disabled="type === 'view' || type === 'editCoin'"
                placeholder="售后说明"
                v-model="ruleForm.after_sales"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品备注" prop="good_remark">
              <el-input
                type="textarea"
                :rows="4"
                :disabled="type === 'view' || type === 'editCoin'"
                placeholder="商品备注"
                v-model="ruleForm.good_remark"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工艺说明" prop="craft_desc">
              <el-input
                type="textarea"
                :disabled="type === 'view' || type === 'editCoin'"
                :rows="4"
                placeholder="工艺说明"
                v-model="ruleForm.craft_desc"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否定制" prop="good_type">
              <el-select
                v-model="ruleForm.good_type"
                filterable
                :disabled="
                  type === 'view' || type === 'editBase' || type === 'editCoin'
                "
                clearable
                style="width: 100%"
                placeholder="是否定制"
                @change="good_type_change"
              >
                <el-option
                  v-for="group in options1"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="ruleForm.good_type === '1'">
            <el-form-item label="定制起订量" prop="moq">
              <digital-input
                :values="ruleForm.moq"
                :placeholder="'定制起订量'"
                :name="'ruleForm.moq'"
                :min="0"
                :disabled=" type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="''"
                @reschange="number_change($event, 'moq')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-show="ruleForm.good_type === '1'">
            <el-form-item label="定制工期" prop="customized">
              <digital-input
                :values="ruleForm.customized"
                :placeholder="'定制工期'"
                :name="'ruleForm.customized'"
                :min="0"
                :disabled=" type === 'view' || type === 'editBase' "
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'customized')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>规</li>
          <li>格</li>
          <li>信</li>
          <li>息</li>
        </ul>
      </el-col>
      <el-col :span="23" class="dmain" style="padding: 20px 0 20px 18px">
        <el-table
          :data="spec_tableData"
          :size="'mini'"
          border
          style="width: 100%"
        >
          <el-table-column prop="spec_value" label="规格类型" />
          <el-table-column prop="spec_value_value" label="规格值" />
          <el-table-column
            fixed="right"
            v-if="type === 'add' || type === 'editBase'"
          >
            <template slot="header" slot-scope="scope">
              <span>操作</span>
              <el-tooltip
                class="item"
                effect="dark"
                content="添加规格类型"
                placement="top"
              >
                <i
                  class="el-icon-circle-plus-outline fr"
                  style="font-size: 18px; margin-top: 2px"
                  @click="openEdit('-1', {})"
                />
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-button
                @click="openEdit(scope.$index, scope.row)"
                type="text"
                size="small"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="openDelete(scope.$index)"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 新增/修改 -->
        <base-form-add-edit
          :index="modelIndex"
          :show-model="showModel"
          :sitem="sitem"
          @refresh="refreshEdit"
          @cancel="showModel = false"
        />
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>包</li>
          <li>装</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="6">
            <el-form-item label="包装方式" prop="packing_way">
              <el-input
                placeholder="包装方式"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_way"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱规格" prop="packing_spec">
              <el-input
                placeholder="装箱规格"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_spec"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱重量" prop="packing_weight">
              <digital-input
                :values="ruleForm.packing_weight"
                :placeholder="'装箱重量'"
                :min="0"
                :name="'ruleForm.packing_weight'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="3"
                :size="'mini'"
                :controls="false"
                :append="'g'"
                @reschange="number_change($event, 'packing_weight')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装箱尺寸" prop="packing_size">
              <el-input
                placeholder="装箱尺寸"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_size"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品尺寸" prop="good_size">
              <el-input
                placeholder="商品尺寸"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.good_size"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品条形码" prop="good_bar">
              <el-input
                placeholder="商品条形码"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.good_bar"
                type="number"
                :min="0"
                :max="9999999999999"
                :step="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装清单" prop="packing_list">
              <el-input
                placeholder="包装清单"
                :disabled="type === 'view' || type === 'editCoin'"
                v-model="ruleForm.packing_list"
                maxlength="250"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>发</li>
          <li>货</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="供货区域" prop="supply_area">
              <el-select
                v-model="ruleForm.supply_area"
                filterable
                clearable
                :disabled="type === 'view' || type === 'editCoin'"
                style="width: 100%"
                placeholder="供货区域"
              >
                <el-option
                  v-for="group in options6"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货地" prop="delivery_place">
              <select-area
                :placeholder="'发货地'"
                :value="ruleForm.delivery_place"
                :is-detail="id !== 'add'"
                :disabled="type === 'view' || type === 'editCoin'"
                :size="'mini'"
                @selectChange="selectAreadelivery_place"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产地" prop="origin_place">
              <select-area
                :placeholder="'产地'"
                :value="ruleForm.origin_place"
                :size="'mini'"
                :is-detail="id !== 'add'"
                :disabled="type === 'view' || type === 'editCoin'"
                @selectChange="selectAreaorigin_place"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物流时间" prop="delivery_day">
              <digital-input
                :values="ruleForm.delivery_day"
                :placeholder="'物流时间'"
                :min="0"
                :name="'ruleForm.delivery_day'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'delivery_day')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="供货周期" prop="lead_time">
              <digital-input
                :values="ruleForm.lead_time"
                :placeholder="'物流时间'"
                :min="0"
                :name="'ruleForm.lead_time'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'lead_time')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调样周期" prop="sample_day">
              <digital-input
                :values="ruleForm.sample_day"
                :placeholder="'调样周期'"
                :min="0"
                :name="'ruleForm.sample_day'"
                :disabled="type === 'view' || type === 'editCoin'"
                :max="100000000000"
                :position="'right'"
                :precision="0"
                :size="'mini'"
                :controls="false"
                :append="'天'"
                @reschange="number_change($event, 'sample_day')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>图</li>
          <li>片</li>
          <li>信</li>
          <li>息</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row style="padding: 0 0 20px 0">
          <el-col :span="8">
            <el-form-item
              label="商品主图"
              prop="good_thumb_img"
              class="activity-upload"
            >
              <div class="btnupload" style="position: relative">
                <img
                  v-if="ruleForm.good_thumb_img"
                  :src="ruleForm.good_thumb_img"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <file-upload
                  class="Upload"
                  :disabled="type === 'view' || type === 'editCoin'"
                  :accept="'.jpg,.png,.jpeg'"
                  :multiple="true"
                  :uploadcondition="beforeAvatarUpload"
                  @UploadErrorEvent="UploadErrorEventgood_thumb_img"
                  @UploadSuccessEvent="UploadSuccessEventgood_thumb_img"
                ></file-upload>
              </div>
              <div class="txt-tips fl">
                <p>尺寸比例：</p>
                <p>1:1</p>
              </div>
            </el-form-item>
            <div style="font-size: 12px; color: #606266">
              <span style="padding: 0 0 0 20px">图片大小：小于1M</span>
              <span style="padding: 0 0 0 20px">图片类型.jpg/png/jpeg</span>
            </div>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详情介绍图" prop="good_info_img">
              <div class="good_info_img_div">
                <ul v-if="ruleForm.good_info_img" class="clear">
                  <li
                    class="img-show-li"
                    v-viewer
                    v-for="(img, iindex) in ruleForm.good_info_img"
                    :key="img + iindex"
                  >
                    <div class="img-show-li-div">
                      <img :src="img" class="img-show" alt="" />
                      <i
                        v-if="type == 'add' || type === 'editBase'"
                        class="el-icon-close"
                        @click="closeImg(iindex)"
                      ></i>
                    </div>
                  </li>
                  <li
                    class="img-show-li"
                    v-if="
                      ruleForm.good_info_img.length < 10 &&
                      (type == 'add' || type === 'editBase')
                    "
                  >
                    <div class="activity-upload">
                      <div class="btnupload" style="position: relative">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <file-upload
                          class="Upload"
                          :disabled="type === 'view' || type === 'editCoin'"
                          :accept="'.jpg,.png,.jpeg'"
                          :multiple="true"
                          :uploadcondition="beforeAvatarUpload"
                          @UploadErrorEvent="UploadErrorEventgood_info_img"
                          @UploadSuccessEvent="UploadSuccessEventgood_info_img"
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul style="padding: 30px 0 0 0">
          <li>固</li>
          <li>定</li>
          <li>成</li>
          <li>本</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="证书费" prop="cert_fee">
              <digital-input
                :values="ruleForm.cert_fee"
                :placeholder="'证书费'"
                :min="0"
                :name="'ruleForm.cert_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'cert_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装费" prop="packing_fee">
              <digital-input
                :values="ruleForm.packing_fee"
                :placeholder="'包装费'"
                :min="0"
                :name="'ruleForm.packing_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'packing_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工艺费" prop="cost_fee">
              <digital-input
                :values="ruleForm.cost_fee"
                :placeholder="'工艺费'"
                :min="0"
                :name="'ruleForm.cost_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'cost_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="加标费" prop="mark_fee">
              <digital-input
                :values="ruleForm.mark_fee"
                :placeholder="'加标费'"
                :min="0"
                :name="'ruleForm.mark_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'mark_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="打样费" prop="demo_fee">
              <digital-input
                :values="ruleForm.demo_fee"
                :placeholder="'打样费'"
                :min="0"
                :name="'ruleForm.demo_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'demo_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开模费" prop="open_fee">
              <digital-input
                :values="ruleForm.open_fee"
                :placeholder="'开模费'"
                :min="0"
                :name="'ruleForm.open_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'open_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调样费" prop="sample_fee">
              <digital-input
                :values="ruleForm.sample_fee"
                :placeholder="'调样费'"
                :min="0"
                :name="'ruleForm.sample_fee'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'sample_fee')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="市场价" prop="market_price">
              <digital-input
                :values="ruleForm.market_price"
                :placeholder="'市场价'"
                :min="0"
                :name="'ruleForm.market_price'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'market_price')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="裸价" prop="nake_price">
              <digital-input
                :values="ruleForm.nake_price"
                :placeholder="'裸价'"
                :min="0"
                :name="'ruleForm.nake_price'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元'"
                @reschange="number_change($event, 'nake_price')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul>
          <li>阶</li>
          <li>梯</li>
          <li>成</li>
          <li>本</li>
        </ul></el-col
      >
      <el-col :span="23" class="dmain">
        <el-row>
          <el-col :span="8">
            <el-form-item label="启用阶梯" prop="is_step">
              <el-select
                v-model="ruleForm.is_step"
                filterable
                clearable
                :disabled="type === 'view' || type === 'editBase'"
                style="width: 100%"
                placeholder="启用阶梯"
              >
                <el-option
                  v-for="group in options5"
                  :key="group.id"
                  :label="group.name"
                  :value="group.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="padding-left: 18px">
            <el-table
              :data="ladder_tableData"
              :size="'mini'"
              border
              stripe
              style="width: 100%; margin: 0 0 20px 0"
            >
              <el-table-column prop="min_num" label="起订量(>=)" />
              <el-table-column prop="nake_fee" label="成本合计" />
              <el-table-column prop="cost_fee" label="工艺费" />
              <el-table-column prop="delivery_fee" label="其中运费" />
              <el-table-column
                fixed="right"
                v-if="type === 'add' || type === 'editCoin'"
              >
                <template slot="header" slot-scope="scope">
                  <span>操作</span>
                  <el-tooltip effect="dark" content="添加阶梯" placement="top">
                    <i
                      class="el-icon-circle-plus-outline tb-icon fr"
                      @click="openCostEdit(-1, {})"
                    ></i>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="修改" placement="top">
                    <i
                      class="el-icon-edit tb-icon"
                      @click="openCostEdit(scope.$index, scope.row)"
                    ></i>
                  </el-tooltip>

                  <el-tooltip effect="dark" content="删除" placement="top">
                    <i
                      class="el-icon-delete tb-icon"
                      @click="openCostEditDelete(scope.$index)"
                    ></i>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <!-- 弹窗 新增/修改 -->
        <cost-form-add-edit
          :index="costmodelIndex"
          :show-model="costshowModel"
          :sitem="costsitem"
          @refresh="costrefreshEdit"
          @cancel="costshowModel = false"
        />
      </el-col>
      <el-col
        :span="24"
        v-if="type === 'editBase' || type === 'add' || type === 'editCoin'"
        style="
          text-align: right;
          padding: 15px 0 15px 0;
          border-top: 1px solid #dcdfe6;
        "
      >
        <el-button :size="'mini'" type="primary" @click="submitForm"
          >保 存
        </el-button>
      </el-col></el-row
    >
  </el-form>
</template>
   <script>
import asyncRequest from "@/apis/service/goodStore/goodsCost";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import baseFormAddEdit from "./baseFormAddEdit";
import costFormAddEdit from "./costFormAddEdit";
import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  rules,
} from "../columns";
export default {
  name: "goodsCostAdd",
  mixins: [resToken],
  props: ["showModel", "id", "type", "sitem"],
  components: {
    baseFormAddEdit,
    costFormAddEdit,
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "goodsCostAdd"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  watch: {
    newTime: function (val) {
      if (val) {
        this.initForm();
      }
    },
  },
  data() {
    return {
      spec_tableData: [],
      cat_id_name: "",
      brand_name: "",
      unit_name: "",
      costshowModel: false,
      costmodelIndex: "",
      costsitem: {},
      showModel: false,
      modelIndex: "",
      is_noble: false,
      size: "small",
      status: "",
      rulesThis: this.rules,
      activeName: "1",
      loading: true,
      supplierName: "",
      options1: options1,
      options2: options2,
      options3: options3,
      options4: options4,
      options5: options5,
      options6: options6,
      options7: options7,
      options8: options8,
      options9: options9,
      ruleForm: {},
      spec_tableData: [],
      old_spec_tableData: [],
      ladder_tableData: [],
      old_ladder_tableData: [],
      rules: rules,
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;

      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();

      this.loading = false;
    },
    number_change(e, key) {
      this.ruleForm[key] = e + "" || "0";
      this.$refs.ruleForm.validateField(key);
    },
    openEdit(index, sitem) {
      this.modelIndex = index;
      this.sitem = sitem;
      this.showModel = true;
    },
    openCostEdit(index, sitem) {
      this.costmodelIndex = index;
      this.costsitem = sitem;
      this.costshowModel = true;
    },
    openDelete(index) {
      this.spec_tableData.splice(index, 1);
    },
    openCostEditDelete(index) {
      this.ladder_tableData.splice(index, 1);
    },
    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          if (this.spec_tableData.length === 0) {
            this.$message.warning("请录入商品规格信息！");
            this.loading = false;
            return;
          }
          if (this.ladder_tableData.length === 0) {
            this.$message.warning("请录入阶梯成本！");
            this.loading = false;
            return;
          }
          const { noble_weight, weight, good_type, moq, is_step } =
            this.ruleForm;
          if (is_step === "0" && this.ladder_tableData.length > 1) {
            this.$message.warning("不启用阶梯成本，只能录入一条阶梯成本信息！");
            this.loading = false;
            return;
          }
          if (this.is_noble) {
            if (noble_weight * 1000 > weight * 1000) {
              this.$message.warning("贵金属总重量不能大于商品总重量！");
              this.loading = false;
              return;
            }
          }
          if (good_type === "1") {
            let set_num = moq * 1;
            let isok = true;
            this.ladder_tableData.forEach((e) => {
              if (e.min_num * 1 < set_num) {
                isok = false;
              }
            });
            if (!isok) {
              this.$message.warning("阶梯成本的起订量不能小于定制起订量！");
              this.loading = false;
              return;
            }
          }

          let model = JSON.parse(JSON.stringify(this.ruleForm));
          model.cat_id = model.cat_id.toString();
          model.brandid = model.brandid.toString();
          model.supplierNo = model.supplierNo.toString();
          model.delivery_place = model.delivery_place.toString();
          model.origin_place = model.origin_place.toString();
          model.good_info_img = model.good_info_img.toString();
          model.unit = model.unit.toString();
          model.speclist = JSON.parse(JSON.stringify(this.setResData(1)));
          model.good_ladder = JSON.parse(JSON.stringify(this.setResData(2)));
          model.config = model.config.toString();
          let res = {};
          delete model["id"];
          if (this.type === "add") {
            delete model["id"];
            delete model["spuCode"];
            res = await asyncRequest.add(model);
          } else if (this.type === "editBase") {
            let item1 = this.setModel(model, "1");
            res = await asyncRequest.update(item1);
          } else {
            let item2 = this.setModel(model, "2");
            res = await asyncRequest.updateP(item2);
          }
          console.log(res);
          this.loading = false;
          if (res && res.code === 0) {
            const { spuCode } = res.data;
            const title =
              this.type === "add"
                ? "新建成功！"
                : this.type === "editBase"
                ? "基础信息修改成功！"
                : "成本信息修改成功!";
            this.$notify.success({
              title: title,
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh", { spuCode: spuCode });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取规格值
    setResData(type) {
      let list = JSON.parse(
        JSON.stringify(type === 1 ? this.spec_tableData : this.ladder_tableData)
      );
      let oldlist = JSON.parse(
        JSON.stringify(
          type === 1 ? this.old_spec_tableData : this.old_ladder_tableData
        )
      );
      let hasIDlist = [];
      list.forEach((a) => {
        if (a.id !== "") {
          hasIDlist.push(a);
        }
      });
      let newList = [];
      let resList = [];
      oldlist.forEach((a, ai) => {
        let item = null;
        let index = hasIDlist.findIndex((b) => a.id === b.id);
        if (index === -1) {
          item = JSON.parse(JSON.stringify(a));
          item.is_del = "1";
        } else {
          item = JSON.parse(JSON.stringify(hasIDlist[index]));
        }
        newList.push(item);
      });
      list.forEach((b) => {
        if (b.id === "") {
          b.is_del = "0";
          newList.push(b);
        }
      });
      if (type === 1) {
        newList.forEach((a) => {
          let m = {
            id: a.id,
            spec_id: a.spec_id,
            spec_value_id: a.spec_value_id,
            is_del: a.is_del || "0",
          };
          resList.push(m);
        });
      } else {
        newList.forEach((a) => {
          let m = {
            id: a.id,
            min_num: a.min_num,
            nake_fee: a.nake_fee,
            cost_fee: a.cost_fee,
            delivery_fee: a.delivery_fee,
            is_del: a.is_del || "0",
          };
          resList.push(m);
        });
      }
      return resList;
    },
    setladder() {
      let list = JSON.parse(JSON.stringify(this.ladder_tableData));
      let oldlist = JSON.parse(JSON.stringify(this.old_ladder_tableData));
      let hasIDlist = [];
      list.forEach((a) => {
        if (a.id !== "") {
          hasIDlist.push(a);
        }
      });
      let newList = [];
      let resList = [];
      oldlist.forEach((a, ai) => {
        let item = null;
        let index = hasIDlist.findIndex((b) => a.id === b.id);
        if (index === -1) {
          item = JSON.parse(JSON.stringify(a));
          item.is_del = "1";
        } else {
          item = JSON.parse(JSON.stringify(b));
        }
        newList.push(item);
      });
      list.forEach((b) => {
        if (b.id === "") {
          b.is_del = "0";
          newList.push(b);
        }
      });
      newList.forEach((a) => {
        let m = {
          id: a.id,
          min_num: a.min_num,
          spec_value_id: a.spec_value_id,
          is_del: a.is_del || "0",
        };
        resList.push(m);
      });
      return resList;
    },
    //规格编辑修改
    refreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      const {
        index,
        id,
        spec_id,
        spec_value,
        spec_value_id,
        spec_value_value,
      } = item;
      if (index + "" === "-1") {
        this.spec_tableData.push(item);
      } else {
        this.spec_tableData.forEach((i, findex) => {
          if (i.spec_id === spec_id) {
            this.spec_tableData[findex].id = id;
            this.spec_tableData[findex].spec_id = spec_id;
            this.spec_tableData[findex].spec_value = spec_value;
            this.spec_tableData[findex].spec_value_id = spec_value_id;
            this.spec_tableData[findex].spec_value_value = spec_value_value;
          }
        });
      }
      this.showModel = false;
    },
    //阶梯成本修改
    costrefreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      console.log(item);
      const { index, id, cost_fee, delivery_fee, min_num, spec_value_value } =
        item;
      if (index + "" === "-1") {
        this.ladder_tableData.push(item);
      } else {
        this.ladder_tableData.forEach((i, findex) => {
          if (findex=== parseInt(index+"")) {
            this.ladder_tableData[findex].id = id;
            this.ladder_tableData[findex].cost_fee = cost_fee;
            this.ladder_tableData[findex].delivery_fee = delivery_fee;
            this.ladder_tableData[findex].min_num = min_num;
            this.ladder_tableData[findex].spec_value_value = spec_value_value;
          }
        });
      }
      this.showModel = false;
    },
    dataSort(key) {
      return function (a, b) {
        let value1 = a[key];
        let value2 = b[key];
        return value1 - value2;
      };
    },

    resetFormData() {
      this.spec_tableData = [];
      this.old_spec_tableData = [];
      this.ladder_tableData = [];
      this.old_ladder_tableData = [];
      this.cat_id_name = "";
      this.is_noble = false;
      this.status = "";
      this.brand_name = "";
      this.unit_name = "";
      this.supplierName = "";
      this.ruleForm = {
        id: "",
        spuCode: "",
        cat_id: [],
        brandid: [],
        noble_weight: "0",
        weight: "",
        good_type: "0",
        is_stock: "0",
        supplierNo: [],
        company_id: "",
        is_auth: "",
        tax: "",
        good_name: "",
        unit: [],
        is_exclusive: [],
        noble_metal: "",
        is_gold_price: "",
        moq: "0",
        customized: "0",
        after_sales: "",
        craft_desc: "",
        good_remark: "",
        //包装发货/图片
        packing_list: "",
        packing_way: "",
        packing_spec: "",
        packing_weight: "",
        packing_size: "",
        good_size: "",
        good_bar: "",
        supply_area: "",
        delivery_place: [],
        origin_place: [],
        delivery_day: "0",
        lead_time: "0",
        sample_day: "0",
        good_thumb_img: "",
        good_info_img: [],
        //固定阶梯成本
        cert_fee: "0",
        packing_fee: "0",
        cost_fee: "0",
        mark_fee: "0",
        demo_fee: "0",
        open_fee: "0",
        sample_fee: "0",
        market_price: "0",
        nake_price: "0",
        is_step: "",
        is_diff: "",
        config: [],
        other_config: "",
      };
    },

    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.spec_tableData = [];
          this.old_spec_tableData = [];
          this.ladder_tableData = [];
          this.old_ladder_tableData = [];
          const {
            id,
            spuCode, //string	商品spuCode
            // good_code, //string	无
            good_name, //string	商品名称
            // cat_id, //string	分类id
            cat_info, //array 分类
            brand_id, //string	品牌id
            unit,
            supplierName,
            companyNo, //	string	企业公司id
            good_unit, //	string	商品单位
            good_type, //string	是否定制 1是0否
            moq, //string	起订量
            is_exclusive, //	string	是否是专属
            customized, //	string	定制工期
            tax, //string	税率
            supplierNo, //	string	供应商
            is_auth, //string	是否有销售权限0 否1 是
            auth_img, //	string	无
            is_stock, //
            after_sales, //	string	售后说明
            craft_desc, //	string	工艺说明
            good_remark, //	string	商品备注
            weight, //	string	重量
            packing_way, //	string	包装方式
            packing_size, //	string	包装尺寸
            good_size, //商品尺寸
            packing_spec, //	string	包装规格
            packing_list, //	string	包装清单
            packing_weight, //	string	装箱重量
            good_bar, //	string	条形码
            supply_area, //	string	供货区域 1 全国2 除偏远地区
            delivery_place, //	string	发货地区
            origin_place, //	string	产地
            delivery_day, //	string	物流天数
            lead_time, //	string	供货周期
            sample_day, //string	调样周期
            sample_fee, //		string	调样费有
            // good_img, //	string	商品图片
            good_thumb_img, //	string	商品说略图
            good_info_img, //	string	商品详情图
            cert_fee, //	string	证书费
            packing_fee, //	string	打包费
            cost_fee, //	string	工艺费
            mark_fee, //	string	加标费
            demo_fee, //	string	打样费
            open_fee, //	string	开模费
            noble_metal, //	string	金属类别
            noble_weight, //	string	金属重量
            is_gold_price, //	string	是否使用实时金价
            market_price, //	string	市场价
            nake_price, //	string	成本裸价
            is_step, //	string	是否使用阶梯价
            // is_online, //	string	是否上线
            status, //		string	状态
            nakelist, //階梯成本
            speclist, //商品规格
            brand_name,
            config,
            is_diff,
            other_config,
          } = this.sitem;
          let cat_id_name = "";
          let cat_id = [];
          (cat_info || []).forEach((ai, i) => {
            cat_id_name += i === 0 ? ai.name : `_${ai.name}`;
            cat_id.push(ai.id);
          });
          this.cat_id_name = cat_id_name;
          let isok = false;
          if (cat_id.length > 0) {
            cat_id.forEach((i) => {
              if (i === "6") {
                isok = true;
              }
            });
          }
          this.is_noble = isok;
          this.sch_is_noble();

          let spec_list1 =
            speclist && speclist.length > 0
              ? JSON.parse(JSON.stringify(speclist))
              : [];
          spec_list1.forEach((a) => {
            let model = {
              id: a.id,
              is_del: a.is_del,
              spec_id: a.spec_id,
              spec_value: a.spec_name,
              spec_value_value: a.spec_value,
              spec_value_id: a.spec_value_id,
              spuCode: a.spuCode,
            };
            this.spec_tableData.push(model);
          });
          this.old_spec_tableData = JSON.parse(
            JSON.stringify(this.spec_tableData)
          );

          let list2 =
            nakelist && nakelist.length > 0
              ? JSON.parse(JSON.stringify(nakelist))
              : [];
          this.ladder_tableData = list2;
          this.old_ladder_tableData = JSON.parse(
            JSON.stringify(this.ladder_tableData)
          );
          this.status = status;
          this.brand_name = brand_name;
          this.unit_name = unit;
          this.supplierName = supplierName || "";
          this.ruleForm = {
            id: id || "",
            spuCode: spuCode || "",
            cat_id:
              cat_id && cat_id.length > 0 ? [cat_id[cat_id.length - 1]] : [],
            brandid: brand_id ? [brand_id] : [],
            noble_weight: noble_weight || "",
            weight: weight || "",
            good_type: good_type || "0",
            is_stock: is_stock || "0",
            supplierNo: supplierNo ? [supplierNo] : [],
            company_id: companyNo || "",
            is_auth: is_auth || "",
            tax: tax ? tax + "%" : "",
            good_name: good_name || "",
            unit: good_unit ? [good_unit] : [],
            is_exclusive: is_exclusive || [],
            noble_metal: noble_metal || "",
            is_gold_price: is_gold_price || "",
            moq: moq || "0",
            customized: customized || "0",
            after_sales: after_sales || "",
            craft_desc: craft_desc || "",
            good_remark: good_remark || "",
            //包装发货/图片
            packing_list: packing_list || "",
            packing_way: packing_way || "",
            packing_spec: packing_spec || "",
            packing_weight: packing_weight || "",
            packing_size: packing_size || "",
            good_size: good_size || "",
            good_bar: good_bar || "",
            supply_area: supply_area || "",
            delivery_place: (delivery_place || "").split(","),
            origin_place: (origin_place || "").split(","),
            delivery_day: delivery_day || "",
            lead_time: lead_time || "",
            sample_day: sample_day || "",
            good_thumb_img: good_thumb_img || "",
            // good_img: "",
            good_info_img: good_info_img
              ? (good_info_img || "").split(",")
              : [],
            //固定阶梯成本
            cert_fee: cert_fee || "",
            packing_fee: packing_fee || "",
            cost_fee: cost_fee || "",
            mark_fee: mark_fee || "",
            demo_fee: demo_fee || "",
            open_fee: open_fee || "",
            sample_fee: sample_fee || "",
            market_price: market_price || "",
            nake_price: nake_price || "",
            is_step: is_step || "",
            is_diff: is_diff || "",
            config: config ? config.split(",") : [],
            other_config: other_config || "",
          };
          this.good_type_change();
        }
      });
    },
    sch_is_noble() {
      let list = [
        "noble_weight",
        "noble_metal",
        "is_gold_price",
        "is_diff",
        "config",
        "other_config",
      ];
      for (let i = 0; i < list.length; i++) {
        this.rulesThis[list[i]].required = this.is_noble;
      }
    },
    setModel(model, type) {
      let item = null;
      if (type === 1) {
        item = JSON.parse(JSON.stringify(model));
        delete item["cert_fee"];
        delete item["packing_fee"];
        delete item["cost_fee"];
        delete item["mark_fee"];
        delete item["demo_fee"];
        delete item["open_fee"];
        delete item["noble_metal"];
        delete item["noble_weight"];
        delete item["is_gold_price"];
        delete item["market_price"];
        delete item["nake_price"];
        delete item["is_step"];
        delete item["good_ladder"];
      } else {
        const {
          cert_fee,
          packing_fee,
          cost_fee,
          mark_fee,
          demo_fee,
          open_fee,
          noble_metal,
          noble_weight,
          is_gold_price,
          market_price,
          nake_price,
          is_step,
          good_ladder,
          spuCode,
        } = model;
        item = {
          cert_fee: cert_fee || "",
          packing_fee: packing_fee || "",
          cost_fee: cost_fee || "",
          mark_fee: mark_fee || "",
          demo_fee: demo_fee || "",
          open_fee: open_fee || "",
          noble_metal: noble_metal || "",
          noble_weight: noble_weight || "",
          is_gold_price: is_gold_price || "",
          market_price: market_price || "",
          nake_price: nake_price || "",
          is_step: is_step || "",
          good_ladder: good_ladder || [],
          spuCode: spuCode || "",
        };
      }
      return model;
    },
    //商品分类选择
    async goods_class_change(e) {
      const { code, pid, id, label, cat_desc } = e;
      this.ruleForm.cat_id = id ? [id] : [];
      this.$refs.ruleForm.validateField("cat_id");
      this.ruleForm.after_sales = cat_desc || "";
      this.$refs.ruleForm.validateField("after_sales");
      this.is_noble = pid === "6";
      this.sch_is_noble();
    },

    //商品品牌选择
    brandidsearchChange(e) {
      const { id, code, label } = e;
      if (id) {
        this.ruleForm.brandid = [id];
      } else {
        this.ruleForm.brandid = [];
      }
      this.$refs.ruleForm.validateField("brandid");
    },
    //供应商选择
    supplierNosearchChange(e) {
      console.log(e);
      const { id, code, label } = e;
      if (id) {
        this.ruleForm.supplierNo = [code];
      } else {
        this.ruleForm.supplierNo = [];
      }
      this.$refs.ruleForm.validateField("supplierNo");
    },
    //业务企业选择
    company_idsearchChange(e) {
      const { id, code, label } = e;
      if (id) {
        this.ruleForm.company_id = code;
      } else {
        this.ruleForm.company_id = "";
      }
      this.$refs.ruleForm.validateField("company_id");
    },
    //税点选择
    taxsearchChange(e) {
      this.ruleForm.tax = e;
      this.$refs.ruleForm.validateField("tax");
    },
    //专属类型选择
    exclusiveSearchChange(e) {
      this.ruleForm.is_exclusive = e;
      this.$refs.ruleForm.validateField("is_exclusive");
    },
    //单位选择
    unitsearchChange(e) {
      const { id, code, label } = e;
      if (id) {
        this.ruleForm.unit = [code];
      } else {
        this.ruleForm.unit = [];
      }
      this.$refs.ruleForm.validateField("unit");
    },
    //贵金属种类选择
    noble_metalsearchChange(e) {
      console.log(e);
      const { id, code, label } = e;
      if (id) {
        this.ruleForm.noble_metal = id;
      } else {
        this.ruleForm.noble_metal = "";
      }
      this.$refs.ruleForm.validateField("noble_metal");
    },
    //仓库省市区
    selectAreadelivery_place(e) {
      this.ruleForm.delivery_place = e;
      this.$refs.ruleForm.validateField("delivery_place");
    },
    //仓库省市区
    selectAreaorigin_place(e) {
      this.ruleForm.origin_place = e;
      this.$refs.ruleForm.validateField("origin_place");
    },
    closeImg(index) {
      this.ruleForm.good_info_img.splice(index, 1);
      this.$refs.ruleForm.validateField("good_info_img");
    },
    //图片上传成功
    async UploadSuccessEventgood_thumb_img(data) {
      await this.UploadSuccessEvent(1, data);
    },
    // //图片上传成功
    // async UploadSuccessEventgood_img(data) {
    //   await this.UploadSuccessEvent(2, data);
    // },
    //图片上传成功
    async UploadSuccessEventgood_info_img(data) {
      await this.UploadSuccessEvent(3, data);
    },
    //图片上传成功
    async UploadSuccessEvent(type, data) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        if (type === 1) {
          this.ruleForm.good_thumb_img = url;
          this.$refs.ruleForm.validateField("good_thumb_img");
        } else if (type === 2) {
          this.ruleForm.good_img = url;
          this.$refs.ruleForm.validateField("good_img");
        } else {
          this.ruleForm.good_info_img.push(url);
          this.$refs.ruleForm.validateField("good_info_img");
        }
        this.$message.success("图片上传成功!");
      }
    },
    good_type_change() {
      let list = ["moq", "customized"];
      for (let i = 0; i < list.length; i++) {
        this.rulesThis[list[i]].required = this.ruleForm.good_type === "1";
      }
    },
    //图片上传失败
    UploadErrorEventgood_thumb_img(res) {
      this.imgUploadError(1, res);
    },
    // //图片上传失败
    // UploadErrorEventgood_img(res) {
    //   this.imgUploadError(2, res);
    // },
    //图片上传失败
    UploadErrorEventgood_info_img(res) {
      this.imgUploadError(3, res);
    },
    imgUploadError(type, res) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField(
          type === 1
            ? "good_thumb_img"
            : type === 2
            ? "good_img"
            : "good_info_img"
        );
      }
    },
    //判断图片规格
    beforeAvatarUpload(file) {
      let isJPG = false;
      if (
        file.type === "image/jpg" ||
        file.type === "image/png" ||
        file.type === "image/jpeg"
      ) {
        isJPG = true;
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isJPG) {
        this.$message.error("图片格式不正确！");
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 1MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
   <style lang="scss" scoped>
.goodsCostDetail {
  // position: relative;
  .good_info_img_div {
    ul {
      width: 100%;
      li {
        float: left;
        width: 89px;
        height: 89px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 84px;
          height: 84px;
          border: 1px solid #dfe4ed;
          background: #dfe4ed;
          position: relative;
          img.img-show {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
          }
          i.el-icon-close {
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            color: #dfe4ed;
          }
          &:hover {
            i.el-icon-close {
              cursor: pointer;
              color: #63cbe7;
            }
          }
        }
      }
    }
  }

  .goodsCostAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
}
</style>