scott
/
crm


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							{extend name="public/layout" /} {block name="title"}风格测试{/block} {block name="body"}

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab">
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>步骤结构及节点操作</legend>
        </fieldset>
        <div class="layui-card-body">

            <div id="treestruc" class="tree_struc"></div>
            <div style="padding: 10px 0;">
                <button class="layui-btn layuiadmin-btn-style" data-type="save">确认结构</button>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>步骤文章操作</legend>
        </fieldset>
        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-style" data-type="add">添加步骤文章内容</button>
            </div>
            <table id="decohelper-table" lay-filter="decohelper-table"></table>
            <script type="text/html" id="img">
                <img src="{{d.cover}}" style="width: 50px;height: 50px;"/>
            </script>
            <script type="text/html" id="table-style-list">
              {auth:check name="tool/decoPostEdit"}
                  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                {/auth:check}
                {auth:check name="tool/deco_del"}
                  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
                {/auth:check}
            </script>
        </div>
    </div>
</div>
{/block} {block name="js"}
<script>
  layui.config({
    base   : '__LAYUI__/' //静态资源所在路径
    ,
    urlbase: '/sys'
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index','table','tree'], function () {
    var $     = layui.$,
        form  = layui.form,
        tree = layui.tree,
        table = layui.table;

    //装修助手
    table.render({
      elem: '#decohelper-table',
      url: "{:url('tool/decohelperlist')}" //模拟接口
      ,
      cols: [
        [{
          type: 'numbers',
          width: 80,
          title: '序号',
        }, {
          field: 'cover',
          title: '图片',
          templet: '#img'
        }, {
          field: 'title',
          title: '标题'
        }, {
          field: 'typepath',
          title: '节点路径'
        }, {
          title: '操作',
          width: 150,
          align: 'center',
          fixed: 'right',
          toolbar: '#table-style-list'
        }]
      ],
      page: true,
      limit: 10,
      limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      text: '对不起，加载出现异常！'
    });
    //监听工具条
    table.on('tool(decohelper-table)', function(obj) {
      var data = obj.data;
      if(obj.event === 'del') {
        layer.confirm('确定删除该节点文章吗？', function(index) {
          $.ajax({
            type: 'post',
            url: "{:url('tool/deco_del')}",
            data: {
              id: data.id
            },
            success: function(res) {
              if(res.code == 0) {
                layer.msg(res.msg, {
                  anim: 0
                });
              } else {
                layer.msg(res.msg, {
                  anim: 6
                });
              }
            }
          });
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit') {
        console.log(data.title);
        layer.open({
          type: 2,
          title: '编辑',
          content: '{:url("tool/decoPostEdit")}?key=' + data.title,
          area: ['800px', '600px'],
          btn: ['确定', '取消'],
          yes: function(index, layero) {
            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit-submit");
            submit.click();
          }
        })
      }
    });


    //监听搜索
            form.on('submit(styleTest-search)', function (data) {
                var field = data.field;

                //执行重载
                table.reload('decohelper-table', {
                    where: field
                    ,page: {curr:1}
                });
            });

    //事件
    var active = {
      save: function () {
        layer.confirm('确认保存结构？',function(res){

          var saveUrl = '{:url("tool/decoStrucSave")}';
            $.post(saveUrl, {
              data:JSON.stringify(datasource)
            }, function(res) {
              if (res.code != 0) {
                layer.msg(res.msg, { icon: 5, anim: 6, time: 1500 });
              }else{
                layer.msg(res.msg, { icon: 6 });
              }
            });

        });
      },
      add: function () {
        layer.open({
          type   : 2,
          title  : '添加',
          content: '{:url("tool/decoPostAdd")}',
          maxmin : true,
          area   : ['800px', '600px'],
          btn    : ['确定', '取消'],
          yes    : function (index, layero) {
            //点击确认触发 iframe 内容中的按钮提交
            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
            submit.click();
          }
        });
      }
    };
    $('.layui-btn.layuiadmin-btn-style').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    var datasource = JSON.parse('{$datastr|raw}');

    tree.render({
      elem   : '#treestruc'
      , data : datasource
      , edit : ['add', 'update', 'del'] //操作节点的图标
      , click: function (obj) {
        //layer.msg(JSON.stringify(obj.data));
        console.log(obj);
      }
      ,operate: function(obj){
        var type = obj.type; //得到操作类型：add、edit、del
        var data = obj.data; //得到当前节点的数据
        var elem = obj.elem; //得到当前节点元素

        //Ajax 操作
        var id = data.id; //得到节点索引
        if(type === 'add'){ //增加节点
          //返回 key 值
          var newpoint = {'title':'未命名'};
          data.children.push(newpoint);
        } else if(type === 'update'){ //修改节点
          console.log(data);
          console.log(datasource);
          $.each(datasource, function (k,obj) {
            console.log(obj);
            if(obj.title === '未命名'){
              //alert(1);
              obj.title = data.title;
              return false;
            }else{
              if(obj.children){
                $.each(obj.children, function (key,child) {
                  if(child.title  === '未命名'){
                   // alert(2);
                    child.title = data.title;
                    return false;
                  }else{
                    if(child.children){
                      $.each(child.children, function (ind,endor) {
                        if(endor.title  === '未命名'){
                          //alert(3);
                          endor.title = data.title;
                          return false;
                        }
                      });
                    }
                  }
                });
              }
            }
          });
        } else if(type === 'del'){ //删除节点
          // alert(data);
          console.log(data);
          $.each(datasource, function (k,obj) {
            console.log(obj);
            if(obj.title == data.title){
              return false;
              //alert(1);
            }else{
              if(obj.children){
                $.each(obj.children, function (key,child) {
                  if(child.title == data.title){
                    //alert(2);
                    obj.children.splice(key, 1);
                    return false;
                  }else{
                    if(child.children){
                      $.each(child.children, function (ind,endor) {
                        if(endor.title == data.title){
                          //alert(3);
                          child.children.splice(ind, 1);
                          return false;
                        }
                      });
                    }
                  }
                });
              }
            }
          });
          console.log(datasource);


        };
      }
    });
  });
</script>
{/block}