经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » 编程经验 » 查看文章
基于前端技术实现的全面预算编制系统
来源：cnblogs　　作者：葡萄城技术团队　　时间：2024/3/25 9:45:23　　对本文有异议

前言

在现代商业环境中，预测销售数据和实际成本是每个公司CEO和领导都极为重视的关键指标。然而，由于市场的不断变化，准确地预测和管理这些数据变得愈发具有挑战性。为了应对这一挑战，建立一个高效的系统来管理和审查销售数据的重要性不言而喻。今天小编就将为大家介绍一下如何使用葡萄城公司的纯前端表格控件SpreadJS实现一个预算编制系统。

环境准备

Node.js

VSCode代码编辑器

完整代码Github地址（可在阅读本文时配合参考使用）

使用代码实现的在线Demo地址（可在阅读本文时配合参考使用）

实现步骤

1）自定义菜单栏

上图中红色方框划出来的菜单栏叫做在线表格编辑器（Designer），Designer的菜单提供了各种定制化的能力，如新增菜单，修改菜单执行的逻辑，修改图标，修改文字以及删除菜单等功能。

观察上图中，首先新建了一个“预算操作（定制按钮）”tab ，此tab内容包括了三部分，分别是“预算类型”、“预算编制”、“数据”。对应的代码如下：

  1. let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
  2. config.ribbon.push(
  3.     {
  4.     id: "fill-custom",
  5.     text: "预算操作（定制按钮）",
  6.     buttonGroups: [
  7.     {
  8.         label:"预算类型",commandGroup：{}  
  9.     },    
  10.     {
  11.         label: "预算编制", commandGroup：{}
  12.        
  13.     },
  14.     {
  15.         label: "数据", commandGroup：{}
  16.       
  17.     }]
  18. })
  19. designer.setConfig(config)

通过上述代码，我们来看看实现结果：

Ok ,发现添加了一个“预算操作（定制按钮）”tab，点击此tab,已经有了基础框架

接下来，继续，我们设置当前tab为激活状态，加上active属性，这样子页面初始化后看到的当前tab就是“预算操作（定制按钮）”

  1. {
  2.     id: "fill-custom",
  3.     text: "预算操作（定制按钮）",
  4.     active: true,
  5.     buttonGroups: []
  6. }

接下来，我们设置预算模型command, 我们再次看上面的第一张图，发现预算类型只有一个节点，且该节点是一个下拉框。对应的代码实现方式如下：

  1. {
  2.     label:"预算类型",
  3.     commandGroup: {
  4.         children: ["selectBudgetType"]
  5.     }
  6. },

接下来定义“selectBudgetType”，代码如下所示：（ 关于定义下拉框子菜单的实现方法详细解释，可以参考此篇文章）

  1. const budgetType = {
  2.     cost: 'cost' ,   //成本预算
  3.     sales: 'sales'   //销售预算
  4. }
  5. let selectBudgetType = {
  6.     text: "选择预算类型",
  7.     comboWidth: 120,
  8.     type:"comboBox",
  9.     commandName: "selectBudgetType",
  10.     dropdownList:[
  11.         {
  12.             text:"成本预算",
  13.             value: budgetType.cost
  14.         },{
  15.             text:"销售预算",
  16.             value:budgetType.sales
  17.         },
  18.     ],
  19.     execute:(context,propertyName) => {
  20.         console.log('选择',propertyName)
  21.     },
  22. }
  23. config.commandMap = {selectBudgetType}
  24. designer.setConfig(config)

上述代码为子菜单“selectBudgetType”定义了text，type ，以及dropdownList以及点击事件。exexute方法中propertyName对应的是dropdownList中的value值。

结果如下：

