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

<!--  日常生活能力评估 -->
<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-5"></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 @click="datehistory">历史评分</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" class="checkbox1" name="ball" :value="item.value" v-model="item.is_check" @click="jinshiclick($event,item)"/>&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" class="checkbox2" name="ball" :value="item.value" v-model="item.is_check" @click="xizaoclick($event,item)"/>&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" class="checkbox3" name="ball" :value="item.value" v-model="item.is_check" @click="xiushiclick($event,item)"/>&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" class="checkbox4" name="ball" :value="item.value" v-model="item.is_check" @click="chuanyiclick($event,item)"/>&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" class="checkbox5" name="ball" :value="item.value" v-model="item.is_check" @click="dabianclick($event,item)"/>&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" class="checkbox6" name="ball" :value="item.value" v-model="item.is_check" @click="xiaobianclick($event,item)"/>&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" class="checkbox7" name="ball" :value="item.value" v-model="item.is_check" @click="ruceclick($event,item)"/>&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" class="checkbox8" name="ball" :value="item.value" v-model="item.is_check" @click="chuangyiclick($event,item)"/>&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" class="checkbox9" name="ball" :value="item.value" v-model="item.is_check" @click="pingdiclick($event,item)"/>&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" class="checkbox10" name="ball" :value="item.value" v-model="item.is_check" @click="louticlick($event,item)"/>&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="date"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期"
                              :clearable="false"
                              style="width: 150px;">
                          </el-date-picker>
                      </div>

                      <div class="bottoms">
                          <span>评估人:</span>
                          <el-select v-model="appraiser" placeholder="请选择" >
                              <el-option
                              v-for="item in optionsarr"
                              :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" @click="lifeclick">确认</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'
