1

package-lock.json

@@ -4740,7 +4740,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4763,13 +4764,15 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4785,19 +4788,22 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4927,7 +4933,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4941,6 +4948,7 @@
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4957,6 +4965,7 @@
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4964,13 +4973,15 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4991,6 +5002,7 @@
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5078,7 +5090,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5092,6 +5105,7 @@
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5186,7 +5200,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5228,6 +5243,7 @@
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5249,6 +5265,7 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5296,13 +5313,15 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": false,
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/router/modules/outpatientCharges.js

@@ -42,5 +42,13 @@ export default {
         name: 'summary',
         meta: { title: 'summary', noCache: true }
     },
+    {
+        path: '/outpatientCharges/summaryDetail',
+        component: () => import('@/xt_pages/outpatientCharges/summaryDetail'),
+        hidden: true,
+        is_menu: false,
+        name: 'summaryDetail',
+        meta: { title: 'summaryDetail', noCache: true }
+    },
   ]
 }

src/xt_pages/outpatientCharges/components/additionalCharges.vue

@@ -0,0 +1,57 @@
+<template>
+    <el-dialog
+        title="附加收费"
+        width="300px"
+        :visible.sync="visible"
+        :before-close="_close"
+    >
+        <el-table :data="tableData" border style="width: 100%;" height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+            <el-table-column align="center" type="selection" width="40"></el-table-column>
+            <el-table-column align="center" prop="name" label="名称" width="100">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" label="金额(元)">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="hide">取 消</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
+        </div>
+    </el-dialog>         
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            visible:false,
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        _close: function(done) {
+            // this.clear()
+            done()
+        },
+        clear: function() {
+            this.form.id = 0;
+            this.form.name = "";
+            this.form.intro = "";
+        },
+        show() {
+            // this.clear()
+            this.visible = true
+        },
+        hide() {
+            // this.clear()
+            this.visible = false
+        },
+    }
+}
+</script>
+

src/xt_pages/outpatientCharges/components/prescriptionTable.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="prescriptionTable">
+        <el-table :data="tableData" border style="width: 99%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+            <el-table-column align="center" type="selection" width="40"></el-table-column>
+            <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
+            <el-table-column align="center" prop="name" label="名称">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="组套">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" :label="'单次\n用量'">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="用法">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="频率">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="天数">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="100" label="总量">
+                <template slot-scope="scope">
+                    <div style="display:flex;">
+                        <el-input v-model="input" style="width:50%" placeholder=""></el-input>
+                        <el-select v-model="value" style="width:50%" placeholder="">
+                            <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="单价">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="备注">
+                <template slot-scope="scope">
+                    <el-autocomplete
+                    class="inline-input"
+                    v-model="state1"
+                    :fetch-suggestions="querySearch"
+                    placeholder=""
+                    @select="handleSelect"
+                    ></el-autocomplete>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" width="40" prop="name" label="操作">
+                <template slot-scope="scope">
+                    <i class="el-icon-delete"></i>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            options: [{
+            value: '1',
+            label: '1'
+            }, {
+            value: '2',
+            label: '2'
+            }, {
+            value: '3',
+            label: '3'
+            }, {
+            value: '4',
+            label: '4'
+            }, {
+            value: '5',
+            label: '5'
+            }],
+            value:''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.prescriptionTable{
+    .el-table th .cell, .el-table td .cell{
+        padding: 0 2px;
+        white-space: pre-line;
+    }
+    .el-icon-delete{
+        color:red;
+    }
+}
+</style>

src/xt_pages/outpatientCharges/outpatientChargesManagement.vue

@@ -3,22 +3,98 @@
         <div class="position">
             <bread-crumb :crumbs='crumbs'></bread-crumb>
         </div>
-        <div class="app-container">
-            <div class="dateBox">
-                <el-date-picker v-model="selected_date" prefix-icon="el-icon-date" @change="handleScheduleDateChange" :editable="false" :clearable="false" style="width: 196px;" type="date" placeholder="选择日期时间" align="right" ></el-date-picker>
+        <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>0</span>人</p>
+                    <p>已就诊：<span>0</span>人</p>
+                </div>
+                <div class="mainCell">
+                    <el-radio-group v-model="radio">
+                        <el-radio :label="1">未就诊</el-radio>
+                        <el-radio :label="2">已就诊</el-radio>
+                        <el-radio :label="3">全部</el-radio>
+                    </el-radio-group>
+                </div>
+                <div class="mainCell" style="margin-bottom:10px;">
+                    <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
+                    <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
+                </div>
+                <div style="flex:1;overflow-y:auto;">
+                    <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                        <el-table-column align="center" prop="name" label="患者姓名">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="就诊号" width="90">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                    </el-table>
+                </div>
+            </div>
+            <div class="mainRight">
+                <div class="mainCell" style="margin-bottom:10px;flex-direction: row-reverse;">
+                    <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">打印处置单</el-button>
+                    <el-button size="small" @click="open(2)" type="primary">打印治疗单</el-button>
+                    <el-button size="small" @click="open(3)" type="primary">打印</el-button>
+                    <el-button size="small" @click="open(4)" type="primary">收费</el-button>
+                </div>
+                <div class="mainCenter">
+                    <div class="centerLeft">
+                        <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" :before-leave="moreState">
+                                <el-tab-pane
+                                    v-for="(item, index) in editableTabs"
+                                    :key="index"
+                                    :label="item.title"
+                                    :name="item.name"
+                                >
+                                    <div class="RP">Rp</div>
+                                    <prescription-table></prescription-table>
+                                </el-tab-pane>
+                                <el-tab-pane name="more" closable><span slot="label"><i class="el-icon-plus" @click="addTab"></i></span></el-tab-pane>
+                            </el-tabs>
+                            
+                        </div>
+                        <div class="costBox">
+                            <span>处方编号：2134348971237883</span>
+                            <span>当前处方总费用：<span style="color:red;">0.00元</span></span>
+                            <span>已收费</span>
+                        </div>
+                    </div>
+                    <div class="centerRight">
+                        <p class="centerRightTitle">人员信息</p>
+                        <div style="display:flex;justify-content: space-between;line-height:30px;">
+                            <span style="font-size:14px;">人员编码:676273816287361</span>
+                            <span style="font-size:14px;">日期:2020-10-10</span>
+                        </div>
+                        <ul class="basicUl">
+                            <li style="width:50%;">姓名：张三</li>
+                            <li style="width:50%;">性别：男</li>
+                            <li style="width:50%;">年龄：12</li>
+                            <li style="width:50%;">身高：123</li>
+                            <li style="width:50%;">体重：44kg</li>
+                            <li style="width:50%;">电话：348971237883</li>
+                            <li style="width:100%;">地址：</li>
+                            <li style="width:100%;">过敏史：</li>
+                        </ul>
+                        <p class="centerRightTitle">诊断信息</p>
+                        <div style="display:flex;justify-content: space-between;line-height:30px;">
+                            <span style="font-size:14px;">门诊编号:676273816287361</span>
+                        </div>
+                        <ul class="basicUl">
+                            <li style="width:50%;">医生：张三</li>
+                            <li style="width:50%;">科室：肾病科</li>
+                            <li style="width:100%;">费用：20元</li>
+                            <li style="width:100%;">判断结果：无</li>
+                            <li style="width:100%;">是否有传染病：否</li>
+                            <li style="width:100%;">血压：80/120mmHg</li>
+                        </ul>
+                    </div>
+                </div>
             </div>
-            <el-tabs v-model="activeName">
-                <el-tab-pane label="未收费" name="first">
-                    <no-charge></no-charge>
-                </el-tab-pane>
-                <el-tab-pane label="已收费" name="second">
-                    <charged></charged>
-                </el-tab-pane>
-                <el-tab-pane label="医保退处方" name="third">
-                    <medical-insurance-refund></medical-insurance-refund>
-                </el-tab-pane>
-            </el-tabs>
         </div>
