| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <template>
- <div>
- <div v-if='uploadVisible' class="uploadWarp" :style="{height: (!!activeNames ? 133 : 50) + 'px' }">
- <el-collapse v-model="activeNames" :accordion='true' style="position: absolute; width: 100%">
- <div class="full-progress" :style="{width: percentage + '%', backgroundColor: !!activeNames ? '#fff' : uploading ?
- PROGRESS_BG_COLOR.uplaoding : isHasError ?
- PROGRESS_BG_COLOR.error : PROGRESS_BG_COLOR.success }"></div>
- <el-progress :status="uploading ? null : isHasError ? 'warning' : 'success'" v-show='!!!activeNames' :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage" class="smallProgess"></el-progress>
- <i class="el-icon-close" @click="cancelUpload"></i>
- <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
- <div class="tip">
- <span>已成功同步{{synced}}个文件,共{{fileList.length}}个文件</span>
- <Icon v-if="!uploading" class="icon" :name="'tagCompleted'" :color="isHasError ? PROGRESS_BG_COLOR.failed : PROGRESS_BG_COLOR.success" />
- </div>
- <el-progress
- :text-inside="true"
- :show-text='false'
- :stroke-width="3"
- :percentage="percentage"
- :status="uploading ? null : isHasError ? 'warning' : 'success'"
- ></el-progress>
- </el-collapse-item>
- </el-collapse>
- </div>
- <Modal
- :show="modalStatusTip"
- title="警告"
- mode="tip"
- type="info"
- @close="modalClose"
- @confirm='confirmHandle'
- >
- <template #content>
- 确定关闭弹框
- </template>
- <template #handle>
- <Button @click="modalClose" type="default">取消</Button>
- <Button @click="confirmHandle" type="error">确定</Button>
- </template>
- </Modal>
- </div>
- </template>
- <script>
- import { mapState, mapMutations } from 'vuex'
- import { PROGRESS_BG_COLOR } from './constant'
- import FileController from '@/controller/fileController'
- import { logicConfig } from "@/logicConfig";
- export default {
- components: {
- },
- data() {
- return {
- activeNames: '1',
- modalStatusTip: false, //确认框
- uploading: false,
- percentage: 0, //进度比例
- PROGRESS_BG_COLOR,
- synced: 0,
- isHasError: false, //上传是否出现错误
- // uploadSuccessList: [],
- }
- },
- watch: {
- async uploadVisible(nv, ov) {
- const that = this;
- this.synced = 0
- const successList = [];
- if (nv) {
- this.uploading = true
- const res = await FileController.uploadFiles({
- uploadProgressCall(_obj) {
- console.log("uploadProgressCall", _obj);
- },
- oneUploadedCall(_obj) {
- that.synced += 1
- that.percentage = (that.synced / that.fileList?.length) * 100;
- successList.push(_obj)
-
- },
- files: that.fileList
- });
- if(res.result === logicConfig.resultObj.success) {
- this.updata({successList})
- }
- this.uploading = false;
-
-
- }
- }
- },
- computed: {
- ...mapState('uploadFile', ['uploadVisible', 'fileList', "successList"])
- },
- mounted() {
-
- // setInterval(() => {
- // if (this.percentage < 99.9) {
- // this.percentage += 0.1
- // console.log(this.percentage)
- // }
- // }, 20);
-
- },
- methods: {
- ...mapMutations('uploadFile', ['updata']),
- onprogress(param) {
- console.log({param})
- },
- onuploaded(param) {
- console.log({param})
- },
- cancelUpload() {
- this.modalStatusTip = true;
- },
- confirmHandle() {
- this.modalStatusTip = false;
- this.updata({'uploadVisible': false, 'fileList': []});
- this.uploading = false;
- this.percentage = 0;
- this.synced = 0;
- this.uploadSuccessList = [];
- },
- modalClose() {
- this.modalStatusTip = false;
- },
- },
- }
- </script>
- <style scoped lang='less'>
- .uploadWarp {
- position: fixed;
- right: 64px;
- z-index: 99;
- top: 75%;
- width: 420px;
- transition: height 0.6s ease;
- box-shadow: 0px 0px 6px #aaa;
- & /deep/ .el-collapse-item__header {
- padding: 16px;
- border-bottom: 1px solid #EBEEF5;
- }
- & /deep/ .el-collapse-item__content {
- padding: 25px 16px;
- }
- & /deep/ .el-collapse-item__arrow {
- position: relative;
- right: 20px
- }
- & /deep/ .el-icon-close {
- position: absolute;
- right: 20px;
- top: 16px
- }
- .full-progress {
- position: absolute;
- top: -1px;
- left: 0;
- height: 47px;
- opacity: 0.2;
- transition: width 0.6s ease;
- }
- .smallProgess {
- position: absolute;
- left: 0;
- width: 100%;
- top: 46px;
- // & /deep/ .el-progress-bar__inner {
- // transition: none;
- // }
- }
- .tip {
- display: flex;
- justify-content: space-between;
- padding-bottom: 8px;
- }
- }
- </style>
|