Skip to content

G
guns-vip
Commit e2a03854 by fengshuonan
Options

更新高级表单

parent 2ba1d61d
Showing with 879 additions and 3 deletions
src/main/java/cn/stylefeng/guns/modular/demos/controller/EgFormController.java 0 → 100644
package cn.stylefeng.guns.modular.demos.controller;
import cn.stylefeng.guns.core.common.page.LayuiPageFactory;
import cn.stylefeng.guns.core.common.page.LayuiPageInfo;
import cn.stylefeng.guns.modular.demos.entity.EgForm;
import cn.stylefeng.guns.modular.demos.model.EgFormParam;
import cn.stylefeng.roses.core.base.controller.BaseController;
import cn.stylefeng.roses.core.reqres.response.ResponseData;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
/**
* Guns复杂表单的示例控制器
*
* @author stylefeng
* @Date 2019-02-18 21:37:43
*/
@Controller
@RequestMapping("/egForm")
public class EgFormController extends BaseController {
private String PREFIX = "/modular/demos/form";
/**
* 跳转到主页面
*
* @author stylefeng
* @Date 2019-02-18
*/
@RequestMapping("")
public String index() {
return PREFIX + "/egForm.html";
}
/**
* 新增页面
*
* @author stylefeng
* @Date 2019-02-18
*/
@RequestMapping("/add")
public String add() {
return PREFIX + "/egForm_add.html";
}
/**
* 新增接口
*
* @author stylefeng
* @Date 2019-02-18
*/
@RequestMapping("/addItem")
@ResponseBody
public ResponseData addItem(EgFormParam egFormParam) {
System.out.println(egFormParam);
return ResponseData.success();
}
/**
* 删除接口
*
* @author stylefeng
* @Date 2019-02-18
*/
@RequestMapping("/delete")
@ResponseBody
public ResponseData delete(EgFormParam egFormParam) {
System.out.println(egFormParam);
return ResponseData.success();
}
/**
* 查询列表
*
* @author stylefeng
* @Date 2019-02-18
*/
@ResponseBody
@RequestMapping("/list")
public LayuiPageInfo list(EgFormParam egFormParam) {
ArrayList<EgForm> records = new ArrayList<>();
EgForm egForm = new EgForm();
egForm.setName("高级表单");
egForm.setSingleTime("2019-03-27 14:16:03");
egForm.setBetweenTime("2019-02-07 - 2019-03-14");
egForm.setFenzuSelect("fenzuSelect");
egForm.setFormId(111L);
egForm.setLongText("xxxxxx");
egForm.setSex("M");
egForm.setSimpleSelect("111");
egForm.setMultiSelectHidden("shiro,mybatis-puls");
records.add(egForm);
records.add(egForm);
Page<EgForm> egFormPage = new Page<>();
egFormPage.setSize(10);
egFormPage.setTotal(2);
egFormPage.setRecords(records);
return LayuiPageFactory.createPageInfo(egFormPage);
}
}
src/main/java/cn/stylefeng/guns/modular/demos/ExcelController.java → src/main/java/cn/stylefeng/guns/modular/demos/controller/ExcelController.java
package cn.stylefeng.guns.modular.excel; package cn.stylefeng.guns.modular.demos.controller;
import cn.afterturn.easypoi.entity.vo.MapExcelConstants; import cn.afterturn.easypoi.entity.vo.MapExcelConstants;
import cn.afterturn.easypoi.excel.ExcelImportUtil; import cn.afterturn.easypoi.excel.ExcelImportUtil;
...@@ -10,7 +10,7 @@ import cn.afterturn.easypoi.view.PoiBaseView; ...@@ -10,7 +10,7 @@ import cn.afterturn.easypoi.view.PoiBaseView;
import cn.stylefeng.guns.config.properties.GunsProperties; import cn.stylefeng.guns.config.properties.GunsProperties;
import cn.stylefeng.guns.core.common.exception.BizExceptionEnum; import cn.stylefeng.guns.core.common.exception.BizExceptionEnum;
import cn.stylefeng.guns.core.common.page.LayuiPageInfo; import cn.stylefeng.guns.core.common.page.LayuiPageInfo;
import cn.stylefeng.guns.modular.demos.ExcelItem; import cn.stylefeng.guns.modular.demos.entity.ExcelItem;
import cn.stylefeng.guns.modular.system.service.UserService; import cn.stylefeng.guns.modular.system.service.UserService;
import cn.stylefeng.roses.core.reqres.response.ResponseData; import cn.stylefeng.roses.core.reqres.response.ResponseData;
import cn.stylefeng.roses.kernel.model.exception.ServiceException; import cn.stylefeng.roses.kernel.model.exception.ServiceException;
......
src/main/java/cn/stylefeng/guns/modular/demos/entity/EgForm.java 0 → 100644
package cn.stylefeng.guns.modular.demos.entity;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import java.io.Serializable;
/**
* <p>
* Guns复杂表单的示例
* </p>
*
* @author stylefeng
* @since 2019-02-23
*/
@TableName("sys_eg_form")
@Data
public class EgForm implements Serializable {
private static final long serialVersionUID = 1L;
/**
* 主键id
*/
@TableId("FORM_ID")
private Long formId;
/**
* 名称
*/
@TableField("NAME")
private String name;
/**
* 单个时间
*/
@TableField("SINGLE_TIME")
private String singleTime;
/**
* 时间段
*/
@TableField("BETWEEN_TIME")
private String betweenTime;
/**
* 单行选择
*/
@TableField("SIMPLE_SELECT")
private String simpleSelect;
/**
* 分组选择
*/
@TableField("FENZU_SELECT")
private String fenzuSelect;
/**
* 搜索选择
*/
@TableField("MODULES")
private String modules;
/**
* 多个选择
*/
@TableField("MULTI_SELECT_HIDDEN")
private String multiSelectHidden;
/**
* 图片文件id
*/
@TableField("PICTURE_INPUT_HIDDEN")
private String pictureInputHidden;
/**
* 文件id
*/
@TableField("FILE_INPUT_HIDDEN")
private String fileInputHidden;
/**
* 开关标识
*/
@TableField("CLOSE_FLAG")
private String closeFlag;
/**
* 单选
*/
@TableField("SEX")
private String sex;
/**
* 复选框
*/
@TableField("CHECKBOX")
private String checkbox;
/**
* 数字
*/
@TableField("NUMBER")
private Integer number;
/**
* 长字段
*/
@TableField("LONG_TEXT")
private String longText;
}
src/main/java/cn/stylefeng/guns/modular/demos/ExcelItem.java → src/main/java/cn/stylefeng/guns/modular/demos/entity/ExcelItem.java
package cn.stylefeng.guns.modular.demos; package cn.stylefeng.guns.modular.demos.entity;
import cn.afterturn.easypoi.excel.annotation.Excel; import cn.afterturn.easypoi.excel.annotation.Excel;
import com.baomidou.mybatisplus.annotation.*; import com.baomidou.mybatisplus.annotation.*;
......
src/main/java/cn/stylefeng/guns/modular/demos/model/EgFormParam.java 0 → 100644
package cn.stylefeng.guns.modular.demos.model;
import cn.stylefeng.roses.kernel.model.validator.BaseValidatingParam;
import lombok.Data;
import java.io.Serializable;
/**
* <p>
* Guns复杂表单的示例
* </p>
*
* @author stylefeng
* @since 2019-02-18
*/
@Data
public class EgFormParam implements Serializable, BaseValidatingParam {
private static final long serialVersionUID = 1L;
/**
* id
*/
private Long formId;
/**
* 名称
*/
private String name;
/**
* 单个时间
*/
private String singleTime;
/**
* 时间段
*/
private String betweenTime;
/**
* 单行选择框
*/
private String simpleSelect;
/**
* 分组选择框
*/
private String fenzuSelect;
/**
* 搜索选择框
*/
private String modules;
/**
* 多个选择
*/
private String multiSelectHidden;
/**
* 图片文件id
*/
private String pictureInputHidden;
/**
* 文件id
*/
private String fileInputHidden;
/**
* close
*/
private String closeFlag;
/**
* 单选框
*/
private String sex;
/**
* 复选框
*/
private String[] checkbox;
/**
* 数字选择
*/
private Integer number;
/**
* 长字段
*/
private String longText;
@Override
public String checkParam() {
return null;
}
}
src/main/java/cn/stylefeng/guns/modular/demos/model/EgFormResult.java 0 → 100644
package cn.stylefeng.guns.modular.demos.model;
import lombok.Data;
import java.io.Serializable;
/**
* <p>
* Guns复杂表单的示例
* </p>
*
* @author stylefeng
* @since 2019-02-18
*/
@Data
public class EgFormResult implements Serializable {
private static final long serialVersionUID = 1L;
/**
* id
*/
private Long formId;
/**
* 名称
*/
private String name;
/**
* 单个时间
*/
private String singleTime;
/**
* 时间段
*/
private String betweenTime;
/**
* 单行选择框
*/
private String simpleSelect;
/**
* 分组选择框
*/
private String fenzuSelect;
/**
* 搜索选择框
*/
private String modules;
/**
* 多个选择
*/
private String multiSelectHidden;
/**
* 图片文件id
*/
private String pictureInputHidden;
/**
* 文件id
*/
private String fileInputHidden;
/**
* close
*/
private String closeFlag;
/**
* 单选框
*/
private String sex;
/**
* 复选框
*/
private String[] checkbox;
/**
* 数字选择
*/
private Integer number;
/**
* 长字段
*/
private String longText;
}
src/main/webapp/assets/common/js/common.js
...@@ -88,6 +88,7 @@ Feng.closeAllLoading = function () { ...@@ -88,6 +88,7 @@ Feng.closeAllLoading = function () {
layui.config({ layui.config({
base: Feng.ctxPath + '/assets/common/module/' base: Feng.ctxPath + '/assets/common/module/'
}).extend({ }).extend({
selectPlus: 'selectPlus/selectPlus',
formSelects: 'formSelects/formSelects-v4', formSelects: 'formSelects/formSelects-v4',
treetable: 'treetable-lay/treetable', treetable: 'treetable-lay/treetable',
dropdown: 'dropdown/dropdown', dropdown: 'dropdown/dropdown',
......
src/main/webapp/assets/modular/demos/form/egForm.js 0 → 100644
layui.use(['table', 'admin', 'ax'], function () {
var $ = layui.$;
var table = layui.table;
var $ax = layui.ax;
var admin = layui.admin;
/**
* Guns复杂表单的示例管理
*/
var EgForm = {
tableId: "egFormTable"
};
/**
* 初始化表格的列
*/
EgForm.initColumn = function () {
return [[
{type: 'checkbox'},
{field: 'formId', hide: true, title: '主键id'},
{field: 'name', sort: true, title: '名称'},
{field: 'singleTime', sort: true, title: '单个时间'},
{field: 'betweenTime', sort: true, title: '时间段'},
{field: 'simpleSelect', sort: true, title: '单行选择'},
{field: 'fenzuSelect', sort: true, title: '分组选择'},
{field: 'modules', sort: true, title: '搜索选择'},
{field: 'multiSelectHidden', sort: true, title: '多个选择'},
{
align: 'center', templet: function (d) {
// var url = d.imgUrl;
var url = 'https://pic.qqtn.com/up/2018-9/15367146917869444.jpg';
return '<img src="' + url + '" class="tdImg" />';
}, title: '缩略图', width: 90, unresize: true
},
{field: 'fileInputHidden', sort: true, title: '文件id'},
{field: 'closeFlag', sort: true, title: '开关标识'},
{field: 'sex', sort: true, title: '单选'},
{field: 'checkbox', sort: true, title: '复选框'},
{field: 'number', sort: true, title: '数字'},
{field: 'longText', sort: true, title: '长字段'},
{align: 'center', toolbar: '#tableBar', title: '操作'}
]];
};
/**
* 点击查询按钮
*/
EgForm.search = function () {
var queryData = {};
queryData['condition'] = $("#condition").val();
table.reload(EgForm.tableId, {where: queryData});
};
/**
* 弹出添加对话框
*/
EgForm.openAddDlg = function () {
admin.putTempData('formOk', false);
top.layui.admin.open({
type: 2,
title: '添加Guns复杂表单的示例',
content: Feng.ctxPath + '/egForm/add',
end: function () {
admin.getTempData('formOk') && table.reload(EgForm.tableId);
}
});
};
/**
* 导出excel按钮
*/
EgForm.exportExcel = function () {
var checkRows = table.checkStatus(EgForm.tableId);
if (checkRows.data.length === 0) {
Feng.error("请选择要导出的数据");
} else {
table.exportFile(tableResult.config.id, checkRows.data, 'xls');
}
};
/**
* 点击删除
*
* @param data 点击按钮时候的行数据
*/
EgForm.onDeleteItem = function (data) {
var operation = function () {
var ajax = new $ax(Feng.ctxPath + "/egForm/delete", function (data) {
Feng.success("删除成功!");
table.reload(EgForm.tableId);
}, function (data) {
Feng.error("删除失败!" + data.responseJSON.message + "!");
});
ajax.set("formId", data.formId);
ajax.start();
};
Feng.confirm("是否删除?", operation);
};
// 渲染表格
var tableResult = table.render({
elem: '#' + EgForm.tableId,
url: Feng.ctxPath + '/egForm/list',
page: true,
height: "full-158",
cellMinWidth: 100,
cols: EgForm.initColumn()
});
// 搜索按钮点击事件
$('#btnSearch').click(function () {
EgForm.search();
});
// 添加按钮点击事件
$('#btnAdd').click(function () {
window.location.href = Feng.ctxPath + "/egForm/add";
});
// 导出excel
$('#btnExp').click(function () {
EgForm.exportExcel();
});
// 工具条点击事件
table.on('tool(' + EgForm.tableId + ')', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'delete') {
EgForm.onDeleteItem(data);
}
});
});
src/main/webapp/assets/modular/demos/form/egForm_add.js 0 → 100644
/**
* 详情对话框
*/
var EgFormInfoDlg = {
data: {
title: "",
singleTime: "",
beginTime: "",
endTime: "",
multiSelect: "",
pictureOne: "",
number: "",
singleSelectOne: "",
singleSelectTwo: "",
pictureTwo: "",
longText: ""
}
};
layui.use(['form', 'admin', 'ax', 'upload', 'laydate', 'selectPlus'], function () {
var $ = layui.jquery;
var $ax = layui.ax;
var form = layui.form;
var admin = layui.admin;
var upload = layui.upload;
var laydate = layui.laydate;
var selectPlus = layui.selectPlus;
//初始化时间选择器
laydate.render({
elem: '#singleTime'
, type: 'datetime'
});
laydate.render({
elem: '#betweenTime'
, range: true //或 range: '~' 来自定义分割字符
});
//初始化多选
var test = selectPlus.render({
el: '#multiSelect',
data: [{
"id": 1,
"name": "spring"
}, {
"id": 2,
"name": "shiro"
}, {
"id": 3,
"name": "mybatis-puls"
}, {
"id": 4,
"name": "beetl"
}],
valueName: "name",
values: ['abc'],
valueSeparator: " --- "
});
selectPlus.on('selectPlus(multiSelect)', function (obj) {
console.log(obj.checked); //当前是否选中状态
console.log(obj.values); //选中的数据
console.log(obj.checkedData); //选中的相关数据
console.log(obj.isAll); //是否是全选
console.log(obj.ele); //点击的DOM
$("#multiSelectHidden").val(obj.values);
});
//上传文件
upload.render({
elem: '#fileBtn'
, url: Feng.ctxPath + '/system/upload'
, accept: 'file'
, before: function (obj) {
obj.preview(function (index, file, result) {
$("#fileNameTip").html(file.name);
});
}
, done: function (res) {
$("#fileInputHidden").val(res.data.fileId);
Feng.success(res.message);
}
, error: function () {
Feng.error("上传图片失败！");
}
});
//普通图片上传
upload.render({
elem: '#picBtn'
, url: Feng.ctxPath + '/system/upload'
, before: function (obj) {
obj.preview(function (index, file, result) {
$('#img1').attr('src', result);
});
}
, done: function (res) {
$("#pictureInputHidden").val(res.data.fileId);
Feng.success(res.message);
}
, error: function () {
Feng.error("上传图片失败！");
}
});
//表单提交事件
form.on('submit(btnSubmit)', function (data) {
var ajax = new $ax(Feng.ctxPath + "/egForm/addItem", function (data) {
Feng.success("添加成功！");
//传给上个页面，刷新table用
admin.putTempData('formOk', true);
//关掉对话框
admin.closeThisDialog();
}, function (data) {
Feng.error("添加失败！" + data.responseJSON.message)
});
ajax.set(data.field);
ajax.start();
});
//返回按钮
$("#backupPage").click(function () {
window.location.href = Feng.ctxPath + "/egForm";
});
});
\ No newline at end of file
src/main/webapp/assets/modular/demos/form/form.css 0 → 100644
#egFormTable + .layui-table-view tbody > tr > td > .layui-table-cell {
height: 60px;
line-height: 60px;
}
.tdImg {
width: 50px;
height: 50px;
max-width: none;
cursor: pointer;
}
\ No newline at end of file
src/main/webapp/pages/modular/demos/form/egForm.html 0 → 100644
@layout("/common/_container.html",{js:["/assets/modular/demos/form/egForm.js"],css:["/assets/modular/demos/form/form.css"]}){
<div class="layui-body-header">
<span class="layui-body-header-title">Guns复杂表单的示例管理</span>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<input id="condition" class="layui-input" type="text" placeholder="名称"/>
</div>
<div class="layui-inline">
<button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
<button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
<button id="btnExp" class="layui-btn icon-btn"><i class="layui-icon">&#xe67d;</i>导出</button>
</div>
</div>
</div>
<table class="layui-table" id="egFormTable" lay-filter="egFormTable"></table>
</div>
</div>
</div>
</div>
</div>
<script type="text/html" id="tableBar">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
@}
\ No newline at end of file
src/main/webapp/pages/modular/demos/form/egForm_add.html 0 → 100644
@layout("/common/_container.html",{js:["/assets/modular/demos/form/egForm_add.js"]}){
<div class="layui-body-header">
<span class="layui-body-header-title">表单的示例-添加</span>
</div>
<div class="layui-fluid " style="">
<div class="layui-card">
<div class="layui-card-body">
<form id="egFormForm" lay-filter="egFormForm" class="layui-form model-form" style="max-width: 700px;margin: 40px auto;">
<input name="formId" type="hidden"/>
<div class="layui-form-item">
<label class="layui-form-label">名称<span style="color: red;">*</span></label>
<div class="layui-input-block">
<input id="name" name="name" placeholder="请输入标题" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单个时间</label>
<div class="layui-input-block">
<input id="singleTime" name="singleTime" placeholder="请输入单个时间，例如2015-01-12 12:00" type="text" class="layui-input" autocomplete="off"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">时间段</label>
<div class="layui-input-block">
<input id="betweenTime" name="betweenTime" placeholder="请输入时间段，例如2019-02-06 - 2019-03-20" type="text" class="layui-input" autocomplete="off"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="simpleSelect" lay-filter="simpleSelect">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分组选择框</label>
<div class="layui-input-block">
<select name="fenzuSelect">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-block">
<select name="modules" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">多个选择</label>
<input id="multiSelectHidden" name="multiSelectHidden" type="hidden" class="layui-input"/>
<div class="layui-input-block" id="multiSelect" lay-filter="multiSelect"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">图片</label>
<div class="layui-input-block">
<input id="pictureInputHidden" name="pictureInputHidden" type="hidden" class="layui-input"/>
<button type="button" class="layui-btn layui-btn-sm" id="picBtn"><i class="layui-icon"></i>选择图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="img1" width="92px" height="92px">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">文件</label>
<div class="layui-input-block">
<input id="fileInputHidden" name="fileInputHidden" type="hidden" class="layui-input"/>
<div style="float: left;">
<button type="button" class="layui-btn layui-btn-sm" id="fileBtn"><i class="layui-icon"></i>选择文件</button>
</div>
<div style="float: left;">
<span class="layui-inline layui-upload-choose" style="padding: 4px 10px;" id="fileNameTip"></span>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关-默认关</label>
<div class="layui-input-block">
<input type="checkbox" name="closeFlag" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="M" title="男" checked="">
<input type="radio" name="sex" value="F" title="女">
<input type="radio" name="sex" value="D" title="禁用" disabled="">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="checkbox[]" value="write" title="写作">
<input type="checkbox" name="checkbox[]" value="read" title="阅读">
<input type="checkbox" name="checkbox[]" value="game" title="游戏">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">数字</label>
<div class="layui-input-inline">
<input type="number" name="number" placeholder="请输入" class="layui-input"/>
</div>
<div class="layui-form-mid layui-word-aux">%</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">长字段</label>
<div class="layui-input-block">
<textarea id="longText" name="longText" placeholder="请输入长字段" class="layui-textarea"></textarea>
</div>
<div class="layui-form-mid layui-word-aux" style="margin-left: 110px;">客户、邀评人默认被分享</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
<button class="layui-btn layui-btn-primary" type="button" id="backupPage">&emsp;返回&emsp;</button>
</div>
</div>
</form>
</div>
</div>
</div>
@}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment