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

<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="5-13" @tran-patient="tranpatient"></patient-sidebar>
    <div>
      <div class="patient-app-container advice-container app-container">
        <div class="content_top">
          <!-- 左 -->
          <div style="width: 58%;">
            <div style="margin-bottom: 20px; display: flex;">
              <div style="flex:2" >
                <el-button type="primary" @click="Glas_add" v-if="Glasadd_show">新增</el-button>
                <el-button style="background:#00B6D7;color:white" @click="Glas_editor" v-if="Glas_gzdayin">编辑</el-button>
                <el-button type="danger"  @click="Glas_dele" v-if="Glas_gzdayin">删除</el-button>
                <el-button type="success" @click="open_print=true" v-if="Glas_gzdayin">打印</el-button>
              </div>
              <div style="flex:1" v-if="Glas_baoxiao">
                <el-button type="primary" @click="Glas_save" v-if="qufen == false">保存</el-button>
                <el-button type="primary" @click="Glas_save2" v-if="qufen == true && dele_id != ''">保存1</el-button>
                <el-button  @click="Glas_quxiao" >取消</el-button>
              </div>

            </div>
            <div style="font-size: 20px;margin-bottom: 20px;">Glasgow昏迷评分量表</div>
            <div style="width: 100%;">
              <table class="table" border="1" style="width: 100%;">
                <thead>
                  <tr>
                    <th style="width: 150px;">项目</th>
                    <th>分值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="bg_color">
                    <td class="start">睁眼反应（E）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in zhengyan" class="ttbwzz-type-a" @change="handleCheckedCitiesChange(item)">
                          <label><input type="checkbox" class="checkbox1" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td class="start">言语反映 （V）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in yanyu" class="ttbwzz-type-a" @change="yuyan_change(item)">
                          <label><input type="checkbox" class="checkbox2" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                  <tr class="bg_color">
                    <td class="start">运动反应（M）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in yundong" class="ttbwzz-type-a" @change="yundong_change(item)">
                          <label><input type="checkbox" class="checkbox3" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
            </div>

            <div style="vertical-align: top;  margin: 10px 0px; position: relative;">
              <span style="position: relative; top: -55px;">护理措施：</span>
              <div style="margin-top: 20px;display: inline-block; width: 85%;">
                <el-input maxlength="200" type = "textarea" :rows="3" v-model="glasgow_input" placeholder="输入护理措施，200字以内" ></el-input>
              </div>
            </div>

            <div>
              <div class="bottoms">
                <span>总分:</span>
                <el-input v-model="Glasgow_Totalpoints" style="width: 80px;"></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="Glas_pinggu" placeholder="请选择" style="width:120px;">
                    <el-option
                    v-for="item in pinggr"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id"
                    >
                    </el-option>
                </el-select>
              </div>
            </div>
            <div id="ctrl-xgtlpic-mask" class="readonly" data-text="图片操作的遮罩层" v-show="append == false"></div>
            <hr style=" background-color: #DCDFE6;margin-top: 20px; height: 1px;border: none;"/>
            <div class="shuoming">
              <p>说明：</p>
              <p>总分15分，其中 14-15分为正常，8-13分为中度意识障碍，≦7分为浅昏迷 ，3分为深昏迷 。</p>
            </div>
          </div>
          <!-- 虚线 -->
          <div style="height: 100vh; width: 1px; border-left:1px dashed #DCDFE6 ;"></div>
          <!-- 右 -->
          <div style="width: 38%;">
            <div style="font-size: 20px; margin-bottom: 20px;">评估历史记录</div>
            <div style="width: 100%;">
              <el-table
              :data="history_Glasgow"
              stripe
              border
              @row-click="glasgow_click"
              :highlight-current-row="true"
              :header-cell-style="{
                  background: '#0077ff9f',color:'white'}"
              style="width: 100%">
                  <el-table-column
                  prop="date"
                  label="评估日期"
                  width="180">
                  </el-table-column>
                  <el-table-column
                  prop="mark"
                  label="总分"
                  >
                  </el-table-column>
                  <el-table-column
                  prop="evaluate"
                  label="评估人"
                  >
                  </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <!-- 打印 -->
      <el-dialog
      title="提示"
      :visible.sync="open_print"
      width="67%"
      >
      <div>
        <el-button type="primary" @click="print_pingfen" style="float:right">打印</el-button>
        <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>患者姓名：{{ Patient_info.name }}</span>
                <span>透析号：{{ Patient_info.dialysis_no }}</span>
                <span>评估日期：{{ date }}</span>
                <span>评估护士：{{ getpinggr(Glas_pinggu) }}</span>
                <span>总分：{{ Glasgow_Totalpoints }}</span>
                <span>打印时间：{{ dayintime }}</span>
              </div>
              <table class="tables" border="1" style="width: 100%;border-collapse: collapse;font-size: 16px;">
                <thead>
                  <tr>
                    <th style="width: 150px;padding: 5px;">项目</th>
                    <th style="padding: 5px;">分值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="bg_color">
                    <td class="start">睁眼反应（E）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in zhengyan" class="ttbwzz-type-a" @change="handleCheckedCitiesChange(item)">
                          <label><input type="checkbox" class="checkbox1" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td class="start">言语反映 （V）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in yanyu" class="ttbwzz-type-a" @change="yuyan_change(item)">
                          <label><input type="checkbox" class="checkbox2" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                  <tr class="bg_color">
                    <td class="start">运动反应（M）</td>
                    <td>
                      <div style="display: flex;flex-wrap: wrap;padding:4px 0 4px 8px;">
                        <span v-for="item in yundong" class="ttbwzz-type-a" @change="yundong_change(item)">
                          <label><input type="checkbox" class="checkbox3" :value="item.value" v-model="item.is_check" />&nbsp;{{ item.label }}</label>
                        </span>
                      </div>
                    </td>
                  </tr>

                </tbody>
              </table>
              <div style="vertical-align: top;  margin: 10px 0px;">
                  <span style=" top: -55px;">护理措施：</span>
                  <div style="margin-top: 20px;display: inline-block; width: 85%;height: 80px;">
                    {{ glasgow_input }}
                  </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </el-dialog>

    </div>
     <!-- 删除弹窗 -->
     <el-dialog
      title="提示"
      :visible.sync="dele_dialogVisible"
      width="30%">
      <span>确认删除该数据</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dele_Cancel">取 消</el-button>
        <el-button type="primary" @click="deleclick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
