bianyaqi
3 years ago
8 changed files with 811 additions and 1110 deletions
@ -0,0 +1,197 @@ |
|||||
|
<template> |
||||
|
<div class="content-left"> |
||||
|
<div class="content-left-top"> |
||||
|
<div v-for="(item, index) in formList" :key="index" class="formBox" style="margin-top: 12px" :class="[index === curIndex ? 'active' : '']" @click="handleForm(index, item)"> |
||||
|
<p :class="[index === curIndex ? 'activeFont' : 'curFont']">{{ item.createTime }}</p> |
||||
|
<p> |
||||
|
{{ item.name }} |
||||
|
</p> |
||||
|
</div> |
||||
|
<img v-if="!formList" src="@/assets/img/nodata.png" alt="" class="nodata"> |
||||
|
<!-- <div class="button"><i class="el-icon-plus" /> 新建表单</div> --> |
||||
|
</div> |
||||
|
<div class="content-left-bottom"> |
||||
|
<div class="commonForm-text "> |
||||
|
<span>常用表单</span> |
||||
|
<span class="line" /> |
||||
|
<el-checkbox v-model="defaultChecked">默认新建今日</el-checkbox> |
||||
|
</div> |
||||
|
<div class="comonForm-tab"> |
||||
|
<el-radio-group v-model="formType" size="small"> |
||||
|
<el-radio-button label="门诊" name="门诊" style="" /> |
||||
|
<el-radio-button label="报告" name="报告" style="" /> |
||||
|
<el-radio-button label="其他" name="其他" style="" /> |
||||
|
</el-radio-group> |
||||
|
<div v-if="formType === '门诊'"> |
||||
|
<div v-for="(item,index) in outFormNameList" :key="`${item}_${index}`" class="record"> |
||||
|
<p>{{ item }}</p> |
||||
|
<img v-if="!onlyRead&&isSearch == '2'" :src="require('@/assets/img/add.png')" alt="" @click="addRecord(item)"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="formType === '报告'" class="record"> |
||||
|
<p>报告</p> |
||||
|
<img v-if="!onlyRead&&isSearch == '2'" :src="require('@/assets/img/add.png')" alt="" @click="addRecord('报告')"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'LeftFormList', |
||||
|
props: ['onlyRead', 'isSearch', 'patientId', 'formList', 'curIndex'], |
||||
|
data() { |
||||
|
return { |
||||
|
formType: '门诊', |
||||
|
defaultChecked: [], |
||||
|
outFormNameList: ['门急诊电子病历', '眼科激光手术患者知情同意书', '眼科激光手术治疗', '眼底血管造影知情同意书'] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
addRecord(name) { |
||||
|
this.$emit('addRecord', name) |
||||
|
}, |
||||
|
handleForm(index, item) { |
||||
|
this.$emit('handleForm', { index, item }) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.content-left { |
||||
|
width: 185px; |
||||
|
height: 100%; |
||||
|
margin-right: 14px; |
||||
|
.nodata { |
||||
|
width: 175px; |
||||
|
margin-top: 30px; |
||||
|
} |
||||
|
.content-left-top, |
||||
|
.content-left-bottom { |
||||
|
height: 50%; |
||||
|
} |
||||
|
.tree-botton-arr { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
.tree-date { |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
.content-left-top { |
||||
|
overflow-y: auto; |
||||
|
margin-bottom: 16px; |
||||
|
.formBox{ |
||||
|
cursor: pointer; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 2px; |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.active { |
||||
|
color: white; |
||||
|
background-color: #1C76FD; |
||||
|
} |
||||
|
.curFont { |
||||
|
color: #A6A4A4; |
||||
|
} |
||||
|
.activeFont { |
||||
|
color: #D9D9D9; |
||||
|
} |
||||
|
.CRFList-list { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding-left: 24px; |
||||
|
padding-right: 16px; |
||||
|
color: #000; |
||||
|
} |
||||
|
.CRFList-list { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-size: 14px; |
||||
|
cursor: pointer; |
||||
|
.el-icon-more { |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
} |
||||
|
.CRFList-icon:hover { |
||||
|
color: #ff2929; |
||||
|
} |
||||
|
.CRFList-list-active { |
||||
|
background-color: #1890ff; |
||||
|
color: #fff; |
||||
|
.el-icon-more { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.button { |
||||
|
margin-top: 16px; |
||||
|
background: #f2f3f5; |
||||
|
border-radius: 4px; |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
text-align: center; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.button:hover, |
||||
|
.el-icon-plus:hover { |
||||
|
color: #1890ff; |
||||
|
} |
||||
|
} |
||||
|
.content-left-bottom { |
||||
|
.commonForm-text { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 14px; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.line { |
||||
|
border-bottom: 1px solid #e5e6eb; |
||||
|
flex: 1; |
||||
|
display: inline-block; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
.comonForm-tab { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.comonForm-tab-Pane { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
.comonForm-list { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
font-size: 14px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 0 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.comonForm-list:hover { |
||||
|
background-color: #f4f8fb; |
||||
|
color: #1d2129; |
||||
|
} |
||||
|
.comonForm-icon:hover { |
||||
|
color: #1890ff; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.record{ |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding-top: 12px; |
||||
|
cursor: pointer; |
||||
|
p { |
||||
|
display: inline-block; |
||||
|
font-size: 14px; |
||||
|
color: rgba(0, 0, 0, 0.85); |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
img { |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
margin-top: 3px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,609 +0,0 @@ |
|||||
<template> |
|
||||
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
|
||||
<div class="btnBox"> |
|
||||
<el-button v-print="'#threeFunc'" size="small">打印</el-button> |
|
||||
<el-button type="primary" size="small" @click="handleSaveTable">保存</el-button> |
|
||||
</div> |
|
||||
<div id="threeFunc" style="width: 840px;padding-right: 8px"> |
|
||||
<p style="color:#000000;font-size:32px;margin:0 0 30px 0;text-align:center;"> |
|
||||
青少年儿童屈光发育档案 |
|
||||
</p> |
|
||||
<div class="operation-record-table"> |
|
||||
<el-table :data="headData" :span-method="headSpanMethod" border style="width: 820px; margin-top: 20px"> |
|
||||
<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 == '姓名'"> |
|
||||
<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 == '是否戴镜'"> |
|
||||
<div class="width-100 center"> |
|
||||
<el-input v-model="scope.row.isMirror" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<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> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<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 == '是否戴镜'"> |
|
||||
<div class="width-100 center"> |
|
||||
<el-input v-model="scope.row.mirrorHabit" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<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> |
|
||||
<el-table-column label="" width="" :resizable="false"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div v-if="scope.row.name == '姓名'"> |
|
||||
<div class="width-100 center"> |
|
||||
<el-input v-model="scope.row.birthday" placeholder="" /> |
|
||||
</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 == '戴镜类型'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-checkbox-group v-model="scope.row.mirrorType"> |
|
||||
<el-checkbox label="框架" /> |
|
||||
<el-checkbox label="OK镜" /> |
|
||||
<el-checkbox label="RGP" /> |
|
||||
<el-checkbox label="软镜" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '旧镜参数'"> |
|
||||
<div class="width-120 center"> |
|
||||
OD:<el-input v-model="scope.row.od" placeholder="" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '父母是否近视'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-checkbox-group v-model="scope.row.shortsighte"> |
|
||||
<el-checkbox label="父亲" /> |
|
||||
<el-checkbox label="母亲" /> |
|
||||
<el-checkbox label="父亲和母亲" /> |
|
||||
<el-checkbox label="均无" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '户外活动时间'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-checkbox-group v-model="scope.row.outTime"> |
|
||||
<el-checkbox label="<1h" /> |
|
||||
<el-checkbox label="1h-2h" /> |
|
||||
<el-checkbox label=">2h" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</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 == '是否散瞳'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-checkbox-group v-model="scope.row.mydriasis"> |
|
||||
<el-checkbox label="未散瞳" /> |
|
||||
<el-checkbox label="美多丽" /> |
|
||||
<el-checkbox label="阿托品" /> |
|
||||
<el-checkbox label="其他" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '主觉验光'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-input v-model="scope.row.od" placeholder="" style="width: 100px" /> |
|
||||
</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 == '建议'"> |
|
||||
<div class="width-180 center"> |
|
||||
<el-checkbox-group v-model="scope.row.suggest"> |
|
||||
<el-checkbox label="框架" /> |
|
||||
<el-checkbox label="OK镜" /> |
|
||||
<el-checkbox label="RGP" /> |
|
||||
<el-checkbox label="软镜" /> |
|
||||
<el-checkbox label="其他" /> |
|
||||
</el-checkbox-group> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div v-if="scope.row.name == '眼轴/眼底照/地形图'"> |
|
||||
<div class="width-180 center"> |
|
||||
<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 == '旧镜参数'"> |
|
||||
<div class="width-120 center"> |
|
||||
OS:<el-input v-model="scope.row.os" placeholder="" /> |
|
||||
</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"> |
|
||||
<el-input v-model="scope.row.os" placeholder="" style="width: 100px" /> |
|
||||
</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: { |
|
||||
archiveCaseCRFItem: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
}, |
|
||||
formContent: { |
|
||||
type: Object, |
|
||||
default: () => { } |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataForm: { |
|
||||
yghcValue: '', |
|
||||
operationListValueOD: [] |
|
||||
}, |
|
||||
headData: [ |
|
||||
{ |
|
||||
name: '个人基础信息', |
|
||||
type: '' |
|
||||
}, |
|
||||
{ |
|
||||
name: '姓名', |
|
||||
patientName: '', |
|
||||
sex: '', |
|
||||
birthday: '', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '身高', |
|
||||
height: '', |
|
||||
weight: '', |
|
||||
time: '' |
|
||||
}, { |
|
||||
name: '是否戴镜', |
|
||||
isMirror: '', |
|
||||
mirrorHabit: '', |
|
||||
type: '' |
|
||||
}], |
|
||||
tableData: [ |
|
||||
{ |
|
||||
name: '戴镜类型', |
|
||||
mirrorType: [] |
|
||||
}, |
|
||||
{ |
|
||||
name: '旧镜参数', |
|
||||
od: '', |
|
||||
os: '', |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '父母是否近视', |
|
||||
shortsighte: [] |
|
||||
}, { |
|
||||
name: '户外活动时间', |
|
||||
outTime: [], |
|
||||
type: '' |
|
||||
}, { |
|
||||
name: '备注', |
|
||||
note: '' |
|
||||
}, { |
|
||||
name: '综合检查信息', |
|
||||
type: '1' |
|
||||
}, { |
|
||||
name: '项目' |
|
||||
}, { |
|
||||
name: '裸眼/旧镜视力', |
|
||||
od: '', |
|
||||
os: '' |
|
||||
}, { |
|
||||
name: '是否散瞳', |
|
||||
mydriasis: [] |
|
||||
}, { |
|
||||
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: '眼轴/眼底照/地形图', |
|
||||
type: '' |
|
||||
}] |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
operationRecord: { |
|
||||
get() { |
|
||||
return this.$store.getters.operationRecord |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
operationRecord: { |
|
||||
handler(value) { |
|
||||
console.log(value) |
|
||||
}, |
|
||||
deep: true, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
// this.printPage('threeFunc') |
|
||||
}, |
|
||||
methods: { |
|
||||
setData() { |
|
||||
this.headData = this.formContent.a |
|
||||
this.tableData = this.formContent.b |
|
||||
}, |
|
||||
// 签名 |
|
||||
singHandle(text) { |
|
||||
const value = { |
|
||||
text: text, |
|
||||
pageName: 'operationRecord' |
|
||||
} |
|
||||
this.$store.commit('beginSign', value) |
|
||||
}, |
|
||||
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"> |
|
||||
|
|
||||
#operation-record { |
|
||||
//height: 93%; |
|
||||
// overflow: auto; |
|
||||
.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; |
|
||||
} |
|
||||
} |
|
||||
.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; |
|
||||
} |
|
||||
} |
|
||||
.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; |
|
||||
} |
|
||||
//.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> |
|
||||
@ -0,0 +1,178 @@ |
|||||
|
<template> |
||||
|
<div id="operation-record" style=" background: #fff; padding: 10px 20px 50px 20px;page-break-after:always"> |
||||
|
<div class="btnBox"> |
||||
|
<el-button v-print="'#reportForm'" size="small">打印</el-button> |
||||
|
<el-button type="primary" size="small" @click="handleSaveTable">保存</el-button> |
||||
|
<el-button type="danger" size="small" @click="formDelete">删除</el-button> |
||||
|
</div> |
||||
|
<div id="reportForm" style="width: 840px;padding-right: 8px;text-align: left"> |
||||
|
<div class="flex" style="width: 240px">患者姓名：<el-input v-model="formData.patientName" style="flex: 1" /></div> |
||||
|
<table class="treatAction"> |
||||
|
<thead> |
||||
|
<tr> |
||||
|
<td colspan="2">睑板腺综合治疗睑脂性状分析</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>右眼</td> |
||||
|
<td>左眼</td> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<div v-for="(item,index) in formData.form.OD" :key="index"> |
||||
|
<el-checkbox v-model="item.isSelect"> |
||||
|
{{ item.name }} |
||||
|
<el-input v-if="item.isEdit" v-model="item.remark" /> |
||||
|
</el-checkbox> |
||||
|
</div> |
||||
|
</td> |
||||
|
<td><div v-for="(item,index) in formData.form.OS" :key="index"> |
||||
|
<el-checkbox v-model="item.isSelect"> |
||||
|
{{ item.name }} |
||||
|
<el-input v-if="item.isEdit" v-model="item.remark" /> |
||||
|
</el-checkbox> |
||||
|
</div></td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td colspan="2"> |
||||
|
<div class="flex"> |
||||
|
备注：<el-input style="flex:1" /> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td colspan="2"> |
||||
|
<div class="flex"> |
||||
|
操作者：<el-input style="flex:1" /> |
||||
|
</div> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'ReportForm', |
||||
|
props: { |
||||
|
jsonText: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
origin: {}, |
||||
|
formData: { |
||||
|
patientName: '', |
||||
|
remark: '', |
||||
|
operator: '', |
||||
|
form: { |
||||
|
checkList: [], |
||||
|
OD: [ |
||||
|
{ |
||||
|
name: '分泌物清亮', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物轻浑，云雾状', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物浑浊，粘稠可见颗粒物质', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物呈牙膏状或压迫出现气泡', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '其他:', |
||||
|
isSelect: false, |
||||
|
isEdit: true, |
||||
|
remark: '' |
||||
|
} |
||||
|
], |
||||
|
OS: [ |
||||
|
{ |
||||
|
name: '分泌物清亮', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物轻浑，云雾状', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物浑浊，粘稠可见颗粒物质', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '分泌物呈牙膏状或压迫出现气泡', |
||||
|
isSelect: false |
||||
|
}, { |
||||
|
name: '其他:', |
||||
|
isSelect: false, |
||||
|
isEdit: true, |
||||
|
remark: '' |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
jsonText(val) { |
||||
|
if (val) { |
||||
|
this.formData = JSON.parse(val) |
||||
|
} else { |
||||
|
this.formData = this.origin |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
this.origin = JSON.parse(JSON.stringify(this.formData)) |
||||
|
if (this.jsonText) { |
||||
|
this.formData = JSON.parse(this.jsonText) |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSaveTable() { |
||||
|
this.$emit('handleSaveTable', this.formData) |
||||
|
}, |
||||
|
formDelete() { |
||||
|
this.$emit('formDelete') |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.flex{ |
||||
|
display: flex; |
||||
|
} |
||||
|
.treatAction{ |
||||
|
width: 100%; |
||||
|
margin-top: 10px; |
||||
|
thead{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
tr td,tr th{ |
||||
|
border: 1px solid #ccc; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
td{ |
||||
|
width: 25%; |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-input__inner { |
||||
|
border: none; |
||||
|
height: 26px !important; |
||||
|
line-height: 26px !important; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
::v-deep .el-input__inner { |
||||
|
border-bottom: 1px solid #ccc; |
||||
|
border-radius: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
::v-deep .el-input__prefix { |
||||
|
display: none; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue