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

<!-- OH压疮评估 -->
<template>
  <div class="patient-container">
    <patient-sidebar :id="patientID" defaultActive="5-4"></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="OHadd" v-if="add_show">新增</el-button>
                <el-button style="background:#00B6D7;color:white" @click="editor_OH" v-if="zsgy_open==1">编辑</el-button>
                <el-button type="danger"  @click="dele_OH" v-if="zsgy_open==1">删除</el-button>
                <el-button type="success" @click="print_OH" v-if="zsgy_open==1">打印</el-button>
              </div>

              <div style="flex:1" v-if="baocun_open==1">
                <el-button type="primary" @click="save_OH" >保存</el-button>
                <el-button  @click="cancel_OH" >取消</el-button>
              </div>

            </div>
            <div>
              <div style="font-size: 20px;margin-bottom: 20px;">OH压疮评估表</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">自主体位变换</td>
                              <td>
                                <div class="jiange">
                                    <span v-for="item in tiwei" class="rightjiange" @change="handleCheckedCitiesChange($event,item)">
                                        <label><input type="checkbox" class="checkbox1" name="ball" v-model="item.is_check" :value="item.value"/>&nbsp;{{ item.label }}</label>
                                    </span>
                                </div>
                              </td>
                          </tr>
                          <tr>
                              <td class="start">病理性骨突出</td>
                              <td>
                                  <div class="jiange">
                                      <span v-for="item in bingli" class="rightjiange" @change="bingligu(item)">
                                          <label><input type="checkbox" class="checkbox2" name="ball" v-model="item.is_check" :value="item.value" />&nbsp;{{ item.label }}</label>
                                      </span>
                                  </div>
                              </td>
                          </tr>

                          <tr class="bg_color">
                              <td class="start">浮肿</td>
                              <td>
                                  <div class="jiange">
                                      <span v-for="item in edema" class="rightjiange" @change="fozhong_chang(item)">
                                          <label><input type="checkbox" class="checkbox3" name="ball" v-model="item.is_check" :value="item.value" />&nbsp;{{ item.label }}</label>
                                      </span>
                                  </div>
                              </td>
                          </tr>

                          <tr>
                              <td class="start">关节痉挛</td>
                                <td>
                                  <div class="jiange">
                                      <span v-for="item in guanjie" class="rightjiange" @change="guanjie_change(item)">
                                          <label><input type="checkbox" class="checkbox4" name="ball" v-model="item.is_check" :value="item.value" />&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="oh_huli" placeholder="输入护理措施，200字以内" ></el-input>
                  </div>
              </div>

              <div>
                <div class="bottoms">
                  <span>总分:</span>
                  <el-input v-model="Totalpoints" style="width: 80px;"></el-input>分
                </div>
                <div class="bottoms">
                  <span>评估日期:</span>
                  <el-date-picker
                    v-model="oh_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="oh_appraiser" placeholder="请选择"  style="width:120px;">
                      <el-option
                      v-for="item in oh_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>
            </div>

            <hr style="width: 100%;margin-top: 20px; border: none;height: 1px;background: #DCDFE6;"/>
            <div class="shuoming">
                <p>说明：</p>
                <p>1、本表适用于急症科、血液净化科等非病房科室。</p>
                <p>2、总分：10分，分值越大风险越高 ；1-3分为低危；4-6分为中危；7-10分为高危。</p>
                <p>3、病理性骨突出指骶尾部（或受压部位骨突出处）两侧均高于皮肤
                    <2cm为“无”；两侧均为2cm或一侧<2cm一侧2cm为“轻度/中度”；两侧均>2cm或一侧>2cm一侧2cm为“高度”。
                </p>
                <p>参考：北海道大学名授大浦武彦,堀田由浩. 利用OH 评估法进行压疮预防[M].东京：中央法规出版社,2005：11</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_OH"
              stripe
              border
              @row-click="dele_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>


    </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>患者姓名：</span>
                <span>透析号：</span>
                <span>评估日期：{{ oh_date }}</span>
                <span>评估护士：{{ getpinggr(oh_appraiser) }}</span>
                <span>总分：{{ Totalpoints }}</span>
                <span>打印时间：{{ dayintime }}</span>
              </div>
              <table class="tables" border="1" style="width: 100%;border-collapse: collapse;">
                <thead>
                  <tr>
                    <th style="width: 150px;padding: 5px;">项目</th>
                    <th style="padding: 5px;">分值</th>
                  </tr>
                </thead>
                <tbody>
                    <tr class="bg_color">
                        <td class="start">自主体位变换</td>
                        <td>
                          <div class="jiange">
                              <span v-for="item in tiwei" class="rightjiange" @change="handleCheckedCitiesChange($event,item)">
                                  <label><input type="checkbox" class="checkbox1" name="ball" v-model="item.is_check" :value="item.value"/>&nbsp;{{ item.label }}</label>
                              </span>
                          </div>
                        </td>
                    </tr>
                    <tr>
                        <td class="start">病理性骨突出</td>
                        <td>
                            <div class="jiange">
                                <span v-for="item in bingli" class="rightjiange" @change="bingligu(item)">
                                    <label><input type="checkbox" class="checkbox2" name="ball" v-model="item.is_check" :value="item.value" />&nbsp;{{ item.label }}</label>
                                </span>
                            </div>
                        </td>
                    </tr>

                    <tr class="bg_color">
                        <td class="start">浮肿</td>
                        <td>
                            <div class="jiange">
                                <span v-for="item in edema" class="rightjiange" @change="fozhong_chang(item)">
                                    <label><input type="checkbox" class="checkbox3" name="ball" v-model="item.is_check" :value="item.value" />&nbsp;{{ item.label }}</label>
                                </span>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td class="start">关节痉挛</td>
                          <td>
                            <div class="jiange">
                                <span v-for="item in guanjie" class="rightjiange" @change="guanjie_change(item)">
                                    <label><input type="checkbox" class="checkbox4" name="ball" v-model="item.is_check" :value="item.value" />&nbsp;{{ item.label }}</label>
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
              </table>
              <div style="vertical-align: top;  margin: 10px 0px; ">
                  <span >护理措施：</span>
                  <div style="margin-top: 20px;display: inline-block; width: 85%;height: 80px;">
                    {{ oh_huli }}
                      <!-- <el-input maxlength="200" type = "textarea" :rows="3" v-model="input" placeholder="输入护理措施，200字以内" ></el-input> -->
                  </div>
              </div>
              <hr style="width: 100%;margin-top: 20px; border: 1px solid black;"/>
              <div class="shuoming">
                  <p>说明：</p>
                  <p>1、本表适用于急症科、血液净化科等非病房科室。</p>
                  <p>2、总分：10分，分值越大风险越高 ；1-3分为低危；4-6分为中危；7-10分为高危。</p>
                  <p>3、病理性骨突出指骶尾部（或受压部位骨突出处）两侧均高于皮肤
                      <2cm为“无”；两侧均为2cm或一侧<2cm一侧2cm为“轻度/中度”；两侧均>2cm或一侧>2cm一侧2cm为“高度”。
                  </p>
                  <p>参考：北海道大学名授大浦武彦,堀田由浩. 利用OH 评估法进行压疮预防[M].东京：中央法规出版社,2005：11</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-dialog>
    <!-- 删除弹窗 -->
    <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 print from 'print-js'
import { uParseTime } from '@/utils/tools'
export default {
  components:{
    PatientSidebar
  },
  data(){
    return{
      patientID:0,
      tiwei_num:null,
      bingli_num:null,
      edema_num:null,
      gaunjie_num:null,
      ball:'',
      input:'',
      history_OH:[{id:'001',date:'2023-9-27',mark:'',evaluate:''}],
      form:[],
      appraiser:null,
      value1:'',
      options:[],
      tiwei:[{id:1,value:0,label:'能(0分)',check:0,is_check:false},{id:2,value:1.5,label:'不能完全自立(1.5分)',check:0,is_check:false},{id:3,value:3,label:'不能(3分)',check:0,is_check:false}],
      bingli:[{value:0,label:'无(0分)',check:0,is_check:false},{value:1.5,label:'轻度/中度(1.5分)',check:0,is_check:false},{value:3,label:'高度(3分)',check:0,is_check:false}],
      edema:[{value:0,label:'无(0分)',check:0,is_check:false},{value:3,label:'有(3分)',check:0,is_check:false}],
      guanjie:[{value:0,label:'无(0分)',check:0,is_check:false},{value:1,label:'有(1分)',check:0,is_check:false}],
      oh_pinggr:[{id:1,label:'小米'},{id:2,label:'千仞雪'},{id:3,label:'千亦雪'},],
      checkList:[],
      checkList1:[],
      checkList2:[],
      checkList3:[],

      append:false,//控制遮罩层
      add_open:1,//新增按钮控制条件
      baocun_open:0,//控制保存取消显示
      add_show:true,//控制新增显示
      zsgy_open:0,//控制编辑,删除,打印显示
      cancel_num:0,//取消的条件
      open_print:false,
      dele_id:'',//删除的索引
      dele_dialogVisible:false,
      oh_huli:'',//护理措施
      oh_date:this.getTime(new Date()),
      oh_appraiser:null,
      dayintime:this.getTime(new Date())//打印
      // oh_pinggr:[],
    }
  },
  methods:{
    //选择的总分
    handleCheckedCitiesChange(e,item){
      console.log('vvvv','bbbb',item);
      for(let i=0;i<this.tiwei.length;i++){
        if(item.value == this.tiwei[i].value){
          if(this.tiwei[i].check == 0){
            this.tiwei[i].check =1
            this.tiwei[i].is_check = true
            this.tiwei_num = item.value
          }else{
            this.tiwei[i].check =0
            this.tiwei[i].is_check = false
            this.tiwei_num = 0
          }
        }else{
          this.tiwei[i].check =0
          this.tiwei[i].is_check = false
        }
      }
      console.log('oooo',this.tiwei);
    },
    bingligu(item){
      for(let i=0;i<this.bingli.length;i++){
        if(item.value == this.bingli[i].value){
          if(this.bingli[i].check == 0){
            this.bingli[i].check =1
            this.bingli[i].is_check = true
            this.bingli_num = item.value
          }else{
            this.bingli[i].check =0
            this.bingli[i].is_check = false
            this.bingli_num = 0
          }
        }else{
          this.bingli[i].check =0
          this.bingli[i].is_check = false
        }
      }
    },
    fozhong_chang(item){
      for(let i=0;i<this.edema.length;i++){
        if(item.value == this.edema[i].value){
          if(this.edema[i].check == 0){
            this.edema[i].check =1
            this.edema[i].is_check = true
            this.edema_num = item.value
          }else{
            this.edema[i].check =0
            this.edema[i].is_check = false
            this.edema_num = 0
          }
        }else{
          this.edema[i].check =0
          this.edema[i].is_check = false
        }
      }
    },
    guanjie_change(item){
      for(let i=0;i<this.guanjie.length;i++){
        if(item.value == this.guanjie[i].value){
          if(this.guanjie[i].check == 0){
            this.guanjie[i].check =1
            this.guanjie[i].is_check = true
            this.gaunjie_num = item.value
          }else{
            this.guanjie[i].check =0
            this.guanjie[i].is_check = false
            this.gaunjie_num = 0
          }
        }else{
          this.guanjie[i].check =0
          this.guanjie[i].is_check = false
        }
      }
    },
    // 新增
    OHadd(){
      if(this.add_open==1){
        this.append=true
        this.baocun_open=1
        this.add_show =false
        this.zsgy_open= 0
      }else{
        this.append = false
      }
    },
    //保存
    save_OH(){
      if(this.oh_appraiser==null){
        this.$message('请选择评估人')
      }else{
        this.baocun_open=0
        this.add_show=true
        this.zsgy_open=1
        this.cancel_num=1
        var params={
          patientID:this.patientID,
          tiwei:this.tiwei,
          bingli:this.bingli,
          edema:this.edema,
          guanjie:this.guanjie,
          oh_huli:this.oh_huli,
          oh_date:this.oh_date,
          oh_appraiser:this.oh_appraiser,
          Totalpoints:this.Totalpoints
        }
        const arr={
          id:'002',
          date:this.oh_date,
          mark:this.Totalpoints,
          evaluate:this.oh_appraiser
        }
        console.log('rrrrr',arr,params);
        this.history_OH.push(arr)
        const lenOH= this.history_OH
        var nameoh=''
        for(let i=0;i<lenOH.length;i++){
          lenOH[i].mark= this.Totalpoints
          for(let y=0;y<this.oh_pinggr.length;y++){
            if(this.oh_appraiser==this.oh_pinggr[y].id){
              nameoh=this.oh_pinggr[y].label
            }
          }
          lenOH[i].evaluate= nameoh
        }
        return this.cancel_num
      }
    },
    //编辑
    editor_OH(){
      this.add_show=false
      this.zsgy_open=0
      this.baocun_open=1
      this.cancel_num=1
    },
    // 选择需要删除的记录
    dele_click(row, column, event){
      this.dele_id=row.id
    },
    //删除
    dele_OH(){
      if(this.dele_id !=''){
        this.zsgy_open=0
        this.append=false
        this.dele_dialogVisible=true
      }else{
        this.$message('请选择需要删除的记录')
      }

    },
    deleclick(){
      for(let i=0;i<this.history_OH.length;i++){
        if(this.dele_id==this.history_OH[i].id){
          this.history_OH.splice(i,1)
        }
      }
      this.dele_dialogVisible=false
    },
    //打印
    print_OH(){
      this.open_print=true
    },
    dele_Cancel(){
      this.append=false
      this.zsgy_open=1
      this.add_show=true
      this.dele_dialogVisible=false
    },
    //取消
    cancel_OH(){
      const checkboxs=document.getElementsByClassName('ball')
      this.baocun_open=0
      console.log('1111',this.cancel_num);
      if(this.cancel_num==1){
        this.zsgy_open=1
        this.add_show=true
      }else{
        this.zsgy_open=0
        this.add_show=true
        this.append=false
        this.tiwei_num=''
        this.bingli_num=null
        this.edema_num=null
        this.gaunjie_num=null
        for(let i=0;i<checkboxs.length;i++){
          checkboxs[i].checked = false
        }
      }

    },
    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}}'
      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}')
        }
    },
    // 评估护士
    getpinggr(id){
      for(let i in this.oh_pinggr){
        if(id == this.oh_pinggr[i].id){
          return this.oh_pinggr[i].label
        }
      }
    }
  },
  computed:{
    Totalpoints(){
      return this.gaunjie_num*1 + this.edema_num*1 + this.bingli_num*1 + this.tiwei_num*1
    }
  }
}
</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-left: 20px;
        color: black;
    }
    .rightjiange{
      margin-right: 40px;
      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{
    // background: #0077ff9f;
    // color: white;
    text-align: center;
    height: 40px;
  }
  tbody td{
    padding:0 10px;
    height: 40px;
  }
  input{
    -webkit-appearance: checkbox;
  }
}
</style>