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 @click="childerHistory">历史评分</el-button>
              <el-button @click="dialogVisible=true">告知书</el-button>
            </div>
          </div>

          <div>
            <table class="table" id="table" border="1" style="width: 100%;">
              <thead>
                <tr>
                <th style="width:10%;">项目</th>
                <th style="width: 22.4%;">4分</th>
                <th style="width: 22.4%;">3分</th>
                <th style="width: 22.4%;">2分</th>
                <th style="width: 22.4%;">1分</th>
                </tr>
              </thead>
              <tbody>
                <tr class="bg_color">
                  <td class="start">年龄</td>
                  <td v-for="(item,index) in age" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked1" type="checkbox" :value="item.value"  v-model="item.check"  @click="ageclick($event,item)" />&nbsp;{{item.lable}}</label>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td style="border-right: none;">
                    <div class="bing">性别</div>
                  </td>
                  <td colspan="2" style="border-left: none;"></td>
                  <td v-for="(item,index) in sex" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked2" type="checkbox" :value="item.value" v-model="item.check" @click="sexChange($event,item)"/>&nbsp;{{item.lable}}</label>
                    </div>
                  </td>
                </tr>
                <tr class="bg_color">
                  <td class="start">诊断</td>
                  <td v-for="(item,index) in diagnosis" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked3" type="checkbox" :value="item.value" v-model="item.check" @click="diagnosischange($event,item)"/>&nbsp;{{item.lable}}</label>
                    </div>
                  </td>

                </tr>
                <tr>
                  <td style="border-right: none;">
                      <div class="bing">认知障碍</div>
                  </td>
                  <td style="border-left: none;"></td>
                  <td v-for="(item,index) in cognize" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked4" type="checkbox" :value="item.value" v-model="item.check" @click="cognizeChange($event,item)"/>&nbsp;{{item.lable}}</label>
                    </div>
                  </td>

                </tr>
                <tr class="bg_color">
                  <td class="start">环境因素</td>
                  <td v-for="(item,index) in environment" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked5" type="checkbox" :value="item.value" v-model="item.check" @click="environChange($event,item)"/>&nbsp;{{item.lable}}</label>
                    </div>
                  </td>

                </tr>
                <tr>
                  <td style="border-right: none;">
                      <div class="bing">药物使用</div>
                  </td>
                  <td style="border-left: none;"></td>
                  <td v-for="(item,index) in medicine" :key="index">
                    <div class="jiange">
                      <label><input name="ball" class="checked6" type="checkbox" :value="item.value" v-model="item.check" @click="medicineChange($event,item)"/>&nbsp;{{item.lable}}</label>
                    </div>
                  </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="pedia_Totalpoints" style="width: 100px;"></el-input>分
                        </div>

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

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

          </div>

        </div>
      </div>
      <div>
        <el-dialog
            title="内容详情"
            :visible.sync="dialogVisible"
            width="50%"

            class="status_change">
            <div>
                <Falloutbedprint></Falloutbedprint>
            </div>

        </el-dialog>
      </div>
  </div>
</template>
<script>

