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

<template>
  <div class="showGoodsDataTable" v-loading="loading">
    <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-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-if="sitem.good_thumb_img"
          :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')
              "
            >
              <span>商品成本编号：</span><span>{{ sitem.spuCode }}</span>
            </li>
            <li>
              <span>平台商品编码：</span
              ><span>{{ sitem.platform_code_en }}</span>
            </li>
          </ul>
          <i class="el-icon-warning-outline fr" slot="reference"></i>
        </el-popover>
      </template>
      <template slot="good_img">
        <img
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          v-viewer
          v-for="(si, i) in sitem.good_img"
          :src="si"
          :key="si + i"
        />
      </template>
      <template slot="good_info_img">
        <img
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          v-viewer
          v-for="(si, i) in sitem.good_info_img"
          :src="si"
          :key="si + i"
        />
      </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 class="el-icon-warning-outline fr" slot="reference"></i>
        </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-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-if="sitem.good_thumb_img"
          :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 class="el-icon-warning-outline fr" slot="reference"></i>
        </el-popover>
      </template>
      <template slot="good_img">
        <img
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          v-viewer
          v-for="(si, i) in sitem.good_img"
          :src="si"
          :key="si + i"
        />
      </template>
      <template slot="good_info_img">
        <img
          class="fl"
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          v-viewer
          v-for="(si, i) in sitem.good_info_img"
          :src="si"
          :key="si + i"
        />
      </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 class="el-icon-warning-outline fr" slot="reference"></i>
        </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 class="el-icon-warning-outline fr" slot="reference"></i>
        </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 class="el-icon-warning-outline fr" slot="reference"></i>
        </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 || '--'
          "
        ></el-tag>
      </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-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-for="(si, sii) in sitem.good_img"
          :key="si + sii"
          :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 class="el-icon-warning-outline fr" slot="reference"></i>
        </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 || '--'
          "
        ></el-tag>
      </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-viewer
          style="width: 23px; height: 23px; margin: 0 5px 0 0"
          class="fl"
          v-for="(si, sii) in sitem.good_img"
          :key="si + sii"
          :src="si"
          alt=""
        />
      </template>
    </show-data-table>
    <div v-else>商品编号有误</div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/components/show-goods-data-table";
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,
    },
  },
  computed: {},
  data() {
    return {
      loading: true,
      sitem: {},
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      options9,
      options10,
      options11,
      options12,
      onlineColumns,
      reColumns,
      costColumns,
      coveColumns,
    };
  },
  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>