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

<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="5-11" @tran-patient="tranpatient"></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 @click="pruritushistory">历史评分</el-button>
          </div>
        </div>

        <div>
          <table class="table" border="1" style="width: 100%;">
            <thead>
              <tr>
                <th style="width: 10%;">项目</th>
                <th style="width: 57%;">结果</th>
                <th style="width: 3%;">得分</th>
                <th style="width: 30%;">说明</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="start">痒的部位</td>
                <td>
                  <div class="jiange"><!-- v-model="item.is_check" v-model="is_check1" v-model="is_check2"-->
                    <span v-for="item in buwei" class="rightjiange" >
                        <label><input type="checkbox" class="check" :value="item.id" v-model="item.is_check" @click="handleCheckedCitiesChange($event,item)"/>&nbsp;{{ item.label }}</label>
                    </span>
                    <label ><input type="checkbox" class="check" value="其他"  v-model="is_check1" @click="qita_click"/>
                        &nbsp;其他 <el-input v-model="buwei_input" style="width: 100px;"></el-input>
                    </label>
                    <label >
                      <input type="checkbox" class="checkbox" value="全身" v-model="is_check2" @click="quan_change"/>&nbsp;全身
                    </label>
                  </div>
                </td>
                <td class="start">{{checked_points}}</td>
                <td class="saoyang">瘙痒部位：计分范围1~3分一个部位瘙痒计1分，最多得3分，选全身计3分</td>
              </tr>
              <tr>
                <td class="start">痒的程度</td>
                <td>
                    <div class="jiange">
                        <el-radio-group v-model="radio1" @change="radiochecked">
                            <el-radio v-for="(item,index ) in chengdu" :label="item.value" :key="index" style="color: black;font-size: 15PX;">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </div>
                </td>
                <td class="start">{{radio1_points}}</td>
                <td class="saoyang">瘙痒严重程度：计分范围1~5分</td>
              </tr>
              <tr>
                <td class="start">痒的频率</td>
                <td>
                    <div  class="jiange">
                        <el-radio-group v-model="radio2" @change="radiochecked">
                            <el-radio v-for="(item,index ) in pinlv" :label="item.value" :key="index" style="color: black;font-size: 15PX;">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </div>
                </td>
                <td class="start">{{radio2_points}}</td>
                <td class="saoyang">瘙痒频率：计分范围1~5分瘙痒有过4次，每次＜10min或有1次瘙痒＞10min计1分，以此类推，一直持续计5分</td>
              </tr>
              <tr>
                <td class="start">痒对睡眠的影响</td>
                <td>
                    <div  class="jiange">
                        <el-radio-group v-model="radio3" @change="radiochecked">
                            <el-radio v-for="(item,index ) in yingxiang" :label="item.value" :key="index" style="color: black;font-size: 15PX;">{{ item.label }}</el-radio>
                        </el-radio-group>
                    </div>
                </td>
                <td class="start">{{radio3_points}}</td>
                <td class="saoyang">
                    瘙痒对睡眠的影响：计分范围0~6分无影响0分，一夜痒醒1次计2分，一夜痒醒2次计4分，一夜痒醒3次以上计6分
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <p style="margin: 20px 0px 10px 0px;">备注：总分得分范围3（轻度瘙痒）~19分（最大程度瘙痒）</p>
        <div class="content_top" style="margin-bottom: 10px ;">
          <div>
            <div class="bottoms">
              <span>总分:</span>
              <el-input v-model="pruritus_Totalpoints" style="width: 100px;"></el-input>分
            </div>
            <div class="bottoms">
              <span>评估日期:</span>
              <el-date-picker
                  v-model="pruritus_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="pruritus_appraiser" placeholder="请选择" style="width:150px;">
                  <el-option
                  v-for="item in pruritus_options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                  >
                  </el-option>
              </el-select>
            </div>
          </div>
          <div style="margin:5px 10px;">
              <el-button type="primary" @click="pruritus_click">确认</el-button>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
