Skip to content

Commit e3aa1eb

Browse files
cq-pandacq-panda
committed
重写部份vue3版本自定义表单与table示例
1 parent 11a3cb6 commit e3aa1eb

File tree

3 files changed

+301
-286
lines changed

3 files changed

+301
-286
lines changed

‎Vol.Vue3版本/src/extension/appmanager/App_Expert.js‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ let extension = {
3737
},
3838

3939
methods: { //事件扩展
40+
click1(){
41+
this.$message.success('点击了提示')
42+
},
4043
onInited() {
4144
$this = this;
4245
//手动调度弹出框的高度
@@ -45,20 +48,19 @@ let extension = {
4548
this.height = this.height - 100;
4649
},
4750
onInit() {
48-
4951
//选择数据源功能
5052
this.editFormOptions.forEach(x => {
5153
x.forEach(item => {
5254
if (item.field == 'CreateDate') {
5355
//给编辑表单设置[选择数据]操作,extra具体配置见volform组件api
54-
item.extra = {
55-
icon: "el-icon-zoom-out",
56-
text: "选择数据",
57-
style: "color:red;font-size: 12px;cursor: pointer;",
58-
click: item => {
59-
this.$refs.modelBody.openDemo();
60-
}
61-
}
56+
// item.extra = {
57+
// icon: "el-icon-zoom-out",
58+
// text: "选择数据",
59+
// style: "color:red;font-size: 12px;cursor: pointer;",
60+
// click: item => {
61+
// this.$refs.modelBody.openDemo();
62+
// }
63+
// }
6264
}
6365
})
6466
})
@@ -70,18 +72,19 @@ let extension = {
7072
this.continueAddName = "连续添加";
7173

7274
//将编辑表单第一行第一列【名称】字段添加一个额外提示属性
73-
this.editFormOptions[0][0].extra = {
74-
render: h => {
75-
return h(
76-
resolveComponent("el-tooltip"),
77-
{
78-
content: "这里是提示的内容",
79-
props: { effect: "dark", placement: "top-start" },
80-
style: {}
81-
}, [
82-
h('a', { style: { color: '#2a92ff' } }, '提示信息')
83-
]
84-
)
75+
this.editFormOptions[0][0].extra =
76+
{
77+
render: (h) => {
78+
return <el-popover
79+
placement="top-start"
80+
title="Title"
81+
width="200"
82+
trigger="hover"
83+
content="this is content, this is content, this is content"
84+
>
85+
{/* 这里对应下面的#reference数据槽 */}
86+
{{ reference: <i onClick={()=>{this.click1()}} class='el-icon-warning-outline'></i> }}
87+
</el-popover>
8588
}
8689
}
8790

@@ -137,22 +140,16 @@ let extension = {
137140
})
138141
})
139142

140-
//动态添加一行表单配置
141-
this.editFormOptions[2].splice(0, 1, ...[{
142-
colSize: 12,
143-
render: h => {
144-
return h(
145-
'div', { style: { 'padding-left': '60px' } },
146-
[h(resolveComponent('ElAlert'), {
147-
style: {},
148-
type: 'success',
149-
'show-icon': true,
150-
title: "这里是render动态渲染的内容",
151-
closable: false,
152-
}, [h('div', { style: { 'margin-top': '-20px' } }, '代码生成器中编辑类型选择file/excel/img类型文件上传,同时可以设置上传文件数量、大小等,具体见App_Expert.js配置')])]
153-
)
154-
}
155-
}])
143+
// //动态添加一行表单配置
144+
// this.editFormOptions[2].splice(0, 1, ...[
145+
// {
146+
// colSize: 12,
147+
// render: (h) => {
148+
// return <el-alert title="这里是自定的提示信息" style={{ padding:0 }} type="success" >
149+
// </el-alert>
150+
// }
151+
// }
152+
// ])
156153

157154
},
158155
}

‎Vol.Vue3版本/src/extension/order/App_Appointment.js‎

Lines changed: 89 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,11 @@ let extension = {
55
//表单header、content、footer对应位置扩充的组件
66
gridHeader: '',
77
gridBody: {
8-
render() {
9-
return h(
10-
resolveComponent('ElAlert'),
11-
{
12-
style: { 'margin-bottom': '12px' },
13-
'show-icon': true,
14-
type: 'success',
15-
closable: false
16-
},
17-
[
18-
h(
19-
'p',
20-
{},
21-
'1、 onInit(){ this.setFiexdSearchForm(true); //设置固定显示所有查询条件}'
22-
),
23-
h(
24-
'p',
25-
{},
26-
' 2、 可在扩展js中的onInit方法设置this.tableHeight/tableMaxHeight属性，指定table高度(默认自适应)，如果设置 了tableMaxHeight属性，tableHeight则不会生效)'
27-
)
28-
]
29-
);
8+
render(h) {
9+
return <el-alert style={{ 'margin-bottom': '10px' }} type="success" show-icon>
10+
<p v-html="1、 onInit(){ this.setFiexdSearchForm(true){设置固定显示所有查询条件}"> </p>
11+
<p v-html="2、自定义表格按钮、弹出框提示、弹出框分组信息,见示例：App_Appointment.js文件"> </p>
12+
</el-alert>
3013
}
3114
},
3215
gridFooter: '',
@@ -40,12 +23,66 @@ let extension = {
4023
text:
4124
'代码生成器中设置[是否只读]或如果没有编辑或新建权限弹出框都是只读的(点击用户姓名列可查看表单分组)',
4225
methods: {
26+
btn1Click(row, $e) {
27+
$e.stopPropagation()
28+
this.edit(row)
29+
},
30+
btn2Click(row, $e) {
31+
$e.stopPropagation()
32+
this.$message.success('点击了按钮')
33+
},
4334
//事件扩展
4435
onInit() {
4536

4637
//设置显示所有查询条件
4738
this.setFiexdSearchForm(true);
4839

40+
//表格上添加自定义按钮
41+
this.columns.push({
42+
title: "操作",
43+
field: "操作",
44+
width: 150,
45+
align: "center",
46+
render: (h, { row, column, index }) => {
47+
return <div >
48+
<el-button onClick={($e) => { this.btn1Click(row, $e) }} type="primary" plain size="small" style="padding: 10px !important;">查看</el-button>
49+
<el-button onClick={($e) => { this.btn2Click(row, $e) }} type="success" plain size="small" style="padding: 10px !important;">按钮</el-button>
50+
</div>
51+
}
52+
})
53+
54+
//增加弹出框提示信息
55+
//https://cn.vuejs.org/guide/extras/render-function.html#passing-slots
56+
//自定义提示
57+
this.editFormOptions[0][0].extra =
58+
{
59+
render: (h) => {
60+
return <el-popover
61+
placement="top-start"
62+
title="Title"
63+
width="200"
64+
trigger="hover"
65+
content="this is content, this is content, this is content"
66+
>
67+
{/* 这里对应下面的#reference数据槽 */}
68+
{{ reference: <i class='el-icon-warning-outline'></i> }}
69+
</el-popover>
70+
}
71+
}
72+
73+
// <el-popover
74+
// placement="top-start"
75+
// title="Title"
76+
// :width="200"
77+
// trigger="hover"
78+
// content="this is content, this is content, this is content"
79+
// >
80+
// <template #reference>
81+
// <el-button>Hover to activate</el-button>
82+
// </template>
83+
// </el-popover>
84+
85+
4986
//格式化单格颜色
5087
this.columns.forEach(x => {
5188
if (x.field == "PhoneNo") {
@@ -62,9 +99,9 @@ let extension = {
6299
}
63100
}
64101
}
65-
66-
if (x.field=='Name') {
67-
x.title="点击查看表单"
102+
103+
if (x.field == 'Name') {
104+
x.title = "点击查看表单"
68105
}
69106

70107
})
@@ -74,83 +111,41 @@ let extension = {
74111
{
75112
colSize: 12,
76113
render: (h) => {
77-
return h(
78-
'div',
79-
{
80-
style: {
81-
display: 'flex',
82-
'margin-bottom': '-4px',
83-
'line-height': '20px',
84-
'margin-top': '-10px',
85-
'padding-bottom': '5px',
86-
'border-bottom': '1px solid #eee'
87-
}
88-
},
89-
[
90-
h('div', {
91-
style: {
92-
height: '19px',
93-
background: '#2dced9',
94-
width: '9px',
95-
'border-radius': '10px'
96-
}
97-
}),
98-
h(
99-
'div',
100-
{
101-
style: {
102-
'padding-left': '6px',
103-
'font-weight': 'bold',
104-
'font-size': '13px'
105-
}
106-
},
107-
'基础信息'
108-
)
109-
]
110-
);
114+
return <div style={{
115+
display: 'flex', 'margin-bottom': '-4px', 'line-height': '20px',
116+
'margin-top': '5px', 'padding-bottom': '5px', 'border-bottom': '1px solid rgb(238, 238, 238)'
117+
}}>
118+
<div style="height: 19px; background: rgb(45, 206, 217); width: 9px; border-radius: 10px;"></div>
119+
<div style="padding-left: 6px; font-weight: bold; font-size: 13px;">基本信息</div>
120+
</div>
111121
}
112122
}
113123
]);
114124

125+
//设置表单分组
115126

116127
this.editFormOptions.splice(2, 0, [
117128
{
118129
colSize: 12,
119130
render: (h) => {
120-
return h(
121-
'div',
122-
{
123-
style: {
124-
display: 'flex',
125-
'margin-bottom': '-4px',
126-
'line-height': '20px',
127-
'margin-top': '5px',
128-
'padding-bottom': '5px',
129-
'border-bottom': '1px solid #eee'
130-
}
131-
},
132-
[
133-
h('div', {
134-
style: {
135-
height: '19px',
136-
background: '#2dced9',
137-
width: '9px',
138-
'border-radius': '10px'
139-
}
140-
}),
141-
h(
142-
'div',
143-
{
144-
style: {
145-
'padding-left': '6px',
146-
'font-weight': 'bold',
147-
'font-size': '13px'
148-
}
149-
},
150-
'其他信息'
151-
)
152-
]
153-
);
131+
return <div style={{
132+
display: 'flex', 'margin-bottom': '-4px', 'line-height': '20px',
133+
'margin-top': '5px', 'padding-bottom': '5px', 'border-bottom': '1px solid rgb(238, 238, 238)'
134+
}}>
135+
<div style="height: 19px; background: rgb(45, 206, 217); width: 9px; border-radius: 10px;"></div>
136+
<div style="padding-left: 6px; font-weight: bold; font-size: 13px;">基本信息</div>
137+
</div>
138+
}
139+
}
140+
]);
141+
142+
//增加分段alert提示
143+
this.editFormOptions.splice(3, 0, [
144+
{
145+
colSize: 12,
146+
render: (h) => {
147+
return <el-alert title="这里是自定的提示信息" style={{ padding: 0 }} type="success" >
148+
</el-alert>
154149
}
155150
}
156151
])
@@ -162,7 +157,7 @@ let extension = {
162157
this.tableMaxHeight = document.body.clientHeight - 415;
163158
} else {
164159
//设置表的最大高度
165-
this.tableMaxHeight = this.height-125;//400
160+
this.tableMaxHeight = this.height - 125;//400
166161
}
167162
//移除快捷查询
168163
this.singleSearch = null;

0 commit comments

Comments
 (0)