order-ui-pc/src/views/sellOut/filing/detail.vue

<template>
  <div v-loading="loading" class="report-detail__container">
    <el-tabs v-model="activeTabs">
      <el-tab-pane name="1" :label="title">
        <el-collapse v-model="collapses">
          <el-collapse-item v-if="type === 'add' || type === 'edit'" name="1" :title="title">
            {{sitem.status}}
            <base-form :id="id" :type="type" />
          </el-collapse-item>

          <base-detail
            v-else
            ref="baseForm"
            :sitem="sitem"
            @change-num="handleChangeNum"
            @change-status="handleChangeStatus"
            @change-order-code="handleChangeOrderCode"
            @change-detail="(detail) => 
              {sitem = detail;
              status = detail.status}
            "
          />

          <el-collapse-item
            name="2"
            title="是否合规设置"
            v-if="(!isSupertube && type !== 'add' && type !== 'edit') && Number(status) === 0 && _process.includes('0')"
          >
            <compliance-form :sitem="sitem" @refresh="refresh" />
          </el-collapse-item>

          <el-collapse-item v-if="status === '3'" name="4" title="发货单">
            <shipment-request :order-code="orderCode" />
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ShipmentRequest from "./cpns/shipment-request.vue";
import asyncRequest from "@/apis/service/sellOut/filing";
import ComplianceForm from "./cpns/complianceForm.vue";
import baseDetail from "./cpns/baseDetail.vue";
import ExamForms from "./cpns/exam-form.vue";
import BaseForm from "./cpns/baseForm.vue";
import { mapGetters } from "vuex";

export default {
  components: {
    BaseForm,
    ExamForms,
    baseDetail,
    ComplianceForm,
    ShipmentRequest
  },
  data() {
    return {
      activeTabs: "1",
      collapses: ["1", "2", "3", "4"],
      loading: false,
      orderCode: "",
      status: "",
      sitem: {},
      num: "0"
    };
  },
  computed: {
    ...mapGetters(["isSupertube"]),
    title() {
      const mapTitle = {
        add: "新建报备单",
        edit: "编辑报备单",
        view: "报备单详情"
      };

      return mapTitle[this.$route.query.type];
    },
    type() {
      return this.$route.query.type;
    },
    id() {
      return this.$route.query.id;
    },
    getNewTime() {
      this.newTime = new Date().valueOf();
    },
    _process() {
      const { roleProcess } = this.$store.getters;
      const tran = roleProcess.find(i => i.process_type === "BBD") || {};
      const { action } = tran ?? {};
      return action ?? [];
    }
  },
  methods: {
    refresh() {
      if (!this.$refs.baseForm) return;
      this.$refs.baseForm.initData();
    },
    async examFormSubmit({ companyCode, ...rest } = {}) {
      const { id } = this.$route.query;
      this.loading = true;
      await asyncRequest.status({
        ...rest,
        id,
        companyCode: Array.isArray(companyCode) ? companyCode[0] : companyCode
      });
      await this.$refs.baseForm.initData();
      this.loading = false;
      console.log(this.loading);
      // this.handleRefresh()
    },
    handleChangeStatus(status) {
      this.status = status;
    },
    handleChangeOrderCode(orderCode) {
      this.orderCode = orderCode;
    },
    async handleRefresh() {
      this.loading = true;
      this.$refs.baseForm.initData();
      this.loading = false;
    },
    handleChangeNum(num) {
      this.num = num;
    }
  }
};
</script>

<style lang="scss" scoped>
.report-detail__container {
  padding: 15px;
}
</style>