vue3前端调用后端接口实现分页,搜索

embedded/2024/9/25 19:20:37/

//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>


http://www.ppmy.cn/embedded/24855.html

相关文章

高速应急广播校园网络广播防水音柱40-80W应急广播ip音柱

高速应急广播校园网络广播防水音柱40-80W应急广播ip音柱 SV-7042是一款网络音柱&#xff0c;具有10/100M以太网接口&#xff0c;从网络接口接收网络的音频数据解码后播放。 本网络音柱一般内置4个喇叭&#xff0c;提供立体声的音频播放。本网络音柱可直接播放来自网络的音频&…

Linux:Apache和Nginx的区别

Linux&#xff1a;Apache和Nginx的区别 图示工作过程 apache使用的是进程负责到底的工作流程&#xff0c;其特点是稳定&#xff1b;nginx使用了连接复用器这个结构&#xff0c;可以实现一个进程只负责给存储单元提出需求&#xff0c;而不需要负责到底&#xff0c;这样大大提高…

Git中单独的功能特性分支是什么含义

在Git中&#xff0c;一个"功能特性分支"&#xff08;通常简称为“特性分支”&#xff09;是指从主开发分支&#xff08;比如main或master&#xff09;独立出来的分支&#xff0c;专门用于开发一个新功能、修复一个bug&#xff0c;或者进行实验性的尝试。使用特性分支…

The Log-Structured Merge-Tree (LSM-Tree) 论文阅读笔记

原论文&#xff1a;The Log-Structured Merge-Tree (LSM-Tree) LSM-Tree的简介和关键技术要点 LSM-Tree&#xff08;Log-Structured Merge-Tree&#xff09;是一种为高吞吐量读写操作优化的数据结构&#xff0c;特别适用于写入密集型的应用场景。它由Patrick O’Neil等人开发…

Go语言的切片(slice)和数组(array)有什么不同?

文章目录 数组&#xff08;Array&#xff09;示例代码数组的缺点 切片&#xff08;Slice&#xff09;示例代码切片的优点原因和解决方案 总结 在Go语言中&#xff0c;数组和切片&#xff08;slice&#xff09;都是用来存储一系列相同类型数据的集合&#xff0c;但它们之间存在一…

基于springboot新农人交流论坛 - 源码免费

1. 研究目的 设计并实现一个基于Spring Boot的新农人交流论坛&#xff0c;旨在为新农人提供一个交流平台&#xff0c;促进农业信息的分享和交流&#xff0c;推动农村产业发展和农民增收。 2. 研究要求 a. 需求分析 充分了解新农人的需求和痛点&#xff0c;设计一个符合农村…

ArkTS开发原生鸿蒙HarmonyOS短视频应用

HarmonyOS实战课程“2024鸿蒙零基础快速实战-仿抖音App开发&#xff08;ArkTS版&#xff09;”已经于今日上线至慕课网&#xff08;https://coding.imooc.com/class/843.html&#xff09;&#xff0c;有致力于鸿蒙生态开发的同学们可以关注一下。 课程简介 本课程以原生鸿蒙Ha…

Aiseesoft Data Recovery for Mac:专业数据恢复软件

Aiseesoft Data Recovery for Mac是一款高效且专业的数据恢复软件&#xff0c;专为Mac用户量身打造。 Aiseesoft Data Recovery for Mac v1.8.22激活版下载 无论是由于误删、格式化还是系统崩溃等原因导致的数据丢失&#xff0c;Aiseesoft都能帮助您快速找回。 它采用先进的扫描…