Initial commit

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

@@ -0,0 +1,98 @@
+<template>
+  <a-collapse v-model:activeKey="activeKey" :accordion="false">
+    <a-collapse-panel key="1">
+      <template #header>
+        <span class="ks-model-builder-title-icon icon-model"></span>我的行为树
+      </template>
+      <a-list :data-source="treeModelsData.trees || []" size="small" style="min-height: 25vh">
+        <template #renderItem="{ item }">
+          <a-tooltip placement="right">
+            <template #title>
+              {{ item.description }}
+            </template>
+            <a-list-item @click="()=> handleSelect(item)">
+              {{ item.name }}
+            </a-list-item>
+          </a-tooltip>
+        </template>
+      </a-list>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, ref } from 'vue';
+import { defaultPaginationRequest, defaultTreeModelsData } from './constants';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import type { ApiPaginationQuery } from '@/types';
+import type { TreeModel, TreeModelsData } from './types';
+import { findTreesByQuery } from './api';
+
+export default defineComponent({
+  emits: ['select-tree'],
+  components: {
+    PlusOutlined,
+  },
+  setup(_props, { emit }) {
+    const treeModelsData = ref<TreeModelsData>({ ...defaultTreeModelsData });
+    const treeModelsQuery = ref<ApiPaginationQuery>({ ...defaultPaginationRequest });
+    const activeKey = ref<number>(1);
+    const loadTress = () => {
+      findTreesByQuery(treeModelsQuery.value).then(r => {
+        treeModelsData.value = r.data;
+      });
+    };
+
+    const columns = [
+      {
+        title: '名称',
+        dataIndex: 'name',
+      },
+    ];
+
+    const handleSelect = (record: TreeModel) => {
+      emit('select-tree', record);
+    };
+
+    const customRow = (record: TreeModel) => {
+      return {
+        onClick: (event: any) => {
+          emit('select-tree', record, event);
+        },
+      };
+    };
+
+    onMounted(() => {
+      loadTress();
+    });
+
+    return {
+      activeKey,
+      treeModelsData,
+      treeModelsQuery,
+      loadTress,
+      columns,
+      customRow,
+      handleSelect,
+    };
+  },
+});
+
+
+</script>
+
+<style lang="less" scoped>
+.create-tree-icon {
+  cursor: pointer;
+}
+
+.ant-list-item {
+  padding: 5px 5px;
+  cursor: pointer;
+  color: rgb(130 196 233);
+
+  &:hover {
+    background: #0d2d4e;
+  }
+}
+</style>