+        <additionalCharges ref='additionalCharges'></additionalCharges>
     </div>
 </template>
 
@@ -28,12 +104,16 @@ import BreadCrumb from '@/xt_pages/components/bread-crumb'
 import noCharge from './components/noCharge'
 import charged from './components/charged'
 import medicalInsuranceRefund from './components/medicalInsuranceRefund'
+import prescriptionTable from './components/prescriptionTable'
+import additionalCharges from './components/additionalCharges'
 export default {
     components:{
         BreadCrumb,
         noCharge,
         charged,
-        medicalInsuranceRefund
+        medicalInsuranceRefund,
+        prescriptionTable,
+        additionalCharges
     },
     data(){
         return{
@@ -41,31 +121,231 @@ export default {
                 { path: false, name: '门诊收费' },
                 { path: false, name: '门诊收费管理' }
             ],
-            activeName:'first'
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            editableTabsValue: '1',
+            editableTabs: [{
+            title: '处方1',
+            name: '1',
+            }],
+            tabIndex: 1,
+        }
+    },
+    methods:{
+        moreState(tab, event){
+          if(tab == 'more'){
+            return false;
+          }
+        },
+        open(index){
+            if(index == 1){
+            }else if(index == 2){
+                
+            }else if(index == 4){
+            }else if(index == 5){
+            }
+            
+        },
+        addTab(targetName) {
+            let newTabName = ++this.tabIndex + '';
+            this.editableTabs.push({
+                title: '处方' + this.tabIndex,
+                name: newTabName,
+            });
+            this.editableTabsValue = newTabName;
+        },
+        removeTab(targetName) {
+            let tabs = this.editableTabs;
+            let activeName = this.editableTabsValue;
+            if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+                if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                    activeName = nextTab.name;
+                }
+                }
+            });
+            }
+            
+            this.editableTabsValue = activeName;
+            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        },
+        addCharges(){
+            this.$refs.additionalCharges.show()
         }
     }
 }
 </script>
 
 <style lang="scss" scoped>
