order-ui-pc/src/views/standingBook/components/detail16/main.vue

<template>
  <div>
    <detailDatatable
      style="padding: 10px 0 5px 0"
      :newTime="newTime"
      v-if="sitem"
      :sitem="sitem"
      :columns="columns"
    >
      <template slot="status">
        <el-tag
          :size="'mini'"
          :type="sitem.status == '0' ? 'warning' : ''"
          v-text="
            (statusOptions.find((item) => item.id == sitem.status) || {})
              .label || '--'
          "
        ></el-tag>
      </template>
      <template slot="ocr_status">
        <el-tag
          :size="'mini'"
          :type="
            sitem.ocr_status == '0'
              ? 'info'
              : sitem.ocr_status == '1'
              ? 'primary'
              : sitem.ocr_status == '2'
              ? 'danger'
              : ''
          "
          v-text="
            (ocr_status.find((item) => item.id == sitem.ocr_status) || {})
              .label || '--'
          "
        ></el-tag>
      </template>

      <template slot="coop_state">
        <span
          v-text="
            (
              coop_stateoptions.find(
                (item) => item.value == sitem.coop_state
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>

      <template slot="source">
        <span
          v-text="
            (
              sourceoptions.find(
                (item) => item.value == sitem.source
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="type">
        <span
          v-text="
            (
              typeoptions.find(
                (item) => item.value == sitem.type
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="category">
        <span
          v-text="
            (
              categoryoptions.find(
                (item) => item.value == sitem.category
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="delivery_way">
        <span
          v-text="
            (
              delivery_wayoptions.find(
                (item) => item.value == sitem.delivery_way
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="supplier_type">
        <span
          v-text="
            (
              supplier_typeoptions.find(
                (item) => item.value == sitem.supplier_type
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="level">
        <span
          v-text="
            (
              leveloptions.find(
                (item) => item.value == sitem.level
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>
      <template slot="pay_type">
        <span
          v-text="
            (
              pay_typeoptions.find(
                (item) => item.value == sitem.pay_type
              ) || {}
            ).label || '--'
          "
        ></span>
      </template>

      <template slot="supplier_img">
        <img
              :src="sitem.supplier_img"
              class="avatar hover fl"
              v-viewer
              style="width:50px; height:50px"
            />
      </template>
       <template slot="prove_img">
        <img
            v-for="img in sitem.prove_img"
            :key="img"
              :src="img"
              class="avatar hover fl"
              v-viewer
              style="width:50px; height:50px"
            />
      </template>
    </detailDatatable>
  </div>
</template>

<script>
import { columns } from "./columns";
// import { cg_order_type_options } from "@/assets/js/statusList";
import { xs_order_type_options } from "@/assets/js/statusList";

//————————————————
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/serviceParam/supplier";
import { mapGetters } from "vuex";
import detailDatatable from "../detail-data-table";

export default {
  mixins: [mixinPage, resToken],
  components:{
    detailDatatable
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "private_field"]),
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "standingBookDetail"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
  },
  props: ["queryId"],
  data() {
    return {
      xs_order_type_options,
      // 状态
      statusOptions: [
        { id: "0", label: "禁用" },
        { id: "1", label: "启用" },
      ],
      ocr_status: [
        { id: "0", label: "未上传" },
        { id: "1", label: "识别成功" },
        { id: "2", label: "识别失败" },
      ],

      coop_stateoptions: [
        { value: "0", label: "白名单" },
        { value: "1", label: "黑名单" },
      ],
      sourceoptions: [
        { value: "0", label: "客户提供" },
        { value: "1", label: "供应商" },
        { value: "2", label: "公司开发" },
      ],
      typeoptions: [
        { value: "0", label: "正式供应商" },
        { value: "1", label: "临时供应商" },
      ],
      categoryoptions: [
        { value: "0", label: "单品类供应商" },
        { value: "1", label: "多品类供应商" },
      ],
      delivery_wayoptions: [
        { value: "0", label: "供应商发货" },
        { value: "1", label: "公司自提" },
      ],
      supplier_typeoptions: [
        { value: "0", label: "生产厂家" },
        { value: "1", label: "代理商" },
        { value: "2", label: "经销商" },
        { value: "3", label: "分销商" },
        { value: "4", label: "电商平台" },
      ],
      leveloptions: [
        { value: "2", label: "生产厂家" },
        { value: "0", label: "一级代理商" },
        { value: "1", label: "二级代理商" },
      ],
      pay_typeoptions: [
        { value: "0", label: "现结" },
        { value: "1", label: "月清" },
        { value: "2", label: "双月清" },
      ],
      ocr_status: [
        { id: "0", label: "未上传" },
        { id: "1", label: "识别成功" },
        { id: "2", label: "识别失败" },
      ],

      //——————————————————————
      columns,
      newTime: "",
      status: "",
      sitem: null,
      loading: false,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async initData() {
      this.loading = true;
      const { code, message, data } = await asyncRequest.detail({
        id: this.queryId,
      });
      this.loading = false;
      if (code === 0) {
        this.sitem = JSON.parse(JSON.stringify(data));
        const { status } = this.sitem;
        this.status = status;
        this.getNewTime();
      } else if (code >= 100 && code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  /deep/ .label{
    // width: 120px !important;
  }
</style>