smartai2dian0/src/modules/knowledge/MessageBody.vue

<template>
  <div class="body-container" ref="body_container">
    <CardItem
      v-for="item in moke_data"
      :key="item.id"
      :name="item.name"
      :img_src="item.img_src"
      @click="handleToDetail(item)"
      @clickIcon="editIconHandle(item)"
    >
      <template #bottom>
        <div class="bottom">
          <div>{{ item.count }}&nbsp;{{ $t('management.document') }}</div>
          <div>|</div>
          <div>{{ item.time }}</div>
        </div>
      </template>
      <template #settings>
        <a-dropdown v-hasPermi="'system:knowledge:delete'" trigger="hover" @select="handleSelect($event, item)">
          <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.loadingDataTip')" />
      <div v-if="scroll_bottom && pages.current >= total_pages">{{ $t('management.noMoreData') }}</div>
    </div>
  </div>
  <a-spin class="init-loading" v-if="loading_data" :size="32" />
  <a-empty v-if="!moke_data.length"></a-empty>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { Message, Modal } from '@arco-design/web-vue';
import { useRouter } from 'vue-router';
import CardItem from '../../views/manage/CardItem.vue';
import { getImageKnowLedge } from '../common/icon-map.js';
import { funcThrottle } from '../../utils/utils';
import { getKnowledgeList, deleteOwnKnowledge } from '../../apis/knowledge';
import { deleteKnow } from '../../apis/rgflow-dify.js';
import { bus_knowledgeSearch, bus_knowledgeIconEdit } from '../../base/event-bus';

const router = useRouter();

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

const handleToDetail = (item) => {
  router.push({
    path: '/knowledge/detail',
    query: {
      id: item.id,
      name: item.name
    }
  });
};
const handleSelect = ({ value }, item) => {
  if (value === 'delete') {
    toRemove(item);
  }
};
const toRemove = (item) => {
  Modal.warning({
    title: '提示',
    content: '确认删除吗',
    okText: '确定',
    hideCancel: false,
    onOk: async () => {
      let data = await deleteKnow({
        kb_id: item.id
      });
      if (data.retcode == 0) {
        deleteOwnKnow(item.id);
      } else {
        Message.error('没有权限');
      }
    },
    onCancel: () => {}
  });
};
const deleteOwnKnow = async (id) => {
  try {
    const res = await deleteOwnKnowledge(id);
    if (res.code == 200) {
      Message.success('删除成功');
      pages.current = 1;
      moke_data.value = [];
      getKnowledge();
    } else {
      Message.error('删除失败');
    }
  } catch (err) {
    console.log(err, 'flag');
  }
};
const getKnowledge = async () => {
  if (pages.current == 1) {
    loading_data.value = true;
  }
  try {
    const res = await getKnowledgeList(pages.current, pages.pageSize, search_text.value);
    if (res.code == 200) {
      const data = res.data.rows.map((item) => {
        return {
          ...item,
          time: new Date(item.create_time).toLocaleString('zh-CN'),
          img_src: getImageKnowLedge(item.icon),
          count: item.documents ? item.documents : 0
        };
      });
      moke_data.value.push(...data);
      total_pages.value = Math.ceil(res.data.total / pages.pageSize);
    }
  } catch (err) {
    console.log(err, 'flag');
  } finally {
    loading_data.value = false;
  }
};
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();
    }
  }
};
const editIconHandle = (item) => {
  bus_knowledgeIconEdit.emit(item);
};

bus_knowledgeSearch.on((text) => {
  search_text.value = text;
  moke_data.value = [];
  pages.current = 1;
  getKnowledge();
});

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

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);
  align-content: flex-start;
  gap: 20px;
  overflow-y: auto;
  width: 100%;
  padding-top: 10px;
  height: calc(100% - 90px);
}

.body-container::-webkit-scrollbar {
  display: none;
}

.bottom {
  display: flex;
  gap: 10px;
}

.loading-tips {
  grid-column: 1/-1;
  grid-row-start: auto;
  text-align: center;
}

.arco-spin-loading {
  /* width:  */
  height: calc(100% - 80px);
}

.arco-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.init-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>