<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>用户管理</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
<link rel="stylesheet" href="/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/AdminLTE.min.css"/>
<link rel="stylesheet" href="/layui/css/layui.css"/>
<link rel="stylesheet" href="/css/skin-blue.min.css"/>
<link rel="stylesheet" href="/css/font-awesome.css"/>
<!--<link rel="stylesheet" href="/css/home/bootstrap-theme.css"/>-->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>-->
<script src="/js/vue.min.js"></script>
</head>
<style>
.disWid{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.disWidDiv{
text-align: right;
padding: 10px 0;
width: 281px;
}
.disWidDiv div{
width: 186px;
display: inline-block;
}
.disWidDiv div input{
width: 189px;
display: inline-block
}
.disWidDiv div select{
width: 184px;
height: 30px;
}
.disWidDivSelect{
text-align: right;
padding: 10px 0;
width: 281px;
position: relative;
}
.disWidDivSelect div{
width: 190px;
display: inline-block;
border: 1px solid #d2d6de;
}
.layui-btn{
display: inline-block;
}
.disLayButton{
display: flex;
justify-content: center;
}
.disWidDiv span{
color: red;
}
.colRed{
color: red;
font-size: 10px;
text-align: right;
}
.borPadd{
border: 1px solid #d2d6de;
padding: 5px;
text-align: left;
}
/*.disWidDivSelect .selectStore{*/
/*display: none;*/
/*}*/
.selectStore ul li{
text-align: left;
display: inline-block;
width: 181px;
float: left;
height: 44px;
font-size: 10px;
}
.disWidDivSelect .selectStore{
width: 576px;
padding: 5px;
position: absolute;
top: 10px;
left: 159px;
background: white;
}
.selectStoreHei{
overflow: hidden;
overflow-y: auto;
height: 250px;
}
.selectStore .selectStoreOK{
text-align: center;
cursor:pointer;
}
.selectStore input{
vertical-align: bottom;
}
.selectStore .selectStoreBox{
width: 100%;
display: flex;
justify-content: space-between;
border: none;
padding-bottom: 15px;
}
.selectStore .selectStoreBox .selectStoreBox1{
border: none;
display: flex;
}
.businessOverviewUser{
display: flex;
justify-content: space-between;
padding: 15px;
padding-bottom: 13px;
border-bottom: 4px solid #eee;
}
.UserNew{
padding: 2px 15px;
border-radius: 4px;
line-height: 26px;
background: rgb(51, 122, 183);
color: rgb(255, 255, 255);
cursor: pointer;
}
.businessOverview-store{
display: flex;
justify-content: flex-start;
align-items: center;
}
.businessOverview-storeDiv{
padding:15px;
}
.layui-btn{
height: 33px;
line-height: 33px;
}
.disable{
background: red;
color: #fff;
}
.table tbody tr .lin33{
text-align: center;
line-height: 33px;
}
.pagination {
position: relative;
margin-left: 38%;
}
.pagination li{
display: inline-block;
margin:0 5px;
}
.pagination li a{
padding:.5rem 1rem;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#286090;
}
.pagination li a:hover{
background:#eee;
}
.pagination li.active a{
background:#286090;
color:#fff;
}
.disAlign{
display: flex;
align-items: center;
}
.refund_bg{
background: rgba(0,0,0,0.3);
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
z-index: 99;
box-sizing:border-box;
padding-top: 200px;
display: none;
}
.refundForm{
width:400px;
height: 233px;
margin:auto;
border-radius: 4px;
background: white;
padding: 20px;
position: relative;
}
.refundFormText{
line-height: 30px;
}
.refundForm_input{
border:1px solid rgb(204,204,204);
border-radius: 4px;
padding: 0 5px;
margin:0 5px 0 30px;
width:295px;
height:30px;
}
.refundForm_btn{
margin-top:30px;
display: flex;
justify-content: space-around;
}
.refundForm_submit{
background: #286090;
width:80px;
height:30px;
line-height:30px;
color: white;
text-align: center;
border:none;
outline: none;
border-radius: 4px;
}
.refundForm_reset{
width:80px;
height:30px;
line-height:30px;
color: #353535;
border:1px solid #353535;
text-align: center;
outline: none;
background: #fff;
border-radius: 4px;
}
.borderBot{
border-bottom: 1px solid rgb(219,217,219);
}
.DetailsofRefund{
color: #337ab7;
}
.noFound{
text-align: center;
font-weight: 600;
font-size: 16px;
color: #9d9d9d;
line-height: 39px;
}
.disNone{display: none;}
</style>
<body>
<div class="businessOverview" id="searchCityFenRunManagement">
<div class="businessOverviewUser" >
<div class="User">用户管理</div>
<div class="UserNew" v-on:click="searchCity()">新建</div>
</div>
<div class="businessOverview-store">
<div class="businessOverview-storeDiv">
<label for="" style="margin-right: 20px">店铺名称：</label>
<select class="form-control" id="jt_select1" v-model="restaurantesId" style="width: 150px; display: inline-block">
<option value="">全部</option>
<option v-for="item in restaurantes" v-bind:value="item.id ">{{item.name}}</option>
</select>
</div>
<div class="businessOverview-storeDiv disAlign">
<label for="" >用户名称：</label>
<div class="input-group input-group-sm" style="padding: 7px;width: 150px;">
<input autocomplete="off" placeholder="用户名称" style=" width: 204px;" type="text" class="layui-input" v-model="accountName" />
</div>
</div>
<div class="UserNew" v-on:click="query()" >查询</div>
</div>
<div class="businessOverview-Table">
<table class="table table-hover">
<thead>
<tr >
<th v-for="item in itemTitle" style="text-align: center;">{{item.typeName}}</th>
</tr>
</thead>
<tbody>
<tr>
<td class="noFound disNone" colspan="7"><div>当前暂无销售记录，您可查看其他时间的销售记录</div></td>
</tr>
<tr v-for="(item,index) in queryAllRestaurantAccountData">
<td class="lin33">{{item.accountName}}</td>
<td class="lin33">{{item.accountType|filterStatus}}</td>
<td class="lin33">{{item.accountStatus|StatusFuntion}}</td>
<td class="lin33">{{item.loginStatus|loginStatusFuntion}}</td>
<td class="lin33">{{item.restaurantName}}</td>
<td class="lin33">{{item.nickName}}</td>
<td class="lin33" style="text-align: left" id="layerDemo">
<button class="layui-btn" v-on:click="EditTheInformation(item)" >编辑</button>
<button class="layui-btn layui-btn-normal" v-on:click="ChangeThePassword(item)" data-method="offset" data-type="auto">重置密码</button>
<button class="layui-btn layui-btn-normal disable" v-if="item.accountStatus==1" v-on:click="disableData(item)">禁用</button>
<button class="layui-btn" v-if="item.accountStatus==3" v-on:click="disableData(item)">启用</button>
<button class="layui-btn layui-btn-warm" v-if="item.accountType==21?(item.loginStatus==2?'true':''):''" v-on:click="ForcedOffline(item)">强制下线</button>
<!--item.accountType==21 && item.loginStatus==2-->
</td>
</tr>
</tbody>
</table>
</div>
<div id="writeOffRecord" class="main-footer"
style="margin-left: 0;display: flex;justify-content: flex-end;align-items: center; border-top: 0px solid #d2d6de;">
<!--<div v-show="allpage.length >1" style="float: right;margin-right: 10px;" class="pagination">-->
<!--当前第{{current}}页,共{{allpage}}页-->
<!--</div>-->
<ul style="float: right;margin:20px 0" class="pagination">
<li v-on:click="(current!= 1)? queryAllRestaurantAccount(1,4):''"><a
href="javascript:void(0);">首页</a>
</li>
<li v-on:click="(current != 1)? queryAllRestaurantAccount(current--,-1):''"><a
href="javascript:void(0);">上一页</a>
</li>
<li v-for="index in pages" v-on:click="queryAllRestaurantAccount(index,0)"
v-bind:class="{'active':current == index}" v-bind:key="index">
<a href="javascript:void(0);">{{index}}</a>
</li>
<li v-on:click="(allpage != current) ? queryAllRestaurantAccount(current++,2):''"><a
href="javascript:void(0);">下一页</a>
</li>
<li v-on:click="(allpage != current)?queryAllRestaurantAccount(allpage,5):''"><a
href="javascript:void(0);">末页</a></li>
</ul>
</div>
<!--//制作重置密码-->
<div class="refund_bg" id="refund_bg">
<div class="refundForm">
<div class="refundFormText DetailsofRefund borderBot">确定重置密码</div>
<div>
<label for="" style=" margin-top: 15px;">用户名：</label>
<div class="input-group input-group-sm" style="padding: 7px;width: 150px; display: inline-block;">
{{accountNameChangeThePassword}}
</div>
</div>
<div>
<label for="" style=" margin-top: 15px;">默认密码：</label>
<div class="input-group input-group-sm" style="padding: 7px;width: 150px; display: inline-block;">
123456
</div>
</div>
<div class="refundForm_btn">
<button id="refundBtn" class="refundForm_submit" v-on:click="determinePassword(ChangeThePasswordId)">确定</button>
<button class="refundForm_reset" v-on:click="cancelPassword()">取消</button>
</div>
</div>
</div>
<!--//制作重置禁用-->
<div class="refund_bg" id="disableData">
<div class="refundForm">
<div class="refundFormText DetailsofRefund borderBot">确定重启/禁止用户</div>
<div>
<label for="" style=" margin-top: 15px;">确定启用/禁用该用户：</label>
<div class="input-group input-group-sm" style="padding: 7px;width: 100%;text-align: center;font-weight: 800;">
{{disableDataList.accountName}}
</div>
</div>
<div class="refundForm_btn">
<button class="refundForm_submit" v-on:click="determineDisableData(disableDataList)">确定</button>
<button class="refundForm_reset" v-on:click="cancelDisableData()">取消</button>
</div>
</div>
</div>
<!--//制作强制下线-->
<div class="refund_bg" id="ForcedOfflineData">
<div class="refundForm">
<div class="refundFormText DetailsofRefund borderBot">确定强制下线</div>
<div>
<label for="" style=" margin-top: 15px;">确定强制下线用户：</label>
<div class="input-group input-group-sm" style="padding: 7px;width: 100%;text-align: center;font-weight: 800;">
{{disableDataList.accountName}}
</div>
</div>
<div class="refundForm_btn">
<button class="refundForm_submit" v-on:click="ForcedOfflineShow(disableDataList)">确定</button>
<button class="refundForm_reset" v-on:click="cancelForcedOfflineData()">取消</button>
</div>
</div>
</div>
<!--编辑信息-->
<div class="refund_bg" id="EditTheInformation">
<div class="refundForm" style="height: 453px;">
<div class="refundFormText DetailsofRefund ">修改信息</div>
<div class="disWid">
<div class="disWidDiv">
<span style="color: red">*</span> 用户登录名：<div style=" text-align: center;">{{accountNameModify}}</div>
</div>
<div class="disWidDiv">
<span style="color: red">*</span>用户类型：
<div>
<select v-model="accountTypeModify">
<option value ="20">店长</option>
<option value ="21">员工</option>
<option value ="11">业务员</option>
</select>
</div>
</div>
<div class="disWidDiv" v-if="accountTypeModify!=11">
<span style="color: red">*</span>店铺：
<div>
<select class="form-control" v-model="restaurantesIdModify" style="width: 184px;padding: 0; display: inline-block">
<option v-for="item in restaurantes" v-bind:value="item.id ">{{item.name}}</option>
</select>
</div>
</div>
<div class="disWidDivSelect" v-if="accountTypeModify==11">
<span style="color: red">*</span>店铺：
<div class="borPadd ChooseComplete" v-on:click="ChooseComplete()">
选择店铺
</div>
<div class="selectStore" v-if="type==1">
<div class="selectStoreBox">
<div class="selectStoreBox1">
<input type="text" name="" v-model="QueryTheStoreData" placeholder="可搜索店铺" />
<button class="layui-btn layui-btn-normal" v-on:click="QueryTheStore()">查询</button>
</div>
<button class="layui-btn layui-btn-primary selectStoreOK" v-on:click="selectStoreOK()">完成收起</button>
</div>
<ul class="selectStoreHei ">
<li v-for="item in restaurantes" ><label ><input name="" type="checkbox" v-model="restaurantesIdListModify" v-bind:value="item.id" />{{item.name}}</label> </li>
</ul>
</div>
</div>
<div class="disWidDiv">
用户昵称：
<div><input type="text" class="form-control" v-model="nickNameModify" placeholder="请输入账号昵称" /></div>
</div>
<div class="disWidDiv">
<span style="color: red">*</span>姓名：
<div><input type="text" class="form-control" v-model="nameModify" placeholder="请输入真实姓名" /></div>
</div>
<div class="disWidDiv">
<span style="color: red">*</span>手机号：
<div><input type="text" class="form-control" v-model="mobileModify" placeholder="请输入手机号" /></div>
</div>
<div class="disLayButton">
<button class="layui-btn layui-btn-normal" v-on:click="SaveTheInformation()">修改</button>
<button class="layui-btn layui-btn-primary" v-on:click="cancelInformation()">取消</button>
</div>
<p style="font-size: 10px;color: red;margin-top: 25px;">带*为必填，请再三确认后填写信息,以防信息错误，款打到别人账号</p>
</div>
</div>
</div>
</div>
<!-- jQuery 3 -->
<script src="/js/jquery.min.js"></script>
<script src="/layui/layui.js"></script>
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--<script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>-->
<script src="/js/jquery.table2excel.min.js"></script>
<script src="/js/adminlte.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/js/bootstrap.min.js"></script>
<script th:inline="javascript">
new Vue({
el: "#searchCityFenRunManagement",
data: {
itemTitle:[
{typeName: '登录用户名'},
{typeName: '用户角色'},
{typeName: '用户状态'},
{typeName: '登录状态'},
{typeName: '店铺名称'},
{typeName: '微信昵称'},
{typeName: '操作'},
],
current: 1,
showItem: 5,
allpage: 1,
queryAllRestaurantAccountData:[],
accountName:"",
restaurantes:[],
restaurantesId:"",
ChangeThePasswordId:"",
peoInformation:[],
accountNameChangeThePassword:"",
disableDataList:[],
type:0,
accountNameModify :"",
accountTypeModify :"20",
restaurantesModify :"",
restaurantesIdModify :"",
nickNameModify:"",
nameModify:"",
restaurantesIdListModify:[],
mobileModify:"",
idModify:"",
QueryTheStoreData:""
},
filters: {
//账号类型
filterStatus:function(value){
switch (value) {
case 10:
return "管理员";
case 11:
return "业务员";
case 20:
return "店长";
case 21:
return "员工";
}
},
StatusFuntion:function(value){
switch (value) {
case 1:
return "正常";
case 2:
return "锁定";
case 3:
return "禁止登陆";
}
},
loginStatusFuntion:function(value){
switch (value) {
case 1:
return "下线";
case 2:
return "上线";
}
}
},
// 数据初始化
mounted: function () {
var this_ = this;
this_.selectRestaurant();
this_.queryAllRestaurantAccount(1,1);
},
computed: {
pages: function () {
var pag = [];
var current = this.current;
var showItem = this.showItem;
if (current >= showItem) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始
i = this.showItem;
if (middle > (this.allpage - this.showItem)) {
middle = (this.allpage - this.showItem) + 1
}
while (i--) {
pag.push(middle++);
}
} else { //当前页数大于显示页数了
var i = Math.min(this.showItem, this.allpage); //显示数据中低的那个
while (i) {
pag.unshift(i--);
}
}
return pag
},
},
methods: {
ChooseComplete:function(){
this.type=1
},
selectStoreOK:function(){
this.type=0
},
//关闭修改信息页面
cancelInformation:function(){
$("#EditTheInformation").css("display","none")
},
//修改
SaveTheInformation:function(){
var this_=this;
var data={}
console.log("显示"+this_.accountTypeModify)
console.log(this_.restaurantesIdModify,this_.restaurantesIdListModify)
if (this_.accountTypeModify!='11'){
if (!this_.accountNameModify||!this_.accountTypeModify||!this_.restaurantesIdModify||!this_.nameModify||!this_.mobileModify){
alert("重要信息不能为空")
return false
}
var regName = /^[\u4e00-\u9fa5]{2,4}$/;
if (!regName.test(this_.nameModify)){
alert("请输入正确的名字")
return false
}
var reg=/^1[3456789]\d{9}$/;
if(!reg.test(this_.mobileModify)){
alert("请输入有效的手机号码")
return false
}
data.accountName=this_.accountNameModify ;
data.accountType=this_.accountTypeModify ;
data.restaurantId=this_.restaurantesIdModify ;
data.nickName=this_.nickNameModify;
data.name=this_.nameModify;
data.mobile=this_.mobileModify;
data.id=this_.idModify;
console.log("aa")
}else{
if (!this_.accountNameModify||!this_.accountTypeModify||!this_.restaurantesIdListModify||!this_.nameModify||!this_.mobileModify){
alert("重要信息不能为空")
return false
}
var regName = /^[\u4e00-\u9fa5]{2,4}$/;
if (!regName.test(this_.nameModify)){
alert("请输入正确的名字")
return false
}
var reg=/^1[3456789]\d{9}$/;
if(!reg.test(this_.mobileModify)){
alert("请输入有效的手机号码")
return false
}
data.accountName=this_.accountNameModify ;
data.accountType=this_.accountTypeModify ;
data.restaurantIds=this_.restaurantesIdListModify ;
data.nickName=this_.nickNameModify;
data.name=this_.nameModify;
data.mobile=this_.mobileModify;
data.id=this_.idModify;
console.log("bb")
}
console.log(data)
console.log(this_.restaurantesIdModify,this_.restaurantesIdListModify)
data = JSON.stringify(data);
$.ajax({
type: 'post',
contentType: 'application/json',
data:data,
url: '/v1/wx/cs/searchcity/cloudShopkeeper/updateRestaurantAccount',
success: function (res) {
console.log(res)
if(res.status==200){
alert("修改成功")
this_.queryAllRestaurantAccount(this_.current,1)
$("#EditTheInformation").css("display","none")
}else{
alert(res.message)
}
},
error: function (res) {
alert("获取失败")
}
});
},
QueryTheStore:function(){
var this_ =this
var data={}
data.name=this_.QueryTheStoreData
data = JSON.stringify(data);
$.ajax({
type: 'post',
contentType: 'application/json',
data:data,
url: "/v1/wx/cs/searchcity/cloudShopkeeper/queryAllRestaurantInfo",
success: function (res) {
console.log(res)
this_.restaurantes=res.data;
},
error:function(res){
alert("获取失败")
}
});
},
//新建用户
searchCity:function(){
window.location.href = "newUserManagement.html" //跳页
},
//查询详细信息
queryAllRestaurantAccount:function (index,num) {
console.log(index,num)
var this_ = this;
if (num == 2) {
index = index + 1
} else if (num == -1) {
index = index - 1
} else if (num == 1) {
index = index
} else if (num == 0) {
if (index == this_.current) return;
this.current = index;
} else if (num == 4) {
this_.current = 1;
index = index;
} else if (num == 5) {
this_.current = this_.allpage;
index = index;
}
var data={};
data.pageNumber= index;
data.accountName=this_.accountName;
data.restaurantId=this_.restaurantesId
data.pageStart=0;
data.pageSize=0;
// console.log(data)
data = JSON.stringify(data);
$.ajax({
type: 'post',
contentType: 'application/json',
data:data,
url: '/v1/wx/cs/searchcity/cloudShopkeeper/queryAllRestaurantAccount',
success: function (res) {
// console.log(res)
// if (res.data.restaurantAccountVOList.length==0){
// $(".noFound").removeClass("disNone")
// }else{
// $(".noFound").addClass("disNone")
// }
this_.queryAllRestaurantAccountData=res.data.restaurantAccountVOList
this_.allpage=res.data.pageCount
},
error: function (res) {
alert("获取失败")
}
});
},
//点击查询
query:function(){
this.queryAllRestaurantAccount(1,1)
},
//查询店铺和店铺ID
selectRestaurant:function(){
var this_=this;
var data ={}
data = JSON.stringify(data);
$.ajax({
type: 'post',
contentType: 'application/json',
data:JSON.stringify({}),
url: "/v1/wx/cs/searchcity/cloudShopkeeper/queryAllRestaurantInfo",
success: function (res) {
// console.log(res)
this_.restaurantes=res.data;
},
error:function(res){
alert("获取失败")
}
});
},
//点击禁止按钮变启用或者点击启用变禁止
disableData:function(e,index){
var this_=this
$("#disableData").css('display','block');
this_.disableDataList =e
},
//确定点击禁止按钮变启用或者点击启用变禁止
determineDisableData:function(disableDataList){
console.log(disableDataList)
var this_=this
$.ajax({
type: 'post',
contentType: 'application/json',
data:disableDataList.id+"",
url: "/v1/wx/cs/searchcity/cloudShopkeeper/disableUser",
success: function (res) {
console.log(res)
this_.queryAllRestaurantAccount(this_.current,1)
$("#disableData").css('display','none');
},
error:function(res){
alert("获取失败")
}
});
},
//取消禁止和启动页面
cancelDisableData:function(){
$("#disableData").css('display','none');
},
//强制下线
ForcedOffline:function(e){
var this_=this
$("#ForcedOfflineData").css("display","block")
this_.disableDataList =e
},
//强制下线页面
ForcedOfflineShow:function (disableDataList) {
console.log(disableDataList)
var this_=this
$.ajax({
type: 'post',
contentType: 'application/json',
data:disableDataList.id+"",
url: "/v1/wx/cs/searchcity/cloudShopkeeper/forceUserOffline",
success: function (res) {
console.log(res)
this_.queryAllRestaurantAccount(this_.current,1)
$("#ForcedOfflineData").css('display','none');
},
error:function(res){
alert("获取失败")
}
});
},
//取消强制下线
cancelForcedOfflineData:function(){
$("#ForcedOfflineData").css("display","none")
},
//单机重置密码
ChangeThePassword:function(e){
$("#refund_bg").css("display","block")
console.log(e)
var this_=this;
this_.accountNameChangeThePassword=e.accountName;
this_.ChangeThePasswordId=e.id
},
//确定重置密码
determinePassword:function(id){
var this_=this
$.ajax({
type: 'post',
contentType: 'application/json',
data:id+"",
url: "/v1/wx/cs/searchcity/cloudShopkeeper/resetUserPassword",
success: function (res) {
console.log(res)
this_.queryAllRestaurantAccount(this_.current,1)
$("#refund_bg").css("display","none")
},
error:function(res){
alert("获取失败")
}
});
},
//取消
cancelPassword:function () {
$("#refund_bg").css("display","none")
},
//编辑个人信息
EditTheInformation:function(it){
var this_=this;
$("#EditTheInformation").css("display","block")
$.ajax({
type: 'post',
contentType: 'application/json',
data:it.id+"",
url: "/v1/wx/cs/searchcity/cloudShopkeeper/queryRestaurantAccount",
success: function (res) {
this_.idModify =res.data.id;
console.log( this_.idModify)
this_.accountNameModify =res.data.accountName;
this_.accountTypeModify =res.data.accountType;
this_.restaurantesIdModify =res.data.restaurantId;
this_.nickNameModify =res.data.nickName;
this_.nameModify =res.data.name;
this_.mobileModify=res.data.mobile;
this_.restaurantesIdListModify =res.data.restaurantIds;
// console.log(res.data.restaurantId);
// console.log(this_.restaurantesIdModify);
// console.log(this_.restaurantesIdListModify);
},
error:function(res){
alert("获取失败")
}
});
// this_.peoInformation =it;
}
}
})
</script>
</body>
</html>
