本文主要介紹F1V3.0前端提供的功能的使用，具體功能的介紹寫在F1V3.0-UI前端功能介紹中，這裏着重介紹這些功能的使用

1 公共變量配置

在F1V2.0的時代，平臺組件腳本的引入方式是通過$import方法分別引入的，這種方式需要反覆的向服務器發送請求腳本。

而V3.0解決爲了解決這個問題，使用了webpack對平臺組件源碼進行整合打包，由於webpack是模塊化的打包方式，這樣導致了平臺公共變量不能使用（具體“模塊化“和公共變量不能使用的原因請參看：webpack疑惑解答）

所以平臺組件包（F1UI_widget_libraries）維護了一個文件來設置全局變量，在文件爲 “widget_libraries/dist/scripts/widget.variable.resources.js” ，裏邊提供了websocket的地址配置、登陸人信息的存儲、默認客戶端ID的設置等，添加公共變量也在這裏添加，添加的公共變量會掛到window對象下。

2 佈局組件使用

佈局組件的使用請參考平臺學習網站（請在內網訪問）：F1平臺學習示例，路徑如下

3 數據交互組件使用

1.1 bp組件使用

bp組件是通過配置 ‘service’ 配置項來和後臺服務進行交互的，service配置成後臺對應服務的id。

bp組件包含bptree、bpgrid、bpdatasource等組件，配置好service之後，就可以使用平臺封裝好的方法去操作組件完成數據的增刪改查等操作，下面以bpgrid爲示例：

var datagrid = $('#test').bpgrid({
    id: 'f',
    title: 'BP表格',
    iconCls: 'icon-save',
    width: 1024,
    height: 400,
    service: 'example_editGridPanelService',
});

通過bpgrid方法將bpgrid綁定在jQuery對象上，配置service和後臺進行交互

1.2 bd組件使用

bd組件依託平臺的模型工具，主要是通過配置appId和clsId來掛接模型，以bdgrid爲例：

var datagrid = $('#gridPanel').bdgrid({
    fit : true,
    showFooter : false,
    border : false,
    appID:"6F9A1862-0AA8-4555-AE96-C0EEFFCEBCE6",
    clsID:"F855101E-A0BF-4047-851A-C9D2020AD8B1-00001"
    remoteSort : false,
    editable : true,
    needPage : true
});

4 websocket

F1V3.0添加了websocket功能，websocket服務器地址的配置在第一部分維護公共變量的那個文件裏。如下：

/**
 * webSocket地址
 * @type {string}
 */
window.wsAdds = "ws://192.168.1.2:8099";

5 流程組件

F1平臺V3.0主要提供了以下流程組件，“流程流轉對話框”可以對流程進行發送和回退操作；“流程日誌”可以對流程流轉的過程進行監控；“流程圖”可以使用圖形化的界面查看流程流轉的狀態；“流程意見對話框”可以支持在自定義流轉單中增加流轉意見的輸入框。

5.1 流程流轉對話框框

流程發送對話框，主要爲針對流程流轉和回退操作的對話框，可以進行流轉環節、所屬部門、所屬角色、流轉人員等進行過濾選擇，流程流轉對話框如下圖所示：

以上爲標準的流程流轉對話框，下面我們將講解下如果自定義調用該組件，並列舉出組件常用的一些配置參數和配置項。

// 發送流程
var obj = {
    orderNo: '',
    orderType: '',
    taskId: '0',
    content: '',
    stepGuid: '0',
    flag: 'send'
}
artDialog.data('wfParams', obj);
artDialog.open(basePath + "workflow/views/sendDialog.html", {
    onclose: function() {},
    id: 'sendDialog',
    drag: false,
    lock: true,
    width: 480,
    height: 480,
    title: '流程發送',
    cancelVal: '關閉',
    cancel: function() {},
    okVal: '確定',
    ok: function() {
        var iframe = this.iframe.contentWindow;
        if (!iframe.document.body) {
            alert('iframe還沒加載完畢呢')
            return false;
        }
        // 取得節點
        var nodes = iframe.$("#rightTree")
            .bptree('getTree').getNodesByParam('leaf',
                true);
        if (nodes.length == 0) {
            artDialog.alert('請先選擇需要發送的人員或角色');
            return false;
        } else {
            var schema = iframe.getNewSendParams();
            // 禁掉“確定”按鈕
            this.__popup.find('button[data-id=ok]')[0].disabled = true;
            sendFlow(schema);
        }
    }
});

以上爲發送對話框的配置方式，通過以上配置，我們就可以彈出一個自定義的流程流轉對話框，下面我們詳細列舉一下需要配置的參數：

orderNo：本次流程掛接的主鍵GUID
orderType：建模工具掛接流程的objCls的ID
taskId：任務ID，如果是第一次發送則需要傳遞0即可
content：流程意見的配置項
stepGuid：環節GUID，當前發送環節的GUID，如果第一個環節則只需要傳遞0即可
flag：發送模式是發送（send）或者回退（back）

5.2 流程日誌

流程日誌表格主要展現流程流轉的日誌信息主要包含“環節”、“處理人”、“處理意見”、“處理時間”如下圖所示：

以上爲流程日誌展現的表格，詳細配置項如下：

var panel = new $.f1.processContent({
    processInstance: params.record['PROCESSINSTANCE'],
    ownerCt: 'processContentContainer'
}).load();
//需要引入的組件爲：workflow\scripts\component\processContentPanel.js

詳細配置參數如下：

processInstance：流程實例ID
ownerCt：需要渲染到的目標容器

