elizebeth/src/xt_pages/outpatientCharges/outpatientChargesManagement...

<template>
    <div class="main-contain outpatientChargesManagement">
        <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="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>
        </div>
        <additionalCharges ref='additionalCharges'></additionalCharges>
    </div>
</template>


<script>
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,
        prescriptionTable,
        additionalCharges
    },
    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 弄'
            },{
            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{
    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;
        }
    }
    .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;
        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">
#tab-more{
    .el-icon-close{
        display: none;
    }
}
</style>