Vue_New/src/xt_pages/user/evaluationtool/Constraintnotification.vue

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-9"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class="content_top" style="background: rgb(243, 240, 240);border: 1px solid #DCDFE6;padding: 10px;">
                    <p style="font-size: 18px;">约束告知单</p> 
                    <div>
                        <el-button type="primary">确定</el-button>
                    </div>
                </div>
                <div style="background: rgb(243, 240, 240);padding: 5px;border: 1px solid #DCDFE6;">
                    <span>
                        尊敬的患者、家属及患者的法定监护人、授权委托人：
                        患者目前诊断：<el-input v-model="input" style="width:200px"></el-input>
                    </span>
                </div>
                <table class="table" border="1" style="width: 100%; padding: 5px;">
                    <tr>
                        <td style="width: 150px; height: 40px; ">存在以下潜在风险：</td>
                        <td>
                            <div class="jiange">
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox v-for="item in qianzai" :label="item" :key="item"></el-checkbox>
                                </el-checkbox-group>    
                            </div>
                        </td>
                    </tr>
                </table>
                <table class="table" border="1" style="width: 100%;">
                    <thead>
                        <tr>
                            <th style="width:150px">项目</th>
                            <th>患者评估</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="start">意识及情绪：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in yisqingxu" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>    
                                </div>
                            </td>
                        </tr>
                        <tr class="bg_color">
                            <td class="start">手术麻醉：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in mazui" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr class="">
                            <td class="start"></td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox label="醉酒躁动"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr class="bg_color">
                            <td class="start">管道：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in guandao" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="start">上肢情况：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in shangzhi" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr class="bg_color">
                            <td class="start">下肢情况：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in xiazhi" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr class="">
                            <td class="start">皮肤状况：</td>
                            <td>
                                <div class="jiange">
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox v-for="item in pifu" :label="item" :key="item"></el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </td>
                        </tr>
                        <tr class="bg_color">
                            <td colspan="2">
                                <div style="width: 60%; margin-bottom: 15px;">
                                    <div style="height: 40px; line-height: 40px;border:1px solid #DCDFE6; "><ul>
                                        <li style="list-style: disc;margin-left: 20px;">为防止无法预计的意外，需要实施保护性约束</li>
                                    </ul></div>
                                    <table class="table" border="1" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>约束方式</th>
                                                <th>约束并发症</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="bg_color">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="bg_color">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="bg_color">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                            <tr class="">
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                               

                            </td>
                        </tr>
                        <tr >
                            <td colspan="2">
                                <span>
                                    根据患者的病情记医嘱，需要实施保护性约束，预防意外的发生，由于受个体差异的影响，约束过程存在不可预见的危险情况； 
                                    在约束过程中医护人员会定时观察约束部位的血液循环情况，在患者符合解除约束指征的情况下给予解除约束。
                                </span>
                            </td> 
                        </tr>
                        <tr class="bg_color">
                            <td colspan="2">
                                <span>
                                    患者或家属意见：<el-input v-model="input" style="width:200px"></el-input>
                                </span>
                            </td>
                        </tr>
                        <tr class="">
                            <td colspan="2">
                                <span class="bottoms">
                                    患者或家属签名：<el-input v-model="input" style="width:200px"></el-input>
                                </span>
                                <span class="bottoms">
                                    与患者关系：<el-input v-model="input" style="width:200px"></el-input>
                                </span>
                                <span class="bottoms">
                                    日期：
                                    <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        placeholder="选择日期"
                                        style="width:150px">
                                    </el-date-picker>
                                </span>
                            </td>
                        </tr>
                        <tr class="bg_color">
                            <td colspan="2">
                                <span class="bottoms">
                                    告知者签名：<el-input v-model="input" style="width:200px"></el-input>
                                </span>
                                <span class="bottoms" style="margin-left: 385px;">
                                    日期：
                                    <el-date-picker
                                        v-model="value1"
                                        type="date"
                                        placeholder="选择日期"
                                        style="width:150px">
                                    </el-date-picker>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </div>
        </div>
       
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
        return{
            patientID:0,
            value1:'',
            input:'',
            checkList:[],
            qianzai:['坠床','自伤','非计划拔管','伤人','其他'],
            yisqingxu:['烦躁不安','狂躁','自杀','自伤','伤人'],
            mazui:['全麻术后未清醒','躁动不配合','术后瞻妄综合症'],
            guandao:['尿管','胃管','腹腔引流管','胸腔闭室引流管','脑室引流管','造痿管','气管插管','气管切开','深静脉置管','其他'],
            shangzhi:['正常','骨折','皮肤损伤','其他'],
            xiazhi:['正常','骨折','皮肤损伤','其他'],
            pifu:['完整水肿','破损','黄疸','紫绀','压疮','皮疹','潮红','部位']
        }
    }
}
</script>
<style lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between; 
    }
    .table{
        border: 1px solid #DCDFE6;
        border-collapse:collapse;
        border-spacing: 0;
        thead th{
            background: #0077ff9f;
            color: white;
            text-align: center;
            height: 40px;
            // padding: 5px;
        }
        tbody td{
           height: 40px;
           padding: 5px;
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .jiange{
            margin-left: 20px;
            color: black;
        }
        input{
            -webkit-appearance: checkbox;
        }
        .bottoms{
            display: inline-block;
            margin: 5px 50px 5px 5px;
        }
    }
    
</style>