<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.w3.org/1999/xhtml"
>
<head>
<meta charset="UTF-8">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../static/css/font-awesome.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../static/css/ionicons.css">
<!-- Theme style -->
<link rel="stylesheet" href="../static/css/AdminLTE.css">
<!-- AdminLTE Skins. We have chosen the skin-blue for this starter
page. However, you can choose any other skin. Make sure you
apply the skin class to the body tag so the changes take effect. -->
<link rel="stylesheet" href="../static/css/skins/skin-blue.min.css">
<link rel="stylesheet" href="../static/css/bootstrap-table.css">
<link rel="stylesheet" href="../static/css/jquery.treegrid.css">
<link rel="stylesheet" href="../static/css/myCommon.css">
<link rel="stylesheet" href="../static/css/bootstrap-tab.css">
<!-- jQuery 3 -->
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/moment.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../static/js/bootstrap.js"></script>
<!-- AdminLTE App -->
<script src="../static/js/adminlte.js"></script>
<script src="../static/js/bootstrap-table.js"></script>
<script src="../static/js/bootstrap-table-zh-CN.js"></script>
<script src="../static/js/bootstrap-table-treegrid.js"></script>
<script src="../static/js/jquery.treegrid.min.js"></script>
<script src="../static/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
<title>用户管理</title>
<style>
.bgColor{
background-color:rgba(243,66,111,0.15)
}
.divBorder{
border: solid 1px rgba(12,24,255,0.15);
padding-top: 15px;
padding-bottom: 15px;
margin-top: 5px;
border-radius: 5px;
}
.divBorder2{
border: solid 1px rgba(12,24,255,0.15);
padding-top: 5px;
padding-bottom: 5px;
margin-top: 3px;
border-radius: 5px;
}
.h4font{
margin-top: 0px;
font-family: 微软雅黑;
font-weight: 600;
}
.left20{
margin-left: 15px;
}
</style>
</head>
<body class="content container-fluid" style="width:100%;height:100%; ">
<div id="app" class="container-fluid" style="width:100%;height:100%; ">
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
数据的修改
</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>账号</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="username" placeholder="账号"
v-model="entityMod.account">
</div>
<label class="control-label">（输入类型是
字母、数字、下划线或它们的组合，最长16位）</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>姓名</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="userName" placeholder="姓名"
v-model="entityMod.name">
</div>
<label class="control-label">（输入类型是汉字、字母、数字、下划线或它们的组合，最长16位）</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>电话</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="email" placeholder="电话"
v-model="entityMod.telNo">
</div>
<label class="control-label">（输入类型是汉字、字母、数字、下划线或它们的组合，最长16位）</label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>邮箱</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="email" placeholder="邮箱"
v-model="entityMod.email">
</div>
<label class="control-label">（输入类型是汉字、字母、数字、下划线或它们的组合，最长16位）</label>
</div>
<!-- 日 期:<input name="birthday" οnclick="WdatePicker({dateFmt:'yyyy/MM/dd'})"/><br/> -->
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>爱好</label>
<div class="col-sm-4">
<template v-for="habby in habbyList">
{{habby.name}}<input type="checkbox" v-model="habby.checked" />
</template>
</div>
<label class="control-label"></label>
</div>
<!-- 动态下拉框输入框的 例子 -->
<div class="form-group">
<label class="col-sm-2 control-label"><span style="color: red;font-weight: bold">＊</span>地区</label>
<div class="col-sm-4">
<div class="select">
<select class="choice" v-on:change="indexSelect(1)" v-model="entityMod.shengId">
<option v-for="item in shengList" v-bind:value="item.id" >{{item.name}}</option>
</select>
</div>
<div class="select">
<select class="choice" v-on:change="indexSelect(2)" v-model="entityMod.shiId">
<option v-for="item in shiList" v-bind:value="item.id" >{{item.name}}</option>
</select>
</div>
<div class="select">
<select class="choice" v-model="entityMod.xianId">
<option v-for="item in xianList" v-bind:value="item.id" >{{item.name}}</option>
</select>
</div>
</div>
<label class="control-label"></label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" v-on:click="save()">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<div class="divBorder" style="width:100%;height:100%; ">
<form class="form-inline">
<div class="form-group">
<label class="left20">用户名</label>
<input type="text" class="form-control" name="userName" placeholder="用户名" >
<label class="left20">姓名</label>
<input type="text" class="form-control" name="name" placeholder="姓名" >
<input type="button" style="margin-left: 20px" class="btn btn-default btn-primary" value="查 询" >
</div>
</form>
</div>
<div class="divBorder2">
<div class="form-inline">
<div class="input-group">
<a href="#" class="btn left20" role="button" v-on:click="toadd()">
<span class=" glyphicon glyphicon-plus" aria-hidden="true" style="margin-right: 5px"></span>添 加</a>
<a href="#" class="btn left20" role="button" >
<span class=" glyphicon glyphicon-edit" aria-hidden="true" style="margin-right: 5px"></span>修 改</a>
<a href="#" class="btn left20" role="button" v-on:click="delBatch()">
<span class="glyphicon glyphicon-minus" aria-hidden="true" style="margin-right: 5px"></span>删 除</a>
<a href="#" class="btn left20" role="button">
<span class=" glyphicon glyphicon-new-window" aria-hidden="true" style="margin-right: 5px"></span>详 情</a>
</div>
</div>
<div>
<table class="table table-hover table-striped table-bordered text-center">
<thead>
<tr class="info">
<th>全选<input type="checkbox" v-on:click="checkAll"
:checked="dataList.length==dataList.filter(item=>item.checked).length && dataList.length > 0">
<!-- <button v-on:checked="reverseSel">反选</button> --></th>
<th>序号</th>
<th>账号</th>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
<th>创建时间</th>
<th>爱好</th>
<th>状态</th>
<th>地区</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="aData in dataList " >
<td class="text-center" >
<input type="checkbox" v-model="aData.checked">
</td>
<td th:text="{{aData.id}}">{{aData.id}}</td>
<td><a href="#" v-on:click="tomodify(aData)">{{aData.account}}</a></td>
<td th:text="{{aData.name}}">{{aData.name}}</td>
<td th:text="{{aData.telNo}}">{{aData.telNo}}</td>
<td th:text="{{aData.email}}">{{aData.email}}</td>
<td th:text="{{aData.createDate}}">{{moment(aData.createDate).format('YYYY-MM-DD')}}</td>
<td th:text="{{aData.habbyNames}}">{{aData.habbyNames}}</td>
<td th:text="{{aData.status}}">{{aData.status}}</td>
<td th:text="{{aData.shengName}}{{aData.shiName}}{{aData.xianName}}">{{aData.shengName}}{{aData.shiName}}{{aData.xianName}}</td>
<td><a href="#" v-on:click="del(aData.id)">删除</a></td>
</tr>
<tr>
<td colspan="10">
{{currentPage}}/{{totalPages}}
<button type='button' class='btn btn-default' v-on:click='getlist(1)'>首页</button>
<button type='button' class='btn btn-default' v-on:click='getlist(currentPage-1)'>上一页</button>
<button type='button' class='btn btn-default' v-on:click='getlist(currentPage+1)'>下一页</button>
<button type='button' class='btn btn-default' v-on:click='getlist(totalPages)'>尾页</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
var dataModel={
dataList:[],//列表数据
where:{account:"",name:""},//查询条件
entityMod:{},//用于修改和新增的数据模型
pageInfo:{},//用于分页数据模型
currentPage:1,// 分页数据模型 可以都用 pageinfo内容效果更好
totalPages:1,// 分页数据模型 可以都用 pageinfo内容效果更好
habbyList:[],
shengList:[],
shiList:[],
xianList:[]
}
var vue = new Vue(
{
el:"#app", //绑定页面的app
data:dataModel,
mounted:function(){ // 启动的时候加载
console.log("vue 加载了")
this.getlist(1);
//favlist
axios.get("../person/habbyList").then(function(response){
vue.habbyList = response.data.object;
console.log(" 爱好是 " + vue.habbyList)
})
//省份
axios.get("../person/areaList?parentId=0").then(function(response){
vue.shengList = response.data.object;
console.log(" 省是 " + vue.shengList)
})
},
methods:{
// 获取列表数据 page 页码
getlist:function(page){
// 发送get 请求 then 回调函数
axios.get("../person/list?currentPage="+page+"&pageSize=5").then(function(response){
// 从服务得到数据 赋值给模型层
dataModel.dataList = response.data.object.dataList;
dataModel.currentPage = response.data.object.currentPage;
dataModel.totalPages = response.data.object.pages;
})
},
toadd:function(){
// 弹出 模态框
$("#myModal").modal("show");
// 初始化将要添加的数据
this.entityMod={id:0};
},
tomodify:function(thedata){
$("#myModal").modal("show");
// 修改的数据
this.entityMod=thedata;
console.log(this.entityMod);
if(this.entityMod.habbyIds != null){
console.log(this.entityMod.habbyIds.split(","))
this.habbyList.forEach(item=>{item.checked=thedata.habbyIds.split(",").indexOf(item.id+"")>=0; })
}else{
this.habbyList.forEach(item=>{item.checked=false; })
}
this.showSelect (1);
this.showSelect (2);
this.showSelect (2);
},
del:function(id){
axios.get("../person/removePerson?id=" + id).
then(function(respone){
vue.getlist(1);
})
;
},
delBatch:function(){
var selecedIds = this.dataList.filter(item=>item.checked).map(myitem=>myitem.id);
alert(selecedIds);
if(selecedIds.length<0){
alert("请选择")
return false;
}
var param={ids:selecedIds}
$.ajax({
cache: false,
type: "POST",
url: "../person/removePersonBatch",
dataType: "json",
data: param,
async: false,
success: function (data) {
vue.getlist(1);
}
})
},
checkAll(e){
//全选
this.dataList.forEach(function(item){item.checked=e.target.checked})
console.log(this.dataList.filter(item=>{return item.checked}).map(item=>item.id))
},
// 反选
/* reverseSel:function(){
this.dataList.forEach(function(item){item.checked=!item.checked});
}, */
//修改地区
indexSelect (flag) {
if(flag==1){// 修改省
if(vue.entityMod.shengId<1){
return;
}
if(vue.entityMod.shengId == null){
return;
}
axios.get("../person/areaList?parentId="+vue.entityMod.shengId).then(function(response){
vue.shiList = response.data.object;
vue.xianList=[];
vue.entityMod.shiId=0;
vue.entityMod.xianId=0;
console.log(" 市是 " + vue.shiList);
})
}else if(flag==2){
//修改市
if(vue.entityMod.shiId<1){
return;
}
if(vue.entityMod.shiId == null){
return;
}
axios.get("../person/areaList?parentId="+vue.entityMod.shiId).then(function(response){
vue.xianList = response.data.object;
vue.entityMod.xianId=0;
console.log(" 县是 " + vue.xianList)
})
}
},//修改回显地区
showSelect (flag) {
if(flag==1){// 修改省
if(vue.entityMod.shengId<1){
return;
}
if(vue.entityMod.shengId == null){
return;
}
axios.get("../person/areaList?parentId="+vue.entityMod.shengId).then(function(response){
vue.shiList = response.data.object;
})
}else if(flag==2){
//修改市
if(vue.entityMod.shiId<1){
return;
}
if(vue.entityMod.shiId == null){
return;
}
axios.get("../person/areaList?parentId="+vue.entityMod.shiId).then(function(response){
vue.xianList = response.data.object;
console.log(" 县是 " + vue.xianList)
})
}
},
save:function(){
var selHabbys = this.habbyList.filter(item=>item.checked).map(item=>item.id);
console.log(" 选中的 " + selHabbys);
this.entityMod.habbyId=selHabbys;
var url="../person/addPerson";
if(this.entityMod.id>0){
url="../person/changePerson";
}
axios.post(url,
this.entityMod).then(function(response){
if(response.data.errorCode==0){
alert(" 操作成功");
$("#myModal").modal("hide");
vue.getlist(1);
}else{
alert("插入失败");
}
})
}
}
}
);
</script>
</body>
</html>
704
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
