smartai2dian0/src/modules/knowledge/ModalCreateKb.vue

<template>
  <a-modal v-model:visible="show_modal" :align-center="false" top="15vh" @ok="handleOk" @cancel="handleCancel">
    <template #title> 添加知识库 </template>
    <div class="section">
      <div class="form-item">
        <div class="label">图标&名称</div>
        <div class="value">
          <img class="icon" :src="getImageKnowLedge(target_icon)" alt="" @click="handleSelectIcon" />
          <a-input v-model="form.name" placeholder="请输入名称" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">描述</div>
        <a-textarea v-model="form.description" placeholder="描述" :auto-size="{ minRows: 2, maxRows: 5 }" />
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Message } from '@arco-design/web-vue';
import { bus_knowledgeSearch } from '../../base/event-bus';
import { createKb } from '../../apis/rgflow-dify';
import { createOwnKnowledge } from '../../apis/knowledge';
import { dialogType } from '../../views/manage/common';
import { getImageKnowLedge } from '../common/icon-map.js';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  target_icon: {
    type: String,
    default: 'knowledgeFrame1'
  }
});

const emit = defineEmits(['update:visible', 'select_icon']);

const formInit = {
  name: '',
  description: '',
  icon: '',
  klgType: dialogType.RAGFLOW
};
const form = ref(Object.assign({}, formInit));
const show_modal = computed(() => props.visible);
const handleOk = () => {
  if (form.value.name.trim().length) {
    // TODO：添加知识库b
    createKnowledgeBase();
  } else {
    Message.warning('名称不能为空');
  }
};
const handleCancel = () => {
  form.value.name = '';
  emit('update:visible', false);
};
const createKnowledgeBase = async () => {
  const { name, description } = form.value;
  const res = await createKb(name);
  if (res.data && res.data.kb_id) {
    const data = {
      id: res.data.kb_id,
      name,
      description,
      icon: props.target_icon,
      klgType: dialogType.RAGFLOW
    };
    createOwnKnowledgeBase(data);
  }
};
const createOwnKnowledgeBase = async (data) => {
  try {
    const res = await createOwnKnowledge(data);
    if (res.code == 200) {
      bus_knowledgeSearch.emit('');
      form.value = Object.assign({}, formInit);
      emit('update:visible', false);
      Message.success('创建成功');
    }
  } catch (error) {
    console.log('创建知识库失败', error);
    Message.error('创建失败');
  }
};
const handleSelectIcon = () => {
  emit('select_icon');
};
</script>
<style scoped lang="css">
.section {
  padding: 0 20px;
}
.form-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.value {
  display: flex;
  align-items: center;
  gap: 10px;
}
.value .icon {
  width: 44px;
  cursor: pointer;
}
.arco-input-wrapper {
  height: 32px;
  background-color: var(--color-neutral-2);
}
</style>