上述代码已经熟悉了如何定义菜单以及子菜单，接下来的两个子菜单（预算编制和数据）就不重复详细介绍，直接上代码：

  1. config.ribbon.push(
  2.     {
  3.     id: "fill-custom",
  4.     text: "预算操作（定制按钮）",
  5.     active: true,
  6.     buttonGroups: [
  7.     {
  8.         label:"预算类型",
  9.         commandGroup: {
  10.             children: ["selectBudgetType"]
  11.         }
  12.     },    
  13.     {
  14.         label: "预算编制",
  15.         thumbnailClass: "ribbon-thumbnail-editing",
  16.         commandGroup: {
  17.             children: [ "distributeTask"]
  18.         }
  19.     },
  20.     {
  21.         label: "数据",
  22.         commandGroup: {
  23.             children: ["clearLocalData"]
  24.         }
  25.     }]
  26. })
  27. config.commandMap = {
  28.     selectBudgetType:{
  29.         text: "选择预算类型",
  30.         comboWidth: 120,
  31.         type:"comboBox",
  32.         commandName: "selectBudgetType",
  33.         dropdownList:[
  34.             {
  35.                 text:"成本预算",
  36.                 value: budgetType.cost
  37.             },{
  38.                 text:"销售预算",
  39.                 value:budgetType.sales
  40.             },
  41.         ],
  42.         execute:(context,propertyName) => {
  43.               console.log('选择',propertyName)
  44.         }
  45.     },
  46.     distributeTask: {
  47.         title: "下发预算任务",
  48.         text: "预算编制",
  49.         iconClass: "distribute-icon",
  50.         bigButton: true,
  51.         commandName: "distributeTask",
  52.         execute: function (context) {
  53.            
  54.         }
  55.     },
  56.     clearLocalData: {
  57.         title: "清除本地缓存",
  58.         text: "清除本地缓存",
  59.         iconClass: "clear-local-icon",
  60.         bigButton: true,
  61.         commandName: "clearLocalData",
  62.         execute: function () {
  63.             localStorage.clear()
  64.         }
  65.     },
  66. }
  67. designer.setConfig(config)

icon相关代码，注意iconClass要添加相应的背景图片。

  1. .clear-local-icon {
  2.   background: url("../assets/clear.png");
  3.   background-size: 35px 35px;
  4. }
  5. .distribute-icon {
  6.   background: url("../assets/distribute.png");
  7.   background-size: 35px 35px;
  8. }

上述三个子菜单中的execute方法需要自定义，如选择选择预算类型后，模板需要进行切换。

2）设置模板

当“选择预算类型”选择“成本预算”时，加载cost.json文件

当“选择预算类型”选择“销售预算”时，加载sales.json文件

  1. let selectBudgetType = {
  2.     text: "选择预算类型",
  3.     comboWidth: 120,
  4.     type:"comboBox",
  5.     commandName: "selectBudgetType",
  6.     dropdownList:[
  7.         {
  8.             text:"成本预算",
  9.             value: budgetType.cost
  10.         },{
  11.             text:"销售预算",
  12.             value:budgetType.sales
  13.         },
  14.     ],
  15.     execute:(context,propertyName) => {
  16.         if(propertyName){
  17.             selectedBudget.value = propertyName
  18.             loadTemplate(context,propertyName,taskId)
  19.          }  
  20.     },
  21.     getState:(context)=>{
  22.         return selectedBudget.value
  23.     },
  24. }
  26. const loadTemplate = async (designer,fileName,taskId) => {
  27.     let templateStr = await BusinessType.getTemplate(fileName)
  28.     let template = JSON.parse(templateStr)
  29.     let spread = designer.getWorkbook()
  30.     spread.fromJSON(template)  
  31. }

上述代码介绍了【选择预算类型】下拉框选中的事件，选中后，导入对应的json文件，通过fromJSON进行导入。

对于需要设置的模板，可以通过Designer中菜单快速设计，其菜单基本与Excel一致，对于熟悉Excel的用户来说，真的很友好。

3）设置数据源

下面小编以“销售预算”模板为例，介绍如何设置数据源：

点击“数据”tab,接下来点击“工作表绑定”，此时出现右侧字段列表Panel。发现字段列表中存在“id”和“name ",这是因为在模板（sales.json）中已经设置好字段。

此时进行数据绑定setDataSource()：

  1. const bindInitialData = (spread,type,taskId) => {
  2.     // 绑定初始数据
  3.     let data = defaultBudgetData[type]
  4.     let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
  5.     spread.suspendPaint()
  6.     let sheetCount = spread.getSheetCount()
  7.     for(let i=0; i<sheetCount;i++){
  8.         let sheet = spread.getSheet(i)
  9.         sheet.setDataSource(source)
  10.     }
  11.     spread.resumePaint()
  12.     taskId.value = data.id
  13. }
  14. const defaultBudgetData = {
  15.   [budgetType.cost]: {
  16.     id:`成本NV-${getNowTime()}`,//项目编号
  17.     name:'',    //项目名称
  18.     city: '',   //项目所在地
  19.     customer: '',    //客户名称
  20.     price: 0        //本次报价
  21. },
  22.   [budgetType.sales]:{
  23.     id: `销售NV-${getNowTime()}`,
  24.     name:''
  25.   }
  26. }

