feat:代码优化

src/hooks/response/use-response-handle.ts

@@ -34,11 +34,15 @@ interface ResponseType<D> {
 export function useAsync<D>({
   initalData,
   initalPagination,
-  isList = false
+  isList = false,
+  success,
+  fall
 }: {
-  initalData: D;
+  initalData?: D;
   isList?: boolean;
   initalPagination?: any;
+  success?: () => void;
+  fall?: () => void;
 }) {
   const data = ref<D>(initalData);
   const loading = ref(false);
@@ -58,18 +62,26 @@ export function useAsync<D>({
 
   function run(promise: Promise<ResponseType<D>>) {
     setloading(true);
-    return promise.then(response => {
-      setloading(false);
-      const { code, message, data } = response;
-      responseHandle({
-        code,
-        message,
-        handler: () => {
-          setData(isList ? (data as any).list : data);
-          pagination.total = (data as any).count;
-        }
+
+    return promise
+      .then(response => {
+        setloading(false);
+
+        const { code, message, data } = response;
+
+        responseHandle({
+          code,
+          message,
+          handler: () => {
+            setData(isList ? (data as any).list : data);
+            pagination.total = (data as any).count;
+            success && success();
+          }
+        });
+      })
+      .catch(() => {
+        fall && fall();
       });
-    });
   }
 
   return {

src/views/InvoiceSales/capitalClaim/detail.vue

@@ -1,49 +1,53 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+
 import PaymentReceipt from "./components/basic-claim/receipt-payment.vue";
 import RelatedOrder from "./components/basic-claim/related-order.vue";
-import { useAsync, useResponseHandle } from "/@/hooks";
 
 import { httpInfo, httpPayAdd } from "/@/api/InvoiceSales/capitalClaim";
+import { useAsync } from "/@/hooks";
 
 const { query } = useRoute();
 const { push } = useRouter();
 const tradNo = computed(() => query.id as string);
-const responseHandle = useResponseHandle();
 
 const treadOrderList = ref<Array<Record<string, string>>>([]);
 
-const { data: treadeDetail, run: treadeRun } = useAsync<Record<string, string>>(
-  {
-    initalData: {},
-    isList: false
-  }
-);
-
-//新增销售单付款
-async function requesetCreateSalePay(orderArr: any = []) {
-  const { code, message } = await httpPayAdd({
-    tradNo: tradNo.value,
-    orderArr
-  });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => push("/InvoiceSales/capitalClaim")
-  });
-}
-
-function initalData() {
-  if (!tradNo.value) return;
+const {
+  data: treadeDetail,
+  run: treadeDetailRun,
+  loading
+} = useAsync<Record<string, string>>({
+  initalData: {}
+});
 
-  //获取资金详情
-  treadeRun(
+//获取资金详情
+const requesetTradeDetail = () => {
+  treadeDetailRun(
     httpInfo({
       tradNo: tradNo.value
     })
   );
+};
+
+const { run: createSaleRun } = useAsync({
+  success: () => push("/InvoiceSales/capitalClaim")
+});
+
+//新增销售单付款
+const requesetCreateSalePay = orderArr => {
+  createSaleRun(
+    httpPayAdd({
+      tradNo: tradNo.value,
+      orderArr
+    })
+  );
+};
+
+function initalData() {
+  if (!tradNo.value) return;
+  requesetTradeDetail();
 }
 
 //传入id初始化详情
@@ -54,7 +58,7 @@ onMounted(() => initalData());
   <div class="invoice__content" bg-white>
     <!-- 认领 -->
     <h1 text-xl font-bold mb-2>资金认领</h1>
-    <PaymentReceipt :trade-info="treadeDetail" />
+    <PaymentReceipt v-loading="loading" :trade-info="treadeDetail" />
     <RelatedOrder
       :trade-order-list="treadOrderList"
       @create-btn-click="requesetCreateSalePay"

src/views/InvoiceSales/refund/components/create-refund/capital-modal.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
 import { onMounted, ref, unref } from "vue";
 import { ElTable } from "element-plus";
-import { useResponseHandle } from "/@/hooks";
+import { useAsync } from "/@/hooks";
 import { httpTradeList } from "/@/api/InvoiceSales/refund";
 import { CAPITAL_COLUMNS } from "/@/utils/details/tragelog";
 
-const paymentList = ref<Array<Record<string, string>>>([]);
-const selectOrder = ref<Array<Record<string, string>>>([]);
 const visible = ref(false);
+const selectOrder = ref<Array<Record<string, string>>>([]);
 
 const emit = defineEmits(["on-add-order"]);
 const tableRef = ref<InstanceType<typeof ElTable>>(null);
-const responseHandle = useResponseHandle();
 
-async function requestPaymentList() {
-  const { code, message, data } = await httpTradeList({
-    status: "2"
-  });
+const { run, data, getPaginationParams, loading, pagination } = useAsync({
+  initalData: [],
+  isList: true,
+  initalPagination: {
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  }
+});
 
-  responseHandle({
-    code,
-    message,
-    handler: () => {
-      paymentList.value = data.list;
-    }
-  });
-}
+const requestPaymentlist = () => {
+  run(httpTradeList({ status: "2", ...getPaginationParams() }));
+};
 
 function handleConfirm() {
   visible.value = false;
@@ -47,7 +45,7 @@ defineExpose({
   onDisplay: () => (visible.value = true)
 });
 
-onMounted(() => requestPaymentList());
+onMounted(() => requestPaymentlist());
 </script>
 
 <template>
@@ -55,10 +53,11 @@ onMounted(() => requestPaymentList());
     <el-table
       border
       ref="tableRef"
-      :data="paymentList"
+      :data="data"
       size="small"
       row-key="id"
       @selection-change="handleSelectionChange"
+      v-loading="loading"
     >
       <el-table-column type="selection" width="55" />
       <el-table-column
@@ -69,6 +68,12 @@ onMounted(() => requestPaymentList());
       />
     </el-table>
 
+    <el-pagination
+      :total="pagination.total"
+      v-model:current-page="pagination.currentPage"
+      @current-change="requestPaymentlist"
+    />
+
     <div w-full flex justify-end mt-2>
       <el-button type="primary" size="small" @click="handleConfirm"
         >确定</el-button

src/views/InvoiceSales/returnTicket/detail.vue

@@ -3,9 +3,9 @@ import { computed, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 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/returnTicket";
-import CreateRefund from "./components/create-refund/index.vue";
+import CreateReturnTicket from "./components/create-return-ticket/index.vue";
+import { useAsync } from "/@/hooks";
 
 const { query } = useRoute();
 const { push } = useRouter();
@@ -15,62 +15,54 @@ const returnCode = computed(() => query.id);
 
 const isCreate = computed(() => !returnCode.value);
 
-const refundDetail = ref<Record<string, string>>({});
+const { data, run, loading } = useAsync<Record<string, string>>({
+  initalData: {}
+});
+
+//退票详情
+const requesetReturnTicketDetail = () => {
+  run(httpDetail({ returnCode: returnCode.value }) as any);
+};
+
+const { run: retrunTicketStatusRun } = useAsync({
+  success: () => push("/InvoiceSales/returnTicket")
+});
 
-const responseHandle = useResponseHandle();
+//退票审核流程
+const requesetRetrunTicketStatus = otherParmas => {
+  retrunTicketStatusRun(
+    httpStatus({
+      returnCode: returnCode.value,
+      ...otherParmas
+    }) as any
+  );
+};
 
 //映射当前审批流程
 const currentProcess = computed(() => {
-  const { status } = refundDetail.value;
+  const { status } = data.value;
   return approval_process[status];
 });
 
-//退款详情
-async function requesetRefundDetail() {
-  const { code, message, data } = await httpDetail({
-    returnCode: returnCode.value
-  });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => (refundDetail.value = data)
-  });
-}
-
-//退款审核
-async function requesetRetrunTicketStatus(otherParmas) {
-  const { code, message } = await httpStatus({
-    returnCode: returnCode.value,
-    ...otherParmas
-  });
-
-  responseHandle({
-    code,
-    message,
-    handler: () => push("/InvoiceSales/returnTicket")
-  });
-}
-
 function initalData() {
-  if (isCreate.value) return;
-  requesetRefundDetail();
+  !isCreate.value && requesetReturnTicketDetail();
 }
 
 onMounted(() => initalData());
 </script>
 <template>
-  <div class="refund__content" bg-white>
+  <div class="return-ticket__content" bg-white>
     <div v-if="isCreate">
-      <CreateRefund />
+      <CreateReturnTicket />
     </div>
+
     <ElTabs v-else>
       <ElTabPane label="详情">
         <!-- 详情 -->
         <ElCollapse v-model="collapses">
           <!-- 退票单详情 -->
           <ElCollapseItem title="退票单详情" name="1">
-            <RefundDetail :detail="refundDetail" />
+            <RefundDetail v-loading="loading" :detail="data" />
           </ElCollapseItem>
 
           <!-- 审核 -->
@@ -93,7 +85,7 @@ onMounted(() => initalData());
 </template>
 
 <style lang="scss" scoped>
-.refund__content {
+.return-ticket__content {
   padding: 20px !important;
 }
 </style>