通用分页表格组件封装

public/test/menu.json

@@ -34,7 +34,8 @@
 			},
 			{
 				"menuId":"5-1",
-				"menuName":"井站基础数据"
+				"menuName":"参数管理",
+				"menuLink":"sys/ParamMgr.vue"
 			},
 			{
 				"menuId":"5-2",

public/test/tableDatas.json

@@ -0,0 +1,71 @@
+{
+	"totalRows":8,
+	"pageCount":1,
+	"currentPage":2,
+	"data":[
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		},
+		{
+		  "date": "2016-05-03",
+		  "name": "Tom",
+		  "state": "California",
+		  "city": "Los Angeles",
+		  "address": "No. 189, Grove St, Los Angeles",
+		  "zip": "CA 90036"
+		}
+	]
+}

src/components/Header.vue

@@ -104,7 +104,7 @@
 	};
 	
 	const menuClickHandle = (item) =>{
-		console.log(item)
+		//console.log(item)
 		store.currentMenu=item
 	}
 	

src/components/crudtable/CrudTable.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="tab-container">
+		<div class="tab-toolbar">
+			<div class="tool-group">
+				<el-button-group>
+					<slot name="toolGroup"></slot>
+				</el-button-group>
+			</div>
+			<div style="flex:1"></div>
+			<el-icon class="is-loading" v-show="isLoading"><loading/></el-icon>
+			<el-pagination
+			      v-model:current-page="pagination.currentPage"
+			      v-model:page-size="pagination.pageSize"
+			      :page-sizes="pageSizeOpts"
+			      :small="false"
+			      :disabled="false"
+			      :background="false"
+			      :layout="pageInfoOpts"
+			      :total="pagination.totalRows"
+			      
+			/>
+		</div>
+		
+		<div class="tab-main">
+			<el-table :data="tableDatas" style="width: 100%;height:100%;"  border stripe highlight-current-row>
+			     <slot name="tabColumns"></slot>
+			</el-table>
+		</div>
+		
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref,onMounted,toRaw,watch} from 'vue'
+	import request from '../../utils/request'
+	import { ElMessage } from "element-plus"
+	
+	
+	
+	const props=defineProps({
+		pageSize:Number,
+		pageSizeOpts:{
+			type:Array,
+			default:[5,20,50,100]
+		},
+		pageInfoOpts:String,
+		url:String,
+		datas:Array,
+		initWhere:Object
+	})
+	
+	const pagination=reactive({
+		currentPage:1,
+		pageSize:props.pageSize||5,
+		totalRows:0,
+		pageCount:1
+	})
+	
+	const isLoading=ref(false)
+	const tableDatas=ref([])
+	
+	
+	onMounted(()=>{
+		
+		if(props.url){
+			query()
+		}
+		else{
+			tableDatas.value=props.datas
+		}
+	})
+	
+	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)
+	})
+	
+	let getReqParam=(queryParams)=>{
+		
+		return Object.assign({},props.initWhere,toRaw(pagination),queryParams)
+		
+	}
+	
+	const query=async (queryParams)=>{
+		console.log('query...')
+		isLoading.value=true
+		try{
+			let resp=await request({url: props.url,method: 'get',params: getReqParam(queryParams)})
+			isLoading.value=false
+			tableDatas.value=resp.data
+							
+			//pagination.currentPage=resp.currentPage
+			pagination.totalRows=resp.totalRows
+			pagination.pageCount = resp.pageCount
+			_queryParam=queryParams||{}
+			
+			return 0
+		}
+		catch (e) {
+			isLoading.value=false
+			ElMessage.error("加载数据失败");
+		    console.log(e)
+			return -1
+		}
+		
+	}
+	
+	defineExpose({
+		query
+	})
+	
+	
+</script>
+
+<style scoped>
+	.tab-container{
+		height:100%;
+	}
+	.tab-toolbar{
+		height:50px;
+		padding:10px 10px;
+		box-sizing: border-box;
+		background-color: #f4f4f4;
+		display: flex;
+		justify-content:space-between;
+		border:1px solid #e9e9e9;
+		
+	}
+	
+	.tab-toolbar .is-loading{
+		margin:8px 20px;
+	}
+	
+	.tab-main{
+		height: calc(100% - 50px);
+	}
+	
+	
+</style>

