order-ui-pc/src/views/supplierSellOut/supplierFiling/cpns/baseDetail.vue

<template>
  <div class="filingDetail">
    <div class="filingDetail-main">
      <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
        <el-collapse-item :title="'报备单详情'" name="1">
          <show-data-table
            v-if="newTime !== ''"
            style="padding: -5px 0 10px 0"
            :sitem="sitem"
            :new-time="newTime"
            :columns="editColumns"
          >
            <template slot="annex">
              <div v-if="sitem" style="display: flex;align-items: center;">
                {{ getAnnexName() }}
                <el-button type="text" size="mini" style="margin-left:10px" @click="download">下载</el-button>
              </div>
            </template>

            <template slot="status">
              <el-tag
                :size="tablebtnSize"
                :type="
                  (statusOptions.find((item) => item.value == sitem.status) || {}).type ||
                    ''
                "
                v-text="
                  (statusOptions.find((item) => item.value == sitem.status) || {})
                    .label || '--'
                "
              />
            </template>

            <template slot="expect_service_proportion">
              <span>{{ sitem.expect_service_proportion }}%</span>
            </template>

            <template slot="service_proportion">
              <span>{{ sitem.service_proportion }}%</span>
            </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="customerName">
              <span>{{ sitem.customerName }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>业务公司编号：</span>
                    <span>{{ sitem.customerCode }}</span>
                  </li>
                </ul>
                <i slot="reference" class="el-icon-warning-outline fr" />
              </el-popover>
            </template>
            <template slot="companyName">
              <span>{{ sitem.companyName }}</span>
              <el-popover v-if="sitem.companyCode" placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>企业客户编号：</span>
                    <span>{{ sitem.companyCode }}</span>
                  </li>
                </ul>
                <i slot="reference" class="el-icon-warning-outline fr" />
              </el-popover>
            </template>

            <template slot="is_determine_price">
              <el-tag
                :size="'mini'"
                v-text="
                  (
                    is_determine_price_options.find(
                      (item) => item.id == sitem.is_determine_price + ''
                    ) || {}
                  ).label || '--'
                "
              />
            </template>
          </show-data-table>
        </el-collapse-item>
        <el-collapse-item title="商品信息" name="20">
          <show-data-table
            v-if="newTime !== ''"
            :new-time="newTime"
            :columns="coveColumns"
            :sitem="sitem"
          >
             <template slot="brand_name">
              <span>{{ sitem.brand_name }}</span>
              <el-popover placement="top" width="450" trigger="hover">
                <div>
                  <p
                    v-if="mapBrandColor[brandType].text"
                    :style="`color:${mapBrandColor[brandType].color};font-size:16px;text-align:center;margin-bottom:${brandType === 'warning' || brandType === 'noStart' ? '10px' : '0px'}`"
                  >{{mapBrandColor[brandType].text(sitem.brand_name)}}</p>

                  <show-data-table
                    v-if="brandType !== 'danger'"
                    :columns="brandColumns"
                    :sitem="{
                    name:sitem.brand_name,
                    ...brandData,
                  }"
                  >
                    <template slot="long">
                      {{
                      String(brandData.long) === "1" ? "非长期" : "长期"
                      }}
                    </template>

                    <template slot="brandTime">
                      {{String(brandData.starttime)}} ~ {{String(brandData.long) === "0" ? "长期有效" : String(brandData.endtime)}}
                    </template>

                    <template slot="brandImage">
                        <div
                          v-if="brandData.brand_book"
                          style="display:flex"
                          class="hover"
                          v-viewer
                        >
                          <img
                            v-for="url in brandData.brand_book.split(',')"
                            :key="url"
                            :src="url"
                            style="display: inline-block; width: 20px;height:20px;margin-left:5px"
                            alt
                          />
                        </div>
                    </template>
                  </show-data-table>
                </div>
                <i
                  slot="reference"
                  class="el-icon-warning-outline fr"
                  :style="`color:${mapBrandColor[brandType].color} !important;font-weight:500`"
                />
              </el-popover>
            </template>

            <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 v-if="sitem.spuCode" 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="
                  (options13.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>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import asyncRequest from '@/apis/service/sellOut/filing'
import resToken from '@/mixins/resToken'
import { mapGetters } from 'vuex'

import {
  editColumns,
  costArr,
  bargainingArr,
  options1,
  options2,
  options3,
  options4,
  options5,
  options6,
  options7,
  options8,
  options9,
  options10,
  options11,
  options13,
  statusOptions,
  coveColumns,
  is_determine_price_options
} from '../config/columns'

export default {
  name: 'FilingDetail',
  mixins: [resToken],
  computed: {
    ...mapGetters(['tablebtnSize', 'searchSize', 'size', 'private_field'])
  },

  data() {
    return {
      size: 'small',
      eaxmList: [],
      brandColumns: [
        {
          prop: "name",
          label: "品牌",
          span: 24
        },
        {
          prop: "long",
          label: "授权类型",
          span: 24,
          _slot_: "long"
        },
        {
          label: "授权图片",
          span: 24,
          _slot_: "brandImage"
        },
        {
          label: "授权时间",
          span: 24,
          _slot_: "brandTime"
        },
        {
          prop:'remark',
          label: "备注",
          span: 24,
        }
      ],
      costArr,
      bargainingArr,
      editColumns,
      options1,
      options2,
      options3,
      options4,
      options5,
      options6,
      options7,
      options8,
      options9,
      options10,
      options11,
      options13,
      statusOptions,
      is_determine_price_options,
      coveColumns,
      projectTabs: '1',
      activeNames: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '20'],
      newTime: '',
      loading: false,
      queryType: '',
      queryId: '',
      status: '',
      sitem: null,
      brandType: "info",
      mapBrandColor: {
        warning: {
          text: name => `供应商 '${name}' 的品牌授权已过期`,
          color: "#E6A23C"
        },
        noStart: {
          text: name => `供应商 '${name}' 的品牌授权未开始`,
          color: "#E6A23C"
        },
        danger: {
          text: name => `供应商没有 '${name}' 的品牌授权`,
          color: "#F56C6C"
        },
        info: {
          color: "#909399"
        }
      },
      orderItem: {},
      moneyDirItem: {},
      moneyItem: {},
      BossItem: {}
    }
  },
  mounted() {
    this.initForm()
  },
  methods: {
    download() {
      const { fill_url } = this.sitem
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = fill_url
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    },
    getAnnexName() {
      const { fill_url } = this.sitem
      if (!fill_url) return ''
      const chunks = fill_url.split('/')
      const [name, suffix] = (chunks[chunks.length - 1] || '').split('.')

      if (name.length > 10) {
        return ([name[0], name[1], name[2], ' ... ', name[name.length - 2], name[name.length - 1]]).join('') + '.' + suffix
      }

      return name + '.' + suffix
    },
    async initForm() {
      const { id, type } = this.$route.query
      this.queryId = id
      this.queryType = type
      this.projectTabs = '1'
      this.loading = true
      await this.initData()
      this.loading = false
    },

    handleClick(row) {
      console.log(row)
    },
    async refresh() {
      this.routeReGoto('supplierFiling', {})
    },
    async initData() {
      this.loading = true
      const { code, message, data } = await asyncRequest.detail({
        id: this.queryId
      })

      this.eaxmList = []
      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
        const { status, wait_num, orderCode } = this.sitem
        this.status = status

        const { brand_id, supplierNo } = data;
        const result = await asyncRequest.keepqueryl({
          brand_id,
          gyscode: supplierNo
        });

        if (result.code === 0) {
          if (result.data.length === 0) {
            // 没有找到授权信息
            this.brandType = "danger";
          }

          this.brandData = result.data;
          const { endtime, starttime ,long } = this.brandData;
          const now = new Date();
          const start = new Date(starttime);

          if(start > now){
            this.brandType = "noStart"
          }


          if (String(long) === "1") {
            // 短期 查看授权是否过期
            const end = new Date(endtime);

            if (now > end) {
              // 过期
              this.brandType = "warning";
            }
          }
        }

        this.$emit('change-detail', data)
        this.$emit('change-status', status)
        this.$emit('change-num', wait_num)
        this.$emit('change-order-code', orderCode)
        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>
.filingDetail {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .filingDetail-main {
    position: relative;
    padding: 10px;
    height: 100%;
    width: 100%;
  }
  .filingDetail-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>