关于使用layui+tp6制作物品入库单，实现根据单价数量自动计算单品金额和合计金额

于 2024-05-12 10:35:47 发布
阅读量243 收藏 3
点赞数 6
分类专栏： layui学习笔记 文章标签： layui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xych_ccui/article/details/138745755
版权

本文使用layuiadmin pro+tp6制作。

关于layuiadmin资源，本人纯手工还原了std版本可下载学习使用，pro版也还原了，目前正在整理中 。

LayuiAdmin std 2.3.2,纯手工还原icon-default.png?t=N7T8https://download.csdn.net/download/xych_ccui/88902038

源码仅限学习使用，请勿商用及传播。

 效果：

 HTLM部分：

<title>库房管理</title>
<style>
    .inputbottom {
        /*input显示下边线样式*/
        border: none;
        border-bottom: 1px #c9c9c9 solid;
    }
</style>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">控制台</a>
        <a><cite>库房管理</cite></a>
        <a><cite>入库单</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card layui-form" lay-filter="form" id="form">
                <div class="layui-card-header layuiadmin-card-header-auto">
                    <button class="layui-btn layui-btn-normal" lay-href="storehouse/rukumingxi">入库明细列表</button>
                    <div style="float:right">
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="layuiadmin-app-storehouse-form-submit">提交</button>
                    </div>
                </div>
                <div class="layui-card-body" pad15>
                    <div class="layui-card-body">
                        <input type="text" name="stor_num" lay-verify="" value="物品入库单" class="layui-input inputbottom" style="width:300px;text-align:center;font-size:18px;margin:0 auto;" readonly>
                    </div>
                    <table class="layui-table" lay-skin="nob">
                        <colgroup>
                            <col width="100">
                            <col>
                            <col width="150">
                            <col width="200">
                            <col width="200">
                            <col width="200">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td align="right">入库说明：</td>
                                <td>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <input type="text" name="stor_title" lay-verify="required" autocomplete="off" placeholder="请输入本次入库单相关说明" class="layui-input inputbottom">
                                    </div>
                                </td>
                                <td align="right">入库时间：</td>
                                <td><input type="text" class="layui-input inputbottom" name="stor_time" id="stor_time" placeholder="yyyy-MM-dd"></td>
                                <td align="right">入库单号：</td>
                                <td>
                                    <script type="text/html" template lay-url="/ccadmins/storehouse/stornum_rk" lay-type="get" lay-done="layui.form.render();">
                                        <input type="text" name="stor_num" lay-verify="required" value="{{d.data.stornum}}" readonly class="layui-input inputbottom">
                                    </script>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col width="110">
                            <col width="90">
                            <col width="150">
                            <col width="150">
                            <col width="150">
                            <col width="70">
                        </colgroup>
                        <thead lay-skin="nob">
                            <tr>
                                <th style="text-align:center">物品名称</th>
                                <th style="text-align:center">品牌/供应商</th>
                                <th style="text-align:center">规格型号</th>
                                <th style="text-align:center">计量单位</th>
                                <th style="text-align:center">数量</th>
                                <th style="text-align:center">单价</th>
                                <th style="text-align:center">金额</th>
                                <th style="text-align:center">备注</th>
                                <th style="text-align:center">
                                    <span class="layui-btn layui-btn-xs layui-btn-normal add-line">&nbsp;增&nbsp;</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody style="text-align:center" id="lineList">
                            <tr>
                                <td><input type="text" name="item_name[]" lay-verify="required" class="layui-input" autocomplete="off"></td>
                                <td><input type="text" name="brand[]" class="layui-input" autocomplete="off"></td>
                                <td><input type="text" name="specification[]" class="layui-input" autocomplete="off">
                                </td>
                                <td><input type="text" name="unit[]" lay-verify="required" class="layui-input" autocomplete="off"></td>
                                <td><input type="text" name="amount[]" lay-verify="required|number" class="layui-input" autocomplete="off"></td>
                                <td><input type="text" name="price[]" lay-verify="required" class="layui-input" autocomplete="off"></td>
                                <td><input type="text" name="money[]" class="layui-input" readonly></td>
                                <td><input type="text" name="comment[]" class="layui-input" autocomplete="off"></td>
                                <td><span name="deleteGoods"></span></td>
                            </tr>

                        </tbody>
                        <tbody>
                            <tr>
                                <td>合计大写</td>
                                <td colspan="3"><input type="text" name="totaldx" class="layui-input" readonly></td>
                                <td>合计金额</td>
                                <td colspan="4"><input type="text" name="total" class="layui-input" readonly></td>
                            </tr>
                        </tbody>
                    </table>
                    <table class="layui-table" lay-skin="nob">
                        <colgroup>
                            <col width="120">
                            <col width="300">
                            <col width="120">
                            <col width="300">
                            <col width="120">
                            <col width="300">
                        </colgroup>
                        <tbody>
                            <tr>
                                <td align="right">入库申请人：</td>
                                <td>
                                    <script type="text/html" template lay-url="/storehouse/userslist" lay-type="get" lay-done="layui.form.render('select');">
                                        <select name="applicant" lay-filter="applicant" lay-verify="required" lay-reqText="请选择">
                                            <option value="">请选择</option>
                                            {{# layui.each(d.data, function(index, item){ }}
                                            <option value="{{item.id}}">
                                            {{item.user_name}}
                                            </option>
                                            {{# }); }}
                                        </select>
                                    </script>
                                </td>
                                <td align="right">操作人员：</td>
                                <td>
                                    <script type="text/html" template lay-url="/storehouse/userslist" lay-type="get" lay-done="layui.form.render('select');">
                                        <select name="operator" lay-filter="operator" lay-verify="required" lay-reqText="请选择">
                                            <option value="">请选择</option>
                                            {{# layui.each(d.data, function(index, item){ }}
                                            <option value="{{item.id}}">
                                            {{item.user_name}}
                                            </option>
                                            {{# }); }}
                                        </select>
                                    </script>
                                </td>
                                <td align="right">财务人员：</td>
                                <td>
                                    <script type="text/html" template lay-url="/storehouse/userslist" lay-type="get" lay-done="layui.form.render('select');">
                                        <select name="caiwu" lay-filter="caiwu" lay-verify="required" lay-reqText="请选择">
                                            <option value="">请选择</option>
                                            {{# layui.each(d.data, function(index, item){ }}
                                            <option value="{{item.id}}">
                                            {{item.user_name}}
                                            </option>
                                            {{# }); }}
                                        </select>
                                    </script>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

JS部分：

<script type="text/javascript">
    layui.use(['laydate', 'table', 'layer', 'admin', 'form'], function () {
        var $ = layui.jquery
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            , layer = layui.layer
            , laydate = layui.laydate
            , form = layui.form;
        //初始时间赋值
        laydate.render({
            elem: '#stor_time'
            , format: 'yyyy-MM-dd' //指定时间格式
            , value: new Date()
        });
        calc();       //合计
        numkeyup();   //输入数量
        pricekeyup(); //输入单价

        //监听增加行
        $('.add-line').on('click', function () {
            let tem = [
                '<tr>\
                    <td><input type="text" name="item_name[]" lay-verify="required" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="brand[]" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="specification[]" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="unit[]" lay-verify="required" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="amount[]" lay-verify="required" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="price[]" value="" lay-verify="required" class="layui-input" autocomplete="off"></td>\
                    <td><input type="text" name="money[]" class="layui-input" readonly></td>\
                    <td><input type="text" name="comment[]" class="layui-input" autocomplete="off"></td>\
                    <td><span class="layui-btn layui-btn-danger layui-btn-xs" name="deleteGoods">&nbsp;删&nbsp;</span></td>\
                </tr>'
            ];
            $('#lineList').append(tem);
            calc(); //计算
            numkeyup();   //输入数量
            pricekeyup(); //输入单价
            form.render();//渲染
        });
        //监听删除行
        $('#lineList').on('click', '.layui-btn-danger', function () {
            $(this).parents('tr').remove();
            calc();
        });
        //监听输入数量
        function numkeyup() {
            //body是关键，不然获取不到新增行的属性。也可以是父级或者祖级。
            var a = $("body input[name*='amount']").each(function () {
                $(this).on('keyup', function () { calc(); });
            });
        }
        //监听输入单价
        function pricekeyup() {
            var a = $("body input[name*='price']").each(function () {
                $(this).on('keyup', function () { calc(); });
            });
        }
        //计算价格
        function calc() {
            //找到共有对象
            var $obj = $("span[name='deleteGoods']");
            var sum = 0;
            //循环共有对象，让它循环获得我们想要的对象的值
            $obj.each(function () {
                //获得数量
                var $count = parseFloat($(this).parent().prev().prev().prev().prev().find("input").val());
                //获得单价
                var $price = parseFloat($(this).parent().prev().prev().prev().find("input").val());
                var timSum = $count * $price;
                if (timSum) {
                    $(this).parent().prev().prev().find("input").val(timSum.toFixed(2));//给金额赋值
                } else {
                    timSum = 0;
                    $(this).parent().prev().prev().find("input").val(timSum.toFixed(2));//给金额赋值
                }
                sum += timSum; //累加计算总价
                sumdx = num_change(sum.toFixed(2));//大写合计数
            });
            $("body input[name='total']").val(sum.toFixed(2));//赋值input合计
            $("body input[name='totaldx']").val(sumdx);       //赋值input合计大写
        };
        //监听提交
        form.on('submit(layuiadmin-app-storehouse-form-submit)', function (data) {
            var field = data.field; //获取提交的字段
            //....略
        });
        function num_change(money) {
            //汉字的数字
            var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
            //基本单位
            var cnIntRadice = new Array('', '拾', '佰', '仟');
            //对应整数部分扩展单位
            var cnIntUnits = new Array('', '万', '亿', '兆');
            //对应小数部分单位
            var cnDecUnits = new Array('角', '分', '毫', '厘');
            //整数金额时后面跟的字符
            var cnInteger = '整';
            //整型完以后的单位
            var cnIntLast = '元';
            //最大处理的数字
            var maxNum = 999999999999999.9999;
            //金额整数部分
            var integerNum;
            //金额小数部分
            var decimalNum;
            //输出的中文金额字符串
            var chineseStr = '';
            //分离金额后用的数组，预定义
            var parts;
            if (money == '') { return '零元'; }
            money = parseFloat(money);
            if (money >= maxNum) {
                //超出最大处理数字
                return '';
            }
            if (money == 0) {
                chineseStr = cnNums[0] + cnIntLast + cnInteger;
                return chineseStr;
            }
            //转换为字符串
            money = money.toString();
            if (money.indexOf('.') == -1) {
                integerNum = money;
                decimalNum = '';
            } else {
                parts = money.split('.');
                integerNum = parts[0];
                decimalNum = parts[1].substr(0, 4);
            }
            //获取整型部分转换
            if (parseInt(integerNum, 10) > 0) {
                var zeroCount = 0;
                var IntLen = integerNum.length;
                for (var i = 0; i < IntLen; i++) {
                    var n = integerNum.substr(i, 1);
                    var p = IntLen - i - 1;
                    var q = p / 4;
                    var m = p % 4;
                    if (n == '0') {
                        zeroCount++;
                    } else {
                        if (zeroCount > 0) {
                            chineseStr += cnNums[0];
                        }
                        //归零
                        zeroCount = 0;
                        chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                    }
                    if (m == 0 && zeroCount < 4) {
                        chineseStr += cnIntUnits[q];
                    }
                }
                chineseStr += cnIntLast;
            }
            //小数部分
            if (decimalNum != '') {
                var decLen = decimalNum.length;
                for (var i = 0; i < decLen; i++) {
                    var n = decimalNum.substr(i, 1);
                    if (n != '0') {
                        chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                    }
                }
            }
            if (chineseStr == '') {
                chineseStr += cnNums[0] + cnIntLast + cnInteger;
            } else if (decimalNum == '') {
                chineseStr += cnInteger;
            }
            return chineseStr;
        }
    });

本文只写了关于前端的写法，关于后端获取数据库人员名单以及提交过程省略了，可以自行研究。

欢迎评论区进行评论和指导。

ccadmins
关注
  • 6
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
商城（微信小程序，公众号，H5,PC）vue+layui+tp6
11-12
打通版，包含sql文件，安装教程等。便捷可用，二次开发。包含支付宝支付，微信支付。后台易扩展。界面美观，功能强大。响应式系统
layui2.5.6 + tp6.0.2 权限管理后台
05-08
layui2.5.6 + thinkphp6.0.2 权限管理后台，简单的权限管理，thinkphp6的最新版本，多应用模式
TP6 + Layui实现无限极分类
weixin_44981396的博客
07-14 1007
TP6 + Layui实现无限极分类
基于ThinkPHP 6 和 LayUI 框架 的博客管理系统，用户登录注册包含验证码，博客文件上传，博客文章的crud
05-30
基于ThinkPHP 6 和 LayUI 框架 的博客管理系统，用户登录注册包含验证码，博客文件上传，博客文章的crud，用户个人信息的crud,jquery操作dom的ajax回调，博客文章上传的加密操作,用户密码加密，用户的登出。对当前用户的文章的管理。
Go语言Web开发Echo框架搭建
weixin_50196917的博客
11-21 774
一款 Go 语言基于Echo、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，同时支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实
基于ThinkPHP6 + Layui + MySql打造的实用的开源的企业办公系统
最新发布
08-23
勾股OA是一款实用的企业办公系统。... 办公自动化系统是员工及管理者使用频率最高的应用系统，可以极大提高公司的办公效率，我们立志为中小企业提供开源好用的办公自动化系统，帮助企业节省数字化、信息化办公的成本。
funadmin开源管理系统 curd+ tp6+layui+requirejs开发
03-29
funadmin开源后台管理系统 采用tp6+layui+requirejs开发
thinkphp6+layui+fly轻社区BBS论坛系统源码.zip
06-09
【标题】"thinkphp6+layui+fly轻社区BBS论坛系统源码.zip" 所涉及的知识点主要集中在三个核心部分：ThinkPHP6框架、Layui前端UI库以及轻量级社区BBS论坛系统的构建。 **ThinkPHP6框架** ThinkPHP6是基于PHP7.1+开发...
thinkphp6+layui 多应用整合
山水的博客
04-16 465
thinkphp6+layui 多应用整合，接口项目和后台项目 地址：http://121.4.125.12:8082/admin/ 接口文档：http://121.4.125.12:8082/apidoc 官网：http://121.4.125.12:8082
layui学习笔记（一） 关于layuiAdmin pro+ThinkPHP6部署方案（更新）
xych_ccui的博客
03-24 4568
由于 layuiAdmin pro 可采用前后端分离开发模式，因此你无需将其放置在你的服务端 MVC 框架中，你只需要给 layuiAdmin 主入口页面（我们也称之为： 宿主页面）进行访问解析，它即可全权完成自身路由的跳转和视图的呈现，而数据层则完全通过服务端提供的异步接口来完成。，并可自主完成数据渲染，服务端通常只负责数据接口，而前端只需专注视图和事件交互，所有的页面动作都是在一个宿主页面中完成，因此这赋予了layuiAdmin 单页面应用开发的能力。，服务端通常只负责数据接口。
Layui表格数据的计算
weixin_57784983的博客
06-08 2467
layui数据计算
thinkphp6结合layui增删改查综合案列
.
04-29 1441
主要实现登录退出功能，用户模块的增删改查功能，分页功能是layui表单自带功能
thinkphp6+layui实现文件上传功能
gudada010的博客
05-26 413
thinkphp6+layui实现文件上传功能
ERP系统-库存子系统-采购/成品入库单
caixuanji的博客
07-02 3092
库存子系统-入库单 文章目录 0、前言 1、定义 2、单据信息 3、页面要求 3、具体操作 3、查询一览 0、前言 文章已个人经验总结整理，如果有不足与欠缺的功能点或者是有表达错误的点的话请在评论区指正，我会及时进行修改处理更新！！！！！ 1.定义： 采购入库单：是企业确认采购收货的依据，用户可实现现款采购、赊购等业务，在实际处理时可以将其视同采购发票；采购入库单可引用采购订单生成；采购入库审核后仓库实际库存相应变化，同时对应的往来账款生效； 生产入库单：是处理生产订单的入库业务类型的库存单据，是
Laravel9极速后台开发框架
西里古里的博客
01-08 1285
一款 PHP 语言基于 Laravel9、Layui、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式：单图上传、多图上传、下拉选择、开关按钮、单选按钮、多选按钮、图片裁剪等等一系列个性化、轻量级的组件，是一款真正意义上实现组件化开发的敏捷开发框架，框架已集成了完整的RBAC权限架构和常规基础模块，为了敏捷快速开发，提升研发效率，框架内置了一键CR
tp6+layUI多图片上传(带排序、删除)功能
quweiie的专栏
12-26 917
tp6+layUI多图片上传
基于ThinkPhp6+Vue+ElementUI低代码开发平台
西里古里的博客
02-23 8018
一款 PHP 语言基于ThinkPhp6、Vue、ElementUI等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可用于快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，目前框架已集成了完整的RBAC权限架构和常规基础模块，前端Vue端支持多主题切换，可以根据自己喜欢的风格选择想一个的主题，实现了个性化呈现的需求；
智慧商贸进销存—新增日常支出
weixin_49772216的博客
03-08 357
效果图： Html： 代码过多，就展示一部分，就是创建一个模态框，在模态框创建一个form表单，在form表单里写上对应的字段就可以了 Jq： 创建function，在获取每个表单的id值，if判断，在用post请求，创建键值对，在判断是否成功，如成功关闭模态，刷新表格， 控制器： 先创建一个ReturnJson，新增收入，在if语句来判断收入的信息是否为空，将给（serType）实体以“添加”，状态添加到集的基础上下中，当调用SaveChanges时，会将该实体插入到数据库中，如果if判断Save
layui+tp5.0.24启用和停用按钮怎么做
05-25
在layui+tp5.0.24中，可以通过以下步骤实现启用和停用按钮： 1. 在HTML页面中添加一个按钮，比如： ```html <button class="layui-btn layui-btn-primary" id="button">启用</button> ``` 2. 在JavaScript中监听按钮点击事件，并根据需要修改按钮状态，比如： ```javascript <script> layui.use('layer', function(){ var layer = layui.layer; $('#button').on('click', function(){ var status = $(this).text(); // 获取当前按钮状态 if(status === '启用'){ $(this).text('停用'); // 修改按钮文本 $(this).removeClass('layui-btn-primary'); // 移除按钮的原始样式 $(this).addClass('layui-btn-danger'); // 添加新的样式 layer.msg('已启用'); // 显示提示信息 } else { $(this).text('启用'); // 修改按钮文本 $(this).removeClass('layui-btn-danger'); // 移除按钮的原始样式 $(this).addClass('layui-btn-primary'); // 添加新的样式 layer.msg('已停用'); // 显示提示信息 } }); }); </script> ``` 在这段代码中，我们使用了Layui的弹窗组件来显示提示信息，并通过修改按钮的文本和样式来改变按钮的状态。在实际项目中，你可以根据需求修改这段代码，比如将按钮状态保存到数据库中，或者通过Ajax请求来更新页面上的数据等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ccadmins

你的鼓励是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值