添加图片

yangyin

2024-08-30 4a3184a03f86dde138301f2d89ad180c0059f24d

 src/views/project/yw/dataManage/knowledge/AddKnowledge.vue

@@ -12,41 +12,51 @@
         <div class="relative transition-[opacity 0.3s]">
            <div class="set-form-height">
               <div class="flex flex-col">
                  <el-divider content-position="left"><span class="text-[18px]">知识库基础信息</span></el-divider>
                  <el-form :model="state.categoryForm" label-width="120px" label-position="left">
                     <el-form-item label="导入类目:">
                        <label>{{ state.categoryForm.ImportCategory }}</label>
                     <el-form-item label="知识库名称:">
                        <el-input
                           v-model="state.categoryForm.ImportCategory"
                           style="width: 532px"
                           maxlength="20"
                           placeholder="请输入知识库名称"
                           show-word-limit
                           type="text"
                        />
                     </el-form-item>
                     <el-form-item label="类目类型:">
                        <label>{{ state.categoryForm.CategoryType }}</label>
                     <el-form-item label="知识库描述:">
                        <el-input
                           v-model="state.categoryForm.CategoryType"
                           maxlength="1000"
                           style="width: 532px"
                           placeholder="请输入知识库描述。对知识库包含的内容和数据的用途进行描述。"
                           show-word-limit
                           :rows="5"
                           type="textarea"
                        />
                     </el-form-item>
                     <el-form-item label="导入方式:">
                        <el-upload
                           ref="uploadRef"
                           v-model:file-list="fileList"
                           class="upload-demo w-[530px]"
                           drag
                           :multiple="true"
                           :auto-upload="false"
                           :accept="state.allowType"
                           :limit="state.limit"
                           :before-upload="beforeAvatarUpload"
                        >
                           <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                           <div class="el-upload__text">
                              <em>点击或拖拽上传文件</em>
                     <el-form-item label="数据类型:">
                        <div v-for="(item, index) in state.dataTypeList" :key="index">
                           <div
                              class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer"
                           >
                              <el-radio v-model="state.categoryForm.dataType" size="large">
                                 <span class="font-[700] text[14px]">{{ item.Name }}</span>
                              </el-radio>

                              <el-tooltip :content="item.DemoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
                                 <div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
                                    {{ item.DemoDesc }}
                                 </div>
                              </el-tooltip>
                           </div>
                           <template #tip>
                              <div class="el-upload__tip">
                                 支持格式：{{ state.allowType }};限制大小{{ state.size }}M,最多上传{{ state.limit }}个文件
                              </div>
                           </template>
                        </el-upload>
                        </div>
                     </el-form-item>
                     <el-form-item label="文档识别:">
                     <!-- <el-form-item label="配置模式:">
                        <div
                           class="bg-[#f6f5ff] border-[1px] border-solid border-[#0062be] py-[12px] w-[215px] px-[16px] rounded-lg cursor-pointer"
                        >
                           <el-radio-group v-model="state.categoryForm.DocumentRecognition">
                           <el-radio-group v-model="state.categoryForm.configurationMode">
                              <el-radio value="1" size="large">
                                 <span class="font-[700] text[14px]">文档智能解析</span>
                              </el-radio>
@@ -57,11 +67,11 @@
                              </div>
                           </el-tooltip>
                        </div>
                     </el-form-item>
                     </el-form-item> -->
                  </el-form>

                  <div class="set-form-footer">
                     <el-button type="primary" @click="onSubmit">确 认</el-button>
                     <el-button type="primary" @click="onSubmit">下一步</el-button>
                     <el-button>取消</el-button>
                  </div>
               </div>
@@ -73,21 +83,31 @@

<script setup lang="ts">
import type { UploadUserFile } from 'element-plus';
import { ElMessage, ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
// 定义变量内容
const state = reactive({
   detailTitle: '导入数据',
   detailTitle: '创建知识库',
   categoryForm: {
      ImportCategory: '默认类目',
      ImportCategory: '',
      CategoryType: '本地类目',
      DocumentRecognition: '1',
      dataType: '1',
      configurationMode: '1',
   },
   allowType: '.pdf,.doc,.docx,.txt,.md,.pptx,.ppt',
   limit: 5,
   size: 5,
   demoDesc: '使用阿里云文档智能解析服务据解析文档，抽取文档内容、层级结构等信息。',
   dataTypeList: [
      {
         ID: 1,
         Name: '非结构化数据',
         ImageURL: 'static/images/knowledge/data_type_1.png',
         DemoDesc: '选择数据管理功能中已上传的doc、pdf、md、txt等文件',
      },
      {
         ID: 2,
         Name: '结构化数据',
         ImageURL: 'static/images/knowledge/data_type_2.png',
         DemoDesc: '选择数据管理功能中已创建的数据表',
      },
   ],
});
const fileList = ref<UploadUserFile[]>([]);
const router = useRouter();
@@ -95,26 +115,6 @@
const handleExitFlow = () => {
   //是否显示返回
   router.back();
};
const flag = ref(true);
const beforeAvatarUpload = () => {
   fileList.value.forEach((item: any) => {
      console.log(item);
      const type = item.name.split('.')[1];
      if (state.allowType.indexOf(type) == -1) {
         ElMessage({
            type: 'error',
            message: `格式错误,支持格式:${state.allowType}!`,
         });
         flag.value = false;
         return;
      } else if (item.size / 1024 / 1024 > state.size) {
         ElMessage.error(`文件最大${state.size}MB!`);
         flag.value = false;
         return;
      }
   });
   return flag.value;
};
//确认
const onSubmit = () => {};