smartai2dian0/src/views/conversation/ConversationBoardContainer.vue

<template>
  <div class="conversation-board-container">
    <div class="conversation-board-left"></div>

    <div class="conversation-board-main">
      <BoardWelcome />

      <BoardTags @change="handleTagChange" />

      <template v-if="api_status === 2">
        <div class="infomations-container">
          <a-spin :size="32" />
        </div>
      </template>
      <template v-if="api_status === 3">
        <BoardAgentList @itemActive="handleItemActive" :list="list_agents" />

        <div class="infomations-container" v-if="list_agents.length === 0">
          <a-empty> {{ $t('conversation.history_empty') }} </a-empty>
        </div>
      </template>
      <template v-if="api_status === 4">
        <div class="infomations-container">
          <a-result status="warning" :title="api_message"> </a-result>
        </div>
      </template>
      <template v-if="api_status === 5">
        <div class="infomations-container">
          <a-result status="error" :title="api_message"> </a-result>
        </div>
      </template>

      <div class="conversation-board-placeholder"></div>
    </div>

    <div class="conversation-board-right"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

import BoardWelcome from '../../modules/conversation-board/BoardWelcome.vue';
import BoardTags from '../../modules/conversation-board/BoardTags.vue';
import BoardAgentList from '../../modules/conversation-board/BoardAgentList.vue';

import { conversationBoardAgentList } from '../../modules/conversation-board/api-conversation-board';
import { useAllAgentStore } from '../../base/store/use-all-agents';

const emit = defineEmits(['agentActive']);

const selected_id = ref('');

// api请求的状态
const api_status = ref(1); // api状态 1 请求未启动 2 请求进心中 3 请求已成功 4 请求失败（网络成功，但是code不等于200） 5 请求出错
const api_message = ref(''); // 请求消息 与 api_status 对应的 message 消息内容

// 历史记录列表数据
const list_agents = ref([]); // 历史记录的列表数据

// store中保存的agents
const allAgents = useAllAgentStore();

const handleTagChange = (tag_id) => {
  selected_id.value = tag_id;

  handleApiRequest();
};

const handleItemActive = (target_id) => {
  emit('agentActive', target_id);
};

/**
 * 处理请求参数
 */
const formatListOptions = () => {
  const obj = {};

  if (selected_id.value) {
    obj.label = selected_id.value;
  }

  return obj;
};

/**
 * 调用api请求
 */
const handleApiRequest = () => {
  // const cache_agents = allAgents.agents;
  // if (cache_agents.length !== 0) {
  //   list_agents.value = cache_agents;
  //   return;
  // }

  // 处理查询参数
  const opts = formatListOptions();

  // 进入加载状态
  api_status.value = 2;
  api_message.value = '';
  conversationBoardAgentList(opts)
    .then((res) => {
      if (res.code / 1 === 200) {
        // 成功
        const res_list = res.data; // 历史记录列表

        list_agents.value = res_list;
        // // 在store中缓存数据
        // allAgents.setList(res_list);

        // api请求成功
        api_status.value = 3;
        api_message.value = 'success';
      } else {
        // api请求成功，但是业务失败
        api_status.value = 4;
        api_message.value = res.msg;
      }
    })
    .catch((err) => {
      console.log(err);
      // api请求出错
      api_status.value = 5;
      api_message.value = err.message;
    });
};

onMounted(() => {
  // 调用api
  handleApiRequest();
});
</script>

<style lang="css" scoped>
.conversation-board-container {
  display: flex;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
}
.conversation-board-left {
  width: 25%;
  flex-shrink: 0;
}
.conversation-board-right {
  width: 25%;
  flex-shrink: 0;
}
.conversation-board-main {
  /* width: 60%; */
  flex-grow: 1;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  margin-top: 150px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 底部占位元素 */
.conversation-board-placeholder {
  height: 50px;
}

.conversation-board-main .infomations-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}
</style>