src/components/crudtable/index.js

@@ -0,0 +1 @@
+import request from '../utils/request';

src/pages/Home.vue

@@ -35,10 +35,14 @@
 	
 	
    watch(currentMenu,async(newMenu,oldMenu) => {
-	  console.log('menu click')
+	  if(!newMenu||!newMenu.menuLink){
+		  return
+	  }
 	  loadMenuPage(newMenu.menuLink).then(component => {
 		   newMenu["content"]=markRaw(component.default)
 		   store.addTab(newMenu)
+	   }).catch(e=>{
+		   console.log(e)
 	   })
 	   
 	   

src/pages/sys/ParamMgr.vue

@@ -0,0 +1,103 @@
+<template>
+	<div class="qpage">
+		<el-form :inline="true" :model="queryForm" class="query-form-inline">
+		  <el-form-item label="">
+		    <el-input v-model="queryForm.user" placeholder="请输入用户名关键字" />
+		  </el-form-item>
+		  
+		  <el-form-item>
+		    <el-button type="primary" :loading="isQuerying" @click="queryHandle">检索</el-button>
+		  </el-form-item>
+		</el-form>
+		
+		<div class="qpage-body">
+			<CrudTable 
+			ref="crudTable"
+			page-info-opts="total, prev, pager, next,sizes"
+			url="./test/tableDatas.json"
+			:initWhere="{a:1,b:2}"
+			:pageSize="21"
+			>
+			  <template #toolGroup>
+				  <el-button type="primary" icon="plus">新增</el-button>
+				  <el-button type="success" icon="document">导出</el-button>
+				  <el-button type="warning" icon="delete">批量删除</el-button>
+			  </template>
+			  <template #tabColumns>
+				  <el-table-column fixed prop="date" label="Date" width="150" />
+				  <el-table-column prop="name" label="Name" width="120" />
+				  <el-table-column prop="state" label="State" width="120" />
+				  <el-table-column prop="city" label="City" width="320" />
+				  <el-table-column prop="address" label="Address" width="600" />
+				  <el-table-column prop="zip" label="Zip" width="160" fixed="right">
+				  					<template #default="scope">
+				  						<div class="tool-column">
+				  							<el-button type="primary" icon="edit" size="small" @click="editHandle">编辑</el-button>
+				  							
+				  							<el-button type="warning" icon="delete" size="small">删除</el-button>
+				  						</div>
+				  					    
+				  					</template>
+				  </el-table-column>
+			  </template>
+				
+			</CrudTable>
+		</div>
+		
+	</div>
+</template>
+
+<script setup>
+	import {reactive,ref} from 'vue'
+	import CrudTable from "../../components/crudtable/CrudTable.vue"
+	
+	const crudTable=ref(null)
+	
+	const isQuerying=ref(false)
+	
+	const queryForm = reactive({
+	  user: ''
+	})
+	
+	const queryHandle=()=>{
+		isQuerying.value=true
+		crudTable.value.query(queryForm).then(resp=>{
+			console.log(resp)
+			isQuerying.value=false
+		})
+		
+	}
+	
+	const editHandle=()=>{
+		alert('table edit');
+	}
+	
+	
+	
+	
+	
+	
+	
+</script>
+
+<style scoped>
+	
+	.qpage{
+		padding: 10px;
+		box-sizing: border-box;
+		height: 100%;
+		
+	}
+	.query-form-inline{
+		margin:0 0px;
+	}
+	
+	.qpage-body{
+		height: calc(100% - 50px);
+	}
+	
+	.tool-column{
+		display: flex;
+		justify-content: space-around;
+	}
+</style>

src/pages/sys/User.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="qpage">
 	 <el-form :inline="true" :model="formInline" class="query-form-inline">
-	   <el-form-item label="用户名">
+	   <el-form-item label="">
 	     <el-input v-model="formInline.user" placeholder="请输入用户名关键字" />
 	   </el-form-item>
 	   
@@ -11,29 +11,50 @@
 	 </el-form>
 	 
 	 <div class="qpage-body">
-		<el-table :data="tableData" style="width: 100%;height:100%;"  border stripe>
-		     <el-table-column fixed prop="date" label="Date" width="150" />
-		     <el-table-column prop="name" label="Name" width="120" />
-		     <el-table-column prop="state" label="State" width="120" />
-		     <el-table-column prop="city" label="City" width="320" />
-		     <el-table-column prop="address" label="Address" width="600" />
-		     <el-table-column prop="zip" label="Zip" width="120" />
-		</el-table>
+		 <div class="qpage-toolbar">
+				<div class="tool-group">
+					 <el-button-group>
+						 <el-button type="primary" icon="plus">新增</el-button>
+						 <el-button type="success" icon="document">导出</el-button>
+						 <el-button type="warning" icon="delete">批量删除</el-button>
+					 </el-button-group>
+					
+				</div>
+		 		 <el-pagination
+		 		       v-model:current-page="currentPage4"
+		 		       v-model:page-size="pageSize4"
+		 		       :page-sizes="[100, 200, 300, 400]"
+		 		       :small="false"
+		 		       :disabled="false"
+		 		       :background="false"
+		 		       layout="total, prev, pager, next,sizes"
+		 		       :total="400"
+		 		      
+		 		     />
+		</div>
+		<div class="qpage-table">
+			<el-table :data="tableData" style="width: 100%;height:100%;"  border stripe highlight-current-row>
+			     <el-table-column fixed prop="date" label="Date" width="150" />
+			     <el-table-column prop="name" label="Name" width="120" />
+			     <el-table-column prop="state" label="State" width="120" />
+			     <el-table-column prop="city" label="City" width="320" />
+			     <el-table-column prop="address" label="Address" width="600" />
+			     <el-table-column prop="zip" label="Zip" width="160" fixed="right">
+					<template #default="scope">
+						<div class="tool-column">
+							<el-button type="primary" icon="edit" size="small">编辑</el-button>
+							
+							<el-button type="warning" icon="delete" size="small">删除</el-button>
+						</div>
+					    
+					</template>
+				 </el-table-column>
+			</el-table>
+		</div>
+		
 	 </div>
 	 
-	 <div class="qpage-foot">
-		 <el-pagination
-		       v-model:current-page="currentPage4"
-		       v-model:page-size="pageSize4"
-		       :page-sizes="[100, 200, 300, 400]"
-		       :small="false"
-		       :disabled="false"
-		       :background="false"
-		       layout="total, sizes, prev, pager, next, jumper"
-		       :total="400"
-		      
-		     />
-	 </div>
+	 
  </div>
   
 </template>
@@ -174,9 +195,26 @@ const tableData = [
 	}
 	
 	.qpage-body{
-		height: calc(100% - 100px);
+		height: calc(100% - 50px);
+	}
+	
+	.qpage-toolbar{
+		height: 50px;
+		padding:10px 10px;
+		box-sizing: border-box;
+		background-color: #f4f4f4;
+		display: flex;
+		justify-content:space-between;
+		border:1px solid #e9e9e9;
+	}
+	.qpage-table{
+		height: calc(100% - 50px);
 	}
-	.qpage-foot{
-		padding:10px 0;
+	
+	.tool-column{
+		display: flex;
+		justify-content: space-around;
 	}
+	
+	
 </style>

src/store/home.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-
+import { markRaw} from "vue"
 export const useHomeStore = defineStore('home', {
   state: () => {
     return {
@@ -21,15 +21,20 @@ export const useHomeStore = defineStore('home', {
 		 this.menuTabs.push({
 			title:menu.menuName,
 			name:menu.menuId,
-			content:menu.content||menu.menuName
+			content:menu.content||menu.menuName,
+			relateMenu:markRaw(menu)
 		 })
 		 this.activeTab=menu.menuId 
 	  },
 	  closeTab(tabId){
 		this.menuTabs=this.menuTabs.filter((item) => item.name!=tabId)
 		if(this.menuTabs.length>0){
-			   this.currentMenu=(this.menuTabs)[this.menuTabs.length-1]
-			   this.activeTab=this.currentMenu['name']
+			  
+			   let newActiveTab=(this.menuTabs)[this.menuTabs.length-1]
+			   this.currentMenu=newActiveTab.relateMenu
+			   this.activeTab=newActiveTab['name']
+			   //console.log(this.currentMenu)
+			   
 			   
 		}
 		else{