LayUI发送Ajax请求

页面初始化操作

js 复制代码
var processData = null
$(function () {
    initView();
    initTable();
    // test();
})

function initView() {
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#applyDateTimeRange',
            type: 'datetime',
            range: true
        });
    });
}

初始化表格操作

js 复制代码
function initTable() {
    //初始化table
    var headerObj = [[
        {
            title: '序号', width: 60, templet: function (d) {
                return d.LAY_TABLE_INDEX + 1;
            }
        },
        {field: "systemType", title: "平台", width: 100, sort: false,},
        {field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},
        {field: "createTime", title: "申请时间", minWidth: 60, sort: false},

        {field: "applyUserName", title: "申请人", width: 100, sort: false},
        {
            field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {
                if (d.dealState == 0) {
                    return "未开启";
                } else if (d.dealState == 1) {
                    return "流程中";
                } else if (d.dealState == 2) {
                    return "已完成";
                } else{
                    return "未知(" + d.applyStatus + ")";
                }
            }
        },
        {field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}
    ]];
    layui.use(['table', 'form'], function (exports) {
        var table = layui.table;
        table.render({
            elem: '#searchTable',
            url: 'http://localhost:8080/getStartList',
            page: true,     //显示分页默认不显示
            cols: headerObj,
            // request: {
            //     pageName: 'page',
            //     limitName: 'limit'
            // },
            // where: {
            //     applyStatus: $("#applyStatus").val()
            // },
            response: {
                statusName: 'status',
                statusCode: 'normal',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function (res) {
                console.log("+++",res)
                return {
                    "count": res.data.total,
                    "data": res.data.list,
                    "status": "normal"
                };
            }
        });

        //table操作事件
        table.on('tool(searchTable)', function (row) {
            var data = row.data;
            var layEvent = row.event;
            var tr = row.tr;

            if (layEvent == 'level2Check') {
                initStartFlowView(data);
            } else if (layEvent == 'showDetailEvent') {
                // showDetailView(data)
                ajax_load_detail(data)
            }else if (layEvent == 'showFlowEvent'){
                ajax_load_flow(data)
            }

        });

        //搜索按钮
        $('#searchBtn').on('click', function () {
            var moduleType = $("#moduleType").val();
            var applyStatus = $("#applyStatus").val();
            var applyDateTimeRange = $("#applyDateTimeRange").val();

            table.reload('searchTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    moduleType: moduleType,
                    applyStatus: applyStatus,
                    applyDateTimeRange: applyDateTimeRange
                }
            });
        });
    });
}
js 复制代码
function showDetailView(data) {
    console.log("data",data)
    var resApplyId = data.resApplyId;
    var moduleType = data.moduleType;
    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = insertFormTpl.innerHTML;
        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '展示详情',
                area: ['600px', '310px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });
        form.on('submit(insertFormBtn)', function (data) {
            console.log("获取到监听事件")
            $.ajax({
                url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
                type: "POST",
                dataType: "json",
                data: {
                    moduleType: moduleType,
                    checkResult: data.field.checkResult,
                    description: data.field.description
                },
                success: function (data) {
                    if (data.status == 'normal') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg(data.exception.error_msg || '审批失败!');
                    }

                }
            });
            return false;
        });
    });
}
js 复制代码
function ajax_load_detail(data) {
    var resApplyId = data.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data_r) {
            console.log("+++++++" + data_r)
            console.log("====" + JSON.stringify(data_r))
            if (data_r.msg == 'NORMAL') {
                layui.use(['layer', 'laytpl', 'form', 'table'], function () {
                    var layer = layui.layer;
                    var form = layui.form;

                    var laytpl = layui.laytpl;
                    var table = layui.table;
                    var tplHtml = detailHtml.innerHTML;

                    laytpl(tplHtml).render({}, function (html) {
                        index = layer.open({
                            type: 1,
                            title: '展示详情',
                            area: ['600px', '310px'],
                            offset: 'auto',
                            maxmin: true,
                            content: html
                        });
                        form.render();
                    });

                    //TODO 设置每个字段对应的值
                    form.val("showApplyDetail", {
                        "applyOrderDetailId": data_r.data.applyOrderDetailId,
                        "applyOrderDetail": data_r.data.applyOrderDetail
                    })
                })
            } else {
                layer.msg();
            }
        }
    });
}