4）任务下发

（1）在任务下发前 ，需要确认预测因子，预测因子基于往年数据，确认接下来的销售计划。

（2）填写预算名称 。

（3）点击“预算编制”菜单。

  1. distributeTask: {
  2.     title: "下发预算任务",
  3.     text: "预算编制",
  4.     iconClass: "distribute-icon",
  5.     bigButton: true,
  6.     commandName: "distributeTask",
  7.     execute: function (context) {
  8.         confirmDistribute(context,selectedBudget,distributeVisible)
  9.     }
  10. },
  12. const confirmDistribute = (context,selectBudgetType,distributeVisible) => {
  13.     /**预算任务下发时必填信息校验 */
  14.     let sheet = context.getWorkbook().getSheet(0)
  15.     let source = sheet.getDataSource().getSource()
  16.     for(let key in source){
  17.         if(!source[key]){
  18.             ElMessage.error("红色区域必填项信息缺失")
  19.             return
  20.         }
  21.     }
  22.     // 确认是否下发编制任务
  23.     ElMessageBox.confirm("确认下发预算编制任务吗？","下发确认",{
  24.         confirmButtonText:'确认',
  25.         cancelButtonText:"取消",
  26.         type:'warning'
  27.     }).then(() => {
  28.         // 确认下发，存储当前预算模板，下发部门信息
  29.         saveBudgetRecord(context, selectBudgetType)
  30.         distributeBudgetTask(context,distributeVisible)
  31.     }).catch(() => {
  32.         ElMessage({
  33.             type:'error',
  34.             message:'取消发布'
  35.         })
  36.     })
  37. }

在上述代码confirmDistribute()中，通过getDataSource()获取数据源，来判断红色区域的必填项是否填写。当确认下发任务后，执行saveBudgetRecord 、distributeBudgetTask方法。

5）填写任务

当确定下发任务后，对不同部门生成不同的编制链接。此弹窗可以参考代码中的OnlineDesigner.vue文件。

部门经理获取链接，打开链接，显示内容是自己部门区域预算明细填写和实际填写，此时，部门经理可以在左侧蓝色区域填写，而其他单元格不能编辑，这个是怎么做到的呢？具体可以参考这篇文章中第二点对少部分单元格可以编辑。

  1. var defaultStyle = new GC.Spread.Sheets.Style();
  2. defaultStyle.locked = false;
  3. sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
  4. // 设置第1行不可编辑
  5. var style = new GC.Spread.Sheets.Style();
  6. style.locked = true;
  7. style.backColor = "red";
  8. sheet.setStyle(0, -1, style);
  9. // 设置表单保护
  10. sheet.options.isProtected = true;

介绍完单元格的权限后，我们再来看下上图中还有哪些值得说一说的功能。

（1）添加签名

当经理设置完预算后，可以在区域总监单元格右键，看到多出来两个菜单“添加签名”和“添加手写签名”。

所以接下来介绍如何在右键菜单中新增菜单并定义其事件，代码如下：

  1. let signMenu = {
  2.     text:"添加签名",
  3.     name:"signName",
  4.     command:"signMenuCommand",
  5.     workArea: "viewport"
  6. }
  7. spread.contextMenu.menuData.push(signMenu)

上述代码在spread.contextMenu.menuData中push了一条对象，结果就是可以在右键菜单中看见“添加签名菜单” ，观察到上述对象定义了command属性，接下来定义“signMenuCommand”：

  1. let signMenuCommand = {
  2.     canUndo: true,
  3.     execute: function(context,options,isUndo){
  4.         if(isUndo){
  5.             GC.Spread.Sheets.Commands.undoTransaction(context,options)
  6.             return true
  7.         }else{
  8.             GC.Spread.Sheets.Commands.startTransaction(context,options)
  9.             let {activeRow,activeCol,sheetName} = options
  10.             let sheet = context.getSheetFromName(sheetName)
  11.             sheet.getCell(activeRow,activeCol).value(user).backColor('#F7A711').font('bold normal 15px normal')
  12.             GC.Spread.Sheets.Commands.endTransaction(context,options)
  13.             return true
  14.         }
  15.     }
  16. }
  17. commandManager.register("signMenuCommand",signMenuCommand,null, false, false, false, false)

