新增基础数据维护界面

pull/1/head
wangziyangyang 2020-03-11 08:16:42 +08:00
parent 39919fc6bd
commit ae414db7f7
3 changed files with 578 additions and 4 deletions

View File

@ -10,10 +10,8 @@ import io.swagger.annotations.ApiImplicitParams;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@ -34,6 +32,19 @@ public class SpTableManagerItemController extends BaseController {
@Autowired
private ISpTableManagerItemService iSpTableManagerItemService;
/**
*
*
* @param model
* @return
*/
@ApiOperation("主数据管理平台UI")
@ApiImplicitParams({@ApiImplicitParam(name = "model", value = "模型", defaultValue = "模型")})
@GetMapping("/list-ui")
public String listUI(Model model) {
return "basedata/manageritem/list";
}
/**
*
*

View File

@ -0,0 +1,346 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加字段</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<#include "${request.contextPath}/common/common.ftl">
</head>
<body>
<div class="splayui-container">
<div class="splayui-main">
<form class="layui-form splayui-form">
<div class="layui-row">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
<div class="layui-form-item">
<div class="layui-input-inline layui-hide">
<input type="text" id="js-table-id" autocomplete="off"
class="layui-input" value="${result.id}">
</div>
</div>
<div class="layui-form-item">
<label for="js-name" class="layui-form-label sp-required">表名称
</label>
<div class="layui-input-inline">
<input type="text" id="js-name" name="tableName" lay-verify="required" autocomplete="off"
class="layui-input" value="${result.tableName}">
</div>
</div>
<div class="layui-form-item">
<label for="js-descr" class="layui-form-label sp-required">业务描述</label>
<div class="layui-input-inline">
<input type="text" id="js-descr" name="tableDesc" lay-verify="" autocomplete="off"
class="layui-input" value="${result.tableDesc}">
</div>
</div>
<div class="layui-form-item">
<label for="js-is-deleted" class="layui-form-label sp-required">状态</label>
<div class="layui-input-block" id="js-is-deleted">
<input type="radio" name="isDeleted" value="0" title="正常"
<#if result.isDeleted == "0" || !(result??)>checked</#if>>
<input type="radio" name="isDeleted" value="1" title="删除"
<#if result.isDeleted == "1">checked</#if>>
<input type="radio" name="isDeleted" value="2" title="禁用"
<#if result.isDeleted == "2">checked</#if>>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
<div class="box-between">
<div class="box-between-item">
<label class="layui-form-label" style="width: 120px;">
表字段(共 <span id="js-item-count">0</span> 项)
</label>
<div class="layui-input-inline" style="width: 100px;">
<p id="js-process-package-name" style="line-height: 40px;"></p>
</div>
</div>
<div class="box-between-item">
<div style="margin: 4px 20px 0px 0px;">
<button id="js-rule-item-add" type="button"
class="layui-btn layui-btn-normal layui-btn-xs" style="color: #fff">
<i class="layui-icon layui-icon-add-circle" style="margin-right: 0px;"></i>
</button>
<button id="js-rule-item-del" type="button"
class="layui-btn layui-btn-normal layui-btn-xs" style="color: #fff">
<i class="layui-icon layui-icon-delete" style="margin-right: 0px;"></i>
</button>
</div>
</div>
</div>
<div id="js-rule-detail-tpl-view" style="margin: 15px 0px 30px 0px;">
</div>
</div>
<div class="layui-form-item layui-hide">
<div class="layui-input-block">
<input id="js-id" name="id" value="${result.id}"/>
<button id="js-submit" class="layui-btn" lay-submit lay-filter="js-submit-filter">确定</button>
</div>
</div>
</div>
</form>
</div>
</div>
<!--每次模板生成代码的临时存放容器生成后添加到id=js-rule-detail-tpl-view的容器后面-->
<div class="layui-hide">
<div id="js-rule-detail-tpl-view-temp"></div>
</div>
<!-- 字段模板 -->
<script id="js-rule-detail-tpl" type="text/html">
<div id="js-rule-item-{{d.inputId}}" class="layui-form-item">
<div class="layui-input-inline" style="width: 20px; margin-right: 15px; margin-left: 75px;">
<input type="checkbox" name="delFlag" value="{{d.inputId}}" lay-skin="primary" title=""
style="margin-top: 0px;">
</div>
<label class="layui-form-label layui-form-label-per" style="width: 58px !important;">字段名称</label>
<div class="layui-input-inline" style="width: 150px; ">
<select id="js-rule-item-type-{{d.inputId}}" data-input-id="{{d.inputId}}" lay-verify="required"
lay-filter="js-rule-item-type-filter">
<option value="">请选择</option>
{{# layui.each(d.ruleItems, function(index, item){ }}
<option value="{{item.field}}">{{item.field}}</option>
{{# }); }}
</select>
</div>
<label class="layui-form-label layui-form-label-per" style="width: 58px !important">显示名称</label>
<div class="layui-input-inline" style="width: 100px;margin-right: 2px;">
<input id="js-field-desc-{{d.inputId}}" type="text" class="layui-input"
lay-verify="required">
</div>
<div id="js-rule-detail-item-tpl-view-{{d.inputId}}">
</div>
</div>
</script>
<!-- 打码规则项input模板 -->
<script id="js-rule-detail-item-tpl" type="text/html">
<label class="layui-form-label layui-form-label-per" style="width: 60px;">是否必填</label>
<div class="layui-input-inline" style="width: 80px;margin-right: 2px;">
<select id="js-must-fill-{{d.id}}" lay-verify="required">
<option value="">请选择</option>
<option value="Y">是</option>
<option value="N">否</option>
</select>
</div>
</script>
<script>
layui.use(['form', 'util', 'laytpl'], function () {
var form = layui.form,
util = layui.util,
laytpl = layui.laytpl,
ruleDetailTplDataCopy = {},
ruleDetailTplData = {},
ruleItemIdArr = [];
//数据回显操作 存在主表ID时候重新绘制
if ($('#js-table-id').val()) {
ruleDetailTplData.ruleItems = ruleDetailTplData.ruleItems ? ruleDetailTplData.ruleItems : addBindData();
ruleDetailRow();
}
//失去焦点时判断值为空不验证,一旦填写必须验证
$('input[name="email"]').blur(function () {
//这里是失去焦点时的事件
if ($('input[name="email"]').val()) {
$('input[name="email"]').attr('lay-verify', 'email');
} else {
$('input[name="email"]').removeAttr('lay-verify');
}
});
//监听提交
form.on('submit(js-submit-filter)', function (data) {
var requestParmaArr = [];
var sort = 1;
$.each(ruleItemIdArr, function (index, item) {
requestParmaArr.push({
mustFill: $('#js-must-fill-' + item).val(),
field: $('#js-rule-item-type-' + item).val(),
fieldDesc: $('#js-field-desc-' + item).val(),
sortNum: sort++,
tableNameId: $('#js-table-id').val()
});
});
data.field.spTableManagerItems = requestParmaArr;
spUtil.submitForm({
contentType: 'application/json',
url: "${request.contextPath}/basedata/manager/add-or-update",
data: JSON.stringify(data.field)
});
return false;
});
/**
* 添加规则项事件
*/
$('#js-rule-item-add').click(function () {
if (!$('#js-name').val()) {
layer.alert('表名称不能为空', {
icon: 2
})
return;
}
ruleDetailTplData.ruleItems = ruleDetailTplData.ruleItems ? ruleDetailTplData.ruleItems : addBindData();
if (!ruleDetailTplData.ruleItems) {
return;
}
// distinctSelect();
addRuleDetail();
updItemCount();
});
/**
*初始化表信息数据
*/
function addBindData() {
var ajaxResult;
spUtil.ajax({
url: '${request.contextPath}/basedata/manager/by/tableName',
async: false,
type: 'POST',
// 是否显示 loading
showLoading: true,
// 是否序列化参数
serializable: false,
// 参数
data: {
tableName: $('#js-name').val()
},
success: function (data) {
ajaxResult = data.data;
ruleDetailTplDataCopy.ruleItems = data.data;
}
});
return ajaxResult;
}
/**
* 删除规则项事件
*/
$('#js-rule-item-del').click(function () {
//获取表单区域所有值
$("input:checkbox[name='delFlag']:checked").each(function (i) {
var ruleItemIdArrIndex = ruleItemIdArr.indexOf($(this).val());
if (ruleItemIdArrIndex > -1) {
ruleItemIdArr.splice(ruleItemIdArrIndex, 1);
}
$('#js-rule-item-' + $(this).val()).remove();
});
updItemCount();
});
/**
* 添加规则详情
*/
function addRuleDetail() {
//获取表单区域所有值,若有选中,则向最后一个选择项后面添加
var selInputId = '';
$("input:checkbox[name='delFlag']:checked").each(function (i) {
selInputId = $(this).val();
});
var inputId = spUtil.genNonDuplicateID();
ruleDetailTplData.inputId = inputId;
ruleItemIdArr.push(inputId);
var getTpl = document.getElementById('js-rule-detail-tpl').innerHTML,
tplView = document.getElementById('js-rule-detail-tpl-view-temp');
laytpl(getTpl).render(ruleDetailTplData, function (html) {
tplView.innerHTML = html;
});
if (selInputId) {
$('#js-rule-item-' + selInputId).after(tplView.innerHTML);
} else {
$('#js-rule-detail-tpl-view').append(tplView.innerHTML);
}
tplView.innerHTML = '';
createItemDetail(inputId);
//重新渲染 固定写法
form.render();
return inputId;
}
/**
* 监听 过滤列表数据select
*/
function distinctSelect() {
var requestArr = [];
$.each(ruleItemIdArr, function (index, item) {
requestArr.push($('#js-rule-item-type-' + item).val());
});
//初始化数据
ruleDetailTplData.ruleItems = ruleDetailTplDataCopy.ruleItems;
$.each(ruleDetailTplDataCopy.ruleItems, function (index, item) {
if (requestArr.indexOf(item.field) > -1) {
ruleDetailTplData.ruleItems.splice(index, 1);
}
});
};
function createItemDetail(inputId) {
var getTpl = document.getElementById('js-rule-detail-item-tpl').innerHTML,
tplView = document.getElementById('js-rule-detail-item-tpl-view-' + inputId);
laytpl(getTpl).render({id: inputId}, function (html) {
tplView.innerHTML = html;
});
}
/**
* 计算规则项数量
*/
function updItemCount() {
$('#js-item-count').html(ruleItemIdArr.length);
}
function ruleDetailRow() {
// layer.load() 在使用异步请求时起效ajax异步请求、定时器
// 但是用ES6的promise不生效所以此处采用定时器实现
window.setTimeout(function () {
var ruleDetailRows;
spUtil.ajax({
url: '${request.contextPath}/basedata/manager/item/by/tableNameId',
async: false,
type: 'POST',
// 是否显示 loading
showLoading: true,
// 是否序列化参数
serializable: false,
// 参数
data: {
tableNameId: $('#js-table-id').val()
},
success: function (data) {
ruleDetailRows = data.data;
}
});
//打码规则项渲染赋值
console.log(ruleDetailRows);
$.each(ruleDetailRows, function (index, item) {
var inputId = addRuleDetail();
//必填项
$('#js-must-fill-' + inputId).val(item.mustFill);
//字段名称
console.log(item.field);
$('#js-rule-item-type-' + inputId).val(item.field);
//字段详细名称
$('#js-field-desc-' + inputId).val(item.fieldDesc);
});
form.render();
updItemCount();
}, 100);
}
});
</script>
</body>
</html>

