YwxAppThink/public/assets/ywxapp/modules/common.js

/**
 * common
 * 通用元素组件
 */
layui.define('component', function (exports) {
  var table = layui.table;
  // 创建组件
  var component = layui.component({
    name: 'common', // 组件名称
    config: {
      urls: {
        create: '',
        edit: '',
        delete: '',
        restore: '',
      },
      cols: []
    },
    CONST: {},
    render: function () { // 组件渲染逻辑
      // …
    },
    beforeInit: function (options) {
      console.log(options); // 获得组件初始化前的配置项
    },
    beforeRender: function (options) {
      console.log(options); // 获得组件渲染前的配置项
    },
    extendsInstance: function (that) {
      return {
        // 关闭组件
        close: function () {
          that.remove(); // 调用组件原型中的 remove 方法
        }
      }
    },
    events: function () {
      // 亦可包含针对组件的 window, document 等全局事件
      // …
    }
    // 其他选项
  });

  var Class = component.Class;

  Class.prototype.tableRender = function () {
    var dataTable = table.render({
      elem: '#dataTable'
      , url: '/admin/Role/index' // 后端数据接口
      , page: true
      , limit: 15
      , toolbar: '#tableBarTpl'
      , cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { field: 'id', title: 'ID', width: 60, align: 'center', sort: true, fixed: 'left' }
        , { field: 'title', title: '名称', width: 150, align: 'center', fixed: 'left' }
        , { field: 'name', title: '代码', width: 150, align: 'center', fixed: 'left' }
        , { field: 'description', title: '描述', minWidth: 200, align: 'left' }
        , { field: 'status', title: '状态', width: 120, align: 'center', templet: '#statusTpl' }
        , { field: 'create_time', title: '创建时间', width: 160, align: 'center', sort: true }
        , { title: '操作', width: 220, align: 'left', toolbar: '#dataBarTpl', fixed: 'right', unresize: true }
      ]]
      , done: function (res, curr, count) { }
    });

    table.on('toolbar(dataTable)', function (elem) {
      switch (elem.event) {
        case 'dataCreate':
          active.dataCreate({ pid: 0, type: 1 });
          break;
        case 'dataDelete':
          var checkStatus = table.checkStatus('dataTable'), checkData = checkStatus.data;
          let ids = checkData.map((item, index, array) => { return item.id; });
          active.dataDelete(ids);
          break;
        case 'dataRecybin':
          active.dataRecybin();
          break;
      };
    });

    table.on('tool(dataTable)', function (elem) {
      var data = elem.data;
      switch (elem.event) {
        case 'update':
          active.dataEdit(data);
          break;
        case 'permission':
          openPermissionForm(data);
          break;
        case 'delete':
          active.dataDelete([data.id]);
          break;
      }
    });
  };
  Class.prototype.fromRender = function (data, callback, done) {
    var title = data ? '编辑数据[' + data.account + ']' : '添加数据';
    var formHtml = laytpl($('#dataFormTpl').html()).render(data || {});
    layer.open({
      title: data.id ? '编辑菜单' : (data.pid ? '添加子菜单' : '添加根菜单'),
      content: formHtml,
      anim: "slideLeft",
      offset: "r",
      btnAlign: "l",
      area: ['50% ', '99%'],
      shade: 0.1,
      shadeClose: true,
      btn: ['确定', '取消'],
      success: function (layero, index) {
        callback(layero, index);
        form.render();
      },
      yes: function (index, layero) {
        window.layui.form.on('submit(wxapp-form-submit)', function (elem) {
          done(layero, index, elem);
          layui.off('submit(wxapp-form)', 'from');
          return false;
        });
        layero.contents().find("#wxapp-form-submit").trigger('click');
      }
    });
  };
  Class.prototype.dataCreate = function (data = {}) {
    dataFromFun(data,
      function (layero, index) { },
      function (layero, index, elem) {
        var field = elem.field;
        http.post('/admin/Role/save', field)
          .then((res) => {
            if (res.code === 0) {
              layer.close(index);
              table.reload('dataTable', {}, true);
            } else {
              layer.msg(res.msg || '操作失败');
            }
          });
      }
    );
  };
  Class.prototype.dataEdit = function (data = {}) {
    dataFromFun(data,
      function (layero, index) { },
      function (layero, index, elem) {
        var field = elem.field;
        http.put('/admin/Role/update', field)
          .then((res) => {
            if (res.code === 0) {
              layer.close(index);
              table.reload('dataTable', {}, true);
            } else {
              layer.msg(res.msg || '操作失败');
            }
          });
      }
    );
  };
  Class.prototype.dataRecybin = function () {
    // …
  };
  Class.prototype.dataDelete = function (ids, force = 0) {
    if (ids.length === 0) {
      return layer.msg('请选择数据');
    }
    layer.prompt({
      formType: 1
      , title: '敏感操作，请验证口令'
    }, function (value, index) {
      layer.close(index);
      layer.confirm('确定删除吗？', function (index) {
        http.delete('/admin/Role/delete', { ids: ids.join(','), force: force })
          .then((res) => {
            if (res.code === 0) {
              layer.close(index);
              table.reload('dataTable', {}, true);
            } else {
              layer.msg(res.msg || '操作失败');
            }
          });
      });
    });
  };
  Class.prototype.dataRestore = function (ids) {
    if (ids.length === 0) {
      return layer.msg('请选择数据');
    }
    http.put('/admin/Role/restore', { ids: ids.join(',') })
      .then((res) => {
        if (res.code === 0) {
          layer.msg('恢复成功');
          table.reload('dataTable', {}, true);
        } else {
          layer.msg(res.msg || '恢复失败');
        }
      });
  };
  exports(component.CONST.MOD_NAME, component);
});