layui 表格加入表单元素,取行数据值传到后台问题

·  阅读 393

最近 django + layui 写网站时候想实现在表格里加入开关和按钮功能,遇到往后台传值问题,参考几个文章都没成功解决,经研究 layui 的功能语法,找到了解决办法。

1. 想实现表格中加入按钮和开关

有一个需求,想在动态数据表格中加入表单元素,如开关和单选按钮 要求:点击按钮,获取前端数据,将结果发送给后台进行值的修改,刷新页面显示修改后的结果:在这里插入图片描述 先说答案,参考这个来写:

在这里插入图片描述

2. 官方示例 代码分析

官方文档中提到 www.layui.com/demo/table/…

//页面代码
<script type="text/html" id="checkboxTpl">
  <!-- 这里的 checked 的状态只是演示 -->
  <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.id == 10006 ? 'checked' : '' }}>
  </script>
复制代码

特别关注:上面的 lay-filter="lockDemo" //{{d.id}} 是为了让表格数据按行显示在页面上(是那个开关的值,true or false) //{{d.id}},d是一行数据,id是表格列名,在 table.render定义, ,{field:'id', title:'ID', width:100, unresize: true, sort: true} //django 中 的{{ }}符合有特殊含义,需要特殊代码屏蔽,否则页面不识别行数据

//表格
	  table.render({
	    elem: '#test'
	    ,url:'/demo/table/user/'
	    ,cellMinWidth: 80
	    ,cols: [[
	      {type:'numbers'}
	      ,{type: 'checkbox'}
	      ,{field:'id', title:'ID', width:100, unresize: true, sort: true}
	      ,{field:'username', title:'用户名', templet: '#usernameTpl'}
	      ,{field:'city', title:'城市'}
	      ,{field:'wealth', title: '财富', minWidth:120, sort: true}
	      ,{field:'sex', title:'性别', width:85, templet: '#switchTpl', unresize: true}
	      ,{field:'lock', title:'是否锁定', width:110, templet: '#checkboxTpl', unresize: true}
	    ]]
	    ,page: true
	  });
 //监听锁定操作
	  form.on('checkbox(lockDemo)', function(obj){
	    layer.tips(this.value + ' ' + this.name + ':'+ obj.elem.checked, obj.othis);
	  });

复制代码

