当前位置: 首页 > 工具软件 > jQuery iview > 使用案例 >

初识Vue.js 利用iview实现分页查询和条件查询

易星纬
2023-12-01

最近新项目前端框架用的jquery+vue+iview  起初可以说是对vue一无所知,但是,经过近十天的应用,也掌握了一些东西,今天主要梳理一下关于自己今天用到vue做查询和分页,用于分享给大家以及给自己以后作为review。废话不说,直接怼代码。

前台页面如下:

这些标签是基于vue语法封装来的。其中v-model属性用来对标签内容的数据的双向绑定,相对于传统的documnet.getElements,and  $("#id")有着更方面更快捷的效果,如果你不懂这些,可以去这里学习一下初识Vue.js

其中标签的name属性和传统标签的name属性大同小异。可能有些语法刚开始学习的童鞋看不同,这里我给大家举个栗子。

@click.native="search"

这里的意思就是给当前标签绑定一个点击事件,事件名称叫做search,这个search需要注册到指定的地方,下边的vue代码我已经给大家标红。大家可以先去看看。这里的方法一定要注册到methods下边。不然会没有反应的。

<div class="pageDiv">
						<!--<span class="redSpanLeft color666666"><span class="gthaoImg"><img src="../img/gthao.png"/></span>定期采集规则 : 每周三 0.00 ~ 24.00   <span class="color08B45F">修改</span></span>-->
						<com-page :total="pagetotal" :current="pageNo" :pagesize="pageSize"></com-page>
				</div>

这里的标签是封装好的,为了观看方便,我把它的源码复制过来给大家讲清楚。下方高能请注意。

//iviewpage再次封装
	var comPageT = '<div style="float: right;clear: both;position: absolute;right: 20px"><div style="display: inline-block;height:41px;line-height: 41px"><Page placement="top" :show-total="showtotal" :page-size="pagesize" :current="current" :total="total" @on-page-size-change="handlePageSize" @on-change="handlePage" size="small" show-elevator show-sizer></Page></div>\
          <input type="hidden"  name="pageNo" :value="pageNo" id="pageNo"/>\
          <input type="hidden" name="pageSize" :value="pageSize" id="pageSize"/></div>';
相信看完上边,大家对
<com-page>标签的有了新的认识,它就是加上两个隐藏域。

而且它的

:total  :current  :pagesize  这些属性的属性值的名称可以作为name属性来提交表单,也可以在js中接受对应的页码数据显示到页面上,可以说是功能强大。

