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

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

@@ -3,22 +3,79 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
 import { useVbenForm } from '#/adapter/form';
 import { carChargeAdd, carChargeInfo, carChargeUpdate } from '#/api/property/carCharge';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
-
+import { cloneDeep,handleNode,getPopupContainer } from '@vben/utils';
 import { payModalSchema } from './data';
+import { communityTree } from '#/api/property/community';
 
+export interface CarChargeVO {
+  /**
+   * 主键
+   */
+  id: string | number;
+
+  /**
+   * 车牌号
+   */
+  carNumber: string;
+
+  /**
+   * 业主
+   */
+  personId: string | number;
+
+  /**
+   * 楼层
+   */
+  floorId: string | number;
+
+  /**
+   * 车位
+   */
+  location: string;
+
+  /**
+   * 状态
+   */
+  state: string;
+
+  /**
+   * 收费项目
+   */
+  costItemsId: string | number;
+
+  /**
+   * 计费开始时间
+   */
+  starTime: string;
+
+  /**
+   * 计费结束时间
+   */
+  endTime: string;
+
+  /**
+   * 说明
+   */
+  remark: string;
+
+  /**
+   * 搜索值
+   */
+  searchValue: string;
+
+}
 const emit = defineEmits<{ reload: [] }>();
-
+const isUpdate = ref(false);
+const record = ref<CarChargeVO>()
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     formItemClass: 'col-span-1',
     // 默认label宽度 px
-    labelWidth: 1400,
+    labelWidth: 140,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
@@ -47,9 +104,16 @@ const [BasicModal, modalApi] = useVbenModal({
     if (!isOpen) {
       return null;
     }
+    setupCommunitySelect()
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
+    await formApi.setValues({costType:'2'});//固定费用类型为停车费,在字典中值为2
+    isUpdate.value = !!id;
+    if (isUpdate.value && id) {
+       record.value = await carChargeInfo(id);
+      await formApi.setValues(record);
+    }
+    await markInitialized();
     await markInitialized();
 
     modalApi.modalLoading(false);
@@ -80,6 +144,42 @@ async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
 }
+// 获取服务地址
+async function setupCommunitySelect() {
+  const areaList = await communityTree(4);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 4) {
+      node.disabled = true;
+    }
+  });
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择楼层',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ]);
+}
 </script>
 
 <template>
@@ -87,3 +187,14 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
+<style scoped>
+/* 使用 :deep() 穿透 scoped 样式，影响子组件 */
+:deep(.ant-input[disabled]),
+:deep(.ant-input-number-disabled .ant-input-number-input),
+:deep(.ant-select-disabled .ant-select-selection-item) {
+  /* 设置一个更深的颜色，可以自己调整 */
+  color: rgba(0, 0, 0, 0.65) !important;
+  /* 有些浏览器需要这个来覆盖默认颜色 */
+  -webkit-text-fill-color: rgba(0, 0, 0, 0.65) !important;
+}
+</style>