diff --git a/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts b/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
new file mode 100644
index 00000000..9a0df5c3
--- /dev/null
+++ b/apps/web-antd/src/api/property/attendanceManagement/arrangement/index.ts
@@ -0,0 +1,61 @@
+import type { ArrangementVO, ArrangementForm, ArrangementQuery } from './model';
+
+import type { ID, IDS } from '#/api/common';
+import type { PageResult } from '#/api/common';
+
+import { commonExport } from '#/api/helper';
+import { requestClient } from '#/api/request';
+
+/**
+* 查询排班列表
+* @param params
+* @returns 排班列表
+*/
+export function arrangementList(params?: ArrangementQuery) {
+  return requestClient.get<PageResult<ArrangementVO>>('/property/arrangement/list', { params });
+}
+
+/**
+ * 导出排班列表
+ * @param params
+ * @returns 排班列表
+ */
+export function arrangementExport(params?: ArrangementQuery) {
+  return commonExport('/property/arrangement/export', params ?? {});
+}
+
+/**
+ * 查询排班详情
+ * @param id id
+ * @returns 排班详情
+ */
+export function arrangementInfo(id: ID) {
+  return requestClient.get<ArrangementVO>(`/property/arrangement/${id}`);
+}
+
+/**
+ * 新增排班
+ * @param data
+ * @returns void
+ */
+export function arrangementAdd(data: ArrangementForm) {
+  return requestClient.postWithMsg<void>('/property/arrangement', data);
+}
+
+/**
+ * 更新排班
+ * @param data
+ * @returns void
+ */
+export function arrangementUpdate(data: ArrangementForm) {
+  return requestClient.putWithMsg<void>('/property/arrangement', data);
+}
+
+/**
+ * 删除排班
+ * @param id id
+ * @returns void
+ */
+export function arrangementRemove(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/arrangement/${id}`);
+}
diff --git a/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts b/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts
new file mode 100644
index 00000000..ac3c65a8
--- /dev/null
+++ b/apps/web-antd/src/api/property/attendanceManagement/arrangement/model.d.ts
@@ -0,0 +1,129 @@
+import type { PageQuery, BaseEntity } from '#/api/common';
+
+export interface ArrangementVO {
+  /**
+   * 主键ID
+   */
+  id: string | number;
+
+  /**
+   * 排班名称
+   */
+  scheduleName: string;
+
+  /**
+   * 考勤组ID
+   */
+  groupId: string | number;
+
+  /**
+   * 排班类型：1-固定班制，2-排班制
+   */
+  scheduleType: number;
+
+  /**
+   * 日期类型：1-单个日期，2-长期有效，3-期间有效
+   */
+  dateType: number;
+
+  /**
+   * 开始日期
+   */
+  startDate: string;
+
+  /**
+   * 结束日期(仅date_type=3时有效)
+   */
+  endDate: string;
+
+  /**
+   * 状态：0-未生效，1-已生效
+   */
+  status: number;
+
+}
+
+export interface ArrangementForm extends BaseEntity {
+  /**
+   * 主键ID
+   */
+  id?: string | number;
+
+  /**
+   * 排班名称
+   */
+  scheduleName?: string;
+
+  /**
+   * 考勤组ID
+   */
+  groupId?: string | number;
+
+  /**
+   * 排班类型：1-固定班制，2-排班制
+   */
+  scheduleType?: number;
+
+  /**
+   * 日期类型：1-单个日期，2-长期有效，3-期间有效
+   */
+  dateType?: number;
+
+  /**
+   * 开始日期
+   */
+  startDate?: string;
+
+  /**
+   * 结束日期(仅date_type=3时有效)
+   */
+  endDate?: string;
+
+  /**
+   * 状态：0-未生效，1-已生效
+   */
+  status?: number;
+
+}
+
+export interface ArrangementQuery extends PageQuery {
+  /**
+   * 排班名称
+   */
+  scheduleName?: string;
+
+  /**
+   * 考勤组ID
+   */
+  groupId?: string | number;
+
+  /**
+   * 排班类型：1-固定班制，2-排班制
+   */
+  scheduleType?: number;
+
+  /**
+   * 日期类型：1-单个日期，2-长期有效，3-期间有效
+   */
+  dateType?: number;
+
+  /**
+   * 开始日期
+   */
+  startDate?: string;
+
+  /**
+   * 结束日期(仅date_type=3时有效)
+   */
+  endDate?: string;
+
+  /**
+   * 状态：0-未生效，1-已生效
+   */
+  status?: number;
+
+  /**
+    * 日期范围参数
+    */
+  params?: any;
+}
diff --git a/apps/web-antd/src/api/property/carCharge/model.d.ts b/apps/web-antd/src/api/property/carCharge/model.d.ts
index 413ef066..551a1b1d 100644
--- a/apps/web-antd/src/api/property/carCharge/model.d.ts
+++ b/apps/web-antd/src/api/property/carCharge/model.d.ts
@@ -167,3 +167,5 @@ export interface CarChargeQuery extends PageQuery {
     */
   params?: any;
 }
+
+
diff --git a/apps/web-antd/src/api/property/costMeterWater/index.ts b/apps/web-antd/src/api/property/costMeterWater/index.ts
index a258139e..6896773d 100644
--- a/apps/web-antd/src/api/property/costMeterWater/index.ts
+++ b/apps/web-antd/src/api/property/costMeterWater/index.ts
@@ -12,7 +12,7 @@ import { requestClient } from '#/api/request';
 * @returns 费用-水电抄列表
 */
 export function costMeterWaterList(params?: CostMeterWaterQuery) {
-  return requestClient.get<PageResult<CostMeterWaterVO>>('/property/costMeterWater/list', { params });
+  return requestClient.get<PageResult<CostMeterWaterVO>>('/property/meterWater/list', { params });
 }
 
 /**
@@ -30,7 +30,7 @@ export function costMeterWaterExport(params?: CostMeterWaterQuery) {
  * @returns 费用-水电抄详情
  */
 export function costMeterWaterInfo(id: ID) {
-  return requestClient.get<CostMeterWaterVO>(`/property/costMeterWater/${id}`);
+  return requestClient.get<CostMeterWaterVO>(`/property/meterWater/${id}`);
 }
 
 /**
@@ -39,7 +39,7 @@ export function costMeterWaterInfo(id: ID) {
  * @returns void
  */
 export function costMeterWaterAdd(data: CostMeterWaterForm) {
-  return requestClient.postWithMsg<void>('/property/costMeterWater', data);
+  return requestClient.postWithMsg<void>('/property/meterWater', data);
 }
 
 /**
@@ -48,7 +48,7 @@ export function costMeterWaterAdd(data: CostMeterWaterForm) {
  * @returns void
  */
 export function costMeterWaterUpdate(data: CostMeterWaterForm) {
-  return requestClient.putWithMsg<void>('/property/costMeterWater', data);
+  return requestClient.putWithMsg<void>('/property/meterWater', data);
 }
 
 /**
@@ -57,5 +57,5 @@ export function costMeterWaterUpdate(data: CostMeterWaterForm) {
  * @returns void
  */
 export function costMeterWaterRemove(id: ID | IDS) {
-  return requestClient.deleteWithMsg<void>(`/property/costMeterWater/${id}`);
-}
+  return requestClient.deleteWithMsg<void>(`/property/meterWater/${id}`);
+}
\ No newline at end of file
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue
new file mode 100644
index 00000000..10c121d3
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-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 { arrangementAdd, arrangementInfo, arrangementUpdate } from '#/api/property/attendanceManagement/arrangement';
+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 arrangementInfo(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 ? arrangementUpdate(data) : arrangementAdd(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>
+
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
new file mode 100644
index 00000000..873d2f9b
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { Radio, Select, Button, Table,Badge,Calendar,DatePicker } from 'ant-design-vue';
+import type { RadioChangeEvent,BadgeProps, } from 'ant-design-vue';
+import {ref} from 'vue';
+import { Dayjs } from 'dayjs';
+const value = ref<Dayjs>();
+const emit = defineEmits<{
+  (e: 'changeView',value:boolean):void
+}>();
+const props = defineProps<{
+  viewMode:'calender' | 'schedule'
+}>();
+const selectedDate = ref();
+const currentDate = ref(new Date());
+// 切换视图模式
+function handleViewModeChange(e: RadioChangeEvent): void {
+  // 将父组件的isCalenderView变为true
+  emit('changeView',e.target.value)
+}
+
+// 日历模拟数据
+const scheduleData:{ date: string; list: { type: BadgeProps['status']; content: string }[] }[] = [
+  { date: '2025-07-08', list: [ { type: 'warning', content: '7月8日事件' } ] },
+  { date: '2025-07-06', list: [ { type: 'success', content: '8月8日事件' } ] },
+  // ...
+];
+const getListData2 = (current: Dayjs): { type: BadgeProps['status']; content: string }[] => {
+  const dateStr = current.format('YYYY-MM-DD');
+  const found = scheduleData.find(item => item.date === dateStr);
+  return found ? found.list : [];
+};
+const getListData = (value: Dayjs):{ type: BadgeProps['status']; content: string }[] => {
+  let listData: { type: BadgeProps['status']; content: string }[] | undefined;
+  switch (value.date()) {
+    case 8:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+      ];
+      break;
+    case 10:
+      listData = [
+        { type: 'warning', content: 'This is warning event.' },
+        { type: 'success', content: 'This is usual event.' },
+        { type: 'error', content: 'This is error event.' },
+      ];
+      break;
+    case 15:
+      listData = [
+        { type: 'warning', content: 'This is warning event' },
+        { type: 'success', content: 'This is very long usual event。。....' },
+        { type: 'error', content: 'This is error event 1.' },
+        { type: 'error', content: 'This is error event 2.' },
+        { type: 'error', content: 'This is error event 3.' },
+        { type: 'error', content: 'This is error event 4.' },
+      ];
+      break;
+    default:
+  }
+  return listData || [];
+};
+
+const getMonthData = (value: Dayjs) => {
+  if (value.month() === 8) {
+    return 1394;
+  }
+};
+function customHeader() {
+  // 返回你想要的VNode或null
+  return null; // 什么都不显示
+}
+</script>
+<template>
+  <div class="h-full flex flex-col">
+    <div class="flex justify-between">
+      <div class="flex gap-7">
+      <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
+          <Radio.Button value="calender">日历视图</Radio.Button>
+          <Radio.Button value="schedule">班表视图</Radio.Button>
+    </Radio.Group>
+    <div class="my-auto flex gap-1">
+      <div class="my-auto">排班日历</div>
+        <DatePicker picker="month" v-model:value="selectedDate" />
+    </div>
+    </div>
+      <div>
+       <Button type="primary">新增排班</Button>
+      </div>
+    </div>
+    <div class="flex-1 p-1">
+      <Calendar v-model:value="selectedDate" :mode="'month'"  :headerRender="customHeader">
+        <template #dateCellRender="{ current }">
+      <ul class="events">
+        <li v-for="item in getListData2(current)" :key="item.content">
+          <span>
+            <!-- <Badge :status="item.type" :text="item.content" /> -->
+            <span>{{ item.content }}</span>
+            <a style="margin-left: 4px; color: #1890ff; cursor: pointer;">编辑</a>
+            <a style="margin-left: 4px; color: #ff4d4f; cursor: pointer;">删除</a>
+          </span>
+        </li>
+        <a v-if="getListData2(current).length > 0" style="margin-left: 4px; color: #1890ff; cursor: pointer;">详情</a>
+      </ul>
+    </template>
+    <template #monthCellRender="{ current }">
+      <div v-if="getMonthData(current)" class="notes-month">
+        <section>{{ getMonthData(current) }}</section>
+        <span>Backlog number</span>
+      </div>
+    </template>
+      </Calendar>
+    </div>
+  </div>
+</template>
+<style scoped>
+.events {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.events .ant-badge-status {
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+  text-overflow: ellipsis;
+  font-size: 12px;
+}
+.notes-month {
+  text-align: center;
+  font-size: 28px;
+}
+.notes-month section {
+  font-size: 28px;
+}
+</style>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
new file mode 100644
index 00000000..d69a97c2
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts
@@ -0,0 +1,169 @@
+import type { FormSchemaGetter } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+
+export const querySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'scheduleName',
+    label: '排班名称',
+  },
+  {
+    component: 'Input',
+    fieldName: 'groupId',
+    label: '考勤组ID',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+    },
+    fieldName: 'scheduleType',
+    label: '排班类型：1-固定班制，2-排班制',
+  },
+  {
+    component: 'Select',
+    componentProps: {
+    },
+    fieldName: 'dateType',
+    label: '日期类型：1-单个日期，2-长期有效，3-期间有效',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'startDate',
+    label: '开始日期',
+  },
+  {
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+    fieldName: 'endDate',
+    label: '结束日期(仅date_type=3时有效)',
+  },
+  {
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+    },
+    fieldName: 'status',
+    label: '状态：0-未生效，1-已生效',
+  },
+];
+
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
+export const columns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '主键ID',
+    field: 'id',
+  },
+  {
+    title: '排班名称',
+    field: 'scheduleName',
+  },
+  {
+    title: '考勤组ID',
+    field: 'groupId',
+  },
+  {
+    title: '排班类型：1-固定班制，2-排班制',
+    field: 'scheduleType',
+  },
+  {
+    title: '日期类型：1-单个日期，2-长期有效，3-期间有效',
+    field: 'dateType',
+  },
+  {
+    title: '开始日期',
+    field: 'startDate',
+  },
+  {
+    title: '结束日期(仅date_type=3时有效)',
+    field: 'endDate',
+  },
+  {
+    title: '状态：0-未生效，1-已生效',
+    field: 'status',
+  },
+  {
+    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: 'scheduleName',
+    component: 'Input',
+  },
+  {
+    label: '考勤组ID',
+    fieldName: 'groupId',
+    component: 'Input',
+  },
+  {
+    label: '排班类型：1-固定班制，2-排班制',
+    fieldName: 'scheduleType',
+    component: 'Select',
+    componentProps: {
+    },
+  },
+  {
+    label: '日期类型：1-单个日期，2-长期有效，3-期间有效',
+    fieldName: 'dateType',
+    component: 'Select',
+    componentProps: {
+    },
+  },
+  {
+    label: '开始日期',
+    fieldName: 'startDate',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '结束日期(仅date_type=3时有效)',
+    fieldName: 'endDate',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '状态：0-未生效，1-已生效',
+    fieldName: 'status',
+    component: 'RadioGroup',
+    componentProps: {
+      buttonStyle: 'solid',
+      optionType: 'button',
+    },
+  },
+];
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/index.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/index.vue
index 5fc518eb..39be7e75 100644
--- a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/index.vue
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/index.vue
@@ -1,11 +1,20 @@
 <script setup lang="ts">
-
+import { ref } from 'vue';
+import calendarView from './calendarView.vue'
+import scheduleView from './scheduleView.vue';
+const viewMode = ref<'calender' | 'schedule'>('calender');
+// const isCalenderView = ref(true);
+function handleViewModeChange(mode:'calender' | 'schedule'){
+viewMode.value = mode
+}
 </script>
-
 <template>
-  排班管理
+    <div class="p-4 h-full">
+      <div class="p-4 h-full bg-white">
+        <calendarView v-show="viewMode === 'calender'" :viewMode="viewMode" @changeView="handleViewModeChange"/>
+        <scheduleView v-show="viewMode === 'schedule'" :viewMode="viewMode" @changeView="handleViewModeChange"/>
+      </div>
+    </div>
 </template>
-
-<style scoped lang="scss">
-
+<style scoped>
 </style>
diff --git a/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
new file mode 100644
index 00000000..59da82b2
--- /dev/null
+++ b/apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue
@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
+import type { RadioChangeEvent } from 'ant-design-vue';
+import {ref} from 'vue';
+import dayjs from 'dayjs';
+import { Dayjs } from 'dayjs';
+import { columns, querySchema } from './data';
+import {   
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps 
+} from '#/adapter/vxe-table';
+import { getVxePopupContainer } from '@vben/utils';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import {
+  arrangementExport,
+  arrangementList,
+  arrangementRemove,
+} from '#/api/property/attendanceManagement/arrangement';
+import arrangementModal from './arrangement-modal.vue';
+import type { ArrangementForm } from '#/api/property/attendanceManagement/arrangement/model';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+
+
+
+
+const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
+
+const props = defineProps<{
+  viewMode:'calender' | 'schedule'
+}>();
+const value = ref<Dayjs>();
+const onPanelChange = (value: Dayjs, mode: string) => {
+  console.log(value, mode);
+};
+// 切换视图模式
+function handleViewModeChange(e: RadioChangeEvent): void {
+  // 将父组件的isCalenderView变为false
+  emit('changeView',e.target.value)
+}
+
+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 arrangementList({
+          pageNum: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-arrangement-index'
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+
+const [ArrangementModal, modalApi] = useVbenModal({
+  connectedComponent: arrangementModal,
+});
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
+
+async function handleEdit(row: Required<ArrangementForm>) {
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+
+async function handleDelete(row: Required<ArrangementForm>) {
+  await arrangementRemove(row.id);
+  await tableApi.query();
+}
+</script>
+<template>
+  <div class="h-full">
+    <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
+          <Radio.Button value="calender">日历视图</Radio.Button>
+          <Radio.Button value="schedule">班表视图</Radio.Button>
+    </Radio.Group>
+    <div class="flex p-2 h-full">
+      <div>
+        <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
+         <Calendar v-model:value="value" :fullscreen="false" :mode="'month'" @panelChange="onPanelChange"/>
+        </div>
+      </div>
+      <div class="flex-1">
+        <Page :auto-content-height="true">
+        <BasicTable table-title="排班列表">
+          <template #action="{ row }">
+            <Space>
+              <ghost-button
+                v-access:code="['property:arrangement: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:arrangement:remove']"
+                  @click.stop=""
+                >
+                  {{ $t('pages.common.delete') }}
+                </ghost-button>
+              </Popconfirm>
+            </Space>
+          </template>
+        </BasicTable>
+        </Page>
+      </div>
+    </div>
+  </div>
+</template>
+<style>
+</style>
+
diff --git 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
index e9c7ef28..93adf46f 100644
--- 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
@@ -3,13 +3,12 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
+import { cloneDeep,handleNode,getPopupContainer } 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';
+import { communityTree } from '#/api/property/community';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -17,7 +16,7 @@ const emit = defineEmits<{ reload: [] }>();
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 140,
     // 通用配置项 会影响到所有表单项
@@ -39,7 +38,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[75%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -48,9 +47,11 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    setupCommunitySelect()
     modalApi.modalLoading(true);
 
     const { id } = modalApi.getData() as { id?: number | string };
+    await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
     await markInitialized();
 
     modalApi.modalLoading(false);
@@ -81,6 +82,42 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+// 获取服务地址
+async function setupCommunitySelect() {
+  const areaList = await communityTree(4);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 4) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择楼层',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ]);
+}
 </script>
 
 <template>
@@ -88,4 +125,15 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
 
diff --git 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
index c806339f..84577e07 100644
--- 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
@@ -3,20 +3,16 @@ 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';
+import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
+import { communityTree } from '#/api/property/community';
 
 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: {
@@ -52,11 +48,11 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    setupCommunitySelect()
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
+     await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
     isUpdate.value = !!id;
-
     if (isUpdate.value && id) {
       const record = await carChargeInfo(id);
       await formApi.setValues(record);
@@ -91,11 +87,58 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+// 获取服务地址
+async function setupCommunitySelect() {
+  const areaList = await communityTree(4);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 4) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择楼层',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ]);
+}
 </script>
 
 <template>
-  <BasicModal :title="title">
+  <BasicModal title="详情">
     <BasicForm />
   </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
 
diff --git 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
index 082e6122..718985f5 100644
--- 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
@@ -3,22 +3,79 @@ 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 { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
 import { payModalSchema } from './data';
+import { communityTree } from '#/api/property/community';
 
+export interface CarChargeVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 车牌号
+   */
+  carNumber: string;
+
+  /**
+   * 业主
+   */
+  personId: string | number;
+
+  /**
+   * 楼层
+   */
+  floorId: string | number;
+
+  /**
+   * 车位
+   */
+  location: string;
+
+  /**
+   * 状态
+   */
+  state: string;
+
+  /**
+   * 收费项目
+   */
+  costItemsId: string | number;
+
+  /**
+   * 计费开始时间
+   */
+  starTime: string;
+
+  /**
+   * 计费结束时间
+   */
+  endTime: string;
+
+  /**
+   * 说明
+   */
+  remark: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
+}
 const emit = defineEmits<{ reload: [] }>();
-
+const isUpdate = ref(false);
+const record = ref<CarChargeVO>()
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     formItemClass: 'col-span-1',
     // 默认label宽度 px
-    labelWidth: 1400,
+    labelWidth: 140,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
@@ -47,9 +104,16 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    setupCommunitySelect()
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
+    await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+       record.value = await carChargeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
     await markInitialized();
 
     modalApi.modalLoading(false);
@@ -80,6 +144,42 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+// 获取服务地址
+async function setupCommunitySelect() {
+  const areaList = await communityTree(4);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 4) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择楼层',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ]);
+}
 </script>
 
 <template>
@@ -87,3 +187,14 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/property/costManagement/carCharge/data.ts b/apps/web-antd/src/views/property/costManagement/carCharge/data.ts
index b8862bfd..01b45498 100644
--- a/apps/web-antd/src/views/property/costManagement/carCharge/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/carCharge/data.ts
@@ -3,6 +3,11 @@ 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 { personList } from '#/api/property/resident/person';
+import { communityTree } from '#/api/property/community';
+import { handleNode } from '@vben/utils';
+
 
 export const querySchema: FormSchemaGetter = () => [
   {
@@ -51,16 +56,16 @@ export const columns: VxeGridProps['columns'] = [
     title: '业主',
     field: 'personId',
   },
-  {
-    title: '状态',
-    field: 'state',
-    slots: {
-      default: ({ row }) => {
-        // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
-        return renderDict(row.state, 'wy_cszt');
-      },
-    },
-  },
+  // {
+  //   title: '状态',
+  //   field: 'state',
+  //   slots: {
+  //     default: ({ row }) => {
+  //       // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+  //       return renderDict(row.state, 'wy_cszt');
+  //     },
+  //   },
+  // },
   {
     title: '收费项目',
     field: 'costItemsId',
@@ -76,6 +81,15 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '说明',
     field: 'remark',
+  },
+    {
+    title: '状态',
+    field: 'charge_status',
+    slots:{
+      default:({row}) => {
+        return renderDict(row.charge_status, 'wy_fyshzt')
+      }
+    }
   },
   {
     field: 'action',
@@ -101,36 +115,70 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'carNumber',
     component: 'Input',
     rules: 'required',
+    disabled:true,
   },
-  {
-    label: '业主',
+{
+    label: '业主',//
     fieldName: 'personId',
-    component: 'Input',
+    component: 'ApiSelect',
+    rules:'required',
+    componentProps:{
+      api: async () => {
+        const rows = await personList({pageSize:1000000000,pageNum:1});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'userName',
+      valueField:'id'
+    },
+    disabled:true,
   },
   {
     label: '楼层',
     fieldName: 'floorId',
-    component: 'Input',
-    rules: 'required',
+    component: 'TreeSelect',
+    rules:'required',
+    disabled:true,
   },
   {
     label: '车位',
     fieldName: 'location',
     component: 'Input',
+    disabled:true,
   },
-  {
-    label: '状态',
-    fieldName: 'state',
+  // {
+  //   label: '状态',
+  //   fieldName: 'state',
+  //   component: 'Select',
+  //   componentProps: {
+  //     // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+  //     options: getDictOptions('wy_cszt'),
+  //   },
+  // },
+    {
+    label: '费用类型',//一个费用下有多个收费项目
+    fieldName: 'costType',
     component: 'Select',
-    componentProps: {
-      // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
-      options: getDictOptions('wy_cszt'),
+    componentProps:{
+      options:getDictOptions('pro_expense_type'),
     },
+    disabled:true,
   },
   {
-    label: '收费项目',
+    label: '收费项目',//一个收费项目对应一个费用类型
     fieldName: 'costItemsId',
-    component: 'Input',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'chargeItem',
+      valueField: 'id',
+    },
+    rules: 'required',
+    disabled:true,
   },
   {
     label: '计费开始时间',
@@ -141,6 +189,7 @@ export const modalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
+    disabled:true,
   },
   {
     label: '计费结束时间',
@@ -151,16 +200,13 @@ export const modalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
+    disabled:true,
   },
   {
     label: '说明',
     fieldName: 'remark',
     component: 'Input',
-  },
-  {
-    label: '搜索值',
-    fieldName: 'searchValue',
-    component: 'Input',
+    disabled:true,
   },
 ];
 //创建
@@ -180,15 +226,55 @@ export const addModalSchema: FormSchemaGetter = () => [
     component: 'Input',
     rules: 'required',
   },
-  // {
-  //   label: '费用类型',//一个费用下有对各费用项目
-  //   fieldName: 'personId',
-  //   component: 'Input',
-  // },
   {
-    label: '收费项目',//一个费用收费项目对应一个费用类型
-    fieldName: 'costItemsId',
+    label: '业主',//
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    disabled:false,
+    rules:'required',
+    componentProps:{
+      api: async () => {
+        const rows = await personList({pageSize:1000000000,pageNum:1});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'userName',
+      valueField:'id'
+    }
+  },
+  {
+    label: '楼层',
+    fieldName: 'floorId',
+    component: 'TreeSelect',
+    rules:'required',
+  },
+  {
+    label: '车位',
+    fieldName: 'location',
     component: 'Input',
+  },
+  {
+    label: '费用类型',//一个费用下有多个收费项目
+    fieldName: 'costType',
+    component: 'Select',
+    componentProps:{
+      options:getDictOptions('pro_expense_type'),
+    },
+    disabled:true,
+  },
+  {
+    label: '收费项目',//一个收费项目对应一个费用类型
+    fieldName: 'costItemsId',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'chargeItem',
+      valueField: 'id',
+    },
     rules: 'required',
   },
   {
@@ -235,17 +321,66 @@ export const payModalSchema: FormSchemaGetter = () => [
     fieldName: 'carNumber',
     component: 'Input',
     rules: 'required',
+    disabled:true,
+
+  },
+ {
+    label: '业主',//
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    rules:'required',
+    componentProps:{
+      api: async () => {
+        const rows = await personList({pageSize:1000000000,pageNum:1});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'userName',
+      valueField:'id'
+    },
+    disabled:true,
+
   },
-  // {
-  //   label: '费用类型',//一个费用下有对各费用项目
-  //   fieldName: 'personId',
-  //   component: 'Input',
-  // },
   {
-    label: '收费项目',//一个费用收费项目对应一个费用类型
-    fieldName: 'costItemsId',
+    label: '楼层',
+    fieldName: 'floorId',
+    component: 'TreeSelect',
+    rules:'required',
+    disabled:true,
+
+  },
+  {
+    label: '车位',
+    fieldName: 'location',
     component: 'Input',
+    disabled:true,
+
+  },
+  {
+    label: '费用类型',//一个费用下有多个收费项目
+    fieldName: 'costType',
+    component: 'Select',
+    componentProps:{
+      options:getDictOptions('pro_expense_type'),
+    },
+    disabled:true,
+  },
+  {
+    label: '收费项目',//一个收费项目对应一个费用类型
+    fieldName: 'costItemsId',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'chargeItem',
+      valueField: 'id',
+    },
     rules: 'required',
+    disabled:true,
+
   },
   {
     label: '计费开始时间',
@@ -257,6 +392,8 @@ export const payModalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
+    disabled:true,
+
   },
   {
     label: '计费结束时间',
@@ -268,26 +405,35 @@ export const payModalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
+    disabled:true,
+
   },
   {
     label: '说明',
     fieldName: 'remark',
     component: 'Input',
+    disabled:true,
   },
   {
     label: '支付方式',
-    fieldName: 'carNumber',
-    component: 'Input',
+    fieldName: 'payType',
+    component: 'Select',
+    componentProps:{
+      options:getDictOptions('wy_zffs'),
+    },
     rules: 'required',
   },
   {
     label: '缴费周期',
-    fieldName: 'personId',
-    component: 'Input',
+    fieldName: 'chargeCycle',
+    component: 'Select',
+    componentProps:{
+      options:getDictOptions('wy_jfzq'),
+    },
   },
   {
     label: '实收金额',
-    fieldName: 'costItemsId',
+    fieldName: 'cost',
     component: 'Input',
   },
   {
diff --git a/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue b/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
index b932f230..0a0f7e3f 100644
--- a/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
+++ b/apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue
@@ -1,35 +1,158 @@
 <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';
+import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
+import { communityTree } from '#/api/property/community';
+import { watch } from 'vue';
+import { costItemSettingList } from '#/api/property/costManagement/costItemSetting';
+import { meterReadingTypeList } from '#/api/property/costManagement/meterReadingType';
+import { getDictOptions } from '#/utils/dict';
 
 const emit = defineEmits<{ reload: [] }>();
-
+const costItemsOptions = ref<any>([]);
+const meterTypeOptions = ref<any>([]);
+const isMeterType = ref(false);
 const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
+const schema =[
+{
+    label: '抄表地址',
+    fieldName: 'location',
+    component: 'TreeSelect',
+    rules: 'required',
+  },
+  {
+    label: '费用类型',
+    fieldName: 'costType',
+    component: 'Select',
+    rules: 'required',
+    componentProps: {
+      options: getDictOptions('wy_cbfylx'),
+      onChange: async (value:any) => {
+        // 清空依赖字段
+        await formApi.setValues({
+          costItemsId: '',
+          meterTypeId: '',
+        });
+        // 请求并更新下拉
+        if (!value) {
+          costItemsOptions.value = [];
+          meterTypeOptions.value = [];
+         isMeterType.value = false
+        } else {
+         isMeterType.value = true
+          const costItemsRes = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: value });
+          costItemsOptions.value = (costItemsRes?.rows || []).map(item => ({
+            label: item.chargeItem,
+            value: item.id,
+          }));
+          const meterTypeRes = await meterReadingTypeList({ pageSize: 1000000000, pageNum: 1, costType: value == '5' ? 0 : 1 });
+          meterTypeOptions.value = (meterTypeRes?.rows || []).map(item => ({
+            label: item.name,
+            value: item.id,
+          }));
+        }
+        // 更新表单下拉
+        formApi.updateSchema([
+          {
+            fieldName: 'costItemsId',
+            componentProps: {
+              options: costItemsOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+          {
+            fieldName: 'meterTypeId',
+            componentProps: {
+              options: meterTypeOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+        ]);
+      }
+    }
+  },
+  {
+    label: '收费项目',
+    fieldName: 'costItemsId',
+    component: 'Select',
+    rules: 'required',
+    componentProps: {
+      options: costItemsOptions.value,
+      disabled: !isMeterType.value,
+    }
+  },
+  {
+    label: '抄表类型',
+    fieldName: 'meterTypeId',
+    component: 'Select',
+    rules: 'required',
+    componentProps: {
+      options: meterTypeOptions.value,
+      disabled: !isMeterType.value,
+    }
+  },
+  {
+    label: '上月止度',
+    fieldName: 'preDegrees',
+    component: 'Input',
+    rules: 'required',
+    disabled: true,
+  },
+  {
+    label: '本期度数',
+    fieldName: 'curDegrees',
+    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',
+    disabled:true
 
+  },
+  {
+    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: 'Input',
+  }
+];
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
     formItemClass: 'col-span-2',
     // 默认label宽度 px
-    labelWidth: 80,
+    labelWidth: 140,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     }
   },
-  schema: modalSchema(),
+  schema: schema,
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
 });
@@ -52,6 +175,8 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    isMeterType.value = false
+    setupCommunitySelect()
     modalApi.modalLoading(true);
 
     const { id } = modalApi.getData() as { id?: number | string };
@@ -78,6 +203,27 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? costMeterWaterUpdate(data) : costMeterWaterAdd(data));
     resetInitialized();
+    //必须要手动清空，不然ref会保留值
+    costItemsOptions.value = [];
+    meterTypeOptions.value = [];
+    isMeterType.value = false
+            // 更新表单下拉
+            formApi.updateSchema([
+          {
+            fieldName: 'costItemsId',
+            componentProps: {
+              options: costItemsOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+          {
+            fieldName: 'meterTypeId',
+            componentProps: {
+              options: meterTypeOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+        ]);
     emit('reload');
     modalApi.close();
   } catch (error) {
@@ -89,8 +235,65 @@ async function handleConfirm() {
 
 async function handleClosed() {
   await formApi.resetForm();
+  await formApi.setValues({})
+  costItemsOptions.value = [];
+  meterTypeOptions.value = [];
+  isMeterType.value = false
+          // 更新表单下拉
+          formApi.updateSchema([
+          {
+            fieldName: 'costItemsId',
+            componentProps: {
+              options: costItemsOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+          {
+            fieldName: 'meterTypeId',
+            componentProps: {
+              options: meterTypeOptions.value,
+              disabled: !isMeterType.value,
+            },
+          },
+        ]);
   resetInitialized();
 }
+// 获取服务地址
+async function setupCommunitySelect() {
+  const areaList = await communityTree(5);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, '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',
+        },
+        getPopupContainer,
+        placeholder: '请选择房间',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'location',
+    },
+  ]);
+}
 </script>
 
 <template>
@@ -98,4 +301,15 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>
 
diff --git a/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts b/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
index 7fb9f87b..f01fd5a1 100644
--- a/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/costMeterWater/data.ts
@@ -1,53 +1,10 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-
+import { getDictOptions } from '#/utils/dict';
+import { costItemSettingList } from '#/api/property/costManagement/costItemSetting';
+import {meterReadingTypeList} from '#/api/property/costManagement/meterReadingType';
 
 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',
@@ -60,21 +17,22 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '主键',
+    title: '序号',
     field: 'id',
+    slots: {
+      default: ({ rowIndex }) => {
+        return (rowIndex + 1).toString();
+      },
+    },
   },
   {
-    title: '费用类型id',
+    title: '费用类型',
     field: 'itemId',
   },
   {
-    title: '抄表类型id',
+    title: '抄表类型',
     field: 'meterTypeId',
   },
-  {
-    title: '对象名称',
-    field: 'objName',
-  },
   {
     title: '本期度数',
     field: 'curDegrees',
@@ -95,10 +53,6 @@ export const columns: VxeGridProps['columns'] = [
     title: '备注',
     field: 'remark',
   },
-  {
-    title: '搜索值',
-    field: 'searchValue',
-  },
   {
     field: 'action',
     fixed: 'right',
@@ -119,22 +73,66 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
   {
-    label: '费用类型id',
-    fieldName: 'itemId',
-    component: 'Input',
+    label: '抄表地址',
+    fieldName: 'location',
+    component: 'TreeSelect',
     rules: 'required',
   },
   {
-    label: '抄表类型id',
+    label: '费用类型',
+    fieldName: 'costType',
+    component: 'Select',
+    rules: 'required',
+    componentProps: () => ({
+      options: getDictOptions('wy_cbfylx'),
+    }),
+  },
+  {
+    label: '收费项目',
+    fieldName: 'costItemsId',
+    component: 'ApiSelect',
+    rules: 'required',
+    // componentProps: (values)=>{
+    //   const disabled = values.costType === undefined;
+    //   return {
+    //   api: async ()=>{
+    //     console.log(values);
+        
+    //     const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:values.costType});
+    //     return rows;
+    //   },
+    //     resultField:'rows',
+    //     labelField:'chargeItem',
+    //     valueField: 'id',
+    //     disabled,
+    //   }
+    // }
+  },
+  {
+    label: '抄表类型',
     fieldName: 'meterTypeId',
-    component: 'Input',
+    component: 'ApiSelect',
     rules: 'required',
+    // componentProps:(values)=>{
+    //   const disabled = values.costType === undefined;
+    //   return {
+    //     api: async()=>{
+    //       const rows = await meterReadingTypeList({pageSize:1000000000,pageNum:1,costType:values.costType=='5'?0:1});
+    //       return rows;      
+    //   },
+    //       resultField:'rows',
+    //       labelField:'name',
+    //       valueField: 'id',
+    //       disabled
+    //   }
+    // }
   },
-  {
-    label: '对象名称',
-    fieldName: 'objName',
+    {
+    label: '上期度数',
+    fieldName: 'preDegrees',
     component: 'Input',
     rules: 'required',
+    disabled: true,
   },
   {
     label: '本期度数',
@@ -142,12 +140,6 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Input',
     rules: 'required',
   },
-  {
-    label: '上期度数',
-    fieldName: 'preDegrees',
-    component: 'Input',
-    rules: 'required',
-  },
   {
     label: '上期读表时间',
     fieldName: 'preReadingTime',
@@ -175,9 +167,4 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'remark',
     component: 'Textarea',
   },
-  {
-    label: '搜索值',
-    fieldName: 'searchValue',
-    component: 'Input',
-  },
 ];