liudong
2024-08-24 bb2503ed5613cc39582acf1dd516fa7ac47540e7
src/views/sessionManager/components/updataFile.vue
@@ -31,19 +31,30 @@
        ref="uploadRef"
        @change="onChange"
        multiple
        :limit="1"
      />
      <div style="width: 100%;margin-top: 10px;display: flex; justify-content: space-between;">
      <div style="width: 100%;margin-top: 10px;display: flex; justify-content: space-between;" class="upload-wrap">
        <div>
          <span>解析方法: </span>
          <a-radio-group v-model="parser_id">
            <a-radio
              v-for="item in parser_ids"
              :key="item.value"
              :value="item.value"
              style="margin-right: 10px"
            >{{item.name}}</a-radio>
          <a-radio-group v-model="parser_id" style="width: 400px;" @change="parserChange">
            <a-popover title=""
             v-for="item in filterData"
             :key="item.value"
            >
              <a-radio
                :value="item.value"
                style="margin-right: 10px"
              >{{item.name}}</a-radio>
              <template #content>
                <p style="max-width: 300px">{{item.parser_config_str}}</p>
              </template>
            </a-popover>
          </a-radio-group>
        </div>
        <a-select :style="{width:'100px', margin: '0 10px'}" :default-value="['通用', '多模态']" v-model="parser_configs" multiple size="small">
          <a-option v-for="item in parser_ids" :key="item.value">{{ item.name }}</a-option>
        </a-select>
        <p class="config-text">更多配置</p>
        <a-button
          :loading="onFileSelectedLoading"
          @click="upDataFile"
@@ -64,7 +75,7 @@
import { onMounted, onBeforeMount, reactive, ref, computed, watch } from "vue";
import axios from "axios";
import { Message } from "@arco-design/web-vue";
import { uploadWithoutKb } from "@/api/session";
import { addSessionApi, getParseMethodsListApi, getSessionDetailsApi, uploadWithoutKb } from "@/api/session";
const visible = ref(false);
const loading = ref(false);
@@ -73,7 +84,7 @@
const filesBtn = ref(null);
const onFileSelectedLoading = ref(false);
const parser_id = ref("");
const parser_ids = ref([]);
const parseridConfig = ref(false);
const uploaditemList = ref([]);
const activeSessionId = ref('');
let kbtenantInfo = reactive({
@@ -89,7 +100,6 @@
  tenant_id: '948fc6fa41ab11ef8fb80242ac120004',
  parser_idObj: {},
});
const uploadList = ref([]);
const parser = reactive({
  naive: {
    "chunk_token_num": 676,
@@ -103,8 +113,104 @@
      "random_seed": 1500
    }
  }, // 用户名
  qa: {
    "entity_types": [
      "organization",
      "person",
      "location",
      "event",
      "time"
    ],
    "raptor": {
      "use_raptor": false
    }
  },
  resume: {},
  manual: {},
  table: {},
  paper: {},
  book: {},
  laws: {},
  presentation: {},
  picture: {},
  one: {},
});
const parser_configs = ref(['通用', '多模态']);
const parser_ids = ref([
  {
    name: '通用',
    value: 'naive',
    parser_config: parser.naive,
    parser_config_str: '支持的文件格式为DOCX、EXCEL、PPT、IMAGE、PDF、TXT'
  },
  {
    name: 'Q&A',
    value: 'qa',
    parser_config: parser.qa,
    parser_config_str: '支持 excel 和 csv/txt 文件格式。 \n' +
      '如果文件以 excel 格式,则应由两个列组成 没有标题:一个提出问题,另一个用于答案, 答案列之前的问题列。\n' +
      '如果文件以 csv/txt 格式为 用作分开问题和答案的定界符。\n'
  },
  {
    name: '简历',
    value: 'resume',
    parser_config: parser.resume,
    parser_config_str: '支持的文件格式为DOCX、PDF、TXT'
  },
  {
    name: '说明书',
    value: 'manual',
    parser_config: parser.manual,
    parser_config_str: '仅支持PDF'
  },
  {
    name: '表格',
    value: 'table',
    parser_config: parser.table,
    parser_config_str: '支持EXCEL和CSV/TXT格式文。 \n' +
      '对于 csv 或 txt 文件,列之间的分隔符为 TAB,\n' +
      '第一行必须是列标题。\n'
  },
  {
    name: '多模态',
    value: 'paper',
    parser_config: parser.paper,
    parser_config_str: '仅支持PDF文件'
  },
  {
    name: '书籍',
    value: 'book',
    parser_config: parser.book,
    parser_config_str: '支持的文件格式为DOCX、PDF、TXT'
  },
  {
    name: '法律文件',
    value: 'laws',
    parser_config: parser.laws,
    parser_config_str: '支持的文件格式为DOCX、PDF、TXT'
  },
  {
    name: 'PPT',
    value: 'presentation',
    parser_config: parser.presentation,
    parser_config_str: '支持的文件格式为PDF、PPTX'
  },
  {
    name: '图片',
    value: 'picture',
    parser_config: parser.picture,
    parser_config_str: '支持图像文件'
  },
  {
    name: '整体',
    value: 'one',
    parser_config: parser.one,
    parser_config_str: '支持的文件格式为DOCX、EXCEL、PDF、TXT'
  },
]);
const parser_idsArr = ref([]);
const uploadList = ref([]);
const props = defineProps(["sessionId"]);
const emit = defineEmits(["selectFileCallback"]);
const uploadRef = ref();
@@ -113,34 +219,94 @@
  return ".word, .pdf, .ppt, .excel, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .pptx, .ppt, .pdf, .mp4, .avi, .mp3,.wav, .wma, .wmv, .rm,";
});
const init = () => {
  parser_ids.value = kbtenantInfo.parser_ids.split(",").map((item) => {
    const [value1, value2] = item.split(":");
    return {
      name: value2,
      value: value1
    };
const filterData = computed(() => {
  const result = parser_ids.value.filter(val => parser_configs.value.includes(val.name)).reverse().slice(0,4).reverse();
  result.unshift({
    name: '智能识别',
    value: '',
    parser_config_str: '',
    parser_config: ''
  });
  return result;
});
const init = () => {
  // parser_ids.value = kbtenantInfo.parser_ids.split(",").map((item) => {
  //   const [value1, value2] = item.split(":");
  //   return {
  //     name: value2,
  //     value: value1
  //   };
  // });
  getParseMethodsList();
}
const chooseParser = (item) => {
  console.log(item);
};
const onChange = (fileList) => {
  files.value = fileList;
  files.value.forEach((item) => {
  });
};
const parserChange = ()=>{
  parseridConfig.value = false;
}
const visibleChange = (e) => {
  e.stopPropagation();
  visible.value = !visible.value;
}
const upDataFile = () => {
const getIconByExtension = (extension) => {
  const fileExtension = ref('');
  fileExtension.value = extension.split('.').pop();
  let type = '';
  parser_idsArr.value.forEach((item)=>{
    // 包含元素
    if (item.formats.includes(fileExtension.value)){
      type = item.id;
    }
  })
  return type;
};
const upDataFile = async () => {
  // if (!activeSessionId.value) {
  //   //新建会话
  //   const res = await addSessionApi({
  //     dialog_id: '',
  //     conversation_desc: '',
  //   });
  //   // console.log(res, "res");
  //   if (res.code == 200) {
  //     // console.log(res.data.conversation_id);
  //     activeSessionId.value = res.data?.conversation_id;
  //     const { code, data } = await getSessionDetailsApi(res.data?.conversation_id);
  //     if (code === 200) {
  //       console.log(data, '新建会话详情');
  //     }
  //   } else {
  //     Message.error('创建会话失败,请重试');
  //   }
  // }
  console.log(files.value, "files");
  console.log(parser_ids.value, "解析方法");
  if(files.value.length == 0){
    Message.warning('请选择文件');
    return;
  }
  uploaditemList.value = files.value.map((item)=>{
  uploaditemList.value = files.value.map((item,index)=>{
    return {
      index: index,
      name: item.name,
      size: (item.file.size/1024).toFixed(2) + 'K',
    }
@@ -150,8 +316,12 @@
  for (let i = 0; i < files.value.length; i++) {
    formData.append('file', files.value[i].file);
    formData.append('conversation_id', activeSessionId.value);
    formData.append('parser_id', parser_id.value);
    formData.append('parser_config', '');
    if(!parser_id.value){
      formData.append('parser_id', getIconByExtension(files.value[i].name));
    }else{
      formData.append('parser_id', parser_id.value);
    }
  }
  uploadWithoutKb(formData).then((res) => {
    onFileSelectedLoading.value = false;
@@ -181,6 +351,19 @@
  cancel
})
const getParseMethodsList = async () => {
  let res = await getParseMethodsListApi();
  parser_ids.value = res.data.map((item) => {
    return {
      name: item.name,
      value: item.id,
      parser_config: '',
      parser_config_str: item.parser_config_str
    };
  });
  parser_idsArr.value = res.data;
}
onBeforeMount(() => {
  init();
@@ -200,7 +383,11 @@
</script>
<style>
.upload-wrap .arco-select-view-inner{
  display: none;
}
</style>
<style scoped lang="less">
.aUpload {
  width: 100%;
@@ -208,4 +395,13 @@
  overflow: hidden;
  overflow-y: auto;
}
.upload-wrap {
  position: relative;
}
.config-text {
  position: absolute;
  right: 70px;
  bottom: -11px;
  font-size: 12px;
}
</style>