<form id="submitform" method="post" action="xxx/tOrderRetrunApply/searchlist.do" >
	<!--内容开始-->
	<div id="app" class="content" v-cloak>
		<div class="comTitle">
			<span class="titleFont">退货退款管理</span> <span class="titleRight">
				<btn-icon ismin="true" @click.native="exportlist" ismin="true" 
					title="导出"></btn-icon>
			</span>
		</div>
		<!--检索-->
		<div class="retrievalDiv">
			<span class="retrievalSpanF">
				<div class="someFont">退货单号</div> <br /> <i-input placeholder="请输入"
					class="comLiIInput" v-model="all.returnNo" name="returnNo"></i-input>
				<!-- 	<input type="hidden" name="returnNo"  id="returnNo"  v-model="all.returnNo"/> -->
			</span> <span class="retrievalSpan">
				<div class="someFont">订单号</div> <br />
				 <i-input placeholder="请输入" class="comLiIInput" v-model="all.orderDtNo" name="orderDtNo"></i-input>
				<!--  <input type="hidden" id="orderDtNo"  v-model="all.orderDtNo" /> -->
			</span> <span class="retrievalSpan">
				<div class="someFont">退款状态</div> <br /> <i-select
					style="width:120px" v-model="all.returnStatus" name="returnStatus"> <i-option
					v-for="item in items" :value="item.value" :key="item.message">{{
				item.message }}</i-option> </i-select>
				<!-- <input type="hidden" v-model="all.returnStatus" id="returnStatus"/> -->
			</span> <span class="retrievalSpanF">
				<div class="someFont">兑换人</div> <br /> <i-input placeholder="请输入"
					class="comLiIInput" v-model="all.returnApplyUser" name="returnApplyUser" ></i-input>
					<!-- <input type="hidden" v-model="returnApplyUser" id="returnApplyUser" /> -->
			</span>
			<div class="retrievalSpan specialTime">
				<div class="someFont">退货时间</div>
				<br />
				<input type="hidden" v-model="all.time" id="time"/>
				<!--<Date-picker type="daterange"  placement="bottom-end" placeholder="Select date" style="width: 200px"></Date-picker>-->
				<com-time timeend="" timestart=""
					timeendid="starDate" timestartid="starDate" timestartname="starDate"
					timeendname="endDate" v-model='all.time'></com-time>
			</div>
			<span class="retrievalSpanF"> <btn-accept ismin="true"
					title="检索" @click.native="search" title="新增"></btn-accept>
			</span> <span class="retrievalSpan"> <btn-little title="重置"
					@click.native="reset"></btn-little>
			</span>
		</div>
		<!--列表-->
		<div class="listDataDiv">
			<div class="integralListDiv">
				<com-table :loading="false" :columns="columns2" :data="data3"
					:type="0"></com-table>
				<div class="pageDiv">
						<!--<span class="redSpanLeft color666666"><span class="gthaoImg"><img src="../img/gthao.png"/></span>定期采集规则 : 每周三 0.00 ~ 24.00   <span class="color08B45F">修改</span></span>-->
						<com-page :total="pagetotal" :current="pageNo" :pagesize="pageSize"></com-page>
				</div>
			</div>
		</div>
	</div>
	</form>

vue代码:

vue代码首先就是在<script></script>中new一个vue对象,el:表示绑定那个元素  #开头表示id  .开头表示class

component是应用其他组件,这里不再一一赘述

data属性这里放的是页面需要的值,通过v-model从data中直接取。

data3: [
					<c:forEach items="${data}" var="list">
					{
						orderDtlId:"${list.orderDtlId}",
						returnApplyId:"${list.returnApp_Id}",
						returnNo:"${list.returnNo}",
						returnServiceName:"${list.returnServiceName}",
						orderDtlNo:"${list.orderDtlNo}",
						returnApplyUser:"${list.returnApplyUser}",
						returnApplyCause:"${list.returnApplyCause}",
						returnDate:"${list.returnDate}",
						returnStatus:"${list.returnStatus}",
						pageSize:"${list.pageSize}",
						pageNo:"${list.pagenNo}"
					},
上边这段代码大家相信不陌生,但是在vue中能够使用,相信你会很惊讶。对,没错。就是这么强大,这里的data3和页面中的data3(绿色)绑定,可以实时改变数据。至于methods就是绑定所需要的方法。
	var _vue=new Vue({
			el: '#app',
			components: {
				// 引用组件
				'btnAccept': Vue.btnAccept,
				'btnMessage': Vue.btnMessage,
				'btnCancle': Vue.btnCancle,
				'btnIcon': Vue.btnIcon,
				'btnTitle': Vue.btnTitle,
				'norSelect': Vue.norSelect,
				'btnLittle': Vue.btnLittle,
				'btnArrow': Vue.btnArrow,
				'timeChoose': Vue.timeChoose,
				'checkSelect': Vue.checkSelect,
				'comPage': Vue.comPage,
				'myinput': Vue.myinput,
				'comTime': Vue.comTime,
				'comIframe': Vue.comIframe,
				'comTable': Vue.comTable
			},
			data: function data() {
				return {
				all:{
					
				},
					test1: '',
					test2: '',
					isshow: true,
					mySelect: '',
					chooseIndex: false,
					retrieval: {},
					data1: [],
					columns2: [{
						title: '退货单号',
						key: 'returnNo',
						className: "tableLeft color08B45F",
						fixed: 'left',
						isAuto: "1",
					}, {
						title: '服务名称',
						key: 'returnServiceName',
					}, {
						title: '订单号',
						key: 'orderDtlNo',
					}, {
						title: '兑换人',
						key: 'returnApplyUser',
					}, {
						title: '退款理由',
						key: 'returnApplyCause',
					}, {
						title: '退货时间',
						key: 'returnDate',
					}, {
						title: '退款状态',
					
						render: function render(h, params) {
							return h('div', [h('p', {
								"class": {
									somezfwc: true,
									isHidden: params.row.returnStatus != "0"
								}
							}, ''), h('p', {
								"class": {
									somefwwc: true,
									isHidden: params.row.returnStatus != "1"
								}
							}, ''), h('p', {
								"class": {
									somesqtk: true,
									isHidden: params.row.returnStatus != "2"
								}
							}, ''), h('p', {
								"class": {
									someStatus1: true,
									isHidden: params.row.returnStatus != "3"
								}
							}, ''), h('p', {
								"class": {
									someStatus1: true,
									isHidden: params.row.returnStatus != "4"
								}
							}, ''), h('p', {
								"class": {
									comMore4: true,
									isHidden: params.row.returnStatus != "0"
								}
							}, ' '), h('p', {
								"class": {
									comMore4: true,
									isHidden: params.row.returnStatus != "1"
								}
							}, '待处理'), h('p', {
								"class": {
									comMore4: true,
									isHidden: params.row.returnStatus != "2"
								}
							}, '已确认'), h('p', {
								"class": {
									comMore4: true,
									isHidden: params.row.returnStatus != "3"
								}
							}, '已拒绝'), h('p', {
								"class": {
									comMore4: true,
									isHidden: params.row.returnStatus != "4"
								}
							}, '已撤销')]);
						}
					}, {
						title: '退款状态',
						key: 'returnStatus',
						render: function render(h, params) {
							return h('div', [h('p', {
								"class": {
									comMore3: true,
									isHidden: params.row.returnStatus != "1"
								},
								on: {
									click: function click() {
										console.log(params);
										var returnappid=  params.row.returnApplyId;
										var orderid=  params.row.orderDtlId;
										window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/operation.do?returnAppId="+returnappid+"&orderDtlId="+orderid+"";
									}
								}
							}, '处理'), h('p', {
								"class": {
									comMore3: true,
									isHidden: params.row.returnStatus == "1"
								},
								on: {
									click: function click() {
							
								var returnappid=  params.row.returnApplyId;
								var orderid=  params.row.orderDtlId;
									  window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/operation.do?returnAppId="+returnappid+"&orderDtlId="+orderid+"";
									}
								}
							}, '详情')]);
						}
					}],
					data3: [
					<c:forEach items="${data}" var="list">
					{
						orderDtlId:"${list.orderDtlId}",
						returnApplyId:"${list.returnApp_Id}",
						returnNo:"${list.returnNo}",
						returnServiceName:"${list.returnServiceName}",
						orderDtlNo:"${list.orderDtlNo}",
						returnApplyUser:"${list.returnApplyUser}",
						returnApplyCause:"${list.returnApplyCause}",
						returnDate:"${list.returnDate}",
						returnStatus:"${list.returnStatus}",
						pageSize:"${list.pageSize}",
						pageNo:"${list.pagenNo}"
					},
					</c:forEach>
					],
					items: [{
						message: '请选择',
						value: '0'
					}, {
						message: '待处理',
						value: '1'
					}, {
						message: '已确认',
						value: '2'
					}, {
						message: '已拒绝',
						value: '3'
					},
					{
						message: '已撤销',
						value: '4'
					}],
					data2: [
					
					],
					isblue: false,
					tabIndex: 0

				};
			},
			methods: {
				changesize:function changesize(){
				},
				reset :function(){
					$("#submitform")[0].reset();
				},
				toEdit: function toEdit() {},
				save: function save() {},
				changeShow: function changeShow() {},
				changeChoose: function changeChoose(index) {
					this.chooseIndex = index;
				},
				togzt: function togzt(value) {
					console.log(value);
					this.tabIndex = value;
				},
				change: function change(value) {
					console.log(value);
				},
				search: function search(){
				var datas= this;
				var temp=this;
				var timestart=$("#timestartid").val();
				alert(timestart);
					$.ajax({
						url:"${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/searchlist.do",
						method:"post",
						dataType:"json",
						data:{
							returnNo:this.all.returnNo,
							orderDtNo:this.all.orderDtNo,
							returnStatus:this.all.returnStatus,
							returnApplyUser:this.all.returnApplyUser,
							starDate:Vue.$formatmyyear(this.all.time[0]),
							endDate:Vue.$formatmyyear(this.all.time[1]),
							pageSize:10,
							pageNo:1
						},
						success:function(page){
								var data = page.data;
								var _data =[];
						if(data){
							for(var i=0;i<data.length;i++){
							var item = data[i];
							var _dataItem={returnNo:item.RETURNNO,
												returnServiceName:item.RETURNSERVICENAME,
												orderDtlNo:item.ORDERDTLNO,
												returnApplyUser:item.RETURNAPPLYUSER,
												returnApplyCause:item.RETURNAPPLYCAUSE,
												returnDate:item.RETURNDATE,
												returnStatus:item.RETURNSTATUS	
												};
												_data[i]=_dataItem;
							}
						}
							datas.data3=_data;
							datas.pagetotal=page.totalCount;
							datas.pagecurrent = page.pageNo;
							
						},
					 error: function(XMLHttpRequest, textStatus, errorThrown){  
        alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText);  
    }  
					});
				},
				exportlist: function exportlist(){
							var returnNo1=this.all.returnNo;
							if(!returnNo1)
							{
							returnNo1=null;
							}
							var orderDtNo1=this.all.orderDtNo;
							if(!orderDtNo1)
							{
								orderDtNo1="";
							}
							var returnStatus1=this.all.returnStatus;
							if(!returnStatus1)
							{
								returnStatus1= "";
							}
							var returnApplyUser1=this.all.returnApplyUser;
							if(!returnApplyUser1)
							{
								returnApplyUser1= "";
							}
							var	starDate1=Vue.$formatmyyear(this.all.time[0]);
							if(!starDate1)
							{
								starDate1= "";
							}
							var endDate1=Vue.$formatmyyear(this.all.time[1]);
							if(!endDate1){
								endDate1= "";
							}
					window.location.href="${pageContext.request.contextPath}/orderRetrun/tOrderRetrunApply/exportlist.do?returnNo="+returnNo1+"&orderDtNo="+orderDtNo1+"&returnStatus="+returnStatus1+"&returnApplyUser="+returnApplyUser1+"&starDate="+starDate1+"&endDate="+endDate1+"";					
				},
			},
			created: function created() {},
			mounted: function mounted() {
				
			},
		});

后台代码:

这里就不多说了就是springmvc接受form参数啦,后边进行业务处理。

@ResponseBody	
   	@RequestMapping("/searchlist")
   	@SuppressWarnings("unchecked")
   	public Page searchList(TreturnOrderSearchVo entity,RedirectAttributes redirectAttributes,HttpServletRequest request)
   	{
//   		List<TreturnSearchResult> datas =  tOrderRetrunApplyService.queryBySearch(entity);
   		if(entity.getPageSize()==null){
   			entity.setPageSize(10);
   		}
   		Page querSearchByPage = tOrderRetrunApplyService.querSearchByPage(entity);
   		
		List<TreturnSearchResult> data=(List<TreturnSearchResult>) querSearchByPage.getData();
		//request.setAttribute("data", data);	
   		return querSearchByPage;
   	}






 类似资料: