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

2025-07-19 16:48:23 +08:00
parent a7a52d9313 5be03ab8c5
commit ec50545e4b
69 changed files with 6131 additions and 342 deletions
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/attendanceGroupSettings/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/attendanceGroupSettings/index.vue
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/festivalAndHoliday/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/festivalAndHoliday/index.vue
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  节假日
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/shiftSetting/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceSettings/shiftSetting/index.vue
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  班次设置
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceStatistics/CheckInRecord/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceStatistics/CheckInRecord/index.vue
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  打卡记录
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/attendanceStatistics/dailyStatistics/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/attendanceStatistics/dailyStatistics/index.vue
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  每日统计
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/holidayType/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/holidayType/index.vue
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  假期类型
-</template>
-
-<style scoped lang="scss">
-
-</style>
--- a/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/data.ts
+++ b/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/data.ts
@@ -0,0 +1,181 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '班次名称',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'startTime',
+    label: '考勤开始时间',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'endTime',
+    label: '考勤结束时间',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+    },
+    fieldName: 'status',
+    label: '状态',
+  },
+  {
+    component: 'Input',
+    fieldName: 'isRest',
+    label: '是否休息',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'restStartTime',
+    label: '休息开始时间',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'restEndTime',
+    label: '休息结束时间',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '主键id',
+    field: 'id',
+  },
+  {
+    title: '班次名称',
+    field: 'name',
+  },
+  {
+    title: '考勤开始时间',
+    field: 'startTime',
+  },
+  {
+    title: '考勤结束时间',
+    field: 'endTime',
+  },
+  {
+    title: '状态',
+    field: 'status',
+  },
+  {
+    title: '是否休息',
+    field: 'isRest',
+  },
+  {
+    title: '休息开始时间',
+    field: 'restStartTime',
+  },
+  {
+    title: '休息结束时间',
+    field: 'restEndTime',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键id',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '班次名称',
+    fieldName: 'name',
+    component: 'Input',
+  },
+  {
+    label: '考勤开始时间',
+    fieldName: 'startTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '考勤结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '状态',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+    },
+  },
+  {
+    label: '是否休息',
+    fieldName: 'isRest',
+    component: 'Input',
+  },
+  {
+    label: '休息开始时间',
+    fieldName: 'restStartTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '休息结束时间',
+    fieldName: 'restEndTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+];
--- a/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/index.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+
+import {
+  shiftExport,
+  shiftList,
+  shiftRemove,
+} from '#/api/Property/attendanceManagement/shiftSetting';
+import type { ShiftForm } from '#/api/Property/attendanceManagement/shiftSetting/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import shiftModal from './shift-modal.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',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+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 shiftList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'Property-shift-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ShiftModal, modalApi] = useVbenModal({
+  connectedComponent: shiftModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<ShiftForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<ShiftForm>) {
+  await shiftRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<ShiftForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await shiftRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(shiftExport, '班次表数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="班次表列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['Property:shift:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['Property:shift:remove']"
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['Property:shift:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['Property:shift:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['Property:shift:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <ShiftModal @reload="tableApi.query()" />
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/shift-modal.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/shiftSetting/shift-modal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { shiftAdd, shiftInfo, shiftUpdate } from '#/api/Property/attendanceManagement/shiftSetting';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await shiftInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? shiftUpdate(data) : shiftAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-add-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-add-modal.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { addModalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 140,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: addModalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await carChargeAdd(data);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal title="创建收费">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-detail-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-detail-modal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await carChargeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? carChargeUpdate(data) : carChargeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-pay-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/carCharge-pay-modal.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { payModalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-1',
+    // 默认label宽度 px
+    labelWidth: 1400,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: payModalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await carChargeAdd(data);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal title="缴费">
+    <BasicForm />
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/carCharge/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/data.ts
@@ -0,0 +1,350 @@
+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: 'carNumber',
+    label: '车牌号',
+  },
+  {
+    component: 'Input',
+    fieldName: 'personId',
+    label: '业主',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+      options: getDictOptions('wy_cszt'),
+    },
+    fieldName: 'state',
+    label: '状态',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '序号',
+    field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
+  },
+  {
+    title: '车牌号',
+    field: 'carNumber',
+  },
+  {
+    title: '车位',
+    field: 'location',
+  },
+  {
+    title: '业主',
+    field: 'personId',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+        return renderDict(row.state, 'wy_cszt');
+      },
+    },
+  },
+  {
+    title: '收费项目',
+    field: 'costItemsId',
+  },
+  {
+    title: '计费开始时间',
+    field: 'starTime',
+  },
+  {
+    title: '计费结束时间',
+    field: 'endTime',
+  },
+  {
+    title: '说明',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+//详情
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '车牌号',
+    fieldName: 'carNumber',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '业主',
+    fieldName: 'personId',
+    component: 'Input',
+  },
+  {
+    label: '楼层',
+    fieldName: 'floorId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '车位',
+    fieldName: 'location',
+    component: 'Input',
+  },
+  {
+    label: '状态',
+    fieldName: 'state',
+    component: 'Select',
+    componentProps: {
+      // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+      options: getDictOptions('wy_cszt'),
+    },
+  },
+  {
+    label: '收费项目',
+    fieldName: 'costItemsId',
+    component: 'Input',
+  },
+  {
+    label: '计费开始时间',
+    fieldName: 'starTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '计费结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '说明',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];
+//创建
+export const addModalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '车牌号',
+    fieldName: 'carNumber',
+    component: 'Input',
+    rules: 'required',
+  },
+  // {
+  //   label: '费用类型',//一个费用下有对各费用项目
+  //   fieldName: 'personId',
+  //   component: 'Input',
+  // },
+  {
+    label: '收费项目',//一个费用收费项目对应一个费用类型
+    fieldName: 'costItemsId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '计费开始时间',
+    fieldName: 'starTime',
+    component: 'DatePicker',
+    rules: 'required',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '计费结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    rules:'required',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '说明',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+];
+//缴费
+export const payModalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+    {
+    label: '车牌号',
+    fieldName: 'carNumber',
+    component: 'Input',
+    rules: 'required',
+  },
+  // {
+  //   label: '费用类型',//一个费用下有对各费用项目
+  //   fieldName: 'personId',
+  //   component: 'Input',
+  // },
+  {
+    label: '收费项目',//一个费用收费项目对应一个费用类型
+    fieldName: 'costItemsId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '计费开始时间',
+    fieldName: 'starTime',
+    component: 'DatePicker',
+    rules: 'required',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '计费结束时间',
+    fieldName: 'endTime',
+    component: 'DatePicker',
+    rules:'required',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '说明',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+  {
+    label: '支付方式',
+    fieldName: 'carNumber',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '缴费周期',
+    fieldName: 'personId',
+    component: 'Input',
+  },
+  {
+    label: '实收金额',
+    fieldName: 'costItemsId',
+    component: 'Input',
+  },
+  {
+    label: '自定义周期',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+];
+export const detailColumns: VxeGridProps['columns'] = [
+  {
+    title: '序号',
+    field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
+  },
+  {
+    title: '费用项目',
+    field: 'carNumber',
+  },
+  {
+    title: '费用标识',
+    field: 'location',
+  },
+  {
+    title: '应收金额',
+    field: 'personId',
+  },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => {
+        // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+        return renderDict(row.state, 'wy_cszt');
+      },
+    },
+  },
+  {
+    title: '建帐时间',
+    field: 'starTime',
+  },
+  {
+    title: '应收时间',
+    field: 'endTime',
+  },
+  {
+    title: '说明',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
--- a/apps/web-antd/src/views/property/costManagement/carCharge/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/index.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+
+import {
+  carChargeExport,
+  carChargeList,
+  carChargeRemove,
+} from '#/api/property/carCharge';
+import type { CarChargeForm } from '#/api/property/carCharge/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import carChargeDetailModal from './carCharge-detail-modal.vue';// 详情弹窗
+import carChargePayModal from './carCharge-pay-modal.vue';//缴费弹窗
+import carCharfeAddModal from './carCharge-add-modal.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',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+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 carChargeList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-carCharge-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+// 详情弹窗
+const [CarChargeDetailModal, modalApi] = useVbenModal({
+  connectedComponent: carChargeDetailModal,
+});
+// 创建费用弹窗
+const [CarCharfeAddModal, addModalApi] = useVbenModal({
+  connectedComponent: carCharfeAddModal,
+});
+// 缴费弹窗
+const [CarChargePayModal, payModalApi] = useVbenModal({
+  connectedComponent: carChargePayModal,
+});
+//打开创建费用弹窗
+function handleAdd() {
+  addModalApi.setData({});
+  addModalApi.open();
+}
+
+//打开详情
+async function handleEdit(row: Required<CarChargeForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+//打开缴费
+async function handleSave(row: Required<CarChargeForm>) {
+  payModalApi.setData({ id: row.id });
+  payModalApi.open();
+}
+
+async function handleDelete(row: Required<CarChargeForm>) {
+  await carChargeRemove(row.id);
+  await tableApi.query();
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="费用-车辆收费列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            type="primary"
+            v-access:code="['property:carCharge:add']"
+            @click="handleAdd"
+          >
+            创建费用
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:carCharge:edit']"
+            @click.stop="handleSave(row)"
+          >
+            缴费
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:carCharge:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+            <ghost-button
+              v-access:code="['property:carCharge:edit']"
+              @click.stop="handleEdit(row)"
+            >
+              详情
+            </ghost-button>
+        </Space>
+      </template>
+    </BasicTable>
+    <!-- 详情弹窗 -->
+    <CarChargeDetailModal @reload="tableApi.query()" />
+    <CarCharfeAddModal @reload="tableApi.query()" />
+    <CarChargePayModal @reload="tableApi.query()" />
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/costItemSetting/costItemSetting-detail.vue
+++ b/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>
--- a/apps/web-antd/src/views/property/costManagement/costItemSetting/data.ts
+++ b/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',
  },
 ];
--- a/apps/web-antd/src/views/property/costManagement/costItemSetting/index.vue
+++ b/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>
--- a/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { costMeterWaterAdd, costMeterWaterInfo, costMeterWaterUpdate } from '#/api/property/costMeterWater';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await costMeterWaterInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
@@ -0,0 +1,183 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'itemId',
+    label: '费用类型id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'meterTypeId',
+    label: '抄表类型id',
+  },
+  {
+    component: 'Input',
+    fieldName: 'objName',
+    label: '对象名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'curDegrees',
+    label: '本期度数',
+  },
+  {
+    component: 'Input',
+    fieldName: 'preDegrees',
+    label: '上期度数',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'preReadingTime',
+    label: '上期读表时间',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'curReadingTime',
+    label: '本期读表时间',
+  },
+  {
+    component: 'Input',
+    fieldName: 'searchValue',
+    label: '搜索值',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '主键',
+    field: 'id',
+  },
+  {
+    title: '费用类型id',
+    field: 'itemId',
+  },
+  {
+    title: '抄表类型id',
+    field: 'meterTypeId',
+  },
+  {
+    title: '对象名称',
+    field: 'objName',
+  },
+  {
+    title: '本期度数',
+    field: 'curDegrees',
+  },
+  {
+    title: '上期度数',
+    field: 'preDegrees',
+  },
+  {
+    title: '上期读表时间',
+    field: 'preReadingTime',
+  },
+  {
+    title: '本期读表时间',
+    field: 'curReadingTime',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    title: '搜索值',
+    field: 'searchValue',
+  },
+  {
+    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: 'itemId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '抄表类型id',
+    fieldName: 'meterTypeId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '对象名称',
+    fieldName: 'objName',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '本期度数',
+    fieldName: 'curDegrees',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '上期度数',
+    fieldName: 'preDegrees',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '上期读表时间',
+    fieldName: 'preReadingTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '本期读表时间',
+    fieldName: 'curReadingTime',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    rules: 'required',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+  {
+    label: '搜索值',
+    fieldName: 'searchValue',
+    component: 'Input',
+  },
+];
--- a/apps/web-antd/src/views/property/costManagement/costMeterWater/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/costMeterWater/index.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {   
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps 
+} from '#/adapter/vxe-table';
+
+import {
+  costMeterWaterExport,
+  costMeterWaterList,
+  costMeterWaterRemove,
+} from '#/api/property/costMeterWater';
+import type { CostMeterWaterForm } from '#/api/property/costMeterWater/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import costMeterWaterModal from './costMeterWater-modal.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',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+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 costMeterWaterList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-costMeterWater-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [CostMeterWaterModal, modalApi] = useVbenModal({
+  connectedComponent: costMeterWaterModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<CostMeterWaterForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<CostMeterWaterForm>) {
+  await costMeterWaterRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<CostMeterWaterForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await costMeterWaterRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(costMeterWaterExport, '费用-水电抄数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="费用-水电抄列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:costMeterWater:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary" 
+            v-access:code="['property:costMeterWater:remove']" 
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:costMeterWater:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:costMeterWater:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:costMeterWater:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <CostMeterWaterModal @reload="tableApi.query()" />
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
@@ -0,0 +1,216 @@
+import type {FormSchemaGetter} from '#/adapter/form';
+import type {VxeGridProps} from '#/adapter/vxe-table';
+import {getDictOptions} from "#/utils/dict";
+import {renderDict} from "#/utils/render";
+import {costItemSettingList} from "#/api/property/costManagement/costItemSetting";
+import { h } from 'vue';
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'ApiSelect',
+    componentProps: {
+      api:async ()=>{
+       return  (await costItemSettingList({pageSize: 1000, pageNum: 1}))?.rows
+      },
+      afterFetch: (data: { chargeItem: string; id: string }[]) => {
+        return data.map((item: any) => ({
+          label: item.chargeItem,
+          value: item.id,
+        }));
+      },
+    },
+    fieldName: 'costItemsId',
+    label: '收费项目',
+  },
+  {
+    component: 'Select',
+    fieldName: 'chargeStatus',
+    label: '缴费状态',
+    componentProps: {
+      options: getDictOptions('wy_fyshzt')
+    },
+  },
+];
+export const columns: VxeGridProps['columns'] = [
+  {type: 'checkbox', width: 60},
+  {
+    title: '房屋',
+    field: 'roomId',
+    minWidth: 150,
+  },
+  {
+    title: '收费项目',
+    field: 'costItemsId',
+    width: 150,
+  },
+  {
+    title: '应收金额',
+    field: 'amountReceivable',
+    width: 150,
+  },
+  {
+    title: '计费开始时间',
+    field: 'startTime',
+    width: 150,
+  },
+  {
+    title: '计费结束时间',
+    field: 'endTime',
+    width: 150,
+  },
+  {
+    title: '缴费状态',
+    field: 'chargeStatus',
+    width: 150,
+    slots: {
+      default: ({row}) => {
+        return renderDict(row.chargeStatus, 'wy_fyshzt')
+      }
+    }
+  },
+  // {
+  //   title: '状态',
+  //   field: 'state',
+  //   width: 150,
+  //   slots: {
+  //     default: ({row}) => {
+  //       return renderDict(row.state, 'wy_fysfzt')
+  //     }
+  //   }
+  // },
+  {
+    title: '说明',
+    field: 'remark',
+    width: 150,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: {default: 'action'},
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '房屋',
+    fieldName: 'roomId',
+    component: 'TreeSelect',
+    componentProps: {
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '业主',
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    componentProps: {
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '费用类型',
+    fieldName: 'costType',
+    component: 'Select',
+    componentProps: {
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '收费项目',
+    fieldName: 'costItemsId',
+    component: 'ApiSelect',
+    componentProps: {},
+    rules: 'selectRequired',
+  },
+  {
+    label: '应收金额',
+    fieldName: 'amountReceivable',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '计费时间',
+    fieldName: 'chargeTime',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '说明',
+    fieldName: 'remark',
+    component: 'Textarea',
+    formItemClass: 'col-span-2',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+];
+
+export const modalSchemaUpdate: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '支付方式',
+    fieldName: 'payType',
+    component: 'Select',
+    componentProps: {
+     options:getDictOptions('wy_zffs')
+    },
+    rules: 'selectRequired',
+  },
+  {
+    label: '缴费周期',
+    fieldName: 'chargeCycle',
+    component: 'InputNumber',
+    componentProps: {
+      min:1,
+      precision:0,
+      placeholder:'请输入缴费周期（月）'
+    },
+    suffix: () => h('span', { style: {fontSize: '0.875rem',fontWeight:500,} }, '月'),
+    rules: 'selectRequired',
+  },
+]
+export const modalSchemaRefund: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '退费原因',
+    fieldName: 'reason',
+    component: 'Textarea',
+    formItemClass: 'col-span-2'
+  },
+]
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-detail.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import {ref, 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 {renderDict} from "#/utils/render";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+import {houseChargeInfo} from "#/api/property/costManagement/houseCharge";
+import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
+import type {RoomVO} from "#/api/property/room/model";
+import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
+
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    houseChargeDetail.value = null;
+  },
+});
+
+const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
+const room = ref<RoomVO>();
+const costItem = ref<CostItemSettingVO>();
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  houseChargeDetail.value = await houseChargeInfo(id);
+  if (houseChargeDetail.value) {
+    room.value = houseChargeDetail.value.roomVo
+    costItem.value = houseChargeDetail.value.costItemsVo
+  }
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="房屋收费详情" class="w-[70%]">
+    <Descriptions v-if="houseChargeDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="费用编号">
+        {{ costItem?.id }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用项目">
+        {{ costItem?.chargeItem }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用类型">
+        <component v-if="costItem"
+                   :is="renderDict(costItem.costType,'pro_expense_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计费时间">
+        {{ houseChargeDetail.startTime + ' 至 ' + houseChargeDetail.endTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间">
+        {{ room?.roomNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间面积">
+        {{ `建筑面积：${room?.area} 套内面积：${room?.insideInArea}` }}
+      </DescriptionsItem>
+      <DescriptionsItem label="单价">
+        {{ costItem?.unitPrice }}
+      </DescriptionsItem>
+      <DescriptionsItem label="附加费">
+        {{ costItem?.surcharge }}
+      </DescriptionsItem>
+      <DescriptionsItem label="应收金额">
+        <div v-if="houseChargeDetail.amountReceivable">
+          <span style="font-size: 16px;font-weight: 600;color: red;margin-right: 10px">
+            ￥ {{ houseChargeDetail.amountReceivable }}
+          </span>
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费状态" v-if="houseChargeDetail.chargeStatus">
+        <component
+          :is="renderDict(houseChargeDetail.chargeStatus,'wy_fyshzt')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="支付方式" v-if="houseChargeDetail.payType">
+        <component
+            :is="renderDict(houseChargeDetail.payType,'wy_zffs')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费周期" v-if="houseChargeDetail.chargeCycle">
+        {{ houseChargeDetail.chargeCycle }}月
+      </DescriptionsItem>
+      <DescriptionsItem label="说明" :span="2">
+        {{ houseChargeDetail.remark }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/house-charge-refund.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import {ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+import {cloneDeep} from '@vben/utils';
+
+import {useVbenForm} from '#/adapter/form';
+import {
+  houseChargeAdd,
+  houseChargeInfo,
+  houseChargeUpdate
+} from '#/api/property/costManagement/houseCharge';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
+
+import {modalSchemaRefund, modalSchemaUpdate} from './data';
+import {renderDict} from "#/utils/render";
+import {Descriptions, DescriptionsItem, Divider} from "ant-design-vue";
+import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
+import type {RoomVO} from "#/api/property/room/model";
+import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const record = ref<HouseChargeVO>();
+const room = ref<RoomVO>();
+const costItem = ref<CostItemSettingVO>();
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchemaRefund(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const {id} = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    record.value = await houseChargeInfo(id);
+    if (record.value) {
+      room.value = record.value.roomVo
+      costItem.value = record.value.costItemsVo
+    }
+    await formApi.setValues(record.value);
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    record.value.reason=data.reason
+    record.value.chargeStatus = '5'
+    await houseChargeUpdate(record.value) ;
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+</script>
+
+<template>
+  <BasicModal title="缴费">
+    <Descriptions v-if="record" size="small" :column="2"
+                  :labelStyle="{width:'80px'}">
+      <DescriptionsItem label="费用编号">
+        {{ costItem?.id }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用项目">
+        {{ costItem?.chargeItem }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用类型">
+        <component
+            v-if="costItem"
+          :is="renderDict(costItem?.costType,'pro_expense_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计费起始">
+        {{ record.startTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间">
+        {{ room.roomNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="面积(㎡)">
+        {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
+      </DescriptionsItem>
+      <DescriptionsItem label="单价">
+        {{ costItem?.unitPrice }}
+      </DescriptionsItem>
+      <DescriptionsItem label="附加费">
+        {{ costItem?.surcharge }}
+      </DescriptionsItem>
+      <DescriptionsItem label="退费金额" :span="2">
+        <span style="font-size: 16px;font-weight: 600;color: red" v-if="record.amountReceivable">
+         ￥ {{ record.amountReceivable }}
+        </span>
+      </DescriptionsItem>
+    </Descriptions>
+    <Divider/>
+    <BasicForm/>
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import {computed, ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+import {$t} from '@vben/locales';
+import {cloneDeep, handleNode} from '@vben/utils';
+
+import {useVbenForm} from '#/adapter/form';
+import {
+  houseChargeAdd,
+  houseChargeInfo,
+  houseChargeUpdate
+} from '#/api/property/costManagement/houseCharge';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
+
+import {modalSchema} from './data';
+import {communityTree} from "#/api/property/community";
+import {costItemSettingList} from "#/api/property/costManagement/costItemSetting";
+import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
+import {getDictOptions} from "#/utils/dict";
+import {personList} from "#/api/property/resident/person";
+import {renderDictValue} from "#/utils/render";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const costItemOptions = ref<CostItemSettingVO[]>([]);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    await initRoomOptions()
+    await queryCostItemOptions()
+    await initCostTypeOptions()
+    await queryPersonData()
+    const {id} = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await houseChargeInfo(id);
+      record.chargeTime = [record.startTime, record.endTime]
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    if (data.chargeTime && data.chargeTime.length) {
+      data.startTime = data.chargeTime[0]
+      data.endTime = data.chargeTime[1]
+    }
+    await (isUpdate.value ? houseChargeUpdate(data) : houseChargeAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+/**
+ * 房间数据
+ */
+async function initRoomOptions() {
+  const roomList = await communityTree(5);
+  const splitStr = '/';
+  handleNode(roomList, 'label', splitStr, function (node: any) {
+    if (node.level != 5) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        placeholder: '请选择房间',
+        showSearch: true,
+        treeData: roomList,
+        treeDefaultExpandAll: true,
+        treeLine: {showLeafIcon: false},
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'roomId',
+    },
+  ]);
+}
+
+/**
+ * 查询费用项设置
+ */
+async function queryCostItemOptions(costType:string) {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+    costType
+  }
+  const res = await costItemSettingList(params)
+  costItemOptions.value = res.rows
+  formApi.updateSchema([{
+    componentProps: {
+      options: costItemOptions.value,
+      fieldNames: {label: 'chargeItem', value: 'id'},
+      showSearch: true,
+      optionFilterProp: 'chargeItem',
+      onChange: async (value: string) => {
+        if (value) {
+         const costItem = costItemOptions.value.find(item => item.id == value)
+          if(costItem){
+            await formApi.setFieldValue('remark', `单价：${costItem.unitPrice} 附加费：${costItem.surcharge}`);
+          }
+        }
+      }
+    },
+    fieldName: 'costItemsId'
+  }])
+}
+
+/**
+ * 初始化费用类型
+ */
+async function initCostTypeOptions(){
+  formApi.updateSchema([{
+    componentProps: {
+      options: getDictOptions('pro_expense_type'),
+      onChange: async (value: string) => {
+        if (value) {
+          await queryCostItemOptions(value)
+          await formApi.setFieldValue('costItemsId', null)
+        }
+      }
+    },
+    fieldName: 'costType'
+  }])
+}
+
+async function queryPersonData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  }
+  const res = await personList(params);
+  const options = res.rows.map((user) => ({
+    label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex')
+      + '-' + user.phone + '-' + user.unitName,
+    value: user.id,
+  }));
+  formApi.updateSchema([{
+    componentProps: () => ({
+      options: options,
+      showSearch: true,
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
+    }),
+    fieldName: 'personId',
+  }])
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm/>
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import {ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+import {cloneDeep} from '@vben/utils';
+
+import {useVbenForm} from '#/adapter/form';
+import {
+  houseChargeAdd,
+  houseChargeInfo,
+  houseChargeUpdate
+} from '#/api/property/costManagement/houseCharge';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
+
+import {modalSchemaUpdate} from './data';
+import {renderDict} from "#/utils/render";
+import {Descriptions, DescriptionsItem, Divider} from "ant-design-vue";
+import type {HouseChargeVO} from "#/api/property/costManagement/houseCharge/model";
+import type {RoomVO} from "#/api/property/room/model";
+import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const record = ref<HouseChargeVO>();
+const room = ref<RoomVO>();
+const costItem = ref<CostItemSettingVO>();
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchemaUpdate(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const {id} = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    record.value = await houseChargeInfo(id);
+    if (record.value) {
+      room.value = record.value.roomVo
+      costItem.value = record.value.costItemsVo
+    }
+    await formApi.setValues(record.value);
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    record.value.payType = data.payType
+    record.value.chargeCycle = data.chargeCycle
+    record.value.chargeStatus = '4'
+    await houseChargeUpdate(record.value);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+
+</script>
+
+<template>
+  <BasicModal title="缴费">
+    <Descriptions v-if="record" size="small" :column="2"
+                  :labelStyle="{width:'80px'}">
+      <DescriptionsItem label="费用编号">
+        {{ costItem?.id }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用项目">
+        {{ costItem?.chargeItem }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用类型">
+        <component
+          v-if="costItem"
+          :is="renderDict(costItem?.costType,'pro_expense_type')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="计费起始">
+        {{ record.startTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="房间">
+        {{ room?.roomNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="面积(㎡)">
+        {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
+      </DescriptionsItem>
+      <DescriptionsItem label="单价">
+        {{ costItem?.unitPrice }}
+      </DescriptionsItem>
+      <DescriptionsItem label="附加费">
+        {{ costItem?.surcharge }}
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费金额" :span="2">
+        <span style="font-size: 16px;font-weight: 600;color: red" v-if="record.amountReceivable">
+         ￥ {{ record.amountReceivable }}
+        </span>
+      </DescriptionsItem>
+    </Descriptions>
+    <Divider/>
+    <BasicForm/>
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+
+import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
+import {getVxePopupContainer} from '@vben/utils';
+
+import {Modal, Popconfirm, Space} from 'ant-design-vue';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+
+import {
+  houseChargeExport,
+  houseChargeList,
+  houseChargeRemove,
+} from '#/api/property/costManagement/houseCharge';
+import type {HouseChargeForm} from '#/api/property/costManagement/houseCharge/model';
+import {commonDownloadExcel} from '#/utils/file/download';
+
+import houseChargeAdd from './houseCharge-add.vue';
+import houseChargeUpdate from './houseCharge-update.vue';
+import houseChargeDetail from './house-charge-detail.vue';
+import houseChargeRefund from './house-charge-refund.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 houseChargeList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-houseCharge-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [HouseChargeAdd, modalApi] = useVbenModal({
+  connectedComponent: houseChargeAdd,
+});
+const [HouseChargeUpdate, updateApi] = useVbenModal({
+  connectedComponent: houseChargeUpdate,
+});
+const [HouseChargeDetail, detailApi] = useVbenModal({
+  connectedComponent: houseChargeDetail,
+});
+const [HouseChargeRefund, refundApi] = useVbenModal({
+  connectedComponent: houseChargeRefund,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<HouseChargeForm>) {
+  updateApi.setData({id: row.id});
+  updateApi.open();
+}
+
+async function handleInfo(row: Required<HouseChargeForm>) {
+  detailApi.setData({id: row.id});
+  detailApi.open();
+}
+
+async function handleDelete(row: Required<HouseChargeForm>) {
+  await houseChargeRemove(row.id);
+  await tableApi.query();
+}
+
+async function handleRefund(row: Required<HouseChargeForm>) {
+  refundApi.setData({id: row.id});
+  refundApi.open();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<HouseChargeForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await houseChargeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(houseChargeExport, '房屋收费数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="房屋收费列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:houseCharge:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:houseCharge:remove']"
+            @click="handleMultiDelete">
+            取消
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['property:houseCharge:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['property:houseCharge:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-if="row.chargeStatus=='2'"
+            v-access:code="['property:houseCharge:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            缴费
+          </ghost-button>
+          <ghost-button
+            v-else-if="row.chargeStatus=='4'"
+            danger
+            v-access:code="['property:houseCharge:edit']"
+            @click.stop="handleRefund(row)"
+          >
+            退费
+          </ghost-button>
+          <Popconfirm
+            v-else
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认取消？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['property:houseCharge:remove']"
+              @click.stop=""
+              :disabled="row.chargeStatus!='1'"
+            >
+              取消
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <HouseChargeAdd @reload="tableApi.query()"/>
+    <HouseChargeUpdate @reload="tableApi.query()"/>
+    <HouseChargeRefund @reload="tableApi.query()"/>
+    <HouseChargeDetail/>
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/paymentReview/data.ts
@@ -0,0 +1,109 @@
+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: '审核状态',
+    fieldName: 'state',
+    component: 'RadioGroup',
+    componentProps: {
+      options: [
+        { label: '已审核', value: '1' },
+        { label: '已驳回', value: '2' },
+      ],
+      // options: getDictOptions('cost_review_status'),
+    },
+    rules: 'required',
+  },
+];
--- a/apps/web-antd/src/views/property/costManagement/paymentReview/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/paymentReview/index.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Space } from 'ant-design-vue';
+import {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import {
+  paymentReviewList,
+} from '#/api/property/costManagement/paymentReview';
+import type { PaymentReviewForm } from '#/api/property/costManagement/paymentReview/model';
+import paymentReviewModal from './paymentReview-modal.vue';
+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',
+  },
+  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 [PaymentReviewModal, modalApi] = useVbenModal({
+  connectedComponent: paymentReviewModal,
+});
+
+const [paymentReviewDetailModal, paymentReviewDetailApi] = useVbenModal({
+  connectedComponent: paymentReviewDetail,
+});
+
+async function handleInfo(row: Required<PaymentReviewForm>) {
+  paymentReviewDetailApi.setData({ id: row.id });
+  paymentReviewDetailApi.open();
+}
+
+async function handleEdit(row: Required<PaymentReviewForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+</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>
+          <ghost-button
+              :disabled="row.state!=='0'"
+              @click.stop="handleEdit(row)"
+          >
+            {{ '审核' }}
+          </ghost-button>
+        </Space>
+      </template>
+    </BasicTable>
+    <PaymentReviewModal @reload="tableApi.query()" />
+    <paymentReviewDetailModal/>
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/paymentReview/paymentReview-detail.vue
+++ b/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>
--- a/apps/web-antd/src/views/property/costManagement/paymentReview/paymentReview-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/paymentReview/paymentReview-modal.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { paymentReviewAdd, paymentReviewInfo, paymentReviewUpdate } from '#/api/property/costManagement/paymentReview';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+import type {PaymentReviewVO} from "#/api/property/costManagement/paymentReview/model";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const record = ref<PaymentReviewVO>({
+  state:'1'
+})
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      record.value = await paymentReviewInfo(id);
+      record.value.state = '1'
+      await formApi.setValues(record.value);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    record.value.state=data.state
+    await (isUpdate.value ? paymentReviewUpdate(record.value) : paymentReviewAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/costManagement/returnPayFee/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/returnPayFee/data.ts
@@ -0,0 +1,103 @@
+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: 'returnNo',
+    label: '退款单号',
+  },
+  {
+    component: 'Select',
+    componentProps:{
+      options:getDictOptions('wy_tfshzt')
+    },
+    fieldName: 'state',
+    label: '审核状态',
+  },
+];
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '退款单号',
+    field: 'returnNo',
+    width: 180,
+  },
+  {
+    title: '支付单号',
+    field: 'payNo',
+    width: 180,
+  },
+  {
+    title: '支付金额',
+    field: 'payAcount',
+    width: 100,
+  },
+  {
+    title: '支付时间',
+    field: 'payTime',
+    width: 180,
+  },
+  {
+    title: '退款原因',
+    field: 'reason',
+    minWidth: 180,
+  },
+  {
+    title: '审核状态',
+    field: 'state',
+    width: 150,
+    slots:{
+      default:({row})=>{
+        return renderDict(row.state,'wy_tfshzt')
+      }
+    }
+  },
+  {
+    title: '审核意见',
+    field: 'remark',
+    width: 180,
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const stateOptions = [
+  { label: '审核通过', value: '1' },
+  { label: '审核不通过', value: '2' },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '审核状态',
+    fieldName: 'state',
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      options: stateOptions,
+    },
+    rules:'required'
+  },
+  {
+    label: '审核意见',
+    fieldName: 'remark',
+    component: 'Textarea',
+  },
+];
--- a/apps/web-antd/src/views/property/costManagement/returnPayFee/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/returnPayFee/index.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+
+import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
+
+import {Modal, Popconfirm, Space} from 'ant-design-vue';
+
+import {
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+
+import {
+  returnPayFeeExport,
+  returnPayFeeList,
+  returnPayFeeRemove,
+} from '#/api/property/costManagement/returnPayFee';
+import type {ReturnPayFeeForm} from '#/api/property/costManagement/returnPayFee/model';
+import {commonDownloadExcel} from '#/utils/file/download';
+
+import returnPayFeeModal from './returnPayFee-modal.vue';
+import returnPayFeeDetail from './return-pay-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 returnPayFeeList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-returnPayFee-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ReturnPayFeeModal, modalApi] = useVbenModal({
+  connectedComponent: returnPayFeeModal,
+});
+
+const [ReturnPayFeeDetail, detailApi] = useVbenModal({
+  connectedComponent: returnPayFeeDetail,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<ReturnPayFeeForm>) {
+  modalApi.setData({id: row.id});
+  modalApi.open();
+}
+
+async function handleInfo(row: Required<ReturnPayFeeForm>) {
+  detailApi.setData({id: row.id});
+  detailApi.open();
+}
+
+async function handleDelete(row: Required<ReturnPayFeeForm>) {
+  await returnPayFeeRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<ReturnPayFeeForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await returnPayFeeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(returnPayFeeExport, '退费审核数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="退费审核列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['property:returnPayFee:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+<!--          <a-button-->
+<!--            :disabled="!vxeCheckboxChecked(tableApi)"-->
+<!--            danger-->
+<!--            type="primary"-->
+<!--            v-access:code="['property:returnPayFee:remove']"-->
+<!--            @click="handleMultiDelete">-->
+<!--            {{ $t('pages.common.delete') }}-->
+<!--          </a-button>-->
+<!--          <a-button-->
+<!--            type="primary"-->
+<!--            v-access:code="['property:returnPayFee:add']"-->
+<!--            @click="handleAdd"-->
+<!--          >-->
+<!--            {{ $t('pages.common.add') }}-->
+<!--          </a-button>-->
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            :disabled="row.state!='0'"
+            v-access:code="['property:returnPayFee:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            审核
+          </ghost-button>
+          <ghost-button
+            v-access:code="['property:returnPayFee:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+        </Space>
+      </template>
+    </BasicTable>
+    <ReturnPayFeeModal @reload="tableApi.query()"/>
+    <ReturnPayFeeDetail/>
+  </Page>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/returnPayFee/return-pay-detail.vue
+++ b/apps/web-antd/src/views/property/costManagement/returnPayFee/return-pay-detail.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+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 {renderDict} from "#/utils/render";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+import {returnPayFeeInfo} from "#/api/property/costManagement/returnPayFee";
+import type {ReturnPayFeeVO} from "#/api/property/costManagement/returnPayFee/model";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    returnPayDetail.value = null;
+  },
+});
+
+const returnPayDetail = shallowRef<null | ReturnPayFeeVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const {id} = modalApi.getData() as { id: number | string };
+  returnPayDetail.value = await returnPayFeeInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="退费审核详情" class="w-[70%]">
+    <Descriptions v-if="returnPayDetail" size="small" :column="2" bordered
+                  :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="退款单号">
+        {{ returnPayDetail.returnNo }}
+      </DescriptionsItem>
+      <DescriptionsItem label="支付单号">
+        {{ returnPayDetail.payNo }}
+      </DescriptionsItem>
+      <DescriptionsItem label="支付金额">
+        {{returnPayDetail.payAcount}}
+      </DescriptionsItem>
+      <DescriptionsItem label="支付时间">
+        {{ returnPayDetail.payTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="退款原因" :span="2">
+       {{returnPayDetail.reason}}
+      </DescriptionsItem>
+      <DescriptionsItem label="审核状态" :span="2">
+        <component
+          :is="renderDict(returnPayDetail.state,'wy_tfshzt')"
+        />
+      </DescriptionsItem>
+      <DescriptionsItem label="审核意见" :span="2">
+        {{returnPayDetail.remark}}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template>
--- a/apps/web-antd/src/views/property/costManagement/returnPayFee/returnPayFee-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/returnPayFee/returnPayFee-modal.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import {ref} from 'vue';
+
+import {useVbenModal} from '@vben/common-ui';
+import {cloneDeep} from '@vben/utils';
+
+import {useVbenForm} from '#/adapter/form';
+import {
+  returnPayFeeInfo,
+  returnPayFeeUpdate
+} from '#/api/property/costManagement/returnPayFee';
+import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';
+
+import {modalSchema} from './data';
+import type {ReturnPayFeeVO} from "#/api/property/costManagement/returnPayFee/model";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const record = ref<ReturnPayFeeVO>({
+  id:'',
+  state:'1',
+  remark:''
+})
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const {onBeforeClose, markInitialized, resetInitialized} = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const {id} = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+      record.value = await returnPayFeeInfo(id);
+      record.value.state = '1'
+      await formApi.setValues(record.value);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const {valid} = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    record.value.state=data.state
+    record.value.remark=data.remark
+    await returnPayFeeUpdate(record.value);
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal title="审核">
+    <BasicForm/>
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/property/equipmentManagement/machine/data.ts
+++ b/apps/web-antd/src/views/property/equipmentManagement/machine/data.ts
@@ -42,16 +42,16 @@ export const columns: VxeGridProps['columns'] = [
    field: 'machineBrand',
    width:100
  },
-  {
-    title: '设备类型',
-    field: 'machineTypeId',
-    width:100
-  },
-  {
-    title: '位置详情',
-    field: 'locationId',
-    width:100
-  },
+  // {
+  //   title: '设备类型',
+  //   field: 'machineTypeId',
+  //   width:100
+  // },
+  // {
+  //   title: '位置详情',
+  //   field: 'locationId',
+  //   width:100
+  // },
  {
    title: '采购价格',
    field: 'purchasePrice',
@@ -92,11 +92,11 @@ export const columns: VxeGridProps['columns'] = [
      }
    }
  },
-  {
-    title: '责任人',
-    field: 'personId',
-    width:100
-  },
+  // {
+  //   title: '责任人',
+  //   field: 'personId',
+  //   width:100
+  // },
  {
    field: 'action',
    fixed: 'right',
--- a/apps/web-antd/src/views/property/equipmentManagement/machine/index.vue
+++ b/apps/web-antd/src/views/property/equipmentManagement/machine/index.vue
@@ -24,7 +24,7 @@ import MachineTypeTree from '../components/machine-type-tree.vue'
 import machineDetail from './machine-detail.vue'
 import {ref} from "vue";

-const selectTypeId = ref('')
+const selectTypeId = ref([])

 const formOptions: VbenFormProps = {
  commonConfig: {
@@ -36,8 +36,8 @@ const formOptions: VbenFormProps = {
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  handleReset: async () => {
-    selectTypeId.value = '';
-    const { formApi, reload } = tableApi;
+    selectTypeId.value = [];
+    const {formApi, reload} = tableApi;
    await formApi.resetForm();
    const formValues = formApi.form.values;
    formApi.setLatestSubmissionValues(formValues);
@@ -61,7 +61,11 @@ const gridOptions: VxeGridProps = {
  proxyConfig: {
    ajax: {
      query: async ({page}, formValues = {}) => {
-        formValues.machineTypeId = selectTypeId.value
+        if (selectTypeId.value && selectTypeId.value.length) {
+          formValues.machineTypeId = selectTypeId.value[0]
+        }else {
+          formValues.machineTypeId =[]
+        }
        return await machineList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
@@ -135,32 +139,32 @@ function handleDownloadExcel() {
  <Page :auto-content-height="true">
    <div class="flex h-full gap-[8px]">
      <MachineTypeTree
-          v-model:select-dept-id="selectTypeId"
-          class="w-[260px]"
-          @reload="() => tableApi.reload()"
-          @select="() => tableApi.reload()"
+        v-model:select-dept-id="selectTypeId"
+        class="w-[260px]"
+        @reload="() => tableApi.reload()"
+        @select="() => tableApi.reload()"
      />
      <BasicTable class="flex-1 overflow-hidden" table-title="设备列表列表">
        <template #toolbar-tools>
          <Space>
            <a-button
-                v-access:code="['property:machine:export']"
-                @click="handleDownloadExcel"
+              v-access:code="['property:machine:export']"
+              @click="handleDownloadExcel"
            >
              {{ $t('pages.common.export') }}
            </a-button>
            <a-button
-                :disabled="!vxeCheckboxChecked(tableApi)"
-                danger
-                type="primary"
-                v-access:code="['property:machine:remove']"
-                @click="handleMultiDelete">
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+              v-access:code="['property:machine:remove']"
+              @click="handleMultiDelete">
              {{ $t('pages.common.delete') }}
            </a-button>
            <a-button
-                type="primary"
-                v-access:code="['property:machine:add']"
-                @click="handleAdd"
+              type="primary"
+              v-access:code="['property:machine:add']"
+              @click="handleAdd"
            >
              {{ $t('pages.common.add') }}
            </a-button>
@@ -169,27 +173,27 @@ function handleDownloadExcel() {
        <template #action="{ row }">
          <Space>
            <ghost-button
-                v-access:code="['property:machine:info']"
-                @click.stop="handleInfo(row)"
+              v-access:code="['property:machine:info']"
+              @click.stop="handleInfo(row)"
            >
              {{ $t('pages.common.info') }}
            </ghost-button>
            <ghost-button
-                v-access:code="['property:machine:edit']"
-                @click.stop="handleEdit(row)"
+              v-access:code="['property:machine:edit']"
+              @click.stop="handleEdit(row)"
            >
              {{ $t('pages.common.edit') }}
            </ghost-button>
            <Popconfirm
-                :get-popup-container="getVxePopupContainer"
-                placement="left"
-                title="确认删除？"
-                @confirm="handleDelete(row)"
+              :get-popup-container="getVxePopupContainer"
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
            >
              <ghost-button
-                  danger
-                  v-access:code="['property:machine:remove']"
-                  @click.stop=""
+                danger
+                v-access:code="['property:machine:remove']"
+                @click.stop=""
              >
                {{ $t('pages.common.delete') }}
              </ghost-button>
--- a/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/data.ts
+++ b/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/data.ts
@@ -2,6 +2,7 @@ import type {FormSchemaGetter} from '#/adapter/form';
 import type {VxeGridProps} from '#/adapter/vxe-table';
 import {getDictOptions} from "#/utils/dict";
 import {renderDict} from "#/utils/render";
+import {z} from "#/adapter/form";


 export const querySchema: FormSchemaGetter = () => [
@@ -22,10 +23,6 @@ export const querySchema: FormSchemaGetter = () => [

 export const columns: VxeGridProps['columns'] = [
  {type: 'checkbox', width: 60},
-  {
-    title: '主键',
-    field: 'id',
-  },
  {
    title: '计划名称',
    field: 'planName',
@@ -34,10 +31,10 @@ export const columns: VxeGridProps['columns'] = [
    title: '计划编号',
    field: 'planNo',
  },
-  {
-    title: '设备类型',
-    field: 'machineTypeId',
-  },
+  // {
+  //   title: '设备类型',
+  //   field: 'machineTypeId',
+  // },
  {
    title: '保养周期',
    field: 'planPeriod',
@@ -179,31 +176,14 @@ export const modalSchema: FormSchemaGetter = () => [
    },
    rules:'required'
  },
-  // {
-  //   label: '开始时间',
-  //   fieldName: 'startDate',
-  //   component: 'DatePicker',
-  //   componentProps: {
-  //     showTime: true,
-  //     format: 'YYYY-MM-DD HH:mm:ss',
-  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-  //   },
-  //   rules:'required'
-  // },
-  // {
-  //   label: '结束时间',
-  //   fieldName: 'endDate',
-  //   component: 'DatePicker',
-  //   componentProps: {
-  //     showTime: true,
-  //     format: 'YYYY-MM-DD HH:mm:ss',
-  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
-  //   },
-  //   rules:'required'
-  // },
-  // {
-  //   label: '状态(0启用,1停用)',
-  //   fieldName: 'state',
-  //   component: 'Input',
-  // },
+  {
+    label: '巡检人员',
+    fieldName: 'userId',
+    component: 'ApiSelect',
+    componentProps:{
+      mode: 'multiple',
+    },
+    rules: z.array(z.string()).min(1, { message: '请选择巡检人员' }),
+    formItemClass: 'col-span-2'
+  },
 ];
--- a/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/index.vue
+++ b/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/index.vue
@@ -182,8 +182,8 @@ function handleDownloadExcel() {
      </template>
      <template #state="{row}">
        <TableSwitch
-          :checkedValue="1"
-          :unCheckedValue="0"
+          checkedValue="1"
+          unCheckedValue="0"
          v-model:value="row.state"
          :api="() => maintainPlanUpdate(row)"
          :disabled="!hasAccessByCodes(['property:depot:edit'])"
--- a/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/maintainPlan-modal.vue
+++ b/apps/web-antd/src/views/property/equipmentManagement/maintainPlan/maintainPlan-modal.vue
@@ -15,6 +15,8 @@ import {defaultFormValueGetter, useBeforeCloseDiff} from '#/utils/popup';

 import {modalSchema} from './data';
 import {getMachineTypeTree} from "#/api/property/machineType";
+import {personList} from "#/api/property/resident/person";
+import {renderDictValue} from "#/utils/render";

 const emit = defineEmits<{ reload: [] }>();

@@ -62,12 +64,16 @@ const [BasicModal, modalApi] = useVbenModal({
    const {id} = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;
    await setupTypeSelect();
+    await queryPersonData()
    if (isUpdate.value && id) {
      const record = await maintainPlanInfo(id);
      record.planDate = [record.startDate, record.endDate]
      if (record.planPeriod == '1') {
-        record.maintainanceMonth = record.maintainanceMonth?.split(',')
-        record.maintainanceDay = record.maintainanceDay?.split(',')
+        record.maintainMonth = record.maintainMonth?.split(',')
+        record.maintainDay = record.maintainDay?.split(',')
+      }
+      if (record.machineMaintainPlanStaffBoList) {
+        record.userId =  record.machineMaintainPlanStaffBoList.map(item=>item.userId)
      }
      await formApi.setValues(record);
    }
@@ -91,13 +97,19 @@ async function handleConfirm() {
      data.endDate = data.planDate[1]
    }
    if (data.planPeriod == '1') {
-      data.maintainanceMonth = data.maintainanceMonth?.join(',')
-      data.maintainanceDay = data.maintainanceDay?.join(',')
-      data.maintainanceEveryday = undefined
+      data.maintainMonth = data.maintainMonth?.join(',')
+      data.maintainDay = data.maintainDay?.join(',')
+      data.maintainEveryday = undefined
    } else {
-      data.maintainanceMonth = undefined
-      data.maintainanceDay = undefined
+      data.maintainMonth = undefined
+      data.maintainDay = undefined
    }
+    data.machineMaintainPlanStaffBoList = []
+    data.userId.forEach((item: string) => {
+      data.machineMaintainPlanStaffBoList.push({
+        userId: item
+      })
+    })
    await (isUpdate.value ? maintainPlanUpdate(data) : maintainPlanAdd(data));
    resetInitialized();
    emit('reload');
@@ -143,6 +155,29 @@ async function setupTypeSelect() {
    },
  ]);
 }
+
+async function queryPersonData() {
+  let params = {
+    pageSize: 1000,
+    pageNum: 1,
+  }
+  const res = await personList(params);
+  const options = res.rows.map((user) => ({
+    label: user.userName + '-' + renderDictValue(user.gender, 'sys_user_sex')
+      + '-' + user.phone + '-' + user.unitName,
+    value: user.id,
+  }));
+  formApi.updateSchema([{
+    componentProps: () => ({
+      options: options,
+      showSearch: true,
+      optionFilterProp: 'label',
+      optionLabelProp: 'label',
+      mode: 'multiple',
+    }),
+    fieldName: 'userId',
+  }])
+}
 </script>

 <template>
--- a/apps/web-antd/src/views/property/equipmentManagement/maintainTaskDetail/data.ts
+++ b/apps/web-antd/src/views/property/equipmentManagement/maintainTaskDetail/data.ts
@@ -25,35 +25,34 @@ export const querySchema: FormSchemaGetter = () => [
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
  { type: 'checkbox', width: 60 },
-  {
-    title: '设备名称',
-    field: 'machineId',
-  },
-  {
-    title: '设备编号',
-    field: 'machineId',
-  },
+  // {
+  //   title: '设备名称',
+  //   field: 'machineId',
+  // },
+  // {
+  //   title: '设备编号',
+  //   field: 'machineId',
+  // },
    {
    title: '位置编号',
    field: 'machineId',
  },
-    {
-    title: '计划名称',
-    field: 'machineId',
-  },
-    {
-    title: '计划保养人',
-    field: 'machineId',
-  },
-      {
-    title: '计划保养时间',
-    field: 'machineId',
-  },
-        {
-    title: '实际保养时间',
-    field: 'machineId',
-  },
-
+  //   {
+  //   title: '计划名称',
+  //   field: 'machineId',
+  // },
+  //   {
+  //   title: '计划保养人',
+  //   field: 'machineId',
+  // },
+  //     {
+  //   title: '计划保养时间',
+  //   field: 'machineId',
+  // },
+  // {
+  //   title: '实际保养时间',
+  //   field: 'machineId',
+  // },
  {
    title: '保养情况',
    field: 'sendFlag',
--- a/apps/web-antd/src/views/property/room/data.ts
+++ b/apps/web-antd/src/views/property/room/data.ts
@@ -43,9 +43,13 @@ export const columns: VxeGridProps['columns'] = [
    field: 'roomTypeName',
  },
  {
-    title: '面积',
+    title: '建筑面积',
    field: 'area',
  },
+  {
+    title: '套内面积',
+    field: 'insideInArea',
+  },
  {
    title: '户型',
    field: 'layout',
@@ -110,10 +114,18 @@ export const modalSchema: FormSchemaGetter = () => [
    },
  },
  {
-    label: '面积',
+    label: '建筑面积',
    fieldName: 'area',
    component: 'Input',
  },
+  {
+    label: '套内面积',
+    fieldName: 'insideInArea',
+    component: 'InputNumber',
+    componentProps:{
+      min:0,
+    }
+  },
  {
    label: '户型',
    fieldName: 'layout',
--- a/apps/web-antd/src/views/sis/deviceGroup/data.ts
+++ b/apps/web-antd/src/views/sis/deviceGroup/data.ts
@@ -0,0 +1,69 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: '分组名称',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '主键id',
+    field: 'id',
+  },
+  {
+    title: '分组名称',
+    field: 'name',
+  },
+  {
+    title: '父节点',
+    field: 'parentId',
+  },
+  {
+    title: '备注',
+    field: 'remark',
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+export const modalSchema: FormSchemaGetter = () => [
+  {
+    label: '主键id',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '分组名称',
+    fieldName: 'name',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '父节点',
+    fieldName: 'parentId',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '备注',
+    fieldName: 'remark',
+    component: 'Input',
+  },
+];
--- a/apps/web-antd/src/views/sis/deviceGroup/deviceGroup-modal.vue
+++ b/apps/web-antd/src/views/sis/deviceGroup/deviceGroup-modal.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { cloneDeep } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { deviceGroupAdd, deviceGroupInfo, deviceGroupUpdate } from '#/api/sis/deviceGroup';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
+import { modalSchema } from './data';
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    // 默认占满两列
+    formItemClass: 'col-span-2',
+    // 默认label宽度 px
+    labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
+    componentProps: {
+      class: 'w-full',
+    }
+  },
+  schema: modalSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
+});
+
+const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
+  {
+    initializedGetter: defaultFormValueGetter(formApi),
+    currentGetter: defaultFormValueGetter(formApi),
+  },
+);
+
+const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
+  class: 'w-[550px]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+
+    const { id } = modalApi.getData() as { id?: number | string };
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+      const record = await deviceGroupInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
+
+    modalApi.modalLoading(false);
+  },
+});
+
+async function handleConfirm() {
+  try {
+    modalApi.lock(true);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
+    const data = cloneDeep(await formApi.getValues());
+    await (isUpdate.value ? deviceGroupUpdate(data) : deviceGroupAdd(data));
+    resetInitialized();
+    emit('reload');
+    modalApi.close();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
+
+async function handleClosed() {
+  await formApi.resetForm();
+  resetInitialized();
+}
+</script>
+
+<template>
+  <BasicModal :title="title">
+    <BasicForm />
+  </BasicModal>
+</template>
+
--- a/apps/web-antd/src/views/sis/deviceGroup/index.vue
+++ b/apps/web-antd/src/views/sis/deviceGroup/index.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
+
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import dayjs from 'dayjs';
+
+import {   
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps 
+} from '#/adapter/vxe-table';
+
+import {
+  deviceGroupExport,
+  deviceGroupList,
+  deviceGroupRemove,
+} from '#/api/sis/deviceGroup';
+import type { DeviceGroupForm } from '#/api/sis/deviceGroup/model';
+import { commonDownloadExcel } from '#/utils/file/download';
+
+import deviceGroupModal from './deviceGroup-modal.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',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
+};
+
+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 deviceGroupList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'sis-deviceGroup-index'
+};
+
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [DeviceGroupModal, modalApi] = useVbenModal({
+  connectedComponent: deviceGroupModal,
+});
+
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<DeviceGroupForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<DeviceGroupForm>) {
+  await deviceGroupRemove(row.id);
+  await tableApi.query();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<DeviceGroupForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await deviceGroupRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(deviceGroupExport, '设备组管理数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
+</script>
+
+<template>
+  <Page :auto-content-height="true">
+    <BasicTable table-title="设备组管理列表">
+      <template #toolbar-tools>
+        <Space>
+          <a-button
+            v-access:code="['sis:deviceGroup:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary" 
+            v-access:code="['sis:deviceGroup:remove']" 
+            @click="handleMultiDelete">
+            {{ $t('pages.common.delete') }}
+          </a-button>
+          <a-button
+            type="primary"
+            v-access:code="['sis:deviceGroup:add']"
+            @click="handleAdd"
+          >
+            {{ $t('pages.common.add') }}
+          </a-button>
+        </Space>
+      </template>
+      <template #action="{ row }">
+        <Space>
+          <ghost-button
+            v-access:code="['sis:deviceGroup:edit']"
+            @click.stop="handleEdit(row)"
+          >
+            {{ $t('pages.common.edit') }}
+          </ghost-button>
+          <Popconfirm
+            :get-popup-container="getVxePopupContainer"
+            placement="left"
+            title="确认删除？"
+            @confirm="handleDelete(row)"
+          >
+            <ghost-button
+              danger
+              v-access:code="['sis:deviceGroup:remove']"
+              @click.stop=""
+            >
+              {{ $t('pages.common.delete') }}
+            </ghost-button>
+          </Popconfirm>
+        </Space>
+      </template>
+    </BasicTable>
+    <DeviceGroupModal @reload="tableApi.query()" />
+  </Page>
+</template>
--- a/apps/web-antd/src/views/sis/deviceManage/data.ts
+++ b/apps/web-antd/src/views/sis/deviceManage/data.ts
@@ -15,6 +15,11 @@ export const querySchema: FormSchemaGetter = () => [
    fieldName: 'deviceIp',
    label: '设备ip',
  },
+  {
+    component: 'Input',
+    fieldName: 'deviceType',
+    label: '设备类型',
+  },
  {
    fieldName: 'deviceStatus',
    label: '在线状态',
@@ -34,6 +39,14 @@ export const columns: VxeGridProps['columns'] = [
    title: '设备名称',
    field: 'deviceName',
  },
+  {
+    title: '厂商编号',
+    field: 'factoryNo',
+  },
+  {
+    title: '设备类型',
+    field: 'device_type',
+  },
  {
    title: '设备ip',
    field: 'deviceIp',
@@ -43,30 +56,13 @@ export const columns: VxeGridProps['columns'] = [
    field: 'devicePort',
  },
  {
-    title: '设备',
+    title: '设备mac',
    field: 'deviceMac',
  },
  {
    title: '在线状态',
    field: 'deviceStatus',
  },
-
-  {
-    title: '通道编号',
-    field: 'channelNo',
-  },
-  {
-    title: '录像机ip',
-    field: 'vcrIp',
-  },
-  {
-    title: '录像机端口',
-    field: 'vcrPort',
-  },
-  /*{
-    title: '门禁id',
-    field: 'accessControlId',
-  },*/
  {
    field: 'action',
    fixed: 'right',
@@ -92,6 +88,18 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
+  {
+    label: '设备厂商',
+    fieldName: 'facrotyNo',
+    component: 'Input',
+    rules: 'required',
+  },
+  {
+    label: '设备类型',
+    fieldName: 'deviceType',
+    component: 'Input',
+    rules: 'required',
+  },
  {
    label: '设备ip',
    fieldName: 'deviceIp',
@@ -116,53 +124,10 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
+
  {
    label: '设备Mac',
    fieldName: 'deviceMac',
    component: 'Input',
  },
-  {
-    label: '通道编号',
-    fieldName: 'channelNo',
-    component: 'Input',
-  },
-  {
-    label: '录像机ip',
-    fieldName: 'vcrIp',
-    component: 'Input',
-  },
-  {
-    label: '录像机端口',
-    fieldName: 'vcrPort',
-    component: 'Input',
-  },
-  {
-    label: '录像机账号',
-    fieldName: 'vcrAccount',
-    component: 'Input',
-  },
-  {
-    label: '录像机密码',
-    fieldName: 'vcrPwd',
-    component: 'Input',
-  },
-  /*{
-    label: '绑定门禁',
-    fieldName: 'accessControlId',
-    component: 'ApiSelect',
-    componentProps: {
-      // mode: 'multiple', // 关键属性，启用多选模式
-      resultField: 'list', // 根据API返回结构调整
-      labelField: 'accessName',
-      valueField: 'accessCode',
-      api: async () => {
-        const params: AccessControlQuery = {
-          pageNum: 1,
-          pageSize: 500,
-        };
-        const res = await accessControlList(params);
-        return res.rows;
-      },
-    },
-  },*/
 ];
--- a/apps/web-antd/src/views/sis/deviceManage/index.vue
+++ b/apps/web-antd/src/views/sis/deviceManage/index.vue
@@ -126,7 +126,7 @@ function handleDownloadExcel() {

 <template>
  <Page :auto-content-height="true">
-    <BasicTable table-title="设备管理列表">
+    <BasicTable class="flex-1 overflow-hidden" table-title="设备管理列表">
      <template #toolbar-tools>
        <Space>
          <a-button
--- a/apps/web-antd/src/views/sis/video/channel-tree.vue
+++ b/apps/web-antd/src/views/sis/video/channel-tree.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { onMounted, ref } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { InputSearch, Skeleton, Tree } from 'ant-design-vue';
+import { treeList } from '#/api/sis/deviceChannel';
+import type { TreeNode } from '#/api/common';
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  /**
+   * 点击刷新按钮的事件
+   */
+  reload: [];
+  /**
+   * 点击节点的事件
+   */
+  select: [];
+}>();
+
+const channelId = defineModel('channelId', {
+  required: true,
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel('searchValue', {
+  type: String,
+  default: '',
+});
+
+/** 通道数据源 */
+const channelTree = ref<TreeNode[]>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadChannelTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = '';
+  channelId.value = [];
+  const ret = await treeList();
+  channelTree.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+async function handleReload() {
+  await loadChannelTree();
+  emit('reload');
+}
+
+onMounted(loadChannelTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+        <div
+          v-if="showSearch"
+          class="bg-background z-100 sticky left-0 top-0 p-[8px]"
+        >
+          <InputSearch
+            v-model:value="searchValue"
+            :placeholder="$t('pages.common.search')"
+            size="small"
+          >
+            <template #enterButton>
+              <a-button @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </a-button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-bind="$attrs"
+            v-if="channelTree.length > 0"
+            v-model:selected-keys="channelId"
+            :class="$attrs.class"
+            :field-names="{ title: 'label', key: 'id' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="channelTree"
+            :virtual="false"
+            default-expand-all
+            @select="$emit('select')"
+          >
+            <template #title="{ label }">
+              <span v-if="label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{
+                  label.substring(
+                    label.indexOf(searchValue) + searchValue.length,
+                  )
+                }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>
--- a/apps/web-antd/src/views/sis/video/data.ts
+++ b/apps/web-antd/src/views/sis/video/data.ts
--- a/apps/web-antd/src/views/sis/video/index.vue
+++ b/apps/web-antd/src/views/sis/video/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <Page class="h-full w-full">
+    <!--  设备分组区域  -->
+    <div class="flex h-full gap-[8px]">
+      <ChannelTree v-model:channel-id="channelId" class="w-[260px]" />
+
+      <!--  设备分组区域  -->
+      <div class="bg-background flex-1">
+        <div class="video-play-area h-[calc(100%-40px)]">
+          <div
+            v-for="i in playerNum"
+            class="player"
+            :class="'player-' + i"
+          ></div>
+        </div>
+        <div class="player-area h-[40px]">
+
+        </div>
+      </div>
+    </div>
+  </Page>
+  >
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Page } from '@vben/common-ui';
+import ChannelTree from './channel-tree.vue';
+
+const channelId = ref("");
+/**
+ * 屏幕播放器数量
+ */
+const playerNum = ref(1);
+</script>
+
+<style></style>