smartai2dian0/src/modules/knowledge/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 v-hasPermi="'system:knowledge:add'" type="primary" size="large" @click="handleCreate">
      <template #icon>
        <icon-plus />
      </template>
      {{ $t('management.createKnowledgeBase') }}
    </a-button>
  </a-space>
  <ModalCreateKb v-model:visible="visible" :target_icon="target_icon" @select_icon="selectIcon"></ModalCreateKb>
  <ModalSelectIcon
    v-model:show_select_icon="show_select_icon"
    :target_icon="target_icon"
    @sendIcon="sendIcon"
    @clearTargetIcon="clearTargetIcon"
  ></ModalSelectIcon>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
// import { Message } from '@arco-design/web-vue';
import { Message } from '../../3rd-libs/arco-vue-libs';
import ModalCreateKb from './ModalCreateKb.vue';
import ModalSelectIcon from './ModalSelectIcon.vue';
import { funcDebounce } from '../../utils/utils';
import { bus_knowledgeSearch, bus_knowledgeIconEdit } from '../../base/event-bus';
import { updateOwnKnowledgeIcon } from '../../apis/knowledge';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

const searchText = ref('');
// 模态框控制
const visible = ref(false);
const show_select_icon = ref(false);
const target_icon = ref('');
const edit_icon_data = ref(null);

// 搜索
const handleSearch = funcDebounce(
  () => {
    bus_knowledgeSearch.emit(searchText.value);
  },
  300,
  false
);
// 创建知识库
const handleCreate = () => {
  visible.value = true;
};

const selectIcon = () => {
  show_select_icon.value = true;
};
const sendIcon = (icon) => {
  console.log(icon);
  target_icon.value = icon;
  console.log(target_icon);
  if (!edit_icon_data.value) return;
  // 编辑
  updateOwnKnowledgeIcon(edit_icon_data.value.id, target_icon.value)
    .then((res) => {
      if (res.code == 200) {
        Message.success(t('management.edit_success'));
      } else {
        Message.error(t('management.edit_fail'));
      }
    })
    .catch(() => {
      Message.error(t('management.edit_fail'));
    })
    .finally(() => {
      target_icon.value = '';
      // 更新知识库列表
      bus_knowledgeSearch.emit(searchText.value);
      edit_icon_data.value = null;
    });
};
const clearTargetIcon = () => {
  target_icon.value = '';
  edit_icon_data.value = null;
};

bus_knowledgeIconEdit.on((item) => {
  show_select_icon.value = true;
  edit_icon_data.value = item;
  target_icon.value = item.icon;
});
onUnmounted(() => {
  bus_knowledgeIconEdit.off();
});
</script>
<style scoped lang="css">
.arco-input-wrapper {
  background-color: var(--color-bg-5);
}
</style>