ziqim/Yangcai365_web/manage/zview/template/inner/newMyTemplate.zml

<script>
var sizeMap = new Map();
var typeMap = new Z.HashMap();
Z.onload(function()
{
    var data = Z.J.toObject('${sizeMap}');
    for(var key in data)
    {
        sizeMap.set(key, data[key]);
    }
    
    Z("#typeData .z-active")[0].click();    //默认触发第一条click
    
    var typeList = Z.J.toObject('${typeList}');
    for (var i = 0; i < typeList.length; i++)
    {
        var type = typeList[i];
        typeMap.put(''+type.typeId, type);
    }
});

function doSubmitNewMyTemplate()
{
    var typeId = Z("#typeId").val();
    var type = typeMap.get(typeId);
    if (Z.V.isEmpty(typeId) || !type)
    {
        Z.alert("请选择正确的类型");
        return;
    }
    
    var width = parseFloat(Z("#width").val() || 0);
    var height = parseFloat(Z("#height").val() || 0);
    var sizeBleed = parseFloat(Z("#sizeBleed").val() || 0);
    var baseWidthMm = type.sizeMWidth;
    var baseHeightMm = type.sizeMHeight;
    if (width <=0 || height <= 0)
    {
        Z.alert("请输入设计尺寸");
        return;
    }
    
    // pvc名片不补位特殊流程
    if(typeId == "1806070857392601" || typeId == "1807131630136416"){
    	if(width == "87" && height == "50"){
	    	baseWidthMm = 90;
	    	baseHeightMm = 53;
	    	sizeBleed = 3;
    	} else if(width == "85" && height == "54") {
	    	baseWidthMm = 88.5;
	    	baseHeightMm = 57;
	    	width = 85;
	    	height = 53.5;
	    	sizeBleed = 3.5;
    	} else {
    		baseWidthMm = 88.5;
	    	baseHeightMm = 57;
	    	sizeBleed = 3.5;
    	}
    }
    
    // 添加 2mm 出血长度
    width += sizeBleed;
    height += sizeBleed;
    
    if (!type.sizeMWidth || !type.sizeMHeight)
    {
        Z.alert("模位尺寸不正确，请联系管理员");
        return;
    }
    
    function getAreaTimes(widthMm, heightMm)
    {
        var fullWidthMm = baseWidthMm * Math.ceil(widthMm / baseWidthMm);
        var fullHeightMm = baseHeightMm * Math.ceil(heightMm / baseHeightMm);
        return fullWidthMm * fullHeightMm;
    }

    // 切换横竖版，减少用纸单位
    if (getAreaTimes(height, width) < getAreaTimes(width, height))
    {
        // width、height 对调
        var setWidth = width;
        width = height;
        height = setWidth;
    }
    
    var fullWidth = baseWidthMm * Math.ceil(width / baseWidthMm);
    var fullHeight = baseHeightMm * Math.ceil(height / baseHeightMm);

    var templateType = Z("#templateType").val();
    var oddEven = Z("#oddEven").val();
    var pageValue = document.getElementById("pageValues") == null ? Z("#pageValue").val() : document.getElementById("pageValues").value;
    var templateName = "";
    if(document.getElementById("templateName"))
    {
        templateName = document.getElementById("templateName").value;
    }
    //创建新的我的模板
    var ajax = new Z.Ajax();
    ajax.setClassName("TemplatePresenter");
    ajax.setMethodName("doCreateMyTemplate");
    ajax.addParam("typeId", typeId);
    ajax.addParam("baseWidthMm", baseWidthMm);
    ajax.addParam("baseHeightMm", baseHeightMm);
    ajax.addParam("width", width);
    ajax.addParam("height", height);
    ajax.addParam("fullWidth", fullWidth);
    ajax.addParam("fullHeight", fullHeight);
    ajax.addParam("sizeBleed", sizeBleed);
    ajax.addParam("pageValue", pageValue);
    ajax.addParam("createMode", 0);
    ajax.addParam("isModify", false);
    ajax.addParam("createChannel", templateType == 1 ? "out_draft" : "platform_design");
    ajax.addParam("oddEven", oddEven);
    ajax.addParam("templateName", templateName);
    ajax.setFailureAlert();
    ajax.setSuccess(function(){
        var mediaId = this.responseText;
        if(templateType == 2){
            var newLink = "/zhiqimMediaEditor/mediaDesign.htm?";
            newLink += "mediaId=" + mediaId + "&";
            newLink += "designWidth=" + baseWidthMm + "&";
            newLink += "designHeight=" + baseHeightMm + "&";
            newLink += "bleedSize=" + sizeBleed + "&isTemplateEdit=true";
            window.open(newLink);
            parent.location.reload();
        }else{
            window.parent.externalDraftUpload("newTemplate",type.typeName); 
            parent.Z.Dialog.close();
        }
    });
    ajax.execute();
}

