BTDK-DMS/src/components/dashboard/FormItemSelect.vue

<template>
  <div class="additem-item-select-root">
    <div class="label" :class="labelWidth" v-if="isShowLabel">
      <span v-if="props.require" class="require">*</span>
      {{ props.label }}
    </div>
    <el-select
      v-model="localValue"
      :placeholder="placeholder"
      class="selecter"
      popper-class="additem-window-select"
      :disabled="disabled"
      :value-key="valueTag ? '' : keyTag"
      @change="selectChange"
    >
      <el-option
        v-for="item in options"
        :key="item[keyTag]"
        :label="item[labelTag]"
        :value="valueTag ? item[valueTag] : item"
        :disabled="item.disable"
        class="item"
      />
    </el-select>
  </div>
</template>

<script setup lang="ts">
// interface OptionItem {
//     code: string
//     label: string
// }

interface Props {
  require?: boolean
  label?: string
  modelValue?: any
  canEdit?: boolean
  widthType?: number
  placeholder?: string
  options: any[]
  keyTag: string
  labelTag: string
  valueTag?: string
  disabled?: boolean
  isShowLabel?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  require: false,
  label: '',
  modelValue: '',
  canEdit: true,
  widthType: 0,
  options: () => [{}],
  keyTag: 'value',
  labelTag: 'label',
  valueTag: 'value',
  disabled: false,
  isShowLabel: true,
})

const emit = defineEmits(['update:modelValue'])
const localValue = ref<string | number>('')

const labelWidth = computed(() => {
  switch (props.widthType) {
    case 0:
      return 'width-normal'
    case 1:
      return ''
    case 3:
      return 'width-bzj'
    case 4:
      return 'width-psk'
    case 5:
      return 'width-pipe'
    case 6:
      return 'width-clc'
    default:
      return 'width-normal'
  }
})
const selectChange = (val: any) => {
  emit('update:modelValue', val)
}

watch(
  () => props.modelValue,
  modelValue => {
    localValue.value = modelValue
  },
  { immediate: true }
)
</script>

<style lang="scss">
// .additem-window-select {
//   .el-select-dropdown__list {
//     padding: 8px 0;
//   }
//   .el-select-dropdown__item {
//     height: 44px;
//     line-height: 44px;
//     font-size: inherit;
//   }
//   // :deep()
// }
// .el-icon svg {
//   width: inherit;
//   height: inherit;
// }
</style>

<style lang="scss" scoped>
.additem-item-select-root {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  .label {
    color: var(--label-text);
    line-height: 100%;
    text-align: right;
    // font-size: 0.18rem;
    // margin-right: 24px;

    .require {
      color: red;
    }
  }

  .selecter {
    flex-grow: 1;
    width: 0;
    height: 100%;
    line-height: 100%;
    // font-size: 0.18rem;
  }

  .width-normal {
    width: 110px;
  }

  .width-ysk {
    width: 270px;
  }

  .width-jcj {
    width: 180px;
  }

  .width-bzj {
    width: 210px;
  }

  .width-psk {
    width: 150px;
  }

  .width-pipe {
    width: 180px;
  }

  .width-clc {
    width: 150px;
  }

  :deep(.el-input__inner) {
    color: #4d4d4d;
    background-color: transparent;
    // @include border_color("ws_dialog_input");
  }
  :deep(.el-select__wrapper) {
    min-height: auto;
    height: 100%;
    font-size: inherit;
  }

  :deep(.el-input__inner::-webkit-input-placeholder) {
    color: #4d4d4d;
    // font-size: 14px;
  }

  :deep(.el-input__inner),
  :deep(.el-select .el-input),
  :deep(.select-trigger) {
    height: 100%;
    font-size: 100%;
    color: #4d4d4d;
  }

  :deep(.el-select .el-input .el-select__caret) {
    font-size: 100%;
    color: #006cff;
  }
}
</style>