F1V3.0-20 UI模块常用功能开发

本文主要介绍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