slibra-module-web/src/views/control/components/BaseChooseItem.vue

<script setup>
import { ref, computed, unref } from 'vue';
import { useMessage } from 'naive-ui';
import { BaseNumberInput } from '@/components';

import BaseButton from './BaseButton.vue';
import BaseInput from './BaseInput.vue';

const message = useMessage();

const activeIndex = ref(-1);
const inpVal = ref();
const modelValue = defineModel();

const modelType = defineModel('type');
const modelValue1 = defineModel('value1');
const modelValue2 = defineModel('value2');

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  btnGroup: {
    type: Array,
    default: false
  },
  unit: {
    type: String,
    default: ''
  },
  isDouble: {
    type: Boolean,
    default: false
  }
})

const data = ref(props.btnGroup);

const currentNumValue = computed(() => {
  const curIndex = props.btnGroup.length === 1 ? 0 : unref(activeIndex.value);
  return curIndex < 0
    ? "" : curIndex === 0
      ? modelValue.value: props.btnGroup[curIndex].value
});

const onInpCancel = (val) => {
  inpVal.value = val;
}

const onInpConfirm = (num) => {
  if (num === Infinity || num === -Infinity) {
    modelValue.value = null
    return message.warning(`${props.title}的数值填写有误, 请检查`);
  }
  modelValue.value = num;
}

const onInput = (val) => {
  modelValue1.value = val;
  modelValue2.value = val;
  // inpVal.value = val
}

const onBlur = () => {
  if (inpVal.value === Infinity || inpVal.value === -Infinity) {
    modelValue.value = null;
    inpVal.value = null;
    return message.warning(`${props.title}的数值填写有误, 请检查`);
  }
}

const changeActive = (item, index) => {
  modelType.value = index;
  modelValue1.value = index != 0 ? item.value1 : modelValue.value;
  if (props.isDouble) {
    modelValue2.value = index != 0 ? item.value2 : modelValue.value;
  }
}

const resetInpVal = () => {
  inpVal.value = null;
  activeIndex.value = -1;
}

defineExpose({
  resetInpVal
})
</script>

<template>
  <div class="base-chooseItem_view">
    <span class="label-inner">{{ title }}:</span>
    <div class="choose-inner">
      <div class="top-box">
        <ul class="btn-group space-x-[4px]">
          <BaseButton
            v-for="item, index in btnGroup"
            type="info"
            :key="index"
            :isActive="modelType === index || btnGroup.length === 1"
            @click="changeActive(item, index)"
          >
            {{ item.label }}
          </BaseButton>
        </ul>
        <ul class="flex space-x-[20px] text-center">
          <li class="w-[60px]">{{ modelValue1 }}</li>
          <li class="w-[60px]" v-if="isDouble">{{ modelValue2 }}</li>
        </ul>
      </div>

      <BaseInput
        v-show="(modelType !== undefined && !modelType) || btnGroup.length === 1"
        default-value=""
        :placeholder="'请输入' + props.title"
        :unit="unit"
        v-model="modelValue"
        @click:confirm="onInpConfirm"
        @click:cancel="onInpCancel"
        @on-input="onInput"
        @on-blur="onBlur"
      ></BaseInput>
    </div>
  </div>
</template>

<style lang="scss">
.base-chooseItem_view {
  @include flex(x, start, start);

  .label-inner {
    width: 160px;
    flex-shrink: 1;
    line-height: 28px;
  }

  .choose-inner {
    width: 100%;

    .top-box {
      @include flex(x, center, between);

      .btn-group {
        @include flex(x, center, center);
      }

      .unit {
        font-family: "D-DIN-PRO-700-Bold";
        font-weight: bold;
        font-size: 12px;
        color: #333;
      }
    }

    .bottom-box {
      position: relative;
      @include flex(x, center, between);
      margin-top: 4px;

      .inp {
        width: 100%;
        height: 28px;
        padding: 0px 56px 0 10px;
        border-radius: 4px 0px 0px 4px;
        border: 1px solid #E6EAEE;
        background: #fff;
        outline: none;
        font-size: 12px;

        &:focus {
          border: 1px solid #2454FF;
        }
      }

      .unit {
        flex-shrink: 1;
        width: 46px;
        height: 28px;
        border-radius: 0px 4px 4px 0px;
        border: 1px solid #E6EAEE;
        border-left: 0;
        background: #F0F2F5;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
        font-weight: bold;
      }

      .inp-flot_group {
        position: absolute;
        @include flex(x, center, center);
        right: 50px;
        top: 50%;
        transform: translateY(-50%);

        li {
          width: 16px;
          height: 16px;
          border-radius: 100%;
          color: #DFE2E6;
          cursor: pointer;

          svg,
          svg path {
            fill: #e0e2e6;
            stroke: #e0e2e6;
          }

          &:hover svg {
            fill: #b3c4e3;
            stroke: #b3c4e3;
          }
        }
      }
    }
  }
}
</style>