feat: 分组切换

hx-ai-intelligent/src/view/equipmentManage/group/index.vue

@@ -2,11 +2,17 @@
   <editDrawer ref="editDrawerRef" />
   <editGroup ref="editGroupRef" />
   <editFormula ref="editFormulaRef" />
-  <ns-view-list-table v-bind="config" />
+  <div class="groupContainer">
+    <div class="tree">
+      <ns-tree-api v-bind="treeConfig" @select="handleSelect" />
+    </div>
+    <ns-view-list-table v-show="defaultType" class="table" v-bind="config" />
+    <ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" />
+  </div>
 </template>
 <script lang="ts" setup>
   import { createVNode, onMounted, ref } from 'vue';
-  import { tableConfig, treeConfig } from './config';
+  import { tableConfig, treeConfig, tableConfigCal } from './config';
   import { useParams } from '/nerv-lib/use';
   import editDrawer from './edit.vue';
   import editGroup from './editGroup.vue';
@@ -16,6 +22,37 @@
   const editDrawerRef = ref();
   const editGroupRef = ref();
   const editFormulaRef = ref();
+  const defaultType = ref(true);
   const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
+  const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
+  const handleSelect = () => {
+    defaultType.value = !defaultType.value;
+  };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .groupContainer {
+    height: 100%;
+    overflow-y: auto;
+    background-color: @ns-content-bg;
+    display: flex;
+    // gap: @ns-gap;
+    .tree,
+    .table {
+      background-color: @white;
+      border-radius: @ns-border-radius;
+      overflow-y: auto;
+    }
+
+    .tree {
+      margin-right: @ns-gap;
+      :deep(.ant-spin-nested-loading) {
+        width: 300px;
+        background-color: @white;
+      }
+    }
+    .table {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+</style>