feat(authGroup): 增加设备树选择功能

apps/web-antd/src/api/sis/authGroup/model.d.ts

@@ -39,11 +39,11 @@ export interface AuthGroupForm extends BaseEntity {
    */
   groupType?: number;
 
-  /**
-   * 是否启用(0：禁用，1启用)
-   */
-  isEnable?: boolean;
+  acIds?: string[] | number[];
 
+  eleIds?: string[] | number[];
+
+  floorIds?: string[] | number[];
 }
 
 export interface AuthGroupQuery extends PageQuery {

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

@@ -1,22 +1,24 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, ref, onMounted } 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 } from '@vben/utils'
 
-import { useVbenForm } from '#/adapter/form';
-import { authGroupAdd, authGroupInfo, authGroupUpdate } from '#/api/sis/authGroup';
-import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
+import { useVbenForm } from '#/adapter/form'
+import { authGroupAdd, authGroupInfo, authGroupUpdate } from '#/api/sis/authGroup'
+import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup'
+import { queryTree } from '#/api/sis/authRecord'
+import { message, Tree } from 'ant-design-vue'
 
-import { modalSchema } from './data';
+import { modalSchema } from './data'
 
-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: {
@@ -32,14 +34,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({
   // 在这里更改宽度
@@ -50,52 +52,115 @@ 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;
-
+    modalApi.modalLoading(true)
+    loadDeviceTree()
+    const { id } = modalApi.getData() as { id?: number | string }
+    isUpdate.value = !!id
     if (isUpdate.value && id) {
-      const record = await authGroupInfo(id);
-      await formApi.setValues(record);
+      const record = await authGroupInfo(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 ? authGroupUpdate(data) : authGroupAdd(data));
-    resetInitialized();
-    emit('reload');
-    modalApi.close();
+
+    if (eleIds.value.length === 0 && acIds.value.length === 0) {
+      message.error('请选择授权设备')
+      return
+    }
+
+    const data = cloneDeep(await formApi.getValues())
+    data.acIds = acIds.value;
+    data.eleIds = eleIds.value;
+    data.floorIds = floorIds.value;
+    await (isUpdate.value ? authGroupUpdate(data) : authGroupAdd(data))
+    resetInitialized()
+    emit('reload')
+    modalApi.close()
   } catch (error) {
-    console.error(error);
+    console.error(error)
   } finally {
-    modalApi.lock(false);
+    modalApi.lock(false)
   }
 }
 
 async function handleClosed() {
-  await formApi.resetForm();
-  resetInitialized();
+  await formApi.resetForm()
+  resetInitialized()
+}
+
+
+
+const treeData = ref([])
+function loadDeviceTree() {
+  queryTree().then((data: any) => {
+    treeData.value = data
+  })
+}
+
+
+const fieldNames = {
+  title: 'title',
+  label: 'label',
+  key: 'code',
+  children: 'children',
+}
+
+const checkedKeys = ref<any[]>([])
+type Key = string | number
+const eleIds = ref<any[]>([])
+const acIds = ref<any[]>([])
+const floorIds = ref<any[]>([])
+function handleCheck(checked: Key[] | { checked: Key[]; halfChecked: Key[] }, info: any) {
+
+  acIds.value = []
+  eleIds.value = []
+  floorIds.value = []
+
+  info.checkedNodesPositions.forEach((item: any) => {
+    switch (item.node.label) {
+      case 'accessControl':
+        console.log('item.node', item.node)
+        acIds.value = acIds.value.concat(item.node.code)
+        break
+      case 'floor':
+        console.log('item.node', item.node)
+        floorIds.value = floorIds.value.concat(item.node.code)
+        eleIds.value = eleIds.value.concat(item.node.parentCode)
+        break
+      case 'elevator':
+        eleIds.value = eleIds.value.concat(item.node.code)
+        break
+    }
+  })
+
+  // 去重
+  acIds.value = [...new Set(acIds.value)]
+  eleIds.value = [...new Set(eleIds.value)]
+  floorIds.value = [...new Set(floorIds.value)]
 }
 </script>
 
 <template>
   <BasicModal :title="title">
     <BasicForm />
+    <div class="p-4">
+      <Tree checkable :tree-data="treeData" :fieldNames="fieldNames" v-model:checkedKeys="checkedKeys"
+        :onCheck="handleCheck">
+      </Tree>
+    </div>
   </BasicModal>
 </template>