1

2025-06-28 02:41:09 +08:00
parent 81a89bb4dc
commit acd63bc96e
23 changed files with 670 additions and 1046 deletions
--- a/apps/web-antd/src/views/property/building/building-modal.vue
+++ b/apps/web-antd/src/views/property/building/building-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 { buildingAdd, buildingInfo, buildingUpdate } from '#/api/property/building';
 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 buildingInfo(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 ? buildingUpdate(data) : buildingAdd(data));
    resetInitialized();
--- a/apps/web-antd/src/views/property/building/data.ts
+++ b/apps/web-antd/src/views/property/building/data.ts
@@ -1,13 +1,11 @@
 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: 'communityCode',
-    label: '小区/园区',
+    fieldName: 'communityName',
+    label: '社区',
  },
  {
    component: 'Input',
@@ -16,114 +14,62 @@ export const querySchema: FormSchemaGetter = () => [
  },
  {
    component: 'Input',
-    fieldName: 'buildingCode',
-    label: '建筑编码',
-  },
-  {
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_cqxz'),
-    },
-    fieldName: 'cqxz',
-    label: '产权性质',
+    fieldName: 'unitCount',
+    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: '小区/园区',
-    field: 'communityCode',
-    width: 'auto'
-  },
  {
    title: '建筑名称',
    field: 'buildingName',
-    width: 'auto'
  },
  {
-    title: '建筑编码',
-    field: 'buildingCode',
-    width: 'auto'
+    title: '省',
+    field: 'province',
+  },
+  {
+    title: '市',
+    field: 'city',
+  },
+  {
+    title: '区',
+    field: 'district',
+  },
+  {
+    title: '总层数',
+    field: 'floorCount',
+  },
+  {
+    title: '单元数',
+    field: 'unitCount',
+  },
+  {
+    title: '建筑类型',
+    field: 'buildType',
+  },
+  {
+    title: '电梯数量',
+    field: 'elevatorCount',
+  },
+  {
+    title: '竣工日期',
+    field: 'completionDate',
  },
  {
    title: '地址',
    field: 'addr',
-    width: 'auto'
  },
  {
-    title: '产权性质',
-    field: 'cqxz',
-    width: 'auto',
-    slots: {
-      default: ({ row }) => {
-        return renderDict(row.cqxz, 'wy_cqxz');
-      },
-    },
+    title: '经度',
+    field: 'lon',
  },
  {
-    title: '不动产编号',
-    field: 'bdcbh',
-    width: 'auto'
-  },
-  {
-    title: '产权编号',
-    field: 'cqbh',
-    width: 'auto'
-  },
-  {
-    title: '土地编号',
-    field: 'tdbh',
-    width: 'auto'
-  },
-  {
-    title: '建筑面积',
-    field: 'jzmj',
-    width: 'auto'
-  },
-  {
-    title: '产权面积',
-    field: 'cqmj',
-    width: 'auto'
-  },
-  {
-    title: '可租面积',
-    field: 'kzmj',
-    width: 'auto'
-  },
-  {
-    title: '自用面积',
-    field: 'zymj',
-    width: 'auto'
-  },
-  {
-    title: '配套面积',
-    field: 'ptmj',
-    width: 'auto'
-  },
-  {
-    title: '车位面积',
-    field: 'cwmj',
-    width: 'auto'
-  },
-  {
-    title: '标准层高',
-    field: 'bzcg',
-    width: 'auto'
-  },
-  {
-    title: '修改时间',
-    field: 'modifyTime',
-    width: 'auto'
+    title: '维度',
+    field: 'lat',
  },
  {
    field: 'action',
@@ -145,8 +91,8 @@ export const modalSchema: FormSchemaGetter = () => [
    },
  },
  {
-    label: '小区/园区',
-    fieldName: 'communityCode',
+    label: '园区编码',
+    fieldName: 'communityId',
    component: 'Input',
    rules: 'required',
  },
