# datareport

**Repository Path**: damai2/datareport

## Basic Information

- **Project Name**: datareport
- **Description**: 模版案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-11-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原始记录模版帮助手册
## 一、理解原理
### 1.1、页面传值
![alt 交互原理](https://images.gitee.com/uploads/images/2019/1125/165615_50bfebb4_1168952.png "交互原理")
* step-1）父窗体开始，点击打开原始记录模版
* step-2）原始记录模版根据父级提供的数值验证是编辑还是添加操作，编辑操作时需给文本框赋值
* step-3）原始记录点击保存，传递JSON给父窗体
* step-4）由父窗体统一保存到数据库
* step-5）报告模版使用对应关系呈现报告

### 1.2、层级关系
 **注意:特殊情况除外，会存在一个项目多个模版的情况，会编写前通知** 

*一个项目->一个原始记录模版->一个报告模版*

*一个项目->多个参数*

*一个原始记录模版->多个参数*

## 二、开发前准备
##### 1）项目对应的参数列表
##### 2）参数模版样式
##### 3）报告模版最终样式
##### 4）原始记录计算公式
##### 5）原始记录与报告对应关系文件


## 三、重要方法
##### 1）父窗体保存的方法及已添加的数据
``` js
//父窗体添加方法
addjson(json)
```
``` html
<!--父窗体中已采集数据存放在父级唯一一个name="prolist" 标签中-->
<input name="prolist" type="hidden" value="已采集的JSON位置" />
```
##### 2）原始记录页根据父窗体中隐藏域的值判断是否是编辑操作
``` js
//原始记录模版调用方法 可以参考内置在main.js中的页面编辑方法 Load()
 var val = $(window.parent.document).find("input[name='prolist']").val();
 if (val != null) {
        ...
 }
```
##### 3）原始记录页点击保存,根据name及value采集成json串，传递给父窗体，可以参考main.js中TestSub()
``` js
//原始记录模版传递JSON给父级方法 
parent.addjson(json);
```
##### 4）父级执行保存到数据库，子级具体采集到的JSON数据格式为
``` json
{
    "type":1,
    "isqualified":"true",
    "attch1":"",
    "attch2":"",
    "attch3":"",
    "attch4":"",
    "attch5":"",
    "attch6":"",
    "attch7":"",
    "attch8":"",
    "attch9":"",
    "attch10":"",
    "list":[
        {
            "name":"参数1",
            "sort":"1",
            "attch1":"",
            "attch2":"",
            "attch3":"",
            "attch4":"",
            "attch5":"",
            "attch6":"",
            "attch7":"",
            "attch8":"",
            "attch9":"",
            "attch10":"",
            "attch11":"",
            "attch12":"",
            "attch13":"",
            "attch14":"",
            "attch15":"",
            "attch16":"",
            "attch17":"",
            "attch18":"",
            "attch19":"",
            "attch20":"",
            "value":[
                {
                    "name":"cs1sj1",
                    "value":"参数1数据1"
                },
                {
                    "name":"cs1sj2",
                    "value":"参数1数据2"
                },
                {
                    "name":"cs1sj3",
                    "value":"参数1数据3"
                }
            ]
        },
        {
            "name":"参数2",
            "sort":"2",
            "attch1":"",
            "attch2":"",
            "attch3":"",
            "attch4":"",
            "attch5":"",
            "attch6":"",
            "attch7":"",
            "attch8":"",
            "attch9":"",
            "attch10":"",
            "attch11":"",
            "attch12":"",
            "attch13":"",
            "attch14":"",
            "attch15":"",
            "attch16":"",
            "attch17":"",
            "attch18":"",
            "attch19":"",
            "attch20":"",
            "value":[
                {
                    "name":"cs2sj1",
                    "value":"参数2数据1"
                },
                {
                    "name":"cs2sj2",
                    "value":"参数2数据2"
                },
                {
                    "name":"cs2sj3",
                    "value":"参数2数据3"
                }
            ]
        },
        {
            "name":"参数3",
            "sort":"3",
            "attch1":"",
            "attch2":"",
            "attch3":"",
            "attch4":"",
            "attch5":"",
            "attch6":"",
            "attch7":"",
            "attch8":"",
            "attch9":"",
            "attch10":"",
            "attch11":"",
            "attch12":"",
            "attch13":"",
            "attch14":"",
            "attch15":"",
            "attch16":"",
            "attch17":"",
            "attch18":"",
            "attch19":"",
            "attch20":"",
            "value":[
                {
                    "name":"cs3sj1",
                    "value":"参数3数据1"
                },
                {
                    "name":"cs3sj2",
                    "value":"参数3数据2"
                },
                {
                    "name":"cs3sj3",
                    "value":"参数3数据3"
                }
            ]
        }
    ],
    "value":[
        {
            "name":"qtsj1",
            "value":"其他数据1"
        },
        {
            "name":"qtsj2",
            "value":"其他数据2"
        },
        {
            "name":"qtsj3",
            "value":"其他数据3"
        }
    ]
}
```

##### 5）报告模版读取数据库JSON，具体为：使用实现形式会在报告模版手册设计中介绍

## 四、开始开发
**下面以一个简单模版作为案例进行编写**
<font style='color:red'>注意:每个模版下输入框的name不能相同,否者会造成报告读取失败,请认真检查</font>
#### 1）设计文档层次关系
``` js
├── 工作文件夹
|   ├── Scripts
|   ├    ├──main.js
|   ├    ├──jquery.min.js
|   └── CSS
|   ├    ├── main.css
|   └── Views
|        └──  xxx.html
```
#### 2）引用css文件
``` css
<!--Css只能使用默认在Css下的文件，其他样式请写在当前Html中-->
<link rel="stylesheet" href="../Css/main.css">
```
#### 3）引用js文件
``` js
//注意只能引用默认在Script下的文件 其他脚本需写在当前Html中
<script src="../Scripts/main.js" type="text/javascript"></script>
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
```
#### 4）模版通用头部
``` html
   <table cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <!-- 6-合并行跟实际情况修改  -->
                <td colspan=6 class="tbody">
                    原始记录采集表
                    <button type="button" class="subbutton" onclick="TestSub()">保存</button>
                </td>
            </tr>
            <tr>
                <td>检测结论</td>
                <!-- 按要求输出要求 -->
                <td colspan=5>
                    <!-- 隐藏域 是否合格-->
                    <input type="hidden" name="ischeck" value="true">
                    <input type="text" name="jl" value="符合XXX标准的要求">
                </td>
            </tr>
        </tbody>
    </table>
```
### 5）模版中参数选择区域 页面初始化自动补充
``` html
    <div id="showpar">
        <!-- 参数选项显示位置 -->
    </div>
```
### 6）参数采集区域 按参数划分 每个参数对应一个form 
``` html
 <!-- 参数1模版 id=（table+参数id）-->
    <form id="table1">
        <table cellpadding="0" cellspacing="0" class="hide">
            <tr>
                <td>参数1数据1</td>
                <td><input type="text" name="cs1sj1"></td>
                <td>参数1数据2</td>
                <td><input type="text" name="cs1sj2"></td>
                <td>参数1数据3</td>
                <td><input type="text" name="cs1sj3"></td>
            </tr>
        </table>
    </form>
```
### 7）其他数据采集区域
``` html
    <!-- 其他参数 -->
    <form class="other">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>其他数据1</td>
                <!-- 按要求输出要求 -->
                <td><input type="text" name="qtsj1"></td>
                <td>其他数据2</td>
                <td><input type="text" name="qtsj2"></td>
                <td>其他数据3</td>
                <td><input type="text" name="qtsj3"></td>
            </tr>
        </table>
    </form>
```

#### 8）页面增加初始化脚本 正常情况下只需修改如下JSON即可满足参数增减
``` js
   //id为参数编号或顺序号 name为参数名 ischeck为是否选中
  //初始化参数及编辑操作赋值
    $(document).ready(function () {
        //注意表格的id使用table+每个参数id 例如：id="table1"
        var parload = [
            { "id": "1", "name": "参数1", "ischeck": false },
            { "id": "2", "name": "参数2", "ischeck": false },
            { "id": "3", "name": "参数3", "ischeck": false }
        ]
        //获取父窗体中已采集的数据
        var val = $(window.parent.document).find("input[name='prolist']").val();
        if (val != null) {
            //编辑操作
            var json = JSON.parse(val);
            //项目基础信息部分
            var a1 = json.attch1;
            /*
            逻辑处理
            ...
            */
            $("input[name='jl']").val(a1);
            //其他信息通用部分
            $.each(json.value, function (i, v) {
                inputset(v.name, v.value);
            });

            //处理参数部分
            $.each(json.list, function (index, value) {
                //参数基础信息部分使用
                var name = value.name;
                var id = value.sort;
                var attch1 = value.attch1;
                console.log(name);
                /*
                逻辑处理
                ...
                */
                //处理参数选中
                $.each(parload, function (i, v) {
                    if (id == v.id) {
                        parload[i].ischeck = true;
                    }
                })

                //遍历内容为参数对应的输入框
                $.each(value.value, function (i, v) {
                    inputset(v.name, v.value);
                });
            })
        }

        var htmlstr = "";
        $.each(parload, function (i, v) {
            if (v.ischeck) {
                htmlstr += "<input type=\"checkbox\" type=\"button\" value=\"" + v.id + "\" data-name=\"" + v.name + "\" class=\"checkpar\" onclick=\"SelectPar(this)\" checked>" + v.name
                $("#table" + v.id).find("table").attr("class", "open");
            } else {
                htmlstr += "<input type=\"checkbox\" type=\"button\" value=\"" + v.id + "\" data-name=\"" + v.name + "\" class=\"checkpar\" onclick=\"SelectPar(this)\">" + v.name
            }
        })
        $("#showpar").html(htmlstr);

    });

```

#### 9）保存数据成json格式
**注意:以下脚本请根据实际情况参考或使用，不能满足时请在页面中重写方法进行操作，不能删除main.js中任何脚本**
```js
//参考的保存数据方法 
function TestSub() {
    //固定格式
    var json = {
        "type": 1, //json样式 无特殊情况使用1即可
        "isqualified": true, //是否合格
        "attch1": "", //自定义属性1-【现使用为检测结论,作为案例】
        "attch2": "", //自定义属性2
        "attch3": "", //自定义属性3
        "attch4": "", //自定义属性4
        "attch5": "", //自定义属性5
        "attch6": "", //自定义属性6
        "attch7": "", //自定义属性7
        "attch8": "", //自定义属性8
        "attch9": "", //自定义属性9
        "attch10": "", //自定义属性10
        "list": [
            //选中的参数列表信息
        ],
        "value": [
            //其他信息部分 <form class="other"></form>标记
        ]
    }

    //检测结论
    json.isqualified = $("input[name='ischeck']").val()
    json.attch1 = $("input[name='jl']").val()

    //选中的参数列表信息
    $(".checkpar").each(function () {
        if ($(this).is(':checked')) {
            var id = $(this).val();
            var name = $(this).attr("data-name");
            //参数采集样式
            var parjson = {
                "name": name,//固定名称
                "sort": id,//固定编号
                "attch1": "", //自定义属性1
                "attch2": "", //自定义属性2
                "attch3": "", //自定义属性3
                "attch4": "", //自定义属性4
                "attch5": "", //自定义属性5
                "attch6": "", //自定义属性6
                "attch7": "", //自定义属性7
                "attch8": "", //自定义属性8
                "attch9": "", //自定义属性9
                "attch10": "", //自定义属性10
                "attch11": "", //自定义属性11
                "attch12": "", //自定义属性12
                "attch13": "", //自定义属性13
                "attch14": "", //自定义属性14
                "attch15": "", //自定义属性15
                "attch16": "", //自定义属性16
                "attch17": "", //自定义属性17
                "attch18": "", //自定义属性18
                "attch19": "", //自定义属性19
                "attch20": "", //自定义属性20
                "value": []//输入框对应
            }

            //参数对应数据输入框采集
            var params = $("#table" + id).serializeArray();
            for (x in params) {
                var values = {
                    name: "",
                    value: ""
                };
                values.name = params[x].name;
                values.value = params[x].value;
                parjson.value.push(values);
            }
            json.list.push(parjson);

        }
    });


    //获取项目其他信息
    var params = $(".other").serializeArray();
    for (x in params) {
        var values = {
            name: "",
            value: ""
        };
        values.name = params[x].name;
        values.value = params[x].value;
        json.value.push(values);
    }

    //调试脚本
    console.log(json);
    console.log(JSON.stringify(json));
    //执行父级脚本
    parent.addjson(json);
}
```
### 10）完整项目下载
https://gitee.com/songjingli/datareport
## 五、进行测试
http://192.168.1.171:8088/list
###### step-1）新增模版
###### step-2）选择新增模版上传原始记录
###### step-3）点击去测试
###### step-4）点击保存是否成功
###### step-5）刷新页面查看编辑是否数据匹配