mirror of https://gitee.com/xiaonuobase/snowy
1.修复了xnPageSelector只能加载前两页的bug
2.将回显查询的结果移动到最前方防止滑动监听出现问题 3.initParams应该包含原始的param参数以适应条件查询需求pull/157/head
gao
parent
3f493de7bf
commit
2dcff6f5c5
|
|
@ -14,133 +14,132 @@
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="xnPageSelector">
|
<script setup>
|
||||||
import { cloneDeep } from 'lodash-es'
|
import { watch } from 'vue'
|
||||||
import { watch } from 'vue'
|
|
||||||
|
|
||||||
const current = ref(1) // 当前页数
|
const total = ref(0) // 数据总数
|
||||||
const total = ref(0) // 数据总数
|
const initParams = ref({})
|
||||||
const initParams = ref({})
|
const options = ref([])
|
||||||
const options = ref([])
|
const spinning = ref(false)
|
||||||
const spinning = ref(false)
|
const emit = defineEmits({ change: null, 'update:value': null })
|
||||||
const emit = defineEmits({ change: null, 'update:value': null })
|
const props = defineProps({
|
||||||
const props = defineProps({
|
value: {
|
||||||
value: {
|
type: String,
|
||||||
type: String,
|
default: () => undefined
|
||||||
default: () => undefined
|
},
|
||||||
},
|
placeholder: {
|
||||||
placeholder: {
|
type: String,
|
||||||
type: String,
|
default: () => '请选择'
|
||||||
default: () => '请选择'
|
},
|
||||||
},
|
pageFunction: {
|
||||||
pageFunction: {
|
type: Function
|
||||||
type: Function
|
},
|
||||||
},
|
echoFunction: {
|
||||||
echoFunction: {
|
type: Function
|
||||||
type: Function
|
},
|
||||||
},
|
pageSize: {
|
||||||
pageSize: {
|
type: Number,
|
||||||
type: Number,
|
default: () => 10
|
||||||
default: () => 10
|
},
|
||||||
},
|
allowClear: {
|
||||||
allowClear: {
|
type: Boolean,
|
||||||
type: Boolean,
|
default: () => false
|
||||||
default: () => false
|
},
|
||||||
},
|
disabled: {
|
||||||
disabled: {
|
type: Boolean,
|
||||||
type: Boolean,
|
default: () => false
|
||||||
default: () => false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const modelValue = ref(props.value)
|
|
||||||
watch(props, (newValue) => {
|
|
||||||
modelValue.value = newValue.value
|
|
||||||
})
|
|
||||||
|
|
||||||
// 请求数据
|
|
||||||
const onPage = (param = {}) => {
|
|
||||||
if (props.pageFunction) {
|
|
||||||
initParams.value = param
|
|
||||||
initParams.value.size = props.pageSize
|
|
||||||
// 加载API
|
|
||||||
spinning.value = true
|
|
||||||
props
|
|
||||||
.pageFunction(initParams.value)
|
|
||||||
.then((data) => {
|
|
||||||
initParams.value.current = data.current
|
|
||||||
// 加载完后设置总数
|
|
||||||
total.value = data.total
|
|
||||||
options.value = data.records
|
|
||||||
queryEcho()
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
spinning.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
const queryEcho = () => {
|
})
|
||||||
// 如果带有查询的方法，那么我们去给查询回显
|
const modelValue = ref(props.value)
|
||||||
if (props.echoFunction) {
|
watch(props, (newValue) => {
|
||||||
nextTick(() => {
|
modelValue.value = newValue.value
|
||||||
if (modelValue.value) {
|
})
|
||||||
const entity = options.value.find((f) => f.id === modelValue.value)
|
|
||||||
if (!entity) {
|
// 请求数据
|
||||||
const param = {
|
const onPage = (param = {}) => {
|
||||||
idList: [modelValue.value]
|
if (props.pageFunction) {
|
||||||
}
|
initParams.value = { ...initParams.value, ...param, size: props.pageSize };
|
||||||
props.echoFunction(param).then((data) => {
|
// 加载API
|
||||||
if (data[0]){
|
spinning.value = true;
|
||||||
options.value.push(data[0])
|
props.pageFunction(initParams.value)
|
||||||
}
|
.then((data) => {
|
||||||
})
|
// 更新当前页码
|
||||||
|
initParams.value.current = data.current;
|
||||||
|
// 加载完后设置总数
|
||||||
|
total.value = data.total;
|
||||||
|
options.value = data.records;
|
||||||
|
queryEcho();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
spinning.value = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const queryEcho = () => {
|
||||||
|
// 如果带有查询的方法，那么我们去给查询回显
|
||||||
|
if (props.echoFunction) {
|
||||||
|
nextTick(() => {
|
||||||
|
if (modelValue.value) {
|
||||||
|
const entity = options.value.find((f) => f.id === modelValue.value)
|
||||||
|
if (!entity) {
|
||||||
|
const param = {
|
||||||
|
idList: [modelValue.value]
|
||||||
}
|
}
|
||||||
|
props.echoFunction(param).then((data) => {
|
||||||
|
if (data[0]){
|
||||||
|
options.value.unshift(data[0])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// change
|
||||||
|
const handleChange = (value, array) => {
|
||||||
|
modelValue.value = value
|
||||||
|
// 触发change事件
|
||||||
|
emit('change', value, array)
|
||||||
|
// 更新数据
|
||||||
|
emit('update:value', value)
|
||||||
|
}
|
||||||
|
// 滚动触发
|
||||||
|
const handlePopupScroll = (e) => {
|
||||||
|
const { target } = e
|
||||||
|
const { scrollTop, scrollHeight, clientHeight } = target
|
||||||
|
if (scrollTop + 2 + clientHeight >= scrollHeight) {
|
||||||
|
// 已经到达底部，触发分页逻辑
|
||||||
|
handlePagination()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 分页加载数据
|
||||||
|
const handlePagination = () => {
|
||||||
|
// 判断已有数量是否小于总量
|
||||||
|
if (options.value.length < total.value) {
|
||||||
|
const param = { ...initParams.value, current: initParams.value.current + 1 };
|
||||||
|
spinning.value = true;
|
||||||
|
props.pageFunction(param)
|
||||||
|
.then((data) => {
|
||||||
|
if (data.records.length > 0) {
|
||||||
|
// 更新当前页码
|
||||||
|
initParams.value.current = data.current;
|
||||||
|
// 合并新旧数据
|
||||||
|
const newOptions = [...options.value, ...data.records];
|
||||||
|
// 使用 id 去重
|
||||||
|
const uniqueOptions = newOptions.reduce((acc, cur) => {
|
||||||
|
acc[cur.id] = cur;
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
options.value = Object.values(uniqueOptions);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
.finally(() => {
|
||||||
|
spinning.value = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
// change
|
};
|
||||||
const handleChange = (value, array) => {
|
|
||||||
modelValue.value = value
|
defineExpose({
|
||||||
// 触发change事件
|
onPage
|
||||||
emit('change', value, array)
|
})
|
||||||
// 更新数据
|
|
||||||
emit('update:value', value)
|
|
||||||
}
|
|
||||||
// 滚动触发
|
|
||||||
const handlePopupScroll = (e) => {
|
|
||||||
const { target } = e
|
|
||||||
const { scrollTop, scrollHeight, clientHeight } = target
|
|
||||||
if (scrollTop + 2 + clientHeight >= scrollHeight) {
|
|
||||||
// 已经到达底部，触发分页逻辑
|
|
||||||
handlePagination()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 分页加载数据
|
|
||||||
const handlePagination = () => {
|
|
||||||
// 判断已有数量是否小于总量
|
|
||||||
if (options.value.length < total.value) {
|
|
||||||
const param = cloneDeep(initParams.value)
|
|
||||||
param.current = initParams.value.current + 1
|
|
||||||
spinning.value = true
|
|
||||||
props
|
|
||||||
.pageFunction(param)
|
|
||||||
.then((data) => {
|
|
||||||
if (data.records.length > 0) {
|
|
||||||
options.value = [...cloneDeep(options.value), ...data.records].filter((item, index, self) => {
|
|
||||||
return (
|
|
||||||
self.findIndex((f) => {
|
|
||||||
return f.id === item.id
|
|
||||||
}) === index
|
|
||||||
)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
spinning.value = false
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
onPage
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue