order-ui-pc/src/components/globalComponents/show-goods-data-table/main.vue

<template>
  <div v-loading="loading" class="showGoodsDataTable">
    <show-data-table
      v-if="
        (type + '' === '1' || type + '' === '2' || type + '' === '5' || type + '' === '6') &&
          this.sitem &&
          this.sitem.addtime &&
          !iscgd
      "
      :sitem="sitem"
      :columns="onlineColumns"
      :border="border"
    >
      <template slot="good_name">
        <img
          v-if="sitem.good_thumb_img"
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          :src="sitem.good_thumb_img"
          alt=""
        >
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.speclist" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>上线商品编号：</span><span>{{ sitem.skuCode }}</span>
            </li>
            <li
              v-if="
                newTime !== '' &&
                  ((private_field &&
                    private_field.length > 0 &&
                    private_field.some((item) => item == '1')) || isSupertube)
              "
            >
              <span>商品成本编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
            <li>
              <span>平台商品编码：</span><span>{{ sitem.platform_code_en }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="good_img">
        <img
          v-for="(si, i) in sitem.good_img"
          :key="si + i"
          v-viewer
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          :src="si"
        >
      </template>
      <template slot="good_info_img">
        <img
          v-for="(si, i) in sitem.good_info_img"
          :key="si + i"
          v-viewer
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          :src="si"
        >
      </template>
      <template slot="company">
        <span>{{ sitem.companyName }}</span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>业务企业编号：</span><span>{{ sitem.companyNo }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>

      <template slot="exclusive">
        <span v-for="(si, sii) in sitem.exclusive" :key="si.id">
          <span v-if="sii !== 0">/</span> <span>{{ si.name }}</span>
        </span>
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id == sitem.supply_area) || {})
              .name || '--'
          "
        />
      </template>
      <template slot="is_stock">
        <el-tag
          :size="'mini'"
          v-text="
            (options4.find((item) => item.id == sitem.is_stock) || {}).name ||
              '--'
          "
        />
      </template>
      <template slot="good_type">
        <el-tag
          :size="'mini'"
          v-text="
            (options1.find((item) => item.id == sitem.good_type) || {}).name ||
              '--'
          "
        />
        <span
          v-if="sitem.good_type + '' === '1'"
          style="padding: 0 0 0 5px"
        >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span>
      </template>
      <template slot="noble">
        <span
          v-if="sitem.noble_metal"
        >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
          sitem.noble_name
        }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
          sitem.is_gold_price + '' === "0" ? "不" : ""
        }}启用实时金价-{{ sitem.is_diff + '' === "1" ? "有" : "无" }}工差-{{
          sitem.config
        }}-{{ sitem.other_config }}</span>
      </template>
    </show-data-table>
    <show-data-table
      v-else-if="
        (type + '' === '1' || type + '' === '2' || type + '' === '5' || type + '' === '6') &&
          this.sitem &&
          this.sitem.addtime &&
          iscgd
      "
      :sitem="sitem"
      :columns="costColumns"
      :border="border"
    >
      <template slot="good_name">
        <img
          v-if="sitem.good_thumb_img"
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          :src="sitem.good_thumb_img"
          alt=""
        >
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.speclist" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>商品成本编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="good_img">
        <img
          v-for="(si, i) in sitem.good_img"
          :key="si + i"
          v-viewer
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          :src="si"
        >
      </template>
      <template slot="good_info_img">
        <img
          v-for="(si, i) in sitem.good_info_img"
          :key="si + i"
          v-viewer
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          :src="si"
        >
      </template>
      <template slot="company">
        <span>{{ sitem.company }}</span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>业务企业编号：</span><span>{{ sitem.companyNo }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="supplierName">
        <span>{{ sitem.supplierName }}</span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>供应商编号：</span><span>{{ sitem.supplierNo }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="exclusive">
        <span v-for="(si, sii) in sitem.exclusive" :key="si.id">
          <span v-if="sii !== 0">/</span> <span>{{ si.name }}</span>
        </span>
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id == sitem.supply_area) || {})
              .name || '--'
          "
        />
      </template>
      <template slot="is_stock">
        <el-tag
          :size="'mini'"
          v-text="
            (options4.find((item) => item.id == sitem.is_stock) || {}).name ||
              '--'
          "
        />
      </template>
      <template slot="is_auth">
        <el-tag
          :size="'mini'"
          v-text="
            (options3.find((item) => item.id == sitem.is_auth) || {}).name ||
              '--'
          "
        />
      </template>

      <template slot="good_type">
        <el-tag
          :size="'mini'"
          v-text="
            (options1.find((item) => item.id == sitem.good_type) || {}).name ||
              '--'
          "
        />
        <span
          v-if="sitem.good_type + '' === '1'"
          style="padding: 0 0 0 5px"
        >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span>
      </template>
      <template slot="noble">
        <span
          v-if="sitem.noble_metal"
        >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
          sitem.noble_name
        }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
          sitem.is_gold_price + '' === "0" ? "不" : ""
        }}启用实时金价-{{ sitem.is_diff + '' === "1" ? "有" : "无" }}工差-{{
          sitem.config
        }}-{{ sitem.other_config }}</span>
      </template>
    </show-data-table>
    <show-data-table
      v-else-if="
        (type === '3' || type === '4') &&
          this.sitem &&
          this.sitem.addtime &&
          !iscgd
      "
      :sitem="sitem"
      :columns="reColumns"
      :border="border"
    >
      <template slot="good_name">
        <!-- <img
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-if="sitem.good_img"
          :src="sitem.good_img"
          alt=""
        /> -->
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.specinfo" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value_name }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>商品编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>
      <template slot="send_way">
        <span>{{ sitem.send_way + '' === "1" ? "供应商包邮" : "公司自提" }}</span>
      </template>
      <template slot="good_type">
        <el-tag
          :size="'mini'"
          v-text="
            (options1.find((item) => item.id == sitem.good_type) || {}).name ||
              '--'
          "
        />
        <span
          v-if="sitem.good_type + '' === '1'"
          style="padding: 0 0 0 5px"
        >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span>
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id + '' === sitem.supply_area + '') || {})
              .name || '--'
          "
        />
      </template>
      <template slot="pay_way">
        <el-tag
          :size="'mini'"
          v-text="
            (options9.find((item) => item.id + '' == sitem.pay_way + '') || {}).name ||
              '--'
          "
        />
      </template>
      <template slot="noble">
        <span
          v-if="sitem.noble_name"
        >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
          sitem.noble_name
        }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
          sitem.is_gold_price === "0" ? "不" : ""
        }}启用实时金价-{{ sitem.is_diff === "1" ? "有" : "无" }}工差-{{
          sitem.config
        }}-{{ sitem.other_config }}</span>
        <span v-else>--</span>
      </template>
      <template slot="good_img">
        <img
          v-for="(si, sii) in sitem.good_img"
          :key="si + sii"
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          :src="si"
          alt=""
        >
      </template>
    </show-data-table>
    <show-data-table
      v-else-if="
        (type === '3' || type === '4') &&
          this.sitem &&
          this.sitem.addtime &&
          iscgd
      "
      :sitem="sitem"
      :columns="coveColumns"
      :border="border"
    >
      <template slot="good_name">
        <span>{{ sitem.good_name }}</span>
        <span v-for="(si, i) in sitem.specinfo" :key="si.spec_id + i">
          <span v-if="i !== 0">-</span>
          <span v-else>_</span>
          <span>{{ si.spec_name }}[{{ si.spec_value_name }}]</span>
        </span>
        <el-popover placement="top" width="300" trigger="hover">
          <ul>
            <li>
              <span>商品编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
          </ul>
          <i slot="reference" class="el-icon-warning-outline fr" />
        </el-popover>
      </template>

      <template slot="send_way">
        <span>{{ sitem.send_way + '' === "1" ? "供应商包邮" : "公司自提" }}</span>
      </template>

      <template slot="good_type">
        <el-tag
          :size="'mini'"
          v-text="
            (options1.find((item) => item.id == sitem.good_type) || {}).name ||
              '--'
          "
        />
        <span
          v-if="sitem.good_type + '' === '1'"
          style="padding: 0 0 0 5px"
        >{{ sitem.moq }}起订/工期{{ sitem.customized }}天</span>
      </template>
      <template slot="supply_area">
        <el-tag
          :size="'mini'"
          v-text="
            (options6.find((item) => item.id === sitem.supply_area) || {})
              .name || '--'
          "
        />
      </template>

      <template slot="pay_way">
        <el-tag
          :size="'mini'"
          v-text="
            (options9.find((item) => item.id == sitem.pay_way) || {}).name ||
              '--'
          "
        />
      </template>
      <template slot="noble">
        <span
          v-if="sitem.noble_name"
        >{{ sitem.noble_weight ? sitem.noble_weight : "0" }}g-{{
          sitem.noble_name
        }}-{{ sitem.gold_price ? sitem.gold_price : "0" }}元/g-{{
          sitem.is_gold_price === "0" ? "不" : ""
        }}启用实时金价-{{ sitem.is_diff === "1" ? "有" : "无" }}工差-{{
          sitem.config
        }}-{{ sitem.other_config }}</span>
        <span v-else>--</span>
      </template>
      <template slot="good_img">
        <img
          v-for="(si, sii) in sitem.good_img"
          :key="si + sii"
          v-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          :src="si"
          alt=""
        >
      </template>
    </show-data-table>
    <div v-else>商品编号有误</div>
  </div>
