<template>
|
<a-input-group>
|
<a-input :value="beginValue" style="width: calc(50% - 15px)" placeholder="最小值" @change="handleChangeBegin" />
|
<a-input style="width: 30px; border-left: 0; pointer-events: none; background-color: #fff" placeholder="~" disabled />
|
<a-input :value="endValue" style="width: calc(50% - 15px); border-left: 0" placeholder="最大值" @change="handleChangeEnd" />
|
</a-input-group>
|
</template>
|
|
<script>
|
/**
|
* 查询条件用-数值范围查询
|
*/
|
import { ref, watch } from 'vue';
|
import { Form } from 'ant-design-vue';
|
import { propTypes } from '/@/utils/propTypes';
|
|
export default {
|
name: 'JRangeNumber',
|
props: {
|
value: propTypes.oneOfType([propTypes.string, propTypes.array]),
|
},
|
emits: ['change', 'update:value'],
|
setup(props, { emit }) {
|
const beginValue = ref('');
|
const endValue = ref('');
|
const formItemContext = Form.useInjectFormItemContext();
|
|
function handleChangeBegin(e) {
|
beginValue.value = e.target.value;
|
emitArray();
|
}
|
|
function handleChangeEnd(e) {
|
endValue.value = e.target.value;
|
emitArray();
|
}
|
|
function emitArray() {
|
let arr = [];
|
let begin = beginValue.value || '';
|
let end = endValue.value || '';
|
arr.push(begin);
|
arr.push(end);
|
emit('change', arr);
|
emit('update:value', arr);
|
formItemContext.onFieldChange();
|
}
|
|
watch(
|
() => props.value,
|
(val) => {
|
if (val && val.length == 2) {
|
beginValue.value = val[0];
|
endValue.value = val[1];
|
} else {
|
beginValue.value = '';
|
endValue.value = '';
|
}
|
}, {immediate: true}
|
);
|
|
return {
|
beginValue,
|
endValue,
|
handleChangeBegin,
|
handleChangeEnd,
|
};
|
},
|
};
|
</script>
|
|
<style scoped></style>
|
