1 /**
2 * Created by Eee_xiang on 2018/04/12.
3 * 联动响应事件
4 */
5 (function () {
6 $.linkEvent = function (options) {
7 var _this = this;
8 var defaults = {
9 elId: "",
10 groups : [],
11 fields : [],
12 data:{}
13 };
14
15 var options = $.extend(defaults, options);
16 var $container = $(options.elId);
17
18 var html = `<div class="input-group m-b">
19 <span class="input-group-addon">联动响应</span>
20
21 <span class="input-group-addon-center" style="padding: 0; width: 150px;">
22 <select class="form-control" id="target#key#">
23 </select>
24 </span>
25 <span class="input-group-addon-center" style="padding: 0; width: 100px;" id="eventTypeSpan#key#">
26 <select class="form-control" id="eventType#key#">
27 <option value="1">值</option>
28 <option value="2">属性</option>
29 </select>
30 </span>
31 <span class="input-group-addon-center">
32 <span class="form-control">设置为</span>
33 </span>
34 <span class="input-group-addon-center"style="padding: 0; width: 150px" id="valTypeSpan#key#">
35 <select class="form-control" id="valType#key#">
36 <option value="0">固定值</option>
37 <option value="1">表单值</option>
38 <option value="2">系统值</option>
39 </select>
40 </span>
41 <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrTypeSpan#key#">
42 <select class="form-control" id="attrType#key#">
43 <option value="1">读写属性</option>
44 <option value="2">显示属性</option>
45 </select>
46 </span>
47 <span class="input-group-addon-center" style="padding: 0; width: 150px" id="defaultValSpan#key#">
48 <input id="defaultVal#key#" type="text" class="form-control" placeholder="输入固定值">
49 </span>
50 <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="formFieldSpan#key#">
51 <select class="form-control" id="formField#key#">
52 </select>
53 </span>
54 <span class="input-group-addon-center hide" style="padding: 0;width: 150px" id="sysValSpan#key#">
55 <select class="form-control" id="sysVal#key#">
56 <option value="userId">用户ID</option>
57 <option value="userName">用户姓名</option>
58 <option value="nickname">用户昵称</option>
59 <option value="roleId">用户角色ID</option>
60 <option value="roleName">用户角色名称</option>
61 <option value="departId">用户组织机构ID</option>
62 <option value="departName">用户组织机构名称</option>
63 <option value="postId">用户岗位ID</option>
64 <option value="postName">用户岗位名称</option>
65 <option value="workgroupId">用户工作组ID</option>
66 <option value="workgroupName">用户工作组名称</option>
67 </select>
68 </span>
69 <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrValSpan#key#">
70 <select class="form-control" id="attrVal#key#">
71 <option value="1">True</option>
72 <option value="0">False</option>
73 </select>
74 </span>
75 <span id="eventDel#key#" class="input-group-addon"><i
76 class="fa fa-times"></i> 删除</span>
77 </div>`;
78
79 var groupHtml = `<div class="input-group m-b">
80 <span class="input-group-addon">联动响应</span>
81
82 <span class="input-group-addon-center" style="padding: 0; width: 150px;">
83 <select class="form-control" id="targetG#key#">
84 </select>
85 </span>
86 <span class="input-group-addon-center">
87 <span class="form-control">属性</span>
88 </span>
89 <span class="input-group-addon-center">
90 <span class="form-control">设置为</span>
91 </span>
92 <span class="input-group-addon-center">
93 <span class="form-control">显示属性</span>
94 </span>
95
96 <span class="input-group-addon-center hide" style="padding: 0; width: 150px" id="attrValSpanG#key#">
97 <select class="form-control" id="attrValG#key#">
98 <option value="1">True</option>
99 <option value="0">False</option>
100 </select>
101 </span>
102 <span id="eventDelG#key#" class="input-group-addon"><i
103 class="fa fa-times"></i> 删除</span>
104 </div>`;
105 /*
106 * 添加分组节点
107 */
108 this.newGroupLinkEvent = function(rowJson){
109 var key = this.newGuid();
110 var isAdd = false;
111 if(rowJson == undefined || rowJson == null){
112 rowJson = {
113 'target': '',
114 'type':'2',
115 'eventType': '2',
116 'valType': '0',
117 'value': '',
118 };
119 isAdd = true;
120 }
121 options.data[key] = rowJson;
122
123 var _this = this;
124 $groupHtml = $(groupHtml.replace(/#key#/g, key));
125 $container.append($groupHtml);
126
127 // 选择小组
128 var targetSelect = $groupHtml.find("#targetG"+key);
129 targetSelect.empty();
130 var optDefault = '<option value="">请选择</option>';
131 targetSelect.append(optDefault);
132 $.each(options.groups, function(i, item){
133 var option = '<option value="'+item.id+'">'+item.title+'</option>';
134 targetSelect.append(option);
135 });
136 $groupHtml.find("#attrValSpanG"+key).removeClass('hide');
137 //绑定小组
138 $groupHtml.find("#targetG"+key).change(function(){
139 var val = $(this).val();
140 rowJson.target = val;
141 options.data[key] = rowJson;
142 });
143
144 $groupHtml.find("#attrValG"+key).change(function(){
145 var val = $(this).val();
146 rowJson.value = val;
147 options.data[key] = rowJson;
148 });
149 //删除事件
150 $groupHtml.find("#eventDelG"+key).click(function(){
151 delete options.data[key];
152 $(this).parent().remove();
153 });
154 //初始化
155 if(rowJson.target != ''){
156 $groupHtml.find("#targetG"+key).val(rowJson.target);
157 }
158 if(rowJson.value !=''){
159 $groupHtml.find("#attrValG"+key).val(rowJson.value);
160 }
161 };
162
163
164 /**
165 * 添加字段节点
166 * */
167 this.newLinkEvent = function(rowJson){
168 var key = this.newGuid();
169 var isAdd = false;
170 if(rowJson == undefined || rowJson == null){
171 rowJson = {
172 'target': '',
173 'type':'1',
174 'eventType': '1',
175 'valType': '0',
176 'value': '',
177 };
178 isAdd = true;
179 }
180 options.data[key] = rowJson;
181
182 var _this = this;
183 $html = $(html.replace(/#key#/g, key));
184 $container.append($html);
185 this.genFieldOption($html, key);
186
187 //绑定事件
188 $html.find("#valType"+key).change(function(){
189 var val = $(this).val();
190 _this.changeValType($html, rowJson, key, val, true);
191 rowJson.valType = val;
192 options.data[key] = rowJson;
193 });
194
195 $html.find("#eventType"+key).change(function(){
196 var val = $(this).val();
197 _this.changeEventType($html, rowJson, key, val, true);
198 rowJson.eventType = val;
199 options.data[key] = rowJson;
200 });
201 $html.find("#target"+key).change(function(){
202 var val = $(this).val();
203 rowJson.target = val;
204 options.data[key] = rowJson;
205 });
206 $html.find("#attrType"+key).change(function(){
207 var val = $(this).val();
208 _this.changeAttrType($html, rowJson, key, val, true);
209 rowJson.valType = val;
210 options.data[key] = rowJson;
211 });
212 $html.find("#attrVal"+key).change(function(){
213 var val = $(this).val();
214 rowJson.value = val;
215 options.data[key] = rowJson;
216 });
217 $html.find("#formField"+key).change(function(){
218 var val = $(this).val();
219 rowJson.value = val;
220 options.data[key] = rowJson;
221 });
222 $html.find("#sysVal"+key).change(function(){
223 var val = $(this).val();
224 rowJson.value = val;
225 options.data[key] = rowJson;
226 });
227
228 $html.find("#defaultVal"+key).keyup(function(){
229 var val = $(this).val();
230 rowJson.value = val;
231 options.data[key] = rowJson;
232 });
233
234 $html.find("#eventDel"+key).click(function(){
235 delete options.data[key];
236 $(this).parent().remove();
237 });
238
239 //初始化数据
240 if(rowJson.eventType != ''){
241 $html.find("#target"+key).val(rowJson.target);
242 }
243 if(rowJson.eventType != ''){
244 $html.find("#eventType"+key).val(rowJson.eventType);
245 this.changeEventType($html, rowJson, key, rowJson.eventType, isAdd);
246 }else{
247 $html.find("#eventType"+key).val(rowJson.eventType);
248 }
249
250 };
251 this.changeEventType = function($html, rowJson, key, val, isAdd){
252
253 if(val == 2){
254 $html.find("#valTypeSpan"+key).addClass('hide');
255 $html.find("#formFieldSpan"+key).addClass('hide');
256 $html.find("#defaultValSpan"+key).addClass('hide');
257 $html.find("#sysValSpan"+key).addClass('hide');
258
259 $html.find("#attrTypeSpan"+key).removeClass('hide');
260 $html.find("#attrValSpan"+key).removeClass('hide');
261
262 if(!isAdd){
263 if(rowJson.valType != ''){
264 $html.find("#attrType"+key).val(rowJson.valType);
265 //值回显
266 if(rowJson.value != ''){
267 _this.changeAttrType($html, rowJson, key, rowJson.valType, isAdd);
268 }
269 }
270 }else{
271 rowJson.valType = $html.find("#attrType"+key).val();
272 rowJson.value = $html.find("#attrVal"+key).val();
273 options.data[key] = rowJson;
274 }
275
276 }else{
277 $html.find("#valTypeSpan"+key).removeClass('hide');
278 $html.find("#attrTypeSpan"+key).addClass('hide');
279 $html.find("#attrValSpan"+key).addClass('hide');
280
281 if(isAdd){
282 $html.find("#valType"+key).val(0);
283 this.changeValType($html, rowJson, key, 0, isAdd);
284 }else{
285 if(rowJson.valType != ''){
286 $html.find("#valType"+key).val(rowJson.valType);
287 //值回显
288 if(rowJson.value != ''){
289 this.changeValType($html, rowJson, key, rowJson.valType, isAdd);
290 }
291 }
292 }
293 }
294 options.data[key] = rowJson;
295 };
296 this.changeValType = function($html, rowJson, key, val, isAdd){
297 if(val == 0){
298 $html.find("#defaultValSpan"+key).removeClass('hide');
299 $html.find("#formFieldSpan"+key).addClass('hide');
300 $html.find("#sysValSpan"+key).addClass('hide');
301 if(isAdd){
302 rowJson.value = $html.find("#defaultVal"+key).val();
303 options.data[key] = rowJson;
304 }else{
305 $html.find("#defaultVal"+key).val(rowJson.value);
306 }
307
308 }else if(val == 1){
309 $html.find("#defaultValSpan"+key).addClass('hide');
310 $html.find("#formFieldSpan"+key).removeClass('hide');
311 $html.find("#sysValSpan"+key).addClass('hide');
312 if(isAdd){
313 rowJson.value = $html.find("#formField"+key).val();
314 options.data[key] = rowJson;
315 }else{
316 $html.find("#formField"+key).val(rowJson.value);
317 }
318 }else if(val == 2){
319 $html.find("#defaultValSpan"+key).addClass('hide');
320 $html.find("#formFieldSpan"+key).addClass('hide');
321 $html.find("#sysValSpan"+key).removeClass('hide');
322 if(isAdd){
323 rowJson.value = $html.find("#sysVal"+key).val();
324 options.data[key] = rowJson;
325 }else{
326 $html.find("#sysVal"+key).val(rowJson.value);
327 }
328
329 }
330 options.data[key] = rowJson;
331 };
332 this.changeAttrType = function($html, rowJson, key, val, isAdd){
333 if(isAdd){
334 rowJson.value = $html.find("#attrVal"+key).val();
335 }else{
336 $html.find("#attrVal"+key).val(rowJson.value);
337 }
338 options.data[key] = rowJson;
339
340 };
341 this.genFieldOption = function($html, key){
342 var targetSelect = $html.find("#target"+key);
343 var fieldSelect = $html.find("#formField"+key);
344 targetSelect.empty();
345 fieldSelect.empty();
346
347 var optDefault = '<option value="">请选择</option>';
348 targetSelect.append(optDefault);
349 fieldSelect.append(optDefault);
350
351 $.each(options.fields, function(i, item){
352 var option = '<option value="'+item.fieldName+'">'+item.title+'</option>';
353 targetSelect.append(option);
354 fieldSelect.append(option);
355 });
356
357 };
358 this.getData = function(){
359 var eventData = [];
360 for ( var k in options.data) {
361 var row = options.data[k];
362 eventData.push(row);
363 }
364 return eventData;
365 };
366 this.initData = function(data){
367 if(data == undefined || data == null){
368 return;
369 }
370 for (var k in data) {
371 var row = data[k];
372 if(row.type == '1'){
373 this.newLinkEvent(row);
374 }else if(row.type == '2'){
375 this.newGroupLinkEvent(row);
376 }
377 }
378 };
379 this.newGuid = function () {
380 var guid = "";
381 for (var i = 1; i <= 32; i++) {
382 var n = Math.floor(Math.random() * 16.0).toString(16);
383 guid += n;
384 // if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-";
385 }
386 return guid;
387 };
388
389 };
390
391 })(jQuery);
