Initial commit

modeler/src/views/decision/trees-card.vue

@@ -1,9 +1,12 @@
 <template>
-  <a-collapse v-model:activeKey="activeKey" :accordion="false">
+  <a-collapse v-model:activeKey="activeKey" :accordion="false" class="ks-trees-collapse">
     <a-collapse-panel key="1">
       <template #header>
         <span class="ks-model-builder-title-icon icon-model"></span>我的行为树
       </template>
+      <div class="w-full" style="padding: 5px;">
+        <a-input-search size="small" allowClear v-model:value="behaviorTreeQuery.name" placeholder="行为树名称" @search="loadTress" />
+      </div>
       <a-list size="small" :data-source="behaviorTrees || []" style="min-height: 25vh">
         <template #renderItem="{ item }">
           <a-tooltip placement="right">
@@ -17,6 +20,11 @@
           </a-tooltip>
         </template>
       </a-list>
+      <a-pagination
+        size="small"
+        v-model:current="behaviorTreeQuery.pageNum"
+        :page-size="behaviorTreeQuery.pageSize"
+        simple :total="totalTress" @change="handleChange" />
     </a-collapse-panel>
   </a-collapse>
 </template>
@@ -24,9 +32,9 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref } from 'vue';
 import { PlusOutlined } from '@ant-design/icons-vue';
-import type { BehaviorTree } from './types';
+import type { BehaviorTree, BehaviorTreeRequest } from './types';
 import { findTreesByQuery } from './api';
-import {substring} from '@/utils/strings'
+import { substring } from '@/utils/strings';
 
 export default defineComponent({
   emits: ['select-tree'],
@@ -35,14 +43,26 @@ export default defineComponent({
   },
   setup(_props, { emit }) {
     const behaviorTrees = ref<BehaviorTree[]>([]);
-    const behaviorTreeQuery = ref<Partial<BehaviorTree>>({});
+    const behaviorTreeQuery = ref<Partial<BehaviorTreeRequest>>({
+      name: null,
+      pageNum: 1,
+      pageSize: 8,
+    });
     const activeKey = ref<number>(1)
+    const totalTress = ref<number>(0);
     const loadTress = () => {
       findTreesByQuery(behaviorTreeQuery.value).then(r => {
         behaviorTrees.value = r.rows;
+        totalTress.value = r.total ?? 0;
       });
     };
 
+    const handleChange = (page: number, pageSize: number) => {
+      behaviorTreeQuery.value.pageNum = page;
+      behaviorTreeQuery.value.pageSize = pageSize;
+      loadTress();
+    };
+
     const columns = [
       {
         title: '名称',
@@ -67,6 +87,7 @@ export default defineComponent({
     });
 
     return {
+      totalTress,
       substring,
       activeKey,
       behaviorTrees,
@@ -75,6 +96,7 @@ export default defineComponent({
       columns,
       customRow,
       handleSelect,
+      handleChange,
     };
   },
 })
@@ -82,12 +104,52 @@ export default defineComponent({
 
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
+.ant-collapse {
+  .ant-list-sm {
+    .ant-list-item {
+      padding: 4px 15px;
+      cursor: pointer;
+      color: rgb(130 196 233);
+
+      &:hover {
+        background: #0d2d4e;
+      }
+    }
+  }
+
+  &.ks-trees-collapse {
+    .ant-collapse-content-box {
+      padding: 0;
+      height: 40vh;
+      position: relative;
+    }
+
+    .ant-pagination{
+      position: absolute;
+      bottom: 10px;
+      width: 100%;
+      .ant-pagination-disabled .ant-pagination-item-link,
+      .ant-pagination-disabled:hover .ant-pagination-item-link,
+      .ant-pagination-prev .ant-pagination-item-link,
+      .ant-pagination-next .ant-pagination-item-link,
+      &.ant-pagination-mini .ant-pagination-total-text,
+      &.ant-pagination-mini .ant-pagination-simple-pager{
+        color: rgb(255 255 255 / 95%);
+      }
+      &.ant-pagination-simple .ant-pagination-simple-pager input {
+        background-color: transparent;
+        border: 1px solid #0f4a7c;
+        color:#eee;
+      }
+    }
+  }
+}
 .create-tree-icon{
   cursor: pointer;
 }
 .ant-list-item {
-  padding: 5px 5px;
+  padding: 3px 5px;
   cursor: pointer;
   color: rgb(130 196 233);