diagnosis.admin/src/components/ui/suitMadePad.vue

<!-- 适宜技术处方笺 -->
<template>
    <div class="chinese-m-pad">
        <header class="flex flex-row-center flex-col-center">
            <!-- 条形码 -->
            <div class="code-img">
                <img :src="recipeData.barcode" alt="">
                <div>{{recipeData.pid}}</div>
            </div>
            <div class="title">适宜技术处方笺</div>
            <div class="type">普通处方</div>
        </header>

        <!-- 患者信息部分 -->
        <div class="patients-msg">
            <div class="patients-msg1 flex flex-col-center flex-row-between">
                <div class="msg1-item" style="flex:0 0 28%;">姓名：{{recipeData.name}}</div>
                <div class="msg1-item flex flex-row-between">
                    <div>性别：{{recipeData.sex}}</div>
                    <div>年龄：{{recipeData.age}}</div>
                </div>
                <div class="msg1-item">科室：{{recipeData.clinic}}</div>
            </div>
            <div class="patients-msg1 flex flex-col-center flex-row-between">
                <div class="msg1-item">临床诊断：{{recipeData.clinicalDiagnosis}}</div>

                <div class="msg1-item">开方时间：{{recipeData.prescriptionTime?recipeData.prescriptionTime:''}}</div>
            </div>
            <div class="patients-msg1 flex flex-col-center flex-row-between">
                <div class="msg1-item" style="flex:0 0 30%;">电话：{{recipeData.phone}}</div>
                <!-- 没有地址 则为自提 -->
                <!-- <div class="msg1-item ellipsis-line1">地址：{{recipeData.address?recipeData.address:'自提'}}</div> -->
            </div>
        </div>
        <!-- 药品信息部分 -->
        <div class="Rp">
            <div class="Rp-title">Rp:</div>
            <div class="Rp-detail">
                <div class="Rp-option flex flex-col-top flex-row-left">
                    <div class="option-name">穴位：</div>
                    <div class="option-right flex flex-wrap">
                        <div class="Rp-item" v-for="(item,index) in recipeData.prescriptiontechnologydetailVos"
                            :key="index">{{item.pointname}}</div>
                    </div>
                </div>
                <div class="Rp-option flex flex-col-top flex-row-left">
                    <div class="option-name">类型：</div>
                    <div class="option-right flex flex-wrap">{{recipeData.technologyType}}</div>
                </div>
                <div class="Rp-option flex flex-col-top flex-row-left">
                    <div class="option-name">次数：</div>
                    <div class="option-right flex flex-wrap">{{recipeData.num}}</div>
                </div>
            </div>
            <div class="Rp-other">

                <div style="text-align:right;" v-if="recipeData.entrust">
                    {{recipeData.entrust}}
                </div>
            </div>
        </div>

        <!-- 价格部分 -->
        <div class="patients-bottom flex flex-row-left flex-col-center">
            <div class="left-table">
                <div class="rp-price">项目费：{{recipeData.amountOfMedicine.toFixed(2)}}</div>

                <div class="total-price">
                    总金额：{{recipeData.lumpSum.toFixed(2)}}
                </div>
            </div>
            <div class="right-sign">
                <div class="kf-name">开方医生：{{recipeData.prescriber}}</div>
                <div class="flex flex-row-l flex-wrap other-name">
                    <div style="flex:0 0 50%;">审核：{{recipeData.reviewer}}</div>
                    <div style="flex:0 0 50%;">调配：{{recipeData.dispatcher}}</div>
                    <div style="flex:0 0 50%;">核对：{{recipeData.checker}}</div>
                    <div style="flex:0 0 50%;">发药：{{recipeData.dispenser}}</div>
                </div>
            </div>
        </div>
        <div class="flex flex-col-top fle-row-left" style="font-size:13px;">
            <div>注:</div>
            <div>
                <div>1、本处方当日有效</div>
                <div>2、取药时请您当面核对药品名称、规格、数量</div>
                <div>3、延长处方用量时间原因：慢性病 其他老年病 外地 其他</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            recipeData: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "~@/style/common.scss";

    .chinese-m-pad {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
        // height: 609px;
        height: 459px; // 1280 下
        overflow: auto;
        padding: 5px;
        box-sizing: border-box;
        background: #fff;
        // border: 1px solid red;
        overflow: hidden;

        header {

            position: relative;
            height: 34px;

            .title {
                font-size: 18px;
                font-weight: bold;
                margin-left: 24px;
            }

            .code-img {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 150px;


                img {
                    display: inline-block;
                    width: 100%;
                    height: 40px;
                    background: red;
                    font-size: 0px;
                }

                div {
                    font-size: 12px;
                    text-align: center;
                    margin-top: -5px;
                }
            }

            .type {
                font-size: 15px;
                position: absolute;
                top: 0px;
                right: 0px;
                width: 40px;
            }
        }

        .patients-msg {
            font-size: 13px;
            margin-top: 20px;
            padding-bottom: 5px;
            border-bottom: 1px solid #000;

            .patients-msg1 {
                margin-bottom: 5px;

                .msg1-item {
                    flex: 1;
                    margin-right: 10px;
                }

                .msg1-item:last-child {
                    margin-right: 0;
                }
            }

            .patients-msg1:last-child {
                margin-bottom: 0;
            }
        }

        .Rp {
            margin-top: 5px;
            border-bottom: 1px solid #000;
            padding-bottom: 5px;
            min-height: 187px;

            &-title {
                font-size: 15px;
                font-weight: bold;
                color: #000;
            }

            &-detail {
                font-size: 13px;


            }

            &-option {
                padding: 0 44px;
                margin-bottom: 10px;

                .option-name {
                    display: block;
                    width: 50px;
                }

                .option-right {
                    flex: 1;
                }
            }



            &-item {
                margin-right: 10px;
                // text-align: center;
                margin-bottom: 8px;


            }

            &-other {
                font-size: 13px;
                padding: 0 10px 0 44px;

                div:nth-child(1) {
                    margin-top: 5px;
                    margin-bottom: 5px;

                    span {
                        margin-right: 5px;
                    }
                }
            }
        }

        .patients-bottom {
            padding: 5px 0;
            border-bottom: 1px solid #000;

            .left-table {
                width: 190px;
                height: 50px;
                border: 1px solid #333;
                font-size: 13px;
                text-align: center;

                .rp-price {
                    padding: 4px 0 4px;
                    // padding-bottom: 5px;
                    border-bottom: 1px solid #333;
                }

                .other-price {


                    div {
                        flex: 1;
                        padding: 3px 0;
                        border-top: 1px solid #333;
                        border-bottom: 1px solid #333;
                    }

                    div:nth-child(1) {
                        border-right: 1px solid #333;
                    }


                }

                .total-price {
                    padding: 0px 0 0px;
                }
            }

            .right-sign {
                flex: 1;
                font-size: 13px;
                padding: 0 10px;

                .kf-name {
                    margin-bottom: 5px;
                }

                .other-name {
                    padding: 0 10px;

                    div {
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
</style>