import { uParseTime } from '@/utils/tools'
import {savePatientHpressuresore} from '@/api/fallassement'
export default {
  components:{
    PatientSidebar
  },
  data(){
    return{
      patientID:0,
      checkList:[],
      radio1:'',
      radio2:'',
      radio3:'',
      input:'',
      ball:'',
      radio1_points:0,
      radio2_points:0,
      radio3_points:0,
      checked_points:0,
      // pruritus_options:[],
      pruritus_options:[{id:1,label:'寒千落'},{id:2,label:'千仞雪'},{id:3,label:'千亦雪'},],
      pruritus_appraiser:'',
      pruritus_date:this.getTime(new Date()),
      buwei:[{id:1,label:'躯体',is_check:false,check:0},{id:2,label:'上肢',is_check:false,check:0},{id:3,label:'下肢',is_check:false,check:0},{id:4,label:'头皮',is_check:false,check:0},],
      chengdu:[{value:1,label:'不要抓(1)'},{value:2,label:'要抓但没有抓痕(2)'},{value:3,label:'抓出抓痕才能止痒(3)'},{value:4,label:'经常抓出抓痕(4)'},{value:5,label:'完全坐立不安(5)'}],
      pinlv:[{value:1,label:'很少时候(1)'},{value:2,label:'较少时候(2)'},{value:3,label:'较多时候(3)'},{value:4,label:'很多时候(4)'},{value:5,label:'一直持续(5)'}],
      yingxiang:[{value:0,label:'无影响(0)'},{value:2,label:'一夜痒醒一次(2)'},{value:4,label:'一夜痒醒两次(4)'},{value:6,label:'一夜痒醒三次(6)'}],
      buwei_show:[],
      buwei_show1:[],
      value:'',
      value1:'',
      num:0,
      is_check1:false,
      check1:0,
      is_check2:false,
      check2:0,
      buwei_input:'',
      Patient_info:{name:'',dialysis_no:''},
    }
  },
  created(){
    const id = this.$route.params && this.$route.params.id
    this.patientID = parseInt(id)
  },
  methods:{
    // 痒的部位选项
    handleCheckedCitiesChange(e,item){
      console.log('333333',item);
      for(let i in this.buwei){
        if(item.label==this.buwei[i].label){
          if(item.check==0){
            this.buwei[i].check = 1
            this.buwei[i].is_check = true
            if(this.num <3){
              if(this.is_check2 == true){
                this.is_check2 = false
                this.check = 0
                this.checked_points = 0
              }
              console.log('1111',this.buwei[i]);
              this.num++
              this.checked_points = this.checked_points + 1
            }
            if(this.buwei_show1.length >0){
              for(let j in this.buwei_show1){
                if('全身' == this.buwei_show1[j]){
                  let index = this.buwei_show1.indexOf(this.buwei_show1[j]);
                  this.buwei_show1.splice(index,1)
                }
              }
            }
            this.buwei_show.push(item.id)
            this.buwei_show1.push(item.label)
            console.log('this.buwei_show',this.buwei_show);
          }else{
            this.buwei[i].check = 0
            this.buwei[i].is_check = false
            console.log('2222',this.buwei[i]);
            this.num--
            this.checked_points = this.checked_points - 1
            if(this.buwei_show.length >0){
              for(let j in this.buwei_show){
                if(item.id == this.buwei_show[j]){
                  let index = this.buwei_show.indexOf(this.buwei_show[j]);
                  this.buwei_show.splice(index,1)
                }
              }
              for(let j in this.buwei_show1){
                if(item.label == this.buwei_show1[j]){
                  let index = this.buwei_show1.indexOf(this.buwei_show1[j]);
                  this.buwei_show1.splice(index,1)
                }
              }
            }
            console.log('this.buwei_show2',this.buwei_show);
          }
        }
      }
    },
    //  痒的部位全部选项
    quan_change(e){
      const ball=e.target.value
      console.log(ball);
      if(ball=='全身'){
        if(this.is_check2 == false){
          this.check2 = 1
          this.is_check2 = true
          this.check1 = 0
          this.is_check1 = false
          this.buwei_show.length = 0
          this.checked_points =3
          this.num = 0
          for(let i in this.buwei){
            if(this.buwei[i].is_check == true){
              this.buwei[i].is_check =false
              this.buwei[i].check = 0
            }
          }
          this.buwei_show1.length = 0
          this.buwei_show1.push('全身')
          console.log('uuuu',this.check2,this.is_check2);
        }else{
          this.check2 = 0
          this.is_check2 = false
          this.checked_points =0
          this.num = 0
          for(let j in this.buwei_show1){
            if(ball == this.buwei_show1[j]){
              let index = this.buwei_show1.indexOf(this.buwei_show1[j]);
              this.buwei_show1.splice(index,1)
            }
          }
          console.log('iiiii',this.check2,this.is_check2);
        }
      }
    },
    // 痒的部位其它选项
    qita_click(e){
      const ball=e.target.value
      console.log(ball);
      if(ball =='其他'){
        console.log('this.is_check1',this.is_check1);
        if(this.is_check1 == false){
          this.check1 = 1
          this.is_check1 = true
          this.check2 = 0
          this.is_check2 = false
          if(this.num < 3){
            this.checked_points =this.checked_points + 1
            this.num++
          }
          if(this.buwei_show1.length >0){
            for(let j in this.buwei_show1){
              if('全身' == this.buwei_show1[j]){
                let index = this.buwei_show1.indexOf(this.buwei_show1[j]);
                this.buwei_show1.splice(index,1)
              }
            }
          }
          this.buwei_show1.push(ball)
        }else{
          this.check1 = 0
          this.is_check1 = false
          if(this.num < 3){
            this.checked_points =this.checked_points - 1
            this.num--
          }
          for(let j in this.buwei_show1){
            if(ball == this.buwei_show1[j]){
              let index = this.buwei_show1.indexOf(this.buwei_show1[j]);
              this.buwei_show1.splice(index,1)
            }
          }
        }
      }
    },
    // 单选
    radiochecked(e){
      console.log('eeeee',e);
      if(e == this.radio1){
        this.radio1_points =e
        this.radio1 = e
      }
      if(e == this.radio2){
        this.radio2_points =e
        this.radio2 = e
      }
      if(e == this.radio3){
        this.radio3_points =e
        this.radio3 = e
      }
    },
    // 确认
    pruritus_click(){
      const data={}
      var list = []
      data['radio1'] = this.radio1
      data['radio2'] = this.radio2
      data['radio3'] = this.radio3
      data['date'] = this.pruritus_date
      data['appraiser'] = this.pruritus_appraiser
      data['total'] = this.pruritus_Totalpoints
      data['buwei'] = this.buwei_show
      data['is_check1'] = this.is_check1
      data['check1'] = this.check1
      data['buwei_input'] = this.buwei_input
      data['is_check2'] = this.is_check2
      data['check2'] = this.check2
      data['num'] = this.num
      data['buwei1'] = this.buwei_show1
      data['buwei2'] =this.buwei
      data['checked_points'] = this.checked_points
      list.push(data)
      var params={
        patient_id:this.patientID,
        record_date:this.pruritus_date,
        is_type:9,
        list:list,
      }
     
      console.log('params----',params);
      savePatientHpressuresore(params).then(response =>{
        if(response.data.state == 1){
          const pruit = response.data.data.pedFallssessment
          console.log('11111',pruit)
          this.$message({message:'保存成功',type:'success'})
        }
      })
    },
    // 转换时间
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
    // 历史
    pruritushistory(){
      this.$router.push({
        path: '/patients/pruritus_history',
        query:{patient_id:this.patientID,
              Patient_info:this.Patient_info}
      })
    },
    // 患者信息
    tranpatient(event){
      console.log('event',event);
      this.Patient_info={
        name:event.name,
        dialysis_no:event.dialysis_no
      }
    },
  },
  computed:{
    pruritus_Totalpoints(){
      return this.checked_points + this.radio1_points + this.radio2_points +this.radio3_points
    }
  }
}
</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;
        }
        .rightjiange{
          margin-right: 40px;
          font-size: 15px;
        }
        input{
            -webkit-appearance: checkbox;
        }
        .saoyang{
             padding: 5px;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px;
    }
</style>