Vue_New/src/xt_pages/workforce/components/ScheduleItem.vue

<template>
    <div >
        <el-tooltip placement="right" :disabled="scheduleDetail.patient.length>0?false:true" >
            <div slot="content">
                {{scheduleDetail.patient}}
                <br/>
                <span v-if="scheduleDetail.mode_name.length>0">({{scheduleDetail.mode_name}})</span>
              <span >{{scheduleDetail.dialysis_machine_name}}</span>

            </div>
            <div>
                <span :class='modeColor(scheduleDetail.mode_name)'>{{scheduleDetail.patient}}</span><br/>
                <span v-if="scheduleDetail.mode_name.length>0" :class='modeColor(scheduleDetail.mode_name)'>({{scheduleDetail.mode_name}})</span>
              <span >{{scheduleDetail.dialysis_machine_name}}</span>

            </div>
        </el-tooltip>
    </div>
</template>

<script>
export default {
  name: "scheduleItem",
  props:{
      scheduleDetail:{
          type:Object,
          default: function (){
              return {
                mode_id:0,
                mode_name:'',
                patient_id:0,
                patient:"",
                dialysis_machine_name:"",
              }
          },
      },
  },
  methods:{
        modeColor(name){
            if(name == 'HD'){

            }else if(name == 'HDF'){
                return 'modeRed'
            }else if(name == 'HD+HP'){
                return 'modePurple'
            }
        }
  }
};
</script>

<style lang="scss" scoped>
.modeRed{
  color:#ed5555;
}
.modePurple{
  color: #53b86e;
}
</style>