YwxAppThink/public/static/backend/modules/navbar.js

/*
 * @Author: YwxApp <ywx@ywxapp.cn>
 * @Description: 前台主导航菜单管理（后台，treeTable 树形表格）
 */
layui.define(['http', 'auth', 'table', 'treeTable'], function (exports) {
  var $ = layui.$,
    treeTable = layui.treeTable,
    form = layui.form,
    layer = layui.layer,
    laytpl = layui.laytpl,
    http = layui.http,
    auth = layui.auth;

  auth.init((layui.data('backend').permission) || []);

  // 树形表格：数据为扁平 pid 列表（isSimpleData），pid=0 为根自动建树
  treeTable.render({
    elem: '#dataTable',
    url: 'index',
    parseData: function (res) {
      return { code: res.code === 0 ? 0 : 1, msg: res.msg || '', count: res.count || 0, data: res.data || [] };
    },
    tree: {
      customName: {
        children: 'children',
        isParent: 'is_parent',
        name: 'title',
        id: 'id',
        pid: 'pid',
        icon: 'icon'
      },
      data: { isSimpleData: true, rootPid: 0 },
      view: {},
      async: {},
      callback: {}
    },
    height: 'full-100',
    toolbar: '#tableBar',
    cols: [[
      { type: 'checkbox', fixed: 'left' },
      { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', align: 'center' },
      { field: 'title', title: '菜单名称', minWidth: 200, fixed: 'left' },
      {
        field: 'app', title: '所属应用', width: 110, align: 'center', templet: function (d) {
          if (!d.app) return '<span class="layui-badge layui-bg-green">前台</span>';
          if (d.app === 'member') return '<span class="layui-badge layui-bg-blue">会员</span>';
          if (d.app === 'backend') return '<span class="layui-badge layui-bg-orange">后台</span>';
          return '<span class="layui-badge layui-bg-black">' + d.app + '</span>';
        }
      },
      { field: 'url', title: '链接', minWidth: 200 },
      { field: 'sort', title: '排序', width: 80, sort: true, align: 'center' },
      { field: 'status', title: '状态', width: 96, align: 'center', templet: '#statusTpl' },
      { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#dataBar' }
    ]],
    page: false,
    done: function () {
      auth.render();
    }
  });

  // 状态开关
  form.on('switch(statusSwitch)', function (obj) {
    var id = obj.value;
    var status = obj.elem.checked ? 1 : 0;
    http.post('status', { id: id, status: status }).then(function (res) {
      if (res.code !== 0) {
        layer.msg(res.msg || '操作失败');
        obj.elem.checked = !obj.elem.checked;
        form.render('checkbox');
      }
    });
  });

  // 搜索 / 重置
  form.on('submit(data-search-btn)', function (obj) {
    treeTable.reload('dataTable', { where: { title: obj.field.title || '' } }, true);
    return false;
  });
  $('#btn-reset').on('click', function () {
    $('.layui-form[lay-filter="search-form"] input[name="title"]').val('');
    treeTable.reload('dataTable', { where: {} }, true);
  });

  // 工具条（新建 / 批量删除）
  treeTable.on('toolbar(dataTable)', function (obj) {
    if (obj.event === 'dataCreate') {
      openForm({});
    } else if (obj.event === 'dataDelete') {
      var checkStatus = treeTable.checkStatus('dataTable');
      delRows((checkStatus.data || []).map(function (item) { return item.id; }));
    }
  });

  // 行操作
  treeTable.on('tool(dataTable)', function (obj) {
    var d = obj.data;
    if (obj.event === 'update') { openForm(d); }
    else if (obj.event === 'create') { openForm({ parent_id: d.id }); }
    else if (obj.event === 'delete') { delRows([d.id]); }
  });

  // 删除（单条或批量）
  function delRows(ids) {
    if (!ids || !ids.length) return layer.msg('请选择要删除的项');
    layer.confirm('确定删除选中的 ' + ids.length + ' 项吗？', function (idx) {
      http.delete('delete', { ids: ids.join(',') }).then(function (res) {
        if (res.code === 0) { layer.close(idx); treeTable.reload('dataTable', {}, true); }
        else { layer.msg(res.msg || '操作失败'); }
      });
    });
  }

  // 表单抽屉：拉取一级菜单作为父级选项
  function openForm(data) {
    http.get('index').then(function (res) {
      var parents = [];
      layui.each((res.data || []), function (i, p) {
        if (p.pid == 0) parents.push(p);
      });
      var html = laytpl($('#dataFormTpl').html()).render($.extend({ parents: parents, plugins: window.navPlugins || [] }, data));
      layer.open({
        type: 1, title: data.id ? '编辑菜单' : (data.parent_id ? '添加子菜单' : '新建菜单'),
        area: ['520px', '98%'], offset: 'r', anim: 'slideLeft', shade: 0.1, shadeClose: true,
        btnAlign: 'l', btn: ['保存', '取消'], content: html,
        success: function () { form.render(); },
        yes: function (idx, layero) {
          var fd = {};
          $(layero).find('form').serializeArray().map(function (x) { fd[x.name] = x.value; });
          http.post(data.id ? 'update' : 'save', fd).then(function (r) {
            if (r.code === 0) { layer.close(idx); treeTable.reload('dataTable', {}, true); }
            else { layer.msg(r.msg || '操作失败'); }
          });
        }
      });
    });
  }

  exports('navbar', {});
});