1

src/xt_pages/outpatientCharges/outpatientChargesManagement.vue

     <div class="app-container" style="display:flex;flex: 1;padding: 20px 20px 0px 20px;">
       <div class="mainLeft">
         <div class="mainCell" style="justify-content: space-between;">
-        <p>未就诊：<span>1</span>人</p>
-        <p>已就诊：<span>0</span>人</p>
+        <p style="font-size:14px;">未就诊：<span>1</span>人</p>
+        <p style="font-size:14px;">已就诊：<span>0</span>人</p>
         </div>
         <div class="mainCell">
         <el-radio-group v-model="radio" @change="changeRadio">
                   <ul class="basicUl">
                     <li style="width:50%;">医生：{{ info.doctor }}</li>
                     <li style="width:50%;">科室：{{ info.departments }}</li>
-                    <li style="width:50%;">总费用：{{ getTotal() }}</li>
+                    <li style="width:100%;">总费用：{{ getTotal() }}</li>
 
                     <li style="width:100%;">判断结果：{{info.diagnosis}}</li>
                     <li style="width:100%;">是否有传染病：</li>
     margin-left: 5px;
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
   }
 
   .RP {

src/xt_pages/outpatientDoctorStation/components/deskPrescription.vue

 <template>
-  <div style="height: calc(100% - 36px);display: flex;flex-direction: column;margin-top: 36px;">
+  <div style="height: calc(100% - 54px);display: flex;flex-direction: column;margin-top: 54px;">
     <!-- <div style="border-top:1px solid #e5e5e5;margin-top:5px;">
       <div class="mainCell" style="margin-bottom:10px;float:right">
         <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">保存</el-button>
         <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
       </div>
     </div> -->
-    <div class="backColor"></div>
+    <!-- <div class="backColor"></div> -->
     <div class="mainCenter">
       <div class="centerLeft">
-        <el-form :model="form" ref="form" label-width="80px">
+        <el-form :model="form" ref="form" label-width="80px" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
           <el-form-item label="姓名:" prop="name">
             <el-input v-model="patientInfo.name" placeholder="" readonly></el-input>
           </el-form-item>
           <!--<el-input v-model="hisPatientInfo.register_type" placeholder="" readonly></el-input>-->
           <!--</el-form-item>-->
           <el-form-item label="挂号类型: " prop="name">
-            <el-select style="margin-right:5px;" v-model="register_type" placeholder="">
+            <el-select style="width:100%;" v-model="register_type" placeholder="">
               <el-option
                 v-for="(item,index) in this.register_types"
                 :key="index"
             </el-select>
           </el-form-item>
           <el-form-item label="医疗类型: " prop="name">
-            <el-select style="margin-right:5px;" v-model="register_type" placeholder="">
+            <el-select style="width:100%;" v-model="register_type" placeholder="">
               <el-option
                 v-for="(item,index) in getDictionaryDataConfig('system','register_type')"
                 :key="index"
           </el-form-item>
           <el-form-item label="诊断:" prop="name">
 
-            <el-select style="margin-right:5px;" v-model="state1" placeholder="">
+            <el-select style="width:100%;" v-model="state1" placeholder="">
               <el-option
                 v-for="(item,index) in sick"
                 :key="index"
         <div class="tabsBox">
 
           <!--<el-button type="text" class="addTab" @click="addCharges" icon="el-icon-circle-plus">附加收费</el-button>-->
-          <el-tabs class="preTabs" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab"
+          <el-tabs class="preTabs" v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab"
                    :before-leave="moreState" @tab-click="tabclickEvent">
             <el-tab-pane
               v-for="(item, index) in prescriptions"
         </div>
       </div>
       <div class='centerRight'>
-        <div class="rightTab">
+        <!-- <div class="rightTab">
           <p :class="rightTab == 1 ? 'activeP' : ''" @click="clickTab(1)">药品</p>
           <p :class="rightTab == 2 ? 'activeP' : ''" @click="clickTab(2)">项目</p>
-        </div>
-        <template>
-          <div style="height:84%;overflow-y: auto;margin-bottom: 60px;" v-show="showOne">
-            <el-tabs class="rightTabs" v-model="activeName">
-              <el-tab-pane label="药品列表" name="1">
-                <div style="margin-bottom:5px;display:flex;">
-                  <el-input style="width:50%;"  @input="searchAction" @keyup.enter.native='searchAction' v-model.trim="search_keyword"
-                            placeholder="请输入药品名字"></el-input>
-                  <el-select style="margin-left:5px;width:50%;" v-model="value" placeholder="" @change="changeKind">
-                    <el-option
-                      label="全部"
-                      value="0">
-                    </el-option>
-                    <el-option
-                      v-for="(item,index) in getDictionaryDataConfig('system','drug_type')"
-                      :key="index"
-                      :label="item.name"
-                      :value="item.id">
-                    </el-option>
-                  </el-select>
-                </div>
-                <el-table ref="multipleTable" :data="drugs" border @select='selectDrugs'
-                          style="width: 100%;flex:1;overflow-y: auto;"
-                          :row-style="{ color: '#303133' }"
-                          @select-all="changeAllGoodInfoTableData"
-                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                          highlight-current-row>
-                  <el-table-column type="selection" width="40" align="center"></el-table-column>
-                  <el-table-column prop="name" label="名称">
-                    <template slot-scope="scope">{{ scope.row.drug_name }}</template>
-                  </el-table-column>
-                  <el-table-column label="规格" width="60">
-                    <template slot-scope="scope">{{ scope.row.drug_spec }}</template>
-                  </el-table-column>
-                  <el-table-column label="单价" width="40">
-                    <template slot-scope="scope">{{ scope.row.retail_price }}</template>
-                  </el-table-column>
-                </el-table>
-
+        </div> -->
+        <el-tabs class="borderCard" type="border-card" v-model="rightTab" @tab-click="clickTab">
+              <el-tab-pane label="药品" :name="1">
+                
               </el-tab-pane>
-              <el-tab-pane label="医嘱模板" name="2">
-                <div style="margin-bottom:5px;">
-                  <!--<el-input style="width:50%;" v-model="input" placeholder=""></el-input>-->
-                  <el-select style="float: right;width: 49%;" v-model="value" placeholder="">
-                    <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value">
-                    </el-option>
-                  </el-select>
-                </div>
-                <el-table ref="multipleTableTwo" :data="advices_template" border
-                          style="width: 100%;flex:1;overflow-y: auto;"
-                          :row-style="{ color: '#303133' }"
-                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                          highlight-current-row>
-                  <el-table-column type="selection" width="40" align="center"></el-table-column>
-                  <el-table-column prop="name" label="名称">
-                    <template slot-scope="scope">{{}}</template>
-                  </el-table-column>
-                  <el-table-column label="规格" width="60">
-                    <template slot-scope="scope">33</template>
-                  </el-table-column>
-                  <el-table-column label="库存" width="60">
-                    <template slot-scope="scope">22</template>
-                  </el-table-column>
-                  <el-table-column label="单价" width="40">
-                    <template slot-scope="scope">12</template>
-                  </el-table-column>
-                </el-table>
+              <el-tab-pane label="项目" :name="2">
+                
               </el-tab-pane>
-            </el-tabs>
-          </div>
+              <div style="height:100%;" v-show="showOne">
+                  <el-tabs class="rightTabs" v-model="activeName">
+                    <el-tab-pane label="药品列表" name="1">
+                      <div style="margin-bottom:5px;display:flex;">
+                        <el-input style="width:50%;"  @input="searchAction" @keyup.enter.native='searchAction' v-model.trim="search_keyword"
+                                  placeholder="请输入药品名字"></el-input>
+                        <el-select style="margin-left:5px;width:50%;" v-model="value" placeholder="" @change="changeKind">
+                          <el-option
+                            label="全部"
+                            value="0">
+                          </el-option>
+                          <el-option
+                            v-for="(item,index) in getDictionaryDataConfig('system','drug_type')"
+                            :key="index"
+                            :label="item.name"
+                            :value="item.id">
+                          </el-option>
+                        </el-select>
+                      </div>
+                      <div style="width: 100%;flex:1;overflow-y: auto;">
+                        <el-table ref="multipleTable" :data="drugs" border @select='selectDrugs'
+                                  :row-style="{ color: '#303133' }"
+                                  @select-all="changeAllGoodInfoTableData"
+                                  :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                                  highlight-current-row>
+                          <el-table-column type="selection" width="40" align="center"></el-table-column>
+                          <el-table-column prop="name" label="名称">
+                            <template slot-scope="scope">{{ scope.row.drug_name }}</template>
+                          </el-table-column>
+                          <el-table-column label="规格" width="60">
+                            <template slot-scope="scope">{{ scope.row.drug_spec }}</template>
+                          </el-table-column>
+                          <el-table-column label="单价" width="40">
+                            <template slot-scope="scope">{{ scope.row.retail_price }}</template>
+                          </el-table-column>
+                        </el-table>
+                      </div>
+
+                    </el-tab-pane>
+                    <el-tab-pane label="医嘱模板" name="2">
+                      <div style="margin-bottom:5px;">
+                        <!--<el-input style="width:50%;" v-model="input" placeholder=""></el-input>-->
+                        <el-select style="float: right;width: 49%;" v-model="value" placeholder="">
+                          <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                      </div>
+                      <div style="width: 100%;flex:1;overflow-y: auto;">
+                        <el-table ref="multipleTableTwo" :data="advices_template" border
+                                  :row-style="{ color: '#303133' }"
+                                  :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                                  highlight-current-row>
+                          <el-table-column type="selection" width="40" align="center"></el-table-column>
+                          <el-table-column prop="name" label="名称">
+                            <template slot-scope="scope">{{}}</template>
+                          </el-table-column>
+                          <el-table-column label="规格" width="60">
+                            <template slot-scope="scope">33</template>
+                          </el-table-column>
+                          <el-table-column label="库存" width="60">
+                            <template slot-scope="scope">22</template>
+                          </el-table-column>
+                          <el-table-column label="单价" width="40">
+                            <template slot-scope="scope">12</template>
+                          </el-table-column>
+                        </el-table>
+                      </div>
+                    </el-tab-pane>
+                  </el-tabs>
+              </div>
+              <div style="height:100%;" v-show="showTwo">
+                <el-tabs class="rightTabs" v-model="activeName">
+                  <el-tab-pane label="项目列表" name="1">
+                    <div style="width: 100%;flex:1;overflow-y: auto;">
+                      <el-table ref="tables" :data="tabProject" border @select='selectChange'
+                                :row-style="{ color: '#303133' }"
+                                @select-all="changeAllGoodInfoTableDataTwo"
+                                :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                                highlight-current-row>
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column prop="name" label="名称">
+                          <template slot-scope="scope">{{ scope.row.project_name }}</template>
+                        </el-table-column>
+                        <el-table-column label="规格" width="60">
+                          <template slot-scope="scope">{{ scope.row.single_dose }}</template>
+                        </el-table-column>
+                        <el-table-column label="单价" width="40">
+                          <template slot-scope="scope">{{ scope.row.price }}</template>
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </el-tab-pane>
+                  <el-tab-pane label="项目组套" name="2">
+                    <div style="width: 100%;flex:1;overflow-y: auto;">
+                      <el-table :data="tabPrjectTeam" border
+                                :row-style="{ color: '#303133' }"
+                                :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                                highlight-current-row
+                                @select='selectTeam'>
+                        <el-table-column type="selection" width="40" align="center"></el-table-column>
+                        <el-table-column prop="name" label="名称">
+                          <template slot-scope="scope">{{scope.row.project_team}}</template>
+                        </el-table-column>
+                      </el-table>
+                    </div>
+                  </el-tab-pane>
+                </el-tabs>
+              </div>
+        </el-tabs>
+        <template>
+          
 
-          <div style="height:84%;overflow-y: auto;margin-bottom: 60px;" v-show="showTwo">
-            <el-tabs class="rightTabs" v-model="activeName">
-              <el-tab-pane label="项目列表" name="1">
-                <el-table ref="tables" :data="tabProject" border @select='selectChange'
-                          style="width: 100%;flex:1;overflow-y: auto;"
-                          :row-style="{ color: '#303133' }"
-                          @select-all="changeAllGoodInfoTableDataTwo"
-                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                          highlight-current-row>
-                  <el-table-column type="selection" width="40" align="center"></el-table-column>
-                  <el-table-column prop="name" label="名称">
-                    <template slot-scope="scope">{{ scope.row.project_name }}</template>
-                  </el-table-column>
-                  <el-table-column label="规格" width="60">
-                    <template slot-scope="scope">{{ scope.row.single_dose }}</template>
-                  </el-table-column>
-                  <el-table-column label="单价" width="40">
-                    <template slot-scope="scope">{{ scope.row.price }}</template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-              <el-tab-pane label="项目组套" name="2">
-                <el-table :data="tabPrjectTeam" border style="width: 100%;flex:1;overflow-y: auto;"
-                          :row-style="{ color: '#303133' }"
-                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                          highlight-current-row
-                          @select='selectTeam'>
-                  <el-table-column type="selection" width="40" align="center"></el-table-column>
-                  <el-table-column prop="name" label="名称">
-                    <template slot-scope="scope">{{scope.row.project_team}}</template>
-                  </el-table-column>
-                </el-table>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
+          
 
           <div class="comfirmBox">
             <!-- <div>
                 </el-option>
               </el-select>
             </div> -->
-            <el-button type="primary" size="small" @click="comfirm">确定添加</el-button>
+            <el-button type="primary" size="small" style="width:100%;" @click="comfirm">确定添加</el-button>
           </div>
         </template>
       </div>
           })
 
       },
