Skip to content

M
mes-ui
Commit 7455d88e authored by renjintao's avatar renjintao
Browse files
Options

upload 增加进度条

parent 47f073b6
Hide whitespace changes
Inline Side-by-side
Showing with 112 additions and 9 deletions
components/page/files.vue
View file @ 7455d88e
......@@ -13,6 +13,7 @@
:on-format-error="onFormatError"
multiple
:style="style"
:on-progress="onProgress"
>
<div style="padding: 20px 0;text-align:center" v-if="cloudIco">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
......@@ -20,6 +21,7 @@
</div>
<Button icon="ios-cloud-upload-outline" v-if="!cloudIco">上传文件</Button>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
<Tag
v-for="(item,index) in nameList"
:key="index"
......@@ -47,7 +49,9 @@ export default {
hbaseFileListNew: [],
formatList: ['png', 'jpg', 'gif'],
postUrl: '',
style: ''
style: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -75,11 +79,17 @@ export default {
}
},
methods: {
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
// change(event) {
// this.$emit('on-change', event)
// },
//上传成功文件
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -89,6 +99,11 @@ export default {
objImag.id = file.response.data.id
filesList.push(objImag)
this.nameList = this.nameList.concat(filesList)
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
} else {
this.$Message.error('上传失败，请重新上传!')
}
......
components/page/imgUploadFile.vue
View file @ 7455d88e
......@@ -22,9 +22,11 @@
:on-format-error="onFormatError"
:show-upload-list="false"
:files="files"
:on-progress="onProgress"
>
<Button type="primary" icon="ios-cloud-upload-outline">本地上传</Button>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
</Col>
</Row>
</template>
......@@ -86,7 +88,9 @@ export default {
'&' +
this.parms,
formatList: ['png', 'jpg', 'gif'],
newName: ''
newName: '',
per: 0,
vshowPro: false
}
},
created() {
......@@ -256,11 +260,17 @@ export default {
this.isCancas = true
this.isphoto = false
},
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
// change(event) {
// this.$emit('on-change', event.target.value)
// },
//上传成功文件
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -271,6 +281,11 @@ export default {
this.fileUrlPath = this.downUrl + objImag.filePath
this.newName = file.response.data.fileName
this.$emit('on-change', JSON.stringify(filesList))
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
} else {
this.$Message.error('上传失败，请重新上传!')
}
......
components/page/inputFile.vue
View file @ 7455d88e
......@@ -14,9 +14,11 @@
:on-format-error="onFormatError"
:show-upload-list="false"
:files="files"
:on-progress="onProgress"
>
<Button icon="ios-cloud-upload-outline">上传文件</Button>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
</div>
</template>
<script>
......@@ -40,7 +42,9 @@ export default {
'&' +
this.parms,
formatList: ['png', 'jpg', 'gif'],
newName: ''
newName: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -60,11 +64,17 @@ export default {
}
},
methods: {
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
// change(event) {
// this.$emit('on-change', event.target.value)
// },
//上传成功文件
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -74,6 +84,11 @@ export default {
filesList.push(objImag)
this.newName = file.response.data.fileName
this.$emit('on-change', JSON.stringify(filesList))
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
} else {
this.$Message.error('上传失败，请重新上传!')
}
......
pages/processDesign/Process/detailfiles.vue
View file @ 7455d88e
......@@ -12,12 +12,14 @@
:on-exceeded-size="onExceededSize"
:on-format-error="onFormatError"
:action="postUrl"
:on-progress="onProgress"
>
<div style="padding: 20px 0;text-align:center">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>将文件拖到此处，或点击上传</p>
</div>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
<Tag
v-for="(item,index) in nameList"
:key="index"
......@@ -62,7 +64,9 @@ export default {
'jpg',
'gif'
],
postUrl: ''
postUrl: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -72,7 +76,13 @@ export default {
this.intFiles()
},
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -82,6 +92,11 @@ export default {
objImag.id = file.response.data.id
filesList.push(objImag)
this.nameList = this.nameList.concat(filesList)
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
var url = `${designUrl}/routingfile/createorupdate`
var dataValidate = {
......
pages/processDesign/Process/processfile.vue
View file @ 7455d88e
......@@ -12,12 +12,14 @@
:on-exceeded-size="onExceededSize"
:on-format-error="onFormatError"
:action="postUrl"
:on-progress="onProgress"
>
<div style="padding: 20px 0;text-align:center">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>将文件拖到此处，或点击上传</p>
</div>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
<Tag
v-for="(item,index) in nameList"
:key="index"
......@@ -53,7 +55,9 @@ export default {
'jpg',
'gif'
],
postUrl: ''
postUrl: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -66,8 +70,13 @@ export default {
},
methods: {
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -77,6 +86,11 @@ export default {
objImag.id = file.response.data.id
filesList.push(objImag)
this.nameList = this.nameList.concat(filesList)
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
} else {
this.$Message.error('上传失败，请重新上传!')
}
......
pages/processManage/Process/detailfiles.vue
View file @ 7455d88e
......@@ -12,12 +12,14 @@
:on-exceeded-size="onExceededSize"
:on-format-error="onFormatError"
:action="postUrl"
:on-progress="onProgress"
>
<div style="padding: 20px 0;text-align:center">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>将文件拖到此处，或点击上传</p>
</div>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
<Tag
v-for="(item,index) in nameList"
:key="index"
......@@ -62,7 +64,9 @@ export default {
'jpg',
'gif'
],
postUrl: ''
postUrl: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -72,7 +76,13 @@ export default {
this.intFiles()
},
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -82,6 +92,11 @@ export default {
objImag.id = file.response.data.id
filesList.push(objImag)
this.nameList = this.nameList.concat(filesList)
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
var url = `${designUrl}/routingfile/createorupdate`
var dataValidate = {
......
pages/processManage/Process/processfile.vue
View file @ 7455d88e
......@@ -12,12 +12,14 @@
:on-exceeded-size="onExceededSize"
:on-format-error="onFormatError"
:action="postUrl"
:on-progress="onProgress"
>
<div style="padding: 20px 0;text-align:center">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>将文件拖到此处，或点击上传</p>
</div>
</Upload>
<Progress :percent="per" :stroke-width="5" v-show="vshowPro"/>
<Tag
v-for="(item,index) in nameList"
:key="index"
......@@ -53,7 +55,9 @@ export default {
'jpg',
'gif'
],
postUrl: ''
postUrl: '',
per: 0,
vshowPro: false
}
},
created() {},
......@@ -66,8 +70,13 @@ export default {
},
methods: {
onProgress(event, file, fileList) {
this.per = 0
this.vshowPro = true
},
uploadSuccess(response, file, fileList) {
this.per = 60
this.vshowPro = true
const hbaseFileList = []
const filesList = []
if (file.response.status == 0) {
......@@ -77,6 +86,11 @@ export default {
objImag.id = file.response.data.id
filesList.push(objImag)
this.nameList = this.nameList.concat(filesList)
this.per = 100
setTimeout(() => {
this.per = 0
this.vshowPro = false
}, 2000)
} else {
this.$Message.error('上传失败，请重新上传!')
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment