用户权限功能编写

This commit is contained in:
hyt 2024-04-03 17:01:49 +08:00
parent 48987f9324
commit 6594e53ec5
27 changed files with 3450 additions and 2795 deletions

View File

@ -6,7 +6,7 @@
>
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
><svg-icon :icon-class="item.meta.menuIcon" />
{{ item.meta.title }}</el-menu-item
>
</template>
@ -19,9 +19,8 @@
:index="item.path"
:key="index"
v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
><svg-icon :icon-class="item.meta.menuIcon" />
{{ item.meta.title }}</el-menu-item>
</template>
</el-submenu>
</el-menu>

View File

@ -14,7 +14,7 @@
<!-- <router-link :to="item.path" class="indexRouter" :style="{-->
<!-- color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index">-->
<!-- <div @click="handlerClick(item,index)" flex>-->
<!-- <i :class="item.meta.icon"></i>-->
<!-- <i :class="item.meta.menuIcon"></i>-->
<!-- <p>{{item.meta.title}}</p>-->
<!-- </div>-->
<!-- </router-link>-->

View File

@ -5,25 +5,25 @@
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<!-- <template slot="title"> -->
<!-- <i class="iconfont" :class="item.meta.icon" > </i> -->
<!-- <i class="iconfont" :class="item.meta.menuIcon" > </i> -->
<!-- <span v-show="sidebarOpened && !isNest">{{onlyOneChild.meta.title}}</span> -->
<!-- <span v-show="isNest">{{onlyOneChild.meta.title}}</span> -->
<!-- <div v-if="sidebarOpened">
<i class="iconfont" :class="item.meta.icon" > </i>
<i class="iconfont" :class="item.meta.menuIcon" > </i>
<span>{{isNest}}</span>
</div> -->
<div v-if="isNest === false" :style="{'text-align':sidebarOpened?'left':'center'}">
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span v-show="sidebarOpened" style="margin-left: 16px;">{{onlyOneChild.meta.title}}</span>
</div>
<div v-else>
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span>{{onlyOneChild.meta.title}}</span>
</div>
<template slot="title">
<div v-if="isNest === false">
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span style="margin-left: 16px;">{{item.meta.title}}</span>
</div>
</template>
@ -32,7 +32,7 @@
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<i class="iconfont" :class="item.meta.icon" v-if="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon" v-if="item.meta.menuIcon"> </i>
<span v-show="sidebarOpened" :style="{'margin-left':(sidebarOpened && isNest == false) ?'16px':''}"
class="itemSidebar">{{item.meta.title}}</span>
</template>

View File

@ -3,7 +3,7 @@
<div class="newsSider bitTitle lastList" v-if="!isNest && hasOneShowingChild(item.children, item)"
style="width:100px;" @click="goRoute(item)">
<div class="concise">
<i class=" concise-icon-item iconfont" :class="item.meta.icon"></i>
<i class=" concise-icon-item iconfont" :class="item.meta.menuIcon"></i>
<i :class="item.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star concise-icon"
@click.stop="handleClickWithDelay(item)"></i>
</div>
@ -20,7 +20,7 @@
<div v-for="(route, index) in getPriceList(item.children)" class="lastList" :key="index"
@click="goRoute(item, route)" style="width:100px">
<div class="concise">
<i class=" concise-icon-item iconfont" :class="route.meta.icon">
<i class=" concise-icon-item iconfont" :class="route.meta.menuIcon">
</i>
<i :class="route.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star concise-icon"
@click.stop="handleClickWithDelay(route)"></i>
@ -93,7 +93,7 @@ export default {
this.$emit("openChildren", item);
},
async collectClick(val) {
// console.log(val.meta.icon);
// console.log(val.meta.menuIcon);
let params = {
mcId: val.id,
type: "",
@ -344,4 +344,4 @@ $activeColor: var(--bg-color, "#00aaff");
border-radius: 8px;
color: #ffffff;
}
</style>
</style>

View File

@ -30,7 +30,7 @@
@mouseenter="openChildren(item, index)"
@click="goRouter(item, index)"
>
<i class="newsSider-icon iconfont" :class="item.meta.icon"> </i>
<i class="newsSider-icon iconfont" :class="item.meta.menuIcon"> </i>
<p class="newsSider-title" :class="{ active: index === activeIndex }">
{{ item.meta.title }}
</p>

View File

@ -29,8 +29,8 @@
class="newsSider"
@mouseenter="openChildren(item, index)"
>
<i class="newsSider-icon iconfont" :class="item.meta.icon ? item.meta.icon :'el-icon-office-building'"> </i>
<!-- <i class="newsSider-icon iconfont" :class="item.meta.icon"> </i> -->
<i class="newsSider-icon iconfont" :class="item.meta.menuIcon ? item.meta.menuIcon :'el-icon-office-building'"> </i>
<!-- <i class="newsSider-icon iconfont" :class="item.meta.menuIcon"> </i> -->
<p class="newsSider-title" :class="{ active: index === activeIndex }">
{{ item.meta.title }}
</p>

View File

@ -5,25 +5,25 @@
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
<!-- <template slot="title"> -->
<!-- <i class="iconfont" :class="item.meta.icon" > </i> -->
<!-- <i class="iconfont" :class="item.meta.menuIcon" > </i> -->
<!-- <span v-show="sidebarOpened && !isNest">{{onlyOneChild.meta.title}}</span> -->
<!-- <span v-show="isNest">{{onlyOneChild.meta.title}}</span> -->
<!-- <div v-if="sidebarOpened">
<i class="iconfont" :class="item.meta.icon" > </i>
<i class="iconfont" :class="item.meta.menuIcon" > </i>
<span>{{isNest}}</span>
</div> -->
<div v-if="isNest === false" :style="{'text-align':sidebarOpened?'left':'center'}">
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span v-show="sidebarOpened" style="margin-left: 16px;">{{onlyOneChild.meta.title}}</span>
</div>
<div v-else>
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span>{{onlyOneChild.meta.title}}</span>
</div>
<template slot="title">
<div v-if="isNest === false">
<i class="iconfont" :class="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon"> </i>
<span style="margin-left: 16px;">{{item.meta.title}}</span>
</div>
</template>
@ -32,7 +32,7 @@
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<template slot="title">
<i class="iconfont" :class="item.meta.icon" v-if="item.meta.icon"> </i>
<i class="iconfont" :class="item.meta.menuIcon" v-if="item.meta.menuIcon"> </i>
<span v-show="sidebarOpened" :style="{'margin-left':(sidebarOpened && isNest == false) ?'16px':''}"
class="itemSidebar">{{item.meta.title}}</span>
</template>

View File

@ -3,7 +3,7 @@
<div class="newsSider bitTitle lastList" v-if="!isNest && hasOneShowingChild(item.children, item)"
style="width:100px;" @click="goRoute(item)">
<div class="concise">
<i class=" concise-icon-item iconfont" :class="item.meta.icon"></i>
<i class=" concise-icon-item iconfont" :class="item.meta.menuIcon"></i>
<i :class="item.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star concise-icon"
@click.stop="handleClickWithDelay(item)"></i>
</div>
@ -20,7 +20,7 @@
<div v-for="(route, index) in getPriceList(item.children)" class="lastList" :key="index"
@click="goRoute(item, route)" style="width:100px">
<div class="concise">
<i class=" concise-icon-item iconfont" :class="route.meta.icon">
<i class=" concise-icon-item iconfont" :class="route.meta.menuIcon">
</i>
<i :class="route.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star concise-icon"
@click.stop="handleClickWithDelay(route)"></i>
@ -93,7 +93,7 @@ export default {
this.$emit("openChildren", item);
},
async collectClick(val) {
// console.log(val.meta.icon);
// console.log(val.meta.menuIcon);
let params = {
mcId: val.id,
type: "",
@ -345,4 +345,4 @@ $activeColor: var(--bg-color, "#00aaff");
border-radius: 8px;
color: #ffffff;
}
</style>
</style>

View File

@ -14,7 +14,7 @@
<div v-if="!item.hidden && item.meta" flex="cross:center" :class="{ active: index === activeIndex }" :style="{
color: settings.sideTheme === 'theme-dark' ? '#fff' : '#4c4c4c',
}" class="newsSider" @mouseenter="openChildren(item, index)">
<i class="newsSider-icon iconfont" :class="item.meta.icon"> </i>
<i class="newsSider-icon iconfont" :class="item.meta.menuIcon"> </i>
<p class="newsSider-title" :class="{ active: index === activeIndex }">
{{ item.meta.title }}
</p>

View File

@ -14,7 +14,7 @@
<div v-if="!item.hidden && item.meta" flex="cross:center" :class="{ active: index === activeIndex }" :style="{
color: settings.sideTheme === 'theme-dark' ? '#fff' : '#4c4c4c',
}" class="newsSider" @mouseenter="openChildren(item, index)">
<i class="newsSider-icon iconfont" :class="item.meta.icon"> </i>
<i class="newsSider-icon iconfont" :class="item.meta.menuIcon"> </i>
<p class="newsSider-title" :class="{ active: index === activeIndex }">
{{ item.meta.title }}
</p>

View File

@ -1,157 +1,174 @@
// 表头配置
const tableColumnJson = [
{
label: '按钮编号',
prop: 'code',
tooltip: true,
},
{
label: '按钮中文编码',
prop: 'nameEN',
tooltip: true,
},
{
label: '按钮英文编码',
prop: 'nameEN',
tooltip: true,
},
{
label: '按钮格式',
prop: 'style',
tooltip: true,
},
{
label: '按钮图标',
prop: 'icoName',
tooltip: true
},
{
label: '按钮方法',
prop: 'btnFunction',
tooltip: true
},
{
label: '按钮顺序',
prop: 'sort',
tooltip: true,
},
{
label: '备注',
prop: 'remark',
tooltip: true
},
{
label: '创建时间',
prop: 'createTime',
tooltip: true
},
// {
// label: '删除标识',
// prop: 'IsDelete',
// tooltip: true
// },
{
label: '按钮编号',
prop: 'code',
tooltip: true,
},
{
label: '按钮中文编码',
prop: 'nameCh',
tooltip: true,
},
{
label: '按钮英文编码',
prop: 'nameEn',
tooltip: true,
},
{
label: '按钮格式',
prop: 'styles',
tooltip: true,
},
{
label: '按钮图标',
prop: 'iconName',
tooltip: true
},
{
label: '按钮方法',
prop: 'btnFunction',
tooltip: true
},
{
label: '按钮顺序',
prop: 'sorts',
tooltip: true,
},
{
label: '备注',
prop: 'remark',
tooltip: true
},
{
label: '创建时间',
prop: 'createTime',
tooltip: true
},
// {
// label: '删除标识',
// prop: 'IsDelete',
// tooltip: true
// },
]
// 详情页面结构JSON
const formRow = [{
elCol: [{
label: '按钮编号',
prop: 'Code',
tag: 'elInput',
},
{
label: '中文名称',
prop: 'nameCN',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '英文名称',
prop: 'nameEN',
tag: 'elInput'
},
{
label: '调用方法',
prop: 'btnFunction',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '样式',
prop: 'style',
tag: 'elInput',
},
{
label: '图标',
prop: 'icoName',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '顺序',
prop: 'sort',
tag: 'elInput',
}
]
},
{
elCol: [{
label: '备注',
prop: 'remark',
tag: 'elInput',
span:24,
type:'textarea'
}
]
},
]
const roleOptions = [{
label: '超级管理员',
value: 1
},
{
label: '业务员',
value: 2
},
{
label: '管理员',
value: 3
},
{
label: '开发成员',
value: 4
},
{
label: '项目经理',
value: 5
},
{
label: '实施人员',
value: 6
},
{
label: '财务',
value: 7
},
{
label: '总经理',
value: 8
},
{
label: '副总',
value: 9
}
]
const rules = {
};
const formRow = [
{
elCol: [
{
label: "按钮编号",
prop: "code",
tag: "elInput",
},
{
label: "中文名称",
prop: "nameCh",
tag: "elInput",
},
],
},
{
elCol: [
{
label: "英文名称",
prop: "nameEn",
tag: "elInput",
},
{
label: "调用方法",
prop: "btnFunction",
tag: "elInput",
},
],
},
{
elCol: [
{
label: "样式",
prop: "styles",
tag: "elInput",
},
{
label: "图标",
prop: "iconName",
tag: "elInput",
},
],
},
{
elCol: [
{
label: "顺序",
prop: "sorts",
tag: "elInput",
},
],
},
// {
// elCol: [
// {
// label: "接口名称",
// prop: "actionName",
// tag: "elInput",
// span: 24,
// type: "textarea",
// },
// ],
// },
{
elCol: [
{
label: "备注",
prop: "remark",
tag: "elInput",
span: 24,
type: "textarea",
},
],
},
];
const roleOptions = [
{
label: "超级管理员",
value: 1,
},
{
label: "业务员",
value: 2,
},
{
label: "管理员",
value: 3,
},
{
label: "开发成员",
value: 4,
},
{
label: "项目经理",
value: 5,
},
{
label: "实施人员",
value: 6,
},
{
label: "财务",
value: 7,
},
{
label: "总经理",
value: 8,
},
{
label: "副总",
value: 9,
},
];
const rules = {};
export default {
formRow,
rules,
tableColumnJson
}
formRow,
rules,
tableColumnJson,
};

View File

@ -1,263 +1,277 @@
<template>
<div>
<div flex style="height: 100%;">
<base-layout title="菜单树" style="width:260px;" :bottonShow="false" :isPage="false" :mainColor="mainColor"
ref="treeLayout" :operateButtonSwitch="false">
<div slot="main">
<base-tree ref="baseTree" @handleNodeClick="handleNodeClick" :menuData="menuData"></base-tree>
</div>
</base-layout>
<div style="flex:1;">
<!-- <div style="">
<p>标准按钮</p>
<div flex-wrap="cross:centet;height: 100px;overflow: auto;">
<el-button v-for="(item,index) in standardList" :type="item.type?item.type:'primary'"
size="small" style="margin-left: 5px;margin-bottom: 10px;" @click="funNewClick(item)"
:key="index">
{{item.menuName}}
</el-button>
</div>
</div> -->
<base-layout title="按钮权限" ref="buttonLayout" :isPage="true" @onFuncBtn="getFuncBtn"
@pageChange="pageChange">
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
<base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
:tableHeight="tableHeight" :tableData="tableData" @radioChange="radioChange" :slotrow="true"
:tableColumn="tableColumn">
</base-table>
</div>
</base-layout>
</div>
</div>
<div>
<div flex style="height: 100%;">
<base-layout title="菜单树" style="width:260px;" :bottonShow="false" :isPage="false" :mainColor="mainColor"
ref="treeLayout" :operateButtonSwitch="false"
>
<div slot="main">
<base-tree ref="baseTree" @handleNodeClick="handleNodeClick" :menuData="menuData"></base-tree>
</div>
</base-layout>
<div style="flex:1;">
<!-- <div style="">
<p>标准按钮</p>
<div flex-wrap="cross:centet;height: 100px;overflow: auto;">
<el-button v-for="(item,index) in standardList" :type="item.type?item.type:'primary'"
size="small" style="margin-left: 5px;margin-bottom: 10px;" @click="funNewClick(item)"
:key="index">
{{item.menuName}}
</el-button>
</div>
</div> -->
<base-layout title="按钮权限" ref="buttonLayout" :isPage="true" @onFuncBtn="getFuncBtn"
@pageChange="pageChange"
>
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
<base-table ref="customtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
:tableHeight="tableHeight" :tableData="tableData" @radioChange="radioChange" :slotrow="true"
:tableColumn="tableColumn"
>
</base-table>
</div>
</base-layout>
</div>
</div>
<!-- 按钮权限弹窗 -->
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
class="userDialog" title="按钮权限" width="700px" top="10vh">
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" :formdata="formdata" @onSubmit="getSubmit">
</base-form>
</base-dialog>
</div>
<!-- 按钮权限弹窗 -->
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingsDialog"
class="userDialog" title="按钮权限" width="700px" top="10vh"
>
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" :formdata="formdata" @onSubmit="getSubmit">
</base-form>
</base-dialog>
</div>
</template>
<script>
import baseTable from "@/components/base/baseTable";
import baseLayout from "@/components/base/baseLayout";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import configData from "./configData";
import baseTable from '@/components/base/baseTable'
import baseLayout from '@/components/base/baseLayout'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'
import configData from './configData'
import {
GetMenuTree,
GetMenuTree
} from '@/api/apis/menuManage'
import {
buttonGetMenBillList,
buttonGetBillList,
buttonSaveData,
buttonDelData
buttonGetMenBillList,
buttonGetBillList,
buttonSaveData,
buttonDelData, buttonGetBillData
} from '@/api/apis/buttonList'
import { authApi } from '@/api/apis/auth'
export default {
name: "review",
components: {
baseLayout,
baseTable,
baseDialog,
baseTree,
baseForm
},
data() {
return {
radioIndex: false,
radioID: false,
mainColor: '#f8f8f8',
tabLoading: false,
standardList: [{
icon: 'el-icon-search',
menuName: '新增'
},],
tableData: [],
settingsDialog: false,
settingCenter: "left",
isFunBtn: true,
formRow: configData.formRow,
// buttonList: [{
// 'menuName': '',
// icon: 'el-icon-plus'
// },
// {
// 'menuName': '',
// icon: 'el-icon-edit'
// },
// {
// 'menuName': '',
// icon: 'el-icon-delete',
// type: 'danger'
// },
// ],
btnEvenName: '',
menuData: [],
formdata: {},
pageModel: {
limit: 20,
menuId: '',
page: 1,
Sequence: "",
SequenceName: ""
}
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
},
},
mounted() {
this.initPage()
},
methods: {
initPage() {
this.getMenuData()
this.getTableData()
},
async getMenuData() {
let res = await GetMenuTree({})
if (res.code == 1) {
let arr = JSON.parse(res.data[0])
this.menuData = JSON.parse(res.data[0])
}
},
//
handleNodeClick(data) {
this.pageModel.menuId = data.id
this.pageModel.page = 1
this.RefreshTable()
},
// table
RefreshTable() {
this.radioID = false
this.radioIndex = false
this.$nextTick(() => {
this.$refs.buttonLayout.pageClear()
this.$refs.customtable.clearRadioIndex()
})
this.getTableData()
},
pageChange(model) {
this.pageModel.page = model.page
this.pageModel.limit = model.limit
this.getTableData()
},
//
radioChange(val) {
this.radioIndex = val.index
this.radioID = val.id
},
getTableData() {
this.tabLoading = true
let params = {
...this.pageModel
}
this.tabLoading = true
this.tableData = []
buttonGetBillList(params).then(res => {
if (res.code == 1) {
this.tableData = res.data[1]
this.$nextTick(() => {
this.$refs.buttonLayout.setPageTotal(res.data[0])
})
}
this.tabLoading = false
})
this.tabLoading = false
},
btnadd() {
console.log("添加")
},
test() {
console.log("测试")
},
name: 'review',
components: {
baseLayout,
baseTable,
baseDialog,
baseTree,
baseForm
},
data() {
return {
radioIndex: false,
radioID: false,
mainColor: '#f8f8f8',
tabLoading: false,
standardList: [{
icon: 'el-icon-search',
menuName: '新增'
}],
tableData: [],
settingsDialog: false,
settingCenter: 'left',
isFunBtn: true,
formRow: configData.formRow,
// buttonList: [{
// 'menuName': '',
// icon: 'el-icon-plus'
// },
// {
// 'menuName': '',
// icon: 'el-icon-edit'
// },
// {
// 'menuName': '',
// icon: 'el-icon-delete',
// type: 'danger'
// },
// ],
btnEvenName: '',
menuData: [],
formdata: {},
pageModel: {
pageSize: 20,
menuId: '',
pageNum: 1
}
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
}
},
mounted() {
this.initPage()
},
methods: {
initPage() {
this.getMenuData()
this.getTableData()
},
async getMenuData() {
let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', { state: 0 })
if (res.status == 200) {
let arr = res.attribute[0]
this.menuData = res.attribute
}
},
//
handleNodeClick(data) {
this.pageModel.menuId = data.id
this.pageModel.pageNum = 1
this.RefreshTable()
},
// table
RefreshTable() {
this.radioID = false
this.radioIndex = false
this.$nextTick(() => {
this.$refs.buttonLayout.pageClear()
this.$refs.customtable.clearRadioIndex()
})
this.getTableData()
},
pageChange(model) {
this.pageModel.pageNum = model.page
this.pageModel.pageSize = model.limit
this.getTableData()
},
//
radioChange(val) {
this.radioIndex = val.index
this.radioID = val.id
},
async getTableData() {
this.tabLoading = true
let params = {
...this.pageModel
}
this.tabLoading = true
this.tableData = []
const res = await authApi('sysButtonConfigService', '', 'queryEntityPage', '', params)
if (res.status == 200) {
this.tableData = res.attribute.list
this.$nextTick(() => {
this.$refs.buttonLayout.setPageTotal(res.attribute.total)
})
this.tabLoading = false
}
},
//
async buttonGetBillData(id) {
const res = await authApi('sysButtonConfigService', '', 'getEntity', '', { id })
if (res.status == 200) {
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(res.attribute)
})
}
this.tabLoading = false
}
,
btnadd() {
console.log('添加')
}
,
test() {
console.log('测试')
}
,
//
getFuncBtn(btnEven) {
this.btnEvenName = btnEven.menuName
// let ftnFunction = 'test'
// this[ftnFunction]()
if (btnEven.menuName == '新增') {
if (!this.pageModel.menuId) {
this.$vmNews('请选择菜单')
return
}
// this.$refs.customForm.resetForm()
this.settingsDialog = true
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment({})
})
//
getFuncBtn(btnEven) {
this.btnEvenName = btnEven.menuName
// let ftnFunction = 'test'
// this[ftnFunction]()
if (btnEven.menuName == '新增') {
if (!this.pageModel.menuId) {
this.$vmNews('请选择菜单')
return
}
// this.$refs.customForm.resetForm()
this.settingsDialog = true
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment({})
})
}
if (btnEven.menuName == "编辑") {
if (this.radioID === false) {
this.$vmNews('请选择一条数据')
return
}
this.settingsDialog = true
this.formdata = this.tableData[this.radioIndex]
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(this.tableData[this.radioIndex])
})
}
if (btnEven.menuName == '删除') {
if (this.radioID === false) {
this.$vmNews('请选择一条数据')
return
}
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = {
id: this.radioID
}
buttonDelData(params).then(res => {
if (res.code == 1) {
this.$vmNews("删除成功", 'success')
this.pageModel.page = 1
this.RefreshTable()
}
})
}).catch(() => { });
}
if (btnEven.menuName == '编辑') {
if (this.radioID === false) {
this.$vmNews('请选择一条数据')
return
}
this.settingsDialog = true
this.buttonGetBillData(this.radioID)
}
if (btnEven.menuName == '删除') {
if (this.radioID === false) {
this.$vmNews('请选择一条数据')
return
}
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async() => {
let params = {
id: this.radioID
}
const res = await authApi('sysButtonConfigService', '', 'deleteEntity', '', params)
}
if (res.status == 200) {
this.$vmNews('删除成功', 'success')
this.pageModel.pageNum = 1
this.RefreshTable()
}
}).catch(() => {
})
},
}
//
getSubmit(data) {
let params = {
...data
}
if (this.btnEvenName == '编辑') {
delete params.createTime
delete params.index
} else {
params.id = 0
params.MenuID = this.pageModel.menuId
}
buttonSaveData({
dataMain: params
}).then(res => {
if (res.code == 1) {
this.$vmNews("保存成功", 'success')
this.pageModel.page = 1
this.RefreshTable()
this.settingsDialog = false
}
})
},
funNewClick(item) {
// this.$emit('onFuncBtn', item);
},
},
}
,
//
async getSubmit(data) {
let params = {
...data
}
let res
if (this.btnEvenName == '编辑') {
delete params.createTime
delete params.index
res = await authApi('sysButtonConfigService', '', 'updateEntity', '', params)
} else {
params.menuId = this.pageModel.menuId
res = await authApi('sysButtonConfigService', '', 'saveEntity', '', params)
}
if (res.status == 200) {
this.$vmNews('保存成功', 'success')
this.pageModel.pageNum = 1
this.RefreshTable()
this.settingsDialog = false
}
}
,
funNewClick(item) {
// this.$emit('onFuncBtn', item);
}
}
}
</script>

View File

@ -1,156 +1,173 @@
// 详情页面结构JSON
const formRow = [{
elCol: [{
label: '父节点',
prop: 'upIds',
tag: 'elTreeSelect',
options:[],
},
{
label: '等级',
prop: 'lvl',
disabled:true,
tag: 'elInputNumber',
},
]
},
{
elCol: [{
label: '菜单名称',
prop: 'title',
tag: 'elInput',
},
{
label: '菜单英文名称',
prop: 'name',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '文件路径',
prop: 'component',
tag: 'elInput',
},
{
label: '菜单图标',
prop: 'icon',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '页面路径',
prop: 'path',
tag: 'elInput',
},
{label: '菜单编码',
prop: 'code',
tag: 'elInput',
},
]
},
{
elCol: [
{
label: '打开方式',
prop: 'openType',
tag: 'elRadio',
options: [{
label: '菜单',
value: '1'
},{
label: '弹窗',
value: '2'
}
]
},
{
label: '菜单顺序',
prop: 'sorts',
tag: 'elInputNumber',
},
]
},
{
elCol: [{
label: '操作级别',
prop: 'level',
tag: 'elRadio',
options: [{
label: 'SuperAdmin',
value: '1'
},{
label: 'admin',
value: '2'
},{
label: 'user',
value: '3'
}
]
},
{
label: '显示',
prop: 'hidden',
tag: 'elRadio',
options: [{
label: '是',
value: 'false'
},{
label: '否',
value: 'true'
}
]
},
// {
// label: '操作权限',
// prop: 'telphone',
// tag: 'elRadio',
// options: [{
// label: '是',
// value: '1'
// },{
// label: '否',
// value: '2'
// }
// ]
// },
]
},
elCol: [{
label: '父节点',
prop: 'parentMenuName',
tag: 'elDialog',
span:24,
},
// {
// label: '菜单顺序',
// prop: 'mc_Sort',
// tag: 'elInput',
// rules:true
// // type:'number'
// },
]
},
{
elCol: [{
label: '菜单名称',
prop: 'menuName',
tag: 'elInput',
},
{
label: '菜单英文名称',
prop: 'menuEnglishName',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '菜单路径',
prop: 'route',
tag: 'elInput',
},
{
label: '菜单图标',
prop: 'menuIcon',
tag: 'elInput',
},
]
},
{
elCol: [{
label: '页面路径',
prop: 'menuPage',
tag: 'elInput',
},
]
},
{
elCol: [
{
label: '打开方式',
prop: 'showType',
tag: 'elRadio',
options: [{
label: '菜单',
value: "1"
},{
label: '弹窗',
value: "2"
}
]
},
{
label: '显示',
prop: 'visibles',
tag: 'elRadio',
options: [{
label: '是',
value: "1"
},{
label: '否',
value: "0",
}
]
},
]
},
// {
// elCol: [{
// label: '功能权限',
// prop: 'birthday',
// tag: 'elRadio',
// options: [{
// label: '是',
// value: '1'
// },{
// label: '否',
// value: '2'
// }
// ]
// },
// {
// label: '操作权限',
// prop: 'telphone',
// tag: 'elRadio',
// options: [{
// label: '是',
// value: '1'
// },{
// label: '否',
// value: '2'
// }
// ]
// },
// ]
// },
]
const roleOptions = [{
label: '超级管理员',
value: 1
},
{
label: '业务员',
value: 2
},
{
label: '管理员',
value: 3
},
{
label: '开发成员',
value: 4
},
{
label: '项目经理',
value: 5
},
{
label: '实施人员',
value: 6
},
{
label: '财务',
value: 7
},
{
label: '总经理',
value: 8
},
{
label: '副总',
value: 9
}
]
const rules = {
title: [{
required: true,
message: '请输入名称',
trigger: 'change'
}],
component: [{
required: true,
message: '请输入文件路径',
trigger: 'change'
}],
path: [{
required: true,
message: '请输入路由路径',
trigger: 'change'
}],
code: [{
required: true,
message: '请输入编码',
trigger: 'change'
}],
openType: [{
required: true,
message: '请选择打开方式',
trigger: 'change'
}],
villageId: [{
required: true,
message: '请选择村/社区名称',
trigger: 'change'
}],
registerTime: [{
required: true,
message: '请选择登记时间',
trigger: 'change'
}],
};
// 详情显示图片配置
const showImgJson = {
span: 24,
text: '现场照片',
field: 'photoUrls',
};
export default {
formRow,
rules
}
showImgJson,
formRow,
rules
}

View File