import { uParseTime } from '@/utils/tools'
import {getAllNurseList,savePatientHpressuresore,getPatientBedlist,getPedPatientFallAssessmentById,deletePedPatientFallassment,updateBedPatientList} from '@/api/fallassement'
export default {
  components:{
    PatientSidebar
  },
  data(){
    return{
      patientID:0,
      checkList:'',
      checkList1:'',
      checkList2:'',
      value1:'',
      value:'',
      input:'',
      zhengyan_num:null,
      yuyan_num:null,
      yundong_num:null,
      options:[],
      tableData:[],
      glasgow_input:'',
      limit:10,
      page:1,
      date:this.getTime(new Date()),
      zhengyan:[{value:4,label:'自动睁眼(4分)',is_check:false,check:0},{value:3,label:'互换睁眼(3分)',is_check:false,check:0},{value:2,label:'刺激睁眼(2分)',is_check:false,check:0},{value:1,label:'无反应(1分)',is_check:false,check:0}],
      yanyu:[{value:5,label:'正常(5分)',is_check:false,check:0},{value:4,label:'不准确回答问题(4分)',is_check:false,check:0},
      {value:3,label:'不恰当词句(3分)',is_check:false,check:0},{value:2,label:'不能理解的言语(2分)',is_check:false,check:0},{value:1,label:'无言语反映(1分)',is_check:false,check:0}],
      yundong:[{value:6,label:'能按指令运动肢体(6分)',is_check:false,check:0},{value:5,label:'对刺痛能定位(5分)',is_check:false,check:0},{value:4,label:'对刺痛能躲避(4分)',is_check:false,check:0},
      {value:3,label:'刺痛肢体屈曲(3分)',is_check:false,check:0},{value:2,label:'刺痛肢体过伸(2分)',is_check:false,check:0},{value:1,label:'无反应(1分)',is_check:false,check:0}],

      pinggr:[{id:1,label:'小米'},{id:2,label:'千仞雪'},{id:3,label:'千亦雪'},],
      history_Glasgow:[],

      append:false,//显示遮罩层
      Glasadd_show:true,//显示新增
      Glas_gzdayin:false,//显示编辑删除
      Glas_baoxiao:false,//显示保存
      qufen:false,//区分新增保存和修改保存
      cancel_num:0,
      Glas_pinggu:null,
      open_print:false,
      dele_id:'',
      dele_dialogVisible:false,
      dayintime:this.getTime2(new Date()),
      glasgow_zong:0,
      Patient_info:{name:'',dialysis_no:''},
    }
  },
  created(){
    const id = this.$route.params && this.$route.params.id
    this.patientID = parseInt(id)
    this.getlist()
  },
  methods:{
    //睁眼
    handleCheckedCitiesChange(item){
      for(let i=0;i<this.zhengyan.length;i++){
        if(item.value == this.zhengyan[i].value){
          if(this.zhengyan[i].check == 0){
            this.zhengyan[i].check =1
            this.zhengyan[i].is_check = true
            this.zhengyan_num = item.value
          }else{
            this.zhengyan[i].check =0
            this.zhengyan[i].is_check = false
            this.zhengyan_num = 0
          }
        }else{
          this.zhengyan[i].check =0
          this.zhengyan[i].is_check = false
        }
      }
    },
    // 语言
    yuyan_change(item){
      for(let i=0;i<this.yanyu.length;i++){
        if(item.value == this.yanyu[i].value){
          if(this.yanyu[i].check == 0){
            this.yanyu[i].check =1
            this.yanyu[i].is_check = true
            this.yuyan_num = item.value
          }else{
            this.yanyu[i].check =0
            this.yanyu[i].is_check = false
            this.yuyan_num = 0
          }
        }else{
          this.yanyu[i].check =0
          this.yanyu[i].is_check = false
        }
      }
    },
    // 运动
    yundong_change(item){

      for(let i=0;i<this.yundong.length;i++){
        if(item.value == this.yundong[i].value){
          if(this.yundong[i].check == 0){
            this.yundong[i].check =1
            this.yundong[i].is_check = true
            this.yundong_num = item.value
          }else{
            this.yundong[i].check =0
            this.yundong[i].is_check = false
            this.yundong_num = 0
          }
        }else{
          this.yundong[i].check =0
          this.yundong[i].is_check = false
        }
      }
    },
    // 新增
    Glas_add(){
      this.cancel_num=0
      this.append=true
      this.Glas_baoxiao=true
      this.Glasadd_show =false
      this.Glas_gzdayin = false
      this.qufen = false
    },
    // 新增保存
    Glas_save(){
      if(this.Glas_pinggu==null){
        this.$message('请选择评估人')
      }else{
        this.Glasadd_show = true
        this.Glas_baoxiao = false
        this.Glas_gzdayin = true
        this.cancel_num = 1

        const data = {}
        var list = []
        data['zhengyan'] = this.zhengyan_num
        data['yanyu'] = this.yuyan_num
        data['yundong'] = this.yundong_num
        data['glasgow_input'] = this.glasgow_input
        data['Glas_pinggu'] = this.Glas_pinggu
        data['date'] = this.date
        data['total'] = this.Glasgow_Totalpoints
        list.push(data)
        var params={
          patient_id:this.patientID,
          record_date:this.date,
          is_type:11,
          list:list,
        }
        savePatientHpressuresore(params).then(response =>{
            if(response.data.state == 1){
              const Glasgow = response.data.data.pedFallssessment
              console.log('response.data.state',response.data.data.pedFallssessment);
              if(Glasgow.text !=''){
                var text = JSON.parse(Glasgow.text)
                const arr ={
                  id:Glasgow.id,
                  date:text.date,
                  mark:text.total,
                  evaluate:this.getpinggr(text.Glas_pinggu),
                  list:text
                }
                this.history_Glasgow.push(arr)
              }
            }
        })
        // console.log('1111111',params);
        // const arr={
        //   date:this.date,
        //   mark:this.Glasgow_Totalpoints,
        //   evaluate:this.Glas_pinggu
        // }
        // console.log('2121212',arr,params);
        // this.history_Glasgow.push(arr)
        // const Glalen=this.pinggr
        // const historylen = this.history_Glasgow
        // var pingguname =''
        // for(let x=0;x<historylen.length;x++){
        //   historylen[x].mark = this.Glasgow_Totalpoints
        //   for(let i=0;i<Glalen.length;i++){
        //     if(this.Glas_pinggu==Glalen[i].id){
        //       pingguname = Glalen[i].label

        //     }
        //   }
        //   historylen[x].evaluate = pingguname
        //       // return historylen[x].evaluate
        // }
        return this.history_Glasgow
      }
    },
    // 修改保存
    Glas_save2(){
      this.Glasadd_show = false
      this.Glas_baoxiao = true
      this.Glas_gzdayin = false
      this.cancel_num = 1

      const data = {}
      var list = []
      data['zhengyan'] = this.zhengyan_num
      data['yanyu'] = this.yuyan_num
      data['yundong'] = this.yundong_num
      data['glasgow_input'] = this.glasgow_input
      data['Glas_pinggu'] = this.Glas_pinggu
      data['date'] = this.date
      data['total'] = this.Glasgow_Totalpoints
      list.push(data)
      var params={
        patient_id:this.patientID,
        record_date:this.date,
        is_type:11,
        list:list,
        id:this.dele_id
      }
      updateBedPatientList(params).then(response =>{
          if(response.data.state == 1){
            const Glasgow = response.data.data.pedFallssessment
            console.log('response.data.state',response.data.data.pedFallssessment);
            if(Glasgow.text !=''){
              var text = JSON.parse(Glasgow.text)
              for(let i in this.history_Glasgow){
                if(Glasgow.id ==this.history_Glasgow[i].id){
                  this.history_Glasgow[i].date = text.date
                  this.history_Glasgow[i].mark = text.total
                  this.history_Glasgow[i].evaluate = this.getpinggr(text.Glas_pinggu)
                  this.history_Glasgow[i].glasgow_input = text.glasgow_input
                }
              }
            }
            this.Glasadd_show = true
            this.Glas_baoxiao = false
            this.Glas_gzdayin = true
          }
      })
      return this.history_Glasgow
    },
    // 编辑
    Glas_editor(){
      this.Glas_gzdayin=false
      this.Glas_baoxiao=true
      this.Glasadd_show=false
      this.cancel_num =1
      this.qufen = true
    },
    // 选中数据
    glasgow_click(row,column, event){
      this.dele_id=row.id
      // if(this.cancel_num == 1){
      //   this.Glasadd_show = true
      //   this.Glas_gzdayin = true
      //   this.Glas_baoxiao = false
      //   // this.append2 = false
      // }
      if(this.Glas_baoxiao == true){
        this.Glasadd_show = true
        this.Glas_gzdayin = true
        this.Glas_baoxiao = false
        this.qufen = false
        // this.append2 = false
      }
      getPedPatientFallAssessmentById(this.dele_id).then(response =>{
        if(response.data.state ==1){
          const glasgow = response.data.data.fallassessment
          // console.log('response.data.',response.data.data.fallassessment);
          if(glasgow.text !=''){
            const text =JSON.parse(glasgow.text)
            for(let i in this.zhengyan){
              if(text.zhengyan == this.zhengyan[i].value){
                this.zhengyan[i].is_check = true
                this.zhengyan[i].check = 1
                this.zhengyan_num = text.zhengyan
              }else{
                this.zhengyan[i].is_check = false
                this.zhengyan[i].check = 0
              }
            }
            for(let i in this.yanyu){
              if(text.yanyu == this.yanyu[i].value){
                this.yanyu[i].is_check = true
                this.yanyu[i].check = 1
                this.yuyan_num = text.yanyu
              }else{
                this.yanyu[i].is_check = false
                this.yanyu[i].check = 0
              }
            }
            for(let i in this.yundong){
              if(text.yundong == this.yundong[i].value){
                this.yundong[i].is_check = true
                this.yundong[i].check = 1
                this.yundong_num = text.yundong
              }else{
                this.yundong[i].is_check = false
                this.yundong[i].check = 0
              }
            }
            this.date = text.date
            this.Glas_pinggu = text.Glas_pinggu
            this.glasgow_input = text.glasgow_input
            this.Glasgow_Totalpoints =text.total
          }
        }
      })
    },
    // 删除
    Glas_dele(){
      if(this.dele_id !=''){
        this.append=false
        this.Glas_gzdayin=false
        this.Glasadd_show=true
        this.Glas_baoxiao=false
        this.cancel_num=0
        this.dele_dialogVisible=true
      }else{
        this.$message('请选择需要删除的记录')
      }

    },
    // 确认删除
    deleclick(){
      deletePedPatientFallassment(this.dele_id).then(response =>{
        if(response.data.state == 1){
          for(let i=0;i<this.history_Glasgow.length;i++){
            if(this.dele_id==this.history_Glasgow[i].id){
              this.history_Glasgow.splice(i,1)
            }
          }
        }
      })
      this.dele_dialogVisible=false
      return this.history_Glasgow
    },
    // 取消删除
    dele_Cancel(){
      this.append=false
      this.Glasadd_show=true
      this.Glas_gzdayin=true
      this.dele_dialogVisible=false
    },
    // 取消
    Glas_quxiao(){
      // console.log('1111',this.cancel_num);
      if(this.cancel_num==0){
        this.append=false
        this.Glasadd_show=true
        this.Glas_gzdayin=false
        this.Glas_baoxiao=false
        
      //  return this.append
      }else{
        this.Glasadd_show=true
        this.Glas_gzdayin=true
        this.Glas_baoxiao=false
        this.append=true
      }
      for(let i in this.zhengyan){
        this.zhengyan[i].is_check = false
        this.zhengyan_num = 0
      }
      for(let i in this.yanyu){
        this.yanyu[i].is_check = false
        this.yuyan_num = 0
      }
      for(let i in this.yundong){
        this.yundong[i].is_check = false
        this.yundong_num = 0
      }
      this.Glas_pinggu = ''
      this.date =this.date
      this.glasgow_input = ''
      this.Glasgow_Totalpoints = 0
      // console.log('2222', this.apppend);
    },
    // 打印
    print_pingfen(){
      const style= '@media print {.diedao_content{background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0;} .tables thead th{ text-align: center;height: 40px;} .tables tbody td{height: 40px;padding:0 10px} .tables{font-size: 16px;}}'
      printJS({
        printable: 'mingxi',
        type: 'html',
        style: style,
        scanStyles: false
      })
      this.open_print=false
    },
    // 转换时间
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
    getTime2(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d} {h}:{i}:{s}')
        }
    },
    // 评估护士
    getpinggr(id){
      for(let i in this.pinggr){
        if(id == this.pinggr[i].id){
          return this.pinggr[i].label
        }
      }
    },
    // 数据源
    getlist(){
        var params = {
          patient_id:this.patientID,
          limit:this.limit,
          is_type:11,
          page:this.page,
        }
      getPatientBedlist(params).then(response=>{
        if(response.data.state ==1){
          var list = response.data.data.list
          list.forEach((item) => {
            if(item.text !=''){
              var text = JSON.parse(item.text)
                const arr ={
                  id:item.id,
                  date:text.date,
                  mark:text.total,
                  evaluate:this.getpinggr(text.Glas_pinggu),
                  glasgow_input:text.glasgow_input,
                  list:text
                }
                this.history_Glasgow.push(arr)
            }
          });
          var total = response.data.data.total
          console.log('list',list);
        }
      })
      return this.history_OH
    },
    // 患者信息
    tranpatient(event){
      console.log('event',event);
      this.Patient_info={
        name:event.name,
        dialysis_no:event.dialysis_no
      }
    },
  },
  computed:{
    Glasgow_Totalpoints:{
      get(){
        this.glasgow_zong = this.zhengyan_num*1 + this.yuyan_num*1 + this.yundong_num*1
        return this.glasgow_zong
      },
      set(val){
        return this.glasgow_zong = val
      }
       
    }
  }
}
</script>
<style lang="scss" scoped>
  .content_top{
    display: flex;
    justify-content: space-between;
  }
  .bottoms{
      display: inline-block;
      margin-left: 10px;
      margin-top: 5px;
  }
  .shuoming p{
    margin-top: 5px;
    color: rgb(167, 165, 165);
  }
  .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: 5px 0px 5px 20px;
          color: black;
      }
      .rightjiange{
        margin-right: 40px;
        font-size: 15px;
      }
      .ttbwzz-type-a {
        min-width: 80px;
        margin-right: 30px;
        padding: 5px 0px;
        font-size: 15px;
      }
      input{
          -webkit-appearance: checkbox;
      }
  }
#ctrl-xgtlpic-mask.readonly {
  z-index: 2000;
}
#ctrl-xgtlpic-mask {
    width: 85%;
    height: 100%;
    position: absolute;
    left: 196px;
    top: 131px;
    opacity: 0;
    z-index: -1;
}
.tables {

  thead th{
    text-align: center;
    height: 40px;
  }
  tbody td{
    padding:0 10px;
    height: 40px;
  }
  input{
    -webkit-appearance: checkbox;
  }
}
</style>