实现view的扩展架构;调整think-view依赖;发布新版本

This commit is contained in:
2023-09-25 10:35:03 +08:00
parent 9f43e11f81
commit 5955a03d2c
94 changed files with 244 additions and 48 deletions

View File

@@ -0,0 +1,14 @@
var table = layui.table,
treetable = layui.treetable,
iconPickerFa = layui.iconPickerFa,
autocomplete = layui.autocomplete;
var init = {
table_elem: '#currentTable',
table_render_id: 'currentTableRenderId',
index_url: 'system.menu/index',
add_url: 'system.menu/add',
delete_url: 'system.menu/delete',
edit_url: 'system.menu/edit',
modify_url: 'system.menu/modify',
};

View File

@@ -0,0 +1,81 @@
<style>
.layui-iconpicker-body.layui-iconpicker-body-page .hide {
display: none;
}
</style>
<link rel="stylesheet" href="__STATIC__/plugs/lay-module/autocomplete/autocomplete.css?v={$version}" media="all">
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label required">上级菜单</label>
<div class="layui-input-block">
<select name="pid">
{foreach $pidMenuList as $vo}
<option value="{$vo.id}" {if $id==$vo.id}selected=""{/if}>{$vo.title|raw}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">菜单名称</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" lay-reqtext="请输入菜单名称" placeholder="请输入菜单名称" value="">
<tip>填写菜单名称。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单链接</label>
<div class="layui-input-block">
<input type="text" id="href" name="href" class="layui-input" lay-reqtext="请输入菜单链接" placeholder="请输入菜单链接" value="">
<tip>填写菜单链接。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择图标</label>
<div class="layui-input-block">
<input type="text" id="icon" name="icon" lay-filter="icon" class="hide" value="fa fa-list">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">target属性</label>
<div class="layui-input-block">
{foreach ['_self','_blank','_parent','_top'] as $vo}
<input type="radio" name="target" value="{$vo}" title="{$vo}" {if $vo=='_self'}checked=""{/if}>
{/foreach}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限标志</label>
<div class="layui-input-block">
<input type="text" name="auth_node" class="layui-input" placeholder="请输入权限标志" value="">
<tip>明确指定一个权限标志,判断权限时按照该值判断。默认按照菜单链接判断权限。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单排序</label>
<div class="layui-input-block">
<input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="0" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
</form>
</div>

View File

@@ -0,0 +1,31 @@
$(function () {
iconPickerFa.render({
elem: '#icon',
url: PATH_CONFIG.iconLess,
limit: 12,
click: function (data) {
$('#icon').val('fa ' + data.icon);
},
success: function (d) {
}
});
autocomplete.render({
elem: $('#href')[0],
url: ua.url('system.menu/getMenuTips'),
template_val: '{{-d.node}}',
template_txt: '{{-d.node}} <span class=\'layui-badge layui-bg-gray\'>{{-d.title}}</span>',
onselect: function (resp) {
}
});
ua.listen(function (data) {
return data;
}, function (res) {
ua.msg.success(res.msg, function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.$('[data-treetable-refresh]').trigger("click");
});
});
});

View File

