各种计算示例
本文针对设计表单时，表单各种逻辑的运用。
【逻辑】逻辑配置的实现原理，逻辑配置参考了动态数据数据绑定的思路，用于给vue代码添加各种监视，一旦数据发生改变时就触发。 先来分析一下生成代码片段，有助于逻辑配置。
export default {
data() {
return {
"formData": {
"filed163972871994610": "",
"filed163972849090881": "",
"filed163972849298675": "",
"filed163972849432194": [],
"filed163972953438075": "",
"filed163972953596687": "",
"filed163972954173198": "",
"$tableNewId": ""
},
"deviceMode": "Mobile",
"rules": {
"filed163972871994610": [],
"filed163972849090881": [],
"filed163972849298675": [],
"filed163972849432194": [],
"filed163972953438075": [],
"filed163972953596687": [],
"filed163972954173198": []
},
"controlData": {
"filed163972849090881": [],
"filed163972849298675": [],
"filed163972849432194": []
},
"selectindex": -1,
"isedit": false,
"selectproperty": "",
"watchdetailfiled": {},
"readDataPermission": {},
"writeDataPermission": {}
}
},
methods: {
///【下拉列表】加载选项方法
loadfiled163972849090881(datarow) {
const param = {
body: {
filed163436600263567: this.formData.filed163972871994610
},
};
this.$apiComm("question1634365727000_71309.querylist", param).then(res => {
if (res.code != 0) {
this.$message.error(res.msg);
return;
}
this.controlData.filed163972849090881 = res.data.list
});
},
///【单选项】加载选项方法
loadfiled163972849298675(datarow) {
const param = {
body: {},
};
this.$apiComm("question1634365727000_71309.querylist", param).then(res => {
if (res.code != 0) {
this.$message.error(res.msg);
return;
}
this.controlData.filed163972849298675 = res.data.list
});
},
///【多选项】加载选项方法
loadfiled163972849432194(datarow) {
const param = {
body: {},
};
this.$apiComm("question1634365727000_71309.querylist", param).then(res => {
if (res.code != 0) {
this.$message.error(res.msg);
return;
}
this.controlData.filed163972849432194 = res.data.list
});
},
//查询关联控件[关联查询]查询数据方法
loadqueryrelevance_1639729548000_27779(datarow) {
const param = {
body: {
filed163436600263567: this.formData.filed163972953438075
}
};
this.$apiComm("question1634365727000_71309.querylist", param).then(res => {
if (res.code != 0) {
this.$message.error(res.msg);
return;
}
if (res.data.list.length > 0) {
this.assignqueryrelevance_1639729548000_27779(res.data.list[0], datarow)
} else {
this.assignqueryrelevance_1639729548000_27779(undefined, datarow)
}
});
},
//查询关联控件[关联查询]查询数据后赋值方法
assignqueryrelevance_1639729548000_27779(data, datarow) {
this.formData.filed163972953596687 = data === undefined ? undefined : data.filed16343669449864;
this.formData.filed163972954173198 = data === undefined ? undefined : data.filed163436646771791;
},
//系统方法 通用提交保存方法
submitData() {
// console.log(JSON.stringify(this.formData))
// return
this.$refs['elForm'].validate(valid => {
if (!valid) return
const param = {
body: {
...this.formData,
$fromid: this.fromid
}
};
this.$apiComm("question1639727608000_62936.SaveDataInfo", param).then(res => {
if (res.code != 0) {
this.$message.error(res.msg);
}
if (typeof this.dialogclose == 'function') {
this.dialogclose(true)
}
this.$message.success("保存成功！")
});
})
},
//系统方法 通用添加明细行方法
addListViewRow(datalistname) {
var newrowobj = {}
this.controlData[datalistname].scopedSlots.forEach(ee => {
newrowobj[ee] = "";
})
this.formData[datalistname].push(newrowobj);
},
//系统方法 通用删除明细方法
delListViewRow(datalistname, rows) {
if (rows.fid != undefined && rows.fid != "") {
this.formData["del" + datalistname].push(rows.fid);
}
this.formData[datalistname].splice(this.formData[datalistname].indexOf(rows), 1);
},
//系统方法 判断url是否传入ID，如果传入给各个控件赋值
getTableNewId() {
const tablefid = this.$query("tablefid");
let newbusinessid = this.businessid;
if (tablefid != null && tablefid != '') {
newbusinessid = tablefid;
}
if (newbusinessid != null && newbusinessid != undefined && newbusinessid.trim() != "" && newbusinessid.trim() != "0") {
this.formData.$tableNewId = newbusinessid;
const param = {
body: {
fid: newbusinessid
},
};
this.$apiComm("question1639727608000_62936.getDataInfo", param).then(res => {
if (res.code == 0) {
this.isedit = true
for (let key in this.formData) {
if (res.data[key] != undefined) {
if (typeof(res.data[key]) == "string" && ((res.data[key].indexOf("[") >= 0 && res.data[key].indexOf("]") >= 0) || (res.data[key].indexOf("{") >= 0 && res.data[key].indexOf("}") >= 0))) {
try {
this.formData[key] = JSON.parse(res.data[key])
} catch {
this.formData[key] = res.data[key];
}
} else {
this.formData[key] = res.data[key];
}
}
}
}
})
} else {
this.$getNewId().then(res => {
if (res.code == 0) {
this.formData.$tableNewId = res.data
}
})
}
},
//系统方法返回
goBack() {
history.go(-1)
},
//系统方法页面加载方法
funmounted() {
this.getTableNewId(); ///解决手机端 文本框输入时被键盘挡住问题
const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.onresize = function() {
const nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
if (clientHeight - nowClientHeight > 60) { //因为ios有自带的底部高度
//键盘弹出的事件处理
if (document.getElementById("maincontent") != null) {
document.getElementById("maincontent").classList.add("focusState");
}
} else {
//键盘收起的事件处理
if (document.getElementById("maincontent") != null) {
document.getElementById("maincontent").classList.remove("focusState");
}
}
};
this.loadfiled163972849090881();
this.loadfiled163972849298675();
this.loadfiled163972849432194();
this.loadqueryrelevance_1639729548000_27779();
}
},
watch: {
'formData.filed163972871994610'() {
this.loadfiled163972849090881();
},
'formData.filed163972953438075'() {
this.loadqueryrelevance_1639729548000_27779();
}
},
props: ["businessid", "IsPower", "fromstatus", "fromid", "$user"],
mounted() {
this.funmounted();
}
}
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
data()=>formData 为组件绑定数据的对象
data()=>deviceMode那种设备类型访问模式，如PC，Ipad，手机
data()=>rules 为表单验证对象，如必填，正则表达式验证等等。
data()=>watchdetailfiled 流程表单对象 为控制是否显示
data()=>readDataPermission 流程表单对象 为控制是否只读
data()=>writeDataPermission 流程表单对象 为控制是否可编写
methods 的方法就是代码生成的逻辑方法。
【逻辑】的位置如下图：
点击新增：
其中触发的字段：包含了data()=>formData 所有属性的设置，同时新增了数据加载之前事件，数据加载之后事件，提交前事件的设置。该监控模式可以实现大部分事件的处理工作。
如果遇到：A文本框的内容等于=B文本框+C文本框的内容 如何解决，这个时候需要用到该逻辑的处理了。如下图：
这只是其中的一个小小的例子，还可以扩展思维实现更多逻辑。
其中运算逻辑中的表达式是支持js代码的编写的，为什么采用这种模式进行配置逻辑，主要是1.为了照顾运维，不懂开发人员使用，2.formData的属性是随机生成的，不好理解，使用配置模式更容易理解逻辑。
上次更新: 2023/10/17, 17:43:39