+.app-container{
+    height:100%;
+}
 .outpatientChargesManagement{
-    .el-tabs{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .mainLeft{
+        width:200px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .el-radio{
+            margin-right:5px;
+        }
+        
+    }
+    .mainCell{
+        height:36px;
+        display: flex;
+        align-items: center;
+    }
+    .mainRight{
+        margin-left:20px;
+        flex:1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        .cellSpan{
+            min-width: 80px;
+            display: inline-block;
+            margin-right: 10px;
+        }
+    }
+    .tabsBox{
         position: relative;
+        height: 90%;
+        overflow-y: auto;
+        margin-bottom: 60px;
+        .el-tabs__item{
+            padding: 0 10px;
+        }
     }
-    .el-tabs__nav-wrap{
-        padding-left:200px;
+    .addTab{
+        position: absolute;
+        right: 0;
+        top: 6px;
+        z-index: 20;
     }
-    .dateBox{
+    .mainCenter{
+        display: flex;
+        flex:1;
+    }
+    .costBox{
+        width:100%;
+        height:60px;
+        background:#fff;
         position: absolute;
-        z-index:99;
+        bottom:0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .centerLeft{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    .centerRight{
+        width: 300px;
+        margin-left: 5px;
+        display: flex;
+        flex-direction: column;
+    }
+    .RP{
+        color:#409EFF;
+        font-size: 20px;
+        margin-bottom: 5px;
+    }
+    .centerRightTitle{
+        color:#409EFF;
+        padding-top: 10px;;
+    }
+    .basicUl{
+        border-top: 1px solid #e5e5e5;
+        border-left: 1px solid #e5e5e5;
+        display: flex;
+        flex-wrap: wrap;
+        li{
+            border-bottom: 1px solid #e5e5e5;
+            border-right: 1px solid #e5e5e5;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            text-indent: 5px;
+            font-size: 14px;
+        }
     }
 }
 </style>
 
 <style lang="scss">
-.outpatientChargesManagement{
-    .el-tabs__nav-wrap{
-        padding-left:220px;
+#tab-more{
+    .el-icon-close{
+        display: none;
     }
 }
 </style>
+

src/xt_pages/outpatientCharges/summary.vue

@@ -44,7 +44,7 @@
                 </el-table-column>
                 <el-table-column align="center" prop="name" label="操作">
                     <template slot-scope="scope">
-                        <el-button size="mini" type="primary">打印</el-button>
+                        <el-button size="mini" type="primary" @click="toDetail">详情</el-button>
                     </template>
                 </el-table-column>
             </el-table>
@@ -83,6 +83,11 @@ export default {
             address: '上海市普陀区金沙江路 1516 弄'
             }]
         }
+    },
+    methods:{
+        toDetail(){
+            this.$router.push('/outpatientCharges/summaryDetail')
+        }
     }
 }
 </script>

src/xt_pages/outpatientCharges/summaryDetail.vue

@@ -0,0 +1,230 @@
+<template>
+    <div class="main-contain summaryDetail">
+        <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="mainCenter">
+                <div class="centerLeft">
+                    <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" :before-leave="moreState">
+                            <el-tab-pane
+                                v-for="(item, index) in editableTabs"
+                                :key="index"
+                                :label="item.title"
+                                :name="item.name"
+                            >
+                                <div class="RP">Rp</div>
+                                <el-table :data="tableData" border style="width: 99%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                                    <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
+                                    <el-table-column align="center" prop="name" label="名称">
+                                        <template slot-scope="scope">{{ scope.row.date }}</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="组套">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" :label="'单次\n用量'">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="用法">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="频率">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="天数">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="100" label="总量">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="单价">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                    <el-table-column align="center" prop="name" width="50" label="备注">
+                                        <template slot-scope="scope">
+                                            
+                                        </template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                        </el-tabs>
+                        
+                    </div>
+                    <div class="costBox">
+                        <span>处方编号：2134348971237883</span>
+                        <span>当前处方总费用：<span style="color:red;">0.00元</span></span>
+                        <span>已收费</span>
+                    </div>
+                </div>
+                <div class="centerRight">
+                    <p class="centerRightTitle">人员信息</p>
+                    <ul class="basicUl">
+                        <li style="width:50%;">姓名：张三</li>
+                        <li style="width:50%;">性别：男</li>
+                        <li style="width:50%;">年龄：12</li>
+                        <li style="width:50%;">身高：123</li>
+                        <li style="width:50%;">体重：44kg</li>
+                        <li style="width:50%;">电话：348971237883</li>
+                    </ul>
+                    <p class="centerRightTitle">收费信息</p>
+                    <ul class="basicUl">
+                        <li style="width:50%;">应收金额：0.00元</li>
+                        <li style="width:50%;">实收金额：0.00元</li>
+                        <li style="width:50%;">舍入金额：0.00元</li>
+                        <li style="width:50%;">优惠金额：0.00元</li>
+                        <li style="width:50%;">总金额</li>
+                        <li style="width:50%;">0.00元</li>
+                    </ul>
+                    <p class="centerRightTitle">发票费用</p>
+                    <ul class="basicUl">
+                        <li style="width:100%;">西药费：0.00元</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+export default {
+    components:{
+        BreadCrumb,
+    },
+    data(){
+        return{
+            crumbs: [
+                { path: false, name: '门诊收费' },
+                { path: false, name: '项目消费明细汇总详情' }
+            ],
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            editableTabsValue: '1',
+            editableTabs: [{
+            title: '处方1',
+            name: '1',
+            }],
+            tabIndex: 1,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.summaryDetail{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .tabsBox{
+        position: relative;
+        height: 90%;
+        overflow-y: auto;
+        margin-bottom: 60px;
+        .el-tabs__item{
+            padding: 0 10px;
+        }
+    }
+    .addTab{
+        position: absolute;
+        right: 0;
+        top: 6px;
+        z-index: 20;
+    }
+    .mainCenter{
+        display: flex;
+        flex:1;
+    }
+    .costBox{
+        width:100%;
+        height:60px;
+        background:#fff;
+        position: absolute;
+        bottom:0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .centerLeft{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    .centerRight{
+        width: 300px;
+        margin-left: 5px;
+        display: flex;
+        flex-direction: column;
+    }
+    .RP{
+        color:#409EFF;
+        font-size: 20px;
+        margin-bottom: 5px;
+    }
+    .centerRightTitle{
+        color:#409EFF;
+        padding: 10px 0;
+    }
+    .basicUl{
+        border-top: 1px solid #e5e5e5;
+        border-left: 1px solid #e5e5e5;
+        display: flex;
+        flex-wrap: wrap;
+        li{
+            border-bottom: 1px solid #e5e5e5;
+            border-right: 1px solid #e5e5e5;
+            width: 100%;
+            height: 38px;
+            line-height: 38px;
+            text-indent: 5px;
+            font-size: 14px;
+        }
+    }
+}
+</style>
+
+<style lang="scss">
+.summaryDetail{
+    .el-table th .cell, .el-table td .cell{
+        padding: 0 2px;
+        white-space: pre-line;
+    }
+    .el-icon-delete{
+        color:red;
+    }
+}
+
+</style>
+

src/xt_pages/outpatientDoctorStation/components/additionalCharges.vue

@@ -0,0 +1,57 @@
+<template>
+    <el-dialog
+        title="附加收费"
+        width="300px"
+        :visible.sync="visible"
+        :before-close="_close"
+    >
+        <el-table :data="tableData" border style="width: 100%;" height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+            <el-table-column align="center" type="selection" width="40"></el-table-column>
+            <el-table-column align="center" prop="name" label="名称" width="100">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" label="金额(元)">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="hide">取 消</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
+        </div>
+    </el-dialog>         
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            visible:false,
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        _close: function(done) {
+            // this.clear()
+            done()
+        },
+        clear: function() {
+            this.form.id = 0;
+            this.form.name = "";
+            this.form.intro = "";
+        },
+        show() {
+            // this.clear()
+            this.visible = true
+        },
+        hide() {
+            // this.clear()
+            this.visible = false
+        },
+    }
+}
+</script>
+

src/xt_pages/outpatientDoctorStation/components/deskPrescription.vue

@@ -0,0 +1,490 @@
+<template>
+    <div style="height: calc(100% - 36px);display: flex;flex-direction: column;">
+        <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(2)" type="primary">打印</el-button>
+                <el-button size="small" @click="open(4)" type="primary">选择模板</el-button>
+                <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
+            </div>
+        </div>
+        <div class="backColor"></div>
+        <div class="mainCenter">
+            <div class="centerLeft">
+                <el-form :model="form" :rules="rules" ref="form" label-width="80px">
+                    <el-form-item label="姓名:" prop="name">
+                        <el-input v-model="form.name" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item label="证件号: " prop="name">
+                        <el-input v-model="form.name" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item label="挂号类型: " prop="name">
+                        <el-input v-model="form.name" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item label="诊断:" prop="name">
+                        <el-autocomplete
+                        style="width:100%;"
+                        class="inline-input"
+                        v-model="state1"
+                        :fetch-suggestions="querySearch"
+                        placeholder="请输入内容"
+                        @select="handleSelect"
+                        ></el-autocomplete>
+                    </el-form-item>
+                    <el-form-item label="大病类别: " prop="name">
+                        <el-input v-model="form.name" placeholder=""></el-input>
+                    </el-form-item>
+                    <el-form-item label="处方类型: " prop="name">
+                        <el-select v-model="value" placeholder="请选择" style="width:100%;">
+                            <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <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" :before-leave="moreState">
+                        <el-tab-pane
+                            v-for="(item, index) in editableTabs"
+                            :key="index"
+                            :label="item.title"
+                            :name="item.name"
+                        >
+                            <div class="RP">Rp</div>
+                            <prescription-table></prescription-table>
+                        </el-tab-pane>
+                        <el-tab-pane name="more" closable><span slot="label"><i class="el-icon-plus" @click="addTab"></i></span></el-tab-pane>
+                    </el-tabs>
+                </div>
+                <div class="costBox">
+                    <span>医生：</span>
+                    <el-select style="margin-right:5px;" v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                    <span>科室：</span>
+                    <el-select style="margin-right:5px;" v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                    <span>总计：</span>
+                    <span style="color:red;">0.00</span>元
+                </div>
+            </div>
+            <div class='centerRight'>
+                <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="margin-top: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="height:84%;overflow-y: auto;margin-bottom: 60px;">
+                        <el-tabs class="rightTabs" v-model="activeName">
+                            <el-tab-pane label="药品列表" name="1">
+                                <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                                    <el-table-column align="center" type="selection" width="40"></el-table-column>
+                                    <el-table-column align="center" prop="name" label="名称">
+                                        <template slot-scope="scope">{{ scope.row.date }}</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="规格" width="60">
+                                        <template slot-scope="scope">33</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="库存" width="60">
+                                        <template slot-scope="scope">22</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="单价" width="40">
+                                        <template slot-scope="scope">12</template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                            <el-tab-pane label="医嘱模板" name="2">
+                                <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                                    <el-table-column align="center" type="selection" width="40"></el-table-column>
+                                    <el-table-column align="center" prop="name" label="名称">
+                                        <template slot-scope="scope">{{ scope.row.date }}</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="规格" width="60">
+                                        <template slot-scope="scope">33</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="库存" width="60">
+                                        <template slot-scope="scope">22</template>
+                                    </el-table-column>
+                                    <el-table-column align="center" label="单价" width="40">
+                                        <template slot-scope="scope">12</template>
+                                    </el-table-column>
+                                </el-table>
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                    <div class="comfirmBox">
+                        <div>
+                            <span>药品类型：</span>
+                            <el-select style="margin-right:5px;width:100px;" 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-button type="primary" size="small">确定添加</el-button>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <additionalCharges ref='additionalCharges'></additionalCharges>
+        <select-template ref='selectTemplate'></select-template>
+        <save-template ref='saveTemplate'></save-template>
+    </div>
+</template>
+
+
+<script>
+import prescriptionTable from './prescriptionTable'
+import selectTemplate from './selectTemplate'
+import saveTemplate from './saveTemplate'
+import additionalCharges from './additionalCharges'
+export default {
+    components:{
+        selectTemplate,
+        saveTemplate,
+        prescriptionTable,
+        additionalCharges
+    },
+    data(){
+        return{
+            form:{
+                name:''
+            },
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            editableTabsValue: '1',
+            editableTabs: [{
+            title: '处方1',
+            name: '1',
+            }],
+            tabIndex: 1,
+
+            rightTab:1,
+            activeName:'1'
+        }
+    },
+    methods:{
+        moreState(tab, event){
+          if(tab == 'more'){
+            return false;
+          }
+        },
+        open(index){
+            if(index == 1){
+                this.$refs.prescription.show()
+            }else if(index == 2){
+                
+            }else if(index == 4){
+                this.$refs.selectTemplate.show()
+            }else if(index == 5){
+                this.$refs.saveTemplate.show()
+            }
+            
+        },
+        addTab(targetName) {
+            let newTabName = ++this.tabIndex + '';
+            this.editableTabs.push({
+                title: '处方' + this.tabIndex,
+                name: newTabName,
+            });
+            this.editableTabsValue = newTabName;
+        },
+        removeTab(targetName) {
+            let tabs = this.editableTabs;
+            let activeName = this.editableTabsValue;
+            if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+                if (tab.name === targetName) {
+                let nextTab = tabs[index + 1] || tabs[index - 1];
+                if (nextTab) {
+                    activeName = nextTab.name;
+                }
+                }
+            });
+            }
+            
+            this.editableTabsValue = activeName;
+            this.editableTabs = tabs.filter(tab => tab.name !== targetName);
+        },
+        clickTab(index){
+            this.rightTab = index
+        },
+        addCharges(){
+            this.$refs.additionalCharges.show()
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-main-contain{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.app-container{
+    height:100%;
+}
+.mainCell{
+    height:36px;
+    display: flex;
+    align-items: center;
+}
+.mainLeft{
+    width:200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .el-radio{
+        margin-right:5px;
+    }
+    
+}
+.mainRight{
+    margin-left:20px;
+    flex:1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .cellSpan{
+        min-width: 80px;
+        display: inline-block;
+        margin-right: 10px;
+    }
+}
+.mainCenter{
+    display: flex;
+    flex:1;
+}
+.centerLeft{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .el-form-item{
+        width:32%;
+        margin-right: 1%;
+        float: left;
+    }
+    .el-form-item__label{
+        text-align: left;
+    }
+}
+.backColor{
+    background: #f6f8f9;
+    height: 5px;
+    margin-bottom: 5px;
+}
+.RP{
+    color:#409EFF;
+    font-size: 20px;
+    margin-bottom: 5px;
+}
+.tabsBox{
+    position: relative;
+    height: 76%;
+    overflow-y: auto;
+    margin-bottom: 60px;
+    .el-tabs__item{
+        padding: 0 10px;
+    }
+}
+.preTabs{
+    height:100%;
+}
+.costBox{
+    width:100%;
+    height:60px;
+    background:#fff;
+    position: absolute;
+    bottom:0;
+    display: flex;
+    align-items: center;
+}
+.addTab{
+    position: absolute;
+    right: 0;
+    top: 6px;
+    z-index: 20;
+}
+.centerRight{
+    width: 300px;
+    margin-left: 5px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.rightTab{
+    height: 40px;
+    width: 100%;
+    border: 1px solid #d2d2d2;
+    box-sizing: border-box;
+    
+    p{
+        width: 50%;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background: #eee;
+        float: left;
+    }
+    >p:last-child{
+      border-left: 1px solid #d2d2d2;  
+      float: right;
+    }
+    .activeP{
+        background: #409EFF;
+        color:#fff;
+    }
+}
+.comfirmBox{
+    width:100%;
+    height:60px;
+    background:#fff;
+    position: absolute;
+    bottom:0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
+
+<style lang="scss">
+.centerLeft{
+    .el-form-item__label{
+        text-align: left;
+    }
+}
+.tabsBox{
+    .el-tabs__item{
+        padding: 0 10px;
+    }
+    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){
+        padding: 0 10px;
+    }
+    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child{
+        padding: 0 10px;
+    }
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{
+        padding: 0 10px;
+    }
+}
+.centerRight{
+    .el-tabs__nav-scroll{
+        display: flex;
+    }
+    .el-tabs__nav{
+        margin: 0 auto;
+    }
+    .el-table th .cell, .el-table td .cell{
+        padding: 0 2px;
+    }
+}
+.preTabs{
+    // .el-tabs__content{
+    //     height:69%;
+    //     overflow-y: auto;
+    // }
+}
+.rightTabs{
+    height: 100%;
+    // .el-tabs__content{
+    //     height:72%;
+    //     overflow-y: auto;
+    // }
+}
+#tab-more{
+    .el-icon-close{
+        display: none;
+    }
+}
+</style>

src/xt_pages/outpatientDoctorStation/components/deskRecord.vue

@@ -0,0 +1,245 @@
+<template>
+    <div class="deskRecord">
+        <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(2)" type="primary">打印</el-button>
+                <el-button size="small" @click="open(3)" type="primary">病历调用</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="form" :rules="rules" ref="form" label-width="120px">
+            <el-form-item label="姓名:" prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="性别: " prop="name">
+                <el-select style="width:100%;" v-model="value" placeholder="">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="年龄: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="证件号:" prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="出生日期: " prop="name">
+                <el-date-picker
+                style="width:100%;"
+                v-model="value1"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="联系电话: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="关系联系人: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="关系联系人电话: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="家庭住址: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+        </el-form>
+        <div class="mainTitle">体格信息：</div>
+        <el-form class="physiqueForm" :model="form" :rules="rules" ref="form" label-width="80px">
+            <el-form-item label="体温:" prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input><span>℃</span>
+            </el-form-item>
+            <el-form-item label="血糖: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>mmol/L
+            </el-form-item>
+            <el-form-item label="脉搏: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>(次/分)
+            </el-form-item>
+            <el-form-item label="血压:" prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>/
+                <el-input v-model="form.name" placeholder=""></el-input>mmHg
+            </el-form-item>
+            <el-form-item label="身高: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>cm
+            </el-form-item>
+            <el-form-item label="血脂: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>mmol/L
+            </el-form-item>
+            <el-form-item label="脉搏: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>(次/分)
+            </el-form-item>
+            <el-form-item label="体重: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>kg
+            </el-form-item>
+        </el-form>
+        <div class="mainTitle">病历信息：</div>
+        <el-form class="recordForm" :model="form" :rules="rules" ref="form" label-width="80px">
+            <el-form-item label="病历分类:" prop="name">
+                <el-select style="width:100%;" v-model="value" placeholder="">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="症状: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="发病日期: " prop="name">
+                <el-date-picker
+                style="width:100%;"
+                v-model="value1"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="" prop="name">
+                <el-checkbox v-model="checked">是否传染</el-checkbox>
+            </el-form-item>
+            <el-form-item label="主诉:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="现病史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="既往史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="个人史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="家族史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="诊断信息:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <medicalRecord ref='medicalRecord'></medicalRecord>
+        <saveRecordTemplate ref='saveRecordTemplate'></saveRecordTemplate>
+    </div>
+</template>
+
+<script>
+import medicalRecord from './medicalRecord'
+import saveRecordTemplate from './saveRecordTemplate'
+export default {
+    components:{
+       medicalRecord,
+       saveRecordTemplate 
+    },
+    data(){
+        return{
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        open(index){
+            if(index == 1){
+                
+            }else if(index == 2){
+                
+            }else if(index == 3){
+                this.$refs.medicalRecord.show()
+            }else if(index == 4){
+                this.$refs.saveRecordTemplate.show()
+            }
+            
+        },
+    }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.mainTitle{
+    font-size:18px;
+    font-weight:bold;
+    margin-bottom: 10px;
+}
+.backColor{
+    background: #f6f8f9;
+    height: 5px;
+    margin-bottom: 5px;
+}
+.deskRecord{
+    .basicForm{
+        display: flex;
+        flex-wrap: wrap;
+        .el-form-item{
+            width:32%;
+            margin-right: 1%;
+        }
+    }
+    .physiqueForm{
+        display: flex;
+        flex-wrap: wrap;
+        .el-form-item{
+            width:24%;
+            margin-right: 1%;
+        }
+    }
+    .recordForm{
+        display: flex;
+        flex-wrap: wrap;
+        .el-form-item{
+            width:24%;
+            margin-right: 1%;
+        }
+    }
+    
+}
+</style>
+
+<style lang="scss">
+.physiqueForm{
+    .el-form-item__content{
+        display: flex;
+    }
+    .el-input{
+        width:80px;
+        margin-right:5px;
+    }
+}
+</style>

src/xt_pages/outpatientDoctorStation/components/inquiriesDetail.vue

@@ -45,41 +45,71 @@
                 </el-table> 
             </el-tab-pane>
             <el-tab-pane label="病历详情" name="second">
-                <el-table :data="tableData" border height="350" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-                    <el-table-column align="center" prop="name" label="类型">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="医嘱名称">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="组">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="每次量">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="单位">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="用法">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="频率">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="天数">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="总量">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="单位">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="限制说明">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                </el-table> 
+                <div class="detailMain">
+                    <span style="width:240px;">处方号：344431222222222</span>
+                    <span style="width:200px;">医生：医生</span>
+                    <span style="width:200px;">科室：儿科</span>
+                    <span style="width:200px;">创建时间：2020-10-10 01:12:20</span>
+                </div>
+                <div class="commonCell">
+                    <p>基本信息</p>
+                    <div class="detailMain">
+                        <span style="width:240px;">疾病名称：无</span>
+                        <span style="width:200px;">症状：医生</span>
+                        <span style="width:200px;">发病日期：2020-10-10 01:12:20</span>
+                        <span style="width:200px;">是否传染：否</span>
+                    </div>
+                </div>
+                <div class="commonCell">
+                    <p>体格信息</p>
+                    <div class="detailMain">
+                        <span style="width:140px;">体温：℃</span>
+                        <span style="width:140px;">呼吸：0 次/分</span>
+                        <span style="width:140px;">脉搏：0 次/分</span>
+                        <span style="width:200px;">血压：0。00~0.00 mmHg</span>
+                    </div>
+                </div>
+                <div class="commonCell">
+                    <p></p>
+                    <div class="detailMain">
+                        <span style="width:140px;">血糖：0 mmol/L</span>
+                        <span style="width:140px;">血脂：0 mmol/L</span>
+                        <span style="width:140px;">身高：0 cm</span>
+                        <span style="width:200px;">体重：0 kg</span>
+                    </div>
+                </div>
+                <div class="commonCell">
+                    <p>主诉</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>现病史</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>门诊诊断</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>门诊医嘱</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>过敏史</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>既往史</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>个人史</p>
+                    <div>无</div>
+                </div>
+                <div class="commonCell">
+                    <p>家族史</p>
+                    <div>无</div>
+                </div>
             </el-tab-pane>
         </el-tabs>
         <div slot="footer" class="dialog-footer">
@@ -141,6 +171,21 @@ export default {
     .el-dialog__body{
         padding: 0 20px 30px;
     }
+    .detailMain{
+        // padding:5px;
+        span{
+            display: inline-block;
+        }
+    }
+    .commonCell{
+        display: flex;
+        line-height: 40px;
+        >p{
+            font-weight: bold;
+            color:#000;
+            width: 80px;
+        }
+    }
 }
 </style>
 

src/xt_pages/outpatientDoctorStation/components/medicalRecord.vue

@@ -1,95 +1,101 @@
 <template>
     <el-dialog
-        title="病历"
+        title="病历调用"
         width="1000px"
         :visible.sync="visible"
         :before-close="_close"
+        class="recordDialog"
     >
         <div>
-            <el-form :model="form" :rules="rules" class="medicalRecordForm" ref="form" label-width="100px" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
-                <el-form-item class="width33" label="传染病:" prop="name">
-                    <el-radio v-model="radio" label="1">阴性</el-radio>
-                    <el-radio v-model="radio" label="2">阳性</el-radio>
-                </el-form-item>
-                <el-form-item class="width33" label="患病类型:" prop="name">
-                    <el-radio v-model="radio" label="1">慢性病</el-radio>
-                    <el-radio v-model="radio" label="2">神经病</el-radio>
-                    <el-radio v-model="radio" label="3">抑郁症</el-radio>
-                </el-form-item>
-                <el-form-item class="width33" label="透析之前情况:" prop="name">
-                    <el-radio v-model="radio" label="1">腹膜透析</el-radio>
-                    <el-radio v-model="radio" label="2">肾移植</el-radio>
-                </el-form-item>
-                <el-form-item class="width100" label="主诉 : " prop="name">
-                    <el-input v-model="form.name" placeholder=""></el-input>
-                </el-form-item>
-                <el-form-item class="width100" label="现病史 : " prop="name">
-                    <el-input v-model="form.name" placeholder=""></el-input>
-                </el-form-item>
-                <el-form-item class="width100" label="既往史 : " prop="name">
-                    <el-input v-model="form.name" placeholder=""></el-input>
-                </el-form-item>
-                <el-form-item class="width50" label="药品规格 : " prop="name">
-                    <el-input v-model="form.name" placeholder="" style="width:180px;"></el-input>
-                    <el-select v-model="value" style="width:180px;margin-left:9px;" placeholder="请选择">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="width50" label="总量 : " prop="name">
-                    <el-input v-model="form.name" placeholder="" style="width:180px;"></el-input>
-                    <el-select v-model="value" style="width:180px;margin-left:9px;" placeholder="请选择">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="width50" label="每次量 : " prop="name">
-                    <el-input v-model="form.name" placeholder="" style="width:180px;"></el-input>
-                    <el-select v-model="value" style="width:180px;margin-left:9px;" placeholder="请选择">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="width50" label="用法 : " prop="name">
-                    <el-select v-model="value" style="width:100%;" placeholder="请选择">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="width50" label="执行频率 : " prop="name">
-                    <el-select v-model="value" style="width:100%;" placeholder="请选择">
-                        <el-option
-                        v-for="item in options"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item class="width50" label="天数 : " prop="name">
-                    <el-input v-model="form.name" placeholder=""></el-input>
-                </el-form-item>
-                <el-form-item label="限制说明 : " prop="name" style="width:100%;">
-                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
-                </el-form-item>
-            </el-form>
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="历史病历" name="first">
+                    <div style="display:flex;align-items: center;margin-bottom:10px;">
+                        <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item" style="width:140px;"/>
+                        <el-button size="small" style="margin:0 10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
+                        <span>日期：</span>
+                        <el-date-picker
+                        size="small"
+                        style="width:140px;margin:0 10px;"
+                        v-model="value1"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                        <el-date-picker
+                        style="width:140px;"
+                        size="small"
+                        v-model="value1"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                    </div>
+                    <el-table :data="tableData" border height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                        <el-table-column align="center" type="index" width="60" label="序号"></el-table-column>
+                        <el-table-column align="center" prop="name" label="病历编号">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="诊断信息">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="医生">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="创建日期">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="操作">
+                            <template slot-scope="scope">
+                                <el-button type="primary" size="mini">调用</el-button>
+                                <el-button type="primary" size="mini" @click="toHistoryDetail">详情</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table> 
+                </el-tab-pane>
+                <el-tab-pane label="病历模板" name="second">
+                    <div style="display:flex;align-items: center;margin-bottom:10px;">
+                        <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item" style="width:140px;"/>
+                        <el-button size="small" style="margin:0 10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
+                        <span>日期：</span>
+                        <el-date-picker
+                        size="small"
+                        style="width:140px;margin:0 10px;"
+                        v-model="value1"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                        <el-date-picker
+                        style="width:140px;"
+                        size="small"
+                        v-model="value1"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                    </div>
+                    <el-table :data="tableData" border height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                        <el-table-column align="center" type="index" width="60" label="序号"></el-table-column>
+                        <el-table-column align="center" prop="name" label="病历编号">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="诊断信息">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="医生">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="创建日期">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="操作">
+                            <template slot-scope="scope">
+                                <el-button type="primary" size="mini">调用</el-button>
+                                <el-button type="primary" size="mini" @click="totemplateDetail">详情</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table> 
+                </el-tab-pane>
+            </el-tabs>
         </div>
+        <record-history-detail ref="recordHistoryDetail"></record-history-detail>
+        <record-template-detail ref="recordTemplateDetail"></record-template-detail>
         <div slot="footer" class="dialog-footer">
             <el-button @click="hide">取 消</el-button>
             <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
@@ -98,13 +104,37 @@
 </template>
 
 <script>
+import recordHistoryDetail from './recordHistoryDetail'
+import recordTemplateDetail from './recordTemplateDetail'
 export default {
+    components:{
+        recordHistoryDetail,
+        recordTemplateDetail
+    },
     data(){
         return{
             visible:false,
+            activeName:'first',
             form:{
                 name:''
             },
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
         }
     },
     methods:{
@@ -125,23 +155,20 @@ export default {
             // this.clear()
             this.visible = false
         },
+        toHistoryDetail(){
+            this.$refs.recordHistoryDetail.show()
+        },
+        totemplateDetail(){
+            this.$refs.recordTemplateDetail.show()
+        }
     }
 }
 </script>
 
-<style lang="scss" scoped>
-.medicalRecordForm{
-    .width33{
-        width:33%;
-    }
-    .width50{
-        width:50%;
-    }
-    .width100{
-        width:100%;
-    }
-    .el-radio{
-        margin-right:2px;
+<style lang="scss">
+.recordDialog{
+    .el-dialog__body{
+        padding-top:0;
     }
 }
 </style>

src/xt_pages/outpatientDoctorStation/components/prescriptionTable.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="prescriptionTable">
+        <el-table :data="tableData" border style="width: 98%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+            <el-table-column align="center" type="selection" width="40"></el-table-column>
+            <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
+            <el-table-column align="center" prop="name" label="名称">
+                <template slot-scope="scope">{{ scope.row.date }}</template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="组套">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" :label="'单次\n用量'">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="用法">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="频率">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="天数">
+                <template slot-scope="scope">
+                    <el-select v-model="value" placeholder="">
+                        <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="100" label="总量">
+                <template slot-scope="scope">
+                    <div style="display:flex;">
+                        <el-input v-model="input" style="width:50%" placeholder=""></el-input>
+                        <el-select v-model="value" style="width:50%" placeholder="">
+                            <el-option
+                            v-for="item in options"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="单价">
+                <template slot-scope="scope">
+                    <el-input v-model="input" placeholder=""></el-input>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" prop="name" width="50" label="备注">
+                <template slot-scope="scope">
+                    <el-autocomplete
+                    class="inline-input"
+                    v-model="state1"
+                    :fetch-suggestions="querySearch"
+                    placeholder=""
+                    @select="handleSelect"
+                    ></el-autocomplete>
+                </template>
+            </el-table-column>
+            <el-table-column align="center" width="40" prop="name" label="操作">
+                <template slot-scope="scope">
+                    <i class="el-icon-delete"></i>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            options: [{
+            value: '1',
+            label: '1'
+            }, {
+            value: '2',
+            label: '2'
+            }, {
+            value: '3',
+            label: '3'
+            }, {
+            value: '4',
+            label: '4'
+            }, {
+            value: '5',
+            label: '5'
+            }],
+            value:''
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.prescriptionTable{
+    .el-table th .cell, .el-table td .cell{
+        padding: 0 2px;
+        white-space: pre-line;
+    }
+    .el-icon-delete{
+        color:red;
+    }
+}
+</style>

src/xt_pages/outpatientDoctorStation/components/recordHistoryDetail.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-dialog
+        title="病历历史详情"
+        width="1000px"
+        :visible.sync="visible"
+        :before-close="_close"
+        class="recordDialog"
+        append-to-body
+    >
+        <div class="detailMain">
+            <span style="width:240px;">病历编号：11111111111111111</span>
+            <span style="width:240px;">医生：</span>
+            <span style="width:240px;">创建日期：11111111111111111</span>
+        </div>
+        <div class="detailMain">
+            <span style="width:240px;">关系联系人：无</span>
+            <span style="width:240px;">关系联系方式：无</span>
+        </div>
+        <p>体格检查</p>
+        <div class="detailMain">
+            <span style="margin: 0 0 0 40px;width:140px;">体温：℃</span>
+            <span style="width:140px;">呼吸：0 次/分</span>
+            <span style="width:140px;">脉搏：0 次/分</span>
+            <span style="width:200px;">血压：0。00~0.00 mmHg</span>
+        </div>
+        <div class="detailMain">
+            <span style="margin: 0 0 0 40px;width:140px;">血糖：0 mmol/L</span>
+            <span style="width:140px;">血脂：0 mmol/L</span>
+            <span style="width:140px;">身高：0 cm</span>
+            <span style="width:200px;">体重：0 kg</span>
+        </div>
+        <div class="detailMain">
+            <span style="width:220px;">疾病名称：无</span>
+            <span style="width:220px;">症状：无</span>
+            <span style="width:220px;">发病日期：</span>
+            <span style="width:220px;">是否传染：否</span>
+        </div>
+        <div class="detailMain">
+            <span>主诉：</span>
+        </div>
+        <div class="detailMain">
+            <span>现病史：</span>
+        </div>
+        <div class="detailMain">
+            <span>诊断信息：</span>
+        </div>
+        <div class="detailMain">
+            <span>医嘱：</span>
+        </div>
+        <div class="detailMain">
+            <span>过敏史：</span>
+        </div>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="hide">取 消</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
+        </div>
+    </el-dialog>         
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            visible:false,
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        _close: function(done) {
+            // this.clear()
+            done()
+        },
+        clear: function() {
+            this.form.id = 0;
+            this.form.name = "";
+            this.form.intro = "";
+        },
+        show() {
+            // this.clear()
+            this.visible = true
+        },
+        hide() {
+            // this.clear()
+            this.visible = false
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+.recordDialog{
+    .el-dialog__body{
+        padding-top:0;
+    }
+}
+.detailMain{
+    padding:5px;
+    span{
+        display: inline-block;
+    }
+}
+</style>
+

src/xt_pages/outpatientDoctorStation/components/recordTemplateDetail.vue

@@ -0,0 +1,143 @@
+<template>
+    <el-dialog
+        title="病历模板详情"
+        width="1000px"
+        :visible.sync="visible"
+        :before-close="_close"
+        class="recordDialog"
+        append-to-body
+    >
+        <el-form class="recordForm" :model="form" :rules="rules" ref="form" label-width="80px">
+            <el-form-item label="模板名称: " prop="name" style="width:49%;">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="" prop="name" style="width:49%;">
+                <el-radio v-model="radio" label="1">私人模板</el-radio>
+                <el-radio v-model="radio" label="2">公共模板</el-radio>
+            </el-form-item>
+            <el-form-item label="模板说明: " prop="name" style="width:100%;">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="病历分类:" prop="name">
+                <el-select style="width:100%;" v-model="value" placeholder="">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="症状: " prop="name">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="发病日期: " prop="name">
+                <el-date-picker
+                style="width:100%;"
+                v-model="value1"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+            </el-form-item>
+            <el-form-item label="" prop="name">
+                <el-checkbox v-model="checked">是否传染</el-checkbox>
+            </el-form-item>
+            <el-form-item label="主诉:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="现病史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="既往史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="个人史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="家族史:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="诊断信息:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="hide">取 消</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
+        </div>
+    </el-dialog>         
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            visible:false,
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        _close: function(done) {
+            // this.clear()
+            done()
+        },
+        clear: function() {
+            this.form.id = 0;
+            this.form.name = "";
+            this.form.intro = "";
+        },
+        show() {
+            // this.clear()
+            this.visible = true
+        },
+        hide() {
+            // this.clear()
+            this.visible = false
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.recordForm{
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item{
+        width:24%;
+        margin-right: 1%;
+    }
+}
+</style>
+

src/xt_pages/outpatientDoctorStation/components/saveRecordTemplate.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-dialog
+        title="保存病历模板"
+        width="600px"
+        :visible.sync="visible"
+        :before-close="_close"
+        class="recordDialog"
+    >
+        <el-form class="recordForm" :model="form" :rules="rules" ref="form" label-width="80px">
+            <el-form-item label="模板类别:" prop="name" style="width:100%;">
+                <el-radio v-model="radio" label="1">私人模板</el-radio>
+                <el-radio v-model="radio" label="2">公共模板</el-radio>
+            </el-form-item>
+            <el-form-item label="模板名称: " prop="name" style="width:100%;">
+                <el-input v-model="form.name" placeholder=""></el-input>
+            </el-form-item>
+            <el-form-item label="模板说明:" prop="name" style="width:100%;">
+                <el-input
+                type="textarea"
+                :rows="2"
+                placeholder="请输入内容"
+                v-model="textarea">
+                </el-input>
+            </el-form-item>
+            <el-form-item label="创建人:" prop="name" style="width:100%;">
+            </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+            <el-button @click="hide">取 消</el-button>
+            <el-button type="primary" :loading="submitLoading" @click="submitAction()">保 存</el-button>
+        </div>
+    </el-dialog>         
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            visible:false,
+            form:{
+                name:''
+            },
+        }
+    },
+    methods:{
+        _close: function(done) {
+            // this.clear()
+            done()
+        },
+        clear: function() {
+            this.form.id = 0;
+            this.form.name = "";
+            this.form.intro = "";
+        },
+        show() {
+            // this.clear()
+            this.visible = true
+        },
+        hide() {
+            // this.clear()
+            this.visible = false
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.recordForm{
+    display: flex;
+    flex-wrap: wrap;
+    .el-form-item{
+        width:24%;
+        margin-right: 1%;
+    }
+}
+</style>
+

src/xt_pages/outpatientDoctorStation/components/saveTemplate.vue

@@ -1,16 +1,23 @@
 <template>
     <el-dialog
-        title="新增医嘱"
+        title="模板信息"
         width="600px"
         :visible.sync="visible"
         :before-close="_close"
     >
         <div>
             <el-form :model="form" :rules="rules" class="adviceForm" ref="form" label-width="100px" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
-                <el-form-item label="模板名称 : " prop="name" style="width: 100%;">
-                    <el-input v-model="form.name" placeholder=""></el-input>
+                <el-form-item label="创建人 : " style="width: 100%;margin-bottom:0;">
+                    医生
+                </el-form-item>
+                <el-form-item label="处方类型 : " style="width: 100%;margin-bottom:0;">
+                    药品模板
+                </el-form-item>
+                <el-form-item label="模板类型 : " style="width: 100%;margin-bottom:0;">
+                    <el-radio v-model="radio" label="1">临时</el-radio>
+                    <el-radio v-model="radio" label="2">长期</el-radio>
                 </el-form-item>
-                <el-form-item label="模板类型 : " prop="name" style="width: 100%;">
+                <el-form-item label="科室 : " style="width: 100%;">
                     <el-select v-model="value" style="width:100%;" placeholder="请选择">
                         <el-option
                         v-for="item in options"
@@ -20,10 +27,19 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
-                <el-form-item label="模板等级 : " prop="name" style="width: 100%;">
+                <el-form-item label="模板名称 : " style="width: 100%;">
+                    <el-input v-model="form.name" placeholder=""></el-input>
+                </el-form-item>
+                <el-form-item label="模板说明 : " style="width: 100%;">
+                    <el-input v-model="form.name" placeholder=""></el-input>
+                </el-form-item>
+                <el-form-item label="诊断信息 : " style="width: 100%;">
+                    <el-input v-model="form.name" placeholder=""></el-input>
+                </el-form-item>
+                <el-form-item label="医嘱说明 : " style="width: 100%;">
                     <el-input v-model="form.name" placeholder=""></el-input>
                 </el-form-item>
-                <el-form-item label="创建时间 : " prop="name" style="width: 100%;">
+                <el-form-item label="备注说明 : " style="width: 100%;">
                     <el-input v-model="form.name" placeholder=""></el-input>
                 </el-form-item>
             </el-form>

src/xt_pages/outpatientDoctorStation/components/selectTemplate.vue

@@ -6,36 +6,39 @@
         :before-close="_close"
     >
         <div style="display:flex;">
-            <div style="width: 121px;">
+            <div style="width: 201px;">
                 <el-table :data="tableData" border height="300" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-                    <el-table-column align="center" prop="name" label="模板名称" width="120">
+                    <el-table-column align="center" prop="name" label="处方类型" width="100">
+                        <template slot-scope="scope">{{ scope.row.date }}</template>
+                    </el-table-column>
+                    <el-table-column align="center" prop="name" label="模板名称" width="100">
                         <template slot-scope="scope">{{ scope.row.date }}</template>
                     </el-table-column>
                 </el-table> 
             </div>
             <el-table :data="tableData" border height="300" style="flex:1;margin-left:20px;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
                 <el-table-column type="selection" width="55" align="center"></el-table-column>
-                <el-table-column align="center" prop="name" label="医嘱内容">
+                <el-table-column align="center" prop="name" label="药品名称">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
                 <el-table-column align="center" prop="name" label="药品规格">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
-                <el-table-column align="center" prop="name" label="开药数量">
-                    <template slot-scope="scope">{{ scope.row.date }}</template>
-                </el-table-column>
                 <el-table-column align="center" prop="name" label="单次用量">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
-                <el-table-column align="center" prop="name" label="给药途径">
+                <el-table-column align="center" prop="name" label="用法">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
-                <el-table-column align="center" prop="name" label="执行频率">
+                <el-table-column align="center" prop="name" label="频率">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
                 <el-table-column align="center" prop="name" label="天数">
                     <template slot-scope="scope">{{ scope.row.date }}</template>
                 </el-table-column>
+                <el-table-column align="center" prop="name" label="总量">
+                    <template slot-scope="scope">{{ scope.row.date }}</template>
+                </el-table-column>
             </el-table> 
         </div>
         <div slot="footer" class="dialog-footer">

src/xt_pages/outpatientDoctorStation/doctorDesk.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="main-contain">
+    <div class="main-contain new-main-contain">
         <div class="position">
             <bread-crumb :crumbs='crumbs'></bread-crumb>
         </div>
-        <div class="app-container" style="display:flex">
+        <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>0</span>人</p>
@@ -20,112 +20,41 @@
                     <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                     <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary" @click="searchAction">搜索</el-button>
                 </div>
-                <el-table :data="tableData" border height="500" style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-                    <el-table-column align="center" width="40">
-                        <template slot-scope="scope">
-                            <el-popover placement="top-start" width="200" trigger="hover">
-                                <i slot="reference" class="el-icon-caret-bottom"></i>
-                            </el-popover>
-                        </template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="姓名" width="100">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="姓名" width="110">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                </el-table>
+                <div style="flex:1;overflow-y:auto;">
+                    <el-table :data="tableData" border style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
+                        <el-table-column align="center" prop="name" label="患者姓名">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                        <el-table-column align="center" prop="name" label="就诊号" width="90">
+                            <template slot-scope="scope">{{ scope.row.date }}</template>
+                        </el-table-column>
+                    </el-table>
+                </div>
             </div> 
             <div class="mainRight">
-                <div style="display:flex;justify-content: space-between;">
-                    <div>
-                        <div class="mainCell">
-                            <p>姓名：<span class="cellSpan"></span></p>
-                            <p>证件号：<span class="cellSpan"></span></p>
-                            <p>挂号类型：<span class="cellSpan"></span></p>
-                            <p>患者保险类型：<span class="cellSpan"></span></p>
-                        </div>
-                        <div class="mainCell">
-                            <label class="title"><span class="name">诊断</span> : </label>
-                            <el-input size="small" style="width:150px;margin:0 10px;" v-model="input" placeholder="请输入内容"></el-input>
-                            <label class="title"><span class="name">处方类型</span> : </label>
-                            <el-select size="small" v-model="value" placeholder="请选择" style="width:150px;margin-left:10px;">
-                                <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                                </el-option>
-                            </el-select>
-                        </div>
-                    </div>
-                    <div class="cost">
-                        <p>当用费用总额：</p>
-                        <p>药品费用总额：</p>
-                    </div>
-                </div>
-                <div style="display:flex;justify-content: space-between;">
-                    <div class="mainCell" style="margin-bottom:10px;">
-                        <label class="title"><span class="name">新增</span> : </label>
-                        <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">智慧医保</el-button>
-                        <el-button size="small" @click="open(2)" type="primary">病历</el-button>
-                        <el-button size="small" @click="open(3)" type="primary">新医嘱</el-button>
-                        <el-button size="small" @click="open(4)" type="primary">选择模板</el-button>
-                        <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
-                        <el-button size="small" @click="open(6)" type="primary">开检验</el-button>
-                    </div>
-                    <div><el-button size="small" type="primary">保存打印</el-button></div>
+                <div class="mainHeader">
+                    <el-radio-group v-model="titleType">
+                        <el-radio-button label="处方"></el-radio-button>
+                        <el-radio-button label="病历"></el-radio-button>
+                    </el-radio-group>
                 </div>
-                <el-table :data="tableData" border height="500" style="width: 100%;" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-                    <el-table-column align="center" prop="name" label="类型">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="名称">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="规格">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="数量">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="单次用量">
-                        <template slot-scope="scope">{{ scope.row.date }}</template>
-                    </el-table-column>
-                    <el-table-column align="center" prop="name" label="操作">
-                        <template slot-scope="scope">
-                            <el-button size="mini" type="danger">删除</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
+                <desk-prescription v-if="titleType == '处方'" style="flex:1;"></desk-prescription>
+                <desk-record v-if="titleType == '病历'"></desk-record>
             </div>
+            
         </div>
-        <prescription ref='prescription'></prescription>
-        <medicalRecord ref='medicalRecord'></medicalRecord>
-        <advice ref='advice'></advice>
-        <select-template ref='selectTemplate'></select-template>
-        <save-template ref='saveTemplate'></save-template>
-        <inspection ref='inspection'></inspection>
     </div>
 </template>
 
 <script>
 import BreadCrumb from '@/xt_pages/components/bread-crumb'
-import prescription from './components/prescription'
-import medicalRecord from './components/medicalRecord'
-import advice from './components/advice'
-import selectTemplate from './components/selectTemplate'
-import saveTemplate from './components/saveTemplate'
-import inspection from './components/inspection'
+import deskPrescription from './components/deskPrescription'
+import deskRecord from './components/deskRecord'
 export default {
     components:{
         BreadCrumb,
-        prescription,
-        medicalRecord,
-        advice,
-        selectTemplate,
-        saveTemplate,
-        inspection
+        deskPrescription,
+        deskRecord
     },
     data(){
         return{
@@ -133,6 +62,7 @@ export default {
                 { path: false, name: '门诊医生站' },
                 { path: false, name: '医生工作台' }
             ],
+            titleType:'处方',
             tableData: [{
             date: '2016-05-02',
             name: '王小虎',
@@ -149,59 +79,231 @@ export default {
             date: '2016-05-03',
             name: '王小虎',
             address: '上海市普陀区金沙江路 1516 弄'
-            }]
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            },{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+            }],
+            
         }
     },
     methods:{
-        open(index){
-            if(index == 1){
-                this.$refs.prescription.show()
-            }else if(index == 2){
-                this.$refs.medicalRecord.show()
-            }else if(index == 3){
-                this.$refs.advice.show()
-            }else if(index == 4){
-                this.$refs.selectTemplate.show()
-            }else if(index == 5){
-                this.$refs.saveTemplate.show()
-            }else if(index == 6){
-                this.$refs.inspection.show()
-            }
-            
-        }
+        
     }
 }
 </script>
 
 <style lang="scss" scoped>
+.new-main-contain{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+.app-container{
+    height:100%;
+}
 .mainCell{
     height:36px;
     display: flex;
     align-items: center;
 }
 .mainLeft{
-    width:250px;
+    width:200px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     .el-radio{
-        margin-right:20px;
+        margin-right:5px;
     }
     
 }
 .mainRight{
     margin-left:20px;
     flex:1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
     .cellSpan{
         min-width: 80px;
         display: inline-block;
         margin-right: 10px;
     }
-    .cost{
-        border: 1px solid #ccc;
-        height: 60px;
-        display: flex;
-        width: 200px;
-        flex-direction: column;
-        justify-content: space-around;
+}
+.mainCenter{
+    display: flex;
+    flex:1;
+}
+.centerLeft{
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    .el-form-item{
+        width:32%;
+        margin-right: 1%;
+        float: left;
+    }
+    .el-form-item__label{
+        text-align: left;
+    }
+}
+.backColor{
+    background: #f6f8f9;
+    height: 5px;
+    margin-bottom: 5px;
+}
+.tabsBox{
+    position: relative;
+    height: 76%;
+    overflow-y: auto;
+    margin-bottom: 60px;
+    .el-tabs__item{
         padding: 0 10px;
     }
 }
+.preTabs{
+    height:100%;
+}
+.costBox{
+    width:100%;
+    height:60px;
+    background:#fff;
+    position: absolute;
+    bottom:0;
+    display: flex;
+    align-items: center;
+}
+.addTab{
+    position: absolute;
+    right: 0;
+    top: 14px;
+    z-index: 20;
+}
+.centerRight{
+    width: 300px;
+    margin-left: 5px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+.rightTab{
+    height: 40px;
+    width: 100%;
+    border: 1px solid #d2d2d2;
+    box-sizing: border-box;
+    
+    p{
+        width: 50%;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        background: #eee;
+        float: left;
+    }
+    >p:last-child{
+      border-left: 1px solid #d2d2d2;  
+      float: right;
+    }
+    .activeP{
+        background: #409EFF;
+        color:#fff;
+    }
+}
+.comfirmBox{
+    width:100%;
+    height:60px;
+    background:#fff;
+    position: absolute;
+    bottom:0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
+
+<style lang="scss">
+.centerLeft{
+    .el-form-item__label{
+        text-align: left;
+    }
+}
+.tabsBox{
+    .el-tabs__item{
+        padding: 0 10px;
+    }
+    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:nth-child(2){
+        padding: 0 10px;
+    }
+    .el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child{
+        padding: 0 10px;
+    }
+    .el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{
+        padding: 0 10px;
+    }
+}
+.centerRight{
+    .el-tabs__nav-scroll{
+        display: flex;
+    }
+    .el-tabs__nav{
+        margin: 0 auto;
+    }
+    .el-table th .cell, .el-table td .cell{
+        padding: 0 2px;
+    }
+}
+.preTabs{
+    // .el-tabs__content{
+    //     height:69%;
+    //     overflow-y: auto;
+    // }
+}
+.rightTabs{
+    height: 100%;
+    // .el-tabs__content{
+    //     height:72%;
+    //     overflow-y: auto;
+    // }
+}
 </style>

src/xt_pages/outpatientDoctorStation/pastInquiries.vue

@@ -38,7 +38,7 @@
                 </el-table-column>
                 <el-table-column align="center" prop="name" label="操作" width="100">
                     <template slot-scope="scope">
-                        <el-button size="mini" type="danger" @click="handerDelete">删除</el-button>
+                        <el-button size="mini" type="primary" @click="handerDelete">详情</el-button>
                     </template>
                 </el-table-column>
             </el-table>