accout-vue3-ui/src/views/InvoiceSales/refund/detail.vue

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import CreateRefund from "./components/create-refund/index.vue";
import RefundDetail from "./components/refund-detail/index.vue";
import { approval_process } from "./components/approval-process";
import { useResponseHandle } from "/@/hooks";
import { httpStatus, httpDetail } from "/@/api/InvoiceSales/refund";

const { query } = useRoute();
const { push } = useRouter();

const returnCode = computed(() => query.id);
const collapses = ref(["1", "2"]);

const isCreate = computed(() => !returnCode.value);
const refundDetail = ref<Record<string, string>>({});
const responseHandle = useResponseHandle();
const currentProcess = computed(() => {
  const { status } = refundDetail.value;
  return approval_process[status];
});

const hiddenRerturnImg = computed(() => {
  return refundDetail.value.type === "2";
});

//退款详情
async function requesetRefundDetail() {
  const { code, message, data } = await httpDetail({
    returnCode: returnCode.value
  });

  responseHandle({
    code,
    message,
    handler: () => (refundDetail.value = data)
  });
}

//退票申请管理
async function requesetRefundStatus(otherParmas) {
  const { code, message } = await httpStatus({
    returnCode: returnCode.value,
    ...otherParmas
  });

  responseHandle({
    code,
    message,
    handler: () => push("/InvoiceSales/refund")
  });
}

function initalData() {
  if (isCreate.value) return;
  requesetRefundDetail();
}

onMounted(() => initalData());
</script>
<template>
  <div class="refund__content" bg-white>
    <!-- 创建退款单 -->
    <CreateRefund v-if="isCreate" />

    <ElTabs v-else>
      <ElTabPane label="详情">
        <!-- 详情 -->
        <ElCollapse v-model="collapses">
          <!-- 退款单详情 -->
          <ElCollapseItem title="退款单详情" name="1">
            <RefundDetail :detail="refundDetail" />
          </ElCollapseItem>

          <!-- 审核 -->
          <ElCollapseItem
            name="2"
            v-if="currentProcess"
            :title="currentProcess.title"
          >
            <component
              :hiddenRerturnImg="hiddenRerturnImg"
              :is="currentProcess.component"
              @change-status="requesetRefundStatus"
            />
          </ElCollapseItem>
        </ElCollapse>
      </ElTabPane>

      <ElTabPane label="审批记录" />
    </ElTabs>
  </div>
</template>

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