页面模型 EditPage

Attributes

属性名	子属性	说明	类型	默认值
data		页面数据	object
	pageInfo	页面信息	object	{type: 'EditPage'}
	isAdd	是否新增	boolean	true
	editConfig	编辑的配置信息	object	{saveAdd:false,saveClose:false}
	loadApi	加载Api	string
	saveApi	保存Api	string
	formProps	表单属性信息	object
	commonpage里面data默认都有

Events

事件名称	说明	类型	参数
useEditForm	设置表单属性	Function	props
loading	加载数据之前	Function	request
load	加载数据	Function
loaded	加载数据之后	Function	response
saving	保存之前	Function	request
save	保存	Function
saved	保存之后	Function	response
edit	编辑	Function	row
add	新增	Function
validateField	校验editForm中的某个字段	Function	prop
clearValidate	清除form表单校验	Function
setTitle	设置标题	Function
pageClear	清空界面信息	Function
show	显示	Function	row,state
resetEntity	重置data.entity的数据	Function

编辑示例代码

## 页面模型  EditPage
<template>
	<div class="tg_page">
		<TgPage ref="tgPage" :page="page" >  
			<div class="tg_toolbar">  
				<tg-button @click="page.save" icon="DocumentChecked" :name="tm('action.save','保存')"/>  
				<tg-button @click="page.close" type="warning" icon="Close" :name="tm('action.close','关闭')"/>  
	                </div>  
			<div class="tg_form">  
				<tg-form ref="editForm" :page="page">  
					<!--表单的信息-->
					<el-row>  
						<el-col :span="24">  
							<el-form-item :label="tm('xxx.code','code')" prop="code">  
								<el-input v-model="page.data.entity.code"/>  
							</el-form-item>  
						</el-col>  
						
					</el-row>  
				</tg-form>  
			</div>  
		</TgPage>
	</div>
</template>

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseEdit">  
  
import EditPage from "@coreEditPage"; 
<!--apis的路径-->
import apis from '@/xxx/xxx/apis'  
<!--表单的一些配置属性-->
import {defaultFormProps} from '@/web/app/setting/componentSetting'  <!--表单的配置信息的文件-->
import {nextTick, ref} from "vue";
<!--多语言-->
import {t} from '@i18nHelper'  

<!--引入页面模型-->
let {page} = EditPage()  
<!--name:当前界面的唯一值，和script标签的设置一样-->
page.context.name = 'FrmEciBaseEdit'  
<!--设置加载api-->
page.data.loadApi = apis.xxx.load  
<!--设置保存api-->
page.data.saveApi = apis.xxx.save  
<!--主键-->
page.data.keyField = 'id'

<!--编辑表单设置-->
page.useEditForm({  
...defaultFormProps
})

<!--调用弹框-->
nextTick(() => {  
	page.useDialog()  
})
  
</script>

加载以后扩展，处理加载之前或者加载之后

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

//加载之前
page.loading=(request)=>{
	//request是请求的参数
	
}
//加载之后
page.loaded=(response)=>{
	//response是请求接口的返回数据
}
  
</script>

保存扩展，处理保存之前或者保存之后

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

//加载之前
page.saving=(request)=>{
	//request是请求的参数
	//取消保存
	//request.cancel=true
	
}
//加载之后
page.saved=(response)=>{
	//response是请求接口的返回数据
}
  
</script>

编辑界面是弹框，弹出以后要添加业务方法

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

//加载之前
page.showed=(row)=>{
	//row，表格中选中行的数据
}
  
</script>