@ -3,81 +3,49 @@
* @date: 2022-09-09
-->
<template>
<div style="display: flex; height: 100%">
<base-layout
:showTitle="true"
:title="'菜单管理'"
style="width: 260px"
:queryShow="false"
:searchShow="false"
:mainHight="`calc(100% - 58px)`"
<div style="display: flex;height: 100%;">
<base-layout title="菜单管理" :operateButtonSwitch="false" style="width: 260px;">
<div slot="main" flex style="height:100%">
<div style="width: 100%;border-right:1px solid #dfe6ec;height:100%;overflow: auto;">
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :expandAll="true"
:showCheckbox="false" :menuData="menuData" @handleNodeClick="formClick">
</base-tree>
</div>
>
<div
slot="main"
style="
width: 100%;
border-right: 1px solid #dfe6ec;
height: 100%;
overflow-y: auto;
"
>
<base-tree
ref="baseTree"
:isCenter="false"
:isSaveBtn="false"
:Allshow="false"
:expandAll="true"
:showCheckbox="false"
:menuData="menuData"
@handleNodeClick="formClick"
:treeProps="treeProps"
:treeBodyHeight="'100%'"
>
</base-tree>
</div>
</base-layout>
<base-layout
title="菜单树编辑区"
:buttonList="buttonList"
@onFuncBtn="getFuncBtn"
style="flex: 1; width: calc(100% - 260px)"
:queryShow="false"
:searchShow="false"
:mainHight="`calc(100% - 58px)`"
>
<div slot="main" style="padding: 20px 12px; height: 300px">
<base-form
ref="customForm"
:formRow="formRow"
:isFunBtn="isFunBtn"
:rules="rules"
@selectTree="selectTree"
@onSubmit="getSubmit"
>
<base-layout title="菜单树编辑区" :defaultButtonSwitch="false" :buttonList="buttonList" @onFuncBtn="getFuncBtn"
style="flex:1;">
<div slot="main" style="padding:0 12px;height:300px">
<base-form ref="customForm" :formRow="formRow" :isFunBtn="isFunBtn" @elDialogClick="elDialogClick"
:formdata="ruleForm" @onSubmit="getSubmit">
</base-form>
</div>
</base-layout>
<base-organization ref="baseOrganization" :menuData="menuData" @handleConfirmClick="handleConfirmClick">
</base-organization>
</div>
</template>
<script>
import router from "@/router";
import baseLayout from "@/components/base/baseLayout";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseTreeclick from "@/components/base/baseTreeClick/index.vue";
import baseDialog from "@/components/base/BaseNewDialog";
import baseOrganization from "@/components/base/baseOrganization";
import router from '@/router'
import baseLayout from "@/components/base/baseLayout"
import baseForm from "@/components/base/baseNewForm/index.vue"
import baseTree from "@/components/base/BaseMenuTree/index.vue"
import baseTreeclick from "@/components/base/baseTreeClick/index.vue"
import baseDialog from "@/components/base/BaseNewDialog"
import baseOrganization from "@/components/base/baseOrganization"
import configData from "./configData";
import { GetOrganTree } from "@/api/apis/organization";
import {
GetOrganTree,
} from '@/api/apis/organization'
import {
GetMenuTree,
GetBillData,
MenuSaveData,
MenuDelData,
} from "@/api/apis/menuManage";
import { authApi } from "@/api/apis/auth";
MenuDelData
} from '@/api/apis/menuManage'
import { authApi } from '@/api/apis/auth'
export default {
components: {
baseLayout,
@ -85,200 +53,168 @@ export default {
baseForm,
baseTreeclick,
baseDialog,
baseOrganization,
baseOrganization
},
data() {
return {
buttonList: [
// treeHight: '350',
dialogVisible: false,
dialogTitle: '选择上级菜单',
leftTitle: '菜单树',
rightTitle: '菜单及上级菜单',
mainColor: '#f8f8f8 ',
buttonList: [{
menuName: '新增根节点',
icon: 'el-icon-plus'
},
{
menuName: "新增根节点",
icon: "el-icon-plus",
menuName: '新增子节点',
icon: 'el-icon-plus'
},
{
menuName: "新增子节点",
icon: "el-icon-plus",
},
{
menuName: "删除节点",
icon: "el-icon-delete",
type: "danger",
menuName: '删除节点',
icon: 'el-icon-delete',
type: 'danger'
},
],
delId: null,
delId: '',
menuData: [],
menuForm: {},
rules: configData.rules,
ruleForm: {},
rules: {},
formRow: configData.formRow,
isFunBtn: true,
treeProps: {
children: "children",
label: "label",
},
menuForm: {},
};
}
},
mounted() {
// this.$refs.baseTree.getMenuList()
this.initPage();
this.initPage()
},
methods: {
//
initPage() {
this.getMenuData();
this.$nextTick(() => {
this.resetForm();
});
},
resetForm() {
this.$refs.customForm.getField("lvl", 0);
this.$refs.customForm.getField("sorts", 0);
this.$refs.customForm.getField("hidden", "false");
this.$refs.customForm.getField("upIds", null);
// this.delId = ""
this.getMenuData()
},
//
async getMenuData() {
let res = await authApi("moduleService", "module", "queryTree");
this.menuData = res.attribute;
this.formRow[0].elCol[0].options = res.attribute;
let res = await authApi('sysMenuConfigService','','queryEntityTree','',{})
if (res.status == 200) {
let arr = res.attribute[0]
this.menuData = res.attribute
}
},
//
getFuncBtn(btnEven) {
if (btnEven.menuName == "新增根节点") {
if (!this.delId) {
this.$vmNews('请选择处理的信息')
return
}
if (btnEven.menuName == '新增根节点') {
let newRuleForm = {
parentMenuName: "",
parentMenuId: 0,
}
this.$nextTick(() => {
this.$refs.customForm.resetFields();
this.resetForm();
this.delId = null;
this.$refs.baseTree.setCurrentKey(null);
});
this.$refs.customForm.resetForm('ruleForm')
this.$refs.customForm.choiceAssignment(newRuleForm)
})
}
if (btnEven.menuName == "新增子节点") {
if (!this.delId) {
this.$tipConfirm("请选择左侧要操作的菜单节点");
return;
if (btnEven.menuName == '新增子节点') {
let newRuleForm = {
parentMenuName: this.ruleForm.menuName,
parentMenuId: this.ruleForm.id
}
if (this.menuForm.lvl == "2") {
this.$tipConfirm("最多允许添加三级菜单");
} else {
this.$nextTick(() => {
this.$refs.customForm.resetFields();
this.resetForm();
this.$refs.customForm.getField("upIds", this.delId);
this.$refs.customForm.getField(
"lvl",
JSON.parse(this.menuForm.lvl) + 1
);
this.delId = null;
console.log(newRuleForm,'newRuleForm')
this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm')
this.$refs.customForm.choiceAssignment(newRuleForm)
})
}
if (btnEven.menuName == '删除节点') {
this.$confirm('确认删除该菜单吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.menuDel()
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
}
}
if (btnEven.menuName == "删除节点") {
if (!this.delId) {
this.$tipConfirm("请选择左侧要操作的菜单节点");
return;
}
this.$delConfirm().then(() => {
this.menuDel();
});
}
},
async menuDel() {
let params = {
id: this.delId,
};
let res = await authApi(
"moduleService",
"module",
"delectModuleTree",
"",
params
);
if (res.status == "200") {
this.$vmNews("删除成功", "success");
this.menuForm = {};
this.getMenuData();
this.$refs.customForm.resetFields();
this.changeMenu();
id: this.delId
}
let res = await authApi('sysMenuConfigService','','deleteEntity','',params)
if (res.status == 200) {
this.$vmNews('删除成功', 'success')
this.ruleForm = {}
this.getMenuData()
this.$refs.customForm.choiceAssignment({})
}
},
//
async getDetail(id) {
let params = {
id: id,
};
let res = await authApi(
"moduleService",
"module",
"queryModule",
"",
params
);
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(res.attribute);
this.menuForm = res.attribute;
});
},
getSubmit(data) {
async function submitForm(delId) {
let params = {
...data,
label: data.title,
};
let res = await authApi(
"moduleService",
"module",
delId ? "updateModule" : "addModule",
"",
params
);
return res;
id: id
}
let res = await authApi('sysMenuConfigService','','getEntity','',params)
if (res.status == 200) {
console.log(res,'res')
this.ruleForm = res.attribute
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(res.attribute)
})
}
this.$refs.customForm.$refs["ruleForm"].validate((valid) => {
if (!valid) {
return;
} else {
submitForm(this.delId).then((res) => {
if (res.status == "200") {
this.$vmNews("保存成功", "success");
this.menuForm = {};
this.getMenuData();
this.$refs.customForm.resetFields();
this.changeMenu();
}
});
}
});
},
changeMenu() {
this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
// roles访
for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i];
router.addRoutes(accessRoutes); // 访
}
localStorage.setItem("routeList", JSON.stringify(accessRoutes));
});
async getSubmit(data) {
let params = {
...data
}
let res
if(params.id){
res = await authApi("sysMenuConfigService","","updateEntity","",params)
}else{
res = await authApi("sysMenuConfigService","","saveEntity","",params)
}
if (res.status == 200) {
this.$vmNews('保存成功', 'success')
this.ruleForm = {}
this.getMenuData()
this.$refs.customForm.choiceAssignment({})
this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
// roles访
for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i]
router.addRoutes(accessRoutes) // 访
}
localStorage.setItem('routeList', JSON.stringify(accessRoutes))
})
}
},
//
elDialogClick(row, index, indexRow) {
this.$refs.baseOrganization.dialogVisible = true
},
handleConfirmClick(val) {
console.log(val, "val");
this.ruleForm.parentMenuName = val.label
this.ruleForm.parentMenuId = val.id
this.$refs.customForm.incomingParameters(this.ruleForm)
this.$refs.baseOrganization.dialogVisible = false
},
formClick(data) {
this.delId = data.id;
this.getDetail(data.id);
},
selectTree(row) {
if (row.lvl == "2") {
// this.$refs.customForm.treeSelectClear()
this.$tipConfirm("最多允许添加三级菜单").then(() => {
this.$refs.customForm.getField("upIds", this.delId);
});
} else {
this.$refs.customForm.resetFields();
this.resetForm();
this.$refs.customForm.getField("lvl", JSON.parse(row.lvl) + 1);
this.menuForm = {};
}
this.delId = data.id
this.getDetail(data.id)
},
},
};
}
</script>
<style scoped>

View File

@ -1,104 +1,34 @@
<template>
<div v-loading="buttonLoading" style="height:500px;overflow: auto;">
<div flex="cross:center cross:baseline" flex-wrap v-for="(el,elIndex) in classifyButtonList"
class="buttonSetting">
<p style="width:100px;text-align: right;">{{el.label}}</p>
<div flex="cross:center" flex-wrap style="width: calc(100% - 200px);">
<p class="recordText" v-for="(item,index) in el.buttonList" @click="typeChange(item)" :key="index"
:class="{'active':item.type}">{{item.NameCN}}</p>
<p v-if="el.buttonList.length == 0" class="recordText">暂无按钮</p>
</div>
</div>
</div>
</template>
<script>
import {
GetAllButton,
} from '@/api/apis/jurisdiction'
export default {
// props:{
// ButtonList: {
// type: Array,
// default: () => {
// return []
// }
// },
// }
data(){
return{
// ButtonList:[],
classifyButtonList: [],
buttonPopedom:[],
buttonLoading:false
}
},
methods:{
async GetAllButtonList(ids, checkdata) {
this.buttonLoading = true
setTimeout(()=>{
this.buttonLoading = false
},3000)
this.classifyButtonList = []
let params = {
menuIDs: ids.join(",")
}
let res = await GetAllButton(params)
if (res.success === 'true') {
let allButtonList = res.data[0]
checkdata.forEach(el => {
el.buttonList = []
allButtonList.forEach(item => {
if (el.id == item.MenuID) {
el.buttonList.push(item)
}
})
})
this.classifyButtonList = checkdata
}
if(this.buttonPopedom.length > 0){
this.classifyButtonList.forEach(item=>{
item.buttonList.forEach(bItem=>{
this.buttonPopedom.forEach(el=>{
if(el == bItem.id){
bItem.type = true
}
})
})
})
}
this.buttonLoading = false
},
typeChange(item) {
item.type = !item.type
this.$forceUpdate()
},
}
}
</script>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
.buttonSetting{
margin-bottom: 5px;
.recordText {
border: 1px solid #fff;
width: 80px;
padding: 8px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin:3px;
}
.recordText.active {
background: $activeColor;
color: #fff;
}
}
</style>
//
const tableColumnJson = [
{
label: '用户账号',
prop: 'u_LoginCode',
tooltip: true,
},
{
label: '用户姓名',
prop: 'p_PersonName',
tooltip: true,
},
{
label: '所属部门',
prop: 'o_OrganName',
tooltip: true,
},
{
label: '手机号',
prop: 'p_Telphone',
tooltip: true
},
{
label: '状态',
prop: 'stateNote',
tooltip: true
},
]
export default {
tableColumnJson,
}

View File

@ -1,34 +1,34 @@
// 表头配置
const tableColumnJson = [
{
label: '用户账号',
prop: 'u_LoginCode',
tooltip: true,
},
{
label: '用户姓名',
prop: 'p_PersonName',
tooltip: true,
},
{
label: '所属部门',
prop: 'o_OrganName',
tooltip: true,
},
{
label: '手机号',
prop: 'p_Telphone',
tooltip: true
},
{
label: '状态',
prop: 'stateNote',
tooltip: true
},
{
label: '用户账号',
prop: 'loginCode',
tooltip: true,
},
{
label: '用户姓名',
prop: 'personName',
tooltip: true,
},
{
label: '所属部门',
prop: 'organName',
tooltip: true,
},
{
label: '手机号',
prop: 'mobilePhone',
tooltip: true
},
{
label: '状态',
prop: 'state',
tooltip: true
},
]
export default {
tableColumnJson,
tableColumnJson,
}

View File

@ -0,0 +1,126 @@
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
:show-header="false"
>
<el-table-column prop="billName" label="单据" width="120">
</el-table-column>
<el-table-column prop="dataList" label="字段">
<template slot-scope="scope">
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
"
v-show="
scope.row.dataList.length != 0 &&
scope.row.dataList.length == scope.row.buttonList.length
"
@click="cancellation(scope.row)"
></i>
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
color: #808080;
"
v-show="
scope.row.dataList.length != 0 &&
scope.row.dataList.length != scope.row.buttonList.length
"
@click="selectAllButton(scope.row)"
></i>
<el-checkbox-group v-model="scope.row.buttonList" size="small">
<el-checkbox
v-for="item in scope.row.dataList"
:label="item.id"
:key="item.id"
>{{ item.name }}</el-checkbox
>
</el-checkbox-group>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { GetAllBilldata, GetAllBillDataPepedom } from "@/api/apis/jurisdiction";
export default {
data() {
return {
tableData: [],
selectedList: [],
};
},
created() {
this.init();
},
components: {},
computed: {},
mounted() {},
beforeUpdate() {
this.handleTabClick();
},
methods: {
selectAllButton(item) {
let data = [];
item.dataList.forEach((el) => {
data.push(el.id);
});
item.buttonList = data;
},
cancellation(item) {
item.buttonList = [];
},
handleTabClick() {
this.$nextTick(() => {
this.$refs.multipleTable && this.$refs.multipleTable.doLayout();
});
},
async init() {
let data = [];
const res = await GetAllBilldata({});
if (res.code == 1) {
data = res.data[0];
data.forEach((el) => {
el.dataList = [];
el.buttonList = [];
});
}
const item = await GetAllBillDataPepedom({});
if (item.code == 1) {
data.forEach((el) => {
item.data[0].forEach((e) => {
if (el.billKindID == e.billKindID) {
el.dataList.push(e);
}
});
this.selectedList.forEach((add) => {
if (el.billKindID == add.dp_billKindID) {
el.buttonList = add.dp_popeList.split(",");
}
});
});
}
this.tableData = data;
},
},
};
</script>
<style scoped lang="scss"></style>

View File

@ -1,114 +1,114 @@
<template>
<div >
<div v-for="(item, index) in dataList" :key="index" class="dataSetting" flex>
<p style="width: 100px;text-align: right;">{{item.billName}}</p>
<div flex flex-wrap style="margin-left: 10px;width: calc(100% - 150px);">
<p class="recordText" v-for="el in item.buttonList" :class="{'active':el.type}" @click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</div>
<div >
<div v-for="(item, index) in dataList" :key="index" class="dataSetting" flex>
<p style="width: 100px;text-align: right;">{{item.billName}}</p>
<div flex flex-wrap style="margin-left: 10px;width: calc(100% - 150px);">
<p class="recordText" v-for="(el,index) in item.buttonList" :key="index" :class="{'active':el.type}" @click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</div>
</template>
<script>
import {
GetAllBillDataPepedom,
GetAllBilldata
} from '@/api/apis/jurisdiction.js'
export default {
name: "dataSetting",
data() {
return {
dataList: [],
dataPepedom: [],
dataSet: [],
activeList:[],
}
},
created() {
// this.inPage()
},
import {
GetAllBillDataPepedom,
GetAllBilldata
} from '@/api/apis/jurisdiction.js'
export default {
name: "dataSetting",
data() {
return {
dataList: [],
dataPepedom: [],
dataSet: [],
activeList:[],
}
},
created() {
// this.inPage()
},
methods: {
inPage() {
let dataPepedom = this.getDataPepedom()
let dataSet = this.getDataSet()
Promise.all([dataSet, dataPepedom]).then((value) => {
this.getDataList(value[0], value[1])
})
},
methods: {
inPage() {
let dataPepedom = this.getDataPepedom()
let dataSet = this.getDataSet()
Promise.all([dataSet, dataPepedom]).then((value) => {
this.getDataList(value[0], value[1])
})
},
async getDataPepedom() {
let res = await GetAllBillDataPepedom()
if (res.code == 1) {
return res.data[0]
}
},
async getDataSet() {
let res = await GetAllBilldata()
if (res.code == 1) {
res.data[0].forEach(el=>{
el.buttonList = []
})
return res.data[0]
}
},
getDataList(dataSet, dataPepedom) {
this.dataList = []
let arr = []
dataSet.forEach((el, index) => {
dataPepedom.forEach((item) => {
if (el.billKindID == item.billKindID) {
el.buttonList.push(item)
}
})
})
this.dataList = dataSet
if(this.activeList.length > 0){
this.dataList.forEach(item=>{
item.buttonList.forEach(bItem=>{
this.activeList.forEach(el=>{
if(el == bItem.id){
bItem.type = true
}
})
})
})
}
},
typeChange(item) {
item.type = !item.type
this.$forceUpdate()
},
}
}
async getDataPepedom() {
let res = await GetAllBillDataPepedom()
if (res.code == 1) {
return res.data[0]
}
},
async getDataSet() {
let res = await GetAllBilldata()
if (res.code == 1) {
res.data[0].forEach(el=>{
el.buttonList = []
})
return res.data[0]
}
},
getDataList(dataSet, dataPepedom) {
this.dataList = []
let arr = []
dataSet.forEach((el, index) => {
dataPepedom.forEach((item) => {
if (el.billKindID == item.billKindID) {
el.buttonList.push(item)
}
})
})
this.dataList = dataSet
if(this.activeList.length > 0){
this.dataList.forEach(item=>{
item.buttonList.forEach(bItem=>{
this.activeList.forEach(el=>{
if(el == bItem.id){
bItem.type = true
}
})
})
})
}
},
typeChange(item) {
item.type = !item.type
this.$forceUpdate()
},
}
}
</script>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
$activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on {
/* color: #00aa00; */
color: $activeColor;
}
.el-icon-star-on {
/* color: #00aa00; */
color: $activeColor;
}
.dataSetting {
color: #000;
.recordText {
border: 1px solid #fff;
width: 80px;
padding: 8px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin:3px;
}
.recordText.active {
background: $activeColor;
color: #fff;
}
}
</style>
.dataSetting {
color: #000;
.recordText {
border: 1px solid #fff;
width: 80px;
padding: 8px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin:3px;
}
.recordText.active {
background: $activeColor;
color: #fff;
}
}
</style>

View File

