OMS/app/ome/view/admin/goods/specification/detail.html

<!--
  Copyright © ShopeX （http://www.shopex.cn）. All rights reserved.
  See LICENSE file for license details.
-->

<{capture name="header"}>
<{css src="style.css" app="ome"}>
<{/capture}>
<h5 class="head-title">新建/编辑规格</h5>
<form id="specForm" action="index.php?app=ome&ctl=admin_specification&act=save" method="POST">
  <input type="hidden" name="spec[spec_id]" value="<{$spec.spec_id}>">
  <div class="tableform">
    <div class="division">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <th><{t}>规格名称：<{/t}></th>
          <td><{input type="text" name="spec[spec_name]" vtype="required" value=$spec.spec_name  maxlength='20'}>*</td>
        </tr>
        <tr>
          <th><{t}>规格别名：<{/t}></th>
          <td><{input type="text" name="spec[alias]" value=$spec.alias size="30" }> 用 | 分割</td>
        </tr>
        <tr>
          <th><{t}>规格备注：<{/t}></th>
          <td><{input type="text" name="spec[spec_memo]" value=$spec.spec_memo size="60" }></td>
        </tr>

        <tr style="display:none;">
          <th><{t}>显示类型：<{/t}></th>
          <td>
            <div class='spec_type'>
              <label><input type="radio" name="spec[spec_type]" value="text" checked/><{t}>文字<{/t}></label> &nbsp; &nbsp;
              <label><input type="radio" name="spec[spec_type]" value="img" /><{t}>图片<{/t}></label>
            </div>
          </td>
        </tr>
        <tr style="display:none;">
          <th><{t}>显示方式：<{/t}></th>
          <td>
            <div class='spec_show_type'>
              <label><input type="radio" name="spec[spec_show_type]" value="flat" checked/><{t}>平铺显示<{/t}></label> &nbsp; &nbsp;
              <label><input type="radio" name="spec[spec_show_type]" value="select" /><{t}>下拉显示<{/t}></label>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="division">
      <div class="gridlist-action">
        规格值名称：<{input type="text" size="20" id="ipt_spec_value"}> 规格值别名：<{input type="text" size="20" id="ipt_alias"}><{button label="添加规格值" class="addspec" id="addspec" icon="btn_add.gif" app="desktop"}><span class="notice-inline"></span>
      </div>

      <table border="0" cellspacing="0" cellpadding="0" class="gridlist sepc_value_table <{$spec.spec_type|default:'text'}>-spec-value-table">
        <caption>↓拖动可以排序</caption>
        <thead>
          <tr>
            <th style="width:30px" title="拖动可以排序">拖动</th>
            <th><{t}>规格值名称<{/t}></th>
            <th><{t}>规格值别名<{/t}></th>
            <th class='simg-col'><span><{t}>规格图片<{/t}></span></th>
            <th style="width:30px;"><{t}>操作<{/t}></th>
          </tr>
        </thead>
      </table>
      <div class="sepc_value_table <{$spec.spec_type|default:'text'}>-spec-value-table" id="spec_body">
        <{foreach from=$spec.spec_value item=items key=key}>
        <table class="gridlist" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td style="width:30px;" class="move-handler" title="拖动可以排序"><{img src="bundle/grippy.gif" app="desktop"}></td>
            <td><{input type="text" name="spec[spec_value][{$key}][spec_value]" value=$items.spec_value maxlength='20' vtype='required'}></td>
            <td><{input type="text" name="spec[spec_value][{$key}][alias]" value=$items.alias}></td>
            <td class='simg-col'>
              <span>
                <{assign var='name_spec_image' value="spec[spec_value][{$key}][spec_image]"}>
                <span style="" class='edit sel_image'><{input type='image' name=$name_spec_image value=$items.spec_image}></span>
              </span>
            </td>
            <td style="width:30px;">
              <input type='hidden' name='spec[spec_value][<{$key}>][spec_value_id]' class='spec-value-id' value='<{$items.spec_value_id}>'/>
              <!-- <{img app=desktop src='bundle/icon_asc.gif' class='asc'  title='向上移动' style="cursor:pointer;"}> &nbsp; &nbsp;
               <{img app=desktop src='bundle/icon_desc.gif' class='desc' title='向下移动' style="cursor:pointer;"}> &nbsp; &nbsp;  -->
              <{img app=desktop src='bundle/delete.gif' class='delete' title='删除' style="cursor:pointer;" }>
            </td>
          </tr>
        </table>
        <{/foreach}>
      </div>
    </div>
  </div>

  <div class="table-action">
    <{button label="保存" type="submit" class="btn-primary" id="btn-submit"}>
    <{button label="关闭" class="btn-secondary" onclick="window.close();"}>
  </div>
