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="90px"
  >
    <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" label-width="95px">
              <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" label-width="95px">
              <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"
                  label-width="95px"
                >
                  <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"
                  label-width="95px"
                >
                  <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"
                  label-width="110px"
                >
                  <el-select
                    v-model="ruleForm.is_gold_price"
                    filterable
                    clearable
                    :disabled="
                      type === 'view' ||
                      type === 'editBase' ||
                      type === 'editCoin'
                    "
                    style="width: 100%"
                    placeholder="启用实时金价"
                    @change="is_goold_price_change"
                  >
                    <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"
                  label-width="110px"
                >
                  <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"
                show-word-limit
                maxlength="250"
              >
              </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="商品备注"
                show-word-limit
                maxlength="250"
                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="工艺说明"
                show-word-limit
                maxlength="250"
                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 === '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" label-width="95px">
              <digital-input
                :values="ruleForm.moq"
                :placeholder="'定制起订量'"
                :name="'ruleForm.moq'"
                :min="0"
                :disabled="type === 'view' || type === 'editCoin'"
                :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 === 'editCoin'"
                :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' || type === 'edit'"
          >
            <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-tooltip effect="dark" content="修改" placement="top">
                <i
                  class="el-icon-edit tb-icon"
                  @click="openEdit(scope.$index, scope.row)"
                ></i>
              </el-tooltip>

              <el-tooltip
                v-if="!scope.row.isMust"
                effect="dark"
                content="删除"
                placement="top"
              >
                <i
                  class="el-icon-delete tb-icon"
                  @click="openDelete(scope.$index)"
                ></i>
              </el-tooltip>
            </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="6">
            <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="6">
            <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="6">
            <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="6">
            <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-col :span="12">
            <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="selectAreaChange($event, 'delivery_place')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <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="selectAreaChange($event, 'origin_place')"
              />
            </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="6">
            <el-form-item
              label="商品缩略"
              prop="good_thumb_img"
              class="activity-upload my-label-top"
            >
              <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="UploadErrorEvent($event, 'good_thumb_img')"
                  @UploadSuccessEvent="
                    UploadSuccessEvent($event, 'good_thumb_img')
                  "
                ></file-upload>
              </div>
              <div class="txt-tips fl">
                <p>尺寸比例：</p>
                <p>1:1</p>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="商品主图" prop="good_img">
              <div class="good_info_img_div">
                <ul v-if="ruleForm.good_img" class="clear">
                  <li
                    class="img-show-li"
                    v-viewer
                    v-for="(img, iindex) in ruleForm.good_img"
                    :key="img + iindex"
                  >
                    <div class="img-show-li-div">
                      <img :src="img" class="img-show" alt="" />
                      <i
                        v-if="
                          type == 'add' ||
                          type === 'editBase' ||
                          type === 'edit'
                        "
                        class="el-icon-close"
                        @click="closeImg(iindex, 'good_img')"
                      ></i>
                    </div>
                  </li>
                  <li
                    class="img-show-li"
                    v-if="
                      ruleForm.good_img.length < 10 &&
                      (type == 'add' || type === 'editBase' || type === 'edit')
                    "
                  >
                    <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="
                            UploadErrorEvent($event, 'good_img')
                          "
                          @UploadSuccessEvent="
                            UploadSuccessEvent($event, 'good_img')
                          "
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <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' ||
                          type === 'edit'
                        "
                        class="el-icon-close"
                        @click="closeImg(iindex, 'good_info_img')"
                      ></i>
                    </div>
                  </li>
                  <li
                    class="img-show-li"
                    v-if="
                      ruleForm.good_info_img.length < 10 &&
                      (type == 'add' || type === 'editBase' || type === 'edit')
                    "
                  >
                    <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="
                            UploadErrorEvent($event, 'good_info_img')
                          "
                          @UploadSuccessEvent="
                            UploadSuccessEvent($event, 'good_info_img')
                          "
                        ></file-upload>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <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-row>
      </el-col>
    </el-row>
    <el-row class="ddiv">
      <el-col :span="1" class="dtitle">
        <ul style="padding: 0">
          <li>固</li>
          <li>定</li>
          <li>与</li>
          <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="demo_fee" label-width="75px">
              <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="6">
            <el-form-item label="开模费" prop="open_fee" label-width="75px">
              <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="6">
            <el-form-item label="调样费" prop="sample_fee" label-width="75px">
              <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="6">
            <el-form-item label="市场价" prop="market_price" label-width="75px">
              <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="6">
            <el-form-item label="启用阶梯" prop="is_step">
              <el-select
                v-model="ruleForm.is_step"
                filterable
                :disabled="type === 'view' || type === 'editBase'"
                style="width: 100%"
                placeholder="启用阶梯"
                @change="is_step_change"
              >
                <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"
            v-show="is_noble && ruleForm && ruleForm.is_gold_price === '1'"
          >
            <el-form-item
              label="供应商采购金价"
              prop="cgd_gold_price"
              label-width="130px"
            >
              <digital-input
                :values="ruleForm.cgd_gold_price"
                :placeholder="'供应商采购金价'"
                :min="0"
                :name="'ruleForm.cgd_gold_price'"
                :disabled="type === 'view' || type === 'editBase'"
                :max="100000000000"
                :position="'right'"
                :precision="2"
                :size="'mini'"
                :controls="false"
                :append="'元/g'"
                @reschange="number_change($event, 'cgd_gold_price')"
              />
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            v-show="is_noble && ruleForm && ruleForm.is_gold_price === '1'"
          >
            <el-form-item label="当前金价">
              <el-input
                v-model="ruleForm.noble_price"
                disabled
                maxlength="15"
                placeholder="当前金价"
              >
                <template slot="append">元/g</template></el-input
              >
            </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 prop="cert_fee" label="证书费" />
              <el-table-column prop="mark_fee" label="加标费" />
              <el-table-column prop="package_fee" label="包装费" />
              <el-table-column prop="other_fee" label="其他费用" />
              <el-table-column prop="nake_total" label="成本合计" />
              <el-table-column
                fixed="right"
                v-if="type === 'add' || type === 'editCoin' || type === 'edit'"
                width="80px"
              >
                <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' ||
          type === 'edit'
        "
        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.sch_is_noble();
      this.good_type_change();
      await this.get_golpricelast();
      this.loading = false;
    },
    async number_change(e, key) {
      this.ruleForm[key] = e + "" || "0";
      this.$refs.ruleForm.validateField(key);
      await this.get_all_fee();
    },
    openEdit(index, sitem) {
      this.modelIndex = index;
      this.sitem = sitem;
      this.showModel = true;
    },
    openCostEdit(index, sitem) {
      // const { is_step } = this.ruleForm;
      // if (index === -1 && is_step === "0" && this.ladder_tableData.length > 0) {
      //   this.$message.warning("不启用阶梯成本，只能录入一条阶梯成本信息！");
      //   return;
      // }
      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);
    },
    // is_step_change() {
    //   const { is_step } = this.ruleForm;
    //   if (is_step === "0") {
    //     let res = [];
    //     let list =
    //       this.ladder_tableData.length === 0
    //         ? []
    //         : JSON.parse(JSON.stringify(this.ladder_tableData));
    //     if (list.length > 0) {
    //       res.push(list[0]);
    //     }
    //     this.ladder_tableData = res;
    //   }
    // },
    async submitForm() {
      this.sch_is_noble();
      this.good_type_change();
      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;
          }
          let isMust = true;
          this.spec_tableData.forEach((e) => {
            if (e.isMust && !e.spec_value_id) {
              isMust = false;
            }
          });
          if (!isMust) {
            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,
            is_gold_price,
          } = 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 (is_gold_price === "1" && this.is_noble) {
            let is_p = true;
            this.ladder_tableData.forEach((v) => {
              if (v.nake_fee * 1 !== 0) {
                is_p = false;
              }
            });
            if (!is_p) {
              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.good_img = model.good_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();
          model.is_exclusive =
            model.is_exclusive.length > 0
              ? model.is_exclusive[model.is_exclusive.length - 1]
              : "";
          let res = {};
          delete model["id"];
          if (this.type === "add") {
            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 if (this.type === "editCoin") {
            let item2 = this.setModel(model, "2");
            res = await asyncRequest.updateP(item2);
          } else {
            model.companyNo = model.company_id;
            delete model["company_id"];
            res = await asyncRequest.edit_update(model);
          }
          console.log(res);
          this.loading = false;
          if (res && res.code === 0) {
            const { spuCode } = res.data;
            const title =
              this.type === "add"
                ? "新建成功！"
                : this.type === "editBase"
                ? "基础信息修改成功！"
                : this.type === "editCoin"
                ? "成本信息修改成功!"
                : "商品信息修改成功";
            this.$notify.success({
              title: title,
              message: "",
            });
            this.showModelThis = false;
            // 刷新
            this.$emit("refresh", { spuCode: spuCode });
          }
        } else {
          console.log(valid);
          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,
            cert_fee: a.cert_fee,
            mark_fee: a.mark_fee,
            package_fee: a.package_fee,
            other_fee: a.other_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,
        isMust,
        spec_value,
        spec_value_id,
        spec_value_value,
      } = item;
      let ffindex = -1;
      this.spec_tableData.forEach((i, findex) => {
        if (i.spec_id === spec_id) {
          ffindex = findex;
          this.spec_tableData[findex].id = id;
          this.spec_tableData[findex].spec_id = spec_id;
          // this.spec_tableData[findex].isMust = isMust;
          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;
        }
      });
      if (ffindex === -1) {
        this.spec_tableData.push(item);
      }
      this.showModel = false;
    },
    //阶梯成本修改
    async costrefreshEdit(e) {
      let item = JSON.parse(JSON.stringify(e));
      const {
        index,
        id,
        cost_fee,
        delivery_fee,
        min_num,
        nake_fee,
        cert_fee,
        mark_fee,
        package_fee,
        other_fee,
      } = item;
      let isok = true;
      let ffindex = -1;
      if (this.ladder_tableData && this.ladder_tableData.length === 0) {
        this.ladder_tableData.push(item);
      } else {
        this.ladder_tableData.forEach((i, findex) => {
          if (parseInt(min_num + "") === parseInt(i.min_num + "")) {
            isok = false;
            this.ladder_tableData[findex].id = id;
            this.ladder_tableData[findex].min_num = min_num;
            this.ladder_tableData[findex].cost_fee = cost_fee;
            this.ladder_tableData[findex].delivery_fee = delivery_fee;
            this.ladder_tableData[findex].nake_fee = nake_fee;
            this.ladder_tableData[findex].cert_fee = cert_fee;
            this.ladder_tableData[findex].mark_fee = mark_fee;
            this.ladder_tableData[findex].package_fee = package_fee;
            this.ladder_tableData[findex].other_fee = other_fee;
          }
        });
        if (isok) {
          this.ladder_tableData.forEach((i, findex) => {
            if (findex === parseInt(index + "")) {
              ffindex = findex;
              this.ladder_tableData[findex].id = id;
              this.ladder_tableData[findex].min_num = min_num;
              this.ladder_tableData[findex].cost_fee = cost_fee;
              this.ladder_tableData[findex].delivery_fee = delivery_fee;
              this.ladder_tableData[findex].nake_fee = nake_fee;
              this.ladder_tableData[findex].cert_fee = cert_fee;
              this.ladder_tableData[findex].mark_fee = mark_fee;
              this.ladder_tableData[findex].package_fee = package_fee;
              this.ladder_tableData[findex].other_fee = other_fee;
            }
          });
          if (ffindex === -1) {
            this.ladder_tableData.push(item);
          }
        }
      }

      await this.get_all_fee();
      this.showModel = false;
    },
    async get_golpricelast() {
      const { noble_metal } = this.ruleForm;
      if (noble_metal) {
        let model = {
          type: noble_metal,
        };
        const { code, data, message } = await asyncRequest.golpricelast(model);
        if (code === 0) {
          data.forEach((e) => {
            if (e.type) {
              this.ruleForm.noble_price = e.price;
            }
          });
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        this.ruleForm.noble_price = "0";
      }
    },
    async get_all_fee() {
      await this.get_golpricelast();
      this.ladder_tableData.forEach((si, sii) => {
        this.ladder_tableData[sii].nake_total = this.count_fee(si);
        this.$set(this.ladder_tableData, sii, this.ladder_tableData[sii]);
      });
    },
    count_fee(e) {
      const {
        noble_price, //贵金属实时金价
        is_gold_price, //是否启用实时金价
        noble_weight, //贵金属重量
      } = this.ruleForm;
      const {
        cost_fee, //工艺费
        delivery_fee, //物流费
        nake_fee, //成本单价
        cert_fee, //证书费
        mark_fee, //加标费
        package_fee, //包装费
        other_fee, //其他费用
      } = e;
      let total =
        package_fee * 100 +
        nake_fee * 100 +
        mark_fee * 100 +
        cert_fee * 100 +
        delivery_fee * 100 +
        other_fee * 100;
      if (this.is_noble && is_gold_price === "1") {
        let a = noble_price * 100;
        let b = noble_weight * 1000;
        let c = cost_fee * 100;
        let ab = parseInt((a * b) / 1000);
        let bc = parseInt((b * c) / 1000);
        total += ab + bc;
      }
      return parseFloat(total / 100);
    },
    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: "0",
        good_type: "0",
        is_stock: "0",
        supplierNo: [],
        company_id: "",
        is_auth: "",
        tax: "",
        good_name: "",
        unit: [],
        is_exclusive: [],
        noble_metal: "",
        is_gold_price: "",
        moq: "",
        customized: "",
        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_img: [],
        good_info_img: [],
        //固定阶梯成本
        demo_fee: "0",
        open_fee: "0",
        sample_fee: "0",
        market_price: "0",
        cgd_gold_price: "0",
        noble_price: "0",
        // is_step: "0",
        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	无
            exclusive,
            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	商品详情图
            demo_fee, //	string	打样费
            open_fee, //	string	开模费
            noble_metal, //	string	金属类别
            noble_weight, //	string	金属重量
            is_gold_price, //	string	是否使用实时金价
            market_price, //	string	市场价
            cgd_gold_price, //	string	供应商采购金价
            noble_price,
            // 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;
              }
            });
          }
          let exclusiveList = [];
          if (exclusive && exclusive.length > 0) {
            exclusive.forEach((a, ai) => {
              exclusiveList.push(a.id);
            });
          }
          this.is_noble = isok;

          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: exclusiveList || [],
            noble_metal: noble_metal || "",
            is_gold_price: is_gold_price || "0",
            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
              ? (delivery_place || "").split(",")
              : [],
            origin_place: 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_img ? (good_img || "").split(",") : [],
            good_info_img: good_info_img
              ? (good_info_img || "").split(",")
              : [],
            //固定阶梯成本
            demo_fee: demo_fee || "",
            open_fee: open_fee || "",
            sample_fee: sample_fee || "",
            market_price: market_price || "",
            cgd_gold_price: cgd_gold_price || "",
            noble_price: noble_price || "0",
            // is_step: is_step || "0",
            is_diff: is_diff || "",
            config: config ? config.split(",") : [],
            other_config: other_config || "",
          };
        }
        await this.set_must_spec();
      });
    },
    sch_is_noble() {
      let list = [
        "noble_weight",
        "noble_metal",
        "is_gold_price",
        "is_diff",
        "config",
        "other_config",
        "cgd_gold_price",
      ];
      for (let i = 0; i < list.length; i++) {
        if (list[i] === "cgd_gold_price") {
          const { is_gold_price } = this.ruleForm;
          this.rulesThis[list[i]][0].required =
            this.is_noble && is_gold_price === "1";
          console.log(list[i] + "===" + this.rulesThis[list[i]][0].required);
        } else {
          this.rulesThis[list[i]][0].required = this.is_noble;
        }

        this.$refs.ruleForm.validateField(list[i]);
      }
    },
    setModel(model, type) {
      let item = null;
      if (type === 1) {
        item = JSON.parse(JSON.stringify(model));
        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["cgd_gold_price"];
        // delete item["is_step"];
        delete item["good_ladder"];
      } else {
        const {
          demo_fee,
          open_fee,
          noble_metal,
          noble_weight,
          is_gold_price,
          market_price,
          cgd_gold_price,
          // is_step,
          good_ladder,
          spuCode,
        } = model;
        item = {
          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 || "",
          cgd_gold_price: cgd_gold_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();
      await this.set_must_spec();
      await this.get_all_fee();
    },
    async set_must_spec() {
      const { cat_id } = this.ruleForm;
      let id = cat_id.length == 1 ? cat_id[0] : "";
      let list1 =
        this.spec_tableData && this.spec_tableData.length > 0
          ? JSON.parse(JSON.stringify(this.spec_tableData))
          : [];
      let list2 = [];
      if (id) {
        const { code, message, data } = await asyncRequest.catinfo({ id: id });
        if (code === 0) {
          const { spec } = data;
          if (spec && spec.length > 0) {
            if (list1 && list1.length > 0) {
              list1.forEach((c) => {
                c.isMust = false;
              });
              spec.forEach((a, ai) => {
                let findex = list1.findIndex((b) => b.spec_id === a.id);
                if (findex !== -1) {
                  list1[findex].isMust = true;
                } else {
                  list1.push({
                    id: "",
                    index: "1",
                    spec_id: a.id,
                    spec_value: a.spec_name,
                    isMust: true,
                    spec_value_value: "",
                    spec_value_id: "",
                  });
                }
              });
            } else {
              spec.forEach((a, ai) => {
                let model = {
                  id: "",
                  index: "1",
                  spec_id: a.id,
                  spec_value: a.spec_name,
                  isMust: true,
                  spec_value_value: "",
                  spec_value_id: "",
                };
                list1.push(model);
              });
            }
          }
          list1.map((e, ei) => {
            e.index = ei + "";
            return e;
          });
          this.spec_tableData =
            list1 && list1.length > 0 ? JSON.parse(JSON.stringify(list1)) : [];
        } else if (code >= 100 && code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(message);
        }
      } else {
        list1.forEach((e) => {
          if (!e.isMust) {
            list2.push(e);
          }
        });
      }
    },
    async is_goold_price_change(e) {
      await this.get_all_fee();
    },
    //商品品牌选择
    brandidsearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.brandid = id ? [id] : [];
      this.$refs.ruleForm.validateField("brandid");
    },
    //供应商选择
    supplierNosearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.supplierNo = code ? [code] : [];
      this.$refs.ruleForm.validateField("supplierNo");
    },
    //业务企业选择
    company_idsearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.company_id = code || "";
      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;
      this.ruleForm.unit = code ? [code] : [];
      this.$refs.ruleForm.validateField("unit");
    },
    //贵金属种类选择
    async noble_metalsearchChange(e) {
      const { id, code, label } = e;
      this.ruleForm.noble_metal = id || "";
      this.$refs.ruleForm.validateField("noble_metal");
      await this.get_all_fee();
    },
    //省市区
    selectAreaChange(e, key) {
      this.ruleForm[key] = e;
      this.$refs.ruleForm.validateField(key);
    },
    closeImg(index, key) {
      this.ruleForm[key].splice(index, 1);
      this.$refs.ruleForm.validateField(key);
    },

    //图片上传成功
    async UploadSuccessEvent(data, key) {
      const { url } = data;
      if (url === "noToken") {
        await this.logout();
      } else {
        if (key === "good_thumb_img") {
          this.ruleForm[key] = url;
        } else {
          this.ruleForm[key].push(url);
        }
        this.$refs.ruleForm.validateField(key);
        this.$message.success("图片上传成功!");
      }
    },
    good_type_change() {
      let list = ["moq", "customized"];
      for (let i = 0; i < list.length; i++) {
        this.rulesThis[list[i]][0].required = this.ruleForm.good_type === "1";
        // console.log(list[i] + "===" + this.rulesThis[list[i]][0].required);
        this.$refs.ruleForm.validateField(list[i]);
      }
    },
    UploadErrorEvent(res, key) {
      if (res !== "break") {
        this.$message.error("图片上传失败!");
        this.$refs.ruleForm.validateField(key);
      }
    },
    //判断图片规格
    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: 55px;
        height: 55px;
        padding: 0 5px 0 0;
        .img-show-li-div {
          width: 50px;
          height: 50px;
          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>