瀏覽代碼

数值范围查询组件

liujintao 2 月之前
父節點
當前提交
2490866f23

+ 2 - 0
components.d.ts

@@ -19,10 +19,12 @@ declare module 'vue' {
     IconSelector: typeof import('./src/components/iconSelector/index.vue')['default']
     ImportButton: typeof import('./src/components/ImportButton/index.vue')['default']
     ImportExcel: typeof import('./src/components/importExcel/index.vue')['default']
+    InputNumberRange: typeof import('./src/components/inputNumberRange/index.vue')['default']
     List: typeof import('./src/components/iconSelector/list.vue')['default']
     ManyToMany: typeof import('./src/components/manyToMany/index.vue')['default']
     NoticeBar: typeof import('./src/components/noticeBar/index.vue')['default']
     PermissionButton: typeof import('./src/components/PermissionButton/index.vue')['default']
+    RangeInput: typeof import('./src/components/RangeInput/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/svgIcon/index.vue')['default']

+ 325 - 0
src/components/RangeInput/index.vue

@@ -0,0 +1,325 @@
+<template>
+	<div class="number-range-container">
+		<div :id="usePrepend ? 'prepend' : ''" :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': usePrepend }">
+			<slot name="prepend">
+				<!-- 前缀插槽 -->
+			</slot>
+		</div>
+		<div
+			class="number-range"
+			:class="{
+				'is-disabled': disabled,
+				'is-focus': isFocus,
+				'number-range-left-border-radius-0': usePrepend,
+				'number-range-right-border-radius-0': useAppend,
+			}"
+		>
+			<el-input-number
+				:disabled="disabled"
+				placeholder="最小值"
+				@blur="handleBlur"
+				@focus="handleFocus"
+				@change="handleChangeMinValue"
+				v-model="minValue_"
+				v-bind="$attrs"
+				:controls="false"
+			/>
+			<div class="to">
+				<span>{{ to }}</span>
+			</div>
+			<el-input-number
+				:disabled="disabled"
+				placeholder="最大值"
+				@blur="handleBlur"
+				@focus="handleFocus"
+				@change="handleChangeMaxValue"
+				v-model="maxValue_"
+				v-bind="$attrs"
+				:controls="false"
+			/>
+		</div>
+		<div :id="useAppend ? 'append' : ''" :class="{ 'slot-default': slotStyle === 'default', 'slot-pend ': useAppend }">
+			<slot name="append">
+				<!-- 后缀插槽 -->
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+	modelValue: {
+		type: Array,
+		default: () => [null, null], // 调用时使用v-model="[min,max]" 绑定
+	},
+	minValue: {
+		type: Number,
+		default: null, // 调用时使用v-model:min-value="" 绑定多个v-model
+	},
+	maxValue: {
+		type: Number,
+		default: null, // 调用时使用v-model:max-value="" 绑定多个v-model
+	},
+	// 是否禁用
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+	to: {
+		type: String,
+		default: '至',
+	},
+	// 精度参数 -保留小数位数
+	precision: {
+		type: Number,
+		default: 0,
+		validator(val: number) {
+			return val >= 0 && val === parseInt(String(val), 10);
+		},
+	},
+	// 限制取值范围
+	valueRange: {
+		type: Array,
+		default: () => [],
+		validator(val: []) {
+			if (val && val.length > 0) {
+				if (val.length !== 2) {
+					throw new Error('请传入长度为2的Number数组');
+				}
+				if (typeof val[0] !== 'number' || typeof val[1] !== 'number') {
+					throw new Error('取值范围只接受Number类型,请确认');
+				}
+				if (val[1] < val[0]) {
+					throw new Error('valueRange格式须为[最小值,最大值],请确认');
+				}
+			}
+			return true;
+		},
+	},
+	// 插槽样式
+	slotStyle: {
+		type: String, // default --异色背景 |  plain--无背景色
+		default: 'default',
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'update:minValue', 'update:maxValue', 'change']);
+
+const minValue_ = computed({
+	get() {
+		return props.minValue ?? props.modelValue[0] ?? null;
+	},
+	set(value) {
+		emit('update:minValue', value);
+		emit('update:modelValue', [value, maxValue_.value]);
+	},
+});
+
+const maxValue_ = computed({
+	get() {
+		return props.maxValue ?? props.modelValue[1] ?? null;
+	},
+	set(value) {
+		emit('update:maxValue', value);
+		emit('update:modelValue', [minValue_.value, value]);
+	},
+});
+
+const handleChangeMinValue = (value: number) => {
+	// 非数字和空值返回null
+	if (value === '' || value === null || isNaN(value)) {
+		emit('update:minValue', null);
+		return;
+	}
+	if (maxValue_.value === '' || maxValue_.value === null || isNaN(maxValue_.value)){
+		emit('update:minValue', value);
+		emit('update:maxValue', null);
+		return;
+	}
+	const newMinValue = parsePrecision(value, props.precision);
+
+	// min > max 交换min max
+	if (parseFloat(String(newMinValue)) > parseFloat(String(maxValue_.value))) {
+		const { min, max } = decideValueRange(Number(maxValue_.value), newMinValue);
+		updateValue(min, max);
+	} else {
+		const { min, max } = decideValueRange(newMinValue, Number(maxValue_.value));
+		updateValue(min, max);
+	}
+};
+
+const handleChangeMaxValue = (value: number) => {
+	// 非数字空返回null
+	if (value === '' || value === null || isNaN(value)) {
+		emit('update:maxValue', null);
+		return;
+	}
+	if (minValue_.value === '' || minValue_.value === null || isNaN(minValue_.value)){
+		emit('update:maxValue', value);
+		emit('update:minValue', null);
+		return;
+	}
+	console.log(value)
+	const newMaxValue = parsePrecision(value, props.precision); // 初始化数字精度
+	// max < min 交换min max
+	if (parseFloat(String(newMaxValue)) < parseFloat(String(minValue_.value))) {
+		const { min, max } = decideValueRange(newMaxValue, Number(minValue_.value));
+		updateValue(min, max);
+	} else {
+		const { min, max } = decideValueRange(Number(minValue_.value), newMaxValue);
+		updateValue(min, max);
+	}
+};
+
+// 更新数据
+const updateValue = (min: number, max: number) => {
+	emit('update:minValue', min);
+	emit('update:maxValue', max);
+	emit('update:modelValue', [min, max]);
+	emit('change', {min, max});
+};
+
+// 取值范围判定
+const decideValueRange = (min: number, max: number) => {
+	if (props.valueRange && props.valueRange.length > 0) {
+		min = min < props.valueRange[0] ? props.valueRange[0] : min > props.valueRange[1] ? props.valueRange[1] : min;
+		max = max > props.valueRange[1] ? props.valueRange[1] : max;
+	}
+	return { min, max };
+};
+
+// input焦点事件
+const isFocus = ref();
+
+const handleFocus = () => {
+	isFocus.value = true;
+};
+
+const handleBlur = () => {
+	isFocus.value = false;
+};
+
+// 处理数字精度
+const parsePrecision = (number: number, precision = 0) => {
+	return parseFloat(String(Math.round(number * Math.pow(10, precision)) / Math.pow(10, precision)));
+};
+
+// 判断插槽是否被使用
+// 组件外部使用时插入了
+// <template #插槽名 >
+// </template>
+// 无论template标签内是否插入了内容,均视为已使用该插槽
+const slots = useSlots();
+const usePrepend = computed(() => {
+	// 前缀插槽
+	return slots && slots.prepend ? true : false;
+});
+const useAppend = computed(() => {
+	// 后缀插槽
+	return slots && slots.append ? true : false;
+});
+</script>
+
+<style lang="scss" scoped>
+.number-range-container {
+	display: flex;
+	height: 100%;
+
+	.slot-pend {
+		white-space: nowrap;
+		color: var(--el-color-info);
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	#prepend {
+		padding: 0 15px;
+		box-shadow: 1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+			0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset, 0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+		border-right: 0;
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	#append {
+		padding: 0 15px;
+		box-shadow: 0 1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset,
+			0 -1px 0 0 var(--el-input-border-color, var(--el-border-color)) inset, -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
+		border-left: 0;
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	.slot-default {
+		background-color: var(--el-fill-color-light);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.number-range-left-border-radius-0 {
+		border-top-left-radius: 0 !important;
+		border-bottom-left-radius: 0 !important;
+	}
+
+	.number-range-right-border-radius-0 {
+		border-top-right-radius: 0 !important;
+		border-bottom-right-radius: 0 !important;
+	}
+
+	.number-range {
+		background-color: var(--el-bg-color) !important;
+		box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 0 2px;
+		display: flex;
+		flex-direction: row;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+		color: var(--el-input-text-color, var(--el-text-color-regular));
+		transition: var(--el-transition-box-shadow);
+		transform: translate3d(0, 0, 0);
+		overflow: hidden;
+
+		.to {
+			margin-top: 1px;
+		}
+	}
+
+	.is-focus {
+		transition: all 0.3s;
+		box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
+	}
+
+	.is-disabled {
+		background-color: var(--el-input-bg-color);
+		color: var(--el-input-text-color, var(--el-text-color-regular));
+		cursor: not-allowed;
+
+		.to {
+			height: calc(100% - 3px);
+			background-color: var(--el-fill-color-light) !important;
+		}
+	}
+}
+
+:deep(.el-input) {
+	border: none;
+}
+
+:deep(.el-input__wrapper) {
+	margin: 0;
+	padding: 0 15px;
+	background-color: transparent;
+	border: none !important;
+	box-shadow: none !important;
+
+	&.is-focus {
+		border: none !important;
+		box-shadow: none !important;
+	}
+}
+</style>

+ 10 - 3
src/views/product-manage/competitor-monitor/component/DataTable.vue

@@ -32,9 +32,16 @@ interface Parameter {
   asin: string,
   sku: string,
   platformId: string,
-  scoreNumber: string,
-  commentNumber: string,
-  displayScore: string,
+	minScore:number,
+	maxScore:number,
+	minScoreNumber:number,
+	maxScoreNumber:number,
+	minCommentNumber:number,
+	maxCommentNumber:number,
+	minAsinScore:number,
+	maxAsinScore:number,
+	minAsinCommentNumber:number,
+	maxAsinCommentNumber:number,
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');

+ 68 - 144
src/views/product-manage/competitor-monitor/index.vue

@@ -13,6 +13,7 @@ import { useTemplateRef } from 'vue';
 import { DictionaryStore } from '/@/stores/dictionary';
 import { useCustomHeight } from '/@/utils/useCustomHeight';
 import DataTable from './component/DataTable.vue';
+import numberRange from '/@/components/RangeInput/index.vue'
 
 
 defineOptions({
@@ -39,9 +40,26 @@ const formInline = reactive<any>({
   status: '',
   shop: '',
   asin: '',
-  scoreNumber: '-',
-  commentNumber: '-',
-  displayScore: '-'
+
+	minScore:null,
+	maxScore:null,
+	ScoreNumberRange:[],
+
+	minScoreNumber:null,
+	maxScoreNumber:null,
+	ScorePeopleNumberRange:[],
+
+	minCommentNumber:null,
+	maxCommentNumber:null,
+	CommentPeopleNumberRange:[],
+
+	minAsinScore:null,
+	maxAsinScore:null,
+	AsinScoreNumberRange:[],
+
+	minAsinCommentNumber:null,
+	maxAsinCommentNumber:null,
+	AsinCommentNumberRange:[],
 });
 provide('query-parameter', formInline);
 
@@ -147,157 +165,63 @@ async function resetParameter() {
 								</div>
 							</el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评分</span>
-									<el-input-number v-model="formInline.minScore" :min="0" :max="5">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxScore" :min="0" :max="5">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.ScoreNumberRange"
+									v-model:min-value="formInline.minScore"
+									v-model:max-value="formInline.maxScore"
+									:valueRange="[0, 5]"
+									precision="1"
+								>
+									<template #prepend>
+										<span class="mr-2">亚马逊评分</span>
+									</template>
+								</number-range>
 							</el-col>
 							<el-col :span="6" class="flex">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评分人数</span>
-									<el-input-number v-model="formInline.minScoreNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxScoreNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.ScorePeopleNumberRange"
+									v-model:min-value="formInline.minScoreNumber"
+									v-model:max-value="formInline.maxScoreNumber"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">亚马逊评分人数</span>
+									</template>
+								</number-range>
 							</el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评论人数</span>
-									<el-input-number v-model="formInline.minCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.CommentPeopleNumberRange"
+									v-model:min-value="formInline.minCommentNumber"
+									v-model:max-value="formInline.maxCommentNumber"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">亚马逊评论人数</span>
+									</template>
+								</number-range>
 							</el-col>
-
             </el-row>
 						<el-row :gutter="20">
 							<el-col :span="6" class="flex">
-								<div class="flex items-center">
-									<span class="mr-2">子ASIN评分人数</span>
-									<el-input-number v-model="formInline.minAsinScore" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxAsinScore" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.AsinScoreNumberRange"
+									v-model:min-value="formInline.minAsinScore"
+									v-model:max-value="formInline.maxAsinScore"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">子ASIN评分人数</span>
+									</template>
+								</number-range>
 							</el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">子ASIN评论人数</span>
-									<el-input-number v-model="formInline.minAsinCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxAsinCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.AsinCommentNumberRange"
+									v-model:min-value="formInline.minAsinCommentNumber"
+									v-model:max-value="formInline.maxAsinCommentNumber"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">子ASIN评论人数</span>
+									</template>
+								</number-range>
 							</el-col>
 						</el-row>
           </div>

+ 1 - 1
src/views/product-manage/product-list/component/DataTable.vue

@@ -93,7 +93,7 @@ const errorMsg = ref({});
 const ordering = ref('');
 const dialogVisible = ref(false);
 
-const templateType = ref('notice');
+const templateType = ref('product');
 
 onBeforeMount(() => {
   gridOptions.pagerConfig.limit = 10;

+ 10 - 3
src/views/product-manage/product-monitor/component/DataTable.vue

@@ -32,9 +32,16 @@ interface Parameter {
   asin: string,
   sku: string,
   platformId: string,
-  scoreNumber: string,
-  commentNumber: string,
-  displayScore: string,
+	minScore:number,
+	maxScore:number,
+	minScoreNumber:number,
+	maxScoreNumber:number,
+	minCommentNumber:number,
+	maxCommentNumber:number,
+	minAsinScore:number,
+	maxAsinScore:number,
+	minAsinCommentNumber:number,
+	maxAsinCommentNumber:number,
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');

+ 70 - 146
src/views/product-manage/product-monitor/index.vue

@@ -5,7 +5,7 @@
  * @Author: Cheney
  */
 
-import { ArrowDown, ArrowUp, RefreshLeft, Search } from '@element-plus/icons-vue';
+import { RefreshLeft, Search } from '@element-plus/icons-vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from './api';
@@ -13,7 +13,7 @@ import { useTemplateRef } from 'vue';
 import { DictionaryStore } from '/@/stores/dictionary';
 import { useCustomHeight } from '/@/utils/useCustomHeight';
 import DataTable from './component/DataTable.vue';
-
+import numberRange from '/@/components/RangeInput/index.vue'
 
 defineOptions({
   name: 'ProductMonitor'
@@ -41,9 +41,26 @@ const formInline = reactive<any>({
   asin: '',
   sku: '',
   platformId: '',
-  scoreNumber: '-',
-  commentNumber: '-',
-  displayScore: '-'
+
+	minScore:null,
+	maxScore:null,
+	ScoreNumberRange:[],
+
+	minScoreNumber:null,
+	maxScoreNumber:null,
+	ScorePeopleNumberRange:[],
+
+	minCommentNumber:null,
+	maxCommentNumber:null,
+	CommentPeopleNumberRange:[],
+
+	minAsinScore:null,
+	maxAsinScore:null,
+	AsinScoreNumberRange:[],
+
+	minAsinCommentNumber:null,
+	maxAsinCommentNumber:null,
+	AsinCommentNumberRange:[],
 });
 provide('query-parameter', formInline);
 
@@ -162,162 +179,69 @@ async function resetParameter() {
                 </div>
               </el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评分</span>
-									<el-input-number v-model="formInline.minScore" :min="0" :max="5">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxScore" :min="0" :max="5">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.ScoreNumberRange"
+									v-model:min-value="formInline.minScore"
+									v-model:max-value="formInline.maxScore"
+									:valueRange="[0, 5]"
+									precision="1"
+								>
+									<template #prepend>
+										<span class="mr-2">亚马逊评分</span>
+									</template>
+								</number-range>
 							</el-col>
-							<el-col :span="6" class="flex">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评分人数</span>
-									<el-input-number v-model="formInline.minScoreNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxScoreNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
+							<el-col :span="6">
+									<number-range
+										v-model="formInline.ScorePeopleNumberRange"
+										v-model:min-value="formInline.minScoreNumber"
+										v-model:max-value="formInline.maxScoreNumber"
+										:valueRange="[0, 100000000]">
+										<template #prepend>
+											<span class="mr-2">亚马逊评分人数</span>
 										</template>
-									</el-input-number>
-								</div>
+									</number-range>
 							</el-col>
             </el-row>
             <el-row :gutter="20">
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">亚马逊评论人数</span>
-									<el-input-number v-model="formInline.minCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.CommentPeopleNumberRange"
+									v-model:min-value="formInline.minCommentNumber"
+									v-model:max-value="formInline.maxCommentNumber"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">亚马逊评论人数</span>
+									</template>
+								</number-range>
 							</el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">子ASIN评分人数</span>
-									<el-input-number v-model="formInline.minAsinScore" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxAsinScore" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.AsinScoreNumberRange"
+									v-model:min-value="formInline.minAsinScore"
+									v-model:max-value="formInline.maxAsinScore"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">子ASIN评分人数</span>
+									</template>
+								</number-range>
 							</el-col>
 							<el-col :span="6">
-								<div class="flex items-center">
-									<span class="mr-2">子ASIN评论人数</span>
-									<el-input-number v-model="formInline.minAsinCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-									<span class="mx-2">~</span>
-									<el-input-number v-model="formInline.maxAsinCommentNumber" :min="0">
-										<template #decrease-icon>
-											<el-icon>
-												<ArrowDown />
-											</el-icon>
-										</template>
-										<template #increase-icon>
-											<el-icon>
-												<ArrowUp />
-											</el-icon>
-										</template>
-									</el-input-number>
-								</div>
+								<number-range
+									v-model="formInline.AsinCommentNumberRange"
+									v-model:min-value="formInline.minAsinCommentNumber"
+									v-model:max-value="formInline.maxAsinCommentNumber"
+									:valueRange="[0, 100000000]">
+									<template #prepend>
+										<span class="mr-2">子ASIN评论人数</span>
+									</template>
+								</number-range>
 							</el-col>
             </el-row>
           </div>
         </div>
         <VerticalDivider />
-        <div class="flex flex-col  items-end">
+        <div class="flex flex-col items-end">
           <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>