Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5

apps/web-antd/src/api/property/costManagement/paymentReview/index.ts

@@ -0,0 +1,61 @@
+import type { PaymentReviewVO, PaymentReviewForm, PaymentReviewQuery } from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+* 查询缴费审核列表
+* @param params
+* @returns 缴费审核列表
+*/
+export function paymentReviewList(params?: PaymentReviewQuery) {
+  return requestClient.get<PageResult<PaymentReviewVO>>('/property/payFeeAudit/list', { params });
+}
+
+/**
+ * 导出缴费审核列表
+ * @param params
+ * @returns 缴费审核列表
+ */
+export function paymentReviewExport(params?: PaymentReviewQuery) {
+  return commonExport('/property/payFeeAudit/export', params ?? {});
+}
+
+/**
+ * 查询缴费审核详情
+ * @param id id
+ * @returns 缴费审核详情
+ */
+export function paymentReviewInfo(id: ID) {
+  return requestClient.get<PaymentReviewVO>(`/property/payFeeAudit/${id}`);
+}
+
+/**
+ * 新增缴费审核
+ * @param data
+ * @returns void
+ */
+export function paymentReviewAdd(data: PaymentReviewForm) {
+  return requestClient.postWithMsg<void>('/property/payFeeAudit', data);
+}
+
+/**
+ * 更新缴费审核
+ * @param data
+ * @returns void
+ */
+export function paymentReviewUpdate(data: PaymentReviewForm) {
+  return requestClient.putWithMsg<void>('/property/payFeeAudit', data);
+}
+
+/**
+ * 删除缴费审核
+ * @param id id
+ * @returns void
+ */
+export function paymentReviewRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/payFeeAudit/${id}`);
+}

apps/web-antd/src/api/property/costManagement/paymentReview/model.d.ts

@@ -0,0 +1,175 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface PaymentReviewVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 房屋收费id
+   */
+  houseChargeId: string | number;
+
+  /**
+   * 费用项目id
+   */
+  itemId: string | number;
+
+  /**
+   * 缴费开始时间
+   */
+  startTime: string;
+
+  /**
+   * 缴费结束时间
+   */
+  endTime: string;
+
+  /**
+   * 实付金额
+   */
+  receivedAmount: string;
+
+  /**
+   * 应收金额
+   */
+  receivableAmount: number;
+
+  /**
+   * 缴费时间
+
+
+   */
+  payTime: string;
+
+  /**
+   * 审核状态
+   */
+  state: string;
+
+  /**
+   * 备注
+   */
+  remark: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
+}
+
+export interface PaymentReviewForm extends BaseEntity {
+  /**
+   * 主键
+   */
+  id?: string | number;
+
+  /**
+   * 房屋收费id
+   */
+  houseChargeId?: string | number;
+
+  /**
+   * 费用项目id
+   */
+  itemId?: string | number;
+
+  /**
+   * 缴费开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 缴费结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 实付金额
+   */
+  receivedAmount?: string;
+
+  /**
+   * 应收金额
+   */
+  receivableAmount?: number;
+
+  /**
+   * 缴费时间
+
+
+   */
+  payTime?: string;
+
+  /**
+   * 审核状态
+   */
+  state?: string;
+
+  /**
+   * 备注
+   */
+  remark?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+}
+
+export interface PaymentReviewQuery extends PageQuery {
+  /**
+   * 房屋收费id
+   */
+  houseChargeId?: string | number;
+
+  /**
+   * 费用项目id
+   */
+  itemId?: string | number;
+
+  /**
+   * 缴费开始时间
+   */
+  startTime?: string;
+
+  /**
+   * 缴费结束时间
+   */
+  endTime?: string;
+
+  /**
+   * 实付金额
+   */
+  receivedAmount?: string;
+
+  /**
+   * 应收金额
+   */
+  receivableAmount?: number;
+
+  /**
+   * 缴费时间
+
+
+   */
+  payTime?: string;
+
+  /**
+   * 审核状态
+   */
+  state?: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue?: string;
+
+  /**
+    * 日期范围参数
+    */
+  params?: any;
+}

apps/web-antd/src/views/property/costManagement/costItemSetting/costItemSetting-detail.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type {CostItemSettingVO} from '#/api/property/costManagement/costItemSetting/model';
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {costItemSettingInfo} from '#/api/property/costManagement/costItemSetting';
+import {renderDict} from "#/utils/render";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    costItemSettingDetail.value = null;
+  },
+});
+
+const costItemSettingDetail = shallowRef<null | CostItemSettingVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  costItemSettingDetail.value =await costItemSettingInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="费用项设置详情" class="w-[70%]">
+    <Descriptions v-if="costItemSettingDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'140px'}">
+      <DescriptionsItem label="费用编号">
+        {{ costItemSettingDetail.chargeNo }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用类型" v-if="costItemSettingDetail.costType!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.costType,'pro_expense_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="收费项目">
+        {{ costItemSettingDetail.chargeItem }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用标识" v-if="costItemSettingDetail.costMark!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.costMark,'pro_cost_identification')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="付费类型" v-if="costItemSettingDetail.paymentType!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.paymentType,'pro_payment_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="费用周期（月）">
+        {{ costItemSettingDetail.chargeCycle }}
+      </DescriptionsItem>
+      <DescriptionsItem label="单位">
+        {{ costItemSettingDetail.unit }}
+      </DescriptionsItem>
+      <DescriptionsItem label="手机缴费" v-if="costItemSettingDetail.isMobilePay!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.isMobilePay,'pro_mobile_payment')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="进位方式" v-if="costItemSettingDetail.roundingMode!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.roundingMode,'pro_carry_method')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="保留小数" v-if="costItemSettingDetail.currencyDecimals!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.currencyDecimals,'pro_keep_decimals')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="状态" v-if="costItemSettingDetail.state!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.state,'wy_state')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计算公式" v-if="costItemSettingDetail.formula!=null">
+        <component
+          :is="renderDict(costItemSettingDetail.formula,'pro_calculation_formula')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计费单价">
+        {{ costItemSettingDetail.unitPrice }}
+      </DescriptionsItem>
+      <DescriptionsItem label="附加费用">
+        {{ costItemSettingDetail.surcharge }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>

apps/web-antd/src/views/property/costManagement/costItemSetting/data.ts

@@ -1,13 +1,12 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-
 import { getDictOptions } from '#/utils/dict';
 import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Input',
-    fieldName: 'chargeItem',
+    fieldName: 'chargeNo',
     label: '费用编号',
   },
   {
@@ -28,20 +27,17 @@ export const querySchema: FormSchemaGetter = () => [
   },
 ];
 
-// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
-// export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
     title: '费用编号',
-    field: 'chargeItem',
+    field: 'chargeNo',
   },
   {
     title: '费用类型',
     field: 'costType',
     slots: {
       default: ({ row }) => {
-        // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
         return renderDict(row.costType, 'pro_expense_type');
       },
     },
@@ -55,8 +51,7 @@ export const columns: VxeGridProps['columns'] = [
     field: 'costMark',
     slots: {
       default: ({ row }) => {
-        // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
-        return renderDict(row.costType, 'pro_cost_identification');
+        return renderDict(row.costMark, 'pro_cost_identification');
       },
     },
   },
@@ -65,8 +60,7 @@ export const columns: VxeGridProps['columns'] = [
     field: 'paymentType',
     slots: {
       default: ({ row }) => {
-        // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
-        return renderDict(row.costType, 'pro_payment_type');
+        return renderDict(row.paymentType, 'pro_payment_type');
       },
     },
   },
@@ -77,6 +71,11 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '计算公式',
     field: 'formula',
+    slots: {
+      default: ({ row }) => {
+        return renderDict(row.formula, 'pro_calculation_formula');
+      },
+    },
   },
   {
     title: '计费单价',
@@ -86,6 +85,12 @@ export const columns: VxeGridProps['columns'] = [
     title: '附加费用',
     field: 'surcharge',
   },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {default: 'state'},
+    width: 100,
+  },
   {
     field: 'action',
     fixed: 'right',
@@ -110,7 +115,6 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'costType',
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_expense_type'),
     },
     rules: 'selectRequired',
@@ -126,7 +130,6 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'costMark',
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_cost_identification'),
     },
     rules: 'required',
@@ -144,13 +147,22 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '费用周期（月）',
     fieldName: 'chargeCycle',
     component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '单位',
+    fieldName: 'unit',
+    component: 'Input',
+    rules: 'required',
+    componentProps: {
+      placeholder: '请输入（如：元）',
+    },
   },
   {
     label: '手机缴费',
     fieldName: 'isMobilePay',
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_mobile_payment'),
     },
     rules: 'selectRequired',
@@ -159,7 +171,6 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '进位方式',
     fieldName: 'roundingMode',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_carry_method'),
     },
     component: 'Select',
@@ -170,22 +181,24 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'currencyDecimals',
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_keep_decimals'),
     },
     rules: 'selectRequired',
   },
   {
-    label: '启用状态',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_state'),
+    },
     fieldName: 'state',
-    component: 'Input',
+    label: '状态',
+    rules: 'selectRequired',
   },
   {
     label: '计算公式',
     fieldName: 'formula',
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.PRO_EXPENSE_TYPE 便于维护
       options: getDictOptions('pro_calculation_formula'),
     },
     rules: 'selectRequired',
@@ -195,10 +208,12 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '计费单价',
     fieldName: 'unitPrice',
     component: 'Input',
+    rules: 'required',
   },
   {
     label: '附加费',
     fieldName: 'surcharge',
     component: 'Input',
+    rules: 'required',
   },
 ];

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

@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
 import { getVxePopupContainer } from '@vben/utils';
-
+import {useAccess} from "@vben/access";
 import { Modal, Popconfirm, Space } from 'ant-design-vue';
-
 import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
   type VxeGridProps
 } from '#/adapter/vxe-table';
-
 import {
   costItemSettingList,
-  costItemSettingRemove,
+  costItemSettingRemove, costItemSettingUpdate,
 } from '#/api/property/costManagement/costItemSetting';
 import type { CostItemSettingForm } from '#/api/property/costManagement/costItemSetting/model';
-
 import costItemSettingModal from './costItemSetting-modal.vue';
+import costItemSettingDetal from './costItemSetting-detail.vue';
 import { columns, querySchema } from './data';
+import {TableSwitch} from "#/components/table";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -77,6 +76,15 @@ function handleAdd() {
   modalApi.open();
 }
 
+const [costItemSettingDetalModal, costItemSettingDetalApi] = useVbenModal({
+  connectedComponent: costItemSettingDetal,
+});
+
+async function handleInfo(row: Required<CostItemSettingForm>) {
+  costItemSettingDetalApi.setData({ id: row.id });
+  costItemSettingDetalApi.open();
+}
+
 async function handleEdit(row: Required<CostItemSettingForm>) {
   modalApi.setData({ id: row.id });
   modalApi.open();
@@ -100,6 +108,7 @@ function handleMultiDelete() {
     },
   });
 }
+const { hasAccessByCodes } = useAccess();
 </script>
 
 <template>
@@ -124,8 +133,24 @@ function handleMultiDelete() {
           </a-button>
         </Space>
       </template>
+<!--      冒号数字类型，没冒号字符串-->
+      <template #state="{ row }">
+        <TableSwitch
+          checkedValue="1"
+          unCheckedValue="0"
+          v-model:value="row.state"
+          :api="() => costItemSettingUpdate(row)"
+          :disabled=" !hasAccessByCodes(['property:unit:edit'])"
+          @reload="() => tableApi.query()"
+        />
+      </template>
       <template #action="{ row }">
         <Space>
+          <ghost-button
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
           <ghost-button
             v-access:code="['property:costItemSetting:edit']"
             @click.stop="handleEdit(row)"
@@ -150,5 +175,6 @@ function handleMultiDelete() {
       </template>
     </BasicTable>
     <CostItemSettingModal @reload="tableApi.query()" />
+    <costItemSettingDetalModal/>
   </Page>
 </template>

apps/web-antd/src/views/property/costManagement/paymentReview/data.ts

@@ -0,0 +1,172 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getDictOptions } from '#/utils/dict';
+import { renderDict } from '#/utils/render';
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'roomNumber',
+    label: '房屋',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.COST_REVIEW_STATUS 便于维护
+      options: getDictOptions('pro_expense_type'),
+    },
+    fieldName: 'costType',
+    label: '费用类型',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.COST_REVIEW_STATUS 便于维护
+      options: getDictOptions('cost_review_status'),
+    },
+    fieldName: 'state',
+    label: '审核状态',
+  },
+];
+
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '房屋',
+    field: 'roomNumber',
+  },
+  {
+    title: '费用项目',
+    field: 'chargeItem',
+  },
+  {
+    title: '付费周期',
+    field: 'chargeCycle',
+  },
+  {
+    title: '缴费开始时间',
+    field: 'startTime',
+  },
+  {
+    title: '缴费结束时间',
+    field: 'endTime',
+  },
+  {
+    title: '实付金额',
+    field: 'receivedAmount',
+  },
+  {
+    title: '应收金额',
+    field: 'receivableAmount',
+  },
+  {
+    title: '缴费时间',
+    field: 'payTime',
+  },
+  {
+    title: '审核状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.COST_REVIEW_STATUS 便于维护
+        return renderDict(row.state, 'cost_review_status');
+      },
+    },
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '房屋收费id',
+    fieldName: 'houseChargeId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '费用项目id',
+    fieldName: 'itemId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '缴费开始时间',
+    fieldName: 'startTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '缴费结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '实付金额',
+    fieldName: 'receivedAmount',
+    component: 'Input',
+  },
+  {
+    label: '应收金额',
+    fieldName: 'receivableAmount',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '缴费时间',
+    fieldName: 'payTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '审核状态',
+    fieldName: 'state',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.COST_REVIEW_STATUS 便于维护
+      options: getDictOptions('cost_review_status'),
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];

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>

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type {PaymentReviewVO} from '#/api/property/costManagement/paymentReview/model';
+import {shallowRef} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {Descriptions, DescriptionsItem} from 'ant-design-vue';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {paymentReviewInfo} from '#/api/property/costManagement/paymentReview';
+import {renderDict} from "#/utils/render";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    paymentReviewDetail.value = null;
+  },
+});
+
+const paymentReviewDetail = shallowRef<null | PaymentReviewVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  paymentReviewDetail.value =await paymentReviewInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="缴费审核详情" class="w-[70%]">
+    <Descriptions v-if="paymentReviewDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'120px'}">
+      <DescriptionsItem label="房屋收费">
+        {{ paymentReviewDetail.roomNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用项目">
+        {{ paymentReviewDetail.chargeItem }}
+      </DescriptionsItem>
+      <DescriptionsItem label="付费周期">
+        {{ paymentReviewDetail.chargeCycle }}
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费开始时间">
+        {{ paymentReviewDetail.startTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费结束时间">
+        {{ paymentReviewDetail.endTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="实付金额">
+        {{ paymentReviewDetail.receivedAmount }}
+      </DescriptionsItem>
+      <DescriptionsItem label="应收金额">
+        {{ paymentReviewDetail.receivableAmount }}
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费时间">
+        {{ paymentReviewDetail.payTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="审核状态" v-if="paymentReviewDetail.state!=null">
+        <component
+          :is="renderDict(paymentReviewDetail.state,'cost_review_status')"
+        />
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>