页面模型 QueryPage

Attributes

属性名	子属性	说明	类型	默认值
data		页面数据	object
	pageInfo	页面信息	object	{type: 'QueryPage'}
	pageConfig	界面配置信息(页面保存以后，查询界面默认自动刷新)	object	{listRefresh:true}
	editConfig	编辑页面的配置，表格双击是否打开	object	{click:true}
	deleteConfig	删除的时候：配置信息	string	{msg:""}
	searchApi	查询api	string
	deleteApi	删除api	string
	exportApi	导出api	string	等于searchApi
	exportName	导出文件名称	string	导出
	sort	界面自定义排序字段	string
	asc	默认是降序	boolean	false
	table	表格的数据	object	{rows:[],total:0,loading:false}
	selectedRows	获取表格中勾选的行	[]
	selectedRowKeys	获取表格勾选行的主键值	string
	paging	分页信息	object	{pageNum:1,pageSize:10}
	tableColumns	表格列信息
	tableProps	表格的属性配置信息	object
	querySchemas	查询条件的，查询字段	[]
	queryFormProps	查询表单的属性配置	object
	queryTemplates	查询表单的，查询模板	[]
	tableMoreSettings	表格组件，右边的表格配置，中的更多配置信息	object	{tableImmediateSearch:false ,sortExpression:"",pageSize:""}
	selectInfo	表格选中行的数量	int	{num:0}
	commonpage里面data默认都有

Events

事件名称	说明	类型	参数
useQueryForm	初始化查询Form的信息	Function	props
useTable	初始化表格的信息（列信息等）	Function	req,state
getQueryEntity	处理拼接查询条件，__QUERY	Function	state
prepareSearchRequest	查询的时候，处理请求的参数	Function	request,state
searching	查询之前	Function	request
search	查询	Function
searched	查询之后	Function	response
exp	导出所有数据	Function
expRows	导出勾选数据	Function
expPage	导出当前页面数据	Function
deleting	删除之前	Function	request
del	删除	Function	row
delBatch	批量删除	Function
deleted	删除之后	Function	response
add	新增，空白数据	Function
edit	编辑，加载数据	Function	row
pageClear	清空界面数据	Function
rowClick	表格双击行	Function	row,sate
rowClickEx	表格行单击	Function	row,sate
selection	表格返回当前选中的行	Function
unSelection	表格返回当前没有选中的行	Function
selectedKeys	表格方法:获取所有选中的key	Function
unSelectedKeys	表格方法:获取所有没有选中的key	Function
selectedField	表格方法:获取选择行的，某个字段的值	Function	prop
unSelectedField	表格方法:获取没有选择行的，某个字段的值	Function	prop

查询示例代码

## 页面模型  QueryPage
<template>
<TgPage :page="page">
	<div class="tg_filter">  
	<!--查询表单-->
	<tg-filter-plus  ref="queryForm" :rules="page.data.rules" :page="page"  
@search="page.search"></tg-filter-plus>  
	</div>
	<!--表格-->
	<tg-table-list-plus isCheckbox ref="table" :page="page" :table="page.data.table" class="fit">
		<template #tg_button>  
			<tg-button @click="page.add" icon="CirclePlus" :name="t('action.add')"/>  
			<tg-button @click="page.exp" icon="Download" :name="t('action.download')"/> 
			<tg-button type="danger" @click="page.delBatch" icon="Delete" :name="t('action.batchDelete')"/>  
		</template>  
		
		<el-table-column :label="t('action.oper')" fixed="right" width="160px">  
			<template #default="scope">  
			<tg-button @click="page.edit(scope.row)" icon="Edit" text :name="t('action.edit')"/>  
			<tg-button @click="page.del(scope.row)" icon="Delete" text :name="t('action.delete')"/>  
			</template>  
		</el-table-column>
	</tg-table-list-plus>
	<!--引入编辑界面,popType：编辑页面是弹框，-->
	<edit :page="page" editPage popType></edit>
</TgPage>
</template>

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  
  
import QueryPage from "@coreQueryPage"; 
<!--apis的路径-->
import apis from '@/xxx/xxx/apis'  
<!--一些配置属性-->
import {defaultQueryProps, defaultTableProps} from '@/web/app/setting/componentSetting'  <!--表格和查询表单的配置信息的文件-->
import {columns, searchFormSchema} from "./setting/list.set"  
<!--编辑界面的地址-->
import edit from './edit/edit.vue'    
<!--多语言-->
import {t} from '@i18nHelper'  

<!--引入页面模型-->
let {page} = QueryPage()  
<!--name:当前界面的唯一值，和script标签的设置一样-->
page.context.name = 'PageDemo_FrmEciBaseList'  
<!--设置删除api-->
page.data.deleteApi = apis.appGen.delete  
<!--设置查询api-->
page.data.searchApi = apis.appGen.search  

<!--查询表单设置-->
page.useQueryForm({  
...defaultQueryProps,  
schema: searchFormSchema,  
})  

<!--表格区域设置-->
page.useTable({  
...defaultTableProps,  
columns: columns,  //表格列信息
rowkey: 'id',  //主键
immediate: true,  //页面加载立即查询
})  
  
  
</script>

1，edit编辑组件的属性描述：

page：是为了建立界面的父子关系

editPage：针对当前的list界面，双击或者点击编辑的时候，弹出的一个编辑界面

popType：等同于 popType='dialog' 设置当前的edit组件是以弹框的方式打开；不写默认是：popType='page'

2，useQueryForm描述：

schema：查询界面的查询条件

3，useTable描述：

columns：表格列信息

rowkey：表格主键

immediate：一打开界面是否立即查询

查询扩展，处理查询之前或者查询之后

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";

let {page} = QueryPage()
//查询之前
page.searching=(request)=>{
	//request是请求的参数
	
	//如果要取消查询
	//request.cancel=true
	
}
//查询之后
page.searched=(response)=>{
	//response是查询以后的返回
}
  
</script>

删除扩展，处理删除之前或者查询之后

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  
import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

//查询之前
page.deleting=(request)=>{
	//request是请求的参数
	
	//如果要取消删除
	//request.cancel=true
	
}
//查询之后
page.deleted=(response)=>{
	//response是删除以后返回的结果
}
  
</script>

界面设置默认排序

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  

import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

//设置默认排序
page.data.sort = "name|desc,custCode|asc"

</script>

界面添加自定义的__queryField，给后台查询使用

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  

import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

//添加自定义的查询条件，会拼到默认的__queryField的后面
page.addTableQuery("custCode|A.CUST_CODE|s|l|and")

page.useTable({  
	...defaultTableProps,  
	columns: columns,  
	rowkey: "id",  
	immediate: true,  
});

</script>

表格汇总列

效果

代码

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseList">  

import QueryPage from "@coreQueryPage";
let {page} = QueryPage()

//设置汇总列,可以是多个，用逗号隔开
page.data.query.totalColumn = "price,count"

page.useTable({
    ...defaultTableProps,
    columns: columns,
    rowkey: "id",
    immediate: true,
});

</script>