多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
路径 D:\ireport365\ireport365.war\js\enduser\home\home.css 最下面添加 ~~~ .metadata-sql-visualization li.selected { /* background-color: #2990ea !important; color: #fff; */ border-bottom:2px solid #2990ea; color:#2990ea; } ~~~ 路径D:\ireport365\ireport365.war\template\metadata\table-database-visualization.html 这个改的比较多 比较杂 复制格式不好 直接发文件 ~~~ <div ng-controller="MetadataSqlVisualizationFormCtrl" ng-show="model == false"> <div class="modal-body metadata-sql metadata-sql-visualization" style="padding:0;"> <form class="form-horizontal" style="margin:0;margin-right: 0px;"> <div class="form-group" style="padding: 10px;margin-right: 0px; */"> <div class="col-md-4" style="padding: 0 10px;"> <div class="form-group"> <label class="col-xs-3 control-label" style="padding-left:0;padding-right:0;">{{vsLang.name}}<span class="required"> * </span></label> <div class="col-md-7"> <input ng-model="item.key" type="text" class="form-control" placeholder="" required/> </div> <div class="col-md-2" style="padding:0;padding-top:9px;"> <span style="color:#F0AD4E;cursor:pointer;" uib-tooltip="{{vsLang.table_name_format_desc_tip}}" tooltip-placement="top" tooltip-append-to-body="true"><i class="fa fa-exclamation-triangle"></i></span> </div> </div> <!-- <div class="form-group"> <label class="col-xs-3 control-label" style="padding-left:0;padding-right:0;">{{vsLang.description}}</label> <div class="col-md-7"> <input ng-model="item.title" type="text" class="form-control" placeholder="" /> </div> </div> --> <div class="form-group"> <label class="col-md-3 control-label" style="padding-left:0;padding-right:0;">{{vsLang.connection}}<span class="required"> * </span></label> <div class="col-md-7"> <select ng-change="onConnectionChanged(selectedConnection)" ng-options="option.name for option in availableConnections" ng-model="selectedConnection" class="form-control" style="text-align:left;font-size:12px;width:100%;border:1px solid #eee;color:#333;"> <option value="" disabled selected>选择数据连接</option> </select> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" style="padding-left:0;padding-right:0;">数据库表</label> <div class="col-md-9"> <div id="metadataTablesContainer" style="height: 180px;border:1px solid #EEEEEE;overflow-y:auto;"> <table class="doc-list-table" style="width:100%;table-layout: fixed;"> <tbody> <tr ng-repeat="item in tableInfos" ng-click="onItemClicked(item)"> <td style="min-width:20px;width:20px;"> <label style="cursor:pointer;"> <input type="checkbox" ng-model="selectedTables[item.tableName]" style="cursor:pointer;" ng-click="onItemClicked(item)"> </label> </td> <td> <div class="name" style="float:left;"> <span style="font-size:12px;color:#333;">{{item.tableName}}</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" style="padding-left:0;padding-right:0;">本地数据表</label> <div class="col-md-9"> <div id="metadataTablesContainer" style="height: 180px;border:1px solid #EEEEEE;overflow-y:auto;"> <table class="doc-list-table" style="width:100%;table-layout: fixed;"> <tbody> <tr ng-repeat="t in tableLocalInfos" ng-click="onItemClicked(t)" ng-if="item.id == null || (item.key != t.tableName)"> <td style="min-width:20px;width:20px;"> <label style="cursor:pointer;"> <input type="checkbox" ng-model="selectedTables[t.tableName]" style="cursor:pointer;" ng-click="onItemClicked(t)"> </label> </td> <td> <div class="name" style="float:left;"> <span style="font-size:12px;color:#333;">{{t.tableName}}</span> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-md-8" style="padding: 0;border:1px solid #EEEEEE;height: 452px;"> <ul style="left: 0;text-align: center;border-bottom: 1px solid #e0e0e0;padding: 0;width: 100%;margin: 0;display: inline-flex;background:#f7f8fa;"> <li style="cursor: pointer;display: block;width: 100px;height: 36px;line-height: 34px;overflow: hidden;" ng-click="onTableClicked('dataTable')" ng-class="{'selected' : showTable.dataTable}">查询数据表</li> <li style="cursor: pointer;display: block;width: 100px;height: 36px;line-height: 34px;overflow: hidden;" ng-click="onTableClicked('condition')" ng-class="{'selected' : showTable.condition}">查询条件</li> <li style="cursor: pointer;display: block;width: 100px;height: 36px;line-height: 34px;overflow: hidden;" ng-click="onTableClicked('columns')" ng-class="{'selected' : showTable.columns}">查询字段</li> </ul> <div id="selectedTableDataDiv" ng-show="showTable.dataTable"> <div class="col-md-12"> <div ng-repeat="t in selectedTableInfo track by $index"> <div ng-show="!$first" class="col-md-4" style="padding: 6px 0;padding-left:0px;margin-top:8px;"> <div class="col-md-3" style="height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;top:34px;"> </div> <div class="col-md-6" style="top: 20px;padding-left: 6px;" ng-click="openTableUnionExpressEditWindow($event, $index)"> <div style="padding: 4px 5px;padding-left:5px;font-size:12px;" class="btn btn-default"> <div style="white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{joinInfo==null ? vsLang.mode : joinInfo.selectedUnion}} <span class="caret" style="margin-left:4px;"></span> </div> </div> </div> <div class="col-md-3" style="height:1px;margin:0px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;top:34px;"> </div> </div> <div class="data-table col-md-4" style="padding: 6px 0;padding-left:8px;margin-top:8px;"> <table class="doc-list-table" style="width:100%;table-layout: fixed;border: 1px solid #EEEEEE;"> <thead> <tr> <th style="font-size:12px;color:#333;font-weight: normal;text-align: center;padding: 8px 8px;">数据表</th> </tr> </thead> <tbody> <tr> <td style="text-align: center;">{{t.tableName}}</td> </tr> </tbody> </table> </div> </div> </div> </div> <div id="selectedTableConditionDiv" ng-show="showTable.condition" style="overflow-y: auto;height: 410px;"> <div class="col-md-12"> <div style="background-color:#f7f8fa;padding: 6px 0;padding-left:8px;border:1px solid #eee;border-bottom:0;margin-top:8px;"> <span style="font-size:14px;color:#333;">过滤条件</span> <span style="float: right;height: 23px;line-height: 23px;margin-right: 10px;color:#333;">条件</span> <select ng-model="operationType" class="form-control" style="text-align:left;font-size:12px;border: none;float: right; width: 65px;padding: 0px;height: 20px;margin-right: 10px;"> <option value="and">全部</option> <option value="or">任意</option> </select> <span style="float: right;height: 23px;line-height: 23px;padding-right: 10px;color:#333;">符合下列</span> </div> <div class="operation" style="height: 42px; border: solid 1px #eee;" ng-repeat="item in operation"> <div style="height: 36px; margin: 2px;"> <div class="col-md-2" style="padding: 0px;margin-right:15px;margin-top:2px;"> <select ng-options="option.tableName for option in selectedTableInfo" ng-model="operation[$index].table" class="form-control" style="text-align:left;font-size:12px;width:100%;border:1px solid #eee;color:#333;padding: 0;"> <option value="" disabled selected>选择数据表</option> </select> </div> <div class="col-md-2" style="padding: 0px;margin-right:15px;margin-top:2px;"> <select ng-options="option.columnName for option in operation[$index].table.columns" ng-model="operation[$index].columnName" class="form-control" style="text-align:left;font-size:12px;width:100%;border:1px solid #eee;color:#333;padding: 0;"> <option value="" disabled selected>选择数据字段</option> </select> </div> <div class="col-md-2" style="padding: 0px;margin-right:15px;margin-top:2px;"> <select ng-options="option.name for option in comparOperation" ng-model="operation[$index].comparOperation" class="form-control" style="text-align:left;font-size:12px;width:100%;border:1px solid #eee;color:#333;padding: 0;"> <option value="" disabled selected>选择运算符</option> </select> </div> <div ng-show="operation[$index].comparOperation.type == 'input'" class="col-md-2" style="padding: 0px;"> <input ng-model="operation[$index].value" type="text" class="form-control" placeholder="" style="border:1px solid #eee;"/> </div> <div ng-show="operation[$index].comparOperation.type == 'betwwenInput'" class="col-md-4" style="padding: 0px;"> <input ng-model="operation[$index].value1" type="text" class="form-control" placeholder="" style="display: inline-block;width: 45%;border:1px solid #eee;border-bottom: none;" />- <input ng-model="operation[$index].value2" type="text" class="form-control" placeholder="" style="display: inline-block;width: 45%;border:1px solid #eee;border-bottom: none;" /> </div> <button ng-show="operation[$index].comparOperation.type != null && operation[$index].comparOperation.type != 'null'" class="btn btn-default" style="border:0;color:#333; height: 34px;padding: 6px;" ng-click="openSelectColumnWindow($index, operation[$index].comparOperation.type)" title="动态SQL"> <!-- <span class="fa fa-code"></span>--> <span style="text-decoration: underline; color: #2990ea;">参数</span> </button> <button class="btn btn-default" style="border:0;color:#333; height: 34px; float: right;padding: 6px;" ng-click="removeOperation($index)" title="删除条件"> <span class="fa fa-remove"></span> </button> <button ng-show="$index == operation.length-1" class="btn btn-default" style="border:0;color:#333; height: 34px; float: right;padding: 6px;" title="添加条件" ng-click="addOperation();"> <span class="fa fa-plus"></span> </button> </div> </div> <div style="background-color:#f7f8fa;padding: 6px 0;padding-left:8px;border:1px solid #eee;border-bottom:0;margin-top:17px;"> <span style="font-size:14px;color:#333;">数据权限过滤</span> </div> <div class="dataPermission" style="text-align: left;margin-top:10px;color:#333;"> <ui-select multiple sortable="true" close-on-select="false" ng-model="$parent.dataPermission" theme="select2" ng-disabled="disabled" style="width:50%;"> <ui-select-match style="color:#333;" placeholder="添加权限">{filter:{{$item}}}</ui-select-match> <ui-select-choices repeat="item in availablePermissionColumns | filter:$select.search"> <span ng-bind-html="item | highlight: $select.search"></span> </ui-select-choices> </ui-select> </div> <div style="background-color:#f7f8fa;padding: 6px 0;padding-left:8px;border:1px solid #eee;border-bottom:0;margin-top:37px;"> <span style="font-size:14px;color:#333;">分组计算</span> </div> <div class="groupOperation" style="text-align: center;"> <div class="col-md-4" style="padding: 0px;"> <div style="padding: 6px 0;padding-left:8px;border:1px solid #eee;"> <span style="font-size:14px;color:#333;">分组字段</span> </div> <div style="height: auto; border: solid 1px #eee;margin-top:15px;width: 90%;color:#333;"> <ui-select multiple sortable="true" close-on-select="false" ng-model="$parent.selectedGroupByColumns" theme="select2" ng-disabled="disabled" style="width:100%;"> <ui-select-match style="color:#333;" placeholder="选择字段">{{$item.columnName}}</ui-select-match> <ui-select-choices repeat="item in groupByColumns | filter:$select.search"> <span ng-bind-html="item.columnName | highlight: $select.search"></span> </ui-select-choices> </ui-select> </div> </div> <div class="col-md-8" style="padding: 0px;"> <div style="padding: 6px 0;padding-left:8px;border-bottom:0;border:1px solid #eee;"> <span style="font-size:14px;color:#333;">添加函数</span> </div> <div style="height: 42px;"> <div class="col-md-3" style="border:1px solid #eee;padding: 6px 0;padding-left:8px;"> <span style="font-size:12px;color:#333;">函数</span> </div> <div class="col-md-4" style="border:1px solid #eee;padding: 6px 0;padding-left:8px;"> <span style="font-size:12px;color:#333;">字段</span> </div> <div class="col-md-3" style="border:1px solid #eee;padding: 6px 0;padding-left:8px;"> <span style="font-size:12px;color:#333;">别名</span> </div> <div class="col-md-2" style="border:1px solid #eee;padding: 6px 0;padding-left:8px;"> <span style="font-size:12px;color:#333;">操作</span> </div> </div> <div style="height: 42px;" ng-repeat="item in functionInfos"> <div class="col-md-3" style="padding: 6px 0;padding-left:8px;"> <select ng-model="functionInfos[$index].funType" class="form-control" style="text-align:left;font-size:12px;border: none;float: right; padding: 0px;height: 30px;margin-right: 6px;border:1px solid #eee;"> <option value="COUNT">计数</option> <option value="AVG">平均值</option> <option value="SUM">总值</option> <option value="MAX">最大值</option> <option value="MIN">最小值</option> </select> </div> <div class="col-md-4" style="padding: 6px 0;padding-left:8px;"> <select ng-if="functionInfos[$index].funType != 'COUNT'" ng-model="functionInfos[$index].funColumn" ng-options="option.columnName for option in groupByColumns" class="form-control" style="text-align:left;font-size:12px;border: none;float: right;padding: 0px;height: 30px;margin-right: 6px;border:1px solid #eee;"> </select> <span ng-if="functionInfos[$index].funType == 'COUNT'" style="font-size:14px;color:#333;">1</span> </div> <div class="col-md-3" style="padding: 0;padding-left:8px;"> <input ng-model="functionInfos[$index].showName" type="text" class="form-control" placeholder="" style="border:1px solid #eee;margin-top: 6px;height: 30px;margin-right:5px;"/> </div> <div class="col-md-2" style="padding: 0;padding-left:8px;border: 1px solid #eee;margin-top:6px;height:30px;"> <button class="btn btn-default" style="border:0;color:#333; height: 28px; float: right;padding: 6px;" ng-click="removeFunctions($index)" title="删除函数"> <span class="fa fa-remove"></span> </button> <button ng-show="$index == functionInfos.length-1" class="btn btn-default" style="border:0;color:#333; height: 28px; float: right;padding: 6px;" ng-click="addFunctions();" title="添加函数"> <span class="fa fa-plus"></span> </button> </div> </div> </div> </div> </div> <!-- <div class="col-md-3" style="padding: 0 10px;"> <div style="background-color:#F0F0F0;padding: 6px 0;padding-left:8px;border:1px solid #eee;border-bottom:0;margin-top: 8px;"> <span style="font-size:14px;color:#999;">{{vsLang.data_permission_column_list}}</span> </div> <div id="metadataTableTestSqlEditorContainer" style="height: 220px;border:1px solid #EEEEEE;overflow-y:auto;"> <div ng-repeat="item in availablePermissionColumns" class="role-column-row" ng-class="{}" ng-click="onRoleColumnItemClicked(item)"> <span style="padding:0 5px;">{{item}}</span> </div> </div> </div> --> </div> <div id="selectedTableColumnsDiv" ng-show="showTable.columns" style="overflow-y: auto; height: 410px;"> <div class="col-md-12" ng-repeat="t in selectedTableInfo track by $index"> <div style="background-color:#F0F0F0;padding: 6px 0;padding-left:8px;border:1px solid #eee;border-bottom:0;margin-top:8px;"> <span style="font-size:14px;color:#333;">{{t.tableName}}</span> </div> <table class="doc-list-table" style="width:100%;table-layout: fixed;border: 1px solid #EEEEEE;"> <thead> <tr> <th style="width:30px;padding-left:0;padding-right:0;text-align:center;"> <label style="cursor:pointer;" ng-click2="onSelectColumnsAllClicked(t)" ng-init="onInitSelectColumnsAllClicked(t)"> <input type="checkbox" ng-model="selectColumnsAll[t.tableName]" style="cursor:pointer;" ng-click="onSelectColumnsAllClicked(t)"> </label> </th> <th style="font-size:12px;color:#333;font-weight: normal;">字段名称</th> <th style="font-size:12px;color:#333;font-weight: normal;">显示名称</th> </tr> </thead> <tbody> <tr ng-repeat="c in t.columns" > <td style="padding-left:0;padding-right:0;text-align:center;" ng-click="onColumnsClicked(t, c)"> <label style="cursor:pointer;" > <input type="checkbox" ng-model="selectedColumns[t.tableName + '.' + c.columnName]" style="cursor:pointer;" ng-click="onColumnsClicked(t, c, 0)"> </label> </td> <td ng-click="onColumnsClicked(t, c)"> <div class="name">{{c.columnName}}</div> </td> <td> <input type="text" ng-model="tableColumns[t.tableName + '.' + c.columnName]" style="cursor:pointer;" /> </td> </tr> </tbody> </table> </div> </div> </div> </div> </form> </div> <div class="modal-footer" style="padding: 10px 15px;"> <button class="btn btn-default" ng-click="runScript()">{{vsLang.run_script}}</button> <button class="btn btn-default" ng-click="previewData()">{{vsLang.view_data}}</button> <button class="btn btn-success" style="background:#1881dc;border-color:#1881dc;" ng-click="nextStep()">{{vsLang.next}}</button> <button class="btn btn-default" ng-click="dismissWindow()">{{vsLang.cancel}}</button> </div> </div> <script type="text/ng-template" id="tableUnionSetting.html"> <div class="modal-header" style="padding: 10px 15px;"> <h4>编辑关联方式</h4> </div> <div class="modal-body" style="padding-top:10px;max-height: 100px;height:30%;"> <div class="form-group col-md-12"> <label class="col-md-2 control-label" style="padding-left:0;padding-right:0;text-align: right;line-height: 34px;font-weight: normal;">关联方式</label> <div class="col-md-8"> <select ng-change="onUnionChanged(selectedUnion)" ng-model="selectedUnion" class="form-control" style="text-align:left;font-size:12px;width:100%;border:1px solid #eee;color:#000;"> <option value="" disabled selected>选择关联方式</option> <option>内连接</option> <option>左连接</option> <option>右连接</option> </select> </div> </div> <div class="form-group col-md-12"> <label class="col-md-3 control-label" style="padding-left:0;padding-right:0;text-align: right;line-height: 34px;font-weight: normal;">{{table1.tableName}}</label> <div class="col-md-2"> <select ng-change="onTableChanged(table1, selectedTable1)" ng-options="option.columnName for option in table1.columns" ng-model="selectedTable1" class="form-control" style="text-align:left;font-size:12px;border:1px solid #eee;color:#000;padding: 0;"> </select> </div> <div class="col-md-1" style="top:9px;">=</div> <label class="col-md-3 control-label" style="padding-left:0;padding-right:0;text-align: right;line-height: 34px;font-weight: normal;">{{table2.tableName}}</label> <div class="col-md-2"> <select ng-change="onTableChanged(table2, selectedTable2)" ng-options="option.columnName for option in table2.columns" ng-model="selectedTable2" class="form-control" style="text-align:left;font-size:12px;border:1px solid #eee;color:#000;padding: 0;"> </select> </div> </div> </div> <div class="modal-footer" style="padding: 10px 15px;"> <button class="btn btn-success" ng-click="save()">{{vsLang.save}}</button> <button type="button" class="btn btn-default" ng-click="dismissWindow()">{{vsLang.cancel}}</button> </div> </script> <script type="text/ng-template" id="sqlColumnListPickerModal.html"> <div class="modal-header" style="padding: 8px 15px;"> <h4>选择字段</h4> <div style="float:right;margin-top:-35px;margin-right:5px;"> <div class="btn-group"> <div class="input-group" style="width:200px;"> <input ng-change="onFilterQueryChange()" ng-model="filter.query" type="text" class="form-control" placeholder="{{vsLang.search_column}}"> <span class="input-group-btn"> <button ng-click="search()" class="btn btn-default" type="button"><i class="fa fa-search" style="height:20px;line-height:20px;"></i></button> </span> </div> </div> </div> </div> <div class="modal-body user-mgt-list" style="padding:0;height:60%;overflow-y:auto;"> <div style="height:100px;line-height:100px;text-align:center;color:#333;" ng-show="columns.length == 0">没有找到任何字段</div> <table ng-show="columns.length > 0" class="doc-list-table" style="width:100%;"> <thead> <th style="min-width:20px;width:20px;"> </th> <th width="50%">字段名</th> <th width="50%">显示名</th> </thead> <tbody> <tr ng-repeat="item in columns" ng-style="{'background-color': selectedColumn.name === item.name ? '#F6F7FB':''}" ng-click="onItemClicked(item)" ng-mouseover="hoverIn(item)" ng-mouseleave="hoverOut(item)"> <td> <label style="margin-left:10px;cursor:pointer;"> <input type="checkbox" ng-model="selectedColumnMap[item.name]" style="cursor:pointer;"> </label> </td> <td> <div class="name"> {{item.name}} </div> </td> <td>{{item.label}}</td> </tr> </tbody> </table> </div> <div class="modal-footer" style="padding: 10px 15px;"> <button class="btn btn-success" ng-click="confirm()">保存</button> <button class="btn btn-default" ng-click="dismissWindow()">取消</button> </div> </script> ~~~