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

<template>
  <!-- 排班表填充内容 -->
    <div >
      <div>
          <span :class='modeColor(scheduleDetail.mode_name)'>{{scheduleDetail.patient}}</span><br/>
          <template v-if="schedulMode">
            <span v-if="scheduleDetail.mode_name.length>0"  :class='modeColor(scheduleDetail.mode_name)' >{{'('+scheduleDetail.mode_name+')'}}</span>
          </template>
          <template v-if="schedulFlag">
            <br/><span >{{scheduleDetail.dialysis_machine_name}}</span>
          </template>
      </div>
    </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:"",
              }
          },
      },
      schedulFlag:{
        type:Boolean,
        default:false
      },
      schedulMode:{
        type:Boolean,
        default:true
      }
  },
  data() {
    return {

    }
  },

  methods:{
        modeColor(name){
            if(name == 'HD'){

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

<style lang="scss" scoped>
.modeRed{
  color:#ee0ad0;
}
.modePurple{
  color: #53b86e;
}
.modephf{
  color:rgb(224, 80, 80)
}
</style>