smartai2dian0/src/modules/intelligent/TopSetting.vue

<template>
  <a-space size="large">
    <a-input
      v-model="searchText"
      :placeholder="$t('management.search')"
      style="width: 300px"
      allow-clear
      @input="handleSearch"
    >
      <template #prefix>
        <icon-search />
      </template>
    </a-input>
    <a-button type="primary" size="large" @click="handleCreate">
      <template #icon>
        <icon-plus />
      </template>
      {{ $t('management.createIntelligent') }}
    </a-button>
  </a-space>
  <ModalAddIntel
    v-model:visible="visible"
    @add_intelligent="addIntelligent"
    @createRAGFLOWIntelligent="createRAGFLOWIntelligent"
  ></ModalAddIntel>
  <ModelAddItem
    v-model:show_model_item="show_model_item"
    :target_icon="target_icon"
    :target_intell_type="target_intell_type"
    @select_icon="selectIcon"
    @updateIntelligentList="updateIntelligentList"
  >
  </ModelAddItem>
  <ModelSelectIcon v-model:show_select_icon="show_select_icon" @sendIcon="sendIcon"></ModelSelectIcon>
  <!-- v-if="show_rg_config" -->
  <AgentConfig
    v-model:show_rg_config="show_rg_config"
    ref="editAgentKuai"
    :typeAngint="add_type"
    :formData="itemObj"
    @queryList="queryList"
    @updateIntelligentList="updateIntelligentList"
  ></AgentConfig>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import ModalAddIntel from './ModalAddIntel.vue';
import ModelAddItem from './ModelAddItem.vue';
import ModelSelectIcon from './ModalSelectIcon.vue';
import AgentConfig from './rgflow/agentConfig.vue';
import { funcDebounce } from '../../utils/utils';
import { getRagFlowData } from '../../apis/rgflow-dify';
import { bus_intelligentSearch, bus_intelligentEdit } from '../../base/event-bus';

const router = useRouter();

const searchText = ref('');
const visible = ref(false);
const show_model_item = ref(false);
const show_select_icon = ref(false);
const target_icon = ref('');
// 当前新建智能体类型
const target_intell_type = ref('');
// ragflow配置
const show_rg_config = ref(false);
const editAgentKuai = ref(null);
let add_type = ref('add');
let itemObj = reactive({});
const queryList = async (params = {}) => {
  // setLoading(true);
  // try {
  //   const { data } = await querydialogList(params);
  //   console.log(data, 'data');
  //   agentList.value = data.map((item) => {
  //     return {
  //       ...item,
  //       off: true,
  //     };
  //   });
  // } catch (err) {
  //   // you can report use errorHandler or other
  // } finally {
  //   setLoading(false);
  // }
};

// 搜索
const handleSearch = funcDebounce(
  () => {
    bus_intelligentSearch.emit(searchText.value);
  },
  300,
  false
);
// 创建智能体
const handleCreate = () => {
  visible.value = true;
};
// 创建rgflow智能体
const createRAGFLOWIntelligent = () => {
  show_rg_config.value = true;
};
const addIntelligent = (data) => {
  //根据智能体类型，打开不同的配置面板data.type
  show_model_item.value = true;
  target_intell_type.value = data.type;
};
const selectIcon = () => {
  show_select_icon.value = true;
};
const sendIcon = (icon) => {
  console.log('sendIcon', icon);
  target_icon.value = icon;
};

const updateIntelligentList = () => {
  bus_intelligentSearch.emit('');
  target_icon.value = '';
};

const getRagFlowDataFunc = async (id) => {
  try {
    const res = await getRagFlowData(id);
    Object.assign(itemObj, res.data);
    editAgentKuai.value.editClick();
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
  }
};
/**
 * 监听编辑智能体事件
 * @param {Object} item 编辑智能体对象
 * case 1: 编辑ragflow智能体
 * case 2: 编辑bs智能体
 * case 3: 编辑basic智能体
 * case 4: 编辑Dify智能体
 * */
bus_intelligentEdit.on((item) => {
  switch (item.agentType) {
    case '1':
      // TODO: 编辑rgflow智能体
      // itemObj = item;
      show_rg_config.value = true;
      add_type = 'edit';
      getRagFlowDataFunc(item.id);

      break;
    case '4':
      // TODO: 进入Dify智能体配置
      router.push({ path: '/intelligent/detail', query: { id: item.id, name: item.name } });
      break;
    default:
      console.log('暂不支持该智能体类型');
  }
});
</script>
<style scoped lang="css">
.arco-input-wrapper {
  background-color: var(--color-bg-5);
}
</style>