优化预算管理流程：Web端实现预算编制的利器

news2024/9/21 11:09:03

本文由葡萄城技术团队原创并首发。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

前言：什么是预算和预算编制

预算

预算是企业在预测、决策的基础上，以数量和金额的形式反映的企业未来一定时期内经营、投资、财务等活动的具体计划，为实现企业目标而对各种资源和企业活动的详细安排，是计划的数字化、表格化、明细化表达。预算管理的分类包括经营预算、专门决策预算和财务预算：

**经营预算：**经营预算也叫做业务预算，是指与企业日常业务直接相关的一系列预算。包括销售预算、生产预算、采购预算、成本预算等。

**专门决策预算：**专门决策预算是指企业重大的或不经常发生的，需要根据特定决策编制的预算，包括投融资决策预算等。

**财务预算：**财务预算是指与企业资金收支、财务状况或经营成果相关的预算。包括资金预算、预计利润表和资产负债表等内容。

预算编制

预算编制流程的基本方式是按照"上下结合、分级编制、逐级汇总"的程序进行，主要包含以下几个步骤：

  1. 提出及下达目标：企业董事会根据企业发展战略和预算期经济形势的初步预测，在决策的基础上，提出下一年度企业预算目标。
  2. 编制上报：结合自身特点及预测预算的执行条件，提出详细的本单位预算方案，上报企业预算相关责任部门。
  3. 审查平衡：企业预算相关部门对各预算执行单位上报的预算方案进行审查、汇总、提出综合平衡意见。
  4. 审议批准：企业预算相关部门正式编制企业年度预算草案，提交董事会或经理办公会审议批准。
  5. 下达执行：预算委员会逐级下达各预算执行单位执行。

如何在Web端实现预算编制

全面预算解决方案用于搭建覆盖全业务的预算体系，保障企业战略目标通过预算真正落地，涉及预算编制、预算合并、预算控制、预算分析、预算考核等环节。本文小编将以项目成本预算、销售预算为例，结合葡萄城公司的类Excel表格控件SpreadJS，探索web端预算编制的实现方式。

接下来将分别为大家介绍SpreadJS在预算系统中如何实现数据校验功能和签名功能：

（1）数据校验

Excel中有一个功能叫做数据验证，用于告知使用人员，对应单元格需要填写什么样类型的数据，例如可以限制单元格只能输入数字或者单元格只能在某些序列中选择。当用户填写数据不合法时，会清空对应的填写数据。SpreadJS中同样内置了数据验证的功能，在UI操作上，它和Excel一致。作为前端控件，SpreadJS也支持使用代码的形式来添加数据验证。如下图所示，在销售预算表蓝色背景区域，对输入内容进行了必须大于10000的验证，使用者会看到对应的内容提示。

SpreadJS进行数据验证的代码：

 var spreadNS = GC.Spread.Sheets;
        window.onload = function () {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
            initSpread(spread);
        };

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.suspendPaint();
            loadData(spread);
            setValidator(spread);
            sheet.resumePaint();

            document.getElementById("highlightInvalidData").checked = spread.options.highlightInvalidData;

            document.getElementById("highlightInvalidData").addEventListener('click',function () {
                spread.options.highlightInvalidData = document.getElementById("highlightInvalidData").checked;
            });
        };        

//设置过滤方法
          function setValidator(spread) {
            var sheet = spread.getActiveSheet();

            spread.options.highlightInvalidData = true;

            //ListValidator
            var dv1 = new spreadNS.DataValidation.createListValidator("Fruit,Vegetable,Food");
            dv1.inputTitle("Please choose a category:");
            dv1.inputMessage("Fruit, Vegetable, Food");
            dv1.highlightStyle({
                type: GC.Spread.Sheets.DataValidation.HighlightType.icon,
                color: "gold",
                position: GC.Spread.Sheets.DataValidation.HighlightPosition.outsideRight,
            });
            for (var i = 5; i < 11; i++) {
                sheet.setDataValidator(i, 2, dv1);
            }

            //FormulaListValidator
            var dv2 = new spreadNS.DataValidation.createFormulaListValidator("$A$5:$A$6")
            for (var i = 5; i < 11; i++) {
                sheet.setDataValidator(i, 4, dv2);
            }

            sheet.setValue(14, 0, "ValidationList Comma Support");
            //Validation List Support Comma
            sheet.setValue(14, 2, "Amount of money");
            var dv3 = new GC.Spread.Sheets.DataValidation.createListValidator("123\\,456,234\\,567,789\\,564");
            dv3.inputTitle("Please choose a number:");
            dv3.inputMessage("Amount of money");
            dv3.highlightStyle({
                type: GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
                color: "green",
                position: GC.Spread.Sheets.DataValidation.HighlightPosition.topRight
            });
            sheet.setDataValidator(14,2, dv3);   
            sheet.setDataValidator(14, 4, dv4);
        }

除此之外，Web系统中，在进行表单提交时，通常会有一些必填字段。这里采取的SpreadJS中数据绑定的方式，对必填字段进行绑定字段，之后设置单元格背景色，用以提示使用人员对应区域为必填。

如下图成本预算中，红色部分为必须填写的字段。当预算表处于设计阶段时，可以看到右侧绑定的字段。将对应字段拉动到单元格内部，单元格内部会形成以中括号包裹字段内容的形式，这就表明，该单元格与对应字段进行了绑定。

当提交保存时，首先会利用SpreadJS中获取绑定数据相关的api，用来获取绑定字段的值，如果绑定字段中有空值，表明对应单元格没有填写内容，拒绝提交。具体表现形式如下所示：

这种数据绑定的形式，不仅可以用于必填值的判断，也可以用于去结构化的抽取文件中的部分数据，方便用户存取数据。

（2）签名

在审批流程中，当预算编制到对应环节时，需要对应角色在文件中进行签名，表示同意或者驳回该审批过程。SpreadJS中支持添加图片的功能，并可以将图片固定在对应的单元格上。结合一些第三方的签名插件，就可以实现签名完成之后，将对应的签名图片添加到单元格上。

下面是实现手写签名的代码：

/**
在线Demo访问地址：
https://jscodemine.grapecity.com/share/sXBAh7hZ00SAsemg_1jLbQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen=%7B%22OpenedFileName%22%3A%5B%22%2Findex.html%22%5D%2C%22ActiveFile%22%3A%22%2Findex.html%22%7D
**/
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-excelio"
import "@grapecity/spread-sheets-charts"
import "@grapecity/spread-sheets-print"
import "@grapecity/spread-sheets-resources-zh"
import "@grapecity/spread-sheets-pdf"
import "@grapecity/spread-sheets-barcode"
import "@grapecity/spread-sheets-languagepackages"
import "@grapecity/spread-sheets-shapes"
import "@grapecity/spread-sheets-pivot-addon"
import "@grapecity/spread-sheets-designer-resources-cn"
import "@grapecity/spread-sheets-designer"

let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
let customeAddSign = {
    "text":"添加手写签名",
    commandName:"customeAddSign",
    execute:() => {
        if(document.getElementById("signArea")){
            document.getElementById("signArea").style.visibility = 'visible'
        }
        
    }
}
// 追加自定义右键菜单
config.contextMenu.push("customeAddSign")
config.commandMap = {
    customeAddSign
}

let designer = new GC.Spread.Sheets.Designer.Designer("designer-container",config)

let spread = designer.getWorkbook()

$("#sign").jSignature({lineWidth:'16',width:'100%',height:'100%'})

document.getElementById("clear").onclick = function(){
   $("#sign").jSignature("reset") 
}

document.getElementById("confirm").onclick = function(){
    let datapair = "data:" + $("#sign").jSignature("getData")  
    let sheet = spread.getActiveSheet()
        let row = sheet.getActiveRowIndex()
        let col = sheet.getActiveColumnIndex()
        let picture = sheet.shapes.addPictureShape(`${sheet.name()}-${row}-${col}}`, datapair,0,0,100,100);
        picture.startRow(row)
        picture.endRow(row + 1)
        picture.startColumn(col)
        picture.endColumn(col + 1)
        picture.startRowOffset(0);
        picture.startColumnOffset(0);
        picture.endRowOffset(0);
        picture.endColumnOffset(0);
        picture.allowResize(false)
        picture.allowMove(false)
        picture.allowRotate(false)
         $("#sign").jSignature("reset") 
        document.getElementById("signArea").style.visibility = 'hidden'
    

}

实现效果如下图所示：

总结

以上就是SpreadJS在预算系统中部分功能的实现简介。如果您想了解更多有关于SpreadJS在预算系统中的应用，欢迎体验这个在线Demo。

扩展链接：

从表单驱动到模型驱动，解读低代码开发平台的发展趋势

低代码开发平台是什么？

基于分支的版本管理，帮助低代码从项目交付走向定制化产品开发

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1135124.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