上述代码是SpreadJS中注册命令的方法，并提供了撤销机制。我们主要看else里面的内容：首先从上下文context中获取sheet对象，接着获取单元格并设置内容、背景色、字体等。上述两段代码就实现了在SpreadJS中在右键菜单中添加菜单，并完整相应的点击逻辑。

（2）添加手写签名

接下来，我们看看如何设置“添加手写签名”：

  1. // 注册签名的右键菜单
  2. let commandManager = spread.commandManager()
  3. let signMenu = {
  4.     text:"添加手写签名",
  5.     name:"handWriteName",
  6.     command:"handWriteCommand",
  7.     workArea: "viewport"
  8. }
  9. spread.contextMenu.menuData.push(signMenu)
  10. let handWriteCommand = {
  11.     canUndo: false,
  12.     execute: function(context,options,isUndo){
  13.         showWriteDialog.value = true
  14.     }
  15. }
  16. commandManager.register("handWriteCommand",handWriteCommand,null, false, false, false, false)

添加菜单和菜单命令的方式与前文一致，不同的就是execute的执行逻辑。

最后，签名设置后，就可以点击“提交预算”按钮。

对了，如果数据不符合预期，可能会有红色预警，比如

这个是SpreadJS的数据验证功能，我们可以通过UI方式设置。如下图所示：

6）编制完成

当所有部门经理填写完预算后，就可以点击“编制完成”

此时点击“预算审核”，预算类型设置为“销售预算”，可以看到有一条待审核的标签，点进去看看。

看到了我们熟悉的页面

此时点击“华东”sheet看看

这个时候就看到了华东部门经理填写的销售预测数据，这个时候点击右上角的“导入年度实际销售数据”看看。

嗯，表格内容基本上填写完整了，这时候审核员（副总经理）如果对销售数据表示满意，可以签上自己的大名，就可以点击“审核完毕了”

当四个sheet都“审核完毕”，此时返回首页，发现标签变了。

这时候可以进行打印了。

最后

简单的全面预算编制系统就算介绍完了。大家可以在Demo地址实际体验下。总结下本文介绍的SpreadJS的几个知识点：

1、自定义Designer菜单

2、导入模板

3、设置数据源

4、获取数据源

5、自定义右键菜单

6、单元格权限

如果您想了解更多的信息，欢迎点击这篇参考资料查看。

扩展链接：

【干货放送】财务报表勾稽分析要点，一文读尽！

为什么你的财务报表不出色？推荐你了解这四个设计要点和！

纯前端类 Excel 表格控件在报表勾稽分析领域的应用场景解析

原文链接：https://www.cnblogs.com/powertoolsteam/p/18080540

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

编程经验热门文章

  • Prometheus监控之SNMP Exporter介绍和数据展现
  • Intel 82599网卡异常挂死原因
  • 腾讯防水墙的分析识别与破解
  • 桌面应用自动化WinAppDriver入门
  • 文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
  • 「教程」如何下载AcFun网站上的视频、A站视频下载工具
  • 基于Hi3559AV100的SVP(NNIE)开发整体流程
  • GBDT(梯度提升树)scikit-klearn中的参数说明及简汇
  • antd之RangePicker设置默认值方式
  • 决胜经典算法之插入排序

    • 编程经验推荐文章

  • wifi基础(一)：无线电波与WIFI信号干扰、衰减
  • 甲方扔给两个存在包名与类名均相同的Jar包，要在工程中同时使用怎么办？
  • 《花100块做个摸鱼小网站! 》第三篇—热搜表结构设计和热搜数据存储
  • Fluent Editor：一个基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
  • 方法的三种调用形式
  • 《花100块做个摸鱼小网站! 》第二篇—后端应用搭建和完成第一个爬虫
  • 《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark - 北京-宏哥
  • 《软件性能测试分析与调优实践之路》(第2版) 读书笔记（二）总体介绍（下）-真正从性能分析与调优来看性能测试
  • 架构知识点（三）
  • 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号