$(function () {
$("#jqGrid").Grid({
url: '../sys/user/list',
rownumWidth:60,
colModel: [
{label: '用户ID', name: 'userId', index: "user_id", key: true, hidden: true},
{label: '用户名', name: 'username', width: 75},
// {label: '所属部门', name: 'deptName', width: 75},
// {label: '邮箱', name: 'email', width: 90},
{label: '手机号', name: 'mobile', width: 100},
{label: '店铺关联', name: 'brandList', width: 100,sortable:false,formatter:function (value) {
let temp = []
value.forEach(function (item) {
temp.push(item.brandName||item.name)
})
return temp.join('、')
}},
{label: '角色', name: 'roleList', width: 100,sortable:false,formatter:function (value,row,col) {
let roleList = col.roleList
return roleList[0]? roleList[0].roleName:'-'
}},
{
label: '状态', name: 'status', width: 80, formatter: function (value) {
return value === 0 ?
'禁用' :
'正常';
}
},
{
label: '创建时间', name: 'createTime', index: "create_time", width: 80, formatter: function (value) {
return transDate(value);
}
}]
});
});
var setting = {
data: {
simpleData: {
enable: true,
idKey: "deptId",
pIdKey: "parentId",
rootPId: -1
},
key: {
url: "nourl"
}
}
};
var ztree;
const validatePhoneCheck = function (rule, value, callback){
if (value === ''||!value) {
callback(new Error('手机号不能为空'));
} else if(!(/^1[3456789]\d{9}$/.test(value))){
callback(new Error('手机号不正确'));
} else {
callback();
}
};
var vm = new Vue({
el: '#rrapp',
data: {
modal1:false,
q: {
username: null
},
showList: true,
title: null,
roleList: {},
user: {
status: 1,
deptName: '',
roleIdList: [],
brandIdList: [],
brandList: []
},
ruleValidate: {
username: [
{required: true, message: '姓名不能为空', trigger: 'blur'}
],
email: [
{required: true, message: '邮箱不能为空', trigger: 'blur'},
{type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
],
mobile: [
{required: true, validator: validatePhoneCheck, trigger: 'blur'}
]
},
brandsList:[],
brandPage:1,
brandPerPage:10,
brandTotal:0,
brandSeleced:[],
social:[],
cacheData:{},
cacheDataFirst:{}
},
watch:{
brandPage:function name(newVal) {
this.getBrandList()
}
},
methods: {
clickCheck:function(item,idx){
item['checked'] = !item['checked']
this.$set(this.brandsList,idx,item)
},
ok: function() {
let temp = []
let tempid = []
var that = this
Object.keys(vm.cacheData).forEach(function(item){
that.cacheData[item].page.list.forEach(function(sub){
if (sub['checked']) {
temp.push(sub)
tempid.push(sub.id)
}
})
})
vm.user.brandList = temp
vm.user.brandIdList = tempid
},
cancel:function () {
this.cacheData={}
this.modal1 = false
},
query: function () {
vm.reload();
},
add: function () {
vm.showList = false;
vm.title = "新增(默认密码：888888)";
vm.roleList = {};
vm.user = {status: 1, roleIdList: [], brandIdList:[], deptId: '', deptName: ''};
//获取角色信息
this.getRoleList();
vm.getDept();
},
getDept: function () {
//加载部门树
Ajax.request({
url: '../sys/dept/list',
async: true,
successCallback: function (r) {
ztree = $.fn.zTree.init($("#deptTree"), setting, r.list);
var node = ztree.getNodeByParam("deptId", vm.user.deptId);
if (node != null) {
ztree.selectNode(node);
vm.user.deptName = node.name;
}
}
});
},
pageChange:function(page){
this.brandPage = page
},
getBrandList: function () {
this.modal1 = true
if (this.cacheData[this.brandPage]) {
let temp = this.cacheData[this.brandPage]
this.brandsList = temp.page.list
this.brandPage = temp.page.currPage
this.brandTotal = temp.page.totalCount
return
}
let that = this
Ajax.request({
url: '../brand/list?_search=false&limit='+that.brandPerPage+'&page='+that.brandPage+'&sidx=&order=asc',
async: true,
successCallback: function (res) {
res.page.list.forEach(function (item,index){
item['checked'] = false
if (that.user.brandList) {
that.user.brandList.forEach(function(sub){
// item['checked'] = false
if (item.id===sub.brandId) {
item['checked'] = true
return
}
})
}
})
that.cacheData[res.page.currPage] = res
that.brandsList = res.page.list
that.brandPage = res.page.currPage
that.brandTotal = res.page.totalCount
}
});
},
update: function () {
var userId = getSelectedRow("#jqGrid");
if (userId == null) {
return;
}
vm.showList = false;
vm.title = "修改";
Ajax.request({
url: "../sys/user/info/" + userId,
async: true,
successCallback: function (r) {
vm.user = r.user;
//获取角色信息
vm.getRoleList();
vm.getDept();
}
});
},
del: function () {
var userIds = getSelectedRows("#jqGrid");
if (userIds == null) {
return;
}
confirm('确定要删除选中的记录？', function () {
Ajax.request({
url: "../sys/user/delete",
params: JSON.stringify(userIds),
contentType: "application/json",
type: 'POST',
successCallback: function () {
alert('操作成功', function (index) {
vm.reload();
});
}
});
});
},
saveOrUpdate: function (event) {
var url = vm.user.userId == null ? "../sys/user/save" : "../sys/user/update";
Ajax.request({
url: url,
params: JSON.stringify(vm.user),
contentType: "application/json",
type: 'POST',
successCallback: function () {
alert('操作成功', function (index) {
vm.reload();
});
}
});
},
getRoleList: function () {
Ajax.request({
url: '../sys/role/select',
async: true,
successCallback: function (r) {
vm.roleList = r.list;
}
});
},
reload: function (event) {
vm.showList = true;
var page = $("#jqGrid").jqGrid('getGridParam', 'page');
$("#jqGrid").jqGrid('setGridParam', {
postData: {'username': vm.q.username},
page: page
}).trigger("reloadGrid");
vm.handleReset('formValidate');
},
deptTree: function () {
openWindow({
title: "选择部门",
area: ['300px', '450px'],
content: jQuery("#deptLayer"),
btn: ['确定', '取消'],
btn1: function (index) {
var node = ztree.getSelectedNodes();
//选择上级部门
vm.user.deptId = node[0].deptId;
vm.user.deptName = node[0].name;
layer.close(index);
}
});
},
handleSubmit: function (name) {
handleSubmitValidate(this, name, function () {
vm.saveOrUpdate()
});
},
handleReset: function (name) {
handleResetForm(this, name);
this.cacheData = {}
this.user= {
status: 1,
deptName: '',
roleIdList: [],
brandIdList: [],
brandList: []
}
}
}
});