@@ -156,12 +102,6 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
-  {
-    label: '建筑编码',
-    fieldName: 'buildingCode',
-    component: 'Input',
-    rules: 'required',
-  },
  {
    label: '省',
    fieldName: 'province',
@@ -180,6 +120,37 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
+  {
+    label: '总层数',
+    fieldName: 'floorCount',
+    component: 'Input',
+  },
+  {
+    label: '单元数',
+    fieldName: 'unitCount',
+    component: 'Input',
+  },
+  {
+    label: '建筑类型',
+    fieldName: 'buildType',
+    component: 'Select',
+    componentProps: {},
+  },
+  {
+    label: '电梯数量',
+    fieldName: 'elevatorCount',
+    component: 'Input',
+  },
+  {
+    label: '竣工日期',
+    fieldName: 'completionDate',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    },
+  },
  {
    label: '地址',
    fieldName: 'addr',
@@ -198,78 +169,9 @@ export const modalSchema: FormSchemaGetter = () => [
    component: 'Input',
    rules: 'required',
  },
-  {
-    label: '产权性质',
-    fieldName: 'cqxz',
-    component: 'Select',
-    componentProps: {
-      options: getDictOptions('wy_cqxz'),
-    },
-    rules: 'selectRequired',
-  },
-  {
-    label: '不动产编号',
-    fieldName: 'bdcbh',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '产权编号',
-    fieldName: 'cqbh',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '土地编号',
-    fieldName: 'tdbh',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '建筑面积',
-    fieldName: 'jzmj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '产权面积',
-    fieldName: 'cqmj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '可租面积',
-    fieldName: 'kzmj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '自用面积',
-    fieldName: 'zymj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '配套面积',
-    fieldName: 'ptmj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '车位面积',
-    fieldName: 'cwmj',
-    component: 'Input',
-    rules: 'required',
-  },
-  {
-    label: '标准层高',
-    fieldName: 'bzcg',
-    component: 'Input',
-    rules: 'required',
-  },
  {
    label: '排序字段',
    fieldName: 'sort',
    component: 'Input',
-  }
+  },
 ];
--- a/apps/web-antd/src/views/property/building/index.vue
+++ b/apps/web-antd/src/views/property/building/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 {
  buildingExport,
  buildingList,
@@ -14,8 +22,8 @@ import {
 } from '#/api/property/building';
 import type { BuildingForm } from '#/api/property/building/model';
 import { commonDownloadExcel } from '#/utils/file/download';
+
 import buildingModal from './building-modal.vue';
-import buildingDetail from './building-detail.vue';
 import { columns, querySchema } from './data';

 const formOptions: VbenFormProps = {
@@ -27,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,
@@ -52,6 +75,7 @@ const gridOptions: VxeGridProps = {
  rowConfig: {
    keyField: 'id',
  },
+  // 表格全局唯一表示 保存列配置需要用到
  id: 'property-building-index'
 };

@@ -64,15 +88,6 @@ const [BuildingModal, modalApi] = useVbenModal({
  connectedComponent: buildingModal,
 });

-const [buildingDetailModal, buildingDetailApi] = useVbenModal({
-  connectedComponent: buildingDetail,
-});
-
-async function handleInfo(row: Required<BuildingForm>) {
-  buildingDetailApi.setData({ id: row.id });
-  buildingDetailApi.open();
-}
-
 function handleAdd() {
  modalApi.setData({});
  modalApi.open();
@@ -103,7 +118,7 @@ function handleMultiDelete() {
 }

 function handleDownloadExcel() {
-  commonDownloadExcel(buildingExport, '建筑管理数据', tableApi.formApi.form.values, {
+  commonDownloadExcel(buildingExport, '建筑数据', tableApi.formApi.form.values, {
    fieldMappingTime: formOptions.fieldMappingTime,
  });
 }
@@ -111,7 +126,7 @@ function handleDownloadExcel() {

 <template>
  <Page :auto-content-height="true">
-    <BasicTable table-title="建筑管理列表">
+    <BasicTable table-title="建筑列表">
      <template #toolbar-tools>
        <Space>
          <a-button
@@ -123,8 +138,8 @@ function handleDownloadExcel() {
          <a-button
            :disabled="!vxeCheckboxChecked(tableApi)"
            danger
-            type="primary"
-            v-access:code="['property:building:remove']"
+            type="primary" 
+            v-access:code="['property:building:remove']" 
            @click="handleMultiDelete">
            {{ $t('pages.common.delete') }}
          </a-button>
@@ -139,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:building:edit']"
            @click.stop="handleEdit(row)"
@@ -168,6 +178,5 @@ function handleDownloadExcel() {
      </template>
    </BasicTable>
    <BuildingModal @reload="tableApi.query()" />
-    <buildingDetailModal/>
  </Page>
 </template>