198 lines
6.1 KiB
Vue
198 lines
6.1 KiB
Vue
<template>
|
||
<div class="libraryUpload">
|
||
<el-dialog :visible.sync="visible" center :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
|
||
<!-- 上传 -->
|
||
<template v-if="uploadState">
|
||
<span slot="title"><i class="font-sexteen">上传</i></span>
|
||
<el-upload class="text-center" drag multiple name="processFile" :show-file-list="true" file-list="text"
|
||
:auto-upload="true" :action="url" :file-list="fileList" :before-upload="beforeUploadHandle" :on-success="successHandle"
|
||
:on-progress="progressHandle" :on-error="errorHandle" :limit="10" :on-exceed="handleExceed" :headers="headers">
|
||
<i class="el-icon-upload"></i>
|
||
<div class="el-upload__text" v-html="$t('upload.text')"></div>
|
||
<div class="el-upload__tip" slot="tip">{{ $t('upload.tip', { 'format': 'jpeg、jpg、png' }) }}</div>
|
||
</el-upload>
|
||
<div style="display: flex;flex-direction: column; align-items: center;color: red;margin-top: 5px;font-size: 18px;line-height: 30px;">
|
||
<span>文件名格式必须为：姓名</span>
|
||
<span>一次最多上传十张</span>
|
||
</div>
|
||
</template>
|
||
<!-- 导图状况 喀什不用-->
|
||
<template v-else>
|
||
<span slot="title"><i class="font-sexteen">导图状况</i></span>
|
||
<el-table :data="uploadList" style="width: 100%">
|
||
<el-table-column prop="type" label="类型" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="name" label="名字" width="180">
|
||
</el-table-column>
|
||
<el-table-column prop="percent" label="进度">
|
||
<template slot-scope="scope">
|
||
<el-progress :percentage="parseFloat(scope.row.percent.toFixed(2))"></el-progress>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="status" label="上传状态">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.status == 'fail'" class="el-icon-refresh cursor-class" style="color:red" @click="refreshUpload()"></span>
|
||
<span v-else style="color:green">{{scope.row.status}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="startTime" label="开始时间">
|
||
<template slot-scope="scope">
|
||
{{scope.row.startTime}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="endTime" label="结束时间">
|
||
<template slot-scope="scope">
|
||
{{scope.row.endTime}}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
<span slot="footer">
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Cookies from 'js-cookie'
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 取消关闭按钮
|
||
visible: false,
|
||
url: '',
|
||
fileList: [],
|
||
uploadList: [],
|
||
uploadState: true,
|
||
fromWhere: "",
|
||
headers: {
|
||
'token': Cookies.get('token')
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
/**
|
||
* @param {String} param1 来自上传("upload")/导图状况()
|
||
* @param {String} param2 来自library/libraryView
|
||
* @param {Object} param3 库ID
|
||
*/
|
||
init(param1, param2, param3) {
|
||
this.visible = true
|
||
this.fromWhere = param2
|
||
this.uploadState = (param1 === "upload") ? true : false
|
||
this.url = `${window.SITE_CONFIG['apiURL']}/Resources/addFile/${param3}`
|
||
// this.url = `${window.SITE_CONFIG['apiURL']}/Resources/addpngFile/${param3}`
|
||
this.fileList = []
|
||
},
|
||
// 时间格式转换
|
||
getNowTime() {
|
||
var date = new Date();
|
||
this.year = date.getFullYear();
|
||
this.month = date.getMonth() + 1;
|
||
this.date = date.getDate();
|
||
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||
this.milliSeconds = date.getMilliseconds();
|
||
var currentTime = this.year + '-' + this.month + '-' + this.date + ' ' + this.hour + ':' + this.minute + ':' + this
|
||
.second + '.' + this.milliSeconds;
|
||
return currentTime;
|
||
},
|
||
// 上传之前
|
||
beforeUploadHandle(file) {
|
||
if (!/.+\.jpeg$/.test(file.name) && !/.+\.jpg$/.test(file.name) && !/.+\.png$/.test(file.name)) {
|
||
this.$message.error(this.$t('upload.tip', {
|
||
'format': 'jpeg、jpg、png'
|
||
}))
|
||
return false
|
||
}
|
||
this.uploadList.push({
|
||
"name": file.name,
|
||
"uid": file.uid,
|
||
"percent": 0,
|
||
"startTime": this.getNowTime(),
|
||
"endTime": "",
|
||
"status": ""
|
||
})
|
||
},
|
||
// 上传限制
|
||
handleExceed(e) {
|
||
this.$message.warning(`上传了${e.length}张,限10张`)
|
||
},
|
||
// 上传中--喀什版本不用
|
||
progressHandle(event, file, fileList) {
|
||
console.log(event, file, fileList)
|
||
this.uploadList.forEach(item => {
|
||
if (item.uid === file.uid) {
|
||
item.percent = event.percent
|
||
item.status = file.status
|
||
item.endTime = event.percent === 100 ? this.getNowTime() : ""
|
||
}
|
||
})
|
||
},
|
||
// 上传成功
|
||
successHandle(res, file, fileList) {
|
||
if (res.code == 0) {
|
||
this.$message({
|
||
message: this.$t('prompt.success'),
|
||
type: 'success',
|
||
duration: 500,
|
||
onClose: () => {
|
||
this.visible = false
|
||
// fromWhere 暂时不用，不加参数也能满足跳转不同主页面
|
||
this.$emit('refreshUploadClick', this.fromWhere)
|
||
}
|
||
})
|
||
} else if (res.code == 80005) {
|
||
this.$message.warning(res.message)
|
||
} else if (res.code == 80006) {
|
||
this.$message.warning(res.message)
|
||
} else if (res.code == 80008) {
|
||
this.$message.warning(res.message)
|
||
} else {
|
||
console.log(res)
|
||
}
|
||
},
|
||
// 上传失败--喀什版本不用
|
||
errorHandle(err, file, fileList) {
|
||
this.uploadList.forEach(item => {
|
||
if (item.uid === file.uid) {
|
||
item.status = "fail"
|
||
}
|
||
})
|
||
},
|
||
// 刷新从新上传--喀什版本不用
|
||
refreshUpload() {
|
||
this.uploadState = true
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
i {
|
||
font-style: normal;
|
||
font-family: "Noto Sans SC";
|
||
color: #333
|
||
}
|
||
|
||
.font-fourteen {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.font-eighteen {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.font-sexteen {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cursor-class {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|