@{
    ViewBag.Title = "商品信息";
    Layout = "~/Views/Shared/_LayoutTable.cshtml";
}
<head>
</head>
<style>
    a {
        color:#000000;
    }
    a:hover,a:focus{
        color:#3d84db;
    }
    /*#menu ul li a{
 width:70px;}*/
</style>
<!DOCTYPE html>
<html lang="zh-CN">
<body style="background-color: white">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-md-4" style="margin-top:60px;" id="menu">
                @{
                    if (ViewBag.IsFzLimit)
                    {
                        <div class="form-inline">
                            <input type="text" id="nameornum" class="form-control" style="margin-left:20px;width:200px" placeholder="请输入商品名称/编号" />
                            <button class="btn btn-default" onclick="Search()" style="margin-left:20px;"><i class="glyphicon glyphicon-search"></i>&nbsp;查询</button>
                        </div>
                    }
                }
                <input type="hidden" id="CommodityBtypeid" />
                <div id="isornoptype" style="margin-top:100px;display:none">
                    <strong style="color:rgb(255, 0, 0);font-size:15px;">没有找到任何商品。</strong>
                </div>
                <ul id="demo1" style="margin: 20px; overflow-y: auto;height: 550px;background-color:rgb(248, 248, 248);border-radius:10px"></ul>
            </div>
            <div class="col-md-8" style="margin-top:60px">
                <ul class="nav nav-tabs" role="tablist" style="margin-left:15px">
                    <li role="presentation" class="active"><a href="#Commodities" style="font-size: 14px;" onclick="CommoditiesLoad()" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-shopping-cart"></i>商品列表</a></li>
                    <li role="presentation"><a href="#TagsManage" style="font-size: 14px;" onclick="TagsLoad()" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-tags"></i>标签管理</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="Commodities">
                        <div id="toolbar">
                            <button id="btnTagsSetting" class="btn btn-default" onclick="TagsSetting()"><i class="glyphicon glyphicon-tags"></i>&nbsp;设定标签</button>
                            <button id="btnLoadPictures" class="btn btn-default" onclick="LoadPictures()"><i class="glyphicon glyphicon-inbox"></i>&nbsp;图片导入</button>
                        </div>
                        <div class="col-md-12">
                            <table id="CommoditiesTable" data-mobile-responsive="true"></table>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="TagsManage">
                        <button id="btnNewTags" class="btn btn-default" onclick="NewTags()"><i class="glyphicon glyphicon-tags"></i>&nbsp;新增标签</button>
                        <div class="col-md-12">
                            <table id="TagsTable" data-mobile-responsive="true"></table>
                        </div>
                        <input id="hidPtypeid" type="hidden" />
                        <input id="hid1" type="hidden" />
                        <input id="hid2" type="hidden" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            parent.$("#togg").click();
            CommoditiesLoad();
        })
        $.ajax({
            url: "../WLTManage/CommoditiesTreeList",
            dataType: "json",
            data: {},
            type: "post",
            success: function (data) {//删除成功后刷新table
                if (data.length > 0) {
                    layui.use(['tree', 'layer'], function () {
                        var layer = layui.layer
                        , $ = layui.jquery;

                        //生成一个模拟树
                        var createTree = function (node, start) {
                            node = node || function () {
                                var nd = [];
                                for (var i = 0; i < data.length; i++) {
                                    if (data[i].Leveal == 1) {
                                        nd.push(data[i]);
                                    }
                                }
                                return nd;
                            }();
                            start = start || 1;
                            layui.each(node, function (index, item) {
                                var cd = [];
                                for (var i = 0; i < data.length; i++) {
                                    if (data[i].ParID == item.TypeID_) {
                                        cd.push(data[i]);
                                    }
                                }
                                node[index].children = cd;
                                createTree(cd, index + start + 1);
                            });
                            return node;
                        };

                        layui.tree({
                            elem: '#demo1', //指定元素
                            nodes: createTree(),
                            click: function (node) {
                                var parid = node.ParID;
                                var typeid = node.TypeID_;
                                var con = "";
                                if (node.sonnum != "0") {
                                    con = node.sonnum;
                                }
                                $('#CommoditiesTable').bootstrapTable('refresh', {
                                    url: '../WLTManage/GetCommoditiesTableTableList?LoginID=' + '@ViewBag.LoginID' + '&parid=' + parid + '&typeid=' + typeid + '&con=' + con
                                })
                            }
                        });
                    });
                } else {
                    document.getElementById("isornoptype").style.display = "inline";
                }
            },
            error: function (data) {
                layer.msg(data, { time: 2000 });
            },
        })

        function Search() {//查询
            if ($.trim($("#nameornum").val()) =="") {
                layer.msg("请输入商品名称/编号");
            } else {
                $('#CommoditiesTable').bootstrapTable('refresh', {
                    url: '../WLTManage/GetCommoditiesTableTableList?search=' + $.trim($("#nameornum").val())
                })
            }
        }

    function UploadImages(ptypeid) {//图片上传
        layer.open({
            btnClose: 2,
            type: 2,
            title: '<i class="glyphicon glyphicon-picture"></i> 图片上传(最多可上传三张图片)',
            shadeClose: false,
            shade: 0.5,
            area: ['90%', '95%'],
            content: '../WLTManage/UpLoadImages?ptypeid=' + ptypeid,
            end: function () {
                $('#CommoditiesTable').bootstrapTable('refresh');
            }
        });
    }

    function SetStandard(ptypeid, value1, value2) {//设置库存标准
        $("#hidPtypeid").val(ptypeid);
        $("#hid1").val(value1);
        $("#hid2").val(value2);
        layer.open({
            btnClose: 2,
            type: 2,
            title: '设置库存标准',
            shadeClose: false,
            shade: 0.5,
            area: ['30%', '40%'],
            content: '../WLTManage/SetStandard?',
            end: function () {
                $('#CommoditiesTable').bootstrapTable('refresh');
            }
        });
    }

    function LoadPictures() {//图片导入
        $("#CommodityBtypeid").val("");
        layer.open({
            btnClose: 2,
            type: 2,
            title: '<i class="glyphicon glyphicon-inbox"></i> 图片导入',
            shadeClose: false,
            shade: 0.5,
            area: ['70%', '80%'],
            content: '../CommonSelector/CommoditySelectorMore',
            end: function () {
                if ($.trim($("#CommodityBtypeid").val()).length > 0) {
                    $.ajax({
                        url: "../WLTManage/InsertImages",
                        data: {
                            ptypeid: $("#CommodityBtypeid").val()
                        },
                        datatype: "text",
                        type: "post",
                        success: function (data) {
                            if (data == "导入成功！") {
                                layer.msg(data, { time: 2000 });
                                $('#CommoditiesTable').bootstrapTable('refresh');
                            } else {
                                layer.msg(data, { time: 2000 });
                            }
                        }
                    })
                }
            }
        });
    }

    function EditTags(nub, classname, comment) {//编辑标签
        layer.open({
            btnClose: 2,
            type: 2,
            title: '<i class="glyphicon glyphicon-edit"></i> 编辑标签',
            shadeClose: false,
            shade: 0.5,
            area: ['70%', '80%'],
            content: '../WLTManage/UpdateTags?operation=update&nub=' + nub + '&classname=' + classname + '&comment=' + comment,
            end: function () {
            }
        });
    }

    function NewTags() {//新增标签
        layer.open({
            btnClose: 2,
            type: 2,
            title: '<i class="glyphicon glyphicon-plus-sign"></i> 编辑标签',
            shadeClose: false,
            shade: 0.5,
            area: ['70%', '80%'],
            content: '../WLTManage/UpdateTags?operation=new',
            end: function () {
            }
        });
    }

    function DelTags(nub) {//删除标签
        layer.confirm("确认删除？", function (enter) {//删除前提示
            if (enter) {
                $.ajax({
                    url: "../WLTManage/DeleteTags",
                    dataType: "text",
                    data: { nub: nub },
                    type: "post",
                    success: function (data) {//删除成功后刷新table
                        if (data == "删除成功！") {
                            layer.msg(data, { time: 2000 });
                            $('#TagsTable').bootstrapTable("refresh");
                        }
                    },
                    error: function (data) {
                        layer.msg(data, { icon: 5, time: 2000 });
                    },
                })
            }
        })
    }

    function TagsSetting() {//设定标签
        var select = $('#CommoditiesTable').bootstrapTable("getSelections");
        var typeids = "";
        if (select.length <= 0) {
            layer.msg("请选择要设定标签的商品！", { time: 2000 }); return;
        }
        for (var i = 0; i < select.length; i++) {
            if (i == select.length - 1)
            { typeids += "" + select[i].TYPEID_ + ""; }
            else
            { typeids += "" + select[i].TYPEID_ + "" + ","; }
        }
        layer.open({
            btnClose: 2,
            type: 2,
            title: '<i class="glyphicon glyphicon-tags"></i> 设定标签',
            shadeClose: false,
            shade: 0.5,
            area: ['70%', '80%'],
            content: '../CommonSelector/TagSelectorMore?select=' + typeids,
            end: function () {
            }
        });
    }

    function CommoditiesLoad() {
        $('#CommoditiesTable').bootstrapTable({
            url: '../WLTManage/GetCommoditiesTableTableList',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 50],        //可供选择的每页的行数（*）
            minimumCountColumns: 2,  //最少允许的列数
            //height: $(".centerdiv").height() - 42,               //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "",            //每一行的唯一标识，一般为主键列
            clickToSelect: true,              //是否启用点击选中行
            sortable: true,                     //是否启用排序
            silentSort: true,
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            paginationFirstText: '首页',
            paginationLastText: '末页',
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            showColumns: false,            //是否显示所有的列
            showRefresh: false,              //是否显示刷新按钮
            showToggle: false,                     //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            queryParams: function (params) {
                return {
                    pagesize: params.limit,//页面大小
                    page: params.offset //页码
                };
            },//传递参数（*）
            columns: [
                { checkbox: true },
                {
                    field: "USERCODE", title: "商品编号"
                },
                { field: 'TYPEID_', title: 'TYPEID_' },
                { field: 'FULLNAME', title: '名称' },
                { field: 'STANDARD', title: '规格' },
                { field: 'OBLIGATETAG', title: '商品标签' },
                { field: 'HAVESTANDARD', title: '有货库存标准' },
                { field: 'NOSTANDARD', title: '无货库存标准' },
                {
                    field: 'ISIMG', title: '是否有图', formatter: function (value, row, index) {
                        if (value == "有") {
                            return '<a style="color:green">有</a>';
                        } else {
                            return '<a style="color:red">无</a>';
                        }
                    }
                },
                {
                    field: 'SET', title: '设置', formatter: function (value, row, index) {
                        var strhtml = '<button id="btnUpload" class="btn btn-sm" onclick="SetStandard(\'' + row.TYPEID_ + '\',\'' + row.HAVESTANDARD + '\',\'' + row.NOSTANDARD + '\')"> 设置</button>';
                        return strhtml;
                    }
                },
                {
                    field: 'Edit', title: '图片', formatter: function (value, row, index) {
                        var strhtml = '<button id="btnUpload" class="btn btn-sm" onclick="UploadImages(\'' + row.TYPEID_ + '\')"><i class="glyphicon glyphicon-film"></i> 上传图片</button>';
                        return strhtml;
                    }
                }
            ], onLoadSuccess: function () {
                var flag = '@ViewBag.isStockStandards';
                if (flag == "true") {
                    $('#CommoditiesTable').bootstrapTable('showColumn', 'NOSTANDARD');
                    $('#CommoditiesTable').bootstrapTable('showColumn', 'HAVESTANDARD');
                    $('#CommoditiesTable').bootstrapTable('showColumn', 'SET');
                }
                else {
                    $('#CommoditiesTable').bootstrapTable('hideColumn', 'NOSTANDARD');
                    $('#CommoditiesTable').bootstrapTable('hideColumn', 'HAVESTANDARD');
                    $('#CommoditiesTable').bootstrapTable('hideColumn', 'SET');
                }
            }

        });
        $('#CommoditiesTable').bootstrapTable('hideColumn', 'TYPEID_');
    }

    function TagsLoad() {
        $('#TagsTable').bootstrapTable({
            url: '../WLTManage/GetTagsTableList',         //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            toolbar: '#btnNewTags',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            pagination: true,                   //是否显示分页（*）
            sortOrder: "asc",                   //排序方式
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10, 20, 50],        //可供选择的每页的行数（*）
            minimumCountColumns: 2,  //最少允许的列数
            //height: "636",               //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "",            //每一行的唯一标识，一般为主键列
            clickToSelect: true,              //是否启用点击选中行
            sortable: true,                     //是否启用排序
            silentSort: true,
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            paginationFirstText: '首页',
            paginationLastText: '末页',
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            showColumns: false,            //是否显示所有的列
            showRefresh: false,              //是否显示刷新按钮
            showToggle: false,                     //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            queryParams: function (params) {
                return {
                    pagesize: params.limit,//页面大小
                    page: params.offset //页码
                };
            },//传递参数（*）
            columns: [
                { checkbox: true },
                {
                    field: "CLASSNAME", title: "标签名称"
                },
                {
                    field: "NUB", title: "NUB"
                },
                {
                    field: "COMMENT", title: "COMMENT"
                },
                {
                    field: 'EDIT', title: '修改', formatter: function (value, row, index) {
                        var strHtml = '<button id="btnEdit" class="btn btn-sm" onclick="EditTags(\'' + row.NUB + '\',\'' + row.CLASSNAME + '\',\'' + row.COMMENT + '\')"><i class="glyphicon glyphicon-edit"></i> 修改</button>';
                        return strHtml;
                    }
                },
                {
                    field: 'delete', title: '删除', formatter: function (value, row, index) {
                        var strHtml = '<button id="btnDelete" class="btn  btn-sm" onclick="DelTags(\'' + row.NUB + '\')"><i class="glyphicon glyphicon-trash"></i> 删除</button>';
                        return strHtml;
                    }
                }
            ]

        });
        $('#TagsTable').bootstrapTable('hideColumn', 'NUB');
        $('#TagsTable').bootstrapTable('hideColumn', 'COMMENT');
    }
    $(function () {
        //$(window).resize(function () {
        //    $('#TagsTable').bootstrapTable('resetView'); $('#CommoditiesTable').bootstrapTable('resetView');
        //});
    })
    $(function () {
        //$("a").click(function () {
        //    alert("asd");
        //    $(this).addClass("cur").parent().siblings().find("a").removeAttr("class");
        //});
    });
    </script>
</body>
</html>
