feat(property): 抄表记录加入楼层筛选

apps/web-antd/src/views/property/energyManagement/lightInfo/index.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
+import { TableSwitch } from '#/components/table';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import { getVxePopupContainer } from '@vben/utils';
 
-import { TableSwitch } from "#/components/table"
+import { ref } from 'vue';
-import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'
+import { columns, querySchema } from './data';
-import { getVxePopupContainer } from '@vben/utils'
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
-
+import FloorTree from './floor-tree.vue';
-
+import lightInfoDrawer from './lightInfo-drawer.vue';
-import { ref } from 'vue'
-import { columns, querySchema } from './data'
-import { Modal, Popconfirm, Space } from 'ant-design-vue'
-import FloorTree from "./floor-tree.vue"
-import lightInfoDrawer from './lightInfo-drawer.vue'
 
 import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
-  type VxeGridProps
+  type VxeGridProps,
-} from '#/adapter/vxe-table'
+} from '#/adapter/vxe-table';
 
 import {
   lightInfoList,
   lightInfoRemove,
   switchSingleLight,
-} from '#/api/property/energyManagement/lightInfo'
+} from '#/api/property/energyManagement/lightInfo';
-import type { LightInfoForm } from '#/api/property/energyManagement/lightInfo/model'
+import type { LightInfoForm } from '#/api/property/energyManagement/lightInfo/model';
 
 // 左边楼层用
-const selectFloorId = ref<string[]>([])
+const selectFloorId = ref<string[]>([]);
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -37,15 +35,15 @@ const formOptions: VbenFormProps = {
   schema: querySchema(),
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
   handleReset: async () => {
-    selectFloorId.value = []
+    selectFloorId.value = [];
 
-    const { formApi, reload } = tableApi
+    const { formApi, reload } = tableApi;
-    await formApi.resetForm()
+    await formApi.resetForm();
-    const formValues = formApi.form.values
+    const formValues = formApi.form.values;
-    formApi.setLatestSubmissionValues(formValues)
+    formApi.setLatestSubmissionValues(formValues);
-    await reload(formValues)
+    await reload(formValues);
   },
-}
+};
 
 const gridOptions: VxeGridProps = {
   checkboxConfig: {
@@ -65,17 +63,17 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
-        // 部门树选择处理
+        // 楼层树选择处理
         if (selectFloorId.value.length === 1) {
-          formValues.floorId = selectFloorId.value[0]
+          formValues.floorId = selectFloorId.value[0];
         } else {
-          Reflect.deleteProperty(formValues, 'floorId')
+          Reflect.deleteProperty(formValues, 'floorId');
         }
         return await lightInfoList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
           ...formValues,
-        })
+        });
       },
     },
   },
@@ -83,88 +81,126 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-lightInfo-index'
+  id: 'property-lightInfo-index',
-}
+};
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
   formOptions,
   gridOptions,
-})
+});
 
 const [LightInfoDrawer, drawerApi] = useVbenDrawer({
   connectedComponent: lightInfoDrawer,
-})
+});
 
 function handleAdd() {
-  drawerApi.setData({})
+  drawerApi.setData({});
-  drawerApi.open()
+  drawerApi.open();
 }
 
 async function handleEdit(row: Required<LightInfoForm>) {
-  drawerApi.setData({ id: row.id })
+  drawerApi.setData({ id: row.id });
-  drawerApi.open()
+  drawerApi.open();
 }
 
 async function handleDelete(row: Required<LightInfoForm>) {
-  await lightInfoRemove(row.id)
+  await lightInfoRemove(row.id);
-  await tableApi.query()
+  await tableApi.query();
 }
 
 function handleMultiDelete() {
-  const rows = tableApi.grid.getCheckboxRecords()
+  const rows = tableApi.grid.getCheckboxRecords();
-  const ids = rows.map((row: Required<LightInfoForm>) => row.id)
+  const ids = rows.map((row: Required<LightInfoForm>) => row.id);
   Modal.confirm({
     title: '提示',
     okType: 'danger',
     content: `确认删除选中的${ids.length}条记录吗？`,
     onOk: async () => {
-      await lightInfoRemove(ids)
+      await lightInfoRemove(ids);
-      await tableApi.query()
+      await tableApi.query();
     },
-  })
+  });
 }
 </script>
 
 <template>
   <Page :auto-content-height="true">
     <div class="flex h-full gap-[8px]">
-      <FloorTree class="w-[260px]" @reload="() => tableApi.reload()" @select="() => tableApi.reload()"
+      <FloorTree
-        v-model:select-floor-id="selectFloorId"></FloorTree>
+        class="w-[260px]"
+        @reload="() => tableApi.reload()"
+        @select="() => tableApi.reload()"
+        v-model:select-floor-id="selectFloorId"
+      ></FloorTree>
       <BasicTable class="flex-1 overflow-hidden" table-title="灯控开关信息列表">
         <template #toolbar-tools>
           <Space>
-            <a-button type="primary" v-access:code="['property:lightInfo:add']" @click="handleAdd">
+            <a-button
+              type="primary"
+              v-access:code="['property:lightInfo:add']"
+              @click="handleAdd"
+            >
               {{ $t('pages.common.add') }}
             </a-button>
-            <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary"
+            <a-button
-              v-access:code="['property:lightInfo:remove']" @click="handleMultiDelete">
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+              v-access:code="['property:lightInfo:remove']"
+              @click="handleMultiDelete"
+            >
               {{ $t('pages.common.delete') }}
             </a-button>
-            <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary">
+            <a-button
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              danger
+              type="primary"
+            >
               关灯
             </a-button>
-            <a-button :disabled="!vxeCheckboxChecked(tableApi)" success type="primary">
+            <a-button
+              :disabled="!vxeCheckboxChecked(tableApi)"
+              success
+              type="primary"
+            >
               开灯
             </a-button>
           </Space>
         </template>
         <template #action="{ row }">
           <Space>
-            <ghost-button v-access:code="['property:lightInfo:edit']" @click.stop="handleEdit(row)">
+            <ghost-button
+              v-access:code="['property:lightInfo:edit']"
+              @click.stop="handleEdit(row)"
+            >
               {{ $t('pages.common.edit') }}
             </ghost-button>
-            <Popconfirm :get-popup-container="getVxePopupContainer" placement="left" title="确认删除？"
+            <Popconfirm
-              @confirm="handleDelete(row)">
+              :get-popup-container="getVxePopupContainer"
-              <ghost-button danger v-access:code="['property:lightInfo:remove']" @click.stop="">
+              placement="left"
+              title="确认删除？"
+              @confirm="handleDelete(row)"
+            >
+              <ghost-button
+                danger
+                v-access:code="['property:lightInfo:remove']"
+                @click.stop=""
+              >
                 {{ $t('pages.common.delete') }}
               </ghost-button>
             </Popconfirm>
           </Space>
         </template>
         <template #isOn="{ row }">
-          <TableSwitch :checkedValue=true :unCheckedValue=false v-model:value="row.isOn" checked-children="开"
+          <TableSwitch
-            un-checked-children="关" :api="() => switchSingleLight({'id':row.id, 'isOn':row.isOn})"
+            :checkedValue="true"
-            @reload="() => tableApi.query()" />
+            :unCheckedValue="false"
+            v-model:value="row.isOn"
+            checked-children="开"
+            un-checked-children="关"
+            :api="() => switchSingleLight({ id: row.id, isOn: row.isOn })"
+            @reload="() => tableApi.query()"
+          />
         </template>
       </BasicTable>
     </div>

apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts

@@ -39,8 +39,8 @@ export const querySchema: FormSchemaGetter = () => [
 export const columns: VxeGridProps['columns'] = [
   { type: 'checkbox', width: 60 },
   {
-    title: '仪表编号',
+    title: '仪表名称',
-    field: 'meterId',
+    field: 'meterName',
   },
   {
     title: '仪表类型',
@@ -52,10 +52,6 @@ export const columns: VxeGridProps['columns'] = [
       },
     },
   },
-  {
-    title: '抄表员ID',
-    field: 'readerId',
-  },
   {
     title: '抄表时间',
     field: 'readingTime',
@@ -82,10 +78,10 @@ export const columns: VxeGridProps['columns'] = [
       },
     },
   },
-  {
+  // {
-    title: '抄表照片',
+  //   title: '抄表照片',
-    field: 'imgOssid',
+  //   field: 'imgOssid',
-  },
+  // },
   {
     field: 'action',
     fixed: 'right',

apps/web-antd/src/views/property/energyManagement/meterRecord/floor-tree.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import type { PropType } from "vue";
+import { onMounted, ref } from "vue";
+import { handleNode } from "@vben/utils";
+import { Empty, Skeleton, Tree } from "ant-design-vue";
+import { communityTree } from "#/api/property/community";
+import type { CommunityVO } from "#/api/property/community/model";
+
+defineOptions({ inheritAttrs: false });
+
+withDefaults(defineProps<{ showSearch?: boolean }>(), { showSearch: true });
+
+const emit = defineEmits<{
+  /**
+   * 点击刷新按钮的事件
+   */
+  reload: [];
+  /**
+   * 点击节点的事件
+   */
+  select: [];
+}>();
+
+const selectFloorId = defineModel("selectFloorId", {
+  type: Array as PropType<string[]>,
+});
+
+const searchValue = defineModel("searchValue", {
+  type: String,
+  default: "",
+});
+
+type TreeArray = CommunityVO[];
+const treeArray = ref<TreeArray>([]);
+/** 骨架屏加载 */
+const showTreeSkeleton = ref<boolean>(true);
+
+async function loadTree() {
+  showTreeSkeleton.value = true;
+  searchValue.value = "";
+  selectFloorId.value = [];
+  const ret = await communityTree(3);
+  const splitStr = "/";
+  handleNode(ret, "label", splitStr, function (node: any) {
+    if (node.level != 3) {
+      node.disabled = true;
+    }
+  });
+  treeArray.value = ret;
+  showTreeSkeleton.value = false;
+}
+
+onMounted(loadTree);
+</script>
+
+<template>
+  <div :class="$attrs.class">
+    <Skeleton :loading="showTreeSkeleton"
+              :paragraph="{ rows: 8 }"
+              active
+              class="p-[8px] flex-1 min-h-0">
+      <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
+        <div class="h-full overflow-x-hidden px-[8px]">
+          <Tree v-bind="$attrs"
+                v-if="treeArray.length > 0"
+                v-model:selected-keys="selectFloorId"
+                :field-names="{ title: 'label', key: 'id' }"
+                :show-line="{ showLeafIcon: false }"
+                :tree-data="treeArray"
+                :virtual="false"
+                default-expand-all
+                @select="$emit('select')">
+            <template #title="{ label }">
+              <span v-if="label.indexOf(searchValue) > -1">
+                {{ label.substring(0, label.indexOf(searchValue)) }}
+                <span style="color: #f50">{{ searchValue }}</span>
+                {{ label.substring(label.indexOf(searchValue) + searchValue.length) }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+          <div v-else
+               class="mt-5">
+            <Empty :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                   description="暂无数据" />
+          </div>
+        </div>
+      </div>
+    </Skeleton>
+  </div>
+</template>

apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { Recordable } from '@vben/types';
-
 import { ref } from 'vue';
-
-import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
-import { getVxePopupContainer } from '@vben/utils';
-
-import { Modal, Popconfirm, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
+import FloorTree from './floor-tree.vue';
+import type { Recordable } from '@vben/types';
+import { columns, querySchema } from './data';
+import { getVxePopupContainer } from '@vben/utils';
+import meterRecordDrawer from './meterRecord-drawer.vue';
+import { Modal, Popconfirm, Space } from 'ant-design-vue';
+import { commonDownloadExcel } from '#/utils/file/download';
+import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
+import type { MeterRecordForm } from '#/api/property/energyManagement/meterRecord/model';
 
 import {
   useVbenVxeGrid,
   vxeCheckboxChecked,
-  type VxeGridProps 
+  type VxeGridProps,
 } from '#/adapter/vxe-table';
 
 import {
@@ -21,11 +23,8 @@ import {
   meterRecordRemove,
 } from '#/api/property/energyManagement/meterRecord';
 
-import type { MeterRecordForm } from '#/api/property/energyManagement/meterRecord/model';
+// 左边楼层用
-import { commonDownloadExcel } from '#/utils/file/download';
+const selectFloorId = ref<string[]>([]);
-
-import meterRecordDrawer from './meterRecord-drawer.vue';
-import { columns, querySchema } from './data';
 
 const formOptions: VbenFormProps = {
   commonConfig: {
@@ -65,6 +64,12 @@ const gridOptions: VxeGridProps = {
   proxyConfig: {
     ajax: {
       query: async ({ page }, formValues = {}) => {
+        // 楼层树选择处理
+        if (selectFloorId.value.length === 1) {
+          formValues.floorId = selectFloorId.value[0];
+        } else {
+          Reflect.deleteProperty(formValues, 'floorId');
+        }
         return await meterRecordList({
           pageNum: page.currentPage,
           pageSize: page.pageSize,
@@ -77,7 +82,7 @@ const gridOptions: VxeGridProps = {
     keyField: 'id',
   },
   // 表格全局唯一表示 保存列配置需要用到
-  id: 'property-meterRecord-index'
+  id: 'property-meterRecord-index',
 };
 
 const [BasicTable, tableApi] = useVbenVxeGrid({
@@ -119,52 +124,67 @@ function handleMultiDelete() {
 }
 
 function handleDownloadExcel() {
-  commonDownloadExcel(meterRecordExport, '抄表记录数据', tableApi.formApi.form.values, {
+  commonDownloadExcel(
-    fieldMappingTime: formOptions.fieldMappingTime,
+    meterRecordExport,
-  });
+    '抄表记录数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
 }
 </script>
 
 <template>
   <Page :auto-content-height="true">
-    <BasicTable table-title="抄表记录列表">
+    <div class="flex h-full gap-[8px]">
-      <template #toolbar-tools>
+      <FloorTree
-        <Space>
+        class="w-[260px]"
-          <a-button
+        @reload="() => tableApi.reload()"
-            :disabled="!vxeCheckboxChecked(tableApi)"
+        @select="() => tableApi.reload()"
-            danger
+        v-model:select-floor-id="selectFloorId"
-            type="primary" 
+      ></FloorTree>
-            v-access:code="['property:meterRecord:remove']" 
+      <BasicTable class="flex-1 overflow-hidden" table-title="抄表记录列表">
-            @click="handleMultiDelete">
+        <template #toolbar-tools>
-            {{ $t('pages.common.delete') }}
+          <Space>
-          </a-button>
+            <a-button
-        </Space>
-      </template>
-      <template #action="{ row }">
-        <Space>
-          <ghost-button
-            v-access:code="['property:meterRecord:edit']"
-            @click.stop="handleEdit(row)"
-          >
-            {{ $t('pages.common.edit') }}
-          </ghost-button>
-          <Popconfirm
-            :get-popup-container="getVxePopupContainer"
-            placement="left"
-            title="确认删除？"
-            @confirm="handleDelete(row)"
-          >
-            <ghost-button
               danger
+              type="primary"
+              @click="handleMultiDelete"
+              :disabled="!vxeCheckboxChecked(tableApi)"
               v-access:code="['property:meterRecord:remove']"
-              @click.stop=""
             >
               {{ $t('pages.common.delete') }}
+            </a-button>
+          </Space>
+        </template>
+        <template #action="{ row }">
+          <Space>
+            <ghost-button
+              @click.stop="handleEdit(row)"
+              v-access:code="['property:meterRecord:edit']"
+            >
+              {{ $t('pages.common.edit') }}
             </ghost-button>
-          </Popconfirm>
+            <Popconfirm
-        </Space>
+              placement="left"
-      </template>
+              title="确认删除？"
-    </BasicTable>
+              @confirm="handleDelete(row)"
+              :get-popup-container="getVxePopupContainer"
+            >
+              <ghost-button
+                danger
+                @click.stop=""
+                v-access:code="['property:meterRecord:remove']"
+              >
+                {{ $t('pages.common.delete') }}
+              </ghost-button>
+            </Popconfirm>
+          </Space>
+        </template>
+      </BasicTable>
+    </div>
+
     <MeterRecordDrawer @reload="tableApi.query()" />
   </Page>
 </template>