</template>

<script>
import asyncRequest from '@/apis/components/show-goods-data-table'
import { mapGetters } from 'vuex'
import {
  onlineColumns,
  reColumns,
  costColumns,
  coveColumns,
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  options10,
  options11,
  options12
} from './ShowDataTableColumns'
export default {
  name: 'ShowGoodsDataTable',

  props: {
    newTime: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    skucode: {
      type: String,
      default: ''
    },
    iscgd: {
      type: Boolean,
      default: false
    },
    spucode: {
      type: String,
      default: ''
    },
    border: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: true,
      sitem: {},
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      options9,
      options10,
      options11,
      options12,
      onlineColumns,
      reColumns,
      costColumns,
      coveColumns
    }
  },
  computed: {
    ...mapGetters(['isSupertube'])
  },
  watch: {
    newTime: function(val) {
      if (val) {
        this.initForm()
      }
    }
  },
  mounted() {
    this.initForm()
  },

  methods: {
    async initForm() {
      console.log(
        `${this.type}---${this.skucode}---${this.spucode}---${this.iscgd}`
      )
      this.columns = []
      this.loading = true
      if (this.type) {
        let res = {}
        if (
          this.type + '' === '1' ||
          this.type + '' === '2' ||
          this.type + '' === '5' ||
          this.type + '' === '6'
        ) {
          if (this.iscgd) {
            res = await asyncRequest.cost_detail({
              spuCode: this.spucode
            })
          } else {
            res = await asyncRequest.online_detail({
              skuCode: this.skucode
            })
          }
        } else {
          if (this.iscgd) {
            res = await asyncRequest.cove_detail({
              spuCode: this.spucode
            })
          } else {
            res = await asyncRequest.re_detail({
              spuCode: this.spucode
            })
          }
        }
        const { code, message, data } = res
        this.loading = false
        if (code === 0) {
          this.sitem = JSON.parse(JSON.stringify(data))
          const { cat_info } = this.sitem
          let cat = ''
          if (cat_info && cat_info.length > 0) {
            cat_info.forEach((e, i) => {
              cat += i === 0 ? e.name : '_' + e.name
            })
          }
          this.sitem.cat = cat
          // 线上商品字段转换
          if (this.sitem && this.sitem.good_img) {
            this.sitem.good_img = this.sitem.good_img.split(',')
          }
          if (this.sitem && this.sitem.good_info_img) {
            this.sitem.good_info_img = this.sitem.good_info_img.split(',')
          }
        } else if (code >= 100 && code <= 104) {
          await this.logout()
        } else {
          this.$message.warning(message)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>