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>
|
||||
</template>
|
||||
|
||||
<script setup name="xnPageSelector">
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
import { watch } from 'vue'
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
|
||||
const current = ref(1) // 当前页数
|
||||
const total = ref(0) // 数据总数
|
||||
const initParams = ref({})
|
||||
const options = ref([])
|
||||
const spinning = ref(false)
|
||||
const emit = defineEmits({ change: null, 'update:value': null })
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: () => undefined
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => '请选择'
|
||||
},
|
||||
pageFunction: {
|
||||
type: Function
|
||||
},
|
||||
echoFunction: {
|
||||
type: Function
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: () => 10
|
||||
},
|
||||
allowClear: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
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 total = ref(0) // 数据总数
|
||||
const initParams = ref({})
|
||||
const options = ref([])
|
||||
const spinning = ref(false)
|
||||
const emit = defineEmits({ change: null, 'update:value': null })
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: String,
|
||||
default: () => undefined
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: () => '请选择'
|
||||
},
|
||||
pageFunction: {
|
||||
type: Function
|
||||
},
|
||||
echoFunction: {
|
||||
type: Function
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: () => 10
|
||||
},
|
||||
allowClear: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: () => 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.push(data[0])
|
||||
}
|
||||
})
|
||||
})
|
||||
const modelValue = ref(props.value)
|
||||
watch(props, (newValue) => {
|
||||
modelValue.value = newValue.value
|
||||
})
|
||||
|
||||
// 请求数据
|
||||
const onPage = (param = {}) => {
|
||||
if (props.pageFunction) {
|
||||
initParams.value = { ...initParams.value, ...param, 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 = () => {
|
||||
// 如果带有查询的方法，那么我们去给查询回显
|
||||
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
|
||||
// 触发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 = 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
|
||||
})
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
onPage
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue