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