(免费领源码）php#Thinkphp#MYSQL校园二手交易app 99211-计算机毕业设计项目选题推荐

(免费领源码）php#Thinkphp#MYSQL校园二手交易app 99211-计算机毕业设计项目选题推荐

目 录 摘要 Abstract 1 绪论 1.1 研究背景 1.2国内外研究现状 1.3论文结构与章节安排 2 校园二手物品交易app系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据流程 3.3.2 业务流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系统用例分析…
阅读更多...
用傲梅分区软件分割分区重启系统蓝屏BAD_SYSTEM_CONFIG_INFO，八个解决参考方案

用傲梅分区软件分割分区重启系统蓝屏BAD_SYSTEM_CONFIG_INFO，八个解决参考方案

环境： Win11 专业版 HP 笔记本 傲梅分区软件 闪迪16G U盘 Win10 官方镜像文件 Win11PE 系统安装U盘 USB固态硬盘盒 问题描述： 起因 开始使用windows自动磁盘管理工具压缩不了磁盘，提示无法将卷压缩到超出任何不可移动的文件所在点，关闭系统保护还原，删除系统创建…
阅读更多...
J41H-40C法兰截止阀型号解析

J41H-40C法兰截止阀型号解析

J41H-40C型号字母含义解析 J41H-40C型号是德特森阀门常用的截止阀型号字母代表的意思是: J——代表阀门类型《截止阀》 4——代表连接方式《法兰》 1——代表结构形式《直流》 H——代表阀座堆焊《不锈钢》 -《分隔键》 40——代表公称压力《4.0MPA》 C——代表阀体材料…
阅读更多...
win操作系统下安装Deepspeed

win操作系统下安装Deepspeed

1. 准备cunda环境 下载cuda、cudnn&#xff0c; CUDA Toolkit Archive | NVIDIA Developerhttps://developer.nvidia.com/cuda-toolkit-archive Log in | NVIDIA Developerhttps://developer.nvidia.com/rdp/cudnn-download 选择版本可以参考里的Index of /anaconda/cloud/p…
阅读更多...
通过阿里云创建accessKeyId和accessKeySecret

通过阿里云创建accessKeyId和accessKeySecret

我们想实现服务端向个人发送短信验证码 需要通过accessKeyId和accessKeySecret 这里可以白嫖阿里云的 这里 我们先访问阿里云官网 阿里云地址 进入后搜索并进入短信服务 如果没登录 就 登录一下先 然后在搜索框搜索短信服务 点击进入 因为我也是第一次操作 我们一起点免费开…
阅读更多...
禁止U盘拷贝-保护数据安全

禁止U盘拷贝-保护数据安全

禁止U盘拷贝-保护数据安全 下载使用安企神U盘管理系统 U盘是一种可移动存储设备&#xff0c;可以方便地实现数据的传输和共享。然而&#xff0c;U盘的通用性和便携性也给它带来了安全隐患。如果U盘落入恶意用户手中&#xff0c;可能会导致敏感数据的泄露&#xff0c;给企业和…
阅读更多...
在线数据库设计工具Itbuilder

在线数据库设计工具Itbuilder

有人说——不具备全局观的设计者想着如果把一片树叶设计的非常美&#xff0c;而忘了树叶需要树枝&#xff0c;树枝是构成大树的一部分&#xff0c;所以说去培育一片森林&#xff0c;才叫做设计。而数据库设计亦是如此&#xff0c;如果纠结于某个列某个表的设计&#xff0c;而忘…
阅读更多...
01-windows栈溢出

01-windows栈溢出

简单栈溢出 测试环境&#xff1a; win xp sp3 cn 辅助环境&#xff1a;mac&#xff0c;安装了pwntoosl、msf 使用0day安全中的随书文件&#xff1a;0day\02栈溢出原理与实践\2_4_overflow_code_exec\Debug\stack_overflow_exec.exe git clone https://github.com/jas502n/0da…
阅读更多...
3. 博弈树 (15分)

3. 博弈树 (15分)

下棋属于一种博弈游戏&#xff0c;博弈过程可以用树&#xff08;博弈树&#xff09;来表示。假设游戏由两个人&#xff08; A 和 B &#xff09;玩&#xff0c;开始由某个人从根结点开始走&#xff0c;两个人轮流走棋&#xff0c;每次只能走一步&#xff0c; 下一步棋只能选择当…
阅读更多...
Python 算法高级篇：启发式搜索与 A *算法

Python 算法高级篇：启发式搜索与 A *算法

Python 算法高级篇&#xff1a;启发式搜索与 A *算法 引言 1. 什么是启发式搜索&#xff1f;1.1 启发式函数的特性1.2 启发式搜索算法 2. A *算法的原理2.1 A *算法的伪代码2.2 A *算法的优点 3. Python 中的 A *算法实现4. 总结 引言 启发式搜索是一种常用于解决路径规划和优…
阅读更多...
【Java集合类面试二十九】、说一说HashSet的底层结构

【Java集合类面试二十九】、说一说HashSet的底层结构

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说一说HashSet的底层结构…
阅读更多...
【CCF-A类】IEEE-TRANS系列，1区顶刊，WOS稳定收录32年，对国人友好，仅17天检索！

【CCF-A类】IEEE-TRANS系列，1区顶刊，WOS稳定收录32年，对国人友好，仅17天检索！

论文写作堪比西天取经&#xff0c;当我们经历“九九八十一难&#xff0c;取得真经“&#xff0c;还有最关键的一步&#xff0c;就是选刊发表。是“投石问路”&#xff0c;还是“投其所好”&#xff1f; 选刊有多重要&#xff0c;相信只要有过发表SCI经验的人都十分清楚。如果不…
阅读更多...
【QT】对象树

【QT】对象树

一、QT对象树的概念 先来看一下 QObject 的构造函数&#xff1a; 通过帮助文档我们可以看到&#xff0c;QObject 的构造函数中会传入一个 Parent 父对象指针&#xff0c;children() 函数返回 QObjectList。即每一个 QObject 对象有且仅有一个父对象&#xff0c;但可以有很多个…
阅读更多...
什么是间谍软件恶意软件？

什么是间谍软件恶意软件？

攻击者利用此类软件从受感染的设备中收集和传输信息。这可能包括个人、银行和用户凭证&#xff08;社交网络、流媒体服务、邮件等的登录名和密码&#xff09;&#xff0c;以及设备内存中的文件。 在间谍软件的帮助下&#xff0c;欺诈者还可以窃取公司凭证&#xff0c;不仅伤害…
阅读更多...
Vue 3中toRaw和markRaw的使用

Vue 3中toRaw和markRaw的使用

文章目录 Vue 3的响应性系统使用toRaw使用markRaw使用场景1. 与第三方库交互2. 提高性能3. 避免无限循环 总结 &#x1f389;欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨博客主页&#xff1a;IT陈寒的博客&#…
阅读更多...
Linux基础：2：shell外壳+文件权限

Linux基础：2：shell外壳+文件权限

shell外壳文件权限 一.shell原理&#xff1a;1.对比&#xff1a;windo GUI 和 shell1.windo GUI2. shell 2.为什么&#xff1f;是什么&#xff1f;怎么办&#xff1f;1.为什么有shell2.是什么&#xff1f;3.怎么办&#xff1f;4.补充&#xff1a; 二.linux权限管理&#xff1a;…
阅读更多...
Linux redis 安装

Linux redis 安装

1、解压 tar -zxvf redis-5.0.10.tar.gz 2、cd /data/redis-5.0.10 文件夹 3、make 等待make命令执行完成即可。 make命令报错&#xff1a;cc 未找到命令&#xff0c;系统中缺少gcc&#xff0c;执行命令安装 gcc&#xff1a; yum -y install gcc automake autocon…
阅读更多...
蓝桥杯每日一题2023.10.25

蓝桥杯每日一题2023.10.25

乘积尾零 - 蓝桥云课 (lanqiao.cn) 题目描述 题目分析 由于需要相乘的数很多&#xff0c;所以我们不能直接进行暴力模拟&#xff0c;我们知道10 2 * 5&#xff0c; 所以我们只需要找出这个数2和5的个数&#xff0c;其中2和5个数小的那个则为末尾0出现的个数 #include<bi…
阅读更多...
探讨安科瑞低压备自投装置AM5-DB的应用-安科瑞 蒋静

探讨安科瑞低压备自投装置AM5-DB的应用-安科瑞 蒋静

1 概况 本项目主要为发电机组供电切换提供备自投保护功能&#xff0c;该发电机组的供电主要由两进线一母联的系统组成&#xff0c;其中&#xff0c;每路进线分别由一路市电和一路柴油发电机切换提供&#xff0c;故此&#xff0c;我司用了三台低压备自投装置AM5-DB来实现备自投…
阅读更多...
软信天成：助力某制造企业建设产品主数据管理平台案例分享

软信天成：助力某制造企业建设产品主数据管理平台案例分享

某国有大型传统制造企业是一家跨领域、跨行业经营的国际化公司&#xff0c;在全球范围内拥有动力系统、工程机械、汽车制造等多个业务板块、分子公司遍及世界、产品远销110多个国家和地区&#xff0c;产品品类繁多&#xff0c;分支架构错综复杂。 近年来&#xff0c;数字化的深…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023