|
|
|
@ -1,62 +1,120 @@ |
|
|
|
<template> |
|
|
|
<div style="display: flex; "> |
|
|
|
<div style="display: flex;"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<el-button type="primary" class="btnClass" @click="btnGetPic" size="small">采图</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="btnClass" |
|
|
|
@click="btnGetPic" |
|
|
|
size="small" |
|
|
|
>采图</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-button type="primary" class="btnClass" @click="btnExpPic" size="small">导图</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="btnClass" |
|
|
|
@click="btnExpPic" |
|
|
|
size="small" |
|
|
|
>导图</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<el-button type="primary" class="btnClass" @click="btnSavePic" size="small">保存</el-button> |
|
|
|
<el-button |
|
|
|
type="primary" |
|
|
|
class="btnClass" |
|
|
|
@click="btnSavePic" |
|
|
|
size="small" |
|
|
|
>保存</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div :style="`display: flex; white-space: nowrap;overflow-x: scroll;width: ${Math.floor((window.pageWidth - 200 - 110 - 45 - 4))}px;`"> |
|
|
|
<div class="demo-image__preview" v-for="(item,index) in checkPictures" :key="item.id" style="display: inline-block;padding: 0 0 0 2px;" |
|
|
|
> |
|
|
|
<div style="position: relative;font-size:24px;margin: -6px 0 0 55px;z-index:2;"> |
|
|
|
<el-tooltip content="删除该图" placement="bottom" effect="light"> |
|
|
|
<i class="el-icon-close" @click="btnDelImage(index)" |
|
|
|
style="color: red;cursor:pointer;"></i> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
<div style="margin-top: -25px;"> |
|
|
|
<el-image |
|
|
|
style="width: 80px; height: 80px;border-radius:5px;" |
|
|
|
:src="item.pictureFilename.indexOf('http') > -1 ? item.pictureFilename:apiUrl+item.pictureFilename" |
|
|
|
:preview-src-list="[item.pictureFilename.indexOf('http') > -1 ? item.pictureFilename:apiUrl+item.pictureFilename]"> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
<div style="display: flex;"> |
|
|
|
<div style="margin: -6px 0 0 1px;"> |
|
|
|
<el-checkbox v-model="item.isPrintTrans"></el-checkbox> |
|
|
|
</div> |
|
|
|
<div style="font-size:12px;margin: -2px 0 0 1px;">打印</div> |
|
|
|
<div style="font-size:15px;margin: -5px 0 0 2px;"> |
|
|
|
<el-tooltip content="保存后，图片将按序号从小到大排序" placement="bottom" effect="light"> |
|
|
|
<input placeholder="排序" v-model="item.displayOrder" @onkeyup="validateInteger(e,index)" |
|
|
|
style="width: 35px" /> |
|
|
|
<!-- --> |
|
|
|
<div :style="`overflow-x: scroll;width:${Math.floor((window.pageWidth - 200 - 110 - 45 - 4))}px;`"> |
|
|
|
<div style="display: flex;"> |
|
|
|
<div |
|
|
|
class="demo-image__preview" |
|
|
|
v-for="(item, index) in checkPictures" |
|
|
|
:key="item.id" |
|
|
|
style="display: inline-block; padding: 0 0 0 2px" |
|
|
|
> |
|
|
|
<div |
|
|
|
style=" |
|
|
|
position: relative; |
|
|
|
font-size: 24px; |
|
|
|
margin: -6px 0 0 55px; |
|
|
|
z-index: 2; |
|
|
|
" |
|
|
|
> |
|
|
|
<el-tooltip content="删除该图" placement="bottom" effect="light"> |
|
|
|
<i |
|
|
|
class="el-icon-close" |
|
|
|
@click="btnDelImage(index)" |
|
|
|
style="color: red; cursor: pointer" |
|
|
|
></i> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
<div style="margin-top: -25px"> |
|
|
|
<el-image |
|
|
|
style="width: 80px; height: 80px; border-radius: 5px" |
|
|
|
:src=" |
|
|
|
item.pictureFilename.indexOf('http') > -1 |
|
|
|
? item.pictureFilename |
|
|
|
: apiUrl + item.pictureFilename |
|
|
|
" |
|
|
|
:preview-src-list="[ |
|
|
|
item.pictureFilename.indexOf('http') > -1 |
|
|
|
? item.pictureFilename |
|
|
|
: apiUrl + item.pictureFilename, |
|
|
|
]" |
|
|
|
> |
|
|
|
</el-image> |
|
|
|
</div> |
|
|
|
<div style="display: flex"> |
|
|
|
<div style="margin: -6px 0 0 1px"> |
|
|
|
<el-checkbox v-model="item.isPrintTrans"></el-checkbox> |
|
|
|
</div> |
|
|
|
<div style="font-size: 12px; margin: -2px 0 0 1px">打印</div> |
|
|
|
<div style="font-size: 15px; margin: -5px 0 0 2px"> |
|
|
|
<el-tooltip |
|
|
|
content="保存后，图片将按序号从小到大排序" |
|
|
|
placement="bottom" |
|
|
|
effect="light" |
|
|
|
> |
|
|
|
<input |
|
|
|
placeholder="排序" |
|
|
|
v-model="item.displayOrder" |
|
|
|
@onkeyup="validateInteger(e, index)" |
|
|
|
style="width: 30px" |
|
|
|
/> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog title="图片上传" |
|
|
|
<el-dialog |
|
|
|
title="图片上传" |
|
|
|
:visible.sync="dialogCheckPictureUpload" |
|
|
|
:close-on-click-modal="false" |
|
|
|
width="800px" @close="getCheckPictures(doctorCheck.RegisterCheckId)" |
|
|
|
> |
|
|
|
<CheckPictureUpload :registerCheckId="doctorCheck.RegisterCheckId" :uploadSeq="uploadSeq" :closePicUpload="closePicUpload"/> |
|
|
|
</el-dialog> |
|
|
|
width="800px" |
|
|
|
@close="getCheckPictures(doctorCheck.RegisterCheckId)" |
|
|
|
> |
|
|
|
<CheckPictureUpload |
|
|
|
:registerCheckId="doctorCheck.RegisterCheckId" |
|
|
|
:uploadSeq="uploadSeq" |
|
|
|
:closePicUpload="closePicUpload" |
|
|
|
/> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import moment from "moment"; |
|
|
|
import { mapState } from "vuex"; |
|
|
|
import { getapi, postapi, putapi, deletapi } from "@/api/api"; |
|
|
|
import { deepCopy } from '@/utlis/proFunc'; |
|
|
|
import CheckPictureUpload from './CheckPictureUpload.vue' |
|
|
|
import server from "../../utlis/mm" |
|
|
|
import { deepCopy } from "@/utlis/proFunc"; |
|
|
|
import CheckPictureUpload from "./CheckPictureUpload.vue"; |
|
|
|
import server from "../../utlis/mm"; |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@ -64,24 +122,29 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
checkPictures:[{ |
|
|
|
id:'1', |
|
|
|
registerCheckId:'registerCheckId', |
|
|
|
isPrint:'Y', |
|
|
|
isPrintTrans:true, |
|
|
|
pictureFilename:'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg' |
|
|
|
},{ |
|
|
|
id:'2', |
|
|
|
registerCheckId:'registerCheckId', |
|
|
|
isPrint:'Y', |
|
|
|
isPrintTrans:true, |
|
|
|
pictureFilename:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' |
|
|
|
}], |
|
|
|
|
|
|
|
apiUrl:server.apiurl, |
|
|
|
checkPictures: [ |
|
|
|
{ |
|
|
|
id: "1", |
|
|
|
registerCheckId: "registerCheckId", |
|
|
|
isPrint: "Y", |
|
|
|
isPrintTrans: true, |
|
|
|
pictureFilename: |
|
|
|
"https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: "2", |
|
|
|
registerCheckId: "registerCheckId", |
|
|
|
isPrint: "Y", |
|
|
|
isPrintTrans: true, |
|
|
|
pictureFilename: |
|
|
|
"https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg", |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
apiUrl: server.apiurl, |
|
|
|
//图片上传 |
|
|
|
dialogCheckPictureUpload:false, |
|
|
|
uploadSeq:0, //第几次点图片上传，每点一次清空前次所选图片 |
|
|
|
dialogCheckPictureUpload: false, |
|
|
|
uploadSeq: 0, //第几次点图片上传，每点一次清空前次所选图片 |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
@ -91,17 +154,23 @@ export default { |
|
|
|
mounted() {}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
...mapState(["window", "dict", "doctorCheck","patientRegister", "customerOrg"]), |
|
|
|
...mapState([ |
|
|
|
"window", |
|
|
|
"dict", |
|
|
|
"doctorCheck", |
|
|
|
"patientRegister", |
|
|
|
"customerOrg", |
|
|
|
]), |
|
|
|
lmoment(date, forMat) { |
|
|
|
return moment(new Date(date)).format(forMat); |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 根据checkId获取图片列表信息 |
|
|
|
getCheckPictures(registerCheckId){ |
|
|
|
this.checkPictures = [] |
|
|
|
if(!registerCheckId){ |
|
|
|
return |
|
|
|
getCheckPictures(registerCheckId) { |
|
|
|
this.checkPictures = []; |
|
|
|
if (!registerCheckId) { |
|
|
|
return; |
|
|
|
} |
|
|
|
// { |
|
|
|
// "registerCheckId": "3a0f6a3c-88a5-d5f7-d59b-ef3b3807490b", |
|
|
|
@ -116,46 +185,52 @@ export default { |
|
|
|
// "creatorId": "3a0c4180-107c-0c89-b25b-0bd34666dcec", |
|
|
|
// "id": "3a0f6a3c-88a5-d5f7-d59b-ef3b38074901" |
|
|
|
// } |
|
|
|
getapi(`/api/app/registercheckpicture/getregistercheckpictureinregistercheckid?RegisterCheckId=${registerCheckId}`) |
|
|
|
.then(res =>{ |
|
|
|
if(res.code != -1){ |
|
|
|
res.data.forEach(e => { |
|
|
|
this.checkPictures.push(Object.assign({isPrintTrans:e.isPrint == 'Y' ? true:false},e)) |
|
|
|
getapi( |
|
|
|
`/api/app/registercheckpicture/getregistercheckpictureinregistercheckid?RegisterCheckId=${registerCheckId}` |
|
|
|
).then((res) => { |
|
|
|
if (res.code != -1) { |
|
|
|
res.data.forEach((e) => { |
|
|
|
this.checkPictures.push( |
|
|
|
Object.assign( |
|
|
|
{ isPrintTrans: e.isPrint == "Y" ? true : false }, |
|
|
|
e |
|
|
|
) |
|
|
|
); |
|
|
|
}); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
btnGetPic(){ |
|
|
|
if(!this.doctorCheck.RegisterCheckId){ |
|
|
|
this.$message.warning("未选中组合项目！") |
|
|
|
return |
|
|
|
btnGetPic() { |
|
|
|
if (!this.doctorCheck.RegisterCheckId) { |
|
|
|
this.$message.warning("未选中组合项目！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
console.log('采图，开发中……') |
|
|
|
console.log("采图，开发中……"); |
|
|
|
}, |
|
|
|
|
|
|
|
//导图（上传图片） |
|
|
|
btnExpPic(){ |
|
|
|
if(!this.doctorCheck.RegisterCheckId){ |
|
|
|
this.$message.warning("未选中组合项目！") |
|
|
|
return |
|
|
|
btnExpPic() { |
|
|
|
if (!this.doctorCheck.RegisterCheckId) { |
|
|
|
this.$message.warning("未选中组合项目！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.uploadSeq++; |
|
|
|
this.dialogCheckPictureUpload = true; |
|
|
|
}, |
|
|
|
|
|
|
|
//关闭上传图片窗口 |
|
|
|
closePicUpload(){ |
|
|
|
closePicUpload() { |
|
|
|
this.dialogCheckPictureUpload = false; |
|
|
|
}, |
|
|
|
|
|
|
|
btnSavePic(){ |
|
|
|
if(!this.doctorCheck.RegisterCheckId){ |
|
|
|
this.$message.warning("未选中组合项目！") |
|
|
|
return |
|
|
|
btnSavePic() { |
|
|
|
if (!this.doctorCheck.RegisterCheckId) { |
|
|
|
this.$message.warning("未选中组合项目！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let body = [] |
|
|
|
let body = []; |
|
|
|
// [ |
|
|
|
// { |
|
|
|
// "registerCheckPictureId": "3fa85f64-5717-4562-b3fc-2c963f66afa6", // 新增无需传此值 |
|
|
|
@ -165,98 +240,107 @@ export default { |
|
|
|
// "displayOrder": 0 |
|
|
|
// } |
|
|
|
// ] |
|
|
|
if(this.checkPictures.length == 0){ |
|
|
|
this.$message.warning("没有可保存的图片数据！") |
|
|
|
return |
|
|
|
if (this.checkPictures.length == 0) { |
|
|
|
this.$message.warning("没有可保存的图片数据！"); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let checkPictures = deepCopy(this.checkPictures) |
|
|
|
checkPictures.sort((a,b) =>{ |
|
|
|
let seq1 = 0 |
|
|
|
let seq2 = 0 |
|
|
|
let checkPictures = deepCopy(this.checkPictures); |
|
|
|
checkPictures.sort((a, b) => { |
|
|
|
let seq1 = 0; |
|
|
|
let seq2 = 0; |
|
|
|
try { |
|
|
|
seq1 = parseInt(a.displayOrder) |
|
|
|
seq1 = parseInt(a.displayOrder); |
|
|
|
} catch (error) { |
|
|
|
seq1 = 0 |
|
|
|
seq1 = 0; |
|
|
|
} |
|
|
|
try { |
|
|
|
seq2 = parseInt(b.displayOrder) |
|
|
|
seq2 = parseInt(b.displayOrder); |
|
|
|
} catch (error) { |
|
|
|
seq2 = 0 |
|
|
|
seq2 = 0; |
|
|
|
} |
|
|
|
return seq1 - seq2 |
|
|
|
}) |
|
|
|
return seq1 - seq2; |
|
|
|
}); |
|
|
|
|
|
|
|
checkPictures.forEach(e => { |
|
|
|
checkPictures.forEach((e) => { |
|
|
|
let item = { |
|
|
|
registerCheckId:e.registerCheckId, |
|
|
|
pictureFilename:e.pictureFilename |
|
|
|
registerCheckId: e.registerCheckId, |
|
|
|
pictureFilename: e.pictureFilename, |
|
|
|
}; |
|
|
|
if (e.id) item.registerCheckPictureId = e.id; |
|
|
|
if (e.isPrintTrans) { |
|
|
|
item.isPrint = "Y"; |
|
|
|
} else { |
|
|
|
item.isPrint = "N"; |
|
|
|
} |
|
|
|
if(e.id) item.registerCheckPictureId = e.id |
|
|
|
if(e.isPrintTrans){ |
|
|
|
item.isPrint = 'Y' |
|
|
|
}else{ |
|
|
|
item.isPrint = 'N' |
|
|
|
} |
|
|
|
body.push(item); |
|
|
|
}); |
|
|
|
|
|
|
|
postapi('/api/app/registercheckpicture/createregistercheckpicturemany',body) |
|
|
|
.then(res =>{ |
|
|
|
if(res.code != -1){ |
|
|
|
this.$message.success("操作成功！") |
|
|
|
postapi( |
|
|
|
"/api/app/registercheckpicture/createregistercheckpicturemany", |
|
|
|
body |
|
|
|
).then((res) => { |
|
|
|
if (res.code != -1) { |
|
|
|
this.$message.success("操作成功！"); |
|
|
|
this.getCheckPictures(checkPictures[0].registerCheckId); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除图片 |
|
|
|
btnDelImage(index){ |
|
|
|
let body = [this.checkPictures[index].id] |
|
|
|
btnDelImage(index) { |
|
|
|
let body = [this.checkPictures[index].id]; |
|
|
|
this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", { |
|
|
|
confirmButtonText: "是", |
|
|
|
cancelButtonText: "否", |
|
|
|
type: "warning", |
|
|
|
}).then(() => { |
|
|
|
return postapi(`/api/app/registercheckpicture/deleteregistercheckpicturemany`, body) |
|
|
|
}).then((res) => { |
|
|
|
if(res.code != -1){ |
|
|
|
this.$message.success("操作成功！") |
|
|
|
this.checkPictures.splice(index,1) |
|
|
|
} |
|
|
|
}).catch((err) => { |
|
|
|
if (err == "cancel") { |
|
|
|
this.$message.info("已取消"); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
return postapi( |
|
|
|
`/api/app/registercheckpicture/deleteregistercheckpicturemany`, |
|
|
|
body |
|
|
|
); |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
if (res.code != -1) { |
|
|
|
this.$message.success("操作成功！"); |
|
|
|
this.checkPictures.splice(index, 1); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
if (err == "cancel") { |
|
|
|
this.$message.info("已取消"); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
validateInteger(e,index){ |
|
|
|
validateInteger(e, index) { |
|
|
|
var regex = /^[0-9]*$/; |
|
|
|
console.log(e,index) |
|
|
|
console.log(e, index); |
|
|
|
if (!regex.test(e.value)) { |
|
|
|
// 如果输入不满足整数条件，则清除输入框内容 |
|
|
|
|
|
|
|
e.value = ""; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
//监听事件 |
|
|
|
watch: { |
|
|
|
//体检人员切换 |
|
|
|
"doctorCheck.RegisterCheckId":{ |
|
|
|
immediate:true, |
|
|
|
"doctorCheck.RegisterCheckId": { |
|
|
|
immediate: true, |
|
|
|
handler(newVal, oldVal) { |
|
|
|
console.log("watch:doctorCheck.RegisterCheckId:", newVal, " oldVal：", oldVal); |
|
|
|
this.getCheckPictures(newVal) |
|
|
|
} |
|
|
|
console.log( |
|
|
|
"watch:doctorCheck.RegisterCheckId:", |
|
|
|
newVal, |
|
|
|
" oldVal：", |
|
|
|
oldVal |
|
|
|
); |
|
|
|
this.getCheckPictures(newVal); |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped> |
|
|
|
@ -266,8 +350,8 @@ export default { |
|
|
|
padding: 1px 1px; |
|
|
|
} |
|
|
|
|
|
|
|
.btnClass{ |
|
|
|
margin: 2px 2px 0; |
|
|
|
.btnClass { |
|
|
|
margin: 2px 2px 0; |
|
|
|
height: 26px; |
|
|
|
min-width: 40px; |
|
|
|
padding: 5px 5px; /*原始 默认值 10px 10px */ |
|
|
|
@ -275,11 +359,11 @@ export default { |
|
|
|
|
|
|
|
/* 强制出现滚动条 */ |
|
|
|
::-webkit-scrollbar { |
|
|
|
height: .5rem; |
|
|
|
height: 0.5rem; |
|
|
|
} |
|
|
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
|
background-color: #ccc; |
|
|
|
border-radius: .25rem; |
|
|
|
} |
|
|
|
border-radius: 0.25rem; |
|
|
|
} |
|
|
|
</style> |
pengjun
2 years ago