特别关注:上面的 lockDemo , 这个蚕参数是 lay-filter的值,在layui 中想调用 lay-filter的值,写法为

 form.on('checkbox(lockDemo)'{
	//do somesthing
	}
复制代码

3. 效果分析

以上特别关注提到的 代码

 form.on('checkbox(lockDemo)'{
	//do somesthing
	}
复制代码

可以有效在表格中显示开关效果,形如: 在这里插入图片描述 但是这种是无法将开关修改之后的结果发送回服务器的,因为很难用 layui 本身的功能来取值整行数据。

如果想修改这个开关的值,必定要获取 ID 值和这个开关的值,并将 ID 值和这个开关的值发送给后台,才能实现修改。

4. 解决方案

为了实现获取 ID 值和这个开关的值,并将 ID 值和这个开关的值发送给后台,计划采用 监听工具条 (行编辑和删除按钮)的写法: 在这里插入图片描述

(1)分析该代码如何实现

如果想获取行数据,只能通过 table.on 来获取,二通过form.on 是无法获取行数据的!

www.layui.com/doc/modules… 提到:

toolbar - 绑定工具条模板:

通常你需要在表格的每一行加上 查看、编辑、删除 这样类似的操作按钮,而 tool 参数就是为此而生,你因此可以非常便捷地实现各种操作功能。

table.render({
  cols: [[
    {field:'id', title:'ID', width:100}
    ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
  ]]
});
复制代码

以上的toolbar: '#barDemo'选项是实现的关键,值#barDemo 为下面的 id="barDemo"

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
复制代码

以上的 lay-event="detail" 是下面 table.on 判断的关键,值detail 用于判断点击按钮的事件类型,如下面的 if(layEvent=== 'detail'){ //查看

	//监听工具条 
	table.on('tool(table-layer-Filter)', function(obj){ //注:tool 是工具条事件名,table-layer-Filter是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)

	  if(layEvent=== 'detail'){ //查看 } 
	  else if(layEvent === 'del'){ //删除 }
	  else if(layEvent === 'edit'){ //编辑 }

# 想获取行数据,只能通过 table.on 下的 obj.data
# 注意这句话:  var layEvent = obj.event //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
	 
复制代码

在这里插入图片描述总结一下的流程:

点击查看按钮时:

  1. 定位是在表格里,定位table.rander ;
  2. 定位 table.rander 工具条模板ID: toolbar: '#barDemo'
  3. <script>中定位到了 查看按钮对应的事件ID: lay-event="detail"
  4. 在 table.on 中 判断事件ID 即可。

特别注意:form.on 识别 表单(按钮)的 lay-filter table.on 识别 表格 的 lay-filter obj.event 识别 lay-event

(2)参考以上流程实现自己的代码

我创建的代码中 特别注意 要使用{% verbatim %}{% endverbatim %}将按钮包含,否则将不解析{{ }}

前端 html 写三目运算符,必须使用{{ }}进行包含,问号前面的是判断真假( true 或者 false),后端的返回值如果是布尔值就可以直接写,不是布尔值,可以用if 判断。 后端返回的是 on 或者 off,所以 AAAA 的 值是 on 或者 off。三目运算符可以用 if d.AAAA ==="on" 来生成 true 或者 false。

{% verbatim %}
<script type="text/html" id="switchCCCC">
    <input type="checkbox" name="switchAAAA" id="switchAAAAId" value="{{d.AAAA}}" title="打开" lay-event="switchAAAAEvent" lay-filter="switchAAAAFilter" {{ d.AAAA== "on" ? 'checked' : '' }}>
</script>

<script type="text/html" id="switchDDDD">
    <input type="checkbox" name="switchBBBB" id="switchBBId" value="{{d.BBBB}}" lay-skin="switch"  lay-text="开启|锁定过" lay-event="switchBBBBEvent"  lay-filter="switchBBBBFilter" {{ d.BBBB== "on" ? 'checked' : '' }}>
</script>
{% endverbatim %}
复制代码
table.render({
  cols: [[
    {field:'AAAA', title:'AAAA', width:120, templet: '#switchCCCC', event:'switchAAAAEvent'}               
   ,{field:'BBBB', title:'BBBB', width:120, templet: '#switchDDDD', event:'switchBBBBEvent'}
  ]]
});
复制代码

注意我上面写了templet: '#switchDDDD' event:'switchBBBBEvent'两个选项,理论上在上面的代码中设置 lay-event="switchBBBBEvent"就可以实现,但是我这没实现成功,事件关系也么仔细研究,遂参考官方文档写了这个参数,确定可用。文档如下:

www.layui.com/doc/modules…

在这里插入图片描述 定义了 event 之后,下面就开始取值和传参了:


if(obj.event === "switchAAAAEvent" ){
    $.post('/url/path/',{
        ID: obj.data.ID
        ,AAAA: obj.data.AAAA
    },function(data){
        //根据后台返回的参数,来进行判断
        if(data == "success"){
           layer.closeAll()		 //关闭所有弹出层
	       window.parent.location.reload(); //刷新父页面
        }
});

if(obj.event === "switchBBBBEvent" ){
    $.post('/url/path/',{
        ID: obj.data.ID
        ,BBBB: obj.data.BBBB
    },function(data){
      //根据后台返回的参数,来进行判断
      if(data == "success"){
           layer.closeAll()		 //关闭所有弹出层
	       window.parent.location.reload(); //刷新父页面
        }
});

复制代码

另外,如果此时同时定义了 form.on:

特别注意:form.on 识别 按钮的 lay-filter,table.on 识别 表格 的 lay-filter,obj.event 识别 lay-event

form.on('checkbox(switchAAAAFilter)', function (data) {
    console.log("form.on")
    if (data.elem.checked) {
        layer.tips('测试按钮开关-开', data.othis, {
            tips: 2
        }
    } else {
        layer.tips('测试按钮开关-关', data.othis, {
            tips: 2
        }
    }
});
复制代码

如果table.on 的 obj.event 定义了取值和 ajax 传值,同时 form.on 也定义了按钮开关自身的提醒,则会有个先后顺序: 系统默认先运行 table.on 的 obj.event ,再运行 form.on。 我在测试是尝试使用 form.on 创建了一个临时变量,想取值之后再将结果传给 table.on 进行ajax数据发送,结果 table.on 先运行,发送结果为空,遂放弃。

(3)不可以出现两个自定义工具模板

如果系统内存在 查看删除行工具栏,现在又加上 开关工具栏,需要将判断结果写在一起 不可以分开为两个table.on('tool(table-layer-Filter)'监听事件。

# 以下都为自定义,不可并存

table.on('tool(table-layer-Filter)', function(obj){
	  if(layEvent=== 'detail'){ //查看 } 
	  else if(layEvent === 'del'){ //删除 }
	  else if(layEvent === 'edit'){ //编辑 }
}


table.on('tool(table-layer-Filter)', function(obj){
	  if(layEvent=== 'switchAAAAEvent'){ //锁定} 
	  else if(layEvent === 'switchBBBBEvent'){ //男女}
	  else if(layEvent === 'switchCCCCEvent'){ //是否}

}

复制代码

系统默认会使用最后一个同名的将上面的覆盖,但这仅限自定义的模板行攻击栏, 系统中的头工具栏有自己单独的模板,不受影响,可并列存在,如:

# 以下可并存

//头工具栏事件
table.on('toolbar(table-layer-Filter)', function(obj){
    switch(obj.event){
       case 'getCheckData':
          layer.msg('输出一行);
          break;
       case 'getCheckLength':
          layer.msg('选中数量为:2行);
           break;
        case 'isAll':
           layer.msg(checkStatus.isAll ? '全选': '未全选');
     }
     
//监听行工具事件
 table.on('tool(table-layer-Filter)', function(obj){
	 if(layEvent=== 'detail'){ //查看 } 
	 else if(layEvent === 'del'){ //删除 }
	 else if(layEvent === 'edit'){ //编辑 }
    }
        
复制代码

4. 预览结果

在这里插入图片描述在这里插入图片描述 在这里插入图片描述

5. 又发现一种写法,仅供参考,这部分单独存在。

特别注意 要使用{% verbatim %}{% endverbatim %}将按钮包含,否则将不解析{{ }}

前端 html 写三目运算符,必须使用{{ }}进行包含,问号前面的是判断真假,后端的返回值如果是布尔值就可以直接写,不是布尔值,可以用if 判断。 后端返回的是 true 或者 false,所以 asset_isInQingteng 的 值是 true 或者 false。三目运算符可以直接写。

{% verbatim %}
<script type="text/html" id="optionToolbar">
    <i class="layui-icon layui-icon-circle-dot" {{ d.asset_isInQingteng ? 'style="font-size: 5px; color: green;"' : 'style="font-size: 5px; color: green; display: none"' }}></i>
    <i class="layui-icon layui-icon-circle-dot" {{ d.asset_isInQingteng ? 'style="font-size: 5px; color: red; display: none"' : 'style="font-size: 5px; color: red"' }}></i>
    
    <a class="layui-btn layui-btn-xs" lay-event="detailEvent">查看</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editEvent">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delEvent">删除</a>
</script>
{% endverbatim %}
复制代码

表格里的写这个 {fixed:'right', field: 'asset_isInQingteng', title:'操作', width:180, align:'center', toolbar: '#optionToolbar',totalRow: true}


        table.render({
            elem: '#currentTableId',
            url: '/ctyun/ctyunassetlist/',
            toolbar: '#hostlistTableToolbarId',
            cols: [[
                {type: "checkbox", width: 50},
                {type: 'numbers', title: '序号', align:"center", sort: true, width:60, totalRowText: 'text'},
                {fixed:'right', field: 'asset_isInQingteng', title:'操作', width:180, align:'center', toolbar: '#optionToolbar',totalRow: true}
            ]],
            limits: [50, 100, 500, 1000, 3000, 5000, 10000, 20000, 50000],
            limit: 20,
            page: true,
        });
复制代码

使用 optionToolbar 进行关联,将图标和查看、编辑、删除合在一起,此处也可以是其他的,比如前面的选择按钮等。

示例: 在这里插入图片描述

6. 完整代码

在这里插入图片描述

<div class="layuimini-container" xmlns="http://www.w3.org/1999/html">
    <div class="layuimini-main">



        <fieldset class="layui-elem-field layuimini-search">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">


                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">编号</label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnNoticeFileId" id="searchVulnNoticeFileIdId" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">系统</label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnSystemName" id="searchVulnSystemNameId" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">类型</label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnType" id="searchVulnTypeId" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">级别</label>
                            <div class="layui-input-inline" style=" width: 120px">
                                <input type="text" name="vulnLevel" id="vulnLevelId" autocomplete="off" class="layui-input">

                            </div>
                        </div>




                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">类型</label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnType" id="searchVulnTypeId" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">域名</label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnDomain" id="searchVulnDomainId" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 70px">测试 </label>
                            <div class="layui-input-inline" style="width: 120px">
                                <input type="text" name="searchVulnTestName" id="searchVulnTestNameId" autocomplete="off" class="layui-input">
                            </div>
                        </div>



                        <div class="layui-inline">
                            <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">搜索</a>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>










    {#--------------------添加按钮弹窗-------------------#}
    {#<div class="site-text" style="width:98%; height:600px; margin: 20px  auto auto auto; overflow:auto; display: none" id="viewVulnOpenFormId"  target="test123">#}
    <div class="site-text" style="width:98%; height:600px; margin: 30px 20px 30px 20px;  overflow:auto; display: none" id="viewVulnOpenFormId"  target="test123">

        <form class="layui-form" lay-filter="myFormFilter" onsubmit="return false;" action="#" method="get" id="addVulnFormOpenFormId">









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

                <div class="layui-inline">
                    <label class="layui-form-label">通知单编号</label>
                    <div class="layui-input-block" style="width: 200px">
                        <input type="text" name="vulnNoticeFileIdOpenForm" id="vulnNoticeFileIdOpenFormId" lay-verify="required" autocomplete="off" placeholder="001" readonly="readonly" class="layui-input">

                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">漏洞域名</label>
                    <div class="layui-input-inline" style="width: 200px">
                        <input type="text" name="vulnDomainOpenForm" id="vulnDomainOpenFormId" lay-verify="required" autocomplete="off" placeholder="漏洞域名"  class="layui-input">

                    </div>
                </div>

            </div>


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


                <div class="layui-inline">
                    <label class="layui-form-label">漏洞类型</label>
                    <div class="layui-input-inline" style="width: 200px">
                        <input type="text" name="vulnTypeOpenForm" id="vulnTypeOpenFormId"  autocomplete="off" placeholder="漏洞类型"  class="layui-input">

                    </div>
                </div>



{#                <div class="layui-inline">#}
{#                    <label class="layui-form-label">漏洞级别</label>#}
{#                    <div class="layui-input-inline" style="width: 200px">#}
{#                        <select name="vulnLevelOpenForm" id="vulnLevelOpenFormId" lay-search="">#}
{#                            <option value="">请选择漏洞级别</option>#}
{#                            <option value="高危">高危</option>#}
{#                            <option value="中危">中危</option>#}
{#                            <option value="低危">低危</option>#}
{#                            <option value="风险">风险</option>#}
{#                        </select>#}
{#                    </div>#}
{#                </div>#}
                <div class="layui-inline">
                    <label class="layui-form-label ">漏洞级别*</label>
                    <div class="layui-input-inline" style=" width: 200px">
                        <input type="text" name="vulnLevelOpenForm" id="vulnLevelOpenFormId" lay-verify="required" autocomplete="off" placeholder="1个中危,一个低危" class="layui-input">

                    </div>
                </div>



            </div>



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


                <div class="layui-inline">
                    <label class="layui-form-label">测试人员</label>
                    <div class="layui-input-block" style="width: 200px">
                        <input type="text" name="vulnTestNameOpenForm" id="vulnTestNameOpenFormId" lay-verify="required" autocomplete="off" placeholder="001" readonly="readonly" class="layui-input">

                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">漏洞个数</label>
                    <div class="layui-input-inline" style="width: 200px">
                        <input type="text" name="vulnCountOpenForm" id="vulnCountOpenFormId" lay-verify="required" autocomplete="off" placeholder="漏洞个数"  class="layui-input">

                    </div>
                </div>


            </div>


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


                <div class="layui-inline">
                    <label class="layui-form-label">系统名称</label>
                    <div class="layui-input-block" style="width: 200px">
                        <input type="text" name="vulnSystemNameOpenForm" id="vulnSystemNameOpenFormId" lay-verify="required" autocomplete="off" placeholder="系统名称"  class="layui-input">

                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开发单位</label>
                    <div class="layui-input-block" style="width: 200px">
                        <input type="text" name="vulnDevelopCompanyOpenForm" id="vulnDevelopCompanyOpenFormId" autocomplete="off" placeholder="开发单位"  class="layui-input">

                    </div>
                </div>



            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">通知单名称</label>
                <div class="layui-input-block" style="width: 520px">
                    <input type="text" name="vulnNoticeFileNameOpenForm" id="vulnNoticeFileNameOpenFormId" lay-verify="title" autocomplete="off" placeholder="通知单名称" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">是否通知</label>
                    <div class="layui-input-block">
                        <input type="checkbox"  name="vulnIsNoticeOpenForm" id="vulnIsNoticeOpenFormId" lay-skin="switch" lay-filter="vulnIsNoticeFilter" lay-text="已通知|未通知">
                    </div>
                </div>


                <div class="layui-inline">
                    <div class="layui-input-block"></div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">是否反馈</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="vulnIsFeedbackOpenForm" id="vulnIsFeedbackOpenFormId" lay-skin="switch" lay-filter="vulnIsFeedbackIdFilter" lay-text="已反馈|未反馈">
                    </div>
                </div>

            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">是否复测</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="vulnIsRetestOpenForm" id="vulnIsRetestOpenFormId" lay-skin="switch" lay-filter="vulnIsRetestIdFilter" lay-text="已复测|未复测">
                    </div>
                </div>

                <div class="layui-inline">
                    <div class="layui-input-block"></div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">是否修复</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="vulnIsEepairOpenForm" id="vulnIsEepairOpenFormId" lay-skin="switch" lay-filter="vulnIsEepairIdFilter" lay-text="已修复|未修复">
                    </div>
                </div>
            </div>


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

                <label class="layui-form-label">资料上传</label>

                <div class=" layui-upload" style="display:inline">
                    <button type="button" class="layui-btn layui-btn-sm" style="width:100px" name="selectWordVulnNoticeFileOpenForm" id="selectWordVulnNoticeFileOpenFormId">选择word通知单</button>
                    <button type="button" class="layui-btn layui-btn-sm" name="startUploadWordVulnNoticeFileOpenForm" id="startUploadWordVulnNoticeFileOpenFormId">开始上传</button>
                </div>

                <div class=" layui-upload layui-input-block" style="display:inline">
                    <button type="button" class="layui-btn layui-btn-sm"  style="width:100px" name="selectVulnNoticeFileOpenForm" id="selectPdfVulnNoticeFileOpenFormId">选择pdf通知单</button>
                    <button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnNoticeFileOpenForm" id="startUploadPdfVulnNoticeFileOpenFormId">开始上传</button>
                </div>

            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">资料上传</label>


                <div class=" layui-upload" style="display:inline">
                    <button type="button" class="layui-btn layui-btn-sm"  style="width:100px" name="selectVulnFeedbackFileOpenForm" id="selectVulnFeedbackFileOpenFormId">选择整改反馈单</button>
                    <button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnFeedbackFileOpenForm" id="startUploadVulnFeedbackFileOpenFormId">开始上传</button>
                </div>

                <div class=" layui-upload layui-input-block" style="display:inline">
                    <button type="button" class="layui-btn layui-btn-sm" style="width:100px"  name="selectVulnRetestFileOpenForm" id="selectVulnRetestFileOpenFormId">选择复测报告</button>
                    <button type="button" class="layui-btn layui-btn-sm" name="startUploadVulnRetestFileOpenForm" id="startUploadVulnRetestFileOpenFormId">开始上传</button>
                </div>

            </div>



            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">漏洞描述</label>
                <div class="layui-input-block" style="width: 535px; max-height: 30px; height: 30px">
                    <textarea placeholder="请输入内容" name="vulnDetailOpenForm" id="vulnDetailOpenFormId" placeholder="漏洞描述" class="layui-textarea"style="width: 535px; max-height: 30px; height: 30px"></textarea>
                </div>
            </div>


            <div class="layui-form-item " style="text-align:center; margin-top: 80px">

                <div class="layui-input-block ">
                    <button class="layui-btn" name="editVulnSubmitOpenForm"  id="editVulnSubmitOpenFormId" type="button" style="margin-right: 10px" lay-submit lay-filter="editVulnSubmitOpenFormFilter">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-normal" style="margin-right: 10px"> &nbsp;&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;&nbsp; </button>
                    <button class="layui-btn layui-btn-warm" name="addcancle" id="addcancleId" type="button" style="margin-leftr: 10px; margin-right: 80px;" lay-submit lay-filter="addcancleFilter"> &nbsp;&nbsp;&nbsp;&nbsp;取消&nbsp;&nbsp;&nbsp;&nbsp; </button>
    {#                        <button type="reset" class="layui-btn layui-btn-normal" style="margin-right: 150px"> &nbsp;&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;&nbsp; </button>#}

                </div>
            </div>

        </form>


    </div>



        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>



    </div>
</div>





<script type="text/html" id="optionToolbar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



<script type="text/html" id="selectToolbar">
    <div class="layui-btn-container">
{#        <button class="layui-btn layui-btn-sm" lay-event="addVulnData" href="javascript:;" data-content-href="VulnManage/addvuln.html" data-title="基本资料" data-icon="fa fa-gears">新增数据</button>#}
        <button class="layui-btn layui-btn-sm" href="javascript:;" data-content-href="VulnManage/addvulndata/" data-title="基本资料" data-icon="fa fa-gears">新增数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>


        <button type="button" class="layui-btn layui-btn-sm data-download-btn layui-btn-normal" id="downloadTroubleTemplateFileId" name="downloadTroubleTemplateFile">
            {#                    <a href="/Assets/downloadDomainTemplateFile/" style="color: blue; font-size: 14px">#}
            <a href="/VulnManage/downloadTroubleTemplateFile/" style="color: white; font-size: 12px">
                <i class="layui-icon">&#xe601;</i>
                下载模板
            </a>
        </button>
        <button type="button" class="layui-btn layui-btn-sm" id="selectFileId" name="selectFile">选择文件(Vuln.xls)</button>
        <button type="button" class="layui-btn layui-btn-sm" id="startUploadId" name="startUpload">
            <i class="layui-icon">&#xe681;</i>
            开始上传
        </button>

        <button class="layui-btn layui-btn-sm layui-btn-normal" href="javascript:;" data-title="初始化" data-icon="fa fa-gears" lay-event="initAll">
            <i class="layui-icon">&#xe639;</i>
            初始化
        </button>

        <button class="layui-btn layui-btn-sm data-delete-btn layui-btn-danger" lay-event="deleteAll">
            <i class="layui-icon">&#xe640;</i>
            全部删除
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="downloadAll">
            <a href="/VulnManage/downloadTroubleAllToFile/" style="color: white; font-size: 12px">
                <i class="layui-icon">&#xe641;</i>
                批量下载
        </button>



    </div>
</script>


{##  {{ d.vulnIsNotice == "on" ? 'checked' : '' }} 将表格的数据给按钮#}
{% verbatim %}
<script type="text/html" id="switchVulnIsNoticePdfToolbar">
    <input type="checkbox" name="switchVlnIsNoticeOpenform" id="switchVlnIsNoticeOpenformId" value="{{d.vulnIsNotice}}" title="已通知" lay-event="switchVlnIsNoticeOpenformEvent" lay-filter="switchVlnIsNoticeOpenformFilter" {{ d.vulnIsNotice == "on" ? 'checked' : '' }}>
</script>

<script type="text/html" id="switchVulnIsFeedbackToolbar">
    <input type="checkbox" name="switchVlnIsFeedbackOpenform" id="switchVlnIsFeedbackOpenformId" value="{{d.vulnIsFeedback}}" title="已反馈" lay-event="switchVlnIsFeedbackOpenformEvent" lay-filter="switchVlnIsFeedbackOpenformFilter" {{ d.vulnIsFeedback == "on" ? 'checked' : '' }}>
</script>

<script type="text/html" id="switchVulnIsRetestToolbar">
    <input type="checkbox" name="switchVlnIsRetestOpenform" id="switchVlnIsRetestOpenformId" value="{{d.vulnIsNotice}}" title="已复测" lay-event="switchVlnIsRetestOpenformEvent" lay-filter="switchVlnIsRetestOpenformFilter" {{ d.vulnIsRetest == "on" ? 'checked' : '' }}>
</script>

<script type="text/html" id="switchVulnIsHandleToolbar">
    <input type="checkbox" name="switchVlnIsRepireOpenform" id="switchVlnIsRepireOpenformId" value="{{d.vulnIsEepair}}" lay-skin="switch"  lay-text="已通过|未通过" lay-event="switchVlnIsRepireOpenformEvent"  lay-filter="switchVlnIsRepireOpenformFilter" {{ d.vulnIsEepair == "on" ? 'checked' : '' }}>
</script>
{% endverbatim %}



{##}
{##}
{#<script type="text/html" id="switchVulnIsNoticePdfToolbar">#}
{#    <input type="checkbox" name="switchVlnIsNotice" id="switchVlnIsNoticeId" value="{{d.vulnIsNotice}}" title="已下发" lay-filter="switchVlnIsNoticeFilter" {{ d.vulnIsNotice == "on" ? 'checked' : '' }}>#}
{#    &nbsp;#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectWordVulnNoticeFileId">上传</a>#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadWordVulnNoticeFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsFeedbackToolbar">#}
{#    <input type="checkbox" name="switchVlnIsFeedback" id="switchVlnIsFeedbackId" value="{{d.vulnIsFeedback}}" title="已反馈" lay-filter="switchVlnIsFeedbackFilter" {{ d.vulnIsFeedback == "on" ? 'checked' : '' }}>#}
{#    &nbsp;#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectPdfVulnNoticeFileId">上传</a>#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadPdfVulnNoticeFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsRetestToolbar">#}
{#    <input type="checkbox" name="switchVlnIsRetest" id="switchVlnIsRetestId" value="{{d.vulnIsNotice}}" title="已复测" lay-filter="switchVlnIsRetestFilter" {{ d.vulnIsRetest == "on" ? 'checked' : '' }}>#}
{#    &nbsp;#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectVulnFeedbackFileId">上传</a>#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadVulnFeedbackFileId">下载</a>#}
{#</script>#}
{#<script type="text/html" id="switchVulnIsHandleToolbar">#}
{#    <input type="checkbox" name="switchVlnIsRepire" id="switchVlnIsRepireId" value="{{d.vulnIsEepair}}" lay-skin="switch"  lay-text="已通过|未通过"  lay-filter="switchVlnIsRepireFilter" {{ d.vulnIsEepair == "on" ? 'checked' : '' }}>#}
{#    &nbsp;#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="selectVulnRetestFileId">上传</a>#}
{#    <a class="layui-btn layui-btn-warm layui-btn-xs" id="downloadVulnRetestFileId">下载</a>#}
{#</script>#}

<script>


layui.use(['form', 'layer', 'table', 'upload', 'layedit', 'laydate'], function () {
    var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        upload = layui.upload,
        layedit = layui.layedit,
        laydate = layui.laydate,
        layer = layui.layer;



    // 表格
    table.render({
        elem: '#currentTableId'
        ,url: 'VulnManage/getvulndetail/'
        ,toolbar: '#selectToolbar'//开启头部工具栏,并为其绑定左侧模板
        ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
            title: '提示'
            ,layEvent: 'LAYTABLE_TIPS'
            ,icon: 'layui-icon-tips'
        }]
        ,cols: [[
            {type: 'checkbox', fixed: 'left'}
            ,{type: 'numbers', title: '序号',  width:60, align:"center", sort: true,fixed: 'left'}
            ,{field:'vulnNoticeFileId', title:'编号', width:90, align:'center', sort: true,fixed: 'left', totalRowText: 'text'}
            {#,{field:'vulnNoticeFileName', title:'通知单名称', width:200, align:'left', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnSystemName', title:'系统名称', width:150, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnLevel', title:'级别', width:85, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnDomain', title:'漏洞域名', width:200, align:'left', sort: true, totalRowText: 'text'}#}
            ,{field:'vulnIsNotice', title:'是否通知', width:125, templet: '#switchVulnIsNoticePdfToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsNoticeOpenformEvent'}
            ,{field:'vulnIsFeedback', title:'是否反馈', width:125, templet: '#switchVulnIsFeedbackToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsFeedbackOpenformEvent'}
            ,{field:'vulnIsRetest', title:'是否复测', width:125, templet: '#switchVulnIsRetestToolbar', align:'left', sort: true, totalRowText: 'text', event:'switchVlnIsRetestOpenformEvent'}
            ,{field:'vulnCount', title:'个数', width:85, align:'center', sort: true, totalRowText: 'text'}
            {#,{field:'vulnType', title:'漏洞类型', width:200, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnTestName', title:'测试人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'businessPeople', title:'项目经理', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'DevelopPeople', title:'研发负责人', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnNoticeWordPath', title:'整改通知单WORD', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnNoticeWordPathEvent'}#}
            {#,{field:'vulnNoticePdfPath', title:'整改通知单PDF', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnNoticePdfPathEvent'}#}
            {#,{field:'vulnFeedbackPath', title:'整改反馈单', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnFeedbackPathEvent'}#}
            {#,{field:'vulnRetestPath', title:'复测报告', width:200, align:'left', sort: true, totalRowText: 'text', event: 'getVulnRetestPathEvent'}#}
            {#,{field:'vulnDevelopCompany', title:'开发单位', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulnDetail', title:'漏洞描述', width:300, align:'left', sort: true, totalRowText: 'text'}#}
            {#,{field:'vulncreatePeople', title:'创建人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            ,{field:'vulncreateTime', title:'创建时间', width:220, align:'left', sort: true, totalRowText: 'text'}
            {#,{field:'vulnupdatePeople', title:'更新人员', width:120, align:'center', sort: true, totalRowText: 'text'}#}
            ,{field:'vulnupdateTime', title:'更新时间', width:220, align:'left', sort: true, totalRowText: 'text'}

            ,{fixed:'right', field:'vulnIsEepair', title:'是否修复', width:120, templet: '#switchVulnIsHandleToolbar', align:'center', sort: true, totalRowText: 'text', event:'switchVlnIsRepireOpenformEvent'}
            ,{fixed:'right', title:'操作', width:170, align:'center', toolbar: '#optionToolbar',totalRow: true}

        ]]
        {#需要在后台一起处理#}
        ,limit: 13
        ,limits: [10, 15, 20, 25, 50, 100]
        ,page: true
        ,title: '用户数据表'
        ,id:"tableRenameId" //table.reload()会使用此ID
        ,done:function(){
            tableData = table.cache.tableIns;
        }

    });




    // 监听添加漏洞提交
    form.on('submit(editVulnSubmitOpenFormFilter)', function (data) {
        $.ajax({
            url: '/VulnManage/editvulnsubmit/',
            type: 'post'
            ,dataType: 'json' //预期返回类型
            ,data: data.field,
            success:function(data){
                if(data == "success"){

                    layer.alert("修改成功",{
                        icon:1
                        ,title:'提示'
                        ,yes: function(index, layero){
                            layer.close(index);
                            window.parent.location.reload(); //刷新父页面
                            {#window.location = ("/#/VulnManage/vulnlist/");#}
                        }
                    });

                }else{
                    layer.alert(data,{ icon:2,title:'提示'},function(index){ layer.close(index);});
                }

            },

        });

        return false;
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {

        var vulnNoticeFileId = $('#searchVulnNoticeFileIdId').val();
        var vulnSystemName = $('#searchVulnSystemNameId').val();
        var vulnType = $('#searchVulnTypeId').val();
        var vulnLevel = $('#searchVulnLevelId').val();
        var vulnDomain = $('#searchVulnDomainId').val();
        var vulnTestName = $('#searchVulnTestNameId').val();

        {#alert(vulnTestName);#}
        {#table.rander({#}
        {#    ,title: '用户数据表'#}
        {#    ,id:"tableRenameId"  }) //table.reload()会使用此ID#}
        table.reload('tableRenameId', {
            url: 'VulnManage/searchvulnsubmit/'
            {#,methods:"post"#}
            ,request: {
                pageName: 'page' //页码的参数名称,默认:page
                , limit: 'limit' //每页数据量的参数名,默认:limit
            }
            ,where: {
                vulnNoticeFileId : vulnNoticeFileId
                ,vulnSystemName : vulnSystemName
                ,vulnLevel : vulnLevel
                ,vulnType : vulnType
                ,vulnDomain : vulnDomain
                ,vulnTestName : vulnTestName
            }
            ,page: {
                curr: 1
            }
        });
        {#return false;#}
    });





    //选完文件后不自动上传
    upload.render({
        elem: '#selectFileId'
        ,url: 'VulnManage/uploadTroubleFileAll/'
        ,auto: false            //是否选完文件后自动上传
        //,multiple: true       //是否允许多文件上传
        ,bindAction: '#startUploadId'
        ,accept: 'file' //允许上传的文件类型
        ,acceptMime: "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        ,exts: 'xls|xlsx'   //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式


        {#,acceptMime: 'text/plain'#}
        {#,ext: 'log|txt'#}
        {#,acceptMime: 'text/*'#}
        {#,size: 50 //最大允许上传的文件大小#}
        {#,before:function(obj){#}
        {#    obj.preview(function(index, file, result){#}
        {#        alert(file.name);#}
        {#    });#}

        ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
            layer.load(); //上传loading
        }

        ,done: function(res, index, upload){
            if (res.code == 0){
                layer.closeAll('loading'); //关闭loading
                layer.alert("上传成功",{
                    icon:1
                    ,title:'提示'
                });
            }
        }
    });












    //上传 word 的漏洞整改通知单,选完文件后不自动上传
    upload.render({
        elem: '#selectWordVulnNoticeFileOpenFormId'
        ,dragDrop: true                 // 是否可以拖动上传文件
        {#,url: 'VulnManage/uploadWordVulnNoticeFile/'#}
        ,auto: false            //是否选完文件后自动上传
        //,multiple: true       //是否允许多文件上传
        {#,bindAction: '#startUploadWordVulnNoticeFileOpenFormId'#}
        ,accept: 'file' //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
        ,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        ,exts: 'doc|docx'   //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式


        ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
            layer.load(); //上传loading

        }
        ,done: function(data, index, upload){
            layer.closeAll('loading'); //关闭loading
            layer.close(index);
        }
    });

    $("#startUploadWordVulnNoticeFileOpenFormId").on("click",function () {
        var addVulnFormId = document.getElementById("addVulnFormOpenFormId");   //获取所要提交form的id
        var joinFormData = new FormData(addVulnFormId);       //用所要提交form做参数建立一个formdata对象

        $.ajax({
            url: 'VulnManage/uploadWordVulnNoticeFile/'
            ,type: "POST"
            ,data: joinFormData
            ,async : false
            ,contentType: false   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
            ,processData: false   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            ,error : function(request) {
                parent.layer.alert("网络超时");
            }
            ,success: function (data) {
                if (data.code == "0"){
                    layer.alert(data.msg,{
                        icon:1
                        ,title:'提示'
                    });
                }else(
                    layer.alert(data.msg,{
                        icon:2
                        ,title:'提示'
                    })
                );
            }
        });
        return false;
    });



    //上传 PDF 的漏洞整改通知单,选完文件后不自动上传
    upload.render({
        elem: '#selectPdfVulnNoticeFileOpenFormId'
        {#,url: 'VulnManage/uploadWordVulnNoticeFile/'#}
        ,auto: false            //是否选完文件后自动上传
        //,multiple: true       //是否允许多文件上传
        {#,bindAction: '#startUploadPdfVulnNoticeFileOpenFormId'#}
        ,accept: 'file' //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
        {#,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"#}
        ,acceptMime:"application/pdf"
        ,exts: 'pdf'        //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式



        ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
            layer.load(); //上传loading

        }
        ,done: function(data, index, upload){
            layer.closeAll('loading'); //关闭loading
            layer.close(index);
        }
    });

    $("#startUploadPdfVulnNoticeFileOpenFormId").on("click",function () {
        var addVulnFormId = document.getElementById("addVulnFormOpenFormId");   //获取所要提交form的id
        var joinFormData = new FormData(addVulnFormId);       //用所要提交form做参数建立一个formdata对象

        $.ajax({
            url: 'VulnManage/uploadPdfVulnNoticeFile/'
            ,type: "POST"
            ,data: joinFormData
            ,async : false
            ,contentType: false   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
            ,processData: false   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            ,error : function(request) {
                parent.layer.alert("网络超时");
            }
            ,success: function (data) {
                if (data.code == "0"){
                    layer.alert(data.msg,{
                        icon:1
                        ,title:'提示'
                    });
                }else(
                    layer.alert(data.msg,{
                        icon:2
                        ,title:'提示'
                    })
                );
            }
        });
        return false;
    });



    //上传 word | PDF 的反馈单,选完文件后不自动上传
    upload.render({
        elem: '#selectVulnFeedbackFileOpenFormId'
        {#,url: 'VulnManage/uploadVulnFeedbackFile/'#}
        ,auto: false            //是否选完文件后自动上传
        //,multiple: true       //是否允许多文件上传
        {#,bindAction: '#startUploadVulnFeedbackFileOpenFormId'#}
        ,accept: 'file' //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
        ,acceptMime: ".docx,.pdf,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        ,exts: 'doc|docx|pdf'   //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式



        ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
            layer.load(); //上传loading

        }
        ,done: function(data, index, upload){
            layer.closeAll('loading'); //关闭loading
            layer.close(index);
        }
    });

    $("#startUploadVulnFeedbackFileOpenFormId").on("click",function () {
        var addVulnFormId = document.getElementById("addVulnFormOpenFormId");   //获取所要提交form的id
        var joinFormData = new FormData(addVulnFormId);       //用所要提交form做参数建立一个formdata对象

        $.ajax({
            url: 'VulnManage/uploadVulnFeedbackFile/'
            ,type: "POST"
            ,data: joinFormData
            ,async : false
            ,contentType: false   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
            ,processData: false   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            ,error : function(request) {
                parent.layer.alert("网络超时");
            }
            ,success: function (data) {
                if (data.code == "0"){
                    layer.alert(data.msg,{
                        icon:1
                        ,title:'提示'
                    });
                }else(
                    layer.alert(data.msg,{
                        icon:2
                        ,title:'提示'
                    })
                );
            }
        });
        return false;
    });



    //上传 word 的复测报告,选完文件后不自动上传
    upload.render({
        elem: '#selectVulnRetestFileOpenFormId'
        {#,url: 'VulnManage/uploadVulnRetestFile/'#}
        ,auto: false            //是否选完文件后自动上传
        {##}
        {#//,multiple: true       //是否允许多文件上传#}
        {#,bindAction: '#startUploadVulnRetestFilOpenFormeId'#}
        ,accept: 'file' //指定允许上传时校验的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)
        ,acceptMime: ".docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
        ,exts: 'doc|docx'   //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式

        ,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
            layer.load(); //上传loading

        }
        ,done: function(data, index, upload){
            layer.closeAll('loading'); //关闭loading
            layer.close(index);
        }
    });

    $("#startUploadVulnRetestFileOpenFormId").on("click",function () {
        var addVulnFormId = document.getElementById("addVulnFormOpenFormId");   //获取所要提交form的id
        var joinFormData = new FormData(addVulnFormId);       //用所要提交form做参数建立一个formdata对象

        $.ajax({
            url: 'VulnManage/uploadVulnRetestFile/'
            ,type: "POST"
            ,data: joinFormData
            ,async : false
            ,contentType: false   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件
            ,processData: false   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
            ,error : function(request) {
                parent.layer.alert("网络超时");
            }
            ,success: function (data) {
                if (data.code == "0"){
                    layer.alert(data.msg,{
                        icon:1
                        ,title:'提示'
                    });
                }else(
                    layer.alert(data.msg,{
                        icon:2
                        ,title:'提示'
                    })
                );
            }
        });
        return false;
    });



    //头工具栏事件
    table.on('toolbar(currentTableFilter)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            {#case 'addVulnData':#}
            {#    var data = checkStatus.data;#}
            {#    layer.alert("addVulnData");#}
            {#    break;#}
            case 'getCheckData':
                var data = checkStatus.data;
                layer.alert(JSON.stringify(data));
                break;
            case 'getCheckLength':
                var data = checkStatus.data;
                layer.msg('选中了:'+ data.length + ' 个');
                break;
            case 'isAll':
                layer.msg(checkStatus.isAll ? '全选': '未全选');
                break;

            // 监听头工具删除操作  请确认是否全部删除
            case 'deleteAll':
                layer.alert("请确认是否全部删除",{
                    icon: 7
                    ,title: '提示'
                    ,btn: ['全部删除', '取消']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,yes:function(index, layero){
                        $.post('/VulnManage/deleteTroubleall/',{
                            deleteAll: "yes"
                        },function(data){
                            //根据后台返回的参数,来进行判断
                            if(data == "success"){
                                layer.alert('全部删除成功',{
                                    icon:1
                                    ,title:'提示'
                                    ,yes:function (data) {
                                        window.parent.location.reload(); //刷新父页面

                                    }
                                },function(i){
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                    {#$("#book")[0].reset()//重置form#}

                                });
                                table.reload('currentTableId',{//重载表格
                                    page:{
                                        curr:1
                                    }
                                });

                            }
                        });

                    }
                    ,btn2: function(index, layero){
                        layer.close(index);//关闭弹出层
                    }
                });

                break;

            // 监听头工具初始化操作  请确认是否初始化
            case 'initAll':
                layer.alert("请确认是否初始化",{
                    icon: 3
                    ,title: '提示'
                    ,btn: ['初始化', '取消']
                    ,shadeClose: true
                    ,shade: 0 //遮罩透明度
                    ,yes:function(index, layero){
                        $.post('/VulnManage/initTroubleAll/',{
                            init: "yes"
                        },function(data){
                            //根据后台返回的参数,来进行判断
                            if(data == "success"){
                                layer.alert('初始化成功',{
                                    icon:1
                                    ,title:'提示'
                                    ,yes:function (data) {
                                        window.parent.location.reload(); //刷新父页面

                                    }
                                },function(i){
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                    {#$("#book")[0].reset()//重置form#}
                                });
                                table.reload('currentTableId',{//重载表格
                                    page:{
                                        curr:1
                                    }
                                });

                            }else{
                                layer.alert(data,{
                                    icon:2
                                    ,title:'提示'
                                    ,yes:function (data) {
                                        window.parent.location.reload(); //刷新父页面

                                    }
                                },function(i){
                                    layer.close(i);
                                    layer.close(index);//关闭弹出层
                                    {#$("#book")[0].reset()//重置form#}
                                });
                                table.reload('currentTableId',{//重载表格
                                    page:{
                                        curr:1
                                    }
                                });

                            }

                        });

                    }
                    ,btn2: function(index, layero){
                        layer.close(index);//关闭弹出层
                    }
                });

                break;




            //自定义头工具栏右侧图标 - 提示
            case 'LAYTABLE_TIPS':
                layer.alert('这是工具栏右侧自定义的一个图标按钮');
                break;
        }
    });



    //监听行工具事件  查看资产信息
    table.on('tool(currentTableFilter)', function(obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据(json格式的键值对)

        //监听行工具事件 删除
        if(obj.event === 'del'){
            {#layer.msg('domainName:'+ data.domainName + ' 的删除操作');#}
            obj.del();
            {#layer.close(index);#}
            layer.confirm('您确定要删除该漏洞吗?',{btn: ['确定', '取消'],icon:7,title:"提示"}, function(){
                $.post('/VulnManage/deletevulnforline/',{
                    delete: "yes"
                    ,vulnDomain: data.vulnDomain
                    ,vulnNoticeFileId: data.vulnNoticeFileId
                    ,vulnNoticeFileName: data.vulnNoticeFileName
                },function(data){
                    //根据后台返回的参数,来进行判断
                    if(data == "success"){
                        layer.alert('删除成功',{
                            icon:1
                            ,title:'提示'
                        },function(i){
                            layer.close(i);
                            layer.close(index);//关闭弹出层
                            {#$("#currentTableId")[0].reset()//重置form#}
                        });
                        table.reload('currentTableId',{//重载表格
                            page:{
                                curr:1
                            }
                        });
                        window.parent.location.reload(); //刷新父页面
                    }
                });


            });

        }

        //监听行工具事件 编辑
        else if(obj.event === 'edit'  || obj.event === 'detail'){

            {#$("[name='a']").val("456");#}

            {#layer.msg('domainName:'+ obj.data.domainName + ' 的编辑操作');#}
            layer.open({
                {#,btn: ['立即修改', '取消']#}
                type: 1 //Page层类型
                ,skin: 'layui-layer-molv'
                ,scrollbar: true
                , area: ['auto']
                ,maxHeight: "400px"
                {#,area: ['300', '300']#}
                ,closeBtn: 1 //显示关闭按钮
                ,title: ['修改漏洞信息','font-size:16px']
                ,shadeClose: true
                ,shade: 0 //遮罩透明度
                {#,fixed:true#}
                {#,top:300#}
                ,offset:"70px"
                ,maxmin: true //允许全屏最小化



                ,content:$("#viewVulnOpenFormId")  //弹窗路径
                ,success:function(layero){
                    var btn = layero.find('.layui-layer-btn');
                    btn.css('text-align', 'center');
                    {#var btn = layero.find('.layui-layer-btn');#}
                    {#btn.css('text-align', 'center');#}
                    {#$('#vulnNoticeFileIdOpenFormId').val(data.vulnNoticeFileId);#}
                    $('#vulnNoticeFileIdOpenFormId').val(data.vulnNoticeFileId.match(/\d+/g)[0]);
                    $('#vulnDomainOpenFormId').val(data.vulnDomain);
                    $('#vulnTypeOpenFormId').val(data.vulnType);
                    $('#vulnLevelOpenFormId').val(data.vulnLevel);

                    $('#vulnTestNameOpenFormId').val(data.vulnTestName);
                    $('#vulnCountOpenFormId').val(data.vulnCount);
                    $('#vulnSystemNameOpenFormId').val(data.vulnSystemName);
                    $('#vulnNoticeFileNameOpenFormId').val(data.vulnNoticeFileName);
                    $('#vulnDetailOpenFormId').val(data.vulnDetail);


                    {#$('#systemStatusOpenId').val(data.systemStatus);#}
                    {#$('#extranetAccessOpenId').val(data.extranetAccess);#}
                    {#$('#systemStatusOpenId').removeAttr("checked");#}
                    {#$('#systemStatusOpenId').prop('checked', false);#}


                    {#layer.alert(data.extranetAccess);#}


                    if (data.vulnIsNotice == "on") {
                        $("#vulnIsNoticeOpenFormId").attr("checked", true);
                    } else if (data.vulnIsNotice == "已下线") {
                        $("#vulnIsNoticeOpenFormId").attr("checked", false);
                    };

                    if (data.vulnIsFeedback == "on") {
                        $("#vulnIsFeedbackOpenFormId").attr("checked", true);
                    } else if (data.vulnIsFeedback == "本地访问") {
                        $("#vulnIsFeedbackOpenFormId").attr("checked", false);
                    };


                    if (data.vulnIsRetest == "on") {
                        $("#vulnIsRetestOpenFormId").attr("checked", true);
                    } else if (data.vulnIsRetest == "本地访问") {
                        $("#vulnIsRetestOpenFormId").attr("checked", false);
                    };

                    if (data.vulnIsEepair == "on") {
                        $("#vulnIsEepairOpenFormId").attr("checked", true);
                        {#$("[name=vulnIsEepairOpenForm]:checkbox").attr("checked",true);#}

                    } else if (data.vulnIsEepair == "本地访问") {
                        $("#vulnIsEepairOpenFormId").attr("checked", false);
                    }

                    {#$('#vulnTypeOpenFormId').val(data.vulnType);#}

                    {#data.vulnType = "用户名遍历漏洞,任意文件上传漏洞,支付逻辑漏洞";#}
                    {#if(data.vulnType != ""){#}
                    {#    data.vulnType.forEach(function(e){#}
                    {#        $("[name=" + e + "]:checkbox").attr("checked", true);}#}
                    {#    );}#}


                    {#$.each(data.vulnType.split(","), function (index, obj) {#}
                    {#    $("[name=" + obj + "]:checkbox").attr("checked", true);});#}


                    form.render();

                    {#$("#systemStatusOpenId").attr("checked",false);#}
                    {#$("#extranetAccessOpenId").attr("checked",false);#}
                    {#$("#extranetAccessOpenId").attr("checked",false);#}
                    {#$("[name=systemStatusOpen]:checkbox").attr("checked",false);#}
                    {#$("[name=systemStatusOpen]:checkbox").prop("checked",false);#}
                    {#$('input[name=cnvdServerity]').attr('value', data.cnvdServerity);#}
                    {#document.getElementById('cnvdServerity').value=data.cnvdServerity;#}

                    {#$('#cveUrlId') = data.cveUrl;#}

                    {## 刷新页面, 否则不显示#}
                    {#form.val('myFormFilter', {#}
                    {#    "developmentCompany":  $('#developmentCompanyOpenId').val() })#}
                },yes:function(i){
                    layer.close(i);
                    layer.close(index);//关闭弹出层
                    {#$("#book")[0].reset()//重置form#}
                    table.reload('currentTableId', {//重载表格
                        page: {
                            curr: 1
                        }
                    })
                }
            })

        }else

            //下发通知单开关
        if(obj.event === "switchVlnIsNoticeOpenformEvent" ){

            layer.alert("是否修改通知单下发情况",{
                icon:3
                ,btn: ["修改", "取消"]
                ,title:'提示'
                ,yes: function (index) {
                    $.post('/VulnManage/editvulnisnotice/',{
                        vulnNoticeFileId: obj.data.vulnNoticeFileId
                        ,vulnIsNotice: obj.data.vulnIsNotice
                    },function(data){
                        //根据后台返回的参数,来进行判断
                        if(data.status == "on"){
                            layer.alert("修改为: 已下发通知单",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });

                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }
                            })
                        }else if(data.status == "off"){

                            layer.alert("修改为: 未下发通知单",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });
                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }

                            })

                        } else{
                            layer.alert('修改失败',{
                                icon:2
                                ,title:'提示'
                            });
                        }
                    });

                }
                ,btn2: function (index) {
                    window.parent.location.reload(); //刷新父页面

                }
            })


        }else
            //收到反馈开关
        if(obj.event === "switchVlnIsFeedbackOpenformEvent" ){
            layer.alert("是否修改反馈情况",{
                icon:3
                ,btn: ["修改", "取消"]
                ,title:'提示'
                ,yes: function (index) {
                    $.post('/VulnManage/editvulnisfeeedback/',{
                        vulnNoticeFileId: obj.data.vulnNoticeFileId
                        ,vulnIsFeedback: obj.data.vulnIsFeedback
                    },function(data){
                        //根据后台返回的参数,来进行判断
                        if(data.status == "on"){
                            layer.alert("修改为: 已收到反馈单",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });

                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }
                            })
                        }else if(data.status == "off"){

                            layer.alert("修改为: 未收到反馈单",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });
                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }

                            })

                        } else{
                            layer.alert('修改失败',{
                                icon:2
                                ,title:'提示'
                            });
                        }
                    });

                }
                ,btn2: function (index) {
                    window.parent.location.reload(); //刷新父页面

                }
            })


        }else
            //完成复测报告
        if(obj.event === "switchVlnIsRetestOpenformEvent" ){


            layer.alert("是否修改复测情况",{
                icon:3
                ,btn: ["修改", "取消"]
                ,title:'提示'
                ,yes: function (index) {
                    $.post('/VulnManage/editvulnisretest/',{
                        vulnNoticeFileId: obj.data.vulnNoticeFileId
                        ,vulnIsRetest: obj.data.vulnIsRetest
                    },function(data){
                        //根据后台返回的参数,来进行判断
                        if(data.status == "on"){
                            layer.alert("修改为: 已完成复测",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });

                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }
                            })
                        }else if(data.status == "off"){

                            layer.alert("修改为: 未完成复测",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });
                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }

                            })

                        } else{
                            layer.alert('修改失败',{
                                icon:2
                                ,title:'提示'
                            });
                        }
                    });

                }
                ,btn2: function (index) {
                    window.parent.location.reload(); //刷新父页面

                }
            })


        }
        else
            //漏洞修复开关
        if(obj.event === "switchVlnIsRepireOpenformEvent" ){


            layer.alert("是否修漏洞修复情况",{
                icon:3
                ,btn: ["修改", "取消"]
                ,title:'提示'
                ,yes: function (index) {
                    $.post('/VulnManage/editvulnisrepire/',{
                        vulnNoticeFileId: obj.data.vulnNoticeFileId
                        ,vulnIsEepair: obj.data.vulnIsEepair
                    },function(data){
                        //根据后台返回的参数,来进行判断
                        if(data.status == "on"){
                            layer.alert("修改为: 已完成修复",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll();
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });

                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }
                            })
                        }else if(data.status == "off"){

                            layer.alert("修改为: 未完成修复",{
                                icon:1
                                ,title:'提示'
                                ,yes: function(index, layero){
                                    layer.close(index);
                                    layer.closeAll()
                                    window.parent.location.reload(); //刷新父页面
                                    {#window.location = ("/#/VulnManage/vulnlist/");#}
                                }
                            });
                            table.reload('currentTableId',{//重载表格
                                page:{
                                    curr:1
                                }

                            })

                        } else{
                            layer.alert('修改失败',{
                                icon:2
                                ,title:'提示'
                            });
                        }
                    });

                }
                ,btn2: function (index) {
                    window.parent.location.reload(); //刷新父页面

                }
            })


        }
        else






            //下载通知单WORD
        if(obj.event === "getVulnNoticeWordPathEvent" ){
            {#layer.alert("123456");#}
            {#alert(data.reportPath);#}

            var vulnNoticeWordPath = data.vulnNoticeWordPath;


            if(vulnNoticeWordPath !== null){
                downloadReportPathFileByForm(vulnNoticeWordPath);
            }


            function downloadReportPathFileByForm(data) {
                //此处data是需要传递的数据
                var url = "/VulnManage/downloadVulnNoticeWordPath/"; //提交数据和下载地址
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                //将数据赋值给Input进行form表单提交数据
                form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnNoticeWordPath").attr("value", data));
                form.appendTo('body').submit().remove(); //模拟提交
            }


        }
        else
            //下载通知单PDF
        if(obj.event === "getVulnNoticePdfPathEvent" ){
            {#layer.alert("123456");#}
            {#alert(data.reportPath);#}

            var vulnNoticePdfPath = data.vulnNoticePdfPath;


            if(vulnNoticePdfPath !== null){
                downloadReportPathFileByForm(vulnNoticePdfPath);
            }


            function downloadReportPathFileByForm(data) {
                //此处data是需要传递的数据
                var url = "/VulnManage/downloadVulnNoticePdfPath/"; //提交数据和下载地址
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                //将数据赋值给Input进行form表单提交数据
                form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnNoticePdfPath").attr("value", data));
                form.appendTo('body').submit().remove(); //模拟提交
            }

        }
        else
            //下载反馈单
        if(obj.event === "getVulnFeedbackPathEvent" ){
            {#layer.alert("123456");#}
            {#alert(data.reportPath);#}

            var vulnFeedbackPath = data.vulnFeedbackPath;


            if(vulnFeedbackPath !== null){
                downloadReportPathFileByForm(vulnFeedbackPath);
            }


            function downloadReportPathFileByForm(data) {
                //此处data是需要传递的数据
                var url = "/VulnManage/downloadVulnFeedbackPath/"; //提交数据和下载地址
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                //将数据赋值给Input进行form表单提交数据
                form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnFeedbackPath").attr("value", data));
                form.appendTo('body').submit().remove(); //模拟提交
            }

        }
        else
            //下载复测报告
        if(obj.event === "getVulnRetestPathEvent" ){
            {#layer.alert("123456");#}
            {#alert(data.reportPath);#}

            var vulnRetestPath = data.vulnRetestPath;


            if(vulnRetestPath !== null){
                downloadReportPathFileByForm(vulnRetestPath);
            }


            function downloadReportPathFileByForm(data) {
                //此处data是需要传递的数据
                var url = "/VulnManage/downloadVulnRetestPath/"; //提交数据和下载地址
                var form = $("<form></form>").attr("action", url).attr("method", "post");
                //将数据赋值给Input进行form表单提交数据
                form.append($("<input></input>").attr("type", "hidden").attr("name", "vulnRetestPath").attr("value", data));
                form.appendTo('body').submit().remove(); //模拟提交
            }
        }





    });



    // 监听添加漏洞取消
    form.on('submit(addcancleFilter)', function (data) {

        {#//获取checkbox[name='like1']的值#}
        {#var arr = new Array();#}
        {#$("input:checkbox[name='vulnName']:checked").each(function(i){#}
        {#    arr[i] = $(this).val(); });#}
        {#data.field.like = arr.join(",");//将数组合并成字符串#}

        layer.closeAll();
        window.parent.location.reload(); //刷新父页面

        return false;
    });


});





</script>
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改