Centos7

CentOS7安装Python3的方法CentOS7搭建L2TP服务端一键脚本CentOS7使用CertBot工具获取LetSencrypt泛域名HTTPS证书

Git

GIT删除仓库的历史提交记录脚本示例GIT进行代码量统计和贡献统计

HTTP

HTTP关于HEADER的详细解释HTTP协议对URI长度POST数据长度及COOKIE长度限制说明HTTP关于Code状态码的详细解释

JavaScript

JavaScript下的RSA对称加密DEMOJavaScript解析并遍历Excel示例代码JavaScript调用语音合成Speech Synthesis API使用ElementUI配合API数据快速渲染合并表格

Linux

Linux 信号说明列表说明Linux利用CronTab定时执行ThinkPHP命令行模式

MySQL

MySQL字符串截取MySQL腾讯云数据库导出备份到本地服务器导入MySQL设计与使用规范MySQL在5.7及以上版本中的ONLY_FULL_GROUP_BY问题处理方案

Nginx

Nginx反向代理NodeJS实现WSS协议Nginx反向代理中的Host参数传递遇到的坑Nginx配置HTTPS与HTTP2.0Nginx负载均衡的lnmp环境初始化脚本Nginx图片递归代理服务器DEMO

NodeJS

NodeJS一些冷门但实用的npm包NodeJS使用Request模块实现CURLNodeJS使用express模块无法收到phpCurl的值NodeJS使用jimp和qrcode-reader识别解析二维码NodeJS实现UDP数据报套接字通讯NodeJS实现Websocket聊天室NodeJS实现串口通讯简单例程NodeJS实现微信协议登录NodeJS实现超级方便的Git自动发布WebhookNodeJS控制台简单表格打印NodeJS转码amr到mp3NWJS配置文件

Other

C#串口通信扫码枪数据读取支付宝Schema协议列表默克尔树基础算法示例博客的升级历程

PHP

PHP下RSA对称加密超长字符串分段加密DEMOPHP下phpMyAdmin数据字典美化代码PHP下的RSA对称加解密-根证书自签与签发子证书PHP使用root权限执行系统命令和切换到www用户PHP使用独占文件指针实现阻塞少量并发PHP多进程同时处理任务示例DEMO代码PHP大文件视频上传WebUploaderPHP实现Web方式发起一个超时任务的处理请求PHP实现二叉查找树的简单代码实现PHP实现微博登录简单代码PHP微信JSSDK开发DEMOPHP的坑XML转JSONPHP简单实现QQ登录代码PHP获取URL HTTP_HOST和SERVER_NAMEPHP获取上周、本周、上月、本月、本季度、上季度时间方法PHP获取真实IP之IP代理-IP伪造-真实IPPHP解密微信小程序手机号简单DEMOPHP高精度计算常用代码

Python

Python3使用Pool进程池实现多进程并发Python3使用jieba分词并生成WordCloud词云图Python3使用request进行CURL操作Python3实现WebhookPython3使用Selenium进行自动化测试手册

Wechat

微信公众号php环境无法获取POST值微信公众号网页跳转避免出现导航栏的小技巧
使用ElementUI配合API数据快速渲染合并表格
手机阅读

扫描二维码阅读文章

一、需求描述 数据来源于后端API

要求,对item字段进行合并,并统计item的小计值

体验地址:
https://test.hamm.cn/table

二、数据库设计(MySQL)

CREATE TABLE `item` (
  `item_id` int(11) NOT NULL,
  `item_row` int(11) NOT NULL,
  `item_body` varchar(255) NOT NULL,
  `item_cropnum` int(11) NOT NULL,
  `item_premoney` int(11) NOT NULL,
  `item_pretax` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `item` (`item_id`, `item_row`, `item_body`, `item_cropnum`, `item_premoney`, `item_pretax`) VALUES
(1, 1, '北京', 1, 100, 100),
(2, 1, '上海', 2, 200, 200),
(3, 1, '上海', 3, 300, 300),
(4, 2, '上海', 3, 300, 300),
(5, 2, '上海', 2, 200, 200),
(6, 2, '北京', 1, 100, 100);

CREATE TABLE `row` (
  `row_id` int(11) NOT NULL,
  `row_date` varchar(255) NOT NULL,
  `row_name` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `row` (`row_id`, `row_date`, `row_name`) VALUES
(1, '2020-05', '张三'),
(2, '2020-05', '李四'),
(3, '2020-05', '王五');

ALTER TABLE `item`
  ADD PRIMARY KEY (`item_id`);

ALTER TABLE `row`
  ADD PRIMARY KEY (`row_id`);

ALTER TABLE `item`
  MODIFY `item_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
  
ALTER TABLE `row`
  MODIFY `row_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

三、PHP实现API(demo)

<?php
require_once("mysql.php");

$link = mysqli_connect($host , $user , $pass);
if (!$link){
	exit('数据库连接失败');
}
mysqli_select_db($link , 'test');
$sql = "select * from row";
$res = mysqli_query($link,$sql);
$data = [];
while($row = mysqli_fetch_assoc($res)){
    $res_item = mysqli_query($link,'select * from item where item_row = '.$row['row_id']);
    $itemArray=[];
    while($row_item = mysqli_fetch_assoc($res_item)){
        array_push($itemArray,$row_item);
    }
    $row['item'] = $itemArray;
    
    $res_total_pretax = mysqli_query($link,'select sum(item_pretax) as taxTotal from item where item_row = '.$row['row_id']);
    $row_item_pretax = mysqli_fetch_assoc($res_total_pretax);
    $row['row_pretaxtotal'] = $row_item_pretax['taxTotal'] ?? 0;
    
    $res_total_premoney = mysqli_query($link,'select sum(item_premoney) as moneyTotal from item where item_row = '.$row['row_id']);
    $row_item_premoney = mysqli_fetch_assoc($res_total_premoney);
    $row['row_premoneytotal'] = $row_item_premoney['moneyTotal'] ?? 0;
    
    $row['item'] = $itemArray;
    array_push($data,$row);
}
echo json_encode($data);

四、前端实现

<!DOCTYPE html>
<html>
    
    <head>
        <title>test</title>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://sa.hamm.cn/static/css/element.css">
    </head>
    
    <body>
        <div id="app" v-cloak>
            <el-table :data="tableData" :span-method="objectSpanMethod" border>
                <el-table-column prop="row_id" label="ID"></el-table-column>
                <el-table-column prop="row_date" label="日期"></el-table-column>
                <el-table-column prop="row_name" label="商务"></el-table-column>
                <el-table-column prop="item_body" label="合作主体"></el-table-column>
                <el-table-column prop="item_premoney" label="预估金额"></el-table-column>
                <el-table-column prop="row_premoneytotal" label="小计"></el-table-column>
                <el-table-column prop="item_pretax" label="预估发票"></el-table-column>
                <el-table-column prop="row_pretaxtotal" label="小计"></el-table-column>
                <el-table-column prop="item_cropnum" label="企业数量"></el-table-column>
        </div>
    </body>
    <script src="https://sa.hamm.cn/static/js/vue-2.6.10.min.js"></script>
    <script src="https://sa.hamm.cn/static/js/axios.min.js"></script>
    <script src="https://sa.hamm.cn/static/js/element.js"></script>
    <script>
    new Vue({
        el: '#app',
        data() {
            this.getData();
            return {
                tableData: []
            }
        },
        methods: {
            getData() {
                var that = this;
                axios.post('/api.php')
                    .then(function (response) {
                    console.log(response);
                    var data = [];
                    for (index in response.data) {
                        response.data[index].itemCount = response.data[index].item.length;
                        if (response.data[index].item.length == 0) {
                            response.data[index].item_pretax = 0;
                            response.data[index].item_premoney = 0;
                            response.data[index].item_cropnum = 0;
                            response.data[index].item_body = "暂无";
                            data.push(response.data[index]);
                        } else {
                            for (index_item in response.data[index].item) {
                                if (index_item == 0) {
                                    data.push({...response.data[index], ...response.data[index].item[index_item]
                                    });
                                } else {
                                    data.push(response.data[index].item[index_item]);
                                }
                            }
                        }
                    }
                    that.tableData = data;
                })
                    .
                catch (function (error) {});
            },
            objectSpanMethod({
                row, column, rowIndex, columnIndex
            }) {
                if (row.itemCount == 0) {
                    return {
                        rowspan: 1,
                        colspan: 1
                    };
                } else {
                    switch (columnIndex) {
                    case 0:
                    case 1:
                    case 2:
                    case 5:
                    case 7:
                        if (rowIndex % row.itemCount == 0) {
                            return {
                                rowspan: row.itemCount,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                        break;
                    default:
                    }
                }

            }
        }
    })
    </script>
</html>