feat: 车辆收费、水电抄表、排版管理页面

2025-07-19 17:26:49 +08:00
parent 5be03ab8c5
commit ad2c9aed05
15 changed files with 1483 additions and 163 deletions
--- 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>

--- 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',
-  },
 ];