From d51a787598d00da54282e77409ecb55f35b75c60 Mon Sep 17 00:00:00 2001 From: fit2bot <68588906+fit2bot@users.noreply.github.com> Date: Thu, 14 Dec 2023 10:34:06 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BD=BF=E7=94=A8slot=E5=A4=84?= =?UTF-8?q?=E7=90=86=E6=96=87=E4=BB=B6=E5=88=97=E8=A1=A8=20(#3599)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * perf: 使用slot处理文件列表 * perf: 大小文件超出限制不上传 --------- Co-authored-by: wangruidong <940853815@qq.com> --- src/views/ops/File/index.vue | 155 +++++++++++++++++++---------------- 1 file changed, 84 insertions(+), 71 deletions(-) diff --git a/src/views/ops/File/index.vue b/src/views/ops/File/index.vue index 2707f60a2..e18c65f4e 100644 --- a/src/views/ops/File/index.vue +++ b/src/views/ops/File/index.vue @@ -5,35 +5,35 @@
- {{ run_button.name }} + {{ runButton.name }}
{{ $t('users.Users') }}:
{{ $t('ops.UploadDir') }}:
{{ $t('ops.uploadFileLthHelpText') }} +
+
  • + + {{ file.name }} + + {{ formatFileSize(file.size) }} + + + +
    • +
    +
    + {{ $tc('ops.NoFiles') }} +
    {{ $tc('ops.output') }}: @@ -119,12 +135,11 @@ export default { timeCost: 0, cancel: 0 }, - xtermConfig: { - }, + xtermConfig: {}, DataZTree: 0, runas: '', - dst_path: '', - run_button: { + dstPath: '', + runButton: { type: 'button', name: this.$t('ops.Transfer'), align: 'left', @@ -137,7 +152,7 @@ export default { this.execute() } }, - runas_input: { + runAsInput: { name: this.$t('ops.runAs'), align: 'left', value: '', @@ -163,7 +178,7 @@ export default { this.runas = option } }, - dst_path_input: { + dstPathInput: { type: 'input', name: this.$t('ops.runningPath'), align: 'left', @@ -173,8 +188,6 @@ export default { this.chdir = val } }, - files: null, - src_paths: [], treeSetting: { treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/', searchUrl: '/api/v1/perms/users/self/assets/tree/', @@ -192,7 +205,8 @@ export default { iShowTree: true, progressLength: 0, ShowProgress: false, - upload_interval: null + upload_interval: null, + uploadFileList: [] } }, computed: { @@ -206,9 +220,9 @@ export default { mounted() { this.enableWS() this.initData() - this.handleFileList(null, []) }, methods: { + formatFileSize, async initData() { this.recoverStatus() }, @@ -217,8 +231,8 @@ export default { this.currentTaskId = this.$route.query.taskId getTaskDetail(this.currentTaskId).then(data => { getJob(data.job_id).then(res => { - this.runas_input.value = res.runas - this.runas_input.callback(res.runas) + this.runAsInput.value = res.runas + this.runAsInput.callback(res.runas) this.executionInfo.status = data['status'] this.executionInfo.timeCost = data['time_cost'] this.setCostTimeInterval() @@ -283,8 +297,8 @@ export default { }, setCostTimeInterval() { - this.run_button.icon = 'fa fa-spinner fa-spin' - this.run_button.disabled = true + this.runButton.icon = 'fa fa-spinner fa-spin' + this.runButton.disabled = true this.executionInfo.cancel = setInterval(() => { this.executionInfo.timeCost += 0.1 }, 100) @@ -315,49 +329,40 @@ export default { handleFileList(file, fileList) { const filenameList = fileList.map((file) => file.name) const filenameCount = _.countBy(filenameList) - this.$nextTick(() => { - const emptyFileTip = document.getElementsByClassName('empty-file-tip') - if (emptyFileTip.length > 0) { - emptyFileTip[0].style = 'display:none' - } - const fileElementList = document.getElementsByClassName('el-upload-list__item-name') - if (fileElementList && fileElementList.length > 0) { - for (const ele of fileElementList) { - // 显示文件大小 - if (file.name === ele.outerText) { - ele.insertAdjacentHTML('beforeend', - `${formatFileSize(file.size)}`) - } - // 文件大小超出限制 - if (file.size > 200 * 1024 * 1024) { - this.$message.error(this.$tc('ops.FileSizeExceedsLimit')) - ele.style = 'background-color:var(--color-danger)' - } - // 同名文件提示 - if (filenameCount[ele.outerText] > 1) { - this.$message.error(this.$tc('ops.DuplicateFileExists')) - ele.style = 'background-color:var(--color-danger)' - } else { - ele.style = '' - } - } - } else { - const emptyFileElementList = document.getElementsByClassName('el-upload-list--text')[0] - const text = this.$tc('ops.NoFiles') - emptyFileElementList.insertAdjacentHTML('afterbegin', - `
    - ${text}
    `) - } - }) + if (filenameCount[file.name] > 1) { + this.$message.error(this.$tc('ops.DuplicateFileExists')) + file.is_same = true + } + }, + sameFileStyle(file) { + if (file.is_same) { + return { backgroundColor: 'var(--color-danger)' } + } + return '' + }, + IsFileExceedsLimit(file) { + const isGt200M = file.size / 1024 / 1024 > 200 + if (isGt200M) { + this.$message.error(this.$tc('ops.FileSizeExceedsLimit')) + } + return isGt200M }, onFileChange(file, fileList) { file.name = this.truncateFileName(file.name) - this.files = fileList + this.uploadFileList = fileList this.handleFileList(file, fileList) }, + removeFile(file) { + this.uploadFileList.splice(this.uploadFileList.indexOf(file), 1) + }, execute() { const { hosts, nodes } = this.getSelectedNodesAndHosts() - if (!this.files) { + for (const file of this.uploadFileList) { + if (this.IsFileExceedsLimit(file)) { + return + } + } + if (!this.uploadFileList) { this.$message.error(this.$tc('ops.RequiredUploadFile')) return } @@ -373,7 +378,7 @@ export default { assets: hosts, nodes: nodes, module: 'shell', - args: JSON.stringify({ dst_path: this.dst_path }), + args: JSON.stringify({ dst_path: this.dstPath }), type: 'upload_file', runas: this.runas, runas_policy: 'skip', @@ -388,7 +393,7 @@ export default { this.progressLength = 0 this.ShowProgress = true const form = new FormData() - for (const file of this.files) { + for (const file of this.uploadFileList) { form.append('files', file.raw) form.append('job_id', res.id) } @@ -415,9 +420,9 @@ export default { this.executionInfo.timeCost = 0 this.progressLength = 0 this.ShowProgress = false - this.run_button.disabled = false + this.runButton.disabled = false clearInterval(this.upload_interval) - this.run_button.icon = 'fa fa-play' + this.runButton.icon = 'fa fa-play' } } } @@ -483,7 +488,7 @@ export default { display: flex; } - >>> .el-upload { + > > > .el-upload { width: 400px; flex-direction: column; @@ -493,6 +498,14 @@ export default { } } + .empty-file-tip { + position: relative; + bottom: 100px; + left: 58%; + font-size: 18px; + color: #c5c9cc; + } + > > > .el-upload-list { margin-left: 20px; padding: 0 10px 0 10px; @@ -509,7 +522,7 @@ export default { background: white; } -.output >>> #terminal { +.output > > > #terminal { border: dashed 1px #d9d9d9; margin: 0 20px 20px; }