order-ui-pc/src/views/goodStore/goodsOnline/detail.vue

<template>
  <div class="goodsOnlineDetail">
    <div class="goodsOnlineDetail-main" v-if="powers.some((i) => i == '007')">
      <el-tabs v-model="activeTabs">
        <el-tab-pane label="商品上线详情" name="1" v-if="queryType !== 'add'">
          <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
            <el-collapse-item title="商品上线详情" name="0">
              <show-data-table
                :newTime="newTime"
                v-if="newTime !== ''"
                :sitem="sitem"
                :columns="public_listCol"
              >
                <template slot="proof_id">
                  <el-popover
                    placement="top"
                    width="300"
                    trigger="hover"
                    v-if="sitem.proof.proof_type === '1'"
                  >
                    <video width="275" controls class="fl">
                      <source :src="sitem.proof.proof_url" type="video/mp4" />
                      <source :src="sitem.proof.proof_url" type="video/avi" />您的浏览器不支持Video标签。
                    </video>
                    <i
                      class="el-icon-video-camera-solid hover"
                      style="font-size: 18px"
                      slot="reference"
                    ></i>
                  </el-popover>

                  <img
                    v-else-if="sitem.proof.proof_type + '' === '2'"
                    style="width: 23px; height: 23px"
                    :src="sitem.proof.proof_url"
                    class="avatar fl hover"
                    v-viewer
                  />

                  <a
                    v-else-if="sitem.proof.proof_type + '' === '3'"
                    :href="sitem.proof.proof_url"
                    download="凭证文件"
                  >点击下载</a>
                  <span v-else>暂无凭证</span>
                </template>

                <template slot="is_combind">{{String(sitem.is_combind) === '1' ? '组合商品' : '非组合商品'}}</template>

                <tempalte slot="is_fixed">{{String(sitem.is_fixed) === "0" ? '实时金价' : '一口价'}}</tempalte>

                <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.plat_code }}</span>
                      </li>
                    </ul>
                    <i class="el-icon-warning-outline fr" slot="reference"></i>
                  </el-popover>
                </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="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="market_url">
                 <el-button type="text" size="mini" @click="openMarkletUrl"> {{sitem.market_url}}</el-button>
                </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="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="create_source">
                    <el-tag size="mini" :type="sitem.create_source === '1' ? 'warning' : ''">
                       {{ sitem.create_source === "1" ? "咨询成交商品" : "手动创建商品" }}
                    </el-tag> <span v-if="Number(sitem.create_source) === 1">,咨询销售价 {{ sitem.sale_price }}</span>
                  </template>
                <template slot="is_stock">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options4.find((item) => item.id == sitem.is_stock) || {}).name ||
                      '--'
                    "
                  />
                </template>
                <template slot="exam_status">
                  <el-tag
                    :size="'mini'"
                    :type="
                      (options8.find((item) => item.id == sitem.exam_status) || {})
                        .type || ''
                    "
                    v-text="
                      (options8.find((item) => item.id == sitem.exam_status) || {})
                        .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
                :newTime="newTime"
                v-if="
                  // newTime !== '' &&
                  // private_field &&
                  // private_field.length > 0 &&
                  // private_field.some((item) => item == '1')
                  isDisplayPrivateField('1')
                "
                :sitem="sitem"
                :columns="purchase_listCol"
              >
                <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="is_auth">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options3.find((item) => item.id == sitem.is_auth) || {}).name ||
                      '--'
                    "
                  />
                </template>

                <template slot="is_step">
                  <el-tag
                    :size="'mini'"
                    v-text="
                      (options7.find((item) => item.id == sitem.is_step) || {}).name ||
                      '--'
                    "
                  />
                </template>

                <template slot="nakelist">
                  <div v-if="nakelist">
                    <el-table
                      :data="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-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>
                  </div>
                  <div v-else>--</div>
                </template>
              </show-data-table>
              <show-data-table
                :newTime="newTime"
                v-if="
                  newTime !== '' &&
                  private_field &&
                  private_field.length > 0 &&
                  private_field.some((item) => item == '2') &&
                  ladderlist &&
                  ladderlist.length > 0
                "
                :sitem="sitem"
                :columns="sale_listCol"
              >
                <template slot="ladderlist">
                  <el-table
                    :data="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="cost_fee" 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-collapse-item>

            <!--  -->
            <el-collapse-item
              title="待产品审核"
              name="1"
              v-if="status == '2' && ppowers.some((i) => i == '2') && !isSupertube"
            >
              <FixedPriceForm
                :newTime="newTime"
                :id="queryId"
                :spuCode="spuCode"
                v-if="newTime !== ''"
                :sitem="sitem"
                :isFixed="sitem.is_fixed"
                :disabled="false"
                :isMust="false"
                @resSuccess="initForm"
                @searchChange="examForm1"
                @rejectRes="examForm2"
              />
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>

        <el-tab-pane label="审批记录" name="2">
          <process-time-line
            v-if="newTime !== ''"
            :newTime="newTime"
            :type="'SPSX'"
            :orderCode="queryId"
          />
        </el-tab-pane>

        <el-tab-pane label="审批备注" name="3">
          <process-remark-time-line v-if="newTime !== ''" :newTime="newTime" :skuCode="queryId" />
        </el-tab-pane>

        <el-tab-pane label="流程图" name="4">
          <flow-chart process_id="16" type="SPSX" :orderCode="queryId" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/goodStore/goodsOnline";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";
import processRemarkTimeLine from "./components/process-remark-time-line";
import { isArray } from "@/utils/validate";
import onlineForm from "./components/online-form";
import FixedPriceForm from "./components/fixed-price-form.vue";
import privateField from "@/mixins/privateField";

import {
  purchase_listCol,
  public_listCol,
  sale_listCol
} from "./ShowDataTableColumns";

import {
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8
} from "./columns";
export default {
  name: "goodsOnlineDetail",
  mixins: [resToken, privateField],
  components: {
    onlineForm,
    processRemarkTimeLine,
    FixedPriceForm
  },
  computed: {
    ...mapGetters([
      "tablebtnSize",
      "searchSize",
      "size",
      "private_field",
      "isSupertube"
    ]),
    powers() {
      const tran =
        this.$store.getters.btnList.find(
          item => item.menu_route == "goodsOnlineDetail"
        ) || {};
      const { action } = tran ?? {};
      return action ?? [];
    },
    ppowers() {
      const tran =
        this.$store.getters.roleProcess.find(i => i.process_type === "SPSX") ||
        {};
      const { action } = tran ?? {};
      return action ?? [];
    }
  },

  data() {
    return {
      public_listCol: public_listCol,
      purchase_listCol: purchase_listCol,
      sale_listCol: sale_listCol,
      options1: options1,
      options2: options2,
      options3: options3,
      options4: options4,
      options5: options5,
      options6: options6,
      options7: options7,
      options8: options8,
      ladderlist: [],
      nakelist: [],
      spuCode: "",
      size: "small",
      activeTabs: "1",
      activeNames: ["0", "1", "2", "3", "4", "5", "6", "7"],
      newTime: "",
      loading: false,
      queryType: "",
      queryId: "",
      status: "",
      sitem: null
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    openMarkletUrl(){
      window.open(this.sitem.market_url)
    },
    async initForm() {
      const { id, type } = this.$route.query;
      this.queryId = id;
      this.queryType = type;
      this.activeTabs = type === "add" ? "0" : "1";
      this.loading = true;
      if (this.queryType === "add") {
        this.sitem = {};
        this.getNewTime();
      } else {
        await this.initData();
      }

      this.loading = false;
    },

    refresh(e) {
      const { spuCode } = e;

      let model = {
        id: this.queryType === "add" ? spuCode : this.queryId,
        type: "view"
      };
      this.routeReGoto("goodsOnlineDetail", model);
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        skuCode: this.queryId
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const {
          exam_status,
          cat_info,
          ladderlist,
          nakelist,
          spuCode
        } = this.sitem;
        this.spuCode = spuCode;
        this.ladderlist = JSON.parse(JSON.stringify(ladderlist));
        console.log(ladderlist);

        this.nakelist = JSON.parse(JSON.stringify(nakelist));
        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 (!isArray(this.sitem.good_info_img)) {
          this.sitem.good_info_img = this.sitem.good_info_img.split(",");
        }

        if (!isArray(this.sitem.good_img)) {
          this.sitem.good_img = this.sitem.good_img.split(",");
        }

        this.status = exam_status;
        console.log(this.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 lang="scss" scoped>
.goodsOnlineDetail {
  width: 100%;
  box-sizing: border-box;
  .goodsOnlineDetail-main {
    padding: 10px;
    width: 100%;
  }
  .goodsOnlineDetail-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;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 12px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>