tp5-form-builder 1.0.0

controller/Config.php

@@ -0,0 +1,105 @@
+<?php
+// +----------------------------------------------------------------------
+// | tp5-form-builder[请基于ThinkPHP5使用]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2016-2019 http://www.lwwan.com
+// +----------------------------------------------------------------------
+// | Author 似水星辰 [ 2630481389@qq.com ]
+// +----------------------------------------------------------------------
+// | 星辰工作室 QQ群331378225
+// +----------------------------------------------------------------------
+
+namespace app\admin\controller;
+
+use think\Controller;
+use app\admin\model\Config as ConfigModel;
+/**
+ * 控制器
+ * @package app\admin\controller
+ */
+class Config extends Controller
+{
+	/**
+	 * 新增表单项
+	 * @author 似水星辰 [ 2630481389@qq.com ]
+	 * @return mixed
+	 */
+    public function add()
+    {
+
+
+		$fields =[
+			[
+				'type' => 'radio', 
+				'name' => 'group', 
+				'title' => '配置分组', 
+				'extra' => config('config_group'), 
+				'value'=> $group, 
+			],
+			[
+				'type' => 'select', 
+				'name' => 'type', 
+				'title' => '配置类型', 
+				'tips' => '', 
+				'extra' => config('form_item_type')
+			],    
+			[
+				'type' => 'text', 
+				'name' => 'title', 
+				'title' => '配置标题', 
+				'attr' => 'data-rule="required;" data-msg-required="标题不能为空，可以使用中文或者英文"'
+            ],
+            [
+				'type' => 'text', 
+				'name' => 'name', 
+				'title' => '配置标识', 
+				'attr' => 'data-rule="required;name;" data-rule-name="[/^[a-zA-Z][a-zA-Z0-9_]*$/, \'请输入正确的配置标识，只能使用英文和下划线，必须以英文字母开头\']" data-msg-required="配置标识不能为空"'
+			],
+            ['type' => 'textarea', 'name' => 'value', 'title' => '配置值'],
+            ['type' => 'textarea', 'name' => 'extra', 'title' => '配置项', 'tips' => '用于单选、多选、下拉、联动等类型'],
+            ['type' => 'textarea', 'name' => 'tips', 'title' => '配置说明'],
+            ['type' => 'radio', 'name' => 'status', 'title' => '状态', '', 'extra' => ['禁用', '启用'], 'value' => 1]
+		];
+		$this->assign('page_title','新增管理员');
+		$this->assign('form_items',$fields);
+        return $this->fetch('public/add');
+    }
+
+	/**
+	 * 编辑表单项
+	 * @param int $id
+	 * @author 似水星辰 [ 2630481389@qq.com ]
+	 * @return mixed
+	 */
+    public function edit($id = 0)
+    {
+        if ($id === 0) $this->error('参数错误');
+
+        // 获取数据
+        $info = ConfigModel::get($id);
+		$fields =[
+			['type' => 'hidden', 'name' => 'id', ],
+			['type' => 'radio', 'name' => 'group', 'title' => '配置分组', 'extra' => config('config_group'), 'value'=> $group, ],
+			['type' => 'select', 'name' => 'type', 'title' => '配置类型', 'extra' => config('form_item_type')],    
+			[
+				'type' => 'text', 
+				'name' => 'title', 
+				'title' => '配置标题', 
+				'attr' => 'data-rule="required;" data-msg-required="标题不能为空，可以使用中文或者英文"'],
+            
+            [
+				'type' => 'text', 
+				'name' => 'name', 
+				'title' => '配置标识', 
+				'attr' => 'data-rule="required;name;" data-rule-name="[/^[a-zA-Z][a-zA-Z0-9_]*$/, \'请输入正确的配置标识，只能使用英文和下划线，必须以英文字母开头\']" data-msg-required="配置标识不能为空"'
+			],
+            ['type' => 'textarea', 'name' => 'value', 'title' => '配置值'],
+            ['type' => 'textarea', 'name' => 'extra', 'title' => '配置项', 'tips' => '用于单选、多选、下拉、联动等类型'],
+            ['type' => 'textarea', 'name' => 'tips', 'title' => '配置说明'],
+            ['type' => 'radio', 'name' => 'status', 'title' => '状态', '', 'extra' => ['禁用', '启用'], 'value' => 1]
+		];
+		$this->assign('page_title','编辑配置');
+		$this->assign('form_items', $this->setData($fields, $info));
+        return $this->fetch('public/edit');
+    }
+}

view/public/add.html