@ -1,460 +1,525 @@
<template>
<div>
<div style="display: flex;height: 100%;">
<base-layout title="组织机构" ref="organLayout" style="width: 20%;" :bottonShow="false" :isPage="false"
:operateButtonSwitch="false" :mainColor="mainColor">
<div slot="main" style="height: 100%;">
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
:menuData="orangData" @handleNodeClick="orangClick"></base-tree>
</div>
</base-layout>
<base-layout title="用户信息" ref="userLayout" @pageChange="pageChange" style="width: 80%;" :buttonList="buttonList"
:defaultButtonSwitch="false" @onFuncBtn="getFuncBtn" :isPage="true">
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
<base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
@radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
:tableColumn="tableColumn">
<div>
<div style="display: flex; height: 100%">
<base-layout title="组织机构" ref="organLayout" style="width: 20%" :bottonShow="false" :isPage="false"
:operateButtonSwitch="false" :mainColor="mainColor"
>
<div slot="main" style="height: 100%">
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
:menuData="orangData" @handleNodeClick="orangClick"
></base-tree>
</div>
</base-layout>
<base-layout title="用户信息" ref="userLayout" @pageChange="pageChange" style="width: 80%"
:buttonList="buttonList" :defaultButtonSwitch="false" @onFuncBtn="getFuncBtn" :isPage="true"
>
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%">
<base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
@radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
:tableColumn="tableColumn"
>
</base-table>
</div>
</base-layout>
</div>
<right-dialog ref="rightDialog" :menuData="menuData" v-if="permissionPopup"></right-dialog>
</base-table>
</div>
</base-layout>
</div>
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingDialog"
class="userDialog" title="权限设置" width="50vw" top="5vh" :footerShow="true"
@handleConfirmClick="settingConfirmClick">
<base-layout :showTitle="false" :defaultButtonSwitch="false" >
<div slot="main">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="菜单权限" name="jurisdictionSetting">
<jurisdiction-Setting ref="jurisdictionSetting" :menuData="menuData"></jurisdiction-Setting>
</el-tab-pane>
<el-tab-pane label="按钮权限" name="buttonSetting">
<button-setting ref="buttonSetting"></button-setting>
</el-tab-pane>
<el-tab-pane label="数据权限" name="dataSetting">
<data-setting ref="dataSetting"></data-setting>
</el-tab-pane>
</el-tabs>
</div>
</base-layout>
</base-dialog>
</div>
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="settingDialog"
class="userDialog" title="权限设置" width="50vw" top="5vh" :footerShow="true"
@handleConfirmClick="settingConfirmClick"
>
<base-layout :showTitle="false" :defaultButtonSwitch="false">
<div slot="main">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" :before-leave="beforeLeave">
<el-tab-pane label="菜单权限" name="jurisdictionSetting">
<jurisdiction-Setting ref="jurisdictionSetting" :menuData="menuData"></jurisdiction-Setting>
</el-tab-pane>
<el-tab-pane label="按钮权限" name="buttonSetting">
<button-setting ref="buttonSetting"></button-setting>
</el-tab-pane>
<el-tab-pane label="数据权限" name="dataSetting">
<data-setting ref="dataSetting"></data-setting>
</el-tab-pane>
</el-tabs>
</div>
</base-layout>
</base-dialog>
</div>
</template>
<script>
import router from '@/router'
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import jurisdictionSetting from "./jurisdictionSetting.vue";
import buttonSetting from "./buttonSetting.vue";
import dataSetting from "./dataSetting.vue"
import configData from "./configData";
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import rightDialog from './rightDialog'
import jurisdictionSetting from './jurisdictionSetting.vue'
import buttonSetting from './buttonSetting.vue'
import dataSetting from './dataSetting.vue'
import configData from './configData'
import { getCompanyId } from '@/utils/auth'
import { GetMenuTree } from '@/api/apis/menuManage'
import { userGetBillList } from '@/api/apis/userInformation'
import { GetOrganTree } from '@/api/apis/organization'
import {
GetMenuTree,
} from '@/api/apis/menuManage'
import {
userGetBillList,
} from '@/api/apis/userInformation'
import {
GetOrganTree,
} from '@/api/apis/organization'
import {
GetPppedomSet,
GetAllButton,
GetAllBillDataPepedom,
GetAllBilldata,
PopedomSaveData
GetPppedomSet,
GetMenuButton,
GetAllButton,
GetAllBillDataPepedom,
GetAllBilldata,
PopedomSaveData
} from '@/api/apis/jurisdiction'
import { authApi } from '@/api/apis/auth'
export default {
name: "review",
components: {
buttonSetting,
dataSetting,
baseLayout,
baseTable,
baseDialog,
baseForm,
baseTree,
jurisdictionSetting
},
data() {
return {
activeName: 'jurisdictionSetting',
radioIndex: false,
userRadioId: false,
settingDialog: false,
// tableHeight: 'calc(100vh - 227px)',
mainColor: '#f8f8f8',
tabLoading: false,
tableData: [],
//
menuData: [],
orangData: [],
buttonList: [{
'icon': 'el-icon-plus',
'menuName': '权限设置',
btnFunciton: 'setting'
},],
pageModel: {
page: 1,
limit: 20,
departmentID: '',
},
defaultProps: {
children: 'children',
label: 'label'
},
buttonArray: [],
allButtonList: [],
menuIDs: [],
menuList: [],
menuPopedom: []
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
},
},
watch: {
settingDialog: {
deep: true,
handler(newValue, oldValue) {
if (newValue == false) {
this.$refs.dataSetting.dataList = []
this.$refs.jurisdictionSetting.$refs.menuTree.$refs.elTree.setCheckedKeys([])
this.$refs.buttonSetting.classifyButtonList = []
}
}
}
},
created() { },
onShow() { },
mounted() {
this.initPage()
},
filters: {
},
methods: {
beforeLeave(activeName, oldActiveName) {
if(oldActiveName == 'jurisdictionSetting'){
this.menuPopedom = this.$refs.jurisdictionSetting.menuPopedom
this.checkdata = this.$refs.jurisdictionSetting.checkdata
}
if (oldActiveName == 'jurisdictionSetting' && activeName == "buttonSetting") {
if (this.menuPopedom.length == 0) {
this.$vmNews("当前用户未分配菜单权限")
return false
}
}
if (oldActiveName == 'dataSetting' && activeName == "buttonSetting") {
// return false
}
},
// tab
handleClick(tab, event) {
if (this.activeName == 'buttonSetting') {
this.checkdata = this.$refs.jurisdictionSetting.checkdata
this.$refs.buttonSetting.GetAllButtonList(this.menuPopedom, this.checkdata)
}
if (this.activeName == 'dataSetting') {
this.$refs.dataSetting.inPage()
}
},
//
getMenuIDs(menuData) {
menuData.forEach(el => {
if (el.type) {
this.menuList.push(el)
this.menuIDs.push(el.id)
}
if (el.children != null && el.children && el.children.length) {
this.getMenuIDs(el.children)
}
})
},
//
initPage() {
this.getTableList()
this.getOrganList()
},
//
async getMenuData() {
let res = await GetMenuTree({})
if (res.code == 1) {
let arr = JSON.parse(res.data[0])
this.menuData = JSON.parse(res.data[0])
this.changeMenu(this.menuData, 0)
// this.getButtonArray(this.menuData)
}
},
//
changeMenu(data, num) {
let level = num
level = level + 1
data.forEach(el => {
el.buttonList = []
el.type = false
// el.level = level
if (el.children != null && el.children && el.children.length) {
this.changeMenu(el.children, level)
}
})
},
//
async getTableList() {
this.tabLoading = true
this.tableData = []
let params = {
...this.pageModel
}
let res = await userGetBillList(params)
if (res.code === 1) {
this.tableData = res.data[1]
this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.setPageTotal(res.data[0])
})
this.tabLoading = false
}
},
getButtonArray(menuData) {
menuData.forEach((el, index) => {
this.allButtonList.forEach(item => {
if (el.id == item.MenuID) {
item.active = false
el.buttonList.push(item)
}
})
if (el.children != null && el.children && el.children.length) {
this.getButtonArray(el.children)
}
})
},
//
userRadioChange(val) {
this.radioIndex = val.index
this.userRadioId = val.u_UserID
},
//
async getOrganList() {
this.$refs.baseTree.treeLoading = true
setTimeout(() => {
this.$refs.baseTree.treeLoading = false
}, 3000)
let params = {
// CompanyID: "46"
CompanyID: this.$store.state.user.companyID ? this.$store.state.user.companyID : getCompanyId()
}
let res = await GetOrganTree(params)
if (res.success === 'true') {
this.orangData = JSON.parse(res.data[0])
this.$refs.baseTree.treeLoading = false
}
},
//
orangClick(data) {
this.pageModel.departmentID = data.id
this.resetTable()
// this.result()
},
resetTable() {
this.pageModel.page = 1
this.userRadioId = false
this.radioIndex = false
this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.pageClear()
})
this.getTableList()
},
//
getFuncBtn(btnEven) {
if (this.radioIndex === false) {
this.$vmNews("请选择一条数据")
return
}
this[btnEven.btnFunciton]()
},
setting() {
name: 'review',
components: {
buttonSetting,
dataSetting,
baseLayout,
baseTable,
baseDialog,
baseForm,
baseTree,
jurisdictionSetting,
rightDialog
},
data() {
return {
activeName: 'jurisdictionSetting',
radioIndex: false,
userRadioId: false,
settingDialog: false,
// tableHeight: 'calc(100vh - 227px)',
mainColor: '#f8f8f8',
tabLoading: false,
tableData: [],
//
menuData: [],
orangData: [],
buttonList: [
{
icon: 'el-icon-plus',
menuName: '权限设置',
btnFunciton: 'setting'
}
],
pageModel: {
pageNum: 1,
pageSize: 20,
organId: ''
},
defaultProps: {
children: 'children',
label: 'label'
},
buttonArray: [],
allButtonList: [],
menuIDs: [],
menuList: [],
menuPopedom: [],
permissionPopup: false
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
}
},
watch: {
settingDialog: {
deep: true,
handler(newValue, oldValue) {
if (newValue == false) {
this.$refs.dataSetting.dataList = []
this.$refs.jurisdictionSetting.$refs.menuTree.$refs.elTree.setCheckedKeys(
[]
)
this.$refs.buttonSetting.classifyButtonList = []
}
}
}
},
created() {
},
onShow() {
},
mounted() {
this.initPage()
this.getMenuData()
},
filters: {},
methods: {
beforeLeave(activeName, oldActiveName) {
if (oldActiveName == 'jurisdictionSetting') {
this.menuPopedom = this.$refs.jurisdictionSetting.menuPopedom
this.checkdata = this.$refs.jurisdictionSetting.checkdata
}
if (
oldActiveName == 'jurisdictionSetting' &&
activeName == 'buttonSetting'
) {
if (this.menuPopedom.length == 0) {
this.$vmNews('当前用户未分配菜单权限')
return false
}
}
if (oldActiveName == 'dataSetting' && activeName == 'buttonSetting') {
// return false
}
},
// tab
handleClick(tab, event) {
if (this.activeName == 'buttonSetting') {
this.checkdata = this.$refs.jurisdictionSetting.checkdata
this.$refs.buttonSetting.GetAllButtonList(
this.menuPopedom,
this.checkdata
)
}
if (this.activeName == 'dataSetting') {
this.$refs.dataSetting.inPage()
}
},
//
getMenuIDs(menuData) {
menuData.forEach((el) => {
if (el.type) {
this.menuList.push(el)
this.menuIDs.push(el.id)
}
if (el.children != null && el.children && el.children.length) {
this.getMenuIDs(el.children)
}
})
},
//
initPage() {
this.getTableList()
this.getOrganList()
},
//
async getMenuData() {
// let res = await GetMenuButton({});
let res = await authApi('sysMenuConfigService', '', 'queryEntityTree', '', { state: 0 })
if (res.status == 200) {
let arr = res.attribute
this.menuData = res.attribute
this.changeMenu(this.menuData, 0)
// this.getButtonArray(this.menuData)
}
},
//
changeMenu(data, num) {
let level = num
level = level + 1
data.forEach((el) => {
el.buttonList = []
el.type = false
if (el.children != null && el.children && el.children.length) {
this.changeMenu(el.children, level)
}
})
},
addToButtonList(arr, newArr) {
newArr.forEach((newItem) => {
this.addToButtonListRecursive(
arr,
newItem.op_MenuID,
newItem.op_OperateKindList
)
})
return arr
},
addToButtonListRecursive(arr, targetId, operateKindList) {
for (let i = 0; i < arr.length; i++) {
const item = arr[i]
if (item.id == targetId) {
item.buttonList = operateKindList.split(',')
return item
}
if (item.children && item.children.length > 0) {
this.addToButtonListRecursive(
item.children,
targetId,
operateKindList
)
}
}
},
//
async getTableList() {
this.tabLoading = true
this.tableData = []
let params = {
...this.pageModel
}
let res = await authApi('sysUserService', '', 'queryEntityPage', '', params)
if (res.status == 200) {
this.tableData = res.attribute.list
this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.setPageTotal(res.attribute.total)
})
this.tabLoading = false
}
},
getButtonArray(menuData) {
menuData.forEach((el, index) => {
this.allButtonList.forEach((item) => {
if (el.id == item.MenuID) {
item.active = false
el.buttonList.push(item)
}
})
if (el.children != null && el.children && el.children.length) {
this.getButtonArray(el.children)
}
})
},
//
userRadioChange(val) {
this.radioIndex = val.index
this.userRadioId = val.id
},
//
async getOrganList() {
this.$refs.baseTree.treeLoading = true
setTimeout(() => {
this.$refs.baseTree.treeLoading = false
}, 3000)
const res = await authApi('sysOrganService', '', 'queryEntityTree', '', { state: 0 })
// let res = await GetOrganTree(params);
if (res.status == 200) {
this.orangData = res.attribute
this.$refs.baseTree.treeLoading = false
}
},
//
orangClick(data) {
this.pageModel.organId = data.id
this.resetTable()
// this.result()
},
resetTable() {
this.pageModel.pageNum = 1
this.userRadioId = false
this.radioIndex = false
this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.pageClear()
})
this.getTableList()
},
//
getFuncBtn(btnEven) {
if (this.radioIndex === false) {
this.$vmNews('请选择一条数据')
return
}
this[btnEven.btnFunciton]()
},
//
async setting() {
this.getMenuData()
this.settingDialog = true
this.activeName = "jurisdictionSetting"
this.GetPppedomData()
this.permissionPopup = true
this.$nextTick(async() => {
this.$refs.rightDialog.drawer = true
this.$refs.rightDialog.buttonLoading = true
let params = {
id: this.userRadioId,
kindId: 1
}
const res = await authApi('sysUserService', '', 'jurisdiction', '',params)
if (res.status == 200) {
console.log(res,'进来了')
const data = res.attribute
// let menuIDs =
// data[0].length > 0 ? data[0][0].fp_MenuIdList.split(',') : []
// let echo = data[1].length > 0 ? data[1] : []
// let dataPermissions = data[2].length > 0 ? data[2] : []
// this.$refs.rightDialog.$refs.dataPermissions.selectedList =
// dataPermissions
// this.$refs.rightDialog.$refs.layOutPermissions.selectedList = res
// .data[3][0]
// ? res.data[3][0].widgetList
// : ''
// this.$refs.rightDialog.exhibitList(menuIDs, echo, this.userRadioId)
this.$refs.rightDialog.exhibitList(res.attribute.menvVoList,res.attribute.homeList,this.userRadioId)
}
})
},
// setting() {
// this.settingDialog = true
// this.activeName = "jurisdictionSetting"
// this.GetPppedomData()
// },
async GetPppedomData() {
let params = {
objectID: this.userRadioId,
kindid: 1
}
},
async GetPppedomData() {
let params = {
objectID: this.userRadioId,
kindid: 1
}
let res = await GetPppedomSet(params)
this.$refs.jurisdictionSetting.menuLoading = true
setTimeout(() => {
this.$refs.jurisdictionSetting.menuLoading = false
}, 3000)
if (res.code == 1) {
const data = res.data
let menuIDs = data[0].length > 0 ? data[0][0].fp_MenuIdList.split(',') : []
this.$refs.jurisdictionSetting.$refs.menuTree.selectData = menuIDs
this.$refs.jurisdictionSetting.$refs.menuTree.checkChange(menuIDs)
let buttonPopedom = this.getbuttonPopedomList(res.data[1])
this.$refs.buttonSetting.buttonPopedom = buttonPopedom
let activeList = this.getActiveList(res.data[2])
this.$refs.dataSetting.activeList = activeList
this.$refs.jurisdictionSetting.menuLoading = false
// selectData
}
},
getActiveList(data) {
let array = []
data.forEach(el => {
el.dp_popeList.split(',').forEach(item => {
array.push(item)
})
})
return array
},
getbuttonPopedomList(data) {
let array = []
data.forEach(el => {
el.op_OperateKindList.split(',').forEach(item => {
array.push(item)
})
})
return array
},
pageChange(model) {
this.pageModel.page = model.page
this.pageModel.limit = model.limit
this.getTableList()
},
settingConfirmClick() {
let menuPopedom = this.$refs.jurisdictionSetting.menuPopedom.join(",")
let buttonPopedom = this.getButtonPopedom(this.$refs.buttonSetting.classifyButtonList)
let dataPopedom = this.getDataPopedom(this.$refs.dataSetting.dataList)
let params = {
kindid: 1,
objectID: this.userRadioId,
menuPopedom: menuPopedom,
buttonPopedom: buttonPopedom,
dataPopedom: dataPopedom,
}
this.saveData(params)
},
async saveData(params) {
let res = await PopedomSaveData(params)
if (res.code == 1) {
this.$vmNews("保存成功", 'success')
this.activeName = "jurisdictionSetting"
this.settingDialog = false
this.$store.dispatch('GenerateRoutes').then(accessRoutes => {
// roles访
for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i]
router.addRoutes(accessRoutes) // 访
}
localStorage.setItem('routeList', JSON.stringify(accessRoutes))
})
}
},
getDataPopedom(dataPopedom) {
let array = []
dataPopedom.forEach(el => {
el.dp_popeList = []
el.buttonList.forEach(item => {
if (item.type) {
el.dp_popeList.push(item.id)
}
})
})
dataPopedom.forEach(el => {
if (el.dp_popeList.length > 0) {
let params = {
dp_billKindID: el.billKindID,
dp_popeList: el.dp_popeList.join(',')
}
array.push(params)
}
})
return array
},
getButtonPopedom(buttonPopedom) {
let array = []
// let op_OperateKindList = []
buttonPopedom.forEach(el => {
el.op_MenuID = el.id
el.op_OperateKindList = []
el.buttonList.forEach(item => {
if (item.type) {
el.op_OperateKindList.push(item.id)
}
})
})
buttonPopedom.forEach(el => {
if (el.op_OperateKindList.length > 0) {
let params = {
op_MenuID: el.op_MenuID,
op_OperateKindList: el.op_OperateKindList.join(',')
}
array.push(params)
}
})
return array
},
},
let res = await GetPppedomSet(params)
this.$refs.jurisdictionSetting.menuLoading = true
setTimeout(() => {
this.$refs.jurisdictionSetting.menuLoading = false
}, 3000)
if (res.code == 1) {
const data = res.data
let menuIDs =
data[0].length > 0 ? data[0][0].fp_MenuIdList.split(',') : []
this.$refs.jurisdictionSetting.$refs.menuTree.selectData = menuIDs
this.$refs.jurisdictionSetting.$refs.menuTree.checkChange(menuIDs)
let buttonPopedom = this.getbuttonPopedomList(res.data[1])
this.$refs.buttonSetting.buttonPopedom = buttonPopedom
let activeList = this.getActiveList(res.data[2])
this.$refs.dataSetting.activeList = activeList
this.$refs.jurisdictionSetting.menuLoading = false
// selectData
}
},
getActiveList(data) {
let array = []
data.forEach((el) => {
el.dp_popeList.split(',').forEach((item) => {
array.push(item)
})
})
return array
},
getbuttonPopedomList(data) {
let array = []
data.forEach((el) => {
el.op_OperateKindList.split(',').forEach((item) => {
array.push(item)
})
})
return array
},
pageChange(model) {
this.pageModel.pageNum = model.page
this.pageModel.pageSize = model.limit
this.getTableList()
},
settingConfirmClick() {
let menuPopedom = this.$refs.jurisdictionSetting.menuPopedom.join(',')
let buttonPopedom = this.getButtonPopedom(
this.$refs.buttonSetting.classifyButtonList
)
let dataPopedom = this.getDataPopedom(this.$refs.dataSetting.dataList)
let params = {
kindid: 1,
objectID: this.userRadioId,
menuPopedom: menuPopedom,
buttonPopedom: buttonPopedom,
dataPopedom: dataPopedom
}
this.saveData(params)
},
async saveData(params) {
let res = await PopedomSaveData(params)
if (res.code == 1) {
this.$vmNews('保存成功', 'success')
this.activeName = 'jurisdictionSetting'
this.settingDialog = false
this.$store.dispatch('GenerateRoutes').then((accessRoutes) => {
// roles访
for (let i = 0, length = accessRoutes.length; i < length; i += 1) {
const element = accessRoutes[i]
router.addRoutes(accessRoutes) // 访
}
localStorage.setItem('routeList', JSON.stringify(accessRoutes))
})
}
},
getDataPopedom(dataPopedom) {
let array = []
dataPopedom.forEach((el) => {
el.dp_popeList = []
el.buttonList.forEach((item) => {
if (item.type) {
el.dp_popeList.push(item.id)
}
})
})
dataPopedom.forEach((el) => {
if (el.dp_popeList.length > 0) {
let params = {
dp_billKindID: el.billKindID,
dp_popeList: el.dp_popeList.join(',')
}
array.push(params)
}
})
return array
},
getButtonPopedom(buttonPopedom) {
let array = []
// let op_OperateKindList = []
buttonPopedom.forEach((el) => {
el.op_MenuID = el.id
el.op_OperateKindList = []
el.buttonList.forEach((item) => {
if (item.type) {
el.op_OperateKindList.push(item.id)
}
})
})
buttonPopedom.forEach((el) => {
if (el.op_OperateKindList.length > 0) {
let params = {
op_MenuID: el.op_MenuID,
op_OperateKindList: el.op_OperateKindList.join(',')
}
array.push(params)
}
})
return array
}
}
}
</script>
<style scoped>
>>>.el-dialog__body {
padding: 0 25px;
<style scoped lang="scss">
> > > .el-dialog__body {
padding: 0 25px;
}
</style>
<style scoped lang='scss'>
<style scoped lang="scss">
.roleName {
padding: 10px 0;
width: 90px;
border: 2px solid #f2f2f2;
background-color: #f2f2f2;
margin: 0px 10px 10px 0px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 0 2px #f2f2f2;
border-radius: 5px;
padding: 10px 0;
width: 90px;
border: 2px solid #f2f2f2;
background-color: #f2f2f2;
margin: 0px 10px 10px 0px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 0 2px #f2f2f2;
border-radius: 5px;
}
.active {
background-color: #00a490;
border: 2px solid #ffffff;
color: white;
box-shadow: 0 0 0 2px #00a490;
background-color: #00a490;
border: 2px solid #ffffff;
color: white;
box-shadow: 0 0 0 2px #00a490;
}
.bigTitle {
padding-bottom: 10px;
margin: 10px 0;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin: 10px 0;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
.organizationBody {
display: flex;
justify-content: space-evenly;
background-color: #f2f3f4;
padding: 10px
display: flex;
justify-content: space-evenly;
background-color: #f2f3f4;
padding: 10px;
}
</style>

View File

@ -1,13 +1,13 @@
<template>
<div flex v-loading="menuLoading">
<base-layout ref="layout" :bodyHight="treeHight" :operateButtonSwitch="false">
<div slot="main">
<base-tree ref="menuTree" :isCenter="false" :showCheckbox="true" :menuData="menuData" :setting="true"
@checkChange="checkChange">
</base-tree>
</div>
</base-layout>
</div>
<div flex v-loading="menuLoading">
<base-layout ref="layout" :bodyHight="treeHight" :operateButtonSwitch="false">
<div slot="main">
<base-tree ref="menuTree" :isCenter="false" :showCheckbox="true" :menuData="menuData" :setting="true"
@checkChange="checkChange">
</base-tree>
</div>
</base-layout>
</div>
</template>
<script>
@ -16,102 +16,102 @@ import baseTable from "@/components/base/baseTable";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import configData from "./configData";
import {
GetPppedomSet,
GetAllButton,
GetPppedomSet,
GetAllButton,
} from '@/api/apis/jurisdiction'
export default {
name: "jurisdictionSetting",
components: {
baseLayout,
baseTable,
baseTree
},
props: {
objectID: {
type: [Number, String, Boolean],
default: false
},
menuData: {
type: Array,
default: []
},
name: "jurisdictionSetting",
components: {
baseLayout,
baseTable,
baseTree
},
props: {
objectID: {
type: [Number, String, Boolean],
default: false
},
menuData: {
type: Array,
default: []
},
},
data() {
return {
treeHight: '500px',
mainHight: 'calc(100% - 80px)',
classifyButtonList: [],
buttonArray: [],
colorsKey: false,
menuLoading: false,
menuPopedom: [],
buttonPopedom: []
}
},
computed: {
},
data() {
return {
treeHight: '500px',
mainHight: 'calc(100% - 80px)',
classifyButtonList: [],
buttonArray: [],
colorsKey: false,
menuLoading: false,
menuPopedom: [],
buttonPopedom: []
}
},
computed: {
},
watch: {
},
watch: {
},
created() {
},
created() {
},
onShow() { },
mounted() {
this.initPage()
},
filters: {
},
onShow() { },
mounted() {
this.initPage()
},
filters: {
},
methods: {
//
initPage() {
},
checkChange(ids, checkdata) {
this.menuPopedom = ids
this.checkdata = checkdata
},
},
methods: {
//
initPage() {
},
checkChange(ids, checkdata) {
this.menuPopedom = ids
this.checkdata = checkdata
},
typeChange(item) {
item.type = !item.type
this.$forceUpdate()
},
typeChange(item) {
item.type = !item.type
this.$forceUpdate()
},
},
},
}
</script>
<style scoped lang='scss'>
.buttonSetting {
margin: 10px 0;
margin: 10px 0;
}
</style>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
// $activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on {
/* color: #00aa00; */
color: $activeColor;
}
// .el-icon-star-on {
// /* color: #00aa00; */
// color: $activeColor;
// }
.buttonSetting {
.recordText {
border: 1px solid #fff;
width: 100px;
padding: 10px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin: 0px 3px;
}
.recordText {
border: 1px solid #fff;
width: 100px;
padding: 10px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin: 0px 3px;
}
.recordText.active {
background: $activeColor;
color: #fff;
}
// .recordText.active {
// background: $activeColor;
// color: #fff;
// }
}
</style>

View File

@ -0,0 +1,121 @@
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
style="width: 100%"
:show-header="false"
>
<el-table-column prop="billName" label="模块" width="120">
</el-table-column>
<el-table-column prop="dataList" label="字段">
<template slot-scope="scope">
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
"
v-show="btnShowHandle(homeList,true)"
@click="cancellation(homeList)"
></i>
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
color: #808080;
"
v-show="btnShowHandle(homeList,false)"
@click="selectAllButton(homeList)"
></i>
<el-checkbox v-model="item.check" v-for="item in homeList">{{ item.name }}</el-checkbox>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import config from '@/views/doraChunk/config/indexChunkConfig.js'
import { mapMutations } from 'vuex'
export default {
data() {
return {
tableData: [
{
billName: '首页拖拽模块',
dataList: config.config.map((item) => {
let obj = {
id: item.componentName,
name: item.name
}
return obj
}),
buttonList: []
}
],
selectedList: '',
homeList: []
}
},
created() {
},
components: {},
computed: {},
mounted() {
},
beforeUpdate() {
this.handleTabClick()
},
methods: {
//
btnShowHandle(list, flag = false) {
if (!list.length) return false
let flagResult = list.every(item => {
return item.check
})
if (flag) {
return flagResult
} else {
return !flagResult
}
},
selectAllButton(item) {
console.log(item)
item.forEach(item => {
item.check = true
})
},
cancellation(item) {
item.forEach(item => {
item.check = false
})
},
handleTabClick() {
this.$nextTick(() => {
this.$refs.multipleTable && this.$refs.multipleTable.doLayout()
})
}
},
watch: {
selectedList(newV, oldV) {
let tempArr = newV.split(',')
this.tableData[0].buttonList = tempArr
}
}
}
</script>
<style scoped lang="scss"></style>

View File

@ -1,131 +1,131 @@
<template>
<div v-if="useMenuList">
<div v-for="(item, index) in menuList" :key="index" class="classifyButtonList">
<div flex="cross:center" flex-wrap>
<div class="title" @click="menuclick(item)">
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
<span :class="{'active':item.type}">{{item.label}}</span>
</div>
<div v-if="useMenuList">
<div v-for="(item, index) in menuList" :key="index" class="classifyButtonList">
<div flex="cross:center" flex-wrap>
<div class="title" @click="menuclick(item)">
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
<span :class="{'active':item.type}">{{item.label}}</span>
</div>
</div>
<menu-tree v-if="item.children" :use-menu-list="true" :parent-tree-data="item.children" ></menu-tree>
</div>
</div>
</div>
<menu-tree v-if="item.children" :use-menu-list="true" :parent-tree-data="item.children" ></menu-tree>
</div>
</div>
</template>
<script>
export default {
name: "menuTree",
props: {
useMenuList: {
type: Boolean,
default: false,
},
parentTreeData: {
type: Array,
default: () => {
return []
}
},
},
data() {
return {
menuList: [],
menuPopedom: []
}
},
created() {
this.menuList = Object.assign([], this.parentTreeData)
},
export default {
name: "menuTree",
props: {
useMenuList: {
type: Boolean,
default: false,
},
parentTreeData: {
type: Array,
default: () => {
return []
}
},
},
data() {
return {
menuList: [],
menuPopedom: []
}
},
created() {
this.menuList = Object.assign([], this.parentTreeData)
},
methods: {
menuclick(item) {
item.type = !item.type
// if (item.children != null && item.children && item.children.length) {
// this.allClick(item.children,item.type )
// }
this.menuPopedom.push(item.id)
this.setMenuPopedom(this.menuPopedom)
this.$forceUpdate()
},
setMenuPopedom(arr) {
let newArr = []
arr.forEach((val)=>{
if(newArr.indexOf(val) == -1){
newArr.push(val)
}
})
this.menuPopedom = newArr
},
allClick(data, type) {
data.forEach(el => {
el.type = type
if (el.children != null && el.children && el.children.length) {
this.allClick(el.children, type)
}
})
},
changeMenu(data, num) {
let level = num
level = level + 1
data.forEach(el => {
el.buttonList = []
// el.isShow = true
el.level = level
if (el.children != null && el.children && el.children.length) {
this.changeMenu(el.children, level)
}
})
},
}
}
methods: {
menuclick(item) {
item.type = !item.type
// if (item.children != null && item.children && item.children.length) {
// this.allClick(item.children,item.type )
// }
this.menuPopedom.push(item.id)
this.setMenuPopedom(this.menuPopedom)
this.$forceUpdate()
},
setMenuPopedom(arr) {
let newArr = []
arr.forEach((val)=>{
if(newArr.indexOf(val) == -1){
newArr.push(val)
}
})
this.menuPopedom = newArr
},
allClick(data, type) {
data.forEach(el => {
el.type = type
if (el.children != null && el.children && el.children.length) {
this.allClick(el.children, type)
}
})
},
changeMenu(data, num) {
let level = num
level = level + 1
data.forEach(el => {
el.buttonList = []
// el.isShow = true
el.level = level
if (el.children != null && el.children && el.children.length) {
this.changeMenu(el.children, level)
}
})
},
}
}
</script>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
$activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on {
/* color: #00aa00; */
color: $activeColor;
}
.el-icon-star-on {
/* color: #00aa00; */
color: $activeColor;
}
.classifyButtonList {
s .active {
color: $activeColor;
}
}
.classifyButtonList {
s .active {
color: $activeColor;
}
}
// .recordText {
// border: 1px solid #fff;
// padding: 3px 10px;
// text-align: center;
// font-size: 14px;
// cursor: pointer;
// background: #f2f2f2;
// color: #4e4e4e;
// margin:5px;
// border-radius: 5px;
// }
// .recordText {
// border: 1px solid #fff;
// padding: 3px 10px;
// text-align: center;
// font-size: 14px;
// cursor: pointer;
// background: #f2f2f2;
// color: #4e4e4e;
// margin:5px;
// border-radius: 5px;
// }
// .recordText.active {
// background-color: $activeColor;
// color: white;
// }
// .recordText.active {
// background-color: $activeColor;
// color: white;
// }
</style>
<style scoped lang="scss">
.tree-div {}
.tree-div {}
.classifyButtonList {
// margin-bottom: 10px;
padding: 0 0 0 10px;
// cursor: pointer;
line-height: 25px;
.classifyButtonList {
// margin-bottom: 10px;
padding: 0 0 0 10px;
// cursor: pointer;
line-height: 25px;
.title {
// text-align: right;
cursor: pointer;
width: 100%;
border-bottom: 1px solid #ccc;
}
.title {
// text-align: right;
cursor: pointer;
width: 100%;
border-bottom: 1px solid #ccc;
}
}
</style>
}
</style>

View File

@ -1,410 +1,410 @@
<template>
<div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="菜单权限" name="first">
<!-- 最外围 -->
<div v-for="item in dataList">
<div class="listBox">
<div class="list p-10" @click="muenclick(1,item)">
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{item.title}}</p>
</div>
<div class="list" v-for="itemA in item.children">
<div class="list p-10" @click="muenclick(2,itemA)">
<i :class="itemA.type ?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{itemA.title}}</p>
</div>
<div class="list p-10 ml-10" v-for="itemB in itemA.children" @click="muenclick(3,itemB)">
<i :class="itemB.type?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{itemB.title}}</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="按钮权限" name="second">
<div class="p-10 list listBox" v-for="item in ButtonList">
<div style="display: flex;align-items: center;" @click="recordAll(item)">
<p>{{item.billid}}</p>
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
</div>
<div style="display: flex;margin-left: 10px;">
<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
@click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="数据权限" name="third">
<div class="p-10 list listBox" v-for="item in recordList">
<div style="display: flex;align-items: center;" @click="recordAll(item)">
<p>{{item.billid}}</p>
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
</div>
<div style="display: flex;margin-left: 10px;">
<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
@click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="菜单权限" name="first">
<!-- 最外围 -->
<div v-for="item in dataList">
<div class="listBox">
<div class="list p-10" @click="muenclick(1,item)">
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{item.title}}</p>
</div>
<div class="list" v-for="itemA in item.children">
<div class="list p-10" @click="muenclick(2,itemA)">
<i :class="itemA.type ?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{itemA.title}}</p>
</div>
<div class="list p-10 ml-10" v-for="itemB in itemA.children" @click="muenclick(3,itemB)">
<i :class="itemB.type?'el-icon-star-on':'el-icon-star-off'"></i>
<p>{{itemB.title}}</p>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="按钮权限" name="second">
<div class="p-10 list listBox" v-for="item in ButtonList">
<div style="display: flex;align-items: center;" @click="recordAll(item)">
<p>{{item.billid}}</p>
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
</div>
<div style="display: flex;margin-left: 10px;">
<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
@click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="数据权限" name="third">
<div class="p-10 list listBox" v-for="item in recordList">
<div style="display: flex;align-items: center;" @click="recordAll(item)">
<p>{{item.billid}}</p>
<i :class="item.type?'el-icon-star-on':'el-icon-star-off'"></i>
</div>
<div style="display: flex;margin-left: 10px;">
<p class="recordText" v-for="el in item.dataDetail" :class="{'active':el.type}"
@click="typeChange(el)">{{el.name}}</p>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
export default {
name: "review",
components: {
baseDialog
},
data() {
return {
activeName: 'first',
//
ButtonList:[],
recordList: [{
billid: '合同管理',
type: false,
ids:[],
dataDetail: [
{name: '浙江用安',
id: 60,
type: false,
},
{
name: '销售部',
id: 58,
type: false,
},
{
name: '实施服务',
id: 61,
type: false,
},
],
},
{
billid: '项目管理',
type: true,
dataDetail: [
{
name: '浙江用安',
id: 60,
type: false,
},
{
name: '销售部',
id: 58,
type: false,
},
{
name: '实施服务',
id: 61,
type: false,
},
],
},
],
dataList: [{
title: '系统管理',
type: 1,
id:1,
children: [{
title: '数据字典',
type: false,
id:2
},
{
title: '用户管理',
type: 1,
id:3,
children: [{
title: '角色管理',
type: true,
id:4
},
{
title: '人员管理',
type: false,
id:5
},
]
}
]
},
{
title: '系统维护',
type: false,
id:6,
children: [{
title: 'LayUI图标库',
type: false,
id:7
}]
}
],
}
},
watch: {
dataList: {
deep: true, // true
handler: function(newV, oldV) {
newV.forEach(el => {
el.children.forEach(item => {
if (item.type == true) {
el.type = true
}
if (item.children && item.children.length > 0) {
item.children.forEach(last => {
if (last.type == true) {
el.type = true
}
})
}
})
})
}
},
recordList: {
deep: true, // true
handler: function(newV, oldV) {
let num = 0
newV.forEach(el => {
el.dataDetail.forEach(item => {
if (item.type == true) {
el.type = true
num = num +1
}
})
if(num == 0){
el.type = false
}
})
}
},
},
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
export default {
name: "review",
components: {
baseDialog
},
data() {
return {
activeName: 'first',
//
ButtonList:[],
recordList: [{
billid: '合同管理',
type: false,
ids:[],
dataDetail: [
{name: '浙江用安',
id: 60,
type: false,
},
{
name: '销售部',
id: 58,
type: false,
},
{
name: '实施服务',
id: 61,
type: false,
},
],
},
{
billid: '项目管理',
type: true,
dataDetail: [
{
name: '浙江用安',
id: 60,
type: false,
},
{
name: '销售部',
id: 58,
type: false,
},
{
name: '实施服务',
id: 61,
type: false,
},
],
},
],
dataList: [{
title: '系统管理',
type: 1,
id:1,
children: [{
title: '数据字典',
type: false,
id:2
},
{
title: '用户管理',
type: 1,
id:3,
children: [{
title: '角色管理',
type: true,
id:4
},
{
title: '人员管理',
type: false,
id:5
},
]
}
]
},
{
title: '系统维护',
type: false,
id:6,
children: [{
title: 'LayUI图标库',
type: false,
id:7
}]
}
],
}
},
watch: {
dataList: {
deep: true, // true
handler: function(newV, oldV) {
newV.forEach(el => {
el.children.forEach(item => {
if (item.type == true) {
el.type = true
}
if (item.children && item.children.length > 0) {
item.children.forEach(last => {
if (last.type == true) {
el.type = true
}
})
}
})
})
}
},
recordList: {
deep: true, // true
handler: function(newV, oldV) {
let num = 0
newV.forEach(el => {
el.dataDetail.forEach(item => {
if (item.type == true) {
el.type = true
num = num +1
}
})
if(num == 0){
el.type = false
}
})
methods: {
getMenuTreeselect() {
menuTreeselect().then((response) => {
const parseTree = (arr) => {
if (arr.length > 0) {
arr.forEach(item => {
if (item.id) {
item['label'] = this.$t(allPermis.filter(p => p.id === item.id)[0]?.localKey)
}
if (item.children && item.children.length > 0) {
parseTree(item.children)
}
})
}
return arr
}
this.menuOptions = parseTree(response.data)
})
},
}
},
},
handleClick(tab, event) {
let ids = []
const parseTree = (arr) =>{
arr.forEach(item =>{
if(item.type){
ids.push(item.id)
}
if (item.children && item.children.length > 0) {
parseTree(item.children)
}
})
return ids
}
let vrr = parseTree(this.dataList)
this.getButtonList(vrr)
},
async getButtonList(vrr){
this.ButtonList = []
let arr = {
billid: '用户管理',
type: false,
ids:[],
dataDetail: [
{ name: '新增',
id: 60,
type: false,
},
{
name: '编辑',
id: 58,
type: false,
},
{
name: '删除',
id: 61,
type: true,
},
],
}
if(vrr.length > 0){
vrr.forEach(el=>{
if(el == 3){
this.ButtonList.push(arr)
}
})
}
},
//
recordAll(item) {
item.dataDetail.forEach(el => {
if (item.type ==false) {
this.AllType(el, true)
} else {
this.AllType(el, false)
}
})
this.typeChange(item)
},
//
typeChange(item) {
if (item.type == true) {
item.type = false
} else {
item.type = true
}
},
AllType(item, type) {
item.type = type
},
muenclick(index, item) {
let ids = []
// index
if (index == 1) {
if (item.type == false) {
ids.push(item.id)
this.AllType(item, true)
item.children.forEach(el => {
this.AllType(el, true)
if (el.children && el.children.length > 0) {
el.children.forEach(small => {
ids.push(item.id)
this.AllType(small, true)
})
}
})
} else {
this.AllType(item, false)
item.children.forEach(el => {
this.AllType(el, false)
if (el.children && el.children.length > 0) {
el.children.forEach(small => {
this.AllType(small, false)
})
}
})
}
} else {
this.typeChange(item)
}
}
},
mounted() {
methods: {
}
getMenuTreeselect() {
menuTreeselect().then((response) => {
const parseTree = (arr) => {
if (arr.length > 0) {
arr.forEach(item => {
if (item.id) {
item['label'] = this.$t(allPermis.filter(p => p.id === item.id)[0]?.localKey)
}
if (item.children && item.children.length > 0) {
parseTree(item.children)
}
})
}
return arr
}
this.menuOptions = parseTree(response.data)
})
},
}
handleClick(tab, event) {
let ids = []
const parseTree = (arr) =>{
arr.forEach(item =>{
if(item.type){
ids.push(item.id)
}
if (item.children && item.children.length > 0) {
parseTree(item.children)
}
})
return ids
}
let vrr = parseTree(this.dataList)
this.getButtonList(vrr)
},
async getButtonList(vrr){
this.ButtonList = []
let arr = {
billid: '用户管理',
type: false,
ids:[],
dataDetail: [
{ name: '新增',
id: 60,
type: false,
},
{
name: '编辑',
id: 58,
type: false,
},
{
name: '删除',
id: 61,
type: true,
},
],
}
if(vrr.length > 0){
vrr.forEach(el=>{
if(el == 3){
this.ButtonList.push(arr)
}
})
}
},
//
recordAll(item) {
item.dataDetail.forEach(el => {
if (item.type ==false) {
this.AllType(el, true)
} else {
this.AllType(el, false)
}
})
this.typeChange(item)
},
//
typeChange(item) {
if (item.type == true) {
item.type = false
} else {
item.type = true
}
},
AllType(item, type) {
item.type = type
},
muenclick(index, item) {
let ids = []
// index
if (index == 1) {
if (item.type == false) {
ids.push(item.id)
this.AllType(item, true)
item.children.forEach(el => {
this.AllType(el, true)
if (el.children && el.children.length > 0) {
el.children.forEach(small => {
ids.push(item.id)
this.AllType(small, true)
})
}
})
} else {
this.AllType(item, false)
item.children.forEach(el => {
this.AllType(el, false)
if (el.children && el.children.length > 0) {
el.children.forEach(small => {
this.AllType(small, false)
})
}
})
}
} else {
this.typeChange(item)
}
}
},
mounted() {
}
}
</script>
<style scoped lang="scss">
.recordText {
border: 1px solid #fff;
width: 60px;
padding: 5px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin: 0px 3px;
}
.recordText {
border: 1px solid #fff;
width: 60px;
padding: 5px 0;
text-align: center;
font-size: 12px;
cursor: pointer;
background: #f2f2f2;
color: #e0e0e0;
margin: 0px 3px;
}
.recordText.active {
background: #00a490;
color: #fff;
}
.recordText.active {
background: #00a490;
color: #fff;
}
.listBox {
border-top: 1px solid #ccc;
}
.listBox {
border-top: 1px solid #ccc;
}
.list {
display: flex;
align-content: center;
cursor: pointer;
}
.list {
display: flex;
align-content: center;
cursor: pointer;
}
.ml-10 {
margin-left: 10px;
}
.ml-10 {
margin-left: 10px;
}
.p-10 {
padding: 10px 0;
}
.p-10 {
padding: 10px 0;
}
.small.active {
border-color: crimson transparent transparent transparent;
}
.small.active {
border-color: crimson transparent transparent transparent;
}
.small.active:before,
.small.active:after {
border-color: crimson transparent transparent transparent;
}
.small.active:before,
.small.active:after {
border-color: crimson transparent transparent transparent;
}
.small {
border-color: #7d7d7d transparent transparent transparent;
border-style: solid;
border-top-width: 9.375px;
border-right-width: 15px;
border-left-width: 15px;
height: 0;
margin-top: 9.375px;
margin-bottom: 6.02679px;
position: relative;
width: 0;
margin: 2rem 0.8rem;
}
.small {
border-color: #7d7d7d transparent transparent transparent;
border-style: solid;
border-top-width: 9.375px;
border-right-width: 15px;
border-left-width: 15px;
height: 0;
margin-top: 9.375px;
margin-bottom: 6.02679px;
position: relative;
width: 0;
margin: 2rem 0.8rem;
}
.small:before,
.small:after {
border-color: #7d7d7d transparent transparent transparent;
border-style: solid;
border-top-width: 9.375px;
border-right-width: 15px;
border-left-width: 15px;
content: '';
display: block;
height: 0;
left: -15px;
position: absolute;
top: -9.375px;
width: 0;
}
.small:before,
.small:after {
border-color: #7d7d7d transparent transparent transparent;
border-style: solid;
border-top-width: 9.375px;
border-right-width: 15px;
border-left-width: 15px;
content: '';
display: block;
height: 0;
left: -15px;
position: absolute;
top: -9.375px;
width: 0;
}
.small:before {
transform: rotate(70deg);
}
.small:before {
transform: rotate(70deg);
}
.small:after {
transform: rotate(-70deg);
}
.small:after {
transform: rotate(-70deg);
}
</style>
<style lang="scss">
$activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on{
/* color: #00aa00; */
color: $activeColor;
}
</style>
$activeColor: var(--bg-color, "#00aaff");
.el-icon-star-on{
/* color: #00aa00; */
color: $activeColor;
}
</style>

