newPeter7
2 years ago
29 changed files with 3707 additions and 293 deletions
@ -0,0 +1,223 @@ |
|||
<template> |
|||
<el-dialog |
|||
class="oklens-add-order" |
|||
:close-on-click-modal="false" |
|||
:visible.sync="visible" |
|||
:width="dataForm.title==='新增' || dataForm.title === '换片' || dataForm.title === '补录' || dataForm.title === '借片' ? '60%' : '30%'" |
|||
:title="dataForm.title" |
|||
> |
|||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|||
<el-form-item :label="dataForm.title === '借片' ? '借片日期' : '订片日期'" label-width="90px" prop="dpDate"> |
|||
<el-date-picker v-model="dataForm.dpDate" type="date" placeholder="请选择订片日期" value-format="yyyy-MM-dd" /> |
|||
</el-form-item> |
|||
<el-form-item :label="dataForm.title === '借片' ? '借片医生':'订片医生'" label-width="90px" prop="dpDoctorId"> |
|||
<el-select v-model="dataForm.dpDoctorId" placeholder="请选择订片医生" clearable> |
|||
<el-option v-for="(item,index) in doctorList " :key="index" :value="item.doctorId" :label="item.doctorName" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<div v-if="dataForm.title==='新增' || dataForm.title === '换片' || dataForm.title === '补录' || dataForm.title === '借片' || dataForm.title === '离焦软镜'" class="eyeType"> |
|||
<div class="rightEye"> |
|||
<p class="rightEye-text">右眼</p> |
|||
<left-right-eye ref="rightEyeRef" :brand-list="brandList" eye-type="OD" :title="dataForm.title" :patient-id-number="patientIdNumber" :tab-title="tabTitle" /> |
|||
</div> |
|||
<div class="leftEye"> |
|||
<p class="leftEye-text">左眼</p> |
|||
<left-right-eye ref="leftEyeRef" :brand-list="brandList" eye-type="OS" :title="dataForm.title" :patient-id-number="patientIdNumber" :tab-title="tabTitle" /> |
|||
</div> |
|||
</div> |
|||
<left-right-eye v-if="dataForm.title==='编辑' || dataForm.title==='编辑补录' || dataForm.title==='编辑借片' || dataForm.title==='编辑离焦软镜'" ref="editLeftRightEye" :brand-list="brandList" :title="dataForm.title" :tab-title="tabTitle" /> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
import leftRightEye from './left-right-eye.vue' |
|||
export default { |
|||
components: { |
|||
leftRightEye |
|||
}, |
|||
props: { |
|||
brandList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
patientIdNumber: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
doctorList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
tabTitle: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
dpDoctorId: '', |
|||
dpDate: '', |
|||
patientIdNumber: this.patientIdNumber, |
|||
drgsName: window.localStorage.getItem('identity') |
|||
}, |
|||
ISCRTForm: false |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
dpDoctorId: [ |
|||
{ required: true, message: '请选择订片医生', trigger: 'change' } |
|||
], |
|||
dpDate: [ |
|||
{ required: true, message: '请选择订片日期', trigger: 'change' } |
|||
] |
|||
|
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.dataForm.resetFields() // 重置表单 |
|||
if (this.dataForm.title === '新增' || this.dataForm.title === '借片' || this.dataForm.title === '换片' || this.dataForm.title === '补录') { |
|||
this.$refs.rightEyeRef.leftRightInit() |
|||
this.$refs.leftEyeRef.leftRightInit() |
|||
} else if (this.dataForm.title === '编辑' || this.dataForm.title === '编辑补录') { |
|||
this.$refs.editLeftRightEye.leftRightInit() |
|||
} |
|||
if (this.dataForm.id) { |
|||
this.getInfo() |
|||
} |
|||
}) |
|||
this.dataForm.dpDoctorId = '' |
|||
this.dataForm.dpDate = '' |
|||
}, |
|||
// 获取信息 |
|||
getInfo() { |
|||
this.$http.get(`/dp/getDpInfo/${this.dataForm.id}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
|
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
this.ISCRTForm = res.data.flag |
|||
this.$refs.editLeftRightEye.ISCRTForm = this.ISCRTForm |
|||
const eyeData = JSON.parse(JSON.stringify(res.data)) |
|||
delete eyeData.dpDate |
|||
delete eyeData.dpDoctorId |
|||
delete eyeData.dpDoctorName |
|||
this.$refs.editLeftRightEye.dataForm = { ...eyeData } |
|||
this.$refs.editLeftRightEye.getBrandColorList('', res.data.brandId, '编辑') |
|||
}).catch(() => {}) |
|||
}, |
|||
|
|||
// 表单提交 320321188808123330 18888888888 |
|||
dataFormSubmitHandle: debounce(function() { |
|||
this.$refs.dataForm.validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
if (this.dataForm.title === '新增' || this.dataForm.title === '借片' || this.dataForm.title === '换片' || this.dataForm.title === '补录') { |
|||
let flag = 0 |
|||
this.$refs.rightEyeRef.validateFun() |
|||
if (this.$refs.rightEyeRef.validateFlag) { |
|||
flag++ |
|||
this.dpFun({ ...this.dataForm, ...this.$refs.rightEyeRef.dataForm }) |
|||
} |
|||
|
|||
this.$refs.leftEyeRef.validateFun() |
|||
if (this.$refs.leftEyeRef.validateFlag) { |
|||
flag++ |
|||
this.dpFun({ ...this.dataForm, ...this.$refs.leftEyeRef.dataForm }) |
|||
} |
|||
flag === 0 ? this.$message.error('请填写右眼或左眼完整信息') : '' |
|||
} else if (this.dataForm.title === '编辑' || this.dataForm.title === '编辑补录' || this.dataForm.title === '编辑借片' || this.dataForm.title === '编辑离焦软镜') { |
|||
this.$refs.editLeftRightEye.validateFun() |
|||
this.dpFun({ ...this.dataForm, ...this.$refs.editLeftRightEye.dataForm }) |
|||
} |
|||
}) |
|||
}, 1000, { leading: true, trailing: false }), |
|||
// 订片接口封装 |
|||
dpFun(data) { |
|||
const url = this.dataForm.title === '新增' || this.dataForm.title === '编辑' || this.dataForm.title === '编辑补录' || this.dataForm.title === '编辑借片' || this.dataForm.title === '编辑离焦软镜' ? '/dp' : (this.dataForm.title === '换片' ? '/dp/replace' : (this.dataForm.title === '补录' ? '/dp/addRecord' : (this.dataForm.title === '借片' ? '/dp/borrow' : ''))) |
|||
this.$http[!this.dataForm.id ? 'post' : 'put'](url, data).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('refreshDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.oklens-add-order { |
|||
.eyeType { |
|||
margin-left:90px; |
|||
display: flex; |
|||
.rightEye { |
|||
margin-right: 16px; |
|||
} |
|||
.rightEye,.leftEye { |
|||
width: 50%; |
|||
border-radius: 6px; |
|||
background: #FAFAFA; |
|||
padding: 0 20px; |
|||
} |
|||
.rightEye-text,.leftEye-text { |
|||
font-size: 16px; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
font-weight: 700; |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.06); |
|||
margin-bottom: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.oklens-add-order { |
|||
.el-dialog__header { |
|||
margin-bottom:12px |
|||
} |
|||
.el-dialog__body { |
|||
padding-right: 30px; |
|||
} |
|||
.formItemOne .el-form-item__content { |
|||
display: flex; |
|||
} |
|||
.el-date-editor.el-input, .el-date-editor.el-input__inner{ |
|||
width: 100%; |
|||
} |
|||
.el-select { |
|||
display: block; |
|||
} |
|||
.el-input-number { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,131 @@ |
|||
<template> |
|||
<el-dialog |
|||
class="oklens-add-order" |
|||
:visible.sync="visible" |
|||
:close-on-click-modal="false" |
|||
width="30%" |
|||
:title="dataForm.title" |
|||
append-to-body |
|||
@close="closeDialog" |
|||
> |
|||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|||
<el-form-item :label="(dataForm.title=='更改通知' ? '通知' : dataForm.title) + '日期:'" label-width="90px" prop="shareDate"> |
|||
<el-date-picker v-model="dataForm.shareDate" value-format="yyyy-MM-dd" type="date" :placeholder="'请选择' + (dataForm.title=='更改通知' ? '通知' : dataForm.title )+ '日期'" /> |
|||
</el-form-item> |
|||
<template v-if="dataForm.title=='到货'"> |
|||
<el-form-item label="出厂编号:" label-width="90px" prop="factoryNumber"> |
|||
<el-input v-model="dataForm.factoryNumber" placeholder="核对并填写出厂编号" /> |
|||
</el-form-item> |
|||
</template> |
|||
<el-form-item label="备 注:" label-width="90px" prop="remark"> |
|||
<el-input v-model="dataForm.remark" type="textarea" placeholder="备注信息" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
props: { |
|||
brandList: { |
|||
type: Array, |
|||
default: () => [] |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
dpId: '', |
|||
shareDate: '', |
|||
factoryNumber: '', |
|||
remark: '' |
|||
}, |
|||
params: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
shareDate: [ |
|||
{ required: true, message: '请选择日期', trigger: 'change' } |
|||
], |
|||
factoryNumber: [ |
|||
{ required: true, message: '请选择出厂编号', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.dataForm.resetFields() // 重置表单 |
|||
console.log(this.dataForm) |
|||
if (this.dataForm.title === '更改通知') { |
|||
this.dataForm.id = this.params.noticeId |
|||
this.dataForm.remark = this.params.noticeRemark |
|||
this.dataForm.shareDate = this.params.noticeDate |
|||
} else if (this.dataForm.title === '通知') { |
|||
this.dataForm.shareDate = this.$moment().format('YYYY-MM-DD') |
|||
} |
|||
}) |
|||
}, |
|||
// 表单提交 320321188808123330 18888888888 |
|||
dataFormSubmitHandle: debounce(function() { |
|||
this.$refs.dataForm.validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
const url = this.dataForm.title === '到货' ? '/dp/arrival' : (this.dataForm.title === '通知' ? '/dp/notice' : this.dataForm.title === '更改通知' ? '/dp/updateNotice' : '') |
|||
this.$http[!this.params.noticeId ? 'post' : 'put'](url, this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('getDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
}, 1000, { leading: true, trailing: false }), |
|||
// 关闭弹框 |
|||
closeDialog() { |
|||
this.$emit('closeDialog') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.oklens-add-order { |
|||
.el-dialog__header { |
|||
margin-bottom:12px |
|||
} |
|||
.el-dialog__body { |
|||
padding-right: 30px; |
|||
} |
|||
.formItemOne .el-form-item__content { |
|||
display: flex; |
|||
} |
|||
.el-date-editor.el-input, .el-date-editor.el-input__inner{ |
|||
width: 100%; |
|||
} |
|||
.el-select { |
|||
display: block; |
|||
} |
|||
.el-input-number { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,430 @@ |
|||
<template> |
|||
<div class="okLens"> |
|||
<!-- ok镜头部 --> |
|||
<head-template head-left="订片记录"> |
|||
<el-button v-if="tabTitle !== 'LJRJ'" size="small" @click="addOrUpdateHandle('','','借片')"> |
|||
<svg-icon icon-class="icon-jiebei" /><span class="repair-title">借片</span> |
|||
</el-button> |
|||
<el-button v-if="tabTitle !== 'LJRJ'" size="small" @click="addOrUpdateHandle('','','补录')"> |
|||
<svg-icon icon-class="icon-repair" /><span class="repair-title">补录</span> |
|||
</el-button> |
|||
<el-button size="small" @click="addOrUpdateHandle('','','换片')"> |
|||
<svg-icon icon-class="icon-change-film" /><span class="change-title">换片</span> |
|||
</el-button> |
|||
<el-button type="primary" size="small" icon="el-icon-plus" @click="addOrUpdateHandle('','','新增')">新增</el-button> |
|||
</head-template> |
|||
|
|||
<!-- ok镜内容 --> |
|||
<!-- 1:定片未到货，2:到货未通知，3:通知未取镜，4:取镜/离焦软镜，5:放弃取镜，6:换片 7:补录，8:借片，100:退货 --> |
|||
<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" :height="`calc(100vh - 217px)`" :row-class-name="getRowClass"> |
|||
<el-table-column type="expand"> |
|||
<template v-if="scope.row.status!=7 || scope.row.status!=8" slot-scope="scope"> |
|||
<el-steps space="80%" :active="scope.row.status==3 ? 3 : scope.row.status" :finish-status="scope.row.status==4 ? 'success' : ( scope.row.status== 5 || scope.row.status== 100 ? 'error' : ( scope.row.status== 6 ? 'wait' : 'finish' ))"> |
|||
<el-step v-for="(item,index) in scope.row.logVOList" :key="index" :title="item.name"> |
|||
<template slot="description"> |
|||
<div class="step-desc"> |
|||
<p class="description-name">{{ item.status==1 && !scope.row.oldDpId ? '订片': (item.status==2 ? '到货' : (item.status==3 ? '通知' : (item.status==4 ? '取镜' :(item.status==5 ? '放弃' : (item.status==6 ? '换片' : (item.status==100 ? '退货' : (item.status==1&& scope.row.oldDpId ? '换片':''))))))) }}</p> |
|||
<p class="description-date"> {{ item.shareDate ? $options.filters.dateFilterTwo( item.shareDate) : '' }}</p> |
|||
<p v-show="item.status==2 || item.status==6">出厂编号：{{ item.factoryNumber ? item.factoryNumber : '-' }}</p> |
|||
<p v-show="item.status==1 && scope.row.oldDpId ">原订片编号：{{ scope.row.oldDpId ? scope.row.oldDpId.substr(9) : '' }}</p> |
|||
<p v-show="item.status==6">新订片编号：{{ scope.row.newDpId ? scope.row.newDpId.substr(9) : '' }}</p> |
|||
<div class="description-content"> |
|||
<template v-if="item.status==1"> |
|||
<span v-show="scope.row.eyeType">眼别：{{ scope.row.eyeType }}</span> |
|||
<span v-show="scope.row.brand">品牌：{{ scope.row.brand }}</span> |
|||
<span v-show="scope.row.curvity && (scope.row.flag=='0'||scope.row.flag=='2')">曲率：{{ scope.row.curvity }}</span> |
|||
<span v-show="scope.row.degrees && (scope.row.flag=='0'||scope.row.flag=='2')">度数：{{ scope.row.degrees }}</span> |
|||
<span v-show="scope.row.degrees && scope.row.flag=='2'">AZT：{{ scope.row.azt }}</span> |
|||
<span v-show="scope.row.bc && (scope.row.flag=='1' ||scope.row.flag=='2')">BC：{{ scope.row.bc }}</span> |
|||
<span v-show="scope.row.rzd && scope.row.flag=='1'">RZD：{{ scope.row.rzd }}</span> |
|||
<span v-show="scope.row.lza && scope.row.flag=='1'">LZA：{{ scope.row.lza }}</span> |
|||
<span v-show="scope.row.diameter">直径：{{ scope.row.diameter }}</span> |
|||
</template> |
|||
<template v-else> |
|||
<p v-show="item.status==4 && item.id && scope.row.status==4" class="take-mirror" @click="removeLensReturnGoodsClick(scope.row.id,...scope.row,'取镜记录')">取镜记录</p> |
|||
</template> |
|||
<p v-show="item.operateDoctorName">订片医生：{{ item.dpDoctorName }}</p> |
|||
<p v-show="item.operateDoctorName">操作者：{{ item.operateDoctorName }}</p> |
|||
<p>备注：{{ item.remark ? item.remark : '-' }}</p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-step> |
|||
</el-steps> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="id" label="订片编号" :width=" tabTitle !== 'LJRJ' ? 100 : ''"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.id ? scope.row.id.substr(9): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dpDate" label="订片日期" :width=" tabTitle !== 'LJRJ' ? 100 : ''"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.dpDate ? $options.filters.dateFilterTwo( scope.row.dpDate): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="tabTitle !=='LJRJ'" prop="content" :label="tabTitle==='okLens' ? '内容(眼别 品牌 曲率 度数 直径)' : '内容(眼别 品牌 基弧 度数 直径)'" width="240"> |
|||
<template slot-scope="scope"> |
|||
<div class="table-colum-content"> |
|||
<span v-show="scope.row.eyeType"><b :style="{'color':scope.row.eyeType==='OD' ? 'green': '#1E79FF'}">眼别：{{ scope.row.eyeType }}</b></span> |
|||
<span v-show="scope.row.brand">品牌：{{ scope.row.brand }}</span> |
|||
<!-- flag 0 第一种国产品牌 flag 1 进口品牌 flag 0 第二种国产品牌 --> |
|||
<!-- 根据不同的flag显示不同的内容 --> |
|||
<span v-show="scope.row.curvity && (scope.row.flag=='0'||scope.row.flag=='2') && tabTitle==='okLens'">曲率：{{ scope.row.curvity }}</span> |
|||
<span v-show="scope.row.baseArc && (scope.row.flag=='0'||scope.row.flag=='2') && tabTitle==='RGP'">基弧：{{ scope.row.baseArc }}</span> |
|||
<span v-show="scope.row.degrees && (scope.row.flag=='0'||scope.row.flag=='2')">度数：{{ scope.row.degrees }}</span> |
|||
<span v-show="scope.row.degrees && scope.row.flag=='2'">AZT：{{ scope.row.azt }}</span> |
|||
<span v-show="scope.row.bc && (scope.row.flag=='1' ||scope.row.flag=='2')">BC：{{ scope.row.bc }}</span> |
|||
<span v-show="scope.row.rzd && scope.row.flag=='1'">RZD：{{ scope.row.rzd }}</span> |
|||
<span v-show="scope.row.lza && scope.row.flag=='1'">LZA：{{ scope.row.lza }}</span> |
|||
<span v-show="scope.row.diameter">直径：{{ scope.row.diameter }}</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-if="tabTitle ==='LJRJ'" prop="content" label="内容(眼别 品牌 度数)" width="300"> |
|||
<template slot-scope="scope"> |
|||
<div class="table-colum-content"> |
|||
<span v-show="scope.row.eyeType"><b :style="{'color':scope.row.eyeType==='OD' ? 'green': '#1E79FF'}">眼别：{{ scope.row.eyeType }}</b></span> |
|||
<span v-show="scope.row.brand">品牌：{{ scope.row.brand }}</span> |
|||
<span v-show="scope.row.degrees">度数：{{ scope.row.degrees }}</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" label="备注"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.remark ? scope.row.remark : '-' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dpDoctorName" label="订片医生" /> |
|||
<template v-if="tabTitle !=='LJRJ'"> |
|||
<el-table-column prop="arrivalDate" label="到货日期"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.arrivalDate ? $options.filters.dateFilterTwo( scope.row.arrivalDate): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="noticeDate" label="通知日期"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.noticeDate ? $options.filters.dateFilterTwo( scope.row.noticeDate): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="takeAwayDate" label="取镜日期"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.takeAwayDate ? $options.filters.dateFilterTwo( scope.row.takeAwayDate): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="returnDate" label="归还日期"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.returnDate ? $options.filters.dateFilterTwo( scope.row.returnDate): '- ' }} |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
<el-table-column label="状态"> |
|||
<!-- 1:定片未到货，2:到货未通知，3:通知未取镜，4:放弃取镜，5:放弃取镜，6:换片，7:补录，100:退货 --> |
|||
<template slot-scope="scope"> |
|||
<div v-show="scope.row.status == 1"> |
|||
<span class="circle-status not-start" /> |
|||
<span>未到货</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 2"> |
|||
<span class="circle-status not-start" /> |
|||
<span>未通知</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 3"> |
|||
<template v-if="new Date(scope.row.noticeDate).setDate(new Date(scope.row.noticeDate).getDate() + 30) < new Date()"> |
|||
<span class="circle-status not-start" /> |
|||
<span>通知30天未取镜</span> |
|||
</template> |
|||
<template v-else> |
|||
<span class="circle-status not-start" /> |
|||
<span>未取镜</span> |
|||
</template> |
|||
</div> |
|||
<div v-show="scope.row.status == 4"> |
|||
<span class="circle-status goed" /> |
|||
<span>已取镜</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 5"> |
|||
<span class="circle-status goed" /> |
|||
<span>已放弃</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 6"> |
|||
<span class="circle-status patch" /> |
|||
<span>换片</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 7"> |
|||
<span class="circle-status patch" /> |
|||
<span>补录</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 8"> |
|||
<span class="circle-status blue" /> |
|||
<span>借片</span> |
|||
</div> |
|||
<div v-show="scope.row.status == 100"> |
|||
<span class="circle-status give-up" /> |
|||
<span>已退货</span> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<!-- 1:未到货，2未通知，3:未取镜，4:取镜，5:已放弃，6:换片，7:补录，8:借片，100:退货 --> |
|||
<el-table-column prop="operation" label="操作" width="150"> |
|||
<template slot-scope="scope"> |
|||
<div v-show="scope.row.status!=6 && scope.row.status!=7 && scope.row.status!=8 && scope.row.status!=100 && tabTitle !== 'LJRJ'"> |
|||
<span v-show="scope.row.status==1" class="operation-details" @click="arrivalNotiveClick(scope.row.id,...scope.row,'到货')">到货</span> |
|||
<span v-show="scope.row.status==2" class="operation-details" @click="arrivalNotiveClick(scope.row.id,...scope.row,'通知')">通知</span> |
|||
<span v-show="scope.row.status==3" class="operation-details" @click="arrivalNotiveClick(scope.row.id,...scope.row,'更改通知')">更改通知</span> |
|||
<span v-show="scope.row.status==3 || scope.row.status==5" class="operation-details" @click="removeLensReturnGoodsClick(scope.row.id,...scope.row,'取镜')">取镜</span> |
|||
<span v-show="scope.row.status==4" class="operation-details" @click="removeLensReturnGoodsClick(scope.row.id,...scope.row,'取镜记录')">取镜记录</span> |
|||
<span v-show="scope.row.status==1 || scope.row.status==2 || scope.row.status==4 || scope.row.status==5" class="operation-details" @click="removeLensReturnGoodsClick(scope.row.id,...scope.row,'退货')">退货</span> |
|||
<el-dropdown trigger="click" @command="handleCommandDropdowm(scope.row.id,...scope.row,$event)"> |
|||
<i class="el-icon-more" /> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item v-show="scope.row.status==3" command="退货">退货</el-dropdown-item> |
|||
<el-dropdown-item command="编辑">编辑</el-dropdown-item> |
|||
<el-dropdown-item v-if="$hasPermission('patientManagement:delete')" command="删除">删除</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</div> |
|||
<div v-show="scope.row.status==6 || scope.row.status==7 || scope.row.status==8 || scope.row.status==100 || tabTitle =='LJRJ'"> |
|||
<span v-show="scope.row.status==7 || scope.row.status==8 || tabTitle =='LJRJ'" class="operation-details" @click="addOrUpdateHandle(scope.row.id,...scope.row,`编辑${scope.row.status===7 ? '补录' : (scope.row.status==8 ? '借片' : (tabTitle =='LJRJ' ? '离焦软镜' :''))}`)">编辑</span> |
|||
<template v-if="$hasPermission('patientManagement:delete')"> |
|||
<span v-show="scope.row.status==6 || scope.row.status==7 || scope.row.status==8 || scope.row.status==100 || tabTitle =='LJRJ'" class="operation-details" @click="deleteHandle(scope.row.id)">删除</span> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<!-- 弹窗 新增/编辑/换片/补录/借片 --> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :doctor-list="doctorList" :brand-list="brandList" :patient-id="patientId" :tab-title="tabTitle" @refreshDataList="getDataList()" /> |
|||
<!-- 弹窗 到货/通知 --> |
|||
<arrival-notice-or-update v-if="arrivalNoticeVisible" ref="arrivalNoticeOrUpdate" :patient-id="patientId" @refreshDataList="getDataList" @getDataList="getDataList()" @closeDialog="arrivalNoticeVisible=false" /> |
|||
<!-- 弹窗 取镜/退货 --> |
|||
<removeLens-returnGoods-or-update v-if="removeLensReturnGoodsVisible" ref="removeLensReturnGoodsOrUpdate" :patient-id="patientId" :father-factory-number="factoryNumber" @getDataList="getDataList()" @closeDialog="removeLensReturnGoodsVisible=false" /> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import headTemplate from '@/components/head' |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './add-or-update.vue' |
|||
import arrivalNoticeOrUpdate from './arrival-notice-or-update' |
|||
import removeLensReturnGoodsOrUpdate from './removeLens-returnGoods-or-update' |
|||
export default { |
|||
components: { |
|||
headTemplate, |
|||
AddOrUpdate, |
|||
arrivalNoticeOrUpdate, |
|||
removeLensReturnGoodsOrUpdate |
|||
}, |
|||
mixins: [mixinViewModule], |
|||
props: { |
|||
patientId: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
doctorList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
tabTitle: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tableHeight: '', |
|||
brandList: [], |
|||
arrivalNoticeVisible: false, |
|||
removeLensReturnGoodsVisible: false, |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/dp/getOKList', |
|||
deleteURL: '/dp' |
|||
}, |
|||
dataForm: { |
|||
patientId: this.patientId, |
|||
isInvisible: this.tabTitle === 'okLens' ? 0 : (this.tabTitle === 'RGP' ? 1 : 2) // 0是ok镜 1是RGP隐形眼镜 2是离焦软镜 |
|||
}, |
|||
factoryNumber: '' |
|||
} |
|||
}, |
|||
created() { |
|||
this.getBrandList() |
|||
}, |
|||
methods: { |
|||
init() { |
|||
// this.$nextTick(() => { |
|||
// console.log(this.$('.el-table').offset().top) |
|||
// console.log(this.$(document).height()) |
|||
// this.tableHeight = this.$(document).height() - this.$('.el-table').offset().top - 36 |
|||
// console.log(this.tableHeight) |
|||
// }) |
|||
}, |
|||
// rowStyle({ row, rowIndex }) { |
|||
// console.log(row) |
|||
// const stylejson = {} |
|||
// if (row.eyeType === 'OD') { |
|||
// stylejson.color = 'green' |
|||
// } else if (row.eyeType === 'OS') { |
|||
// stylejson.color = '#1E79FF' |
|||
// } |
|||
// return stylejson |
|||
// }, |
|||
// 获取品牌列表 |
|||
async getBrandList() { |
|||
const { data: res } = await this.$http.get('dp/getBrandList', { |
|||
params: { |
|||
isInvisible: this.tabTitle === 'okLens' ? 0 : (this.tabTitle === 'RGP' ? 1 : 2) // 0是ok镜 1是RGP隐形眼镜 2是离焦软镜 |
|||
} |
|||
}) |
|||
this.brandList = res.data |
|||
}, |
|||
// 设置展开图标是否显示 |
|||
getRowClass({ row, rowIndex }) { |
|||
if (row.status === 7 || row.status === 8) { |
|||
return 'row-expand-cover' |
|||
} else { |
|||
return '' |
|||
} |
|||
}, |
|||
// 点击菜单触发事件回调 |
|||
handleCommandDropdowm(id, scopeRow, e) { |
|||
console.log(id, scopeRow, e) |
|||
if (e === '编辑') { |
|||
this.addOrUpdateHandle(id, scopeRow, e) |
|||
} else if (e === '退货') { |
|||
this.removeLensReturnGoodsClick(id, scopeRow, e) |
|||
} else if (e === '删除') { |
|||
this.deleteHandle(id) |
|||
} |
|||
}, |
|||
// 到货-通知 |
|||
arrivalNotiveClick(dpId, params, title) { |
|||
this.arrivalNoticeVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.arrivalNoticeOrUpdate.dataForm.dpId = dpId |
|||
this.$refs.arrivalNoticeOrUpdate.dataForm.title = title |
|||
this.$refs.arrivalNoticeOrUpdate.params = params |
|||
this.$refs.arrivalNoticeOrUpdate.init() |
|||
}) |
|||
}, |
|||
// 取镜-退货-取镜记录 |
|||
removeLensReturnGoodsClick(dpId, params, title) { |
|||
this.removeLensReturnGoodsVisible = true |
|||
this.factoryNumber = params.factoryNumber |
|||
this.$nextTick(() => { |
|||
this.$refs.removeLensReturnGoodsOrUpdate.dataForm.dpId = dpId |
|||
this.$refs.removeLensReturnGoodsOrUpdate.dataForm.title = title |
|||
this.$refs.removeLensReturnGoodsOrUpdate.init() |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.okLens { |
|||
.description-content,.table-colum-content { |
|||
span { |
|||
display: inline-block; |
|||
padding-right: 8px; |
|||
} |
|||
} |
|||
.take-mirror { |
|||
color:#1890ff; |
|||
cursor: pointer; |
|||
} |
|||
.repair-title, |
|||
.change-title { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
padding-left: 6px; |
|||
} |
|||
.circle-status { |
|||
width: 6px; |
|||
height: 6px; |
|||
border-radius: 50%; |
|||
margin-right: 5px; |
|||
display: inline-block; |
|||
} |
|||
.not-start { |
|||
background-color: #1890ff; |
|||
} |
|||
.not-started { |
|||
background-color: #FAAD14 |
|||
; |
|||
} |
|||
.goed { |
|||
background: #52c41a; |
|||
} |
|||
.give-up { |
|||
background-color: #FF4D4F; |
|||
} |
|||
.blue { |
|||
background: #14b1fa; |
|||
} |
|||
.patch { |
|||
background-color: #bfbfbf; |
|||
} |
|||
.step-desc { |
|||
.content { |
|||
color: #b8b8b8; |
|||
} |
|||
} |
|||
.operation-details { |
|||
cursor: pointer; |
|||
color:#1890ff; |
|||
padding-right: 8px; |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.okLens { |
|||
.el-table::before { |
|||
height: 0; |
|||
} |
|||
.el-timeline-item__node--normal { |
|||
border: 3px solid #1890ff; |
|||
} |
|||
.row-expand-cover .el-table__expand-column .el-icon{ |
|||
visibility:hidden; |
|||
} |
|||
.el-step.is-center .el-step__line { |
|||
left: 55%; |
|||
right: -45%; |
|||
} |
|||
.el-step__icon-inner { |
|||
display: none; |
|||
} |
|||
.el-step__icon.is-text { |
|||
border: none; |
|||
width: 8px; |
|||
height: 8px; |
|||
} |
|||
// 完成 |
|||
.el-step__head.is-finish .el-step__icon.is-text { |
|||
background: #409eff; |
|||
} |
|||
// 错误 |
|||
.el-step__head.is-error .el-step__icon.is-text { |
|||
background: #F56C6C; |
|||
} |
|||
.el-step__head.is-success .el-step__icon.is-text { |
|||
background: #67C23A; |
|||
} |
|||
.el-step__head.is-wait .el-step__icon.is-text { |
|||
background: #b8b8b8; |
|||
} |
|||
.el-step__head.is-process,.el-step__title.is-process { |
|||
color: #b8b8b8; |
|||
} |
|||
.el-step__description.is-process { |
|||
color: #b8b8b8; |
|||
} |
|||
.el-step__head.is-process .el-step__icon.is-text { |
|||
background: #b8b8b8; |
|||
} |
|||
.el-steps--horizontal { |
|||
.el-step.is-horizontal:last-child { |
|||
flex-basis: 30% !important; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|||
<el-form-item v-if="title.includes('编辑')" label="眼 别:" label-width="90px" prop="eyeType"> |
|||
<el-select v-model="dataForm.eyeType" placeholder="请选择眼别" clearable> |
|||
<el-option label="右眼" value="OD" /> |
|||
<el-option label="左眼" value="OS" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="title=='换片'" label="目标镜片:" label-width="90px" prop="oldDpId"> |
|||
<el-select v-model="dataForm.oldDpId" placeholder="请选择目标镜片" clearable> |
|||
<el-option v-for="(item,index) in replaceList " :key="index" :value="item.id" :label="`${item.dpDate}-${item.brand}-${item.colour}`" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="品 牌:" :label-width="title=='新增' ? '60px' : '90px'" prop="brandId"> |
|||
<el-select v-model="dataForm.brandId" placeholder="请选择品牌" clearable> |
|||
<el-option v-for="(item,index) in brandList " :key="index" :value="item.id" :label="item.brand" @click.native="selectOptionBrandHandle(item)" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<template v-if="ISCRTForm=='0' || ISCRTForm=='2'"> |
|||
<el-form-item v-if="tabTitle==='okLens' && tabTitle !== 'LJRJ'" label="曲 率:" :label-width="title=='新增' ? '60px' : '90px'" prop="curvity"> |
|||
<el-input v-model="dataForm.curvity" placeholder="请填写曲率" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="tabTitle==='RGP' && tabTitle !== 'LJRJ'" label="基弧:" :label-width="title=='新增' ? '60px' : '90px'" prop="baseArc"> |
|||
<el-input v-model="dataForm.baseArc" placeholder="请填写基弧" /> |
|||
</el-form-item> |
|||
<el-form-item label="度 数:" :label-width="title=='新增' ? '60px' : '90px'" prop="degrees"> |
|||
<el-input v-model="dataForm.degrees" placeholder="请填写度数" /> |
|||
</el-form-item> |
|||
</template> |
|||
<template> |
|||
<el-form-item v-if=" ISCRTForm=='2'" label="AZT:" :label-width="title=='新增' ? '60px' : '90px'" prop="azt"> |
|||
<el-input v-model="dataForm.azt" placeholder="请填写度数" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="ISCRTForm =='1' || ISCRTForm =='2'" label="BC:" :label-width="title=='新增' ? '60px' : '90px'" prop="bc"> |
|||
<el-input v-model="dataForm.bc" placeholder="请填写BC" /> |
|||
</el-form-item> |
|||
</template> |
|||
<template v-if="ISCRTForm =='1'"> |
|||
<el-form-item label="RZD:" :label-width="title=='新增' ? '60px' : '90px'" prop="rzd"> |
|||
<el-input v-model="dataForm.rzd" placeholder="请填写RZD" /> |
|||
</el-form-item> |
|||
<el-form-item label="LZA:" :label-width="title=='新增' ? '60px' : '90px'" prop="lza"> |
|||
<el-input v-model="dataForm.lza" placeholder="请填写LZA" /> |
|||
</el-form-item> |
|||
</template> |
|||
<el-form-item v-if="tabTitle !== 'LJRJ'" label="直 径:" :label-width="title=='新增' ? '60px' : '90px'" prop="diameter"> |
|||
<el-input v-model="dataForm.diameter" placeholder="请填写直径" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="tabTitle !== 'LJRJ'" label="颜 色:" :label-width="title=='新增' ? '60px' : '90px'" prop="colourId"> |
|||
<el-select v-model="dataForm.colourId" placeholder="请选择颜色" clearable @change="colorChange"> |
|||
<el-option v-for="item in brandCOlorList.data" :key="item.id" :label="item.colour" :value="item.id" @click.native="selectOptionColorHandle(item)" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="title.includes('借片')" label="归还日期:" :label-width="title=='新增' ? '60px' : '90px'" prop="returnDate"> |
|||
<el-date-picker v-model="dataForm.returnDate" type="date" placeholder="请选择归还日期" value-format="yyyy-MM-dd" /> |
|||
</el-form-item> |
|||
<el-form-item label="备 注:" :label-width="title=='新增' ? '60px' : '90px'" prop="remark"> |
|||
<el-input v-model="dataForm.remark" type="textarea" placeholder="备注信息" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
brandList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
eyeType: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
patientIdNumber: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
tabTitle: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
brandCOlorList: {}, |
|||
replaceList: [], |
|||
dataForm: { |
|||
eyeType: '', |
|||
oldDpId: '', |
|||
brandId: '', |
|||
curvity: '', |
|||
baseArc: '', |
|||
degrees: '', |
|||
azt: '', |
|||
bc: '', |
|||
rzd: '', |
|||
lza: '', |
|||
diameter: '', |
|||
colourId: '', |
|||
returnDate: '', |
|||
remark: '', |
|||
status: '' |
|||
}, |
|||
ISCRTForm: '0', |
|||
validateFlag: false |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
return { |
|||
oldDpId: [ |
|||
{ required: true, message: '请选择目标镜片', trigger: 'change' } |
|||
], |
|||
eyeType: [ |
|||
{ required: true, message: '请选择眼别', trigger: 'change' } |
|||
], |
|||
brandId: [ |
|||
{ required: true, message: '请选择品牌', trigger: 'change' } |
|||
], |
|||
curvity: [ |
|||
{ required: true, message: '请选择屈率', trigger: 'blur' } |
|||
], |
|||
baseArc: [ |
|||
{ required: true, message: '请选择基弧', trigger: 'blur' } |
|||
], |
|||
degrees: [ |
|||
{ required: true, message: '请选择度数', trigger: 'change' } |
|||
], |
|||
azt: [ |
|||
{ required: true, message: '请选择AZT', trigger: 'change' } |
|||
], |
|||
bc: [ |
|||
{ required: true, message: '请选择BC', trigger: 'blur' } |
|||
], |
|||
rzd: [ |
|||
{ required: true, message: '请选择RZD', trigger: 'change' } |
|||
], |
|||
lza: [ |
|||
{ required: true, message: '请选择LZA', trigger: 'blur' } |
|||
], |
|||
diameter: [ |
|||
{ required: true, message: '请选择直径', trigger: 'blur' } |
|||
], |
|||
colourId: [ |
|||
{ required: true, message: '请选择颜色', trigger: 'change' } |
|||
] |
|||
|
|||
} |
|||
} |
|||
}, |
|||
created() { |
|||
|
|||
}, |
|||
methods: { |
|||
// 获取可以换片的定片记录 |
|||
async getReplaceList() { |
|||
const { data: res } = await this.$http.get('/dp/getReplaceList', { |
|||
params: { |
|||
patientIdNumber: this.patientIdNumber, |
|||
drgsName: window.localStorage.getItem('identity'), |
|||
eyeType: this.dataForm.eyeType, |
|||
isInvisible: this.tabTitle === 'okLens' ? 0 : (this.tabTitle === 'RGP' ? 1 : 2) // 0是ok镜 1是RGP隐形眼镜 2是离焦软镜 |
|||
} |
|||
}) |
|||
this.replaceList = res.data |
|||
}, |
|||
leftRightInit() { |
|||
this.$nextTick(() => { |
|||
this.ISCRTForm = '0' |
|||
this.$refs.dataForm.resetFields() // 重置表单 |
|||
console.log(this.eyeType) |
|||
this.dataForm.eyeType = this.title === '新增' || this.title === '借片' || this.title === '换片' || this.title === '补录' ? this.eyeType : '' |
|||
this.dataForm.status = this.tabTitle === 'LJRJ' ? 4 : '' |
|||
if (this.title === '换片') { |
|||
// 获取可以换片的定片记录 |
|||
this.getReplaceList() |
|||
} |
|||
}) |
|||
this.dataForm.oldDpId = '' |
|||
}, |
|||
colorChange(e) { |
|||
console.log(e) |
|||
console.log(this.brandCOlorList) |
|||
}, |
|||
// 选择品牌变化 |
|||
selectOptionBrandHandle(item) { |
|||
console.log('选择品牌变化', item) |
|||
this.ISCRTForm = item.flag |
|||
this.dataForm.brand = item.brand |
|||
this.getBrandColorList(item, item.id) |
|||
}, |
|||
// 选择颜色变化 |
|||
selectOptionColorHandle(item) { |
|||
console.log(item) |
|||
this.dataForm.colour = item.colour |
|||
}, |
|||
// 获取颜色 |
|||
async getBrandColorList(item, brandId, title) { |
|||
const { data: res } = await this.$http.get('/dp/getBrandColourList', { |
|||
params: { |
|||
brandId: brandId |
|||
} |
|||
}) |
|||
this.brandCOlorList = res.data |
|||
console.log(res.data) |
|||
if (title !== '编辑') { |
|||
this.dataForm.colourId = this.dataForm.eyeType === 'OD' ? res.data.odDefault.id : res.data.osDefault.id |
|||
} |
|||
}, |
|||
// 校验 |
|||
validateFun() { |
|||
const dataForm = this.dataForm |
|||
// 进口品牌是否填写完整 flag=1 |
|||
const ImportCRTFlag1 = dataForm.bc || dataForm.lza || dataForm.rzd || dataForm.brandId || dataForm.colourId || dataForm.diameter |
|||
// 国产品牌是否填写完整 flag=0 |
|||
const chinaFlag0 = dataForm.brandId || dataForm.colourId || dataForm.curvity || dataForm.degrees || dataForm.diameter |
|||
// 国产品牌 flag=2 |
|||
const chinaFlag2 = dataForm.brandId || dataForm.colourId || dataForm.curvity || dataForm.degrees || dataForm.diameter || dataForm.atz |
|||
// 如果是进口品牌并且填写完整 flag=1 || 如果是第一种类型的国产品牌填写完整 flag=0 || 如果是第二种类型的国产品牌填写完整 flag=2 |
|||
if ((this.ISCRTForm === '1' && ImportCRTFlag1) || (this.ISCRTForm === '0' && chinaFlag0) || (this.ISCRTForm === '2' && chinaFlag2)) { |
|||
this.$refs.dataForm.validate((valid) => { |
|||
if (!valid) { |
|||
this.validateFlag = false |
|||
return false |
|||
} else { |
|||
this.validateFlag = true |
|||
} |
|||
}) |
|||
} |
|||
// 如果是进口品牌没有填写完整 flag=1 || 如果是第一种类型的国产品牌填写完整 flag=0 || 如果是第二种类型的国产品牌填写完整 flag=2 |
|||
else if ((this.ISCRTForm === '1' && !ImportCRTFlag1) || (this.ISCRTForm === '0' && !chinaFlag0) || (this.ISCRTForm === '2' && !chinaFlag2)) { |
|||
this.validateFlag = false |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,269 @@ |
|||
<template> |
|||
<el-dialog |
|||
class="oklens-removeLens-returnGoods" |
|||
:visible.sync="visible" |
|||
:close-on-click-modal="false" |
|||
width="30%" |
|||
:title="dataForm.title" |
|||
append-to-body |
|||
@close="closeDialog" |
|||
> |
|||
<div class="info"> |
|||
<div class="orderDate"> |
|||
<span class="info-left">订片日期：</span> |
|||
<span class="info-right">{{ dataForm.dpDate }}</span> |
|||
</div> |
|||
<div class="orderInfo"> |
|||
<span class="info-left">订片信息：</span> |
|||
<div class="info-right"> |
|||
<p>品牌：{{ dataForm.brand }}</p> |
|||
<p>眼别：{{ dataForm.eyeType }}</p> |
|||
<p v-show="dataForm.curvity">曲率：{{ dataForm.curvity }}</p> |
|||
<p v-show="dataForm.degrees">度数：{{ dataForm.degrees }}</p> |
|||
<p v-show="dataForm.azt">AZT：{{ dataForm.azt }}</p> |
|||
<p v-show="dataForm.bc">BC：{{ dataForm.bc }}</p> |
|||
<p v-show="dataForm.rzd">RZD：{{ dataForm.rzd }}</p> |
|||
<p v-show="dataForm.lza">LZA：{{ dataForm.lza }}</p> |
|||
<p v-show="dataForm.diameter">直径：{{ dataForm.diameter }}</p> |
|||
<p>颜色：{{ dataForm.colour }}</p> |
|||
</div> |
|||
</div> |
|||
<template v-if="dataForm.title=='取镜记录'"> |
|||
<div class="removeLensDate"> |
|||
<span class="info-left">取镜日期：</span> |
|||
<span class="info-right">{{ dataForm.takeAwayDate }}</span> |
|||
</div> |
|||
<div class="factoryNumber"> |
|||
<span class="info-left">出厂编号：</span> |
|||
<span class="info-right">{{ dataForm.factoryNumber }}</span> |
|||
</div> |
|||
<div class="remarks"> |
|||
<span class="info-left">备注：</span> |
|||
<div class="info-right">{{ dataForm.remark }}</div> |
|||
</div> |
|||
<div class="sign"> |
|||
<span class="info-left">取镜签字：</span> |
|||
<img style="width: 80px;height: 40px;" :src="dataForm.signFile"> |
|||
</div> |
|||
</template> |
|||
</div> |
|||
<template v-if="dataForm.title !='取镜记录'"> |
|||
<el-form ref="dataForm" :model="dataForm" :rules="dataRule"> |
|||
<template v-if="dataForm.title=='取镜'"> |
|||
<el-form-item label="操作:" label-width="90px" prop="operation"> |
|||
<el-radio-group v-model="dataForm.status"> |
|||
<el-radio label="4">取镜</el-radio> |
|||
<el-radio label="5">放弃</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
</template> |
|||
<el-form-item :label="dataForm.title + '日期:'" label-width="90px" prop="shareDate"> |
|||
<el-date-picker v-model="dataForm.shareDate" type="date" :placeholder="'请选择' + dataForm.title + '日期'" value-format="yyyy-MM-dd" /> |
|||
</el-form-item> |
|||
<el-form-item label="出厂编号:" label-width="90px"> |
|||
<el-input v-model="dataForm.factoryNumber" placeholder="核对并填写出厂编号" /> |
|||
</el-form-item> |
|||
<el-form-item label="备 注:" label-width="90px" prop="remark"> |
|||
<el-input v-model="dataForm.remark" type="textarea" placeholder="备注信息" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</template> |
|||
<template v-if="dataForm.title=='取镜'"> |
|||
<div class="signFile"> |
|||
<span class="info-left">取镜签名：</span> |
|||
<div class="signFile-right" @click="signClick"> |
|||
<el-button v-if="lensFlag" type="primary" icon="el-icon-edit" size="small">签名</el-button> |
|||
<span v-else class="sign-img"> |
|||
<img style="width: 80px;height: 40px;" :src="lensSign"> |
|||
</span> |
|||
<span /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<template slot="footer"> |
|||
<el-button @click="visible = false">{{ $t('cancel') }}</el-button> |
|||
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import debounce from 'lodash/debounce' |
|||
export default { |
|||
props: { |
|||
brandList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
fatherFactoryNumber: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
dataForm: { |
|||
status: '4', |
|||
shareDate: '', |
|||
factoryNumber: '', |
|||
signFile: '', |
|||
remark: '' |
|||
}, |
|||
ISCRTForm: false |
|||
} |
|||
}, |
|||
computed: { |
|||
dataRule() { |
|||
// var validataFactoryNumber = (rule, value, callback) => { |
|||
// if (value !== this.dataForm.factoryNumbered) { |
|||
// return callback(new Error('您输入的出厂编号不匹配')) |
|||
// } |
|||
// callback() |
|||
// } |
|||
return { |
|||
shareDate: [ |
|||
{ required: true, message: '请选择日期', trigger: 'change' } |
|||
] |
|||
// factoryNumber: [ |
|||
// { required: true, validator: validataFactoryNumber, trigger: 'blur' } |
|||
// ] |
|||
} |
|||
}, |
|||
lensFlag: { |
|||
get() { |
|||
return this.$store.getters.lensFlag |
|||
}, |
|||
set(val) {} |
|||
}, |
|||
lensSign: { |
|||
get() { |
|||
return this.$store.getters.lensSign |
|||
}, |
|||
set(val) { |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.visible = true |
|||
if (this.dataForm.title !== '取镜记录') { |
|||
this.$nextTick(() => { |
|||
this.$store.commit('lensSign', '') |
|||
this.$store.commit('lensFlag', true) |
|||
this.$refs.dataForm.resetFields() // 重置表单 |
|||
}) |
|||
} |
|||
this.getTaskAwayLogHandle() |
|||
}, |
|||
// 获取取镜记录 |
|||
async getTaskAwayLogHandle() { |
|||
const { data: res } = await this.$http.get('/dp/getTaskAwayLog', { |
|||
params: { |
|||
dpId: this.dataForm.dpId |
|||
} |
|||
}) |
|||
this.dataForm = { |
|||
...this.dataForm, |
|||
...res.data |
|||
} |
|||
res.data.factoryNumber ? '' : this.dataForm.factoryNumber = this.fatherFactoryNumber |
|||
if (this.dataForm.title === '退货') { |
|||
this.dataForm.remark = '' |
|||
} |
|||
}, |
|||
signClick() { |
|||
// this.$parent.$parent.$parent.$parent.beginSign(2) |
|||
this.$store.commit('beginSign', 5) |
|||
}, |
|||
// 表单提交 320321188808123330 18888888888 |
|||
dataFormSubmitHandle: debounce(function() { |
|||
this.dataForm.signFile = this.$store.getters.lensSign |
|||
if (this.dataForm.title !== '取镜记录') { |
|||
this.$refs.dataForm.validate((valid) => { |
|||
if (!valid) { |
|||
return false |
|||
} |
|||
// if (this.dataForm.title === '取镜' && !this.dataForm.signFile) { |
|||
// this.$message.error('请填写签名') |
|||
// return false |
|||
// } |
|||
// 取镜/退货 |
|||
this.$http.post(this.dataForm.title === '取镜' ? '/dp/takeAway' : '/dp/returnDp', this.dataForm).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$message({ |
|||
message: this.$t('prompt.success'), |
|||
type: 'success', |
|||
duration: 500, |
|||
onClose: () => { |
|||
this.visible = false |
|||
this.$emit('getDataList') |
|||
} |
|||
}) |
|||
}).catch(() => {}) |
|||
}) |
|||
} else { |
|||
this.visible = false |
|||
} |
|||
}, 1000, { leading: true, trailing: false }), |
|||
// 关闭弹框 |
|||
closeDialog() { |
|||
this.$emit('closeDialog') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.oklens-removeLens-returnGoods { |
|||
.sign-img { |
|||
width: 78px; |
|||
height: 36px; |
|||
overflow: hidden; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.info { |
|||
margin-left: 16px; |
|||
margin-bottom: 16px; |
|||
font-size: 14px; |
|||
line-height: 32px; |
|||
} |
|||
.orderInfo,.removeLensDate,.factoryNumber,.remarks,.signFile { |
|||
display: flex; |
|||
line-height: 32px; |
|||
align-items: center; |
|||
} |
|||
.info-left { |
|||
display: inline-block; |
|||
width: 80px; |
|||
text-align: right; |
|||
padding-right: 6px; |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.oklens-removeLens-returnGoods { |
|||
.el-dialog__header { |
|||
margin-bottom:12px |
|||
} |
|||
.el-dialog__body { |
|||
padding-right: 30px; |
|||
} |
|||
.formItemOne .el-form-item__content { |
|||
display: flex; |
|||
} |
|||
.el-date-editor.el-input, .el-date-editor.el-input__inner{ |
|||
width: 100%; |
|||
} |
|||
.el-select { |
|||
display: block; |
|||
} |
|||
.el-input-number { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,175 @@ |
|||
<template> |
|||
<div class="drawer"> |
|||
<div :class="maskClass" @click="closeByMask" /> |
|||
<div :class="mainClass" :style="mainStyle" class="main"> |
|||
<div class="drawer-body"> |
|||
<shrink ref="shrinkTwo" :arrowType="2" @changeType="selectType" @display="closeByButton"/> |
|||
<slot/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import shrink from '@/components/360View/shrink' |
|||
|
|||
export default { |
|||
components: { shrink }, |
|||
props: { |
|||
// 是否打开 |
|||
display: { |
|||
type: Boolean |
|||
}, |
|||
|
|||
// 标题 |
|||
title: { |
|||
type: String, |
|||
default: '标题' |
|||
}, |
|||
|
|||
// 是否显示关闭按钮 |
|||
closable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
// 是否显示遮罩 |
|||
mask: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
// 是否点击遮罩关闭 |
|||
maskClosable: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
// 宽度(支持百分比) |
|||
width: { |
|||
type: String, |
|||
default: '400px' |
|||
}, |
|||
|
|||
// 是否在父级元素中打开 |
|||
inner: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
computed: { |
|||
maskClass: function() { |
|||
return { |
|||
'mask-show': (this.mask && this.display), |
|||
'mask-hide': !(this.mask && this.display), |
|||
'inner': this.inner |
|||
} |
|||
}, |
|||
mainClass: function() { |
|||
return { |
|||
'main-show': this.display, |
|||
'main-hide': !this.display, |
|||
'inner': this.inner |
|||
} |
|||
}, |
|||
mainStyle: function() { |
|||
return { |
|||
width: this.width, |
|||
right: this.display ? '0' : `-${this.width}`, |
|||
borderLeft: this.mask ? 'none' : '1px solid #eee' |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.inner) { |
|||
const box = this.$el.parentNode |
|||
box.style.position = 'relative' |
|||
} |
|||
}, |
|||
methods: { |
|||
closeByMask() { |
|||
this.maskClosable && this.$emit('update:display', false) |
|||
}, |
|||
closeByButton() { |
|||
this.$emit('update:display', false) |
|||
document.getElementsByClassName('drawer')[0].style.display = 'none' |
|||
}, |
|||
// 点击shark上模块展示对应模块 |
|||
selectType(type) { |
|||
this.$parent.dataType = type |
|||
}, |
|||
selectShrink() { |
|||
this.$refs.shrinkTwo.active = 'imgOne' |
|||
}, |
|||
init() { |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.drawer { |
|||
width: auto; |
|||
height: 100%; |
|||
/* 遮罩 */ |
|||
.mask-show { |
|||
//position: fixed; |
|||
//top: 0; |
|||
//left: 0; |
|||
//width: 100%; |
|||
//height: 100%; |
|||
//z-index: 999; |
|||
//background-color: rgba(0,0,0,.5); |
|||
//opacity: 1; |
|||
//transition: opacity .5s; |
|||
} |
|||
.mask-hide { |
|||
opacity: 0; |
|||
transition: opacity .5s; |
|||
} |
|||
|
|||
/* 滑块 */ |
|||
.main { |
|||
position: fixed; |
|||
z-index: 999; |
|||
top: 60px; |
|||
height: calc(100% - 70px); |
|||
background: #fff; |
|||
transition: all 0.5s; |
|||
} |
|||
.main-show { |
|||
opacity: 1; |
|||
} |
|||
.main-hide { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* 某个元素内部显示 */ |
|||
.inner { |
|||
position: absolute; |
|||
} |
|||
|
|||
/* 其他样式 */ |
|||
.drawer-head { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
padding: 0 15px; |
|||
font-size: 14px; |
|||
font-weight: bold; |
|||
border-bottom: 1px solid #eee; |
|||
.close-btn { |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
height: 100%; |
|||
padding-left: 20px; |
|||
} |
|||
} |
|||
.drawer-body { |
|||
display: flex; |
|||
height: 100%; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<div class="detail-view"> |
|||
<imgRecord v-if="imgFlag" :patient-info="patientBaseData" :exam-info="info"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import imgRecord from './img-record' |
|||
export default { |
|||
components: { |
|||
imgRecord |
|||
}, |
|||
data() { |
|||
return { |
|||
imgFlag: false, |
|||
info: {}, |
|||
patientBaseData: {} |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.info = JSON.parse(this.$Base64.decode(this.$route.query.info)) |
|||
this.getPatientData() |
|||
}, |
|||
methods: { |
|||
// 根据id获取患者信息 |
|||
async getPatientData() { |
|||
if (!this.info.patientId) return |
|||
const { data: res } = await this.$http.get( |
|||
'/patient/view/getPatientData', |
|||
{ |
|||
params: { |
|||
patientId: this.info.patientId |
|||
} |
|||
} |
|||
) |
|||
if (res.code === 0) { |
|||
this.patientBaseData = res.data ? res.data : {} |
|||
this.imgFlag = true |
|||
} else { |
|||
this.$message.error(res.msg) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
</style> |
|||
@ -0,0 +1,284 @@ |
|||
<template> |
|||
<div id="fileId" v-resize="handleResize" class="container" file-solt-id="fileId"> |
|||
<div v-if="fileType == 'PDF' && instanceList.length > 1" style="margin: 2px"> |
|||
<el-pagination simple :current-page="curIndex" :total="instanceList.length" defaultPageSize="1" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
<iframe v-if="fileType == 'PDF'" :src="pdfUrl + '#view=FitH,top&pagemode=thumbs'" frameborder="0" style="width: 100%; height: 100%"></iframe> |
|||
<div v-if="fileType == 'DCM'" class="dicom" ref="dicomElement"></div> |
|||
<div v-if="fileType == 'JPG'" style="width: 100%;height: 100%" class="dicom" ref="dicomElement"></div> |
|||
<!-- <iframe v-if="curFile.fileType == 'PDF'" :src="curFile.filePath + '#view=FitH,top&pagemode=thumbs'" frameborder="0" style="width: 100%; height: 100%" />--> |
|||
<!-- <div v-if="curFile.fileType == 'DCM'" ref="dicomElement" class="dicom" />--> |
|||
<!-- <div v-if="curFile.fileType == 'JPG' || curFile.fileType == 'PNG'" ref="imgElement" class="dicom" />--> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
directives: { // 使用局部注册指令的方式 |
|||
resize: { // 指令的名称 |
|||
bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象 |
|||
let width = ''; let height = '' |
|||
function isReize() { |
|||
const style = document.defaultView.getComputedStyle(el) |
|||
if (width !== style.width || height !== style.height) { |
|||
binding.value() |
|||
} |
|||
width = style.width |
|||
height = style.height |
|||
} |
|||
el.__vueSetInterval__ = setInterval(isReize, 300) |
|||
}, |
|||
unbind(el) { |
|||
clearInterval(el.__vueSetInterval__) |
|||
} |
|||
} |
|||
}, |
|||
props: ['fileObject'], |
|||
data() { |
|||
return { |
|||
curFile: this.fileObject, |
|||
curElement: '', |
|||
fileType: '', |
|||
viewportDefault: '', |
|||
zoomValue: '', |
|||
wwwcValue: '', |
|||
renderTime: '', |
|||
pdfUrl: '', |
|||
curIndex: 1, |
|||
total: 1, |
|||
childrenList: [], |
|||
instanceList: [] |
|||
} |
|||
}, |
|||
watch: { |
|||
fileObject(val) { |
|||
this.curFile = val |
|||
} |
|||
}, |
|||
created() { |
|||
this.instanceList = this.fileObject.instanceList || [] |
|||
this.fileType = this.instanceList.length ? this.instanceList[0].imageType : '' |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
handleCurrentChange (val) { |
|||
console.log(val) |
|||
this.pdfUrl = this.instanceList[val - 1].imageId |
|||
}, |
|||
// 加载DICM和图片 |
|||
drawCornerStone(imageUrl, type) { |
|||
const self = this |
|||
let element = '' |
|||
let imageId = '' |
|||
if (type === 'DCM') { |
|||
element = this.$refs.dicomElement |
|||
imageId = 'wadouri:' + imageUrl// dicom文件需要加上前缀'wadouri:' |
|||
} else { |
|||
element = this.$refs.dicomElement |
|||
imageId = imageUrl |
|||
} |
|||
this.$cornerstoneTools.init() |
|||
this.$cornerstone.enable(element) |
|||
element.width = document.documentElement.clientWidth |
|||
element.height = document.documentElement.clientHeight |
|||
this.$cornerstone.loadImage(imageId).then(function (image) { |
|||
if (type === 'DCM') { |
|||
const viewport = self.$cornerstone.getDefaultViewportForImage(element, image) |
|||
self.viewportDefault = viewport |
|||
self.$cornerstone.displayImage(element, image, viewport) |
|||
} else { |
|||
self.$cornerstone.displayImage(element, image) |
|||
} |
|||
}) |
|||
element.addEventListener('cornerstoneimagerendered', this.getZoomRate)// 监听事件 |
|||
// let imageId = '' |
|||
// const self = this |
|||
// if (type === 'DCM') { |
|||
// imageId = 'wadouri:' + imageUrl // dicom文件需要加上前缀'wadouri:' |
|||
// } else { |
|||
// imageId = imageUrl |
|||
// } |
|||
// this.$cornerstoneTools.init() |
|||
// this.$cornerstone.enable(this.curElement) |
|||
// this.curElement.width = document.documentElement.clientWidth |
|||
// this.curElement.height = document.documentElement.clientHeight |
|||
// this.$cornerstone.loadImage(imageId).then(function(image) { |
|||
// // 获取当前图像默认的窗宽窗位 |
|||
// const viewport = self.$cornerstone.getDefaultViewportForImage(self.curElement, image) |
|||
// self.viewportDefault = viewport |
|||
// if (type === 'DCM') { |
|||
// self.$cornerstone.displayImage(self.curElement, image, viewport) |
|||
// } else { |
|||
// self.$cornerstone.displayImage(self.curElement, image) |
|||
// } |
|||
// }) |
|||
}, |
|||
// 重新渲染 |
|||
handleResize() { |
|||
const canvas = document.getElementById('fileId') |
|||
if (this.curElement && canvas) { |
|||
this.curElement.style.width = canvas.offsetWidth + 'px' |
|||
this.curElement.style.height = canvas.offsetHeight + 'px' |
|||
this.$cornerstone.resize(this.curElement) |
|||
} |
|||
}, |
|||
// 窗宽窗位 |
|||
setWwwl() { |
|||
const WwwcTool = this.$cornerstoneTools.WwwcTool |
|||
this.$cornerstoneTools.addTool(WwwcTool) |
|||
this.$cornerstoneTools.setToolActive('Wwwc', { mouseButtonMask: 1 }) |
|||
this.$forceUpdate() |
|||
}, |
|||
// 负片 |
|||
setInvert() { |
|||
if (!this.curElement) return |
|||
this.viewportDefault.invert = !this.viewportDefault.invert |
|||
this.$cornerstone.setViewport(this.curElement, this.viewportDefault) |
|||
}, |
|||
// 缩放 |
|||
setZoom() { |
|||
const ZoomTool = this.$cornerstoneTools.ZoomTool |
|||
this.$cornerstoneTools.addTool(ZoomTool, { |
|||
configuration: { |
|||
invert: false, |
|||
preventZoomOutsideImage: false, |
|||
minScale: 0.1, |
|||
maxScale: 20.0 |
|||
} |
|||
}) |
|||
this.$cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 }) |
|||
}, |
|||
// 移动 |
|||
setMove() { |
|||
const PanTool = this.$cornerstoneTools.PanTool |
|||
this.$cornerstoneTools.addTool(PanTool) |
|||
this.$cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 }) |
|||
}, |
|||
// 放大镜 |
|||
setMagnify() { |
|||
const MagnifyTool = this.$cornerstoneTools.MagnifyTool |
|||
this.$cornerstoneTools.addTool(MagnifyTool) |
|||
this.$cornerstoneTools.setToolActive('Magnify', { mouseButtonMask: 1 }) |
|||
}, |
|||
// 重载 |
|||
setReset() { |
|||
if (!this.curElement) return |
|||
this.$cornerstone.reset(this.curElement) |
|||
}, |
|||
setScroll() { |
|||
const self = this |
|||
const element = this.$refs.dicomElement |
|||
if (!element) return |
|||
this.$cornerstoneTools.init() |
|||
this.$cornerstone.enable(element) |
|||
const s = document.getElementById('fileId') |
|||
element.width = s.clientWidth |
|||
element.height = s.clientHeight |
|||
const series = this.childrenList |
|||
let imageIds = '' |
|||
if (this.fileType === 'DCM') { |
|||
const scheme = 'wadouri' |
|||
imageIds = series.map(seriesImage => `${scheme}:${seriesImage.imageId}`) |
|||
} else { |
|||
imageIds = series.map(seriesImage => `${seriesImage.imageId}`) |
|||
} |
|||
const StackScrollTool = this.$cornerstoneTools.StackScrollTool |
|||
this.total = imageIds.length |
|||
const stack = { |
|||
currentImageIdIndex: 0, |
|||
imageIds |
|||
} |
|||
// load images and set the stack |
|||
// loadAndCacheImage |
|||
this.$cornerstone.loadImage(imageIds[0]).then((image) => { |
|||
const viewport = this.$cornerstone.getDefaultViewportForImage(element, image) |
|||
self.viewportDefault = viewport |
|||
this.$cornerstone.displayImage(element, image, viewport) |
|||
this.$cornerstoneTools.addStackStateManager(element, ['stack']) |
|||
this.$cornerstoneTools.addToolState(element, 'stack', stack) |
|||
}) |
|||
this.$cornerstoneTools.addTool(StackScrollTool) |
|||
this.$cornerstoneTools.setToolActive('StackScroll', { mouseButtonMask: 1 }) |
|||
element.addEventListener('cornerstoneimagerendered', this.getZoomRate)// 监听事件 |
|||
}, |
|||
// 计算缩放/窗宽/窗位/渲染时间 |
|||
getZoomRate(e) { |
|||
if (!this.curElement) return |
|||
const contextData = e.detail |
|||
const viewport = this.$cornerstone.getViewport(this.curElement) |
|||
const dcmaxTools = this.$cornerstoneTools.getToolState(this.curElement, 'stack') |
|||
this.zoomValue = viewport.scale.toFixed(2) |
|||
this.wwwcValue = Math.round(viewport.voi.windowWidth) + '/' + Math.round(viewport.voi.windowCenter) |
|||
this.renderTime = contextData.renderTimeInMs.toFixed(2) |
|||
if (dcmaxTools && dcmaxTools.data && dcmaxTools.data.length) { |
|||
this.curIndex = dcmaxTools.data[0].currentImageIdIndex + 1 |
|||
} |
|||
}, |
|||
initData() { |
|||
if (this.instanceList.length === 1 && this.fileType === 'DCM') { |
|||
this.curElement = this.$refs.imgElement |
|||
const imageUrl = this.instanceList[0].imageId |
|||
this.drawCornerStone(imageUrl, 'DCM') |
|||
this.handleResize() |
|||
} else if (this.instanceList.length === 1 && (this.fileType === 'JPG' || this.fileType === 'PNG')) { |
|||
this.curElement = this.$refs.imgElement |
|||
const imageUrl = this.instanceList[0].imageId |
|||
this.drawCornerStone(imageUrl, 'JPG') |
|||
this.handleResize() |
|||
} else if (this.instanceList.length > 1 && (this.fileType === 'JPG' || this.fileType === 'PNG')) { |
|||
this.curElement = this.$refs.imgElement |
|||
this.childrenList = this.instanceList |
|||
this.setScroll() |
|||
this.handleResize() |
|||
} else if (this.instanceList.length > 1 && this.fileType === 'DCM') { |
|||
console.log('序列', this.instanceList) |
|||
this.curElement = this.$refs.dicomElement |
|||
this.childrenList = this.instanceList |
|||
this.setScroll() |
|||
this.handleResize() |
|||
} else if (this.fileType === 'PDF') { |
|||
console.log('pdf') |
|||
this.pdfUrl = this.instanceList[0].imageId |
|||
this.total = this.instanceList.length |
|||
} |
|||
// if (this.curFile && this.curFile.fileType === 'DCM') { |
|||
// this.curElement = this.$refs.dicomElement |
|||
// const imageUrl = this.curFile.filePath |
|||
// this.drawCornerStone(imageUrl, 'DCM') |
|||
// // 每当图像被cornerstone重新绘制时，将发出CornerstoneImageRendered事件调用 |
|||
// this.curElement.addEventListener('cornerstoneimagerendered', this.getZoomRate)// 监听事件 |
|||
// } else if (this.curFile && (this.curFile.fileType === 'JPG' || this.curFile.fileType === 'PNG')) { |
|||
// const imageUrl = this.curFile.filePath |
|||
// this.curElement = this.$refs.imgElement |
|||
// this.drawCornerStone(imageUrl, 'JPG') |
|||
// this.curElement.addEventListener('cornerstoneimagerendered', this.getZoomRate)// 监听事件 |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.container { |
|||
color: #FFFFFF; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
text-align: center; |
|||
|
|||
.dicom{ |
|||
width: 100% !important; |
|||
height: 100% !important; |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss"> |
|||
.container{ |
|||
.cornerstone-canvas{ |
|||
width: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue