You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

814 lines
24 KiB

3 years ago
<template>
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always">
2 years ago
<div v-if="!onlyRead" class="btnBox">
2 years ago
<el-button v-print="printObj" size="small">打印</el-button>
3 years ago
<el-button type="primary" size="small" @click="handleSaveTable">保存</el-button>
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
</div>
<div id="threeFunc" style="width: 840px;padding-right: 8px">
<div class="flex j-c">
<img width="450" src="@/assets/img/xianganlogo.png">
</div>
2 years ago
<p style="color:#000000;font-size:32px;text-align:center;margin: 16px 0">
3 years ago
青少年儿童屈光发育档案
</p>
<div class="operation-record-table">
<el-table :data="headData" :span-method="headSpanMethod" border style="width: 820px;">
3 years ago
<el-table-column label="" width="" align="center" :resizable="false">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
2 years ago
<el-table-column label="" width="" align="center" :resizable="false" >
3 years ago
<template slot-scope="scope">
<div v-if="scope.row.name == '姓名'">
<div class="width-100 center">
<el-input v-model="scope.row.patientName" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '身高'">
<div class="width-100 center">
<el-input v-model="scope.row.height" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '是否戴镜'">
2 years ago
<div style="display:flex;">
<el-select v-model="scope.row.isMirror" placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.mirrorList"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
</div>
</template>
</el-table-column>
2 years ago
<el-table-column label="" width="" align="center" :resizable="false">
3 years ago
<template slot-scope="scope">
<div v-if="scope.row.name == '姓名'">
<div class="width-100 center">
性别
</div>
</div>
<div v-if="scope.row.name == '身高'">
<div class="width-100 center">
体重
</div>
</div>
<div v-if="scope.row.name == '是否戴镜'">
<div class="width-100 center">
戴镜习惯
</div>
</div>
</template>
</el-table-column>
2 years ago
<el-table-column label="" width="" align="center" :resizable="false">
3 years ago
<template slot-scope="scope">
<div v-if="scope.row.name == '姓名'">
<div class="width-100 center">
<el-input v-model="scope.row.sex" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '身高'">
<div class="width-100 center">
<el-input v-model="scope.row.weight" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '是否戴镜'">
2 years ago
<div style="display:flex;">
<el-select v-model="scope.row.value" placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.mirrorHabit"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
<!-- <div v-for="(item,index) in scope.row.mirrorHabit" :key="index" class="check" @click="item.isSelect = !item.isSelect">-->
<!-- <input type="checkbox" :checked="item.isSelect">-->
<!-- <div>{{ item.name }}</div>-->
<!-- </div>-->
3 years ago
</div>
</div>
</template>
</el-table-column>
2 years ago
<el-table-column label="" width="" align="center" :resizable="false">
3 years ago
<template slot-scope="scope">
<div v-if="scope.row.name == '姓名'">
<div class="width-100 center">
出生日期
</div>
</div>
<div v-if="scope.row.name == '身高'">
<div class="width-100 center">
何时发现视力下降
</div>
</div>
</template>
</el-table-column>
2 years ago
<el-table-column label="" width="" align="center" :resizable="false">
3 years ago
<template slot-scope="scope">
<div v-if="scope.row.name == '姓名'">
2 years ago
<div class="width-140 center">
2 years ago
<el-date-picker
v-model="scope.row.birthday"
type="date"
placeholder="选择日期"
/>
3 years ago
</div>
</div>
<div v-if="scope.row.name == '身高'">
<div class="width-100 center">
<el-input v-model="scope.row.time" placeholder="" />
</div>
</div>
</template>
</el-table-column>
</el-table>
<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 820px">
<el-table-column label="" width="" align="center" :resizable="false">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="" width="" :resizable="false" prop="type">
<template slot-scope="scope">
<div v-if="scope.row.name == '戴镜类型'">
2 years ago
<el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.mirrorType"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
<div v-if="scope.row.name == '旧镜参数'">
2 years ago
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="">
2 years ago
<template slot="prepend">OD:</template>
</el-input>
3 years ago
</div>
</div>
<div v-if="scope.row.name == '父母是否近视'">
2 years ago
<el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.shortsighte"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
<div v-if="scope.row.name == '户外活动时间'">
2 years ago
<el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.outTime"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
<div v-if="scope.row.name == '备注'">
<div class="width-180 center">
<el-input v-model="scope.row.note" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '项目'">
<div class="width-180 center">
OD
</div>
</div>
<div v-if="scope.row.name == '裸眼/旧镜视力'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '是否散瞳'">
2 years ago
<div>
<el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.mydriasis"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
</div>
<div v-if="scope.row.name == '主觉验光'">
<div class="width-180 center">
2 years ago
<el-input v-model="scope.row.od" placeholder="" />
3 years ago
</div>
</div>
<div v-if="scope.row.name == '眼位'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '眼压/mmHg'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '角膜曲率/D'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '角膜厚度/μm'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '处方'">
<div class="width-180 center">
<el-input v-model="scope.row.od" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '建议'">
2 years ago
<el-select v-model="scope.row.value" multiple placeholder="请选择" style="width: 80%">
<el-option
v-for="item in scope.row.suggest"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
3 years ago
</div>
<div v-if="scope.row.name == '眼轴/眼底照/地形图'">
2 years ago
<div class="width-240 center">
3 years ago
<el-input v-model="scope.row.type" placeholder="" />
</div>
</div>
</template>
</el-table-column>
<el-table-column label="" width="" :resizable="false">
<template slot-scope="scope">
<div v-if="scope.row.name == '旧镜参数'">
2 years ago
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="">
2 years ago
<template slot="prepend">OS:</template>
</el-input>
3 years ago
</div>
</div>
<div v-if="scope.row.name == '项目'">
<div class="width-180 center">
OS
</div>
</div>
<div v-if="scope.row.name == '裸眼/旧镜视力'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '主觉验光'">
<div class="width-180 center">
2 years ago
<el-input v-model="scope.row.os" placeholder="" />
3 years ago
</div>
</div>
<div v-if="scope.row.name == '眼位'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '眼压/mmHg'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '角膜曲率/D'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '角膜厚度/μm'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
<div v-if="scope.row.name == '处方'">
<div class="width-180 center">
<el-input v-model="scope.row.os" placeholder="" />
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
2 years ago
isSearch: {
type: String,
default: ''
},
2 years ago
patientId: {
type: String,
default: ''
},
3 years ago
formContent: {
type: Object,
default: () => { }
2 years ago
},
onlyRead: {
type: Boolean,
default: false
3 years ago
}
},
data() {
return {
2 years ago
printObj: {
id: 'threeFunc',
2 years ago
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>,<style>  #printId { width: 100%; !important; } .el-input__prefix { display: none } <style>'
2 years ago
},
3 years ago
dataForm: {
yghcValue: '',
operationListValueOD: []
},
headData: [
{
name: '个人基础信息',
type: ''
},
{
name: '姓名',
patientName: '',
sex: '',
birthday: '',
type: ''
}, {
name: '身高',
height: '',
weight: '',
time: ''
}, {
name: '是否戴镜',
isMirror: '',
2 years ago
mirrorList: [{
name: '是',
id: '1'
}, {
name: '否',
2 years ago
id: '2'
2 years ago
}],
value: '',
mirrorHabit: [{
name: '好',
id: '1',
isSelect: false
}, {
name: '一般',
id: '2',
isSelect: false
}, {
name: '差',
id: '3',
isSelect: false
}],
3 years ago
type: ''
}],
2 years ago
originHeadData: [],
originTableData: [],
3 years ago
tableData: [
{
name: '戴镜类型',
2 years ago
value: '',
mirrorType: [
{
name: '框架',
2 years ago
id: '1',
isSelect: false
},
{
name: 'OK镜',
2 years ago
id: '2',
isSelect: false
}, {
name: 'RGP',
2 years ago
id: '3',
isSelect: false
}, {
name: '软镜',
2 years ago
id: '4',
isSelect: false
}
]
3 years ago
},
{
name: '旧镜参数',
od: '',
os: '',
type: ''
}, {
name: '父母是否近视',
2 years ago
value: '',
shortsighte: [
{
name: '父亲',
2 years ago
id: '1',
isSelect: false
}, {
name: '母亲',
2 years ago
id: '2',
isSelect: false
}, {
name: '父亲和母亲',
2 years ago
id: '3',
isSelect: false
}, {
name: '均无',
2 years ago
id: '4',
isSelect: false
}
]
3 years ago
}, {
name: '户外活动时间',
2 years ago
value: '',
outTime: [
{
2 years ago
name: '\<1h',
id: '1',
isSelect: false
}, {
name: '1h-2h',
2 years ago
id: '2',
isSelect: false
}, {
2 years ago
name: '\>2h',
id: '3',
isSelect: false
}
],
3 years ago
type: ''
}, {
name: '备注',
note: ''
}, {
name: '综合检查信息',
type: '1'
}, {
name: '项目'
}, {
name: '裸眼/旧镜视力',
od: '',
os: ''
}, {
name: '是否散瞳',
2 years ago
value: '',
mydriasis: [
{
name: '未散瞳',
2 years ago
id: '1',
isSelect: false
}, {
name: '美多丽',
2 years ago
id: '2',
isSelect: false
}, {
name: '阿托品',
2 years ago
id: '3',
isSelect: false
}, {
name: '其他',
2 years ago
id: '4',
isSelect: false
}
]
3 years ago
}, {
name: '主觉验光',
od: '',
os: '',
vaod: '',
vaos: '',
type: '2'
}, {
name: '眼位',
od: '',
os: '',
type: ''
}, {
name: '眼压/mmHg',
od: '',
os: ''
}, {
name: '角膜曲率/D',
od: '',
os: ''
}, {
name: '角膜厚度/μm',
od: '',
os: ''
}, {
name: '处方',
od: '',
os: ''
}, {
name: '建议',
suggest: [
{
name: '框架',
2 years ago
id: '1',
isSelect: false
}, {
name: 'OK镜',
2 years ago
id: '2',
isSelect: false
}, {
name: 'RGP',
2 years ago
id: '3',
isSelect: false
}, {
name: '软镜',
2 years ago
id: '4',
isSelect: false
}, {
name: '其他',
2 years ago
id: '5',
isSelect: false
}
]
3 years ago
}, {
name: '眼轴/眼底照/地形图',
type: ''
}]
}
},
2 years ago
mounted() {
this.originTableData = JSON.parse(JSON.stringify(this.tableData))
2 years ago
this.originHeadData = JSON.parse(JSON.stringify(this.headData))
2 years ago
this.getPatientData()
3 years ago
},
methods: {
setData() {
this.headData = this.formContent.a
this.tableData = this.formContent.b
2 years ago
this.getPatientData()
3 years ago
},
reSet() {
2 years ago
this.headData = this.originHeadData
this.tableData = this.originTableData
2 years ago
this.getPatientData()
3 years ago
},
2 years ago
async getPatientData() {
const { data: res } = await this.$http.get(
'/patient/view/getPatientData',
{
params: {
patientId: this.patientId
2 years ago
}
}
2 years ago
)
if (res.code === 0) {
2 years ago
const data = res.data
this.headData[1].patientName = data.patientName
this.headData[1].sex = data.patientSex
this.headData[1].birthday = data.patientBirthday
2 years ago
} else {
this.$message.error(res.msg)
}
},
3 years ago
handleDelete() {
this.$emit('del')
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 5) {
return {
rowspan: 1,
colspan: 3
}
}
} else if (columnIndex === 1) {
if (rowIndex === 0 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4 || rowIndex === 8 || rowIndex === 15 || rowIndex === 16) {
return {
rowspan: 1,
colspan: 2
}
} else if (rowIndex === 5) {
return {
rowspan: 0,
colspan: 0
}
}
} else if (columnIndex === 2) {
if (rowIndex === 0 || rowIndex === 2 || rowIndex === 3 || rowIndex === 4 || rowIndex === 5 || rowIndex === 8 || rowIndex === 15 || rowIndex === 16) {
return {
rowspan: 0,
colspan: 0
}
}
}
},
headSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 1,
colspan: 6
}
}
} else if (columnIndex === 1 || columnIndex === 3) {
if (rowIndex === 3) {
return {
rowspan: 1,
colspan: 2
}
}
} else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
if (rowIndex === 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
},
handlePrint() {
this.printPage('threeFunc')
},
handleSaveTable() {
const data = {
a: this.headData,
b: this.tableData
}
this.$emit('save', data)
}
}
}
</script>
<style lang="scss">
2 years ago
#threeFunc {
.el-input__suffix, .el-input__prefix {
display: none;
}
.width-100 {
.el-input {
width: 100px;
}
}
.width-140 {
.el-input {
width: 125px;
}
}
}
.flex{
display: flex;
}
.j-c{
justify-content: center;
}
2 years ago
.operation-record-table{
.el-input__inner {
border: none;
height: 26px !important;
line-height: 26px !important;
text-align: center;
}
.el-input-group__append, .el-input-group__prepend{
background-color: transparent;
color: #606266;
border: none;
}
.el-table__header-wrapper{
display: none;
}
}
3 years ago
#operation-record {
.btnBox{
display: flex;
justify-content: flex-end;
}
.el-table--border{
border-right: 1px solid #EBEEF5;
}
.operation-record-table {
//width: 100%;
width: 840px !important;
padding-right: 8px;
.operation-text {
font-weight: 700;
}
.text {
font-weight: 700;
}
.sign {
cursor: pointer;
color: #46a1ff;
font-weight: 400;
}
2 years ago
.el-input__inner {
border: none;
height: 26px !important;
line-height: 26px !important;
text-align: center;
}
.el-input__inner {
border-bottom: 1px solid #ccc;
border-radius: 0;
padding: 0;
}
.el-input__prefix {
display: none;
}
3 years ago
}
.center {
text-align: center;
}
.left {
text-align: left;
}
.width-50 {
.el-input {
width: 50px;
}
}
.width-70 {
.el-input {
width: 70px;
}
}
.width-100 {
.el-input {
width: 100px;
}
}
.width-120 {
.el-input {
width: 120px;
}
}
.width-180 {
.el-input {
width: 180px;
}
}
2 years ago
.width-240 {
.el-input {
width: 240px;
}
}
3 years ago
//.el-date-editor.el-input,
//.el-date-editor.el-input__inner {
// width: 140px;
//}
//.el-input__suffix {
// top: -7px;
//}
//.el-checkbox__input.is-checked + .el-checkbox__label {
// color: #606266;
//}
//.el-checkbox__input.is-checked .el-checkbox__inner,
//.el-checkbox__input.is-indeterminate .el-checkbox__inner {
// background: #767676;
// border-color: #767676;
//}
//.el-checkbox__inner:hover,
//.el-checkbox__inner {
// border-color: #767676;
//}
//.el-radio__input.is-checked + .el-radio__label {
// color: #606266;
//}
//.el-radio__input.is-checked .el-radio__inner {
// background: #767676;
// border-color: #767676;
//}
//.el-radio {
// margin-right: 8px;
// display: block;
//}
//.el-radio__inner {
// border: 1px solid #767676 !important;
//}
//.el-radio__inner:hover {
// border-color: #767676;
//}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
background: none !important;
}
.has-gutter {
display: none;
.cell {
font-weight: 700;
}
.el-table__cell {
background: #ced4d9;
}
}
.el-table__header-wrapper{
display: none;
}
}
</style>