import {ref, nextTick, onMounted, toValue, watch} from 'vue';
import BaseTable from '_components/comp/BaseTable.vue';
import {$axios} from '_api/axios';
function getPaginationParams(refv) {
return refv.value?.isPagination === false ? {} : refv.value?.getPagination ?? {};
}
function getMergeParams(refv, paginationParams, val) {
return {
...paginationParams,
...val,
...(refv.value?.getSort ?? {}),
...(refv.value?.getFilter ?? {})
};
}
// 参数处理
function getParams(refv, options) {
const {val, getParamsCallback} = options;
const paginationParams = getPaginationParams(refv);
const params = getMergeParams(refv, paginationParams, val);
// 存在自定义Params回调处理
if (getParamsCallback) {
return getParamsCallback(params);
}
return params;
}
function requestData(arr) {
const { request, tableLoading, getResponseCallback, tableData, total } = arr;
try {
request.then(res => {
// 存在自定义Response数据回调处理
const data = getResponseCallback ? getResponseCallback(res) : res;
tableData.value = data?.data;
total.value = Number(data?.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规范的入参对象');
}
}
function queryData(val, arr) {
const { tableLoading, baseTablePaginationRef, options, fetchData, fetchOptions, getResponseCallback, tableData, total } = arr;
tableLoading.value = true;
let request;
const params = getParams(baseTablePaginationRef, {...options, val});
// 存在自定义axios请求
if (fetchData) {
request = fetchData(params);
} else {
// 存在axios请求参数
if (fetchOptions) {
request = $axios({
...fetchOptions,
data: {
...(fetchOptions?.data ?? {}),
...params
}
});
}
}
requestData({ request, getResponseCallback, tableData, total, tableLoading });
};
/**
* 表格hook
*
* @params {object} options 配置对象
* @property {promise} fetchData 自定义axios请求
* @property {object} fetchOptions axios请求参数
* @property {function} getParamsCallback 参数处理回调
* @property {function} getResponseCallback 响应报文处理回调 @return { data, total }
* @property {Array} defaultData 默认表格数据
* @property {boolean} immediate 是否默认执行
* @property {string} defaultRadio 默认单选
* @property {string} defaultCheckbox 默认复选
*/
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, { tableLoading, baseTablePaginationRef, options, fetchData, fetchOptions, getResponseCallback, tableData, total });
});
};
// 是否默认执行
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-model:loading={tableLoading.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