219 lines
10 KiB
PHP

{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
<div class="row">
<div class="col-md-6">
<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="formField" method="post"
enctype="multipart/form-data">
<div class="box-body">
<div class="form-group">
<label for="form_name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-10 col-md-4">
<input maxlength="50" id="form_name" autocomplete="off" name="form_name"
class="form-control" placeholder="请输入名称">
</div>
</div>
<div class="form-group">
<label for="field_name" class="col-sm-2 control-label">字段</label>
<div class="col-sm-10 col-md-4">
<input maxlength="50" id="field_name" autocomplete="off" name="field_name"
class="form-control" placeholder="请输入字段">
</div>
</div>
<div class="form-group">
<label for="form_type" class="col-sm-2 control-label">类型</label>
<div class="col-sm-10 col-md-4">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<select class="form-control select2 form-type-select" id="form_type"
name="form_type">
<option value="text">文本[text]</option>
<option value="number">数字[number]</option>
<option value="password">密码[password]</option>
<option value="mobile">手机号[mobile]</option>
<option value="email">邮箱[email]</option>
<option value="id_card">身份证号[id_card]</option>
<option value="url">网址[url]</option>
<option value="ip">IP地址[ip]</option>
<option value="textarea">文本域[textarea]</option>
<option value="checkbox">复选[checkbox]</option>
<option value="switch">开关[switch]</option>
<option value="radio">单选[radio]</option>
<option value="select">选择列表[select]</option>
<option value="multi_select">多项选择列表[multi-select]</option>
<option value="image">图片上传[image]</option>
<option value="multi_image">多图上传[multi-image]</option>
<option value="file">文件上传[file]</option>
<option value="multi_file">多文件上传[multi-file]</option>
<option value="date">日期[date]</option>
<option value="date_range">日期范围[date-range]</option>
<option value="datetime">日期时间[datetime]</option>
<option value="datetime_range">日期时间范围[datetime-range]</option>
<option value="year">[year]</option>
<option value="year_range">年范围[year-range]</option>
<option value="year_month">年月[year-month]</option>
<option value="year_month_range">年月范围[year-month-range]</option>
<option value="map">地图选点[map]</option>
<option value="color">颜色选择[color]</option>
<option value="icon">图标选择[icon]</option>
<option value="editor">富文本编辑器[editor]</option>
<option value="province_city_district">省市区[三级联动]</option>
</select>
</div>
</div>
</div>
<script>
$('#form_type').select2();
</script>
</div>
<div class="box-footer">
{:token()}
<div class="col-sm-2">
</div>
<div class="col-sm-10 col-md-4">
<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 class="col-md-6">
<div class="box box-solid">
<div class="box-header with-border">
<h3 class="box-title">生成结果</h3>
</div>
<div class="box-body">
<textarea id="code" style="width: 100%" placeholder="生成结果" rows="6"></textarea>
</div>
<div class="box-footer">
<div class="col-sm-2">
</div>
<div class="col-sm-10 col-md-4">
<div class="btn-group">
<button class="clipboard-btn btn flat btn-info" data-clipboard-target="#code">
复制到剪切板
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// button的class的值
var clipboardDemos = new ClipboardJS('.clipboard-btn');
clipboardDemos.on('success', function (e) {
e.clearSelection();
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
layer.msg('复制成功');
});
clipboardDemos.on('error', function (e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
console.log('复制失败');
});
</script>
<script>
$(function () {
/**
* ajax表单提交
*/
$(".dataForm").submit(function (e) {
e.preventDefault();
var loadT = layer.msg('正在提交,请稍候…', {icon: 16, time: 0, shade: [0.3, "#000"]});
var form_action = $(this).attr('action');
var form_method = $(this).attr('method');
var form_data = new FormData($(this)[0]);
console.log('%cajax submit start!', ';color:#333333');
console.log('action:' + form_action);
console.log('method:' + form_method);
console.log('data:' + form_data);
$.ajax({
url: form_action,
dataType: 'json',
type: form_method,
data: form_data,
contentType: false,
processData: false,
success: function (result) {
layer.close(loadT);
layer.msg(result.msg, {
icon: result.code ? 1 : 2
});
console.log('submit success!');
if (result.code === 1) {
addCode(result.data);
console.log('%cresult success', ';color:#00a65a');
} else {
addCode('');
console.log('%cresult fail', ';color:#f39c12');
}
},
error: function (xhr, type, errorThrown) {
//异常处理;
console.log('%csubmit fail!', ';color:#dd4b39');
console.log();
console.log("type:" + type + ",readyState:" + xhr.readyState + ",status:" + xhr.status);
console.log("url:" + form_action);
console.log("data:" + form_data);
layer.close(loadT);
layer.msg('访问错误,代码' + xhr.status, {icon: 2});
}
}
);
return false;
}
);
});
function addCode(code) {
//$('#code').html(code);
$('#code').val(code);
}
</script>
{/block}