order-ui-pc/src/components/show-good-data-modal/main.vue

<template>
  <el-dialog
    :title="'商品详情'"
    :center="true"
    align="left"
    top="8vh"
    width="1040px"
    @close="showModelThis = false"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
  >
    <el-card style="margin-top: -20px" class="modal-form-style">
      <show-data-table
        style="margin: 0; padding: 0"
        :newTime="newTime"
        v-if="newTime !== ''"
        :sitem="sitem"
        :columns="ShowDataTableColumns"
      >
        <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=""
          />
          <div>{{ sitem.good_name }}</div>
        </template>
        <template slot="speclist">
          <span v-for="(si, i) in sitem.speclist" :key="si.spec_id + i">
            <span v-if="i !== 0">-</span><span>{{ si.spec_value }}</span>
          </span>
        </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="is_auth">
          <el-tag
            :size="'mini'"
            v-text="
              (options3.find((item) => item.id == sitem.is_auth) || {}).name ||
              '--'
            "
          />
        </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="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'"
            >起订量:{{ 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="is_step">
          <el-tag
            :size="'mini'"
            v-text="
              (options7.find((item) => item.id == sitem.is_step) || {}).name ||
              '--'
            "
          />
        </template>

        <template slot="exam_status">
          <el-tag
            :size="'mini'"
            v-text="
              (options8.find((item) => item.id == sitem.exam_status) || {})
                .name || '--'
            "
          />
        </template>
        <template slot="purchase">
          <el-table
            :data="sitem.nakelist"
            :size="'mini'"
            border
            stripe
            style="width: 99%; margin: 10px 10px 10px 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>
        </template>
        <template slot="ladderlist">
          <el-table
            :data="sitem.ladderlist"
            :size="'mini'"
            border
            stripe
            style="width: 99%; margin: 10px 10px 10px 0"
          >
            <el-table-column prop="min_num" label="起订量(>=)" />
            <el-table-column prop="sale_price" label="售价" />
            <el-table-column prop="market_price" label="市场价" />
            <el-table-column prop="market_platform" label="对比平台" />
            <el-table-column prop="status" label="状态">
              <template slot-scope="scope">{{
                scope.row.status === "1" ? "启用" : "禁用"
              }}</template>
            </el-table-column>
          </el-table>
        </template>
      </show-data-table>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/components/show-good-data-modal";
import resToken from "@/mixins/resToken";
import mixinPage from "@/mixins/elPaginationHandle";
import { mapGetters } from "vuex";
import ShowDataTableColumns from "./ShowDataTableColumns";
import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  // columns,
} from "./columns";
export default {
  name: "showGoodDataModal",
  mixins: [resToken, mixinPage],
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size"]),
  },
  props: ["showModel", "id"],

  /**
   * 属性集合
   * @param {Boolean}       showModel             : 是否弹出弹窗        必填
   * @param {Boolean}       once                  : 是否只选一条        非必填
   */
  /**
   * 事件集合
   * @resultList             : 选中值变化调用   抛出选中数据
   */
  data() {
    return {
      ShowDataTableColumns: ShowDataTableColumns,
      options1: options1,
      options2: options2,
      options3: options3,
      options4: options4,
      options5: options5,
      options6: options6,
      options7: options7,
      options8: options8,
      loading: true,
      showModelThis: false,
      sitem: null,
      // 表格 - 列参数
      // columns: columns,
      newTime: "",
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.supplierCode = [];
        this.initData();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },

  methods: {
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        skuCode: this.id,
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { exam_status, 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;
        this.sitem.good_info_img = this.sitem.good_info_img.split(",");
        this.status = exam_status;
        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>

<style>
</style>