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

<!-- 小儿跌倒风险评估 -->
<template>
    <div class="patient-container">
        <patient-sidebar :id="patient_id" defaultActive="5-2"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class='content_top' style="width: 100%;margin-bottom: 20px;">
                    <div style="font-size: 20px;">小儿高危跌倒坠床评估表</div>
                    <div>
                        <el-button>历史评分</el-button>
                        <el-button>告知书</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                            <tr>
                            <th style="width: 150px;">项目</th>
                            <th>4分</th>
                            <th>3分</th>
                            <th>2分</th>
                            <th>1分</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="bg_color">
                                <td class="start">年龄</td>
                                <td>
                                    <div class="jiange">
                                        <label><input name="ball" type="checkbox" value="football" />>1岁~≤3岁</label>
                                    </div>
                                </td>
                                <td><div class="jiange">
                                    <!-- <el-checkbox label=">3岁~≤7岁"></el-checkbox> -->
                                    <label><input name="ball" type="checkbox" value="football" />>3岁~≤7岁</label>
                                </div></td>
                                <td><div class="jiange">
                                    <!-- <el-checkbox label=">7岁~≤13岁"></el-checkbox> -->
                                    <label><input name="ball" type="checkbox" value="football" />>7岁~≤13岁</label>
                                </div></td>
                                <td><div class="jiange">
                                    <!-- <el-checkbox label=">13岁"></el-checkbox> -->
                                    <label><input name="ball" type="checkbox" value="football" />>13岁</label>
                                </div></td>
                            
                            </tr>
                            <tr>
                                <td colspan="3">
                                    <div class="bing">性别</div> 
                                </td>
                                <td><div class="jiange"><el-checkbox label="男" ></el-checkbox></div></td>
                                <td><div class="jiange"><el-checkbox label="女"></el-checkbox></div></td>
                            </tr>
                            <tr class="bg_color">
                                <td class="start">诊断</td>
                                <td><div class="jiange"><el-checkbox label="" ></el-checkbox></div></td>
                                <td><div class="jiange"><el-checkbox label=""></el-checkbox></div></td>
                                <td><div class="jiange"><el-checkbox label=""></el-checkbox></div></td>
                                <td><div class="jiange"><el-checkbox label=""></el-checkbox></div></td>
                            </tr>
                            <tr>
                            <td colspan="2">
                                <div class="bing">认知障碍</div> 
                            </td>
                            <td>项目</td>
                            <td>项目</td>
                            <td>项目</td> 
                            </tr>
                            <tr class="bg_color">
                            <td class="start">环境因素</td>
                            <td>项目</td>
                            <td>项目</td>
                            <td>项目</td>
                            <td>项目</td> 
                            </tr>
                            <tr>
                            <td colspan="2">
                                <div class="bing">药物使用</div>
                            </td>                             
                            <td>项目</td>
                            <td>项目</td>
                            <td>项目</td> 
                            </tr>
                            <tr class="bg_color">
                            <td colspan="5" style="height: 30px;"></td>
                            
                            </tr>
                            <tr>
                            <td colspan="5">
                                <div class="content_top" >
                                    <div>
                                        <div class="bottoms">
                                        <span>总分:</span>
                                        <el-input v-model="input" placeholder="请输入内容" style="width: 100px;"></el-input>分
                                        </div>

                                        <div class="bottoms">
                                            <span>评估日期:</span>
                                            <el-date-picker
                                                v-model="value1"
                                                type="date"
                                                placeholder="选择日期"
                                                :clearable="false"
                                                style="width: 150px;">
                                            </el-date-picker>
                                        </div>

                                        <div class="bottoms">
                                            <span>评估人:</span>
                                            <el-select v-model="value" placeholder="请选择" >
                                                <el-option
                                                v-for="item in options"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                style="width:150px;">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        
                                    </div>
                                    <div style="margin:5px 10px;">
                                            <el-button type="primary">确认</el-button>
                                    </div>
                                </div>
                            </td>
                            </tr>
                        </tbody>
                    </table>

                </div>

            </div>
        </div>
    </div>
</template>
<script>

import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
        return{
            patient_id:0, 
            value1:'',
            value:'',
            options:[],
            input:'',
            age:['>1岁~≤3岁','>3岁~≤7岁','>7岁~≤13岁','>13岁'],
            checked:'',
            checkList:[],
        }
    },
    methods:{
    //     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    //     if (rowIndex % 2 === 0) {
    //       if (columnIndex === 0) {
    //         return [1, 2];
    //       } else if (columnIndex === 1) {
    //         return [0, 0];
    //       }
    //     }
    //   },
    }
}
</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;
        }
        tbody td{
           height: 40px;
        }
        .start{
            text-align: center;
        }
        .bing{
            width: 150px;
            text-align: center;
        }
        .bg_color{
            background: rgb(243, 240, 240);
        }
        .bottoms{
            display: inline-block;
            margin-left: 10px;
            margin-top: 5px; 
        }
        .jiange{
            margin-left: 20px;
            color: black;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }

</style>