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

<template>
    <div class="patient-container">
        <patient-sidebar :id="patientID" defaultActive="5-10"></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 @click="mindhistory">历史评分</el-button>
                    </div>
                </div>

                <div>
                    <table class="table" border="1" style="width: 100%;">
                        <thead>
                            <tr>
                                <th style="width: 130px;">项目</th>
                                <th style="">症状</th>
                            </tr>
                        </thead>
                        <tbody>
                        <tr class="bg_color">
                            <td class="start">心理评估</td>
                            <td>
                                <div class="jiange">
                                    <span v-for="item in xinli" class="rightjiange">
                                        <label><input type="checkbox" name="ball" v-model="item.is_check" @click="xinliclick(item)"/>&nbsp;{{ item.label }}</label>
                                    </span>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="start">情感障碍</td>
                            <td>
                                <div class="jiange">
                                    <el-radio-group v-model="radio1">
                                        <el-radio v-for="(item,index ) in qingan" :label="item" :key="index" style="color: black;font-size: 15px;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td>                           
                        </tr>
                        <tr class="bg_color">
                            <td class="start">自伤</td>
                            <td>
                                <div  class="jiange">
                                    <el-radio-group v-model="radio2">
                                    <el-radio v-for="(item,index ) in qingan" :label="item" :key="index" style="color: black;font-size: 15px;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="start">伤人</td>
                            <td>
                                <div  class="jiange">
                                    <el-radio-group v-model="radio3">
                                        <el-radio v-for="(item,index ) in qingan" :label="item" :key="index" style="color: black;font-size: 15px;">{{ item }}</el-radio>
                                    </el-radio-group>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="content_top" style="margin-bottom: 10px ;">
                    <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="appraiser" placeholder="请选择" >
                                <el-option
                                v-for="item in optionsarr"
                                :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" @click="mindclick">确认</el-button>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import { uParseTime } from '@/utils/tools'
import PatientSidebar from '../components/PatientSidebar.vue'
export default {
  components:{
    PatientSidebar
  },
  data(){
      return{
          patientID:0,
          checkList:'',
          radio1:'',
          radio2:'',
          radio3:'',
          options:[],
          value:'',
          value1:'',
          xinli:[{label:'配合治疗',is_check:false,check:0},{label:'担忧',is_check:false,check:0},{label:'烦躁',is_check:false,check:0},
          {label:'抵触情绪',is_check:false,check:0},{label:'拒绝治疗',is_check:false,check:0},{label:'坐立不安',is_check:false,check:0},
          {label:'怪异行为',is_check:false,check:0},{label:'其他',is_check:false,check:0},],
          qingan:['有','无'],
          appraiser:'',
          optionsarr:[],
          date:this.getTime(new Date())
      }
      
  },
  methods:{
    // 历史评分
    mindhistory(){
      this.$router.push({path: '/patients/mind_history'})
    },
    xinliclick(item){
      for(let i in this.xinli){
        if(item.is_check ==false){
          if(item.label==this.xinli[i].label){
            this.xinli[i].check=1
          }
        }
      }
      console.log(this.xinli);
    },
    // 确认
    mindclick(){
      var params={
        radio1:this.radio1,
        radio2:this.radio2,
        radio3:this.radio3,
        date:this.date,
        appraiser:this.appraiser,
        optionsarr:this.optionsarr,
        xinli:this.xinli,
      }
    },
    // 转换时间
    getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
        return ""
        }else {
        return uParseTime(val, '{y}-{m}-{d}')
        }
    },
  }
}
</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;
        }
    }
    .el-radio__label{
        font-size: 15px !important;
    }
    .bottoms{
        display: inline-block;
        margin-left: 10px;
        margin-top: 5px; 
    }
</style>