自己的组件

数字区域选择

展示

前端

<template>
  <a-row :gutter="6">
    <a-col :span="12">
      <a-input-number
        v-model:value="startValue"
        v-bind="attr"
        @change="handleStartChange"
        placeholder="起始值"
      ></a-input-number>
    </a-col>
    <a-col :span="12">
      <a-input-number
        v-model:value="endValue"
        v-bind="attr"
        @change="handleEndChange"
        placeholder="结束值"
      ></a-input-number>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup name="SelectInputNumberArea">
import {ref, watch} from "vue";
import {useAttrs} from "@/hooks/core/useAttrs";
import {message} from "ant-design-vue";

const props = defineProps({
  value: String
})

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

const attr = useAttrs()

const startValue = ref()
const endValue = ref()


/**
 * 提交方法
 * @param value
 */
const emitValue = (value) => {
  emit('change', value);
  emit('update:value', value);
}
/**
 * 处理起始值变化的逻辑
 * @param value
 */
const handleStartChange = (value: number | string) => {
  const result: Array<number | string | null> = [value ?? null, endValue.value ?? null]
  if (!startValue.value && !endValue.value) {
    result.length = 0
  } else if (endValue.value && Number(value) > Number(endValue.value)) {
    if (startValue.value) message.error("起始值不能比结束值大", 0.5)
    startValue.value = null
    result[0] = null
  }
  emitValue(result.toString())
}
/**
 * 结束之变化放啊
 * @param value
 */
const handleEndChange = (value) => {
  // 处理结束值变化的逻辑
  const result: Array<number | string | null> = [startValue.value ?? null, value ?? null]
  if (!startValue.value && !endValue.value) {
    result.length = 0
  } else if (startValue.value && Number(value) < Number(startValue.value)) {
    if (endValue.value) message.error("结束值不能比起始值小", 0.5)
    endValue.value = null
    result[1] = null
  }
  emitValue(result.toString())
}
/**
 * 初始化方法
 */
const init = () => {
  if (props.value) {
    const numberArray = props.value.split(",")
    startValue.value = numberArray[0]
    endValue.value = numberArray[1]
  } else {
    startValue.value = ''
    endValue.value = ''
  }
}
/**
 * 监听
 */
watch(() => props.value, () => {
  init()
})
</script>

后端

if (StringUtils.isNotEmpty(userQuota.getMaxQuotaArea())) {
            String[] split = userQuota.getMaxQuotaArea().split(",");
            String one = split[0].trim();
            if (split.length == 2) {
                String two = split[1].trim();
                if (StringUtils.isEmpty(one)) {
//                    如果第一个值为空
                    queryWrapper.lambda().le(UserQuota::getMaxQuota, two);
                } else if (Double.parseDouble(one) > Double.parseDouble(two)) {
//                    如果第一个值大于第二个值
                    queryWrapper.lambda().ge(UserQuota::getMaxQuota, one).or().le(UserQuota::getMaxQuota, two);
                } else if (Double.parseDouble(one) == Double.parseDouble(two)) {
//                    如果两个值相同
                    queryWrapper.lambda().eq(UserQuota::getMaxQuota, one);
                } else {
//                    如果第一个值小于第二个值
                    queryWrapper.lambda().ge(UserQuota::getMaxQuota, one).le(UserQuota::getMaxQuota, two);
                }
            } else if (split.length == 1) {
//                如果第二个值为空
                queryWrapper.lambda().ge(UserQuota::getMaxQuota, one);
            }
        }