|
@@ -0,0 +1,306 @@
|
|
|
+<%@ 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>
|
|
|
+ .iconBox{
|
|
|
+ font-size: 0;
|
|
|
+ }
|
|
|
+ .controls .conList{
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .conList .btn:nth-of-type(1){
|
|
|
+ margin-left: 25px;
|
|
|
+ }
|
|
|
+ .select2-choice{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .upload-content {
|
|
|
+ margin-top: -70px;
|
|
|
+ }
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) {
|
|
|
+ width: 90px;
|
|
|
+ height: 100px;
|
|
|
+ border: 2px solid #eee;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .upload-content .conList .btn:nth-of-type(1)>div {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) span {
|
|
|
+ font-size: 35px;
|
|
|
+ }
|
|
|
+ .upload-content .conList .btn:nth-of-type(1) h5 {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .cancel-upload {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ box-shadow: none;
|
|
|
+ position: relative;
|
|
|
+ top: -38px;
|
|
|
+ left: -25px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 100;
|
|
|
+ }
|
|
|
+ .upload-content .conList ol li {
|
|
|
+ width: 114px;
|
|
|
+ min-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: 120px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ .hide-pic {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script type="text/javascript">
|
|
|
+ $(document).ready(function() {
|
|
|
+ //$("#name").focus();
|
|
|
+ $("#inputForm").validate({
|
|
|
+ submitHandler: function(form){
|
|
|
+ var infoType = $("input[name='infoType']:checked").val();
|
|
|
+ if (infoType == 2) {
|
|
|
+ $("#productId").val('');
|
|
|
+ }else if ($("#productId").val() == '') {
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <ul class="nav nav-tabs">
|
|
|
+ <li><a href="${ctx}/archive/cmProductArchive/">商品资料列表</a></li>
|
|
|
+ <li class="active"><a href="${ctx}/archive/cmProductArchive/form?id=${cmProductArchive.id}">商品资料${not empty cmProductArchive.id?'编辑':'添加'}</a></li>
|
|
|
+ </ul><br/>
|
|
|
+ <form:form id="inputForm" modelAttribute="cmProductArchive" action="${ctx}/archive/cmProductArchive/save" method="post" class="form-horizontal">
|
|
|
+ <form:hidden path="id"/>
|
|
|
+ <form:hidden path="existProductType" />
|
|
|
+ <sys:message content="${message}"/>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">商品信息:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <input type="radio" name="infoType" value="1" ${empty cmProductArchive.id ? "checked" :(not empty cmProductArchive.productId ? "checked" : "")} />商品库获取
|
|
|
+ <input type="radio" name="infoType" value="2" ${(not empty cmProductArchive.id && empty cmProductArchive.productId) ? "checked" : ""} />自定义
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group auto">
|
|
|
+ <div class="controls">
|
|
|
+ <img id="mainImage" src="${cmProductArchive.productImage}" border="none" width="60" height="60"
|
|
|
+ style="${empty cmProductArchive.productImage ? 'display:none':''}" class="productInfo">
|
|
|
+ <font id="productName" class="productInfo">${cmProductArchive.productName}</font>
|
|
|
+ <a href="JavaScript:;" onclick="showSelect()">选择商品</a>
|
|
|
+ <input type="hidden" name="productId" id="productId" value="${cmProductArchive.productId}">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group custom">
|
|
|
+ <label class="control-label"><font color="red">*</font>商品名称:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="productName" htmlEscape="false" maxlength="50" class="input-xlarge required" placeholder="输入或选择商品" style="position:relative"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group custom">
|
|
|
+ <label class="control-label">商品图片:</label>
|
|
|
+ <div class="controls upload-content iconBox" id="productImageBox">
|
|
|
+ <div class="conList">
|
|
|
+ <form:hidden id="pImage" path="productImage" htmlEscape="false"
|
|
|
+ maxlength="255"
|
|
|
+ class="input-xlarge required"/>
|
|
|
+ <sys:ckfinder input="pImage" type="images" uploadPath="/photo"
|
|
|
+ selectMultiple="false"
|
|
|
+ maxWidth="100" maxHeight="100"/><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group custom">
|
|
|
+ <label class="control-label"><font color="red">*</font>供应商名称:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:input path="shopName" htmlEscape="false" maxlength="50" class="input-xlarge required"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">资料等级:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="archiveLevel" class="input-medium ">
|
|
|
+ <form:option value="1" label="一类资料"/>
|
|
|
+ <form:option value="2" label="二类资料"/>
|
|
|
+ <form:option value="3" label="三类资料"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group custom productType">
|
|
|
+ <label class="control-label">商品属性:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="productType" class="input-medium ">
|
|
|
+ <form:option value="1" label="产品"/>
|
|
|
+ <form:option value="2" label="仪器"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="control-group">
|
|
|
+ <label class="control-label">商品分类:</label>
|
|
|
+ <div class="controls">
|
|
|
+ <form:select path="productClassify" class="input-medium ">
|
|
|
+ <form:option value="2" label="生美"/>
|
|
|
+ <form:option value="1" label="医美"/>
|
|
|
+ </form:select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-actions">
|
|
|
+ <input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>
|
|
|
+ <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
|
|
|
+ </div>
|
|
|
+ </form:form>
|
|
|
+<script>
|
|
|
+ $(function () {
|
|
|
+ showInfo();
|
|
|
+ $('.upload-content .conList .btn:nth-of-type(1)').html('<div><span>+</span><h5>选择图片</h5></div>');
|
|
|
+ $('.upload-content .conList .btn:nth-of-type(2)').after('<img class="cancel-upload" src="/static/images/close-btn1.png">').remove();
|
|
|
+ $('.upload-content .conList').find('.cancel-upload').hide();
|
|
|
+ var observeEle = document.getElementsByClassName('upload-content')[0];
|
|
|
+ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
|
|
|
+ var MutationObserverConfig = {
|
|
|
+ childList: true,
|
|
|
+ subtree: true,
|
|
|
+ characterData: true
|
|
|
+ };
|
|
|
+ var observer = new MutationObserver(function (mutations) {
|
|
|
+ $.each(mutations, function (index, item) {
|
|
|
+ if (item.type === 'childList') {
|
|
|
+ // 在创建新的 element 时调用
|
|
|
+ var target = $(item.target),
|
|
|
+ thisWrapper = target.closest('.conList'),
|
|
|
+ nextEle = thisWrapper.next();
|
|
|
+ thisWrapper.find('li').css('z-index', 99);
|
|
|
+ thisWrapper.find('.cancel-upload').show();
|
|
|
+ if (nextEle.hasClass('hide-pic')) {
|
|
|
+ nextEle.removeClass('hide-pic');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ observer.observe(observeEle, MutationObserverConfig);
|
|
|
+
|
|
|
+ $('body').on('click', '.cancel-upload', function () {
|
|
|
+ var wrapper = $(this).closest('.conList');
|
|
|
+ wrapper.find('li').css('z-index', '-1');
|
|
|
+ wrapper.find('input').val('');
|
|
|
+ $(this).hide();
|
|
|
+ wrapper.removeClass("hide-pic");
|
|
|
+ wrapper.parent().append(wrapper.clone());
|
|
|
+ wrapper.remove();
|
|
|
+ $(".conList").each(function (i, ele) {
|
|
|
+ if ($(ele).find("input.input-xlarge").val()) {
|
|
|
+ $(ele).next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+ $(window).on("load", function () {
|
|
|
+ setTimeout(function () {
|
|
|
+ $("#productImageBox").find("input.input-xlarge").each(function (i, ele) {
|
|
|
+ if ($(ele).val()) {
|
|
|
+ $(ele).next().find("li").css("z-index", "99");
|
|
|
+ $(ele).parents(".conList").find(".cancel-upload").show();
|
|
|
+ $(ele).parents(".conList").next().removeClass("hide-pic")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ $("input[name='infoType']").change(function () {
|
|
|
+ showInfo();
|
|
|
+ })
|
|
|
+
|
|
|
+ // 展示表单信息
|
|
|
+ function showInfo() {
|
|
|
+ var infoType = $("input[name='infoType']:checked").val();
|
|
|
+ if (infoType == 2) {
|
|
|
+ $(".auto").hide();
|
|
|
+ $(".custom").show();
|
|
|
+ $(".productInfo").show();
|
|
|
+ } else {
|
|
|
+ $(".auto").show();
|
|
|
+ $(".custom").hide();
|
|
|
+ if ($("#productId").val() == '') {
|
|
|
+ $(".productInfo").hide();
|
|
|
+ }
|
|
|
+ if ($("#existProductType").val() == 0) {
|
|
|
+ $(".productType").show();
|
|
|
+ } else {
|
|
|
+ $(".productType").hide();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //选择添加商品
|
|
|
+ function showSelect() {
|
|
|
+ var url = '';
|
|
|
+ var title = '';
|
|
|
+ url = "${ctx}/archive/cmProductArchive/findProductPage";
|
|
|
+ title = "选择商品";
|
|
|
+ top.$.jBox("iframe:" + url, {
|
|
|
+ iframeScrolling: 'yes',
|
|
|
+ width: $(top.document).width() - 600,
|
|
|
+ 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');
|
|
|
+ if ('1' == v && 1 == $jboxFrame.size() && 1 == $mainFrame.size()) {
|
|
|
+ var items = $jboxFrame[0].contentWindow.getCheckedItems(0);
|
|
|
+ if (items.length > 0) {
|
|
|
+ console.log(items)
|
|
|
+ var productId = items[0].productId;
|
|
|
+ var mainImage = items[0].mainImage;
|
|
|
+ var productName = items[0].productName;
|
|
|
+ var productType = items[0].commodityType;
|
|
|
+ $("#mainImage").attr("src", mainImage).show();
|
|
|
+ $("#productName").text(productName);
|
|
|
+ $("#productId").val(productId);
|
|
|
+ $("#name").val(productName);
|
|
|
+ $(".productInfo").show();
|
|
|
+ if ('' == productType ) {
|
|
|
+ $(".productType").show();
|
|
|
+ }else {
|
|
|
+ $(".productType").hide();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ top.$.jBox.tip("请先勾选商品...");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|