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; 150px;"> 22 <select class="form-control" id="target#key#"> 23 </select> 24 </span> 25 <span class="input-group-addon-center" style="padding: 0; 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; 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; 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; 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; 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; 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; 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; 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; 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);