Html5工作台开发指引

栏目：云星空知识作者：金蝶来源：金蝶云社区发布：2024-09-23浏览：1

Html5工作台开发指引

在最新版环境下面，html5端暂时支持的工作台主要分为两类（sliverligh/客户端暂时不支持），一种是支持预置不同模块的的工作台（图1），另一种是列表步骤式的工作台（图2），具体效果如下图所示。

云之家图片20210610154038.webp

图1

云之家图片20210610154030.webp

图2

现在就分别介绍下这两种工作台的开发和预置过程，

模块工作台：

模块工作台是基于html5的流式布局控件进行开发的单据，支持将需要的单据嵌入到工作台。由于模块工作台是针对子系统的工作台，因此需要先确定是哪个子系统的在进行开发，再进行数据的预置。

a.预插业务应用布局表（T_BAS_STDAPPMENULAYOUT）

FNODEID：对应子系统的FID, 可以通过子系统名称查找到相应的FID，例如查找“总账”对应的FID，

SELECT L.FNAME,S.FID FROM T_META_SUBSYSTEM S LEFT JOIN T_META_SUBSYSTEM_L L ON S.FID=L.FID where L.FNAME ='总账';

以上取出的FID即是对应的FNODEID；

FID:值类型为varchar(36)，由业务领域自定义，注意字符长度；

FUSERID：默认布局取值-1，用户保存后根据用户ID生成相应布局；

FLAYOUTNO：现在暂时只有默认的布局类型，取值“DefaultLayout”；

插入sql示例：

DELETE T_BAS_STDAPPMENULAYOUT WHERE FID='GL';
INSERT INTO T_BAS_STDAPPMENULAYOUT(FID,FNODEID,FUSERID,FLAYOUTNO,FLAYOUTTYPE) VALUES ('GL','GL',-1,'DefaultLayout','1') ;

