Files
lsky-pro/application/index/view/admin/users/index.html

248 lines
9.6 KiB
HTML

{extend name="common:base" /}
{block name="title"}{:lang('User management')} - {$config.site_name}{/block}
{block name="main"}
<div class="mdui-container">
<main>
<div class="mdui-chip">
<span class="mdui-chip-icon"><i class="mdui-icon material-icons">&#xe88e;</i></span>
<span class="mdui-chip-title">{:lang('There are %s users in total', ['<small class="mdui-text-color-red">'.$users->total().'</small>'])}</span>
<a href="" class="mdui-chip-delete" mdui-tooltip="{content: '{:lang('Refresh')}', position: 'right'}"><i class="mdui-icon material-icons">&#xe863;</i></a>
</div>
<div class="mdui-clearfix mdui-m-t-1"></div>
<form action="" method="post" id="search-form">
<select class="where mdui-select mdui-float-left" name="state" mdui-select>
<option value="">{:lang('All')}</option>
<option value="1" {if 1 eq $state}selected{/if}>{:lang('Normal')}</option>
<option value="2" {if 2 eq $state}selected{/if}>{:lang('Frozen')}</option>
</select>
<input type="hidden" name="page" value="1">
<input class="mdui-textfield-input search-input mdui-float-left" type="text" name="keyword" placeholder="{:lang('Enter search...')}" value="{$keyword}" autocomplete="off"/>
</form>
<div class="mdui-clearfix"></div>
<div class="mdui-table-fluid mdui-m-t-2 mdui-m-b-2">
<table class="mdui-table mdui-table-selectable">
<thead>
<tr>
<th>{:lang('User name')}</th>
<th>{:lang('Role group')}</th>
<th>{:lang('Nickname')}</th>
<th>{:lang('Mailbox')}</th>
<th>{:lang('Used capacity')}</th>
<th>{:lang('Total capacity')}</th>
<th>{:lang('Account status')}</th>
<th>{:lang('Register IP')}</th>
<th>{:lang('Create time')}</th>
<th>{:lang('Operation')}</th>
</tr>
</thead>
<tbody>
{foreach $users as $value}
<tr data-id="{$value.id}">
<td>{$value.username}</td>
<td>
<select class="mdui-select group">
{foreach $groups as $group}
<option value="{$group.id}" {if $value.group_id eq $group.id}selected{/if}>{:lang($group.name)}</option>
{/foreach}
</select>
</td>
<td>{$value.nickname}</td>
<td>{$value.email}</td>
<td>{$value.use_quota|format_size}</td>
<td>{$value.quota|format_size}</td>
<td>
<select class="mdui-select state">
<option value="1" {if 1 eq $value.state}selected{/if}>{:lang('Normal')}</option>
<option value="0" {if 0 eq $value.state}selected{/if}>{:lang('Frozen')}</option>
</select>
</td>
<td>{$value.reg_ip}</td>
<td>{$value.create_time}</td>
<td>
<div class="mdui-btn-group">
<button class="mdui-btn mdui-btn-raised mdui-btn-dense edit">{:lang('Edit')}</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-red mdui-btn-dense del">{:lang('Delete')}</button>
</div>
</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
<div class="page">
{$users|raw}
</div>
</main>
<div class="mdui-dialog" id="edit-dialog">
<div class="mdui-dialog-content">
<form action="{:url('admin/users/edit')}" method="post">
<div class="mdui-dialog-title">{:lang('Modify user data')}</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('User name')}</label>
<input class="mdui-textfield-input" type="text" name="username" value="" placeholder="{:lang('User name')}" autocomplete="off"/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Mailbox')}</label>
<input class="mdui-textfield-input" type="email" name="email" value="" placeholder="{:lang('Mailbox')}" autocomplete="off"/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Nickname')}</label>
<input class="mdui-textfield-input" type="text" name="nickname" value="" maxlength="15" placeholder="{:lang('Nickname')}" autocomplete="off"/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Storage capacity')}</label>
<input class="mdui-textfield-input" type="text" name="quota" value="" placeholder="{:lang('Storage capacity')}" autocomplete="off"/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Used storage capacity')}</label>
<input class="mdui-textfield-input" type="text" name="use_quota" value="" placeholder="{:lang('Used storage capacity')}" autocomplete="off" disabled/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Password')}</label>
<input class="mdui-textfield-input" type="password" name="password" placeholder="{:lang('Password tip')}" autocomplete="off"/>
</div>
<div class="mdui-textfield">
<label class="mdui-textfield-label">{:lang('Confirm password')}</label>
<input class="mdui-textfield-input" type="password" name="password_confirm" placeholder="{:lang('Confirm password')}" autocomplete="off"/>
</div>
<input type="hidden" name="id" value="">
<div class="mdui-dialog-actions">
<button type="button" class="mdui-btn mdui-ripple" mdui-dialog-cancel>{:lang('Cancel')}</button>
<button class="mdui-btn mdui-ripple">{:lang('Modify')}</button>
</div>
</form>
</div>
</div>
</div>
<div class="mdui-fab-wrapper" id="fab-buttons" mdui-fab="{trigger: 'hover'}">
<button class="mdui-fab mdui-ripple mdui-color-purple mdui-fab-hide" id="settings-btn">
<i class="mdui-icon material-icons">&#xe8b8;</i>
<i class="mdui-icon mdui-fab-opened material-icons">&#xe8b8;</i>
</button>
<div class="mdui-fab-dial">
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange" onclick="settings('frozen')">
<i class="mdui-icon material-icons">&#xe14b;</i>
</button>
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red" onclick="settings('delete')">
<i class="mdui-icon material-icons">&#xe872;</i>
</button>
</div>
</div>
{/block}
{block name="js"}
<script>
var methods = {
delete: function (id, batch, callback) {
var msg = lang('Are you sure to delete this user?');
if (batch) {
msg = lang('Are you sure to delete the selected user?');
}
mdui.confirm(msg, function () {
app.request("{:url('admin/users/delete')}", {id: id}, function () {
callback && callback();
});
}, function () {
}, {confirmText: lang('Confirm'), cancelText: lang('Cancel')});
},
frozen: function (id, batch, callback) {
var msg = lang('Are you sure to freeze this user?');
if (batch) {
msg = lang('Are you sure to freeze the selected users?');
}
mdui.confirm(msg, function () {
app.request("{:url('admin/users/frozen')}", {id: id}, function () {
callback && callback();
});
}, function () {
}, {confirmText: lang('Confirm'), cancelText: lang('Cancel')});
}
};
function settings(val) {
var array = [];
var selected = $('tr.mdui-table-row-selected');
if (selected.length) {
selected.each(function (index, value) {
array.push($(value).data('id'));
});
if ('frozen' === val) {
methods.frozen(array, true, function () {
history.go(0);
})
} else if ('delete' === val) {
methods.delete(array, true, function () {
selected.remove();
});
}
} else {
mdui.snackbar({
message: lang('Select at least one data!')
});
}
}
$(function () {
var dialog = new mdui.Dialog('#edit-dialog');
$('.mdui-select.where').on('close.mdui.select', function () {
$('#search-form').submit();
});
$('td select.group').change(function () {
var tr = $(this).closest('tr');
app.request("{:url('admin/users/setGroup')}", {id: tr.data('id'), group_id: $(this).val()});
});
// 多选操作
$('.mdui-checkbox input').change(function () {
var selected = $('tr.mdui-table-row-selected');
$('#settings-btn')[selected.length > 0 ? 'removeClass' : 'addClass']('mdui-fab-hide');
});
// 提交
$('#edit-dialog form').submit(function (e) {
e.preventDefault();
app.request("{:url('admin/users/edit')}", $(this).serialize(), function () {
dialog.close();
history.go(0);
});
});
// 状态切换
$('td select.state').change(function () {
var tr = $(this).closest('tr');
app.request("{:url('admin/users/setState')}", {id: tr.data('id'), state: $(this).val()});
});
// 编辑
$('td button.edit').click(function () {
var tr = $(this).closest('tr');
app.ajax("{:url('admin/users/getUser')}", {id: tr.data('id')}, function (response) {
if (response.code) {
var form = $("#edit-dialog form");
for (x in response.data) {
var input = form.find("input[name='" + x + "']");
if (input.length) {
input.val(response.data[x]);
}
}
dialog.open();
} else {
mdui.snackbar({
message: response.msg
});
}
});
});
// 删除
$('td button.del').click(function () {
var tr = $(this).closest('tr');
methods.delete(tr.data('id'), false, function () {
tr.remove();
});
});
});
</script>
{/block}