function doSelDesignType(typeId,typeName)
{//选择类型
    var list = sizeMap.get("" + typeId) || [];
    var html = '';
    var typeHtml = '';
    var width = 0, height = 0, bleedSize;
    for(var i=0; i < list.length;i++)
    {
        bleedSize = list[i].sizeBleed;
        width = list[i].sizeWidth - bleedSize;
        height = list[i].sizeHeight - bleedSize;
        
        html += '<button type="button" data-sizeWidth="' + width + '"data-sizeHeight="' + height + '"data-sizeBleed="' + bleedSize;
        html += '" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-mg-r5" onclick="doSelSize(this);">' + width + "X" + height + '</button>';
    }
    
    var defaultBleedSize = list[0] ? list[0].sizeBleed : 2;
    html += '<button type="button"  class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-mg-r5" data-sizeBleed="'+defaultBleedSize+'" onclick="doSelSize(this);">自定义</button>'
 
 	if(typeName.indexOf("普通名片") != -1 || typeName.indexOf("代金券") != -1 || typeName.indexOf("彩页") != -1 ){
    	typeHtml += '<button type="button"  data-options="group:templateType" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="doType(this,1);">外部稿件</button>'
    	Z("#templateType").val(1);
    }else {
    	typeHtml += '<button type="button"  data-options="group:templateType" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="doType(this,1);">外部稿件</button>'
    	Z("#templateType").val(1);
    }
 
    Z("#typeId").val(typeId);
    Z("#sizeCont").html(html);
    Z("#typeCont").html(typeHtml);
    
    if (typeName.indexOf("画册") != -1) {
    	var pageValueHtml = "";
    	pageValueHtml += '<button type="button"  class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-mg-r5 z-active" onclick="doSelSize(this);">自定义</button>'
    	pageValueHtml += '<span><input type="number" id="pageValues" name="pageValues" class="z-input z-w70" value="" class="z-mg-r3" maxlength="3" placeholder="P数" data-options="type:Amount2R;paste:true;"></span>'
    	
    	Z("#pageValueTd").html(pageValueHtml);
    
    	var tb = document.getElementById("templateTable");
    	var tbody = document.createElement("tbody");
    	var tr = document.createElement("tr");
    	var td1 = document.createElement("td");
    	var td2 = document.createElement("td");
    	tr.id = "newMyTemplateId";
    	td2.style.float = "left";
    	td2.style.paddingLeft = "6px";
    	td1.innerHTML = "模板版式：";
    	td2.innerHTML = '<button type="button"  data-options="group:oddEven" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="doOddEven(this,0);">横版</button>&nbsp;';
    	td2.innerHTML += '<button type="button"  data-options="group:oddEven" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover" onclick="doOddEven(this,1);">竖版</button>';
    	tr.appendChild(td1);
    	tr.appendChild(td2);
    	tbody.append(tr);
    	tb.appendChild(tbody);
    	
    	var tr2 = document.createElement("tr");
    	var td21 = document.createElement("td");
    	var td22 = document.createElement("td");
    	tr2.id = "newMyTemplateNameId";
    	td22.style.float = "left";
    	td22.style.paddingLeft = "6px";
    	td21.innerHTML = "模板名称：";
    	td22.innerHTML = '<span><input id="templateName" name="templateName" type="test" placeholder="模板画册名称" class="z-input z-w300 z-mg-r3" value="" data-options="type:Amount2R;paste:true;"></span>';
    	tr2.appendChild(td21);
    	tr2.appendChild(td22);
    	tbody.append(tr2);
    	tb.appendChild(tbody);
    }else {
    	var allTemplateTr = document.getElementById("newMyTemplateId");
		if (allTemplateTr != null){
			var tb = document.getElementById("templateTable");
			tb.deleteRow(3);//注意：添加行可能需要修改
			tb.deleteRow(3);
		}
		var pageValueHtml = "";
		pageValueHtml += '<button type="button"  data-options="group:pageValue" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover" onclick="doPageValues(this,1)">单面</button>&nbsp;';
        pageValueHtml += '<button type="button"  data-options="group:pageValue" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="doPageValues(this,2)">双面</button>';
		Z("#pageValueTd").html(pageValueHtml);
    }

    Z("#sizeCont button")[0].click();   //默认触发第一条click
}

function doPageValues(ele,pageValue){
	Z("#pageValue").val(pageValue);
	Z(ele).addClass('z-active').siblings("button").removeClass("z-active");
}

function doOddEven(ele,oddEvenId){
	Z("#oddEven").val(oddEvenId);
	Z(ele).addClass('z-active').siblings("button").removeClass("z-active");
}

function doType(ele,createChannelId) {
	Z("#templateType").val(createChannelId);
	Z(ele).addClass('z-active').siblings("button").removeClass("z-active");
}

