198 lines
6.2 KiB
HTML
198 lines
6.2 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>
|
||
<style>
|
||
.ciy-checkbox {
|
||
min-width: 6em;
|
||
}
|
||
|
||
.v1 .line {
|
||
transition: all 1s;
|
||
display: flex;
|
||
}
|
||
|
||
.v1 .line:hover {
|
||
background: var(--bg3);
|
||
border-radius: 0.5em;
|
||
}
|
||
|
||
.v3 {
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
.v3 .title {
|
||
border-left: 4px solid var(--bg6);
|
||
font-weight: bold;
|
||
padding: 0.3em 0.7em;
|
||
border-bottom: 1px solid var(--bg6);
|
||
border-right: 4px solid var(--bg6);
|
||
border-top: 1px solid var(--bg6);
|
||
cursor: pointer;
|
||
line-height: 1.5em;
|
||
display: inline-block;
|
||
}
|
||
|
||
.v3 .box {
|
||
padding: 0.5em;
|
||
border: 1px solid var(--bg6);
|
||
margin-top: -2px;
|
||
background: var(--bg1);
|
||
position: relative;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<form class="char5">
|
||
<div class="ciy-form" data-check>
|
||
<label class="lang">角色名称</label>
|
||
<div><input type="text" name="name" style="width:10em;" /></div>
|
||
</div>
|
||
<div class="ciy-form">
|
||
<label class="lang">角色说明</label>
|
||
<div><input type="text" name="memo" style="width:100%;" /></div>
|
||
</div>
|
||
<div class="ciy-form">
|
||
<div id="id_powers"></div>
|
||
</div>
|
||
<div style="height:4.5em;"></div>
|
||
<div class="form-bottom" id="id_submit">
|
||
<a class="lang btn" onclick="javascript:formsubmit(this);"> 提交(Ctrl+S) </a>
|
||
</div>
|
||
</form>
|
||
</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">
|
||
ciyfn.pageload(function () {
|
||
$5(document).on('keydown', function (e) {
|
||
if (e.ctrlKey && e.keyCode == 83) {//Ctrl+S
|
||
e.preventDefault();
|
||
formsubmit(document.getElementById("id_submit"));
|
||
}
|
||
});
|
||
ciyfn.callfunc("init", {}, function (json) {
|
||
if (json.data) {
|
||
$5('input[name=name]').val(json.data.name);
|
||
$5('input[name=memo]').val(json.data.memo);
|
||
} else
|
||
json.data = { power: '' };
|
||
var pman = '';
|
||
var powers = json.data.power.split('.');
|
||
var uls = [];
|
||
var html = '';
|
||
var coms = {};
|
||
var menus = ciyfn.arr_treemap(json.pcmenu, 0);
|
||
uls.push(ciyfn.lang('PC端权限'));
|
||
html += '<div class="tabcontent">';
|
||
html += fillchild(menus, 0);
|
||
html += '</div>';
|
||
function fillchild(sub, deep) {
|
||
if (!sub)
|
||
return '';
|
||
var htmlx = '<div data-deep="' + deep + '" class="v1" data-v>';
|
||
for (var m in sub) {
|
||
var scope = 'p' + sub[m].id;
|
||
var bgp = (powers.indexOf(scope) > -1);
|
||
pman += scope + ',';
|
||
htmlx += '<div data-v' + (sub[m].child ? '' : ' class="line"') + '>';
|
||
htmlx += '<div style="min-width:15em;padding-left:' + (deep * 1) + 'em;display: inline-block;cursor: pointer;font-weight:bold;"><span onclick="selectchild(this)">' + ciyfn.lang(sub[m].name) + '</span></div>';
|
||
if (sub[m].child)
|
||
htmlx += fillchild(sub[m].child, deep + 1);
|
||
else {
|
||
var prs = ciyfn.getstrparam('v=菜单|' + sub[m].pow);//n=修改|d=删除|c=导出
|
||
htmlx += '<div style="min-width:5em;display: inline-block;">';
|
||
htmlx += '<ciy-checkbox com="power_' + scope + '" hasmore></ciy-checkbox>';
|
||
coms[scope] = { params: prs };
|
||
htmlx += '</div>';
|
||
|
||
}
|
||
htmlx += '</div>';
|
||
}
|
||
htmlx += '</div>';
|
||
return htmlx;
|
||
}
|
||
|
||
var groups = new Array();
|
||
for (var i in json.powers) {
|
||
if (groups.indexOf(json.powers[i].groupname) == -1)
|
||
groups.push(json.powers[i].groupname);
|
||
}
|
||
for (var g in groups) {
|
||
uls.push(groups[g] == '' ? '未分组' : groups[g]);
|
||
html += '<div class="tabcontent">';
|
||
for (var i in json.powers) {
|
||
if (json.powers[i].groupname != groups[g])
|
||
continue;
|
||
var scope = 'x' + json.powers[i].id;
|
||
var bgp = (powers.indexOf(scope) > -1);
|
||
pman += scope + ',';
|
||
html += '<div class="v3" data-v>';
|
||
html += '<div class="title" onclick="selectchild(this)">' + ciyfn.lang(json.powers[i].name) + '</div>';
|
||
html += '<div class="box">';
|
||
|
||
var prs = ciyfn.getstrparam(json.powers[i].powers);
|
||
html += '<ciy-checkbox com="power_' + scope + '" hasmore></ciy-checkbox>';
|
||
coms[scope] = { params: prs };
|
||
html += '</div></div>';
|
||
}
|
||
html += '</div>';
|
||
}
|
||
var htmlli = '';
|
||
for (var i in uls)
|
||
htmlli += '<li>' + uls[i] + '</li>';
|
||
$5('#id_powers').html('<div class="ciy-tabcard simple"><ul>' + htmlli + '</ul><div>' + html + '</div></div><input type="hidden" name="pman" value="' + pman + '"/>');
|
||
for (var scope in coms) {
|
||
var range = [];
|
||
var vals = [];
|
||
for (var p in coms[scope].params) {
|
||
range.push({ id: scope + p, name: ciyfn.lang(coms[scope].params[p]) });
|
||
if (powers.indexOf(scope) > -1)
|
||
vals.push(scope + p);
|
||
else if (powers.indexOf(scope + p) > -1)
|
||
vals.push(scope + p);
|
||
}
|
||
ciycmp({
|
||
dom: $5('[com=power_' + scope + ']'), range: range, value: vals.join(','), fn_click: function (e) {
|
||
ciyfn.copyboard(e.value, function () { console.log('copy ok:', e.value); });
|
||
}
|
||
});
|
||
}
|
||
ciyfn.domlang();
|
||
var tab = new ciyclass.tabcard({
|
||
dom: '.ciy-tabcard.simple'
|
||
});
|
||
});
|
||
});
|
||
function selectchild(dom) {
|
||
var mdom = $5(dom).parent('[data-v]');
|
||
if (mdom.length == 0)
|
||
return;
|
||
var chk = (mdom.attr('data-v') == 1 ? 0 : 1);
|
||
mdom.attr('data-v', chk);
|
||
$5('ciy-checkbox', mdom).val(chk == 1 ? '' : '__ALL__');
|
||
}
|
||
function formsubmit(dom) {
|
||
var postparam = ciyfn.getform(dom);
|
||
if (postparam.name == '')
|
||
return ciyfn.alert('请填写角色名称');
|
||
if (ciyfn.throttle(dom)) return;
|
||
ciyfn.callfunc("update", postparam, function (json) {
|
||
ciyfn.toast('提交成功', function () {
|
||
ciyfn.sendsignal(window.top, 'alert_done', { btn: '提交', inputs: json });
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |