<template>
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }" class="h100 right-card w100">
|
<div class="bg-[#fff] mb-[10px] flex items-center">
|
<el-button style="margin-left: 8px; width: 40px" text @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="p-[20px] set-form-height">
|
<el-form :model="state.categoryForm" label-width="120px" label-position="left">
|
<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="导入方式:">
|
<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>
|
</div>
|
<template #tip>
|
<div class="el-upload__tip">
|
支持格式：{{ state.allowType }};限制大小{{ state.size }}M,最多上传{{ state.limit }}个文件
|
</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>取消</el-button>
|
</div>
|
</div>
|
</el-card>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
import type { FormInstance, UploadProps, UploadUserFile, UploadRawFile } from 'element-plus';
|
|
// 定义变量内容
|
const state = reactive({
|
detailTitle: '导入数据',
|
categoryForm: {
|
ImportCategory: '默认类目',
|
CategoryType: '本地类目',
|
DocumentRecognition: '1',
|
},
|
allowType: '.pdf,.doc,.docx,.txt,.md,.pptx,.ppt',
|
limit: 5,
|
size: 5,
|
demoDesc: '使用阿里云文档智能解析服务据解析文档，抽取文档内容、层级结构等信息。',
|
});
|
const fileList = ref<UploadUserFile[]>([]);
|
const router = useRouter();
|
//返回
|
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 = () => {};
|
</script>
|
<style scoped lang="scss">
|
.set-form-height {
|
height: calc(100% - 62px);
|
}
|
.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>
|
