227 lines
10 KiB
HTML
Executable File
227 lines
10 KiB
HTML
Executable File
{extend name='public/base' /}
|
|
{block name='content'}
|
|
{include file='public/content_header' /}
|
|
<section class="content">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="box box-primary">
|
|
<!-- 表单头部 -->
|
|
<div class="box-header with-border">
|
|
<div class="btn-group">
|
|
<a class="btn flat btn-sm btn-default BackButton">
|
|
<i class="fa fa-arrow-left"></i>
|
|
返回
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- 表单 -->
|
|
<form id="dataForm" class="form-horizontal dataForm" action="" method="post" enctype="multipart/form-data">
|
|
<!-- 表单字段区域 -->
|
|
<div class="box-body">
|
|
<div class="form-group">
|
|
<label for="name" class="col-sm-2 control-label">栏目名称</label>
|
|
<div class="col-sm-10 col-md-4">
|
|
<input id="name" name="name" value="{$data.name|default=''}" placeholder="请输入栏目名称" type="text" class="form-control field-text">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="type" class="col-sm-2 control-label">显示模式</label>
|
|
<div class="col-sm-10 col-md-4 layui-form">
|
|
<input type="radio" name="type" value="1" title="模式一" {if isset($data.type) && $data.type=='1'}checked{/if}>
|
|
<input type="radio" name="type" value="2" title="模式二" {if isset($data.type) && $data.type=='2'}checked{/if}>
|
|
<input type="radio" name="type" value="3" title="模式三" {if isset($data.type) && $data.type=='3'}checked{/if}>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="goods_ids" class="col-sm-2 control-label">商品列表</label>
|
|
<div class="col-sm-10">
|
|
<table id="dataList" class="table table-hover table-bordered datatable" width="100%">
|
|
<thead>
|
|
<tr class="input-type">
|
|
<th>商品名称</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dataBody">
|
|
{foreach name='goods_ids' key='k' id='item1'}
|
|
<tr>
|
|
<td>
|
|
<label>
|
|
<select style="min-width: 380px;width: 420px;" name="goods_id[{$k}][]" class="select2" data-live-search="true" tabindex="-98">
|
|
{foreach name='goods_list' id='item'}
|
|
<option value="{$item.id}" {if isset($item1) &&
|
|
$item1==$item.id}selected{/if}>
|
|
{$item.name}
|
|
</option>
|
|
{/foreach}
|
|
</select>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<!-- <a class="btn btn-xs btn-primary" onclick="addNewField(this,1)">插入</a> -->
|
|
<a class="btn btn-xs btn-success" onclick="addNewField(this,2)">追加</a>
|
|
<a class="btn btn-xs btn-danger" onclick="delThisField(this,1)">删除</a>
|
|
</td>
|
|
</tr>
|
|
{/foreach}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sort_number" class="col-sm-2 control-label">排序(升序）</label>
|
|
<div class="col-sm-10 col-md-4">
|
|
<input id="sort_number" name="sort_number" value="{$data.sort_number|default='1000'}" placeholder="请输入排序(升序）" type="text" class="form-control field-text">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="status" class="col-sm-2 control-label">是否显示</label>
|
|
<div class="col-sm-10 col-md-4">
|
|
<input class="input-switch" id="status" value="1" {if(!isset($data) ||$data.status==1)}checked{/if} type="checkbox" />
|
|
<input class="switch field-switch" placeholder="是否显示" name="status" value="{$data.status|default='1'}" hidden />
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$('#status').bootstrapSwitch({
|
|
onText: "是",
|
|
offText: "否",
|
|
onColor: "success",
|
|
offColor: "danger",
|
|
onSwitchChange: function (event, state) {
|
|
$(event.target).closest('.bootstrap-switch').next().val(state ? '1' : '0').change();
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
<!-- 表单底部 -->
|
|
<div class="box-footer">
|
|
{:token()}
|
|
<div class="col-sm-2">
|
|
</div>
|
|
<div class="col-sm-10 col-md-4">
|
|
{if !isset($data)}
|
|
<div class="btn-group pull-right">
|
|
<label class="createContinue">
|
|
<input type="checkbox" value="1" id="_create" name="_create"
|
|
title="继续添加数据">继续添加</label>
|
|
</div>
|
|
{/if}
|
|
<div class="btn-group">
|
|
<button type="submit" class="btn flat btn-info dataFormSubmit">
|
|
保存
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="reset" class="btn flat btn-default dataFormReset">
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<table>
|
|
<tbody id="data-template" style="display: none">
|
|
<tr>
|
|
<td>
|
|
<label>
|
|
<select name="goods_idFORM_INDEX[]" style="min-width: 380px;width: 420px;" class="form-control field-select select2" data-placeholder="请选择商品">
|
|
<option value=""></option>
|
|
{foreach name='goods_list' id='item'}
|
|
<option value="{$item.id}">
|
|
{$item.name}
|
|
</option>
|
|
{/foreach}
|
|
</select>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<a class="btn btn-xs btn-success" onclick="addNewField(this,2)">追加</a>
|
|
<a class="btn btn-xs btn-danger" onclick="delThisField(this,1)">删除</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<script>
|
|
/** 表单验证 **/
|
|
$('#dataForm').validate({
|
|
rules: {
|
|
'name': {
|
|
required: true,
|
|
},
|
|
'sort_number': {
|
|
required: true,
|
|
},
|
|
'status': {
|
|
required: true,
|
|
},
|
|
},
|
|
messages: {
|
|
'name': {
|
|
required: "栏目名称不能为空",
|
|
},
|
|
'sort_number': {
|
|
required: "排序(升序）不能为空",
|
|
},
|
|
'status': {
|
|
required: "是否上架不能为空",
|
|
},
|
|
|
|
}
|
|
});
|
|
|
|
//表单索引
|
|
var formIndex ='{$number}';
|
|
//添加新的字段
|
|
function addNewField(obj, type) {
|
|
formIndex++;
|
|
let template = $("#data-template").html().replace(/FORM_INDEX/g, '[' + formIndex + ']').replace(/INDEX_ID/g, formIndex);
|
|
if (obj == null) {
|
|
$("#dataBody").append(template);
|
|
} else {
|
|
if (type === 1) {
|
|
$(obj).parent().parent().before(template);
|
|
} else {
|
|
$(obj).parent().parent().after(template);
|
|
}
|
|
}
|
|
laydate.render({
|
|
elem: '#end_time'+formIndex
|
|
,type: 'datetime'
|
|
});
|
|
//刷新 dataBody DOM后的操作
|
|
dataBodyRefreshed();
|
|
}
|
|
$(function () {
|
|
//默认添加一行空的字段
|
|
if(formIndex==0){
|
|
addNewField(null, 1);
|
|
}else{
|
|
dataBodyRefreshed();
|
|
}
|
|
});
|
|
|
|
//删除当前字段
|
|
function delThisField(obj) {
|
|
layer.confirm('您确认删除本行吗？', {title: '删除确认', closeBtn: 1, icon: 3}, function () {
|
|
$(obj).parent().parent().remove();
|
|
layer.closeAll();
|
|
});
|
|
}
|
|
|
|
//列表刷新后的操作
|
|
function dataBodyRefreshed() {
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
$('#dataBody .select2').select2();
|
|
}
|
|
|
|
layui.use('form', function(){
|
|
var form = layui.form;
|
|
form.render();
|
|
});
|
|
</script>
|
|
{/block} |