ulthon_admin - tableData列表选择器回调

在ulthon_admin 官网中并没有详细讲解tableData选择后如何回调

偶然在一个项目中遇到了回调的问题，如下图：

管理后台为店铺添加商品，因为商品是所有店铺共享的，所以选择商品后需要将商品标签、库存、总库存、虚拟销量等赋值到当前店铺的商品下。笔记如下：

第一步，html 如下，添加data-select-confirm-callback回调函数(不是文档中的data-selectConfirmCallback，文档中的data-selectConfirmCallback这个属性似乎不对，写了没用。)

<div class="layui-form-item">
    <label class="layui-form-label">商品id</label>
    <div class="layui-input-block">
        <div 
            data-toggle="table-data" 
            data-index="{:__url('mall.goods/index')}" 
            data-select-type="radio"  
            data-select-confirm-callback="selectGoogsCallBack"
            data-select-value="" 
            data-value-field="id" 
            data-name="mall_goods_id" 
            data-field-name="title"
            data-required="1">
        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品标签</label>
    <div class="layui-input-block" id="mall_goods_tag">
        <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"
            data-required="1"  >

        </div>
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">销量</label>
    <div class="layui-input-block">
        <input type="text" name="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">
        <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">
        <input type="text" name="stock" 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">
        <input type="text" name="total_stock" class="layui-input" lay-verify="required" placeholder="请输入总库存"
            value="0">
    </div>
</div>

第二步，找到根目录下/public/static/plugs/lay-module/tableData/tabeData.js 修改 openSelectPage 方法

 openSelectPage() {
    if(options.readonly == 1){
        return false;
    }
    var selectedIds = this.listSelected.map(item => item.id);

    var index = layer.open({
        title: '选择数据',
        type: 2,
        area: [options.width, options.height],
        content: options.index + '&selectedIds=' + selectedIds.join(','),
        maxmin: true,
        moveOut: true,
        shadeClose: true,
        success: (layero, index) => {
            window[options.selectConfirmCallback] = (data) => {
                data.forEach(dataItem => {
                    //console.log('dataItem====>',dataItem);
                    if (options.selectType == 'radio') {
                        this.listSelected = [];
                    }

                    var itemFind = this.listSelected.find(itemSelect => itemSelect[valueField] == dataItem[valueField])

                    if (itemFind == undefined) {
                        this.listSelected.push(dataItem)
                    }
                    //商品选择后回调
                    //options.selectConfirmCallback = data-select-confirm-callback的值，注意保持唯一
                    if(options.selectConfirmCallback=='selectGoogsCallBack'){
                        //动态添加商品标签tableData框及其值
                        var htmlStr='<div data-toggle="table-data" data-index="/index.php/admin/mall.tag/index" data-select-type="checkbox" data-select-value="'+dataItem.tag+'" data-value-field="id" data-name="tag" data-field-name="title"data-required="1"></div>';
                        $("#mall_goods_tag").html(htmlStr);
                        
                         var tableList = document.querySelectorAll('[data-toggle="table-data"]');
                         $.each(tableList, function (i, v) {
                             var data = $(v).data()
                             new tableData().render(v, data);//必须要重新渲染，不然页面显示不出来
                         });
                          //赋值其他的选项
                         $("input[name='sales']").val(dataItem.sales);
                         $("input[name='virtual_sales']").val(dataItem.virtual_sales);
                         $("input[name='stock']").val(dataItem.stock);
                         $("input[name='total_stock']").val(dataItem.total_stock);
                         $("input[name='sort']").val(dataItem.sort);
                    }
                    
                });
                this.$forceUpdate();
                layer.close(index);
            }

        },
        end: function () {
            index = null;
            window[options.selectConfirmCallback] = undefined;
        }
    });

},

同时商品标签点击x 时也要重置对应的值，因此也要修改 removeItem 方法，

removeItem(item, index) {
    this.listSelected.splice(index, 1);
    //店铺删除添加的商品时，重置值
    if(options.selectConfirmCallback=='selectGoogsCallBack'){
        $("input[name='sales']").val("0");
        $("input[name='virtual_sales']").val("0");
        $("input[name='stock']").val("0");
        $("input[name='total_stock']").val("0");
        $("input[name='sort']").val("0");
        var htmlStr='<div data-toggle="table-data" data-index="/index.php/admin/mall.tag/index" data-select-type="checkbox" data-select-value="" data-value-field="id" data-name="tag" data-field-name="title"data-required="1"></div>';
        $("#mall_goods_tag").html(htmlStr);
        
         var tableList = document.querySelectorAll('[data-toggle="table-data"]');
         $.each(tableList, function (i, v) {
             var data = $(v).data()
             new tableData().render(v, data);//重新渲染
         });
    }
    
}