14 changed files with 988 additions and 98 deletions
@ -0,0 +1,497 @@ |
|||||
|
<template> |
||||
|
<div class="callMedical"> |
||||
|
<div class="archives-content"> |
||||
|
<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 v-if="isSearch === '1'" class="record" @click="addRecord('门急诊电子病历')"> |
||||
|
<p>门急诊电子病历</p> |
||||
|
<img v-if="!onlyRead" :src="require('@/assets/img/add.png')" alt=""> |
||||
|
</div> |
||||
|
<div class="comonForm-tab"> |
||||
|
<el-radio-group v-model="formType" size="small"> |
||||
|
<el-radio-button label="门诊" name="1" style="" /> |
||||
|
<!-- <el-radio-button label="手术" name="2" style=""></el-radio-button>--> |
||||
|
<el-radio-button label="其他" name="3" style="" /> |
||||
|
</el-radio-group> |
||||
|
<div v-if="formType === '门诊'" class="record" @click="addRecord"> |
||||
|
<p>门急诊电子病历</p> |
||||
|
<img :src="require('@/assets/img/add.png')" alt=""> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { dateFilterTwo } from '@/filters/index.js' |
||||
|
import eventBus from '@/page-subspecialty/utils/eventBus' |
||||
|
const Base64 = require('js-base64').Base64 |
||||
|
export default { |
||||
|
components: { |
||||
|
}, |
||||
|
mixins: [], |
||||
|
props: { |
||||
|
isSearch: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
patientIdNumber: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
patientId: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
onlyRead: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
inject: ['refresh'], |
||||
|
data() { |
||||
|
return { |
||||
|
id: '', |
||||
|
name: '', |
||||
|
curIndex: 0, |
||||
|
formIdList: [], |
||||
|
formList: [], |
||||
|
defaultChecked: [], |
||||
|
formType: '门诊' |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.getFormId() |
||||
|
this.getFormList() |
||||
|
}, |
||||
|
methods: { |
||||
|
handleForm(index, item) { |
||||
|
this.curIndex = index |
||||
|
this.id = item.id |
||||
|
this.name = item.name |
||||
|
this.$parent.name = item.name |
||||
|
if (item.name === '门急诊电子病历') { |
||||
|
this.$parent.caseId = this.id |
||||
|
} |
||||
|
}, |
||||
|
pushtoArray(myarr, mydata) { |
||||
|
if (myarr.length === 0) { |
||||
|
myarr.push(mydata) |
||||
|
} else { |
||||
|
let oktopush = true |
||||
|
for (const ele in myarr) { |
||||
|
if (myarr[ele].id === mydata.id) { |
||||
|
oktopush = false |
||||
|
} |
||||
|
} |
||||
|
if (oktopush) { |
||||
|
myarr.push(mydata) |
||||
|
} |
||||
|
} |
||||
|
return myarr |
||||
|
}, |
||||
|
getFormId() { |
||||
|
eventBus.$off('getFormId') |
||||
|
eventBus.$on('getFormId', data => { |
||||
|
console.log(data) |
||||
|
this.formIdList = data |
||||
|
this.pushtoArray(this.formIdList, data) |
||||
|
this.editForm() |
||||
|
}) |
||||
|
}, |
||||
|
// 编辑门诊电子病历 |
||||
|
async editForm() { |
||||
|
const params = { |
||||
|
flag: 8, |
||||
|
name: this.name, |
||||
|
id: this.id, |
||||
|
patientId: this.patientId, |
||||
|
platform: this.isSearch, |
||||
|
jsonText: JSON.stringify(this.formIdList) |
||||
|
} |
||||
|
const { data: res } = await this.$http.post('/case/update', params) |
||||
|
if (res.code === 0) { |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
// 添加表单 |
||||
|
addRecord(name) { |
||||
|
this.saveTableData(name) |
||||
|
}, |
||||
|
async saveTableData(name) { |
||||
|
const date = dateFilterTwo(this.$moment().format('L')) |
||||
|
const params = { |
||||
|
flag: 8, |
||||
|
name: name, |
||||
|
createTime: date + ' 00:00:00', |
||||
|
patientId: this.patientId, |
||||
|
platform: this.isSearch |
||||
|
} |
||||
|
const { data: res } = await this.$http.post('/case/save', params) |
||||
|
if (res.code === 0) { |
||||
|
this.$message.success('保存成功') |
||||
|
this.getFormList() |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
async deleteForm() { |
||||
|
const params = { |
||||
|
id: this.id |
||||
|
} |
||||
|
const { data: res } = await this.$http.post('/case/delete', params) |
||||
|
if (res.code === 0) { |
||||
|
this.$message.success('删除成功') |
||||
|
this.getFormList() |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
}, |
||||
|
async getFormList() { |
||||
|
const { data: res } = await this.$http.get('/patient/view/getCases', { |
||||
|
params: { |
||||
|
patientId: this.patientId, |
||||
|
platform: this.isSearch, |
||||
|
flag: 8 |
||||
|
} |
||||
|
}) |
||||
|
if (res.code === 0) { |
||||
|
this.formList = res.data || [] |
||||
|
if (this.formList.length) { |
||||
|
const first = this.formList[0] |
||||
|
if (this.id === '') { |
||||
|
this.handleForm(0, first) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.$message.error(res.msg) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.callMedical { |
||||
|
height: 100%; |
||||
|
.text-ellipsis { |
||||
|
white-space: nowrap; // 段落不换行 |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.printer { |
||||
|
border: 1px solid #ccc; |
||||
|
width: 56px; |
||||
|
height: 32px; |
||||
|
border-radius: 3px; |
||||
|
margin: 0; |
||||
|
margin-left: 10px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.archives-content { |
||||
|
//display: flex; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
.formBox{ |
||||
|
cursor: pointer; |
||||
|
padding: 2px 8px; |
||||
|
border-radius: 2px; |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.active { |
||||
|
color: white; |
||||
|
background-color: #1C76FD; |
||||
|
} |
||||
|
.curFont { |
||||
|
color: #A6A4A4; |
||||
|
} |
||||
|
.activeFont { |
||||
|
color: #D9D9D9; |
||||
|
} |
||||
|
.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; |
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.content-right { |
||||
|
padding: 12px; |
||||
|
position: relative; |
||||
|
flex: 1; |
||||
|
text-align: center; |
||||
|
background-color: #F0F2F5; |
||||
|
overflow-y: hidden; |
||||
|
.content-right-buttonClick { |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
background: #2e2e2e; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.editor-CRF { |
||||
|
height: 93%; |
||||
|
} |
||||
|
.content-right-CRF { |
||||
|
background: #5c5c5c; |
||||
|
overflow-x: auto; |
||||
|
padding: 16px 16px 16px 16px; |
||||
|
position: relative; |
||||
|
height: 100%; |
||||
|
} |
||||
|
.content-right-CRF-class { |
||||
|
padding-right: 178px; |
||||
|
} |
||||
|
.suspension-button { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 10px; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
.case-template, |
||||
|
.intelligent-filling { |
||||
|
cursor: pointer; |
||||
|
height: 140px; |
||||
|
width: 32px; |
||||
|
background: #fff; |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); |
||||
|
span { |
||||
|
writing-mode: vertical-rl; |
||||
|
letter-spacing: 6px; |
||||
|
} |
||||
|
} |
||||
|
.case-template:hover, |
||||
|
.intelligent-filling:hover { |
||||
|
background: linear-gradient(270deg, #f4f8fb 0%, #deebff 66.15%); |
||||
|
} |
||||
|
.case-template { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style lang="scss"> |
||||
|
.callMedical { |
||||
|
.el-button .el-button--text .el-button--mini { |
||||
|
padding: 0; |
||||
|
} |
||||
|
.tree-date { |
||||
|
font-size: 14px; |
||||
|
color: #ccc; |
||||
|
} |
||||
|
.tree-date-active { |
||||
|
color: #e4e4e4; |
||||
|
} |
||||
|
.el-tree-node { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
.el-tree-node__content { |
||||
|
margin-bottom: 4px; |
||||
|
height: 35px; |
||||
|
//padding-left: 0 !important; |
||||
|
} |
||||
|
//.tree-children { |
||||
|
// padding: 2px 0 2px 20px; |
||||
|
// position: relative; |
||||
|
//} |
||||
|
//.el-tree-node__expand-icon.is-leaf { |
||||
|
// display: none; |
||||
|
//} |
||||
|
.tree-children:hover { |
||||
|
.tree-button { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
.tree-button { |
||||
|
position: absolute; |
||||
|
bottom: 6px; |
||||
|
right: 4px; |
||||
|
display: none; |
||||
|
} |
||||
|
.tree-button-active { |
||||
|
color: #fff; |
||||
|
} |
||||
|
.custom-tree-node { |
||||
|
flex: 1; |
||||
|
padding-top: 6px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.tree-forname { |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
width: 90%; |
||||
|
} |
||||
|
.el-tree-node__content:hover, |
||||
|
.el-upload-list__item:hover { |
||||
|
background: none; |
||||
|
} |
||||
|
.el-icon-caret-right:before { |
||||
|
color: #262626; |
||||
|
} |
||||
|
} |
||||
|
.comonForm-tab { |
||||
|
#tab-mz { |
||||
|
padding-left: 14px !important; |
||||
|
} |
||||
|
.el-tabs__nav-wrap::after { |
||||
|
height: 0; |
||||
|
} |
||||
|
.el-tabs__header { |
||||
|
padding-right: 0 !important; |
||||
|
} |
||||
|
.el-tabs__item.is-active { |
||||
|
color: #fff; |
||||
|
background: #1890ff; |
||||
|
} |
||||
|
.el-tabs__item { |
||||
|
background: #f2f3f5; |
||||
|
padding: 0 14px; |
||||
|
margin-left: 1px; |
||||
|
height: 35px; |
||||
|
line-height: 35px; |
||||
|
} |
||||
|
.el-tabs__content { |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
} |
||||
|
.see-doctor .comonForm-tab .el-tabs__item:last-child { |
||||
|
padding-right: 14px !important; |
||||
|
} |
||||
|
.see-doctor .comonForm-tab .el-tabs__item:nth-child(2) { |
||||
|
padding-left: 14px !important; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue