9 changed files with 3266 additions and 335 deletions
-
36src/utils/upload.js
-
733src/views/collectReorganizi/batchConnection/module/form copy.vue
-
504src/views/collectReorganizi/batchConnection/module/form-zip.vue
-
673src/views/collectReorganizi/batchConnection/module/form.vue
-
850src/views/components/category/preUpload-非zip-test.vue
-
8src/views/features/ssoLogin.vue
-
8src/views/system/fileLibraryManage/index.vue
-
167src/views/system/fileLibraryManage/processManage/index.vue
-
374src/views/system/fileLibraryManage/processManage/module/form.vue
@ -0,0 +1,733 @@ |
|||
<template> |
|||
<div> |
|||
<!-- 本地挂接 / 远程挂接 主弹窗 --> |
|||
<el-dialog |
|||
:title="connectionTitle" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
append-to-body |
|||
:visible.sync="localHitchVisible" |
|||
:before-close="handleCancel" |
|||
@opened="opened" |
|||
> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
|||
<el-form-item label="重复验证方式" prop="checkRepeatType"> |
|||
<el-select v-model="form.checkRepeatType" placeholder="请选择" style="width: 400px;"> |
|||
<el-option |
|||
v-for="item in typeOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="挂接字段" prop="hitchFiled"> |
|||
<el-select v-model="form.hitchFiled" placeholder="请选择" style="width: 400px;" @change="selectFiled"> |
|||
<el-option |
|||
v-for="item in fieldOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="挂接详情" prop="fields"> |
|||
<div class="tag-wrapper"> |
|||
<el-tag v-for="item in hitchRemarkArray" :key="item" :closable="item !== '*'" @close="removeTag(item)"> |
|||
{{ item }} |
|||
</el-tag> |
|||
</div> |
|||
<el-input v-model="form.fields" style="display: none;" type="hidden" /> |
|||
</el-form-item> |
|||
<el-form-item label="匹配模式" prop="matchingMode"> |
|||
<el-select v-model="form.matchingMode" placeholder="请选择" style="width: 400px;" @change="changeMatchedType"> |
|||
<el-option |
|||
v-for="item in matchedOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="!connectionType" label="上传附件" prop="file" class="upload-wm"> |
|||
<!-- 打开子选择弹窗 --> |
|||
<el-button size="small" @click="openFileSelectDialog">选择文件/文件夹</el-button> |
|||
|
|||
<!-- 主弹窗展示：展示【文件名】，不展示完整路径；提交接口传完整路径 uploadResultPaths --> |
|||
<div v-if="uploadResultPaths.length" class="file-list"> |
|||
<div v-for="(path, idx) in uploadResultPaths" :key="idx" class="file-item"> |
|||
<i class="iconfont icon-xiaowenjian" /> |
|||
{{ getFileNameFromPath(path) }} |
|||
</div> |
|||
</div> |
|||
<el-input v-show="false" v-model="form.file" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="connectionType" label="挂接类型" prop="protocol"> |
|||
<el-select v-model="form.protocol" placeholder="请选择" style="width: 400px;" @change="changeProtocol"> |
|||
<el-option |
|||
v-for="item in batchTypeOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="connectionType" label="文件路径" prop="filePath"> |
|||
<el-select v-model="form.filePath" placeholder="请选择" value-key="id" style="width: 400px;" @change="changeFilePath"> |
|||
<el-option |
|||
v-for="(item,index) in filePathOptions" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="connectionType" |
|||
label="" |
|||
prop="fileRemote" |
|||
class="file_remote-style" |
|||
:rules="form.filePath !== null ? rules.fileRemote : []" |
|||
:required="form.filePath !== null" |
|||
> |
|||
<el-button v-if="form.filePath && fileRemoteLoading" type="primary" :loading="fileRemoteLoading" style="border: none; display: block; padding: 0 0 4px 0;">文件列表加载中</el-button> |
|||
<el-radio-group v-model="form.fileRemote"> |
|||
<el-radio |
|||
v-for="item in fileRemoteOptions" |
|||
:key="item.value" |
|||
:value="item.value" |
|||
:label="item.name" |
|||
>{{ item.name }}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="handleCancel">取消</el-button> |
|||
<el-button :loading="btnLoading" type="primary" @click.native="handleComfired">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
|
|||
<!-- =========子弹窗：文件选择+上传弹窗========= --> |
|||
<el-dialog |
|||
title="选择文件/文件夹" |
|||
:visible.sync="fileSelectDialogVisible" |
|||
width="650px" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
append-to-body |
|||
@closed="resetFileDialog" |
|||
> |
|||
<!-- 选择文件 input 普通多选，不带webkitdirectory --> |
|||
<input |
|||
ref="fileOnlyInput" |
|||
type="file" |
|||
multiple |
|||
style="display: none" |
|||
@change="onSelectFileOnly" |
|||
> |
|||
<!-- 选择文件夹 input --> |
|||
<input |
|||
ref="folderInput" |
|||
type="file" |
|||
webkitdirectory |
|||
directory |
|||
multiple |
|||
style="display: none" |
|||
@change="onSelectFolder" |
|||
> |
|||
|
|||
<div class="select-btn-group"> |
|||
<el-button type="primary" :disabled="fileDialogUploading" @click="$refs.fileOnlyInput.click()">选择文件</el-button> |
|||
<el-button type="primary" :disabled="fileDialogUploading" @click="$refs.folderInput.click()">选择文件夹</el-button> |
|||
</div> |
|||
|
|||
<!-- 子弹窗上传进度条 --> |
|||
<div v-if="fileDialogUploading" class="dialog-upload-tip"> |
|||
<el-progress :percentage="dialogUploadProgress" /> |
|||
<div>正在上传：{{ dialogUploadingFileName }}</div> |
|||
</div> |
|||
|
|||
<div class="select-file-list"> |
|||
<div v-if="tempSelectedFiles.length === 0" class="empty-tip">暂未选择文件</div> |
|||
<div v-for="(f, idx) in tempSelectedFiles" :key="idx" class="temp-file-item"> |
|||
<i class="iconfont icon-xiaowenjian" /> |
|||
<span class="file-name">{{ f.name }}</span> |
|||
<i class="iconfont icon-shanchu" :disabled="fileDialogUploading" @click="deleteTempFile(idx)" /> |
|||
</div> |
|||
</div> |
|||
|
|||
<div slot="footer"> |
|||
<el-button @click="fileSelectDialogVisible = false">取消</el-button> |
|||
<el-button type="primary" :loading="fileDialogUploading" :disabled="tempSelectedFiles.length === 0" @click="startUploadFiles">开始上传</el-button> |
|||
<el-button type="primary" :disabled="!dialogUploadSuccess" @click="confirmSelectFiles">确认</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { crud } from '@crud/crud' |
|||
import { FetchInitCategoryInputFieldByPid } from '@/api/system/category/category' |
|||
import { FetchFindDetailsByProtocol, FetchFileByRemoteConnection } from '@/api/system/remoteConnection' |
|||
import { batchMountUpload, remoteConnectiontUpload } from '@/utils/upload' |
|||
import { mapGetters } from 'vuex' |
|||
import axios from 'axios' |
|||
import { getToken } from '@/utils/auth' |
|||
|
|||
// 分片大小 5MB |
|||
const CHUNK_SIZE = 5 * 1024 * 1024 |
|||
|
|||
export default { |
|||
name: 'LocalHitch', |
|||
mixins: [crud()], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
btnLoading: false, |
|||
connectionTitle: '本地挂接', |
|||
localHitchVisible: false, |
|||
hitchRemarkArray: [], |
|||
connectionType: 0, |
|||
fileRemoteLoading: false, |
|||
fileRemoteOptions: [], |
|||
|
|||
// =========子弹窗变量========= |
|||
fileSelectDialogVisible: false, |
|||
tempSelectedFiles: [], // 子弹窗临时文件列表 |
|||
fileDialogUploading: false, // 子弹窗上传中 |
|||
dialogUploadProgress: 0, |
|||
dialogUploadingFileName: '', |
|||
dialogUploadSuccess: false, // 是否上传合并完成 |
|||
dialogResultPaths: [], // 子弹窗上传完成返回的filePaths（完整路径） |
|||
|
|||
// ✅新增：保存上一次合并成功快照 |
|||
lastMergeSnapshot: null, |
|||
|
|||
// 主弹窗：最终上传完成的文件路径数组（完整路径，提交接口使用） |
|||
uploadResultPaths: [], |
|||
|
|||
form: { |
|||
checkRepeatType: 1, |
|||
hitchFiled: null, |
|||
matchingMode: 2, |
|||
fields: null, |
|||
file: null, |
|||
protocol: null, |
|||
filePath: null, |
|||
fileRemote: null |
|||
}, |
|||
typeOptions: [ |
|||
{ value: 1, label: '跳过' }, |
|||
{ value: 2, label: '覆盖' }, |
|||
{ value: 3, label: '追加' } |
|||
], |
|||
matchedOptions: [ |
|||
{ value: 1, label: '全量匹配' }, |
|||
{ value: 2, label: '前缀模糊匹配' }, |
|||
{ value: 3, label: '后缀模糊匹配' } |
|||
], |
|||
batchTypeOptions: [ |
|||
{ value: 1, label: '服务端挂接' }, |
|||
{ value: 2, label: 'FTP挂接' }, |
|||
{ value: 3, label: 'SFTP挂接' } |
|||
], |
|||
fieldOptions: [], |
|||
filePathOptions: [], |
|||
rules: { |
|||
checkRepeatType: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
hitchFiled: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
fields: [{ required: true, message: '请选择上面挂接字段生成挂接详情', trigger: 'blur' }], |
|||
matchingMode: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
protocol: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
filePath: [{ required: true, message: '请选择', trigger: 'change' }], |
|||
fileRemote: [{ required: true, message: '请选择指定文件', trigger: 'change' }] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['baseApi']), |
|||
collectLevel() { |
|||
if (this.selectedCategory.arrangeType === 1) return 3 |
|||
if (this.selectedCategory.arrangeType === 2) return 2 |
|||
if (this.selectedCategory.arrangeType === 3) return 1 |
|||
return null |
|||
} |
|||
}, |
|||
created() { }, |
|||
mounted() { }, |
|||
methods: { |
|||
opened() { |
|||
this.getFieldCommon() |
|||
}, |
|||
// 比对两个文件数组是否完全一致（文件名+大小） |
|||
isFileListEqual(filesA, filesB) { |
|||
if (filesA.length !== filesB.length) return false |
|||
const listA = filesA.map(f => ({ name: f.name, size: f.size })) |
|||
const listB = filesB.map(f => ({ name: f.name, size: f.size })) |
|||
for (let i = 0; i < listA.length; i++) { |
|||
if (listA[i].name !== listB[i].name || listA[i].size !== listB[i].size) { |
|||
return false |
|||
} |
|||
} |
|||
return true |
|||
}, |
|||
// 从完整路径截取文件名，兼容 / 和 \ 分隔符 |
|||
getFileNameFromPath(path) { |
|||
if (!path) return '' |
|||
const splitArr = path.split(/[\\/]/) |
|||
return splitArr[splitArr.length - 1] |
|||
}, |
|||
|
|||
// ==========子弹窗方法========== |
|||
openFileSelectDialog() { |
|||
this.resetFileDialog() |
|||
this.fileSelectDialogVisible = true |
|||
}, |
|||
|
|||
// 重置子弹窗全部状态 |
|||
resetFileDialog() { |
|||
this.tempSelectedFiles = [] |
|||
this.fileDialogUploading = false |
|||
this.dialogUploadProgress = 0 |
|||
this.dialogUploadingFileName = '' |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
this.lastMergeSnapshot = null // ✅清空快照 |
|||
}, |
|||
|
|||
// 选择普通文件（多选） |
|||
onSelectFileOnly(e) { |
|||
const files = e.target.files |
|||
if (!files || files.length === 0) return |
|||
const arr = Array.from(files) |
|||
this.tempSelectedFiles = [...this.tempSelectedFiles, ...arr] |
|||
e.target.value = '' |
|||
// 新增文件，旧合并结果作废 |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
}, |
|||
|
|||
// 选择文件夹 |
|||
onSelectFolder(e) { |
|||
const files = e.target.files |
|||
if (!files || files.length === 0) return |
|||
const arr = Array.from(files) |
|||
this.tempSelectedFiles = [...this.tempSelectedFiles, ...arr] |
|||
e.target.value = '' |
|||
// 新增文件，旧合并结果作废 |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
}, |
|||
|
|||
// 删除子弹窗列表里的文件 |
|||
deleteTempFile(idx) { |
|||
// 先删除临时文件 |
|||
this.tempSelectedFiles.splice(idx, 1) |
|||
|
|||
// 如果有快照，并且当前文件列表和快照一致 → 恢复上次合并状态 |
|||
if (this.lastMergeSnapshot && this.isFileListEqual(this.tempSelectedFiles, this.lastMergeSnapshot.files)) { |
|||
this.dialogUploadSuccess = true |
|||
this.dialogResultPaths = [...this.lastMergeSnapshot.paths] |
|||
} else { |
|||
// 不相等，需要重传 |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
} |
|||
}, |
|||
|
|||
// ==========分片上传接口函数（全部在子弹窗内执行）========== |
|||
async initUpload(fileName, totalChunks) { |
|||
const res = await axios.post('/api/uploadtemp/init', null, { |
|||
params: { fileName, totalChunks }, |
|||
headers: { 'Authorization': getToken() } |
|||
}) |
|||
return res.data.data |
|||
}, |
|||
|
|||
async uploadChunk(uploadId, chunkIndex, fileBlob) { |
|||
const formData = new FormData() |
|||
formData.append('file', fileBlob) |
|||
formData.append('uploadId', uploadId) |
|||
formData.append('chunkIndex', chunkIndex) |
|||
const res = await axios.post('/api/uploadtemp/chunk', formData, { |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data', |
|||
'Authorization': getToken() |
|||
} |
|||
}) |
|||
return res.data |
|||
}, |
|||
|
|||
async batchMerge(uploadIdToFileNameMap) { |
|||
const res = await axios.post('/api/uploadtemp/batchMerge', uploadIdToFileNameMap, { |
|||
headers: { |
|||
'Content-Type': 'application/json', |
|||
'Authorization': getToken() |
|||
} |
|||
}) |
|||
return res.data.data |
|||
}, |
|||
|
|||
// 子弹窗：开始上传全部文件 |
|||
// 子弹窗：开始上传全部文件 |
|||
async startUploadFiles() { |
|||
if (this.tempSelectedFiles.length === 0) { |
|||
this.$message.warning('请选择文件') |
|||
return |
|||
} |
|||
this.fileDialogUploading = true |
|||
this.dialogUploadProgress = 0 |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
const uploadIdMap = {} |
|||
|
|||
try { |
|||
for (let i = 0; i < this.tempSelectedFiles.length; i++) { |
|||
const file = this.tempSelectedFiles[i] |
|||
this.dialogUploadingFileName = file.name |
|||
const fileSize = file.size |
|||
const totalChunks = Math.ceil(fileSize / CHUNK_SIZE) |
|||
const uploadId = await this.initUpload(file.name, totalChunks) |
|||
uploadIdMap[uploadId] = file.name |
|||
|
|||
for (let chunkIdx = 0; chunkIdx < totalChunks; chunkIdx++) { |
|||
const start = chunkIdx * CHUNK_SIZE |
|||
const end = Math.min(start + CHUNK_SIZE, fileSize) |
|||
const blob = file.slice(start, end) |
|||
await this.uploadChunk(uploadId, chunkIdx, blob) |
|||
|
|||
const totalAllChunks = this.tempSelectedFiles.reduce((sum, f) => sum + Math.ceil(f.size / CHUNK_SIZE), 0) |
|||
const doneAllChunks = this.tempSelectedFiles.slice(0, i).reduce((sum, f) => sum + Math.ceil(f.size / CHUNK_SIZE), 0) + chunkIdx + 1 |
|||
this.dialogUploadProgress = Math.round((doneAllChunks / totalAllChunks) * 100) |
|||
} |
|||
} |
|||
// 批量合并 |
|||
const pathList = await this.batchMerge(uploadIdMap) |
|||
this.dialogResultPaths = pathList |
|||
this.dialogUploadSuccess = true |
|||
// ✅保存合并快照 |
|||
this.lastMergeSnapshot = { |
|||
files: [...this.tempSelectedFiles], |
|||
paths: [...pathList] |
|||
} |
|||
this.$message.success('文件上传合并完成') |
|||
} catch (err) { |
|||
console.error('上传失败', err) |
|||
this.$message.error('文件上传失败，请重试') |
|||
this.dialogUploadSuccess = false |
|||
this.dialogResultPaths = [] |
|||
this.lastMergeSnapshot = null |
|||
} finally { |
|||
this.fileDialogUploading = false |
|||
this.dialogUploadingFileName = '' |
|||
} |
|||
}, |
|||
|
|||
// 子弹窗确认，把返回的filePaths给到主弹窗 |
|||
confirmSelectFiles() { |
|||
if (!this.dialogUploadSuccess) { |
|||
this.$message.warning('请先完成文件上传') |
|||
return |
|||
} |
|||
this.uploadResultPaths = [...this.dialogResultPaths] |
|||
this.fileSelectDialogVisible = false |
|||
}, |
|||
|
|||
// =========主弹窗提交========== |
|||
async handleComfired() { |
|||
if (!this.connectionType) { |
|||
if (this.uploadResultPaths.length === 0) { |
|||
this.$message({ message: '请选择并上传文件或者文件夹！', offset: 8 }) |
|||
return false |
|||
} |
|||
} |
|||
if (this.hitchRemarkArray.length === 1 && this.hitchRemarkArray[0] === '*') { |
|||
this.form.fields = '' |
|||
} else { |
|||
this.form.fields = this.hitchRemarkArray.join('') |
|||
} |
|||
this.btnLoading = true |
|||
this.$refs['form'].validate(async(valid) => { |
|||
if (!valid) { |
|||
this.btnLoading = false |
|||
return false |
|||
} |
|||
let newhitchRemark = this.hitchRemarkArray.map(item => item.replace(/^\$|\$$|\*$/g, '')) |
|||
newhitchRemark = newhitchRemark.filter(item => item !== '') |
|||
|
|||
if (!this.connectionType) { |
|||
try { |
|||
const params = { |
|||
categoryId: this.selectedCategory.id, |
|||
mountType: 1, // 挂接方式 1.本地挂接 2.远程挂接 3.上传目录 （目前只有1） |
|||
checkRepeatType: this.form.checkRepeatType, |
|||
matchingMode: this.form.matchingMode, |
|||
fields: newhitchRemark, |
|||
fondsId: this.selectedCategory.fondsId, |
|||
filePaths: this.uploadResultPaths // 提交接口仍然传完整路径数组 |
|||
} |
|||
console.log('批量挂接参数', params) |
|||
// 调用批量挂接接口 |
|||
batchMountUpload(this.baseApi + '/api/collect/batchMountFolder', params).then(res => { |
|||
if (res.data.code === 200) { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '挂接失败', type: 'error', offset: 8 }) |
|||
} |
|||
this.handleCancel() |
|||
this.crud.refresh() |
|||
this.btnLoading = false |
|||
}).catch(err => { |
|||
console.error('请求异常', err) |
|||
this.$message.error('请求异常') |
|||
this.btnLoading = false |
|||
}) |
|||
} catch (err) { |
|||
console.error('提交异常', err) |
|||
this.$message.error('提交失败，请重试') |
|||
this.btnLoading = false |
|||
} |
|||
} else { |
|||
// 远程挂接逻辑不变 |
|||
const params = { |
|||
account: this.form.filePath.account, |
|||
caddress: this.form.filePath.caddress, |
|||
cpassword: this.form.filePath.cpassword, |
|||
cport: this.form.filePath.cport, |
|||
categoryId: this.selectedCategory.id, |
|||
fondsId: this.selectedCategory.fondsId, |
|||
checkRepeatType: this.form.checkRepeatType, |
|||
matchingMode: this.form.matchingMode, |
|||
fields: newhitchRemark, |
|||
protocol: this.form.protocol, |
|||
zipFilePath: this.form.filePath.rootDirectory + '/' + this.form.fileRemote |
|||
} |
|||
console.log(params) |
|||
remoteConnectiontUpload(this.baseApi + '/api/collect/remoteMount', params).then(res => { |
|||
if (res.data.code === 200) { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '操作失败', type: 'error', offset: 8 }) |
|||
} |
|||
this.handleCancel() |
|||
this.crud.refresh() |
|||
this.btnLoading = false |
|||
}).catch(err => { |
|||
console.error('请求异常', err) |
|||
this.$message.error('请求异常') |
|||
this.btnLoading = false |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
getFieldCommon() { |
|||
const params = { |
|||
categoryId: this.selectedCategory.id, |
|||
categoryLevel: this.collectLevel |
|||
} |
|||
FetchInitCategoryInputFieldByPid(params).then(data => { |
|||
this.fieldOptions = data.map(item => { |
|||
return { |
|||
id: item.id, |
|||
label: item.fieldCnName, |
|||
value: item.fieldName |
|||
} |
|||
}) |
|||
const archiveNoOption = this.fieldOptions.find(item => item.value === 'archive_no') |
|||
if (archiveNoOption) { |
|||
this.form.hitchFiled = archiveNoOption.value |
|||
this.selectFiled(archiveNoOption.value) |
|||
} |
|||
}) |
|||
}, |
|||
|
|||
selectFiled(val) { |
|||
if (!val) return |
|||
if (this.hitchRemarkArray.includes('$' + val + '$')) { |
|||
this.$message({ message: '请注意当前选择的挂接字段，在挂接详情内已存在！', offset: 8 }) |
|||
return |
|||
} |
|||
const lastItemIndex = this.hitchRemarkArray.length - 1 |
|||
const index = this.hitchRemarkArray.indexOf('*') |
|||
if (index !== -1) { |
|||
if (index === lastItemIndex) { |
|||
if (this.form.matchingMode === 2) { |
|||
this.hitchRemarkArray.unshift('$' + val + '$') |
|||
} else if (this.form.matchingMode === 3) { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} else { |
|||
this.hitchRemarkArray.splice(index > 0 ? index : 0, 0, '$' + val + '$') |
|||
} |
|||
} else { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} |
|||
} else { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} |
|||
}, |
|||
|
|||
changeMatchedType(val) { |
|||
const symbol = '*' |
|||
const index = this.hitchRemarkArray.indexOf(symbol) |
|||
if (index !== -1) this.hitchRemarkArray.splice(index, 1) |
|||
if (val === 2) this.hitchRemarkArray.push(symbol) |
|||
if (val === 3) this.hitchRemarkArray.unshift(symbol) |
|||
}, |
|||
|
|||
changeProtocol(val) { |
|||
if (val) { |
|||
this.form.filePath = null |
|||
this.filePathOptions = [] |
|||
this.fileRemoteOptions = [] |
|||
FetchFindDetailsByProtocol({ protocol: val }).then(res => { |
|||
this.filePathOptions = res |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
changeFilePath(val) { |
|||
this.fileRemoteLoading = true |
|||
if (val) { |
|||
this.fileRemoteOptions = [] |
|||
FetchFileByRemoteConnection({ id: val.id }).then(res => { |
|||
if (res) { |
|||
this.fileRemoteOptions = res.map(item => ({ value: item, name: item })) |
|||
} else { |
|||
this.fileRemoteOptions = [] |
|||
} |
|||
this.fileRemoteLoading = false |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
removeTag(tag) { |
|||
const index = this.hitchRemarkArray.indexOf(tag) |
|||
if (index !== -1) this.hitchRemarkArray.splice(index, 1) |
|||
}, |
|||
|
|||
handleCancel() { |
|||
this.$refs.form.resetFields() |
|||
this.hitchRemarkArray = [] |
|||
this.uploadResultPaths = [] |
|||
this.fileSelectDialogVisible = false |
|||
this.localHitchVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
::v-deep .el-dialog { |
|||
width: 585px !important; |
|||
.el-dialog__body { |
|||
padding: 30px 0 !important; |
|||
} |
|||
} |
|||
.dialog-footer { |
|||
margin-top: 0; |
|||
} |
|||
.file-list { |
|||
width: 400px; |
|||
height: 110px; |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
margin-top: 8px; |
|||
overflow-y: auto; |
|||
} |
|||
.file-item { |
|||
line-height: 26px; |
|||
// margin: 2px 0; |
|||
} |
|||
.tag-wrapper { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: wrap; |
|||
width: 400px; |
|||
min-height: 32px; |
|||
padding: 0 10px; |
|||
border-radius: 3px; |
|||
border: 1px solid #e6e8ed; |
|||
.el-tag { |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
.file_remote-style { |
|||
::v-deep .el-form-item__content { |
|||
width: 400px !important; |
|||
.el-radio-group { |
|||
display: block; |
|||
max-height: 60px; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
.el-radio { |
|||
display: block; |
|||
padding: 3px 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.upload-wm { |
|||
height: 100px; |
|||
} |
|||
|
|||
/* 子弹窗样式 */ |
|||
.select-btn-group { |
|||
margin-bottom: 16px; |
|||
display: flex; |
|||
gap: 12px; |
|||
} |
|||
.dialog-upload-tip { |
|||
margin-bottom: 12px; |
|||
} |
|||
.select-file-list { |
|||
max-height: 300px; |
|||
overflow-y: auto; |
|||
border: 1px solid #e6e6e6; |
|||
padding: 8px; |
|||
border-radius: 4px; |
|||
} |
|||
.temp-file-item { |
|||
padding: 4px 0; |
|||
font-size: 14px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.file-name { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
// .temp-del-icon { |
|||
// color: #f56c6c; |
|||
// cursor: pointer; |
|||
// margin-left: 10px; |
|||
// } |
|||
.empty-tip { |
|||
text-align: center; |
|||
color: #999; |
|||
padding: 20px 0; |
|||
} |
|||
.icon-shanchu{ |
|||
// position: absolute; |
|||
// right: -7px; |
|||
// top: 0; |
|||
// font-size: 20px; |
|||
color: #1F55EB; |
|||
cursor: pointer; |
|||
&:hover { |
|||
color: #ff4444; |
|||
transform: scale(1.1); |
|||
transition: all 0.2s ease; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,504 @@ |
|||
<template> |
|||
<!-- 本地挂接 / 远程挂接 --> |
|||
<el-dialog :title="connectionTitle" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="localHitchVisible" :before-close="handleCancel" @opened="opened"> |
|||
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
|||
<el-form-item label="重复验证方式" prop="checkRepeatType"> |
|||
<el-select v-model="form.checkRepeatType" placeholder="请选择" style="width: 400px;"> |
|||
<el-option |
|||
v-for="item in typeOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="挂接字段" prop="hitchFiled"> |
|||
<el-select v-model="form.hitchFiled" placeholder="请选择" style="width: 400px;" @change="selectFiled"> |
|||
<el-option |
|||
v-for="item in fieldOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="挂接详情" prop="fields"> |
|||
<div class="tag-wrapper"> |
|||
<el-tag v-for="item in hitchRemarkArray" :key="item" :closable="item !== '*'" @close="removeTag(item)"> |
|||
{{ item }} |
|||
</el-tag> |
|||
</div> |
|||
<el-input v-model="form.fields" style="display: none;" type="hidden" /> |
|||
</el-form-item> |
|||
<el-form-item label="匹配模式" prop="matchingMode"> |
|||
<el-select v-model="form.matchingMode" placeholder="请选择" style="width: 400px;" @change="changeMatchedType"> |
|||
<el-option |
|||
v-for="item in matchedOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="!connectionType" label="上传附件" prop="file" class="upload-wm"> |
|||
<!-- <div class="upload-bgColor"> |
|||
<input class="upload-input" type="file" accept=".zip" style="width: 110px; height: 32px;" @change="handleFile"> |
|||
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />点击上传</el-button> |
|||
</div> --> |
|||
<div v-for="item in fileList" :key="item.name" class="file-list"> |
|||
<i class="iconfont icon-xiaowenjian" /> |
|||
<!-- {{ item.file_name }} --> |
|||
{{ item }} |
|||
</div> |
|||
<el-input v-show="false" v-model="form.file" /> |
|||
<!-- 大文件上传 --> |
|||
<PreUpload ref="uploadBigRef" is-batch-mount="true" :selected-category="selectedCategory" @onUploadSuccess="handleSuccessResource" @onUploadError="handleErrorResource" /> |
|||
<!-- <div class="file-list"> |
|||
<i class="iconfont icon-xiaowenjian" /> |
|||
{{ form.file && form.file.name }} |
|||
</div> --> |
|||
</el-form-item> |
|||
<el-form-item v-if="connectionType" label="挂接类型" prop="protocol"> |
|||
<el-select v-model="form.protocol" placeholder="请选择" style="width: 400px;" @change="changeProtocol"> |
|||
<el-option |
|||
v-for="item in batchTypeOptions" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="connectionType" label="文件路径" prop="filePath"> |
|||
<el-select v-model="form.filePath" placeholder="请选择" value-key="id" style="width: 400px;" @change="changeFilePath"> |
|||
<el-option |
|||
v-for="(item,index) in filePathOptions" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="connectionType" |
|||
label="" |
|||
prop="fileRemote" |
|||
class="file_remote-style" |
|||
:rules="form.filePath !== null ? rules.fileRemote : []" |
|||
:required="form.filePath !== null" |
|||
> |
|||
<el-button v-if="form.filePath && fileRemoteLoading" type="primary" :loading="fileRemoteLoading" style="border: none; display: block; padding: 0 0 4px 0;">文件列表加载中</el-button> |
|||
<el-radio-group v-model="form.fileRemote"> |
|||
<el-radio |
|||
v-for="item in fileRemoteOptions" |
|||
:key="item.value" |
|||
:value="item.value" |
|||
:label="item.name" |
|||
>{{ item.name }}</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button type="text" @click="handleCancel">取消</el-button> |
|||
<el-button :loading="btnLoading" type="primary" @click.native="handleComfired">确定</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { crud } from '@crud/crud' |
|||
import { FetchInitCategoryInputFieldByPid } from '@/api/system/category/category' |
|||
import { FetchFindDetailsByProtocol, FetchFileByRemoteConnection } from '@/api/system/remoteConnection' |
|||
import { batchMountUpload, remoteConnectiontUpload } from '@/utils/upload' |
|||
import { mapGetters } from 'vuex' |
|||
import PreUpload from '../../../components/category/preUpload.vue' |
|||
|
|||
export default { |
|||
name: 'LocalHitch', |
|||
components: { PreUpload }, |
|||
mixins: [crud()], |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
btnLoading: false, |
|||
connectionTitle: '本地挂接', |
|||
localHitchVisible: false, |
|||
hitchRemarkArray: [], |
|||
connectionType: 0, |
|||
form: { |
|||
checkRepeatType: 1, |
|||
hitchFiled: null, |
|||
matchingMode: 2, |
|||
fields: null, |
|||
file: null, |
|||
protocol: null, |
|||
filePath: null, |
|||
fileRemote: null |
|||
}, |
|||
upfilePath: null, |
|||
fileList: [], |
|||
typeOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: '跳过' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '覆盖' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '追加' |
|||
} |
|||
], |
|||
matchedOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: '全量匹配' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: '前缀模糊匹配' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: '后缀模糊匹配' |
|||
} |
|||
], |
|||
batchTypeOptions: [ |
|||
{ |
|||
value: 1, |
|||
label: '服务端挂接' |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: 'FTP挂接' |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: 'SFTP挂接' |
|||
} |
|||
], |
|||
fieldOptions: [], |
|||
filePathOptions: [], |
|||
fileRemoteLoading: false, |
|||
fileRemoteOptions: [], |
|||
rules: { |
|||
checkRepeatType: [ |
|||
{ required: true, message: '请选择', trigger: 'change' } |
|||
], |
|||
hitchFiled: [ |
|||
{ required: true, message: '请选择', trigger: 'change' } |
|||
], |
|||
fields: [ |
|||
{ required: true, message: '请选择上面挂接字段生成挂接详情', trigger: 'blur' } |
|||
], |
|||
matchingMode: [ |
|||
{ required: true, message: '请选择', trigger: 'change' } |
|||
], |
|||
protocol: [ |
|||
{ required: true, message: '请选择', trigger: 'change' } |
|||
], |
|||
filePath: [ |
|||
{ required: true, message: '请选择', trigger: 'change' } |
|||
], |
|||
fileRemote: [ |
|||
{ required: true, message: '请选择指定文件', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'baseApi' |
|||
]), |
|||
collectLevel() { |
|||
if (this.selectedCategory.arrangeType === 1) { |
|||
return 3 |
|||
} else if (this.selectedCategory.arrangeType === 2) { |
|||
return 2 |
|||
} else if (this.selectedCategory.arrangeType === 3) { |
|||
return 1 |
|||
} |
|||
return null |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
mounted() { |
|||
}, |
|||
methods: { |
|||
opened() { |
|||
this.getFieldCommon() |
|||
}, |
|||
handleSuccessResource(filePath, fileName, jsonArrayToSend) { |
|||
console.log('handleSuccessResource', filePath) |
|||
console.log('handleSuccessResource', fileName) |
|||
console.log('handleSuccessResource', jsonArrayToSend) |
|||
// console.log('handleSuccessResource', jsonArrayToSend[0].fileJsonString) |
|||
|
|||
// const fileJson = JSON.parse(jsonArrayToSend[0].fileJsonString) |
|||
// fileJson[0].file_path = filePath |
|||
// fileJson[0].is_quote = null |
|||
// fileJson[0].last_modified = jsonArrayToSend[0].last_modified |
|||
this.fileList = fileName |
|||
this.upfilePath = filePath |
|||
}, |
|||
handleErrorResource(res) { |
|||
console.log('handleErrorResource', res) |
|||
}, |
|||
handleFile(event) { |
|||
const files = event.target.files |
|||
for (let i = 0; i < files.length; i++) { |
|||
this.fileList = [] |
|||
this.fileList.push(files[i]) |
|||
} |
|||
}, |
|||
handleComfired() { |
|||
if (!this.connectionType) { |
|||
if (this.fileList.length === 0) { |
|||
this.$message({ message: '请先选择相关文件！', offset: 8 }) |
|||
return false |
|||
} |
|||
} |
|||
|
|||
if (this.hitchRemarkArray.length === 1 && this.hitchRemarkArray[0] === '*') { |
|||
this.form.fields = '' |
|||
} else { |
|||
this.form.fields = this.hitchRemarkArray.join('') |
|||
} |
|||
this.btnLoading = true |
|||
this.$refs['form'].validate((valid) => { |
|||
console.log('this.selectedCategory', this.selectedCategory) |
|||
if (valid) { |
|||
let newhitchRemark = this.hitchRemarkArray.map(item => item.replace(/^\$|\$$|\*$/g, '')) |
|||
newhitchRemark = newhitchRemark.filter(item => item !== '') |
|||
|
|||
if (!this.connectionType) { |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'mountType': 1, // 挂接方式 1.本地挂接 2.远程挂接 3.上传目录 （目前只有1） |
|||
'checkRepeatType': this.form.checkRepeatType, |
|||
'matchingMode': this.form.matchingMode, |
|||
'fields': newhitchRemark, |
|||
'fondsId': this.selectedCategory.fondsId, |
|||
'upfilePath': this.upfilePath |
|||
} |
|||
console.log(params) |
|||
batchMountUpload(this.baseApi + '/api/collect/batchMount', |
|||
params |
|||
).then(res => { |
|||
if (res.data.code === 200) { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '上传附件失败', type: 'error', offset: 8 }) |
|||
} |
|||
this.handleCancel() |
|||
this.crud.refresh() |
|||
this.btnLoading = false |
|||
}) |
|||
} else { |
|||
const params = { |
|||
'account': this.form.filePath.account, |
|||
'caddress': this.form.filePath.caddress, |
|||
'cpassword': this.form.filePath.cpassword, |
|||
'cport': this.form.filePath.cport, |
|||
'categoryId': this.selectedCategory.id, |
|||
'fondsId': this.selectedCategory.fondsId, |
|||
'checkRepeatType': this.form.checkRepeatType, |
|||
'matchingMode': this.form.matchingMode, |
|||
'fields': newhitchRemark, |
|||
'protocol': this.form.protocol, |
|||
'zipFilePath': this.form.filePath.rootDirectory + '/' + this.form.fileRemote // rootDirectory+勾选的文件名称 组成一个路径 |
|||
} |
|||
console.log(params) |
|||
remoteConnectiontUpload(this.baseApi + '/api/collect/remoteMount', |
|||
params |
|||
).then(res => { |
|||
if (res.data.code === 200) { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '操作失败', type: 'error', offset: 8 }) |
|||
} |
|||
this.handleCancel() |
|||
this.crud.refresh() |
|||
this.btnLoading = false |
|||
}) |
|||
} |
|||
} else { |
|||
this.btnLoading = false |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
getFieldCommon() { |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'categoryLevel': this.collectLevel |
|||
} |
|||
FetchInitCategoryInputFieldByPid(params).then(data => { |
|||
this.fieldOptions = data.map((item, index) => { |
|||
const json = {} |
|||
json.id = item.id |
|||
json.label = item.fieldCnName |
|||
json.value = item.fieldName |
|||
return json |
|||
}) |
|||
// 查找档号（archive_no）选项并设置为默认值 |
|||
const archiveNoOption = this.fieldOptions.find(item => item.value === 'archive_no') |
|||
if (archiveNoOption) { |
|||
this.form.hitchFiled = archiveNoOption.value |
|||
this.selectFiled(archiveNoOption.value) |
|||
} |
|||
}) |
|||
}, |
|||
selectFiled(val) { |
|||
if (val) { |
|||
if (this.hitchRemarkArray && this.hitchRemarkArray.includes('$' + val + '$')) { |
|||
this.$message({ message: '请注意当前选择的挂接字段，在挂接详情内已存在！', offset: 8 }) |
|||
} else { |
|||
const lastItemIndex = this.hitchRemarkArray.length - 1 |
|||
const index = this.hitchRemarkArray.indexOf('*') |
|||
if (index !== -1) { |
|||
if (index === lastItemIndex) { |
|||
if (this.form.matchingMode === 2) { |
|||
this.hitchRemarkArray.unshift('$' + val + '$') |
|||
} else if (this.form.matchingMode === 3) { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} else { |
|||
this.hitchRemarkArray.splice(index > 0 ? index : 0, 0, '$' + val + '$') |
|||
} |
|||
} else { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} |
|||
} else { |
|||
this.hitchRemarkArray.push('$' + val + '$') |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
changeMatchedType(val) { |
|||
const symbol = '*' |
|||
const index = this.hitchRemarkArray.indexOf(symbol) |
|||
if (index !== -1) { |
|||
this.hitchRemarkArray.splice(index, 1) |
|||
} |
|||
if (val === 2) { |
|||
this.hitchRemarkArray.push(symbol) |
|||
} else if (val === 3) { |
|||
this.hitchRemarkArray.unshift(symbol) |
|||
} |
|||
}, |
|||
changeProtocol(val) { |
|||
if (val) { |
|||
this.form.filePath = null |
|||
this.filePathOptions = [] |
|||
this.fileRemoteOptions = [] |
|||
FetchFindDetailsByProtocol({ 'protocol': val }).then(res => { |
|||
this.filePathOptions = res |
|||
}) |
|||
} |
|||
}, |
|||
changeFilePath(val) { |
|||
this.fileRemoteLoading = true |
|||
if (val) { |
|||
this.fileRemoteOptions = [] |
|||
FetchFileByRemoteConnection({ 'id': val.id }).then(res => { |
|||
if (res) { |
|||
this.fileRemoteOptions = res.map(item => { |
|||
const json = {} |
|||
json.value = item |
|||
json.name = item |
|||
return json |
|||
}) |
|||
} else { |
|||
this.fileRemoteOptions = [] |
|||
} |
|||
|
|||
this.fileRemoteLoading = false |
|||
}) |
|||
} |
|||
}, |
|||
removeTag(tag) { |
|||
const index = this.hitchRemarkArray.indexOf(tag) |
|||
if (index !== -1) { |
|||
this.hitchRemarkArray.splice(index, 1) |
|||
} |
|||
}, |
|||
handleCancel() { |
|||
this.$refs.form.resetFields() |
|||
this.hitchRemarkArray = [] |
|||
this.fileList = [] |
|||
this.filePathOptions = [] |
|||
this.fileRemoteOptions = [] |
|||
this.localHitchVisible = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
::v-deep .el-dialog{ |
|||
width: 585px !important; |
|||
.el-dialog__body{ |
|||
padding: 30px 0 !important; |
|||
} |
|||
} |
|||
.dialog-footer{ |
|||
margin-top: 0; |
|||
} |
|||
|
|||
.file-list{ |
|||
width: 400px; |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
} |
|||
.tag-wrapper{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
flex-wrap: wrap; |
|||
width: 400px; |
|||
min-height: 32px; |
|||
padding: 0 10px; |
|||
border-radius: 3px; |
|||
border: 1px solid #e6e8ed; |
|||
.el-tag{ |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
|
|||
.file_remote-style{ |
|||
::v-deep .el-form-item__content{ |
|||
width:400px !important; |
|||
.el-radio-group{ |
|||
display: block; |
|||
max-height: 60px; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
.el-radio{ |
|||
display: block; |
|||
padding: 3px 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.upload-wm{ |
|||
height: 100px; |
|||
} |
|||
::v-deep .uploader-big{ |
|||
margin-left: 0 !important; |
|||
} |
|||
::v-deep .upload_process_box{ |
|||
right: 0 !important; |
|||
left: 120px !important; |
|||
top: 0 !important; |
|||
width: 300px !important; |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,850 @@ |
|||
<template> |
|||
<div class="upload-minio"> |
|||
<el-button |
|||
v-if="isPreFile !== 'true' && archivesType === 'add'" |
|||
type="primary" |
|||
:disabled="!isCaValid || isCheckingCa" |
|||
icon="el-icon-upload" |
|||
@click="uploadMinioVisible=true" |
|||
> |
|||
选择文件 |
|||
</el-button> |
|||
<el-dialog |
|||
title="文件列表" |
|||
class="minio-file" |
|||
:close-on-click-modal="false" |
|||
:modal-append-to-body="false" |
|||
append-to-body |
|||
:visible.sync="uploadMinioVisible" |
|||
:before-close="handleCloseDialog" |
|||
width="600px" |
|||
> |
|||
<div class="uploader-drop" style="margin-bottom: 20px;"> |
|||
<div class="uploader-btn"> |
|||
<!-- 批量挂载模式：显示两个按钮：选择多文件 / 选择文件夹 --> |
|||
<template v-if="isBatchMount === 'true'"> |
|||
<el-button size="small" @click="triggerFileInput">选择多文件</el-button> |
|||
<el-button size="small" @click="triggerFolderInput">选择文件夹</el-button> |
|||
<p style="font-size: 12px; margin-top: 10px;">支持多选文件 或 选择文件夹</p> |
|||
</template> |
|||
<template v-else> |
|||
<p>点击上传（可多文件上传）</p> |
|||
<div style="margin: 20px 0 0 0;"> |
|||
<i class="iconfont icon-tianjiawenjian upload-icon" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 多选文件input --> |
|||
<input |
|||
ref="fileInput" |
|||
type="file" |
|||
multiple |
|||
:disabled="!isCaValid || isCheckingCa" |
|||
:accept="fileAcceptType" |
|||
class="file-input" |
|||
style="display: none;" |
|||
@change="handleFileSelect" |
|||
> |
|||
<!-- 选择文件夹input webkitdirectory --> |
|||
<input |
|||
ref="folderInput" |
|||
type="file" |
|||
webkitdirectory |
|||
directory |
|||
multiple |
|||
:disabled="!isCaValid || isCheckingCa" |
|||
class="file-input" |
|||
style="display: none;" |
|||
@change="handleFolderSelect" |
|||
> |
|||
</div> |
|||
</div> |
|||
<div v-if="fileList.length !== 0" style="max-height: 400px; overflow: hidden; overflow-y: scroll;"> |
|||
<div |
|||
v-for="(fileItem, index) in fileList" |
|||
:key="index" |
|||
class="file-item" |
|||
> |
|||
<div class="file-name"> |
|||
{{ fileItem.file.name }} |
|||
<span class="file-size">{{ formatFileSize(fileItem.file.size) }}</span> |
|||
<!-- 文件夹来源展示相对路径 --> |
|||
<span v-if="fileItem.relativePath" style="color:#999;font-size:12px;margin-left:6px"> |
|||
{{ fileItem.relativePath }} |
|||
</span> |
|||
<i class="iconfont icon-shanchu" @click="handleDeleteFile(index)" /> |
|||
</div> |
|||
<!-- 上传进度条 --> |
|||
<div v-if="fileItem.uploading" class="progress-wrapper"> |
|||
<span class="progress-text">上传进度: {{ fileItem.progress }}%</span> |
|||
<div class="progress-bar" :style="{ width: fileItem.progress + '%' }" /> |
|||
</div> |
|||
<!-- 合并中状态 --> |
|||
<div v-if="fileItem.merging" class="merge-loading "> |
|||
<span>合并中...</span> |
|||
</div> |
|||
<!-- 上传错误信息 --> |
|||
<p v-if="fileItem.errorMsg" class="error">{{ fileItem.errorMsg }}</p> |
|||
<!-- 上传成功 --> |
|||
<p v-if="fileItem.successMsg" class="success">{{ fileItem.successMsg }}</p> |
|||
</div> |
|||
</div> |
|||
<div slot="footer" class="dialog-footer" style="margin-top: 0;"> |
|||
<el-button type="text" @click="handleCloseDialog">取消</el-button> |
|||
<el-button :disabled="fileList.some(item => item.uploading || item.merging) || fileList.length === 0" :loading="btnLoading" type="primary" @click="handleUploadConfirm">保存</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { FetchCheckCaValidity } from '@/api/system/auth2' |
|||
import axios from 'axios' |
|||
import SparkMD5 from 'spark-md5' |
|||
import { getToken } from '@/utils/auth' |
|||
import { getCurrentTime } from '@/utils/index' |
|||
export default { |
|||
name: 'MinioMultiChunkUpload', |
|||
props: { |
|||
selectedDocument: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
arcId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: () => ({}) |
|||
}, |
|||
isBatchMount: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
isPreFile: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
archivesType: { |
|||
type: String, |
|||
default: 'add' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
btnLoading: false, |
|||
uploadMinioVisible: false, // 弹框显示状态 |
|||
fileList: [], // 多文件上传列表 |
|||
CHUNK_SIZE: 5 * 1024 * 1024, // 分片大小 (5MB) |
|||
totalMergeStartTime: null, // 整体批量合并开始时间 |
|||
totalMergeEndTime: null, // 整体批量合并结束时间 |
|||
allChunksUploaded: false, // 所有文件分片是否上传完成 |
|||
isCaValid: false, // CA证书是否有效 |
|||
isCheckingCa: false, // 是否正在校验CA状态 |
|||
baseApi: process.env.NODE_ENV === 'production' ? window.g.ApiUrl : process.env.VUE_APP_BASE_API |
|||
} |
|||
}, |
|||
// 计算属性：动态生成文件类型限制 |
|||
computed: { |
|||
fileAcceptType() { |
|||
// 批量挂载不再限制只能zip |
|||
return this.isBatchMount === 'true' ? '' : '' |
|||
}, |
|||
// 新增计算属性：动态获取分片接口路径 |
|||
chunkApiPath() { |
|||
return this.isBatchMount === 'true' ? '/api/collect/chunkZip' : '/api/minioUpload/chunk' |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.getCheckCaValidity() // 初始化时自动校验CA证书 |
|||
}, |
|||
methods: { |
|||
convertBytesToKB(bytes) { |
|||
// 1KB = 1024字节 |
|||
const kb = bytes / 1024 |
|||
// 四舍五入后如果小于1则返回1，否则返回四舍五入的值 |
|||
const result = Math.round(kb) |
|||
return result < 1 ? 1 : result |
|||
}, |
|||
triggerFileInput() { |
|||
this.$refs.fileInput.click() |
|||
}, |
|||
triggerFolderInput() { |
|||
this.$refs.folderInput.click() |
|||
}, |
|||
handleDeleteFile(index) { |
|||
// 校验是否正在上传/合并，避免删除操作冲突 |
|||
const fileItem = this.fileList[index] |
|||
if (fileItem.uploading || fileItem.merging) { |
|||
this.showMessage('当前文件正在上传/合并中，无法删除', 'warning') |
|||
return |
|||
} |
|||
// 删除对应索引的文件项 |
|||
this.fileList.splice(index, 1) |
|||
this.showMessage('文件已移除', 'success') |
|||
}, |
|||
formatFileSize(bytes) { |
|||
if (bytes === 0) return '0.00MB' |
|||
const mb = bytes / (1024 * 1024) // 1MB = 1024KB = 1024*1024B |
|||
return mb.toFixed(2) + 'MB' |
|||
}, |
|||
/** |
|||
* 工具方法：格式化时间戳为易读的本地时间（带毫秒） |
|||
* @param {number} timestamp - 时间戳 |
|||
* @returns {string} 格式化后的时间字符串 |
|||
*/ |
|||
formatTime(timestamp) { |
|||
if (!timestamp) return '无' |
|||
return new Date(timestamp).toLocaleString('zh-CN', { |
|||
year: 'numeric', |
|||
month: '2-digit', |
|||
day: '2-digit', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit', |
|||
millisecond: '3-digit' |
|||
}) |
|||
}, |
|||
/** |
|||
* 工具方法：计算两个时间戳的差值并格式化 |
|||
* @param {number} start - 开始时间戳 |
|||
* @param {number} end - 结束时间戳 |
|||
* @returns {string} 格式化的耗时字符串 |
|||
*/ |
|||
getTimeDiff(start, end) { |
|||
if (!start || !end) return '0ms' |
|||
const diff = end - start |
|||
if (diff < 1000) return `${diff}ms` |
|||
if (diff < 60000) return `${(diff / 1000).toFixed(2)}s` |
|||
return `${(diff / 60000).toFixed(2)}min` |
|||
}, |
|||
/** |
|||
* 工具方法：获取图片分辨率 |
|||
* @param {string} base64 - 图片base64编码 |
|||
* @returns {Promise<{width: number, height: number}>} 图片宽高 |
|||
*/ |
|||
getImgPx(base64) { |
|||
return new Promise((resolve) => { |
|||
const img = new Image() |
|||
img.onload = () => { |
|||
resolve({ width: img.width, height: img.height }) |
|||
} |
|||
img.src = base64 |
|||
}) |
|||
}, |
|||
/** |
|||
* 工具方法：将文件转为base64 |
|||
* @param {File} file - 文件对象 |
|||
* @returns {Promise<string>} base64编码 |
|||
*/ |
|||
getBase64(file) { |
|||
return new Promise((resolve, reject) => { |
|||
const reader = new FileReader() |
|||
reader.readAsDataURL(file) |
|||
reader.onload = () => resolve(reader.result) |
|||
reader.onerror = (err) => reject(err) |
|||
}) |
|||
}, |
|||
/** |
|||
* 工具方法：显示提示信息 |
|||
* @param {string} msg - 提示内容 |
|||
* @param {string} type - 类型（success/error） |
|||
*/ |
|||
showMessage(message, type) { |
|||
this.$message({ message, type, offset: 8 }) |
|||
}, |
|||
/** |
|||
* 重置上传状态 |
|||
*/ |
|||
resetUploadState() { |
|||
this.allChunksUploaded = false |
|||
this.btnLoading = false |
|||
}, |
|||
/** |
|||
* 校验CA证书有效性 |
|||
*/ |
|||
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') |
|||
console.error('CA校验接口异常：', err) |
|||
} finally { |
|||
this.isCheckingCa = false |
|||
} |
|||
}, |
|||
/** |
|||
* 手动重新校验CA证书 |
|||
*/ |
|||
recheckCa() { |
|||
this.getCheckCaValidity() |
|||
}, |
|||
/** |
|||
* 多选文件选择处理函数 |
|||
* @param {Event} e - 选择文件的事件对象 |
|||
*/ |
|||
async handleFileSelect(e) { |
|||
// 1. 校验CA状态 |
|||
if (this.isCheckingCa) { |
|||
this.showMessage('正在校验CA证书，请稍候...', 'warning') |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
if (!this.isCaValid) { |
|||
this.showMessage('CA证书不在有效期内，无法上传文件', 'error') |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
// 2. 获取选择的文件并初始化列表 |
|||
const selectedFiles = Array.from(e.target.files) |
|||
if (selectedFiles.length === 0) return |
|||
// 3. 非批量挂载时，禁止上传压缩包 |
|||
if (this.isBatchMount !== 'true') { |
|||
const compressedExtensions = ['.zip', '.rar', '.7z', '.tar', '.gz', '.bz2'] |
|||
const hasCompressedFile = selectedFiles.some(file => |
|||
compressedExtensions.some(ext => file.name.toLowerCase().endsWith(ext)) |
|||
) |
|||
if (hasCompressedFile) { |
|||
this.showMessage('不可上传压缩包文件', 'error') |
|||
e.target.value = '' |
|||
return |
|||
} |
|||
} |
|||
// 初始化文件上传状态（仅初始化，不上传） |
|||
const newFileList = selectedFiles.map(file => ({ |
|||
file, |
|||
relativePath: '', // 普通文件无相对路径 |
|||
uploading: false, |
|||
merging: false, |
|||
progress: 0, |
|||
errorMsg: '', |
|||
successMsg: '', |
|||
md5: '', |
|||
md5StartTime: null, |
|||
md5EndTime: null, |
|||
chunkUploadStartTime: null, |
|||
chunkUploadEndTime: null, |
|||
mergeStartTime: null, |
|||
mergeEndTime: null |
|||
})) |
|||
this.fileList = [...this.fileList, ...newFileList] |
|||
this.uploadMinioVisible = true |
|||
// 清空input的文件选择（避免重复选择同一文件不触发change） |
|||
e.target.value = '' |
|||
}, |
|||
/** |
|||
* 选择文件夹处理函数：读取文件夹内全部文件，带webkitRelativePath |
|||
* @param {Event} e |
|||
*/ |
|||
async handleFolderSelect(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 |
|||
|
|||
const newFileList = selectedFiles.map(file => ({ |
|||
file, |
|||
relativePath: file.webkitRelativePath, // 保存文件夹内相对路径，例：folder/a/b.txt |
|||
uploading: false, |
|||
merging: false, |
|||
progress: 0, |
|||
errorMsg: '', |
|||
successMsg: '', |
|||
md5: '', |
|||
md5StartTime: null, |
|||
md5EndTime: null, |
|||
chunkUploadStartTime: null, |
|||
chunkUploadEndTime: null, |
|||
mergeStartTime: null, |
|||
mergeEndTime: null |
|||
})) |
|||
this.fileList = [...this.fileList, ...newFileList] |
|||
this.uploadMinioVisible = true |
|||
e.target.value = '' |
|||
}, |
|||
/** |
|||
* 单个文件的分片上传流程 |
|||
* @param {Object} fileItem - 文件状态对象 |
|||
*/ |
|||
async uploadFileChunks(fileItem) { |
|||
const file = fileItem.file |
|||
fileItem.uploading = true |
|||
fileItem.progress = 0 |
|||
fileItem.errorMsg = '' |
|||
fileItem.successMsg = '' |
|||
try { |
|||
// 计算文件MD5 |
|||
const fileMd5 = await this.calculateFileMd5(file, fileItem) |
|||
fileItem.md5 = fileMd5 |
|||
console.log(`【${file.name}】文件MD5:`, fileMd5) |
|||
// 计算总分片数 |
|||
const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE) |
|||
console.log(`【${file.name}】总分片数:`, totalChunks) |
|||
// 分片上传开始时间 |
|||
fileItem.chunkUploadStartTime = new Date().getTime() |
|||
console.log(`【${file.name}】分片上传开始时间：${this.formatTime(fileItem.chunkUploadStartTime)}`) |
|||
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.chunkUploadEndTime = new Date().getTime() |
|||
console.log(`【${file.name}】分片上传结束时间：${this.formatTime(fileItem.chunkUploadEndTime)}，耗时：${this.getTimeDiff(fileItem.chunkUploadStartTime, fileItem.chunkUploadEndTime)}`) |
|||
fileItem.progress = 100 |
|||
} catch (err) { |
|||
const fileName = file.name |
|||
if (fileItem.chunkUploadStartTime && !fileItem.chunkUploadEndTime) { |
|||
fileItem.chunkUploadEndTime = new Date().getTime() |
|||
console.log(`【${fileName}】分片上传异常结束时间：${this.formatTime(fileItem.chunkUploadEndTime)}，耗时：${this.getTimeDiff(fileItem.chunkUploadStartTime, fileItem.chunkUploadEndTime)}`) |
|||
} |
|||
fileItem.errorMsg = '分片上传失败: ' + (err.message || '未知错误') |
|||
console.error(`【${fileName}】分片上传流程异常：`, err.message) |
|||
this.allChunksUploaded = false |
|||
} finally { |
|||
fileItem.uploading = false |
|||
} |
|||
}, |
|||
/** |
|||
* 计算文件MD5 |
|||
* @param {File} file - 待上传的文件 |
|||
* @param {Object} fileItem - 文件状态对象 |
|||
* @returns {Promise<string>} 文件的MD5值 |
|||
*/ |
|||
calculateFileMd5(file, fileItem) { |
|||
return new Promise((resolve, reject) => { |
|||
fileItem.md5StartTime = new Date().getTime() |
|||
console.log(`【${file.name}】MD5计算开始时间：${this.formatTime(fileItem.md5StartTime)}`) |
|||
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 { |
|||
fileItem.md5EndTime = new Date().getTime() |
|||
console.log(`【${file.name}】MD5计算结束时间：${this.formatTime(fileItem.md5EndTime)}，耗时：${this.getTimeDiff(fileItem.md5StartTime, fileItem.md5EndTime)}`) |
|||
resolve(spark.end()) |
|||
} |
|||
} |
|||
fileReader.onerror = (err) => reject(err) |
|||
loadNextChunk() |
|||
}) |
|||
}, |
|||
/** |
|||
* 校验所有分片是否存在 |
|||
* @param {string} fileMd5 - 文件MD5 |
|||
* @param {number} totalChunks - 总分片数 |
|||
* @returns {Promise<boolean>} 所有分片是否都存在 |
|||
*/ |
|||
async checkAllChunksExist(fileMd5, totalChunks) { |
|||
for (let i = 0; i < totalChunks; i++) { |
|||
const result = await this.checkChunkExists(fileMd5, i) |
|||
if (!result.exists) { |
|||
console.warn(`【${fileMd5}】分片${i}未上传`) |
|||
return false |
|||
} |
|||
} |
|||
return true |
|||
}, |
|||
/** |
|||
* 检查分片是否已存在 |
|||
* @param {string} fileMd5 - 文件MD5 |
|||
* @param {number} chunkIndex - 分片索引 |
|||
* @returns {Promise<Object>} 分片存在状态 |
|||
*/ |
|||
async checkChunkExists(fileMd5, chunkIndex) { |
|||
// 修改点：使用计算属性chunkApiPath |
|||
const response = await axios.get(`${this.baseApi}${this.chunkApiPath}`, { |
|||
params: { fileMd5, chunkIndex }, |
|||
headers: { 'Authorization': getToken() } |
|||
}) |
|||
if (response.data.code !== 200) { |
|||
throw new Error('检查分片失败: ' + response.data.msg) |
|||
} |
|||
return response.data.data |
|||
}, |
|||
/** |
|||
* 上传单个分片 |
|||
* @param {File} file - 待上传的文件 |
|||
* @param {string} fileMd5 - 文件MD5 |
|||
* @param {number} chunkIndex - 分片索引 |
|||
*/ |
|||
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) |
|||
// 修改点：使用计算属性chunkApiPath |
|||
const response = await axios.post(`${this.baseApi}${this.chunkApiPath}`, formData, { |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data', |
|||
'Authorization': getToken() |
|||
} |
|||
}) |
|||
if (response.data.code !== 200) { |
|||
throw new Error(`分片${chunkIndex}上传失败: ` + response.data.msg) |
|||
} |
|||
}, |
|||
/** |
|||
* 批量上传并合并：弹框内点击按钮触发（核心修改点：新增串行上传逻辑） |
|||
*/ |
|||
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 |
|||
// 1. 串行上传所有文件的分片 |
|||
this.allChunksUploaded = true |
|||
for (const fileItem of pendingFiles) { |
|||
await this.uploadFileChunks(fileItem) |
|||
// 如果单个文件上传失败，标记整体上传状态为失败 |
|||
if (fileItem.errorMsg) { |
|||
this.allChunksUploaded = false |
|||
} |
|||
} |
|||
// 2. 分片上传完成后执行合并 |
|||
if (!this.allChunksUploaded) { |
|||
this.btnLoading = false |
|||
this.showMessage('部分文件分片上传失败，无法执行合并', 'error') |
|||
return |
|||
} |
|||
const validFiles = this.fileList.filter(item => !item.errorMsg && item.progress === 100) |
|||
if (validFiles.length === 0) { |
|||
this.btnLoading = false |
|||
this.showMessage('无有效分片上传完成的文件!', 'error') |
|||
return |
|||
} |
|||
this.totalMergeStartTime = new Date().getTime() |
|||
console.log(`【整体合并】所有文件分片上传完成，开始合并，合并开始时间：${this.formatTime(this.totalMergeStartTime)}`) |
|||
const nowDate = getCurrentTime() |
|||
validFiles.forEach(fileItem => { |
|||
fileItem.merging = true |
|||
fileItem.mergeStartTime = new Date().getTime() |
|||
console.log(`【文件${fileItem.file.name}】合并开始时间：${this.formatTime(fileItem.mergeStartTime)}`) |
|||
}) |
|||
try { |
|||
let response |
|||
if (this.isBatchMount === 'true') { |
|||
// ==========批量挂载模式修改：不再只处理单个zip文件，处理全部validFiles数组，带上relativePath========== |
|||
const processFiles = validFiles.map(async(fileItem) => { |
|||
const file = fileItem.file |
|||
const json = {} |
|||
const jsonArray = [] |
|||
const jsonString = {} |
|||
if (file.type.startsWith('image')) { |
|||
const fileBase64 = await this.getBase64(file) |
|||
const imgRes = await this.getImgPx(fileBase64) |
|||
jsonString.file_dpi = `${imgRes.width}px*${imgRes.height}px` |
|||
} else { |
|||
jsonString.file_dpi = '' |
|||
} |
|||
jsonString.file_name = file.name |
|||
jsonString.file_size = this.convertBytesToKB(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 = nowDate |
|||
jsonString.id = null |
|||
jsonString.file_thumbnail = '' |
|||
jsonArray.push(jsonString) |
|||
console.log('file.lastModified', file.lastModified) |
|||
|
|||
json.categoryId = this.selectedCategory.id |
|||
|
|||
const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE) |
|||
const chunksExist = await this.checkAllChunksExist(fileItem.md5, totalChunks) |
|||
if (!chunksExist) { |
|||
throw new Error(`【${file.name}】部分分片未上传完成，无法合并`) |
|||
} |
|||
json.archivesId = this.arcId |
|||
json.identifier = fileItem.md5 |
|||
json.filename = file.name |
|||
json.totalChunks = totalChunks |
|||
json.totalSize = this.convertBytesToKB(file.size) |
|||
json.fileJsonString = JSON.stringify(jsonArray) |
|||
// 新增：文件夹相对路径，传给后端用于重建目录 |
|||
json.relativePath = fileItem.relativePath || '' |
|||
return json |
|||
}) |
|||
const jsonArray = await Promise.all(processFiles) |
|||
console.log('jsonArray', jsonArray) |
|||
// const mergeApiUrl = `${this.baseApi}/api/collect/mergeZip` |
|||
// response = await axios.post(mergeApiUrl, jsonArray, { |
|||
// headers: { |
|||
// 'Authorization': getToken(), |
|||
// 'Content-Type': 'application/json' |
|||
// } |
|||
// }) |
|||
|
|||
// this.totalMergeEndTime = new Date().getTime() |
|||
// const totalMergeDuration = this.getTimeDiff(this.totalMergeStartTime, this.totalMergeEndTime) |
|||
// if (response.data.code === 200) { |
|||
// this.btnLoading = false |
|||
// this.showMessage('所有文件上传并合并成功', 'success') |
|||
// validFiles.forEach((fileItem) => { |
|||
// fileItem.mergeEndTime = new Date().getTime() |
|||
// const mergeDuration = this.getTimeDiff(fileItem.mergeStartTime, fileItem.mergeEndTime) |
|||
// console.log(`【文件${fileItem.file.name}】合并结束时间：${this.formatTime(fileItem.mergeEndTime)}，合并耗时：${mergeDuration}`) |
|||
// fileItem.successMsg = '上传成功!' |
|||
// fileItem.merging = false |
|||
// }) |
|||
// console.log(`【整体合并】所有文件合并完成，整体合并耗时：${totalMergeDuration}`) |
|||
// this.$emit('onUploadSuccess', response.data.data, validFiles.map(f => f.file.name), jsonArray) |
|||
// this.uploadMinioVisible = false |
|||
// this.fileList = [] // 清空列表，避免下次打开弹框显示旧数据 |
|||
// } else { |
|||
// this.btnLoading = false |
|||
// throw new Error(response.data.msg || '合并失败') |
|||
// } |
|||
} else { |
|||
const processFiles = validFiles.map(async(fileItem) => { |
|||
const file = fileItem.file |
|||
const json = {} |
|||
const jsonArray = [] |
|||
const jsonString = {} |
|||
if (file.type.startsWith('image')) { |
|||
const fileBase64 = await this.getBase64(file) |
|||
const imgRes = await this.getImgPx(fileBase64) |
|||
jsonString.file_dpi = `${imgRes.width}px*${imgRes.height}px` |
|||
} else { |
|||
jsonString.file_dpi = '' |
|||
} |
|||
jsonString.file_name = file.name |
|||
jsonString.file_size = this.convertBytesToKB(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 = nowDate |
|||
jsonString.id = null |
|||
jsonString.file_thumbnail = '' |
|||
jsonArray.push(jsonString) |
|||
console.log('file.lastModified', file.lastModified) |
|||
if (this.isBatchMount === 'true') { |
|||
json.categoryId = this.selectedCategory.id |
|||
} else { |
|||
json.documentId = this.selectedDocument.id |
|||
} |
|||
const totalChunks = Math.ceil(file.size / this.CHUNK_SIZE) |
|||
const chunksExist = await this.checkAllChunksExist(fileItem.md5, totalChunks) |
|||
if (!chunksExist) { |
|||
throw new Error(`【${file.name}】部分分片未上传完成，无法合并`) |
|||
} |
|||
json.archivesId = this.arcId |
|||
json.identifier = fileItem.md5 |
|||
json.filename = file.name |
|||
json.totalChunks = totalChunks |
|||
json.totalSize = this.convertBytesToKB(file.size) |
|||
json.fileJsonString = JSON.stringify(jsonArray) |
|||
return json |
|||
}) |
|||
const jsonArray = await Promise.all(processFiles) |
|||
const mergeApiUrl = `${this.baseApi}/api/minioUpload/merge` |
|||
response = await axios.post(mergeApiUrl, jsonArray, { |
|||
headers: { |
|||
'Authorization': getToken(), |
|||
'Content-Type': 'application/json' |
|||
} |
|||
}) |
|||
this.totalMergeEndTime = new Date().getTime() |
|||
const totalMergeDuration = this.getTimeDiff(this.totalMergeStartTime, this.totalMergeEndTime) |
|||
if (response.data.code === 200) { |
|||
this.btnLoading = false |
|||
this.showMessage('所有文件上传并合并成功', 'success') |
|||
validFiles.forEach((fileItem) => { |
|||
fileItem.mergeEndTime = new Date().getTime() |
|||
const mergeDuration = this.getTimeDiff(fileItem.mergeStartTime, fileItem.mergeEndTime) |
|||
console.log(`【文件${fileItem.file.name}】合并结束时间：${this.formatTime(fileItem.mergeEndTime)}，合并耗时：${mergeDuration}`) |
|||
fileItem.successMsg = '上传成功!' |
|||
fileItem.merging = false |
|||
}) |
|||
console.log(`【整体合并】所有文件合并完成，整体合并耗时：${totalMergeDuration}`) |
|||
this.$emit('onUploadSuccess', response.data.data, validFiles.map(f => f.file.name), jsonArray) |
|||
this.uploadMinioVisible = false |
|||
this.fileList = [] // 清空列表，避免下次打开弹框显示旧数据 |
|||
} else { |
|||
this.btnLoading = false |
|||
throw new Error(response.data.msg || '合并失败') |
|||
} |
|||
} |
|||
} catch (err) { |
|||
this.btnLoading = false |
|||
this.totalMergeEndTime = new Date().getTime() |
|||
const totalMergeDuration = this.getTimeDiff(this.totalMergeStartTime, this.totalMergeEndTime) |
|||
console.log(`合并失败，耗时：${totalMergeDuration}，异常信息：`, err) |
|||
this.showMessage(`文件合并失败: ${err.message}`, 'error') |
|||
validFiles.forEach(fileItem => { |
|||
fileItem.merging = false |
|||
fileItem.errorMsg = fileItem.errorMsg || `合并失败: ${err.message}` |
|||
}) |
|||
this.$emit('onUploadError', err) |
|||
} finally { |
|||
this.resetUploadState() |
|||
} |
|||
}, |
|||
/** |
|||
* 关闭弹框时清空文件列表 |
|||
*/ |
|||
handleCloseDialog() { |
|||
this.uploadMinioVisible = false |
|||
this.fileList = [] |
|||
this.resetUploadState() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.upload-minio { |
|||
position: relative; |
|||
margin-top: 10px; |
|||
} |
|||
.uploader-drop{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
text-align: center; |
|||
height: 120px; |
|||
border: none; |
|||
background-color: #f5f5f5; |
|||
.uploader-btn{ |
|||
border: none; |
|||
i{ |
|||
font-size: 32px; |
|||
color: #1F55EB; |
|||
} |
|||
&:hover{ |
|||
background-color: transparent; |
|||
} |
|||
} |
|||
.el-upload__tip{ |
|||
font-size: 12px; |
|||
color: #A6ADB6; |
|||
} |
|||
} |
|||
.file-input { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100px; |
|||
height: 36px; |
|||
padding: 5px; |
|||
opacity: 0; |
|||
cursor: pointer; |
|||
z-index: 10; |
|||
} |
|||
/* 弹框内空提示 */ |
|||
.empty-tip { |
|||
text-align: center; |
|||
color: #999; |
|||
padding: 20px 0; |
|||
} |
|||
.file-item { |
|||
width: 100%; |
|||
border: 1px dashed #409eff; |
|||
padding: 10px; |
|||
border-radius: 4px; |
|||
margin-bottom: 10px; |
|||
} |
|||
.file-name { |
|||
position: relative; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 8px; |
|||
} |
|||
.icon-shanchu{ |
|||
position: absolute; |
|||
right: -7px; |
|||
top: 0; |
|||
font-size: 20px; |
|||
color: #1F55EB; |
|||
cursor: pointer; |
|||
&:hover { |
|||
color: #ff4444; |
|||
transform: scale(1.1); |
|||
transition: all 0.2s ease; |
|||
} |
|||
} |
|||
.progress-wrapper { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 5px; |
|||
} |
|||
.progress-bar { |
|||
height: 10px; |
|||
background-color: #42b983; |
|||
transition: width 0.3s ease; |
|||
border-radius: 10px; |
|||
} |
|||
.progress-text { |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
.merge-loading { |
|||
color: #1890ff; |
|||
font-size: 14px; |
|||
} |
|||
.success { |
|||
color: #00C851; |
|||
font-size: 14px; |
|||
margin: 5px 0 0 0; |
|||
} |
|||
.error { |
|||
color: #ff4444; |
|||
font-size: 14px; |
|||
margin: 5px 0 0 0; |
|||
} |
|||
.minio-file{ |
|||
.el-dialog{ |
|||
.el-dialog__body{ |
|||
padding: 15px 0 30px 0 !important; |
|||
} |
|||
} |
|||
} |
|||
.file-size { |
|||
color: #666; |
|||
font-weight: normal; |
|||
font-size: 12px; |
|||
margin-left: 8px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,167 @@ |
|||
<template> |
|||
<div class="process-container"> |
|||
<div v-for="item in filteredFlowList" :key="item.id" class="process-item"> |
|||
<span>{{ item.name }}</span> |
|||
<p>{{ item.flowName }}<i class="iconfont icon-shezhi" @click="toProcessSelected(item)" /></p> |
|||
<el-switch v-model="item.status" class="isEnable-chapter" @change="changeCategoryState(item)" /> |
|||
</div> |
|||
<eForm ref="cuform" :selected-category="selectedCategory" :edit-info-flow="editInfoFlow" @refresh="getInitCategoryFlowBase" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitCategoryFlowBase, FetchInitFlowByCategoryId, FetchChangeCategoryState, FetchgetCategoryFlow } from '@/api/system/category/process' |
|||
import eForm from './module/form' |
|||
export default { |
|||
name: 'ProcessManage', |
|||
components: { eForm }, |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
flowBaseList: [], |
|||
flowSetting: [], |
|||
editInfoFlow: null |
|||
} |
|||
}, |
|||
computed: { |
|||
filteredFlowList() { |
|||
if (this.selectedCategory.pid === '0' && this.selectedCategory.isType === 1) { |
|||
return this.flowBaseList.filter(item => item.id === '5') |
|||
} else { |
|||
return this.flowBaseList.filter(item => item.id !== '5') |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
}, |
|||
mounted() { |
|||
this.getInitCategoryFlowBase() |
|||
}, |
|||
methods: { |
|||
getInitCategoryFlowBase() { |
|||
FetchInitCategoryFlowBase().then((res) => { |
|||
this.flowBaseList = res.map(item => { |
|||
return { |
|||
...item, |
|||
status: false |
|||
} |
|||
}) |
|||
this.getInitFlowByCategoryId() |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
getInitFlowByCategoryId() { |
|||
console.log(this.selectedCategory) |
|||
FetchInitFlowByCategoryId({ 'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null }).then((res) => { |
|||
this.flowSetting = res |
|||
this.flowBaseList.forEach(item => { |
|||
this.flowSetting.forEach(v => { |
|||
if (item.id === v.flowManageId) { |
|||
item.status = !!v.status |
|||
item.flowName = v.flowName |
|||
} |
|||
}) |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
toProcessSelected(item) { |
|||
const params = { |
|||
'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null, |
|||
'manageId': item.id |
|||
} |
|||
FetchgetCategoryFlow(params).then((res) => { |
|||
if (res) { |
|||
// 判断所有值是否都为 null |
|||
if (this.allValuesNull(res)) { |
|||
// console.log('所有值都为 null') 新增 |
|||
this.editInfoFlow = null |
|||
} else { |
|||
// console.log('不是所有值都为 null') 编辑 |
|||
this.editInfoFlow = res |
|||
} |
|||
} else { |
|||
this.editInfoFlow = null |
|||
this.$message({ message: '数据请求失败', type: 'error', offset: 8 }) |
|||
} |
|||
console.log('this.editInfoFlow', this.editInfoFlow) |
|||
this.$nextTick(() => { |
|||
this.$refs.cuform.cuDialogVisible = true |
|||
this.$refs.cuform.setPocessCurrent = item |
|||
this.$refs.cuform.getEditInfoFlow = this.editInfoFlow ? this.editInfoFlow : {} |
|||
this.$refs.cuform.handleEditInfoFlow(this.editInfoFlow) |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
changeCategoryState(item) { |
|||
const filterItem = this.flowSetting.find(v => item.id === v.flowManageId) |
|||
const params = { |
|||
'categoryId': this.selectedCategory.id, |
|||
'id': filterItem.id, |
|||
'status': item.status ? 1 : 0 |
|||
} |
|||
FetchChangeCategoryState(params).then((res) => { |
|||
if (res === 'SUCCESS') { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '操作失败', type: 'error', offset: 8 }) |
|||
} |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
allValuesNull(jsonObject) { |
|||
for (const key in jsonObject) { |
|||
if (jsonObject[key] !== null) { |
|||
return false |
|||
} |
|||
} |
|||
return true |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.process-item{ |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
padding: 36px 40px 0 40px; |
|||
font-size: 14px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
margin-bottom: 20px; |
|||
span{ |
|||
display: block; |
|||
margin-right: 12px; |
|||
} |
|||
p{ |
|||
position: relative; |
|||
width: 324px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
padding: 0 13px; |
|||
margin-right: 16px; |
|||
color: #0C0E1E; |
|||
background-color: #F5F7FA; |
|||
i{ |
|||
position: absolute; |
|||
right: 10px; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
color: #0348F3; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,374 @@ |
|||
<template> |
|||
<el-dialog class="process-dialog" :visible.sync="cuDialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body title="工作流选择" :before-close="handleCloseDialog"> |
|||
<div class="setting-dialog"> |
|||
<el-form ref="form" class="process-form" inline :model="form" :rules="rules" size="small" label-width="80px"> |
|||
<div class="process-template"> |
|||
<el-form-item label="流程模板" prop="model"> |
|||
<el-select |
|||
v-model="form.model" |
|||
placeholder="请选择" |
|||
style="width: 580px;" |
|||
value-key="modelId" |
|||
@change="selectModel" |
|||
> |
|||
<el-option |
|||
v-for="item in modelOptions" |
|||
:key="item.modelId" |
|||
:label="item.deployName" |
|||
:value="item" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div v-loading="loadingImg" class="template-img"> |
|||
<img :src="srcImg" alt="" :onerror="defaultImg"> |
|||
</div> |
|||
</div> |
|||
<div class="process-task"> |
|||
<div class="task-tip">任务需指定执行岗位。当流程进行到该任务时，指定岗位下同一全宗的管理员可进入流程操作</div> |
|||
<div class="task-list"> |
|||
<div v-for="(task,index) in taskList" :key="index" class="task-item"> |
|||
<p>任务{{ index+1 }} ：{{ task.nodeName }}</p> |
|||
<el-form-item label="执行岗位" :prop="`task${index+1}`" :rules="dynamicRules(index)"> |
|||
<el-select v-model="form[`task${index+1}`]" value-key="id" @change="selectJob($event,index)"> |
|||
<el-option v-for="item in jobOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div v-if="form[`task${index+1}`]" class="detail-arrow" @click="task.isExpend = !task.isExpend"><i :class="['iconfont icon-xiala', task.isExpend ? 'arrow-up':'']" /></div> |
|||
<el-collapse-transition> |
|||
<el-table v-if="task.isExpend" :data="task.userTableData" border style="width: 100%"> |
|||
<el-table-column prop="fondsName" label="全宗" align="center" /> |
|||
<el-table-column prop="deptsName" label="部门" align="center" /> |
|||
<el-table-column prop="username" label="用户名" align="center" /> |
|||
</el-table> |
|||
</el-collapse-transition> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button @click="handleCloseDialog">取消</el-button> |
|||
<el-button type="primary" :loading="loading" @click="save">保存</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import { FetchInitFlowAll, FetchFindFolwImgByModelId, FetchUserTaskAllByDeployId } from '@/api/system/flowable' |
|||
import { FetchPostAll, FetchFindUserByPost } from '@/api/system/job' |
|||
import { FetchFlowbinding } from '@/api/system/category/process' |
|||
|
|||
export default { |
|||
props: { |
|||
selectedCategory: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
}, |
|||
editInfoFlow: { |
|||
type: Object, |
|||
default: function() { |
|||
return {} |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
cuDialogVisible: false, |
|||
loading: false, |
|||
loadingImg: false, |
|||
form: { |
|||
model: null |
|||
}, |
|||
modelOptions: [], |
|||
srcImg: '', |
|||
defaultImg: 'this.src="' + require('@/assets/images/system/default-img2.png') + '"', |
|||
jobOptions: [ |
|||
{ |
|||
value: '', |
|||
label: '请选择' |
|||
} |
|||
], |
|||
rules: { |
|||
model: [ |
|||
{ required: true, message: '流程模板不可为空', trigger: 'change' } |
|||
] |
|||
}, |
|||
userTableData: [], |
|||
taskList: [], |
|||
selectFlowVal: null, |
|||
setPocessCurrent: null, |
|||
getEditInfoFlow: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
dynamicRules() { |
|||
return (index) => { |
|||
return [{ |
|||
required: true, |
|||
message: '执行岗位不可为空', |
|||
trigger: 'change' |
|||
}] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
// editInfoFlow: { |
|||
// handler(newVal, oldVal) { |
|||
// // this.handleEditInfoFlow(newVal) |
|||
// }, |
|||
// deep: true |
|||
// } |
|||
}, |
|||
mounted() { |
|||
this.getAllFlowable() |
|||
this.getAllJob() |
|||
}, |
|||
methods: { |
|||
// handleEditInfoFlow(newVal) { |
|||
// console.log('getEditInfoFlow', this.getEditInfoFlow) |
|||
// const findItem = this.findIdByModelId(newVal.flowId) |
|||
// this.form.model = findItem |
|||
// this.selectModel(findItem, newVal) |
|||
// }, |
|||
// findIdByModelId(modelId) { |
|||
// const item = this.modelOptions.find(data => data.modelId === modelId) |
|||
// if (item) { |
|||
// return item |
|||
// } else { |
|||
// return null |
|||
// } |
|||
// }, |
|||
handleEditInfoFlow(newVal) { |
|||
console.log('编辑回显数据:', newVal) |
|||
|
|||
// 确保 form 存在 model 属性 |
|||
if (!this.form.model) { |
|||
this.form.model = null |
|||
} |
|||
|
|||
// 无数据直接清空返回 |
|||
if (!newVal || !newVal.flowId) { |
|||
this.form.model = null |
|||
return |
|||
} |
|||
|
|||
const findItem = this.findIdByModelId(newVal.flowId) |
|||
this.form.model = findItem |
|||
|
|||
this.$nextTick(() => { |
|||
if (findItem) { |
|||
this.selectModel(findItem, newVal) |
|||
} |
|||
}) |
|||
}, |
|||
findIdByModelId(modelId) { |
|||
return this.modelOptions.find(data => data.modelId === modelId) || null |
|||
}, |
|||
getAllFlowable() { |
|||
FetchInitFlowAll().then((res) => { |
|||
this.modelOptions = res |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
selectModel(val, parentProcessVal) { |
|||
if (!parentProcessVal) { |
|||
this.getEditInfoFlow.categoryFlowDetails = [] |
|||
} |
|||
|
|||
this.selectFlowVal = val |
|||
this.loadingImg = true |
|||
FetchFindFolwImgByModelId({ 'processDefinitionId': val.procdefId }).then((res) => { |
|||
this.srcImg = 'data:image/jpeg;base64,' + res |
|||
this.loadingImg = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
FetchUserTaskAllByDeployId({ 'deployId': val.deployId }).then((res) => { |
|||
this.taskList = res.map((item, index) => { |
|||
this.$set(this.form, `task${index + 1}`, null) |
|||
return { |
|||
...item, |
|||
isExpend: false, |
|||
userTableData: [], |
|||
postId: null |
|||
} |
|||
}) |
|||
if (parentProcessVal) { |
|||
parentProcessVal.categoryFlowDetails.forEach((item, index) => { |
|||
this.$set(this.form, `task${index + 1}`, item.postId) |
|||
this.selectJob(item.postId, index) |
|||
}) |
|||
} |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
getAllJob() { |
|||
FetchPostAll().then((res) => { |
|||
this.jobOptions = res.map(item => { |
|||
const json = {} |
|||
json.value = item.id |
|||
json.label = item.postName |
|||
return json |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
selectJob(val, index) { |
|||
this.$forceUpdate() |
|||
FetchFindUserByPost({ 'postId': val }).then((res) => { |
|||
this.taskList.forEach((item, i) => { |
|||
if (index === i) { |
|||
item.postId = val |
|||
item.userTableData = res |
|||
} |
|||
}) |
|||
}).catch(err => { |
|||
console.log(err) |
|||
}) |
|||
}, |
|||
save() { |
|||
this.loading = true |
|||
this.$refs['form'].validate((valid) => { |
|||
if (valid) { |
|||
const detailsDTOs = this.taskList.map((item, index) => { |
|||
const json = {} |
|||
json.id = this.getEditInfoFlow && this.getEditInfoFlow.categoryFlowDetails.length !== 0 ? this.getEditInfoFlow.categoryFlowDetails[index].id : null |
|||
json.postId = item.postId |
|||
json.taskId = item.nodeId |
|||
return json |
|||
}) |
|||
const params = { |
|||
// 'categoryId': this.selectedCategory.pid !== '0' ? this.selectedCategory.id : null, |
|||
'categoryId': this.selectedCategory.id, |
|||
'detailsDTOs': detailsDTOs, |
|||
'flowId': this.selectFlowVal.modelId, |
|||
'flowName': this.selectFlowVal.deployName, |
|||
'flowKey': this.selectFlowVal.modelKey, |
|||
'flowManageId': this.setPocessCurrent.id, |
|||
'id': this.getEditInfoFlow && this.getEditInfoFlow.id, |
|||
'status': this.getEditInfoFlow && this.getEditInfoFlow.status |
|||
} |
|||
console.log('params', params) |
|||
FetchFlowbinding(params).then((res) => { |
|||
if (res === 'SUCCESS') { |
|||
this.$message({ message: '操作成功', type: 'success', offset: 8 }) |
|||
} else { |
|||
this.$message({ message: '操作失败', type: 'error', offset: 8 }) |
|||
} |
|||
this.handleCloseDialog() |
|||
this.$emit('refresh') |
|||
this.loading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
this.loading = false |
|||
}) |
|||
} else { |
|||
this.loading = false |
|||
return false |
|||
} |
|||
}) |
|||
}, |
|||
handleCloseDialog() { |
|||
// 重置为初始状态，而不是直接赋空对象 |
|||
this.form = { |
|||
model: null |
|||
} |
|||
this.srcImg = '' |
|||
this.taskList = [] |
|||
this.selectFlowVal = null |
|||
this.getEditInfoFlow = {} |
|||
this.cuDialogVisible = false |
|||
|
|||
// 清除校验状态（必须加） |
|||
if (this.$refs.form) { |
|||
this.$refs.form.clearValidate() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
|
|||
.process-dialog{ |
|||
::v-deep .el-dialog{ |
|||
width: 1100px; |
|||
} |
|||
} |
|||
.process-form{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
.process-template{ |
|||
margin-right: 20px; |
|||
} |
|||
.template-img{ |
|||
display: flex; |
|||
align-items: center; |
|||
width: 690px; |
|||
height: 460px; |
|||
border: 1px solid #eee; |
|||
background-color: #EDEFF3; |
|||
overflow: hidden; |
|||
img{ |
|||
display: block; |
|||
margin: 0 auto; |
|||
// width: 100%; |
|||
} |
|||
} |
|||
.task-tip{ |
|||
margin-bottom: 20px; |
|||
padding-left: 24px; |
|||
font-size: 14px; |
|||
line-height: 18px; |
|||
color: #0c0e1e; |
|||
background: url('~@/assets/images/icon/tip-icon.png') no-repeat left top; |
|||
background-size: 18px 18px; |
|||
} |
|||
.task-list{ |
|||
height: 454px; |
|||
overflow: hidden; |
|||
overflow-y: scroll; |
|||
} |
|||
.task-item{ |
|||
p{ |
|||
line-height: 32px; |
|||
} |
|||
} |
|||
.detail-arrow{ |
|||
position: relative; |
|||
width: 64px; |
|||
height: 20px; |
|||
margin: -8px auto 10px auto; |
|||
background-color:#E8F2FF; |
|||
border-radius: 3px; |
|||
cursor: pointer; |
|||
i{ |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
display: block; |
|||
width: 14px; |
|||
height: 14px; |
|||
margin-top: -7px; |
|||
margin-left: -7px; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
color: #0348F3; |
|||
transition: all ease-in 0.4s; |
|||
transform: scale(0.7); |
|||
&.arrow-up { |
|||
transform: scale(0.7) rotate(180deg); |
|||
transform-origin: center; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .el-table__body-wrapper{ |
|||
border-bottom: 1px solid #dfe6ec !important; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue