优化角色页面

This commit is contained in:
wuxw 2022-07-27 00:33:15 +08:00
parent cf22bd0fdc
commit a015a23472
17 changed files with 460 additions and 86 deletions

BIN
public/components/dev/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -68,6 +68,7 @@
$('#addPrivilegeGroupModel').modal('hide');
vc.component.clearAddPrivilegeGroupInfo();
vc.component.$emit('privilegeGroup_loadPrivilegeGroup',{});
vc.emit('roleDiv', '_loadRole',{})
return ;
}
vc.component.addPrivilegeGroupInfo.errorInfo = json;

View File

@ -28,6 +28,7 @@
//关闭model
$('#deletePrivilegeGroupModel').modal('hide');
vc.component.$emit('privilegeGroup_loadPrivilegeGroup',{});
vc.emit('roleDiv', '_loadRole',{})
return ;
}
vc.component.deletePrivilegeGroupInfo.errorInfo = json;

View File

@ -78,6 +78,7 @@
$('#editPrivilegeGroupModel').modal('hide');
vc.component.clearEditPrivilegeGroupInfo();
vc.component.$emit('privilegeGroup_loadPrivilegeGroup',{});
vc.emit('roleDiv', '_loadRole',{})
return ;
}
vc.component.editPrivilegeGroupInfo.errorInfo = json;

View File

@ -26,7 +26,7 @@
</label>
<div class="col-sm-10">
<select class="custom-select" v-model="editStaffInfo.relCd">
<option selected disabled value="">{{vc.i18n('必填','editStaff')}},请选择岗位
<option selected disabled value="">{{vc.i18n('必填,请选择岗位','editStaff')}}
</option>
<option v-for="(item,index) in editStaffInfo.relCds" :key="index"
v-bind:value="item.statusCd">
@ -61,41 +61,12 @@
</label>
<div class="col-sm-10">
<select class="custom-select" v-model="editStaffInfo.sex">
<option selected value="">{{vc.i18n('必填','editStaff')}},请选择员工性别</option>
<option selected value="">{{vc.i18n('必填,请选择员工性别','editStaff')}}</option>
<option value="0">{{vc.i18n('男','editStaff')}}</option>
<option value="1">{{vc.i18n('女','editStaff')}}</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<span><vc:i18n name="公司" namespace="editStaff"></vc:i18n></span>
</label>
<div class="col-sm-10">
<select class="custom-select" v-model="editStaffInfo.parentOrgId"
@change="_editChangeBrach()">
<option selected value="">{{vc.i18n('必填','editStaff')}},请选择公司</option>
<option v-for="branchOrg in editStaffInfo.branchOrgs"
:value="branchOrg.orgId">
{{branchOrg.orgName}}
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<span><vc:i18n name="部门" namespace="editStaff"></vc:i18n></span>
</label>
<div class="col-sm-10">
<select class="custom-select" v-model="editStaffInfo.orgId">
<option selected value="">{{vc.i18n('必填','editStaff')}},请选择部门</option>
<option v-for="departmentOrg in editStaffInfo.departmentOrgs"
:value="departmentOrg.orgId">
{{departmentOrg.orgName}}
</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">
<span><vc:i18n name="住址" namespace="editStaff"></vc:i18n></span>

View File

