539 lines
32 KiB
HTML
539 lines
32 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8" />
|
|
<title>用户管理 | 智能截流闸管理平台</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta content="智能截流闸管理平台" name="description" />
|
|
<meta content="Themesdesign" name="author" />
|
|
<!-- App favicon -->
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|
|
|
<!-- jquery.vectormap css -->
|
|
<link href="assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- DataTables -->
|
|
<link href="assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- Responsive datatable examples -->
|
|
<link href="assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- Summernote css -->
|
|
<link href="assets/libs/summernote/summernote-bs4.min.css" rel="stylesheet" type="text/css" />
|
|
|
|
<link href="assets/libs/sweetalert2/sweetalert2.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- Bootstrap Css -->
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|
<!-- Icons Css -->
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- App Css-->
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
|
|
|
|
<script src="assets/js/pages/vue2.6.11.js"></script>
|
|
<style type="text/css">
|
|
.pagination {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body data-sidebar="dark">
|
|
|
|
<!-- Begin page -->
|
|
<div id="layout-wrapper">
|
|
|
|
<!-- 头部开始 -->
|
|
<?php include_once('header.tpl.html'); ?>
|
|
<!-- 头部结束 -->
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|
<?php include_once('leftsidebar.tpl.html'); ?>
|
|
<!-- Left Sidebar End -->
|
|
|
|
<!-- ============================================================== -->
|
|
<!-- Start right Content here -->
|
|
<!-- ============================================================== -->
|
|
<div class="main-content" id="app">
|
|
|
|
<div class="page-content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="page-title-box d-flex align-items-center justify-content-between">
|
|
<h4 class="mb-0">用户管理</h4>
|
|
|
|
<div class="page-title-right">
|
|
<ol class="breadcrumb m-0">
|
|
<li class="breadcrumb-item"><a href="javascript: void(0);">用户管理</a></li>
|
|
<li class="breadcrumb-item active">用户管理</li>
|
|
</ol>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-2">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="jstree"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-10">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<div class="mb-3">
|
|
|
|
<div class="row">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div style="text-align: right;">
|
|
<a href="javascript:void(0);" class="btn btn-success mb-2" data-toggle="modal" data-target="#myModalLabel3" data-placement="top" title=""><i class="mdi mdi-plus mr-2"></i> 新增</a>
|
|
</div>
|
|
<div class="table-responsive mt-3">
|
|
<table class="table table-centered datatable dt-responsive nowrap " style="border-collapse: collapse; border-spacing: 0; width: 100%;" id="datatable">
|
|
<thead class="thead-light">
|
|
<tr style="text-align: center;">
|
|
<th>序号</th>
|
|
<th>项目</th>
|
|
<th>部门</th>
|
|
<th>账号</th>
|
|
<th>姓名</th>
|
|
<th>联系方式</th>
|
|
<th>负责截流闸名称</th>
|
|
<th style="width: 120px;">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="text-align: center;" v-for="(item, i) in userSettingList">
|
|
<td>{{ item.id }}</td>
|
|
<td>{{ item.project_name }}</td>
|
|
<td>{{ item.sector }}</td>
|
|
<td>{{ item.account }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.mobile }}</td>
|
|
<td>{{ item.device_name }}</td>
|
|
<td>
|
|
<a href="javascript:void(0);" @click="getUserSettingEdit(item.id)" class="mr-3 text-primary" data-toggle="modal" data-target="#exampleModalScrollable" data-placement="top" title="" data-original-title="修改"><i class="mdi mdi-pencil font-size-18"></i></a>
|
|
<a href="javascript:void(0);" @click="getUserSettingDelete(item.id)" class="text-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="删除" id="sa-warning"><i class="mdi mdi-trash-can font-size-18"></i></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- container-fluid -->
|
|
</div>
|
|
<!-- End Page-content -->
|
|
<div id="myModalLabel3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title mt-0" id="myModalLabel">人员新增</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="form_insert" class="custom-validation">
|
|
<div class="modal-body">
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">项目</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" id="example-text-input" class="form-control rounded chat-input pl-3" name="project_name" value="陕西延安雨污分流" readonly="readonly">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">部门</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" id="example-text-input" class="form-control" name="sector" value="" >
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">账号</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="example-text-input" name="account" value="" >
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">密码</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="password" class="form-control" id="validationCustom04" name="password" value="" >
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">姓名</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="validationCustom04" name="name" value="" >
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">联系方式</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="validationCustom04" name="mobile" value="" >
|
|
</label>
|
|
</div>
|
|
<div class="form-group row" style="margin-bottom: 0px;">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">负责截流闸名称</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<textarea class="form-control" rows="5" name="note" id="note" ></textarea>
|
|
</label>
|
|
</div>
|
|
<small style="color:red;">注意：请输入正确截流闸名称（可查看设备管理-设备名称）并以顿号连接。例如：北桥沟控制柜、 黄篙洼控制柜</small>
|
|
<div class="modal-footer">
|
|
<div>
|
|
<button type="button" @click="getUserInsert" class="btn btn-primary waves-effect waves-light mr-1">
|
|
新增
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
<!-- <div class="modal-footer">
|
|
<button type="button" class="btn btn-light waves-effect" data-dismiss="modal">关闭</button>
|
|
</div> -->
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
<!--修改 -->
|
|
<div id="exampleModalScrollable" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title mt-0" id="myModalLabel">人员修改</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<form id="form_update" class="custom-validation">
|
|
<div class="modal-body">
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">序号</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" id="example-text-input" class="form-control rounded chat-input pl-3" name="id" v-model="userSettingEdit.id" readonly="readonly">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">项目</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" id="example-text-input" class="form-control rounded chat-input pl-3" name="project_name" v-model="userSettingEdit.project_name" readonly="readonly">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">部门</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control rounded chat-input pl-3" id="example-text-input" name="sector" v-model="userSettingEdit.sector" readonly="readonly">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">账号</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="validationCustom04" name="account" v-model="userSettingEdit.account" required="">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">姓名</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="validationCustom04" name="name" v-model="userSettingEdit.name" required="">
|
|
</label>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="example-text-input" class="col-md-2 col-form-label" style="line-height: 2.5;">联系方式</label>
|
|
<label for="example-text-input" class="col-md-10 col-form-label">
|
|
<input type="text" class="form-control" id="validationCustom04" name="mobile" v-model="userSettingEdit.mobile" required="">
|
|
</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div>
|
|
<button type="button" @click="getUserSettingUpdate" class="btn btn-primary waves-effect waves-light mr-1" data-toggle="modal" data-target="#exampleModalScrollable" data-placement="top">
|
|
提交
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
<!-- <div class="modal-footer">
|
|
<button type="button" class="btn btn-light waves-effect" data-dismiss="modal">关闭</button>
|
|
</div> -->
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div>
|
|
<!-- 尾部开始 -->
|
|
<?php include_once('footer.tpl.html'); ?>
|
|
<!-- 尾部结束 -->
|
|
|
|
</div>
|
|
<!-- end main content-->
|
|
|
|
</div>
|
|
<!-- END layout-wrapper -->
|
|
|
|
|
|
<!-- Right bar overlay-->
|
|
<div class="rightbar-overlay"></div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/libs/metismenu/metisMenu.min.js"></script>
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|
<script src="assets/libs/node-waves/waves.min.js"></script>
|
|
|
|
<!-- Required datatable js -->
|
|
<script src="assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
|
|
<script src="assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
|
|
|
|
<!-- Responsive examples -->
|
|
<script src="assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
|
|
<script src="assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
|
|
|
|
<script src="assets/libs/sweetalert2/sweetalert2.min.js"></script>
|
|
|
|
<!-- Sweet alert init js-->
|
|
<script src="assets/js/pages/sweet-alerts.init.js"></script>
|
|
<!-- <script src="assets/js/pages/dashboard.init.js"></script> -->
|
|
|
|
<script src="assets/js/app.js"></script>
|
|
|
|
<script src="assets/js/jstree/jstree.min.js"></script>
|
|
<script>
|
|
// 树形结构
|
|
$(function () {
|
|
// 当DOM准备好时创建一个实例
|
|
$('#jstree').jstree({
|
|
"themes": {
|
|
"stripes": true,
|
|
},
|
|
'types': {
|
|
'default': {
|
|
'icon': 'fa fa-building'
|
|
}
|
|
},
|
|
'plugins': ['changed','types'],
|
|
'core': {
|
|
'open_all': true,
|
|
'themes': {
|
|
"responsive": false
|
|
},
|
|
'data': function(obj, callback) {
|
|
var _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserTreeData',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
callback.call(_this, mes.data);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax2请求失败!')
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
// 绑定到树上触发的事件
|
|
$('#jstree').on("changed.jstree", function (e, data) {
|
|
$('#datatable').DataTable().destroy();
|
|
var id = data.selected.toString();
|
|
if(id < 10){ // 总部门
|
|
$('#datatable').DataTable().destroy();
|
|
|
|
window.getUserListBySector(id);
|
|
} else if(id > 10) { //设备
|
|
|
|
$('#datatable').DataTable().destroy();
|
|
window.getUserListByDevice(id);
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
<script type="text/javascript">
|
|
var vm = new Vue({
|
|
el: "#app",
|
|
data: {
|
|
userSettingList: {},
|
|
userSettingEdit: {},
|
|
timer: ''
|
|
},
|
|
methods: {
|
|
// 人员展示
|
|
getUserSettingList: function () {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserSettingList',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
_this.userSettingList = mes.data
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
// 点击部门
|
|
getUserListBySector:function(id) {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserListBySector',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'s_id': id},
|
|
success: function(mes) {
|
|
_this.userSettingList = mes.data
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
// 点击设备
|
|
getUserListByDevice:function(id) {
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserListByDevice',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {'d_id': id},
|
|
success: function(mes) {
|
|
_this.userSettingList = mes.data
|
|
|
|
_this.timer = setTimeout(_this.changeDatatable, 300);
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
getUserSettingEdit: function (id) {
|
|
var id =id;
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserSettingEdit',
|
|
type: 'get',
|
|
data: { 'id': id },
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
_this.userSettingEdit = mes.data
|
|
console.info(mes.data)
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
},
|
|
getUserSettingUpdate: function () {
|
|
let _this = this;
|
|
var form_data = $('#form_update').serialize()
|
|
$.ajax({
|
|
url: '?c=user&a=getUserSettingUpdate',
|
|
type: 'post',
|
|
data: form_data,
|
|
dataType: 'json',
|
|
success : function(mes) {
|
|
|
|
Swal.fire({title:"修改成功",confirmButtonColor:"#5438dc"})
|
|
location.reload();
|
|
},
|
|
error: function(msg) {
|
|
console.info('ajax请求失败')
|
|
}
|
|
})
|
|
},
|
|
getUserInsert: function () {
|
|
let _this = this;
|
|
var for_data_insert = $('#form_insert').serialize()
|
|
|
|
$.ajax({
|
|
url: '?c=user&a=getUserSettingInsert',
|
|
type: 'post',
|
|
data: for_data_insert,
|
|
dataType: 'json',
|
|
success : function(mes) {
|
|
// console.info(mes)
|
|
Swal.fire({title:"新增成功",confirmButtonColor:"#5438dc"})
|
|
location.reload();
|
|
},
|
|
error: function(msg) {
|
|
console.info('ajax请求失败')
|
|
}
|
|
})
|
|
},
|
|
getUserSettingDelete: function (id) {
|
|
var id =id;
|
|
Swal.fire({
|
|
title:"确定删除?",
|
|
text:'',
|
|
icon:"warning",
|
|
showCancelButton:!0,
|
|
confirmButtonColor:"#34c38f",
|
|
cancelButtonColor:"#ff3d60",
|
|
confirmButtonText:"确认",
|
|
cancelButtonText:"取消"
|
|
}).then(function(t){
|
|
|
|
if(t.value == true){
|
|
let _this = this;
|
|
$.ajax({
|
|
url: '?c=user&a=getUserSettingDelete',
|
|
type: 'get',
|
|
data: { 'id': id },
|
|
dataType: 'json',
|
|
success: function(mes) {
|
|
Swal.fire("删除成功!","","success")
|
|
location.reload();
|
|
},
|
|
error: function (msg) {
|
|
console.info('ajax请求失败!')
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
onSubmit: function () {
|
|
// 阻止默认表单提交
|
|
// 做你自己想做的事，比如ajax请求后台数据
|
|
return false;
|
|
},
|
|
changeDatatable: function () {
|
|
|
|
$(document).ready(function(){$("#datatable").DataTable({language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")}})});
|
|
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getUserSettingList();
|
|
window.getUserListBySector = this.getUserListBySector;
|
|
window.getUserListByDevice = this.getUserListByDevice;
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|