feat(property): 物业灯控信息页面增加左侧社区树

2025-08-21 12:36:41 +08:00 · 2025-08-21 12:36:41 +08:00 · e750414f02
commit e750414f02
parent 006471bb1e
3 changed files with 144 additions and 45 deletions
--- a/apps/web-antd/src/views/property/meter/lightInfo/floor-tree.vue
+++ b/apps/web-antd/src/views/property/meter/lightInfo/floor-tree.vue
@ -0,0 +1,81 @@
+<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/meter/lightInfo/index.vue
+++ b/apps/web-antd/src/views/property/meter/lightInfo/index.vue
@ -2,8 +2,14 @@

 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 {
  useVbenVxeGrid,
@ -13,15 +19,13 @@ import {

 import {
  lightInfoList,
-  lightInfoExport,
  lightInfoRemove,
  switchSingleLight,
 } from '#/api/property/meter/lightInfo'
 import type { LightInfoForm } from '#/api/property/meter/lightInfo/model'
-import { commonDownloadExcel } from '#/utils/file/download'

-import lightInfoDrawer from './lightInfo-drawer.vue'
-import { columns, querySchema } from './data'
+// 左边楼层用
+const selectFloorId = ref<string[]>([])

 const formOptions: VbenFormProps = {
  commonConfig: {
@ -32,6 +36,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 = []
+
+    const { formApi, reload } = tableApi
+    await formApi.resetForm()
+    const formValues = formApi.form.values
+    formApi.setLatestSubmissionValues(formValues)
+    await reload(formValues)
+  },
 }

 const gridOptions: VxeGridProps = {
@ -52,6 +65,12 @@ const gridOptions: VxeGridProps = {
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
+        // 部门树选择处理
+        if (selectFloorId.value.length === 1) {
+          formValues.floorId = selectFloorId.value[0]
+        } else {
+          Reflect.deleteProperty(formValues, 'deptId')
+        }
        return await lightInfoList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
@ -104,53 +123,51 @@ function handleMultiDelete() {
    },
  })
 }
-
-function handleDownloadExcel() {
-  commonDownloadExcel(lightInfoExport, '灯控开关信息数据', tableApi.formApi.form.values, {
-    fieldMappingTime: formOptions.fieldMappingTime,
-  })
-}
 </script>

 <template>
  <Page :auto-content-height="true">
-    <BasicTable table-title="灯控开关信息列表">
-      <template #toolbar-tools>
-        <Space>
-           <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">
-            {{ $t('pages.common.delete') }}
-          </a-button>
-          <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary">
-            关灯
-          </a-button>
-          <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)">
-            {{ $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="">
+    <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 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">
              {{ $t('pages.common.delete') }}
+            </a-button>
+            <a-button :disabled="!vxeCheckboxChecked(tableApi)" danger type="primary">
+              关灯
+            </a-button>
+            <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)">
+              {{ $t('pages.common.edit') }}
            </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()" />
-      </template>
-    </BasicTable>
+            <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()" />
+        </template>
+      </BasicTable>
+    </div>
    <LightInfoDrawer @reload="tableApi.query()" />
  </Page>
 </template>
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@ -137,6 +137,7 @@ const handleAccountLogin = async () => {
                  type="password"
                  placeholder="请输入您的密码"
                  v-model="password"
+                  @keyup.enter="handleAccountLogin"
              />
            </div>