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

<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 size="small" :data-source="treeModelsData.trees || []" 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>
        <!--      <template #footer>-->
        <!--        <div>Footer</div>-->
        <!--      </template>-->
      </a-list>
    </a-collapse-panel>
  </a-collapse>
<!--  <a-card class="ks-model-builder-card tress-list-card">-->
<!--    <template #title>-->
<!--      <span class="ks-model-builder-title-icon icon-model"></span>我的行为树-->
<!--    </template>-->
<!--&lt;!&ndash;    <template #extra>&ndash;&gt;-->
<!--&lt;!&ndash;      <a-tooltip placement="right">&ndash;&gt;-->
<!--&lt;!&ndash;        <template #title>&ndash;&gt;-->
<!--&lt;!&ndash;          创建行为树&ndash;&gt;-->
<!--&lt;!&ndash;        </template>&ndash;&gt;-->
<!--&lt;!&ndash;        <PlusOutlined class="create-tree-icon"></PlusOutlined>&ndash;&gt;-->
<!--&lt;!&ndash;      </a-tooltip>&ndash;&gt;-->
<!--&lt;!&ndash;    </template>&ndash;&gt;-->

<!--    <a-list size="small" :data-source="treeModelsData.trees || []">-->
<!--      <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>-->
<!--&lt;!&ndash;      <template #footer>&ndash;&gt;-->
<!--&lt;!&ndash;        <div>Footer</div>&ndash;&gt;-->
<!--&lt;!&ndash;      </template>&ndash;&gt;-->
<!--    </a-list>-->

    <!--    <a-table-->
    <!--      size="small"-->
    <!--      :data-source="treeModelsData.trees || []"-->
    <!--      :columns="columns"-->
    <!--      :customRow="customRow"-->
    <!--      :row-key="(record: any) => record.id">-->
    <!--      <template #bodyCell="{ text }">-->
    <!--        {{ text }}-->
    <!--      </template>-->
    <!--    </a-table>-->
<!--  </a-card>-->
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { defaultPaginationRequest, defaultTreeModelsData } from './constants';
import { CheckOutlined, 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>