@@ -0,0 +1,37 @@
+{extend name="layout" /}
+{block name="style"}
+{volist name="set_style" id="s"}<link rel="stylesheet" href="{$s}" />{/volist}
+{/block}
+{block name="content"}
+<div class="row">
+	<div class="col-md-12">
+		<div class="box nav-tabs-custom">
+			<div class="box-header with-border">
+				<h3 class="box-title">{$page_title|default=""|htmlspecialchars}</h3>
+			</div>
+			<div class="box-body tab-content">
+				<div class="tab-pane active">
+					<div class="block-content"> 
+						{php}
+						$url_param = input('param.');
+						{/php} 
+						<!-- 表单验证请保留id="form"，否则验证不起作用 -->
+						<form class="form row" name="form" id="form" action="{:url('',$url_param)}" method="post" data-validator-option="{timely:1, theme:'bootstrap'}">
+							{include file="../public/theme/admin/public/form.html" /}
+							<div class="form-group col-md-12 col-xs-12">
+							<div class="col-xs-12">
+								<button class="btn btn-primary btn-flat" type="submit"> 提交 </button>
+								<button class="btn btn-default btn-flat" type="button" onClick="javascript:history.back(-1);return false;"> 返回 </button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{/block}
+
+{block name="script"}
+{volist name="set_script" id="s"}<script type="text/javascript" src="{$s}"></script>{/volist}
+{/block}

view/public/edit.html

@@ -0,0 +1,38 @@
+{extend name="layout" /}
+{block name="content"}
+<div class="row">
+	<div class="col-md-12">
+		<div class="box nav-tabs-custom">
+			<div class="box-header with-border">
+				<h3 class="box-title">{$page_title|default=""|htmlspecialchars}</h3>
+			</div>
+			<div class="box-body tab-content">
+				<div class="tab-pane active">
+					<div class="block-content"> 
+						{php}
+						$url_param = input('param.');
+						{/php} 
+						<!-- 表单验证请保留id="form"，否则验证不起作用 -->
+						<form class="form row" name="form" id="form" action="{:url('',$url_param)}" method="post" data-validator-option="{timely:1, theme:'bootstrap'}">
+							{include file="../public/theme/admin/public/form.html" /}
+							<div class="form-group col-md-12 col-xs-12">
+							<div class="col-xs-12">
+								{neq name="btn_hide" value="1"}
+								<button class="btn btn-primary btn-flat" type="submit"> 提交 </button>
+								{/neq}
+								<button class="btn btn-default btn-flat" type="button" onClick="javascript:history.back(-1);return false;"> 返回 </button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{/block}
+{block name="style"}
+{volist name="set_style" id="s"}<link rel="stylesheet" href="{$s}" />{/volist}
+{/block}
+{block name="script"}
+{volist name="set_script" id="s"}<script type="text/javascript" src="{$s}"></script>{/volist}
+{/block}

view/public/form.html

