newPeter7
3 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