You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.4 KiB
Vue
121 lines
2.4 KiB
Vue
<template>
|
|
<view class="myTable">
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
|
|
<wd-table :data="list" :border="true">
|
|
<slot></slot>
|
|
</wd-table>
|
|
|
|
<wd-pagination v-model="query.page" :total="total" :page-size="query.pageSize" @change="handleChange" show-icon
|
|
show-message />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import kevyloading from "@/components/kevy-loading/kevy-loading";
|
|
|
|
/**
|
|
* @typedef {Object} Props
|
|
* @property {Function} apiObj - The API function to fetch data.
|
|
* @property {Object} params - Additional parameters for the API call.
|
|
*/
|
|
|
|
/**
|
|
* @typedef {Object} Query
|
|
* @property {number} page - The current page.
|
|
* @property {number} pageSize - The page size.
|
|
*/
|
|
|
|
/** @type {Props} */
|
|
const props = defineProps({
|
|
apiObj: {
|
|
type: Function,
|
|
default: () => (() => { })
|
|
},
|
|
params: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
});
|
|
|
|
/** @type {Query} */
|
|
const query = ref({
|
|
page: 1,
|
|
pageSize: 20
|
|
});
|
|
|
|
/** @type {Ref<boolean>} */
|
|
const loading = ref(false);
|
|
|
|
/** @type {Ref<number>} */
|
|
const total = ref(0);
|
|
|
|
/** @type {Ref<Array>} */
|
|
const list = ref([]);
|
|
|
|
/**
|
|
* Function to fetch data from the API.
|
|
*
|
|
* @returns {Promise<void>} - Asynchronous function.
|
|
*/
|
|
const getData = async () => {
|
|
loading.value = true;
|
|
const res = await props.apiObj({
|
|
...query.value,
|
|
...props.params
|
|
});
|
|
|
|
query.value.pageSize = res.data.pageSize;
|
|
total.value = res.data.total;
|
|
list.value = res.data.rows;
|
|
loading.value = false;
|
|
};
|
|
|
|
// Initial data fetch
|
|
getData();
|
|
|
|
/**
|
|
* Function to update data with optional parameters.
|
|
*
|
|
* @param {Object} upParams - Optional parameters for the update.
|
|
* @returns {Promise<void>} - Asynchronous function.
|
|
*/
|
|
const upData = async (upParams = {}) => {
|
|
loading.value = true;
|
|
query.value.page = 1;
|
|
query.value.pageSize = 20;
|
|
|
|
const res = await props.apiObj({
|
|
...query.value,
|
|
...props.params,
|
|
...upParams
|
|
});
|
|
|
|
query.value.pageSize = res.data.pageSize;
|
|
total.value = res.data.total;
|
|
list.value = res.data.rows;
|
|
loading.value = false;
|
|
};
|
|
|
|
/**
|
|
* Function to handle change events, updating the page and fetching data.
|
|
*
|
|
* @param {Object} event - The event object containing the new value.
|
|
*/
|
|
function handleChange({ value }) {
|
|
query.value.page = value;
|
|
getData();
|
|
}
|
|
|
|
/**
|
|
* Expose the `upData` function to the parent component.
|
|
*/
|
|
defineExpose({
|
|
upData
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss"></style>
|