accout-vue3-ui/src/views/InvoiceSales/capitalClaim/components/capital-detail/index.vue

<script setup lang="ts">
import { computed, onMounted, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useResponseHandle } from "/@/hooks";
import { httpDetail, httpStatus } from "/@/api/InvoiceSales/capitalPool";
import { httpInfo } from "/@/api/InvoiceSales/capitalClaim";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { approval_process } from "../approval-process";
import { CAPITAL_COLUMNS } from "/@/utils/details/tragelog";
import PaymentReceipt from "../basic-claim/receipt-payment.vue";
import { SALE_COLUMNS } from "/@/utils/details/sale";

const { query } = useRoute();
const { push } = useRouter();
const responseHandle = useResponseHandle();
const capitalDetail = ref<any>({});
const tradeDetail = ref<any>({});
const collapses = ref(["1", "2", "3", "4"]);

const logNo = computed(() => query.id);

//当前的审核流程
const currentProcess = computed(() => {
  const { status } = capitalDetail.value;
  return approval_process[status];
});

//资金认领详情
async function requesetCapitalDetail() {
  const { code, message, data } = await httpDetail({
    logNo: logNo.value
  });

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

//资金详情
async function requesetTradeDetail() {
  const { data, message, code } = await httpInfo({
    tradNo: tradeNo.value
  });

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

const tradeNo = computed(() => {
  const { tradNo } = capitalDetail.value;
  return tradNo;
});

//资金认证状态
async function requesetCapitalStatus(otherParams) {
  const { code, message } = await httpStatus({
    logNo: logNo.value,
    ...otherParams
  });

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

//初始化数据
function initalData() {
  if (!logNo.value) return;
  requesetCapitalDetail();
}

onMounted(() => initalData());

watchEffect(() => tradeNo.value && requesetTradeDetail());
</script>

<template>
  <div class="capital__content" bg-white>
    <ElTabs>
      <ElTabPane label="详情">
        <ElCollapse v-model="collapses">
          <ElCollapseItem title="资金详情" name="1">
            <PaymentReceipt :trade-info="tradeDetail" />
          </ElCollapseItem>
          <!-- 关联订单 -->
          <ElCollapseItem title="关联订单" name="2">
            <BasicDescriptions
              :columns="SALE_COLUMNS"
              :data="capitalDetail.orderinfo ? capitalDetail.orderinfo : {}"
              :col-number="2"
            />
          </ElCollapseItem>
          <!-- 详情 -->
          <ElCollapseItem title="认领资金详情" name="3">
            <BasicDescriptions
              :columns="CAPITAL_COLUMNS"
              :data="capitalDetail"
              :col-number="2"
            />
          </ElCollapseItem>

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

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