Vue_New/src/xt_pages/user/history/Children_history.vue

<!-- 小儿跌倒历史评分 -->
<template>
  <div class="patient-container">
    <div class="patient-app-containers advice-container app-container">
      <div style="display: flex;margin-bottom: 20px;">
        <div style="width: 50%;">
          <el-button type="text" icon="el-icon-arrow-left" style="font-size: 18px;" @click="fanhui">返回</el-button>
          <div class="history">历史评分</div>
        </div>
        <div style="margin-left: 30%;">
          <el-button type="primary" @click="open_pingfen">打印评分</el-button>
          <el-button type="primary" @click="open_mingxi">打印明细</el-button>
        </div>
      </div>
      <!-- 小儿跌倒 -->
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          border

          tooltip-effect="dark"
          :header-cell-style="{
            background:'#4579c5',
            color:'#fff'
          }"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55"
            align="center">
          </el-table-column>
          <el-table-column
            prop = 'time'
            label="评估日期"
            width="180"
            align="center">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            prop="mark"
            label="分数"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="evaluate"
            label="评估护士"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="180"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit-outline" @click="open_editor(scope.row)"></el-button>
              <el-button type="primary" icon="el-icon-delete" @click="deletes(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

     <!-- 打印评分 -->
     <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="67%"
      >
      <div>
        <div style="overflow: hidden;">
          <el-button type="primary" @click="print_pingfen(1)" style="float:right">打印</el-button>
        </div>

        <div id="pingfeng" >
          <div class="diedao_content" style="">
            <div style="width:100%;margin-top: 20px;">
              <div style="text-align: center;"><h1>血液透析中心跌倒评估记录</h1></div>
              <div style="margin-top: 20px;font-size: 16px;">
                <span>患者姓名：</span>
                <span>透析号：</span>
                <span>打印时间：</span>
              </div>
              <table class="tables" border="1" style="border-collapse:collapse;text-align:center;width:100%;font-size:16px">
                <tr>
                  <td style="width:180px">评估日期</td>
                  <td style="width:100px">分数</td>
                  <td style="width:150px">评估护士</td>
                </tr>
                <tr v-for="item in multipleSelection" >
                  <td>{{item.time}}</td>
                  <td>{{item.mark}}</td>
                  <!-- <td>{{item.measures}}</td> -->
                  <td>{{item.evaluate}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 打印明细 -->
    <el-dialog
      title="提示"
      :visible.sync="mingxi_dialogVisible"
      width="67%"
      >
      <div>
        <div style="overflow: hidden;">
          <el-button type="primary" @click="print_pingfen(2)" style="float:right">打印</el-button>
        </div>

        <div id="mingxi" >
          <div class="diedao_content" style="">
            <div style="width:100%;margin-top: 20px;">
              <div style="text-align: center;"><h1>血液透析中心跌倒评估记录</h1></div>
              <div style="margin-top: 20px;font-size: 16px;">
                <span>患者姓名：</span>
                <span>透析号：</span>
                <span>评估日期：</span>
                <span>评估护士：</span>
                <span>总分：</span>
              </div>
              <table class="tables" id="table" border="1" style="width: 100%;border-collapse: collapse;">
                <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" type="checkbox"  :value="item.value" @click="ageChange($event,item.value)"/>&nbsp;{{item.lable}}</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td style="border-right: none;">
                      <div class="bing">性别</div>
                    </td>
                    <td style=""></td>
                    <td v-for="(item,index) in sex" :key="index">
                      <div class="jiange">
                        <label><input name="ball" type="checkbox" :value="item.value" @click="sexChange($event,item.value)"/>&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" type="checkbox" :value="item.value" @click="diagnosischange($event,item.value)"/>&nbsp;{{item.lable}}</label>
                      </div>
                    </td>

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

                  </tr>
                  <tr>
                    <td style="border-right: none;">
                        <div class="bing">药物使用</div>
                    </td>
                    <td style=""></td>
                    <td v-for="(item,index) in medicine" :key="index">
                      <div class="jiange">
                        <label><input name="ball" type="checkbox" :value="item.value" @click="medicineChange($event,item.value)"/>&nbsp;{{item.lable}}</label>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div style="font-size: 16px;">打印时间：{{this.getTime(this.dayintime)}}</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="提示"
      :visible.sync="editor_dialogVisible"
      width="67%"
      >
      <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="ageChange($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 style="flex: 0.8;">
              <span>总分:</span>
              <el-input v-model="pedia_Totalpoints" style="width: 100px;"></el-input>分
              </div>

              <div style="flex: 1;">
                  <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 style="flex: 1.2;">
                  <span>评估人:</span>
                  <el-select v-model="tumble" placeholder="请选择" >
                      <el-option
                      v-for="item in tumble_options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      style="width:150px;">
                      </el-option>
                  </el-select>
              </div>
              <div style="flex: 1;">
                <el-button type="primary" @click="children">确认</el-button>
              </div>
            </div>
          </td>
          </tr>
        </tbody>
      </table>
    </el-dialog>
     <!--删除 -->
     <el-dialog
      title="提示"
      :visible.sync="delete_centerDialogVisible"
      width="20%"
      center>
      <span>是否删除该记录</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delete_centerDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="delete_childer">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import print from 'print-js'
import { uParseTime } from '@/utils/tools'
export default{
  data(){
    return{
      tableData:[{id:1,time:'2023-9-27',mark:'15',evaluate:'千亦雪'},{id:2,time:'2023-9-27',mark:'14',evaluate:'千任雪'}],
      multipleSelection:[],
      dialogVisible:false,
      mingxi_dialogVisible:false,
      editor_dialogVisible:false,
      delete_centerDialogVisible:false,

      row:'',
      value1:'',
      value:'',
      options:[],
      input:'',
      agevalue:null,
      sexvalue:null,
      diagnosis_val:null,
      cognize_val:null,
      environment_val:null,
      medicine_val:null,
      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:[],
      text:'',
      tumble_options:[],
      tumble:'',//评估人
      date:this.getTime(new Date()),//评估日期
      patient_id:0,
      patient:'',
      touxihao:0,//透析号
      dayintime:new Date()//打印时间
    }
  },
  methods:{
    fanhui(){
      window.history.go(-1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    open_pingfen(){
      if(this.multipleSelection.length==0){
        this.$message('至少选择一条数据')
      }else{
        this.dialogVisible=true
      }
    },
    open_mingxi(){
      if(this.multipleSelection.length==0){
        this.$message('至少选择一条数据')
      }else{
        this.mingxi_dialogVisible=true
      }
    },
    open_editor(row){
      this.editor_dialogVisible =true
    },
    deletes(row){
      this.row=row.id
      this.delete_centerDialogVisible = true
    },
    delete_childer(){
      for(let i=0;i<this.tableData.length;i++){
        if(this.row==this.tableData[i].id){
          this.tableData.splice(i,1)
        }
      }
      this.delete_centerDialogVisible=false
    },
    print_pingfen(id){
      this.dialogVisible=false
      this.mingxi_dialogVisible=false
      const style= '@media print {.diedao_content{background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0;} .table tr td{padding:5px}}'
      if(id==1){

        printJS({
          printable: 'pingfeng',
          type: 'html',
          style: style,
          scanStyles: false
        })

      }else if(id==2){
        printJS({
          printable: 'mingxi',
          type: 'html',
          style: style,
          scanStyles: false
        })

      }


    },

    ageChange(e,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
        }
      }
    },
    children(){
      var params = {
          age:this.age,
          sex:this.sex,
          diagnosis:this.diagnosis,
          cognize:this.cognize,
          environment:this.environment,
          medicine:this.medicine,
          pedia_Totalpoints:this.pedia_Totalpoints,
          tumble_options:this.tumble_options,
          tumble:this.tumble,
          date:this.date,
          patient_id:this.patient_id,
          patient:this.patient,
          
       }
       console.log("childrenparams----",params)
    },
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
  },
  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>
.patient-app-containers {
  margin-left: 10px;
  margin-right: 10px;
  background: #fff;
}
.history{
  display: inline-block;
  border-left:2px solid gray ;
  padding: 0 10px;
  margin-left:10px;
  color: gray;
  font-size: 18px;
}
.tables tr td{
  padding:5px;
  font-size:16px;
}
.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;
  // }
}
input{
  -webkit-appearance: checkbox;
}
</style>