import {ref, nextTick, onMounted, toValue, watch} from 'vue';
import BaseTable from '_components/comp/BaseTable.vue';
import {$axios} from '_api/axios';
function getParams(ref, options) {
const {val, getParamsCallback} = options;
const paginationParams = ref.value?.isPagination === false ? {} : ref.value?.getPagination ?? {};
const params = {
...paginationParams,
...val,
...(ref.value?.getSort ?? {}),
...(ref.value?.getFilter ?? {})
};
if (getParamsCallback) {
return getParamsCallback(params);
}
return params;
}
function useTableHook(
options = {fetchData, fetchOptions, getParamsCallback, getResponseCallback, defaultData: [], immediate: false, defaultRadio, defaultCheckbox: []}
) {
const {defaultData = [], immediate = false, fetchData, fetchOptions, getResponseCallback, defaultRadio, defaultCheckbox = []} = options;
const tableData = ref([].concat(toValue(defaultData) || []));
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(defaultData?.length || 0);
const radio = ref(toValue(defaultRadio) || null);
const checkbox = ref(toValue(defaultCheckbox) || null);
const baseTablePaginationRef = ref(null);
const tableLoading = ref(true);
const queryTableData = (val = {}) => {
nextTick(() => {
queryData(val);
});
};
const queryData = (val = {}) => {
tableLoading.value = true;
let request;
const params = getParams(baseTablePaginationRef, {...options, val});
if (fetchData) {
request = fetchData(params);
} else {
if (fetchOptions) {
request = $axios({
...fetchOptions,
data: {
...(fetchOptions?.data ?? {}),
...params
}
});
}
}
try {
request
.then(res => {
const {data, total} = getResponseCallback ? getResponseCallback(res) : res;
tableData.value = data;
total.value = total || 0;
})
.catch(error => {
total.value = 0;
tableData.value = [];
})
.finally(() => {
tableLoading.value = false;
});
} catch (error) {
tableLoading.value = false;
throw new Error('【fetchData、fetchOptions都未定义或类型错误】fetchData:函数, 返回类型为Promise; fetchOptions:一个符合axios规范的入参对象');
}
};
watch(
() => tableLoading.value,
val => {
if (baseTablePaginationRef.value) {
baseTablePaginationRef.value.tableLoading = val;
}
},
{immediate: true, deep: true}
);
if (immediate) {
queryTableData();
} else {
onMounted(() => {
tableLoading.value = false;
});
}
return {
BaseTablePagination: (props, context) => {
return (
<BaseTable
{...context.attrs}
ref={baseTablePaginationRef}
total={total.value}
data={tableData.value}
v-model:currentPage={currentPage.value}
v-model:pageSize={pageSize.value}
v-model:radio={radio.value}
v-model:checkbox={checkbox.value}
v-slots={context.slots}
onPaginationChange={v => {
queryTableData();
}}
onSortChange={v => {
baseTablePaginationRef.value.updatePagination();
queryTableData();
}}
onFilterChange={v => {
baseTablePaginationRef.value.updatePagination();
queryTableData();
}}
></BaseTable>
);
},
queryTableData,
updatePagination: val => baseTablePaginationRef.value.updatePagination(val),
updateCurrentPage: val => baseTablePaginationRef.value.updateCurrentPage(val),
updatePageSize: val => baseTablePaginationRef.value.updatePageSize(val),
updateRadio: val => baseTablePaginationRef.value.updateRadio(val),
updateCheckbox: val => baseTablePaginationRef.value.updateCheckbox(val),
baseTablePaginationRef,
currentPage,
pageSize,
tableData,
total,
radio,
checkbox,
tableLoading
};
}
export default useTableHook;
console