140 lines
3.0 KiB
Vue
140 lines
3.0 KiB
Vue
|
<script setup>
|
||
|
|
import TopNav from "@/components/topNav.vue";
|
||
|
|
import Search from "@/components/search.vue";
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
import ListItemWrapper from "@/pages/collectPage/copmonents/listItemWrapper.vue";
|
||
|
|
import router from "@/router";
|
||
|
|
import { getSelectPage } from "@/api/collectPage";
|
||
|
|
|
||
|
|
const finished = ref(false);
|
||
|
|
const loading = ref(false);
|
||
|
|
const loadingRefresh = ref(false);
|
||
|
|
const searchValue = ref("");
|
||
|
|
const pageData = reactive({
|
||
|
|
pageSize: 10,
|
||
|
|
pageCurrent: 1,
|
||
|
|
total: 0,
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = reactive({
|
||
|
|
list: [],
|
||
|
|
});
|
||
|
|
|
||
|
|
const onSearch = (value) => {
|
||
|
|
loading.value = true;
|
||
|
|
pageData.pageCurrent = 1;
|
||
|
|
data.list = [];
|
||
|
|
getData();
|
||
|
|
};
|
||
|
|
|
||
|
|
const onRefresh = () => {
|
||
|
|
loading.value = false;
|
||
|
|
loadingRefresh.value = true;
|
||
|
|
finished.value = false;
|
||
|
|
pageData.pageCurrent = 1;
|
||
|
|
data.list = [];
|
||
|
|
getData();
|
||
|
|
};
|
||
|
|
|
||
|
|
const getData = async () => {
|
||
|
|
loading.value = true;
|
||
|
|
try {
|
||
|
|
const { total, ...ret } = pageData;
|
||
|
|
const res = await getSelectPage({ ...ret, bddMc: searchValue.value });
|
||
|
|
if (res?.records.length > 0) {
|
||
|
|
data.list = data.list.concat(res?.records) || [];
|
||
|
|
pageData.total = res?.total;
|
||
|
|
loading.value = false;
|
||
|
|
} else {
|
||
|
|
finished.value = true;
|
||
|
|
}
|
||
|
|
loadingRefresh.value = false;
|
||
|
|
} catch (error) {
|
||
|
|
loading.value = false;
|
||
|
|
loadingRefresh.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const onLoad = () => {
|
||
|
|
if (data.list.length >= pageData?.total) {
|
||
|
|
finished.value = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
pageData.pageCurrent++;
|
||
|
|
getData();
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
data.list = [];
|
||
|
|
getData();
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleTo = () => {
|
||
|
|
router.push("/collectAndAdd");
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<TopNav navTitle="必到点采集列表" :showLeft="true" />
|
||
|
|
|
||
|
|
<van-sticky>
|
||
|
|
<div class="header">
|
||
|
|
<search
|
||
|
|
placeholder="请输入部门、所属方格或必到点名称进行查询"
|
||
|
|
v-model="searchValue"
|
||
|
|
@update:modelValue="onSearch"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</van-sticky>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
|
||
|
|
<van-list
|
||
|
|
v-model:loading="loading"
|
||
|
|
:finished="finished"
|
||
|
|
finished-text=""
|
||
|
|
@load="onLoad"
|
||
|
|
offset="1"
|
||
|
|
:immediate-check="false"
|
||
|
|
>
|
||
|
|
<list-item-wrapper :list="data.list" />
|
||
|
|
|
||
|
|
<van-empty
|
||
|
|
description="暂无采集数据"
|
||
|
|
image="default"
|
||
|
|
v-if="data.list.length <= 0 && loadingRefresh === false"
|
||
|
|
/>
|
||
|
|
</van-list>
|
||
|
|
</van-pull-refresh>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer" @click="handleTo">
|
||
|
|
<van-button round native-type="submit" block type="primary">
|
||
|
|
新增必到点采集
|
||
|
|
</van-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
@import "@/assets/styles/mixin.scss";
|
||
|
|
|
||
|
|
.header {
|
||
|
|
margin-top: 13vw;
|
||
|
|
@include bg_color($background-color-theme);
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
margin-bottom: 16vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
position: fixed;
|
||
|
|
padding: 2vw;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: calc(100% - 4vw);
|
||
|
|
}
|
||
|
|
</style>
|