//3个搜索获取数据+分页
export function parkEnterPage(
address: string,
methods: string,
carNumber :string,
personName:string,
cardStatus:string,
page: number,
pageSize: number
) {
const res = instance({
url: `${address}?carNumber=${carNumber}&personName=${personName}&cardStatus=${cardStatus}&page=${page}&pageSize=${pageSize}`,
method: methods,
});
return res;
}
<template>
<div class="example-showcasess">
<div style="padding: 10px">
<!-- 搜索 -->
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="车牌号码">
<el-input v-model="formInline.carNumber" placeholder="请输入车牌号码" clearable />
</el-form-item>
<el-form-item label="车主姓名">
<el-input v-model="formInline.personName" placeholder="请输入车主姓名" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select
v-model="formInline.cardStatus"
placeholder="未选择"
clearable
style="width: 196px;"
> <el-option label="全部" value="2" />
<el-option label="可用" value="0" />
<el-option label="已过期" value="1" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="ceartch">查询</el-button>
</el-form-item>
</el-form>
</div>
<div class="addnalc">
</div>
<div class="tables">
<el-table
const
v-loading="loading"
:data="tableData"
stripe
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" />
<el-table-column prop="id" label="序号" />
<el-table-column prop="personName" label="车主名称" />
<el-table-column prop="phoneNumber" label="联系方式" />
<el-table-column prop="carNumber" label="车牌号码" />
<el-table-column prop="carBrand" label="车辆品牌" />
<el-table-column prop="totalEffectiveDate" label="剩余有效天数"></el-table-column>
<el-table-column prop="cardStatus" label="状态">
<template #default="scope">
<div>
<el-button v-if="scope.row.cardStatus == '0'" link plain size="small">
可用
</el-button>
<el-button v-else v-if="scope.row.cardStatus == '1'" plain size="small" link> 已过期 </el-button>
</div>
</template>
</el-table-column>
<el-table-column prop="address" label="操作" width="300px">
<template #default="scope">
<el-button
type="primary"
style="color: #4770ff"
link
>续费</el-button>
<el-button
type="primary"
style="color: #4770ff"
link
>查看</el-button>
<el-button
type="primary"
style="color: #4770ff"
link
>编辑</el-button
>
<!-- @click="Echo(scope.row.id)" -->
<el-button
type="primary"
style="color: #4770ff"
lin
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
<div class="demo-pagination-block">
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[5, 10, 15, 20]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { h } from "vue";
import type { EmptyObject,carNu } from "@/types/monthCard";
import { useRouter} from "vue-router"
import {
parkEnterPrise,
parkEnterPrisePage,
deleteApi,
AddApi,
EchoApiId,
searchApi,
parkEnterPage,
} from "@/constants/counterhoc";
// const inputs = ref("");
const loading = ref(true);
const form = reactive({
area: "",
floors: "",
name: "",
propertyFeePrice: "",
});
// 获取数据
const tableData = ref<EmptyObject>();
//搜索的表单
const formInline = reactive<carNu>({
carNumber: '',
personName: '',
cardStatus: '',
})
// const carNumber=ref('')
//查询 获取数据
let ceartch = async () => {
let res = await parkEnterPage(
"/parking/card/list",
"GET",
formInline.carNumber,
formInline.personName,
formInline.cardStatus,
currentPage4.value,
pageSize4.value
);
if (res.data.code == 10000) {
loading.value = false;
tableData.value = res.data.data.rows;
// console.log(tableData.value);
}
total.value = res.data.data.total;
};
const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0);
// //查询
const handleSizeChange = (val: number) => {
pageSize4.value = val;
ceartch();
};
const handleCurrentChange = (val: number) => {
currentPage4.value = val;
ceartch();
};
//获取数据
onMounted(() => {
ceartch();
});
</script>
<style scoped>
body {
margin: 0;
}
.example-showcasess {
width: 100%;
height: 100vh;
background-color: #fff;
}
.example-showcase .el-loading-mask {
z-index: 9;
}
.example-back {
background-color: #4770ff;
}
.addnalc {
width: 100%;
/* padding: 10px; */
}
.tables {
padding: 10px;
}
.demo-pagination-block {
width: 100%;
display: flex;
justify-content: flex-end;
}
</style>
