zl-opd-view/src/pages/sys/ParamMgr.vue

<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="20"
			>
			  <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="参数名" width="150" />
				  <el-table-column prop="name" label="参数编码" width="120" />
				  <el-table-column prop="state" label="计量单位" width="120" />
				  <el-table-column prop="city" label="创建时间" width="320" />
				  <el-table-column prop="address" label="创建人" width="600" />
				  <el-table-column prop="zip" label="操作" 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>
	@import url('../../assets/css/qpage.css');
	
</style>