elizebeth/src/xt_pages/user/history/daoguan_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="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="脱管后风险程度"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="患者意识程度"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="患者配合程度"
            width="130"
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="护理措施"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="mark"
            label="总评分"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            prop="evaluate"
            label="责任护士"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            label="操作"
            width="155"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit-outline" @click="open_xiugai(scope.row)"></el-button>
              <el-button type="primary" icon="el-icon-delete" @click="open_delete(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 打印评分 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="67%"
      >
      <div>
        <el-button type="primary" @click="print_pingfen(1)" style="float:right">打印</el-button>
        <div id="pingfeng" >
          <div class="diedao_content" style="">
            <div style="width:100%">
              <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="table" border="1" style="border-collapse:collapse;text-align:center;width:100%;font-size:16px">
                <tr>
                  <td style="width:100px">评估日期</td>
                  <td style="width:100px">脱管后风险程度</td>
                  <td style="width:100px">患者意识程度</td>
                  <td style="width:100px">患者配合程度</td>
                  <td style="width:400px">护理措施</td>
                  <td style="width:100px">总评分</td>
                  <td style="width:100px">责任护士</td>
                </tr>

                <tr v-for="(item,index) in multipleSelection" :key="index">
                  <td>{{ item.time }}</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td>{{ item.mark }}</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="">
          <el-button type="primary" @click="print_pingfen(2)" style="float:right">打印</el-button>
        </div>

        <div id="mingxi" >
          <div class="diedao_content" style="page-break-after: always;" v-for="i in multipleSelection">
            <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  border="1" style="width: 100%; border-collapse:collapse ;">
                <thead>
                  <tr>
                      <th style="width: 15%;">项目</th>
                      <th style="width: 50%;">分值</th>
                      <th>护理措施</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="start">A.脱管后风险程度</td>
                    <td>
                      <div class="jiange">
                        <el-radio-group >
                          <el-radio v-for="(item,index ) in tuoguan" :label="item" :key="index" style="">{{ item }}</el-radio>
                        </el-radio-group>
                      </div>
                    </td>
                    <td rowspan="3">
                      <div style="vertical-align: top; color: black; padding: 5px;">
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;1.管道维护，导管脱落严重后果及预防措施的健康教育；</label> <br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;2.床边悬挂警示标识（＞9分悬挂）；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;3.正确妥善固定；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;4.正确卧位及床上活动方式， 病人带管下床活动时， 将引流管固定在病人的衣服或裤子上；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;5.加强巡视，及时发现满足患者需要；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;6.严格交接班，各班重点交接，观察外露长度，必要时记录；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;7.昏迷、暴躁、不合作病人，根据医嘱使用镇静剂和约束带；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;8.进行诊疗护理需要移动患者时，根据医嘱使用镇静剂和约束带；</label><br/>
                        <label><input name="ball" type="checkbox" value="football" />&nbsp;9.对于气管插管清醒患者，进行心理疏导和安全教育。</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="start">B.患者意识程度</td>
                    <td>
                      <div class="jiange">
                          <el-radio-group >
                              <el-radio v-for="(item,index ) in yishi" :label="item" :key="index">{{ item }}</el-radio>
                          </el-radio-group>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="start">C.患者配合程度</td>
                    <td>
                      <div  class="jiange">
                          <el-radio-group >
                            <el-radio v-for="(item,index ) in peihe" :label="item" :key="index">{{ item }}</el-radio>
                          </el-radio-group>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div style="margin-top: 20px;">
                    <p>患者知情同意书：我对住院期间发生导管脱落的风险及预防措施已知晓，并给予配合。</p>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 70px;">患者/家属签字: <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span></p>
                        <p style="display: inline-block;">
                            日期：
                            <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span>
                        </p>
                    </div>
                    <div class="zhuangui">
                        <span>转归：</span>
                        <el-radio  label="1">脱落</el-radio>
                        <el-radio  label="2">未脱落</el-radio>
                    </div>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 30px;">
                            评估人签字:
                            <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span>
                        </p>
                        <p style="display: inline-block;">
                            日期：
                            <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span>
                        </p>
                    </div>
                    <div class="zhuangui">
                        <p style="display: inline-block; margin-right: 30px;">
                            护士长签字:
                            <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span>
                        </p>
                        <p style="display: inline-block;">
                            日期：
                            <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span>
                        </p>
                    </div>
              </div>
              <hr style="margin: 10px 0px;border:1px solid rgb(135, 133, 133);"/><!--水平线-->
              <div class="shuoming">
                  <p>说明：</p>
                  <p>1.＜5分为正常，5~8分为危险，≥9分为高度危险。</p>
                  <p>2.导管脱落危险因素≥5分，需填写该表。</p>
                  <p>3.常规情况下，评分5~8分，至少每天评估一次；评分≥9，至少每班评估一次，紧急与特殊情况，应随时评估。</p>
              </div>
              <div style="font-size: 16px;">打印时间：</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
     <!-- 编辑 -->
     <el-dialog
      title="提示"
      :visible.sync="editor_dialogVisible"
      width="67%"
      >
      <div>
        <table class="tables" border="1" style="width: 100%;border-collapse: collapse;">
          <thead>
            <tr>
                <th style="width: 15%;">项目</th>
                <th style="width: 50%;">分值</th>
                <th>护理措施</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="start">A.脱管后风险程度</td>
              <td>
                <div class="jiange">
                  <el-radio-group v-model="radio" @change="handleCheckedCitiesChange">
                    <el-radio v-for="(item,index ) in tuoguan" :label="item" :key="index" style="">{{ item }}</el-radio>
                  </el-radio-group>
                </div>
              </td>
              <td rowspan="3">
                <div style="vertical-align: top; color: black; padding: 5px;">
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;1.管道维护，导管脱落严重后果及预防措施的健康教育；</label> <br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;2.床边悬挂警示标识（＞9分悬挂）；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;3.正确妥善固定；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;4.正确卧位及床上活动方式， 病人带管下床活动时， 将引流管固定在病人的衣服或裤子上；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;5.加强巡视，及时发现满足患者需要；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;6.严格交接班，各班重点交接，观察外露长度，必要时记录；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;7.昏迷、暴躁、不合作病人，根据医嘱使用镇静剂和约束带；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;8.进行诊疗护理需要移动患者时，根据医嘱使用镇静剂和约束带；</label><br/>
                  <label><input name="ball" type="checkbox" value="football" />&nbsp;9.对于气管插管清醒患者，进行心理疏导和安全教育。</label>
                </div>
              </td>
            </tr>
            <tr>
              <td class="start">B.患者意识程度</td>
              <td>
                <div class="jiange">
                    <el-radio-group v-model="radio1"  @change="handleCheckedCitiesChange">
                        <el-radio v-for="(item,index ) in yishi" :label="item" :key="index">{{ item }}</el-radio>
                    </el-radio-group>
                </div>
              </td>
            </tr>
            <tr>
              <td class="start">C.患者配合程度</td>
              <td>
                <div  class="jiange">
                    <el-radio-group v-model="radio2" @change="handleCheckedCitiesChange">
                      <el-radio v-for="(item,index ) in peihe" :label="item" :key="index">{{ item }}</el-radio>
                    </el-radio-group>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="content_top" style="margin: 10px 0px;">
        <div>
            <div class="bottoms">
            <span>总分:</span>
            <el-input v-model="duct_Totalpoints" style="width: 100px;"></el-input>分
            </div>

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

            <div class="bottoms">
                <span>评估人:</span>
                <el-select v-model="value" placeholder="请选择" >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    style="width:150px;">
                    </el-option>
                </el-select>
            </div>

        </div>
        <div style="margin:5px 10px;">
          <el-button type="primary">确认</el-button>
        </div>
      </div>
      <hr style="border:none;height:1px;background:#DCDFE6;"/><!--水平线-->
      <div style="margin-top: 20px;">
          <p>患者知情同意书：我对住院期间发生导管脱落的风险及预防措施已知晓，并给予配合。</p>
          <div class="zhuangui">
              <p style="display: inline-block; margin-right: 70px;">患者/家属签字: <span style="display: inline-block;border-bottom:1px solid #DCDFE6;width: 60px;"></span></p>
              <p style="display: inline-block;">
                  日期：
                  <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择日期"
                      style="width: 150px;">
                  </el-date-picker>
              </p>
          </div>
          <div class="zhuangui">
              <span>转归：</span>
              <el-radio v-model="radio" label="1">脱落</el-radio>
              <el-radio v-model="radio" label="2">未脱落</el-radio>
          </div>
          <div class="zhuangui">
              <p style="display: inline-block; margin-right: 30px;">
                  评估人签字:
                  <el-select v-model="value" placeholder="请选择" style="width: 120px;">
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                  </el-select>
              </p>
              <p style="display: inline-block;">
                  日期：
                  <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择日期"
                      style="width: 150px;">
                  </el-date-picker>
              </p>
          </div>
          <div class="zhuangui">
              <p style="display: inline-block; margin-right: 30px;">
                  护士长签字:
                  <el-select v-model="value" placeholder="请选择" style="width: 120px;">
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                  </el-select>
              </p>
              <p style="display: inline-block;">
                  日期：
                  <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="选择日期"
                      style="width: 150px;">
                  </el-date-picker>
              </p>
          </div>
      </div>
      <hr style="margin: 10px 0px;border:none;height:1px;background:#DCDFE6;"/><!--水平线-->
      <div class="shuoming">
          <p>说明：</p>
          <p>1.＜5分为正常，5~8分为危险，≥9分为高度危险。</p>
          <p>2.导管脱落危险因素≥5分，需填写该表。</p>
          <p>3.常规情况下，评分5~8分，至少每天评估一次；评分≥9，至少每班评估一次，紧急与特殊情况，应随时评估。</p>
      </div>
    </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_daogaun">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import print from 'print-js'
