综合模块完成

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type {Community} from '#/api/property/community/model';
-import {shallowRef} from 'vue';
-import {useVbenModal} from '@vben/common-ui';
-import {Descriptions, DescriptionsItem} from 'ant-design-vue';
-import {communityInfo} from '#/api/property/community';
-import {renderDict} from "#/utils/render";
+import type { CommunityVO } from '#/api/property/community/model';
+import { shallowRef } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import { Descriptions, DescriptionsItem } from 'ant-design-vue';
+import { communityInfo } from '#/api/property/community';
+import { renderDict } from '#/utils/render';
 
 const [BasicModal, modalApi] = useVbenModal({
   onOpenChange: handleOpenChange,
@@ -13,14 +13,14 @@ const [BasicModal, modalApi] = useVbenModal({
   },
 });
 
-const communityDetail = shallowRef<null | Community>(null);
+const communityDetail = shallowRef<null | CommunityVO>(null);
 
 async function handleOpenChange(open: boolean) {
   if (!open) {
     return null;
   }
   modalApi.modalLoading(true);
-  const {id} = modalApi.getData() as { id: number | string };
+  const { id } = modalApi.getData() as { id: number | string };
   const response = await communityInfo(id);
   communityDetail.value = response;
   modalApi.modalLoading(false);
@@ -28,18 +28,27 @@ async function handleOpenChange(open: boolean) {
 </script>
 
 <template>
-  <BasicModal :footer="false" :fullscreen-button="false" title="小区管理信息" class="w-[70%]">
-    <Descriptions v-if="communityDetail" size="small" :column="2" bordered :labelStyle="{width:'100px'}">
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="小区管理信息"
+    class="w-[70%]"
+  >
+    <Descriptions
+      v-if="communityDetail"
+      size="small"
+      :column="2"
+      bordered
+      :labelStyle="{ width: '100px' }"
+    >
       <DescriptionsItem label="小区名称">
         {{ communityDetail.communityName }}
       </DescriptionsItem>
-      <DescriptionsItem label="小区编码">
-        {{ communityDetail.communityCode }}
-      </DescriptionsItem>
-      <DescriptionsItem label="小区类型" v-if="communityDetail.communityType!=null">
-        <component
-          :is="renderDict(communityDetail.communityType,'wy_sqlx')"
-        />
+      <DescriptionsItem
+        label="小区类型"
+        v-if="communityDetail.communityType != null"
+      >
+        <component :is="renderDict(communityDetail.communityType, 'wy_sqlx')" />
       </DescriptionsItem>
       <DescriptionsItem label="省">
         {{ communityDetail.province }}
@@ -62,12 +71,7 @@ async function handleOpenChange(open: boolean) {
       <DescriptionsItem label="小图图片">
         {{ communityDetail.img }}
       </DescriptionsItem>
-      <DescriptionsItem label="组织编码">
-        {{ communityDetail.orgCode }}
-      </DescriptionsItem>
-      <DescriptionsItem label="修改时间">
-        {{ communityDetail.modifyTime }}
-      </DescriptionsItem>
+
     </Descriptions>
   </BasicModal>
 </template>

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>
-

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

@@ -1,15 +1,16 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
+import { getPopupContainer } from '@vben/utils';
+import { getDictOptions } from '#/utils/dict';
+import { DictEnum } from '@vben/constants';
 
 export const querySchema: FormSchemaGetter = () => [
-  {
-    component: 'Input',
-    fieldName: 'communityName',
-    label: '社区',
-  },
   {
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.wy_sqlx),
+    },
     fieldName: 'communityType',
     label: '社区类型',
   },
@@ -18,11 +19,6 @@ export const querySchema: FormSchemaGetter = () => [
     fieldName: 'propertyCompany',
     label: '物业公司',
   },
-  {
-    component: 'Input',
-    fieldName: 'contactPhone',
-    label: '联系电话',
-  },
 ];
 
 // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
@@ -36,18 +32,11 @@ export const columns: VxeGridProps['columns'] = [
   {
     title: '社区类型',
     field: 'communityType',
+    slots: { default: 'communityType' },
   },
   {
-    title: '省',
-    field: 'province',
-  },
-  {
-    title: '市',
-    field: 'city',
-  },
-  {
-    title: '区',
-    field: 'district',
+    title: '城市',
+    field: 'cityFullName',
   },
   {
     title: '地址',
@@ -62,11 +51,11 @@ export const columns: VxeGridProps['columns'] = [
     field: 'lat',
   },
   {
-    title: '占地面积(平方米)',
+    title: '占地面积',
     field: 'area',
   },
   {
-    title: '',
+    title: '建成时间',
     field: 'builtYear',
   },
   {
@@ -81,10 +70,6 @@ export const columns: VxeGridProps['columns'] = [
     title: '社区描述',
     field: 'description',
   },
-  {
-    title: '小图图片',
-    field: 'img',
-  },
   {
     field: 'action',
     fixed: 'right',
@@ -114,10 +99,20 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '社区类型',
     fieldName: 'communityType',
     component: 'Select',
-    componentProps: {},
+    componentProps: {
+      getPopupContainer,
+      options: getDictOptions(DictEnum.wy_sqlx),
+    },
     rules: 'selectRequired',
   },
   {
+    component: 'TreeSelect',
+    fieldName: 'cityFullCode',
+    defaultValue: undefined,
+    label: '城市',
+    rules: 'selectRequired',
+  },
+  /*{
     label: '省',
     fieldName: 'province',
     component: 'Input',
@@ -134,7 +129,7 @@ export const modalSchema: FormSchemaGetter = () => [
     fieldName: 'district',
     component: 'Input',
     rules: 'required',
-  },
+  },*/
   {
     label: '地址',
     fieldName: 'addr',
@@ -145,27 +140,25 @@ export const modalSchema: FormSchemaGetter = () => [
     label: '经度',
     fieldName: 'lon',
     component: 'Input',
-    rules: 'required',
   },
   {
     label: '维度',
     fieldName: 'lat',
     component: 'Input',
-    rules: 'required',
   },
   {
-    label: '占地面积(平方米)',
+    label: '占地面积',
     fieldName: 'area',
     component: 'Input',
   },
   {
-    label: '',
+    label: '建成时间',
     fieldName: 'builtYear',
     component: 'DatePicker',
     componentProps: {
       showTime: true,
-      format: 'YYYY-MM-DD HH:mm:ss',
-      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      format: 'YYYY-MM-DD',
+      valueFormat: 'YYYY-MM-DD',
     },
   },
   {
@@ -184,8 +177,12 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Textarea',
   },
   {
-    label: '小图图片',
+    label: '人像图片',
     fieldName: 'img',
-    component: 'Input',
+    component: 'ImageUpload',
+    componentProps: {
+      maxCount: 1, // 最大上传文件数 默认为1 为1会绑定为string而非string[]类型
+    },
+    formItemClass: 'col-span-2',
   },
 ];

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

@@ -6,13 +6,13 @@ 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 { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import {   
+import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
-  type VxeGridProps 
+  type VxeGridProps
 } from '#/adapter/vxe-table';
 
 import {
@@ -138,8 +138,8 @@ function handleDownloadExcel() {
           <a-button
             :disabled="!vxeCheckboxChecked(tableApi)"
             danger
-            type="primary" 
-            v-access:code="['property:community:remove']" 
+            type="primary"
+            v-access:code="['property:community:remove']"
             @click="handleMultiDelete">
             {{ $t('pages.common.delete') }}
           </a-button>
@@ -176,6 +176,12 @@ function handleDownloadExcel() {
           </Popconfirm>
         </Space>
       </template>
+
+      <template #communityType="{ row }">
+        <Tag v-if="row.community_type == 1" color="#108ee9">园区</Tag>
+        <Tag v-else color="#2db7f5">小区</Tag>
+      </template>
+
     </BasicTable>
     <CommunityModal @reload="tableApi.query()" />
   </Page>