diff --git a/web/src/views/report/customerBill.vue b/web/src/views/report/customerBill.vue
new file mode 100644
index 00000000..57436e49
--- /dev/null
+++ b/web/src/views/report/customerBill.vue
@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click=""> 导出</a-button>
+        <a-button @click=""> 打印</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'customerId'">
+          <a @click="openReceipt(record.customerId)"> 详情 </a>
+        </template>
+      </template>
+    </BasicTable>
+    <CustomerBillDetailModal @register="handleRegister" />
+  </div>
+</template>
+<div>
+</div>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {customerBillColumns, searchCustomerBillSchema} from "@/views/report/report.data";
+import {Tag} from "ant-design-vue";
+import {getCustomerBill} from "@/api/report/report";
+import XEUtils from "xe-utils";
+import {useModal} from "@/components/Modal";
+import CustomerBillDetailModal from "@/views/report/modal/CustomerBillDetailModal.vue";
+
+export default defineComponent({
+  name: 'CustomerBill',
+  components: {
+    CustomerBillDetailModal, Tag, TableAction, BasicTable},
+  setup() {
+    const [handleRegister, {openModal}] = useModal();
+    const [registerTable, { reload }] = useTable({
+      title: '客户对账报表',
+      api: getCustomerBill,
+      columns: customerBillColumns,
+      formConfig: {
+        labelWidth: 110,
+        schemas: searchCustomerBillSchema,
+        autoSubmitOnEnter: true,
+      },
+      bordered: true,
+      useSearchForm: true,
+      showTableSetting: true,
+      striped: true,
+      canResize: false,
+      showIndexColumn: true,
+      showSummary: true,
+      summaryFunc: handleSummary,
+    });
+
+    function handleSummary(tableData: Recordable[]) {
+      const firstQuarterReceivable = tableData.reduce((prev, next) => prev + next.firstQuarterReceivable, 0);
+      const secondQuarterReceivable = tableData.reduce((prev, next) => prev + next.secondQuarterReceivable, 0);
+      const thirdQuarterReceivable = tableData.reduce((prev, next) => prev + next.thirdQuarterReceivable, 0);
+      const fourthQuarterReceivable = tableData.reduce((prev, next) => prev + next.fourthQuarterReceivable, 0);
+      const totalQuarterArrears = tableData.reduce((prev, next) => prev + next.totalQuarterArrears, 0);
+      const totalQuarterReceivable = tableData.reduce((prev, next) => prev + next.totalQuarterReceivable, 0);
+      const remainingReceivableArrears = tableData.reduce((prev, next) => prev + next.remainingReceivableArrears, 0);
+      return [
+        {
+          _index: '合计',
+          firstQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(firstQuarterReceivable), { digits: 2 })}`,
+          secondQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(secondQuarterReceivable), { digits: 2 })}`,
+          thirdQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(thirdQuarterReceivable), { digits: 2 })}`,
+          fourthQuarterReceivable:`￥${XEUtils.commafy(XEUtils.toNumber(fourthQuarterReceivable), { digits: 2 })}`,
+          totalQuarterArrears:`￥${XEUtils.commafy(XEUtils.toNumber(totalQuarterArrears), { digits: 2 })}`,
+          totalQuarterReceivable: `￥${XEUtils.commafy(XEUtils.toNumber(totalQuarterReceivable), { digits: 2 })}`,
+          remainingReceivableArrears: `￥${XEUtils.commafy(XEUtils.toNumber(remainingReceivableArrears), { digits: 2 })}`
+        },
+      ];
+    }
+    async function handleSuccess() {
+      reload();
+    }
+
+    async function handleCancel() {
+      reload();
+    }
+
+    function openReceipt(customerId: string) {
+      openModal(true, {
+        customerId: customerId,
+      });
+    }
+
+    return {
+      openReceipt,
+      registerTable,
+      handleSuccess,
+      handleCancel,
+      handleRegister,
+    }
+  }
+})
+</script>
\ No newline at end of file
diff --git a/web/src/views/report/modal/CustomerBillDetailModal.vue b/web/src/views/report/modal/CustomerBillDetailModal.vue
new file mode 100644
index 00000000..f07c46f7
--- /dev/null
+++ b/web/src/views/report/modal/CustomerBillDetailModal.vue
@@ -0,0 +1,114 @@
+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle">
+    <BasicTable @register="registerTable">
+      <template #toolbar>
+        <a-button type="primary" @click=""> 导出</a-button>
+        <a-button @click=""> 打印</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'receiptNumber'">
+          <a @click="openReceipt(record.receiptNumber)"> {{ record.receiptNumber }} </a>
+        </template>
+      </template>
+    </BasicTable>
+    <ViewSaleShipmentsModal @register="handleSaleShipmentsModal" />
+    <ViewSaleRefundModal @register="handleSaleRefundModal" />
+  </BasicModal>
+</template>
+<div>
+</div>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+import {BasicTable, TableAction, useTable} from "@/components/Table";
+import {customerBillDetailColumns, searchCustomerBillDetailSchema} from "@/views/report/report.data";
+import {Tag} from "ant-design-vue";
+import {getCustomerBillDetail} from "@/api/report/report";
+import XEUtils from "xe-utils";
+import {BasicModal, useModal, useModalInner} from "@/components/Modal";
+import ViewSaleShipmentsModal from "@/views/sales/shipments/components/ViewSaleShipmentsModal.vue";
+import ViewSaleRefundModal from "@/views/sales/refund/components/ViewSaleRefundModal.vue";
+
+export default defineComponent({
+  name: 'CustomerBillDetailModal',
+  components: {
+    BasicModal,
+    ViewSaleShipmentsModal,
+    ViewSaleRefundModal, Tag, TableAction, BasicTable},
+  setup() {
+    const getTitle = ref('客户欠款详情');
+    const customerId = ref('');
+    const [handleSaleShipmentsModal, {openModal: openSaleShipmentsModal}] = useModal();
+    const [handleSaleRefundModal, {openModal: openSaleRefundModal}] = useModal();
+    const [registerTable, { reload }] = useTable({
+      api: getCustomerBillDetail,
+      beforeFetch: (data) => {
+        data.customerId = customerId.value;
+      },
+      columns: customerBillDetailColumns,
+      formConfig: {
+        labelWidth: 110,
+        schemas: searchCustomerBillDetailSchema,
+        autoSubmitOnEnter: true,
+      },
+      bordered: true,
+      useSearchForm: true,
+      showTableSetting: true,
+      striped: true,
+      canResize: false,
+      showIndexColumn: true,
+      showSummary: true,
+      summaryFunc: handleSummary,
+    });
+
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+      setModalProps({confirmLoading: false, destroyOnClose: true, width: 1100});
+      customerId.value = data.customerId
+    });
+
+    function handleSummary(tableData: Recordable[]) {
+      const thisReceiptArrears = tableData.reduce((prev, next) => prev + next.thisReceiptArrears, 0);
+      const receivableArrears = tableData.reduce((prev, next) => prev + next.receivableArrears, 0);
+      const receivedArrears = tableData.reduce((prev, next) => prev + next.receivedArrears, 0);
+      return [
+        {
+          _index: '合计',
+          thisReceiptArrears:`￥${XEUtils.commafy(XEUtils.toNumber(thisReceiptArrears), { digits: 2 })}`,
+          receivableArrears:`￥${XEUtils.commafy(XEUtils.toNumber(receivableArrears), { digits: 2 })}`,
+          receivedArrears:`￥${XEUtils.commafy(XEUtils.toNumber(receivedArrears), { digits: 2 })}`,
+        },
+      ];
+    }
+    async function handleSuccess() {
+      reload();
+    }
+
+    async function handleCancel() {
+      reload();
+    }
+
+    function openReceipt(openReceiptNumber: string) {
+      if (openReceiptNumber.startsWith('XSCK')) {
+        openSaleShipmentsModal(true, {
+          receiptNumber: openReceiptNumber,
+        });
+      } else if (openReceiptNumber.startsWith('XSTH')) {
+        openSaleRefundModal(true, {
+          receiptNumber: openReceiptNumber,
+        });
+      }
+    }
+
+    return {
+      getTitle,
+      registerModal,
+      openReceipt,
+      registerTable,
+      handleSuccess,
+      handleCancel,
+      handleSaleRefundModal,
+      handleSaleShipmentsModal,
+    }
+  }
+})
+</script>
\ No newline at end of file