</form>
<script>
  (function(){
    new Sortables($('spec_body'),{clone:true,opacity:.5,handle:'.move-handler',onStart:function(){
        $('spec_body').addClass('move-active');
      },onComplete:function(){
        $('spec_body').removeClass('move-active');
      }
    });

    $('specForm').store('target',{
      onRequest:function(){
        $('btn-submit').set('disabled', 'true');
      },
      onComplete:function(jsontext){
        var json = Json.evaluate(jsontext);
        if (typeof(json.error) != 'undefined'){
          $('btn-submit').set('disabled', '');
        }else{
          $('btn-submit').set('disabled', 'true');
          opener.finderGroup['<{$env.get.finder_id}>'].refresh.delay(400,opener.finderGroup['<{$env.get.finder_id}>']);
          window.close();
        }
      }
    });

    var new_spec_item = 0;
    var spec_image_width = '<{$width}>';
    var spec_image_height = '<{$height}>';

    var specForm=$('specForm');
    var radio_spec_type=$$("#specForm input[name^=spec[spec_type]");
    var radio_spec_show_type=$$("#specForm input[name^=spec[spec_show_type]");
    var table_spec_value=$ES("#specForm .sepc_value_table");

    radio_spec_type.addEvent('click',function(e){
      var clazz=this.value+'-spec-value-table';
      /*
      if(table_spec_value.hasClass(clazz)){
        return;
      }
      */
      if(this.value=='text'){
        specForm.getElements('.simg-col').hide();
        table_spec_value.removeClass('image-spec-value-table');
        table_spec_value.addClass('text-spec-value-table');
      }else{
        specForm.getElements('.simg-col').show().setStyles({width:$E("#specForm .sepc_value_table .simg-col").offsetWidth,padding:0});
        table_spec_value.removeClass('text-spec-value-table');
        table_spec_value.addClass('image-spec-value-table');
      }
    });

    var bindEditEvent=function(row){
      var sel_image=row.getElement('span.sel_image');
      /* var asc=row.getElement('img.asc');
      var desc=row.getElement('img.desc'); */
      var del=row.getElement('img.delete');

      /*asc.addEvent('click',function(){
        var pre=row.getPrevious('tr');
        if(pre){
          row.injectBefore(pre);
        }
      });
      desc.addEvent('click',function(){
        var next=row.getNext('tr');
        if(next){
          row.injectAfter(next);
        }
      });*/

      if(del) del.addEvent('click',function(){
        if(!this.getParent('td').getElement('.spec-value-id')){
          if(confirm('删除后不可恢复，确认删除本行吗？')){
            row.remove();
          }
          return;
        };
        var specvid=this.getParent('td').getElement('.spec-value-id').get('value');
        if(confirm('删除后不可恢复，确认删除本行吗？')){
          new Request({url:'index.php?app=ome&ctl=admin_specification&act=check_spec_value_id',method:'post',data:'spec_value_id='+encodeURIComponent(specvid),
            onSuccess:function(re){
              if(re=='can'){
                row.remove();
              }else{
                MessageBox.error(re);
              }

            }
          }).send();

        }
      });

    };

    var IMP_UPLOAD_TMPL = '<{input type="image" name="{img_upload_name}" width=40 height=40}>';

    var getTemp = function(i,v){
      return '<tbody><tr><td style="width:30px" class="move-handler" title="拖动可以排序"><{img src="bundle/grippy.gif" app="desktop"}></td>'+
      '<td><{input type="text" name="spec[spec_value][new_'+i+'][spec_value]" value="'+v[0]+'" maxlength="20" vtype="required"}></td>'+
      '<td><{input type="text" name="spec[spec_value][new_'+i+'][alias]" value="'+v[1]+'"}></td>'+
      '<td class="simg-col">'+IMP_UPLOAD_TMPL.replace('{img_upload_name}','spec[spec_value][new_'+i+'][spec_image]')+' </td>'+
      '<td style="width:30px"><input type="hidden" name="spec[spec_value][new_'+i+'][spec_value_id]" value=""/><!--<{img app=desktop src="bundle/icon_asc.gif" class="asc" title="向上移动" style="cursor:pointer;"}> &nbsp; &nbsp; <{img app=desktop src="bundle/icon_desc.gif" class="desc" title="向下移动" style="cursor:pointer;"}> &nbsp; &nbsp; --><{img app=desktop src="bundle/delete.gif" class="delete" title="删除" style="cursor:pointer;" }></td></tr></tbody>';
    };

    $('addspec').addEvent('click',function(e){
      var newRow=new Element('table.gridlist[border=0][cellpadding=0][cellspacing=0]',{html:getTemp(new_spec_item++,[$('ipt_spec_value').value,$('ipt_alias').value])}).inject($('spec_body'),'top');
      if($E("#specForm .sepc_value_table").hasClass('text-spec-value-table')){
        newRow.getElement('.simg-col').hide();
      }else{
      newRow.getElement('.simg-col').show().setStyles({width:$E("#specForm .sepc_value_table .simg-col").offsetWidth,padding:0});
      }

      new Sortables($('spec_body'),{clone:true,opacity:.5,handle:'.move-handler',onStart:function(){
          $('spec_body').addClass('move-active');
        },onComplete:function(){
          $('spec_body').removeClass('move-active');
        }
      });

      bindEditEvent(newRow);
    });

    /*初始化规格设置项RADIO,VALUE*/

    $E('#specForm input[value=<{$spec.spec_type|default:'text'}>]').set('checked',true).fireEvent('click');
    $E('#specForm input[value=<{$spec.spec_show_type|default:'flat'}>]').set('checked',true);
    $ES('table',table_spec_value).each(bindEditEvent);
  })();
</script>