order-client-ui-pc/src/views/sellOutOrder/detail.vue

<template>
  <div class="sellOutOrderDetail pagePadding">
    <el-tabs v-model="activeTabs">
      <el-tab-pane label="业务详情" name="1">
        <el-collapse v-model="activeNames" style="margin: -18px 0 0 0">
          <el-collapse-item title="发货申请单详情" name="1">
            <show-data-table
              :newTime="newTime"
              v-if="newTime !== ''"
              :sitem="sitem"
              :columns="showColumns"
            >
              <template slot="status">
                <el-tag
                  :size="'mini'"
                  :type="sitem.status == '0' ? 'warning' : ''"
                  v-text="
                    (statusOptions.find((item) => item.value == sitem.status) || {})
                      .label || '--'
                  "
                ></el-tag>
              </template>
              <template slot="order_type">
                <el-tag
                  :size="'mini'"
                  v-text="
                    (
                      xs_order_type_options.find((item) => item.id == sitem.order_type) ||
                      {}
                    ).label || '--'
                  "
                ></el-tag>
              </template>
            </show-data-table>
          </el-collapse-item>
          <el-collapse-item title="商品信息" name="2">
            <show-goods-data-table
              :newTime="newTime"
              v-if="newTime !== ''"
              :type="sitem.order_type"
              :skucode="sitem.skuCode"
              :spucode="sitem.good_code"
            />
          </el-collapse-item>
          <el-collapse-item title="库管发货" name="3" v-if="status === '1'">
            <want-deliver
              :newTime="newTime"
              v-if="newTime !== ''"
              :sitem="sitem"
              @refresh="initData"
            />
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <!-- <el-tab-pane label="审批记录" name="2">
        <process-time-line
          v-if="newTime !== ''"
          :newTime="newTime"
          :type="'CKD'"
          :orderCode="queryId"
        />
      </el-tab-pane> -->
      <!-- <el-tab-pane
        label="物流进度"
        name="3"
        v-if="newTime !== '' && (status === '2' || status === '3')"
      >
        <logis-time-line v-if="newTime !== ''" :orderCode="sitem.post_code" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>
<script>
import mixinPage from "@/mixins/elPaginationHandle";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/sellOutOrder";
import { showColumns, statusOptions } from "./columns";
import { xs_order_type_options } from "@/assets/js/statusList";
import wantDeliver from "./want-deliver";

export default {
  name: "sellOutOrderDetail",
  mixins: [mixinPage, resToken],
  components: {
    wantDeliver,
  },

  data() {
    return {
      xs_order_type_options,
      statusOptions,
      showColumns,
      activeTabs: "1",
      activeNames: ["0", "1", "2", "3", "4"],
      status: "", //存储详情接口状态
      sitem: null,
      newTime: "",
      loading: false,
      queryId: "",
    };
  },
  mounted() {
    this.queryId = this.$route.query.id;
    this.initData();
  },
  methods: {
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    async initData() {
      this.returnCode = "";
      this.returnCode_type = "";
      const res = await asyncRequest.detail({
        outCode: this.queryId,
      });
      if (res && res.code === 0 && res.data) {
        this.sitem = res.data;
        const { status, id } = this.sitem;
        this.status = status;
        this.getNewTime();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
  },
};
</script>