diff --git a/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts b/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
index 46089c13..2188b2fb 100644
--- a/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
+++ b/apps/web-antd/src/api/property/costManagement/houseCharge/model.d.ts
@@ -1,4 +1,6 @@
 import type {PageQuery, BaseEntity} from '#/api/common';
+import type {RoomVO} from "#/api/property/room/model";
+import type {CostItemSettingVO} from "#/api/property/costManagement/costItemSetting/model";
 
 export interface HouseChargeVO {
   /**
@@ -46,7 +48,16 @@ export interface HouseChargeVO {
    * 缴费周期
    */
   chargeCycle: number;
+  /**
+   * 支付方式
+   */
+  payType: string;
 
+  roomVo: RoomVO;
+
+  costItemsVo: CostItemSettingVO;
+
+  chargeStatus: string;
 }
 
 export interface HouseChargeForm extends BaseEntity {
@@ -90,6 +101,10 @@ export interface HouseChargeForm extends BaseEntity {
    */
   remark?: string;
 
+  /**
+   * 缴费状态
+   */
+  chargeStatus?: string;
 }
 
 export interface HouseChargeQuery extends PageQuery {
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts b/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
index 3ff35ae1..62608784 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/data.ts
@@ -25,10 +25,10 @@ export const querySchema: FormSchemaGetter = () => [
   },
   {
     component: 'Select',
-    fieldName: 'state',
-    label: '状态',
+    fieldName: 'chargeStatus',
+    label: '缴费状态',
     componentProps: {
-      options: getDictOptions('wy_fysfzt')
+      options: getDictOptions('wy_fyshzt')
     },
   },
 ];
@@ -60,15 +60,25 @@ export const columns: VxeGridProps['columns'] = [
     width: 150,
   },
   {
-    title: '状态',
-    field: 'state',
+    title: '缴费状态',
+    field: 'chargeStatus',
     width: 150,
     slots: {
       default: ({row}) => {
-        return renderDict(row.state, 'wy_fysfzt')
+        return renderDict(row.chargeStatus, 'wy_fyshzt')
       }
     }
   },
+  // {
+  //   title: '状态',
+  //   field: 'state',
+  //   width: 150,
+  //   slots: {
+  //     default: ({row}) => {
+  //       return renderDict(row.state, 'wy_fysfzt')
+  //     }
+  //   }
+  // },
   {
     title: '说明',
     field: 'remark',
@@ -101,6 +111,14 @@ export const modalSchema: FormSchemaGetter = () => [
     },
     rules: 'selectRequired',
   },
+  {
+    label: '业主',
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    componentProps: {
+    },
+    rules: 'selectRequired',
+  },
   {
     label: '费用类型',
     fieldName: 'costType',
@@ -179,3 +197,20 @@ export const modalSchemaUpdate: FormSchemaGetter = () => [
     rules: 'selectRequired',
   },
 ]
+export const modalSchemaRefund: FormSchemaGetter = () => [
+  {
+    label: '主键',
+    fieldName: 'id',
+    component: 'Input',
+    dependencies: {
+      show: () => false,
+      triggerFields: [''],
+    },
+  },
+  {
+    label: '退费原因',
+    fieldName: 'reason',
+    component: 'Textarea',
+    formItemClass: 'col-span-2'
+  },
+]
diff --git 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
index 65d12bac..c10c48cf 100644
--- 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
@@ -23,8 +23,9 @@ const [BasicModal, modalApi] = useVbenModal({
 });
 
 const houseChargeDetail = shallowRef<null | HouseChargeVO>(null);
-const room=ref<RoomVO>();
-const costItem=ref<CostItemSettingVO>();
+const room = ref<RoomVO>();
+const costItem = ref<CostItemSettingVO>();
+
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
@@ -32,9 +33,9 @@ async function handleOpenChange(open: boolean) {
   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
+  if (houseChargeDetail.value) {
+    room.value = houseChargeDetail.value.roomVo
+    costItem.value = houseChargeDetail.value.costItemsVo
   }
   modalApi.modalLoading(false);
 }
@@ -52,39 +53,46 @@ async function handleOpenChange(open: boolean) {
       </DescriptionsItem>
       <DescriptionsItem label="费用类型">
         <component v-if="costItem"
-          :is="renderDict(costItem.costType,'pro_expense_type')"
+                   :is="renderDict(costItem.costType,'pro_expense_type')"
         />
       </DescriptionsItem>
       <DescriptionsItem label="计费时间">
-        {{ houseChargeDetail.startTime+' 至 '+houseChargeDetail.endTime }}
+        {{ houseChargeDetail.startTime + ' 至 ' + houseChargeDetail.endTime }}
       </DescriptionsItem>
       <DescriptionsItem label="房间">
-        {{room?.roomNumber}}
+        {{ room?.roomNumber }}
       </DescriptionsItem>
       <DescriptionsItem label="房间面积">
-        {{`建筑面积：${room?.area} 套内面积：${room?.insideInArea}`}}
+        {{ `建筑面积：${room?.area} 套内面积：${room?.insideInArea}` }}
       </DescriptionsItem>
       <DescriptionsItem label="单价">
         {{ costItem?.unitPrice }}
       </DescriptionsItem>
       <DescriptionsItem label="附加费">
-        {{costItem?.surcharge}}
+        {{ costItem?.surcharge }}
       </DescriptionsItem>
       <DescriptionsItem label="应收金额">
-        <span style="font-size: 16px;font-weight: 600;color: red" v-if="houseChargeDetail.amountReceivable">
-         ￥ {{houseChargeDetail.amountReceivable}}
-        </span>
+        <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')"
+            :is="renderDict(houseChargeDetail.payType,'wy_zffs')"
         />
       </DescriptionsItem>
       <DescriptionsItem label="缴费周期" v-if="houseChargeDetail.chargeCycle">
-        {{houseChargeDetail.chargeCycle}}月
+        {{ houseChargeDetail.chargeCycle }}月
       </DescriptionsItem>
       <DescriptionsItem label="说明" :span="2">
-        {{houseChargeDetail.remark}}
+        {{ houseChargeDetail.remark }}
       </DescriptionsItem>
     </Descriptions>
   </BasicModal>
diff --git 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
new file mode 100644
index 00000000..31daf8da
--- /dev/null
+++ 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>
+
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
index b11da258..fd8d9861 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-add.vue
@@ -18,6 +18,8 @@ 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: [] }>();
 
@@ -65,6 +67,7 @@ const [BasicModal, modalApi] = useVbenModal({
     await initRoomOptions()
     await queryCostItemOptions()
     await initCostTypeOptions()
+    await queryPersonData()
     const {id} = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
@@ -191,6 +194,28 @@ async function initCostTypeOptions(){
     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>
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
index 158751de..620cd3ef 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/houseCharge-update.vue
@@ -85,7 +85,8 @@ async function handleConfirm() {
     const data = cloneDeep(await formApi.getValues());
     record.value.payType = data.payType
     record.value.chargeCycle = data.chargeCycle
-    await houseChargeUpdate(record.value) ;
+    record.value.chargeStatus = '4'
+    await houseChargeUpdate(record.value);
     resetInitialized();
     emit('reload');
     modalApi.close();
@@ -115,7 +116,7 @@ async function handleClosed() {
       </DescriptionsItem>
       <DescriptionsItem label="费用类型">
         <component
-            v-if="costItem"
+          v-if="costItem"
           :is="renderDict(costItem?.costType,'pro_expense_type')"
         />
       </DescriptionsItem>
@@ -123,7 +124,7 @@ async function handleClosed() {
         {{ record.startTime }}
       </DescriptionsItem>
       <DescriptionsItem label="房间">
-        {{ room.roomNumber }}
+        {{ room?.roomNumber }}
       </DescriptionsItem>
       <DescriptionsItem label="面积(㎡)">
         {{ `${room?.area} （套内面积：${room?.insideInArea}）` }}
@@ -134,7 +135,7 @@ async function handleClosed() {
       <DescriptionsItem label="附加费">
         {{ costItem?.surcharge }}
       </DescriptionsItem>
-      <DescriptionsItem label="应收金额" :span="2">
+      <DescriptionsItem label="缴费金额" :span="2">
         <span style="font-size: 16px;font-weight: 600;color: red" v-if="record.amountReceivable">
          ￥ {{ record.amountReceivable }}
         </span>
diff --git a/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue b/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
index 657226eb..7e449bef 100644
--- a/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
+++ b/apps/web-antd/src/views/property/costManagement/houseCharge/index.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 
-import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
+import {Page, useVbenModal, type VbenFormProps} from '@vben/common-ui';
+import {getVxePopupContainer} from '@vben/utils';
 
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import {Modal, Popconfirm, Space} from 'ant-design-vue';
 
 import {
   useVbenVxeGrid,
@@ -16,13 +16,14 @@ import {
   houseChargeList,
   houseChargeRemove,
 } from '#/api/property/costManagement/houseCharge';
-import type { HouseChargeForm } from '#/api/property/costManagement/houseCharge/model';
-import { commonDownloadExcel } from '#/utils/file/download';
+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 { columns, querySchema } from './data';
+import houseChargeRefund from './house-charge-refund.vue';
+import {columns, querySchema} from './data';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -52,7 +53,7 @@ const gridOptions: VxeGridProps = {
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      query: async ({ page }, formValues = {}) => {
+      query: async ({page}, formValues = {}) => {
         return await houseChargeList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -82,6 +83,9 @@ const [HouseChargeUpdate, updateApi] = useVbenModal({
 const [HouseChargeDetail, detailApi] = useVbenModal({
   connectedComponent: houseChargeDetail,
 });
+const [HouseChargeRefund, refundApi] = useVbenModal({
+  connectedComponent: houseChargeRefund,
+});
 
 function handleAdd() {
   modalApi.setData({});
@@ -89,11 +93,12 @@ function handleAdd() {
 }
 
 async function handleEdit(row: Required<HouseChargeForm>) {
-  updateApi.setData({ id: row.id });
+  updateApi.setData({id: row.id});
   updateApi.open();
 }
+
 async function handleInfo(row: Required<HouseChargeForm>) {
-  detailApi.setData({ id: row.id });
+  detailApi.setData({id: row.id});
   detailApi.open();
 }
 
@@ -102,6 +107,11 @@ async function handleDelete(row: Required<HouseChargeForm>) {
   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);
@@ -160,12 +170,22 @@ function handleDownloadExcel() {
             {{ $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="确认取消？"
@@ -175,15 +195,17 @@ function handleDownloadExcel() {
               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()" />
+    <HouseChargeAdd @reload="tableApi.query()"/>
+    <HouseChargeUpdate @reload="tableApi.query()"/>
+    <HouseChargeRefund @reload="tableApi.query()"/>
     <HouseChargeDetail/>
   </Page>
 </template>