<?xml version="1.0" encoding="UTF-8"?> <a:screen xmlns:a="http://www.leaf-framework.org/application" trace="true"> <a:init-procedure> <model-query autoCount="false" fetchAll="true" model="zjwfl.zj_wfl_graphics" rootPath="_graphics_main"/> <model-query autoCount="false" fetchAll="true" model="zjwfl.zj_wfl_graphics_detail" rootPath="_graphics_nodes"/> </a:init-procedure> <a:view> <a:link id="_graphics_choose_window_url" url="${/request/@context_path}/modules/zjwfl/zj_wfl_graphics_editor_choose.lview"/> <style><![CDATA[ .graphic_tool{ border:1px solid #CCC; background-color:#EEE; cursor:pointer; overflow:visible; } .graphic_background .win-content{ background-color:#CCC; overflow:auto; } ]]></style> <script type="text/javascript"><![CDATA[ var ___title_field = "node_desc", isNew = true; function _graphics_onSaveSuccess() { } function _graphics_getConfig(record) { return Ext.util.JSON.decode('{' + ((record.get ? record.get('config') : record) || '').replace(/^{|}$/g, '').toLowerCase() + '}'); } function _graphics_onMove(el, ds, record) { _graphics_onIndexChange(ds, record); } function _graphics_onDrop(el, ds, x, y) { var main = Ext.get('_graphics_main'); var config = _graphics_getConfig(ds.data[0]); var w = config.width; var h = config.height; var sw = main.getWidth(); var sh = main.getHeight(); if (x < 0) x = 0; if (x + w > sw - 2) x = sw - 2 - w; if (y < 0) y = 0; if (y + h > sh - 2) y = sh - 2 - h; var records = ds.getAll(); for (var i = 0;i < records.length;i++) { var data = {}, r = records[i]; var config = _graphics_getConfig(r); config.x = x; config.y = y; config.moveable = true; data.config = Ext.util.JSON.encode(config); data.type = r.get('type'); var record = $('_graphics_nodes_ds').create(data); } } function _graphics_onFocus(e, el, ds, record) { if (ds && record) { ds.locate(ds.getAll().indexOf(record) + 1); } } function _graphics_onChange(el, value) { var record = $('_graphics_nodes_ds').getCurrentRecord(); var attr = el.id.split('_')[1]; if (attr == 'type') { record.set('type', value); } else { var config = _graphics_getConfig(record); if (attr == 'moveable') { value = value == 'Y' ? false : true; } else if (attr == 'startarrow' || attr == 'endarrow') { value = value == 'Y' ? "classic" : ""; }else if(attr == 'image'){ value = '${/request/@context_path}'+value; } config[attr] = value; record.set('config', Ext.util.JSON.encode(config).replace(/^{|}$/g, '')); } //$('_graphics_main').resizeSVG(); } function _graphics_onUpdate(ds, record, name, value) { if (name == 'type') { if (!value) { record.set('type', 'rect'); } else if (value == 'oval' || value == 'diamond'|| value == 'image') { _graphics_hide(['rx', 'ry','image']); if(value == 'image') _graphics_show(['image']); } else { var record = ds.getCurrentRecord(); var config = _graphics_getConfig(record); if (!config.height || !config.width) { config.height = config.ry * 2; config.width = config.rx * 2; config.rx = 0; config.ry = 0; record.set('config', Ext.util.JSON.encode(config).replace(/^{|}$/g, '')) } $('attr_rx').setValue(config.rx || 0, true); $('attr_ry').setValue(config.ry || 0, true); _graphics_show(['rx', 'ry']); } } else if (name == 'config') { setTimeout(function(){ var config = _graphics_getConfig(record.get('config')); $('attr_points').setValue(config.points, true); },5); } } function _graphics_show(id, hide) { if (Ext.isArray(id)) { while (id.length) { _graphics_show(id.pop(), hide); } } else { Ext.get('attr_'+id).parent('tr').setStyle('display', hide ? 'none' : ''); } } function _graphics_hide(id) { _graphics_show(id, true); } function _graphics_onIndexChange(ds, record) { Ext.get('attr_list').setStyle('display', ''); var config = _graphics_getConfig(record); var type = record.get('type'); if (type == 'line') { _graphics_show(['points', 'startarrow', 'endarrow']); _graphics_hide(['type', 'width', 'height', 'rx', 'ry', 'x', 'y', 'fillcolor', 'fillopacity', 'moveable','image']); $('attr_points').setValue(config.points, true); $('attr_startarrow').setValue( !! config.startarrow, true); $('attr_endarrow').setValue( !! config.endarrow, true); }else if(type=='zLine'){ _graphics_show(['points']); $('attr_points').initReadOnly(true); $('attr_points').setValue(config.points, true); _graphics_hide(['startarrow', 'endarrow','type', 'width', 'height', 'rx', 'ry', 'x', 'y', 'fillcolor', 'fillopacity', 'moveable','image']); } else { _graphics_show(['type', 'width', 'height', 'x', 'y', 'fillcolor', 'fillopacity', 'moveable']); _graphics_hide(['points', 'startarrow', 'endarrow', 'rx', 'ry','image']); $('attr_type').setValue(type, true); if (type == 'oval') { $('attr_width').setValue(config.rx * 2, true); $('attr_height').setValue(config.ry * 2, true); } else if (type == 'rect') { _graphics_show(['rx', 'ry']); $('attr_rx').setValue(config.rx, true); $('attr_ry').setValue(config.ry, true); }else if(type == 'image'){ _graphics_show(['image']); $('attr_image').setValue((config.image||'').replace(/^\${/request/@context_path}/,''),true); } $('attr_width').setValue(config.width, true); $('attr_height').setValue(config.height, true); $('attr_x').setValue(config.x, true); $('attr_y').setValue(config.y, true); $('attr_fillcolor').setValue(config.fillcolor, true); $('attr_fillopacity').setValue(config.fillopacity, true); $('attr_moveable').setValue(!config.moveable, true); } $('attr_strokecolor').setValue(config.strokecolor, true); $('attr_strokewidth').setValue(config.strokewidth, true); $('attr_strokeopacity').setValue(config.strokeopacity, true); $('attr_title').setValue(config.title, true); $('attr_titlex').setValue(config.titlex, true); $('attr_titley').setValue(config.titley, true); $('attr_titlecolor').setValue(config.titlecolor, true); $('attr_titlesize').setValue(config.titlesize, true); } function _graphics_remove() { $('_graphics_main').remove(); } function _graphics_save() { var main = $('_graphics_main_ds'); if (main.validate()) { main.submit(); } } function _graphics_choose(){ new $L.Window({ id:'_graphics_choose_window', title:'请选择', url:$('_graphics_choose_window_url').getUrl(), params : { workflow_id:'${/parameter/@workflow_id}' }, width:750, height:380 }); } function _graphics_exit(){ $('zj_wfl_graphics_editor').close(); } function _graphics_pre() { $('_graphics_nodes_ds').pre(); } function _graphics_next() { $('_graphics_nodes_ds').next(); } function _graphics_onMainUpdate(ds, record, name, value) { var panel = Ext.get('_graphics_main'); if (panel) { if (name == 'height' || name == 'width') { panel.setStyle(name, value + 'px'); } else { record = ds.getCurrentRecord(); var width = record.get('width') + 'px', height = record.get('height') + 'px'; panel.setStyle({ 'width': width, 'height': height }); } } } function _line_onMouseDown(e, el, ds) { var line = Ext.get('_graphics_line'), panel = $('_graphics_main'); if (!panel.candrawline) { _line_onMouseOver(); line.on('mouseout', _line_onMouseOut, window); line.on('mouseover', _line_onMouseOver, window); Ext.get(document).on('mouseup', _line_onMouseUp, window); } else { _line_onMouseOut(); } } function _line_onMouseUp(e, el, ds) { var line = Ext.get('_graphics_line'); line.un('mouseout', _line_onMouseOut, window); line.un('mouseover', _line_onMouseOver, window); Ext.get(document).un('mouseup', _line_onMouseUp, window); } function _line_onMouseOut() { var line = Ext.get('_graphics_line'), panel = $('_graphics_main'); panel.candrawline = false; line.setStyle('background-color', ''); } function _line_onMouseOver() { var line = Ext.get('_graphics_line'), panel = $('_graphics_main'); panel.candrawline = true; line.setStyle('background-color', 'white'); } function _graphics_onDrawn() { _line_onMouseOut(); } function _graphics_process_function(datas){ var d=[]; for (var i = 0,l = datas.length;i < l;i++) { var r = datas[i], config = r.config; if(config){ d.push(r); isNew = false; } } if(isNew){ d.push({ config: 'moveable:true,fillColor:"#66FF66",width:60,height:60,strokeWidth:1,strokeColor:"#808080",x:10,y:10,titleX:15,titleY:63,titleColor:"black",titleSize:14,title:"开始",image:"${/request/@context_path}/images/zjwfl/wfl_start.jpg"', type: 'image', table_id: 0 },{ config: 'moveable:true,fillColor:"#FF6666",width:60,height:60,strokeWidth:1,strokeColor:"#808080",x:530,y:230,titleX:15,titleY:63,titleColor:"black",titleSize:14,title:"结束",image:"${/request/@context_path}/images/zjwfl/wfl_stop.jpg"', type: 'image', table_id: -1 }) } return d; } function _graphics_onLoad(dataset){ if (isNew) { dataset.find('table_id',0).isNew = dataset.find('table_id',-1).isNew = true; } } function _graphics_onDblClick(e,el,ds,record){ if(record){ var node_type = record.get('node_type'); if (node_type == "NORMAL_NODE" || node_type == "BRANCH_NODE" || node_type == "VIRTUAL_NODE"){ winOpen_node_edit(record.get('table_id'),record.get('node_type')); } } } ]]></script> <a:dataSets> <a:dataSet id="_graphics_rect_ds"> <a:datas> <a:record config="width:90,height:50,rx:5,ry:5,fillOpacity:1,fillColor:'#f5f5f5',strokeColor:'#808080',strokeWidth:1,strokeOpacity:1,x:5,y:5,titleColor:'black',titleX:30,titleY:15,titleSize:14" type="rect"/> </a:datas> </a:dataSet> <a:dataSet id="_graphics_oval_ds"> <a:datas> <a:record config="fillOpacity:1,fillColor:'#f5f5f5',strokeColor:'#808080',strokeWidth:1,strokeOpacity:1,x:5,y:5,width:90,height:50,titleColor:'black',titleX:30,titleY:15,titleSize:14" type="oval"/> </a:datas> </a:dataSet> <a:dataSet id="_graphics_diamond_ds"> <a:datas> <a:record config="width:90,height:50,fillOpacity:1,fillColor:'#f5f5f5',strokeColor:'#808080',strokeWidth:1,strokeOpacity:1,x:5,y:5,titleColor:'black',titleX:30,titleY:15,titleSize:14" type="diamond"/> </a:datas> </a:dataSet> <a:dataSet id="_graphics_image_ds"> <a:datas> <a:record config="width:64,height:64,x:5,y:5,titleColor:'black',titleX:30,titleY:63,titleSize:14" type="image"/> </a:datas> </a:dataSet> <a:dataSet id="_graphics_line_ds"> <a:datas> <a:record config="strokeColor:'#aaaaaa',strokeWidth:2,strokeOpacity:1,points:'5,55 45,25 55,35 95 5',endArrow:'classic',titleColor:'black',titleX:30,titleY:15,titleSize:14" type="line"/> </a:datas> </a:dataSet> <a:dataSet id="_graphics_main_ds" autoCreate="true" submitUrl="${/request/@context_path}/modules/zjwfl/zj_wfl_graphics_update.lsc"> <a:datas dataSource="/model/_graphics_main"/> <a:fields> <a:field name="graphic_code" prompt="图形代码" required="true"/> <a:field name="graphic_name" prompt="图形名称" required="true"/> <a:field name="height" defaultValue="320" prompt="高度"/> <a:field name="width" defaultValue="600" prompt="宽度"/> <a:field name="workflow_id" defaultValue="${/parameter/@workflow_id}"/> </a:fields> <a:events> <a:event name="update" handler="_graphics_onMainUpdate"/> <a:event name="load" handler="_graphics_onMainUpdate"/> <a:event name="add" handler="_graphics_onMainUpdate"/> <a:event name="submitsuccess" handler="_graphics_onSaveSuccess"/> </a:events> </a:dataSet> <a:dataSet id="_graphics_nodes_ds" bindName="result_ds" bindTarget="_graphics_main_ds" model="zjwfl.zj_wfl_graphics_detail" processFunction="_graphics_process_function"> <a:datas dataSource="/model/_graphics_nodes"/> <a:fields> <a:field name="type" defaultValue="rect"/> <a:field name="config"/> </a:fields> <a:events> <a:event name="indexchange" handler="_graphics_onIndexChange"/> <a:event name="update" handler="_graphics_onUpdate"/> <a:event name="remove" handler="_graphics_onSaveSuccess"/> <a:event name="load" handler="_graphics_onLoad"/> </a:events> </a:dataSet> <a:dataSet id="_graphics_attr_ds"> <a:fields> <a:field name="type" displayField="name" options="_graphics_type_ds" prompt="类型" returnField="type" valueField="value"/> </a:fields> </a:dataSet> <a:dataSet id="_graphics_type_ds"> <a:datas> <a:record name="rect" value="rect"/> <a:record name="oval" value="oval"/> <a:record name="diamond" value="diamond"/> <a:record name="image" value="image"/> </a:datas> </a:dataSet> </a:dataSets> <a:screenBody> <table> <tr> <td valign="top"> <a:vBox style="border:1px solid #000;background-color:#EEE;"> <a:graphic id="_graphics_line" bindTarget="_graphics_line_ds" className="graphic_tool" height="60" width="100"> <a:events> <a:event name="mousedown" handler="_line_onMouseDown"/> </a:events> </a:graphic> <!-- <a:graphic id="_graphics_rect" bindTarget="_graphics_rect_ds" className="graphic_tool" dropTo="_graphics_main" height="60" width="100"><![CDATA[ ]]></a:graphic> <a:graphic id="_graphics_oval" bindTarget="_graphics_oval_ds" className="graphic_tool" dropTo="_graphics_main" height="60" width="100"><![CDATA[ ]]></a:graphic> <a:graphic id="_graphics_diamond" bindTarget="_graphics_diamond_ds" className="graphic_tool" dropTo="_graphics_main" height="60" width="100"><![CDATA[ ]]></a:graphic> --> <a:hBox> <a:button click="_graphics_pre" text="上一个" width="25"/> <a:button click="_graphics_next" text="下一个" width="25"/> </a:hBox> <a:button click="_graphics_remove" text="删除" width="100"/> <a:button click="_graphics_save" text="保存" width="100"/> <a:button click="_graphics_exit" text="返回" width="100"/> <a:button click="_graphics_choose" text="添加节点" width="100"/> </a:vBox> </td> <td valign="top"> <a:graphic name="table_id" id="_graphics_main" bindTarget="_graphics_nodes_ds" editable="true" height="${/model/_graphics_main/record/@height}" style="border:1px solid #000;background-color:#fff" width="${/model/_graphics_main/record/@width}"> <a:events> <a:event name="drop" handler="_graphics_onDrop"/> <a:event name="focus" handler="_graphics_onFocus"/> <a:event name="move" handler="_graphics_onMove"/> <a:event name="drawn" handler="_graphics_onDrawn"/> <a:event name="dblclick" handler="_graphics_onDblClick"/> </a:events> </a:graphic> </td> <td valign="top"> <a:vBox padding="0"> <a:form style="border:1px solid #000;margin-bottom:3px" title="画板属性" width="160"> <a:textField name="graphic_code" bindTarget="_graphics_main_ds" width="70"><![CDATA[ ]]></a:textField> <a:textField name="graphic_name" bindTarget="_graphics_main_ds" width="70"><![CDATA[ ]]></a:textField> <a:numberField name="width" allowDecimals="false" allowNegative="false" bindTarget="_graphics_main_ds" width="70"><![CDATA[ ]]></a:numberField> <a:numberField name="height" allowDecimals="false" allowNegative="false" bindTarget="_graphics_main_ds" prompt="高度" width="70"><![CDATA[ ]]></a:numberField> </a:form> <a:accordionPanel id="attr_list" height="310" style="border:1px solid #000;display:none" width="159"> <a:accordions> <a:accordion prompt="标题" selected="true" width="40"> <a:vBox labelWidth="90"> <a:textField id="attr_title" prompt="标题" width="60"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textField> <a:numberField id="attr_titlesize" allowDecimals="false" prompt="标题字体大小" width="60"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:textField id="attr_titlecolor" prompt="标题字体颜色" width="60"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textField> <a:numberField id="attr_titlex" allowDecimals="false" prompt="标题x轴坐标" width="60"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_titley" allowDecimals="false" prompt="标题y轴坐标" width="60"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> </a:vBox> </a:accordion> <a:accordion prompt="布局" width="40"> <a:vBox> <a:textArea id="attr_points" height="180" prompt="端点坐标集" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textArea> <a:numberField id="attr_width" allowDecimals="false" allowNegative="false" prompt="宽度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_height" allowDecimals="false" allowNegative="false" prompt="高度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_x" allowDecimals="false" allowNegative="false" prompt="x轴坐标" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_y" allowDecimals="false" allowNegative="false" prompt="y轴坐标" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_rx" allowDecimals="false" allowNegative="false" prompt="倒角水平宽度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_ry" allowDecimals="false" allowNegative="false" prompt="倒角垂直宽度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> </a:vBox> </a:accordion> <a:accordion prompt="渲染" width="40"> <a:vBox> <a:textField id="attr_fillcolor" prompt="填充颜色" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textField> <a:numberField id="attr_fillopacity" allowNegative="false" decimalPrecision="1" prompt="填充透明度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:textField id="attr_strokecolor" prompt="边框颜色" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textField> <a:numberField id="attr_strokewidth" allowDecimals="false" allowNegative="false" prompt="边框宽度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> <a:numberField id="attr_strokeopacity" allowNegative="false" decimalPrecision="1" prompt="边框透明度" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:numberField> </a:vBox> </a:accordion> <a:accordion prompt="其他" width="40"> <a:vBox> <a:comboBox name="type" id="attr_type" bindTarget="_graphics_attr_ds" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:comboBox> <a:textField id="attr_image" prompt="图片路径" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:textField> <a:checkBox id="attr_moveable" prompt="固定" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:checkBox> <a:checkBox id="attr_startarrow" prompt="开始箭头" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:checkBox> <a:checkBox id="attr_endarrow" prompt="结束箭头" width="70"> <a:events> <a:event name="change" handler="_graphics_onChange"/> </a:events> </a:checkBox> </a:vBox> </a:accordion> </a:accordions> </a:accordionPanel> </a:vBox> </td> </tr> </table> </a:screenBody> </a:view> </a:screen>