264 lines
15 KiB
HTML
264 lines
15 KiB
HTML
<include file="/public/header" />
|
|
<!--Developer-->
|
|
<link href="__STATICADMIN__/module/formDesign/formdesign.css?v={:release()}" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
.layui-form-checkbox[lay-skin="primary"] span {
|
|
padding-right: 13px;
|
|
}
|
|
|
|
@media screen and (max-width: 1900px) {
|
|
#layui-form-attribute .layui-input-inline {
|
|
width: 138px;
|
|
}
|
|
|
|
#layui-form-attribute .layui-form-label {
|
|
padding-left: 0;
|
|
width: auto!important;
|
|
}
|
|
|
|
.component .component-group ol {
|
|
min-width: 50px!important;
|
|
width: 30%!important;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<div class="layui-fluid" >
|
|
<form class="layui-form layui-card">
|
|
<input type="text" name="id" value="{$data.id}" hidden="">
|
|
<div class="layui-card-header">表单设计</div>
|
|
<div class="layui-card-body" style="padding-bottom:100px;">
|
|
<div class="layui-row layui-col-space30">
|
|
<div class="layui-col-md2">
|
|
<div class="layui-tab layui-tab-brief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">{:__('表单组件')}</li>
|
|
<li>{:__('表单模板')}</li>
|
|
</ul>
|
|
<div class="layui-tab-content" id="layui-form-attribute">
|
|
<div class="layui-tab-item layui-form layui-show">
|
|
<div class="component">
|
|
<div class="head">表单组件</div>
|
|
<div class="component-group" id="sort_1">
|
|
<ol data-tag="input">
|
|
<div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
|
|
<div class="name">单行输入</div>
|
|
</ol>
|
|
<ol data-tag="textarea">
|
|
<div class="icon"><i class="layui-icon layui-icon-align-left"></i></div>
|
|
<div class="name">多行输入</div>
|
|
</ol>
|
|
<ol data-tag="radio">
|
|
<div class="icon"><i class="layui-icon layui-icon-radio"></i></div>
|
|
<div class="name">单选框</div>
|
|
</ol>
|
|
<ol data-tag="checkbox">
|
|
<div class="icon"><i class="layui-icon layui-icon-table"></i></div>
|
|
<div class="name">多选框</div>
|
|
</ol>
|
|
<ol data-tag="select">
|
|
<div class="icon"><i class="layui-icon layui-icon-print"></i></div>
|
|
<div class="name">下拉框</div>
|
|
</ol>
|
|
<ol data-tag="date">
|
|
<div class="icon"><i class="layui-icon layui-icon-time"></i></div>
|
|
<div class="name">日期组件</div>
|
|
</ol>
|
|
<ol data-tag="colorpicker">
|
|
<div class="icon"><i class="layui-icon layui-icon-theme"></i></div>
|
|
<div class="name">颜色选择器</div>
|
|
</ol>
|
|
<ol data-tag="slider">
|
|
<div class="icon"><i class="layui-icon layui-icon-slider"></i></div>
|
|
<div class="name">滑块</div>
|
|
</ol>
|
|
<ol data-tag="rate">
|
|
<div class="icon"><i class="layui-icon layui-icon-rate-solid"></i></div>
|
|
<div class="name">评分</div>
|
|
</ol>
|
|
<ol data-tag="switch">
|
|
<div class="icon"><i class="layui-icon layui-icon-switch">
|
|
<k></k>
|
|
</i></div>
|
|
<div class="name">开关</div>
|
|
</ol>
|
|
<ol data-tag="cascader">
|
|
<div class="icon"><i class="layui-icon layui-icon-cols"></i></div>
|
|
<div class="name">级联选择器</div>
|
|
</ol>
|
|
<ol data-tag="editor">
|
|
<div class="icon"><i class="layui-icon layui-icon-form"></i></div>
|
|
<div class="name">富文本</div>
|
|
</ol>
|
|
<ol data-tag="upload">
|
|
<div class="icon"><i class="layui-icon layui-icon-upload"></i></div>
|
|
<div class="name">文件上传</div>
|
|
</ol>
|
|
<ol data-tag="tags">
|
|
<div class="icon"><i class="layui-icon fa-instagram"></i></div>
|
|
<div class="name">标签选择器</div>
|
|
</ol>
|
|
<ol data-tag="json">
|
|
<div class="icon"><i class="layui-icon fa-bars"></i></div>
|
|
<div class="name">JSON组件</div>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="component">
|
|
<div class="head">辅助组件</div>
|
|
<div class="component-group" id="sort_2">
|
|
<ol data-tag="tips">
|
|
<div class="icon"><i class="layui-icon layui-icon-tips"></i></div>
|
|
<div class="name">提示</div>
|
|
</ol>
|
|
<ol data-tag="button">
|
|
<div class="icon"><i class="layui-icon layui-icon-layer"></i></div>
|
|
<div class="name">按钮</div>
|
|
</ol>
|
|
<ol data-tag="note">
|
|
<div class="icon"><i class="layui-icon layui-icon-note"></i></div>
|
|
<div class="name">便签</div>
|
|
</ol>
|
|
<ol data-tag="subtraction">
|
|
<div class="icon"><i class="layui-icon layui-icon-subtraction"></i></div>
|
|
<div class="name">分割线</div>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<div class="component">
|
|
<div class="head">布局组件</div>
|
|
<div class="component-group" id="sort_3">
|
|
<ol data-tag="tab">
|
|
<div class="icon"><i class="layui-icon layui-icon-tabs smallfont"></i></div>
|
|
<div class="name">TAB选项卡</div>
|
|
</ol>
|
|
<ol data-tag="grid">
|
|
<div class="icon"><i class="layui-icon layui-icon-layouts"></i></div>
|
|
<div class="name">栅格</div>
|
|
</ol>
|
|
<ol data-tag="space">
|
|
<div class="icon"><i class="layui-icon layui-icon-more"></i></div>
|
|
<div class="name">间距</div>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- // 加载远程表单模板 -->
|
|
<div id="layui-form-template" class="layui-tab-item">
|
|
<div id="item-list" class="item-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md8">
|
|
<div class="layui-card-header">
|
|
<div class="fr">
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-export"><i
|
|
class="layui-icon layui-icon-export"></i>导出</button>
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-import"><i
|
|
class="layui-icon layui-icon-layer"></i>导入</button>
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-component"> <i
|
|
class="layui-icon layui-icon-component"></i> 预览</button>
|
|
<button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-form-clear"><i
|
|
class="layui-icon layui-icon-delete"></i>清空</button>
|
|
</div>
|
|
</div>
|
|
<!-- // 表单设计区域 -->
|
|
<div id="formBuilder" style="width: 100%"></div>
|
|
<!-- // 表单隐藏域 -->
|
|
<textarea id="formDesign" name="formDesign" hidden>{$data.formDesign|default=''}</textarea>
|
|
</div>
|
|
<div class="layui-col-md2" style="padding-top: 0;" id="layui-form-attribute">
|
|
<div class="layui-tab layui-tab-brief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">{:__('组件属性')}</li>
|
|
<li>{:__('表单属性')}</li>
|
|
</ul>
|
|
|
|
<div class="layui-tab-content" >
|
|
<div class="layui-tab-item layui-form layui-show" id="Propertie" lay-filter="Propertie">
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">
|
|
<font color="red">*</font>{:__('表单ID')}
|
|
</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" id="formName" name="formName" class="layui-input"
|
|
value="{$data.formName|default='form'}" placeholder="请输入">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">{:__('表单类型')}</label>
|
|
<div class="layui-input-inline">
|
|
<input type="radio" name="formType" title="弹窗" <eq name="$data['formType']"
|
|
value="1">checked="" </eq> value="1">
|
|
<input type="radio" name="formType" title="内置" <eq name="$data['formType']"
|
|
value="0">checked="" </eq> value="0" >
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">{:__('表单宽高')}</label>
|
|
<div class="layui-input-inline">
|
|
<input type="text" id="formWidth" name="width"
|
|
style="width: 70px;display: inline-block;" class="layui-input"
|
|
value="{$data.width|default='1100px'}" placeholder="宽度">
|
|
<em> - </em>
|
|
<input type="text" id="formHeight" name="height"
|
|
style="width:70px;display: inline-block;" class="layui-input"
|
|
value="{$data.height|default='750px'}" placeholder="高度">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-footer layui-form-footer">
|
|
<button class="layui-btn layui-btn-primary" type="button" sa-event="closeDialog">{:__('取消')}</button>
|
|
<button class="layui-btn" lay-filter="submitIframe" type="button" lay-submit>{:__('提交')}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="layui-htmlview" style="display: none;">
|
|
<textarea id="json-code"></textarea>
|
|
<div class="layui-htmlbtn">
|
|
<button id="copy-code" class="layui-btn layui-hide">复制代码</button>
|
|
<button id="import-code" class="layui-btn layui-hide">导入数据</button>
|
|
</div>
|
|
</div>
|
|
<script src="__STATICJS__Sortable/Sortable.js?v={:release()}"></script>
|
|
<include file="/public/footer" />
|
|
<include file="/public/static" />
|
|
<script>
|
|
layui.use(['jquery', 'flow', 'formDesign'], function () {
|
|
let $ = layui.jquery;
|
|
|
|
let formDesign = layui.formDesign;
|
|
formDesign.render({
|
|
elem: '#formBuilder'
|
|
, eval: '#formDesign'
|
|
});
|
|
|
|
layui.flow.load({
|
|
elem: '#item-list'
|
|
, done: function (page, next) {
|
|
var list = [];
|
|
$.get('//api.swiftadmin.net/form/?page=' + page, function (res) {
|
|
layui.each(res.data, function (index, item) {
|
|
list.push(item);
|
|
});
|
|
next(list.join(''), page < res.total);
|
|
})
|
|
}
|
|
});
|
|
|
|
})
|
|
// 获取字段信息
|
|
window.tableInfo = {$table|raw};
|
|
</script> |