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

<template>
  <a-collapse v-model:activeKey="activeKey" :accordion="false" class="ks-trees-collapse">
    <a-collapse-panel key="1" style="position: relative">
      <template #header>
        <a-flex>
          <span class="ks-model-builder-title-icon icon-model"></span>
          <span style="color: #82c4e9;font-size: 16px;">我的行为树</span>
          <!--          <span style="position: absolute; right: 15px;"><PlusOutlined @click="$emit('create-tree')"/></span>-->
        </a-flex>
      </template>
      <div class="w-full" style="padding: 5px;">
        <a-flex>
          <a-input-search v-model:value="behaviorTreeQuery.name" allowClear placeholder="行为树名称" size="small" @search="loadTress" />
          <a-button size="small" style="margin-left: 10px;">
            <PlusOutlined style="margin-top: 0px;display: block;" @click="$emit('create-tree')" />
          </a-button>
        </a-flex>
      </div>
      <a-list :data-source="behaviorTrees || []" size="small" style="min-height: 25vh">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-flex>
              <a-tooltip placement="bottom">
                <template #title>
                  <p>名称: {{ item.name }}</p>
                  <p>说明: {{ item.description }}</p>
                </template>
                <span>{{ substring(item.name, 15) }}</span>
              </a-tooltip>
              <a-flex class="ks-tree-actions">
                <span style="margin-right: 10px" @click="()=> handleSelect(item)"><EditFilled /></span>
                <a-popconfirm
                  title="确定删除?"
                  @confirm="()=> handleDelete(item)"
                >
                  <span class="ks-tree-action ks-tree-action-delete"><DeleteOutlined /></span>
                </a-popconfirm>
              </a-flex>
            </a-flex>
          </a-list-item>
        </template>
      </a-list>
      <a-pagination
        v-model:current="behaviorTreeQuery.pageNum"
        :page-size="behaviorTreeQuery.pageSize"
        :total="totalTress"
        simple size="small" @change="handleChange" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { CheckOutlined, DeleteOutlined, EditFilled, PlusOutlined } from '@ant-design/icons-vue';
import type { BehaviorTree, BehaviorTreeRequest } from './types';
import { deleteOneTreeById, findTreesByQuery } from './api';
import { substring } from '@/utils/strings';

export default defineComponent({
  emits: ['select-tree', 'create-tree'],
  components: {
    CheckOutlined,
    PlusOutlined,
    DeleteOutlined,
    EditFilled,
  },
  setup(_props, { emit }) {
    const behaviorTrees = ref<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 handleDelete = (item: BehaviorTree) => {
      deleteOneTreeById(item.id).then(r => {
        if (r.code === 200) {
          loadTress();
        }
      });
    };

    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
      },
    ];

    const handleSelect = (record: BehaviorTree) => {
      emit('select-tree', record);
    };

    const customRow = (record: BehaviorTree) => {
      return {
        onClick: (event: any) => {
          emit('select-tree', record, event);
        },
      };
    };

    const refresh = () => loadTress();

    onMounted(() => {
      loadTress();
    });

    return {
      refresh,
      totalTress,
      substring,
      activeKey,
      behaviorTrees,
      behaviorTreeQuery,
      loadTress,
      columns,
      customRow,
      handleSelect,
      handleChange,
      handleDelete,
    };
  },
});


</script>

<style lang="less">
.ant-collapse {
  .ant-list-sm {
    .ant-list-item {
      padding: 4px 15px;
      cursor: pointer;
      color: rgb(130 196 233);
      position: relative;

      .ks-tree-actions {
        position: absolute;
        right: 10px;
        display: none;
      }

      &:hover {
        background: #0d2d4e;

        .ks-tree-actions {
          display: block;
        }
      }

    }
  }

  &.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: 3px 5px;
  cursor: pointer;
  color: rgb(130 196 233);

  &:hover {
    background: #0d2d4e;
  }
}
</style>