layui.use(['laytpl', 'table', 'jquery', 'form', 'miniTab', 'xmSelect', 'laydate'], function () { let $ = layui.jquery, table = layui.table, xmSelect = layui.xmSelect, miniTab = layui.miniTab, laydate = layui.laydate, form = layui.form; /**** index begin ***/ if ($('.location-index-page').length > 0) { miniTab.listen(); // 渲染表格 let listUrl = $('#table-container').data('url'); let insTb = table.render({ elem: '#table-container', title: '列表', defaultToolbar: ['filter', 'exports', { title: '搜索' //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可 , layEvent: 'search' , icon: 'layui-icon-search' }], toolbar: '#toolbar-tpl', method: 'POST', url: listUrl, page: true, limit: 20, limits: [20,50,100,200,500,1000], request: { pageName: 'page', limitName: 'size', }, parseData: function (res) { return { "code": res.code, //解析接口状态 "msg": res.msg, //解析提示文本 "count": res.data.total, //解析数据长度 "data": res.data.list //解析数据列表 }; }, cols: [[ {type: 'checkbox'}, {field: 'name', title: '名称', minWidth: 200}, {templet: '#row-saleable', minWidth: 120,align: 'center', title: '上下架'}, {field: 'sort', width: 150, align: 'center', title: '排序', edit: 'text'}, {field: 'published_at', title: '发布日期', minWidth: 150, hide: true}, {templet: '#row-operate', width: 280, align: 'center', title: '操作'} ]], done: function () { Tools.setInsTb(insTb); } }); //监听工具条 注意区别toolbar和tool toolbar是表头上的工具条 tool是行中的工具条 table.on('toolbar(table-container-filter)', function (obj) { let layEvent = obj.event; let insTb = Tools.getInsTb(); let url = $($(this).context).data('href') let title = $($(this).context).data('title') let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%'; let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%'; let checkStatus = table.checkStatus('table-container'); let selected = checkStatus.data; let ids = []; switch (layEvent) { // toolbar 删除 case 'del': if (checkStatus.data.length <= 0) { layer.msg('请先选择数据'); return false; } // let selected = checkStatus.data; // let ids = []; $.each(selected, function (index, val) { ids.push(val.id); }) delRow(url, ids, insTb); return false; // toolbar 刷新 case 'refresh': refreshTab(insTb); return false; // toolbar 搜索 case 'search': let search = $('.table-search-fieldset'); if (search.hasClass('div-show')) { search.css('display', 'none').removeClass('div-show'); } else { search.css('display', 'block').addClass('div-show'); } return false; // 其他 默认为打开弹出层 default: if (layEvent !== 'LAYTABLE_COLS' && layEvent !== 'LAYTABLE_EXPORT') { openLayer(url, title, width, height); return false; } } }); //监听行工具条 table.on('tool(table-container-filter)', function (obj) { let data = obj.data; let layEvent = obj.event; let url = $($(this).context).data('href'); let title = $($(this).context).data('title'); let width = $($(this).context).data('width') ? $($(this).context).data('width') : '100%'; let height = $($(this).context).data('height') ? $($(this).context).data('height') : '100%'; let insTb = Tools.getInsTb(); switch (layEvent) { // 行 删除 case 'del': let ids = [data.id]; delRow(url, ids, insTb); return false; //其他 默认为打开弹出层 default: openLayer(url, title, width, height); return false; } }); changeSwitch('changeSaleable');//监听上下架 let modifyUrl = $('#row-modify').data('url'); table.on('edit(table-container)', function (obj) { let id = obj.data.id; $.ajax(modifyUrl, { data: {"id": id, "field": obj.field, "value": obj.value} ,dataType : 'json' ,type: 'POST' }) .done(function (res) { if (res.code === 0) { insTb.reload(); } }) }); // switch变更 function changeSwitch(filter) { form.on('switch(' + filter + ')', function (obj) { let val = obj.elem.checked ? 1 : 0; $.post(modifyUrl, {id: this.value, field: this.name, value: val}, function (res) { layer.msg(res.msg) if (res.code !== 0) { //操作不成功则刷新页面 insTb.reload(); } }) }); } // 监听搜索操作 form.on('submit(data-search-btn)', function (data) { //执行搜索重载 table.reload('table-container', { page: {curr: 1} , where: data.field }, 'data'); return false; }); } /*** index end ***/ if ($('.location-operate-page').length > 0) { let parentCategory = $('#parent-category'); let categoryList = parentCategory.data('list') ? parentCategory.data('list') : []; xmSelect.render({ el: '#parent-category', paging: false, autoRow: true, clickClose: true, name: 'category_id', tips: '请选择分类', direction: 'auto', height: 'auto', model: { icon: 'hidden', }, prop: { name: 'title', value: 'id', }, tree: { show: true, strict: false, clickCheck: true, expandedKeys: true, clickExpand: false }, theme: { color: '#1e84ff', }, data: categoryList }); laydate.render({ elem: '#published-at', type: 'datetime', }); } });