import { uParseTime } from '@/utils/tools'
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,
      appraiser:'',
      optionsarr:[],
      date:this.getTime(new Date()),
      jinshi:[{value:10,label:'可独立进食(10分)',is_check:false,check:0},
              {value:5,label:'需部分帮助(如协助夹菜等)(5分)',is_check:false,check:0},
              {value:0,label:'需极大帮助或完全依赖他人(0分)',is_check:false,check:0}
            ],
      xizao:[{value:5,label:'准备好洗澡水后可独立完成(5分)',is_check:false,check:0},
              {value:0,label:'在洗澡过程中需他人帮助(0分)',is_check:false,check:0}
            ],
      xiushi:[{value:5,label:'可自己独立完成(5分)',is_check:false,check:0},
              {value:0,label:'需他人帮助(0分)',is_check:false,check:0}
            ],
      chuanyi:[{value:10,label:'可独立完成(10分)',is_check:false,check:0},
              {value:5,label:'需部分帮助(如协助系鞋带等)(5分)',is_check:false,check:0},
              {value:0,label:'需极大帮助或完全依赖他人(0分)',is_check:false,check:0}
            ],
      dabian:[{value:10,label:'可控制大便(10分)',is_check:false,check:0},
              {value:5,label:'偶尔失禁(5分)',is_check:false,check:0},
              {value:0,label:'完全失禁(0分)',is_check:false,check:0}
            ],
      xioabian:[{value:10,label:'可控制小便(10分)',is_check:false,check:0},
              {value:5,label:'偶尔失禁(5分)',is_check:false,check:0},
              {value:0,label:'完全失禁(0分)',is_check:false,check:0}
            ],
      ruce:[{value:10,label:'可独立完成(10分)',is_check:false,check:0},
            {value:5,label:'需部分帮助(如协助整理衣裤等)(5分)',is_check:false,check:0},
            {value:0,label:'需极大帮助或完全依赖他人(0分)',is_check:false,check:0}
            ],
      chuangyi:[{value:15,label:'可独立完成(15分)',is_check:false,check:0},
              {value:10,label:'需部分帮助(1人协助))(10分)',is_check:false,check:0},
              {value:5,label:'需极大帮助(2人协助)(5分)',is_check:false,check:0},
              {value:0,label:'完全依赖他人，不能坐(0分)',is_check:false,check:0}
            ],
      pingdi:[{value:15,label:'可独立在平地上行走>45S，可用辅助工具(15分)',is_check:false,check:0},
              {value:10,label:'需部分帮助(他人搀扶或使用辅助工具)(10分)',is_check:false,check:0},
              {value:5,label:'需极大帮助(可坐轮椅自动移动))(5分)',is_check:false,check:0},
              {value:0,label:'完全依赖他人(0分)',is_check:false,check:0}
            ],
      louti:[{value:10,label:'可独立上下1层楼梯(可用辅助工具)(10分)',is_check:false,check:0},
              {value:5,label:'需部分帮助(他人帮助)(5分)',is_check:false,check:0},
              {value:0,label:'需极大帮助或完全依赖他人(0分)',is_check:false,check:0}
            ],
    }
  },
  methods:{
    jinshiclick(e,item){
      for(let i=0;i<this.jinshi.length;i++){
        if(this.jinshi[i].value==item.value){
          if(this.jinshi[i].check==0){
            this.jinshi[i].is_check = true
            this.jinshi[i].check = 1
            this.jinshi_val = item.value
          }else{
            this.jinshi[i].is_check = false
            this.jinshi[i].check = 0
            this.jinshi_val = 0
          }
        }else{
          this.jinshi[i].is_check = false
            this.jinshi[i].check = 0
        }
      }
    },
    xizaoclick(e,item){
      for(let i=0;i<this.xizao.length;i++){
        if(this.xizao[i].value==item.value){
          if(this.xizao[i].check==0){
            this.xizao[i].is_check = true
            this.xizao[i].check = 1
            this.xizao_val = item.value
          }else{
            this.xizao[i].is_check = false
            this.xizao[i].check = 0
            this.xizao_val = 0
          }
        }else{
          this.xizao[i].is_check = false
          this.xizao[i].check = 0
        }
      }
    },
    xiushiclick(e,item){
      for(let i=0;i<this.xiushi.length;i++){
        if(this.xiushi[i].value==item.value){
          if(this.xiushi[i].check==0){
            this.xiushi[i].is_check = true
            this.xiushi[i].check = 1
            this.xiushi_val = item.value
          }else{
            this.xiushi[i].is_check = false
            this.xiushi[i].check = 0
            this.xiushi_val = 0
          }
        }else{
          this.xiushi[i].is_check = false
          this.xiushi[i].check = 0
        }
      }
    },
    chuanyiclick(e,item){
      for(let i=0;i<this.chuanyi.length;i++){
        if(this.chuanyi[i].value==item.value){
          if(this.chuanyi[i].check==0){
            this.chuanyi[i].is_check = true
            this.chuanyi[i].check = 1
            this.chuanyi_val = item.value
          }else{
            this.chuanyi[i].is_check = false
            this.chuanyi[i].check = 0
            this.chuanyi_val = 0
          }
        }else{
          this.chuanyi[i].is_check = false
          this.chuanyi[i].check = 0
        }
      }
    },
    dabianclick(e,item){
      for(let i=0;i<this.dabian.length;i++){
        if(this.dabian[i].value==item.value){
          if(this.dabian[i].check==0){
            this.dabian[i].is_check = true
            this.dabian[i].check = 1
            this.dabian_val = item.value
          }else{
            this.dabian[i].is_check = false
            this.dabian[i].check = 0
            this.dabian_val = 0
          }
        }else{
          this.dabian[i].is_check = false
          this.dabian[i].check = 0
        }
      }
    },
    xiaobianclick(e,item){
      for(let i=0;i<this.xioabian.length;i++){
        if(this.xioabian[i].value==item.value){
          if(this.xioabian[i].check==0){
            this.xioabian[i].is_check = true
            this.xioabian[i].check = 1
            this.xiaobian_val = item.value
          }else{
            this.xioabian[i].is_check = false
            this.xioabian[i].check = 0
            this.xiaobian_val = 0
          }
        }else{
          this.xioabian[i].is_check = false
          this.xioabian[i].check = 0
        }
      }
    },
    ruceclick(e,item){

      for(let i=0;i<this.ruce.length;i++){
        if(this.ruce[i].value==item.value){
          if(this.ruce[i].check==0){
            this.ruce[i].is_check = true
            this.ruce[i].check = 1
            this.ruce_val = item.value
          }else{
            this.ruce[i].is_check = false
            this.ruce[i].check = 0
            this.ruce_val = 0
          }
        }else{
          this.ruce[i].is_check = false
          this.ruce[i].check = 0
        }
      }
    },
    chuangyiclick(e,item){
      for(let i=0;i<this.chuangyi.length;i++){
        if(this.chuangyi[i].value==item.value){
          if(this.chuangyi[i].check==0){
            this.chuangyi[i].is_check = true
            this.chuangyi[i].check = 1
            this.chuangyi_val = item.value
          }else{
            this.chuangyi[i].is_check = false
            this.chuangyi[i].check = 0
            this.chuangyi_val = 0
          }
        }else{
          this.chuangyi[i].is_check = false
          this.chuangyi[i].check = 0
        }
      }
    },
    pingdiclick(e,item){
      for(let i=0;i<this.pingdi.length;i++){
        if(this.pingdi[i].value==item.value){
          if(this.pingdi[i].check==0){
            this.pingdi[i].is_check = true
            this.pingdi[i].check = 1
            this.paingdi_val = item.value
          }else{
            this.pingdi[i].is_check = false
            this.pingdi[i].check = 0
            this.paingdi_val = 0
          }
        }else{
          this.pingdi[i].is_check = false
          this.pingdi[i].check = 0
        }
      }
    },
    louticlick(e,item){
      for(let i=0;i<this.louti.length;i++){
        if(this.louti[i].value==item.value){
          if(this.louti[i].check==0){
            this.louti[i].is_check = true
            this.louti[i].check = 1
            this.louti_val = item.value
          }else{
            this.louti[i].is_check = false
            this.louti[i].check = 0
            this.louti_val = 0
          }
        }else{
          this.louti[i].is_check = false
          this.louti[i].check = 0
        }
      }
    },
    // 确认
    lifeclick(){
      var params={
        jinshi:this.jinshi,
        xizao:this.xizao,
        xiushi:this.xiushi,
        chuanyi:this.chuanyi,
        dabian:this.dabian,
        xioabian:this.xioabian,
        ruce:this.ruce,
        chuangyi:this.chuangyi,
        pingdi:this.pingdi,
        louti:this.louti,
        patientID:this.patientID,
        appraiser:this.appraiser,//评估人
        optionsarr:this.optionsarr,//评估人数组
        date:this.date,
        date_Totalpoints:this.date_Totalpoints
      }
      console.log('2222222',params);
    },
    // 转换时间
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
    datehistory(){
      this.$router.push({path: '/patients/date_history'})
    },
  },
  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>