@@ -0,0 +1,81 @@
<style>
.layui-iconpicker-body.layui-iconpicker-body-page .hide {
display: none;
}
</style>
<link rel="stylesheet" href="__STATIC__/plugs/lay-module/autocomplete/autocomplete.css?v={$version}" media="all">
<div class="layuimini-container">
<form id="app-form" class="layui-form layuimini-form">
<div class="layui-form-item layui-row layui-col-xs12">
<label class="layui-form-label required">上级菜单</label>
<div class="layui-input-block">
<select name="pid">
{foreach $pidMenuList as $vo}
<option value="{$vo.id}" {if $row.pid==$vo.id}selected=""{/if}>{$vo.title|raw}</option>
{/foreach}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">菜单名称</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input" lay-verify="required" lay-reqtext="请输入菜单名称" placeholder="请输入菜单名称" value="{$row.title|default=''}">
<tip>填写菜单名称。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单链接</label>
<div class="layui-input-block">
<input type="text" name="href" id="href" class="layui-input" lay-reqtext="请输入菜单链接" placeholder="请输入菜单链接" value="{$row.href|default=''}">
<tip>填写菜单链接。</tip>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择图标</label>
<div class="layui-input-block">
<input type="text" id="icon" name="icon" lay-filter="icon" class="hide" value="{$row.icon|default=''}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">target属性</label>
<div class="layui-input-block">
{foreach ['_self','_blank','_parent','_top'] as $vo}
<input type="radio" name="target" value="{$vo}" title="{$vo}" {if $row.target==$vo}checked=""{/if}>
{/foreach}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">菜单排序</label>
<div class="layui-input-block">
<input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="{$row.sort|default=''}" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">权限标志</label>
<div class="layui-input-block">
<input type="text" name="auth_node" class="layui-input" placeholder="请输入权限标志" value="{$row.auth_node|default=''}">
<tip>明确指定一个权限标志,判断权限时按照该值判断。默认按照菜单链接判断权限。</tip>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">备注信息</label>
<div class="layui-input-block">
<textarea name="remark" class="layui-textarea" placeholder="请输入备注信息">{$row.remark|default=''}</textarea>
</div>
</div>
<div class="hr-line"></div>
<div class="layui-form-item text-center">
<button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit>确认</button>
<button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
</div>
</form>
</div>

View File

@@ -0,0 +1,31 @@
$(function () {
iconPickerFa.render({
elem: '#icon',
url: PATH_CONFIG.iconLess,
limit: 12,
click: function (data) {
$('#icon').val('fa ' + data.icon);
},
success: function (d) {
console.log(d);
}
});
autocomplete.render({
elem: $('#href')[0],
url: ua.url('system.menu/getMenuTips'),
template_val: '{{-d.node}}',
template_txt: '{{-d.node}} <span class=\'layui-badge layui-bg-gray\'>{{-d.title}}</span>',
onselect: function (resp) {
}
});
ua.listen(function (data) {
return data;
}, function (res) {
ua.msg.success(res.msg, function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.$('[data-treetable-refresh]').trigger("click");
});
});
});

View File

@@ -0,0 +1,24 @@
<link rel="stylesheet" href="__STATIC__/plugs/lay-module/treetable-lay/treetable.css?v={:time()}" media="all">
<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
height: 34px;
line-height: 34px;
padding: 0 8px;
}
</style>
<div class="layuimini-container">
<div class="layuimini-main">
<table id="currentTable" class="layui-table layui-hide"
data-auth-add="{:auth('system.menu/add')}"
data-auth-edit="{:auth('system.menu/edit')}"
data-auth-delete="{:auth('system.menu/delete')}"
data-auth-modify="{:auth('system.menu/modify')}"
lay-filter="currentTable">
</table>
</div>
</div>
<script type="text/html" id="toolbar">
<button class="layui-btn layui-btn-sm layuimini-btn-primary" data-treetable-refresh><i class="fa fa-refresh"></i> </button>
<button class="layui-btn layui-btn-normal layui-btn-sm {if !auth('system.menu/add')}layui-hide{/if}" data-open="system.menu/add" data-title="添加" data-full="true"><i class="fa fa-plus"></i> 添加</button>
<button class="layui-btn layui-btn-sm layui-btn-danger {if !auth('system.menu/del')}layui-hide{/if}" data-url="system.menu/del" data-treetable-delete="currentTableRenderId"><i class="fa fa-trash-o"></i> 删除</button>
</script>

View File

@@ -0,0 +1,162 @@
$(function () {
var renderTable = function () {
layer.load(2);
treetable.render({
treeColIndex: 1,
treeSpid: 0,
homdPid: 99999999,
treeIdName: 'id',
treePidName: 'pid',
url: ua.url(init.index_url),
elem: init.table_elem,
id: init.table_render_id,
toolbar: '#toolbar',
page: false,
skin: 'line',
// @todo 不直接使用ua.table.render(); 进行表格初始化, 需要使用 ua.table.formatCols(); 方法格式化`cols`列数据
cols: ua.table.formatCols([[
{ type: 'checkbox' },
{ field: 'title', sort: false, width: 250, title: '菜单名称', align: 'left' },
{ field: 'icon', sort: false, width: 80, title: '图标', templet: ua.table.icon },
{ field: 'href', sort: false, minWidth: 120, title: '菜单链接' },
{
field: 'is_home', sort: false,
width: 80,
title: '类型',
templet: function (d) {
if (d.pid === 99999999) {
return '<span class="layui-badge layui-bg-blue">首页</span>';
}
if (d.pid === 0) {
return '<span class="layui-badge layui-bg-gray">模块</span>';
} else {
return '<span class="layui-badge-rim">菜单</span>';
}
}
},
{ field: 'status', sort: false, title: '状态', width: 85, templet: ua.table.switch },
{ field: 'sort', sort: false, width: 80, title: '排序', edit: 'text' },
{
width: 220,
title: '操作',
fixed: 'right',
templet: ua.table.tool,
operat: [
[{
text: '添加下级',
url: init.add_url,
method: 'open',
auth: 'add',
class: 'layui-btn layui-btn-xs layui-btn-normal',
extend: 'data-full="true"',
_if: function (data) {
if (data.pid == 99999999) {
return false;
}
return true;
}
}, {
text: '编辑',
url: init.edit_url,
method: 'open',
auth: 'edit',
class: 'layui-btn layui-btn-xs layui-btn-success',
extend: 'data-full="true"',
_if: 'status'
}, {
text: '删除',
method: 'none',
auth: 'delete',
class: 'layui-btn layui-btn-xs layui-btn-danger',
extend: 'data-treetable-delete-item="1" data-url="' + init.delete_url + '"',
data: ['id', 'title'],
_if(data) {
if (data.pid == ua.getDataBrage('menu_home_pid')) {
return false
}
return true;
}
},],
]
}
]], init),
done: function () {
layer.closeAll('loading');
$(".layui-table-main tr").each(function (index, val) {
$(".layui-table-fixed").each(function () {
$($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
});
});
}
});
};
renderTable();
$('body').on('click', '[data-treetable-refresh]', function () {
renderTable();
});
$('body').on('click', '[data-treetable-delete-item]', function () {
var id = $(this).data('id');
var url = $(this).attr('data-url');
url = url != undefined ? ua.url(url) : window.location.href;
ua.msg.confirm('确定删除?', function () {
ua.request.post({
url: url,
data: {
id: id
},
}, function (res) {
ua.msg.success(res.msg, function () {
renderTable();
});
});
});
return false;
})
$('body').on('click', '[data-treetable-delete]', function () {
var tableId = $(this).attr('data-treetable-delete'),
url = $(this).attr('data-url');
tableId = tableId || init.table_render_id;
url = url != undefined ? ua.url(url) : window.location.href;
var checkStatus = table.checkStatus(tableId),
data = checkStatus.data;
if (data.length <= 0) {
ua.msg.error('请勾选需要删除的数据');
return false;
}
var ids = [];
$.each(data, function (i, v) {
ids.push(v.id);
});
ua.msg.confirm('确定删除?', function () {
ua.request.post({
url: url,
data: {
id: ids
},
}, function (res) {
ua.msg.success(res.msg, function () {
renderTable();
});
});
});
return false;
});
ua.table.listenSwitch({ filter: 'status', url: init.modify_url });
ua.table.listenEdit(init, 'currentTable', init.table_render_id, false);
ua.listen();
});