整个页面的HTML

html 复制代码
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>海燕-国美统一开发者平台 - 我的申请</title>
  <meta content="text/html;charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE-edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <link rel="stylesheet" th:href="@{/css/cat-common.css}" />
  <link rel="stylesheet" th:href="@{/css/font.css}">
  <link rel="stylesheet" th:href="@{/css/xadmin.css}">

  <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" />
  <link rel="stylesheet" th:href="@{/css/common.css}">

    <style>
        .user_left{
            width: 45%;
            float: left;
            margin: 20px 0 0 5%;
        }
    </style>

</head>

<body>
  <div class="cat-body">

      <h1 style="color: red">开启流程相关操作(开发中。。。。)</h1>
    <!--<div class="layui-row">-->

      <!--<form class="layui-form layui-col-md12 x-so" style="text-align: justify">-->
         <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">申请类型:</label>-->
             <!--<div class="layui-input-inline">-->
               <!--<select name="moduleType" id="moduleType">-->
                    <!--<option value="">全部</option>-->
                  <!--<option value="domain_scan_new">域名扫描</option>-->
                  <!--<option value="kvm_new">虚拟机</option>-->
                  <!--<option value="db_new">数据库</option>-->
                  <!--<option value="appDeploy_new">应用服务部署</option>-->
                       <!--<option value="net-acl">网络权限</option>-->
                  <!--<option value="net-lvs">负载均衡</option>-->
                  <!--<option value="nginx_conf_update_new">Nginx配置变更</option>-->
                  <!--<option value="cdn_link_up_new">CDN接入</option>-->
                  <!--<option value="cdn_cache_clean_new">CDN缓存清理</option>-->
                  <!--<option value="code_auth_new">代码权限申请</option>-->
                  <!--<option value="jms">堡垒机申请</option>-->
                  <!--<option value="domainHighDefense_new">域名高防</option>-->
                  <!--<option value="net-dns">域名解析</option>-->
               <!--</select>-->
             <!--</div>-->
           <!--</div>-->
           <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">申请时间:</label>-->
             <!--<input type="text" class="layui-input" id="applyDateTimeRange" placeholder="开始日期 - 结束日期" readonly style="width:300px">-->
           <!--</div>-->
           <!--<div class="layui-inline">-->
             <!--<label class="layui-form-label">受理部门:</label>-->
             <!--<div class="layui-input-inline">-->
               <!--<select name="applyDept" id="applyDept">-->
                 <!--<option value="0">全部</option>-->
                 <!--<option value="1">DBA-数据库运维</option>-->
                <!--<option value="2">SRE-应用运维</option>-->
                <!--<option value="3">SA-云科</option>-->
                <!--<option value="4">DTM-桌面运维</option>-->
                <!--<option value="5">NS-网安</option>-->
                <!--<option value="6">CR-代码</option>-->
               <!--</select>-->
             <!--</div>-->
           <!--</div>-->
           <!--<div class="layui-btn" title="查询" id="searchBtn">-->
             <!--<i class="layui-icon">&#xe615;</i>查询-->
           <!--</div>-->
      <!--</form>-->
    <!--</div>-->
    <div class="layui-row">
      <div class="cat-block">
        <!-- TODO 1.修改button名称; -->
        <!--<button class="layui-btn _add_apply" οnclick="applyNew();">-->
          <!--<i class="layui-icon">&#xe608;</i>新建自定义工单</button>-->

        <button class="layui-btn" onclick="reload_data();">
          <i class="layui-icon">&#xe669;</i>刷新数据</button>
      </div>
    </div>
    <!--结果  -->
    <table id="searchTable" lay-filter="searchTable" lay-size="sm"></table>
  </div>