function doSelSize(ele)
{//选择尺寸
    Z(ele).addClass('z-active').siblings("button").removeClass("z-active");
    
    Z("#width").val(Z(ele).attr("data-sizeWidth") || "");
    Z("#height").val(Z(ele).attr("data-sizeHeight") || "");
    Z("#sizeBleed").val(Z(ele).attr("data-sizeBleed") || 2);
}

function diyCardSize()
{
    var width = parseFloat(Z("#width").val() || 0);
    var height = parseFloat(Z("#height").val() || 0);
    var $$btn = Z("#sizeCont button");
    var $btnDiy = Z($$btn[$$btn.length-1]);
    
    var flag = false;
    if (width > 0 || height > 0)
    {
         for (var i = 0; i< $$btn.length-1; i++)
         {
             var btn = $$btn[i];
             var sizeWidth = Z(btn).attr("data-sizeWidth");
             var sizeHeight = Z(btn).attr("data-sizeHeight");
             if (width == sizeWidth && height == sizeHeight)
             {
                btn.click();
                flag = true;
                break;
             }
         }
    }
    
    if (!flag)
    {
        $btnDiy.addClass('z-active').siblings("button").removeClass("z-active");
        Z("#sizeBleed").val($btnDiy.attr("data-sizeBleed") || 2);
    }
}
    
</script>
<div class="content">
<form id="theForm" name="theForm" style="overflow: scroll;height:420px;padding-bottom: 20px;">
<input type="hidden" name="mediaId" id="mediaId" value="">
<input type="hidden" name="typeId" id="typeId" value="">
<input type="hidden" name="sizeBleed" id="sizeBleed" value="2">
<input type="hidden" name="pageValue" id="pageValue" value="2">
<input type="hidden" name="templateType" id="templateType" value="2">
<input type="hidden" name="oddEven" id="oddEven" value="0">

<table id="templateTable" class="z-table z-pd6 z-bg-white z-text-center">
<tr class="z-h50">  
    <td width="100">产品类型：</td>
    <td width="*%" align="left" id="typeData">
         <#for item : DesignTypeDao.listTemmplate()>
            <button type="button"  data-options="group:typeId" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover <#if item_index == 0>z-active</#if>" onclick="{Z(this).toggleClass('z-active');doSelDesignType('${item.getTypeId()}','${item.getTypeName()}')};">${item.getTypeName()}</button>
        </#for>
    </td>
</tr>
<tr class="z-h50">
    <td>设计面数：</td>
    <td align="left" id="pageValueTd">
        <button type="button"  data-options="group:pageValue" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover" onclick="{Z(this).toggleClass('z-active');Z('#pageValue').val(1);};">单面</button>
        <button type="button"  data-options="group:pageValue" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="{Z(this).toggleClass('z-active');Z('#pageValue').val(2);};">双面</button>
    </td>
</tr>
<tr class="z-h50">
    <td>设计尺寸：</td>
    <td align="left">
    <span class="z-w100p"  id="sizeCont">
        <button type="button"  class="z-button z-large z-bordered z-blue-bd z-mg-t3" onclick="doSelSize(this);">自定义</button>
    </span>
    <span class="z-w200" >
        <input type="text" id="width" name="width" class="z-input z-w70 ${zmr_color_class}" oninput="diyCardSize();" value="" class="z-mg-r3" maxlength="8" placeholder="宽度" data-options="type:Amount2R;paste:true;">&nbsp;X&nbsp;
        <input type="text" id="height" name="height" class="z-input z-w70 ${zmr_color_class}" oninput="diyCardSize();" value="" class="z-mg-r3" maxlength="8" placeholder="高度" data-options="type:Amount2R;paste:true;">&nbsp;mm
    </span>
    </td>
</tr>
</table>
<table class="z-table z-pd6 z-bg-white z-text-center">
<tr class="z-h50">
    <td width="100">模板类型：</td>
    <td align="left" id="typeCont">
        <!--<button type="button"  data-options="group:templateType" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover" onclick="{Z(this).toggleClass('z-active');Z('#templateType').val(1);};">外部稿件</button>
        <button type="button"  data-options="group:templateType" class="z-button z-large z-bordered z-blue-bd z-mg-t3 z-hover z-active" onclick="{Z(this).toggleClass('z-active');Z('#templateType').val(2);};">平台设计</button>-->
    </td>
</tr>
</table>
</form>

<div class="z-bg-gray z-absolute z-w100p z-h80 z-text-center z-pd20" style="bottom:0;">
    <button type="button" class="z-button z-large z-w100 z-blue" onclick="doSubmitNewMyTemplate();">确定</button>
    <button type="button" class="z-button z-large z-w100 z-mg-l10"  onclick="parent.Z.Dialog.close();">关闭</button>
</div>
</div>