You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
13 KiB
327 lines
13 KiB
@extends('system.layouts.app') |
|
@section('title', 'user_manager') |
|
@section('css') |
|
<!-- Styles --> |
|
<style> |
|
label>.form-select { |
|
display: inline; |
|
width: auto; |
|
} |
|
</style> |
|
@endsection |
|
|
|
@section('content') |
|
@include('system.popup.User.CreatePopUp', [ |
|
'equipments' => $equipments, |
|
'equipments_title' => $equipments_title, |
|
]) |
|
@include('system.popup.User.EditPopUp', [ |
|
'equipments' => $equipments, |
|
'equipments_title' => $equipments_title, |
|
'allow' => $allow, |
|
]) |
|
<div class="container-fluid"> |
|
<div class="row justify-content-center"> |
|
|
|
<div class="col-12 mt-3 d-flex justify-content-between"> |
|
<div class="d-flex"> |
|
<h2 class="title">使用者管理-清單</h2> |
|
<small class="ms-3"><button class="btn btn-sm btn-primary" id="userExport">資料匯出</button></small> |
|
</div> |
|
|
|
@can('user-create') |
|
<button onclick="userCreatePopUp({{ $roles }})" type="button" href="#" |
|
class="btn btn-sm btn-primary">新增使用者</button> |
|
@endcan |
|
</div> |
|
|
|
<div class="col-12"> |
|
<table id="userManagerTable" class="table table-striped table-bordered" style="width:100%"> |
|
<thead> |
|
<tr> |
|
<th>姓名</th> |
|
<th>職級</th> |
|
<th>單位代碼</th> |
|
<th>員警代碼</th> |
|
<th>帳號</th> |
|
<th>單位</th> |
|
<th>管理群組</th> |
|
<th>帳號狀態</th> |
|
<th>功能</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
|
|
@endsection |
|
|
|
@section('js') |
|
@parent |
|
<!-- DataTable 用於v2的新版--> |
|
<script src="{{ asset('js/v2/datatables.min.js') }}"></script> |
|
<script> |
|
const config = { |
|
search: true, // Toggle search feature. Default: false |
|
creatable: false, // Creatable selection. Default: false |
|
clearable: false, // Clearable selection. Default: false |
|
maxHeight: '360px', // Max height for showing scrollbar. Default: 360px |
|
size: '', // Can be "sm" or "lg". Default '' |
|
} |
|
|
|
function userDelete(id) { |
|
Swal.fire({ |
|
title: '確定要刪除嗎?', |
|
text: "刪除後將無法復原!", |
|
icon: 'warning', |
|
showCancelButton: true, |
|
confirmButtonColor: '#d33', |
|
cancelButtonColor: '#6c757d', |
|
confirmButtonText: '確定', |
|
cancelButtonText: '取消' |
|
}).then((result) => { |
|
if (result.isConfirmed) { |
|
$.ajax({ |
|
type: "DELETE", |
|
url: `/api/user/${id}`, |
|
data: {}, |
|
success: function(response) { |
|
if (response.success) { |
|
Swal.fire({ |
|
title: '刪除成功', |
|
icon: 'success', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}).then((result) => { |
|
if (result.isConfirmed) { |
|
// userManagerTable.ajax.reload(null, false); |
|
} |
|
}) |
|
userManagerTable.ajax.reload(null, false); |
|
} else { |
|
Swal.fire({ |
|
title: '刪除失敗', |
|
icon: 'error', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}) |
|
} |
|
}, |
|
error: function(response) { |
|
Swal.fire({ |
|
title: '刪除失敗', |
|
icon: 'error', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}) |
|
} |
|
}); |
|
} |
|
}) |
|
} |
|
|
|
// 匯出使用者資料 |
|
$('#userExport').on('click', function() { |
|
// ajax 產出表格並下載 |
|
$.ajax({ |
|
type: "POST", |
|
url: `/api/user/export`, |
|
success: function(response) { |
|
if (response.success) { |
|
Swal.fire({ |
|
title: '匯出成功', |
|
icon: 'success', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}) |
|
window.location.href = `/${response.file}`; |
|
} else { |
|
Swal.fire({ |
|
title: '匯出失敗', |
|
icon: 'error', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}) |
|
} |
|
}, |
|
error: function(response) { |
|
Swal.fire({ |
|
title: '匯出失敗', |
|
icon: 'error', |
|
confirmButtonColor: '#6c757d', |
|
confirmButtonText: '確定' |
|
}) |
|
} |
|
}); |
|
}); |
|
// DataTable 初始化 |
|
$(document).ready(function() { |
|
$.fn.dataTableExt.sErrMode = 'throw'; |
|
// input 加入時間選擇 |
|
$('input#search_fromdate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
$('input#search_todate').datetimepicker({ |
|
format: 'YYYY-MM-DD' |
|
}); |
|
|
|
|
|
userManagerTable = $('#userManagerTable').DataTable({ |
|
"dom": "<'row'<'d-flex justify-content-start mt-2 mb-2' lf>>" + |
|
"<'row'<'col-sm-12'tr>>" + |
|
"<'row'<'col-sm-12 col-md-12'<'d-flex justify-content-between' ip>>>", |
|
// 語系設定 UI介面中文化 |
|
"language": { |
|
"processing": "處理中...", |
|
"loadingRecords": "載入中...", |
|
"lengthMenu": "顯示 _MENU_ 項結果", |
|
"zeroRecords": "沒有符合的結果", |
|
"info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", |
|
"infoEmpty": "顯示第 0 至 0 項結果，共 0 項", |
|
"infoFiltered": "(從 _MAX_ 項結果中過濾)", |
|
"infoPostFix": "", |
|
"search": "搜尋:", |
|
"paginate": { |
|
"first": "第一頁", |
|
"previous": "上一頁", |
|
"next": "下一頁", |
|
"last": "最後一頁" |
|
}, |
|
"aria": { |
|
"sortAscending": ": 升冪排列", |
|
"sortDescending": ": 降冪排列" |
|
} |
|
}, |
|
// 搜尋欄位 是否顯示 |
|
searching: false, |
|
// searching: true, |
|
// 處理中 是否顯示 |
|
processing: true, |
|
serverSide: true, |
|
// Ajax 取資料 |
|
ajax: { |
|
//processcheckStatus =0 未審 |
|
'url': "{{ route('api.user.index') }}", |
|
'data': function(data) {}, |
|
'error': function() { |
|
// userManagerTable.draw(); |
|
}, |
|
}, |
|
// 設定不提供排序條件的欄位(例如圖片) |
|
columnDefs: [{ |
|
orderable: false, |
|
targets: [0] |
|
}, { |
|
visible: false, |
|
targets: [] |
|
}, |
|
{ |
|
className: "dt-center", |
|
targets: [0] |
|
} |
|
], |
|
order: [ |
|
[0, "desc"] |
|
], |
|
// 設定 顯示在Table上的欄位 |
|
columns: [ |
|
// 格式 data: 後端傳遞過來的 欄位名稱 |
|
{ |
|
data: 'name', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.name}`; |
|
}, |
|
}, |
|
|
|
{ |
|
data: 'class', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.class}`; |
|
}, |
|
}, |
|
{ |
|
data: 'leader', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.leader}`; |
|
}, |
|
}, |
|
|
|
{ |
|
data: 'exp_op', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.exp_op}`; |
|
}, |
|
}, |
|
|
|
{ |
|
data: 'account', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.account}`; |
|
}, |
|
}, |
|
{ |
|
data: 'unit', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
return `${JsonResultRow.unit}`; |
|
}, |
|
}, |
|
{ |
|
data: 'id', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
if (JsonResultRow.roles[0] == null) { |
|
return `無`; |
|
} |
|
return `${JsonResultRow.roles[0].display_name}`; |
|
}, |
|
}, |
|
{ |
|
data: 'status', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
if (JsonResultRow.status == 0) { |
|
return `啟用`; |
|
} else { |
|
return `停用`; |
|
} |
|
|
|
}, |
|
}, |
|
{ |
|
data: 'id', |
|
"render": function(data, type, JsonResultRow, meta) { |
|
let editBtn = ''; |
|
let deleteBtn = ''; |
|
|
|
@can('user-edit') |
|
editBtn = |
|
`<button onclick="userManagePopUp(${JsonResultRow.id})" type="button" href="#" class="btn btn-sm btn-primary">編輯</button>`; |
|
@endcan |
|
|
|
@can('user-delete') |
|
deleteBtn = |
|
`<button type="button" onclick="userDelete(${JsonResultRow.id})" href="#" class="btn btn-sm btn-danger">刪除</button>`; |
|
@endcan |
|
return `${editBtn} ${deleteBtn}`; |
|
}, |
|
}, |
|
|
|
], |
|
initComplete: function() { |
|
$('.selectpicker').selectpicker(); |
|
// dselect(document.querySelector('.violationcodeselect'), config) |
|
|
|
}, |
|
drawCallback: function(settings) { |
|
$('.selectpicker').selectpicker(); |
|
// dselect(document.querySelector('.violationcodeselect'), config) |
|
} |
|
// stripeClasses:['striped-odd','striped-even'] |
|
}); |
|
|
|
}); |
|
</script> |
|
@stop
|
|
|