smartai2dian0/src/modules/intelligent/MessageBody.vue

<template>
  <div class="body-container" ref="body_container">
    <CardItem
      class="card_box"
      v-for="item in moke_data"
      :key="item.id"
      :name="item.name"
      :img_src="item.img_src"
      :height="195"
      @clickIcon="editIconHandle(item)"
    >
      <template #description> {{ item.desc }} </template>
      <template #settings>
        <a-switch v-model="item.online" checked-color="#4569EA" @change="changeStatus(item)">
          <template #checked> {{ $t('management.online') }} </template>
          <template #unchecked> {{ $t('management.offline') }} </template>
        </a-switch>
      </template>
      <template #labelBtn>
        <a-dropdown
          ref="dropdown"
          position="bl"
          :popup-max-height="false"
          @popup-visible-change="changeDropdownVisible($event, item.id)"
        >
          <div v-if="!item.label.length" class="label-btn">
            <img class="icon" src="../../assets/image/management/label.png" />
            <span class="text">{{ $t('management.addLabelBtn') }}</span>
          </div>
          <div v-else class="label-btn btn-content">
            <img class="icon" src="../../assets/image/management/label.png" />
            <span class="text">{{ item.label.map((it) => it.labelName).join('，') }}</span>
          </div>
          <template #content>
            <div class="label-add">
              <LabelSelected
                :labels="label_list"
                :addedLabels="item.label"
                @openManageTags="openManageTags"
                @toSearchLabels="toSearchLabels"
                @addLabelToTarget="addLabelToTarget($event, item.id)"
              ></LabelSelected>
            </div>
          </template>
        </a-dropdown>
      </template>
      <template #bottom>
        <div class="bottom">
          <div class="user">
            <!-- <icon-user /> {{ $t('management.createUser') }}：{{ item.user }} -->
          </div>
          <!-- <div class="tools" v-if="item.online">
            <icon-more :style="{ cursor: 'pointer' }" />
          </div> -->
          <div class="tools" v-if="!item.online">
            <icon-settings :style="{ cursor: 'pointer' }" @click.stop="editIntelligent(item)" />
            <icon-delete :style="{ cursor: 'pointer' }" @click.stop="deleteIntelligent(item)" />
          </div>
        </div>
      </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>
  <ManageTags v-model:visible="visible" :labels="label_list" @updateLabels="updateLabels"></ManageTags>
  <DeleteModal :visible.sync="delete_visible" @ok="deleteModalOk" @cancel="delete_visible = false" />
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
// import { Message, Modal } from '@arco-design/web-vue';
import { Message } from '../../3rd-libs/arco-vue-libs';
import CardItem from '../common/CardItem.vue';
import ManageTags from './ManageTags.vue';
import DeleteModal from '../../components/DeleteModal.vue';
import { getIconIntelligent, getImageIntelligent } from '../common/icon-map.js';
import LabelSelected from './LabelSelected.vue';
import { getDialogListForFilter } from '../../apis/intelligent';
import {
  bus_intelligentSearch,
  bus_intelligentEdit,
  bus_intelligentIconEdit,
  bus_intelligentLabelSync
} from '../../base/event-bus';
import { dialogType } from '../../views/manage/common';
import { funcThrottle } from '../../utils/utils';
import { getLabelList, addLabelToDialog, changeDialogStatus, deleteDialog } from '../../apis/intelligent';
import { deleteDify, deleteRgFlow } from '../../apis/rgflow-dify';

const moke_data = ref([
  // {
  //   id: 1,
  //   name: '智能问答',
  //   img_src: intelligentFrame1,
  //   desc: '极目新闻记者了解到，这些患者都有一些共同的习惯：经常把未吃完的食物放在桌上敞着',
  //   user: 'admin',
  //   online: false,
  // },
]);
const pages = reactive({
  current: 1,
  pageSize: 30
});
// 总页码
const total_pages = ref(5);
const body_container = ref(null);
const scroll_bottom = ref(false);
const search_text = ref('');
const search_label = ref(''); //单个card的搜索标签
const search_labelId_list = ref([]); //头部的搜索标签
const search_mode = ref(''); //要过滤的应用类型
const label_list = ref([]);
const dropdown = ref(null);
const visible = ref(false);
const loading_data = ref(false);
// 删除弹窗
const delete_visible = ref(false);
const delete_intelligent_item = ref(null);

const getDialog = async () => {
  if (pages.current == 1) {
    loading_data.value = true;
  }
  try {
    const filter_data = {
      current: pages.current,
      pageSize: pages.pageSize,
      keyword: search_text.value,
      label: search_labelId_list.value,
      mode: search_mode.value
    };
    const res = await getDialogListForFilter(filter_data);
    const data = res.data.rows.map((item) => {
      return {
        ...item,
        time: new Date(item.create_time).toLocaleString('zh-CN'),
        desc: item.description,
        img_src: getImageIntelligent(item.icon) || getIconIntelligent(item.icon),
        user: item.user.userName || '-',
        online: item.status == 1
      };
    });
    total_pages.value = Math.ceil(res.data.total / pages.pageSize);
    moke_data.value.push(...data);
  } catch (err) {
    console.log(err);
  } 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;
      getDialog();
    } else {
    }
  }
};
const openManageTags = () => {
  visible.value = true;
};

const editIntelligent = (item) => {
  bus_intelligentEdit.emit(item);
};
const deleteIntelligent = (item) => {
  delete_intelligent_item.value = item;
  delete_visible.value = true;
};
const deleteModalOk = async () => {
  if (delete_intelligent_item.value.agentType == dialogType.DIFY) {
    await deleteDify(delete_intelligent_item.value.id);
    const response = await deleteDialog(delete_intelligent_item.value.id);
    if (response.code == 200) {
      Message.success(t('management.delete_success'));
    }
    // TODO:刷新页面
  } else if (delete_intelligent_item.value.agentType == dialogType.RAGFLOW) {
    const data = {
      dialog_ids: [delete_intelligent_item.value.id]
    };
    const res = await deleteRgFlow(data);
    if (res.code == 0) {
      const response = await deleteDialog(delete_intelligent_item.value.id);
      if (response.code == 200) {
        Message.success(t('management.delete_success'));
      }
    }
  }
  bus_intelligentSearch.emit('');
  delete_visible.value = false;
};

// 获取标签列表
const getLabels = async () => {
  try {
    const res = await getLabelList(search_label.value, 1);
    if (res.code == 200) {
      label_list.value = [...res.data.rows];
      // 将label_list数据给到top中
      bus_intelligentLabelSync.emit(label_list.value);
    }
  } catch (err) {
    console.log(err);
  }
};
const updateLabels = () => {
  search_label.value = '';
  getLabels();
};
const toSearchLabels = (text) => {
  search_label.value = text;
  getLabels();
};
// 添加标签到智能体
const addLabelToTarget = async (label_id_list, target_id) => {
  try {
    await addLabelToDialog(label_id_list, target_id);
  } catch (err) {
    console.log(err);
  }
};
// 当下拉框隐藏时，重新更新对应的智能体数据
const changeDropdownVisible = async (visible, id) => {
  updateLabels();
  if (!visible) {
    const res = await getLabelList(search_label.value, 1, id);
    if (res.code == 200) {
      moke_data.value.forEach((item) => {
        if (item.id === id) {
          item.label = [...res.data.rows];
        }
      });
    }
  }
};

const changeStatus = async (item) => {
  try {
    const res = await changeDialogStatus(item.id, item.status == '1' ? '0' : '1');
    if (res.code != 200) {
      moke_data.value.forEach((it) => {
        if (item.id === id) {
          it.online = item.online;
        }
      });
    }
  } catch (err) {
    console.log(err);
    moke_data.value.forEach((it) => {
      if (it.id === item.id) {
        it.online = item.online;
      }
    });
  }
};
const editIconHandle = (item) => {
  bus_intelligentIconEdit.emit(item);
};

bus_intelligentSearch.on((search_data) => {
  search_text.value = search_data.searchText;
  search_labelId_list.value = search_data.target_label_list;
  search_mode.value = search_data.target_app;
  moke_data.value = [];
  pages.current = 1;
  getDialog();
});

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

onBeforeUnmount(() => {
  body_container.value.removeEventListener('scroll', scrollHandler);
  bus_intelligentSearch.off();
});
</script>
<style scoped lang="css">
.body-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-content: flex-start;
  gap: 20px;
  padding-top: 10px;
  overflow-y: auto;
  height: calc(100% - 90px);
}
.body-container::-webkit-scrollbar {
  display: none;
}
.label-btn {
  position: relative;
  background-color: var(--color-bg-2);
  color: var(--color-text-3);
  font-size: 12px;
  cursor: pointer;
  width: calc(100% - 60px);
  height: 32px;
  line-height: 32px;
  padding: 0px 30px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  visibility: hidden;
  .icon {
    position: absolute;
    top: 8px;
    left: 15px;
  }
}
.label-btn:hover {
  background-color: var(--color-fill-2);
}
.label-add {
  width: 240px;
  padding: 10px;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.loading-tips {
  grid-column: 1/-1;
  grid-row-start: auto;
  text-align: center;
}
.tools {
  display: flex;
  gap: 5px;
  visibility: hidden;
}
.card_box:hover .tools {
  cursor: pointer;
  visibility: visible;
}
.card_box:hover .label-btn {
  visibility: visible;
}
.btn-content {
  visibility: visible;
  background-color: var(--color-bg-1);
}
.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>