View File

@ -0,0 +1,217 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础数据维护界面</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<#include "${request.contextPath}/common/common.ftl">
</head>
<body>
<div class="splayui-container">
<div class="layui-row">
<div class="layui-col-md3">
<table id="js-table-name" lay-filter="js-table-name-filter"></table>
</div>
<div class="layui-col-md9">
<div class="splayui-main">
<!--查询参数-->
<form id="js-search-form" class="layui-form" lay-filter="js-q-form-filter">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">表名称</label>
<div class="layui-input-inline">
<input type="text" name="tableName" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<a class="layui-btn" lay-submit lay-filter="js-search-filter"><i
class="layui-icon layui-icon-search layuiadmin-button-btn"></i></a>
</div>
</div>
</form>
<!--表格-->
<table class="layui-hide" id="js-record-table" lay-filter="js-record-table-filter"></table>
</div>
</div>
</div>
</div>
<!--表格头操作模板-->
<script type="text/html" id="js-record-table-toolbar-top">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteBatch"><i
class="layui-icon">&#xe640;</i>批量删除
</button>
<@shiro.hasPermission name="user:add">
<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe61f;</i>添加</button>
</@shiro.hasPermission>
</div>
</script>
<!--行操作模板-->
<script type="text/html" id="js-record-table-toolbar-right">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--js逻辑-->
<script>
layui.use(['form', 'table', 'splayer', 'sptable'], function () {
var form = layui.form,
table = layui.table,
splayer = layui.splayer,
sptable = layui.sptable;
// 表格及数据初始化
var tableIns = sptable.render({
url: '${request.contextPath}/basedata/manager/page',
cols: [
[{
type: 'checkbox'
}, {
field: 'tableName', title: '表名称', width: 120
}, {
field: 'tableDesc', title: '业务描述', width: 130
}, {
field: 'createUsername', title: '创建用户', width: 130
}, {
field: 'createTime', title: '创建时间', width: 160
}, {
field: 'updateUsername', title: '更改用户', width: 130
}, {
field: 'updateTime', title: '更改时间', width: 160
}, {
field: 'isDeleted', title: '状态', width: 90, templet: function (records) {
return spConfig.isDeletedDict[records.isDeleted];
}
}, {
fixed: 'right',
field: 'operate',
title: '操作',
toolbar: '#js-record-table-toolbar-right',
unresize: true,
width: 150
}]
],
done: function (res, curr, count) {
}
});
// 表格及数据初始化
var tableIns = sptable.render({
toolbar:'',
elem: '#js-table-name',//指定原始表格元素选择器推荐id选择器
height: 'full-26',
url: '${request.contextPath}/basedata/manager/page',
cols: [
[{
field: 'tableName', title: '表名称'
}, {
field: 'tableDesc', title: '业务描述'
}]
],
done: function (res, curr, count) {
}
});
/*
* 数据表格中form表单元素是动态插入,所以需要更新渲染下
* http://www.layui.com/doc/modules/form.html#render
*/
$(function () {
form.render();
});
/**
* 搜索按钮事件
*/
form.on('submit(js-search-filter)', function (data) {
tableIns.reload({
where: data.field,
page: {
// 重新从第 1 页开始
curr: 1
}
});
// 阻止表单跳转。如果需要表单跳转,去掉这段即可。
return false;
});
/**
* 头工具栏事件
*/
table.on('toolbar(js-record-table-filter)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
// 批量删除
if (obj.event === 'deleteBatch') {
var checkStatus = table.checkStatus('js-record-table'),
data = checkStatus.data;
if (data.length > 0) {
layer.confirm('确认要删除吗?', function (index) {
});
} else {
layer.msg("请先选择需要删除的数据!");
}
}
// 添加
if (obj.event === 'add') {
var index = splayer.open({
title: '添加',
area: ['60%', '90%'],
content: '${request.contextPath}/basedata/manager/add-or-update-ui'
});
}
});
/**
* 监听行工具事件
*/
table.on('tool(js-record-table-filter)', function (obj) {
var data = obj.data;
// 编辑
if (obj.event === 'edit') {
splayer.open({
title: '编辑',
area: ['60%', '90%'],
// 请求url参数
spWhere: {id: data.id},
content: '${request.contextPath}/basedata/manager/add-or-update-ui'
});
}
// 删除
if (obj.event === 'delete') {
layer.confirm('确认要删除吗?', function (index) {
spUtil.ajax({
url: '${request.contextPath}/basedata/manager/delete/by/tableNameId',
async: false,
type: 'POST',
// 是否显示 loading
showLoading: true,
// 是否序列化参数
serializable: false,
// 参数
data: {
id: data.id
},
success: function (data) {
tableIns.reload();
layer.close(index);
},
error: function () {
}
});
});
}
});
});
</script>
</body>
</html>