export default{
  data(){
    return{
      tableData:[],
      multipleSelection:[],
      dialogVisible:false,
      mingxi_dialogVisible:false,
      editor_dialogVisible:false,
      delete_centerDialogVisible:false,
      tableData:[{id:1,time:'2023-9-27',mark:'15',evaluate:'千亦雪'},{id:2,time:'2023-9-27',mark:'14',evaluate:'千任雪'}],
      tuoguan:['低危导管 (1分)','中危导管 (2分)','高危导管 (3分)'],
      yishi:['意识清醒 (0分)','中昏迷、深昏迷 (1分)','嗜睡、昏睡 (2分)','浅昏迷 (3分)','意识模糊 (4分)'],
      peihe:['完全配合 (1分)','部分配合 (2分)','不配合 (3分)'],

      value1:'',
      radio:'',
      radio1:'',
      radio2:'',
      radio_val:null,
      radio1_val:null,
      radio2_val:null,
      // duct_Totalpoints:0,
      options:[],
      input:'',
      value:'',
      row:''
    }
  },
  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
      }

    },
    print_pingfen(ids){
      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(ids==1){
        printJS({
          printable: 'pingfeng',
          type: 'html',
          style: style,
          scanStyles: false
        })
        this.dialogVisible=false
      }else if(ids==2){
        printJS({
          printable: 'mingxi',
          type: 'html',
          style: style,
          scanStyles: false
        })
        this.mingxi_dialogVisible=false
      }

    },
    open_xiugai(row){
      this.editor_dialogVisible=true
    },
    open_delete(row){
      this.row=row.id
      this.delete_centerDialogVisible=true
    },
    delete_daogaun(){
      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
    },
    handleCheckedCitiesChange(e){
      const ball=e
      const jiequ =(ball.split('(')[1].split('分')[0]) * 1
      if(e == this.radio){
        this.radio_val = jiequ
      }
      if(e == this.radio1){
        this.radio1_val = jiequ
      }
      if(e == this.radio2){
        this.radio2_val = jiequ
      }
    },
    daoguanhistory(){
      this.$router.push({path: '/patients/daoguan_history'})
    }
  },
  computed:{
    duct_Totalpoints(){
      return this.radio_val + this.radio1_val + this.radio2_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;
}
.diedao_content{
  background-color: white;
  width:960px;
  margin:0 auto;
  padding: 0 0 20px 0;
}
.table tr td{
  padding:5px,
}
.tables{
    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;
        .el-radio {
          color: #101010;
          cursor: pointer;
          margin-right: 30px;
          font-size: 15px !important;
        }
    }
    .start{
        text-align: center;
    }
    .bing{
        width: 150px;
        text-align: center;
    }
    .bg_color{
        background: rgb(243, 240, 240);
    }
    .jiange{
        // margin-left: 20px;
        padding-left: 10px;
        color: black;
    }
    input{
        -webkit-appearance: checkbox;
    }
}
.shuoming p{
  margin-top: 5px;
  color: rgb(167, 165, 165);
}
.zhuangui{
  margin-top: 10px;
}
.content_top{
  display: flex;
  justify-content: space-between;
}
.bottoms{
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
}
</style>