EditTab 编辑页面Tab页面模型

# EditTab 编辑页面Tab页面模型

# Attributes

属性名	子属性	说明	类型	默认值
data		页面数据	object
	pageInfo	页面信息	object	{type: 'EditTab'}
	activeName	tab显示页签	string	head
	isAdd	是否新增	boolean	true
	commonpage里面data默认都有
	row	行数据	object

# Events

事件名称	说明	类型	参数
edit	编辑	Function	row
add	新增	Function
save	保存	Function
del	删除	Function	props
show	显示	Function	row,state

# Tab页面示例代码

EditTab

## 页面模型  EditPage
<template>
	<div class="tg_page">  
		<TgPage ref="tgPage" :page="page">  
			<div class="tg_body">  
				<el-tabs v-model="page.data.activeName" @tab-click="page.selectTab">  
					<el-tab-pane label="基本信息" name="head">  
						<HeadEdit :page="page" editPage/>  
					</el-tab-pane>  
				  
					<el-tab-pane label="明细信息" name="list" :disabled="page.data.isAdd">  
						<!--sub设置，说明bodyList，是当前界面的子表。他们是有级联关系的-->
						<bodyList :page="page" sub/>  
					</el-tab-pane>  
				</el-tabs>  
			</div>  
		</TgPage>  
	  
	</div>
</template>

<!--name:当前界面的唯一值-->
<script setup name="FrmEciBaseEditTab">  
import HeadEdit from './edit.vue'  
import bodyList from '../xxx/bodyList.vue'
import EditTab from "@coreEditTab";
import {nextTick, ref} from "vue";

<!--引入页面模型-->
let {page} = EditTab()  
<!--name:当前界面的唯一值，和script标签的设置一样-->
page.context.name = 'FrmEciBaseEditTab'  
<!--title:弹框的标题-->
page.data.title='XXX'

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# 1，HeadEdit组件的属性描述：

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

# editPage：针对当前的list界面，对应的编辑界面

# 2，bodyList组件的属性描述：

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

# sub：bodyLis是子界面，主从关系

# 子页面编辑示例代码

edit.vue

## 页面模型  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'

<!--主要区别-->
<!--设置级联关系：headField:是主表的字段；field:是子表和主表的关联字段-->
page.data.cascade = {  
headField: 'id',  
field: 'headId',  
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

# 子页面查询示例代码

bodyList.vue

## 页面模型  QueryPage
<template>
<div class="tg_page">
	<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>
<div>
</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  

<!--主要区别-->
<!--设置级联关系：headField:是主表的字段；field:是子表和主表的关联字段-->
page.data.cascade = {  
headField: 'id',  
field: 'headId',  
}

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

# page.data.cascade的属性：是设置主从界面的级联关系。在查询和新增的时候，框架会自动到后台去处理这个级联关系。但是在引用当前界面的地方，必须要设置sub，不然当前属性设置了也不会生效。

# headField：是主表的字段属性

# field：是子表和主表的关联字段属性

上次更新: 2024/5/22 09:38:11

← EditPage 编辑页面模型 TgInputPlus 文本框→