View File

@ -0,0 +1,392 @@
<template>
<div>
<base-right-dialog
ref="baseRightDialog"
:footerShow="true"
:appendBody="true"
:dialogVisible.sync="drawer"
:withHeader="false"
title="权限分配"
@handleClose="handleDialogClose"
@handleConfirmClick="handleConfirmClick"
:size="'60%'"
>
<el-tabs v-model="activeName">
<el-tab-pane label="功能权限" name="first">
<el-table
border
ref="multipleTable"
:data="menuDatas"
row-key="id"
tooltip-effect="dark"
style="width: 100%"
:default-expand-all="true"
:default-checked-keys="keys"
@select-all="selectAll"
@select="handleSelectionChange"
v-loading="buttonLoading"
>
<el-table-column
type="selection"
width="45"
:reserve-selection="true"
></el-table-column>
<el-table-column
prop="name"
label="菜单名称"
width="200"
></el-table-column>
<el-table-column prop="buttonSelection" label="按钮">
<template slot-scope="scope">
<div style="display: flex;align-items: center">
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
cursor: pointer;
"
v-show="btnShowHandle(scope.row.buttonList,true)"
@click="cancellation(scope.row.buttonList)"
></i>
<i
class="el-icon-star-on"
style="
height: 30px;
line-height: 30px;
font-size: 25px;
margin-right: 7px;
color: #808080;
cursor: pointer;
"
@click="selectAllButton(scope.row.buttonList)"
v-show="btnShowHandle(scope.row.buttonList,false)"
></i>
<el-checkbox v-model="item.check" v-for="item in scope.row.buttonList">{{ item.nameCh }}</el-checkbox>
</div>
</template>
</el-table-column>
</el-table>
</el-tab-pane
>
<el-tab-pane label="数据权限" name="second">
<data-permissions ref="dataPermissions"></data-permissions>
</el-tab-pane>
<el-tab-pane label="首页拖拽权限" name="layOutAuth">
<layOutPermissions ref="layOutPermissions"></layOutPermissions>
</el-tab-pane>
</el-tabs>
</base-right-dialog>
</div>
</template>
<script>
import baseRightDialog from '@/components/base/baseRightDialog'
import { PopedomSaveData, GetAllBilldata } from '@/api/apis/jurisdiction'
import dataPermissions from './dataPermissions.vue'
import layOutPermissions from './layOutPermissions.vue'
import loginVue from '../../../login.vue'
import { authApi } from '@/api/apis/auth'
export default {
data() {
return {
drawer: false,
multipleSelection: [],
keys: [],
isAllSelect: false,
selected: false,
childNode: false,
build: '',
activeName: 'first',
dataPermissions: [],
buttonLoading: false,
menuDatas: []
}
},
props: {
menuData: {
type: Array,
default: () => {
return []
}
}
},
components: {
baseRightDialog,
dataPermissions,
layOutPermissions
},
beforeUpdate() {
this.handleTabClick()
},
computed: {
// menuDatas: {
// // return JSON.parse(JSON.stringify(this.menuData));
// get: function () {
// return JSON.parse(JSON.stringify(this.menuData));
// },
// set: function (item) {
// return JSON.parse(JSON.stringify(item));
// },
// },
},
methods: {
//
btnShowHandle(list, flag = false) {
if (!list.length) return false
let flagResult = list.every(item => {
return item.check
})
if (flag) {
return flagResult
} else {
return !flagResult
}
},
// tab
handleTabClick() {
this.$nextTick(() => {
this.$refs.multipleTable && this.$refs.multipleTable.doLayout()
})
},
selectAllButton(item) {
item.forEach(item => {
item.check = true
})
},
cancellation(item) {
item.forEach(item => {
item.check = false
})
},
// /
selectAll() {
let data = this.treeToArray(this.menuDatas)
this.selected = !this.selected
data.forEach((el, index) => {
el.check = this.selected
this.$refs.multipleTable.toggleRowSelection(el, this.selected)
})
},
handleSelectionChange(val, row) {
row.check = !row.check
},
//
exhibitList(menu, homeList, id) {
this.$refs.layOutPermissions.homeList = homeList
console.log(menu, 'menu')
// let data = this.treeToArray(this.menuDatas);
this.build = id
// data.forEach((el, index) => {
// if (id.includes(el.id)) {
// this.$refs.multipleTable.toggleRowSelection(el, true);
// }
// });
this.menuCheckHandle(menu)
this.menuDatas = menu
console.log(this.menuDatas, 'this.menuDatas')
this.buttonLoading = false
},
//
menuCheckHandle(arr) {
arr.forEach(item => {
if (item.check) {
this.$refs.multipleTable.toggleRowSelection(item, true)
}
if (item.children.length) {
this.menuCheckHandle(item.children)
}
})
},
//
treeToArray(items) {
let children = []
items.forEach((item) => {
children.push(item)
if (item.children) {
children = children.concat(this.treeToArray(item.children))
}
})
return children
},
handleDialogClose() {
let data = this.treeToArray(this.menuDatas)
data.forEach((el, index) => {
this.$refs.multipleTable.toggleRowSelection(el, false)
})
this.changeMenu(this.menuDatas, 0)
this.drawer = false
this.$parent.permissionPopup = false
},
async handleConfirmClick() {
let params = {
id: this.build,
kindId: 1,
sysPopedomHomeEntities: [],
sysPopedomMenuEntities: [],
sysPopedomOperateEntities: []
}
this.homeListHandle(params.sysPopedomHomeEntities)
this.menuListHandle(this.menuDatas, params.sysPopedomMenuEntities, params.sysPopedomOperateEntities)
const res = await authApi("sysUserService","","saveJurisdiction","",params)
if(res.status == '200'){
this.handleDialogClose();
this.$message({
message: "保存成功",
type: "success",
});
}
},
//
homeListHandle(arr) {
this.$refs.layOutPermissions.homeList.forEach(item => {
if (item.check) {
arr.push({ homeId: item.id })
}
})
},
//
menuListHandle(list, result, btnResult) {
list.forEach(item => {
if (item.check) {
result.push({
menuId: item.id
})
}
if (item.children.length) {
this.menuListHandle(item.children, result,btnResult)
}
if (item.buttonList.length) {
this.btnListHandle(item.buttonList, btnResult, item.id)
}
})
},
//
btnListHandle(list, btnResult, menuId) {
list.forEach(item => {
if (item.check) {
console.log(btnResult,'btnResult')
btnResult.push({
menuId,
operate: item.id
})
}
})
},
//
addToButtonList(arr, newArr) {
newArr.forEach((newItem) => {
this.addToButtonListRecursive(
arr,
newItem.op_MenuID,
newItem.op_OperateKindList
)
})
return arr
},
addToButtonListRecursive(arr, targetId, operateKindList) {
for (let i = 0; i < arr.length; i++) {
const item = arr[i]
if (item.id == targetId) {
let lists = operateKindList.split(',')
lists.forEach((el) => {
item.buttonList.push(parseInt(el))
})
return item
}
if (item.children && item.children.length > 0) {
this.addToButtonListRecursive(
item.children,
targetId,
operateKindList
)
}
}
},
changeMenu(data, num) {
let level = num
level = level + 1
data.forEach((el) => {
el.buttonList = []
el.type = false
if (el.children != null && el.children && el.children.length) {
this.changeMenu(el.children, level)
}
})
},
toFlatArray(tree, parentId) {
return tree.reduce((t, _) => {
const child = _[children]
return [
...t,
parentId ? { ..._, parentId } : _,
...(child && child.length ? toFlatArray(child, _[id]) : [])
]
}, [])
},
getIds(flatArray) {
let ids = [nodeId]
let child = flatArray.find((_) => _[id] === nodeId)
while (child && child.parentId) {
ids = [child.parentId, ...ids]
child = flatArray.find((_) => _[id] === child.parentId)
}
return ids
},
treeFindPath(tree, func, field = '', path = []) {
if (!tree) return []
for (const data of tree) {
field === '' ? path.push(data) : path.push(data[field])
if (func(data)) return path
if (data.children) {
const findChildren = this.treeFindPath(
data.children,
func,
field,
path
)
if (findChildren.length) return findChildren
}
path.pop()
}
return []
}
}
}
</script>
<style scoped lang="scss">
.rightDialog {
height: 100%;
padding: 0 16px;
}
::v-deep .cell {
display: flex;
}
::v-deep .el-checkbox-group {
display: flex;
align-items: center;
flex-wrap: wrap;
}
::v-deep .el-checkbox {
margin-right: 15px;
}
::v-deep .el-tabs__nav {
transform: translateX(22px) !important;
}
</style>

