caimei365
/
caimei365-manager


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
							<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>相关商品列管理</title>
    <meta name="decorator" content="default"/>
    <style type="text/css">
        .table th {
            text-align: center;
        }

        .table td {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            //$("#name").focus();
            $("#inputForm").validate({
                submitHandler: function (form) {
                    if (imageList.length > 0) {
                        var stringify = JSON.stringify(imageList);
                        $('#images').val(stringify);
                    } else {
                        alertx("请选择相关图片");
                        return;
                    }
                    loading('正在提交，请稍等...');
                    form.submit();
                },
                errorContainer: "#messageBox",
                errorPlacement: function (error, element) {
                    $("#messageBox").text("输入有误，请先更正。");
                    if (element.is(":checkbox") || element.is(":radio") || element.parent().is(".input-append")) {
                        error.appendTo(element.parent().parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });

        var imageList = [];
        var productIds = '';

        $(function () {
            <c:forEach items="${cmPageCentre.cmImages}" var="image" varStatus="index">
            imageList.push({
                id: "${image.id}",
                productId: "${empty image.productId ? "":image.productId}",
                image: "${image.image}",
                name: "${image.title}",
                link: "${image.link}",
                sort: "${image.sort}",
                pcStatus: "${image.enabledStatus}",
                appletsStatus: "${image.crmEnabledStatus}",
                label: "${image.label}",
                createDate: "${image.createDateStc}"
            });
            </c:forEach>

            if (imageList.length > 0) {
                $('#contentTable').show();
                batchSaveSort();
            }
        });

        //选择框
        function showSelect(url) {
            var title = '';
            title = "图片列表";
            top.$.jBox("iframe:" + url + "&productIds=" + productIds, {
                iframeScrolling: 'yes',
                width: $(top.document).width() - 400,
                height: $(top.document).height() - 160,
                persistent: true,
                title: title,
                buttons: {"确定": '1', "取消": '-1'},
                submit: function (v, h, f) {
                    //确定
                    var $jboxFrame = top.$('#jbox-iframe');
                    var $mainFrame = top.$('#mainFrame');
                    var $isCheckedAll = $jboxFrame[0].contentWindow.handleCheckedAll();
                    if($isCheckedAll){
                        var checkedAllList = $jboxFrame[0].contentWindow.handleClickAllSelect();
                        imageList = imageList.concat(checkedAllList);
                        $('#contentTable').show();
                        $("#del").removeAttr("disabled");
                        batchSaveSort();
                    }else{
                        if ('1' == v && 1 == $jboxFrame.size() && 1 == $mainFrame.size()) {
                            var items = $jboxFrame[0].contentWindow.getCheckedItems();
                            for (var i = 0; i < items.length; i++) {
                                if (items[i].productId == "") {
                                    if (items[i].image == '') {
                                        alertx("请上传图片");
                                        return false;
                                    }
                                    if (items[i].name == '') {
                                        alertx("请输入名称");
                                        return false;
                                    }
                                    if (items[i].link == '') {
                                        alertx("请输入跳转链接");
                                        return false;
                                    }
                                    if (items[i].sort == '') {
                                        alertx("请输入排序值");
                                        return false;
                                    }
                                    if (items[i].label == '') {
                                        alertx("请输入标签");
                                        return false;
                                    }
                                }
                            }
                            imageList = imageList.concat(items);
                            $('#contentTable').show();
                            $("#del").removeAttr("disabled");
                            batchSaveSort();
                        }
                    };
                    return true;
                }
            });
        }

        //相关图片列表数据
        function appendShopOrderHead(data, index) {
            var html = '<tr id ="ai' + index + '">' +
                '<td>' +
                '<input class="check-item" type="checkbox" name="info" value="' + index + '"/>' + (index + 1) +
                '</td>' +
                '<td>' +
                '<img src="' + data.image + '" width="60px" border="none" title="启用">' +
                '</td>' +
                '<td>' +
                '<input name="name" value="' + data.name + '"  onchange="changeName(' + index + ',this)">' +
                '</td>' +
                '<td>' +
                (data.productId == '' ? (
                    '<input name="links" value="' + data.link + '"  onchange="changeLink(' + index + ',this)">'
                ) : ('------')) +
                '</td>' +
                '<td>' +
                (data.productId == '' ? (
                    '<input name="label" value="' + data.label + '"  onchange="changeLabel(' + index + ',this)">'
                ) : ('------')) +
                '</td>' +
                '<td>' +
                (data.pcStatus == 1 ? (
                    '<font color="green">已启用</font>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:void(0);" onclick="updatePcStatus(0,' + index + ');" >' +
                    '停用</a>'
                ) : (
                    '<font color="red">已停用</font>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:void(0)" onclick="updatePcStatus(1,' + index + ');">' +
                    '启用</a>'
                )) +
                '</td>' +
                '<td>' +
                (data.appletsStatus == 1 ? (
                    '<font color="green">已启用</font>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:void(0);" onclick="updateAppletsStatus(0,' + index + ');" >' +
                    '停用</a>'
                ) : (
                    '<font color="red">已停用</font>&nbsp;&nbsp;&nbsp;' +
                    '<a href="javascript:void(0)" onclick="updateAppletsStatus(1,' + index + ');">' +
                    '启用</a>'
                )) +
                '</td>' +
                '<td>' +
                '<input name="sort" style="width:50px;" value="' + data.sort + '"  onkeyup="onlynum(this)"  onchange="changeSort(' + index + ',this)"></td>' +
                '</td>' +
                '<td>' +
                (data.createDate == '' ? (
                    '<fmt:formatDate value="<%=new Date()%>" pattern="yyyy-MM-dd HH:mm:ss"/>'
                ) : (
                    data.createDate
                )) +
                '</td>' +
                '<td>' +
                '<a href="javascript:;" onclick="delect(' + index + ')">删除</a>' +
                '</td>' +
                '</tr>';
            return html;
        }

        function insertHtml(list) {
            var html = '';
            productIds = '';
            list.forEach(function (item, index) {
                html += appendShopOrderHead(item, index);
                productIds += "," + item.productId;
            });
            $("#hotSearch").html(html);
        }

        /**
         * 一键排序
         */
        function batchSaveSort() {
            imageList.sort(sort);
            insertHtml(imageList);
        }

        //根据sort值 从小到大排序
        function sort(a, b) {
            return a.sort - b.sort;
        }

        /**
         * @param obj
         * jquery控制input只能输入数字
         */
        function onlynum(obj) {
            obj.value = obj.value.replace(/[^\d]/g, ""); //清除"数字"以外的字符
        }

        function changeSort(index, sortThis) {
            var sort = sortThis.value;
            if (sort <= 0) {

            }
            var image = imageList[index];
            image.sort = sort;
        }

        function changeName(index, nameThis) {
            var name = nameThis.value;
            var image = imageList[index];
            image.name = name;
        }

        function changeLink(index, linkThis) {
            var link = linkThis.value;
            var image = imageList[index];
            image.link = link;
        }

        function changeLabel(index, labelThis) {
            var label = labelThis.value;
            var image = imageList[index];
            image.label = label;
        }

        /**
         * 删除操作
         */
        function delect(index) {
            return confirmx("确定删除该图片吗？", function () {
                var image = imageList[index];
                if (image.productId != '') {
                    productIds = productIds.replace(image.productId,"");
                }
                imageList.splice(index, 1);
                insertHtml(imageList);
                if (imageList.length == 0) {
                    $('#contentTable').hide();
                    $("#del").attr("disabled", "disabled");
                }
            });
        }

        /**
         * 批量删除
         */
        function batchDeletion() {
            var index = -1;
            var i = 1;
            return confirmx("确定删除吗？", function () {
                $('input[name="info"]:checked').each(function () {
                    var thisIndex = $(this).val();
                    if (index >= 0 && index < thisIndex) {
                        thisIndex = thisIndex - i;
                        i++;
                    } else {
                        index = thisIndex;
                    }
                    var image = imageList[thisIndex];
                    if (image.productId != '') {
                        productIds = productIds.replace(image.productId, "");
                    }
                    imageList.splice(thisIndex, 1);
                    insertHtml(imageList);
                    if (imageList.length == 0) {
                        $('#contentTable').hide();
                        $("#del").attr("disabled", "disabled");
                    }
                });
            });
        }

        function updatePcStatus(status, index) {
            var image = imageList[index];
            confirmx(status == 0 ? '确定停用吗？' : '确定启用吗？', function () {
                image.pcStatus = status;
                batchSaveSort();
            })
        }

        function updateAppletsStatus(status, index) {
            var image = imageList[index];
            confirmx(status == 0 ? '确定停用吗？' : '确定启用吗？', function () {
                image.appletsStatus = status;
                batchSaveSort();
            })
        }

        function clickAllSelect(ckb) {
            var isChecked = ckb.checked;
            $(".check-item").attr('checked', isChecked);
        }
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li><a href="${ctx}/cmpage/cmPageCentre/?pageId=${cmPageCentre.pageId}&type=${cmPageCentre.type}">相关商品列表</a></li>
    <li class="active"><a
            href="${ctx}/cmpage/cmPageCentre/form?pageId=${cmPageCentre.pageId}&centreId=${cmPageCentre.id}&id=${cmPageCentre.id}&type=${cmPageCentre.type}">相关商品列表${not empty cmPageCentre.id?'编辑':'添加'}</a>
    </li>
</ul>
<br/>
<form:form id="inputForm" modelAttribute="cmPageCentre" action="${ctx}/cmpage/cmPageCentre/save" method="post"
           class="form-horizontal">
    <form:hidden path="id"/>
    <form:hidden path="pageId"/>
    <form:hidden path="type"/>
    <form:hidden path="images" id="images"/>
    <sys:message content="${message}"/>
    <div class="control-group">
        <label class="control-label"><font color="red">*</font> 标题：</label>
        <div class="controls">
            <form:input path="title" htmlEscape="false" maxlength="20" class="input-xlarge required"/>
        </div>
    </div>
    <c:if test="${cmPageCentre.type eq 1 }">
        <div class="control-group">
            <label class="control-label">更多链接：</label>
            <div class="controls">
                <form:input path="link" htmlEscape="false" maxlength="255" class="input-xlarge"/>
            </div>
        </div>
    </c:if>
    <div class="control-group">
        <label class="control-label"><font color="red">*</font> 排序：</label>
        <div class="controls">
            <form:input path="sort" htmlEscape="false" maxlength="11" class="input-xlarge required digits"
                        value="${empty cmPageCentre.sort?0:(cmPageCentre.sort) }"/>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">移动端状态：</label>
        <div class="controls">
            <form:select path="crmEnabledStatus" class="input-xlarge ">
                <form:options items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value"
                              htmlEscape="false" />
            </form:select>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">PC端状态：</label>
        <div class="controls">
            <form:select path="enabledStatus" class="input-xlarge ">
                <form:options items="${fns:getDictList('enabled_status')}" itemLabel="label" itemValue="value"
                              htmlEscape="false" />
            </form:select>
        </div>
    </div>
    <div class="control-group">
        <label><font color="red">*</font>相关图片：</label><br>
        <input class="btn" id="del" style="width: 50px" onclick="batchDeletion()" value="删除"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input class="btn btn-primary" style="width: 70px" onclick="batchSaveSort()" value="一键排序"/>&nbsp;&nbsp;&nbsp;&nbsp;
        <input class="btn btn-primary" style="width: 50px"
               onclick="showSelect('${ctx}/newhome/newPageFloor/addProductImage?productCategory=1')" value="添加"/>
        <br><br>
        <table id="contentTable" class="table table-striped table-bordered table-condensed" hidden="hidden">
            <thead>
            <tr>
                <th style="width:20px;"><input class="check-all" type="checkbox" onclick="clickAllSelect(this)"/> 全选
                </th>
                <th>图片</th>
                <th>名称</th>
                <th>跳转链接</th>
                <th>标签</th>
                <th>网站状态</th>
                <th>小程序状态</th>
                <th>排序</th>
                <th>创建时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="hotSearch"></tbody>
        </table>
    </div>
    <div class="form-actions">
        <shiro:hasPermission name="cmpage:cmPageCentre:edit"><input id="btnSubmit" class="btn btn-primary" type="submit"
                                                                    value="保 存"/>&nbsp;</shiro:hasPermission>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</form:form>
</body>
</html>