From 948461337ba387ccd76916763c7dfc6c359389e9 Mon Sep 17 00:00:00 2001 From: augushong Date: Tue, 5 Jul 2022 18:36:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EtableData=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=EF=BC=9B=E5=AE=8C=E6=88=90=E5=95=86=E5=93=81=E6=A0=87=E7=AD=BE?= =?UTF-8?q?=E7=A4=BA=E4=BE=8B=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/admin/controller/mall/Tag.php | 27 ++++ app/admin/model/MallTag.php | 18 +++ app/admin/view/mall/goods/add.html | 7 + app/admin/view/mall/goods/edit.html | 7 + app/admin/view/mall/tag/add.html | 17 ++ app/admin/view/mall/tag/edit.html | 17 ++ app/admin/view/mall/tag/index.html | 10 ++ app/common/controller/AdminController.php | 2 + public/static/admin/js/mall/tag.js | 37 +++++ public/static/config-admin.js | 1 + public/static/plugs/easy-admin/easy-admin.js | 73 ++++++++- .../plugs/lay-module/tableData/tableData.css | 8 + .../plugs/lay-module/tableData/tableData.html | 11 ++ .../plugs/lay-module/tableData/tableData.js | 145 ++++++++++++++++++ .../plugs/lay-module/tableData/tableData.scss | 13 ++ 15 files changed, 387 insertions(+), 6 deletions(-) create mode 100644 app/admin/controller/mall/Tag.php create mode 100644 app/admin/model/MallTag.php create mode 100644 app/admin/view/mall/tag/add.html create mode 100644 app/admin/view/mall/tag/edit.html create mode 100644 app/admin/view/mall/tag/index.html create mode 100644 public/static/admin/js/mall/tag.js create mode 100644 public/static/plugs/lay-module/tableData/tableData.css create mode 100644 public/static/plugs/lay-module/tableData/tableData.html create mode 100644 public/static/plugs/lay-module/tableData/tableData.js create mode 100644 public/static/plugs/lay-module/tableData/tableData.scss diff --git a/app/admin/controller/mall/Tag.php b/app/admin/controller/mall/Tag.php new file mode 100644 index 0000000..4c00dd7 --- /dev/null +++ b/app/admin/controller/mall/Tag.php @@ -0,0 +1,27 @@ +model = new \app\admin\model\MallTag(); + + } + + +} \ No newline at end of file diff --git a/app/admin/model/MallTag.php b/app/admin/model/MallTag.php new file mode 100644 index 0000000..d088ae3 --- /dev/null +++ b/app/admin/model/MallTag.php @@ -0,0 +1,18 @@ + +
+ +
+
+
+
+
diff --git a/app/admin/view/mall/goods/edit.html b/app/admin/view/mall/goods/edit.html index 11a059a..2f8d164 100644 --- a/app/admin/view/mall/goods/edit.html +++ b/app/admin/view/mall/goods/edit.html @@ -58,7 +58,14 @@
+
+ +
+
+
+
+
diff --git a/app/admin/view/mall/tag/add.html b/app/admin/view/mall/tag/add.html new file mode 100644 index 0000000..8cbbaa8 --- /dev/null +++ b/app/admin/view/mall/tag/add.html @@ -0,0 +1,17 @@ +
+
+ +
+ +
+ +
+
+
+
+ + +
+ +
+
\ No newline at end of file diff --git a/app/admin/view/mall/tag/edit.html b/app/admin/view/mall/tag/edit.html new file mode 100644 index 0000000..ad479e6 --- /dev/null +++ b/app/admin/view/mall/tag/edit.html @@ -0,0 +1,17 @@ +
+
+ +
+ +
+ +
+
+
+
+ + +
+ +
+
\ No newline at end of file diff --git a/app/admin/view/mall/tag/index.html b/app/admin/view/mall/tag/index.html new file mode 100644 index 0000000..700f331 --- /dev/null +++ b/app/admin/view/mall/tag/index.html @@ -0,0 +1,10 @@ +
+
+ +
+
+
\ No newline at end of file diff --git a/app/common/controller/AdminController.php b/app/common/controller/AdminController.php index c067bb7..46035f9 100644 --- a/app/common/controller/AdminController.php +++ b/app/common/controller/AdminController.php @@ -247,6 +247,8 @@ class AdminController extends BaseController break; case '%*': $where[] = [$key, 'LIKE', "%{$val}"]; + case 'in': + $where[] = [$key, 'IN', "{$val}"]; break; case 'min': $where[] = [$key, '>=', $val]; diff --git a/public/static/admin/js/mall/tag.js b/public/static/admin/js/mall/tag.js new file mode 100644 index 0000000..6924560 --- /dev/null +++ b/public/static/admin/js/mall/tag.js @@ -0,0 +1,37 @@ +define(["jquery", "easy-admin"], function ($, ea) { + + var init = { + table_elem: '#currentTable', + table_render_id: 'currentTableRenderId', + index_url: 'mall.tag/index', + add_url: 'mall.tag/add', + edit_url: 'mall.tag/edit', + delete_url: 'mall.tag/delete', + export_url: 'mall.tag/export', + modify_url: 'mall.tag/modify', + }; + + var Controller = { + + index: function () { + ea.table.render({ + init: init, + cols: [[ + {type: 'checkbox'}, + {field: 'id', title: 'id'}, + {field: 'title', title: '名称'}, + {width: 250, title: '操作', templet: ea.table.tool}, + ]], + }); + + ea.listen(); + }, + add: function () { + ea.listen(); + }, + edit: function () { + ea.listen(); + }, + }; + return Controller; +}); \ No newline at end of file diff --git a/public/static/config-admin.js b/public/static/config-admin.js index 111757c..f8ecc2f 100644 --- a/public/static/config-admin.js +++ b/public/static/config-admin.js @@ -17,6 +17,7 @@ require.config({ "miniTongji": ["plugs/lay-module/layuimini/miniTongji"], "treetable": ["plugs/lay-module/treetable-lay/treetable"], "tableSelect": ["plugs/lay-module/tableSelect/tableSelect"], + "tableData": ["plugs/lay-module/tableData/tableData"], "iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"], "autocomplete": ["plugs/lay-module/autocomplete/autocomplete"], "vue": ["plugs/vue-2.6.10/vue.min"], diff --git a/public/static/plugs/easy-admin/easy-admin.js b/public/static/plugs/easy-admin/easy-admin.js index 6822d4e..8aab761 100644 --- a/public/static/plugs/easy-admin/easy-admin.js +++ b/public/static/plugs/easy-admin/easy-admin.js @@ -1,11 +1,11 @@ -define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSelect, undefined, miniTheme) { +define(["jquery", "tableSelect", "ckeditor", 'miniTheme', 'tableData'], function ($, tableSelect, undefined, miniTheme, tableData) { window.onInitElemStyle = function () { miniTheme.renderElemStyle() - $('iframe').each(function(index,iframe){ - - if(typeof iframe.contentWindow.onInitElemStyle == "function"){ + $('iframe').each(function (index, iframe) { + + if (typeof iframe.contentWindow.onInitElemStyle == "function") { iframe.contentWindow.onInitElemStyle(); } }) @@ -13,6 +13,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel } window.onInitElemStyle(); + var selectMode, selectConfirmCallback; + var form = layui.form, layer = layui.layer, table = layui.table, @@ -294,6 +296,12 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel } + + selectMode = admin.getQueryVariable("select_mode"); + + selectConfirmCallback = admin.getQueryVariable('select_confirm_callback', 'onTableDataConfirm'); + + // 判断是否为移动端 if (admin.checkMobile()) { options.defaultToolbar = !options.search ? ['filter'] : ['filter', { @@ -309,6 +317,27 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel } } + + if (selectMode == 'checkbox') { + if (options.cols[0][0].type == 'radio') { + options.cols[0][0].type = 'checkbox'; + } else if (options.cols[0][0].type != 'checkbox') { + options.cols[0].unshift({ + type: 'checkbox' + }) + } + } else if(selectMode == 'radio') { + if (options.cols[0][0].type == 'checkbox') { + options.cols[0][0].type = 'radio'; + + } else if (options.cols[0][0].type != 'radio') { + options.cols[0].unshift({ + type: 'radio' + }) + + } + } + // 判断元素对象是否有嵌套的 options.cols = admin.table.formatCols(options.cols, options.init); @@ -322,6 +351,11 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel // 初始化表格左上方工具栏 options.toolbar = options.toolbar || ['refresh', 'add', 'delete', 'export']; + + if (selectMode == 'checkbox' || selectMode == 'radio') { + options.toolbar.unshift('selectConfirm'); + } + options.toolbar = admin.table.renderToolbar(options.toolbar, options.elem, options.id, options.init); // 判断是否有操作列表权限 @@ -347,9 +381,11 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel // 监听表格开关切换 admin.table.listenEdit(options.init, options.layFilter, options.id, options.modifyReload); + // 监听导出事件 admin.table.listenExport(options); - + // 监听表格选择器 + admin.table.listenTableSelectConfirm(options) return newTable; }, @@ -371,6 +407,8 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel if (admin.checkAuth('export', elem)) { toolbarHtml += '\n'; } + } else if (v === 'selectConfirm') { + toolbarHtml += '\n'; } else if (typeof v === "object") { $.each(v, function (ii, vv) { vv.class = vv.class || ''; @@ -959,7 +997,7 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel // 统一列返回数据处理 returnColumnValue(data) { - if(!data.LAY_COL){ + if (!data.LAY_COL) { return ''; } var option = data.LAY_COL; @@ -1100,6 +1138,18 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel }); } }, + listenTableSelectConfirm(options) { + $('.select-confirm').click(function () { + var checkStatus = table.checkStatus(options.id); + + if (checkStatus.data.length == 0) { + layer.msg('请选择数据'); + return false; + } + + parent.window[selectConfirmCallback](checkStatus.data); + }) + }, listenExport: function (options) { var exportFields = {}; @@ -1270,6 +1320,9 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel // 监听时间控件生成 admin.api.date(); + // 监听通用表格数据控件生成 + admin.api.tableData(); + // 初始化layui表单 form.render(); @@ -1887,6 +1940,14 @@ define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSel }); } }, + tableData() { + var dateList = document.querySelectorAll('[data-toggle="table-data"]'); + $.each(dateList, function (i, v) { + var data = $(v).data() + tableData.render(v, data, admin); + }); + + } }, getQueryVariable(variable, defaultValue) { if (typeof defaultValue == 'undefined') { diff --git a/public/static/plugs/lay-module/tableData/tableData.css b/public/static/plugs/lay-module/tableData/tableData.css new file mode 100644 index 0000000..17637f8 --- /dev/null +++ b/public/static/plugs/lay-module/tableData/tableData.css @@ -0,0 +1,8 @@ +.table-data-container .layui-input { + display: flex; + align-items: center; + justify-content: left; +} +.table-data-container .layui-input .placeholder { + color: #808080; +} \ No newline at end of file diff --git a/public/static/plugs/lay-module/tableData/tableData.html b/public/static/plugs/lay-module/tableData/tableData.html new file mode 100644 index 0000000..8311f25 --- /dev/null +++ b/public/static/plugs/lay-module/tableData/tableData.html @@ -0,0 +1,11 @@ +
+ +
+
{{setting.placeholder}}
+
+ {{itemSelect[setting.fieldName]}} + +
+ +
+
\ No newline at end of file diff --git a/public/static/plugs/lay-module/tableData/tableData.js b/public/static/plugs/lay-module/tableData/tableData.js new file mode 100644 index 0000000..1701169 --- /dev/null +++ b/public/static/plugs/lay-module/tableData/tableData.js @@ -0,0 +1,145 @@ +define(['jquery', 'vue'], function ($, Vue) { + const tableDataCss = '/static/plugs/lay-module/tableData/tableData.css'; + const tableDataHtml = '/static/plugs/lay-module/tableData/tableData.html'; + + var tableData = function () { + var cssElement = document.createElement('link'); + + cssElement.setAttribute('rel', 'stylesheet'); + + cssElement.setAttribute('href', tableDataCss); + + document.body.appendChild(cssElement); + }; + var tableDataTemplate = ''; + + $.ajax({ + type: "get", + url: tableDataHtml, + cache: true, + async: false, + success: function (template) { + tableDataTemplate = template; + } + + }); + + tableData.prototype.render = function (elem, data) { + var app; + var clienWidth, clientHeight; + var width = document.body.clientWidth, + height = document.body.clientHeight; + if (width >= 800 && height >= 600) { + clienWidth = '800px'; + clientHeight = '600px'; + } else { + clienWidth = '100%'; + clientHeight = '100%'; + } + + var defaultOption = { + width: clienWidth, + height: clientHeight, + placeholder: '请选择', + selectConfirmCallback: 'onTableDataConfirm', + } + + var options = $.extend(defaultOption, data); + console.log(options); + + var valueField = options.valueField; + + if (options.index.indexOf('?') > -1) { + options.index += '&' + } else { + options.index += '?' + } + + options.index += 'select_mode=' + options.selectType + + app = new Vue({ + el: elem, + data() { + return { + setting: options, + listSelected: [], + value: '' + } + }, + watch: { + listSelected(value) { + console.log(value); + + var valueList = value.map(itemValue => itemValue[valueField]) + + + + this.value = valueList.join(',') + } + }, + created() { + this.value = options.selectValue; + + var valueLength = this.value.split(',').length; + loading.show(); + $.get(options.index,{ + page:1, + limit:valueLength, + filter:JSON.stringify({id:this.value}), + op: JSON.stringify({id:'in'}) + },(result)=>{ + loading.hide() + this.listSelected = result.data; + }) + + }, + template: tableDataTemplate, + + methods: { + openSelectPage() { + + var index = layer.open({ + title: '选择数据', + type: 2, + area: [options.width, options.height], + content: options.index, + maxmin: true, + moveOut: true, + shadeClose: true, + success: (layero, index) => { + window[options.selectConfirmCallback] = (data) => { + console.log(data); + + data.forEach(dataItem => { + + var itemFind = this.listSelected.find(itemSelect => itemSelect[valueField] == dataItem[valueField]) + + if (itemFind == undefined) { + this.listSelected.push(dataItem) + } + + + }); + this.$forceUpdate(); + layer.close(index); + } + + }, + end: function () { + index = null; + window[options.selectConfirmCallback] = undefined; + } + }); + + }, + removeItem(item, index) { + this.listSelected.splice(index, 1); + } + } + }) + + return app; + } + + return new tableData(); +}) \ No newline at end of file diff --git a/public/static/plugs/lay-module/tableData/tableData.scss b/public/static/plugs/lay-module/tableData/tableData.scss new file mode 100644 index 0000000..97543e0 --- /dev/null +++ b/public/static/plugs/lay-module/tableData/tableData.scss @@ -0,0 +1,13 @@ +.table-data-container { + .layui-input { + display : flex; + align-items : center; + justify-content: left; + + .placeholder { + color: #808080 + } + + .layui-btn {} + } +} \ No newline at end of file