397 lines
14 KiB
HTML
397 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<link href="/jscss/style.css" rel="stylesheet" type="text/css" />
|
||
<script type="text/javascript" charset="utf-8" src="/jscss/theme.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<form class="search" onsubmit="search(this);return false;">
|
||
<div>
|
||
<div class="sinps"></div>
|
||
<div class="sbtns">
|
||
<button class="lang btn" type="submit">查询</button>
|
||
<a class="lang btn" onclick="multiadd()">添加菜单</a>
|
||
<a class="lang btn" onclick="datatxt()">菜单文本</a>
|
||
<a class="lang btn dag" onclick="deltree()">批量删除</a>
|
||
<a class="lang btn def" onclick="pagehelp()">帮助</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class='table'>
|
||
<div class="loading">Loading...</div>
|
||
<div class="list"></div>
|
||
</div>
|
||
</div>
|
||
<div id="alert_pagehelp" style="display:none;">
|
||
<b>页面链接</b>
|
||
<div style="margin: 0 0 1em 1em;">
|
||
相对链接: 选项卡打开manage.html相对路径下的页面<br />
|
||
绝对链接: http开头的url链接，在弹出新窗口打开<br />
|
||
绝对链接: $http开头的url链接，在选项卡打开<br />
|
||
函数调用: 反括号结尾，调用页面函数<br />
|
||
</div>
|
||
<b>原型图</b>
|
||
<div style="margin: 0 0 1em 1em;">
|
||
:开头，弹出说明文字，用|作为换行<br />
|
||
m开头，PC端页面演示<br />
|
||
c开头，统计图表页面演示<br />
|
||
a开头，移动端页面演示。加【,tag=栏目名】定位到子栏目<br />
|
||
以上所有，加【,key=授权码】，支持直接编辑<br />
|
||
左侧菜单支持右键打开原型图，无链接左键打开原型图。<br />
|
||
</div>
|
||
<b>权限</b>
|
||
<div style="margin: 0 0 1em 1em;">
|
||
用strparam格式设置权限。<br />
|
||
权限如不设置，默认有<kbd>v=菜单</kbd>权限。<br />
|
||
权限格式: n=名称|n=名称<br />
|
||
<code>例:</code> d=删除|u=修改|e=导出|i=导入<br />
|
||
</div>
|
||
<b>图标</b>
|
||
<div style="margin: 0 0 1em 1em;">
|
||
一级菜单支持自定义图标<br />
|
||
svg源码格式，建议先用SVG工具瘦身<br />
|
||
</div>
|
||
</div>
|
||
<div id="alert_modifyupid" style="display:none;">
|
||
<div class="ciy-form">
|
||
<label class="lang" style="min-width:3em;">调整到</label>
|
||
<div>
|
||
<ciy-select com="newupid"></select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="alert_multiadd" style="display:none;">
|
||
<div class="ciy-form">
|
||
<label class="lang" style="min-width:3em;">添加到</label>
|
||
<div>
|
||
<ciy-select com="upid"></select>
|
||
</div>
|
||
</div>
|
||
<div class="ciy-form v">
|
||
<label style="min-width:3em;"><span class="lang">名称</span>~<span class="lang">链接</span>~<span class="lang">权限</span><code class="lang">(一行一个)</code></label>
|
||
<div>
|
||
<ciy-textarea com="multi" minheight="30em"></ciy-textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="alert_seticon" style="display:none;">
|
||
<div class="ciy-form v" style="height: 100%;">
|
||
<label style="min-width:3em;"><span class="lang">设置SVG代码</span> <a href="https://i.qiboc.cn/tool/svg2bg.html" target="_blank" style="font-size:0.8em;">SVG工具</a></label>
|
||
<div>
|
||
<ciy-textarea com="svg" minheight="calc(100% - 1em)"></ciy-textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script type="text/javascript" src="/jscss/ciy.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciycmp.js"></script>
|
||
<script type="text/javascript" src="/jscss/ciytable.js"></script>
|
||
<script type="text/javascript" src="../common.js"></script>
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
var table;
|
||
var Glob = {};
|
||
ciyfn.pageload(function () {
|
||
Glob.ciysvg = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path class="svgfill" d="M987.136 384.512C919.552 131.584 668.16-22.528 415.232 27.136c219.648-41.984 434.176 79.36 488.96 283.136 57.344 214.016-82.944 437.76-313.344 499.2-49.664 13.312-78.848 64-65.536 113.152 13.312 49.664 64 78.848 113.152 65.536 263.168-70.144 418.816-340.48 348.672-603.648zM116.224 713.216C58.88 499.2 199.68 275.456 430.08 214.016c49.664-13.312 78.848-64 65.536-113.152C482.816 51.2 432.128 21.504 382.464 34.816c-263.68 70.656-419.84 340.992-349.184 604.16 67.584 252.928 319.488 407.04 571.392 356.864-219.648 42.496-433.664-78.848-488.448-282.624z m93.184-203.776L291.84 449.536c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z m516.096-60.416L808.96 509.952l-149.504-229.888-149.504 229.376 82.432-59.904c44.544-32.256 90.112-32.256 133.12-0.512z m-366.08 291.84L441.856 680.96c44.544-32.256 90.112-32.256 133.12-0.512l83.456 60.928-149.504-230.4-149.504 229.888z"></path></svg>';
|
||
$5(document).on('keydown', function (e) {
|
||
if (e.ctrlKey && e.keyCode == 83) {//Ctrl+S
|
||
e.preventDefault();
|
||
var upbtns = $5('.upbtn:not(.def)');
|
||
upbtns.each(function (dom) {
|
||
menubtn(dom, 'edit');
|
||
}, 0.5);
|
||
}
|
||
});
|
||
table = new ciyclass.table({
|
||
dom: '.table'
|
||
, url: 'init'
|
||
, chkbox: true
|
||
, thfield: function (name, key, field, json) {
|
||
if (key == 'name')
|
||
return '<a style="font-size: 1.5em;vertical-align: middle;padding-right: 0.5em;" onclick="exall()">⇅</a> ' + ciyfn.lang(name);
|
||
}
|
||
, fn_beforedata: function (json) {
|
||
json.list = ciyfn.conv_treerow(json.list, 0, 0);
|
||
ciyfn.fillsearch({
|
||
searchdom: '.search'
|
||
, data: json
|
||
});
|
||
return json;
|
||
}
|
||
, fn_trprop: function (data, json) {
|
||
var rettxt = ' data-upid="' + data['upid'] + '"';
|
||
if (data['_count'] == '0')
|
||
rettxt += ' data-search="ok"';
|
||
// if (data['_deep'] > 0)
|
||
// rettxt += ' style="display:none;"';
|
||
return rettxt;
|
||
}
|
||
, fn_tdcontent: function (key, datashow, field, data) {
|
||
if (key == 'isuse') {
|
||
return '<ciy-switch com="' + key + '" value="' + data[key] + '" y="显示" n="隐藏" />';
|
||
}
|
||
if (key == 'url' || key == 'csort' || key == 'pow') {
|
||
return '<input spellcheck="false" style="width:100%;" onkeydown="btnset(this)" type="text" name="' + key + '" value="' + datashow.replace(/"/g, '"').split('~')[0] + '" onmousedown="event.stopPropagation();"/>';
|
||
}
|
||
if (key == 'icon') {
|
||
if (data['upid'] == 1)
|
||
return '<div style="font-size: 0.7em;line-height: 1.3em;">用户<br/>菜单</div>';
|
||
if (data['upid'] == 2)
|
||
return '<div style="font-size: 0.7em;line-height: 1.3em;">导航<br/>按钮</div>';
|
||
if (data['_deep'] > 0)
|
||
return '';
|
||
if (data[key] && data[key].substring(0, 4) == '<svg')
|
||
return '<div class="icon" onclick="seticon(this,' + data['id'] + ')" onmousedown="event.stopPropagation();" style="cursor:pointer;">' + data[key] + '</div>';
|
||
else
|
||
return '<div class="icon" onclick="seticon(this,' + data['id'] + ')" onmousedown="event.stopPropagation();" style="cursor:pointer;">' + Glob.ciysvg + '</div>';
|
||
}
|
||
if (key == 'demo') {
|
||
var demo = data["url"].split('~')[1] || "";
|
||
return '<input spellcheck="false" style="width:100%;" onkeydown="btnset(this)" type="text" name="' + key + '" value="' + demo + '" onmousedown="event.stopPropagation();"/>';
|
||
}
|
||
if (key == '_btn') {
|
||
var html = '<a class="lang btn def upbtn" onclick="menubtn(this, \'edit\')" onmousedown="event.stopPropagation();">' + (data['id'] == 0 ? '新增' : '更新') + '</a>';
|
||
html += '<a class="lang btn" onclick="menubtn(this, \'tz\')" onmousedown="event.stopPropagation();">调整</a>';
|
||
return html;
|
||
}
|
||
if (key == 'name') {
|
||
var deep = toint(data['_deep']);
|
||
var html = ' '.repeat(deep);
|
||
if (data['_count'] > 0) {
|
||
html += '<span class="ciy-tree-dot">▶</span> <input style="margin-left: 0.3em;width:100%;" onkeydown="btnset(this)" type="text" name="' + key + '" value="' + data['name'] + '"/>';
|
||
} else {
|
||
if (deep > 0)
|
||
html += ' ';
|
||
html += '<input style="width:100%;" onkeydown="btnset(this)" type="text" name="' + key + '" value="' + data['name'] + '"/>';
|
||
}
|
||
return {
|
||
divprop: (data['_count'] > 0 ? ' data-treeid="' + data['id'] + '"' : '') + ' data-deep="' + data['_deep'] + '" style="display: flex;" class="ciy-tree-spread"'// class="ciy-tree-spread"
|
||
, datashow: html
|
||
};
|
||
}
|
||
}
|
||
, fn_done: function () {
|
||
table.tree();
|
||
var doms = $5('[com]');
|
||
for (var i = 0; i < doms.length; i++) {
|
||
ciycmp({
|
||
dom: doms[i], onchange: function (e) {
|
||
if (e.from == 'init') return;
|
||
btnset(e.dom);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
table.callpage(1);
|
||
});
|
||
function exall() {
|
||
$5('div[data-deep="0"]').trigger('click');
|
||
}
|
||
function search(dom) {
|
||
Glob.key = ciyfn.getform(dom);
|
||
$5('[data-search]').each(function (rdom) {
|
||
var bshow = true;
|
||
for (var k in Glob.key) {
|
||
if (!Glob.key[k])
|
||
continue;
|
||
var val = $5('[name=' + k + ']', rdom).val();
|
||
if (val.indexOf(Glob.key[k]) == -1) {
|
||
bshow = false;
|
||
break;
|
||
}
|
||
}
|
||
rdom.style.display = bshow ? '' : 'none';
|
||
});
|
||
}
|
||
function btnset(dom) {
|
||
var domtr = $5(dom).parent('tr');
|
||
$5('.btn.upbtn', domtr).removeClass('def');
|
||
}
|
||
function seticon(dom, id) {
|
||
ciyfn.alert({
|
||
title: '设置图标'
|
||
, width: 'pc'
|
||
, height: 'pc'
|
||
, contentstyle: 'overflow:hidden;'
|
||
, content: document.getElementById("alert_seticon").innerHTML
|
||
, fn_showed: function (doc, sdom) {
|
||
ciycmp({ dom: $5('[com="svg"]', sdom), value: dom.innerHTML });
|
||
}
|
||
, btns: ["设置", "*关闭"]
|
||
, cb: function (opn) {
|
||
if (opn.btn == "关闭")
|
||
return opn.close();
|
||
opn.inputs.id = id;
|
||
if (ciyfn.throttle(opn.dombtn)) return;
|
||
ciyfn.callfunc('seticon', opn.inputs, function (json) {
|
||
if (opn.inputs.svg == '')
|
||
dom.innerHTML = Glob.ciysvg;
|
||
else
|
||
dom.innerHTML = opn.inputs.svg;
|
||
opn.close();
|
||
});
|
||
}
|
||
});
|
||
}
|
||
function multiadd() {
|
||
ciyfn.alert({
|
||
title: '添加'
|
||
, width: 'mb'
|
||
, contentstyle: 'overflow:hidden;'
|
||
, content: document.getElementById("alert_multiadd").innerHTML
|
||
, fn_showed: function (doc, dom) {
|
||
ciycmp({ dom: $5('[com="upid"]', dom), range: fillrange(), value: 0 });
|
||
ciycmp({ dom: $5('[com="multi"]', dom) });
|
||
}
|
||
, btns: ["添加", "*关闭"]
|
||
, cb: function (opn) {
|
||
if (opn.btn == "关闭")
|
||
return opn.close();
|
||
if (ciyfn.throttle(opn.dombtn)) return;
|
||
ciyfn.callfunc('multiadd', opn.inputs, function (json) {
|
||
ciyfn.toast('操作成功', function () {
|
||
opn.close();
|
||
ciyfn.sendsignal(window.top, 'manage_refresh');
|
||
});
|
||
});
|
||
}
|
||
});
|
||
}
|
||
function datatxt() {
|
||
var tdata = new Array();
|
||
for (var i in table.data) {
|
||
if (table.data[i].isuse != 1)
|
||
continue;
|
||
tdata.push(table.data[i]);
|
||
}
|
||
tdata.sort((a, b) => toint(b.csort) - toint(a.csort));
|
||
function deeptxt(tdata, upid = 0, indent = '') {
|
||
var menutxt = '';
|
||
for (var i in tdata) {
|
||
if (tdata[i].upid != upid)
|
||
continue;
|
||
menutxt += indent + tdata[i].name + '\n';
|
||
if (tdata[i].upid === upid)
|
||
menutxt += deeptxt(tdata, tdata[i].id, indent + '--');
|
||
}
|
||
return menutxt;
|
||
}
|
||
ciyfn.alert({
|
||
title: '菜单文本'
|
||
, width: 'mb'
|
||
, height: 'pc'
|
||
, content: '<textarea style="height: 100%;">' + deeptxt(tdata) + '</textarea>'
|
||
});
|
||
}
|
||
function pagehelp() {
|
||
ciyfn.alert({
|
||
title: '页面帮助'
|
||
, width: 'pc'
|
||
, content: document.getElementById("alert_pagehelp").innerHTML
|
||
});
|
||
}
|
||
|
||
function menubtn(dom, btn) {
|
||
var domtr = $5(dom).parent('tr');
|
||
var id = toint(domtr.attr('data-id'));
|
||
if (btn == 'edit') {
|
||
var postparam = ciyfn.getform(dom, 'TR');
|
||
postparam.id = id;
|
||
postparam.upid = table.data[id].upid;
|
||
ciyfn.callfunc('update', postparam, function (json) {
|
||
$5(dom).addClass('def');
|
||
$5('[name=url]', domtr).val(json.url);
|
||
$5('[name=demo]', domtr).val(json.demo);
|
||
$5('[name=pow]', domtr).val(json.pow);
|
||
});
|
||
}
|
||
if (btn == 'tz') {
|
||
ciyfn.alert({
|
||
title: '调整菜单项层级'
|
||
, content: document.getElementById("alert_modifyupid").innerHTML
|
||
, fn_showed: function (doc, dom) {
|
||
if (id == 0)
|
||
return;
|
||
ciycmp({ dom: $5('[com="newupid"]', dom), range: fillrange(), value: table.data[id].upid });
|
||
}
|
||
, btns: ["调整", "*关闭"]
|
||
, cb: function (opn) {
|
||
if (opn.btn == "关闭")
|
||
return opn.close();
|
||
opn.inputs.id = id;
|
||
if (ciyfn.throttle(opn.dombtn)) return;
|
||
ciyfn.callfunc('modifyupid', opn.inputs, function (json) {
|
||
opn.close();
|
||
ciyfn.sendsignal(window.top, 'manage_refresh');
|
||
});
|
||
}
|
||
});
|
||
}
|
||
}
|
||
function fillrange() {
|
||
var tdata = [];
|
||
for (var i in table.data)
|
||
tdata.push(table.data[i]);
|
||
tdata.sort((a, b) => toint(b.csort) - toint(a.csort));
|
||
var ranges = [];
|
||
ranges.push({ id: 0, name: '顶层' });
|
||
deephtml(tdata, 0, 1, 5);
|
||
function deephtml(tdata, upid, deep, maxdeep) {
|
||
if (deep > maxdeep)
|
||
return;
|
||
for (var i in tdata) {
|
||
if (tdata[i].upid != upid)
|
||
continue;
|
||
ranges.push({ id: tdata[i].id, name: ' '.repeat(deep) + ciyfn.lang(tdata[i].name) });
|
||
deephtml(tdata, tdata[i].id, deep + 1, maxdeep);
|
||
}
|
||
}
|
||
ranges.push({ id: 1, name: '【' + ciyfn.lang('用户菜单') + '】' });
|
||
ranges.push({ id: 2, name: '【' + ciyfn.lang('导航按钮') + '】' });
|
||
return ranges;
|
||
}
|
||
function deltree() {
|
||
var array = [];
|
||
$5('[data-id]', '.table').each(function (dom) {
|
||
if (!$5(dom).hasClass("selected"))
|
||
return;
|
||
var deep = toint($5('[data-deep]', dom).attr("data-deep"));
|
||
array.push({ id: $5(dom).attr("data-id"), deep: deep });
|
||
});
|
||
if (array.length == 0)
|
||
return ciyfn.toast("请至少选择一条信息");
|
||
ciyfn.alert('已选<span class="txt-lggg px1">' + array.length + '</span>条，确认批量删除?', function (opn) {
|
||
opn.close();
|
||
if (opn.btn == "关闭")
|
||
return;
|
||
function deldeep(deep) {
|
||
if (deep < 0)
|
||
return;
|
||
var ids = [];
|
||
for (var j = 0; j < array.length; j++) {
|
||
if (array[j].deep == deep) {
|
||
ids.push(array[j].id);
|
||
}
|
||
}
|
||
if (ids.length == 0)
|
||
return deldeep(deep - 1);
|
||
var postparam = {};
|
||
postparam.ids = ids.join(",");
|
||
ciyfn.callfunc('del', postparam, function (json) {
|
||
table.delline(json);
|
||
deldeep(deep - 1);
|
||
});
|
||
}
|
||
deldeep(5);
|
||
}, { btns: ["删除", "*关闭"] });
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |