<template>
|
<div class="h100 overflow-y-auto p-[16px]">
|
<div class="mb-[10px] flex items-center">
|
<el-button style="margin-left: 8px; width: 40px" link @click="handleExitFlow">
|
<el-icon style="font-size: 24px !important">
|
<ArrowLeft />
|
</el-icon>
|
</el-button>
|
<span class="text-[24px] text-[#26244c] font-[700]">{{ state.detailTitle }}</span>
|
</div>
|
<div class="relative">
|
<div class="relative transition-[opacity 0.3s]">
|
<div class="set-form-height">
|
<div class="flex flex-col">
|
<el-form
|
:model="state.categoryForm"
|
label-width="120px"
|
label-position="left"
|
:rules="state.categoryFormRules"
|
ref="categoryFormRef"
|
>
|
<el-form-item label="导入类目:">
|
<label>{{ state.categoryForm.ImportCategory }}</label>
|
</el-form-item>
|
<el-form-item label="类目类型:">
|
<label>{{ state.categoryForm.CategoryType }}</label>
|
</el-form-item>
|
<el-form-item label="导入方式:" prop="importType">
|
<el-upload
|
ref="uploadRef"
|
class="upload-demo w-[530px]"
|
:http-request="uploadFile"
|
drag
|
:accept="state.allowType"
|
:on-remove="handleRemove"
|
>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<div class="el-upload__text">
|
<em>点击或拖拽上传文件</em>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">支持格式：{{ state.allowType }};限制大小{{ state.size }}M</div>
|
</template>
|
</el-upload>
|
</el-form-item>
|
<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 value="1" size="large">
|
<span class="font-[700] text[14px]">文档智能解析</span>
|
</el-radio>
|
</el-radio-group>
|
<el-tooltip :content="state.demoDesc" placement="top" effect="light" popper-class="set_tooltip_demo">
|
<div class="text-[#878aab] text-[12px] mx-0 mt-[2px] mb-0 set-desc">
|
{{ state.demoDesc }}
|
</div>
|
</el-tooltip>
|
</div>
|
</el-form-item>
|
</el-form>
|
|
<div class="set-form-footer">
|
<el-button type="primary" @click="onSubmit">确 认</el-button>
|
<el-button @click="handleExitFlow">取消</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { UploadUserFile } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
import { onMounted, reactive, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
import { add_knowledge_file } from '/@/api/knowledge/group';
|
const uploadFileChange = (rule, value, callback) => {
|
if (fileList.value.length === 0) {
|
return callback('请选择需要上传的文件');
|
} else {
|
return true;
|
}
|
};
|
// 定义变量内容
|
const state = reactive({
|
detailTitle: '导入数据',
|
categoryForm: {
|
ImportCategory: '',
|
CategoryType: '本地类目',
|
DocumentRecognition: '1',
|
},
|
// allowType: '.pdf,.doc,.docx,.txt,.md,.pptx,.ppt',
|
allowType: 'md',
|
limit: 5,
|
size: 5,
|
demoDesc: '使用阿里云文档智能解析服务据解析文档，抽取文档内容、层级结构等信息。',
|
categoryFormRules: {
|
importType: [{ required: true, validator: uploadFileChange, trigger: 'change' }],
|
},
|
});
|
const fileList = ref<UploadUserFile[]>([]);
|
const categoryFormRef = ref(null);
|
const router = useRouter();
|
const route = useRoute();
|
//返回
|
const handleExitFlow = () => {
|
//是否显示返回
|
router.back();
|
categoryFormRef.value.resetFields();
|
fileList.value = [];
|
};
|
const flag = ref(true);
|
const uploadFile = (file: UploadUserFile) => {
|
fileList.value.push(file);
|
categoryFormRef.value.validateField(['importType']); //移除上传文件错误提示!这是重点！！
|
};
|
// 文件列表移除文件时的钩子
|
const handleRemove = (file) => {
|
// 4、删除文件时同时删除此文件已上传的文件id（此操作视具体情况）
|
fileList.value.forEach((item, index) => {
|
if (item.file == file.raw) {
|
fileList.value.splice(index, 1);
|
}
|
});
|
};
|
//确认
|
const onSubmit = async () => {
|
let group_id = route.query.group_id;
|
if (group_id == null || group_id == '' || group_id == undefined) return;
|
categoryFormRef.value.validate(async (valid: boolean) => {
|
if (valid) {
|
const data = new FormData();
|
fileList.value.forEach((item: any) => {
|
data.append('file', item.file);
|
});
|
data.append('group_id', group_id);
|
const res = await add_knowledge_file(data);
|
if (res.json_ok) {
|
ElMessage.success('导入成功');
|
router.push({
|
name: 'GraphIndex',
|
});
|
} else {
|
ElMessage.error(res.json_msg);
|
}
|
}
|
});
|
};
|
onMounted(() => {
|
const group_title = route.query.title;
|
state.categoryForm.ImportCategory = group_title;
|
});
|
</script>
|
<style scoped lang="scss">
|
.set-form-height {
|
height: calc(100% - 62px);
|
background: #fff;
|
border-radius: 16px 16px 0 0;
|
flex: 1;
|
margin: 0 24px 64px;
|
overflow-y: auto;
|
padding: 20px;
|
}
|
.set-desc {
|
-webkit-line-clamp: 2;
|
display: -webkit-box;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
word-break: break-word;
|
line-height: 1.5714285714285714;
|
font-family: PingFangSC;
|
box-sizing: border-box;
|
}
|
.set-form-footer {
|
align-items: center;
|
background: #fff;
|
bottom: 0;
|
box-shadow: 4px 0 5px 1px rgba(16, 9, 65, 0.06);
|
display: flex;
|
flex-shrink: 0;
|
gap: 8px;
|
height: 64px;
|
padding-left: 24px;
|
position: fixed;
|
width: 100%;
|
left: 220px;
|
}
|
</style>
|
<style>
|
.set_tooltip_demo {
|
max-width: 326px;
|
max-height: 150px;
|
min-width: 32px;
|
min-height: 32px;
|
padding: 6px 8px;
|
color: #26244c;
|
text-align: start;
|
text-decoration: none;
|
word-wrap: break-word;
|
background-color: #fff;
|
border-radius: 6px;
|
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
box-sizing: border-box;
|
}
|
</style>
|