<script type="text/html" id="startFlowTableBar">
{{# if(d.dealState==0){ }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: #0f3788;" lay-event="level2Check">开启流程</a>
{{# } }}
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: blue" lay-event="showFlowEvent">查看进度</a>
<a class="layui-btn layui-btn-normal layui-btn-xs" style="color: green" lay-event="showDetailEvent">工单详情</a>




<!--{{# if(d.applyStatus==1 || d.applyStatus==6){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar==null || d.applyStar==0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="comment">评论</a>-->
<!--{{# }else if((d.applyStatus==2 || d.applyStatus==5) && (d.applyStar!=null && d.applyStar!=0)){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="lookComment">查看评论</a>-->
<!--{{# }else if(d.applyStatus==4 || d.applyStatus==7){ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="applyFlow">进度</a>-->
<!--<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reApply">重新提交</a>-->
<!--{{# }else{ }}-->
<!--<a class="layui-btn layui-btn-lg layui-btn-xs" lay-event="detail">详情</a>-->
<!--{{# } }}-->
</script>

<script type="text/html" id="insertFormTpl">
<div class="x-body">
   <form class="layui-form" action="" lay-filter="insertForm">
      <div class="layui-form-item">
         <label class="layui-form-label">审批结果</label>
         <div class="layui-input-block">
            <input type="radio" name="checkResult" value="2" title="通过" checked>
            <input type="radio" name="checkResult" value="3" title="拒绝">
         </div>
      </div>
      <div class="layui-form-item">
         <label class="layui-form-label">审批意见</label>
         <div class="layui-input-block">
            <textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
         </div>
      </div>
      <div class="layui-form-item">
          <div class="layui-input-block">
             <button class='layui-btn' lay-submit lay-filter='insertFormBtn'>提交</button>
          </div>
      </div>
   </form>
</div>
</script>

  <script type="text/html" id="detailHtml">
      <div class="x-body">
         <h1 lay-filter="detailString">展示详情</h1>
          <form class="layui-form" action="" lay-filter="showApplyDetail">

              <!-- 表单类型 -->
              <div class="layui-form-item">
                  <label class="layui-form-label">工单号</label>
                  <div class="layui-input-block">
                      <input type="text" name="applyOrderDetailId" class="layui-input" disabled>
                  </div>
              </div>

              <!-- 申请原因 -->
              <div class="layui-form-item">
                  <label class="layui-form-label">工单详情</label>
                  <div class="layui-input-block">
                      <textarea name="applyOrderDetail" class="layui-textarea" disabled></textarea>
                  </div>
              </div>

          </form>
      </div>
  </script>


  <script type="text/html" id="startFlow">

      <div class="x-body">

          <h1>开启流程操作待开发</h1>

          <form class="layui-form" name="addForm" id="addForm">

              <div class="user_left" id="selectPerson">
                  <!-- 一个标准的input组合,这个是固定项 -->
                  <div class="layui-form-item">
                      <label class="layui-form-label">申请人</label>
                      <div class="layui-input-block">
                          <input type="text" id="title" name="title" lay-verify="required" class="layui-input">
                      </div>
                  </div>

                  <!-- 根据属性List生成的input追加在这里-->
              </div>

              <div class="layui-form-item">
                  <label class="layui-form-label">开启备注信息</label>
                  <div class="layui-input-block">
                      <textarea name="description" lay-verify="required" placeholder="请输入内容" class="layui-textarea"></textarea>
                  </div>
              </div>

              <!-- buttons -->
              <div class="layui-form-item" style="margin-left: 5%;">
                  <div class="layui-input-block">
                      <!-- 这里的提交按钮是button形式,不是submit -->
                      <!--<input type="button" id="insert" onclick="return check()" class="layui-btn" value="开启流程" />-->
                      <input type="button" id="insert" lay-submit lay-filter='startFormBtn' class="layui-btn" value="开启流程" />
                      <!-- 清空表单,这个按钮隐藏了 -->
                      <input type="button" name="reset" class="layui-btn" value="重置" />
                  </div>
              </div>
          </form>
      </div>
  </script>


  <script type="text/html" id="showFlow">

      <div class="x-body">

          <h1>开启流程操作待开发</h1>

          <form class="layui-form" name="addForm" >

              <div class="user_left" id="showPerson">
                  <!-- 一个标准的input组合,这个是固定项 -->
                  <div class="layui-form-item">
                      <label class="layui-form-label">申请人</label>
                      <div class="layui-input-block">
                          <input type="text" id="person" name="title" lay-verify="required" class="layui-input">
                      </div>
                  </div>

                  <!-- 根据属性List生成的input追加在这里-->
              </div>
          </form>
      </div>
  </script>

  <script type="text/html" id="insertTpl">
  <div class="x-body">
  <form class="layui-form" action="">

    <!-- 域账号 -->
    <div class="layui-form-item  layui-form-text">
      <label class="layui-form-label">主题</label>
      <div class="layui-input-block">
        <input type="text" name="topic" autocomplete="off" class="layui-input">
      </div>
    </div>

    <!-- 权限 -->
    <div class="layui-form-item">
      <label class="layui-form-label">受理部门</label>
      <div class="layui-input-block">
        <select name="dept" lay-verify="dept" lay-filter="dept">
          <option value="-1">请选择一个受理部门</option>
          <option value="1">DBA-数据库运维</option>
          <option value="2">SRE-应用运维</option>
          <option value="3">SA-云科</option>
          <option value="4">DTM-桌面运维</option>
          <option value="5">NS-网安</option>
          <option value="6">CR-代码</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">具体描述</label>
      <div class="layui-input-block">
        <textarea name="applyDesc" lay-filter="required" class="layui-textarea"></textarea>
      </div>
    </div>

    <!-- <div class="layui-form-item"></div> -->

    <div class="layui-form-item">
      <div class="layui-input-block">
          <button class='layui-btn' lay-submit lay-filter="insertApply">提交</button>
      </div>
    </div>

  </form>
  </div>
  </script>

   <script type="text/javascript" th:src="@{/lib/jquery/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" th:src="@{/js/approval/startApproval.js}"></script>

</body>

整个页面的JS代码

js 复制代码
var processData = null
$(function () {
    initView();
    initTable();
    // test();
})

function initView() {
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#applyDateTimeRange',
            type: 'datetime',
            range: true
        });
    });
}


function initTable() {
    //初始化table
    var headerObj = [[
        {
            title: '序号', width: 60, templet: function (d) {
                return d.LAY_TABLE_INDEX + 1;
            }
        },
        {field: "systemType", title: "平台", width: 100, sort: false,},
        {field: "applyOrderDetailId", title: "工单号", minWidth: 70, sort: false},
        {field: "createTime", title: "申请时间", minWidth: 60, sort: false},

        {field: "applyUserName", title: "申请人", width: 100, sort: false},
        {
            field: "dealState", title: "状态", width: 100, sort: false, templet: function (d) {
                if (d.dealState == 0) {
                    return "未开启";
                } else if (d.dealState == 1) {
                    return "流程中";
                } else if (d.dealState == 2) {
                    return "已完成";
                } else{
                    return "未知(" + d.applyStatus + ")";
                }
            }
        },
        {field: "", title: "操作", minWidth: 200, toolbar: '#startFlowTableBar',}
    ]];
    layui.use(['table', 'form'], function (exports) {
        var table = layui.table;
        table.render({
            elem: '#searchTable',
            url: 'http://localhost:8080/getStartList',
            page: true,     //显示分页默认不显示
            cols: headerObj,
            // request: {
            //     pageName: 'page',
            //     limitName: 'limit'
            // },
            // where: {
            //     applyStatus: $("#applyStatus").val()
            // },
            response: {
                statusName: 'status',
                statusCode: 'normal',
                countName: 'count',
                dataName: 'data'
            },
            parseData: function (res) {
                console.log("+++",res)
                return {
                    "count": res.data.total,
                    "data": res.data.list,
                    "status": "normal"
                };
            }
        });

        //table操作事件
        table.on('tool(searchTable)', function (row) {
            var data = row.data;
            var layEvent = row.event;
            var tr = row.tr;

            if (layEvent == 'level2Check') {
                initStartFlowView(data);
            } else if (layEvent == 'showDetailEvent') {
                // showDetailView(data)
                ajax_load_detail(data)
            }else if (layEvent == 'showFlowEvent'){
                ajax_load_flow(data)
            }

        });

        //搜索按钮
        $('#searchBtn').on('click', function () {
            var moduleType = $("#moduleType").val();
            var applyStatus = $("#applyStatus").val();
            var applyDateTimeRange = $("#applyDateTimeRange").val();

            table.reload('searchTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    moduleType: moduleType,
                    applyStatus: applyStatus,
                    applyDateTimeRange: applyDateTimeRange
                }
            });
        });
    });
}

//开启流程
function initStartFlowView(data) {
    console.log("开启流程操作",data)
    var resApplyId = data.applyOrderDetailId;


    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = startFlow.innerHTML;
        // console.log("---------",tplHtml)

        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '开启流程',
                area: ['800px', '700px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });

        // test();
        initInputView()


        form.on('submit(startFormBtn)', function (data) {
            console.log("获取到监听事件")
            // jsonToObject(data,processData.data.length)

            var jsonStr = initFlowData(data,resApplyId,processData)
            console.log("获取全局数据",processData)

            console.log(jsonStr)
            $.ajax({
                url: "http://localhost:8080/startTask",
                type: "POST",
                dataType: "json",
                contentType:"application/json",
                data:jsonStr,
                success: function (data) {
                    console.log(data)
                    if (data.msg == 'NORMAL') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg();
                    }

                }
            });
            return false;
        });
    });
}

// 展示详情
function showDetailView(data) {
    console.log("data",data)
    var resApplyId = data.resApplyId;
    var moduleType = data.moduleType;
    layui.use(['layer', 'laytpl', 'form', 'table'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var tplHtml = insertFormTpl.innerHTML;
        var index;
        laytpl(tplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '展示详情',
                area: ['600px', '310px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
            form.render();
        });
        form.on('submit(insertFormBtn)', function (data) {
            console.log("获取到监听事件")
            $.ajax({
                url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
                type: "POST",
                dataType: "json",
                data: {
                    moduleType: moduleType,
                    checkResult: data.field.checkResult,
                    description: data.field.description
                },
                success: function (data) {
                    if (data.status == 'normal') {
                        layer.msg("审批成功");
                        table.reload("searchTable", {});
                        layer.close(index);
                    } else {
                        layer.msg(data.exception.error_msg || '审批失败!');
                    }

                }
            });
            return false;
        });
    });
}


function ajax_load_detail(data) {
    var resApplyId = data.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApplyOrderDetail?orderId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data_r) {
            console.log("+++++++" + data_r)
            console.log("====" + JSON.stringify(data_r))
            if (data_r.msg == 'NORMAL') {
                layui.use(['layer', 'laytpl', 'form', 'table'], function () {
                    var layer = layui.layer;
                    var form = layui.form;

                    var laytpl = layui.laytpl;
                    var table = layui.table;
                    var tplHtml = detailHtml.innerHTML;

                    laytpl(tplHtml).render({}, function (html) {
                        index = layer.open({
                            type: 1,
                            title: '展示详情',
                            area: ['600px', '310px'],
                            offset: 'auto',
                            maxmin: true,
                            content: html
                        });
                        form.render();
                    });

                    //TODO 设置每个字段对应的值
                    form.val("showApplyDetail", {
                        "applyOrderDetailId": data_r.data.applyOrderDetailId,
                        "applyOrderDetail": data_r.data.applyOrderDetail
                    })
                })
            } else {
                layer.msg();
            }
        }
    });
}


function ajax_load_flow(data) {

    initFlow(data)

    // layui.use(['layer', 'laytpl', 'form', 'table'], function () {
    //     var layer = layui.layer;
    //     var form = layui.form;
    //     var laytpl = layui.laytpl;
    //     var table = layui.table;
    //
    //     var tplHtml = showFlow.innerHTML;
    //     // console.log("---------",tplHtml)
    //
    //     var index;
    //     laytpl(tplHtml).render({}, function (html) {
    //         index = layer.open({
    //             type: 1,
    //             title: '开启流程',
    //             area: ['800px', '700px'],
    //             offset: 'auto',
    //             maxmin: true,
    //             content: html
    //         });
    //         form.render();
    //     });
    //     initFlow(data)
    // });


}




function initFlow(data_p) {
    var resApplyId = data_p.applyOrderDetailId;
    $.ajax({
        url: "http://localhost:8080/getApprovalFlowDetail?applyId=" + resApplyId,
        type: "GET",
        dataType: "json",
        success: function (data) {
            console.log("+++++++" + data)
            console.log("====" + JSON.stringify(data))
            initApplyFlowView(data.data)
            //
            // //遍历List
            // for (var i = 0; i < data.data.length; i++) {
            //     //根据属性List拼接LayUI风格的input代码
            //     str = "<div class='layui-form-item'><label class='layui-form-label'>"
            //         + data.data[i].currentNodeDealId
            //         + "</label><div class='layui-input-block'><input type='text' id='"
            //         + data.data[i].approvalPersonName
            //         + "' name='"
            //         + data.data[i].approvalPersonName
            //         + "' placeholder='"
            //         + data.data[i].approvalPersonNote
            //         + "' class='layui-input'></div></div>"
            //
            //     //追加到界面,property是后面div的id<div class="user_left" id="property">
            //     var html = document.getElementById("showPerson").innerHTML;
            //     document.getElementById("showPerson").innerHTML = html + str;
            // }
        }
    });

}


function test() {
    var jsonData ="[{\"propertyShow\":\"一级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\"propertyShow\":\"二级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"},{\n" +
        "\"propertyShow\":\"三级审批\",\"propertyName\":\"test\",\"propertyTips\":\"test\"}]"
    var data = JSON.parse(jsonData)
    //遍历List
    for (var i = 0; i < data.length; i++) {
        //根据属性List拼接LayUI风格的input代码
        str = "<div class='layui-form-item'><label class='layui-form-label'>"
            + data[i].propertyShow
            + "</label><div class='layui-input-block'><input type='text' id='"
            + data[i].propertyName
            + "' name='"
            + data[i].propertyName
            + "' placeholder='"
            + data[i].propertyTips
            + "' class='layui-input'></div></div>"

        //追加到界面,property是后面div的id<div class="user_left" id="property">
        // var html = document.getElementById("property").innerHTML;
        // document.getElementById("property").innerHTML = html + str;
        // var html = property.innerHTML;
        // property.innerHTML = html + str;
        var html = document.getElementById("selectPerson").innerHTML;
        document.getElementById("selectPerson").innerHTML=html+str;

    }

}

function initInputView() {
    $.ajax({   //获取属性List<Map>数据return data_r;
        type: "get",
        url: "http://localhost:8080/getProcess",
        dataType: "json",
        success: function (data) {
            //遍历List
            loadData(data)
            for (var i = 0; i < data.data.length; i++) {
                //根据属性List拼接LayUI风格的input代码
                str = "<div class='layui-form-item'>" +
                    "<label class='layui-form-label'>"+ data.data[i].nodeName + "</label>" +
                    "<div class='layui-input-block'>" +
                    "<input type='text' id='"+data.data[i].nodeId +"' name='"+"no"+data.data[i].nodeOrder+ "' placeholder='"+ "审批人域账户" + "' class='layui-input'>" +
                    "</div>" +
                    "</div>"

                //追加到界面,property是后面div的id<div class="user_left" id="property">
                var html = document.getElementById("selectPerson").innerHTML;
                document.getElementById("selectPerson").innerHTML = html + str;
            }
        }
    });

}


function loadData(data) {
    processData = data;
    return data;
}

function jsonToObject(data ,len,applyOrderDetailId,process) {
    var object = {};
    var params = [];
    console.log("开始进入方法")

    for(var i = 0; i < len; i++){
        console.log("组装数据")
        var obj = {};
        console.log(i)
        switch (i) {
            case 0:
                obj["approvalOrder"] = process[0].nodeOrder ;
                obj["approvalUserName"] = data.field.no1;
                obj["nodeId"] = process[0].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 1:
                obj["approvalOrder"] = process[1].nodeOrder;
                obj["approvalUserName"] = data.field.no2;
                obj["nodeId"] = process[1].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 2:
                obj["approvalOrder"] = process[2].nodeOrder;
                obj["approvalUserName"] = data.field.no3;
                obj["nodeId"] = process[2].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 3:
                obj["approvalOrder"] = process[3].nodeOrder;
                obj["approvalUserName"] = data.field.no4;
                obj["nodeId"] = process[3].nodeId;
                params.push(obj);
                console.log(i)
                continue;
            case 4:
                obj["approvalOrder"] = process[4].nodeOrder;
                obj["approvalUserName"] = data.field.no5;
                obj["nodeId"] = process[4].nodeId;
                params.push(obj);
                console.log(i)
                continue;
        }

    }

    object['applyId'] = applyOrderDetailId;
    object['processId'] = process[0].processId;
    object['approvalUserVoList'] = params;

    var json = JSON.stringify(object);
    // console.log(json);
    return json;
}

function initFlowData(data,applyOrderDetailId,process){
    return jsonToObject(data ,process.data.length ,applyOrderDetailId,process.data)
}

//表单提交时调用的验证及提交方法
function check() {
    var data = new FormData($("#addForm")[0]); //获取表单数据,addForm是表单id

    console.log(data)
    // if ($("#title").val() == '') {
    //     alert("请填写完整信息");
    // } else {
    //     $.ajax({
    //         type: "POST",
    //         url: getURL("insert"),
    //         data: new FormData($("#addForm")[0]),   //获取表单数据,addForm是表单id
    //         processData: false,
    //         contentType: false,
    //         success: function (data) {
    //             alert(data)
    //             if (data == 'success') {
    //                 $("input[type=reset]").trigger("click");    //清空表单
    //             }
    //         }
    //     })
    // }
}


function reload_data() {
    layui.use(['table'], function () {
        var table = layui.table;

        table.reload("searchTable", {});
    });
}



function applyFlowView(data) {
    var resApplyId = data.applyId;
    $.ajax({
        //TODO1 填写流程进度请求地址
        url: "/v1/devTool/codeAuth/apply/flow",
        type: "GET",
        dataType: "json",
        data: {
            resApplyId: resApplyId
        },
        success: function (data) {
            if (data.status == 'normal') {
                initApplyFlowView(data.response);
            } else {
                layer.msg(data.exception.error_msg || '获取表结构失败!');
            }

        }
    });
}


function initApplyFlowView(applyFlows) {
    layui.use(['layer', 'laytpl'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var table = layui.table;

        var applyFlowTplHtml = "";
        applyFlowTplHtml += '<div class="x-body">';
        applyFlowTplHtml += '<ul class="layui-timeline">';

        $.each(applyFlows, function (index, step) {
            applyFlowTplHtml += '<li class="layui-timeline-item">';
            applyFlowTplHtml += '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
            applyFlowTplHtml += '<div class="layui-timeline-content layui-text">';

            var title ="处理人: " + step.approvalPersonName+" - "+ "处理时间 "+step.lastUpdateTime

            applyFlowTplHtml += '<h3 class="layui-timeline-title">' + title + '</h3>';
            applyFlowTplHtml += '<p>';
            applyFlowTplHtml += (step.approvalPersonNote);
            applyFlowTplHtml += '</p>';
            applyFlowTplHtml += '</div>';
            applyFlowTplHtml += '</li>';
        });

        applyFlowTplHtml += '</ul>';
        applyFlowTplHtml += '</div>';
        var index;
        laytpl(applyFlowTplHtml).render({}, function (html) {
            index = layer.open({
                type: 1,
                title: '申请进度查询',
                area: ['700px', '510px'],
                offset: 'auto',
                maxmin: true,
                content: html
            });
        });
    });
}
相关推荐
程序员爱技术42 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js