b.预插业务应用布局分组表(T_BAS_STDAPPMENUGROUP）

二开的时候可以根据要显示几个模块决定在布局分组表中进行预插，例如这里预插三个模块，其中前两个分组为快速链接模块和待办事项（标准环境已有功能，对应FORM1和FORM2），增加一个自定义的表单(FORM3内容)对应的formid预插在第三个分组中，这个formid对应要二开进行开发。如图所示。

云之家图片20210610175011.webp

FENTRID,FID和多语言表的FPKID: 值类型为varchar(36)，可以自定义，注意字符长度；T_BAS_STDAPPMENUGROUP的FID和T_BAS_STDAPPMENULAYOUT的FID相关联。业务应用布局分组多语言表，用于显示分组的标题。如果构造出入上图的工作台，则要在表T_BAS_STDAPPMENUGROUP 预插三条数据（注：第一第二个模块是标准产品，第三个单据需要自己开发）。如预置数据有疑问可以参考之前的预查数据进行预插。

GROUPFORMID：该模块显示的表单ID，对应bos设计器的单据ID

DELETE T_BAS_STDAPPMENUGROUP WHERE FENTRYID IN ('GL_LINK', 'GL_TODOLIST', 'GL_BUSSINESSFORMID');
INSERT INTO T_BAS_STDAPPMENUGROUP(FENTRYID,FID,FSEQ,GROUPFORMID) VALUES ('GL_LINK','GL',1,'BOS_H5QuickLinks') ;
INSERT INTO T_BAS_STDAPPMENUGROUP(FENTRYID,FID,FSEQ,GROUPFORMID) VALUES ('GL_TODOLIST','GL',2,'BOS_H5BUSSINESSTODOLIST') ;
INSERT INTO T_BAS_STDAPPMENUGROUP(FENTRYID,FID,FSEQ,GROUPFORMID) VALUES ('GL_BUSSINESSFORMID','GL',3,'bussinessformid') ;

DELETE T_BAS_STDAPPMENUGROUP_L WHERE FENTRYID IN ('GL_LINK', 'GL_TODOLIST', 'GL_BUSSINESSFORMID');
INSERT INTO T_BAS_STDAPPMENUGROUP_L (FPKID,FENTRYID,FLOCALEID,FTITLE) VALUES ('GL_LINK_2','GL_LINK',2052,N'快速链接') ;
INSERT INTO T_BAS_STDAPPMENUGROUP_L (FPKID,FENTRYID,FLOCALEID,FTITLE) VALUES ('GL_TODOLIST_2','GL_TODOLIST',2052,N'工作简报') ;
INSERT INTO T_BAS_STDAPPMENUGROUP_L (FPKID,FENTRYID,FLOCALEID,FTITLE) VALUES ('GL_BUSSINESSFORMID_2','GL_BUSSINESSFORMID',2052,N'待办事项') ;

c.预插待办事项数据表(T_BAS_STDAPPTODOLISTCARD)，需要预插数据到该表中，待办事项才会有内容。

FID:值类型为varchar(36)；

FNODEID：子系统节点ID，值类型为varchar(36)，和上面查出的FNODEID对应；

FCARDTYPE：卡片类型，可默认为BOS_H5SubSystemDataViewCard；

FUSERID：当前用户的用户ID；

FPARAMETER：卡片参数，来自T_BAS_QUICKVIEWSCHEME和过滤方案的表。例如以【币别】为例（注：这个单据必须在这个子系统下面），如图下所示：

如果改单据已经有发布，查找下SELECT * FROM T_BAS_QUICKVIEWSCHEME where FFORMID='BD_Currency'，找出这条数据的FID，如果有多个可以选任意一个。另外用select * from T_BAS_FILTERSCHEME a left join T_BAS_FILTERSCHEME_L b on a.FSCHEMEID=b.FSCHEMEID where a.FFORMID='BD_Currency'这条sql查出FSCHEMEID ，将T_BAS_QUICKVIEWSCHEME 的FID和T_BAS_FILTERSCHEME 的FSCHEMEID 用英文逗号隔开，插入这个字段中。

例如，

insert into T_BAS_STDAPPTODOLISTCARD(FID,FNODEID,FCARDTYPE,FPARAMETER,FSEQ,FUSERID) VALUES(NEWID(),'GL','BOS_H5SubSystemDataViewCard','100001, 5a9d079335ba69',1,100001);

d.在bos设计器里面创建自己的工作台单据，单据继承BOS_MainSystemSubMenuCard_Std，并将单据发布到对应子系统，配置相关权限即可在应用系统中看到对应功能。业务的工作简报模块可以自己更改元数据设置标题，默认左20，上10。插件中设置标题样式：

var listtitle = this.View.GetControl("FTITLE");
listtitle.InvokeControlMethod("setStylekey","font-size:16px;color:#333333;line-height:21px;font-family:Microsoft YaHe

云之家图片20210610171956.webp

以上就完成了工作台的预置工作，剩下就是嵌入单据的开发工作。为了做出更好看的工作台，可以学习html5,js,css知识自定义控件的样式，或者参考帖子https://vip.kingdee.com/article/182161进行二开。

2.列表步骤工作台：

列表步骤工作台是基于html5定制控件进行开发，可以参考或者继承单据BOS_InitGuideWorkbench，二开插件继承基础插件Kingdee.BOS.Business.PlugIn.InitImplementation.KDInitGuideWorkbenchPlugin（或者自己写都可以）。

下面介绍下插件和构建插件（用于修改控件类型）逻辑，可以结合注释理解。

a.构建插件代码如下：

[Description("初始化指引工作台基类构建插件")]
    public class KDInitGuideWorkbencBuilderPlugin : AbstractDynamicWebFormBuilderPlugIn
    {
        public override void CreateControl(Core.DynamicForm.PlugIn.Args.CreateControlEventArgs e)
        {
            if (e.ControlAppearance.Key.EqualsIgnoreCase("FInitGuideWorkbench"))
            {
                e.Control["xtype"] = "kdinitguideworkbench";
            }
            if (e.ControlAppearance.Key.EqualsIgnoreCase("FBar"))
            {
                e.Control["Stylekey"] = StyleKeyConst.KDProgressBarCircleStyle;
            }

            base.CreateControl(e);
        }
    }

b.插件代码，如果是继承单据BOS_InitGuideWorkbench二开，主要逻辑在于setdata的逻辑：

using Kingdee.BOS.BusinessEntity.InitImplementation;
using Kingdee.BOS.Core.DynamicForm.PlugIn;
using Kingdee.BOS.Core.DynamicForm.PlugIn.Args;
using Kingdee.BOS.JSON;
using System;
using System.Collections.Generic;
using System.ComponentModel;

namespace Kingdee.BOS.Business.PlugIn.InitImplementation
{
    [Description("初始化指引工作台基类插件")]
    public class KDInitGuideWorkbenchPlugin : AbstractDynamicFormPlugIn
    {
        private List<InitGuideWorkbenchStepInfo> _initGuideWorkbenchInfo = new List<InitGuideWorkbenchStepInfo>();

        public override void AfterBindData(EventArgs e)
        {
            _initGuideWorkbenchInfo = GetInitGuideWorkbench();
            base.AfterBindData(e);
            this.SetData();
            this.SetControlStyle();
        }

        /// <summary>
        /// 设置控件样式
        /// </summary>
        private void SetControlStyle()
        {
            this.View.GetControl("FFlowLayoutContent").InvokeControlMethod("setInlineStyleValue", "background-color:#E8ECF6");
            this.View.GetControl("FPanelDescript").InvokeControlMethod("setInlineStyleValue", "background-color:#FFF");
            this.View.GetControl("FPanelContentTopRight").InvokeControlMethod("setInlineStyleValue", "background-color:#FFF");
        }

        /// <summary>
        /// set data
        /// </summary>
        private void SetData()
        {
            //set data to do
            this.View.GetControl("FInitGuideWorkbench").InvokeControlMethod("setData", getMenuDataList());
        }
        /// <summary>
        /// 构建前端数据包示例
        /// </summary>
        /// <returns></returns>
        private JSONObject getMenuDataList()
        {
            JSONObject initGuideGroups = new JSONObject();
            JSONArray initGuideStepGroups = new JSONArray();
            JSONObject jsonObj, jsonLinkObj;
            JSONArray stepLinkObj;
            initGuideGroups["name"] = "总账初始化指引工作台";/*untrans*/
            initGuideGroups["orgid"] = 101;
            initGuideGroups["stepBarHeight"] = 40;//对应InitGuideWorkbench的stepBarHeight

            if (_initGuideWorkbenchInfo == null || _initGuideWorkbenchInfo.Count == 0)
            {
                return null;
            }

            foreach (var info in _initGuideWorkbenchInfo)
            {
                jsonObj = new JSONObject();
                stepLinkObj = new JSONArray();
                jsonObj["id"] = info.Index;
                jsonObj["description"] = info.Description;
                jsonObj["descriptionmaxwidthpercent"] = info.DescriptionMaxWidthPercent;
                jsonObj["stepname"] = info.StepName;
                jsonObj["steptile"] = info.StepTitle;
                jsonObj["steptitleurl"] = info.StepTitleURL;
                jsonObj["titleclickenable"] = info.TitleClickEnable;
                jsonObj["titlefontsize"] = info.TitleFontSize;
                if (info.CourseLinks != null && info.CourseLinks.Count > 0)
                {
                    foreach (var link in info.CourseLinks)
                    {
                        jsonLinkObj = new JSONObject();
                        jsonLinkObj["name"] = link.LinkName;
                        jsonLinkObj["url"] = link.LinkURL;
                        jsonLinkObj["formid"] = link.LinkFormID;
                        stepLinkObj.Add(jsonLinkObj);
                    }
                }
                jsonObj["linklist"] = stepLinkObj;
                jsonObj["studytime"] = info.StudyTime;
                jsonObj["studytimemaxwidthpercent"] = info.StudyTimeMaxWidthPercent;
                jsonObj["studytimecolor"] = info.StudyTimeColor;
                jsonObj["studytimeclickenable"] = info.StudyTimeClickEnable;
                jsonObj["buttoninittext"] = info.ButtonInitText;
                jsonObj["buttonfinishtext"] = info.ButtonInitText;
                jsonObj["buttonwidth"] = info.ButtonWidth;
                jsonObj["buttoncolor"] = info.ButtonColor;
                jsonObj["isfinishedstep"] = info.IsFinishedStep;
                initGuideStepGroups.Add(jsonObj);
            }

            initGuideGroups["children"] = initGuideStepGroups;
            return initGuideGroups;
        }

        /// <summary>
        /// 构造初始化数据示例
        /// </summary>
        /// <returns></returns>
        private List<InitGuideWorkbenchStepInfo> GetInitGuideWorkbench()
        {
            List<InitGuideWorkbenchStepInfo> lists = new List<InitGuideWorkbenchStepInfo>();

            InitGuideWorkbenchStepInfo step1 = new InitGuideWorkbenchStepInfo();
            step1.Index = 1;
            step1.StepName = "xxzzgk";
            step1.StepTitle = "关账前检查";/*untrans*/
            step1.StepTitleURL = "ttt";
            step1.TitleClickEnable = true;
            step1.TitleFontSize = 15;
            step1.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            List<InitGuideWorkbenchLink> step1LinksList = new List<InitGuideWorkbenchLink>();
            InitGuideWorkbenchLink step1Link1 = new InitGuideWorkbenchLink();
            step1Link1.LinkName = "学习总账概况";/*untrans*/
            step1Link1.LinkURL = "https://vip.kingdee.com/school/5";
            step1LinksList.Add(step1Link1);
            step1.CourseLinks = step1LinksList;
            step1.StudyTime = "10分钟";/*untrans*/
            step1.StudyTimeClickEnable = true;
            step1.StudyTimeColor = "red";
            step1.StudyTimeClickEnable = true;
            step1.ButtonInitText = "学习完成";/*untrans*/
            step1.ButtonEndText = "已完成学习";/*untrans*/
            step1.ButtonColor = "blue";
            step1.ButtonWidth = 120;
            lists.Add(step1);
            InitGuideWorkbenchStepInfo step2 = new InitGuideWorkbenchStepInfo();
            step2.Index = 2;
            step2.StepName = "whzzcyjczl";
            step2.StepTitleURL = "eee";
            step2.StepTitle = "关账前检查";/*untrans*/
            step2.TitleClickEnable = true;
            step2.Description = "维护总账常用基础资料。";/*untrans*/
            List<InitGuideWorkbenchLink> step2LinksList1 = new List<InitGuideWorkbenchLink>();
            InitGuideWorkbenchLink step2LinK1 = new InitGuideWorkbenchLink();
            step2LinK1.LinkName = "基础资料概况";/*untrans*/
            step2LinK1.LinkURL = "https://vip.kingdee.com/article/171680";
            InitGuideWorkbenchLink step2LinK2 = new InitGuideWorkbenchLink();
            step2LinK2.LinkName = "测试资料概况";/*untrans*/
            step2LinK2.LinkURL = "https://vip.kingdee.com/article/171680";
            step2LinksList1.Add(step2LinK1);
            step2LinksList1.Add(step2LinK2);
            InitGuideWorkbenchLink step2Link2 = new InitGuideWorkbenchLink();
            step2Link2.LinkName = "币别";/*untrans*/
            step2Link2.LinkFormID = "BD_Currency";
            step2Link2.IsOpenLinkURL = false;
            step2LinksList1.Add(step2Link2);
            step2.CourseLinks = step2LinksList1;
            step2.StudyTime = "10分钟";/*untrans*/
            step2.ButtonInitText = "学习完成";/*untrans*/
            step2.ButtonEndText = "已完成学习";/*untrans*/
            lists.Add(step2);
            InitGuideWorkbenchStepInfo step3 = new InitGuideWorkbenchStepInfo();
            step3.Index = 3;
            step3.StepName = "test1";
            step3.StepTitle = "关账前检查";/*untrans*/
            step3.TitleClickEnable = true;
            step3.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step3.StudyTime = "10分钟";/*untrans*/
            step3.ButtonInitText = "学习完成";/*untrans*/
            step3.ButtonEndText = "已完成学习";/*untrans*/
            step3.IsFinishedStep = true;
            lists.Add(step3);

            InitGuideWorkbenchStepInfo step4 = new InitGuideWorkbenchStepInfo();
            step4.Index = 4;
            step4.StepName = "test2";
            step4.StepTitle = "关账前检查";/*untrans*/
            step4.TitleClickEnable = true;
            step4.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step4.StudyTime = "10分钟";
            step4.ButtonInitText = "学习完成";/*untrans*/
            step4.ButtonEndText = "已完成学习";/*untrans*/
            lists.Add(step4);
            InitGuideWorkbenchStepInfo step5 = new InitGuideWorkbenchStepInfo();
            step5.Index = 5;
            step5.StepName = "test3";
            step5.StepTitle = "关账前检查";/*untrans*/
            step5.TitleClickEnable = true;
            step5.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step5.StudyTime = "10分钟";/*untrans*/
            step5.ButtonInitText = "学习完成";/*untrans*/
            step5.ButtonEndText = "已完成学习";/*untrans*/
            lists.Add(step5);

            InitGuideWorkbenchStepInfo step6 = new InitGuideWorkbenchStepInfo();
            step6.Index = 6;
            step6.StepName = "test4";
            step6.StepTitle = "关账前检查";/*untrans*/
            step6.TitleClickEnable = true;
            step6.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step6.StudyTime = "10分钟";/*untrans*/
            step6.ButtonInitText = "学习完成";/*untrans*/
            step6.ButtonEndText = "已完成学习";/*untrans*/
            step6.IsFinishedStep = true;
            lists.Add(step6);

            InitGuideWorkbenchStepInfo step7 = new InitGuideWorkbenchStepInfo();
            step7.Index = 7;
            step7.StepName = "test7";
            step7.StepTitle = "关账前检查";/*untrans*/
            step7.TitleClickEnable = true;
            step7.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step7.StudyTime = "10分钟";/*untrans*/
            step7.ButtonInitText = "学习完成";/*untrans*/
            step7.ButtonEndText = "已完成学习";/*untrans*/
            step7.IsFinishedStep = true;
            lists.Add(step7);
            InitGuideWorkbenchStepInfo step8 = new InitGuideWorkbenchStepInfo();
            step8.Index = 8;
            step8.StepName = "test8";
            step8.StepTitle = "关账前检查";/*untrans*/
            step8.TitleClickEnable = true;
            step8.Description = "观看视频课程了解产品理念与蓝图、应用流程与主要特性以及核心业务场景，对金蝶云的总账管理有一个初步的认识。";/*untrans*/
            step8.StudyTime = "10分钟";/*untrans*/
            step8.ButtonInitText = "学习完成";/*untrans*/
            step8.ButtonEndText = "已完成学习";/*untrans*/
            lists.Add(step8);

            return lists;
        }

        /// <summary>
        /// 服务端设置步骤信息更新（通过stepname去匹配，stepname必须传）
        /// </summary>
        /// <param name="stepInfo">步骤信息</param>
        protected virtual void SetStepStatus(InitGuideWorkbenchStepInfo stepInfo)
        {
            JSONObject stepInfos = new JSONObject();
            stepInfos["stepname"] = stepInfo.StepName;//步骤名称
            stepInfos["steptile"] = stepInfo.StepTitle;//步骤标题
            stepInfos["description"] = stepInfo.Description;//步骤描述
            stepInfos["studytime"] = stepInfo.StudyTime;//学习时长
            stepInfos["studytimecolor"] = stepInfo.StudyTimeColor;//学习时长文本颜色
            stepInfos["studytimeclickenable"] = stepInfo.StudyTimeClickEnable.ToString();//学习时长是否可以点击
            stepInfos["buttontext"] = stepInfo.ButtonInitText;//按钮文本
            stepInfos["buttonisanimate"] = stepInfo.ButtonTextIsAnimate;
            stepInfos["color"] = stepInfo.ButtonColor;//按钮颜色
            stepInfos["buttonisanimate"] = stepInfo.ButtonTextIsAnimate;//按钮文字动画
            this.View.GetControl("FInitGuideWorkbench").InvokeControlMethod("setStepInfos", stepInfos);
        }
        /// <summary>
        /// 服务端返回设置步骤完成（通过stepname去匹配，stepname必须传）
        /// </summary>
        /// <param name="stepname">步骤name</param>
        /// <param name="stepID">步骤ID</param>
        /// <param name="isFinished">是否结束</param>
        /// <param name="isFinished">是否结束</param>
        /// <param name="color">按钮颜色,示例："#ffffff"</param>
        protected virtual void SetStepStatus(string stepname, int stepIndex, bool isFinished, string buttontext, string color, bool buttonisanimate)
        {
            JSONObject stepInfos = new JSONObject();
            stepInfos["stepname"] = stepname;//步骤名称
            stepInfos["stepid"] = stepIndex;//步骤ID
            stepInfos["isfinished"] = isFinished;//是否完成
            stepInfos["buttontext"] = buttontext;//按钮文本
            stepInfos["buttonisanimate"] = buttonisanimate;
            stepInfos["color"] = color;//按钮颜色
            this.View.GetControl("FInitGuideWorkbench").InvokeControlMethod("setStepStatus", stepInfos);
        }

        /// <summary>
        /// 点击事件处理(业务根据需要在这里接受点击事件处理对应逻辑)
        /// </summary>
        /// <param name="e"></param>
        public override void NaviOperAction(NaviOperActionArgs e)
        {
            //1. 点击步骤按钮：e.ActionKey=="clickStepButton"，e.Key返回点击了具体步骤的stepname（步骤名称）
            //2. 点击链接：e.ActionKey=="clickLink",打开单据还是开链接，e.Index==0时，e.Key返回formid；
            //3. 步骤title可点击：e.ActionKey=clickStepTitle
            //4. 返回对应组织ID，e.SelectItemId，点击链接可以在e.Data中获取stepname
            //5. 点击学习时长（步骤按钮前，当可点击时）：e.ActionKey=clickStudyTimeLink,e.Data中获取stepname
            base.NaviOperAction(e);
        }
    }
}

具体的点击逻辑处理可以通过点击不同的actrionkey来判断是点击了那块的按钮或者链接。然后插件的navioperaction接收和处理。这样就完成了列表步骤工作台的开发工作。最后将单据发布出去就可以在菜单里面看到效果。