@@ -0,0 +1,84 @@
+								{:token()}
+								{notempty name="form_items"}
+									{volist name="form_items" id="form"}
+                                        {switch name="form.type"}
+
+                                            {case value="checkbox"}
+                                                {// 多选 }
+                                                {include file="../public/theme/admin/public/items/checkbox.html" /}
+                                            {/case}
+
+											{case value="linkage"}
+                                                {// 联动 }
+                                                {include file="../public/theme/admin/public/items/linkage.html" /}
+                                            {/case}
+
+                                            {case value="hidden"}
+                                                {// 隐藏 }
+                                                {include file="../public/theme/admin/public/items/hidden.html" /}
+                                            {/case}
+
+                                            {case value="icon"}
+                                                {// 图标选择器 }
+                                                {include file="../public/theme/admin/public/items/icon.html" /}
+                                            {/case}
+
+                                            {case value="image"}
+                                                {// 单图片上传 }
+                                                {include file="../public/theme/admin/public/items/image.html" /}
+                                            {/case}
+
+											{case value="images"}
+                                                {// 多图片上传 }
+                                                {include file="../public/theme/admin/public/items/images.html" /}
+                                            {/case}
+
+                                            {case value="number"}
+                                                {// 数字 }
+                                                {include file="../public/theme/admin/public/items/number.html" /}
+                                            {/case}
+
+                                            {case value="password"}
+                                                {// 密码 }
+                                                {include file="../public/theme/admin/public/items/password.html" /}
+                                            {/case}
+
+                                            {case value="radio"}
+                                                {// 单选 }
+                                                {include file="../public/theme/admin/public/items/radio.html" /}
+                                            {/case}
+
+                                            {case value="select"}
+                                                {// 下拉菜单 }
+                                                {include file="../public/theme/admin/public/items/select.html" /}
+                                            {/case}
+
+                                            {case value="text"}
+                                                {// 单行文本 }
+                                                {include file="../public/theme/admin/public/items/text.html" /}
+                                            {/case}
+
+											{case value="static"}
+                                                {// 静态文本 }
+                                                {include file="../public/theme/admin/public/items/static.html" /}
+                                            {/case}
+
+											{case value="sort"}
+                                                {// 文本框|数组 }
+                                                {include file="../public/theme/admin/public/items/sort.html" /}
+                                            {/case}
+
+                                            {case value="textarea|array"}
+                                                {// 文本框|数组 }
+                                                {include file="../public/theme/admin/public/items/textarea.html" /}
+                                            {/case}
+
+                                            {case value="wangeditor"}
+                                                {// wang编辑器 }
+                                                {include file="../public/theme/admin/public/items/wangeditor.html" /}
+                                            {/case}
+                                            {default/}
+                                        {/switch}
+                                    {/volist}
+                                {/notempty}
+								

view/public/items/checkbox.html

@@ -0,0 +1,13 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}" style="margin-bottom: 14px;">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12">
+        {volist name="form.extra" id="option"}
+        <label class="pr10">
+            <input type="checkbox" data-toggle="icheck" name="{$form.name}[]" id="{$form.name}{$key}" value="{$key}" <?php $key = (string)$key; ?> {in name="key" value="$form.value|default=''"}checked{/in} {$form.attr|default=''}> {$option|htmlspecialchars}
+        </label>
+        {/volist}
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/hidden.html

@@ -0,0 +1,3 @@
+<div class="form-group hidden {$form.extra_class|default=''}" id="form_group_{$form.name}">
+    <input type="hidden" name="{$form.name}" value='{$form.value|default=""}' class="form-control" id="{$form.name}">
+</div>

view/public/items/icon.html

@@ -0,0 +1,19 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+	<div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+	<div class="col-sm-12">
+		<div class="input-group js-icon-picker">
+			<input class="form-control icon_input" type="text" id="{$form.name}" name="{$form.name}" value="{empty name="form.value"}fa fa-fw{else /}{$form.value|default=''}{/empty}" placeholder="请选择图标" {$form.attr|default=''}>
+			<span class="input-group-addon delete-icon" style="border-left: 1px solid #D2D6DD;cursor: pointer;"><i class="fa fa-fw fa-trash"></i> 清除图标</span> </div>
+		{notempty name="form.tips"}
+		<div class="help-block">{$form.tips}</div>
+		{/notempty} 
+	</div>
+</div>
+<div id="icon_tab" style="display:none">
+	<div class="tab-content" style="padding: 10px">
+		<div class="tab-pane fade active in" id="fa"> {include file="../public/theme/admin/menu/icon_view.html" /} </div>
+		{volist name="_icons" id="icon"}
+		<div class="tab-pane fade" id="icon{$icon.id}"> {$icon.html|default='暂无图标'} </div>
+		{/volist} 
+	</div>
+</div>

view/public/items/image.html

@@ -0,0 +1,21 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12 js-upload-image">
+        <div id="file_list_{$form.name}" class="uploader-list" style="float:left">
+            {notempty name="form.value"}
+            <div class="file-item thumbnail">
+				<a data-magnify="gallery" data-caption="" href="{$form['value']|get_file_url}">
+					<img data-original="" src="{$form['value']|get_thumb}" width="100">
+				</a>
+				<i class="fa fa-times-circle remove-picture"></i>
+            </div>
+            {/notempty}
+        </div>
+        <input type="hidden" name="{$form.name}" data-multiple="false" data-watermark='{$form["watermark"]|default=""}' data-thumb='{$form["thumb"]|default=""}' data-size="{$form['size']|default=0}" data-ext='{$form["ext"]|default=""}' id="{$form.name}" value="{$form.value|default=''}">
+        <div style="float:left" id="picker_{$form.name}">载入中...</div>
+		<div class="clearfix"></div>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/images.html

@@ -0,0 +1,24 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+     <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12 js-upload-images">
+        <div id="file_list_{$form.name}" class="uploader-list pull-left">
+            {notempty name="form.value"}
+                {volist name="form['value']|explode=',',###" id="vo"}
+                <div class="file-item thumbnail">
+                    <a class="img-link" data-magnify="gallery" href="{$vo|get_file_url}">
+                        <img src="{$vo|get_thumb}" width="100">
+						<i class="fa fa-fw fa-arrows move-picture"></i>
+					</a>
+					<i class="fa fa-times-circle remove-picture" data-id="{$vo}"></i>
+                </div>
+                {/volist}
+            {/notempty}
+        </div>
+        <input type="hidden" name="{$form.name}" data-multiple="true" data-size="{$form['size']|default=0}" data-ext='{$form["ext"]|default=""}' id="{$form.name}" value="{$form.value|default=''}">
+        <div id="picker_{$form.name}" class="pull-left">载入中...</div>
+		<div class="clearfix"></div>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/linkage.html

@@ -0,0 +1,13 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12 id="form_group_{$form.name}">
+    <label class="col-xs-12" for="{$form.name}">{$form.title}</label>
+    <div class="col-sm-12">
+        <select class="js-select2 form-control select-linkage" name="{$form.name}" id="{$form.name}" data-allow-clear="true" data-placeholder="请选择一项" data-url="{$form.ajax_url|default=''}" data-param="{$form.param|default=$form.name}" data-next-items="{$form.next_items}" {$form.attr|default=''}>
+            {volist name="form.extra" id="extra"}
+                <option value="{$key}" {if ($form.value == (string)$key)}selected{/if}>{$extra}</option>
+            {/volist}
+        </select>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/number.html

@@ -0,0 +1,9 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-sm-12">
+        <input class="form-control" type="number" id="{$form.name}" name="{$form.name}" value="{$form.value|default=''}" placeholder="{$form.placeholder|default='请输入'.$form.title}" {php}if(isset($form['min']) && $form['min'] !== ''):{/php}min="{$form.min}"{php}endif;{/php} {php}if(isset($form['max']) && $form['max'] !== ''):{/php}max="{$form.max}"{php}endif;{/php} {php}if(isset($form['step']) && $form['step'] !== ''):{/php}step="{$form.step}"{php}endif;{/php} {$form.attr|default=''}>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/password.html

@@ -0,0 +1,9 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-sm-12">
+        <input class="form-control" type="password" id="{$form.name}" name="{$form.name}" value="{$form.value|default=''}" placeholder="{$form.placeholder|default='请输入'.$form.title}" {$form.attr|default=''}>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/radio.html

@@ -0,0 +1,14 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}" style="margin-bottom: 14px;">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12">
+        {volist name="form.extra" id="option"}
+        <label class="pr10">
+            <input type="radio" data-toggle="icheck" name="{$form.name}" id="{$form.name}{$i}" value="{$key}" {php}$key = (string)$key;{/php} {eq name="key" value="$form.value|default=''"}checked{/eq} {$form.attr|default=''}>
+            {$option|htmlspecialchars}
+        </label>
+        {/volist}
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/select.html

@@ -0,0 +1,13 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-sm-12">
+        <select class="select2 form-control" id="{$form.name}" name="{$form.name}" {$form.attr|default=''}>
+            {volist name="form.extra" id="option"}
+            <option value="{$key}" {if ((string)$form.value == (string)$key)}selected{/if}>{$option|raw}</option>
+            {/volist}
+        </select>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/sort.html

@@ -0,0 +1,23 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <input type="hidden" name="{$form.name}" value="{$form.value|default=''}">
+    <div class="col-sm-12">
+        {empty name="form.value"}
+            <div class="form-control-static">暂无数据，无法排序</div>
+        {else/}
+            <div class="dd nestable" data-name="{$form.name}">
+                <ol class="dd-list">
+                    {volist name="form.extra" id="item"}
+                    <li class="dd-item" data-id="{$key}">
+                        <div class="dd-handle dd3-handle">拖拽</div><div class="dd3-content">{$item|htmlspecialchars}</div>
+                    </li>
+                    {/volist}
+                </ol>
+            </div>
+        {/empty}
+
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/static.html

@@ -0,0 +1,6 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-sm-12">
+        {$form.value|default=''|raw}
+    </div>
+</div>

view/public/items/text.html

@@ -0,0 +1,9 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-sm-12">
+        <input class="form-control" type="text" id="{$form.name}" name="{$form.name}" value="{$form.value|default=''|raw}" placeholder="{$form.placeholder|default='请输入'.$form.title}" {$form.attr|default=''|raw}>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/textarea.html

@@ -0,0 +1,9 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12">
+        <textarea class="form-control" id="{$form.name}" rows="7" name="{$form.name}" placeholder="{$form.placeholder|default='请输入'.$form.title}" {$form.attr|default=''|raw}>{$form.value|default=''|raw}</textarea>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>

view/public/items/wangeditor.html

@@ -0,0 +1,9 @@
+<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="form_group_{$form.name}">
+    <div class="col-xs-12 label-title" for="{$form.name}">{$form.title|htmlspecialchars}</div>
+    <div class="col-xs-12">
+        <textarea class="form-control js-wangeditor" name="{$form.name}" data-img-ext="{:config('upload_image_ext')}" id="{$form.name}" rows="15" placeholder="请输入{$form.title}" {$form.attr|default=''|raw}>{$form.value|default=''|raw}</textarea>
+        {notempty name="form.tips"}
+        <div class="help-block">{$form.tips}</div>
+        {/notempty}
+    </div>
+</div>