Browse Source

右侧抽屉修改

360view
bianyaqi 2 years ago
parent
commit
c9d39dc0e3
  1. 28
      src/components/360View/drawer.vue
  2. 8
      src/components/360View/index1.vue
  3. 14
      src/components/360View/medicalRecord/index.vue
  4. 23
      src/components/360View/medicalRecord/outPatientRecord/leftFormList.vue
  5. 21
      src/components/360View/shrink.vue

28
src/components/360View/drawer.vue

@ -3,8 +3,8 @@
<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/>
<shrink ref="shrinkTwo" :cur-type="curType" :arrow-type="2" @changeType="selectType" @display="closeByButton" />
<slot />
</div>
</div>
</div>
@ -16,6 +16,9 @@ import shrink from '@/components/360View/shrink'
export default {
components: { shrink },
props: {
curType: {
type: Number
},
//
display: {
type: Boolean
@ -76,7 +79,8 @@ export default {
return {
width: this.width,
right: this.display ? '0' : `-${this.width}`,
borderLeft: this.mask ? 'none' : '1px solid #eee'
borderLeft: this.mask ? 'none' : '1px solid #eee',
display: !(this.mask && this.display) ? 'none' : ''
}
}
},
@ -113,15 +117,15 @@ export default {
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;
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;

8
src/components/360View/index1.vue

@ -195,8 +195,8 @@
</div>
</div>
</div>
<shrink ref="shrinks" :arrow-type="1" @display="handleDisplay" />
<drawer ref="drawers" :display.sync="display" :width="drawerWidth" :mask="false">
<shrink ref="shrinks" :arrow-type="1" @display="handleDisplay" @changeType="changeType" />
<drawer ref="drawers" :cur-type="dataType" :display.sync="display" :width="drawerWidth" :mask="true">
<!-- 关键指标-->
<key-indicators
v-if="dataType === 1"
@ -341,6 +341,10 @@ export default {
}
})
},
changeType(val) {
this.dataType = val
this.display = true
},
handleDisplay(val) {
this.dataType = 1
if (val) {

14
src/components/360View/medicalRecord/index.vue

@ -1,8 +1,8 @@
<template>
<div class="archives">
<div class="archives-content">
<div class="content-left" v-if="isSearch === '1' || isSearch === '3'">
<callMedical :is-search="isSearch" :patientId="patientId" :only-read="onlyRead"></callMedical>
<div v-if="isSearch === '1' || isSearch === '3'" class="content-left">
<callMedical :is-search="isSearch" :patient-id="patientId" :only-read="onlyRead" />
</div>
<left-form-list
v-if="isSearch === '2'"
@ -13,13 +13,17 @@
:form-list="formList"
:cur-index="curIndex"
@handleForm="handleForm"
@deleteForm="formDelete"
@addRecord="addRecord"
/>
<div class="content-right">
<div v-if="isSearch === '1' || isSearch === '3'" style="height: 100%">
<ourPatientRecord v-if="name === '门急诊电子病历'" :patientId="patientId" :only-read="onlyRead" :is-search="isSearch" :case-id="caseId"></ourPatientRecord>
<ourPatientRecord v-if="name === '门急诊电子病历'" :patient-id="patientId" :only-read="onlyRead" :is-search="isSearch" :case-id="caseId" />
</div>
<div v-if="formList.length && isSearch === '2'">
<div v-if="formList.length && isSearch === '2'" style="height: 100%">
<div style="height: 100%">
<ourPatientRecord v-if="name === '门急诊电子病历'" :patient-id="patientId" :only-read="onlyRead" :is-search="isSearch" :case-id="caseId" />
</div>
<InformedConsent v-if="name==='眼科激光手术患者知情同意书'" :json-text="jsonText" @handleSaveTable="updateForm" @formDelete="formDelete" />
<mra-form v-if="name==='眼底血管造影知情同意书'" :json-text="jsonText" @handleSaveTable="updateForm" @formDelete="formDelete" />
<laser-surgery v-if="name==='眼科激光手术治疗'" :json-text="jsonText" @handleSaveTable="updateForm" @formDelete="formDelete" />
@ -328,7 +332,7 @@ export default {
text-align: center;
background-color: #F0F2F5;
overflow: hidden;
overflow-y: scroll;
overflow-y: scroll;
.content-right-buttonClick {
display: flex;
justify-content: flex-end;

23
src/components/360View/medicalRecord/outPatientRecord/leftFormList.vue

@ -1,11 +1,14 @@
<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 v-for="(item, index) in formList" :key="index" class="flex" style="margin-top: 12px" :class="[index === curIndex ? 'active' : '']" @click="handleForm(index, item)">
<div class="formBox">
<p :class="[index === curIndex ? 'activeFont' : 'curFont']">{{ item.createTime }}</p>
<p>
{{ item.name }}
</p>
</div>
<i v-if="index === curIndex && !onlyRead" style="margin-top: 28px;color: rgb(199,5,5)" class="el-icon-delete" @click="deleteForm()" />
</div>
<img v-if="!formList" src="@/assets/img/nodata.png" alt="" class="nodata">
<!-- <div class="button"><i class="el-icon-plus" /> 新建表单</div> -->
@ -44,8 +47,8 @@ export default {
data() {
return {
formType: '门诊',
defaultChecked: [],
outFormNameList: ['眼科激光手术患者知情同意书', '眼科激光手术治疗', '眼底血管造影知情同意书']
defaultChecked: true,
outFormNameList: ['门急诊电子病历', '眼科激光手术患者知情同意书', '眼科激光手术治疗', '眼底血管造影知情同意书']
}
},
methods: {
@ -54,6 +57,9 @@ export default {
},
handleForm(index, item) {
this.$emit('handleForm', { index, item })
},
deleteForm() {
this.$emit('deleteForm')
}
}
}
@ -64,6 +70,9 @@ export default {
width: 185px;
height: 100%;
margin-right: 14px;
.flex{
display: flex;
}
.nodata {
width: 175px;
margin-top: 30px;

21
src/components/360View/shrink.vue

@ -39,6 +39,10 @@ export default {
arrowType: {
type: Number,
default: 1 // 1 2
},
curType: {
type: Number,
default: 1
}
},
data() {
@ -47,6 +51,23 @@ export default {
drawerFlag: false
}
},
watch: {
curType(val) {
switch (val) {
case 1:
this.active = 'imgCur'
break
case 2:
this.active = 'imgOne'
break
case 3:
this.active = 'imgTwo'
break
case 4:
this.active = 'imgThree'
}
}
},
mounted() {
},

Loading…
Cancel
Save