1

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

@@ -1,24 +1,30 @@
 <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 { communityAdd, communityInfo, communityUpdate } from '#/api/property/community';
 import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+
 import { modalSchema } from './data';
 
 const emit = defineEmits<{ reload: [] }>();
-const isUpdate = ref(false);
 
+const isUpdate = ref(false);
 const title = computed(() => {
   return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
 });
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
+    // 默认占满两列
     formItemClass: 'col-span-2',
+    // 默认label宽度 px
     labelWidth: 80,
+    // 通用配置项 会影响到所有表单项
     componentProps: {
       class: 'w-full',
     }
@@ -36,6 +42,7 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
 );
 
 const [BasicModal, modalApi] = useVbenModal({
+  // 在这里更改宽度
   class: 'w-[550px]',
   fullscreenButton: false,
   onBeforeClose,
@@ -46,13 +53,16 @@ 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);
     }
     await markInitialized();
+
     modalApi.modalLoading(false);
   },
 });
@@ -64,6 +74,7 @@ async function handleConfirm() {
     if (!valid) {
       return;
     }
+    // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
     const data = cloneDeep(await formApi.getValues());
     await (isUpdate.value ? communityUpdate(data) : communityAdd(data));
     resetInitialized();

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

@@ -1,56 +1,41 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
-import { getDictOptions } from '#/utils/dict';
-import { renderDict } from '#/utils/render';
 
 export const querySchema: FormSchemaGetter = () => [
   {
     component: 'Input',
     fieldName: 'communityName',
-    label: '小区名称',
-  },
-  {
-    component: 'Input',
-    fieldName: 'communityCode',
-    label: '小区编码',
+    label: '社区',
   },
   {
     component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_sqlx'),
-    },
+    componentProps: {},
     fieldName: 'communityType',
-    label: '小区类型',
-  }
+    label: '社区类型',
+  },
+  {
+    component: 'Input',
+    fieldName: 'propertyCompany',
+    label: '物业公司',
+  },
+  {
+    component: 'Input',
+    fieldName: 'contactPhone',
+    label: '联系电话',
+  },
 ];
 
+// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+// export const columns: () => VxeGridProps['columns'] = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '序号',
-    field: 'id',
-    slots: {
-      default: ({ rowIndex }) => {
-        return (rowIndex + 1).toString();
-      },
-    },
-  },
-  {
-    title: '小区名称',
+    title: '社区名称',
     field: 'communityName',
   },
   {
-    title: '小区编码',
-    field: 'communityCode',
-  },
-  {
-    title: '小区类型',
+    title: '社区类型',
     field: 'communityType',
-    slots: {
-      default: ({ row }) => {
-        return renderDict(row.communityType, 'wy_sqlx');
-      },
-    },
   },
   {
     title: '省',
@@ -77,12 +62,28 @@ export const columns: VxeGridProps['columns'] = [
     field: 'lat',
   },
   {
-    title: '小图图片',
-    field: 'img',
+    title: '占地面积(平方米)',
+    field: 'area',
   },
   {
-    title: '修改时间',
-    field: 'modifyTime',
+    title: '',
+    field: 'builtYear',
+  },
+  {
+    title: '物业公司',
+    field: 'propertyCompany',
+  },
+  {
+    title: '联系电话',
+    field: 'contactPhone',
+  },
+  {
+    title: '社区描述',
+    field: 'description',
+  },
+  {
+    title: '小图图片',
+    field: 'img',
   },
   {
     field: 'action',
@@ -95,7 +96,7 @@ export const columns: VxeGridProps['columns'] = [
 
 export const modalSchema: FormSchemaGetter = () => [
   {
-    label: '主键',
+    label: '',
     fieldName: 'id',
     component: 'Input',
     dependencies: {
@@ -104,24 +105,16 @@ export const modalSchema: FormSchemaGetter = () => [
     },
   },
   {
-    label: '小区名称',
+    label: '社区名称',
     fieldName: 'communityName',
     component: 'Input',
     rules: 'required',
   },
   {
-    label: '小区编码',
-    fieldName: 'communityCode',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '小区类型',
+    label: '社区类型',
     fieldName: 'communityType',
     component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_sqlx'),
-    },
+    componentProps: {},
     rules: 'selectRequired',
   },
   {
@@ -160,11 +153,39 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Input',
     rules: 'required',
   },
+  {
+    label: '占地面积(平方米)',
+    fieldName: 'area',
+    component: 'Input',
+  },
+  {
+    label: '',
+    fieldName: 'builtYear',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
+  {
+    label: '物业公司',
+    fieldName: 'propertyCompany',
+    component: 'Input',
+  },
+  {
+    label: '联系电话',
+    fieldName: 'contactPhone',
+    component: 'Input',
+  },
+  {
+    label: '社区描述',
+    fieldName: 'description',
+    component: 'Textarea',
+  },
   {
     label: '小图图片',
     fieldName: 'img',
-    component: 'ImageUpload',
-    componentProps: {
-    },
-  }
+    component: 'Input',
+  },
 ];

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

@@ -1,12 +1,20 @@
 <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 {
+import dayjs from 'dayjs';
+
+import {   
   useVbenVxeGrid,
   vxeCheckboxChecked,
-  type VxeGridProps
+  type VxeGridProps 
 } from '#/adapter/vxe-table';
+
 import {
   communityExport,
   communityList,
@@ -14,10 +22,9 @@ import {
 } from '#/api/property/community';
 import type { CommunityForm } from '#/api/property/community/model';
 import { commonDownloadExcel } from '#/utils/file/download';
+
 import communityModal from './community-modal.vue';
 import { columns, querySchema } from './data';
-import communityDetail from "#/views/property/community/community-detail.vue";
-import type {BuildingForm} from "#/api/property/building/model";
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -28,13 +35,28 @@ const formOptions: VbenFormProps = {
   },
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
+  // 不需要直接删除
+  // fieldMappingTime: [
+  //  [
+  //    'createTime',
+  //    ['params[beginTime]', 'params[endTime]'],
+  //    ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
+  //  ],
+  // ],
 };
 
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
+    // 高亮
     highlight: true,
+    // 翻页时保留选中状态
     reserve: true,
+    // 点击行选中
+    // trigger: 'row',
   },
+  // 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
+  // columns: columns(),
   columns,
   height: 'auto',
   keepSource: true,
@@ -53,6 +75,7 @@ const gridOptions: VxeGridProps = {
   rowConfig: {
     keyField: 'id',
   },
+  // 表格全局唯一表示 保存列配置需要用到
   id: 'property-community-index'
 };
 
@@ -65,15 +88,6 @@ const [CommunityModal, modalApi] = useVbenModal({
   connectedComponent: communityModal,
 });
 
-const [communityDetailModal, communityDetailApi] = useVbenModal({
-  connectedComponent: communityDetail,
-});
-
-async function handleInfo(row: Required<CommunityForm>) {
-  communityDetailApi.setData({ id: row.id });
-  communityDetailApi.open();
-}
-
 function handleAdd() {
   modalApi.setData({});
   modalApi.open();
@@ -104,7 +118,7 @@ function handleMultiDelete() {
 }
 
 function handleDownloadExcel() {
-  commonDownloadExcel(communityExport, '小区管理数据', tableApi.formApi.form.values, {
+  commonDownloadExcel(communityExport, '小区数据', tableApi.formApi.form.values, {
     fieldMappingTime: formOptions.fieldMappingTime,
   });
 }
@@ -112,7 +126,7 @@ function handleDownloadExcel() {
 
 <template>
   <Page :auto-content-height="true">
-    <BasicTable table-title="小区管理列表">
+    <BasicTable table-title="小区列表">
       <template #toolbar-tools>
         <Space>
           <a-button
@@ -124,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>
@@ -140,11 +154,6 @@ function handleDownloadExcel() {
       </template>
       <template #action="{ row }">
         <Space>
-          <ghost-button
-            @click.stop="handleInfo(row)"
-          >
-            {{ $t('pages.common.info') }}
-          </ghost-button>
           <ghost-button
             v-access:code="['property:community:edit']"
             @click.stop="handleEdit(row)"
@@ -169,6 +178,5 @@ function handleDownloadExcel() {
       </template>
     </BasicTable>
     <CommunityModal @reload="tableApi.query()" />
-    <communityDetailModal/>
   </Page>
 </template>