smartai2dian0/src/modules/knowledge/MessageBody.vue

<template>
  <div class="body-container" ref="body_container">
    <CardItem v-for="item in moke_data" :key="item.name" :name="item.name" :img_src="item.img_src">
      <template #bottom>
        <div class="bottom">
          <div>{{ item.count }}{{ $t('management.document') }}</div>
          <div>|</div>
          <div>{{ item.time }}</div>
        </div>
      </template>
      <template #settings>
        <a-dropdown trigger="hover" @select="handleSelect">
          <icon-more :style="{ fontSize: '20px' }" />
          <template #content>
            <a-doption :value="{ value: 'edit' }">{{ $t('management.edit') }}</a-doption>
            <a-doption :value="{ value: 'delete' }">{{ $t('management.delete') }}</a-doption>
          </template>
        </a-dropdown>
      </template>
    </CardItem>
    <div class="loading-tips">
      <a-spin v-if="scroll_bottom && pages.current < total_pages" :tip="$t('management.loadingData')" />
      <div v-if="scroll_bottom && pages.current >= total_pages">{{ $t('management.noMoreData') }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import CardItem from '../../views/manage/CardItem.vue';
import { getImageKnowLedge } from '../../views/manage/common';
import { getKnowledgeList } from '../../apis/knowledge';
import { bus_knowledgeSearch } from '../../base/event-bus';

const moke_data = ref([
  // {
  //   name: '知识库1',
  //   img_src: knowledgeFrame1,
  //   count: 292,
  //   time: '2024:11:11 12:00:00'
  // }
]);
const pages = reactive({
  current: 1,
  pageSize: 25
});
// 总页码
const total_pages = ref(5);
const body_container = ref(null);
const scroll_bottom = ref(false);
// 搜索文本
const search_text = ref('');

const handleSelect = ({ value }) => {
  if (value === 'edit') {
  } else {
  }
};
const getKnowledge = async () => {
  // TODO: 等待接口修改后，需要将searchText传到接口中
  try {
    const res = await getKnowledgeList(pages.current, pages.pageSize);
    if (res.code == 200) {
      const data = res.data.rows.map((item) => {
        return {
          ...item,
          time: new Date(item.update_time).toLocaleString('zh-CN'),
          img_src: getImageKnowLedge(item.avatar),
          count: item.count ? item.count : 292
        };
      });
      moke_data.value.push(...data);
    }
  } catch (err) {
    console.log(err, 'flag');
  }
};
const scrollHandler = (e) => {
  if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
    scroll_bottom.value = true;
    // 调用函数加载更多数据
    if (pages.current < total_pages.value) {
      pages.current += 1;
      getKnowledge();
    } else {
    }
  }
};

bus_knowledgeSearch.on((text) => {
  search_text.value = text;
  getKnowledge();
});

onMounted(() => {
  getKnowledge();
  body_container.value.addEventListener('scroll', scrollHandler);
});

onBeforeUnmount(() => {
  bus_knowledgeSearch.off();
  body_container.value.removeEventListener('scroll', scrollHandler);
});
</script>
<style scoped lang="css">
.body-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  overflow-y: scroll;
  height: calc(100% - 80px);
}
.body-container::-webkit-scrollbar {
  display: none;
}
.bottom {
  display: flex;
  gap: 10px;
}
.loading-tips {
  grid-column: 1/-1;
  grid-row-start: auto;
  text-align: center;
}
</style>