car-wash-java/admin-web/src/components/form/ExtDLabel.vue

<style scoped lang="scss">
.status-label {
  display: inline-block;
  padding: 5px 6px 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  height: 20px;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
  margin-top: 3px;
  width: auto;
  color: #fff;
}

.status-label-color {
  &-1 {
    border: 1px solid #FFB800;
    color: #FFB800;
  }

  &-2 {
    border: 1px solid #009688;
    color: #009688;
  }

  &-3 {
    border: 1px solid #1E9FFF;
    color: #1E9FFF;
  }

  &-4 {
    border: 1px solid #00C7D2;
    color: #00C7D2;
  }

  &-5 {
    border: 1px solid #599CDE;
    color: #599CDE;
  }

  &-6 {
    border: 1px solid #FF5722;
    color: #FF5722;
  }

  &-7 {
    border: 1px solid #eb2f96;
    color: #eb2f96;
  }

  &-8 {
    border: 1px solid #4a5055;
    color: #4a5055;
  }
}

.status-label-mode {
  &-1 {
    color: #5FB878;
  }

  &-2 {
    color: #009688;
  }

  &-3 {
    color: #1E9FFF;
  }

  &-4 {
    color: #00C7D2;
  }

  &-5 {
    color: #599CDE;
  }

  &-6 {
    color: #FF5722;
  }

  &-7 {
    color: #eb2f96;
  }

  &-8 {
    color: #4a5055;
  }
}
</style>
<template>
  <span class="status-label" :style="state.style">{{ state.text }}</span>
</template>
<script setup lang="ts" name="ExtDLabel">
import {onMounted, reactive,watch} from 'vue';
import {Session} from "/@/utils/storage";
import u from "/@/utils/u";

// const emit = defineEmits(['update:value']);

const props = defineProps({
  modelValue: {
    type: [Number, String,Boolean]
  },
  type: {
    type: String,
    require: true
  },
  dataRange: {
    type: Array<IFieldRange>
  }
})

const state = reactive({
  text: '' as string,
  style: {color: '#000000'},
  color:'#fff',
  colorList:["#FFB800","#009688","#1E9FFF","#00C7D2","#599CDE","#FF5722","#eb2f96","#4a5055"],
  dicts:{} as any
})
const setupColorStyle = (hex: string = "#000000") => {
  let hexToRgb = u.hexToRgb(hex);
  let {r, g, b} = hexToRgb;
  return {
    // 'text-shadow': `2px 2px 3px rgba(${r},${g},${b},0.2)`,
    'background-color': `rgba(${r},${g},${b},0.2)`,
    'color': `rgb(${r},${g},${b})`
  }
}

watch(()=>props.modelValue,(oldVal,newVal)=>{
  setupLabel();
})

onMounted(() => {
  setupLabel()
});

const setupLabel = ()=>{
  if (!u.isEmptyOrNull(props.dataRange)) {
    let data = props.dataRange?.find(k => k.value == props.modelValue);
    if (data) {
      let {label, color} = data;
      state.text = label;
      state.style = setupColorStyle(color);
    }
  } else {
    let dicts = [];
    const sessionDicts = Session.get("dicts");
    if (!u.isEmptyOrNull(sessionDicts)) {
      dicts =sessionDicts[`${props.type}`]
      if(u.isEmptyOrNull(dicts)){
        return "-";
      }
    }else{
      dicts =state.dicts[`${props.type}`]
      if(u.isEmptyOrNull(dicts)){
        return "-";
      }
    }
    let dict = (<Dicts>dicts).find(k => k.value == props.modelValue);

    if (dict) {
      state.text = dict.name||dict.label;
      state.style = setupColorStyle(state.colorList[dict.value%8||dict.value.length%8]);
    }else{
      return "-"
    }
  }
}
</script>