elizebeth/src/xt_pages/user/evaluationtool/dailyLife.vue

<!--  日常生活能力评估 -->
<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-4"></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;"> 日常生活能力评定(ADL评估)表</div>
                    <div>
                        <el-button>历史评分</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                          <tr>
                            <th style="width: 150px;">项目</th>
                            <th colspan="4">分值</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="bg_color">
                            <td class="start">进食</td>
                            <td v-for="(item,index) in jinshi" :key="index">
                                <div class="jiange">
                                  <span>
                                    <label><input type="checkbox" name="ball" :value="item.value" @click="jinshiclick($event,item.value)"/>&nbsp;
                                        {{ item.label }}
                                    </label>
                                  </span>
                                </div> 
                            </td>                              
                            <td>&nbsp;</td>
                          </tr>          
                          <tr>
                            <td class="start">洗澡</td>
                            <td v-for="(item,index) in xizao" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="xizaoclick($event,item.value)"/>&nbsp;
                                      {{ item.label }}
                                  </label>
                                </span>
                              </div> 
                            </td>
                            <td></td>
                            <td></td>
                          </tr>                           
                          <tr class="bg_color">
                            <td class="start">修饰</td>
                            <td v-for="(item,index) in xiushi" :key="index">
                                <div class="jiange">
                                  <span>
                                    <label><input type="checkbox" name="ball" :value="item.value" @click="xiushiclick($event,item.value)"/>&nbsp;
                                        {{item.label}}
                                    </label>
                                  </span>
                                </div> 
                            </td>                              
                            <td></td>
                            <td></td>
                          </tr>                         
                          <tr>
                            <td class="start">穿衣</td>
                            <td v-for="(item,index) in chuanyi" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="chuanyiclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td>                               
                            <td></td>
                          </tr>
                          <tr class="bg_color">
                            <td class="start">控制大便</td>
                            <td v-for="(item,index) in dabian" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="dabianclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td> 
                            <td></td>
                          </tr>       
                          <tr>
                            <td class="start">控制小便</td>
                            <td v-for="(item,index) in xioabian" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="xioabianclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td>
                            <td></td>
                          </tr>                         
                          <tr class="bg_color">
                            <td class="start">如厕</td>
                            <td v-for="(item,index) in ruce" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="ruceclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td>
                            <td></td>
                          </tr>
                          <tr>
                            <td class="start">床椅转移</td>
                            <td v-for="(item,index) in chuangyi" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="chuangyiclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td>
                          </tr>
                          <tr class="bg_color">
                            <td class="start">平地行走</td>
                            <td v-for="(item,index) in pingdi" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="pingdiclick($event,item.value)"/>&nbsp;
                                      {{item.label}}
                                  </label>
                                </span>
                              </div> 
                            </td>                               
                          </tr>
                          <tr>
                            <td class="start">上下楼梯</td>
                            <td v-for="(item,index) in louti" :key="index">
                              <div class="jiange">
                                <span>
                                  <label><input type="checkbox" name="ball" :value="item.value" @click="louticlick($event,item.value)"/>&nbsp;
                                      {{ item.label }}
                                  </label>
                                </span>
                              </div> 
                            </td>                               
                            <td></td>
                          </tr>
                        </tbody>
                    </table>
                </div>

                <div class="content_top" style="margin: 10px 0px;">
                    <div>
                        <div class="bottoms">
                        <span>总分:</span>
                        <el-input v-model="date_Totalpoints" 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>
                <hr style="border:none;height:1px;background:#DCDFE6;"/>
                <div class="shuoming">
                    <p>说明：</p>
                    <p>一级 无需依赖 100分</p>
                    <p>二级 轻度依赖 61-99分</p>
                    <p>三级 中度依赖 41-60分</p>
                    <p>四级 重度依赖 ≤40分</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
  components:{
    PatientSidebar
  },
  data(){
    return{
      patientID:0,
      value:'',
      input:'',
      value1:'',
      options:[],
      jinshi_val:null,
      xizao_val:null,
      xiushi_val:null,
      chuanyi_val:null,
      dabian_val:null,
      xiaobian_val:null,
      ruce_val:null,
      chuangyi_val:null,
      paingdi_val:null,
      louti_val:null,
      jinshi:[{value:10,label:'可独立进食(10分)'},
              {value:5,label:'需部分帮助(如协助夹菜等)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],
      xizao:[{value:5,label:'准备好洗澡水后可独立完成(5分)'},
              {value:0,label:'在洗澡过程中需他人帮助(0分)'}
            ],
      xiushi:[{value:5,label:'可自己独立完成(5分)'},
              {value:0,label:'需他人帮助(0分)'}
            ],
      chuanyi:[{value:10,label:'可独立完成(10分)'},
              {value:5,label:'需部分帮助(如协助系鞋带等)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],
      dabian:[{value:10,label:'可控制大便(10分)'},
              {value:5,label:'偶尔失禁(5分)'},
              {value:0,label:'完全失禁(0分)'}
            ],
      xioabian:[{value:10,label:'可控制大便(10分)'},
              {value:5,label:'偶尔失禁(5分)'},
              {value:0,label:'完全失禁(0分)'}
            ],
      ruce:[{value:10,label:'可独立完成(10分)'},
            {value:5,label:'需部分帮助(如协助整理衣裤等)(5分)'},
            {value:0,label:'需极大帮助或完全依赖他人(0分)'}
          ],
      chuangyi:[{value:15,label:'可独立完成(15分)'},
              {value:10,label:'需部分帮助(1人协助))(10分)'},
              {value:5,label:'需极大帮助(2人协助)(5分)'},
              {value:0,label:'完全依赖他人，不能坐(0分)'}
            ],
      pingdi:[{value:15,label:'可独立在平地上行走>45S，可用辅助工具(15分)'},
              {value:10,label:'需部分帮助(他人搀扶或使用辅助工具)(10分)'},
              {value:5,label:'需极大帮助(可坐轮椅自动移动))(5分)'},
              {value:0,label:'完全依赖他人(0分)'}
            ],
      louti:[{value:10,label:'可独立上下1层楼梯(可用辅助工具)(10分)'},
              {value:5,label:'需部分帮助(他人帮助)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],      
    }
  },
  methods:{
    jinshiclick(e,val){
     if(e.target.checked == true){
      this.jinshi_val = val
     }else{
      this.jinshi_val =this.jinshi_val - val
     }
    },
    xizaoclick(e,val){
      if(e.target.checked == true){
      this.xizao_val = val
     }else{
      this.xizao_val =this.xizao_val - val
     }
    },
    xiushiclick(e,val){
     if(e.target.checked == true){
      this.xiushi_val = val
     }else{
      this.xiushi_val =this.xiushi_val - val
     }
    },
    chuanyiclick(e,val){
      if(e.target.checked == true){
      this.chuanyi_val = val
     }else{
      this.chuanyi_val =this.chuanyi_val - val
     }
    },
    dabianclick(e,val){
     if(e.target.checked == true){
      this.dabian_val = val
     }else{
      this.dabian_val =this.dabian_val - val
     }
    },
    xiaobianclick(e,val){
      if(e.target.checked == true){
      this.xiaobian_val = val
     }else{
      this.xiaobian_val =this.xiaobian_val - val
     }
    },
    ruceclick(e,val){
     if(e.target.checked == true){
      this.ruce_val = val
     }else{
      this.ruce_val =this.ruce_val - val
     }
    },
    chuangyiclick(e,val){
      if(e.target.checked == true){
      this.chuangyi_val = val
     }else{
      this.chuangyi_val =this.chuangyi_val - val
     }
    },
    pingdiclick(e,val){
     if(e.target.checked == true){
      this.paingdi_val = val
     }else{
      this.paingdi_val =this.paingdi_val - val
     }
    },
    louticlick(e,val){
      if(e.target.checked == true){
      this.louti_val = val
     }else{
      this.louti_val =this.louti_val - val
     }
    },
  },
  computed:{
    date_Totalpoints(){
      return this.jinshi_val + this.xizao_val + this.xiushi_val + this.chuanyi_val + this.dabian_val + this.xiaobian_val + 
      this.ruce_val + this.chuangyi_val + this.paingdi_val + this.louti_val
    }
  }
}
</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);
        }
        .jiange{
            margin-left: 20px;
            color: black;
        }
        input{
            -webkit-appearance: checkbox;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
    .shuoming p{
      margin-top: 5px;
      color: rgb(167, 165, 165);
    }
</style>