dev^2
parent
53617f29ca
commit
30eb9e1949
2 changed files with 182 additions and 2 deletions
@ -0,0 +1,168 @@ |
|||||||
|
<template> |
||||||
|
<a-modal |
||||||
|
:title="title" |
||||||
|
width="50%" |
||||||
|
:visible="visible" |
||||||
|
:confirmLoading="confirmLoading" |
||||||
|
@ok="handleOk" |
||||||
|
@cancel="handleCancel" |
||||||
|
cancelText="关闭"> |
||||||
|
<a-alert message="请下载" type="info" show-icon style="margin-bottom: 20px;"/> |
||||||
|
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" > |
||||||
|
<!-- <a-alert message="请下载" type="info" show-icon /> --> |
||||||
|
<a-form-item label="下载标准表格"> |
||||||
|
<div class="standB"><a-button type="primary" icon="download" @click="handleDownload"/></div> |
||||||
|
<div class="standBu"> <a-alert |
||||||
|
message="必须下载标准表格,否则审核不通过" |
||||||
|
type="error" |
||||||
|
closable |
||||||
|
@close="onClose" |
||||||
|
/></div> |
||||||
|
</a-form-item> |
||||||
|
<a-form-item label="上传标准表格"> |
||||||
|
<!-- @click="showProcess" --> |
||||||
|
<a-upload |
||||||
|
:multiple="false" |
||||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
||||||
|
@change="handleChange"> |
||||||
|
<a-button type="primary" icon="upload" ></a-button> |
||||||
|
<!-- <div> |
||||||
|
<p>当前状态：{{ ModalData.status }}</p> |
||||||
|
<p>总记录数：{{ ModalData.records }}</p> |
||||||
|
<p>已上传：{{ ModalData.uploaded }}</p> |
||||||
|
<a-progress |
||||||
|
:percent="parseInt(String(ModalData.uploaded/ModalData.records*100))" |
||||||
|
title="上传进度：" |
||||||
|
status="active" |
||||||
|
:steps="ModalData.records"/> |
||||||
|
</div> --> |
||||||
|
</a-upload> |
||||||
|
</a-form-item> |
||||||
|
<a-form-model-item label="注意事项" v-if="uploadFinished"> |
||||||
|
<a-list size="small" :data-source="datas"> |
||||||
|
<a-list-item slot="renderItem" slot-scope="item,index" style="border-bottom:0px ;"> {{ index+1 }} . {{ item }}</a-list-item> |
||||||
|
</a-list> |
||||||
|
</a-form-model-item> |
||||||
|
</a-form> |
||||||
|
</a-modal> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import getAction from '@api/manage' |
||||||
|
import store from '@/store' |
||||||
|
export default { |
||||||
|
name: 'ModelTest', |
||||||
|
comments: { |
||||||
|
|
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
title: '导入xxxxxx', |
||||||
|
visible: false, |
||||||
|
model: {}, |
||||||
|
// 注意事项默认值 |
||||||
|
uploadFinished: false, |
||||||
|
ModalData: { |
||||||
|
uploaded: '0', |
||||||
|
isVisible: 'false', |
||||||
|
records: '0', |
||||||
|
status: '判断文件结构' |
||||||
|
}, |
||||||
|
confirmLoading: false, |
||||||
|
form: this.$form.createForm(this), |
||||||
|
url: |
||||||
|
{ |
||||||
|
downfile: '' |
||||||
|
}, |
||||||
|
datas: [ |
||||||
|
'Racing car sprays burning fuel into crowd.', |
||||||
|
'Japanese princess to wed commoner.', |
||||||
|
'Australian walks 100km after outback crash.', |
||||||
|
'Man charged over missing wedding girl.', |
||||||
|
'Los Angeles battles huge wildfires.' |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 上传 |
||||||
|
// 显示进度 |
||||||
|
showProcess() { |
||||||
|
let userId = store.getters.userInfo.id |
||||||
|
let baseUrl = window._CONFIG['domianURL'] |
||||||
|
baseUrl = baseUrl.replace('http', 'ws') |
||||||
|
let ws = new WebSocket(`${baseUrl}/uploadProcess/${userId}`) |
||||||
|
ws.onmessage = (e) => { |
||||||
|
this.ModalData = JSON.parse(e.data) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleChange(info) { |
||||||
|
if (info.file.status !== 'uploading') { |
||||||
|
console.log(info.file, info.fileList) |
||||||
|
} |
||||||
|
if (info.file.status === 'done') { |
||||||
|
this.$message.success(`${info.file.name} file uploaded successfully`) |
||||||
|
this.handleUploadFinished() |
||||||
|
} else if (info.file.status === 'error') { |
||||||
|
this.$message.error(`${info.file.name} file upload failed.`) |
||||||
|
} |
||||||
|
}, |
||||||
|
// 在文件上传结束后调用该方法使注意事项出现 |
||||||
|
handleUploadFinished() { |
||||||
|
this.uploadFinished = true |
||||||
|
}, |
||||||
|
// 下载标准文档 |
||||||
|
handleDownload() { |
||||||
|
console.log(1111) |
||||||
|
// getAction(this.url.downfile).then(response => { |
||||||
|
// const url = window.URL.createObjectURL(new Blob([response.data])) |
||||||
|
// const link = document.createElement('a') |
||||||
|
// link.href = url |
||||||
|
// link.setAttribute('download', 'your-document.pdf') |
||||||
|
// document.body.appendChild(link) |
||||||
|
// link.click() |
||||||
|
// }) |
||||||
|
// .catch(error => { |
||||||
|
// console.error(error) |
||||||
|
// }) |
||||||
|
}, |
||||||
|
add() { |
||||||
|
|
||||||
|
}, |
||||||
|
edit(record) { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
|
||||||
|
close() { |
||||||
|
this.$emit('close') |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
handleCancel() { |
||||||
|
this.close() |
||||||
|
}, |
||||||
|
|
||||||
|
handleOk() { |
||||||
|
|
||||||
|
}, |
||||||
|
// 关闭提示标签 |
||||||
|
onClose(e) { |
||||||
|
console.log(e, 'I was closed.') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.standB{ |
||||||
|
width: 15%; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
.standBu{ |
||||||
|
width: 85%; |
||||||
|
float: right; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue