feat(sis): 设备管理增加楼层选择功能

apps/web-antd/src/views/sis/deviceManage/data.ts

@@ -100,6 +100,11 @@ export const modalSchema: FormSchemaGetter = () => [
     component: 'Input',
     rules: 'required',
   },
+  {
+    label: '设备位置',
+    fieldName: 'floorId',
+    component: 'TreeSelect',
+  },
   {
     label: '设备厂商',
     fieldName: 'factoryNo',

apps/web-antd/src/views/sis/deviceManage/deviceManage-modal.vue

@@ -1,28 +1,29 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref } from 'vue'
 
-import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
+import { useVbenModal } from '@vben/common-ui'
+import { $t } from '@vben/locales'
+import { cloneDeep, getPopupContainer, handleNode } from '@vben/utils'
 
-import { useVbenForm } from '#/adapter/form';
+import { useVbenForm } from '#/adapter/form'
 import {
   deviceManageAdd,
   deviceManageInfo,
   deviceManageUpdate,
-} from '#/api/sis/deviceManage';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+} from '#/api/sis/deviceManage'
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'
 
-import { modalSchema } from './data';
-import { getDictOptions } from '#/utils/dict';
-import { DictEnum } from '@vben/constants';
+import { modalSchema } from './data'
+import { communityTree } from '#/api/property/community'
+import { getDictOptions } from '#/utils/dict'
+import { DictEnum } from '@vben/constants'
 
-const emit = defineEmits<{ reload: [] }>();
+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');
-});
+  return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add')
+})
 
 const [BasicForm, formApi] = useVbenForm({
   commonConfig: {
@@ -38,14 +39,14 @@ const [BasicForm, formApi] = useVbenForm({
   schema: modalSchema(),
   showDefaultActions: false,
   wrapperClass: 'grid-cols-2',
-});
+})
 
 const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
   {
     initializedGetter: defaultFormValueGetter(formApi),
     currentGetter: defaultFormValueGetter(formApi),
   },
-);
+)
 
 const [BasicModal, modalApi] = useVbenModal({
   // 在这里更改宽度
@@ -56,45 +57,88 @@ const [BasicModal, modalApi] = useVbenModal({
   onConfirm: handleConfirm,
   onOpenChange: async (isOpen) => {
     if (!isOpen) {
-      return null;
+      return null
     }
-    modalApi.modalLoading(true);
-    const { id } = modalApi.getData() as { id?: number | string };
-    isUpdate.value = !!id;
+
+    // 加载社区树
+    setupCommunitySelect()
+
+    modalApi.modalLoading(true)
+    const { id } = modalApi.getData() as { id?: number | string }
+    isUpdate.value = !!id
 
     if (isUpdate.value && id) {
-      const record = await deviceManageInfo(id);
-      await formApi.setValues(record);
+      const record = await deviceManageInfo(id)
+      await formApi.setValues(record)
     }
-    await markInitialized();
+    await markInitialized()
 
-    modalApi.modalLoading(false);
+    modalApi.modalLoading(false)
   },
-});
+})
 
 async function handleConfirm() {
   try {
-    modalApi.lock(true);
-    const { valid } = await formApi.validate();
+    modalApi.lock(true)
+    const { valid } = await formApi.validate()
     if (!valid) {
-      return;
+      return
     }
     // getValues获取为一个readonly的对象 需要修改必须先深拷贝一次
-    const data = cloneDeep(await formApi.getValues());
-    await (isUpdate.value ? deviceManageUpdate(data) : deviceManageAdd(data));
-    resetInitialized();
-    emit('reload');
-    modalApi.close();
+    const data = cloneDeep(await formApi.getValues())
+    await (isUpdate.value ? deviceManageUpdate(data) : deviceManageAdd(data))
+    resetInitialized()
+    emit('reload')
+    modalApi.close()
   } catch (error) {
-    console.error(error);
+    console.error(error)
   } finally {
-    modalApi.lock(false);
+    modalApi.lock(false)
   }
 }
 
+/**
+ * 初始化城市
+ */
+async function setupCommunitySelect() {
+  const areaList = await communityTree(3)
+  // 选中后显示在输入框的值 即父节点 / 子节点
+  // addFullName(areaList, 'areaName', ' / ');
+  const splitStr = '/'
+  handleNode(areaList, 'label', splitStr, function (node: any) {
+    if (node.level != 3) {
+      node.disabled = true
+    }
+  })
+  formApi.updateSchema([
+    {
+      componentProps: () => ({
+        class: 'w-full',
+        fieldNames: {
+          key: 'id',
+          label: 'label',
+          value: 'code',
+          children: 'children',
+        },
+        getPopupContainer,
+        placeholder: '请选择楼层',
+        showSearch: true,
+        treeData: areaList,
+        treeDefaultExpandAll: true,
+        treeLine: { showLeafIcon: false },
+        // 筛选的字段
+        treeNodeFilterProp: 'label',
+        // 选中后显示在输入框的值
+        treeNodeLabelProp: 'fullName',
+      }),
+      fieldName: 'floorId',
+    },
+  ])
+}
+
 async function handleClosed() {
-  await formApi.resetForm();
-  resetInitialized();
+  await formApi.resetForm()
+  resetInitialized()
 }
 </script>