/** * 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); });