‘合并
fengtianyangyang
commit
535a36c378
|
|
@ -3,17 +3,24 @@ var BASE = {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
API_DEV: {
|
||||
<<<<<<< HEAD
|
||||
// common: "https://common-api.pickmall.cn",
|
||||
// buyer: "https://buyer-api.pickmall.cn",
|
||||
// seller: "https://store-api.pickmall.cn",
|
||||
// manager: "https://admin-api.pickmall.cn"
|
||||
common: "http://127.0.0.1:8890",
|
||||
buyer: "http://127.0.0.1:8892",
|
||||
=======
|
||||
common: "http://localhost:8890",
|
||||
buyer: "http://localhost:8888",
|
||||
seller: "http://localhost:8889",
|
||||
manager: "http://localhost:8887"
|
||||
>>>>>>> clerk
|
||||
},
|
||||
API_PROD: {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
buyer: "https://buyer-api.pickmall.cn",
|
||||
seller: "https://store-api.pickmall.cn",
|
||||
manager: "https://admin-api.pickmall.cn"
|
||||
common: "http://192.168.2.110:8890",
|
||||
buyer: "http://192.168.2.110:8888",
|
||||
seller: "http://192.168.2.110:8889",
|
||||
manager: "http://192.168.2.110:8887"
|
||||
},
|
||||
};
|
||||
|
|
|
|||
16677
buyer/yarn.lock
16677
buyer/yarn.lock
File diff suppressed because it is too large
Load Diff
|
|
@ -3,12 +3,11 @@ var BASE = {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
API_DEV: {
|
||||
// common: "https://common-api.pickmall.cn",
|
||||
// buyer: "https://buyer-api.pickmall.cn",
|
||||
// seller: "https://store-api.pickmall.cn",
|
||||
// manager: "https://admin-api.pickmall.cn"
|
||||
common: "http://127.0.0.1:8890",
|
||||
manager: "http://127.0.0.1:8887"
|
||||
common: "http://localhost:8890",
|
||||
buyer: "http://localhost:8888",
|
||||
seller: "http://localhost:8889",
|
||||
manager: "http://localhost:8887"
|
||||
|
||||
},
|
||||
API_PROD: {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
/>
|
||||
</Form-item>
|
||||
<Form-item label="联系方式">
|
||||
<Input
|
||||
<Inputuser-manage
|
||||
type="text"
|
||||
v-model="searchForm.mobile"
|
||||
placeholder="请输入联系方式"
|
||||
|
|
|
|||
|
|
@ -3,12 +3,19 @@ var BASE = {
|
|||
* @description api请求基础路径
|
||||
*/
|
||||
API_DEV: {
|
||||
<<<<<<< HEAD
|
||||
// common: "https://common-api.pickmall.cn",
|
||||
// buyer: "https://buyer-api.pickmall.cn",
|
||||
// seller: "https://store-api.pickmall.cn",
|
||||
// manager: "https://admin-api.pickmall.cn"
|
||||
common: "http://127.0.0.1:8890",
|
||||
seller: "http://127.0.0.1:8889",
|
||||
=======
|
||||
common: "http://localhost:8890",
|
||||
buyer: "http://localhost:8888",
|
||||
seller: "http://localhost:8889",
|
||||
manager: "http://localhost:8887"
|
||||
>>>>>>> clerk
|
||||
},
|
||||
API_PROD: {
|
||||
common: "https://common-api.pickmall.cn",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@ import {
|
|||
deleteRequest,
|
||||
getRequestWithNoToken,
|
||||
postRequestWithNoTokenData,
|
||||
putRequestWithNoForm,
|
||||
postRequestWithNoToken,
|
||||
postRequestWithNoForm,
|
||||
commonUrl,
|
||||
} from "@/libs/axios";
|
||||
|
||||
|
|
@ -14,6 +17,11 @@ export const getAllCity = (params) => {
|
|||
return getRequest(commonUrl+'/common/common/region/allCity', params)
|
||||
}
|
||||
|
||||
// 获取全部权限数据
|
||||
export const getCurrentPermissionList = (params) => {
|
||||
return getRequest("/menu/memberMenu", params);
|
||||
};
|
||||
|
||||
// 登陆
|
||||
export const getHomeNotice = params => {
|
||||
return getRequest("/other/article/getByPage?type=STORE_ARTICLE&pageSize=15");
|
||||
|
|
@ -128,7 +136,7 @@ export const getRelatedListData = params => {
|
|||
|
||||
// 获取用户数据 多条件
|
||||
export const getUserListData = params => {
|
||||
return getRequest("/user/getByCondition", params);
|
||||
return getRequest("/clerk", params);
|
||||
};
|
||||
// 通过用户名搜索
|
||||
export const searchUserByName = (username, params) => {
|
||||
|
|
@ -141,7 +149,7 @@ export const getAllUserData = params => {
|
|||
|
||||
// 添加用户
|
||||
export const addUser = params => {
|
||||
return postRequest("/user/admin/add", params);
|
||||
return postRequest("/clerk", params);
|
||||
};
|
||||
// 编辑用户
|
||||
export const editUser = params => {
|
||||
|
|
@ -268,4 +276,100 @@ export const handleRefreshToken = (token) => {
|
|||
return getRequestWithNoToken(`/login/refresh/${token}`);
|
||||
};
|
||||
|
||||
// 获取一级部门
|
||||
export const initDepartment = (params) => {
|
||||
return getRequest("/department", params);
|
||||
};
|
||||
// 添加部门
|
||||
export const addDepartment = (params) => {
|
||||
return postRequest("/department", params);
|
||||
};
|
||||
// 删除部门
|
||||
export const deleteDepartment = (ids, params) => {
|
||||
return deleteRequest(`/department/${ids}`, params);
|
||||
};
|
||||
// 编辑部门
|
||||
export const editDepartment = (ids, params) => {
|
||||
return putRequest(`/department/${ids} `, params);
|
||||
};
|
||||
// 加载部门子级数据
|
||||
export const loadDepartment = (id) => {
|
||||
return getRequest(`/department/${id}`);
|
||||
};
|
||||
|
||||
// 通过部门获取全部角色数据
|
||||
export const getUserByDepartmentId = (id, params) => {
|
||||
return getRequest(`/departmentRole/${id}`, params);
|
||||
};
|
||||
|
||||
// 分页获取角色数据
|
||||
export const getRoleList = (params) => {
|
||||
return getRequest("/role", params);
|
||||
};
|
||||
|
||||
// 通过部门修改绑定角色
|
||||
export const updateDepartmentRole = (id, params) => {
|
||||
return putRequestWithNoForm(`/departmentRole/${id}`, params);
|
||||
};
|
||||
|
||||
// 获取全部权限数据
|
||||
export const getAllPermissionList = (params) => {
|
||||
return getRequest("/menu/tree", params);
|
||||
};
|
||||
|
||||
// 添加角色
|
||||
export const addRole = (params) => {
|
||||
return postRequest("/role", params);
|
||||
};
|
||||
// 删除角色
|
||||
export const deleteRole = (ids, params) => {
|
||||
return deleteRequest(`/role/${ids}`, params);
|
||||
};
|
||||
// 编辑角色
|
||||
export const editRole = (params) => {
|
||||
return putRequest(`/role/${params.roleId}`, params);
|
||||
};
|
||||
|
||||
// 分配角色权限
|
||||
export const editRolePerm = (params) => {
|
||||
return postRequest("/role/editRolePerm", params);
|
||||
};
|
||||
// 查看某角色拥有的菜单
|
||||
export const selectRoleMenu = (params) => {
|
||||
return getRequest(`/roleMenu/${params}`);
|
||||
};
|
||||
// 保存角色菜单
|
||||
export const saveRoleMenu = (id, params) => {
|
||||
return postRequestWithNoForm(`/roleMenu/${id}`, params);
|
||||
};
|
||||
// 获取全部角色数据
|
||||
export const getAllRoleList = (params) => {
|
||||
return getRequest("/role", params);
|
||||
};
|
||||
export const checkClerk = (mobile) => {
|
||||
return postRequest(`/clerk/${mobile}/check`);
|
||||
};
|
||||
|
||||
// 重置用户密码
|
||||
export const resetPassword = (params) => {
|
||||
return postRequest(`/clerk/resetPassword/${params}`);
|
||||
};
|
||||
// 删除用户
|
||||
export const deleteClerk = (ids) => {
|
||||
return deleteRequest(`/clerk/delByIds/${ids}`);
|
||||
};
|
||||
|
||||
// 禁 启用用户
|
||||
export const enableClerk = (id, params) => {
|
||||
return putRequest(`/clerk/enable/${id}`, params);
|
||||
};
|
||||
// 获取店员详细
|
||||
export const getClerk = (id) => {
|
||||
return getRequest(`/clerk/${id}`);
|
||||
};
|
||||
|
||||
export const editOtherUser = (id, params) => {
|
||||
return putRequest(`/clerk/${id}`,params);
|
||||
};
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,11 +26,11 @@ export const result = [{
|
|||
children: null,
|
||||
},
|
||||
{
|
||||
name: "goods",
|
||||
name: "goods1",
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "商品列表",
|
||||
path: "goods",
|
||||
path: "goods12",
|
||||
component: "goods/goods-seller/goods",
|
||||
children: null,
|
||||
},
|
||||
|
|
@ -388,6 +388,42 @@ export const result = [{
|
|||
component: "sys/user-manage/userManage",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
name: "clerk",
|
||||
level: 1,
|
||||
type: 0,
|
||||
title: "店员设置",
|
||||
path: "",
|
||||
component: "Main",
|
||||
children: [
|
||||
{
|
||||
name: "clerkManage",
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "店员管理",
|
||||
path: "clerkManage",
|
||||
component: "shop/system/clerk/clerkManage",
|
||||
children: null
|
||||
},{
|
||||
name: "storeDepartmentManage",
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "部门管理",
|
||||
path: "storeDepartmentManage",
|
||||
component: "shop/system/department/storeDepartmentManage",
|
||||
children: null
|
||||
},
|
||||
{
|
||||
name: "storeRole",
|
||||
level: 2,
|
||||
type: 0,
|
||||
title: "角色权限",
|
||||
path: "storeRole",
|
||||
component: "shop/system/role/storeRoleManage",
|
||||
children: null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "ship",
|
||||
level: 1,
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { getCurrentPermissionList } from "@/api/index";
|
||||
import lazyLoading from './lazyLoading.js';
|
||||
import Cookies from "js-cookie";
|
||||
import { result } from './routerJson.js';
|
||||
|
|
@ -328,30 +329,43 @@ util.initRouter = function (vm) { // 初始化路由
|
|||
|
||||
if (!vm.$store.state.app.added) {
|
||||
// 加载菜单
|
||||
getCurrentPermissionList().then(res => {
|
||||
if (!res.success) return false;
|
||||
let menuData = result;
|
||||
|
||||
|
||||
// 格式化数据，设置 空children 为 null
|
||||
for(let i =0;i<menuData.length;i++){
|
||||
let t = menuData[i].children
|
||||
for(let k = 0;k<t.length;k++){
|
||||
for (let i = 0; i < menuData.length; i++) {
|
||||
let t = menuData[i].children;
|
||||
for (let k = 0; k < t.length; k++) {
|
||||
let tt = t[k].children;
|
||||
for(let z = 0;z<tt.length;z++){
|
||||
tt[z].children = null
|
||||
for (let z = 0; z < tt.length; z++) {
|
||||
tt[z].children = null;
|
||||
// 给所有三级路由添加字段，显示一级菜单name，方便点击页签时的选中筛选
|
||||
tt[z].firstRouterName = menuData[i].name
|
||||
tt[z].firstRouterName = menuData[i].name;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!menuData) {
|
||||
return;
|
||||
}
|
||||
util.initAllMenuData(constRoutes, menuData);
|
||||
util.initRouterNode(otherRoutes, otherRouter);
|
||||
// 添加所有主界面路由
|
||||
vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));
|
||||
vm.$store.commit(
|
||||
"updateAppRouter",
|
||||
constRoutes.filter(item => item.children.length > 0)
|
||||
);
|
||||
// 添加全局路由
|
||||
vm.$store.commit('updateDefaultRouter', otherRoutes);
|
||||
vm.$store.commit("updateDefaultRouter", otherRoutes);
|
||||
// 添加菜单路由
|
||||
util.initMenuData(vm, menuData);
|
||||
// 缓存数据 修改加载标识
|
||||
window.localStorage.setItem('menuData', JSON.stringify(menuData));
|
||||
vm.$store.commit('setAdded', true);
|
||||
window.localStorage.setItem("menuData", JSON.stringify(menuData));
|
||||
vm.$store.commit("setAdded", true);
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
// 读取缓存数据
|
||||
let data = window.localStorage.getItem('menuData');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
|
||||
<Row @keydown.enter.native="handleSearch">
|
||||
<Form
|
||||
ref="searchForm"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div>
|
||||
<Cascader
|
||||
v-model="selectDep"
|
||||
:data="department"
|
||||
@on-change="handleChangeDep"
|
||||
change-on-select
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择"
|
||||
></Cascader>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { initDepartment } from "@/api/index";
|
||||
export default {
|
||||
name: "departmentChoose",
|
||||
props: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectDep: [], // 已选数据
|
||||
department: [] // 列表
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取部门数据
|
||||
initDepartmentData() {
|
||||
initDepartment().then(res => {
|
||||
if (res.success) {
|
||||
const arr = res.result;
|
||||
this.filterData(arr)
|
||||
this.department = arr
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChangeDep(value, selectedData) {
|
||||
let departmentId = "";
|
||||
// 获取最后一个值
|
||||
if (value && value.length > 0) {
|
||||
departmentId = value[value.length - 1];
|
||||
}
|
||||
this.$emit("on-change", departmentId);
|
||||
},
|
||||
// 清空已选列表
|
||||
clearSelect() {
|
||||
this.selectDep = [];
|
||||
},
|
||||
// 处理部门数据
|
||||
filterData (data) {
|
||||
data.forEach(e => {
|
||||
e.value = e.id;
|
||||
e.label = e.title;
|
||||
if (e.children) {
|
||||
this.filterData(e.children)
|
||||
} else {
|
||||
return
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initDepartmentData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="display:flex;">
|
||||
<Input
|
||||
v-model="departmentTitle"
|
||||
readonly
|
||||
style="margin-right:10px;"
|
||||
:placeholder="placeholder"
|
||||
:clearable="clearable"
|
||||
@on-clear="clearSelect"
|
||||
/>
|
||||
<Poptip transfer trigger="click" placement="right" title="选择部门" width="250">
|
||||
<Button icon="md-list">选择部门</Button>
|
||||
<div slot="content">
|
||||
<Input
|
||||
v-model="searchKey"
|
||||
suffix="ios-search"
|
||||
@on-change="searchDep"
|
||||
placeholder="输入部门名搜索"
|
||||
clearable
|
||||
/>
|
||||
<div class="dep-tree-bar">
|
||||
<Tree
|
||||
:data="dataDep"
|
||||
@on-select-change="selectTree"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="depLoading"></Spin>
|
||||
</div>
|
||||
</div>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {initDepartment, searchDepartment} from "@/api/index";
|
||||
|
||||
export default {
|
||||
name: "departmentTreeChoose",
|
||||
props: {
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "点击选择部门"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
depLoading: false, // 加载状态
|
||||
departmentTitle: "", // modal标题
|
||||
searchKey: "", // 搜索关键词
|
||||
dataDep: [], // 部门列表
|
||||
selectDep: [], // 已选部门
|
||||
departmentId: [] // 部门id
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取部门数据
|
||||
initDepartmentData() {
|
||||
initDepartment().then(res => {
|
||||
if (res.success) {
|
||||
this.dataDep = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
searchDep() {
|
||||
// 搜索部门
|
||||
if (this.searchKey) {
|
||||
this.depLoading = true;
|
||||
searchDepartment({title: this.searchKey}).then(res => {
|
||||
this.depLoading = false;
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
this.dataDep = res.result;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.initDepartmentData();
|
||||
}
|
||||
},
|
||||
// 选择回调
|
||||
selectTree(v) {
|
||||
if (v.length === 0) {
|
||||
this.$emit("on-change", null);
|
||||
this.departmentId = "";
|
||||
this.departmentTitle = "";
|
||||
return
|
||||
}
|
||||
this.departmentId = v[0].id;
|
||||
this.departmentTitle = v[0].title;
|
||||
let department = {
|
||||
departmentId: this.departmentId,
|
||||
departmentTitle: this.departmentTitle
|
||||
}
|
||||
this.$emit("on-change", department);
|
||||
},
|
||||
// 清除选中方法
|
||||
clearSelect() {
|
||||
this.departmentId = [];
|
||||
this.departmentTitle = "";
|
||||
this.initDepartmentData();
|
||||
if (this.multiple) {
|
||||
this.$emit("on-change", []);
|
||||
} else {
|
||||
this.$emit("on-change", "");
|
||||
}
|
||||
this.$emit("on-clear");
|
||||
},
|
||||
// 设置数据 回显用
|
||||
setData(ids, title) {
|
||||
this.departmentTitle = title;
|
||||
if (this.multiple) {
|
||||
this.departmentId = ids;
|
||||
} else {
|
||||
this.departmentId = [];
|
||||
this.departmentId.push(ids);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initDepartmentData();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dep-tree-bar {
|
||||
position: relative;
|
||||
min-height: 80px;
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.dep-tree-bar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.dep-tree-bar::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 0 2px #d1d1d1;
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,770 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
|
||||
<Form-item label="店员名称">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.clerkName"
|
||||
placeholder="请输入店员名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="联系方式">
|
||||
<Input
|
||||
type="text"
|
||||
v-model="searchForm.mobile"
|
||||
placeholder="请输入联系方式"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</Form-item>
|
||||
<Form-item label="部门">
|
||||
<department-choose @on-change="handleSelectDep" style="width: 150px;" ref="dep"></department-choose>
|
||||
</Form-item>
|
||||
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
|
||||
</Form>
|
||||
<Row class="operation padding-row">
|
||||
<Button @click="add" type="primary">添加</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="resetPass">重置密码</Button>
|
||||
</Row>
|
||||
<br>
|
||||
<Table
|
||||
:loading="loading"
|
||||
border
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
sortable="custom"
|
||||
@on-sort-change="changeSort"
|
||||
@on-selection-change="showSelect"
|
||||
ref="table"
|
||||
></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page
|
||||
:current="searchForm.pageNumber"
|
||||
:total="total"
|
||||
:page-size="searchForm.pageSize"
|
||||
@on-change="changePage"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size-opts="[10,20,50]"
|
||||
size="small"
|
||||
show-total
|
||||
show-elevator
|
||||
show-sizer
|
||||
></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="userEditModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{top: '30px'}"
|
||||
>
|
||||
<Form ref="form" :model="editForm" :label-width="80" :rules="formValidate">
|
||||
<FormItem label="手机号">
|
||||
<Input v-model="mobile" disabled/>
|
||||
</FormItem>
|
||||
<FormItem label="店员名称">
|
||||
<Input v-model="clerkName" disabled/>
|
||||
</FormItem>
|
||||
<FormItem label="超级管理员" prop="isSuper">
|
||||
<RadioGroup type="button" button-style="solid" v-model="editForm.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>是</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>否</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="角色" prop="roles" v-if="editForm.isSuper == 0">
|
||||
<Select v-model="editForm.roles" multiple>
|
||||
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<Form-item label="所属部门">
|
||||
<department-tree-choose @on-change="handleEditSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</Form-item>
|
||||
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="userEditModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="updateSubmit">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="userModalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
:styles="{top: '30px'}"
|
||||
>
|
||||
<Form ref="form" :model="form" :label-width="80" :rules="formValidate">
|
||||
<FormItem label="手机号" prop="mobile">
|
||||
<Input placeholder="请输入要添加的会员手机号码" maxlength="11" style="width: 75%" v-model="form.mobile"
|
||||
autocomplete="off"/>
|
||||
<Button v-if="!memberCheck" @click="checkClerk">校验</Button>
|
||||
<Button v-if="memberCheck" @click="checkAgainClerk">重新校验</Button>
|
||||
</FormItem>
|
||||
<FormItem v-if="newMember" label="用户名" prop="username">
|
||||
<Input v-model="form.username" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem v-if="oldMember" label="用户名" prop="username">
|
||||
<Input v-model="form.username" autocomplete="off" disabled/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="密码" prop="password" v-if="newMember" :error="errorPass">
|
||||
<Input type="password" password v-model="form.password" autocomplete="off"/>
|
||||
</FormItem>
|
||||
<FormItem label="超级管理员" prop="isSuper" v-if="newMember || oldMember">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>是</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>否</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem label="角色" prop="roles" v-if="(oldMember || newMember) && form.isSuper == 0">
|
||||
<Select v-model="form.roles" multiple>
|
||||
<Option v-for="item in roleList" :value="item.id" :key="item.id" :label="item.name">
|
||||
|
||||
</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<Form-item label="所属部门" v-if="oldMember || newMember">
|
||||
<department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
|
||||
</Form-item>
|
||||
</Form>
|
||||
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="userModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitUser">提交</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
checkClerk,
|
||||
getUserListData,
|
||||
getAllRoleList,
|
||||
addUser,
|
||||
editOtherUser,
|
||||
enableClerk,
|
||||
deleteClerk,
|
||||
resetPassword,
|
||||
getClerk
|
||||
} from "@/api/index";
|
||||
import {validateMobile} from "@/libs/validate";
|
||||
import departmentChoose from "@/views/my-components/lili/department-choose";
|
||||
import departmentTreeChoose from "@/views/my-components/lili/department-tree-choose";
|
||||
import uploadPicInput from "@/views/my-components/lili/upload-pic-input";
|
||||
|
||||
export default {
|
||||
name: "clerk-manage",
|
||||
components: {
|
||||
departmentChoose,
|
||||
departmentTreeChoose,
|
||||
uploadPicInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
selectCount: 0, // 已选数量
|
||||
selectList: [], // 已选数据列表
|
||||
searchForm: { // 请求参数
|
||||
clerkName: "",
|
||||
departmentId: "",
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
sort: "createTime",
|
||||
order: "desc"
|
||||
},
|
||||
modalType: 0, // 新增编辑标识
|
||||
userModalVisible: false, // 用户modal显隐
|
||||
userEditModalVisible:false,
|
||||
modalTitle: "", // modal标题
|
||||
form: { // 表单
|
||||
username: "",
|
||||
mobile: "",
|
||||
sex: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
},
|
||||
|
||||
editForm: { // 表单
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
},
|
||||
mobile: "",
|
||||
clerkName: "",
|
||||
|
||||
newMember: false,
|
||||
oldMember: false,
|
||||
memberCheck: false,
|
||||
roleList: [], // 角色列表
|
||||
errorPass: "", // 错误提示
|
||||
formValidate: { // 验证规则
|
||||
username: [
|
||||
{required: true, message: "用户名不能为空", trigger: "blur"}
|
||||
],
|
||||
password: [
|
||||
{required: true, message: "密码不能为空", trigger: "blur"}
|
||||
],
|
||||
mobile: [
|
||||
{required: true, message: "手机号不能为空", trigger: "blur"},
|
||||
{validator: validateMobile, trigger: "blur"}
|
||||
]
|
||||
},
|
||||
submitLoading: false, // 提交状态
|
||||
columns: [ // 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "店员名称",
|
||||
key: "clerkName",
|
||||
minWidth: 100,
|
||||
sortable: true,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "手机号码",
|
||||
key: "mobile",
|
||||
minWidth: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "店主",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.shopkeeper == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "是"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.shopkeeper == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "否"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "超级管理员",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.isSuper == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "是"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.isSuper == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "否"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
key: "status",
|
||||
align: "center",
|
||||
width: 130,
|
||||
render: (h, params) => {
|
||||
if (params.row.status == true) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "success",
|
||||
text: "启用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
} else if (params.row.status == false) {
|
||||
return h("div", [
|
||||
h("Badge", {
|
||||
props: {
|
||||
status: "error",
|
||||
text: "禁用"
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
},
|
||||
filters: [
|
||||
{
|
||||
label: "启用",
|
||||
value: true
|
||||
},
|
||||
{
|
||||
label: "禁用",
|
||||
value: false
|
||||
}
|
||||
],
|
||||
filterMultiple: false,
|
||||
filterMethod(value, row) {
|
||||
return row.status == value;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 200,
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
render: (h, params) => {
|
||||
let enableOrDisable = "";
|
||||
if (params.row.status == true) {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.disable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"禁用"
|
||||
);
|
||||
} else {
|
||||
enableOrDisable = h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "success",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.enable(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"启用"
|
||||
);
|
||||
}
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "info",
|
||||
size: "small"
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
enableOrDisable,
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small"
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
}
|
||||
}
|
||||
},
|
||||
"删除"
|
||||
)
|
||||
]);
|
||||
}
|
||||
}
|
||||
],
|
||||
data: [], // 用户数据
|
||||
total: 0, // 总数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getUserList();
|
||||
},
|
||||
// 选择部门回调
|
||||
handleSelectDepTree(v) {
|
||||
if (v) {
|
||||
this.form.departmentId = v.departmentId;
|
||||
this.form.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
this.form.departmentId = "";
|
||||
this.form.departmentTitle = "";
|
||||
}
|
||||
},
|
||||
// 选择部门回调
|
||||
handleEditSelectDepTree(v) {
|
||||
if (v) {
|
||||
this.editForm.departmentId = v.departmentId;
|
||||
this.editForm.departmentTitle = v.departmentTitle;
|
||||
} else {
|
||||
this.editForm.departmentId = "";
|
||||
this.editForm.departmentTitle = "";
|
||||
}
|
||||
},
|
||||
//重新校验会员
|
||||
checkAgainClerk() {
|
||||
this.memberCheck = false
|
||||
this.newMember = false
|
||||
this.oldMember = false
|
||||
},
|
||||
//检测当前店员
|
||||
checkClerk() {
|
||||
if (this.form.mobile) {
|
||||
this.newMember = false
|
||||
this.oldMember = false
|
||||
checkClerk(this.form.mobile).then(res => {
|
||||
if (!res.result.id) {
|
||||
this.newMember = true
|
||||
} else {
|
||||
this.oldMember = true
|
||||
this.form.username = res.result.username
|
||||
this.form.password = res.result.password
|
||||
}
|
||||
this.form.isSuper = 1
|
||||
this.memberCheck = true;
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
// 搜索项部门选择
|
||||
handleSelectDep(v) {
|
||||
this.searchForm.departmentId = v;
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.searchForm.pageNumber = v;
|
||||
this.getUserList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.searchForm.pageSize = v;
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.getUserList();
|
||||
},
|
||||
getUserList() {
|
||||
// 多条件搜索用户列表
|
||||
this.loading = true;
|
||||
getUserListData(this.searchForm).then(res => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = 10;
|
||||
this.getUserList();
|
||||
},
|
||||
// 排序
|
||||
changeSort(e) {
|
||||
this.searchForm.sort = e.key;
|
||||
this.searchForm.order = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.searchForm.order = "";
|
||||
}
|
||||
this.getUserList();
|
||||
},
|
||||
// 获取角色列表
|
||||
getRoleList() {
|
||||
let params = {
|
||||
pageSize: 100
|
||||
}
|
||||
getAllRoleList(params).then(res => {
|
||||
if (res.success) {
|
||||
this.roleList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置密码
|
||||
resetPass() {
|
||||
if (this.selectCount == 0) {
|
||||
this.$Message.warning('请选中数据后重试!');
|
||||
return
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认重置",
|
||||
content:
|
||||
"您确认要重置所选的 " +
|
||||
this.selectCount +
|
||||
" 条用户数据密码为【123456】?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
console.warn(ids)
|
||||
resetPassword(ids).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.clearSelectAll();
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
updateSubmit(){
|
||||
this.submitLoading = true;
|
||||
console.warn(this.editForm)
|
||||
editOtherUser(this.editForm.id,this.editForm).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
this.userEditModalVisible = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确认提交
|
||||
submitUser() {
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
// 添加用户 避免编辑后传入id
|
||||
const params = JSON.parse(JSON.stringify(this.form))
|
||||
console.warn(params)
|
||||
delete params.id;
|
||||
delete params.status;
|
||||
if (this.newMember) {
|
||||
if (params.password == "" || params.password == undefined) {
|
||||
this.errorPass = "密码不能为空";
|
||||
return;
|
||||
}
|
||||
if (params.password.length < 6) {
|
||||
this.errorPass = "密码长度不得少于6位";
|
||||
return;
|
||||
}
|
||||
//todo
|
||||
params.password = this.md5(params.password)
|
||||
} else {
|
||||
params.password = this.form.password
|
||||
}
|
||||
this.submitLoading = true;
|
||||
addUser(params).then(res => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
this.userModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加用户
|
||||
add() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加店员";
|
||||
this.$refs.form.resetFields();
|
||||
this.form = { // 表单
|
||||
username: "",
|
||||
mobile: "",
|
||||
isSuper: 0,
|
||||
roles: [],
|
||||
departmentId: "",
|
||||
departmentTitle: ""
|
||||
},
|
||||
this.oldMember = false
|
||||
this.newMember = false
|
||||
this.userModalVisible = true;
|
||||
},
|
||||
// 编辑用户
|
||||
edit(v) {
|
||||
console.warn(v)
|
||||
getClerk(v.id).then(res => {
|
||||
console.warn(res)
|
||||
this.mobile = res.result.mobile
|
||||
this.clerkName = res.result.clerkName
|
||||
this.editForm.isSuper = 0
|
||||
this.editForm.id = res.result.id
|
||||
if(res.result.isSuper){
|
||||
this.editForm.isSuper = 1
|
||||
}
|
||||
this.editForm.departmentId = res.result.departmentId
|
||||
this.$refs.depTree.setData(res.result.departmentId, res.result.departmentTitle);
|
||||
let selectRolesId = [];
|
||||
if (res.result.roles) {
|
||||
res.result.roles.forEach(function (e) {
|
||||
selectRolesId.push(e.id);
|
||||
});
|
||||
}
|
||||
this.editForm.roles = selectRolesId;
|
||||
|
||||
this.modalTitle = "修改店员";
|
||||
this.userEditModalVisible = true;
|
||||
})
|
||||
|
||||
},
|
||||
// 启用
|
||||
enable(v) {
|
||||
let params = {
|
||||
status: true
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认启用",
|
||||
content: "您确认要启用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 禁用
|
||||
disable(v) {
|
||||
let params = {
|
||||
status: false
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认禁用",
|
||||
content: "您确认要禁用用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
enableClerk(v.id, params).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除用户
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除用户 " + v.clerkName + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteClerk(v.id).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 选中状态
|
||||
showSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 清除选中状态
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条店员?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteClerk(ids).then(res => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.clearSelectAll();
|
||||
this.getUserList();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.getRoleList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,408 @@
|
|||
|
||||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<i-switch v-model="strict" size="large" style="margin-right: 5px">
|
||||
<span slot="open">级联</span>
|
||||
<span slot="close">单选</span>
|
||||
</i-switch>
|
||||
<Button @click="addRoot">添加部门</Button>
|
||||
<Button @click="add" type="primary">添加子部门</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
<Button @click="getParentList">刷新</Button>
|
||||
</Row>
|
||||
<Row type="flex" justify="start">
|
||||
<Col :md="8" :lg="8" :xl="6">
|
||||
<Alert show-icon>
|
||||
当前选择编辑：
|
||||
<span class="select-title">{{ editTitle }}</span>
|
||||
<a class="select-clear" v-if="form.id" @click="cancelSelect"
|
||||
>取消选择</a
|
||||
>
|
||||
</Alert>
|
||||
<div class="tree-bar" :style="{ maxHeight: maxHeight }">
|
||||
<Tree
|
||||
ref="tree"
|
||||
:data="data"
|
||||
:load-data="loadData"
|
||||
show-checkbox
|
||||
@on-check-change="changeSelect"
|
||||
@on-select-change="selectTree"
|
||||
:check-strictly="!strict"
|
||||
></Tree>
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:label-width="100"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="form.title" />
|
||||
</FormItem>
|
||||
<FormItem label="选择角色">
|
||||
<Select
|
||||
:loading="userLoading"
|
||||
not-found-text="暂无角色"
|
||||
v-model="selectedRole"
|
||||
multiple
|
||||
>
|
||||
<Option v-for="item in users" :value="item.id" :key="item.id">{{
|
||||
item.name
|
||||
}}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="form.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
<Form-item>
|
||||
<Button
|
||||
style="margin-right: 5px"
|
||||
@click="submitEdit"
|
||||
:loading="submitLoading"
|
||||
type="primary"
|
||||
>修改并保存</Button
|
||||
>
|
||||
<Button @click="handleReset">重置</Button>
|
||||
</Form-item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
:title="modalTitle"
|
||||
v-model="modalVisible"
|
||||
:mask-closable="false"
|
||||
:width="500"
|
||||
>
|
||||
<Form
|
||||
ref="formAdd"
|
||||
:model="formAdd"
|
||||
:label-width="85"
|
||||
:rules="formValidate"
|
||||
>
|
||||
<div v-if="showParent">
|
||||
<FormItem label="上级部门：">{{ form.title }}</FormItem>
|
||||
</div>
|
||||
<FormItem label="部门名称" prop="title">
|
||||
<Input v-model="formAdd.title" />
|
||||
</FormItem>
|
||||
<FormItem label="排序值" prop="sortOrder">
|
||||
<Tooltip
|
||||
trigger="hover"
|
||||
placement="right"
|
||||
content="值越小越靠前，支持小数"
|
||||
>
|
||||
<InputNumber
|
||||
:max="1000"
|
||||
:min="0"
|
||||
v-model="formAdd.sortOrder"
|
||||
></InputNumber>
|
||||
</Tooltip>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="cancelAdd">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitAdd"
|
||||
>提交</Button
|
||||
>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
initDepartment,
|
||||
loadDepartment,
|
||||
addDepartment,
|
||||
editDepartment,
|
||||
deleteDepartment,
|
||||
getUserByDepartmentId,
|
||||
getRoleList,
|
||||
updateDepartmentRole,
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
name: "store-department-manage",
|
||||
data() {
|
||||
return {
|
||||
loading: true, // 加载状态
|
||||
maxHeight: "500px", // 最大高度
|
||||
strict: true, // 级联还是单选
|
||||
userLoading: false, // 选择角色加载状态
|
||||
loadingEdit: false, // 编辑加载状态
|
||||
modalVisible: false, // modal显隐
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
showParent: false, // 展示父级
|
||||
modalTitle: "", // modal标题
|
||||
editTitle: "", // 编辑标题
|
||||
selectedRole: [], //选择的角色
|
||||
searchKey: "", // 搜索关键字
|
||||
form: { // 提交表单
|
||||
id: "",
|
||||
title: "",
|
||||
parentId: "",
|
||||
parentTitle: "",
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
},
|
||||
|
||||
formAdd: {}, // 新增表单
|
||||
formValidate: { // 验证规则
|
||||
title: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
sortOrder: [
|
||||
{
|
||||
required: true,
|
||||
type: "number",
|
||||
message: "排序值不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
data: [], // 部门数据
|
||||
dataEdit: [], // 编辑时部门数据
|
||||
users: [], // 用户
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getParentList();
|
||||
},
|
||||
// 获取部门数据
|
||||
getParentList() {
|
||||
this.loading = true;
|
||||
initDepartment().then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 动态加载二级数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id).then((res) => {
|
||||
this.loadingEdit = false;
|
||||
if (res.success) {
|
||||
console.log(res.result);
|
||||
callback(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 点击树
|
||||
selectTree(v) {
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
|
||||
this.editTitle = data.title;
|
||||
// 加载部门用户数据
|
||||
this.userLoading = true;
|
||||
|
||||
getUserByDepartmentId(data.id).then((res) => {
|
||||
let way =[]
|
||||
res.result && res.result.forEach((item) => {
|
||||
way.push(item.roleId)
|
||||
})
|
||||
this.$set(this,'selectedRole',way)
|
||||
|
||||
});
|
||||
|
||||
getRoleList({
|
||||
pageNumber: 1,
|
||||
pageSize: 10000,
|
||||
}).then((res) => {
|
||||
this.userLoading = false;
|
||||
if (res.success) {
|
||||
this.users = res.result.records;
|
||||
// 回显
|
||||
this.form = data;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.cancelSelect();
|
||||
}
|
||||
},
|
||||
// 取消选择
|
||||
cancelSelect() {
|
||||
let data = this.$refs.tree.getSelectedNodes()[0];
|
||||
if (data) {
|
||||
data.selected = false;
|
||||
}
|
||||
this.$refs.form.resetFields();
|
||||
delete this.form.id;
|
||||
this.editTitle = "";
|
||||
},
|
||||
// 选择上级部门
|
||||
selectTreeEdit(v) {
|
||||
|
||||
if (v.length > 0) {
|
||||
// 转换null为""
|
||||
for (let attr in v[0]) {
|
||||
if (v[0][attr] == null) {
|
||||
v[0][attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v[0]);
|
||||
let data = JSON.parse(str);
|
||||
this.form.parentId = data.id;
|
||||
this.form.parentTitle = data.title;
|
||||
}
|
||||
},
|
||||
// 取消添加部门
|
||||
cancelAdd() {
|
||||
this.modalVisible = false;
|
||||
},
|
||||
// 重置表单
|
||||
handleReset() {
|
||||
this.$refs.form.resetFields();
|
||||
this.form.status = 0;
|
||||
},
|
||||
// 提交表单
|
||||
submitEdit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
if (!this.form.id) {
|
||||
this.$Message.warning("请先点击选择要修改的部门");
|
||||
return;
|
||||
}
|
||||
let roleWay = [];
|
||||
this.selectedRole.forEach((item) => {
|
||||
let role = {
|
||||
departmentId: this.form.id,
|
||||
roleId: item,
|
||||
};
|
||||
roleWay.push(role);
|
||||
});
|
||||
|
||||
Promise.all([
|
||||
editDepartment(this.form.id, this.form),
|
||||
updateDepartmentRole(this.form.id, roleWay)
|
||||
]).then((res) => {
|
||||
console.warn(res)
|
||||
this.submitLoading = false;
|
||||
if (res[0].success) {
|
||||
this.$Message.success("编辑成功");
|
||||
this.init();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 确认添加部门
|
||||
submitAdd() {
|
||||
this.$refs.formAdd.validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true;
|
||||
addDepartment(this.formAdd).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("添加成功");
|
||||
this.init();
|
||||
this.modalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 添加子部门
|
||||
add() {
|
||||
if (this.form.id == "" || this.form.id == null) {
|
||||
this.$Message.warning("请先点击选择一个部门");
|
||||
return;
|
||||
}
|
||||
this.modalTitle = "添加子部门";
|
||||
this.showParent = true;
|
||||
|
||||
this.formAdd = {
|
||||
parentId: this.form.id,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 添加一级部门
|
||||
addRoot() {
|
||||
this.modalTitle = "添加一级部门";
|
||||
this.showParent = false;
|
||||
this.formAdd = {
|
||||
parentId: 0,
|
||||
sortOrder: 0,
|
||||
status: 0,
|
||||
};
|
||||
this.modalVisible = true;
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(v) {
|
||||
console.log(v);
|
||||
this.selectCount = v.length;
|
||||
this.selectList = v;
|
||||
},
|
||||
// 批量删除部门
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未勾选要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content:
|
||||
"您确认要删除所选的 " + this.selectCount + " 条数据及其下级所有数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteDepartment(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.selectList = [];
|
||||
this.selectCount = 0;
|
||||
this.cancelSelect();
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// 计算高度
|
||||
let height = document.documentElement.clientHeight;
|
||||
this.maxHeight = Number(height - 287) + "px";
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/tree-common.scss";
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,768 @@
|
|||
<template>
|
||||
<div class="search">
|
||||
<Card>
|
||||
<Row class="operation">
|
||||
<Button @click="addRole" type="primary">添加角色</Button>
|
||||
<Button @click="delAll">批量删除</Button>
|
||||
</Row>
|
||||
<br>
|
||||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
|
||||
<Row type="flex" justify="end" class="mt_10">
|
||||
<Page :current="pageNumber" :total="total" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total
|
||||
show-elevator show-sizer></Page>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<!-- 编辑 -->
|
||||
<Modal :title="modalTitle" v-model="roleModalVisible" :mask-closable="false" :width="500">
|
||||
<Form ref="roleForm" :model="roleForm" :label-width="80" :rules="roleFormValidate">
|
||||
<FormItem label="角色名称" prop="name">
|
||||
<Input v-model="roleForm.name" />
|
||||
</FormItem>
|
||||
<FormItem label="备注" prop="description">
|
||||
<Input v-model="roleForm.description" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="roleModalVisible = false">取消</Button>
|
||||
<Button type="primary" :loading="submitLoading" @click="submitRole">提交
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 菜单权限 -->
|
||||
<Modal :title="modalTitle" v-model="permModalVisible" :mask-closable="false" :width="500" :styles="{ top: '30px' }" class="permModal">
|
||||
<div style="position: relative">
|
||||
<Tree ref="tree" :data="permData" show-checkbox :render="renderContent">
|
||||
</Tree>
|
||||
<Spin size="large" fix v-if="treeLoading"></Spin>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<Button type="text" @click="permModalVisible = false">取消</Button>
|
||||
<Select v-model="openLevel" @on-change="changeOpen" style="width: 110px; text-align: left; margin-right: 10px">
|
||||
<Option value="0">展开所有</Option>
|
||||
<Option value="1">收合所有</Option>
|
||||
<Option value="2">仅展开一级</Option>
|
||||
<Option value="3">仅展开两级</Option>
|
||||
</Select>
|
||||
<Button type="primary" :loading="submitPermLoading" @click="submitPermEdit()">编辑
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
|
||||
<!-- 保存权限弹出选择权限 -->
|
||||
<Modal width="800" v-model="selectIsSuperModel" title="选择菜单权限" :loading="superModelLoading" @on-ok="saveRole">
|
||||
<div class="btns">
|
||||
<Button type="primary" @click="setRole()" class="btn-item">一键选中·数据权限</Button>
|
||||
<Button class="btn-item" @click="setRole('onlyView')">一键选中·查看权限</Button>
|
||||
</div>
|
||||
<div class="role-list">
|
||||
<div class="role-item" v-for="(item, index) in saveRoleWay" :key="index">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="content">
|
||||
<RadioGroup type="button" button-style="solid" v-model="item.isSuper">
|
||||
<Radio :label="1">
|
||||
<span>操作数据权限</span>
|
||||
</Radio>
|
||||
<Radio :label="0">
|
||||
<span>查看权限</span>
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getRoleList,
|
||||
getAllPermissionList,
|
||||
addRole,
|
||||
editRole,
|
||||
deleteRole,
|
||||
loadDepartment,
|
||||
selectRoleMenu,
|
||||
saveRoleMenu,
|
||||
} from "@/api/index";
|
||||
import util from "@/libs/util.js";
|
||||
export default {
|
||||
name: "role-manage",
|
||||
data() {
|
||||
return {
|
||||
superModelLoading: false, //保存权限弹出选择权限保存
|
||||
selectIsSuperModel: false, //保存权限弹出选择权限
|
||||
rolePermsWay: [], //查询角色权限集合
|
||||
openLevel: "0", // 展开的级别
|
||||
loading: true, // 加载状态
|
||||
treeLoading: true, // 树加载
|
||||
depTreeLoading: true, // 部门树加载
|
||||
submitPermLoading: false, // 权限提交加载
|
||||
submitDepLoading: false, // 部门提交加载
|
||||
sortColumn: "", // 排序
|
||||
sortType: "desc", // 排序类型
|
||||
modalType: 0, // 0 添加 1 编辑
|
||||
roleModalVisible: false, // 角色modal
|
||||
permModalVisible: false, // 菜单权限modal
|
||||
depModalVisible: false, // 部门modal
|
||||
modalTitle: "", // modal标题
|
||||
roleForm: {
|
||||
// 角色表单
|
||||
name: "",
|
||||
description: "",
|
||||
},
|
||||
roleFormValidate: {
|
||||
// 验证规则
|
||||
name: [
|
||||
{ required: true, message: "角色名称不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
submitLoading: false, // 提交loading
|
||||
selectList: [], // 已选列表
|
||||
selectCount: 0, // 已选总数
|
||||
columns: [
|
||||
// 表头
|
||||
{
|
||||
type: "selection",
|
||||
width: 60,
|
||||
align: "center",
|
||||
},
|
||||
{
|
||||
title: "角色名称",
|
||||
key: "name",
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: "备注",
|
||||
key: "description",
|
||||
minWidth: 150,
|
||||
tooltip: true,
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "createTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
sortType: "desc",
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "updateTime",
|
||||
width: 170,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
title: "最后操作人",
|
||||
key: "createBy",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
align: "center",
|
||||
fixed: "right",
|
||||
width: 230,
|
||||
render: (h, params) => {
|
||||
return h("div", [
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "warning",
|
||||
size: "small",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.editPerm(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"菜单权限"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
size: "small",
|
||||
type: "info",
|
||||
},
|
||||
style: {
|
||||
marginRight: "5px",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.edit(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"编辑"
|
||||
),
|
||||
h(
|
||||
"Button",
|
||||
{
|
||||
props: {
|
||||
type: "error",
|
||||
size: "small",
|
||||
},
|
||||
on: {
|
||||
click: () => {
|
||||
this.remove(params.row);
|
||||
},
|
||||
},
|
||||
},
|
||||
"删除"
|
||||
),
|
||||
]);
|
||||
},
|
||||
},
|
||||
],
|
||||
data: [], // 角色数据
|
||||
pageNumber: 1, // 页数
|
||||
pageSize: 10, // 每页数量
|
||||
total: 0, // 总数
|
||||
permData: [], // 菜单权限数据
|
||||
editRolePermId: "", // 编辑权限id
|
||||
selectAllFlag: false, // 全选标识
|
||||
depData: [], // 部门数据
|
||||
dataType: 0, // 数据类型
|
||||
editDepartments: [], // 编辑部门
|
||||
|
||||
saveRoleWay: [], //用户保存用户点击的菜单
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.getRoleList();
|
||||
// 获取所有菜单权限树
|
||||
this.getPermList();
|
||||
},
|
||||
// 渲染部门前icon
|
||||
renderContent(h, { root, node, data }) {
|
||||
let icon = "";
|
||||
if (data.level == 0) {
|
||||
icon = "ios-navigate";
|
||||
} else if (data.level == 1) {
|
||||
icon = "md-list-box";
|
||||
} else if (data.level == 2) {
|
||||
icon = "md-list";
|
||||
} else if (data.level == 3) {
|
||||
icon = "md-radio-button-on";
|
||||
} else {
|
||||
icon = "md-radio-button-off";
|
||||
}
|
||||
return h(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
display: "inline-block",
|
||||
cursor: "pointer",
|
||||
},
|
||||
},
|
||||
[
|
||||
h("span", [
|
||||
h("Icon", {
|
||||
props: {
|
||||
type: icon,
|
||||
size: "16",
|
||||
},
|
||||
style: {
|
||||
"margin-right": "8px",
|
||||
"margin-bottom": "3px",
|
||||
},
|
||||
}),
|
||||
h("span", data.title),
|
||||
h(
|
||||
"Tag",
|
||||
{
|
||||
props: {
|
||||
color:
|
||||
data.isSuper == 1
|
||||
? "red"
|
||||
: data.isSuper == 0
|
||||
? "default"
|
||||
: "default",
|
||||
},
|
||||
style: {
|
||||
"margin-left": "10px",
|
||||
display:
|
||||
data.isSuper == 1 || data.isSuper == 0
|
||||
? "inline-block"
|
||||
: "none",
|
||||
},
|
||||
},
|
||||
data.isSuper == 1
|
||||
? "操作权限"
|
||||
: data.isSuper == 0
|
||||
? "查看权限"
|
||||
: ""
|
||||
),
|
||||
]),
|
||||
]
|
||||
);
|
||||
},
|
||||
// 分页 修改页码
|
||||
changePage(v) {
|
||||
this.pageNumber = v;
|
||||
this.getRoleList();
|
||||
this.clearSelectAll();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize(v) {
|
||||
this.pageNumber = 1;
|
||||
this.pageSize = v;
|
||||
this.getRoleList();
|
||||
},
|
||||
// 变更排序方式
|
||||
changeSort(e) {
|
||||
this.sortColumn = e.key;
|
||||
this.sortType = e.order;
|
||||
if (e.order == "normal") {
|
||||
this.sortType = "";
|
||||
}
|
||||
this.getRoleList();
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置权限
|
||||
*/
|
||||
setRole(val) {
|
||||
let enable;
|
||||
val == "onlyView" ? (enable = 0) : (enable = 1);
|
||||
this.saveRoleWay.map((item) => {
|
||||
item.isSuper = enable;
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询所有角色
|
||||
*/
|
||||
getRoleList() {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
pageNumber: this.pageNumber,
|
||||
pageSize: this.pageSize,
|
||||
sort: this.sortColumn,
|
||||
order: this.sort,
|
||||
};
|
||||
getRoleList(params).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
this.data = res.result.records;
|
||||
this.total = res.result.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单
|
||||
*/
|
||||
getPermList() {
|
||||
this.treeLoading = true;
|
||||
getAllPermissionList().then((res) => {
|
||||
if (res.success) {
|
||||
this.deleteDisableNode(res.result);
|
||||
this.permData = res.result;
|
||||
this.treeLoading = false;
|
||||
}
|
||||
this.treeLoading = false;
|
||||
});
|
||||
},
|
||||
// 递归标记禁用节点
|
||||
deleteDisableNode(permData) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
if (e.children && e.children.length > 0) {
|
||||
that.deleteDisableNode(e.children);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 提交
|
||||
submitRole() {
|
||||
this.$refs.roleForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.modalType == 0) {
|
||||
// 添加
|
||||
this.submitLoading = true;
|
||||
|
||||
addRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getRoleList();
|
||||
this.roleModalVisible = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.submitLoading = true;
|
||||
this.roleForm.roleId = this.roleForm.id;
|
||||
|
||||
editRole(this.roleForm).then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getRoleList();
|
||||
this.roleModalVisible = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击添加按钮
|
||||
*/
|
||||
addRole() {
|
||||
this.modalType = 0;
|
||||
this.modalTitle = "添加角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
delete this.roleForm.id;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 编辑
|
||||
edit(v) {
|
||||
this.modalType = 1;
|
||||
this.modalTitle = "编辑角色";
|
||||
this.$refs.roleForm.resetFields();
|
||||
// 转换null为""
|
||||
for (let attr in v) {
|
||||
if (v[attr] == null) {
|
||||
v[attr] = "";
|
||||
}
|
||||
}
|
||||
let str = JSON.stringify(v);
|
||||
let roleInfo = JSON.parse(str);
|
||||
this.roleForm = roleInfo;
|
||||
this.roleModalVisible = true;
|
||||
},
|
||||
// 删除
|
||||
remove(v) {
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除角色 " + v.name + " ?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
deleteRole(v.id).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.getRoleList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
// 清除选中
|
||||
clearSelectAll() {
|
||||
this.$refs.table.selectAll(false);
|
||||
},
|
||||
// 选中回调
|
||||
changeSelect(e) {
|
||||
this.selectList = e;
|
||||
this.selectCount = e.length;
|
||||
},
|
||||
// 批量删除
|
||||
delAll() {
|
||||
if (this.selectCount <= 0) {
|
||||
this.$Message.warning("您还未选择要删除的数据");
|
||||
return;
|
||||
}
|
||||
this.$Modal.confirm({
|
||||
title: "确认删除",
|
||||
content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
|
||||
loading: true,
|
||||
onOk: () => {
|
||||
let ids = "";
|
||||
this.selectList.forEach(function (e) {
|
||||
ids += e.id + ",";
|
||||
});
|
||||
ids = ids.substring(0, ids.length - 1);
|
||||
deleteRole(ids).then((res) => {
|
||||
this.$Modal.remove();
|
||||
if (res.success) {
|
||||
this.$Message.success("删除成功");
|
||||
this.clearSelectAll();
|
||||
this.getRoleList();
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 菜单权限
|
||||
async editPerm(v) {
|
||||
|
||||
/**
|
||||
* 点击菜单权限每次将赋值的isSuper数据给清空掉
|
||||
*/
|
||||
this.permData.map((item) => {
|
||||
item.children.length != 0
|
||||
? item.children.map((child) => {
|
||||
child.children.length != 0
|
||||
? child.children.map((kid) => {
|
||||
delete kid.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete child.isSuper;
|
||||
})
|
||||
: "";
|
||||
delete item.isSuper;
|
||||
});
|
||||
|
||||
if (this.treeLoading) {
|
||||
this.$Message.warning("菜单权限数据加载中，请稍后点击查看");
|
||||
return;
|
||||
}
|
||||
this.editRolePermId = v.id;
|
||||
this.modalTitle = "分配 " + v.name + " 的菜单权限";
|
||||
// 匹配勾选
|
||||
let rolePerms;
|
||||
// 当前角色的菜单权限
|
||||
let res = await selectRoleMenu(v.id);
|
||||
if (res.result) {
|
||||
rolePerms = res.result;
|
||||
this.rolePermsWay = res.result;
|
||||
}
|
||||
// 递归判断子节点是否可以选中
|
||||
this.checkPermTree(this.permData, rolePerms);
|
||||
this.permModalVisible = true;
|
||||
},
|
||||
// 递归判断子节点
|
||||
checkPermTree(permData, rolePerms) {
|
||||
let that = this;
|
||||
|
||||
permData.forEach((p) => {
|
||||
if (that.hasPerm(p, rolePerms) && p.status != -1) {
|
||||
if (p.children && p.children.length === 0) {
|
||||
this.$set(p, "checked", true);
|
||||
}
|
||||
} else {
|
||||
this.$set(p, "checked", false);
|
||||
}
|
||||
if (p.children && p.children.length > 0) {
|
||||
that.checkPermTree(p.children, rolePerms);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 判断角色拥有的权限节点勾选
|
||||
hasPerm(p, rolePerms) {
|
||||
if (!rolePerms) return false;
|
||||
let flag = false;
|
||||
for (let i = 0; i < rolePerms.length; i++) {
|
||||
if (p.id == rolePerms[i].menuId) {
|
||||
this.$set(p, "isSuper", rolePerms[i].isSuper);
|
||||
flag = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (flag) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 递归全选节点
|
||||
selectedTreeAll(permData, select) {
|
||||
let that = this;
|
||||
permData.forEach(function (e) {
|
||||
e.checked = select;
|
||||
if (e.children && e.children.length > 0) {
|
||||
that.selectedTreeAll(e.children, select);
|
||||
}
|
||||
});
|
||||
},
|
||||
/**分配菜单权限 */
|
||||
submitPermEdit() {
|
||||
this.saveRoleWay = [];
|
||||
this.selectIsSuperModel = true; //打开选择权限
|
||||
let selectedNodes = this.$refs.tree.getCheckedAndIndeterminateNodes();
|
||||
let way = [];
|
||||
selectedNodes.forEach((e) => {
|
||||
console.log(e)
|
||||
let perm = {
|
||||
title: e.title,
|
||||
isSuper: e.isSuper ? e.isSuper = 1 : e.isSuper = 0 || 0,
|
||||
menuId: e.id,
|
||||
roleId: this.editRolePermId,
|
||||
};
|
||||
way.push(perm);
|
||||
this.$set(this,'saveRoleWay',way)
|
||||
|
||||
});
|
||||
console.log(this.saveRoleWay)
|
||||
},
|
||||
|
||||
/**保存权限 */
|
||||
saveRole() {
|
||||
this.superModelLoading = true;
|
||||
saveRoleMenu(this.editRolePermId, this.saveRoleWay).then((res) => {
|
||||
this.superModelLoading = false;
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
// 标记重新获取菜单数据
|
||||
this.$store.commit("setAdded", false);
|
||||
util.initRouter(this);
|
||||
this.getRoleList();
|
||||
this.permModalVisible = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 加载数据
|
||||
loadData(item, callback) {
|
||||
loadDepartment(item.id, { openDataFilter: false }).then((res) => {
|
||||
if (res.success) {
|
||||
res.result.forEach(function (e) {
|
||||
e.checked = false;
|
||||
if (e.isParent) {
|
||||
e.loading = false;
|
||||
e.children = [];
|
||||
}
|
||||
if (e.status == -1) {
|
||||
e.title = "[已禁用] " + e.title;
|
||||
e.disabled = true;
|
||||
}
|
||||
});
|
||||
callback(res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 判断展开子节点
|
||||
expandCheckDep(v) {
|
||||
this.checkDepTree(v.children, this.editDepartments);
|
||||
},
|
||||
// 判断子节点
|
||||
checkDepTree(depData, roleDepIds) {
|
||||
let that = this;
|
||||
depData.forEach(function (p) {
|
||||
if (that.hasDepPerm(p, roleDepIds)) {
|
||||
p.checked = true;
|
||||
} else {
|
||||
p.checked = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 树结构展开层级
|
||||
changeOpen(v) {
|
||||
if (v == "0") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "1") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = false;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "2") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = false;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
} else if (v == "3") {
|
||||
this.permData.forEach((e) => {
|
||||
e.expand = true;
|
||||
if (e.children && e.children.length > 0) {
|
||||
e.children.forEach((c) => {
|
||||
c.expand = true;
|
||||
if (c.children && c.children.length > 0) {
|
||||
c.children.forEach(function (b) {
|
||||
b.expand = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.role-list {
|
||||
height: 500px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.role-item {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
align-items: center;
|
||||
> .title {
|
||||
flex: 2;
|
||||
text-align: right;
|
||||
}
|
||||
> .content {
|
||||
flex: 10;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn-item {
|
||||
margin-right: 20px;
|
||||
}
|
||||
.permModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 560px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.depModal {
|
||||
.ivu-modal-body {
|
||||
max-height: 500px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
margin-right: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue