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

2025-09-13 15:01:14 +08:00
parent 21aa299c08
commit 2e47819070
4 changed files with 259 additions and 116 deletions
--- a/apps/web-antd/src/views/property/energyManagement/lightInfo/index.vue
+++ b/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 { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui'
-import { getVxePopupContainer } from '@vben/utils'
-
-
-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 { 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
-} from '#/adapter/vxe-table'
+  type VxeGridProps,
+} from '#/adapter/vxe-table';

 import {
  lightInfoList,
  lightInfoRemove,
  switchSingleLight,
-} from '#/api/property/energyManagement/lightInfo'
-import type { LightInfoForm } from '#/api/property/energyManagement/lightInfo/model'
+} from '#/api/property/energyManagement/lightInfo';
+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
-    await formApi.resetForm()
-    const formValues = formApi.form.values
-    formApi.setLatestSubmissionValues(formValues)
-    await reload(formValues)
+    const { formApi, reload } = tableApi;
+    await formApi.resetForm();
+    const formValues = formApi.form.values;
+    formApi.setLatestSubmissionValues(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.open()
+  drawerApi.setData({});
+  drawerApi.open();
 }

 async function handleEdit(row: Required<LightInfoForm>) {
-  drawerApi.setData({ id: row.id })
-  drawerApi.open()
+  drawerApi.setData({ id: row.id });
+  drawerApi.open();
 }

 async function handleDelete(row: Required<LightInfoForm>) {
-  await lightInfoRemove(row.id)
-  await tableApi.query()
+  await lightInfoRemove(row.id);
+  await tableApi.query();
 }

 function handleMultiDelete() {
-  const rows = tableApi.grid.getCheckboxRecords()
-  const ids = rows.map((row: Required<LightInfoForm>) => row.id)
+  const rows = tableApi.grid.getCheckboxRecords();
+  const ids = rows.map((row: Required<LightInfoForm>) => row.id);
  Modal.confirm({
    title: '提示',
    okType: 'danger',
    content: `确认删除选中的${ids.length}条记录吗？`,
    onOk: async () => {
-      await lightInfoRemove(ids)
-      await tableApi.query()
+      await lightInfoRemove(ids);
+      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()"
-        v-model:select-floor-id="selectFloorId"></FloorTree>
+      <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"
-              v-access:code="['property:lightInfo:remove']" @click="handleMultiDelete">
+            <a-button
+              :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="确认删除？"
-              @confirm="handleDelete(row)">
-              <ghost-button danger v-access:code="['property:lightInfo:remove']" @click.stop="">
+            <Popconfirm
+              :get-popup-container="getVxePopupContainer"
+              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="开"
-            un-checked-children="关" :api="() => switchSingleLight({'id':row.id, 'isOn':row.isOn})"
-            @reload="() => tableApi.query()" />
+          <TableSwitch
+            :checkedValue="true"
+            :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>
--- a/apps/web-antd/src/views/property/energyManagement/meterRecord/data.ts
+++ b/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: '仪表编号',
-    field: 'meterId',
+    title: '仪表名称',
+    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: '抄表照片',
-    field: 'imgOssid',
-  },
+  // {
+  //   title: '抄表照片',
+  //   field: 'imgOssid',
+  // },
  {
    field: 'action',
    fixed: 'right',
--- a/apps/web-antd/src/views/property/energyManagement/meterRecord/floor-tree.vue
+++ b/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>
--- a/apps/web-antd/src/views/property/energyManagement/meterRecord/index.vue
+++ b/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';
-
-import meterRecordDrawer from './meterRecord-drawer.vue';
-import { columns, querySchema } from './data';
+// 左边楼层用
+const selectFloorId = ref<string[]>([]);

 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, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  });
+  commonDownloadExcel(
+    meterRecordExport,
+    '抄表记录数据',
+    tableApi.formApi.form.values,
+    {
+      fieldMappingTime: formOptions.fieldMappingTime,
+    },
+  );
 }
 </script>

 <template>
  <Page :auto-content-height="true">
-    <BasicTable table-title="抄表记录列表">
-      <template #toolbar-tools>
-        <Space>
-          <a-button
-            :disabled="!vxeCheckboxChecked(tableApi)"
-            danger
-            type="primary" 
-            v-access:code="['property:meterRecord:remove']" 
-            @click="handleMultiDelete">
-            {{ $t('pages.common.delete') }}
-          </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
+    <div class="flex h-full gap-[8px]">
+      <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
              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>
-        </Space>
-      </template>
-    </BasicTable>
+            <Popconfirm
+              placement="left"
+              title="确认删除？"
+              @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>