index.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. <template>
  2. <div>
  3. <div v-if='uploadVisible' class="uploadWarp" :style="{height: (!!activeNames ? 133 : 50) + 'px' }">
  4. <el-collapse v-model="activeNames" :accordion='true' style="position: absolute; width: 100%">
  5. <div class="full-progress" :style="{width: percentage + '%', backgroundColor: !!activeNames ? '#fff' : uploading ?
  6. PROGRESS_BG_COLOR.uplaoding : isHasError ?
  7. PROGRESS_BG_COLOR.error : PROGRESS_BG_COLOR.success }"></div>
  8. <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>
  9. <i class="el-icon-close" @click="cancelUpload"></i>
  10. <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
  11. <div class="tip">
  12. <span>已成功同步{{synced}}个文件,共{{fileList.length}}个文件</span>
  13. <Icon v-if="!uploading" class="icon" :name="'tagCompleted'" :color="isHasError ? PROGRESS_BG_COLOR.failed : PROGRESS_BG_COLOR.success" />
  14. </div>
  15. <el-progress
  16. :text-inside="true"
  17. :show-text='false'
  18. :stroke-width="3"
  19. :percentage="percentage"
  20. :status="uploading ? null : isHasError ? 'warning' : 'success'"
  21. ></el-progress>
  22. </el-collapse-item>
  23. </el-collapse>
  24. </div>
  25. <Modal
  26. :show="modalStatusTip"
  27. title="警告"
  28. mode="tip"
  29. type="info"
  30. @close="modalClose"
  31. @confirm='confirmHandle'
  32. >
  33. <template #content>
  34. 确定关闭弹框
  35. </template>
  36. <template #handle>
  37. <Button @click="modalClose" type="default">取消</Button>
  38. <Button @click="confirmHandle" type="error">确定</Button>
  39. </template>
  40. </Modal>
  41. </div>
  42. </template>
  43. <script>
  44. import { mapState, mapMutations } from 'vuex'
  45. import { PROGRESS_BG_COLOR } from './constant'
  46. import FileController from '@/controller/fileController'
  47. import { logicConfig } from "@/logicConfig";
  48. export default {
  49. components: {
  50. },
  51. data() {
  52. return {
  53. activeNames: '1',
  54. modalStatusTip: false, //确认框
  55. uploading: false,
  56. percentage: 0, //进度比例
  57. PROGRESS_BG_COLOR,
  58. synced: 0,
  59. isHasError: false, //上传是否出现错误
  60. // uploadSuccessList: [],
  61. }
  62. },
  63. watch: {
  64. async uploadVisible(nv, ov) {
  65. const that = this;
  66. this.synced = 0
  67. const successList = [];
  68. if (nv) {
  69. this.uploading = true
  70. const res = await FileController.uploadFiles({
  71. uploadProgressCall(_obj) {
  72. console.log("uploadProgressCall", _obj);
  73. },
  74. oneUploadedCall(_obj) {
  75. that.synced += 1
  76. that.percentage = (that.synced / that.fileList?.length) * 100;
  77. successList.push(_obj)
  78. },
  79. files: that.fileList
  80. });
  81. if(res.result === logicConfig.resultObj.success) {
  82. this.updata({successList})
  83. }
  84. this.uploading = false;
  85. }
  86. }
  87. },
  88. computed: {
  89. ...mapState('uploadFile', ['uploadVisible', 'fileList', "successList"])
  90. },
  91. mounted() {
  92. // setInterval(() => {
  93. // if (this.percentage < 99.9) {
  94. // this.percentage += 0.1
  95. // console.log(this.percentage)
  96. // }
  97. // }, 20);
  98. },
  99. methods: {
  100. ...mapMutations('uploadFile', ['updata']),
  101. onprogress(param) {
  102. console.log({param})
  103. },
  104. onuploaded(param) {
  105. console.log({param})
  106. },
  107. cancelUpload() {
  108. this.modalStatusTip = true;
  109. },
  110. confirmHandle() {
  111. this.modalStatusTip = false;
  112. this.updata({'uploadVisible': false, 'fileList': []});
  113. this.uploading = false;
  114. this.percentage = 0;
  115. this.synced = 0;
  116. this.uploadSuccessList = [];
  117. },
  118. modalClose() {
  119. this.modalStatusTip = false;
  120. },
  121. },
  122. }
  123. </script>
  124. <style scoped lang='less'>
  125. .uploadWarp {
  126. position: fixed;
  127. right: 64px;
  128. z-index: 99;
  129. top: 75%;
  130. width: 420px;
  131. transition: height 0.6s ease;
  132. box-shadow: 0px 0px 6px #aaa;
  133. & /deep/ .el-collapse-item__header {
  134. padding: 16px;
  135. border-bottom: 1px solid #EBEEF5;
  136. }
  137. & /deep/ .el-collapse-item__content {
  138. padding: 25px 16px;
  139. }
  140. & /deep/ .el-collapse-item__arrow {
  141. position: relative;
  142. right: 20px
  143. }
  144. & /deep/ .el-icon-close {
  145. position: absolute;
  146. right: 20px;
  147. top: 16px
  148. }
  149. .full-progress {
  150. position: absolute;
  151. top: -1px;
  152. left: 0;
  153. height: 47px;
  154. opacity: 0.2;
  155. transition: width 0.6s ease;
  156. }
  157. .smallProgess {
  158. position: absolute;
  159. left: 0;
  160. width: 100%;
  161. top: 46px;
  162. // & /deep/ .el-progress-bar__inner {
  163. // transition: none;
  164. // }
  165. }
  166. .tip {
  167. display: flex;
  168. justify-content: space-between;
  169. padding-bottom: 8px;
  170. }
  171. }
  172. </style>