-      clickTab(index) {
+      clickTab(tab) {
+        let index = parseInt(tab.name)
         if (index == 1) {
           if (this.curPrescriptions.advices.length == 0 && this.curPrescriptions.project.length > 0) {
             this.$message.error('当前处方为项目，无法切换为药品，需要新开处方')
   .mainCenter {
     display: flex;
     flex: 1;
+    height: 100%;
   }
 
   .centerLeft {
     position: relative;
 
   .el-form-item {
-    width: 32%;
-    margin-right: 1%;
-    float: left;
+    width: 33%;
+    margin-bottom: 14px;
   }
 
   .el-form-item__label {
 
   .RP {
     color: #409EFF;
-    font-size: 20px;
+    font-size: 14px;
     margin-bottom: 5px;
   }
 
     height: 76%;
     overflow-y: auto;
     margin-bottom: 60px;
-
+    margin-top: 4px;
   .el-tabs__item {
     padding: 0 10px;
   }
 
   .centerRight {
     width: 300px;
-    margin-left: 5px;
+    margin-left: 10px;
     display: flex;
     flex-direction: column;
     position: relative;
     align-items: center;
     justify-content: space-between;
   }
+  .borderCard{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 60px;
+    .el-tabs--border-card>.el-tabs__content{
+      padding: 0;
+    }
+  }
 </style>
 
 <style lang="scss">
+.borderCard{
+  .el-tabs__nav{
+    width: 100%;
+  }
+  .el-tabs__item{
+    width: 50%;
+    text-align: center;
+  }
+  .el-tabs__content{
+    padding: 5px;
+    flex: 1;
+  }
+}
   .centerLeft {
 
   .el-form-item__label {
   .el-tabs__content {
     flex: 1;
     overflow-y: auto;
+    padding: 5px 0 5px 5px;
   }
 
   }
   .rightTabs {
     height: 100%;
-
+    .el-tabs__nav{
+      width: auto;
+    }
+    .el-tabs__header{
+      margin-bottom: 5px;
+    }
+  .el-tabs__item{
+    width: auto;
+    text-align: inherit;
+  }
   .el-tabs__content {
     flex: 1;
     overflow-y: auto;

src/xt_pages/outpatientDoctorStation/components/deskRecord.vue

 <template>
-  <div class="deskRecord" style="margin-top:36px;">
+  <div class="deskRecord" style="margin-top:54px;">
     <!-- <div style="overflow:hidden;border-top:1px solid #e5e5e5;margin-top:5px;">
       <div class="mainCell" style="margin-bottom:10px;float:right">
         <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">保存</el-button>
         <el-button size="small" @click="open(4)" type="primary">存模板</el-button>
       </div>
     </div> -->
-    <div class="backColor"></div>
     <div class="mainTitle">基本信息：</div>
     <el-form class="basicForm" :model="patientInfo" ref="form" label-width="120px">
       <el-form-item label="姓名:" prop="name">

src/xt_pages/outpatientDoctorStation/doctorDesk.vue

     <div class="position">
       <bread-crumb :crumbs='crumbs'></bread-crumb>
     </div>
-    <div class="app-container" style="display:flex;flex: 1;padding: 20px 20px 0px 20px;">
+    <div class="app-container" style="display:flex;flex: 1;padding: 10px 20px 0px 20px;">
       <div class="mainLeft">
         <div class="mainCell" style="justify-content: space-between;">
-          <p>未就诊：<span>{{cal_one}}</span>人</p>
-          <p>已就诊：<span>{{cal_two}}</span>人</p>
+          <p style="font-size:14px;">未就诊：<span>{{cal_one}}</span>人</p>
+          <p style="font-size:14px;">已就诊：<span>{{cal_two}}</span>人</p>
         </div>
         <div class="mainCell">
           <el-radio-group v-model="radio" @change="change">
       </div>
       <div class="mainRight">
         <div class="mainHeader">
-          <el-radio-group class="titleBox" v-model="titleType" @change="changeTab">
-            <el-radio-button label="电子处方"></el-radio-button>
-            <el-radio-button label="电子病历"></el-radio-button>
-          </el-radio-group>
+          <el-tabs v-model="titleType" @tab-click="handleClick" style="position: fixed;width: calc(100% - 490px);background:#fff;">
+            <el-tab-pane label="电子处方" name="电子处方"></el-tab-pane>
+            <el-tab-pane label="电子病历" name="电子病历"></el-tab-pane>
+          </el-tabs>
           <div class="mainCell fixedCell" style="float:right" v-if="titleType == '电子处方'">
-            <el-button size="small" ref="button_one"   @click="open(1)" type="primary" style="margin-left:10px;">保存</el-button>
+            <el-button size="small" ref="button_one"   @click="open(1)" type="primary">保存</el-button>
             <el-popover
               placement="bottom"
               width="200"
             <el-button size="small" ref="button_four"  @click="open(5)" type="primary">存模板</el-button>
           </div>
           <div class="mainCell fixedCell" style="float:right" v-if="titleType == '电子病历'">
-            <el-button size="small" @click="opentwo(1)" type="primary" style="margin-left:10px;">保存</el-button>
+            <el-button size="small" @click="opentwo(1)" type="primary">保存</el-button>
             <el-button size="small" @click="opentwo(2)" type="primary">打印</el-button>
             <el-button size="small" @click="opentwo(3)" type="primary">病历调用</el-button>
             <el-button size="small" @click="opentwo(4)" type="primary">存模板</el-button>
 
   }
   .mainRight {
-    margin-left: 20px;
+    margin-left: 10px;
     flex: 1;
     height: 100%;
     display: flex;
 
   .centerRight {
     width: 300px;
-    margin-left: 5px;
+    margin-left: 10px;
     display: flex;
     flex-direction: column;
     position: relative;
     z-index: 99;
     right: 30px;
     background: #fff;
+    width: 300px;
+    display: flex;
+    justify-content: space-between;
   }
 </style>