376 lines
12 KiB
Vue
376 lines
12 KiB
Vue
<template>
|
||
<h4 class="title-decoration-1 mb-8">{{ $t('views.document.uploadDocument') }}</h4>
|
||
<el-form
|
||
ref="FormRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-position="top"
|
||
require-asterisk-position="right"
|
||
v-loading="loading"
|
||
>
|
||
<div class="mt-16 mb-16">
|
||
<el-radio-group v-model="form.fileType" @change="radioChange" class="app-radio-button-group">
|
||
<el-radio-button value="txt">{{ $t('views.document.fileType.txt.label') }}</el-radio-button>
|
||
<el-radio-button value="table">{{
|
||
$t('views.document.fileType.table.label')
|
||
}}</el-radio-button>
|
||
<el-radio-button value="QA">{{ $t('views.document.fileType.QA.label') }}</el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
|
||
<el-form-item prop="fileList" v-if="form.fileType === 'QA'">
|
||
<div class="update-info flex p-8-12 border-r-6 mb-16 w-full">
|
||
<div class="mt-4">
|
||
<AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
|
||
</div>
|
||
<div class="ml-16 lighter">
|
||
<p>
|
||
{{ $t('views.document.fileType.QA.tip1') }}
|
||
<el-button type="primary" link @click="downloadTemplate('excel')">
|
||
{{ $t('views.document.upload.download') }} Excel
|
||
{{ $t('views.document.upload.template') }}
|
||
</el-button>
|
||
<el-button type="primary" link @click="downloadTemplate('csv')">
|
||
{{ $t('views.document.upload.download') }} CSV
|
||
{{ $t('views.document.upload.template') }}
|
||
</el-button>
|
||
</p>
|
||
<p>{{ $t('views.document.fileType.QA.tip2') }}</p>
|
||
<p>
|
||
3. {{ $t('views.document.tip.fileLimitCountTip1') }} {{ file_count_limit }}
|
||
{{ $t('views.document.tip.fileLimitCountTip2') }},
|
||
{{ $t('views.document.tip.fileLimitSizeTip1') }} {{ file_size_limit }} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
:webkitdirectory="false"
|
||
class="w-full mb-4"
|
||
drag
|
||
multiple
|
||
v-model:file-list="form.fileList"
|
||
action="#"
|
||
:auto-upload="false"
|
||
:show-file-list="false"
|
||
accept=".xlsx, .xls, .csv,.zip"
|
||
:limit="file_count_limit"
|
||
:on-exceed="onExceed"
|
||
:on-change="fileHandleChange"
|
||
@click.prevent="handlePreview(false)"
|
||
>
|
||
<img src="@/assets/upload-icon.svg" alt="" />
|
||
<div class="el-upload__text">
|
||
<p>
|
||
{{ $t('views.document.upload.uploadMessage') }}
|
||
<em class="hover" @click.prevent="handlePreview(false)">
|
||
{{ $t('views.document.upload.selectFile') }}
|
||
</em>
|
||
<em class="hove ml-4" @click.prevent="handlePreview(true)">
|
||
{{ $t('views.document.upload.selectFiles') }}
|
||
</em>
|
||
</p>
|
||
<div class="upload__decoration">
|
||
<p>{{ $t('views.document.upload.formats') }}XLS、XLSX、CSV、ZIP</p>
|
||
</div>
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item prop="fileList" v-else-if="form.fileType === 'table'">
|
||
<div class="update-info flex p-8-12 border-r-6 mb-16 w-full">
|
||
<div class="mt-4">
|
||
<AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
|
||
</div>
|
||
<div class="ml-16 lighter">
|
||
<p>
|
||
{{ $t('views.document.fileType.table.tip1') }}
|
||
<el-button type="primary" link @click="downloadTableTemplate('excel')">
|
||
{{ $t('views.document.upload.download') }} Excel
|
||
{{ $t('views.document.upload.template') }}
|
||
</el-button>
|
||
<el-button type="primary" link @click="downloadTableTemplate('csv')">
|
||
{{ $t('views.document.upload.download') }} CSV
|
||
{{ $t('views.document.upload.template') }}
|
||
</el-button>
|
||
</p>
|
||
<p>{{ $t('views.document.fileType.table.tip2') }}</p>
|
||
<p>{{ $t('views.document.fileType.table.tip3') }}</p>
|
||
<p>
|
||
4. {{ $t('views.document.tip.fileLimitCountTip1') }} {{ file_count_limit }}
|
||
{{ $t('views.document.tip.fileLimitCountTip2') }},
|
||
{{ $t('views.document.tip.fileLimitSizeTip1') }} {{ file_size_limit }} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
:webkitdirectory="false"
|
||
class="w-full mb-4"
|
||
drag
|
||
multiple
|
||
v-model:file-list="form.fileList"
|
||
action="#"
|
||
:auto-upload="false"
|
||
:show-file-list="false"
|
||
accept=".xlsx, .xls, .csv"
|
||
:limit="file_count_limit"
|
||
:on-exceed="onExceed"
|
||
:on-change="fileHandleChange"
|
||
@click.prevent="handlePreview(false)"
|
||
>
|
||
<img src="@/assets/upload-icon.svg" alt="" />
|
||
<div class="el-upload__text">
|
||
<p>
|
||
{{ $t('views.document.upload.uploadMessage') }}
|
||
<em class="hover" @click.prevent="handlePreview(false)">
|
||
{{ $t('views.document.upload.selectFile') }}
|
||
</em>
|
||
<em class="hover ml-4" @click.prevent="handlePreview(true)">
|
||
{{ $t('views.document.upload.selectFiles') }}
|
||
</em>
|
||
</p>
|
||
<div class="upload__decoration">
|
||
<p>{{ $t('views.document.upload.formats') }}XLS、XLSX、CSV</p>
|
||
</div>
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<el-form-item prop="fileList" v-else>
|
||
<div class="update-info flex p-8-12 border-r-6 mb-16 w-full">
|
||
<div class="mt-4">
|
||
<AppIcon iconName="app-warning-colorful" style="font-size: 16px"></AppIcon>
|
||
</div>
|
||
<div class="ml-16 lighter">
|
||
<p>{{ $t('views.document.fileType.txt.tip1') }}</p>
|
||
<p>
|
||
2. {{ $t('views.document.tip.fileLimitCountTip1') }} {{ file_count_limit }}
|
||
{{ $t('views.document.tip.fileLimitCountTip2') }},
|
||
{{ $t('views.document.tip.fileLimitSizeTip1') }} {{ file_size_limit }} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
:webkitdirectory="false"
|
||
class="w-full"
|
||
drag
|
||
multiple
|
||
v-model:file-list="form.fileList"
|
||
action="#"
|
||
:auto-upload="false"
|
||
:show-file-list="false"
|
||
accept=".txt, .md, .log, .docx, .pdf, .html,.zip,.xlsx,.xls,.csv"
|
||
:limit="file_count_limit"
|
||
:on-exceed="onExceed"
|
||
:on-change="fileHandleChange"
|
||
@click.prevent="handlePreview(false)"
|
||
>
|
||
<img src="@/assets/upload-icon.svg" alt="" />
|
||
<div class="el-upload__text">
|
||
<p>
|
||
{{ $t('views.document.upload.uploadMessage') }}
|
||
<em class="hover" @click.prevent="handlePreview(false)">
|
||
{{ $t('views.document.upload.selectFile') }}
|
||
</em>
|
||
<em class="hover ml-4" @click.prevent="handlePreview(true)">
|
||
{{ $t('views.document.upload.selectFiles') }}
|
||
</em>
|
||
</p>
|
||
<div class="upload__decoration">
|
||
<p>
|
||
{{
|
||
$t('views.document.upload.formats')
|
||
}}TXT、Markdown、PDF、DOCX、HTML、XLS、XLSX、CSV、ZIP
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-row :gutter="8" v-if="form.fileList?.length">
|
||
<template v-for="(item, index) in form.fileList" :key="index">
|
||
<el-col :span="12" class="mb-8">
|
||
<el-card shadow="never" class="file-List-card">
|
||
<div class="flex-between">
|
||
<div class="flex">
|
||
<img :src="getImgUrl(item && item?.name)" alt="" width="40" />
|
||
<div class="ml-8">
|
||
<p>{{ item && item?.name }}</p>
|
||
<el-text type="info" size="small">{{
|
||
filesize(item && item?.size) || '0K'
|
||
}}</el-text>
|
||
</div>
|
||
</div>
|
||
<el-button text @click="deleteFile(index)">
|
||
<el-icon><Delete /></el-icon>
|
||
</el-button>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</template>
|
||
</el-row>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onUnmounted, onMounted, computed, watch, nextTick } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import type { UploadFiles } from 'element-plus'
|
||
import { filesize, getImgUrl, isRightType } from '@/utils/common'
|
||
import { MsgError } from '@/utils/message'
|
||
import { loadSharedApi } from '@/utils/dynamics-api/shared-api'
|
||
import useStore from '@/stores'
|
||
import { t } from '@/locales'
|
||
|
||
const route = useRoute()
|
||
const {
|
||
query: { id }, // id为knowledgeID，有id的是上传文档
|
||
} = route
|
||
|
||
const apiType = computed(() => {
|
||
if (route.path.includes('shared')) {
|
||
return 'systemShare'
|
||
} else if (route.path.includes('resource-management')) {
|
||
return 'systemManage'
|
||
} else {
|
||
return 'workspace'
|
||
}
|
||
})
|
||
const { knowledge } = useStore()
|
||
const documentsFiles = computed(() => knowledge.documentsFiles)
|
||
const documentsType = computed(() => knowledge.documentsType)
|
||
|
||
const FormRef = ref()
|
||
const loading = ref(false)
|
||
|
||
const form = ref({
|
||
fileType: 'txt',
|
||
fileList: [] as any,
|
||
})
|
||
|
||
const rules = reactive({
|
||
fileList: [
|
||
{ required: true, message: t('views.document.upload.requiredMessage'), trigger: 'change' },
|
||
],
|
||
})
|
||
|
||
const file_count_limit = ref(50)
|
||
const file_size_limit = ref(100)
|
||
|
||
watch(form.value, (value) => {
|
||
knowledge.saveDocumentsType(value.fileType)
|
||
knowledge.saveDocumentsFile(value.fileList)
|
||
})
|
||
|
||
function downloadTemplate(type: string) {
|
||
loadSharedApi({ type: 'document', systemType: apiType.value }).exportQATemplate(
|
||
`${type}${t('views.document.upload.template')}.${type == 'csv' ? type : 'xlsx'}`,
|
||
type,
|
||
)
|
||
}
|
||
|
||
function downloadTableTemplate(type: string) {
|
||
loadSharedApi({ type: 'document', systemType: apiType.value }).exportTableTemplate(
|
||
`${type}${t('views.document.upload.template')}.${type == 'csv' ? type : 'xlsx'}`,
|
||
type,
|
||
)
|
||
}
|
||
|
||
function radioChange() {
|
||
form.value.fileList = []
|
||
}
|
||
|
||
function deleteFile(index: number) {
|
||
form.value.fileList.splice(index, 1)
|
||
}
|
||
|
||
// 上传on-change事件
|
||
const fileHandleChange = (file: any, fileList: UploadFiles) => {
|
||
//1、判断文件大小是否合法，文件限制不能大于100M
|
||
const isLimit = file?.size / 1024 / 1024 < file_size_limit.value
|
||
if (!isLimit) {
|
||
MsgError(t('views.document.tip.fileLimitSizeTip1') + file_size_limit.value + 'MB')
|
||
fileList.splice(-1, 1) //移除当前超出大小的文件
|
||
return false
|
||
}
|
||
|
||
if (!isRightType(file?.name, form.value.fileType)) {
|
||
if (file?.name !== '.DS_Store') {
|
||
MsgError(t('views.document.upload.errorMessage2'))
|
||
}
|
||
fileList.splice(-1, 1)
|
||
return false
|
||
}
|
||
if (file?.size === 0) {
|
||
MsgError(t('views.document.upload.errorMessage3'))
|
||
fileList.splice(-1, 1)
|
||
return false
|
||
}
|
||
}
|
||
|
||
const onExceed = () => {
|
||
MsgError(
|
||
t('views.document.tip.fileLimitCountTip1') +
|
||
file_count_limit.value +
|
||
t('views.document.tip.fileLimitCountTip2')
|
||
)
|
||
}
|
||
|
||
const handlePreview = (bool: boolean) => {
|
||
let inputDom: any = null
|
||
nextTick(() => {
|
||
if (document.querySelector('.el-upload__input') != null) {
|
||
inputDom = document.querySelector('.el-upload__input')
|
||
inputDom.webkitdirectory = bool
|
||
}
|
||
})
|
||
}
|
||
|
||
/*
|
||
表单校验
|
||
*/
|
||
function validate() {
|
||
if (!FormRef.value) return
|
||
return FormRef.value.validate((valid: any) => {
|
||
return valid
|
||
})
|
||
}
|
||
|
||
function getDetail() {
|
||
loadSharedApi({ type: 'knowledge', systemType: apiType.value })
|
||
.getKnowledgeDetail(id, loading)
|
||
.then((res: any) => {
|
||
file_count_limit.value = res.data.file_count_limit
|
||
file_size_limit.value = res.data.file_size_limit
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
if (documentsType.value) {
|
||
form.value.fileType = documentsType.value
|
||
}
|
||
if (documentsFiles.value) {
|
||
form.value.fileList = documentsFiles.value
|
||
}
|
||
getDetail()
|
||
})
|
||
onUnmounted(() => {
|
||
form.value = {
|
||
fileType: 'txt',
|
||
fileList: [],
|
||
}
|
||
})
|
||
|
||
defineExpose({
|
||
validate,
|
||
form,
|
||
})
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.upload__decoration {
|
||
font-size: 12px;
|
||
line-height: 20px;
|
||
color: var(--el-text-color-secondary);
|
||
}
|
||
.el-upload__text {
|
||
.hover:hover {
|
||
color: var(--el-color-primary-light-5);
|
||
}
|
||
}
|
||
</style>
|