8 changed files with 1219 additions and 16 deletions
-
19src/views/collectReorganizi/collectionLibrary/anjuan/tableList.vue
-
9src/views/collectReorganizi/collectionLibrary/file/index.vue
-
9src/views/collectReorganizi/collectionLibrary/juannei/index.vue
-
3src/views/collectReorganizi/collectionLibrary/mixins/index.js
-
463src/views/collectReorganizi/collectionLibrary/module/advancedSearchModal.vue
-
113src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue
-
610src/views/collectReorganizi/collectionLibrary/module/uploadOriginal/embedUpload.vue
-
9src/views/collectReorganizi/collectionLibrary/project/index.vue
@ -0,0 +1,463 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="visible" |
|||
title="高级检索" |
|||
width="1000px" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
append-to-body |
|||
:before-close="handleClose" |
|||
> |
|||
<div class="advanced-search-modal"> |
|||
<el-form ref="form" inline :model="form" :rules="rules" size="small" label-width="70px"> |
|||
<el-form-item label="字段名" prop="field"> |
|||
<el-select v-model="form.field" value-key="id" style="width: 200px;"> |
|||
<el-option v-for="item in fieldOptions" :key="item.id" :label="item.label" :value="item" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="运算符" prop="symbol"> |
|||
<el-select v-model="form.symbol" value-key="value" placeholder="请选择" style="width: 200px;"> |
|||
<el-option |
|||
v-for="item in symbolOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="检索值" prop="keyWord" :rules="getKeywordRules"> |
|||
<el-input v-model="form.keyWord" :type="inputType" style="width: 200px;" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="advanced-btn"> |
|||
<el-button size="mini" @click="addConditionData"><i class="iconfont icon-xinzeng" />新增</el-button> |
|||
<el-button class="filter-refresh" size="mini" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button> |
|||
</div> |
|||
<div class="search-condition"> |
|||
<h4> 检索条件</h4> |
|||
<div class="condition-main"> |
|||
<div class="condition-left"> |
|||
<el-button size="mini" :disabled="currentIndex===null" @click="deltCurrent(currentIndex)"><i class="iconfont icon-shanchu" />删除</el-button> |
|||
<el-button size="mini" icon="el-icon-top" :disabled="currentIndex === 0" @click="moveUp(currentIndex)">上移</el-button> |
|||
<el-button size="mini" icon="el-icon-bottom" :disabled="currentIndex === conditionData.length - 1" @click="moveDown(currentIndex)">下移</el-button> |
|||
</div> |
|||
<ul id="condition-container-modal" class="condition-content"> |
|||
<li v-for="(item, index) in conditionData" :id="'modal-element-id-' + index" :key="index" :class="currentIndex===index ? 'active': ''" @click="selectCurrent(index)"> |
|||
<span style="color:#0348F3">{{ item.field }}</span> |
|||
<span style="color:#ED4A41; margin:0 4px">{{ item.symbol }}</span> |
|||
<span v-if="item.symbol && (item.symbol === '包含'|| item.symbol === '不包含')" class="keyword-style"><i>'%</i>{{ item.keyWord }}<i>%'</i></span> |
|||
<span v-else-if="item.keyWord && isNaN(parseInt(item.keyWord))" class="keyword-style"><i>'</i>{{ item.keyWord }}<i>'</i></span> |
|||
<span v-else class="keyword-style">{{ item.keyWord }}</span> |
|||
<span>{{ item.connector }}</span> |
|||
<span>{{ item.bracket }}</span> |
|||
</li> |
|||
</ul> |
|||
<div class="condition-right"> |
|||
<el-button v-for="(item,index) in connectorList" :key="index" type="primary" size="mini" @click="addConnector(item)">{{ item }}</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="handleSearch">检索</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitCategoryInputFieldByPid } from '@/api/system/category/category' |
|||
|
|||
export default { |
|||
name: 'AdvancedSearchModal', |
|||
props: { |
|||
visible: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
collectLevel: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
initialConditions: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
form: { |
|||
field: null, |
|||
symbol: null, |
|||
keyWord: null |
|||
}, |
|||
fieldOptions: [], |
|||
symbolOptions: [ |
|||
{ |
|||
label: '包含', |
|||
value: 'like' |
|||
}, |
|||
{ |
|||
label: '不包含', |
|||
value: 'not like' |
|||
}, |
|||
{ |
|||
label: '等于', |
|||
value: '=' |
|||
}, |
|||
{ |
|||
label: '不等于', |
|||
value: '!=' |
|||
}, |
|||
{ |
|||
label: '为空', |
|||
value: 'is null' |
|||
}, |
|||
{ |
|||
label: '不为空', |
|||
value: 'is not null' |
|||
}, |
|||
{ |
|||
label: '大于', |
|||
value: '>' |
|||
}, |
|||
{ |
|||
label: '大于等于', |
|||
value: '>=' |
|||
}, |
|||
{ |
|||
label: '小于', |
|||
value: '<' |
|||
}, |
|||
{ |
|||
label: '小于等于', |
|||
value: '<=' |
|||
} |
|||
], |
|||
rules: { |
|||
field: [ |
|||
{ required: true, message: '请选择字段名', trigger: 'change' } |
|||
], |
|||
symbol: [ |
|||
{ required: true, message: '请选择运算符', trigger: 'change' } |
|||
] |
|||
}, |
|||
conditionData: [], |
|||
currentIndex: null, |
|||
connectorList: ['并且', '或者', '(', ')'] |
|||
} |
|||
}, |
|||
computed: { |
|||
getKeywordRules() { |
|||
if ((this.form.symbol && this.form.symbol.label === '为空') || (this.form.symbol && this.form.symbol.label === '不为空')) { |
|||
return [] |
|||
} else { |
|||
return [{ required: true, message: '请输入检索值', trigger: 'blur' }] |
|||
} |
|||
}, |
|||
inputType() { |
|||
if ( |
|||
this.form.symbol && |
|||
(this.form.symbol.label === '大于' || |
|||
this.form.symbol.label === '大于等于' || |
|||
this.form.symbol.label === '小于' || |
|||
this.form.symbol.label === '小于等于') |
|||
) { |
|||
return 'number' |
|||
} else { |
|||
return 'text' |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
visible(newVal) { |
|||
if (!newVal) { |
|||
this.resetQuery() |
|||
this.conditionData = [] |
|||
this.currentIndex = null |
|||
} else if (this.initialConditions && this.initialConditions.length > 0) { |
|||
this.conditionData = JSON.parse(JSON.stringify(this.initialConditions)) |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getFieldCommon() |
|||
}, |
|||
methods: { |
|||
resetQuery() { |
|||
if (this.$refs.form) { |
|||
this.$refs.form.resetFields() |
|||
} |
|||
}, |
|||
addConditionData() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
const newConditionData = {} |
|||
newConditionData.field = this.form.field.label |
|||
newConditionData.fieldName = this.form.field.value |
|||
newConditionData.symbol = this.form.symbol.label |
|||
newConditionData.symbolCode = this.form.symbol.value |
|||
newConditionData.keyWord = this.form.keyWord |
|||
this.conditionData.push(newConditionData) |
|||
this.$nextTick(() => { |
|||
const container = document.getElementById('condition-container-modal') |
|||
container.scrollTop = container.scrollHeight |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
moveUp(index) { |
|||
if (index > 0) { |
|||
const temp = this.conditionData[index] |
|||
this.conditionData[index] = this.conditionData[index - 1] |
|||
this.conditionData[index - 1] = temp |
|||
this.currentIndex = index - 1 |
|||
} |
|||
const targetElement = document.getElementById('modal-element-id-' + this.currentIndex) |
|||
if (targetElement) { |
|||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) |
|||
} |
|||
}, |
|||
moveDown(index) { |
|||
if (index < this.conditionData.length - 1) { |
|||
const temp = this.conditionData[index] |
|||
this.conditionData[index] = this.conditionData[index + 1] |
|||
this.conditionData[index + 1] = temp |
|||
this.currentIndex = index + 1 |
|||
} |
|||
const targetElement = document.getElementById('modal-element-id-' + this.currentIndex) |
|||
if (targetElement) { |
|||
targetElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) |
|||
} |
|||
}, |
|||
deltCurrent(index) { |
|||
this.conditionData.splice(index, 1) |
|||
this.currentIndex = null |
|||
}, |
|||
selectCurrent(index) { |
|||
if (this.currentIndex === index) { |
|||
this.currentIndex = null |
|||
} else { |
|||
this.currentIndex = index |
|||
} |
|||
}, |
|||
addConnector(item) { |
|||
const newConditionData = {} |
|||
if (item === '并且' || item === '或者') { |
|||
newConditionData.connector = item |
|||
} else { |
|||
newConditionData.bracket = item |
|||
} |
|||
this.conditionData.push(newConditionData) |
|||
this.$nextTick(() => { |
|||
const container = document.getElementById('condition-container-modal') |
|||
container.scrollTop = container.scrollHeight |
|||
}) |
|||
}, |
|||
getFieldCommon() { |
|||
console.log('selectedCategory', this.selectedCategory) |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'categoryLevel': this.collectLevel |
|||
} |
|||
console.log('params', params) |
|||
FetchInitCategoryInputFieldByPid(params).then((data) => { |
|||
if (data && data.length > 0) { |
|||
this.fieldOptions = data |
|||
.filter(item => item.fieldName !== 'fonds_no' && item.fieldName !== 'fonds_name') |
|||
.map(item => { |
|||
return { |
|||
id: item.id, |
|||
label: item.fieldCnName, |
|||
value: item.fieldName |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
checkConditions(conditionData) { |
|||
let brackets = 0 |
|||
let fields = 0 |
|||
let connectors = 0 |
|||
let previousTokenType = null |
|||
let hasValidConditionBetweenBrackets = false |
|||
|
|||
for (var i = 0; i < conditionData.length; i++) { |
|||
const condition = conditionData[i] |
|||
let currentTokenType = '' |
|||
|
|||
if (condition.hasOwnProperty('bracket')) { |
|||
currentTokenType = 'bracket' |
|||
brackets++ |
|||
} else if (condition.hasOwnProperty('field')) { |
|||
currentTokenType = 'field' |
|||
fields++ |
|||
if (brackets > 0) { |
|||
hasValidConditionBetweenBrackets = true |
|||
} |
|||
} else if (condition.hasOwnProperty('connector')) { |
|||
currentTokenType = 'connector' |
|||
connectors++ |
|||
} |
|||
|
|||
if (previousTokenType && currentTokenType) { |
|||
if ((previousTokenType === 'field' && currentTokenType === 'field') || |
|||
(previousTokenType === 'connector' && currentTokenType === 'connector')) { |
|||
this.$message({ message: '条件之间缺少或且连接符', type: 'error', offset: 8 }) |
|||
return null |
|||
} |
|||
} |
|||
previousTokenType = currentTokenType |
|||
} |
|||
|
|||
if (brackets > 0 && !hasValidConditionBetweenBrackets) { |
|||
this.$message({ message: '请输入有效条件', type: 'error', offset: 8 }) |
|||
return null |
|||
} else if (brackets > 0 && brackets % 2 !== 0) { |
|||
this.$message({ message: '括号不对称', type: 'error', offset: 8 }) |
|||
return null |
|||
} else if (fields === 0) { |
|||
this.$message({ message: '请输入有效条件', type: 'error', offset: 8 }) |
|||
return null |
|||
} else if (fields === 1 || connectors === fields - 1) { |
|||
const wheresql = this.conditionData.map(obj => { |
|||
if (obj.field) { |
|||
if (obj.symbol === '包含' || obj.symbol === '不包含') { |
|||
return obj.fieldName + ' ' + obj.symbolCode + " '%" + obj.keyWord + "%'" |
|||
} else if (obj.keyWord && isNaN(parseInt(obj.keyWord))) { |
|||
return obj.fieldName + ' ' + obj.symbolCode + " '" + obj.keyWord + "'" |
|||
} else { |
|||
return obj.fieldName + ' ' + obj.symbolCode + ' ' + obj.keyWord |
|||
} |
|||
} else if (obj.connector === '并且') { |
|||
return 'and' |
|||
} else if (obj.connector === '或者') { |
|||
return 'or' |
|||
} else { |
|||
return obj.bracket |
|||
} |
|||
}).join(' ') |
|||
return wheresql |
|||
} else { |
|||
this.$message({ message: '条件之间缺少或且连接符', type: 'error', offset: 8 }) |
|||
return null |
|||
} |
|||
}, |
|||
handleSearch() { |
|||
const wheresql = this.checkConditions(this.conditionData) |
|||
console.log('wheresql', wheresql) |
|||
if (wheresql) { |
|||
const conditions = JSON.parse(JSON.stringify(this.conditionData)) |
|||
// 保存到 localStorage |
|||
localStorage.setItem('advancedSearchConditions', JSON.stringify(conditions)) |
|||
localStorage.setItem('advancedSearchSql', wheresql) |
|||
// 发送 SQL 条件和原始条件数据（用于显示文案） |
|||
this.$emit('search', { |
|||
sql: wheresql, |
|||
conditions: conditions |
|||
}) |
|||
} |
|||
}, |
|||
handleClose() { |
|||
this.$emit('update:visible', false) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.advanced-search-modal { |
|||
.el-form--inline .el-form-item { |
|||
margin-right: 20px !important; |
|||
} |
|||
.advanced-btn { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 15px; |
|||
.el-button { |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
.search-condition { |
|||
padding: 18px; |
|||
margin-top: 20px; |
|||
background: #F6F9FF; |
|||
border-radius: 3px; |
|||
border: 1px dashed #DCDFE6; |
|||
h4 { |
|||
margin: 0 0 17px 0; |
|||
padding-left: 25px; |
|||
color: #0C0E1E; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
.condition-main { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: nowrap; |
|||
.condition-left { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.el-button { |
|||
width: 76px; |
|||
margin: 5px 0; |
|||
::v-deep i.el-icon-top, |
|||
::v-deep i.el-icon-bottom { |
|||
font-size: 16px; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
} |
|||
.condition-content { |
|||
width: 500px; |
|||
height: 160px; |
|||
margin: 0 10px; |
|||
padding: 0; |
|||
background: #E6E8ED; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
li { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: nowrap; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
font-size: 14px; |
|||
text-align: center; |
|||
background-color: #fff; |
|||
border-bottom: 1px solid #E6E8ED; |
|||
cursor: default; |
|||
&:hover, |
|||
&:focus, |
|||
&.active { |
|||
background-color: #E8F2FF; |
|||
} |
|||
.keyword-style { |
|||
color: #2ECAAC; |
|||
i { |
|||
font-style: normal; |
|||
color: #545B65; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.condition-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
.el-button { |
|||
width: 64px; |
|||
margin: 5px 0; |
|||
background-color: #0348F3; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,610 @@ |
|||
<template> |
|||
<div class="embed-upload" :class="{ 'has-file': fileList.length > 0 }"> |
|||
<div class="upload-header"> |
|||
<span class="upload-title">原文上传</span> |
|||
<span class="upload-tip">单个文件不可超过10GB</span> |
|||
</div> |
|||
|
|||
<div class="uploader-drop" @click="triggerFileInput" @dragover.prevent @drop.prevent="handleDrop"> |
|||
<div class="uploader-btn"> |
|||
<i class="iconfont icon-tianjiawenjian upload-icon" /> |
|||
<p>{{ fileList.length > 0 ? '点击继续添加文件' : '点击或拖拽上传文件' }}</p> |
|||
<!-- :disabled="!isCaValid || isCheckingCa" --> |
|||
<input |
|||
ref="fileInput" |
|||
type="file" |
|||
:multiple="true" |
|||
|
|||
class="file-input" |
|||
style="display: none;" |
|||
@change="handleFileSelect" |
|||
> |
|||
</div> |
|||
<div class="el-upload__tip">支持多文件上传，最大10GB/个</div> |
|||
</div> |
|||
|
|||
<div v-if="fileList.length > 0" class="file-list-container"> |
|||
<div v-for="(fileItem, index) in fileList" :key="index" class="file-item"> |
|||
<div class="file-info"> |
|||
<i :class="getFileIcon(fileItem.file.name)" /> |
|||
<span class="file-name">{{ fileItem.file.name }}</span> |
|||
<span class="file-size">{{ formatFileSize(fileItem.file.size) }}</span> |
|||
</div> |
|||
<div v-if="fileItem.uploading || fileItem.merging" class="file-status"> |
|||
<span v-if="fileItem.uploading" class="progress-text">上传中 {{ fileItem.progress }}%</span> |
|||
<span v-else class="progress-text">合并中...</span> |
|||
<div v-if="fileItem.uploading" class="progress-bar" :style="{ width: fileItem.progress + '%' }" /> |
|||
</div> |
|||
<p v-if="fileItem.errorMsg" class="error">{{ fileItem.errorMsg }}</p> |
|||
<p v-if="fileItem.successMsg" class="success">{{ fileItem.successMsg }}</p> |
|||
<i class="iconfont icon-shanchu delete-btn" @click.stop="handleDeleteFile(index)" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div v-if="fileList.length > 0" class="upload-footer"> |
|||
<span class="file-count">共 {{ fileList.length }} 个文件</span> |
|||
<el-button |
|||
:disabled="fileList.some(item => item.uploading || item.merging) || btnLoading" |
|||
:loading="btnLoading" |
|||
type="primary" |
|||
@click="handleUploadConfirm" |
|||
> |
|||
保存上传 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchCheckCaValidity } from '@/api/system/auth2' |
|||
import { FetchInitFileCategoryView } from '@/api/collect/collect' |
|||
import { mapGetters } from 'vuex' |
|||
import axios from 'axios' |
|||
import SparkMD5 from 'spark-md5' |
|||
import { getToken } from '@/utils/auth' |
|||
import { getCurrentTime } from '@/utils/index' |
|||
|
|||
export default { |
|||
name: 'EmbedUpload', |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
fileList: [], |
|||
CHUNK_SIZE: 5 * 1024 * 1024, |
|||
isCaValid: false, |
|||
isCheckingCa: false, |
|||
btnLoading: false, |
|||
originFileData: [], |
|||
repeatFileData: [], |
|||
tempSelectedFiles: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['baseApi']) |
|||
}, |
|||
mounted() { |
|||
this.getCheckCaValidity() |
|||
}, |
|||
methods: { |
|||
triggerFileInput() { |
|||
this.$refs.fileInput.click() |
|||
}, |
|||
getFileIcon(fileName) { |
|||
const ext = fileName.split('.').pop().toLowerCase() |
|||
const icons = { |
|||
'jpg': 'icon-image', 'jpeg': 'icon-image', 'png': 'icon-image', 'bmp': 'icon-image', 'gif': 'icon-image', |
|||
'xlsx': 'icon-excel', 'xls': 'icon-excel', |
|||
'docx': 'icon-word', 'doc': 'icon-word', |
|||
'pdf': 'icon-pdf', |
|||
'ppt': 'icon-ppt', 'pptx': 'icon-ppt', |
|||
'zip': 'icon-zip', 'rar': 'icon-zip', |
|||
'txt': 'icon-txt' |
|||
} |
|||
return `fileIcon ${icons[ext] || 'icon-other'}` |
|||
}, |
|||
formatFileSize(bytes) { |
|||
if (bytes === 0) return '0.00MB' |
|||
const mb = bytes / (1024 * 1024) |
|||
return mb.toFixed(2) + 'MB' |
|||
}, |
|||
showMessage(message, type) { |
|||
this.$message({ message, type, offset: 8 }) |
|||
}, |
|||
async getCheckCaValidity() { |
|||
try { |
|||
this.isCheckingCa = true |
|||
const res = await FetchCheckCaValidity() |
|||
this.isCaValid = !!res |
|||
if (!this.isCaValid) { |
|||
this.showMessage('CA证书不在有效期内，无法进行分片上传', 'error') |
|||
} |
|||
} catch (err) { |
|||
this.isCaValid = false |
|||
this.showMessage('CA证书校验失败：' + err.message, 'error') |
|||
} finally { |
|||
this.isCheckingCa = false |
|||
} |
|||
}, |
|||
async getFileList() { |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'archivesId': this.arcId |
|||
} |
|||
const res = await FetchInitFileCategoryView(params) |
|||
this.originFileData = res.returnlist || [] |
|||
}, |
|||
async handleDrop(e) { |
|||
if (this.isCheckingCa) { |
|||
this.showMessage('正在校验CA证书，请稍候...', 'warning') |
|||
return |
|||
} |
|||
if (!this.isCaValid) { |
|||
this.showMessage('CA证书不在有效期内，无法上传文件', 'error') |
|||
return |
|||
} |
|||
|
|||
const selectedFiles = Array.from(e.dataTransfer.files) |
|||
if (selectedFiles.length === 0) return |
|||
|
|||
await this.getFileList() |
|||
const existingFileNames = this.originFileData.map(file => file.file_name) |
|||
this.repeatFileData = selectedFiles.filter(file => existingFileNames.includes(file.name)) |
|||
|
|||
if (this.repeatFileData.length > 0) { |
|||
this.tempSelectedFiles = selectedFiles |
|||
this.$emit('show-repeat-modal', this.repeatFileData) |
|||
return |
|||
} |
|||
|
|||
this.addFiles(selectedFiles) |
|||
}, |
|||
async handleFileSelect(e) { |
|||
if (this.isCheckingCa) { |
|||
this.showMessage('正在校验CA证书，请稍候...', 'warning') |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
if (!this.isCaValid) { |
|||
this.showMessage('CA证书不在有效期内，无法上传文件', 'error') |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
|
|||
const selectedFiles = Array.from(e.target.files) |
|||
if (selectedFiles.length === 0) return |
|||
|
|||
await this.getFileList() |
|||
const existingFileNames = this.originFileData.map(file => file.file_name) |
|||
this.repeatFileData = selectedFiles.filter(file => existingFileNames.includes(file.name)) |
|||
|
|||
if (this.repeatFileData.length > 0) { |
|||
this.tempSelectedFiles = selectedFiles |
|||
this.$emit('show-repeat-modal', this.repeatFileData) |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
|
|||
this.addFiles(selectedFiles) |
|||
e.target.value = '' |
|||
}, |
|||
addFiles(files) { |
|||
const newFileList = files.map(file => ({ |
|||
file, |
|||
uploading: false, |
|||
merging: false, |
|||
progress: 0, |
|||
errorMsg: '', |
|||
successMsg: '', |
|||
md5: '' |
|||
})) |
|||
this.fileList = [...this.fileList, ...newFileList] |
|||
}, |
|||
handleDeleteFile(index) { |
|||
const fileItem = this.fileList[index] |
|||
if (fileItem.uploading || fileItem.merging) { |
|||
this.showMessage('当前文件正在上传/合并中，无法删除', 'warning') |
|||
return |
|||
} |
|||
this.fileList.splice(index, 1) |
|||
}, |
|||
handleRepeatFile(type) { |
|||
if (!this.tempSelectedFiles) return |
|||
|
|||
let filesToUpload = [] |
|||
if (type === 0) { |
|||
filesToUpload = this.tempSelectedFiles |
|||
} else { |
|||
const existingFileNames = this.originFileData.map(file => file.file_name) |
|||
filesToUpload = this.tempSelectedFiles.filter(file => !existingFileNames.includes(file.name)) |
|||
if (filesToUpload.length === 0) { |
|||
this.showMessage('当前所选文件去重后无可上传的文件', 'error') |
|||
return |
|||
} |
|||
} |
|||
|
|||
this.addFiles(filesToUpload) |
|||
this.tempSelectedFiles = null |
|||
}, |
|||
calculateFileMd5(file) { |
|||
return new Promise((resolve, reject) => { |
|||
const spark = new SparkMD5.ArrayBuffer() |
|||
const fileReader = new FileReader() |
|||
const chunkSize = 2 * 1024 * 1024 |
|||
let offset = 0 |
|||
|
|||
const loadNextChunk = () => { |
|||
const blob = file.slice(offset, offset + chunkSize) |
|||
fileReader.readAsArrayBuffer(blob) |
|||
} |
|||
|
|||
fileReader.onload = (e) => { |
|||
spark.append(e.target.result) |
|||
offset += chunkSize |
|||
if (offset < file.size) { |
|||
loadNextChunk() |
|||
} else { |
|||
resolve(spark.end()) |
|||
} |
|||
} |
|||
|
|||
fileReader.onerror = (err) => reject(err) |
|||
loadNextChunk() |
|||
}) |
|||
}, |
|||
async checkChunkExists(fileMd5, chunkIndex) { |
|||
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API |
|||
const response = await axios.get(`${linkSrc}/api/collect/chunk`, { |
|||
params: { fileMd5, chunkIndex }, |
|||
headers: { 'Authorization': getToken() } |
|||
}) |
|||
if (response.data.code !== 200) { |
|||
throw new Error('检查分片失败: ' + response.data.msg) |
|||
} |
|||
return response.data.data |
|||
}, |
|||
async uploadSingleChunk(file, fileMd5, chunkIndex) { |
|||
const start = chunkIndex * this.CHUNK_SIZE |
|||
const end = Math.min(start + this.CHUNK_SIZE, file.size) |
|||
const chunkBlob = file.slice(start, end) |
|||
|
|||
const formData = new FormData() |
|||
formData.append('file', chunkBlob, `${fileMd5}_${chunkIndex}`) |
|||
formData.append('fileMd5', fileMd5) |
|||
formData.append('chunkIndex', chunkIndex) |
|||
|
|||
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API |
|||
const response = await axios.post(`${linkSrc}/api/collect/chunk`, formData, { |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data', |
|||
'Authorization': getToken() |
|||
} |
|||
}) |
|||
|
|||
if (response.data.code !== 200) { |
|||
throw new Error(`分片${chunkIndex}上传失败: ` + response.data.msg) |
|||
} |
|||
}, |
|||
async checkAllChunksExist(fileMd5, totalChunks) { |
|||
for (let i = 0; i < totalChunks; i++) { |
|||
const result = await this.checkChunkExists(fileMd5, i) |
|||
if (!result.exists) { |
|||
return false |
|||
} |
|||
} |
|||
return true |
|||
}, |
|||
async uploadFileChunks(fileItem) { |
|||
const file = fileItem.file |
|||
fileItem.uploading = true |
|||
fileItem.progress = 0 |
|||
fileItem.errorMsg = '' |
|||
fileItem.successMsg = '' |
|||
|
|||
try { |
|||
const fileMd5 = await this.calculateFileMd5(file) |
|||
fileItem.md5 = fileMd5 |
|||
|
|||
const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE) |
|||
const uploadedChunks = [] |
|||
|
|||
for (let i = 0; i < totalChunks; i++) { |
|||
const checkResult = await this.checkChunkExists(fileMd5, i) |
|||
if (!checkResult.exists) { |
|||
await this.uploadSingleChunk(file, fileMd5, i) |
|||
} |
|||
uploadedChunks.push(i) |
|||
fileItem.progress = Math.round((uploadedChunks.length / totalChunks) * 100) |
|||
} |
|||
fileItem.progress = 100 |
|||
} catch (err) { |
|||
fileItem.errorMsg = '上传失败: ' + (err.message || '未知错误') |
|||
} finally { |
|||
fileItem.uploading = false |
|||
} |
|||
}, |
|||
async handleUploadConfirm() { |
|||
if (this.fileList.length === 0) { |
|||
this.showMessage('请先选择要上传的文件!', 'warning') |
|||
return |
|||
} |
|||
|
|||
const pendingFiles = this.fileList.filter(item => !item.successMsg && !item.errorMsg) |
|||
if (pendingFiles.length === 0) { |
|||
this.showMessage('暂无待上传的文件!', 'warning') |
|||
return |
|||
} |
|||
|
|||
this.btnLoading = true |
|||
|
|||
for (const fileItem of pendingFiles) { |
|||
await this.uploadFileChunks(fileItem) |
|||
} |
|||
|
|||
const validFiles = this.fileList.filter(item => !item.errorMsg && item.progress === 100) |
|||
if (validFiles.length === 0) { |
|||
this.btnLoading = false |
|||
this.showMessage('无有效分片上传完成的文件!', 'error') |
|||
return |
|||
} |
|||
|
|||
validFiles.forEach(fileItem => { |
|||
fileItem.merging = true |
|||
}) |
|||
|
|||
try { |
|||
const processFiles = validFiles.map(async(fileItem) => { |
|||
const file = fileItem.file |
|||
const jsonString = {} |
|||
|
|||
if (file.type.startsWith('image')) { |
|||
const reader = new FileReader() |
|||
const base64 = await new Promise((resolve) => { |
|||
reader.onload = (e) => resolve(e.target.result) |
|||
reader.readAsDataURL(file) |
|||
}) |
|||
const img = new Image() |
|||
const imgRes = await new Promise((resolve) => { |
|||
img.onload = () => resolve({ width: img.width, height: img.height }) |
|||
img.src = base64 |
|||
}) |
|||
jsonString.file_dpi = `${imgRes.width}px*${imgRes.height}px` |
|||
} else { |
|||
jsonString.file_dpi = '' |
|||
} |
|||
|
|||
jsonString.file_name = file.name |
|||
jsonString.file_size = file.size |
|||
jsonString.file_type = file.name.split('.').pop() || '' |
|||
jsonString.last_modified = file.lastModified |
|||
jsonString.file_path = '' |
|||
jsonString.sequence = null |
|||
jsonString.archive_id = this.arcId |
|||
jsonString.create_time = getCurrentTime() |
|||
jsonString.id = null |
|||
jsonString.file_thumbnail = '' |
|||
|
|||
const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE) |
|||
const chunksExist = await this.checkAllChunksExist(fileItem.md5, totalChunks) |
|||
if (!chunksExist) { |
|||
throw new Error(`部分分片未上传完成`) |
|||
} |
|||
|
|||
return { |
|||
categoryId: this.selectedCategory.id, |
|||
archivesId: this.arcId, |
|||
identifier: fileItem.md5, |
|||
filename: file.name, |
|||
totalChunks: totalChunks, |
|||
totalSize: file.size, |
|||
fileJsonString: JSON.stringify([jsonString]) |
|||
} |
|||
}) |
|||
|
|||
const jsonArray = await Promise.all(processFiles) |
|||
|
|||
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API |
|||
const response = await axios.post(`${linkSrc}/api/collect/merge`, jsonArray, { |
|||
headers: { |
|||
'Authorization': getToken(), |
|||
'Content-Type': 'application/json' |
|||
} |
|||
}) |
|||
|
|||
if (response.data.code === 200) { |
|||
this.showMessage('所有文件上传并合并成功', 'success') |
|||
validFiles.forEach(fileItem => { |
|||
fileItem.successMsg = '上传成功!' |
|||
fileItem.merging = false |
|||
}) |
|||
this.$emit('onUploadSuccess') |
|||
} else { |
|||
this.showMessage(`文件合并失败: ${response.data.message || '合并失败'}`, 'error') |
|||
} |
|||
} catch (err) { |
|||
this.showMessage(`文件合并失败: ${err.message}`, 'error') |
|||
validFiles.forEach(fileItem => { |
|||
fileItem.merging = false |
|||
fileItem.errorMsg = fileItem.errorMsg || `合并失败: ${err.message}` |
|||
}) |
|||
} finally { |
|||
this.btnLoading = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.embed-upload { |
|||
flex: 1; |
|||
margin-left: 10px; |
|||
border: 1px solid #e4e7ed; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.upload-header { |
|||
padding: 12px 15px; |
|||
border-bottom: 1px solid #e4e7ed; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.upload-title { |
|||
font-weight: 500; |
|||
font-size: 14px; |
|||
color: #303133; |
|||
} |
|||
|
|||
.upload-tip { |
|||
font-size: 12px; |
|||
color: #ff4949; |
|||
} |
|||
|
|||
.uploader-drop { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 20px; |
|||
cursor: pointer; |
|||
min-height: 150px; |
|||
} |
|||
|
|||
.uploader-btn { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
color: #606266; |
|||
} |
|||
|
|||
.upload-icon { |
|||
font-size: 32px; |
|||
color: #1F55EB; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.uploader-btn p { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.el-upload__tip { |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
.file-list-container { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.file-item { |
|||
position: relative; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 10px; |
|||
border: 1px dashed #409eff; |
|||
border-radius: 4px; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.file-info { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
gap: 8px; |
|||
flex: 1; |
|||
line-height: 32px; |
|||
} |
|||
|
|||
.fileIcon { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.file-name { |
|||
flex: 1; |
|||
font-size: 13px; |
|||
color: #303133; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.file-size { |
|||
font-size: 12px; |
|||
color: #909399; |
|||
} |
|||
|
|||
.file-status { |
|||
margin-top: 8px; |
|||
} |
|||
|
|||
.progress-text { |
|||
font-size: 12px; |
|||
color: #606266; |
|||
} |
|||
|
|||
.progress-bar { |
|||
height: 6px; |
|||
background-color: #42b983; |
|||
transition: width 0.3s ease; |
|||
border-radius: 3px; |
|||
margin-top: 4px; |
|||
} |
|||
|
|||
.delete-btn { |
|||
/* position: absolute; |
|||
right: 10px; |
|||
top: 10px; */ |
|||
font-size: 18px; |
|||
color: #909399; |
|||
cursor: pointer; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
.delete-btn:hover { |
|||
color: #ff4444; |
|||
} |
|||
|
|||
.success { |
|||
margin: 4px 0 0 0; |
|||
font-size: 12px; |
|||
color: #00C851; |
|||
} |
|||
|
|||
.error { |
|||
margin: 4px 0 0 0; |
|||
font-size: 12px; |
|||
color: #ff4444; |
|||
} |
|||
|
|||
.upload-footer { |
|||
padding: 12px 15px; |
|||
border-top: 1px solid #e4e7ed; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.file-count { |
|||
font-size: 12px; |
|||
color: #606266; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue