Fedex / EcomWeb

Go to a project
Toggle navigation Toggle navigation pinning
zhanbo.xu
9e30e844 1 parent 287e5589

feat: 开发监管场所管理

Expand all
Inline Side-by-side
Showing 10 changed files with 1408 additions and 85 deletions
import request from '@/utils/request'
import request from "@/utils/request";
// 获取路由所有路由
export const getRouters = () => {
return request({
url: '/bus-customer/menu/selectMenu',
method: 'get'
})
}
url: "/bus-customer/menu/selectMenu",
method: "get",
});
};
//获取用户可访问的路由
export const getUserRouters = () => {
return request({
url: '/bus-customer/obtainUserRights',
method: 'post'
})
}
url: "/bus-customer/obtainUserRights",
method: "post",
});
};
// /menu/addMenu 添加菜单
export const addMenu = (data) => {
return request({
url: "/bus-customer/menu/addMenu",
method: "post",
data: data,
});
};
// PUT /menu​/deleteMenu 删除菜单
export const deleteMenu = (data) => {
return request({
url: `/bus-customer/menu/deleteMenu?menuId=${data.menuId}`,
method: "put",
});
};
// POST /menu​/updateMenu 更新菜单
export const updateMenu = (data) => {
return request({
url: "/bus-customer/menu/updateMenu",
method: "post",
data: data,
});
};
......
import request from "@/utils/request";
// POST
// ​/operatorPlace​/addOperatorPlace
// 新增监管场所
export function addOperatorPlace(data) {
return request({
url: "/bus-customer/operatorPlace​/addOperatorPlace",
method: "post",
data: data,
});
}
// POST
// ​/operatorPlace​/getOperatorPlaceList
// 查询监管场所列表
export function getOperatorPlaceList(data) {
return request({
url: "/bus-customer/operatorPlace​/getOperatorPlaceList",
method: "post",
data: data,
});
}
// POST
// ​/operatorPlace​/updateOperatorPlace
// 修改监管场所
export function updateOperatorPlace(data) {
return request({
url: "/bus-customer/operatorPlace​/updateOperatorPlace",
method: "post",
data: data,
});
}
This diff is collapsed. Click to expand it.
......@@ -31,7 +31,14 @@
:pageSizes="[20, 30, 50, 100]"
:totalCount="0"
:loading="tableLoading"
:emptyText="(loadingDatas && !rowData.popoverData.length) ? '数据加载中' : $t('portEntry.emptyText')"
:emptyText="
loadingDatas &&
rowData &&
rowData.popoverData &&
!rowData.popoverData.length
? '数据加载中'
: $t('portEntry.emptyText')
"
height="350px"
maxHeight="500px"
rowKey="id"
......@@ -82,20 +89,20 @@ export default {
},
data() {
return {
tableLoading: false
tableLoading: false,
};
},
computed:{
loadingDatas(){
return this.$store.state.viewOption.loadingDatas
}
computed: {
loadingDatas() {
return this.$store.state.viewOption.loadingDatas;
},
},
methods: {
//弹框关闭
popoverClose() {
this.$emit("popoverClose");
this.parentDom.$refs.tables.$refs.bodyWrapper.style.overflowY = "auto";
this.$store.dispatch('setLoadingState', true)
this.$store.dispatch("setLoadingState", true);
},
//弹框状态改版
popoverChange(data, type) {
......
import Vue from 'vue'
import Router from 'vue-router'
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router)
Vue.use(Router);
/* Layout */
import Layout from '@/layout'
import ParentView from '@/components/ParentView';
import Layout from "@/layout";
import ParentView from "@/components/ParentView";
/**
* Note: 路由配置项
......@@ -28,37 +28,37 @@ import ParentView from '@/components/ParentView';
// 公共路由
export const constantRoutes = [
{
path: '/redirect',
path: "/redirect",
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path(.*)',
component: (resolve) => require(['@/views/redirect'], resolve)
}
]
path: "/redirect/:path(.*)",
component: (resolve) => require(["@/views/redirect"], resolve),
},
],
},
{
path: '/404',
component: (resolve) => require(['@/views/error/404'], resolve),
hidden: true
path: "/404",
component: (resolve) => require(["@/views/error/404"], resolve),
hidden: true,
},
{
path: '/401',
component: (resolve) => require(['@/views/error/401'], resolve),
hidden: true
path: "/401",
component: (resolve) => require(["@/views/error/401"], resolve),
hidden: true,
},
{
path: '/login',
component: (resolve) => require(['@/views/login'], resolve),
path: "/login",
component: (resolve) => require(["@/views/login"], resolve),
hidden: true,
meta: { noCache: true }
meta: { noCache: true },
},
{
path: '/relogin',
component: (resolve) => require(['@/views/redjrectLogin'], resolve),
path: "/relogin",
component: (resolve) => require(["@/views/redjrectLogin"], resolve),
hidden: true,
meta: { noCache: true, breadcrumb: false }
meta: { noCache: true, breadcrumb: false },
},
// {
// path: '',
......@@ -82,10 +82,10 @@ export const constantRoutes = [
// ]
// },
{
path: '/reporting',
path: "/reporting",
component: Layout,
hidden: false,
meta: { title: '申报数据管理', icon: 'upload' },
meta: { title: "申报数据管理", icon: "upload" },
children: [
// {
// path: '/reportingData',
......@@ -95,19 +95,20 @@ export const constantRoutes = [
// meta: { title: '申报数据管理', icon: 'upload' }
// },
{
path: '/editReportingData',
component: (resolve) => require(['@/views/editReportingData/index'], resolve),
path: "/editReportingData",
component: (resolve) =>
require(["@/views/editReportingData/index"], resolve),
hidden: true,
name: 'EditReportingData',
meta: { title: '申报数据编辑', icon: 'edit' }
name: "EditReportingData",
meta: { title: "申报数据编辑", icon: "edit" },
},
]
],
},
{
path: '/export',
path: "/export",
component: Layout,
hidden: false,
meta: { title: '查询管理', icon: 'fedexExportIcon' },
meta: { title: "查询管理", icon: "fedexExportIcon" },
children: [
// {
// path: '/exportBillQuery',
......@@ -117,25 +118,28 @@ export const constantRoutes = [
// meta: { title: '出口订单查询', icon: '' },
// },
{
path: '/exportBillDetail',
component: (resolve) => require(['@/views/exportBillDetail/index'], resolve),
path: "/exportBillDetail",
component: (resolve) =>
require(["@/views/exportBillDetail/index"], resolve),
hidden: true,
name: 'ExportBillDetail',
meta: { title: '出口订单详情', icon: '' },
name: "ExportBillDetail",
meta: { title: "出口订单详情", icon: "" },
},
{
path: '/exportTransportDetail',
component: (resolve) => require(['@/views/exportTransportDetail/index'], resolve),
path: "/exportTransportDetail",
component: (resolve) =>
require(["@/views/exportTransportDetail/index"], resolve),
hidden: true,
name: 'ExportTransportDetail',
meta: { title: '出口运单详情', icon: '' },
name: "ExportTransportDetail",
meta: { title: "出口运单详情", icon: "" },
},
{
path: '/exportListDetail',
component: (resolve) => require(['@/views/exportListDetail/index'], resolve),
path: "/exportListDetail",
component: (resolve) =>
require(["@/views/exportListDetail/index"], resolve),
hidden: true,
name: 'ExportListDetail',
meta: { title: '出口清单详情', icon: '' },
name: "ExportListDetail",
meta: { title: "出口清单详情", icon: "" },
},
// {
// path: '/exportTransportBillQuery',
......@@ -159,18 +163,20 @@ export const constantRoutes = [
// meta: { title: '清单总分单查询', icon: '' }
// },
{
path: '/listBranchDetail',
component: (resolve) => require(['@/views/listBranchDetail/index'], resolve),
name: 'ListBranchDetail',
path: "/listBranchDetail",
component: (resolve) =>
require(["@/views/listBranchDetail/index"], resolve),
name: "ListBranchDetail",
hidden: true,
meta: { title: '清单总分单详情', icon: '' }
meta: { title: "清单总分单详情", icon: "" },
},
{
path: '/logisticsExitDetail',
component: (resolve) => require(['@/views/logisticsExitDetail/index'], resolve),
name: 'LogisticsExitDetail',
path: "/logisticsExitDetail",
component: (resolve) =>
require(["@/views/logisticsExitDetail/index"], resolve),
name: "LogisticsExitDetail",
hidden: true,
meta: { title: '物流离境单详情', icon: '' }
meta: { title: "物流离境单详情", icon: "" },
},
// {
// path: '/logisticsExitQuery',
......@@ -184,20 +190,20 @@ export const constantRoutes = [
// name: 'ExportRevokeBillQuery',
// meta: { title: '出口撤销单查询', icon: '' }
// }
]
],
},
{
path: '/summary',
path: "/summary",
component: Layout,
hidden: false,
meta: { title: '汇总申报', icon: 'fedexSummary' },
meta: { title: "汇总申报", icon: "fedexSummary" },
children: [
{
path: '/summary',
component: (resolve) => require(['@/views/summaryEdit/index'], resolve),
path: "/summary",
component: (resolve) => require(["@/views/summaryEdit/index"], resolve),
hidden: false,
name: 'Summary',
meta: { title: '汇总申报', icon: '' }
name: "Summary",
meta: { title: "汇总申报", icon: "" },
},
// {
// path: '/summaryDataSearch',
......@@ -207,13 +213,14 @@ export const constantRoutes = [
// meta: { title: '汇总申请单查询', icon: '' }
// }
{
path: '/summaryDetail',
component: (resolve) => require(['@/views/summaryDetail/index'], resolve),
name: 'SummaryDetail',
path: "/summaryDetail",
component: (resolve) =>
require(["@/views/summaryDetail/index"], resolve),
name: "SummaryDetail",
hidden: true,
meta: { title: '汇总申请单详情', icon: '' }
}
]
meta: { title: "汇总申请单详情", icon: "" },
},
],
},
// {
// path: '/system',
......@@ -256,13 +263,13 @@ export const constantRoutes = [
// name: 'RoleConfig',
// meta: { title: '角色管理权限', icon: '' }
// },
// 监管场所管理 supervise-place-manage
// ]
// },
]
];
export default new Router({
mode: 'hash', // 去掉url中的#
mode: "hash", // 去掉url中的#
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
routes: constantRoutes,
});
......
<template>
<el-dialog
class="entryDialog classCUploadDialog"
:title="title"
:visible.sync="outerVisible"
:show-close="false"
width="25%"
:close-on-click-modal="false"
:destroy-on-close="true"
v-loading="loadings.dialogLoading"
@close="close"
>
<div class="modelItem">
<el-form
v-if="type != 'menuChange'"
class="fedexFormStyle"
ref="formData"
:model="formData"
:rules="rules"
label-position="top"
size="small"
>
<Formitem label="上级名称" prop="parentMenuId" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-roleName"
resize="none"
v-model="formData.parentMenuId"
clearable
placeholder=""
></el-input>
</Formitem>
<Formitem label="菜单名称" prop="menuName" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-roleName"
resize="none"
v-model="formData.menuName"
clearable
placeholder=""
></el-input>
</Formitem>
<Formitem label="菜单名称" prop="menuName" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-roleName"
resize="none"
v-model="formData.menuName"
clearable
placeholder=""
></el-input>
</Formitem>
<Formitem label="菜单名称" prop="menuName" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-roleName"
resize="none"
v-model="formData.menuName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-form>
<el-tree
ref="tree"
class="menuTree"
v-else
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:props="defaultProps"
@check="treeCheckChange"
>
</el-tree>
</div>
<div class="dialogOption entrySave">
<el-button
class="entrySaveButton"
:disabled="loadings.submitLoading"
@click="submit"
>确 定</el-button
>
<el-button
class="entrySaveButton"
:disabled="loadings.uploadLoading"
@click="close"
>关 闭</el-button
>
</div>
</el-dialog>
</template>
<script>
import {
addRoleData,
updateRoleData,
updateRoleMenuData,
getMenuByRoleId,
} from "@/api/system/user.js";
import { getRouters } from "@/api/menu";
export default {
props: {
outerVisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "新增角色",
},
type: {
type: String,
default: "",
},
active: {
type: Object,
default: null,
},
},
watch: {
outerVisible(val) {
if (val) {
this.loadings.dialogLoading = false;
if (this.type == "update") {
this.formData = this.active;
} else if (this.type == "menuChange") {
this.formData = this.active;
this.searchTreeData();
this.loadCheckedKeys(); //加载已绑定的菜单
}
}
},
},
data() {
return {
formData: {
menuName: "",
icon: "",
order: 0,
parentMenuId: 0, //父级菜单id
physicalUrl: "", //前端地址
url: "", //后端地址
},
treeData: [],
treeCheckData: [],
expandedKeys: [],
checkedKeys: [],
rules: {
menuName: [
{
required: true,
trigger: "blur",
message: "菜单名称不能为空！",
},
],
},
defaultProps: {
children: "children",
label: "label",
},
searchForm: {},
loadings: {
dialogLoading: false,
uploadLoading: false,
submitLoading: false,
},
loadingText: "",
};
},
methods: {
//查询菜单数据
searchTreeData() {
this.loadings.dialogLoading = true;
getRouters()
.then((res) => {
if (res.code === "200") {
let arr = [];
res.data.forEach((item) => {
let status = true;
if (item.parentMenuId == 0) {
let obj = {
id: item.menuId,
label: item.menuName,
children: [],
};
arr.forEach((menuItem) => {
if (menuItem.id == item.menuId) {
status = false;
menuItem.label = item.menuName;
}
});
if (status) {
arr.push(obj);
}
} else {
let obj = {
id: item.menuId,
label: item.menuName,
};
arr.forEach((menuItem) => {
if (menuItem.id == item.parentMenuId) {
status = false;
menuItem.children.push(obj);
}
});
if (status) {
arr.push({
id: item.parentMenuId,
label: "",
children: [obj],
});
}
}
});
this.treeData = arr;
} else {
this.alertWarningMsg(res.message);
}
this.loadings.dialogLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//数据保存
submit() {
this.loadings.dialogLoading = true;
let obj = {};
if (this.type == "add") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.menuName = this.formData.menuName;
this.addapi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
} else if (this.type == "update") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.roleId = this.formData.roleId;
obj.menuName = this.formData.menuName;
this.updateapi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
} else if (this.type == "menuChange") {
obj.menuId = this.treeCheckData; // 使用合并后的选中节点
obj.roleId = this.formData.roleId;
this.menuChangeapi(obj);
}
},
//新增
addapi(val) {
addRoleData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//修改
updateapi(val) {
updateRoleData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//菜单权限修改
menuChangeapi(val) {
updateRoleMenuData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.$store.dispatch("GenerateRoutes");
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
treeCheckChange(data, checked) {
console.log(data, checked);
let arr = [];
arr = checked.checkedKeys.concat(checked.halfCheckedKeys);
this.treeCheckData = arr;
},
close() {
this.formData = {
menuName: "",
};
this.checkedKeys = [];
this.$emit("close");
},
// 加载已绑定的菜单
loadCheckedKeys() {
if (this.formData.roleId) {
getMenuByRoleId(this.formData.roleId)
.then((res) => {
if (res.code === "200") {
this.checkedKeys = res.data
.filter((item) => item.isBinding && item.parentMenuId != 0)
.map((item) => item.menuId);
//console.log('初始 checkedKeys:', this.checkedKeys);
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys(this.checkedKeys);
this.updateTreeCheckData();
});
} else {
this.alertWarningMsg(res.message);
}
})
.catch((err) => {
console.log(err);
});
}
},
//加载选中的节点及半选中的父节点
updateTreeCheckData() {
const checkedKeys = this.$refs.tree.getCheckedKeys();
const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
this.treeCheckData = checkedKeys.concat(halfCheckedKeys);
//console.log('合并后的 treeCheckData:', this.treeCheckData);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.menuTree {
max-width: 350px;
max-height: 300px;
overflow: auto;
margin: 0 auto;
border: 1px solid #999;
padding: 10px;
}
</style>
<template>
<div class="entrySreach">
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
>
<el-row class="row-border">
<!-- 角色名称 -->
<el-col :span="5">
<Formitem label="菜单名称" prop="menuName">
<el-input
type="text"
class="inputShadow"
id="inputInner--roleName"
resize="none"
v-model="sreachFormData.menuName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
class="entrySreachButton"
type="text"
icon="el-icon-search"
:loading="loadings.searchLoading"
@click="search(0)"
></el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="optionButton">
<el-button
class="entrySaveButton"
icon="el-icon-plus"
size="small"
@click="addHandle"
>
新增菜单
</el-button>
</div>
<Table
class="fedexDetialTable fedexSreachTable"
ref="entryTable"
:data="tableData"
:headerData="headerData"
:maxHeight="tableMaxheight"
:border="true"
:pagination="true"
:order="false"
:loading="loadings.searchLoading"
:page="page.pageIndex"
:pageSizes="[20, 30, 50, 100]"
:totalCount="page.total"
@sizeChange="sizeChange"
@currentChange="currentChange"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template slot="optionColumn">
<el-table-column align="left" label="操作">
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)">
角色修改
</el-button>
<el-button type="text" @click="muenChange(scope.row)">
权限绑定
</el-button>
</template>
</el-table-column>
</template>
</Table>
<DialogVue
:outerVisible="outerVisible"
:title="dialogTitle"
:type="editType"
:active="activeData"
@close="dialogClose"
/>
</div>
</template>
<script>
import { getRoleList } from "@/api/system/user.js";
import DialogVue from "./dialog.vue";
import { addMenu, deleteMenu } from "@/api/menu";
export default {
name: "SupervisePlaceManage",
components: {
DialogVue,
},
data() {
return {
sreachFormData: {
menuName: "",
},
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
activeData: null,
tableData: [],
headerData: [
{
name: "角色名",
value: "roleName",
width: "",
align: "left",
},
],
loadings: {
searchLoading: false,
},
tableMaxheight: null,
outerVisible: false,
dialogTitle: "",
editType: "",
};
},
created() {
this.search(0);
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
},
methods: {
//查询
search(val) {
this.loadings.searchLoading = true;
if (val == 0) {
this.page.pageIndex = 1;
}
let obj = this.sreachFormData;
obj.pageIndex = this.page.pageIndex;
obj.pageSize = this.page.pageSize;
getRoleList(obj)
.then((res) => {
if (res.code === "200") {
this.tableData = res.data.value;
this.page.total = res.data.totalItems;
this.tableData.forEach((item, idx) => {
item.index = idx;
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.searchLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.searchLoading = false;
});
},
addHandle() {
// this.dialogTitle = "新增菜单";
// this.editType = "add";
// this.outerVisible = true;
// let params = {
// icon: "",
// menuName: "监管场所管理",
// order: 4.4,
// parentMenuId: 90,
// physicalUrl: "/supervise-place-manage",
// url: "",
// };
deleteMenu({
menuId: 1,
}).then((res) => {
console.log(res);
});
// addMenu(params).then((res) => {
// console.log(res);
// });
},
update(val) {
this.dialogTitle = "修改角色";
this.editType = "update";
this.outerVisible = true;
this.activeData = val;
},
muenChange(val) {
this.dialogTitle = "绑定权限";
this.editType = "menuChange";
this.outerVisible = true;
this.activeData = val;
},
dialogClose() {
this.outerVisible = false;
this.activeData = null;
this.search(1);
},
//分页
currentChange(val) {
this.page.pageIndex = val.page;
this.search(1);
},
sizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
input() {
this.$forceUpdate();
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
height: 100%;
background-color: $menuLightBg;
.entrySreachButton {
display: inline-block;
font-size: 20px;
color: $fedexButton !important;
}
.optionButton {
padding: 10px;
text-align: left;
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
svg {
display: inline-block;
margin-right: 5px;
fill: $fedexButton;
}
}
.entrySaveButton:hover,
.entrySaveButton:focus {
color: $menuLightBg !important;
background-color: $fedexButton !important;
}
}
}
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>
This diff is collapsed. Click to expand it.
<template>
<el-dialog
class="entryDialog classCUploadDialog"
:title="title"
:visible.sync="outerVisible"
:show-close="false"
width="25%"
:close-on-click-modal="false"
:destroy-on-close="true"
v-loading="loadings.dialogLoading"
@close="close"
>
<div class="modelItem">
<el-form
v-if="type != 'menuChange'"
class="fedexFormStyle"
ref="formData"
:model="formData"
:rules="rules"
label-position="top"
size="small"
>
<Formitem label="角色名称" prop="roleName" type="edit">
<el-input
type="text"
class="inputShadow"
id="inputInner-edit-roleName"
resize="none"
v-model="formData.roleName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-form>
<el-tree
ref="tree"
class="menuTree"
v-else
:data="treeData"
show-checkbox
default-expand-all
node-key="id"
:default-expanded-keys="expandedKeys"
:default-checked-keys="checkedKeys"
:props="defaultProps"
@check="treeCheckChange"
>
</el-tree>
</div>
<div class="dialogOption entrySave">
<el-button
class="entrySaveButton"
:disabled="loadings.submitLoading"
@click="submit"
>确 定</el-button
>
<el-button
class="entrySaveButton"
:disabled="loadings.uploadLoading"
@click="close"
>关 闭</el-button
>
</div>
</el-dialog>
</template>
<script>
import {
addRoleData,
updateRoleData,
updateRoleMenuData,
getMenuByRoleId,
} from "@/api/system/user.js";
import { getRouters } from "@/api/menu";
export default {
props: {
outerVisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "新增角色",
},
type: {
type: String,
default: "",
},
active: {
type: Object,
default: null,
},
},
watch: {
outerVisible(val) {
if (val) {
this.loadings.dialogLoading = false;
if (this.type == "update") {
this.formData = this.active;
} else if (this.type == "menuChange") {
this.formData = this.active;
this.searchTreeData();
this.loadCheckedKeys();//加载已绑定的菜单
}
}
},
},
data() {
return {
formData: {
roleName: "",
},
treeData: [],
treeCheckData: [],
expandedKeys: [],
checkedKeys: [],
rules: {
roleName: [
{
required: true,
trigger: "blur",
message: "角色名称不能为空！",
},
],
},
defaultProps: {
children: "children",
label: "label",
},
searchForm: {},
loadings: {
dialogLoading: false,
uploadLoading: false,
submitLoading: false,
},
loadingText: "",
};
},
methods: {
//查询菜单数据
searchTreeData() {
this.loadings.dialogLoading = true;
getRouters()
.then((res) => {
if (res.code === "200") {
let arr = [];
res.data.forEach((item) => {
let status = true;
if (item.parentMenuId == 0) {
let obj = {
id: item.menuId,
label: item.menuName,
children: [],
};
arr.forEach((menuItem) => {
if (menuItem.id == item.menuId) {
status = false;
menuItem.label = item.menuName;
}
});
if (status) {
arr.push(obj);
}
} else {
let obj = {
id: item.menuId,
label: item.menuName,
};
arr.forEach((menuItem) => {
if (menuItem.id == item.parentMenuId) {
status = false;
menuItem.children.push(obj);
}
});
if (status) {
arr.push({
id: item.parentMenuId,
label: "",
children: [obj],
});
}
}
});
this.treeData = arr;
} else {
this.alertWarningMsg(res.message);
}
this.loadings.dialogLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//数据保存
submit() {
this.loadings.dialogLoading = true;
let obj = {};
if (this.type == "add") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.roleName = this.formData.roleName;
this.addapi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
} else if (this.type == "update") {
this.$refs.formData.validate((valid) => {
if (valid) {
obj.roleId = this.formData.roleId;
obj.roleName = this.formData.roleName;
this.updateapi(obj);
} else {
this.loadings.dialogLoading = false;
}
});
} else if (this.type == "menuChange") {
obj.menuId = this.treeCheckData; // 使用合并后的选中节点
obj.roleId = this.formData.roleId;
this.menuChangeapi(obj);
}
},
//新增
addapi(val) {
addRoleData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//修改
updateapi(val) {
updateRoleData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
//菜单权限修改
menuChangeapi(val) {
updateRoleMenuData(val)
.then((res) => {
if (res.code === "200") {
this.msgSuccess(res.message);
this.close();
this.$store.dispatch('GenerateRoutes')
} else {
this.alertWarningMsg(res.message);
this.loadings.dialogLoading = false;
}
})
.catch((err) => {
console.log(err);
this.loadings.dialogLoading = false;
});
},
treeCheckChange(data, checked) {
console.log(data, checked);
let arr = [];
arr = checked.checkedKeys.concat(checked.halfCheckedKeys);
this.treeCheckData = arr;
},
close() {
this.formData = {
roleName: "",
};
this.checkedKeys = []
this.$emit("close");
},
// 加载已绑定的菜单
loadCheckedKeys() {
if (this.formData.roleId) {
getMenuByRoleId(this.formData.roleId)
.then((res) => {
if (res.code === "200") {
this.checkedKeys = res.data.filter(item => item.isBinding && (item.parentMenuId!=0 ) ).map(item => item.menuId);
//console.log('初始 checkedKeys:', this.checkedKeys);
this.$nextTick(() => {
this.$refs.tree.setCheckedKeys(this.checkedKeys);
this.updateTreeCheckData();
});
} else {
this.alertWarningMsg(res.message);
}
})
.catch((err) => {
console.log(err);
});
}
},
//加载选中的节点及半选中的父节点
updateTreeCheckData() {
const checkedKeys = this.$refs.tree.getCheckedKeys();
const halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
this.treeCheckData = checkedKeys.concat(halfCheckedKeys);
//console.log('合并后的 treeCheckData:', this.treeCheckData);
},
},
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variables.scss";
.menuTree {
max-width: 350px;
max-height: 300px;
overflow: auto;
margin: 0 auto;
border: 1px solid #999;
padding: 10px;
}
</style>
<template>
<div class="entrySreach">
<el-form
class="fedexFormStyle fedexformSreach fedexformSreachBottomBorder"
ref="sreachForm"
:model="sreachFormData"
label-position="top"
size="small"
>
<el-row class="row-border">
<!-- 角色名称 -->
<el-col :span="5">
<Formitem label="角色名称" prop="roleName">
<el-input
type="text"
class="inputShadow"
id="inputInner--roleName"
resize="none"
v-model="sreachFormData.roleName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="角色名称" prop="roleName">
<el-input
type="text"
class="inputShadow"
id="inputInner--roleName"
resize="none"
v-model="sreachFormData.roleName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="5">
<Formitem label="角色名称" prop="roleName">
<el-input
type="text"
class="inputShadow"
id="inputInner--roleName"
resize="none"
v-model="sreachFormData.roleName"
clearable
placeholder=""
></el-input>
</Formitem>
</el-col>
<el-col :span="2">
<el-form-item class="textCenter">
<el-button
class="entrySreachButton"
type="text"
icon="el-icon-search"
:loading="loadings.searchLoading"
@click="search(0)"
></el-button>
</el-form-item>
</el-col>
<el-col :span="2">
<!-- 清空查询条件-->
<el-form-item class="textLeft textCenter">
<el-button
type="text"
size="small"
icon="el-icon-refresh"
@click="clear"
>
重置
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="optionButton">
<el-button
class="entrySaveButton"
icon="el-icon-plus"
size="small"
@click="addRole"
>
新增
</el-button>
</div>
<Table
class="fedexDetialTable fedexSreachTable"
ref="entryTable"
:data="tableData"
:headerData="headerData"
:maxHeight="tableMaxheight"
:border="true"
:pagination="true"
:order="false"
:loading="loadings.searchLoading"
:page="page.pageIndex"
:pageSizes="[20, 30, 50, 100]"
:totalCount="page.total"
@sizeChange="sizeChange"
@currentChange="currentChange"
:selection="false"
:selectFixed="false"
:rowSelectDataType="false"
>
<template slot="optionColumn">
<el-table-column align="left" label="操作">
<template slot-scope="scope">
<el-button type="text" @click="update(scope.row)">
角色修改
</el-button>
<el-button type="text" @click="muenChange(scope.row)">
权限绑定
</el-button>
</template>
</el-table-column>
</template>
</Table>
<DialogVue
:outerVisible="outerVisible"
:title="dialogTitle"
:type="editType"
:active="activeData"
@close="dialogClose"
/>
</div>
</template>
<script>
import { getRoleList } from "@/api/system/user.js";
import DialogVue from "./dialog.vue";
export default {
name: "SupervisePlaceManage",
components: {
DialogVue,
},
data() {
return {
sreachFormData: {
roleName: "",
},
page: {
pageIndex: 1,
pageSize: 20,
total: 0,
},
activeData: null,
tableData: [],
headerData: [
{
name: "角色名",
value: "roleName",
width: "",
align: "left",
},
],
loadings: {
searchLoading: false,
},
tableMaxheight: null,
outerVisible: false,
dialogTitle: "",
editType: "",
};
},
created() {
this.search(0);
},
mounted() {
this.tableMaxheight = window.innerHeight - 300;
},
methods: {
clear() {
this.$refs.sreachForm.resetFields();
},
//查询
search(val) {
this.loadings.searchLoading = true;
if (val == 0) {
this.page.pageIndex = 1;
}
let obj = this.sreachFormData;
obj.pageIndex = this.page.pageIndex;
obj.pageSize = this.page.pageSize;
getRoleList(obj)
.then((res) => {
if (res.code === "200") {
this.tableData = res.data.value;
this.page.total = res.data.totalItems;
this.tableData.forEach((item, idx) => {
item.index = idx;
});
} else {
this.alertWarningMsg(res.message);
}
this.loadings.searchLoading = false;
})
.catch((err) => {
console.log(err);
this.loadings.searchLoading = false;
});
},
addRole() {
this.dialogTitle = "新增角色";
this.editType = "add";
this.outerVisible = true;
},
update(val) {
this.dialogTitle = "修改角色";
this.editType = "update";
this.outerVisible = true;
this.activeData = val;
},
muenChange(val) {
this.dialogTitle = "绑定权限";
this.editType = "menuChange";
this.outerVisible = true;
this.activeData = val;
},
dialogClose() {
this.outerVisible = false;
this.activeData = null;
this.search(1);
},
//分页
currentChange(val) {
this.page.pageIndex = val.page;
this.search(1);
},
sizeChange(val) {
this.page.pageSize = val;
this.search(1);
},
input() {
this.$forceUpdate();
},
},
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.entrySreach {
height: 100%;
background-color: $menuLightBg;
.entrySreachButton {
display: inline-block;
font-size: 20px;
color: $fedexButton !important;
}
.optionButton {
padding: 10px;
text-align: left;
.el-button {
color: $fedexButton;
border-color: $fedexButton !important;
svg {
display: inline-block;
margin-right: 5px;
fill: $fedexButton;
}
}
.entrySaveButton:hover,
.entrySaveButton:focus {
color: $menuLightBg !important;
background-color: $fedexButton !important;
}
}
}
.texttareaTip {
position: absolute;
top: 52%;
right: 20px;
transform: translate(0, -50%);
z-index: 10;
}
</style>