

  <title>公告管理 - 节点管理</title>

  <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">首页</a>
      <a><cite>系统管理</cite></a>
      <a><cite>公告管理</cite></a>
    </div>
  </div>
  
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
            <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
            
            <script type="text/html" id="test-table-toolbar-toolbarDemo">
                <div class="layui-row layui-col-space10">
                  <div class="layui-col-md9">
                    <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
                    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
                  </div>
                                 
                </div>
            </script>
             
            <script type="text/html" id="test-table-toolbar-barDemo">
              <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>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script>


  layui.use(['admin', 'table'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,view = layui.view
    ,table = layui.table
    ,form = layui.form;

    var access_token = layui.data('layuiAdmin')['access-token']
    table.render({
      elem: '#test-table-toolbar'
      ,url:'/messages?type=announcement'
      ,headers: {"access-token":access_token}
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,title: '公告列表'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'id', title:'ID',   sort: true,width: 60}
        ,{field:'sort', title:'排序', sort: true,width: 80}
        ,{field:'title', title:'标题'}
        ,{field:'is_show',align:'center', title:'显示',width: 70,templet: function(d){
          if (d.is_show) {
            return '<i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>'          
          } else {
            return '否'    
          }
        }}
        ,{field:'is_popup',align:'center', title:'弹窗',width: 70,templet: function(d){
          if (d.is_popup) {
            return '<i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>'          
          } else {
            return '否'    
          }
        }}        
        ,{field:'is_red',align:'center', title:'加红',width: 70,templet: function(d){
          if (d.is_red) {
            return '<i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>'          
          } else {
            return '否'    
          }
        }}
        ,{field:'is_bold',align:'center', title:'加粗',width: 70,templet: function(d){
          if (d.is_bold) {
            return '<i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>'          
          } else {
            return '否'    
          }
        }}      
        ,{field:'is_external',align:'center', title:'跳转',width: 70,templet: function(d){
          if (d.is_external) {
            return '<i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>'          
          } else {
            return '否'    
          }
        }}            
        ,{field:'create_at2', title:'添加时间',sort: true}
        ,{field:'update_at2', title:'更新时间',sort: true}
        ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:120}
      ]]
      ,page: true
    });

    //头工具栏事件
    table.on('toolbar(test-table-toolbar)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          admin.popup({
            title: '新增公告'
            ,area: ['800px', '620px']
            ,id: 'LAY-popup-system-add'
            ,success: function(layero, index){
              view(this.id).render('system/announcement/addform').done(function(){
                form.render(null, 'layuiadmin-form-announcementmadmin');
                
                //监听提交
                form.on('submit(LAY-message-front-submit)', function(data){
                  var field = data.field; //获取提交的字段
                  var title = field.title
                  var content = field.content
                  var is_show = $("input[name='is_show']").prop("checked")
                  var sort = field.sort
                  var is_red = $("input[name='style'][value='red']").prop("checked")
                  var is_bold = $("input[name='style'][value='bold']").prop("checked")
                  var is_external = parseInt($("input[name='is_external']:checked").val())
                  var is_popup = $("input[name='is_popup']").prop("checked")
                  var url = field.url

                  admin.req({
                    url: '/messages' //实际使用请改成服务端真实接口
                    ,data: JSON.stringify({"is_popup":is_popup, "url":url,"is_external":is_external, "type":"announcement", "title": title,"content":content,"is_show":is_show,"is_red":is_red,"is_bold":is_bold, "sort":sort})
                    ,type: "post"
                    ,contentType:"application/json"
                    ,dataType: "json"
                    ,done: function(res){
                      //登入成功的提示与跳转
                      layer.msg('新增成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                      }, function(){
                        layui.table.reload('test-table-toolbar'); //重载表格
                        layer.close(index); //执行关闭 
                      });
                    }
                  });

                });
              });
            }
          });
        break;
        case 'delete':
          var data = checkStatus.data;
          if (data.length == 0) {
            layer.alert('请选择需要删除的公告');   
            return
          }
          req_data = []
          for (i in data) {
            req_data.push(data[i]['id'])
          }

          var ids = req_data.join(",")
          layer.confirm('将删除('+ids+')公告，是否继续', function(index){
            admin.req({
              url: '/messages/'+ids //实际使用请改成服务端真实接口
              ,type: "delete"
              ,done: function(res){
                //登入成功的提示与跳转
                layer.msg('删除成功', {
                  offset: '15px'
                  ,icon: 1
                  ,time: 1000
                }, function(){
                  layui.table.reload('test-table-toolbar'); //重载表格
                });
              }
            });
          });
        break;        
      };
    });
    
    //监听行工具事件
    table.on('tool(test-table-toolbar)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('是否确定删除公告', function(index){
          var id = data.id
          admin.req({
            url: '/messages/' + id //实际使用请改成服务端真实接口
            ,type: "delete"
            ,done: function(res){
              //登入成功的提示与跳转
              layer.msg('删除成功', {
                offset: '15px'
                ,icon: 1
                ,time: 1000
              }, function(){
                layui.table.reload('test-table-toolbar'); //重载表格
                layer.close(index); //执行关闭 
              });
            }
          });

        });
      } else if(obj.event === 'edit'){
        admin.popup({
          title: '编辑公告'
          ,area: ['800px', '620px']
          ,id: 'LAY-popup-system-edit'
          ,success: function(layero, index){
            view(this.id).render('system/announcement/addform',data).done(function(){
              // 获取正文内容
              var msg_id = data.id
              admin.req({
                url: '/messages/' + msg_id //实际使用请改成服务端真实接口
                ,type: "get"
                ,contentType:"application/json"
                ,dataType: "json"
                ,done: function(res){
                  var data = res.data
                  $("textarea[name='content']").val(data.content)
                  var is_external = data.is_external
                  if (is_external) {
                    $("input[name='is_external'][value=1]").prop("checked",true)
                    $(".content").addClass("layui-hide")
                    $(".url").removeClass("layui-hide")                    
                  } else {
                    $("input[name='is_external'][value=0]").prop("checked",true)
                    $(".url").addClass("layui-hide")
                    $(".content").removeClass("layui-hide")

                  }                 

                  var is_red = data.is_red
                  var is_bold = data.is_bold
                  if (is_red) {
                    $("input[name='style'][value=red]").prop("checked",true)
                  }

                  if (is_bold) {
                    $("input[name='style'][value=bold]").prop("checked",true)
                  }

                  form.render(null, 'layuiadmin-form-announcementmadmin');
                }
              });

              //监听提交
              form.on('submit(LAY-message-front-submit)', function(data){
                  var field = data.field; //获取提交的字段
                  var title = field.title
                  var content = field.content
                  var is_show = $("input[name='is_show']").prop("checked")
                  var sort = field.sort
                  var url = field.url
                  var is_red = $("input[name='style'][value='red']").prop("checked")
                  var is_bold = $("input[name='style'][value='bold']").prop("checked")
                  var is_external = parseInt($("input[name='is_external']:checked").val())
                  var is_popup = $("input[name='is_popup']").prop("checked")

                  admin.req({
                    url: '/messages/'+ msg_id //实际使用请改成服务端真实接口
                    ,data: JSON.stringify({"is_popup":is_popup, "url":url,"is_external":is_external, "type":"announcement", "title": title,"content":content,"is_show":is_show,"is_red":is_red,"is_bold":is_bold, "sort":sort})
                    ,type: "put"
                    ,contentType:"application/json"
                    ,dataType: "json"
                    ,done: function(res){
                      //登入成功的提示与跳转
                      layer.msg('更新成功', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                      }, function(){
                        layui.table.reload('test-table-toolbar'); //重载表格
                        layer.close(index); //执行关闭 
                      });
                    }
                  });


              });
            });
          }
        });
      }
    });  

  });

  </script>