@ -27,7 +27,7 @@
vc.getDict('u_org_staff_rel', "rel_cd", function (_data) {
vc.component.editStaffInfo.relCds = _data;
});
vc.component._editGetOrgsByOrgLevelStaff(1, 100, 2, '');
},
_initEvent: function () {
vc.component.$on('edit_staff_event', function (_staffInfo) {
@ -42,7 +42,6 @@
vc.component.editStaffInfo.username = _staffInfo.name;
vc.component.editStaffInfo.photo = _fileUrl + "?objId=" +
vc.component.editStaffInfo.userId + "&communityId=" + vc.getCurrentCommunity().communityId + "&fileTypeCd=12000&time=" + new Date();
$that._editChangeBrach()
},
editStaffValidate() {
return vc.validate.validate({
@ -89,26 +88,26 @@
},
editStaffSubmit: function () {
if (!vc.component.editStaffValidate()) {
vc.component.editStaffInfo.errorInfo = vc.validate.errInfo;
vc.toast(vc.validate.errInfo);
return;
}
vc.component.editStaffInfo.errorInfo = "";
vc.http.post(
'editStaff',
'modifyStaff',
$that.editStaffInfo.name = $that.editStaffInfo.username;
$that.editStaffInfo.staffId = $that.editStaffInfo.userId;
vc.http.apiPost(
'/user.staff.modify',
JSON.stringify(vc.component.editStaffInfo), {
emulateJSON: true
},
function (json, res) {
json = JSON.parse(json);
let _json = JSON.parse(json);
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
if (res.status == 200 && json.code == 0) {
if ( _json.code == 0) {
//关闭model
$('#editStaffModel').modal('hide');
vc.component.$emit('editStaff_reload_event', {});
vc.emit('staff', 'notify',{})
return;
}
vc.component.editStaffInfo.errorInfo = json.msg;
vc.toast(_json.msg);
},
function (errInfo, error) {
console.log('请求失败处理');
@ -182,35 +181,6 @@
}
}
},
_editGetOrgsByOrgLevelStaff: function (_page, _rows, _orgLevel, _parentOrgId) {
let param = {
params: {
page: _page,
row: _rows,
orgLevel: _orgLevel,
parentOrgId: _parentOrgId
}
};
//发送get请求
vc.http.get('staff',
'list',
param,
function (json, res) {
var _orgInfo = JSON.parse(json);
if (_orgLevel == 2) {
vc.component.editStaffInfo.branchOrgs = _orgInfo.orgs;
} else {
vc.component.editStaffInfo.departmentOrgs = _orgInfo.orgs;
}
},
function (errInfo, error) {
console.log('请求失败处理');
}
);
},
_editChangeBrach: function () {
vc.component._editGetOrgsByOrgLevelStaff(1, 100, 3, $that.editStaffInfo.branchOrgId);
}
},
});
})(window.vc);

View File

@ -0,0 +1,4 @@
<div class="bg-white margin-top-xs padding border-radius">
<div id="jstree_privilege">
</div>
</div>

View File

@ -0,0 +1,254 @@
/**
入驻小区
**/
(function(vc) {
vc.extends({
data: {
privilegeTreeInfo: {
privileges:[],
_currentPgId:''
}
},
_initMethod: function() {
},
_initEvent: function() {
vc.on('privilegeTree','loadPrivilege',function(_pgId){
$that.privilegeTreeInfo._currentPgId = _pgId;
$that._loadPrivilege(_pgId);
});
},
methods: {
addPrivilegeToPrivilegeGroup: function(_selectPrivileges) {
if (_selectPrivileges.length < 1) {
vc.toast("请先选择权限");
return;
}
let _pIds = [];
for (let selectIndex = 0; selectIndex < _selectPrivileges.length; selectIndex++) {
let _pId = {
pId: _selectPrivileges[selectIndex]
};
_pIds.push(_pId);
}
let _objData = {
pgId: vc.component.privilegeTreeInfo._currentPgId,
pIds: _pIds
};
vc.http.post(
'addPrivilege',
'addPrivilegeToPrivilegeGroup',
JSON.stringify(_objData), {
emulateJSON: true
},
function(json, res) {
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
if (res.status == 200) {
return;
}
vc.toast('失败')
},
function(errInfo, error) {
console.log('请求失败处理');
vc.toast('失败')
});
},
deletePrivilege: function(_selectPrivileges) {
if (_selectPrivileges.length < 1) {
vc.toast("请先选择权限");
return;
}
var _pIds = [];
for (var selectIndex = 0; selectIndex < _selectPrivileges.length; selectIndex++) {
var _pId = {
pId: _selectPrivileges[selectIndex]
};
_pIds.push(_pId);
}
var _objData = {
pgId: vc.component.privilegeTreeInfo._currentPgId,
pIds: _pIds
};
vc.http.post(
'deletePrivilege',
'delete',
JSON.stringify(_objData), {
emulateJSON: true
},
function(json, res) {
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
if (res.status == 200) {
//关闭model
return;
}
vc.toast('删除失败');
},
function(errInfo, error) {
vc.toast('删除失败');
});
},
_initJsTreePrivilege: function(_privileges) {
let _data = $that._doJsTreeData(_privileges);
$.jstree.destroy()
$("#jstree_privilege").jstree({
"checkbox": {
"keep_selected_style": false
},
"plugins": ["checkbox"],
'state': { //一些初始化状态
"opened": false,
},
'core': {
'data': _data
}
});
$('#jstree_privilege').on("changed.jstree", function(e, data) {
if (data.action == 'model' || data.action == 'ready') {
//默认合并
$("#jstree_privilege").jstree("close_all");
return;
}
let _selected = data.node.state.selected;
let _d = data.node.children_d;
if (_d.length < 1) {
_d.push(data.node.id);
}
let _selectPrivileges = [];
_d.forEach(_dItem => {
if (_dItem.indexOf('p_') > -1) {
_selectPrivileges.push(_dItem.substring(2));
}
});
if (_selectPrivileges.length < 1) {
return;
}
if (_selected) {
$that.addPrivilegeToPrivilegeGroup(_selectPrivileges);
} else {
$that.deletePrivilege(_selectPrivileges);
}
});
},
_doJsTreeData: function(_privileges) {
let _mGroupTree = [];
//构建 第一层菜单组
_privileges.forEach(pItem => {
let _includeGroup = false;
for (let _mgIndex = 0; _mgIndex < _mGroupTree.length; _mgIndex++) {
if (pItem.gId == _mGroupTree[_mgIndex].gId) {
_includeGroup = true;
}
}
if (!_includeGroup) {
let _groupItem = {
id: 'g_' + pItem.gId,
gId: pItem.gId,
text: pItem.gName,
state: {
opened: false
},
children: []
};
$that._doJsTreeMenuData(_groupItem);
_mGroupTree.push(_groupItem);
}
});
return _mGroupTree;
},
_doJsTreeMenuData: function(_groupItem) {
let _privileges = $that.privilegeTreeInfo.privileges;
//构建菜单
let _children = _groupItem.children;
for (let _pIndex = 0; _pIndex < _privileges.length; _pIndex++) {
if (_groupItem.gId == _privileges[_pIndex].gId) {
let _includeMenu = false;
for (let _mgIndex = 0; _mgIndex < _children.length; _mgIndex++) {
if (_privileges[_pIndex].mId == _children[_mgIndex].mId) {
_includeMenu = true;
}
}
if (!_includeMenu) {
let _menuItem = {
id: 'm_' + _privileges[_pIndex].mId,
mId: _privileges[_pIndex].mId,
text: _privileges[_pIndex].mName,
state: {
opened: false
},
children: []
};
$that._doJsTreePrivilegeData(_menuItem);
_children.push(_menuItem);
}
}
}
},
_doJsTreePrivilegeData: function(_menuItem) {
let _privileges = $that.privilegeTreeInfo.privileges;
//构建菜单
let _children = _menuItem.children;
for (let _pIndex = 0; _pIndex < _privileges.length; _pIndex++) {
if (_menuItem.mId == _privileges[_pIndex].mId) {
let _includePrivilege = false;
for (let _mIndex = 0; _mIndex < _children.length; _mIndex++) {
if (_privileges[_pIndex].pId == _children[_mIndex].pId) {
_includePrivilege = true;
}
}
if (!_includePrivilege) {
let _selected = false;
if (_privileges[_pIndex].pgId) {
_selected = true;
}
let _privilegeItem = {
id: 'p_' + _privileges[_pIndex].pId,
pId: _privileges[_pIndex].pId,
text: _privileges[_pIndex].pName,
state: {
opened: false,
selected: _selected
}
};
_children.push(_privilegeItem);
}
}
}
},
_loadPrivilege: function(_pgId) {
vc.component.privilegeTreeInfo.privileges = [];
var param = {
params: {
pgId: _pgId,
communityId: vc.getCurrentCommunity().communityId
}
};
//发送get请求
vc.http.get('addPrivilege',
'listNoAddPrivilege',
param,
function(json) {
let _privileges = JSON.parse(json);
vc.component.privilegeTreeInfo.privileges = _privileges;
$that._initJsTreePrivilege(_privileges);
},
function() {
console.log('请求失败处理');
}
);
},
}
});
})(window.vc);

View File

@ -0,0 +1,21 @@
<div class="bg-white margin-top-xs padding border-radius">
<div class=" ">
<button type="button" class="btn btn-white btn-sm" v-on:click="openPrivilegeGroupModel()">
添加
</button>
<button type="button" class="btn btn-white btn-sm" v-on:click="openEditPrivilegeGroupModel()">
修改
</button>
<button type="button" class="btn btn-white btn-sm" v-on:click="openDeletePrivilegeGroupModel()">
删除
</button>
</div>
<div class="vc-org margin-top">
<ul>
<li v-for="(role,index) in roleDivInfo.roles" @click="_switchRole(role)" :class="{'active':role.pgId == roleDivInfo.curRole.pgId}">{{role.name}}</li>
</ul>
</div>
<vc:create path="dev/addPrivilegeGroup"></vc:create>
<vc:create path="dev/editPrivilegeGroup"></vc:create>
<vc:create path="dev/deletePrivilegeGroup"></vc:create>
</div>

View File

@ -0,0 +1,60 @@
/**
入驻小区
**/
(function(vc) {
vc.extends({
data: {
roleDivInfo: {
roles: [],
roleId: '',
curRole:{}
}
},
_initMethod: function() {
$that._loadRoles();
},
_initEvent: function() {
vc.on('roleDiv', '_loadRole', function(_param) {
$that._loadRoles();
});
},
methods: {
_loadRoles: function() {
let param = {
params: {
communityId: vc.getCurrentCommunity().communityId
}
};
//发送get请求
vc.http.apiGet('/query.store.privilegeGroup',
param,
function(json) {
let _roles = JSON.parse(json);
$that.roleDivInfo.roles = _roles;
if(_roles && _roles.length>0){
$that._switchRole(_roles[0])
}
},
function() {
console.log('请求失败处理');
});
},
_switchRole:function(_role){
$that.roleDivInfo.curRole = _role;
vc.emit('role','switchRole',_role);
},
openPrivilegeGroupModel: function() {
vc.component.$emit('addPrivilegeGroup_openPrivilegeGroupModel', {});
},
openEditPrivilegeGroupModel: function() {
vc.emit('editPrivilegeGroup', 'openPrivilegeGroupModel', $that.roleDivInfo.curRole);
},
openDeletePrivilegeGroupModel: function() {
vc.component.$emit('deletePrivilegeGroup_openDeletePrivilegeGroupModel', $that.roleDivInfo.curRole);
},
}
});
})(window.vc);

View File

@ -14,6 +14,7 @@
--vc-nav-bg: #1D1F2D;
--vc-nav-color: #888888;
--vc-nav-active-color: #FFFFFF;
--vc-org-bg-active-color: #EAF0FE;
}
.margin-0 {
@ -499,10 +500,15 @@ ul li {
border-radius: 10px;
}
.hand{
.hand {
cursor: pointer;
}
.line-x {
width: 100%;
border-bottom: 2px solid #F6F6F7;
}
html,
body,
.vc-page {
@ -821,4 +827,38 @@ body,
nav-link nav-link-breadcrumb active:active {
background-color: red;
}
}
.vc-org ul li {
height: 40px;
line-height: 40px;
padding-left: 15px;
cursor: pointer;
}
.vc-org ul li:hover {
background-color: var(--vc-org-bg-active-color);
}
.vc-org .active {
background-color: var(--vc-org-bg-active-color);
}
/* .vc-org .role-title{
} */
.vc-org-page .role-context {
color: #888888;
}
.vc-org-page .role-menu {
margin-top: 15px;
font-size: 14px;
cursor: pointer;
}
.vc-org-page .role-menu .item:hover ,.vc-org-page .role-menu .active{
color: #1890FF;
}

View File

@ -89,6 +89,8 @@
return;
}
$that.addStaffInfo.name = $that.addStaffInfo.username;
vc.http.apiPost(
'/user.staff.add',
JSON.stringify(vc.component.addStaffInfo), {
@ -101,7 +103,7 @@
//关闭model
$('#addStaffModel').modal('hide');
vc.component.clearAddStaffInfo();
//vc.goBack();
vc.goBack();
return;
}
vc.toast(_json.msg);

View File

@ -1,9 +1,9 @@
<div>
<div class="row">
<div class="col-md-2" style="padding-right:0px">
<div class="col-md-3" style="padding-right:0px">
<vc:create path="frame/orgTree" callBackListener="org"></vc:create>
</div>
<div class="col-md-10 margin-top-xs">
<div class="col-md-9 margin-top-xs">
<div class="row">
<div class="col-lg-12">
<div class="ibox ">

View File

@ -0,0 +1,22 @@
<div>
<div class="row ">
<div class="col-md-2" style="padding-right:0px">
<vc:create path="frame/roleDiv" callBackListener="org"></vc:create>
</div>
<div class="col-md-10 margin-top-xs vc-org-page">
<div class="bg-white border-radius padding">
<h5 class="role-title">{{roleInfo.curRole.name}}</h5>
<div class="role-context ">{{roleInfo.curRole.description}}</div>
<div class="line-x margin-top"></div>
<div class="role-menu flex justify-start">
<div class="item margin-right" :class="{'active':roleInfo.tabName == 'privilege'}" @click="_changeRoleTab('privilege')">功能授权</div>
<div class="item margin-right" :class="{'active':roleInfo.tabName == 'community'}" @click="_changeRoleTab('community')">小区授权</div>
<div class="item margin-right" :class="{'active':roleInfo.tabName == 'staff'}" @click="_changeRoleTab('staff')">员工关联</div>
</div>
<div v-if="roleInfo.tabName == 'privilege'">
<vc:create path="frame/privilegeTree"></vc:create>
</div>
</div>
</div>
</div>
</div>

30
public/pages/frame/role/role.js Executable file
View File

@ -0,0 +1,30 @@
(function(vc) {
var DEFAULT_PAGE = 1;
var DEFAULT_ROWS = 10;
vc.extends({
data: {
roleInfo: {
curRole:{},
tabName:'privilege'
},
},
_initMethod: function() {
},
_initEvent: function() {
vc.on('role','switchRole',function(_param){
$that.roleInfo.curRole = _param;
$that._changeRoleTab('privilege')
})
},
methods: {
_changeRoleTab:function(_tabName){
$that.roleInfo.tabName = _tabName;
if(_tabName == 'privilege'){
vc.emit('privilegeTree','loadPrivilege',$that.roleInfo.curRole.pgId);
}
}
},
});
})(window.vc);

View File

@ -68,10 +68,7 @@
<span><vc:i18n name="名称" namespace="staff"></vc:i18n></span>
</th>
<th class="text-center">
<span><vc:i18n name="关联组织" namespace="staff"></vc:i18n></span>
</th>
<th class="text-center">
<span><vc:i18n name="岗位" namespace="staff"></vc:i18n></span>
<span><vc:i18n name="手机号" namespace="staff"></vc:i18n></span>
</th>
<th class="text-center">
<span><vc:i18n name="邮箱" namespace="staff"></vc:i18n></span>
@ -82,9 +79,7 @@
<th class="text-center">
<span><vc:i18n name="性别" namespace="staff"></vc:i18n></span>
</th>
<th class="text-center">
<span><vc:i18n name="手机号" namespace="staff"></vc:i18n></span>
</th>
<th class="text-center">
<span><vc:i18n name="操作" namespace="staff"></vc:i18n></span>
</th>
@ -94,12 +89,11 @@
<tr class="gradeX" v-for="staff in staffData">
<td class="text-center">{{staff.userId}}</td>
<td class="text-center">{{staff.name}}</td>
<td class="text-center">{{staff.orgName}}</td>
<td class="text-center">{{staff.relCdName}}</td>
<td class="text-center">{{staff.tel}}</td>
<td class="text-center">{{staff.email}}</td>
<td class="text-center">{{staff.address}}</td>
<td class="text-center">{{staff.sex == 0 ? '男' : '女'}}</td>
<td class="text-center">{{staff.tel}}</td>
<td class="text-center">
<div class="btn-group">
<button class="btn-white btn btn-xs" v-on:click="openEditStaff(staff)">

View File

@ -58,6 +58,9 @@
vc.on('pagination', 'page_event', function(_currentPage) {
vc.component.loadData(_currentPage, DEFAULT_ROWS);
});
vc.on('staff', 'notify', function() {
vc.component.loadData(1, DEFAULT_ROWS);
});
vc.component.$on('addStaff_reload_event', function() {
vc.component.loadData(1, 10);
});