综合模块完成

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

@@ -3,13 +3,20 @@ 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 { communityAdd, communityInfo, communityUpdate } from '#/api/property/community';
+import {
+  communityAdd,
+  communityInfo,
+  communityUpdate,
+} from '#/api/property/community';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
 
 import { modalSchema } from './data';
+import { getCityAreaTreeList } from '#/api/property/cityArea';
+import type { CityAreaVO } from '#/api/property/cityArea/model';
+import type { CommunityForm } from '#/api/property/community/model';
 
 const emit = defineEmits<{ reload: [] }>();
 
@@ -21,13 +28,13 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
     // 默认占满两列
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
     // 默认label宽度 px
     labelWidth: 80,
     // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
-    }
+    },
   },
   schema: modalSchema(),
   showDefaultActions: false,
@@ -43,7 +50,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
-  class: 'w-[550px]',
+  class: 'w-[60%]',
   fullscreenButton: false,
   onBeforeClose,
   onClosed: handleClosed,
@@ -53,20 +60,20 @@ 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 communityInfo(id);
       await formApi.setValues(record);
     }
+    setupDeptSelect();
     await markInitialized();
-
     modalApi.modalLoading(false);
   },
 });
 
+let currentSelectNode: any = null;
+
 async function handleConfirm() {
   try {
     modalApi.lock(true);
@@ -75,7 +82,8 @@ async function handleConfirm() {
       return;
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues());
+    const data: CommunityForm = cloneDeep(await formApi.getValues());
+    data.cityFullName = currentSelectNode.fullName;
     await (isUpdate.value ? communityUpdate(data) : communityAdd(data));
     resetInitialized();
     emit('reload');
@@ -87,6 +95,57 @@ async function handleConfirm() {
   }
 }
 
+/**
+ * 初始化城市
+ */
+async function setupDeptSelect() {
+  const areaList = await getCityAreaTreeList();
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/';
+  handleNode(
+    areaList,
+    'areaName',
+    splitStr,
+    function (node: any, parentNode: any) {
+      node.fullCode = parentNode
+        ? parentNode.fullCode + splitStr + node.areaCode
+        : node.areaCode;
+
+      if (node.areaLevel != '303') {
+        node.disabled = true;
+      }
+    },
+  );
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'areaName',
+          value: 'fullCode',
+          children: 'children',
+        },
+        getPopupContainer,
+        async onSelect(fullCode: any, node: CityAreaVO) {
+          currentSelectNode = node;
+        },
+        placeholder: '请选择城市',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'areaName',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'cityFullCode',
+    },
+  ]);
+}
+
 async function handleClosed() {
   await formApi.resetForm();
   resetInitialized();
@@ -98,4 +157,3 @@ async function handleClosed() {
     <BasicForm />
   </BasicModal>
 </template>
-