5.3 流程圖

流程圖組件可以支持以圖的方式實時展現流程的流轉狀態，並且可以根據圖例定位處理過的環節、回退的環節、未處理的環節等，如下圖所示

以上爲流程圖的展現方式，詳細配置項如下：

var options = {
    appID: p.wfParams.record['APPID'],
    clsID: p.wfParams.record['CLSID'],
    guid: p.wfParams.record['ORDERNO'],
    taskId: p.wfParams.record['TASKINSTANCE'],
    processId: p.wfParams.record['PROCESSINSTANCE'],
    width: $(window.parent).outerWidth() - 100,
    height: $(window.parent).outerHeight() - 70
}
//構造流程圖組件 $(dom). workflowPic(options);

詳細配置參數如下：

appID：應用ID
clsID：類型ID
guid：業務主鍵
taskId：任務ID
processId：流程實例ID
width：頁面寬度
height：頁面高度
displayPic：是否顯示流程圖
displayLog：是否顯示流程日誌

5.4 流程意見對話框

流程意見組件，可以在流程流轉過程中輸入流轉意見的組件

組件配置過程如下：

var panel = new $.f1.auditPanel({
    ownerCt: 'auditOpinionPanel',
    isShow: isShow
});

詳細配置參數如下：

ownerCt：需要渲染到的容器
isShow：是否展示組件

6 任務臺組件

任務臺組件主要包含個人待辦任務、新建流程、已辦任務、辦結任務、委派任務、我的請求，以上幾部分組件可以自由定製和嵌套。

6.1 代辦任務臺

代辦任務爲和個人綁定相關的任務，當個人任務到達時，即可在此表格查詢和處理，主要有任務處理、查看流程圖等功能，配置方式如下所示：

$("#agentTask").agentTaskPlatCompnent({

});
//需要導入以下文件：workflow/scripts/component/agentTaskPlatCompnent.js

6.2 新建任務

模型工具上配置的流程，如果當前登陸人有發送權限則可在此菜單發送流程，無需進入業務模塊進行操作。展現方式如下所示：

6.3 已辦任務臺

當前登錄人處理過的任務可以該表格中顯示，表格包含流轉單名稱、任務名稱、流程名稱、發送者、發送時間、任務處理（追回、查看、流程圖），配置方式如下所示：

$("#historyTask").historyTaskPlatCompnent({

});
//需要導入以下文件：workflow/scripts/component/historyTaskPlatCompnent.js

6.5 辦結任務臺

當前登錄人處理完成過的任務可以該表格中顯示，表格包含流轉單名稱、任務名稱、流程名稱、發送者、發送時間、任務處理（追查看、流程圖），配置方式如下所示。

$("#historyTask").historyTaskPlatCompnent({

});
//需要導入以下文件：workflow/scripts/component/historyTaskPlatCompnent.js

6.6 委派任務臺

當前登陸人有被委派的任務，即可在該表格中顯示，表格支持流程名稱、任務名稱、流轉單名稱、發送者、發送時間、任務處理（處理、查看流程圖）等功能，配置方式如下所示：

$("#delegatedTask").delegatedPlatCompnent({

});
//需要導入以下文件：workflow/scripts/component/dealTaskPlatCompnent.js

6.7 我的請求

由我發起的流程都可以在以下表格中查詢到，表格支持流程名稱、開始時間、結束時間、所處環節、表單詳情（詳情、流程圖）等功能，配置方式如下所示：

$("#myRequestTask").myRequestPlatCompnent({

});
//需要導入以下文件：workflow/scripts/component/myRequestTaskPlatCompnent.js

7 BD組件導入導出

7.1 BD表格導出

表格在使用過程可以對查詢過的數據進行Excel表格導出操作，可以支持選擇列導出、分頁導出、全頁導出等功能。調用方式如下所示：

text: '導出',
type: "button",
onClick: function () {
    g.exportExcel('導出名稱');
}
//導出名稱爲文件名稱（可以自由定製導出的文件名稱）

8 BP組件導入導出

8.1 BP表格導出

表格在使用過程可以對查詢過的數據進行Excel表格導出操作，可以支持選擇列導出、分頁導出、全頁導出等功能。服務名稱和導出文件名稱爲選配項。調用方式如下所示：

text: '導出',
type: "button",
onClick: function () {
    g.exportExcel("fileName", 'microServiceId');
}
//fileName爲導出的文件名稱，爲選配，默認爲當天日期
//microServiceId 爲導出服務ID，如果表格導出，則默認會取得表格的服務ID

ZHBR_F1

發佈了69 篇原創文章 · 獲贊 25 · 訪問量 11萬+

私信關注

F1V3.0-20 UI模塊常用功能開發

1 公共變量配置

2 佈局組件使用

3 數據交互組件使用

1.1 bp組件使用

1.2 bd組件使用

4 websocket

5 流程組件

5.1 流程流轉對話框框

5.2 流程日誌

5.3 流程圖

5.4 流程意見對話框

6 任務臺組件

6.1 代辦任務臺

6.2 新建任務

6.3 已辦任務臺

6.5 辦結任務臺

6.6 委派任務臺

6.7 我的請求

7 BD組件導入導出

7.1 BD表格導出

8 BP組件導入導出

8.1 BP表格導出

Flink讀取與寫入kafka數據

集羣Kafka配置SASL用戶名密碼認證

單機節點Kafka配置SASL用戶名密碼認證

Kafka安全認證SASL下附帶工具的配置使用

F1V3.0-圖形-OpenLayers2體系分析

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結