98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
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 :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>
|