新增tableData组件；完成商品标签示例；

app/admin/controller/mall/Tag.php

@@ -0,0 +1,27 @@
+<?php
+
+namespace app\admin\controller\mall;
+
+use app\common\controller\AdminController;
+use EasyAdmin\annotation\ControllerAnnotation;
+use EasyAdmin\annotation\NodeAnotation;
+use think\App;
+
+/**
+ * @ControllerAnnotation(title="mall_tag")
+ */
+class Tag extends AdminController
+{
+
+    use \app\admin\traits\Curd;
+
+    public function __construct(App $app)
+    {
+        parent::__construct($app);
+
+        $this->model = new \app\admin\model\MallTag();
+        
+    }
+
+    
+}

app/admin/model/MallTag.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace app\admin\model;
+
+use app\common\model\TimeModel;
+
+class MallTag extends TimeModel
+{
+
+    protected $name = "mall_tag";
+
+    protected $deleteTime = "delete_time";
+
+    
+    
+    
+
+}

app/admin/view/mall/goods/add.html

@@ -57,7 +57,14 @@
                 <input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="0">
             </div>
         </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">标签</label>
+            <div class="layui-input-block">
+                <div data-toggle="table-data" data-index="{:__url('mall.Tag/index')}" data-select-type="checkbox" data-select-value="" data-value-field="id" data-name="tag" data-field-name="title">
 
+                </div>
+            </div>
+        </div>
         <div class="layui-form-item">
             <label class="layui-form-label">商品描述</label>
             <div class="layui-input-block">

app/admin/view/mall/goods/edit.html

@@ -58,7 +58,14 @@
                 <input type="text" name="virtual_sales" class="layui-input" lay-verify="required" placeholder="请输入虚拟销量" value="{$row.virtual_sales|default=''}">
             </div>
         </div>
+        <div class="layui-form-item">
+            <label class="layui-form-label">标签</label>
+            <div class="layui-input-block">
+                <div data-toggle="table-data" data-index="{:__url('mall.Tag/index')}" data-select-type="checkbox" data-select-value="{$row.tag|default=''}" data-value-field="id" data-name="tag" data-field-name="title">
 
+                </div>
+            </div>
+        </div>
         <div class="layui-form-item">
             <label class="layui-form-label">商品描述</label>
             <div class="layui-input-block">

app/admin/view/mall/tag/add.html

@@ -0,0 +1,17 @@
+<div class="layuimini-container">
+    <form id="app-form" class="layui-form layuimini-form">
+        
+        <div class="layui-form-item">
+            <label class="layui-form-label">名称</label>
+            <div class="layui-input-block">
+                <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入名称" value="">
+            </div>
+        </div>
+        <div class="hr-line"></div>
+        <div class="layui-form-item text-center">
+            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
+            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
+        </div>
+
+    </form>
+</div>

app/admin/view/mall/tag/edit.html

@@ -0,0 +1,17 @@
+<div class="layuimini-container">
+    <form id="app-form" class="layui-form layuimini-form">
+        
+        <div class="layui-form-item">
+            <label class="layui-form-label">名称</label>
+            <div class="layui-input-block">
+                <input type="text" name="title" class="layui-input" lay-verify="required" placeholder="请输入名称" value="{$row.title|default=''}">
+            </div>
+        </div>
+        <div class="hr-line"></div>
+        <div class="layui-form-item text-center">
+            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
+            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
+        </div>
+
+    </form>
+</div>

app/admin/view/mall/tag/index.html

@@ -0,0 +1,10 @@
+<div class="layuimini-container">
+    <div class="layuimini-main">
+        <table id="currentTable" class="layui-table layui-hide"
+               data-auth-add="{:auth('mall.tag/add')}"
+               data-auth-edit="{:auth('mall.tag/edit')}"
+               data-auth-delete="{:auth('mall.tag/delete')}"
+               lay-filter="currentTable">
+        </table>
+    </div>
+</div>

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];

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;
+});

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"],

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){
+        $('iframe').each(function (index, iframe) {
 
-            if(typeof iframe.contentWindow.onInitElemStyle == "function"){
+            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 += '<button class="layui-btn layui-btn-sm layui-btn-success easyadmin-export-btn" data-url="' + init.export_url + '" data-table-export="' + tableId + '"><i class="fa fa-file-excel-o"></i> 导出</button>\n';
                         }
+                    } else if (v === 'selectConfirm') {
+                        toolbarHtml += '<button class="layui-btn layui-btn-sm layui-btn-success easyadmin-export-btn select-confirm" data-table-target="' + tableId + '"> 确定选择</button>\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') {

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;
+}

public/static/plugs/lay-module/tableData/tableData.html

@@ -0,0 +1,11 @@
+<div class="table-data-container">
+    <input type="hidden" :name="setting.name" :value="value">
+    <div class="layui-input" @click="openSelectPage">
+        <div class="placeholder" v-if="listSelected.length == 0">{{setting.placeholder}}</div>
+        <div class="layui-btn layui-btn-xs layui-btn-normal" v-for="(itemSelect,indexSelect) in listSelected">
+            <span>{{itemSelect[setting.fieldName]}}</span>
+            <i class="layui-icon layui-icon-close" @click.stop="removeItem(itemSelect,indexSelect)"></i>
+        </div>
+
+    </div>
+</div>

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();
+})

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 {}
+    }
+}