综合模块完成

apps/web-antd/src/views/property/unit/data.ts

@@ -1,12 +1,11 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
-
 export const querySchema: FormSchemaGetter = () => [
   {
-    component: 'Input',
-    fieldName: 'communityName',
-    label: '社区',
+    component: 'TreeSelect',
+    fieldName: 'unitName',
+    label: '单元名称',
   },
 ];
 
@@ -14,10 +13,6 @@ export const querySchema: FormSchemaGetter = () => [
 // export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
-  {
-    title: '建筑名称',
-    field: 'buildingId',
-  },
   {
     title: '单元名称',
     field: 'unitName',
@@ -54,10 +49,11 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
   {
-    label: '建筑名称',
+    component: 'TreeSelect',
     fieldName: 'buildingId',
-    component: 'Input',
-    rules: 'required',
+    defaultValue: undefined,
+    label: '社区建筑',
+    rules: 'selectRequired',
   },
   {
     label: '单元名称',

apps/web-antd/src/views/property/unit/index.vue

@@ -1,25 +1,16 @@
 <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 {
-  unitExport,
-  unitList,
-  unitRemove,
-} from '#/api/property/unit';
+  useVbenVxeGrid,
+  vxeCheckboxChecked,
+  type VxeGridProps,
+} from '#/adapter/vxe-table';
+
+import { unitExport, unitList, unitRemove } from '#/api/property/unit';
 import type { UnitForm } from '#/api/property/unit/model';
 import { commonDownloadExcel } from '#/utils/file/download';
 
@@ -76,7 +67,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-unit-index'
+  id: 'property-unit-index',
 };
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -138,9 +129,10 @@ function handleDownloadExcel() {
           <a-button
             :disabled="!vxeCheckboxChecked(tableApi)"
             danger
-            type="primary" 
-            v-access:code="['property:unit:remove']" 
-            @click="handleMultiDelete">
+            type="primary"
+            v-access:code="['property:unit:remove']"
+            @click="handleMultiDelete"
+          >
             {{ $t('pages.common.delete') }}
           </a-button>
           <a-button

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

@@ -3,13 +3,14 @@ import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { unitAdd, unitInfo, unitUpdate } from '#/api/property/unit';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
+import { communityTree } from '#/api/property/community';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -27,7 +28,7 @@ const [BasicForm, formApi] = useVbenForm({
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
-    }
+    },
   },
   schema: modalSchema(),
   showDefaultActions: false,
@@ -53,16 +54,14 @@ const [BasicModal, modalApi] = useVbenModal({
       return null;
     }
     modalApi.modalLoading(true);
-
     const { id } = modalApi.getData() as { id?: number | string };
     isUpdate.value = !!id;
-
     if (isUpdate.value && id) {
       const record = await unitInfo(id);
       await formApi.setValues(record);
     }
+    setupCommunitySelect();
     await markInitialized();
-
     modalApi.modalLoading(false);
   },
 });
@@ -87,6 +86,45 @@ async function handleConfirm() {
   }
 }
 
+/**
+ * 初始化城市
+ */
+async function setupCommunitySelect() {
+  const areaList = await communityTree(2);
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 2) {
+      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: 'buildingId',
+    },
+  ]);
+}
+
 async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
@@ -98,4 +136,3 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
-