表格封装~

对表格复用的查询、重置、分页等方法进行抽取封装hooks

封装 hooks：

import { ref, reactive, onMounted } from 'vue'
// 表格通用代码抽取hook，具体用法参考财务管理-发票台账或者合同管理-合同台账
export default function () {
	// 搜索按钮加载
	const searchLoading = ref(false)
	// 重置按钮加载
	const resetLoading = ref(false)
	// 表格高度
	const height = ref(500)
	// 表格加载标志
	const tableLoading = ref(false)
	// 分页数据
	const pagination = reactive({
		current: 1,
		total: 0,
		size: 20,
	})
	onMounted(() => {
		// 根据表格上方的el-form行数，动态减取高度，换行请使用el-form包裹
		const line = document.querySelectorAll('.el-form').length
		height.value = window.innerHeight - (280 + (line - 1) * 45)
	})
	// 搜索
	const handleSearch = (getData: () => void) => {
		searchLoading.value = true
		pagination.current = 1
		getData()
	}
	// 重置
	const handleReset = (queryParam: any, getData: () => void) => {
		resetLoading.value = true
		pagination.size = 20
		pagination.current = 1
		// ------只适用全部重置为空字符串的场景--------
		const keys = Object.keys(queryParam)
		const obj: { [proName: string]: string } = {}
		keys.forEach((item) => {
			obj[item] = ''
		})
		Object.assign(queryParam, obj)
		getData()
	}
	// 改变每页条数
	const handleSizeChange = (val: number, getData: () => void) => {
		pagination.size = val
		getData()
	}

	// 改变页数
	const handleCurrentChange = (val: number, getData: () => void) => {
		pagination.current = val
		getData()
	}
	// 表格行样式控制
	const tableRowClassName = ({ rowIndex }: any) => {
		if (rowIndex % 2 == 0) {
			return 'warning-row'
		} else {
			return 'success-row'
		}
	}
	const returnObj = {
		searchLoading,
		resetLoading,
		height,
		pagination,
		tableLoading,
		handleSearch,
		handleReset,
		tableRowClassName,
		handleSizeChange,
		handleCurrentChange,
	}
	return returnObj
}

页面中使用：

import useTableCode from '@/hooks/useTableCode'	

   const {
		searchLoading,
		resetLoading,
		height,
		pagination,
		tableLoading,
		handleSearch,
		handleReset,
		tableRowClassName,
		handleSizeChange,
		handleCurrentChange,
	} = useTableCode()


<template>

<div class="herded_box">
			<el-form :inline="true" style="height: 44px" @keyup.enter="handleSearch(getData)">
				<el-form-item>
					<el-input size="small" clearable v-model="queryParam.invoiceNo" placeholder="请输入发票号码"></el-input>
				</el-form-item>
				<el-form-item v-if="systemType == '2'">
					<el-input size="small" clearable v-model="queryParam.buyerName" placeholder="请输入发票抬头"></el-input>
				</el-form-item>
				<el-form-item v-if="systemType == '2'">
					<el-select v-model="queryParam.status" placeholder="请选择发票状态" clearable>
						<el-option
							v-for="(item, index) in $getDictOptions('INVOICE_STATUS')"
							:key="index"
							:label="item.name"
							:value="item.code"></el-option>
					</el-select>
				</el-form-item>
				<!-- --------- -->
				<el-form-item>
					<el-button type="primary" @click="handleSearch(getData)" :loading="searchLoading">查询 </el-button>
					<el-button @click="handleReset(queryParam, getData)" type="info" :loading="resetLoading">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div class="content">
			<el-table
				size="small"
				header-cell-class-name="headerCell"
				:cell-style="{ height: '37px' }"
				:data="data"
				highlight-current-row
				:row-class-name="tableRowClassName"
				:height="newHeight"
				v-loading="tableLoading"
				border
				element-loading-text="拼命加载中"
				style="width: 100%">
				<el-table-column :resizable="false" type="index" width="50" label="序号"></el-table-column>
				<el-table-column prop="applyInfo.code" label="申请单号"> </el-table-column>
				<el-table-column prop="applicantName" label="申请方"> </el-table-column>
				<el-table-column prop="handlerName" label="开票方"></el-table-column>
				<el-table-column prop="applyInfo.buyerName" label="发票抬头"></el-table-column>
				<el-table-column prop="applyInfo.orderNo" label="订单编号">
					<template #default="{ row }">
						<a class="blueCell" @click="tableOperation(row.applyInfo.orderNo, 'order')">{{ row.applyInfo.orderNo }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="invoiceAmount" label="开票金额(元)">
					<template #default="{ row }">
						{{ row.amountTax || row.applyInfo.actualAmount }}
					</template>
				</el-table-column>
				<el-table-column prop="applyInfo.createTime" label="申请时间"> </el-table-column>
				<el-table-column prop="invoiceTime" label="开票日期">
					<template #default="{ row }">
						{{ row.invoiceTime && $dayjs.toD(row.invoiceTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="invoiceStatus" label="状态">
					<template #default="{ row }">
						{{ $transDictName('INVOICE_STATUS', row.invoiceStatus) }}
					</template>
				</el-table-column>
				<el-table-column prop="invoiceNo" label="发票号码">
					<template #default="{ row }">
						<a class="blueCell" @click="tableOperation(row.invoiceUrl, 'invoice')">{{ row.invoiceNo }}</a>
					</template>
				</el-table-column>
				<el-table-column prop="originalInvoiceNo" label="原发票号码"></el-table-column>
				<el-table-column label="电话/邮箱">
					<template #default="{ row }">
						{{ $transList2String([row.applyInfo.buyerPhone, row.applyInfo.buyerEmail], '/') }}
					</template>
				</el-table-column>
			</el-table>
			<div class="footerBox">
				<el-pagination
					v-model:page-size="pagination.size"
					@size-change="handleSizeChange($event, getData)"
					@current-change="handleCurrentChange($event, getData)"
					:current-page="pagination.current"
					:page-sizes="$page.pageSizes"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pagination.total"
					background>
				</el-pagination>
			</div>
		</div>


</template>