提交 01b062e6 编写于 作者: RedPig97's avatar RedPig97

update: 安永文件上传

上级 65f005eb
.app-ey-upload {
>.el-row {
display: flex;
flex-direction: column;
align-items: flex-start;
.app-ey-upload__item + .app-ey-upload__item {
margin-top: 10px;
}
}
.el-upload {
height: 34px;
width: 270px;
.el-button {
height: 100%;
width: 100%;
padding: 4px 10px;
border-radius: 0;
background-color: var(--app-color-white);
border: 1px solid var(--app-color-gray-235);
&:hover {
color: var(--app-color-blue);
}
span {
font-size: 12px;
line-height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.app-ey-upload__item {
height: 34px;
display: flex;
align-items: center;
>div {
height: 100%;
}
}
.app-ey-upload__buttons {
width: 30px;
display: flex;
justify-content: center;
align-items: center;
img {
height: 20px;
width: 20px;
cursor: pointer;
}
}
.app-ey-upload__preview {
font-size: 12px;
line-height: 20px;
display: flex;
align-items: center;
gap: 30px;
.file-title {
color: var(--app-color-blue);
cursor: pointer;
}
.file-icon {
cursor: pointer;
display: flex;
align-items: center;
}
}
}
\ No newline at end of file
<template>
<div class="app-ey-upload">安永文件上传</div>
<div class="app-ey-upload">
<el-row>
<el-col v-for="(item,index) in uploadFileList" :key="index" class="app-ey-upload__item app-ey-upload__preview">
<span class="file-title" @click="onDownload(item)">
<span>{{item.name}}</span>
</span>
<span class="file-version">
<span>文件版本号:v1.0</span>
</span>
<span class="file-size">
<span>文件大小:{{getFileSize(item.size)}}</span>
</span>
<span class="file-owner">
<span>文件上传人:Na Na Zhang</span>
</span>
<span class="file-time">
<span>文件上传时间:2022/10/31 18:49:12</span>
</span>
<div class="file-icon">
<img v-if="!buttonCount" src="assets/img/ey_switch.svg" @click="onRemove(item,index, true)">
<img v-else src="assets/img/remove_circle.svg" @click="onRemove(item,index)">
</div>
</el-col>
<el-col v-for="count in buttonCount" :key="count" class="app-ey-upload__item">
<el-upload
ref="upload"
list-type="text"
:disabled="disabled"
:action="getAction()"
:headers="myHeaders"
:file-list="uploadFileList"
:show-file-list="false"
:http-request="customUploadFile">
<el-button size="small" :disabled="disabled">
<img src="assets/img/ey_upload.svg">
文件上传
</el-button>
</el-upload>
<div class="app-ey-upload__buttons">
<img v-if="count === buttonCount" src="assets/img/ic_add_circle.svg" @click="buttonCount++">
<img v-else src="assets/img/remove_circle.svg" @click="buttonCount--">
</div>
</el-col>
</el-row>
</div>
</template>
<script lang="ts">
......@@ -194,6 +238,14 @@ export default class AppEYUpload extends Vue {
*/
public iframeUrl: any = "";
/**
* 按钮数量
*
* @type {number}
* @memberof AppEYUpload
*/
public buttonCount: number = 1;
/**
* 关闭自定义弹框
*
......@@ -207,6 +259,21 @@ export default class AppEYUpload extends Vue {
iframe.parentNode.removeChild("fileIframe");
}
/**
* 获取文件大小
*
* @memberof AppEYUpload
*/
public getFileSize(size: number) {
if (size < 1024) {
return `${size}Byte`;
} else if (size < 1024 * 1024) {
return `${size / 1024}KB`;
} else {
return `${size / 1024 / 1024}MB`;
}
}
/**
* 拼接上传路径
*
......@@ -343,6 +410,7 @@ export default class AppEYUpload extends Vue {
if (this.isCreate == true) {
this.isUpdateBatch = true;
}
this.buttonCount--;
// 保存到文件列表进行显示
this.uploadFileList.push(response.data);
// persistence=true时需要持久化表单属性
......@@ -493,7 +561,7 @@ export default class AppEYUpload extends Vue {
* @param index
* @memberof AppEYUpload
*/
public onRemove(item: any, index: number) {
public onRemove(item: any, index: number, isSwitch: boolean = false) {
let _this: any = this;
if (item) {
MessageBox.confirm(_this.$t("components.diskFileUpload.deleteFile"), _this.$t("components.diskFileUpload.deleteFilePrompt"), {
......@@ -511,6 +579,9 @@ export default class AppEYUpload extends Vue {
}
// 从文件列表中删除
this.uploadFileList.splice(index, 1);
if (isSwitch) {
this.buttonCount++;
}
// persistence=true时需要持久化表单属性
if (this.persistence == true) {
const value = JSON.stringify(this.uploadFileList);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册