1.在hook文件下创建usePageReq.js,封装代码如下(代码是之前一个博主那看到的,忘记是那个了,根据我的需求稍作改动)
import { ref, reactive, toRefs, watch } from 'vue'
export const usePageReq = (api, otherParams) => {
// 表格的loading(不需要可以删除)
const tableLoading = ref(true)
// 分页的页数和一页的大小
const pageParams = reactive({
PageNumber: 1,
MaxResultCount: 15
})
const datas = ref([])
const totalCount = ref() //数据的总条数
let apiOtherParams =ref({})
const getPage = (serchParms) => {
// 处理传过来的参数
Object.keys(otherParams).forEach(key => {
let targeParams = otherParams[key]
if(typeof targeParams === 'object') {
Object.assign(apiOtherParams.value, targeParams)
} else {
// 日期参数date的话,而且数组说明是dateRange,参数才分为start和end, date:[]
if(key === 'date' && Array.isArray(targeParams)) {
apiOtherParams.value['start'] = targeParams[0]
apiOtherParams.value['end'] = targeParams[1]
} else {
apiOtherParams.value[key] = targeParams
}
}
})
// 当页面有查询寻求时,传入的查询参数
const realSerchParms = serchParms ? { ...serchParms } :''
api({
//请求参数,这里取决于你的接口需要什么参数
...pageParams, //分页
...apiOtherParams.value, // 请求时除了分页以外的参数
...realSerchParms // 查询参数
}).then(res=> {
// 这里接收你的请求结果,有什么数据需要获取都写在这里
datas.value = res.items
tableLoading.value=false
totalCount.value=Number(res.totalCount) //后端返回给我的总数是字符串,是数字类型的可以不转换
})
}
watch(() =>otherParams, (newVal) => {
if (newVal) {
getPage()
}
}, { immediate: true, deep: true })
// 刷新表格再次请求
const search = () => {
window.scrollTo(0, 0)
pageParams.PageNumber = 1
getPage()
}
// 对外面返回你的参数,想返回什么写什么
return {
datas,
pageParams,
getPage,
search,
totalCount,
tableLoading
}
}
2.table组件封装代码
<template>
<a-table
class="tableList"
:rowKey="(record) => record.id"
:columns="columns"
:data-source="datas"
:pagination="false"
:loading="tableLoading"
size="small"
>
<template #bodyCell="{ column,index,record }">
<template v-if="column.key === 'index'">
{{`${( pageParams.PageNumber - 1) * pageParams.MaxResultCount + index +1}`}}
</template>
<template v-if="column.key === 'action'">
<slot name='tableBtns' :row='record'></slot>
<a href="javascript:;" @click="del(record)" v-if="delBut" class="delBtn">删除</a>
</template>
</template>
</a-table>
<div class="paginationBox">
<a-pagination
size="small"
:defaultPageSize="15"
:page-size-options="pageSizeOptions"
v-model:current="pageParams.PageNumber"
:total="totalCount"
:show-total="total => `共 ${totalCount} 条`"
show-size-changer
@change="change"
/>
</div>
</template>
<script setup>
import { usePageReq } from '../../hook/usePageReq.js'
import { defineComponent, onMounted, reactive, ref,h } from 'vue'
import { message, Modal } from "ant-design-vue";
const props = defineProps({
// 表格配置项
columns: {
type: Array,
default: () => []
},
// 是否展示删除按钮
delBut:{
type: Boolean,
default: true
},
// 删除接口
delApi:{
type: Function,
default: () => {}
},
// 请求数据的接口
api: {
type: Function,
default: () => {}
},
// 接口参数
apiParams: {
type: Object,
default: () => {}
},
// 表格X轴的滚动距离
scrollX: {
type: Number,
default: 2500
},
// 表格Y轴的滚动距离
scrollY: {
type: Number,
default: 450
},
})
const { datas, pageParams, getPage ,totalCount ,tableLoading} = usePageReq(props.api,props.apiParams)
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const change = (cur,max)=>{
if (pageParams.MaxResultCount!=max) {
pageParams.PageNumber=1
pageParams.MaxResultCount=max
}else{
pageParams.PageNumber=cur
}
getPage()
}
const del = async (params)=>{
Modal.confirm({
title: h("div", {}, "是否要删除【", [
h("b", { style: "color: red" }, params.name),
h("span", "】?"),
]),
okText: "确定",
cancelText: "取消",
closable:true,
onOk: () => {
props.delApi({ id: params.id })
.then((res) => {
message.success("删除成功!")
pageParams.PageNumber =
datas.value.length == 1 && pageParams.PageNumber != 1
? pageParams.PageNumber - 1
: pageParams.PageNumber;
getPage();
})
.catch((err) => {
console.log(err);
});
},
});
}
onMounted(()=>{
// getPage()
})
defineExpose({
datas,
pageParams,
getPage,
totalCount
})
</script>
<style>
</style>
3.在组件中使用
<template>
<div>
<div class="search_box">
//查询组件
<SearchItem
:searchitem="searchitem"
:submitFunc="submitFunc"
ref="search"
></SearchItem>
</div>
<div class="table_box">
<div class="button_box">
<a-button
class="box_right_header_btn"
type="primary"
@click="creatformfunc('add')"
><plus-outlined />添加</a-button
>
</div>
<tableCom :columns="columns" :api="getStore" :apiParams="otherParmas" ref="tableComRef" :delApi="delStore">
<template #tableBtns="{ row }">
<a href="javascript:;" @click="edit(row)">修改</a>
<a-divider type="vertical" />
</template>
</tableCom>
</div>
</div>
</template>
<script setup>
import { usePageReq } from '@/hook/usePageReq.js'
import { getStore,getOutin,delOutin,delStore} from "@/api/repairsManage";
import { defineComponent, reactive,ref,h } from "vue";
import tableCom from "@/components/table/index.vue";
import { useHandleData } from "@/hook/useHandleData.js"
import SearchItem from "@/components/SearchItem/index.vue";
import { message, Modal } from "ant-design-vue";
import dayjs from "dayjs";
const columns = ref([
{
title: "序号",
dataIndex: "index",
key: "index",
align: "center",
width: 60,
},
{
title: "仓库名称",
dataIndex: "name",
key: "name",
width: 250,
ellipsis:true,
},
{
title: "操作",
key: "action",
align: "center",
fixed: "right",
width: 120,
},
]);
const otherParmas = ref({}); // 刚开始请求时,除了分页之外的其他的接口
const tableComRef = ref()
const searchParams = ref() //搜索参数
const searchitem = ref([
{
type: "input",
label: "仓库名称",
val: "",
selectList: [],
placeholder: "请输入仓库名称",
queryName: "name",
allowClear: null,
rules: [],
},
]);
const submitFunc =async (from)=>{ //点击查询按钮
searchParams.value = {
SearchText: from.name,
};
tableComRef.value.pageParams.PageNumber=1
tableComRef.value.getPage(searchParams.value)
}
const edit = (row)=>{
console.log(row);
}
</script>
<style>
</style>