pengjun
2 years ago
6 changed files with 322 additions and 35 deletions
-
2src/components/doctorCheck/CheckItemList.vue
-
105src/components/doctorCheck/CheckPicture.vue
-
217src/components/doctorCheck/CheckPictureUpload.vue
-
18src/components/doctorCheck/CheckSumSug.vue
-
2src/utlis/mm.js
-
13src/views/customerOrg/patientRegisterImport.vue
@ -0,0 +1,217 @@ |
|||
<template> |
|||
<div> |
|||
<div> |
|||
<el-upload |
|||
action="#" multiple :file-list="fileList" accept=".jpg,.png,.bmp,.gif" |
|||
list-type="picture-card" :on-change="onChange" |
|||
:auto-upload="false"> |
|||
<i slot="default" class="el-icon-plus"></i> |
|||
<div slot="file" slot-scope="{file}"> |
|||
<img |
|||
class="el-upload-list__item-thumbnail" |
|||
:src="file.url" :alt="file.name" |
|||
> |
|||
<span class="el-upload-list__item-actions" > |
|||
<span |
|||
class="el-upload-list__item-preview" |
|||
@click="handlePictureCardPreview(file)" |
|||
> |
|||
<i class="el-icon-zoom-in"></i> |
|||
</span> |
|||
<!-- 不需再下载 |
|||
<span |
|||
v-if="!disabled" |
|||
class="el-upload-list__item-delete" |
|||
@click="handleDownload(file)" |
|||
> |
|||
<i class="el-icon-download"></i> |
|||
</span> |
|||
--> |
|||
<span |
|||
class="el-upload-list__item-delete" |
|||
@click="handleRemove(file)" |
|||
> |
|||
<i class="el-icon-delete"></i> |
|||
</span> |
|||
</span> |
|||
</div> |
|||
</el-upload> |
|||
</div> |
|||
<div style="display: flex;margin-top: 10px;justify-content:space-between;"> |
|||
<div></div> |
|||
<div> |
|||
<el-button type="primary" class="btnClass" @click="btnUpload">上传</el-button> |
|||
</div> |
|||
</div> |
|||
<el-dialog :visible.sync="dialogVisible" :append-to-body="true"> |
|||
<img width="100%" :src="dialogImageUrl" alt=""> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import moment from "moment"; |
|||
import { mapState } from "vuex"; |
|||
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|||
import { arrayExistObj, deepCopy } from '@/utlis/proFunc'; |
|||
|
|||
|
|||
export default { |
|||
components: {}, |
|||
props:["registerCheckId","uploadSeq","closePicUpload"], |
|||
data() { |
|||
return { |
|||
fileList:[], |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
disabled: false |
|||
}; |
|||
}, |
|||
|
|||
created() {}, |
|||
|
|||
//挂载完成 |
|||
mounted() {}, |
|||
|
|||
computed: { |
|||
...mapState(["dict", "doctorCheck","patientRegister", "customerOrg"]), |
|||
lmoment(date, forMat) { |
|||
return moment(new Date(date)).format(forMat); |
|||
}, |
|||
}, |
|||
methods: { |
|||
|
|||
handleRemove(file) { |
|||
//console.log('file,this.fileList',file,this.fileList); |
|||
let lfind = arrayExistObj(this.fileList,'uid',file.uid) |
|||
if(lfind > -1) this.fileList.splice(lfind,1) |
|||
}, |
|||
|
|||
handlePictureCardPreview(file) { |
|||
this.dialogImageUrl = file.url; |
|||
this.dialogVisible = true; |
|||
}, |
|||
|
|||
handleDownload(file) { |
|||
console.log(file); |
|||
}, |
|||
|
|||
onChange(file, fileList){ |
|||
this.fileList = fileList; |
|||
// console.log('file, fileList',file, fileList); |
|||
}, |
|||
|
|||
btnUpload(){ |
|||
console.log('that.registerCheckId',this.registerCheckId) |
|||
if(!(this.fileList && typeof this.fileList == 'object' && this.fileList.length > 0)){ |
|||
this.$message.warning("请选择要上传的文件！") |
|||
return |
|||
} |
|||
let checkSize=[] |
|||
this.fileList.forEach(e => { |
|||
if(e.size > 1024*1024*20) checkSize.push(e.name) |
|||
}); |
|||
|
|||
if(checkSize.length > 0){ |
|||
this.$message.error(`所选文件 ${JSON.stringify(checkSize)} 大于 20MB ，文件过大无法上传`) |
|||
return; |
|||
} |
|||
|
|||
|
|||
let count = 0,err=''; |
|||
const loading = this.$loading({ |
|||
lock: true, |
|||
text: "Loading", |
|||
spinner: "el-icon-loading", |
|||
background: "rgba(0, 0, 0, 0.7)", |
|||
}); |
|||
console.log('this.fileList',this.fileList) |
|||
for(let i=0;i<this.fileList.length;i++){ |
|||
if(err) break; |
|||
let file = this.fileList[i] |
|||
let reader = new FileReader(); |
|||
let that = this; |
|||
// 定义读取文件 |
|||
reader.onload = (event) => { |
|||
let data = event.target.result; |
|||
console.log('base64',data.length,data) |
|||
let body = { |
|||
registerCheckId: that.registerCheckId, |
|||
pictureBaseStrs: [data] |
|||
} |
|||
postapi('/api/app/registercheckpicture/uploadregistercheckpicturemany',body) |
|||
.then(res =>{ |
|||
if(res.code != -1){ |
|||
count++; |
|||
// console.log('count,that.fileList.length',count,that.fileList.length) |
|||
if(count == that.fileList.length){ |
|||
loading.close(); |
|||
that.$message.success("操作成功！") |
|||
that.closePicUpload() |
|||
} |
|||
}else{ |
|||
err = res.message; |
|||
loading.close(); |
|||
that.$message.error("操作失败！") |
|||
that.closePicUpload() |
|||
} |
|||
}).catch(error =>{ |
|||
err = error |
|||
loading.close(); |
|||
that.$message.error("操作失败！") |
|||
that.closePicUpload() |
|||
}); |
|||
|
|||
} |
|||
|
|||
// 错误处理 |
|||
reader.onerror = function(event) { |
|||
// 读取失败时执行的代码 |
|||
this.$message.error("文件转 base64 失败：" + event.target.error) |
|||
}; |
|||
|
|||
reader.readAsDataURL(file.raw); |
|||
// reader.readAsText(this.fileList[0].raw); |
|||
// reader.readAsBinaryString(this.fileList[0].raw); |
|||
}; |
|||
|
|||
|
|||
}, |
|||
|
|||
}, |
|||
|
|||
//监听事件 |
|||
watch: { |
|||
//体检人员切换 |
|||
"registerCheckId":{ |
|||
immediate:true, |
|||
handler(newVal, oldVal) { |
|||
console.log("watch:registerCheckId:", newVal, " oldVal :", oldVal); |
|||
// this.getCheckPictures(newVal) |
|||
} |
|||
}, |
|||
|
|||
//每次显示上传图片窗口时，清空前次所选图片 |
|||
"uploadSeq":{ |
|||
immediate:true, |
|||
handler(newVal, oldVal) { |
|||
console.log("watch:uploadSeq:", newVal, " oldVal :", oldVal); |
|||
this.fileList = [] ; |
|||
} |
|||
}, |
|||
} |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.query { |
|||
margin-left: 10px; |
|||
margin-right: 2px; |
|||
padding: 1px 1px; |
|||
} |
|||
|
|||
.btnClass{ |
|||
margin: 2px 2px 0; |
|||
height: 26px; |
|||
min-width: 40px; |
|||
padding: 5px 5px; /*原始 默认值 10px 10px */ |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue