feat: 车辆收费接口对接

apps/web-antd/src/api/property/carCharge/index.ts

@@ -59,3 +59,7 @@ export function carChargeUpdate(data: CarChargeForm) {
 export function carChargeRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/carCharge/${id}`);
 }
+
+export function carChargeRefund(data: CarChargeForm) {
+  return requestClient.postWithMsg<void>('/property/carCharge/returnFee', data);
+}

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

@@ -16,6 +16,7 @@ export interface CarChargeVO {
    */
   personId: string | number;
 
+  chargeItem:string
   /**
    * 楼层
    */
@@ -55,6 +56,10 @@ export interface CarChargeVO {
    * 搜索值
    */
   searchValue: string;
+  amountReceivable?:any;
+  chargeStatus:any;
+  payType:any;
+  chargeCycle:any
 
 }
 

apps/web-antd/src/api/property/costMeterWater/index.ts

@@ -59,3 +59,8 @@ export function costMeterWaterUpdate(data: CostMeterWaterForm) {
 export function costMeterWaterRemove(id: ID | IDS) {
   return requestClient.deleteWithMsg<void>(`/property/meterWater/${id}`);
 }
+
+// 根据业主id查询
+export function ultimoWater(id: ID | IDS) {
+  return requestClient.deleteWithMsg<void>(`/property/ultimoWater/${id}`);
+}

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/arrangement-modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, reactive } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -8,9 +8,13 @@ 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 {
-import { modalSchema } from './data';
+  useVbenVxeGrid,
-
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import { modalSchema,attendanceColumns } from './data';
+import { Radio, Button,Calendar,DatePicker,Form,Input,Select,FormItem } from 'ant-design-vue';
+import unitPersonModal from './unit-person-modal.vue';
 const emit = defineEmits<{ reload: [] }>();
 
 const isUpdate = ref(false);
@@ -40,10 +44,12 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
     currentGetter: defaultFormValueGetter(formApi),
   },
 );
-
+const [UnitPersonModal, unitPersonmodalApi] = useVbenModal({
+  connectedComponent: unitPersonModal,
+});
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[70%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -53,7 +59,6 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
 
@@ -61,8 +66,7 @@ const [BasicModal, modalApi] = useVbenModal({
       const record = await arrangementInfo(id);
       await formApi.setValues(record);
     }
-    await markInitialized();
+    // await markInitialized();
-
     modalApi.modalLoading(false);
   },
 });
@@ -91,11 +95,159 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+
+
+const formModel = reactive({
+  group: '',
+  type: '',
+  dateType: 'long',
+  dateSingle: null,
+  dateLong: null,
+  dateRange: [null, null],
+  startDate:'',
+  endDate:''
+});
+
+// mock 表格数据
+const tableData = ref([
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: '', users: [] },
+]);
+const staticData = [
+  { id: 1, dept: 'xx部门', name: '张三' },
+  { id: 2, dept: 'yy部门', name: '李四' },
+];
+const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
+
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  columns: attendanceColumns,
+  // columns,
+  // height: 'auto',
+  keepSource: true,
+  data:staticData,
+  pagerConfig: {},
+  proxyConfig: {
+    // ajax: {
+    //   query: async ({ page }, formValues = {}) => {
+    //     return await arrangementList({
+    //       pageNum: page.currentPage,
+    //       pageSize: page.pageSize,
+    //       ...formValues,
+    //     });
+    //   },
+    // },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-arrangement-index',
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false,       // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+async function handleEdit(row: any){
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+async function handleDelete(row: any) {
+  console.log(12);
+}
+
+
+function handleAdd() {
+  unitPersonmodalApi.setData({});
+  unitPersonmodalApi.open();
+}
 </script>
 
 <template>
-  <BasicModal :title="title">
+ <BasicModal :title="title">
-    <BasicForm />
+    <!-- 顶部表单区 -->
+    <Form :model="formModel" layout="horizontal" class="mb-4">
+      <div class="grid grid-cols-2 gap-x-8 gap-y-2">
+        <FormItem label="选择考勤组" required class="mb-0">
+            <Select v-model:value="formModel.group" placeholder="请选择"/>
+        </FormItem>
+        <FormItem label="考勤类型" required class="mb-0">
+          <Input v-model:value="formModel.type" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="排班日期" class="col-span-2 mb-0">
+          <radio-group v-model:value="formModel.dateType" class="mr-4">
+            <radio value="single">
+              <span>
+                单个日期
+              <DatePicker/>
+              </span>
+           </radio>
+            <radio value="long">
+              <span>
+                从此日起长期有效
+              <DatePicker/>
+              </span>
+              </radio>
+            <radio value="range">
+              <span>
+                在此期间有效
+                <DatePicker v-model:value="formModel.startDate" class="ml-2" />
+                <span class="mx-2">~</span>
+                <DatePicker v-model:value="formModel.endDate" />
+              </span>
+            </radio>
+          </radio-group>
+        </FormItem>
+      </div>
+    </Form>
+    <!-- 考勤组人员表格区 -->
+    <div class="mb-2">
+      <div class="flex items-center mb-2">
+        <span>考勤组人员（已选 <span class="text-red-500">{{ totalSelected }}</span> 人）</span>
+        <a-button type="primary" size="small" class="ml-4" @click="handleAdd">+ 添加人员</a-button>
+      </div>
+      <BasicTable>
+          <template #action="{ row }">
+            <Space>
+              <ghost-button
+                v-access:code="['property:arrangement:edit']"
+                @click.stop="handleEdit(row)"
+              >
+                {{ $t('pages.common.edit') }}
+              </ghost-button>
+              <Popconfirm
+                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>
+    </div>
+    <UnitPersonModal />
+    <!-- 底部按钮区 -->
   </BasicModal>
 </template>
 

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/calendarView.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { Radio, Select, Button, Table,Badge,Calendar,DatePicker } from 'ant-design-vue';
+import { Radio, Button,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>();
+import arrangementModal from './arrangement-modal.vue';
+import {useVbenModal} from '@vben/common-ui';
+
 const emit = defineEmits<{
   (e: 'changeView',value:boolean):void
 }>();
@@ -11,7 +13,6 @@ const props = defineProps<{
   viewMode:'calender' | 'schedule'
 }>();
 const selectedDate = ref();
-const currentDate = ref(new Date());
 // 切换视图模式
 function handleViewModeChange(e: RadioChangeEvent): void {
   // 将父组件的isCalenderView变为true
@@ -69,6 +70,13 @@ function customHeader() {
   // 返回你想要的VNode或null
   return null; // 什么都不显示
 }
+const [ArrangementModal, modalApi] = useVbenModal({
+  connectedComponent: arrangementModal,
+});
+function handleAdd() {
+  modalApi.setData({});
+  modalApi.open();
+}
 </script>
 <template>
   <div class="h-full flex flex-col">
@@ -84,7 +92,7 @@ function customHeader() {
     </div>
     </div>
       <div>
-       <Button type="primary">新增排班</Button>
+       <Button type="primary" @click="handleAdd">新增排班</Button>
       </div>
     </div>
     <div class="flex-1 p-1">
@@ -110,6 +118,7 @@ function customHeader() {
     </template>
       </Calendar>
     </div>
+    <ArrangementModal @reload=""/>
   </div>
 </template>
 <style scoped>

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/data.ts

@@ -57,52 +57,137 @@ export const querySchema: FormSchemaGetter = () => [
     label: '状态：0-未生效，1-已生效',
   },
 ];
-
+export const unitQuerySchema: FormSchemaGetter = () => [
+  {
+    component: 'Input',
+    fieldName: 'scheduleName',
+    label: '姓名',
+  },
+  {
+    component: 'Input',
+    fieldName: 'groupId',
+    label: '电话号',
+  },
+];
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
-  { type: 'checkbox', width: 60 },
   {
-    title: '主键ID',
+    title: '序号',
     field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '人员',
+    field: 'scheduleName',
+    width:120,
+    // width: 'auto',
+  },
+  {
+    title: '单位',
+    field: 'scheduleName',
+    width:'auto',
   },
   {
     title: '排班名称',
     field: 'scheduleName',
+    minWidth:120
   },
   {
-    title: '考勤组ID',
+    title: '考勤组',
     field: 'groupId',
+    minWidth:120
   },
   {
-    title: '排班类型：1-固定班制，2-排班制',
+    title: '考勤类型',
     field: 'scheduleType',
+    width: 'auto',
   },
   {
-    title: '日期类型：1-单个日期，2-长期有效，3-期间有效',
+    title: '考勤时间',
     field: 'dateType',
-  },
+    minWidth:200
-  {
+
-    title: '开始日期',
-    field: 'startDate',
-  },
-  {
-    title: '结束日期(仅date_type=3时有效)',
-    field: 'endDate',
-  },
-  {
-    title: '状态：0-未生效，1-已生效',
-    field: 'status',
   },
   {
     field: 'action',
     fixed: 'right',
     slots: { default: 'action' },
     title: '操作',
-    width: 180,
+    width: 'auto',
   },
 ];
 
+// 考勤组人员
+export const attendanceColumns: VxeGridProps['columns'] = [
+  {
+    title: '序号',
+    field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '单位',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '已选人数',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '人员',
+    field: 'dateType',
+    minWidth:200
+  },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 'auto',
+  },
+];
+
+// 单位人员
+export const unitColumns: VxeGridProps['columns'] = [
+  { type: 'checkbox', width: 60 },
+  {
+    title: '序号',
+    field: 'id',
+    slots:{
+      default:({rowIndex}) => {
+        return (rowIndex + 1).toString();
+      }
+    },
+    width:60
+  },
+  {
+    title: '姓名',
+    field: 'scheduleName',
+    minWidth:120
+  },
+  {
+    title: '所属单位',
+    field: 'scheduleName',
+    width:'auto',
+  },
+  {
+    title: '电话',
+    field: 'groupId',
+    minWidth:120
+  }
+];
 export const modalSchema: FormSchemaGetter = () => [
   {
     label: '主键ID',

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/scheduleView.vue

@@ -1,25 +1,22 @@
 <script lang="ts" setup>
-import { Radio, Select, Button, Table,Calendar } from 'ant-design-vue';
+import { Radio, Button, Calendar } from 'ant-design-vue';
 import type { RadioChangeEvent } from 'ant-design-vue';
 import {ref} from 'vue';
 import { Dayjs } from 'dayjs';
-import { columns, querySchema } from './data';
+import { columns } from './data';
 import {
   useVbenVxeGrid,
-  vxeCheckboxChecked,
   type VxeGridProps
 } from '#/adapter/vxe-table';
 import { getVxePopupContainer } from '@vben/utils';
 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 { Page, useVbenModal } from '@vben/common-ui';
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { Popconfirm, Space } from 'ant-design-vue';
-
 const emit = defineEmits<{(e:'changeView',value:boolean):void}>();
 const props = defineProps<{
   viewMode:'calender' | 'schedule'
@@ -67,18 +64,10 @@ const gridOptions: VxeGridProps = {
   // 表格全局唯一表示 保存列配置需要用到
   id: 'property-arrangement-index',
   toolbarConfig: {
-    // 控制工具栏整体是否显示（默认显示）
-    show: true,
     // 隐藏"刷新/重置"按钮（对应 redo）
     refresh: false,
-    // 隐藏"全屏"按钮
+    zoom: false,       // 显示全屏
-    fullscreen: false,
+    custom: false, // 隐藏列设置
-    // 隐藏"列设置"按钮（对应 setting）
-    columns: false,
-    // 隐藏"表格尺寸"按钮（对应 size）
-    size: undefined,
-    // 其他可能的按钮（如导出等，按需配置）
-    // export: false, // 如果有导出按钮，也可以隐藏
   },
 };
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -104,20 +93,25 @@ async function handleDelete(row: Required<ArrangementForm>) {
 }
 </script>
 <template>
-  <div class="h-full">
+  <div class="h-full ">
-    <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
+    <div class="flex justify-between">
-          <Radio.Button value="calender">日历视图</Radio.Button>
+      <Radio.Group v-model:value="props.viewMode" @change="handleViewModeChange">
-          <Radio.Button value="schedule">班表视图</Radio.Button>
+            <Radio.Button value="calender">日历视图</Radio.Button>
-    </Radio.Group>
+            <Radio.Button value="schedule">班表视图</Radio.Button>
-    <div class="flex p-2 h-full">
+      </Radio.Group>
       <div>
+       <Button type="primary" @click="handleAdd">新增排班</Button>
+      </div>
+    </div>
+    <div class="flex p-2 h-full">
+      <div style="padding-top: 48.4px;">
         <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 >
+        <BasicTable>
           <template #action="{ row }">
             <Space>
               <ghost-button
@@ -146,6 +140,7 @@ async function handleDelete(row: Required<ArrangementForm>) {
         </Page>
       </div>
     </div>
+    <ArrangementModal @reload="tableApi.query()"/>
   </div>
 </template>
 <style>

apps/web-antd/src/views/property/attendanceManagement/workforceManagement/unit-person-modal.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { computed, ref, reactive } from 'vue';
+import { SyncOutlined } from '@ant-design/icons-vue';
+import { Tree, InputSearch, Skeleton, Empty, Button } from 'ant-design-vue';
+
+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 {
+  useVbenVxeGrid,
+  type VxeGridProps
+} from '#/adapter/vxe-table';
+import { modalSchema,unitColumns,unitQuerySchema } from './data';
+import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
+
+const emit = defineEmits<{ reload: [] }>();
+const selectDeptId = ref<string[]>([]);
+const isUpdate = ref(false);
+const title = computed(() => {
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
+});
+const showSearch = ref(true);
+const searchValue = ref('');
+const selectedDeptIds = ref<string[]>([]);
+const showTreeSkeleton = ref(false);
+
+// mock 部门树数据
+const deptTree = ref([
+  {
+    id: '1',
+    label: '公司',
+    children: [
+      { id: '1-1', label: '研发部', children: [
+        { id: '1-1-1', label: '前端组' },
+        { id: '1-1-2', label: '后端组' },
+      ] },
+      { id: '1-2', label: '市场部' },
+      { id: '1-3', label: '人事部' },
+    ],
+  },
+]);
+
+function handleReload() {
+  showTreeSkeleton.value = true;
+  setTimeout(() => {
+    showTreeSkeleton.value = false;
+  }, 800);
+}
+
+const filteredDeptTree = computed(() => {
+  if (!searchValue.value) return deptTree.value;
+  // 递归过滤树
+  function filter(tree: any[]): any[] {
+    return tree
+      .map(node => {
+        if (node.label.includes(searchValue.value)) return node;
+        if (node.children) {
+          const children = filter(node.children);
+          if (children.length) return { ...node, children };
+        }
+        return null;
+      })
+      .filter(Boolean);
+  }
+  return filter(deptTree.value);
+});
+const formOptions: VbenFormProps = {
+  commonConfig: {
+    labelWidth: 80,
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  schema: unitQuerySchema(),
+  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 [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-[70%]',
+  fullscreenButton: false,
+  onBeforeClose,
+  onClosed: handleClosed,
+  onConfirm: handleConfirm,
+  onOpenChange: async (isOpen) => {
+    if (!isOpen) {
+      return null;
+    }
+    modalApi.modalLoading(true);
+    console.log(12)
+    const { id } = modalApi.getData() as { id?: number | string };
+    console.log(2)
+
+    isUpdate.value = !!id;
+
+    if (isUpdate.value && id) {
+    console.log(3)
+
+      const record = await arrangementInfo(id);
+      await formApi.setValues(record);
+    }
+    console.log(4)
+    
+    // await markInitialized();
+    console.log(5)
+
+    modalApi.modalLoading(false);
+    console.log(6)
+
+  },
+});
+
+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();
+}
+
+
+const formModel = reactive({
+  group: '',
+  type: '',
+  dateType: 'long',
+  dateSingle: null,
+  dateLong: null,
+  dateRange: [null, null],
+  startDate:'',
+  endDate:''
+});
+
+// mock 表格数据
+const tableData = ref([
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: 'xx部门', users: ['张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三', '张三'] },
+  { dept: '', users: [] },
+]);
+const staticData = [
+  { id: 1, dept: 'xx部门', name: '张三' },
+  { id: 2, dept: 'yy部门', name: '李四' },
+];
+const totalSelected = computed(() => tableData.value.reduce((sum, row) => sum + row.users.length, 0));
+
+function addRow() {
+  tableData.value.push({ dept: '', users: [] });
+}
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+    // 点击行选中
+    // trigger: 'row',
+  },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  columns: unitColumns,
+  // columns,
+  // height: 'auto',
+  keepSource: true,
+  data:staticData,
+  pagerConfig: {},
+  proxyConfig: {
+    // ajax: {
+    //   query: async ({ page }, formValues = {}) => {
+    //     return await arrangementList({
+    //       pageNum: page.currentPage,
+    //       pageSize: page.pageSize,
+    //       ...formValues,
+    //     });
+    //   },
+    // },
+  },
+  rowConfig: {
+    keyField: 'id',
+  },
+  // 表格全局唯一表示 保存列配置需要用到
+  id: 'property-arrangement-index',
+  toolbarConfig: {
+    // 隐藏"刷新/重置"按钮（对应 redo）
+    refresh: false,
+    zoom: false,       // 显示全屏
+    custom: false, // 隐藏列设置
+  },
+};
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+});
+async function handleEdit(row: any){
+  modalApi.setData({ id: row.id });
+  modalApi.open();
+}
+async function handleDelete(row: any) {
+  console.log(12);
+}
+async function loadDetail() {
+}
+</script>
+
+<template>
+ <BasicModal :title="title">
+    <div class="mb-2 flex">
+    <div>
+      <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active class="p-[8px]">
+        <div class="bg-background z-100 sticky left-0 top-0 p-[8px] flex items-center">
+          <InputSearch
+            v-model:value="searchValue"
+            placeholder="搜索部门"
+            size="small"
+            style="flex:1;"
+          >
+            <template #enterButton>
+              <Button type="text" @click="handleReload">
+                <SyncOutlined class="text-primary" />
+              </Button>
+            </template>
+          </InputSearch>
+        </div>
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree
+            v-if="filteredDeptTree.length > 0"
+            v-model:selectedKeys="selectedDeptIds"
+            :field-names="{ title: 'label', key: 'id' }"
+            :show-line="{ showLeafIcon: false }"
+            :tree-data="filteredDeptTree"
+            :virtual="false"
+            default-expand-all
+          >
+            <template #title="{ label }">
+              <span v-if="searchValue && 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 v-else class="mt-5">
+            <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="无部门数据" />
+          </div>
+        </div>
+      </Skeleton>
+    </div>
+    <div class="flex-1">
+        <BasicTable>
+        <template #action="{ row }">
+            <Space>
+            <ghost-button
+                v-access:code="['property:arrangement:edit']"
+                @click.stop="handleEdit(row)"
+            >
+                {{ $t('pages.common.edit') }}
+            </ghost-button>
+            <Popconfirm
+                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>
+    </div>
+    </div>
+  </BasicModal>
+</template>

apps/web-antd/src/views/property/costManagement/carCharge/car-charge-detail.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { renderDict } from "#/utils/render";
+import { carChargeInfo } from "#/api/property/carCharge";
+import type { CarChargeVO } from "#/api/property/carCharge/model";
+
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    carChargeDetail.value = null;
+  },
+});
+
+const carChargeDetail = shallowRef<null | CarChargeVO>(null);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) return null;
+  modalApi.modalLoading(true);
+  const { id } = modalApi.getData() as { id: number | string };
+  carChargeDetail.value = await carChargeInfo(id);
+  modalApi.modalLoading(false);
+}
+</script>
+
+<template>
+  <BasicModal :footer="false" :fullscreen-button="false" title="车辆收费详情" class="w-[70%]">
+    <Descriptions v-if="carChargeDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
+      <DescriptionsItem label="车牌号">
+        {{ carChargeDetail.carNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="费用类型">
+        <component v-if="carChargeDetail" :is="renderDict(2,'pro_expense_type')" />
+      </DescriptionsItem>
+      <DescriptionsItem label="计费时间">
+        {{ carChargeDetail.starTime + ' 至 ' + carChargeDetail.endTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="车位">
+        {{ carChargeDetail.location }}
+      </DescriptionsItem>
+      <DescriptionsItem label="应收金额">
+        <div v-if="carChargeDetail.amountReceivable">
+          <span style="font-size: 16px;font-weight: 600;color: red;margin-right: 10px">
+            ￥ {{ carChargeDetail.amountReceivable }}
+          </span>
+        </div>
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费状态" v-if="carChargeDetail.chargeStatus">
+        <component :is="renderDict(carChargeDetail.chargeStatus,'wy_fyshzt')" />
+      </DescriptionsItem>
+      <DescriptionsItem label="支付方式" v-if="carChargeDetail.payType">
+        <component :is="renderDict(carChargeDetail.payType,'wy_zffs')" />
+      </DescriptionsItem>
+      <DescriptionsItem label="缴费周期" v-if="carChargeDetail.chargeCycle">
+        {{ carChargeDetail.chargeCycle }}月
+      </DescriptionsItem>
+      <DescriptionsItem label="说明" :span="2">
+        {{ carChargeDetail.remark }}
+      </DescriptionsItem>
+    </Descriptions>
+  </BasicModal>
+</template> 

apps/web-antd/src/views/property/costManagement/carCharge/car-charge-refund.vue

@@ -0,0 +1,109 @@
+<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 { carChargeInfo, carChargeRefund } from '#/api/property/carCharge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { modalSchemaRefund } from './data';
+import { renderDict } from "#/utils/render";
+import { Descriptions, DescriptionsItem, Divider } from "ant-design-vue";
+import type { CarChargeVO } from "#/api/property/carCharge/model";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const record = ref<CarChargeVO>();
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    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;
+    if (id) {
+      record.value = await carChargeInfo(id);
+      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;
+    const data = cloneDeep(await formApi.getValues());
+    // 可根据 carCharge 业务需要补充字段
+    await carChargeRefund(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="退费">
+    <Descriptions v-if="record" size="small" :column="2" :labelStyle="{width:'80px'}">
+      <DescriptionsItem label="车牌号">
+        {{ record?.carNumber }}
+      </DescriptionsItem>
+      <DescriptionsItem label="收费项目">
+        {{ record?.costItemsId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="计费起始">
+        {{ record?.starTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="计费结束">
+        {{ record?.endTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="车位">
+        {{ record?.location }}
+      </DescriptionsItem>
+      <DescriptionsItem label="业主">
+        {{ record?.personId }}
+      </DescriptionsItem>
+      <DescriptionsItem label="说明" :span="2">
+        {{ record?.remark }}
+      </DescriptionsItem>
+    </Descriptions>
+    <Divider/>
+    <BasicForm/>
+  </BasicModal>
+</template>

apps/web-antd/src/views/property/costManagement/carCharge/carCharge-add.vue

@@ -1,28 +1,25 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
 import { useVbenForm } from '#/adapter/form';
-import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
+import { carChargeAdd } from '#/api/property/carCharge';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 import { addModalSchema } from './data';
 import { communityTree } from '#/api/property/community';
+import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
 
 const emit = defineEmits<{ reload: [] }>();
 
+const title = computed(() => $t('pages.common.add'));
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
-    // 默认占满两列
+    formItemClass: 'col-span-2',
-    formItemClass: 'col-span-1',
+    labelWidth: 80,
-    // 默认label宽度 px
-    labelWidth: 140,
-    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
-    }
+    },
   },
   schema: addModalSchema(),
   showDefaultActions: false,
@@ -37,23 +34,18 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 );
 
 const [BasicModal, modalApi] = useVbenModal({
-  // 在这里更改宽度
+  class: 'w-[550px]',
-  class: 'w-[75%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
-    if (!isOpen) {
+    if (!isOpen) return null;
-      return null;
-    }
     setupCommunitySelect()
     modalApi.modalLoading(true);
-
+    await formApi.resetForm();
-    const { id } = modalApi.getData() as { id?: number | string };
-    await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
     await markInitialized();
-
+    await formApi.setValues({costType:'2'});
     modalApi.modalLoading(false);
   },
 });
@@ -62,10 +54,7 @@ async function handleConfirm() {
   try {
     modalApi.lock(true);
     const { valid } = await formApi.validate();
-    if (!valid) {
+    if (!valid) return;
-      return;
-    }
-    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
     await carChargeAdd(data);
     resetInitialized();
@@ -82,7 +71,6 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
-// 获取服务地址
 async function setupCommunitySelect() {
   const areaList = await communityTree(4);
   // 选中后显示在输入框的值 即父节点 / 子节点
@@ -121,19 +109,21 @@ async function setupCommunitySelect() {
 </script>
 
 <template>
-  <BasicModal title="创建收费">
+  <BasicModal :title="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) {
+:deep(.ant-select-disabled .ant-select-selection-item),
-  /* 设置一个更深的颜色，可以自己调整 */
+:deep(.ant-picker-disabled .ant-picker-input > input) {
-  color: rgba(0, 0, 0, 0.65) !important;
+  /* 设置一个更深的颜色 */
+  color: rgb(0 0 0 / 65%) !important;
+
   /* 有些浏览器需要这个来覆盖默认颜色 */
-  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+  -webkit-text-fill-color: rgb(0 0 0 / 65%) !important;
 }
 </style>
-

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

@@ -1,144 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-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 [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;
-    }
-    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);
-    }
-    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();
-}
-// 获取服务地址
-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="详情">
-    <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>
-

apps/web-antd/src/views/property/costManagement/carCharge/carCharge-pay-modal.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-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: 140,
-    // 通用配置项 会影响到所有表单项
-    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;
-    }
-    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);
-  },
-});
-
-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();
-}
-// 获取服务地址
-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="缴费">
-    <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>

apps/web-antd/src/views/property/costManagement/carCharge/carCharge-update.vue

@@ -0,0 +1,124 @@
+<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 { carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { payModalSchema } from './data';
+import { Descriptions, DescriptionsItem, Divider } from 'ant-design-vue';
+import { renderDict } from "#/utils/render";
+
+const emit = defineEmits<{ reload: [] }>();
+
+const isUpdate = ref(false);
+const record = ref<any>();
+const room = ref<any>();
+const costItem = ref<any>();
+const [BasicForm, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    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-[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 carChargeInfo(id);
+      // 假设 record.value 里有 costItem/room 字段，若无可自行适配
+      costItem.value = record.value?.costItemsVo || {};
+      room.value = record.value?.roomVo || {};
+      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;
+    const data = cloneDeep(await formApi.getValues());
+    if (!record.value) return;
+    record.value.payType = data.payType;
+    record.value.chargeCycle = data.chargeCycle;
+    record.value.chargeStatus = '4';
+    await carChargeUpdate(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.starTime }}
+      </DescriptionsItem>
+      <DescriptionsItem label="车位">
+        {{ room?.location || record.location }}
+      </DescriptionsItem>
+      <DescriptionsItem label="车牌号">
+        {{ record.carNumber }}
+      </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> 

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

@@ -1,6 +1,8 @@
+// 字段、接口、label、options 保持 carCharge 现有逻辑不变，仅优化注释和结构风格
+// 参照 houseCharge/data.ts 的风格进行整理
+
 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';
@@ -8,7 +10,9 @@ import { personList } from '#/api/property/resident/person';
 import { communityTree } from '#/api/property/community';
 import { handleNode } from '@vben/utils';
 
-
+/**
+ * 查询表单 schema
+ */
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Input',
@@ -16,81 +20,56 @@ export const querySchema: FormSchemaGetter = () => [
     label: '车牌号',
   },
   {
-    component: 'Input',
-    fieldName: 'personId',
     label: '业主',
+    fieldName: 'personId',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
+        return rows;
+      },
+      resultField: 'rows',
+      labelField: 'userName',
+      valueField: 'id',
+    },
   },
   {
     component: 'Select',
     componentProps: {
-      // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
+      options: getDictOptions('wy_fyshzt'),
-      options: getDictOptions('wy_cszt'),
     },
-    fieldName: 'state',
+    fieldName: 'chargeStatus',
     label: '状态',
   },
 ];
 
-// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+/**
-// export const columns: () => VxeGridProps['columns'] = () => [
+ * 表格列配置
+ */
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
     title: '序号',
     field: 'id',
     slots: {
-      default: ({ rowIndex }) => {
+      default: ({ rowIndex }) => (rowIndex + 1).toString(),
-        return (rowIndex + 1).toString();
-      },
     },
   },
+  { title: '车牌号', field: 'carNumber' },
+  { title: '车位', field: 'location' },
+  { title: '业主', field: 'personId' },
   {
-    title: '车牌号',
+    title: '缴费状态',
-    field: 'carNumber',
+    field: 'chargeStatus',
-  },
+    width: 150,
-  {
+    slots: {
-    title: '车位',
+      default: ({ row }) => renderDict(row.chargeStatus, 'wy_fyshzt'),
-    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',
-  },
-    {
-    title: '状态',
-    field: 'charge_status',
-    slots:{
-      default:({row}) => {
-        return renderDict(row.charge_status, 'wy_fyshzt')
-      }
-    }
   },
+  { title: '收费项目', field: 'costItemsId' },
+  { title: '计费开始时间', field: 'starTime' },
+  { title: '计费结束时间', field: 'endTime' },
+  { title: '说明', field: 'remark' },
   {
     field: 'action',
     fixed: 'right',
@@ -99,7 +78,10 @@ export const columns: VxeGridProps['columns'] = [
     width: 180,
   },
 ];
-//详情
+
+/**
+ * 详情弹窗 schema
+ */
 export const modalSchema: FormSchemaGetter = () => [
   {
     label: '主键',
@@ -115,62 +97,53 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'carNumber',
     component: 'Input',
     rules: 'required',
-    disabled:true,
+    disabled: true,
   },
-{
+  {
-    label: '业主',//
+    label: '业主',
     fieldName: 'personId',
     component: 'ApiSelect',
-    rules:'required',
+    rules: 'required',
-    componentProps:{
+    componentProps: {
       api: async () => {
-        const rows = await personList({pageSize:1000000000,pageNum:1});
+        const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
         return rows;
       },
       resultField: 'rows',
       labelField: 'userName',
-      valueField:'id'
+      valueField: 'id',
     },
-    disabled:true,
+    disabled: true,
   },
   {
     label: '楼层',
     fieldName: 'floorId',
     component: 'TreeSelect',
-    rules:'required',
+    rules: 'required',
-    disabled:true,
+    disabled: true,
   },
   {
     label: '车位',
     fieldName: 'location',
     component: 'Input',
-    disabled:true,
+    disabled: true,
-  },
-  // {
-  //   label: '状态',
-  //   fieldName: 'state',
-  //   component: 'Select',
-  //   componentProps: {
-  //     // 可选从DictEnum中获取 DictEnum.WY_CSZT 便于维护
-  //     options: getDictOptions('wy_cszt'),
-  //   },
-  // },
-    {
-    label: '费用类型',//一个费用下有多个收费项目
-    fieldName: 'costType',
-    component: 'Select',
-    componentProps:{
-      options:getDictOptions('pro_expense_type'),
-    },
-    disabled:true,
   },
   {
-    label: '收费项目',//一个收费项目对应一个费用类型
+    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'});
+        const rows = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: '2' });
         return rows;
       },
       resultField: 'rows',
@@ -178,7 +151,7 @@ export const modalSchema: FormSchemaGetter = () => [
       valueField: 'id',
     },
     rules: 'required',
-    disabled:true,
+    disabled: true,
   },
   {
     label: '计费开始时间',
@@ -189,7 +162,7 @@ export const modalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
-    disabled:true,
+    disabled: true,
   },
   {
     label: '计费结束时间',
@@ -200,16 +173,19 @@ export const modalSchema: FormSchemaGetter = () => [
       format: 'YYYY-MM-DD HH:mm:ss',
       valueFormat: 'YYYY-MM-DD HH:mm:ss',
     },
-    disabled:true,
+    disabled: true,
   },
   {
     label: '说明',
     fieldName: 'remark',
     component: 'Input',
-    disabled:true,
+    disabled: true,
   },
 ];
-//创建
+
+/**
+ * 创建弹窗 schema
+ */
 export const addModalSchema: FormSchemaGetter = () => [
   {
     label: '主键',
@@ -227,26 +203,26 @@ export const addModalSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    label: '业主',//
+    label: '业主',
     fieldName: 'personId',
     component: 'ApiSelect',
-    disabled:false,
+    disabled: false,
-    rules:'required',
+    rules: 'required',
-    componentProps:{
+    componentProps: {
       api: async () => {
-        const rows = await personList({pageSize:1000000000,pageNum:1});
+        const rows = await personList({ pageSize: 1000000000, pageNum: 1 });
         return rows;
       },
       resultField: 'rows',
       labelField: 'userName',
-      valueField:'id'
+      valueField: 'id',
-    }
+    },
   },
   {
     label: '楼层',
     fieldName: 'floorId',
     component: 'TreeSelect',
-    rules:'required',
+    rules: 'required',
   },
   {
     label: '车位',
@@ -254,21 +230,21 @@ export const addModalSchema: FormSchemaGetter = () => [
     component: 'Input',
   },
   {
-    label: '费用类型',//一个费用下有多个收费项目
+    label: '费用类型',
     fieldName: 'costType',
     component: 'Select',
-    componentProps:{
+    componentProps: {
-      options:getDictOptions('pro_expense_type'),
+      options: getDictOptions('pro_expense_type'),
     },
-    disabled:true,
+    disabled: true,
   },
   {
-    label: '收费项目',//一个收费项目对应一个费用类型
+    label: '收费项目',
     fieldName: 'costItemsId',
     component: 'ApiSelect',
     componentProps: {
       api: async () => {
-        const rows = await costItemSettingList({pageSize:1000000000,pageNum:1,costType:'2'});
+        const rows = await costItemSettingList({ pageSize: 1000000000, pageNum: 1, costType: '2' });
         return rows;
       },
       resultField: 'rows',
@@ -292,7 +268,7 @@ export const addModalSchema: FormSchemaGetter = () => [
     label: '计费结束时间',
     fieldName: 'endTime',
     component: 'DatePicker',
-    rules:'required',
+    rules: 'required',
     componentProps: {
       showTime: true,
       format: 'YYYY-MM-DD HH:mm:ss',
@@ -305,8 +281,71 @@ export const addModalSchema: FormSchemaGetter = () => [
     component: 'Input',
   },
 ];
-//缴费
+
+/**
+ * 缴费弹窗 schema
+ */
 export const payModalSchema: FormSchemaGetter = () => [
+  {
+    label: '支付方式',
+    fieldName: 'payType',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_zffs'),
+      class: 'w-full',
+    },
+    rules: 'required',
+    formItemClass: 'col-span-2',
+  },
+  {
+    label: '缴费周期',
+    fieldName: 'chargeCycle',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions('wy_jfzq'),
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+  },
+];
+
+/**
+ * 详情列配置
+ */
+export const detailColumns: VxeGridProps['columns'] = [
+  {
+    title: '序号',
+    field: 'id',
+    slots: {
+      default: ({ rowIndex }) => (rowIndex + 1).toString(),
+    },
+  },
+  { title: '费用项目', field: 'carNumber' },
+  { title: '费用标识', field: 'location' },
+  { title: '应收金额', field: 'personId' },
+  {
+    title: '状态',
+    field: 'state',
+    slots: {
+      default: ({ row }) => renderDict(row.state, 'wy_cszt'),
+    },
+  },
+  { title: '建帐时间', field: 'starTime' },
+  { title: '应收时间', field: 'endTime' },
+  { title: '说明', field: 'remark' },
+  {
+    field: 'action',
+    fixed: 'right',
+    slots: { default: 'action' },
+    title: '操作',
+    width: 180,
+  },
+];
+
+/**
+ * 退款弹窗 schema
+ */
+export const modalSchemaRefund: FormSchemaGetter = () => [
   {
     label: '主键',
     fieldName: 'id',
@@ -316,181 +355,11 @@ export const payModalSchema: FormSchemaGetter = () => [
       triggerFields: [''],
     },
   },
-    {
+  {
-    label: '车牌号',
+    label: '退费原因',
-    fieldName: 'carNumber',
+    fieldName: 'reason',
-    component: 'Input',
+    component: 'Textarea',
+    formItemClass: 'col-span-2',
     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: '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: '计费开始时间',
-    fieldName: 'starTime',
-    component: 'DatePicker',
-    rules: 'required',
-    componentProps: {
-      showTime: true,
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
-    },
-    disabled:true,
-
-  },
-  {
-    label: '计费结束时间',
-    fieldName: 'endTime',
-    component: 'DatePicker',
-    rules:'required',
-    componentProps: {
-      showTime: true,
-      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: 'payType',
-    component: 'Select',
-    componentProps:{
-      options:getDictOptions('wy_zffs'),
-    },
-    rules: 'required',
-  },
-  {
-    label: '缴费周期',
-    fieldName: 'chargeCycle',
-    component: 'Select',
-    componentProps:{
-      options:getDictOptions('wy_jfzq'),
-    },
-  },
-  {
-    label: '实收金额',
-    fieldName: 'cost',
-    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,
   },
 ];

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

@@ -1,20 +1,12 @@
 <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,
@@ -22,10 +14,10 @@ import {
 } from '#/api/property/carCharge';
 import type { CarChargeForm } from '#/api/property/carCharge/model';
 import { commonDownloadExcel } from '#/utils/file/download';
-
+import carChargeAdd from './carCharge-add.vue';
-import carChargeDetailModal from './carCharge-detail-modal.vue';// 详情弹窗
+import carChargeUpdate from './carCharge-update.vue';
-import carChargePayModal from './carCharge-pay-modal.vue';//缴费弹窗
+import carChargeDetail from './car-charge-detail.vue';
-import carCharfeAddModal from './carCharge-add-modal.vue';//创建费用弹窗
+import carChargeRefund from './car-charge-refund.vue';
 import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
@@ -37,28 +29,13 @@ const formOptions: VbenFormProps = {
   },
   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,
@@ -77,7 +54,6 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     keyField: 'id',
   },
-  // 表格全局唯一表示 保存列配置需要用到
   id: 'property-carCharge-index'
 };
 
@@ -85,89 +61,139 @@ 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();
-}
 
-//打开详情
+const [CarChargeAdd, modalApi] = useVbenModal({
-async function handleEdit(row: Required<CarChargeForm>) {
+  connectedComponent: carChargeAdd,
-  modalApi.setData({ id: row.id });
+});
+const [CarChargeUpdate, updateApi] = useVbenModal({
+  connectedComponent: carChargeUpdate,
+});
+const [CarChargeDetail, detailApi] = useVbenModal({
+  connectedComponent: carChargeDetail,
+});
+const [CarChargeRefund, refundApi] = useVbenModal({
+  connectedComponent: carChargeRefund,
+});
+
+function handleAdd() {
+  modalApi.setData({});
   modalApi.open();
 }
-//打开缴费
+
-async function handleSave(row: Required<CarChargeForm>) {
+async function handleEdit(row: Required<CarChargeForm>) {
-  payModalApi.setData({ id: row.id });
+  updateApi.setData({ id: row.id });
-  payModalApi.open();
+  updateApi.open();
+}
+
+async function handleInfo(row: Required<CarChargeForm>) {
+  detailApi.setData({ id: row.id });
+  detailApi.open();
 }
 
 async function handleDelete(row: Required<CarChargeForm>) {
   await carChargeRemove(row.id);
   await tableApi.query();
 }
+
+async function handleRefund(row: Required<CarChargeForm>) {
+  refundApi.setData({ id: row.id });
+  refundApi.open();
+}
+
+function handleMultiDelete() {
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<CarChargeForm>) => row.id);
+  Modal.confirm({
+    title: '提示',
+    okType: 'danger',
+    content: `确认删除选中的${ids.length}条记录吗？`,
+    onOk: async () => {
+      await carChargeRemove(ids);
+      await tableApi.query();
+    },
+  });
+}
+
+function handleDownloadExcel() {
+  commonDownloadExcel(carChargeExport, '车辆收费数据', tableApi.formApi.form.values, {
+    fieldMappingTime: formOptions.fieldMappingTime,
+  });
+}
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <BasicTable table-title="费用-车辆收费列表">
+    <BasicTable table-title="车辆收费列表">
       <template #toolbar-tools>
         <Space>
+          <a-button
+            v-access:code="['property:carCharge:export']"
+            @click="handleDownloadExcel"
+          >
+            {{ $t('pages.common.export') }}
+          </a-button>
+          <a-button
+            :disabled="!vxeCheckboxChecked(tableApi)"
+            danger
+            type="primary"
+            v-access:code="['property:carCharge:remove']"
+            @click="handleMultiDelete">
+            批量删除
+          </a-button>
           <a-button
             type="primary"
             v-access:code="['property:carCharge:add']"
             @click="handleAdd"
           >
-            创建费用
+            {{ $t('pages.common.add') }}
           </a-button>
         </Space>
       </template>
       <template #action="{ row }">
         <Space>
           <ghost-button
+            v-access:code="['property:carCharge:info']"
+            @click.stop="handleInfo(row)"
+          >
+            {{ $t('pages.common.info') }}
+          </ghost-button>
+          <ghost-button
+            v-if="row.chargeStatus=='2'"
             v-access:code="['property:carCharge:edit']"
-            @click.stop="handleSave(row)"
+            @click.stop="handleEdit(row)"
           >
             缴费
           </ghost-button>
+          <ghost-button
+            v-else-if="row.chargeStatus=='4'"
+            danger
+            v-access:code="['property:carCharge:edit']"
+            @click.stop="handleRefund(row)"
+          >
+            退费
+          </ghost-button>
           <Popconfirm
+            v-else
             :get-popup-container="getVxePopupContainer"
             placement="left"
-            title="确认删除？"
+            title="确认取消？"
             @confirm="handleDelete(row)"
           >
             <ghost-button
               danger
               v-access:code="['property:carCharge:remove']"
               @click.stop=""
+              :disabled="row.chargeStatus!='1'"
             >
-              {{ $t('pages.common.delete') }}
+              取消
             </ghost-button>
           </Popconfirm>
-            <ghost-button
-              v-access:code="['property:carCharge:edit']"
-              @click.stop="handleEdit(row)"
-            >
-              详情
-            </ghost-button>
         </Space>
       </template>
     </BasicTable>
-    <!-- 详情弹窗 -->
+    <CarChargeAdd @reload="tableApi.query()"/>
-    <CarChargeDetailModal @reload="tableApi.query()" />
+    <CarChargeUpdate @reload="tableApi.query()"/>
-    <CarCharfeAddModal @reload="tableApi.query()" />
+    <CarChargeRefund @reload="tableApi.query()"/>
-    <CarChargePayModal @reload="tableApi.query()" />
+    <CarChargeDetail/>
   </Page>
 </template>

apps/web-antd/src/views/property/costManagement/costMeterWater/costMeterWater-modal.vue

@@ -8,10 +8,10 @@ import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 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 { costItemSettingList} from '#/api/property/costManagement/costItemSetting';
 import { meterReadingTypeList } from '#/api/property/costManagement/meterReadingType';
 import { getDictOptions } from '#/utils/dict';
-
+import {ultimoWater} from '#/api/property/costMeterWater'
 const emit = defineEmits<{ reload: [] }>();
 const costItemsOptions = ref<any>([]);
 const meterTypeOptions = ref<any>([]);