elizebeth/src/xt_pages/user/history/date_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_pingfeng">打印评分</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="90"
            align="center">

          </el-table-column>
          <el-table-column
            prop="name"
            label="进食"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="洗澡"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            label="修饰"
            width=""
            align="center">

          </el-table-column>
          <el-table-column
            prop="name"
            label="穿衣"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="控制大便"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            label="控制小便"
            width=""
            align="center">

          </el-table-column>
          <el-table-column
            prop="name"
            label="如厕"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="床桌转移"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            prop="name"
            label="平地行走"
            width=""
            align="center">
          </el-table-column>
          <el-table-column
            label="上下楼梯"
            width=""
            align="center">

          </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="150"
            align="center"
            >
            <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>
        <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="">评估日期</td>
                  <td style="">进食</td>
                  <td style="">洗澡</td>
                  <td style="">修饰</td>
                  <td style="">穿衣</td>
                  <td style="">控制大便</td>
                  <td style="">控制小便</td>
                  <td style="">如厕</td>
                  <td style="">床椅转移</td>
                  <td style="">平地行走</td>
                  <td style="">上下楼梯</td>
                  <td style="">总分</td>
                  <td style="">评估人</td>
                </tr>
                <tr v-for="item in multipleSelection" >
                  <td>{{item.time}}</td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></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: 150px;">项目</th>
                    <th colspan="4">分值</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="bg_color">
                    <td class="start">进食</td>
                    <td v-for="(item,index) in jinshi" :key="index">
                        <div class="jiange">
                          <span>
                            <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                                {{ item.label }}
                            </label>
                          </span>
                        </div>
                    </td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr>
                    <td class="start">洗澡</td>
                    <td v-for="(item,index) in xizao" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value"/>&nbsp;
                              {{ item.label }}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr class="bg_color">
                    <td class="start">修饰</td>
                    <td v-for="(item,index) in xiushi" :key="index">
                        <div class="jiange">
                          <span>
                            <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                                {{item.label}}
                            </label>
                          </span>
                        </div>
                    </td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td class="start">穿衣</td>
                    <td v-for="(item,index) in chuanyi" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                  </tr>
                  <tr class="bg_color">
                    <td class="start">控制大便</td>
                    <td v-for="(item,index) in dabian" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    <td class="start">控制小便</td>
                    <td v-for="(item,index) in xioabian" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                  </tr>
                  <tr class="bg_color">
                    <td class="start">如厕</td>
                    <td v-for="(item,index) in ruce" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                  </tr>
                  <tr>
                    <td class="start">床椅转移</td>
                    <td v-for="(item,index) in chuangyi" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                  </tr>
                  <tr class="bg_color">
                    <td class="start">平地行走</td>
                    <td v-for="(item,index) in pingdi" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{item.label}}
                          </label>
                        </span>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="start">上下楼梯</td>
                    <td v-for="(item,index) in louti" :key="index">
                      <div class="jiange">
                        <span>
                          <label><input type="checkbox" name="ball" :value="item.value" />&nbsp;
                              {{ item.label }}
                          </label>
                        </span>
                      </div>
                    </td>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <div style="font-size: 16px;">打印时间：</div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="提示"
      :visible.sync="editor_dialogVisible"
      width="67%"
      >
      <div>
        <table class="table" border="1" style="width: 100%;">
            <thead>
              <tr>
                <th style="width: 150px;">项目</th>
                <th colspan="4">分值</th>
              </tr>
            </thead>
            <tbody>
              <tr class="bg_color">
                <td class="start">进食</td>
                <td v-for="(item,index) in jinshi" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox1" name="ball" :value="item.value" @click="jinshiclick($event,item.value)"/>&nbsp;
                          {{ item.label }}
                      </label>
                    </span>
                  </div>
                </td>
                <td>&nbsp;</td>
              </tr>
              <tr>
                <td class="start">洗澡</td>
                <td v-for="(item,index) in xizao" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox2" name="ball" :value="item.value" @click="xizaoclick($event,item.value)"/>&nbsp;
                          {{ item.label }}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
                <td></td>
              </tr>
              <tr class="bg_color">
                <td class="start">修饰</td>
                <td v-for="(item,index) in xiushi" :key="index">
                    <div class="jiange">
                      <span>
                        <label><input type="checkbox" class="checkbox3" name="ball" :value="item.value" @click="xiushiclick($event,item.value)"/>&nbsp;
                            {{item.label}}
                        </label>
                      </span>
                    </div>
                </td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td class="start">穿衣</td>
                <td v-for="(item,index) in chuanyi" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox4" name="ball" :value="item.value" @click="chuanyiclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr class="bg_color">
                <td class="start">控制大便</td>
                <td v-for="(item,index) in dabian" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox5" name="ball" :value="item.value" @click="dabianclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td class="start">控制小便</td>
                <td v-for="(item,index) in xioabian" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox6" name="ball" :value="item.value" @click="xiaobianclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr class="bg_color">
                <td class="start">如厕</td>
                <td v-for="(item,index) in ruce" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox7" name="ball" :value="item.value" @click="ruceclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td class="start">床椅转移</td>
                <td v-for="(item,index) in chuangyi" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox8" name="ball" :value="item.value" @click="chuangyiclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
              </tr>
              <tr class="bg_color">
                <td class="start">平地行走</td>
                <td v-for="(item,index) in pingdi" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox9" name="ball" :value="item.value" @click="pingdiclick($event,item.value)"/>&nbsp;
                          {{item.label}}
                      </label>
                    </span>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="start">上下楼梯</td>
                <td v-for="(item,index) in louti" :key="index">
                  <div class="jiange">
                    <span>
                      <label><input type="checkbox" class="checkbox10" name="ball" :value="item.value" @click="louticlick($event,item.value)"/>&nbsp;
                          {{ item.label }}
                      </label>
                    </span>
                  </div>
                </td>
                <td></td>
              </tr>
              <tr>
                <td colspan="5">
                  <div class="content_top" style="margin: 10px 0px;">
                    <div>
                        <div class="bottoms">
                        <span>总分:</span>
                        <el-input v-model="date_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>
                </td>
              </tr>
            </tbody>
        </table>
      </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_date">确 定</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:'千任雪'}],
      jinshi:[{value:10,label:'可独立进食(10分)'},
              {value:5,label:'需部分帮助(如协助夹菜等)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],
      xizao:[{value:5,label:'准备好洗澡水后可独立完成(5分)'},
              {value:0,label:'在洗澡过程中需他人帮助(0分)'}
            ],
      xiushi:[{value:5,label:'可自己独立完成(5分)'},
              {value:0,label:'需他人帮助(0分)'}
            ],
      chuanyi:[{value:10,label:'可独立完成(10分)'},
              {value:5,label:'需部分帮助(如协助系鞋带等)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],
      dabian:[{value:10,label:'可控制大便(10分)'},
              {value:5,label:'偶尔失禁(5分)'},
              {value:0,label:'完全失禁(0分)'}
            ],
      xioabian:[{value:10,label:'可控制小便(10分)'},
              {value:5,label:'偶尔失禁(5分)'},
              {value:0,label:'完全失禁(0分)'}
            ],
      ruce:[{value:10,label:'可独立完成(10分)'},
            {value:5,label:'需部分帮助(如协助整理衣裤等)(5分)'},
            {value:0,label:'需极大帮助或完全依赖他人(0分)'}
          ],
      chuangyi:[{value:15,label:'可独立完成(15分)'},
              {value:10,label:'需部分帮助(1人协助))(10分)'},
              {value:5,label:'需极大帮助(2人协助)(5分)'},
              {value:0,label:'完全依赖他人，不能坐(0分)'}
            ],
      pingdi:[{value:15,label:'可独立在平地上行走>45S，可用辅助工具(15分)'},
              {value:10,label:'需部分帮助(他人搀扶或使用辅助工具)(10分)'},
              {value:5,label:'需极大帮助(可坐轮椅自动移动))(5分)'},
              {value:0,label:'完全依赖他人(0分)'}
            ],
      louti:[{value:10,label:'可独立上下1层楼梯(可用辅助工具)(10分)'},
              {value:5,label:'需部分帮助(他人帮助)(5分)'},
              {value:0,label:'需极大帮助或完全依赖他人(0分)'}
            ],

      value:'',
      input:'',
      value1:'',
      options:[],
      jinshi_val:null,
      xizao_val:null,
      xiushi_val:null,
      chuanyi_val:null,
      dabian_val:null,
      xiaobian_val:null,
      ruce_val:null,
      chuangyi_val:null,
      paingdi_val:null,
      louti_val:null,
      row:''
    }
  },
  methods:{
    fanhui(){
      window.history.go(-1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    open_pingfeng(){
      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(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
        })

      }


    },
    open_xiugai(row){
      this.editor_dialogVisible=true
    },
    open_delete(row){
      this.row=row.id
      this.delete_centerDialogVisible=true
    },
    delete_date(){
      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
    },
    jinshiclick(e,val){
      const checkboxs=document.getElementsByClassName('checkbox1')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.jinshi_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    xizaoclick(e,val){
      const checkboxs=document.getElementsByClassName('checkbox2')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.xizao_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    xiushiclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox3')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.xiushi_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    chuanyiclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox4')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.chuanyi_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    dabianclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox5')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.dabian_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    xiaobianclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox6')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.xiaobian_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    ruceclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox7')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.ruce_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    chuangyiclick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox8')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.chuangyi_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    pingdiclick(e,val){
    //  if(e.target.checked == true){
    //   this.paingdi_val = val
    //  }else{
    //   this.paingdi_val =this.paingdi_val - val
    //  }
     const checkboxs=document.getElementsByClassName('checkbox9')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.paingdi_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
    louticlick(e,val){
     const checkboxs=document.getElementsByClassName('checkbox10')
      for(let i=0;i<checkboxs.length;i++){
        if(val==checkboxs[i].value){
          this.louti_val = val
          checkboxs[i].value
          checkboxs[i].checked=true
        }else{
          checkboxs[i].checked = false
        }
      }
    },
  },
  computed:{
    date_Totalpoints(){
      return this.jinshi_val + this.xizao_val + this.xiushi_val + this.chuanyi_val + this.dabian_val + this.xiaobian_val +
      this.ruce_val + this.chuangyi_val + this.paingdi_val + this.louti_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;
}

.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;
  }
  .content_top{
    display: flex;
    justify-content: space-between;
  }
  .bottoms{
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
  }
}
input{
  -webkit-appearance: checkbox;
}
</style>