费用管理

apps/web-antd/src/views/property/costManagement/paymentReview/index.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+import { Popconfirm, Space } from 'ant-design-vue';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+  paymentReviewRemove,
+} from '#/api/property/costManagement/paymentReview';
+import type { PaymentReviewForm } from '#/api/property/costManagement/paymentReview/model';
+import paymentReviewDetail from './paymentReview-detail.vue';
+import { columns, querySchema } from './data';
+
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: querySchema(),
+  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+};
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
+  columns,
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      query: async ({ page }, formValues = {}) => {
+        return await paymentReviewList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-paymentReview-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [paymentReviewDetailModal, paymentReviewDetailApi] = useVbenModal({
+  connectedComponent: paymentReviewDetail,
+});
+
+async function handleInfo(row: Required<PaymentReviewForm>) {
+  paymentReviewDetailApi.setData({ id: row.id });
+  paymentReviewDetailApi.open();
+}
+
+async function handleDelete(row: Required<PaymentReviewForm>) {
+  await paymentReviewRemove(row.id);
+  await tableApi.query();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="缴费审核列表">
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认审核？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              @click.stop=""
+            >
+              {{ '审核' }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <PaymentReviewModal @reload="tableApi.query()" />
+    <paymentReviewDetailModal/>
+  </Page>
+</template>