import PatientSidebar from '../components/PatientSidebar.vue'
import Falloutbedprint from './Falloutbedprint.vue'
import { uParseTime } from '@/utils/tools'
import { savePediatrcFallAssesment,getAllNurseList } from '@/api/fallassement'
export default {
  components:{
    PatientSidebar,
    Falloutbedprint
  },
  data(){
    return{
      patient_id:0,
      patient:'',
      value1:'',
      value:'',
      options:[],
      input:'',
      agevalue:null,
      sexvalue:null,
      diagnosis_val:null,
      cognize_val:null,
      environment_val:null,
      medicine_val:null,
      // pedia_Totalpoints:0,
      age:[{value:4,lable:'>1岁~≤3岁',id:1,check:0},{value:3,lable:'>3岁~≤7岁',id:2,check:0},{value:2,lable:'>7岁~≤13岁',id:3,check:0},{value:1,lable:'>13岁',id:4,check:0}],
      sex:[{value:2,lable:'男',check:0},{value:1,lable:'女',check:0}],
      diagnosis:[{value:4,lable:'神经系统疾病：骨骼、关节系统疾病；眼科疾病',id:1,check:0},
                {value:3,lable:'氧合功能改变(呼吸系统疾病、心血管系统疾病、脱水、贫血、晕厥、头晕等)；电解质紊乱',id:2,check:0},
                {value:2,lable:'心理/行为疾病',id:3,check:0},
                {value:1,lable:'其他疾病；疾病导致不能活动或移动',id:4,check:0,}
              ],
      cognize:[{value:3,lable:'没有意识到不能自我行动',id:1,check:0,},{value:2,lable:'忘记有行动的限制',id:2,check:0},
                {value:1,lable:'能自我辨识方位；昏迷、无反应',id:3,check:0}],
      environment:[{value:4,lable:'住院期间有跌倒坠床史：患儿移动或活动时需要使用辅助工具(拐杖、助行器、转运床、轮椅等)；婴幼儿放置在无护栏的成人床',id:1,check:0},
                {value:3,lable:'近1个月有跌倒坠床史:婴幼儿放置在有护栏的成人床',id:2,check:0},
                {value:2,lable:'近3个月有跌倒坠床史:婴幼儿放置在有护栏的婴儿床',id:3,check:0},
                {value:1,lable:'>3个月有跌倒坠床史/无跌倒坠床史',id:4,check:0}],
      medicine:[{value:3,lable:'联合用药：镇静剂、安眠药、巴比妥类药、吩噻嗪类药、抗抑郁药、利尿药、降压药、强心剂、麻醉药、化疗药、散瞳剂',id:1,check:0},
                {value:2,lable:'以上其中一种药物',id:2,check:0},
                {value:1,lable:'其他药物/没有',id:3,check:0}],
      checked:'',
      checkList:[],
      dialogVisible:false,
      text:'',
      num:1,
      tumble_options:[{admin_user_id:1,user_name:'小米'},{admin_user_id:2,user_name:'小明'},{admin_user_id:3,user_name:'小红'}],
      // tumble_options:[],
      tumble:'',
      date:this.getTime(new Date()),
      patient:'',
      touxihao:0,
      pedFallssessment:{},
    }
  },
  created(){
    const id = this.$route.params && this.$route.params.id
    this.patient_id = parseInt(id)
    this.getAllNurseList()
  },
  methods:{
    ageclick(e,item){
      console.log(item);
      for(let i in this.age){
        if(this.age[i].value ==item.value){
          if(this.age[i].check==0){
            this.age[i].check = 1
            this.agevalue = item.value
          }else{
            this.age[i].check = 0
            this.agevalue = 0
          }
        }else{
          this.age[i].check =0
        }
      }
      // console.log(this.age);
    },
    sexChange(e,item){
      for(let i in this.sex){
        if(this.sex[i].value ==item.value){
          if(this.sex[i].check==0){
            this.sex[i].check = 1
            this.sexvalue = item.value
          }else{
            this.sex[i].check = 0
            this.sexvalue = 0
          }
        }else{      
          this.sex[i].check = 0
        }
      }
      console.log(this.sex);
    },
    diagnosischange(e,item){
      for(let i in this.diagnosis){
        if(this.diagnosis[i].value ==item.value){
          if(this.diagnosis[i].check==0){
            this.diagnosis[i].check = 1
            this.diagnosis_val = item.value
          }else{
            this.diagnosis[i].check = 0
            this.diagnosis_val = 0
          }
        }else{      
          this.diagnosis[i].check = 0
        }
      }
      console.log(this.diagnosis);
    },
    cognizeChange(e,item){
      for(let i in this.cognize){
        if(this.cognize[i].value ==item.value){
          if(this.cognize[i].check==0){
            this.cognize[i].check = 1
            this.cognize_val = item.value
          }else{
            this.cognize[i].check = 0
            this.cognize_val = 0
          }
         
        }else{      
          this.cognize[i].check = 0
        }
      }
    },
    environChange(e,item){
      for(let i in this.environment){
        if(this.environment[i].value ==item.value){

          if(this.environment[i].check==0){
            this.environment[i].check = 1
            this.environment_val = item.value
          }else{
            this.medicine[i].check = 0
            this.environment_val = 0
          }
        }else{      
          this.environment[i].check = 0
        }
      }
    },
    medicineChange(e,item){
      for(let i in this.medicine){
        if(this.medicine[i].value ==item.value){
          console.log('eeeee',this.medicine[i].check);
          if(this.medicine[i].check==0){
            this.medicine[i].check = 1
            this.medicine_val = item.value
          }else{
            this.medicine[i].check = 0
            this.medicine_val = 0
          }
        }else{      
          this.medicine[i].check = 0
        }
      }
    },
    // 历史评估
    childerHistory(){
      this.$router.push(
        {path: '/patients/Children_history',
        query:{patient_id:this.patient_id,
              tumble_options:this.tumble_options}})
      // this.$router.push({path: '/patients/Children_history?patient_id='+this.patient_id+'pedFallssessment='+this.pedFallssessment})
    },
    // 时间转换
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
    toDialog(){
      
       var params = {
          age:this.agevalue,
          sex:this.sexvalue,
          diagnosis:this.diagnosis_val,
          cognize:this.cognize_val,
          environment:this.environment_val,
          medicine:this.medicine_val,
          pedia_Totalpoints:this.pedia_Totalpoints,
          tumble:this.tumble,
          date:this.date,
          patient_id:this.patient_id,
          patient:this.patient,
       }
       console.log("params----",params)
      savePediatrcFallAssesment(params).then(response=>{
         if(response.data.state ==1){
           var pedFallssessment =  response.data.data.pedFallssessment
            this.pedFallssessment = pedFallssessment
           console.log('pedFallssessment',this.pedFallssessment);
           this.$message.success("保存成功!")
         }
      })
    },
    getAllNurseList(){
        getAllNurseList().then(response=>{
           if(response.data.state ==1){
            console.log('response.data.data',response.data.data);
             var nurseList  = response.data.data.nurseList

            //  this.tumble_options =nurseList
           }
        })
    },
  },
  computed:{
    pedia_Totalpoints(){
       
      return this.agevalue + this.sexvalue + this.diagnosis_val +this.cognize_val + this.environment_val + this.medicine_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;
           padding: 5px;
           vertical-align: top;
        }
        .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>
<style lang="scss">
    .status_change{

        .el-dialog__header{
            background-color:#eff2f5;
            .el-dialog__title,.el-dialog__headerbtn i{
            color: #666666;
            }
        }
    }
    .el-dialog {
        left: 50% !important;
        position: fixed !important;
        top: 40% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 0 !important;

    }
</style>