ThinkAdmin选择用户弹窗（多选）

弹层select.html

{extend name="../../admin/view/full"}

{block name="content"}
<div class="iframe-pagination">
    {include file='user/select_search'}
    <table id="SelectUserTable" data-line="3" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
    
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        // 初始化表格组件
        $('#SelectUserTable').layTable({
            even: true, height: 'full',
            cols: [[
                {
                    field: 'id', title: '用户信息', minWidth: 250, templet: '#SelectUserInfoTpl'
                },
                {toolbar: '#toolbar', title: '操作面板', align: 'center', width: 90, fixed: 'right'},
            ]]
        });
    });
    $(document).on('click', 'a[data-item]', function() {
        top.setSelectUserValue(JSON.parse(this.getAttribute('data-item') || '[]') || []);
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
</script>
<script type="text/html" id="SelectUserInfoTpl">
<div class="inline-block">
    <div>
        {{# if(d.username){ }}
        用户姓名：<span class="color-text">{{d.username}}</span>
        {{# }else{ }}
        用户昵称：<span class="color-text">{{d.nickname}}</span>
        {{# } }}
    </div>
    <div>用户手机：<span class="color-text">{{ d.phone || '-' }}</span></div>
</div>
</script>
<!-- 数据操作工具条模板 -->
<script type="text/html" id="toolbar">
    {{#  
        d.json = JSON.stringify(d);
    }}
    <a class="layui-btn layui-btn-sm layui-btn-normal" data-item="{{d.json}}">选 择</a>
</script>
{/block}

弹层搜索 select_search.html

<fieldset>
    <legend>条件搜索</legend>
    <form action="{:sysuri('user/select')}" autocomplete="off" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">用户信息</label>
            <label class="layui-input-inline">
                <input class="layui-input" name="username" placeholder="请输入手机或姓名" value="{$get.username|default=''}">
            </label>
        </div>

        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
        </div>
    </form>
</fieldset>

 使用页面form.html

<div>
        <input type="hidden" value="{$receive_default|default='[]'}" data-select-user name="receive_default">
</div>
<script>
    $('[data-select-user]').selectUser();
</script>

JS: public\static\extra\script.js

$.fn.selectUser = function () {
        return this.each(function () {
            if (this.dataset.inited) return; else this.dataset.inited = 'true';
            let $this = $(this)
                , rule = {value:this.dataset.ruleValue || 'openid1', name:this.dataset.ruleName || 'username'}
                , title = this.dataset.title || '会员选择器'
                , tags = this.value ? JSON.parse(this.value) : [];
            let $button = $('<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"></button').append('选择');
            let $content = $('<div class="layui-card layui-textarea padding-0"><div class="layui-card-header text-right"></div><div class="layui-card-body"></div></div>');
            let $tags = $('<div class="layui-tags"></div>');
            $content.find('.layui-card-header').append($button) && $content.find('.layui-card-body').append($tags);
            $this.parent().append($content) && $button.off('click') && (tags.length > 0 && showMemberContainer(tags));
            $button.on('click', function (event) {
                event.preventDefault();
                top.window.setSelectUserValue = function (items) {
                    let value = {
                        value: items[rule.value] ?? '',
                        name: items[rule.name] ?? '',
                    };
                    tags.push(value) && $this.val(JSON.stringify(tags));
                    showMemberContainer([value]);
                };
                top.$.form.iframe('/shop/user/select.html', title, ['850px', '850px']);
            });

            function showMemberContainer(memberArr) {
                let selected = [];
                $tags.children().each(function(){
                    selected.push($(this).data('value'));
                });
                $(memberArr).each(function (idx, item) {
                    console.log(item.value,selected.indexOf(item.value));
                    if (selected.indexOf(item.value) !== -1) {
                        return true;
                    }
                    let tips = '其他信息';
                    $tags.append($('<div class="layui-tag" data-tips-text="'+tips+'"></div>').data('name', item.name).data('value', item.value).on('click', 'i', function () {
                        tags = $.grep(tags, function(t) {
                            return t.value !== item.value;
                        });
                        $this.val(JSON.stringify(tags)) && $(this).parent().remove();
                    }).html(item.name + '<i class="layui-icon">&#x1006;</i>'));
                    
                });
            }
        });
    };

效果：