accout-vue3-ui/src/views/purchase/orderRecord/detail.vue

<script setup lang="ts">
import { computed, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { httpInfo } from "/@/api/purchase/orderRecord";
import InitiateAudit from "./components/approval-process/Initiate-audit.vue";
import BusinessReview from "./components/approval-process/business-review.vue";
import FinancialAudit from "./components/approval-process/financial-audit.vue";
import CreateStatement from "./components/create-statement/index.vue";
import StatementDetail from "./components/statement-detail/index.vue";
import { httpStatus } from "/@/api/purchase/orderRecord";
import { useAsync, usePermission } from "/@/hooks";

const { query } = useRoute();
const { push } = useRouter();
const payNo = computed(() => query.id as string);
const isCreate = computed(() => !payNo.value);

//展开所有折叠面板
const collapses = ref(["1", "2", "3", "4"]);

//对账单状态
const status = computed(() => Number(statementDetail.value.status));

const { run: statementStatusRun } = useAsync({
  success: () => push("/purchase/orderRecord")
});
const { data: statementDetail, run: statementDetailRun } = useAsync<
  Record<string, string>
>({
  initalData: {}
});

const requesetStatementDetail = () => {
  statementDetailRun(
    httpInfo({
      payNo: payNo.value
    })
  );
};

//更改付款单审核状态
const requesetChangeStatus = otherParams => {
  statementStatusRun(httpStatus({ payNo: payNo.value, ...otherParams }));
};

const { permission } = usePermission({
  pageName: "orderRecordDetail"
});

//初始化对账单详情
watchEffect(() => payNo.value && requesetStatementDetail());
</script>

<template>
  <div class="porde__content" bg-white>
    <div v-show="permission.detail">
      <!-- 创建 -->
      <CreateStatement v-if="isCreate" />

      <!-- 详情 -->
      <ElTabs v-else>
        <ElTabPane label="订单对账详情">
          <ElCollapse v-model="collapses">
            <!-- 详情 -->
            <ElCollapseItem title="订单对账详情" name="1">
              <StatementDetail :statement-detail="statementDetail" />
            </ElCollapseItem>

            <!-- 审批流程 -->
            <ElCollapseItem name="2" v-if="status === 0" title="发起审核流程">
              <InitiateAudit @change-status="requesetChangeStatus" />
            </ElCollapseItem>

            <ElCollapseItem name="3" v-if="status === 1" title="业务审核">
              <BusinessReview @change-status="requesetChangeStatus" />
            </ElCollapseItem>

            <ElCollapseItem name="4" v-if="status === 2" title="财务审核">
              <FinancialAudit @change-status="requesetChangeStatus" />
            </ElCollapseItem>
          </ElCollapse>
        </ElTabPane>

        <ElTabPane label="审批记录" />
      </ElTabs>
    </div>
    <NoAuth v-show="!permission.detail" />
  </div>
</template>

<style lang="scss">
.porde__content {
  padding: 20px !important;
}
</style>