View File

@ -227,8 +227,8 @@ export default {
let params = {
id: id
}
let res = await PersonDelData(params)
if (res.code == 1) {
let res = await authApi('sysPersonService','','deleteEntity','',params)
if (res.status == 200) {
this.$vmNews('删除成功', 'success')
this.resetTable()
// this.pageModel.page = 1
@ -456,7 +456,14 @@ export default {
let params = {
...data,
}
let res = await authApi("sysPersonService","","saveEntity","",params)
let res
console.log(params,'params')
if(params.id){
res = await authApi("sysPersonService","","updateEntity","",params)
}else{
res = await authApi("sysPersonService","","saveEntity","",params)
}
if (res.status == 200) {
this.$vmNews('保存成功', 'success')
this.addDialog = false

View File

@ -1,527 +1,243 @@
// 页面操作按钮配置
const fucDataJson = [{
name: '导出',
type: 'danger',
icon: 'el-icon-position'
},
name: '导出',
type: 'danger',
icon: 'el-icon-position'
},
]
// 表头配置
const tableColumnJson = [{
label: '显示名称',
prop: 'viewName',
tooltip: true,
},
{
label: '登录名',
prop: 'loginName',
tooltip: true,
// other: {
// color: '#4C9CFF',
// isClick: true
// }
},
{
label: '密码超期时间',
prop: 'expirationDate',
tooltip: true,
},
{
label: '入职时间',
prop: 'entryTime',
tooltip: true,
},
{
label: '是否启用',
prop: 'state',
tooltip: true
},
{
label: '电子邮箱',
prop: 'email',
tooltip: true
},
{
label: '在职状态',
prop: 'useState',
tooltip: true,
},
const personColumn = [
{
label: '所属部门',
prop: 'organName',
tooltip: true,
},
{
label: '工号',
prop: 'personCode',
tooltip: true,
// other: {
// color: '#4C9CFF',
// isClick: true
// }
},
{
label: '姓名',
prop: 'personName',
tooltip: true,
},
{
label: '入职时间',
prop: 'entryTime',
tooltip: true,
},
// {
// label: '离职时间',
// prop: 'number',
// tooltip: true
// },
// {
// label: '性别',
// prop: 'sex',
// tooltip: true
// },
// {
// label: '学历',
// prop: 'Degree',
// tooltip: true,
// },
// {
// label: '职务',
// prop: 'Post',
// tooltip: true,
// },
// {
// label: '级别 ',
// prop: 'illegalType',
// tooltip: true,
// },
// {
// label: '生日',
// prop: 'BirthDay',
// tooltip: true,
// },
{
label: '固定电话 ',
prop: 'mobilePhone',
tooltip: true,
},
// {
// label: '籍贯 ',
// prop: 'areaCovered',
// tooltip: true,
// },
// {
// label: '身份证',
// prop: 'areaBuilding',
// tooltip: true,
// },
{
label: '电子邮箱',
prop: 'email',
tooltip: true,
},
{
label: '出生年月',
prop: 'birthDay',
tooltip: true,
},
{
label: '是否用户分配',
prop: 'state',
tooltip: true,
},
]
// 表头配置
const personColumn = [{
label: '用户账号',
prop: 'u_LoginCode',
tooltip: true,
},
{
label: '用户姓名',
prop: 'p_PersonName',
tooltip: true,
},
{
label: '所属部门',
prop: 'o_OrganName',
tooltip: true,
},
{
label: '手机号',
prop: 'p_Telphone',
tooltip: true
},
{
label: '状态',
prop: 'stateNote',
tooltip: true
},
const tableColumnJson = [
{
label: '用户账号',
prop: 'loginCode',
tooltip: true,
},
{
label: '用户姓名',
prop: 'personName',
tooltip: true,
},
{
label: '所属部门',
prop: 'organName',
tooltip: true,
},
{
label: '手机号',
prop: 'mobilePhone',
tooltip: true
},
{
label: '状态',
prop: 'state',
tooltip: true
},
]
// 详情页面结构JSON
const formRow1 = [{
elCol: [{
label: '选择人员',
prop: 'p_PersonName',
tag: 'elDialog',
// disabled:false
},
{
label: '登录账号',
prop: 'u_LoginCode',
tag: 'elInput',
// placeholder:'自动带入',
// disabled:true
},
]
}, {
elCol: [{
label: '描述',
prop: 'u_Remark',
tag: 'elInput',
type: 'textarea',
span: 24
}, ]
}]
elCol: [{
label: '选择人员',
prop: 'personName',
tag: 'elDialog',
// disabled:false
},
{
label: '登录账号',
prop: 'loginCode',
tag: 'elInput',
// placeholder:'自动带入',
// disabled:true
},
]
},{
elCol: [{
label: '描述',
prop: 'remark',
tag: 'elInput',
type:'textarea',
span:24
},
]
}
]
const formRow2 = [{
elCol: [{
label: '用户名',
prop: 'p_PersonName',
tag: 'elDialog',
// disabled:false
},
{
label: '登录账号',
prop: 'u_LoginCode',
tag: 'elInput',
// placeholder:'自动带入',
// disabled:true
},
]
}, {
elCol: [{
label: '描述',
prop: 'u_Remark',
tag: 'elInput',
type: 'textarea',
span: 24
}, ]
}]
elCol: [{
label: '用户名',
prop: 'p_PersonName',
tag: 'elDialog',
// disabled:false
},
{
label: '登录账号',
prop: 'u_LoginCode',
tag: 'elInput',
// placeholder:'自动带入',
// disabled:true
},
]
},{
elCol: [{
label: '描述',
prop: 'u_Remark',
tag: 'elInput',
type:'textarea',
span:24
},
]
}
]
const roleOptions = [{
label: '超级管理员',
value: 1
},
{
label: '业务员',
value: 2
},
{
label: '管理员',
value: 3
},
{
label: '开发成员',
value: 4
},
{
label: '项目经理',
value: 5
},
{
label: '实施人员',
value: 6
},
{
label: '财务',
value: 7
},
{
label: '总经理',
value: 8
},
{
label: '副总',
value: 9
}
]
const rules = {
villageId: [{
required: true,
message: '请选择村/社区名称',
trigger: 'change'
}],
registerTime: [{
required: true,
message: '请选择登记时间',
trigger: 'change'
}],
villageId: [{
required: true,
message: '请选择村/社区名称',
trigger: 'change'
}],
registerTime: [{
required: true,
message: '请选择登记时间',
trigger: 'change'
}],
};
// 详情显示图片配置
const showImgJson = {
span: 24,
text: '现场照片',
field: 'photoUrls',
span: 24,
text: '现场照片',
field: 'photoUrls',
};
const formRow = [
{
elCol: [{
label: '显示名称',
prop: 'viewName',
tag: 'elInput',
}, {
label: '登录名',
prop: 'loginName',
tag: 'elInput',
disabled: false
}]
},
{
elCol: [{
label: '密码',
prop: 'password',
tag: 'elInput',
type: 'password'
}, {
label: '加密策略',
prop: 'encryptionPolicy',
tag: 'elInput',
}]
},
{
elCol: [{
label: '密码超时时间',
prop: 'expirationDate',
tag: 'elDatePicker',
type: 'datetime'
}, {
label: '密码次数',
prop: 'pawFrequency',
tag: 'elInputNumber',
}]
}, {
elCol: [{
label: '人员编号 ',
prop: 'staffId',
tag: 'elInput',
},
{
label: '头像路径',
prop: 'iconUrl',
tag: 'elInput',
disabled: false
}
]
},
{
elCol: [{
label: '是否是内部',
prop: 'builtIn',
tag: 'elRadio',
options: [{
label: '是',
value: '1'
},
{
label: '否',
value: '0'
},
]
}, {
label: '是否启用',
prop: 'state',
tag: 'elRadio',
options: [{
label: '启用',
value: '1'
},
{
label: '停用',
value: '0'
},
]
}]
},
{
elCol: [{
label: '模块操作级别',
prop: 'level',
tag: 'elSelect',
options: [{
label: 'SuperAdmin',
value: '1'
},{
label: 'admin',
value: '2'
},{
label: 'user',
value: '3'
}
]
}, {
label: '电子邮件',
prop: 'email',
tag: 'elInput',
}]
},
{
elCol: [{
label: '手机号码',
prop: 'phone',
tag: 'elInput',
}, {
label: '职务级别',
prop: 'userLvl',
tag: 'elSelect',
options: [
{
label: '管理员',
value: '0'
},
{
label: '访客',
value: '1'
},
{
label: '员工',
value: '2'
},
]
}]
},
{
elCol: [{
label: '性别',
prop: 'sex',
tag: 'elRadio',
options: [{
label: '男',
value: '0'
},
{
label: '女',
value: '1'
},
]
}, {
label: '锁定状态',
prop: 'lockState',
tag: 'elRadio',
options: [{
label: '锁定',
value: '0'
},
{
label: '未锁定',
value: '1'
},
]
}]
},
{
elCol: [{
label: '在职状态',
prop: 'useState',
tag: 'elRadio',
options: [{
label: '在职',
value: '1'
},
{
label: '离职',
value: '2'
},
]
}, {
label: '微信token',
prop: 'wechatToken',
tag: 'elInput',
disabled: true
}]
},
{
elCol: [{
label: '是否可以登录',
prop: 'isLoginable',
tag: 'elRadio',
options: [{
label: '是',
value: '1'
},
{
label: '否',
value: '0'
},
]
}, {
label: '是否虚拟账号',
prop: 'isVirtual',
tag: 'elRadio',
options: [{
label: '是',
value: '1'
},
{
label: '否',
value: '0'
},
]
}]
},
{
elCol: [{
label: '是否被分配',
prop: 'isAssigned',
tag: 'elRadio',
options: [{
label: '是',
value: '1'
},
{
label: '否',
value: '0'
},
]
}, {
label: '是否管理员',
prop: 'isAdmin',
tag: 'elRadio',
options: [{
label: '是',
value: '1'
},
{
label: '否',
value: '0'
},
]
}]
},
{
elCol: [{
label: '枚举',
prop: 'memberType',
tag: 'elInput',
tag: 'elRadio',
options: [{
label: '正式',
value: '1'
},
{
label: '非正式',
value: '0'
},
]
}, {
label: '是否被删除',
prop: 'isDeleted',
tag: 'elRadio',
options: [{
label: '删除',
value: '1'
},
{
label: '未删除',
value: '0'
},
]
}]
},
{
elCol: [{
label: '内外标识',
prop: 'externalType',
tag: 'elRadio',
options: [{
label: '外部人',
value: '1'
},
{
label: '内部人',
value: '0'
},
]
}, {
label: '编号',
prop: 'memberCode',
tag: 'elInput',
}]
},
{
elCol: [{
label: '出生日期',
prop: 'birthDate',
tag: 'elDatePicker',
type: 'datetime'
}, {
label: '办公电话',
prop: 'officeTel',
tag: 'elInput',
}]
},
{
elCol: [{
label: '人员照片地址',
prop: 'photoAddress',
tag: 'elInput',
disabled: true
}, {
label: '所属部门',
prop: 'department',
tag: 'elTreeSelect',
options:[],
}]
},
{
elCol: [{
label: '排序编号',
prop: 'sorts',
tag: 'elInputNumber',
}, {
label: '工作地',
prop: 'workplace',
tag: 'elInput',
}]
},
{
elCol: [{
label: '主岗',
prop: 'majorPosition',
tag: 'elInput',
}, {
label: '副岗',
prop: 'deputyPost',
tag: 'elInput',
}]
},
{
elCol: [{
label: '人员类型',
prop: 'userType',
tag: 'elSelect',
options:[
{label:'超级管理员',value:'1'},
{label:'管理员',value:'2'},
{label:'业务员',value:'3'},
]
}, {
label: '人员状态',
prop: 'personnelStatus',
tag: 'elInput',
tag: 'elRadio',
options: [{
label: '启用',
value: '1'
},
{
label: '停用',
value: '0'
},
]
}]
},
{
elCol: [{
label: '入职时间',
prop: 'entryTime',
tag: 'elDatePicker',
type: 'datetime'
}, {
label: '汇报人',
prop: 'reporter',
tag: 'elInput',
}]
},
]
export default {
fucDataJson,
tableColumnJson,
showImgJson,
formRow1,
formRow2,
rules,
personColumn,
formRow
}
fucDataJson,
tableColumnJson,
showImgJson,
formRow1,
formRow2,
rules,
personColumn
}

View File

@ -1,273 +1,588 @@
<template>
<div>
<div style="display: flex;height: 100%;">
<base-layout title="组织机构" ref="organLayout" style="width: 240px;" :bottonShow="false" :isPage="false"
:operateButtonSwitch="false" >
<div slot="main" style="height: 100%;border-right: 1px solid #dfe6ec;overflow-y: auto;">
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
:menuData="menuData" @handleNodeClick="orangClick"></base-tree>
</div>
</base-layout>
<base-layout title="用户信息" ref="userLayout" @pageChange="pageChange" style="flex:1"
:buttonList="buttonList" @onFuncBtn="getFuncBtn" :isPage="true">
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
<base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
@radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
:tableColumn="tableColumn">
</base-table>
</div>
</base-layout>
</div>
<right-dialog ref="rightDialog" :orgData="menuData" @handleDialogClose="resetTable"></right-dialog>
<table-dialog ref="tableDialog" :orgData="menuData" @handleDialogClose="resetTable"></table-dialog>
</div>
<div>
<div style="display: flex;height: 100%;">
<base-layout title="组织机构" ref="organLayout" style="width: 240px;" :bottonShow="false" :isPage="false"
:operateButtonSwitch="false" :mainColor="mainColor"
>
<div slot="main" style="height: 100%;border-right: 1px solid #dfe6ec;overflow-y: auto;">
<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false" :showCheckbox="false"
:menuData="menuData" @handleNodeClick="orangClick"
></base-tree>
</div>
</base-layout>
<base-layout title="用户信息" ref="userLayout" :selectTable="selectTable" @pageChange="pageChange" style="flex:1"
:buttonList="buttonList" @onElSelect="getElSelect" @onFuncBtn="getFuncBtn" :isPage="true"
>
<div slot="main" slot-scope="{ tableHeight }" style="height: 100%;">
<base-table ref="userCustomtable" :border="true" :showIndex="false" :tabLoading.sync="tabLoading"
@radioChange="userRadioChange" :slotrow="true" :tableHeight="tableHeight" :tableData="tableData"
:tableColumn="tableColumn"
>
<template #state="{row}">
<div>{{ row.row.state == 0 ? '启动' : '停用' }}</div>
</template>
</base-table>
</div>
</base-layout>
</div>
<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :dialogVisible.sync="addDialog"
:footerShow="true" @handleConfirmClick="handleConfirmClick" class="userDialog"
:title="dialogType == 'add' ? '新增用户信息' : '编辑用户信息'" width="900px" top="8vh"
>
<base-form ref="customForm" :formRow="formRow" :isFunBtn="false" @elDialogClick="elDialogClick">
</base-form>
<div>
<p class="bigTitle">选择公司</p>
<div flex="cross:center" flex-wrap>
<p v-for="(item, index) in companyList" :class="{ 'active': item.isActive }" :key="index"
@click="item.isActive = !item.isActive" class="roleName"
>{{ item.organName }}</p>
</div>
</div>
<div>
<p class="bigTitle">选择角色</p>
<div flex="cross:center" flex-wrap>
<p v-for="(item, index) in roleList" :class="{ 'active': item.isActive }" :key="index"
@click="item.isActive = !item.isActive" class="roleName"
>{{ item.roleName }}</p>
</div>
</div>
</base-dialog>
<!--选择人员 -->
<base-person ref="basePerson" :menuData="menuData" :tableColumn="personColumn"
@personConfirmClick="personConfirmClick"
></base-person>
</div>
</template>
<script>
import baseLayout from "@/components/base/baseLayout";
import baseTable from "@/components/base/baseTable";
import baseLayout from '@/components/base/baseLayout'
import baseTable from '@/components/base/baseTable'
// import baseDialog from "@/components/base/BaseNewDialog";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import basePerson from "@/components/base/basePerson/index.vue";
import configData from "./configData";
import rightDialog from "./rightDialog";
import tableDialog from "./tableDialog";
import {
authApi
} from '@/api/apis/auth'
import baseDialog from '@/components/base/BaseNewDialog/index.vue'
import baseForm from '@/components/base/baseNewForm/index.vue'
import baseTree from '@/components/base/BaseMenuTree/index.vue'
import basePerson from '@/components/base/basePerson/index.vue'
import configData from './configData'
import { getCompanyId } from '@/utils/auth'
import {
PersonDetail,
PersonSaveData
} from '@/api/apis/personnelSettings'
import {
RoleGetBillList
} from '@/api/apis/roleManagement'
import {
userGetBillList,
userGetBillData,
userSaveData,
userOpen,
userClose,
userResetPwd,
userChangePwd
} from '@/api/apis/userInformation'
import {
GetOrganTree,
OrganGetCompany
} from '@/api/apis/organization'
import {
PersonList
} from '@/api/apis/personnelSettings'
import { authApi } from '@/api/apis/auth'
export default {
name: "UserInformation",
components: {
baseLayout,
baseTable,
baseDialog,
baseForm,
baseTree,
basePerson,
rightDialog,
tableDialog
},
data() {
return {
userRadioIndex: false,
userRadioId: false,
tabLoading: false,
tableData: [],
//
menuData: [],
buttonList: [
name: 'UserInformation',
components: {
baseLayout,
baseTable,
baseDialog,
baseForm,
baseTree,
basePerson
},
data() {
return {
userRadioIndex: false,
userRadioId: false,
personHight: '350px', //
personMainHight: 'calc(100% - 39px)', //
personLoading: false, //
personDialog: false,
personTableData: [],
personTableHeight: '280px', //
roleList: [],
companyList: [],
// tableHeight: 'calc(100vh - 227px)',
mainColor: '#f8f8f8',
tabLoading: false,
tableData: [],
selectTable: [],
selectPerson: [],
dialogType: '',
//
addDialog: false,
roleOptions: configData.roleOptions,
formRow: configData.formRow1,
formRow2: configData.formRow2,
isFunBtn: true,
menuData: [],
infoData: '',
buttonList: [
{
'icon': 'el-icon-refresh',
'menuName': '设置角色'
},
{
'icon': 'el-icon-open',
'menuName': '设置组织'
},
{
'icon': 'el-icon-turn-off',
'menuName': '停用',
type: 'danger'
},
],
pageModel: {
pageNum: 1,
pageSize: 20,
},
orgId:null,
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
},
//
personColumn() {
return configData.personColumn
},
},
created() { },
onShow() { },
mounted() {
this.initPage()
// this.$refs.baseTree.getMenuList()
},
filters: {
{
'icon': 'el-icon-refresh',
'menuName': '重置密码'
},
{
'icon': 'el-icon-open',
'menuName': '启用'
},
{
'icon': 'el-icon-turn-off',
'menuName': '停用',
type: 'danger'
}
],
pageModel: {
pageNum: 1,
pageSize: 20,
organId: ''
// SequenceName:'',
// Sequence:''
},
personModel: {
page: 1,
limit: 20,
organId: ''
}
}
},
computed: {
//
tableColumn() {
return configData.tableColumnJson
},
//
personColumn() {
return configData.personColumn
}
},
watch: {
// pageModel: {
// deep: true, // true
// handler: function(newV, oldV) {
// this.getTableList()
// }
// },
addDialog: {
deep: true, // true
handler: function(newV, oldV) {
if (newV == false) {
this.formRow[0].elCol[0].disabled = false
this.$nextTick(() => {
this.$refs.customForm.resetForm('ruleForm')
},
methods: {
//
initPage() {
this.getMenuData()
},
//
async getMenuData() {
let res = await authApi('orgService', 'org', 'queryTree')
if(res.status == '200'){
this.menuData = res.attribute
}
},
//
async getTableList() {
this.tabLoading = true
setTimeout(()=>{
this.tabLoading = false
},100000)
this.tableData = []
let params = {
...this.pageModel,
department:this.orgId
}
let res =await authApi('userService', 'user', 'queryList','',params)
if (res.status == '200') {
this.tableData = res.attribute.list
this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.setPageTotal(res.attribute.total)
})
this.tabLoading = false
}
},
//
userRadioChange(val) {
this.userRadioIndex = val.index
this.userRadioId = val.id
},
//
orangClick(data) {
this.orgId = data.id
this.resetTable()
},
resetTable() {
this.pageModel.page = 1
this.userRadioId = false
this.userRadioIndex = false
this.$nextTick(() => {
this.$refs.userCustomtable.clearSelect()
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.pageClear()
})
this.getTableList()
},
//
getFuncBtn(btnEven) {
if (btnEven.menuName === '新增') { //
this.$refs.rightDialog.openDialog('新增',this.orgId)
}
if (btnEven.menuName != '新增') {
if (this.userRadioIndex === false) {
this.$tipConfirm('请勾选需要处理的信息')
return
}
}
if (btnEven.menuName === '编辑') { //
this.$refs.rightDialog.openDialog('编辑',this.orgId,this.userRadioId)
}
if (btnEven.menuName === '设置角色') { //
this.$refs.tableDialog.openDialog(this.userRadioId)
}
if(btnEven.menuName === '删除'){
this.$delConfirm().then(()=>{
this.delData(this.userRadioId)
})
}
if (btnEven.menuName === '重置密码') { //
this.$confirm('确认重置密码吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.ResetPwd(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
if (btnEven.menuName === '启用') { //
this.$confirm('确认启用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.openDelData(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
if (btnEven.menuName === '停用') { //
this.$confirm('确认停用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.closeDelData(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
});
});
}
})
if (this.roleList.length > 0) {
this.roleList.forEach(el => {
el.isActive = false
})
}
if (this.companyList.length > 0) {
this.companyList.forEach(el => {
el.isActive = false
})
}
},
async delData(id) {
let params = {
id: id
}
let res = await authApi('userService','user','delectEntity','',params)
if(res.status == '200'){
this.$vmNews("删除成功",'success')
this.resetTable()
}
},
pageChange(model) {
this.pageModel= model
this.getTableList()
}
},
}
}
},
personModel: {
deep: true, // true
handler: function(newV, oldV) {
this.getPersonList()
}
}
},
created() {
},
onShow() {
},
mounted() {
this.initPage()
// this.$refs.baseTree.getMenuList()
},
filters: {},
methods: {
//
initPage() {
this.getTableList()
this.getOrganList()
},
//
async getTableList() {
this.tabLoading = true
this.tableData = []
let params = {
...this.pageModel
}
let res = await authApi('sysUserService', '', 'queryEntityPage', '', params)
if (res.status == 200) {
this.tableData = res.attribute.list
// this.$nextTick(() => {
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.setPageTotal(res.attribute.total)
// })
this.tabLoading = false
}
},
//
userRadioChange(val) {
this.userRadioIndex = val.index
this.userRadioId = val.id
},
//
async getOrganList() {
let res = await authApi('sysOrganService', '', 'queryEntityTree', '', {
state: 0
})
this.menuData = res.attribute
},
//
async getRoleList(dataList) {
let params = {
page: 1,
limit: 50,
Sequence: '',
SequenceName: ''
}
let res = await authApi('sysRoleService', '', 'queryEntity', '', { enableState: '0' })
if (res.status == 200) {
console.log(res, 'res')
res.attribute.forEach(el => {
el.isActive = false
if (dataList && dataList.length > 0) {
dataList.forEach(item => {
console.log(item.id,el.id,'id对比')
if (item.roleId == el.id) {
el.isActive = true
}
})
}
})
this.roleList = res.attribute
}
},
//
async getCompanyList(dataList) {
let res = await authApi('sysOrganService', '', 'queryEntityTree', '', { state: 0 })
if (res.status == 200) {
console.log(res, '组织')
res.attribute.forEach(el => {
el.isActive = false
if (dataList && dataList.length > 0) {
dataList.forEach(item => {
if (el.id == item.userCompanyId) {
el.isActive = true
}
})
}
})
this.companyList = res.attribute
}
},
//
async getPersonList() {
this.personLoading = true
let params = {
...this.personModel
}
let res = await PersonList(params)
if (res.code === 1) {
this.personTableData = res.data[1]
this.personLoading = false
}
},
async userSave(params) {
let res
if(params.id){
res = await authApi('sysUserService','','updateEntity','',params)
}else{
res = await authApi('sysUserService','','saveEntity','',params)
}
if (res.status == 200) {
this.$vmNews('保存成功', 'success')
this.resetTable()
this.addDialog = false
}
},
//
async getInfoData(id) {
let params = {
id: id
}
console.log(id)
let res = await authApi('sysUserService','','getEntity','',params)
this.infoData = res.attribute
// this.infoData.p_PersonName = this.infoData.personName
this.getRoleList(res.attribute.userRoles)
this.getCompanyList(res.attribute.userCompanys)
this.formRow[0].elCol[0].disabled = true
this.addDialog = true
this.$nextTick(() => {
this.$refs.customForm.choiceAssignment(this.infoData)
})
},
//
personClick(data) {
this.personModel.organId = data.id
},
elDialogClick() {
this.$refs.basePerson.personDialog = true
// this.personDialog = true
this.getPersonList()
},
//
// result() {
// this.selectTable = []
// this.$refs.personCustomtable.clearSelect();
// },
//
orangClick(data) {
this.pageModel.organId = data.id
this.resetTable()
// this.result()
},
//
getPersonSelect(selectTable) {
this.selectPerson = selectTable
},
async ResetPwd(id) {
let params = {
id: id
}
let res = await authApi('sysUserService','','resetPassword','',params)
if (res.status == 200) {
this.$vmNews('重置成功', 'success')
this.resetTable()
this.initPage()
}
},
async openDelData(id) {
let params = {
id: id,
state:0
}
let res = await authApi('sysUserService','','enableDisableEntity','',params)
if (res.status == 200) {
this.$vmNews('已成功启用', 'success')
this.resetTable()
this.initPage()
}
},
async closeDelData(id) {
let params = {
id: id,
state:1
}
let res = await authApi('sysUserService','','enableDisableEntity','',params)
if (res.status == 200) {
this.$vmNews('已成功停用', 'success')
this.resetTable()
this.initPage()
}
},
resetTable() {
this.pageModel.pageNum = 1
this.userRadioId = false
this.userRadioIndex = false
this.selectTable = []
this.$nextTick(() => {
this.$refs.userCustomtable.clearSelect()
this.$refs.userCustomtable.clearRadioIndex()
this.$refs.userLayout.pageClear()
})
this.getTableList()
},
//
getFuncBtn(btnEven) {
if (btnEven.menuName === '新增') { //
this.dialogType = 'add'
this.getRoleList()
this.getCompanyList()
this.addDialog = true
}
if (btnEven.menuName != '新增') {
if (this.userRadioIndex === false) {
this.$tipConfirm('请勾选需要处理的信息')
return
}
}
if (btnEven.menuName === '编辑') { //
this.dialogType = 'edit'
this.getInfoData(this.userRadioId)
// this.$refs.customtable.clearSelect()
}
if (btnEven.menuName === '重置密码') { //
this.$confirm('确认重置密码吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.ResetPwd(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
if (btnEven.menuName === '启用') { //
this.$confirm('确认启用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.openDelData(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
if (btnEven.menuName === '停用') { //
this.$confirm('确认停用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.closeDelData(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
}
console.log(btnEven)
if (btnEven.menuName === '删除') { //
// if (!this.judgeCheckbox()) {
// return
// }
this.$confirm('确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableDelData(this.userRadioId)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
},
//
async tableDelData(id) {
let params = {
id: id
}
let res = await authApi('sysUserService','','deleteEntity','',params)
if (res.status == 200) {
this.$vmNews('删除成功', 'success')
this.resetTable()
// this.pageModel.page = 1
// this.$refs.personLayout.setPageNum(1)
}
},
getElSelect(event, index, indexItem, param) {
},
handleConfirmClick() {
let ruleForm = this.$refs.customForm.ruleForm
let userCompanys = []
let userRoles = []
this.companyList.forEach(el => {
if (el.isActive === true) {
userCompanys.push({
userCompanyId: el.id
})
}
})
this.roleList.forEach(el => {
if (el.isActive == true) {
userRoles.push({
roleId: el.id
})
}
})
let params = {
// U_UserID: this.dialogType == 'add' ? '00000000-0000-0000-0000-000000000000' : this.infoData.U_UserID,
...ruleForm,
userCompanys: userCompanys,
userRoles: userRoles
}
this.userSave(params)
},
personConfirmClick(val) {
console.log(val)
// P_PersonName P_PersonCode P_PersonIDid u_UserIDid
// u_UserIDid U_LoginCode=
// this.$refs.customForm.ruleForm.U_PersonID = val.p_PersonID
this.$refs.customForm.getField('personID', val.id)
this.$refs.customForm.getField('loginCode', val.personCode)
this.$refs.customForm.getField('personName', val.personName)
this.$refs.basePerson.personDialog = false
},
pageChange(model) {
this.pageModel.pageNum = model.page
this.pageModel.pageSize = model.limit
this.getTableList()
}
}
}
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.roleName {
padding: 10px 0;
width: 90px;
border: 2px solid #f2f2f2;
background-color: #f2f2f2;
margin: 0px 10px 10px 0px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 0 2px #f2f2f2;
border-radius: 5px;
padding: 10px 0;
width: 90px;
border: 2px solid #f2f2f2;
background-color: #f2f2f2;
margin: 0px 10px 10px 0px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 0 2px #f2f2f2;
border-radius: 5px;
}
.active {
background-color: #00a490;
border: 2px solid #ffffff;
color: white;
box-shadow: 0 0 0 2px #00a490;
background-color: #00a490;
border: 2px solid #ffffff;
color: white;
box-shadow: 0 0 0 2px #00a490;
}
.bigTitle {
padding-bottom: 10px;
margin: 10px 0;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin: 10px 0;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #ccc;
}
.organizationBody {
display: flex;
justify-content: space-evenly;
background-color: #f2f3f4;
padding: 10px
display: flex;
justify-content: space-evenly;
background-color: #f2f3f4;
padding: 10px
}
</style>