elizebeth/src/xt_pages/hospitalStation/components/noCharge.vue

<template>
    <div style="display:flex;">
        <div class="noChargeLeft">
            <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>
            <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="处方号" width="100">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="姓名" width="99">
                    <template slot-scope="scope">{{ scope.row.date }}</template>
                </el-table-column>
            </el-table>
        </div>
        <div style="flex:1;overflow-x: hidden;">
            <div class="noChargeRight">
                <div class="chargeInfo">
                    <p>姓名：<span></span></p>
                    <p>性别：<span></span></p>
                    <p>年龄：<span></span></p>
                    <p>证件号：<span></span></p>
                    <p>挂号类型：<span></span></p>
                    <p>上一个发票号：<span></span></p>
                    <p>下一个发票号：<span></span></p>
                </div>
                <div class="chargeBox">
                    <p>医疗费用总额：<span></span></p>
                    <p>基金支付金额：<span></span></p>
                    <p>个人账户支付金额：<span></span></p>
                    <p>个人支付金额：<span></span></p>
                    <p>个人账号金额：<span></span></p>
                </div>
                <p class='chargeTitle'>药品信息</p>
                <el-table :data="tableData" border height="200" 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">{{ scope.row.date }}</template>
                    </el-table-column>
                </el-table>
                <p class='chargeTitle'>项目信息</p>
                <el-table :data="tableData" border height="200" 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">{{ scope.row.date }}</template>
                    </el-table-column>
                </el-table>
                <div class='chargeBtn'>
                    <p>总金额：0元</p>
                    <div>
                        <el-button>预结算</el-button>
                        <el-button type="primary">结算保存</el-button>
                    </div>
                </div>
            </div>
        </div>
    </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 弄'
            }]
        }
    }
}
</script>


<style lang="scss" scoped>
.noChargeLeft{
    width:200px;
    .mainCell{
        display: flex;
    }
}
.noChargeRight{
    margin-left:20px;
    // flex: 1;
    .chargeInfo{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 32px;
        margin-bottom: 10px;
        >p{
            display: flex;
        }
        >p>span{
            display: inline-block;
            min-width: 50px;
        }
    }
    .chargeBox{
        height:42px;
        border: 1px solid #EBEEF5;
        display: flex;
        justify-content: space-between;
        background-color: rgb(245, 247, 250);
        color: rgb(96, 98, 102);
        align-items: center;
        padding: 0 20px;
        >p>span{
            display: inline-block;
            min-width: 50px;
        }
    }
    .chargeTitle{
        line-height: 32px;
        height: 32px;
    }
    .chargeBtn{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }
}
</style>