wuye / webui

Blame view

src/components/oa/uploadFile.vue 3.28 KB
Edit Raw Normal View History
18300670   wuxw   工作单功能处理中 
1
2
 
  <template>
    <div class="upload-file-container">
9d019fa6   wuxw   测试OA相关流程 
3
4
5
6
7
 
      <div class="progress" v-if="uploadFileInfo.progress > 0">
        <el-progress 
          :percentage="uploadFileInfo.progress" 
          :stroke-width="2" 
          :show-text="false" />
18300670   wuxw   工作单功能处理中 
8
 
      </div>
9d019fa6   wuxw   测试OA相关流程 
9
10
11
12
13
14
15
16
 
      <div class="file-info" v-if="uploadFileInfo.progress > 0">
        <span>{{ uploadFileInfo.fileName }}</span>
      </div>
      <div class="upload-btn">
        <el-button 
          type="primary" 
          @click="_uploadFile">
          {{ $t('uploadFile.uploadBtn') }}
18300670   wuxw   工作单功能处理中 
17
 
        </el-button>
9d019fa6   wuxw   测试OA相关流程 
18
19
20
21
22
23
24
 
        <input 
          type="file" 
          class="file-input" 
          accept="*" 
          id="uploadFile" 
          hidden 
          @change="_chooseFile($event)" />
18300670   wuxw   工作单功能处理中 
25
26
27
28
29
 
      </div>
    </div>
  </template>
  
  <script>
9d019fa6   wuxw   测试OA相关流程 
30
 
  import { uploadVedio } from '@/api/oa/newOaWorkflowFormEditApi'
18300670   wuxw   工作单功能处理中 
31
32
33
34
35
36
 
  
  export default {
    name: 'UploadFile',
    props: {
      callBackListener: {
        type: String,
9d019fa6   wuxw   测试OA相关流程 
37
 
        required: true
18300670   wuxw   工作单功能处理中 
38
39
40
 
      },
      callBackFunction: {
        type: String,
9d019fa6   wuxw   测试OA相关流程 
41
 
        required: true
18300670   wuxw   工作单功能处理中 
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
      }
    },
    data() {
      return {
        uploadFileInfo: {
          vedio: {},
          fileName: '',
          realFileName: '',
          progress: 0
        }
      }
    },
    watch: {
      uploadFileInfo: {
        deep: true,
        handler(newVal) {
          this.$emit(this.callBackListener, this.callBackFunction, newVal)
        }
      }
    },
9d019fa6   wuxw   测试OA相关流程 
62
63
64
65
 
    created() {
      this.$on('clearVedio', this.clearVedio)
      this.$on('notifyVedio', this.notifyVedio)
    },
18300670   wuxw   工作单功能处理中 
66
 
    methods: {
18300670   wuxw   工作单功能处理中 
67
 
      _uploadFile() {
9d019fa6   wuxw   测试OA相关流程 
68
 
        document.getElementById('uploadFile').click()
18300670   wuxw   工作单功能处理中 
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
      },
      _chooseFile(event) {
        const files = event.target.files
        if (files && files.length > 0) {
          const file = files[0]
          if (file.size > 1024 * 1024 * 20) {
            this.$message.error(this.$t('uploadFile.sizeLimit'))
            return false
          }
          this.uploadFileInfo.fileName = file.name
          this._doUploadFile(file)
        }
      },
      async _doUploadFile(file) {
        const formData = new FormData()
        formData.append('uploadFile', file)
  
        try {
9d019fa6   wuxw   测试OA相关流程 
87
88
 
          const res = await uploadVedio(formData, {
            onUploadProgress: progressEvent => {
18300670   wuxw   工作单功能处理中 
89
90
91
92
93
94
95
96
 
              const rate = progressEvent.loaded / progressEvent.total
              if (rate < 0.9) {
                this.uploadFileInfo.progress = Math.floor(rate * 100)
              }
            }
          })
  
          this.uploadFileInfo.progress = 100
9d019fa6   wuxw   测试OA相关流程 
97
 
          this.$message.success(this.$t('uploadFile.uploadSuccess'))
18300670   wuxw   工作单功能处理中 
98
99
100
101
 
          this.uploadFileInfo.fileName = res.fileName
          this.uploadFileInfo.realFileName = res.realFileName
          this.$emit(this.callBackListener, this.callBackFunction, res)
        } catch (error) {
9d019fa6   wuxw   测试OA相关流程 
102
103
104
105
106
107
108
109
110
111
 
          console.error('上传文件失败:', error)
          this.$message.error(this.$t('uploadFile.uploadError'))
        }
      },
      clearVedio() {
        this.uploadFileInfo = {
          vedio: {},
          fileName: '',
          realFileName: '',
          progress: 0
18300670   wuxw   工作单功能处理中 
112
 
        }
9d019fa6   wuxw   测试OA相关流程 
113
114
115
116
117
 
      },
      notifyVedio(fileName) {
        this.uploadFileInfo.fileName = fileName
        this.uploadFileInfo.realFileName = fileName
        this.uploadFileInfo.progress = 100
18300670   wuxw   工作单功能处理中 
118
119
120
121
122
123
124
 
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .upload-file-container {
9d019fa6   wuxw   测试OA相关流程 
125
126
127
128
129
130
131
132
133
134
 
    margin-bottom: 20px;
  
    .progress {
      margin-bottom: 10px;
    }
  
    .file-info {
      margin-bottom: 10px;
      font-size: 14px;
      color: #606266;
18300670   wuxw   工作单功能处理中 
135
136
137
138
139
140
141
 
    }
  
    .file-input {
      display: none;
    }
  }
  </style>