vue简单页面,分页插件 表格

mac2025-09-14  7

日常记录vue代码

<template> <div class="app-container"> <div style="font-size:15px">资料管理 > 订单管理</div> <hr /> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="申请批次号"> <el-input v-model="applicationNumber" placeholder="申请批次号"></el-input> </el-form-item> <el-form-item label="下单时间"> <!-- 值:{{ time1 }} --> <el-date-picker v-model="time1" type="date" placeholder="开始日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="changetime1" ></el-date-picker> <span class="demonstration"></span> <!-- 值:{{ time2 }} --> <el-date-picker v-model="time2" type="date" placeholder="结束日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" @change="changetime2" ></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" @click="queryStatus">查询</el-button> <el-button type="primary" @click="applyDownload">申请导出</el-button> </el-form-item> </el-form> <div class="app-container"> <el-table :data="tablecheckData" border style="width: 100%"> <el-table-column prop="createTime" label="申请时间" width="180"></el-table-column> <el-table-column prop="batchNumber" label="申请批次号" width="180"></el-table-column> <el-table-column prop="status" label="状态" width="180"> <template slot-scope="scope"> <span v-if="scope.row.status===0">文件生成中</span> <span v-if="scope.row.status===1">申请查询失败</span> <span v-if="scope.row.status===2">文件已生成</span> </template> </el-table-column> <el-table-column prop="filePath" label="操作"> <template slot-scope="scope"> <el-button size="mini" type="primary" @click="handleEdit(scope.row)" v-if="scope.row.status==2" ><a href="www.baidu.com" target="_blank">导出</a></el-button> </template> </el-table-column> </el-table> </div> <!-- 分页插件 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="total" ></el-pagination> </div> </template> <script> import { mapState, mapMutations } from "vuex"; export default { data() { return { // result:true, currentPage: 1, //第一页 pageSize: 10, total: 0, time1: "", time2: "", applicationNumber: "", tablecheckData: [ // { // createTime:"", // batchNumber:null, // status:"" // }, ], formInline: { user: "", region: "" }, enterpriseId: null }; }, computed: { ...mapState({ userInfo: state => state.user.userInfo }) }, created() { this.enterpriseId = this.userInfo.id; }, methods: { queryStatus() { console.log(this.applicationNumber); console.log(this.time1); console.log(this.time2); console.log(this.enterpriseId); if ( this.enterpriseId == "" || this.enterpriseId == null || this.enterpriseId == undefined ) { alert("企业ID不能为空"); } else { this.$ajax .post( "/plat/queryenterorder", { batchNumber: this.applicationNumber, enterpriseId: this.enterpriseId, createBeginTime: this.time1, createEndTime: this.time2, pageNum: this.currentPage, pageSize: this.pageSize } // ,{"pageNum":this.currentPage},{"pageSize":this.pageSize} ) .then(response => { console.log(response.data.data); this.tablecheckData = response.data.data.data; this.total = response.data.data.totalCount; // console.log(this.tablecheckData.length); // for (var i = 0; i < this.tablecheckData.length; i++) { // if (0 == this.tablecheckData[i].status) { // this.tablecheckData[i].status = "文件生成中"; // } // if (1 == this.tablecheckData[i].status) { // this.tablecheckData[i].status = "申请查询失败"; // } // if (2 == this.tablecheckData[i].status) { // this.tablecheckData[i].status = "文件已生成"; // } // } }); } }, applyDownload() { console.log(this.applicationNumber); console.log(this.enterpriseId); if ( this.applicationNumber == "" || this.applicationNumber == null || this.applicationNumber == undefined ) { alert("申请批次号不能为空"); } else { this.$ajax .post("/plat/queryOrderList", { batchNumber: this.applicationNumber, enterpriseId: this.enterpriseId }) .then(response => { console.log(response.data); if ("HANDLING" === response.data.code) { alert(response.data.errMsg); }else if("1003"===response.data.code){ alert(response.data.errMsg); } else if("1004"===response.data.code){ alert(response.data.errMsg); } else if("0000"===response.data.code){ this.queryStatus(); } // this.merchantInfo = response.data.data; // var res = response.data.data; }); } }, changetime1() {}, changetime2() {}, handleEdit(scope) { console.log(scope); }, handleSizeChange(val) { this.pageSize = val; this.queryStatus(); }, handleCurrentChange(val) { this.currentPage = val; this.queryStatus(); } } }; </script> <style lang="scss" scoped> .app-container { padding-top: 0px; } </style>
最新回复(0)