以前的報表頁設置控制器---做個記錄 · 代碼梳理

``` <div ng-init="initCtrl()" ng-controller="RightPannelCtrl">  <div class="gx-page-right" pageslide ps-open="false" ps-speed="0.3" ps-size="rightSidePanelWidth()">  <div class="gx-bb-item">  <h4 class="gx-item-title">標題通用設置</h4>  <div class="gx-font-item"> <div class="gx-bt" style="line-height:30px;"> <span>字體顏色</span> </div> <div class="gx-con"> <div> <input minicolors="{control: 'brightness',theme: 'bootstrap',position: 'bottom right'}" id="color-input" class="form-control" type="text" ng-model="defaultColor"> </div> </div> </div>  <div class="gx-font-item"> <div class="gx-bt" style="line-height:30px;"> <span>標題背景</span> </div> <div class="gx-con"> <div> <input minicolors="{control: 'brightness',theme: 'bootstrap',position: 'bottom right'}" id="color-input" class="form-control" type="text" ng-model="defaultBackground"> </div> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <div class="prop-label-cell">字體大小</div> </div> <div class="gx-bt-slide"> <div slider ng-model="defaultFontSize" start={{0}} end={{100}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input"> <input ng-model="defaultFontSize" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <div class="prop-label-cell">字體</div> </div> <div class="gx-select" > <ui-select ng-model="defaultFont" theme="selectize" ng-disabled="disabled" ng-change="onSelect(defaultFont)"> <ui-select-match>{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="item in availableFontFamilies | filter: $select.search"> <span ng-bind-html="item.name | highlight: $select.search"></span> </ui-select-choices> </ui-select> </div> </div> </div>  <div class="gx-bb-item"> <h4>報表背景</h4>  <div class="gx-font-item"> <div class="gx-bt"> <span>背景漸變</span> </div> <div class="gx-con" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.GradualChange" style="border:1px solid #bbb;" on-label="開啟" off-label="關閉"></toggle-switch> </div> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.GradualChange"> <div class="gx-bt" style="line-height:30px;"> <span>色值(1)</span> </div> <div class="gx-con"> <div> <input minicolors="{control: 'brightness',theme: 'bootstrap',position: 'bottom right'}" class="form-control" type="text" ng-model="configingReportPage.config.backgroundOne"> </div> </div> </div> <div class="gx-font-item" ng-show="configingReportPage.config.GradualChange"> <div class="gx-bt" style="line-height:30px;"> <span>色值(2)</span> </div> <div class="gx-con"> <div> <input minicolors="{control: 'brightness',theme: 'bootstrap',position: 'bottom right'}" class="form-control" type="text" ng-model="configingReportPage.config.backgroundTow"> </div> </div> </div> <div class="gx-font-item" ng-show="configingReportPage.config.GradualChange"> <div class="gx-bt"> <div class="prop-label-cell">漸變角度</div> </div> <div class="gx-bt-slide"> <div slider ng-model="configingReportPage.config.backgrouneDeg" start={{0}} end={{360}} step=0 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input"> <input ng-model="configingReportPage.config.backgrouneDeg" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div> <div class="gx-font-item"> <div class="gx-bt" style="line-height:30px;"> <span>背景色</span> </div> <div class="gx-con"> <div> <input minicolors="{control: 'brightness',theme: 'bootstrap',position: 'bottom right'}" class="form-control" type="text" ng-model="configingReportPage.config.backgroundColor"> </div> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <div class="prop-label-cell">背景圖片</div> </div> <div class="gx-con"> <input readonly="readonly" placeholder="{{vsLang.choose_image}}" class="form-control gx-con-ch-img" ng-model="backgroundImg" type="text" ng-click="openAttachmentPickerWindowPage()"> <a ng-show="backgroundImg" href="javascript:void(0);" class="gx-del-bg" ng-click="cleanAttachmentImage()">x</a> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> 圖片方向 </div> <div class="gx-con"> <div ng-class="{'btn-group': true, 'en-text':vsLang.locale==='en_US'}"> <label class="gx-con-label" ng-model="bgRepeat" ng-click="changeRepeat('repeat')" ng-class="{'active': bgRepeat === 'repeat_both'}" uib-btn-radio="'repeat'" uib-tooltip="{{vsLang.repeat_both_tip}}" tooltip-placement="top" tooltip-append-to-body="true"> <span>{{vsLang.repeat_both}}</span> </label> <label class="gx-con-label" ng-model="bgRepeat" ng-click="changeRepeat('repeat-x')" ng-class="{'active': bgRepeat === 'repeat_x'}" uib-btn-radio="'repeat-x'" uib-tooltip="{{vsLang.repeat_x_tip}}" tooltip-placement="top" tooltip-append-to-body="true" > <span>{{vsLang.repeat_x}}</span> </label> <label class="gx-con-label" ng-model="bgRepeat" ng-click="changeRepeat('repeat-y')" ng-class="{'active': bgRepeat === 'repeat_y'}" uib-btn-radio="'repeat-y'" uib-tooltip="{{vsLang.repeat_y_tip}}" tooltip-placement="top" tooltip-append-to-body="true" > <span >{{vsLang.repeat_y}}</span> </label> <label class="gx-con-label" ng-model="bgRepeat" ng-click="changeRepeat('no-repeat')" ng-class="{'active': bgRepeat === 'repeat_none'}" uib-btn-radio="'no-repeat'" uib-tooltip="{{vsLang.repeat_none_tip}}" tooltip-placement="top" tooltip-append-to-body="true" > <span>{{vsLang.repeat_none}}</span> </label> </div> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> 位置 </div> <div class="gx-pos"> <input class="form-control" placeholder="{{vsLang.position_left}}" ng-model="posX" type="text" style="padding:4px 8px;text-align:left;color:#666;font-size:12px;"> </div> <div class="gx-pos"> <input class="form-control" placeholder="{{vsLang.position_top}}" ng-model="posY" type="text" style="padding:4px 8px;text-align:left;color:#666;font-size:12px;"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> 尺寸 </div> <div class="gx-pos"> <input class="form-control" placeholder="{{vsLang.horizontal}}" ng-model="sizeX" type="text" style="padding:4px 8px;text-align:left;color:#666;font-size:12px;"> </div> <div class="gx-pos"> <input class="form-control" placeholder="{{vsLang.vertical}}" ng-model="sizeY" type="text" style="padding:4px 8px;text-align:left;color:#666;font-size:12px;"> </div> </div> </div>  <div class="gx-bb-item"> <h4>報表頁設置</h4>  <div class="gx-font-item"> <div class="gx-bt"> <div class="prop-label-cell">列數</div> </div> <div class="gx-bt-slide"> <div slider ng-model="configingReportPage.config.layoutColumns" start={{1}} end={{12}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input"> <input ng-model="configingReportPage.config.layoutColumns" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <span>行類型</span> </div> <div class="gx-bt-slide" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.fixLayoutRows" style="border:1px solid #bbb;" on-label="固定" off-label="自動"></toggle-switch> </div> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.fixLayoutRows"> <div class="gx-bt"> <div class="prop-label-cell">行數</div> </div> <div class="gx-bt-slide"> <div slider ng-model="configingReportPage.config.layoutRows" start={{1}} end={{100}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input"> <input ng-model="configingReportPage.config.layoutRows" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <span>網絡行高類型</span> </div> <div class="gx-bt-slide" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.fixLayoutRowHeight" style="border:1px solid #bbb;" on-label="固定" off-label="自動"></toggle-switch> </div> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.fixLayoutRowHeight"> <div class="gx-bt"> <div class="prop-label-cell">網絡行高</div> </div> <div class="gx-bt-slide"> <div slider ng-model="configingReportPage.config.layoutRowHeight" start={{1}} end={{100}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input"> <input ng-model="configingReportPage.config.layoutRowHeight" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <span>整屏翻頁</span> </div> <div class="gx-bt-slide" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.autoScroll" style="border:1px solid #bbb;" on-label="固定" off-label="自動"></toggle-switch> </div> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <span>自動刷新</span> </div> <div class="gx-bt-slide" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.autoRefresh" style="border:1px solid #bbb;" on-label="固定" off-label="自動"></toggle-switch> </div> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.autoRefresh"> <div class="gx-bt"> <div class="prop-label-cell">刷新間隔(秒)</div> </div> <div class="gx-bt-slide short"> <div slider ng-model="configingReportPage.config.autoRefreshInterval" start={{5}} end={{1200}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input short"> <input ng-model="configingReportPage.config.autoRefreshInterval" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item"> <div class="gx-bt"> <span>自動翻頁</span> </div> <div class="gx-bt-slide" style="height: 26px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="configingReportPage.config.autoFlip" style="border:1px solid #bbb;" on-label="固定" off-label="自動"></toggle-switch> </div> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.autoFlip"> <div class="gx-bt"> <div class="prop-label-cell">翻頁間隔(分鐘)</div> </div> <div class="gx-bt-slide short"> <div slider ng-model="configingReportPage.config.autoFlipInterval" start={{1}} end={{600}} step=1 connect='lower'></div> </div> <div class="gx-bt-slide-input ui input short"> <input ng-model="configingReportPage.config.autoFlipInterval" ng-disabled="element.disabled == null ? false : element.disabled()" type="text"> </div> </div>  <div class="gx-font-item" ng-show="configingReportPage.config.autoFlip"> <div class="gx-bt"> 下一頁 </div> <div class="gx-bt-slide"> <ui-select ng-model="configingReportPage.config.autoFlipNextPage" theme="selectize" ng-disabled="disabled"> <ui-select-match placeholder="選擇報表頁">{{$select.selected.name}}</ui-select-match> <ui-select-choices repeat="item in $parent.reportPages | filter: $select.search"> <span ng-bind-html="item.name | highlight: $select.search"></span> </ui-select-choices> </ui-select> </div> </div> </div>  <div class="gx-bb-item"> <h4>報表頁高級設置</h4>  <div class="gx-font-item"> <div class="gx-bt"> <span>WEB頁面導航</span> </div> <div class="gx-bt-slide" style="height: 26px;margin-left:30px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="$parent.currentReport.enableReportPagesPanel" style="border:1px solid #bbb;" on-label="{{vsLang.on}}" off-label="{{vsLang.off}}"></toggle-switch> </div> </div> </div> <div class="gx-font-item"> <div class="gx-bt"> <span>自動翻頁控制器</span> </div> <div class="gx-bt-slide" style="height: 26px;margin-left:30px;" ng-class="{'en-text':vsLang.locale==='en_US'}"> <div class="btn-group"> <toggle-switch ng-model="$parent.currentReport.enableAutoPageControl" style="border:1px solid #bbb;" on-label="{{vsLang.on}}" off-label="{{vsLang.off}}"></toggle-switch> </div> </div> </div> <div class="gx-font-item"> <div class="gx-bt"> <span>自定義頁面腳本</span> </div> <div class="gx-bt-slide" style="height: 26px;margin-left:30px;"> <button ng-click="openPageScriptEditorWindow()" class="btn btn-default" style="width:100%;"><span ng-class="{'en-text':vsLang.locale==='en_US'}">{{vsLang.edit_script}}</span></button> </div> </div> <div class="gx-font-item"> <div class="gx-bt"> <span>自定義頁面樣式</span> </div> <div class="gx-bt-slide" style="height: 26px;margin-left:30px;"> <button ng-click="openPageStyleEditorWindow()" class="btn btn-default" style="width:100%;"><span ng-class="{'en-text':vsLang.locale==='en_US'}">{{vsLang.edit_script}}</span></button> </div> </div> <div class="gx-font-item"> <div class="gx-bt"> <span>自定義頁面Header</span> </div> <div class="gx-bt-slide" style="height: 26px;margin-left:30px;"> <button ng-click="openPageHeaderEditorWindow()" class="btn btn-default" style="width:100%;"><span ng-class="{'en-text':vsLang.locale==='en_US'}">{{vsLang.edit_script}}</span></button> </div> </div> </div> </div> </div> ```