zl-opd-view/src/components/crudtable/CrudTable.vue

<template>
	<div class="tab-container">
		<div class="tab-toolbar">
			<div class="tool-group">
				<el-button-group>
					<slot name="toolGroup"></slot>
				</el-button-group>
			</div>
			<slot name="toolMid"></slot>
			<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 v-bind="$attrs" ref="$eltable">
			     <slot name="tabColumns" :index-generate="indexGenerate"></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 $eltable=ref(null)
	
	const emit=defineEmits(['loadSuccess'])
	
	const props=defineProps({
		pageSize:Number,
		pageSizeOpts:{
			type:Array,
			default:[10,20,30,50,100]
		},
		pageInfoOpts:String,
		url:String,
		datas:Array,
		initWhere:Object,
		autoLoad:{
			type:Boolean,
			default:true
		},
		autoPageSize:{
			type:Boolean,
			default:false
		}
	})
	
	const pagination=reactive({
		currentPage:1,
		pageSize:props.pageSize||10,
		totalRows:0,
		pageCount:1,
		watchReload:true //通过监听器重载
	})
	
	const isLoading=ref(false)
	const tableDatas=ref([])
	
	
	onMounted(async ()=>{
		
		if(props.autoPageSize){
			autoPageSize()
		}
		
		
		if(props.url&&props.autoLoad){
			query()
		}
		else{
			tableDatas.value=props.datas
		}
	})
	
	const autoPageSize=async ()=>{
		let pro= new Promise((resolve, reject)=>{
			setTimeout(()=>{
				//console.log('sleep 10')
				resolve(true)
			},10)
		})
		
		let rect=document.querySelector('.tab-main').getBoundingClientRect()
		while(!rect || rect.height<=0){
			await pro.catch(err=>{console.log(err)})
			rect=document.querySelector('.tab-main').getBoundingClientRect()
		}
		//console.log(rect)
		
		let rowCount=Math.ceil((rect.height-40)/42)
		rowCount=props.pageSizeOpts.find(val=>val>=rowCount)
		if(!rowCount){
			rowCount=100
		}
		toRaw(pagination).pageSize=rowCount
		
	}
	
	let _queryParam={}
	
	
	
	//只监听翻页、页size更改
	watch([
		()=>pagination.currentPage,
		()=>pagination.pageSize,
	],
	   ([newcp,newpz],[oldcp,oldpz])=>{
		
		if(pagination.watchReload){
			load(_queryParam)
		}
		
		
	})
	
	let getReqParam=(queryParams)=>{
		
		return Object.assign({},props.initWhere,toRaw(pagination),queryParams)
		
	}
	
	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: 'post',data: getReqParam(queryParams)})
			isLoading.value=false
			//console.log(resp)
			pagination.watchReload=true				
			//pagination.currentPage=resp.currentPage
			tableDatas.value=null
			if(resp.code===0){
				tableDatas.value=resp.data.data
				pagination.totalRows=resp.data.totalRow
				pagination.pageCount = resp.data.pageCount
				_queryParam=queryParams||{}
				emit('loadSuccess',resp)
				
				return 0
			}
			else{
				ElMessage.error(resp.msg||"加载数据失败");
				return -1
			}
			
		}
		catch (e) {
			pagination.watchReload=true
			isLoading.value=false
			ElMessage.error("加载数据失败");
		    console.log(e)
			return -1
		}
		
	}
	
	const indexGenerate=(index)=>{
		return (pagination.currentPage-1) * pagination.pageSize + index + 1
	}
		
	const addRow=(record)=>{
		 if(!tableDatas.value){
			 tableDatas.value=[]
		 }
		 tableDatas.value.push(record)
	}
	
	defineExpose({
		query,
		pagination,
		getPageInfo,
		addRow,
		getTableDataSet:()=>tableDatas,
		getSelectionRows:()=>$eltable.value.getSelectionRows()
	})
	
	
</script>

<style scoped>
	.tab-container{
		height:100%;
	}
	.tab-toolbar{
		height:50px;
		padding:10px 10px;
		box-sizing: border-box;
		background-color: #f0f9ff;
		display: flex;
		justify-content:space-between;
		border:1px solid #e3f1f8;
		border-bottom:0px;
		align-items: center;
	}
	
	.tab-toolbar .is-loading{
		margin:8px 20px;
	}
	
	.tab-main{
		height: calc(100% - 50px);
		border:0px;
	}
	
	
</style>