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

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-11"></patient-sidebar>
        <div>
            <div class="patient-app-container advice-container app-container">
                <div class='content_top' style="width: 100%;margin-bottom: 20px;">
                    <div style="font-size: 20px;">瘙痒评估表</div>
                    <div>
                        <el-button>历史评分</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                            <tr>
                                <th style="width: 10%;">项目</th>
                                <th style="width: 57%;">结果</th>
                                <th style="width: 3%;">得分</th>
                                <th style="width: 30%;">说明</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="start">痒的部位</td>
                            <td>
                                <div class="jiange">
                                    <span v-for="item in buwei" class="rightjiange" @change="handleCheckedCitiesChange">
                                        <label><input type="checkbox" name="ball" :value="item" />&nbsp;{{ item }}</label>
                                    </span> 
                                    <label @change="handleCheckedCitiesChange"><input type="checkbox" name="ball" value="其他" />
                                        &nbsp;其他 <el-input v-model="input" style="width: 100px;"></el-input>
                                    </label>
                                </div>
                            </td>
                            <td class="start">{{checked_points}}</td>
                            <td class="saoyang">瘙痒部位：计分范围1~3分一个部位瘙痒计1分，最多得3分，选全身计3分</td>
                        </tr>
                        <tr>
                            <td class="start">痒的程度</td>
                            <td>
                                <div class="jiange">
                                    <el-radio-group v-model="radio1" @change="radiochecked">
                                        <el-radio v-for="(item,index ) in chengdu" :label="item" :key="index" style="color: black;font-size: 15PX;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td> 
                            <td class="start">{{radio1_points}}</td>
                            <td class="saoyang">瘙痒严重程度：计分范围1~5分</td>                          
                        </tr>
                        <tr>
                            <td class="start">痒的频率</td>
                            <td>
                                <div  class="jiange">
                                    <el-radio-group v-model="radio2" @change="radiochecked">
                                        <el-radio v-for="(item,index ) in pinlv" :label="item" :key="index" style="color: black;font-size: 15PX;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td>
                            <td class="start">{{radio2_points}}</td>
                            <td class="saoyang">瘙痒频率：计分范围1~5分瘙痒有过4次，每次＜10min或有1次瘙痒＞10min计1分，以此类推，一直持续计5分</td>
                        </tr>
                        <tr>
                            <td class="start">痒对睡眠的影响</td>
                            <td>
                                <div  class="jiange">
                                    <el-radio-group v-model="radio3" @change="radiochecked">
                                        <el-radio v-for="(item,index ) in yingxiang" :label="item" :key="index" style="color: black;font-size: 15PX;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td>
                            <td class="start">{{radio3_points}}</td>
                            <td class="saoyang">
                                瘙痒对睡眠的影响：计分范围0~6分无影响0分，一夜痒醒1次计2分，一夜痒醒2次计4分，一夜痒醒3次以上计6分
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <p style="margin: 20px 0px 10px 0px;">备注：总分得分范围3（轻度瘙痒）~19分（最大程度瘙痒）</p>
                <div class="content_top" style="margin-bottom: 10px ;">
                    <div>
                        <div class="bottoms">
                            <span>总分:</span>
                            <el-input v-model="pruritus_Totalpoints" placeholder="请输入内容" 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>

                
            </div>
        </div>
        
    </div>
</template>
<script>
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
    components:{
      PatientSidebar
    },
    data(){
        return{
            patientID:0,
            checkList:[],
            radio1:'',
            radio2:'',
            radio3:'',
            input:'',
            ball:'',
            radio1_points:0,
            radio2_points:0,
            radio3_points:0,
            checked_points:0,
            pruritus_Totalpoints:0,
            buwei:['躯体','上肢','下肢','头皮','全身'],
            chengdu:['不要抓(1)','要抓但没有抓痕(2)','抓出抓痕才能止痒(3)','经常抓出抓痕(4)','完全坐立不安(5)'],
            pinlv:['很少时候(1)','较少时候(2)','较多时候(3)','很多时候(4)','一直持续(5)'],
            yingxiang:['无影响(0)','一夜痒醒一次(2)','一夜痒醒两次(4)','一夜痒醒三次(6)'],
            options:[],
            value:'',
            value1:'',
        }
    },
    methods:{
      handleCheckedCitiesChange(e){
        this.ball = e.target.value
        console.log('1111111',this.ball)
        if(e.target.checked==true){
          if(e.target.value == '全身'){
            this.checked_points = 3
            this.pruritus_Totalpoints=this.pruritus_Totalpoints + this.checked_points
          }else{
           var checked =1
            this.checked_points = this.checked_points + checked
            this.pruritus_Totalpoints=this.pruritus_Totalpoints + checked
          }

          return this.pruritus_Totalpoints
        }else{
          if(e.target.value == '全身'){
            this.checked_points = 0
            this.pruritus_Totalpoints=this.pruritus_Totalpoints - 3
          }else{
           var checked =1
            this.checked_points = this.checked_points - checked
            this.pruritus_Totalpoints=this.pruritus_Totalpoints - checked
          }
          // return this.pruritus_Totalpoints
        }
      },
      radiochecked(e){
        const bal=e
        const jiequ =(bal.split('(')[1].split(')')[0]) * 1
        if(e == this.radio1 && this.ball == '' && this.radio2 =='' && this.radio3 ==''){
          this.radio1_points =jiequ
          this.pruritus_Totalpoints =jiequ
        }else if(e == this.radio1 && this.ball != '' && this.radio3 !='' && this.radio2 !=''){
          this.radio1_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
        }else if(e == this.radio1 && (this.ball != '' || this.radio3 !='' || this.radio2 !='')){
          this.radio1_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
        }

        if(e == this.radio2 && this.radio1 =='' && this.radio3 =='' && this.ball == '') {
          this.radio2_points =jiequ
          this.pruritus_Totalpoints =jiequ
        }else if(e == this.radio2 && this.radio1 !='' && this.radio3 !='' && this.ball != ''){
          this.radio2_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
        }else if(e == this.radio2 && (this.radio1 !=''|| this.radio3 =='' || this.ball != '')){
          this.radio2_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
        }

        if(e==this.radio3 && this.radio1 =='' && this.radio2 ==''&& this.ball == ''){
          this.radio3_points =jiequ
          this.pruritus_Totalpoints =jiequ
       } else if(e==this.radio3 && this.radio1 !='' && this.radio2 !='' && this.ball != ''){
          this.radio3_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
       }else if(e==this.radio3 && (this.radio1 !='' || this.radio2 !='' || this.ball != '')){
        this.radio2_points =jiequ
          this.pruritus_Totalpoints = this.pruritus_Totalpoints + jiequ
       }
      }
    }
}
</script>
<style lang="scss" scoped>
    .content_top{
      display: flex;
      justify-content: space-between; 
    }
    .table{
        border: 1px solid #DCDFE6;
        border-collapse:collapse;
        border-spacing: 0;
        thead th{
            background: #0077ff9f;
            color: white;
            text-align: center;
            height: 40px;
        }
        tbody td{
           height: 40px;
        }
        .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;
        }
        .saoyang{
             padding: 5px;
        }
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
</style>