Browse Source

表格组件完善:增加属性配置autoLoad 默认true 首次显示就自动加载数据;增加序号列支持;新的查询页码回置为1

chenwen 2 years ago
parent
commit
bda70ff3cd
1 changed files with 42 additions and 15 deletions
  1. 42 15
      src/components/crudtable/CrudTable.vue

+ 42 - 15
src/components/crudtable/CrudTable.vue

@@ -23,7 +23,7 @@
 		
 		<div class="tab-main">
 			<el-table :data="tableDatas" style="width: 100%;height:100%;"  border stripe highlight-current-row>
-			     <slot name="tabColumns"></slot>
+			     <slot name="tabColumns" :index-generate="indexGenerate"></slot>
 			</el-table>
 		</div>
 		
@@ -46,14 +46,19 @@
 		pageInfoOpts:String,
 		url:String,
 		datas:Array,
-		initWhere:Object
+		initWhere:Object,
+		autoLoad:{
+			type:Boolean,
+			default:true
+		}
 	})
 	
 	const pagination=reactive({
 		currentPage:1,
 		pageSize:props.pageSize||5,
 		totalRows:0,
-		pageCount:1
+		pageCount:1,
+		watchReload:true //通过监听器重载
 	})
 	
 	const isLoading=ref(false)
@@ -62,7 +67,7 @@
 	
 	onMounted(()=>{
 		
-		if(props.url){
+		if(props.url&&props.autoLoad){
 			query()
 		}
 		else{
@@ -72,17 +77,20 @@
 	
 	let _queryParam={}
 	
+	
+	
 	//只监听翻页、页size更改
 	watch([
 		()=>pagination.currentPage,
 		()=>pagination.pageSize,
 	],
 	   ([newcp,newpz],[oldcp,oldpz])=>{
-		/* console.log(`old ${oldcp}  ${oldpz}`)
-		console.log(`new ${newcp}  ${newpz}`)
-		console.log('翻页,改size...') */
-		//Object.assign(_queryParam,toRaw(pagination))
-		query(_queryParam)
+		
+		if(pagination.watchReload){
+			load(_queryParam)
+		}
+		
+		
 	})
 	
 	let getReqParam=(queryParams)=>{
@@ -91,14 +99,24 @@
 		
 	}
 	
-	const query=async (queryParams)=>{
-		console.log('query...')
+	const getPageInfo=()=>{
+		return toRaw(pagination)
+	}
+	
+	const query=(queryParams)=>{
+		pagination.watchReload=false
+		pagination.currentPage=1  //新的查询页码重置为1,禁止通过监听自动查询,手动查询,便于外部接收查询状态
+		return load(queryParams)
+	} 
+	
+	const load=async (queryParams)=>{
+		//console.log('query...')
 		isLoading.value=true
 		try{
-			let resp=await request({url: props.url,method: 'get',params: getReqParam(queryParams)})
+			let resp=await request({url: props.url,method: 'post',params: getReqParam(queryParams)})
 			isLoading.value=false
-			
-							
+			console.log(resp)
+			pagination.watchReload=true				
 			//pagination.currentPage=resp.currentPage
 			
 			if(resp.code===0){
@@ -116,6 +134,7 @@
 			
 		}
 		catch (e) {
+			pagination.watchReload=true
 			isLoading.value=false
 			ElMessage.error("加载数据失败");
 		    console.log(e)
@@ -124,8 +143,16 @@
 		
 	}
 	
+	const indexGenerate=(index)=>{
+		return (pagination.currentPage-1) * pagination.pageSize + index + 1
+	}
+		
+	
+	
 	defineExpose({
-		query
+		query,
+		getPageInfo
+		
 	})