fix: 代支付手续费列表

apps/web-antd/src/views/finance/charge-cash-pay-record/api/index.ts

@@ -0,0 +1,10 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'charge-cash-pay-record/';
+/**
+ * 代支付手续费列表
+ * @param data
+ */
+export async function getChargeCashPayRecordListApi(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}

apps/web-antd/src/views/finance/charge-cash-pay-record/config/search.ts

@@ -0,0 +1,29 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'RangePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD', // 确保格式与你需要的一致
+      },
+      defaultValue: [dayjs().startOf('month'), dayjs()],
+      fieldName: 'search_time',
+      label: '时间范围',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  // submitOnChange: true,
+  // submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+};

apps/web-antd/src/views/finance/charge-cash-pay-record/config/table.ts

@@ -0,0 +1,81 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getChargeCashPayRecordListApi } from '../api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columns: [
+    // { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID' },
+    { field: 'order_no', title: '挂号订单号' },
+    { field: 'store.name', title: '诊所' },
+    { field: 'charge_cash', title: '手续费' },
+    { field: 'status', title: '状态', slots: { default: 'status' } },
+    { field: 'created_at', title: '记录时间' },
+    {
+      type: 'html',
+      title: '操作',
+      align: 'right',
+      slots: { default: 'action' },
+      width: 200,
+    },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  // scrollY: {
+  //   enabled: true,
+  //   gt: 0,
+  // },
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getChargeCashPayRecordListApi({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  expandConfig: {
+    // expandAll: true,
+  },
+  showOverflow: false,
+};

apps/web-antd/src/views/finance/charge-cash-pay-record/index.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Button, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+import DetailModal from '#/views/business/order/product-order/components/detail.vue';
+import { getChargeCashPayRecordListApi } from '#/views/finance/charge-cash-pay-record/api';
+import StatisticsReconciliation from "#/views/finance/reconciliation/components/statistics.vue";
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const statistics = ref();
+const initTableAjax = () => {
+  gridApi.setGridOptions({
+    proxyConfig: {
+      ajax: {
+        // 请求后端接口方法
+        query: async ({ page }, formValues) => {
+          return await getChargeCashPayRecordListApi({
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          }).then((res) => {
+            statistics.value = null;
+            statistics.value = [
+              {
+                title: '总销售金额',
+                value: res.count,
+                icon: 'mdi:cash-multiple',
+                color: 'text-blue-600',
+                unit: '¥',
+              },
+            ];
+            return res.list;
+          });
+        },
+      },
+    },
+  });
+};
+
+initTableAjax();
+</script>
+
+<template>
+  <Page auto-content-height title="订单管理">
+    <StatisticsReconciliation
+      v-if="statistics"
+      :statistics="statistics"
+    />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[]"
+          :drop-down-actions="[]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #status="{ row }">
+        <div class="mt-3">
+          <Tag v-if="row.status === 1" color="purple">已记录</Tag>
+          <Tag v-else-if="row.status === 2" color="green">已支付</Tag>
+          <Tag v-else-if="row.status === 3" color="orange">已取消</Tag>
+        </div>
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+<style scoped lang="scss">
+.custom-list {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.custom-list-item {
+  background-color: rgba(64, 158, 255, 0.04);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: rgba(64, 158, 255, 0.1);
+  }
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: #409eff;
+    border-radius: 50%;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+}
+</style>