smartai2dian0/src/views/conversation/ConversationHistoryContainer.vue

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

    <div class="conversation-history-main">
      <HistoryName />

      <HistorySearchInput @search="handleHistorySearch">
        <HistoryTypeDropdown @typeSelected="handleTypeSelected" :list_status="api_status" />
      </HistorySearchInput>

      <HistoryList
        v-if="list_history.length !== 0"
        :list="list_history"
        :can_loadmore="can_loadmore"
        @loadmore="handleListLoadMore"
        @active="handleListItemActive"
      />
      <template v-if="api_status === 1 || api_status === 2">
        <div class="infomations-container">
          <a-spin :size="32" />
        </div>
      </template>
      <template v-if="api_status === 3 && list_history.length === 0">
        <div class="infomations-container">
          <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-history-placeholder"></div>
    </div>

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

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

import HistoryName from '../../modules/conversation-history/HistoryName.vue';
import HistorySearchInput from '../../modules/conversation-history/HistorySearchInput.vue';
import HistoryList from '../../modules/conversation-history/HistoryList.vue';
import HistoryTypeDropdown from '../../modules/conversation-history/HistoryTypeDropdown.vue';

import { apiConversationHistoryList } from '../../modules/conversation-history/api-conversation-history';

import { getTodayZeroTimestamp, ONE_DAY, ONE_MONTH } from '../../utils/datetime';

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

const page_no = ref(1); // 当前页码
const page_count = ref(50); // 每页显示的数量
const search_text = ref(''); // 搜索字符串
const agent_id = ref('');

const can_loadmore = ref(true); // 是否可以加载更多

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

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

const count_today = ref(0); // 记录今天的数据量
const count_month = ref(0); // 记录本月的数据量
const count_earlier = ref(0); // 记录更早的数据量

const today_zero = getTodayZeroTimestamp(); // 今天零点
const yesterday_zero = today_zero - ONE_DAY; // 昨天零点
const last_month_zero = yesterday_zero - ONE_MONTH; // 上个月(30天之前的)零点

/**
 * 将数据进行分类
 * 依据时间戳，将列表数据分成三种类型：今天、本月、更早
 * 今天：从今天零点开始到现在
 * 本月：从今天零点之前，往前推30天
 * 更早：在30天之前的数据
 * @param res_list
 */
function dropListByType(res_list) {
  res_list.forEach((item, index) => {
    let label_item = null; // label项目（今天、本月、更早以前）
    const content_item = item; // 数据项目

    const create_time = content_item.updated_time; // 会话创建时间

    if (create_time >= today_zero) {
      // 今天的数据
      if (count_today.value === 0) {
        label_item = {
          client_field_content_type: 'label',
          client_field_timestamp_type: 'today',
          id: 'today'
        };
      }

      // 非第0个数据
      content_item.client_field_timestamp_type = 'today'; // 客户端自定义字段: 时间类型
      content_item.client_field_content_type = 'content'; // 内容类别

      count_today.value = count_today.value + 1;
    } else if (create_time < today_zero && create_time > last_month_zero) {
      // 本月的数据
      if (count_month.value === 0) {
        label_item = {
          client_field_content_type: 'label',
          client_field_timestamp_type: 'month',
          id: 'month'
        };
      }

      content_item.client_field_timestamp_type = 'month'; // 客户端自定义字段: 时间类型
      content_item.client_field_content_type = 'content'; // 内容类别

      count_month.value = count_month.value + 1;
    } else {
      // 更早以前的数据
      if (count_earlier.value === 0) {
        label_item = {
          client_field_content_type: 'label',
          client_field_timestamp_type: 'earlier',
          id: 'earlier'
        };
      }

      content_item.client_field_timestamp_type = 'earlier'; // 客户端自定义字段: 时间类型
      content_item.client_field_content_type = 'content'; // 内容类别

      count_earlier.value = count_earlier.value + 1;
    }

    if (label_item) {
      list_history.value.push(label_item);
    }
    list_history.value.push(content_item);
  });
}

/**
 * 处理请求参数
 */
const formatListOptions = () => {
  return {
    search: search_text.value,
    page: page_no.value,
    per_page: page_count.value,
    agent_id: agent_id.value
  };
};

/**
 * 调用api请求
 */
const handleApiRequest = () => {
  // 处理查询参数
  const opts = formatListOptions();

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

        if (res_list.length < page_count.value) {
          // 数据已经加载完成，不能加载更多了
          can_loadmore.value = false;
        } else {
          can_loadmore.value = true;
        }

        dropListByType(res_list);

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

/**
 * 请求更多数据
 */
const handleListLoadMore = () => {
  if (api_status.value === 2) {
    return;
  }

  if (!can_loadmore.value) {
    // 没有更多了
    return;
  }

  page_no.value = page_no.value + 1; // 页码加1

  // 调用api
  handleApiRequest();
};

/**
 * 点击某个历史记录触发的事件
 * @param history_id
 */
const handleListItemActive = (history_id) => {
  emit('historyActive', {
    agent_id: agent_id.value, // agent_id值
    target_id: history_id
  });
};

/**
 * 开始搜索
 * @param value
 */
const handleHistorySearch = (value) => {
  if (api_status.value === 2) {
    return;
  }

  search_text.value = value; // 搜索字符串
  page_no.value = 1; // 页码归位

  list_history.value = []; // 清空数据

  // 调用api
  handleApiRequest();
};

/**
 * 选定具体的类型，此时应该执行历史记录获取的请求
 * 当类型选定后，获取此类型对应的历史记录数据
 * @param type_item
 */
const handleTypeSelected = (type_item) => {
  if (api_status.value === 2) {
    return;
  }

  // 记录Agent ID
  agent_id.value = type_item.id;

  page_no.value = 1; // 页码归位

  list_history.value = []; // 清空数据

  // 调用api
  handleApiRequest();
};

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

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

  margin-left: auto;
  margin-right: auto;
}

.conversation-history-left {
  width: 25%;
  flex-shrink: 0;
}
.conversation-history-right {
  width: 25%;
  flex-shrink: 0;
}

.conversation-history-main {
  /* width: 60%; */
  flex-grow: 1;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  display: flex;
  flex-direction: column;
}

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

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