Skip to content

S
so-manage-ui
Commit f830f98c authored by 赵伟庚's avatar 赵伟庚
Browse files
Options

update：菜单管理优化，角色管理新增编辑角色

parent c718f7bc
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 51 deletions
src/assets/css/index.css
View file @ f830f98c
......@@ -243,6 +243,7 @@ div {
.el-dialog__header {
border-bottom: 1px solid #edf0ff;
padding: 16px;
margin-right: 0;
}
.el-dialog__title {
......@@ -1518,10 +1519,6 @@ border-radius:8px;
color: #404a62;
padding-left: 20px;
}
.name_btn {
color: #3759be;
cursor: pointer;
}
.fr {
float: right;
}
......@@ -1539,4 +1536,15 @@ border-radius:8px;
vertical-align: baseline;
cursor: pointer;
}
/* 可点击文字颜色、指针样式 */
.can_click_text {
cursor: pointer;
color: #3759be;
}
.can_click_text:hover {
color: #738bd2;
}
.can_click_text:active {
color: #2c4798;
}
src/bg-ui/bg-table-btns.vue
View file @ f830f98c
<template>
<div class="bg-table-btns">
<bg-table-btn
class="can_click_text"
v-for="(item, index) in curOperations"
:key="index"
:disabled="isDisabled(item)"
......
src/bg-ui/index.scss
View file @ f830f98c
......@@ -808,6 +808,10 @@ a {
&.disabled {
cursor: not-allowed;
color: #a9b1c7;
&:hover,
&:active {
color: #a9b1c7;
}
}
& + .bg-table-btn {
......
src/components/error-table.vue
View file @ f830f98c
......@@ -34,8 +34,8 @@
</template>
<template v-slot:action="{ row,index }">
<bg-table-btn :disabled="disabled||acDisable" :click="()=>{addParam(index)}">增加</bg-table-btn>
<bg-table-btn :disabled="disabled||acDisable" :click="()=>{removeParam(row, index)}">
<bg-table-btn class="can_click_btn" :disabled="disabled||acDisable" :click="()=>{addParam(index)}">增加</bg-table-btn>
<bg-table-btn class="can_click_btn" :disabled="disabled||acDisable" :click="()=>{removeParam(row, index)}">
删除
</bg-table-btn>
</template>
......
src/components/input-object-table.vue
View file @ f830f98c
......@@ -94,8 +94,8 @@
</template>
<template v-slot:action="{ row }">
<bg-table-btn :disabled="disabled" :click="()=>{addInputConf(row)}"> 增加 </bg-table-btn>
<bg-table-btn :disabled="disabled" :click="()=>{removeInputConf(row)}"> 删除 </bg-table-btn>
<bg-table-btn class="can_click_btn" :disabled="disabled" :click="()=>{addInputConf(row)}"> 增加 </bg-table-btn>
<bg-table-btn class="can_click_btn" :disabled="disabled" :click="()=>{removeInputConf(row)}"> 删除 </bg-table-btn>
</template>
</bg-table-pro>
</el-form>
......
src/page/main/config/dict/index.vue
View file @ f830f98c
......@@ -9,7 +9,7 @@
<div class="flex_row">
<div class="flex_left">
<div class="box">
<el-input class="type-input" v-model="typeKeyword" @input="searchType" placeholder="请输入内容"></el-input>
<el-input class="type-input" v-model="typeKeyword" @input="searchType" :prefix-icon="Search" placeholder="请输入搜索内容"></el-input>
<div class="type_station bg-scroll">
<div class="type-box" :class="{'current-type':nodeClassifyId==item.classify_id}" @click="nodeClick(item)" v-for="(item,index) in typeList" :key="'type'+index+200">
......@@ -164,6 +164,7 @@ import { reactive, ref,onBeforeMount,toRefs,computed, watch, nextTick } from 'vu
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
import { Search } from '@element-plus/icons-vue'
const bgForm = ref(null)
const state = reactive({
bgForm,
......
src/page/main/develop/account/index.vue
View file @ f830f98c
......@@ -50,14 +50,14 @@
重置密码
</el-button>
<span class="header_info">已选择<span style="color: #202531;font-weight: bold">{{selected.length}}</span>项</span>
<span class="header_info name_btn" @click="clearSelected">清空</span>
<span class="header_info can_click_text" @click="clearSelected">清空</span>
</div>
</template>
</bg-filter-group>
<div class="table_container apaas_scroll">
<bg-table ref="dataTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true" @selectAc="selectRows">
<template v-slot:business_name="{ row }">
<span @click="goDetail(row)" class="name_btn">
<span @click="goDetail(row)" class="can_click_text">
{{ row.business_name }}
</span>
</template>
......@@ -65,13 +65,13 @@
<bg-switch @click="stateChange(row)" :labels="['否','是']" :values="[0,1]" v-model="row.state"></bg-switch>
</template>
<template v-slot:action="{ row }">
<bg-table-btn class="btn" @click="editAccount(row.id)">
<bg-table-btn class="can_click_text" @click="editAccount(row.id)">
编辑
</bg-table-btn>
<bg-table-btn class="btn" @click="editPsdAccount(row)">
<bg-table-btn class="can_click_text" @click="editPsdAccount(row)">
修改密码
</bg-table-btn>
<bg-table-btn class="btn" @click="deleteAccount(row)">
<bg-table-btn class="can_click_text" @click="deleteAccount(row)">
删除
</bg-table-btn>
</template>
......
src/page/main/develop/menu/index.vue
View file @ f830f98c
......@@ -55,7 +55,7 @@
<div class="action" @click="fileAction(1,selectData,selectParentData)">
新建本级
</div>
<div class="action" :class="{'disable':selectData && selectData.menu_type == 2}" @click="fileAction(2,selectData,selectParentData,selectData.menu_type == 2)">
<div class="action" @click="fileAction(2,selectData,selectParentData)">
新建下级
</div>
<div class="action" @click="fileAction(3,selectData,selectParentData)">
......@@ -217,6 +217,15 @@ const handleNodeClick = (data) => {
state.selectData = data
menuFormRef.value.setForm(state.selectData)
closeAction()
if (menuFormRef) {
nextTick().then(() => {
menuFormRef.value.menuRef.validate(valid => {
if (!valid) {
menuFormRef.value.menuRef.clearValidate()
}
})
})
} // 清除表单验证
} // 菜单树节点点击
const filterNode = (val,data) => {
......@@ -237,6 +246,7 @@ const fileAction = (val,data,parent,disabled=false) => {
state: 1,
menu_url: "",
menu_logo: "",
level: data.level
}
state.menuTree.insertAfter(newChild,parent? parent.Child[parent.Child.length-1] : state.data[state.data.length -1])
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
......@@ -250,11 +260,12 @@ const fileAction = (val,data,parent,disabled=false) => {
let newChild = {
menu_name: "新菜单",
menu_id: 'new' + state.newMenuId,
menu_type: 0,
menu_type: data.menu_type == 0 ? 0 : data.menu_type == 1 ? 1 : 2,
dict_group_id: "",
state: 1,
menu_url: "",
menu_logo: "",
p_menu_type: data.menu_type
}
state.menuTree.append(newChild,data)
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
......
src/page/main/develop/menu/menu-form.vue
View file @ f830f98c
......@@ -11,14 +11,14 @@
<el-form-item label="菜单名称" prop="menu_name">
<el-input v-model="menuForm.menu_name" show-word-limit maxlength="8" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="类型" prop="menu_type">
<el-form-item label="类型" prop="menu_type" v-if="!topLevel">
<el-radio-group v-model="menuForm.menu_type" :disabled="radioDisabled">
<el-radio :label="0">目录</el-radio>
<el-radio :label="1">菜单</el-radio>
<el-radio :label="0" :disabled="typeDisFlag != 0">目录</el-radio>
<el-radio :label="1" :disabled="typeDisFlag == 2">菜单</el-radio>
<el-radio :label="2">子页面</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="分组" prop="dict_group_id" v-if="menuForm.menu_type == 0">
<el-form-item label="分组" prop="dict_group_id" v-if="menuForm.menu_type == 0 && !topLevel">
<el-select v-model="menuForm.dict_group_id" placeholder="请选择分组">
<el-option
v-for="item in groupList"
......@@ -39,10 +39,10 @@
inactive-text="否"
/>
</el-form-item>
<el-form-item label="菜单路径" prop="menu_url">
<el-form-item label="菜单路径" :prop="topLevel ? '' : 'menu_url'">
<el-input v-model="menuForm.menu_url" placeholder="请输入菜单路径" />
</el-form-item>
<el-form-item label="菜单图标" prop="menu_logo" v-if="menuForm.menu_type !== 2">
<el-form-item label="菜单图标" prop="menu_logo">
<div class="iconBox" :style="iconFlag ? {'border-color':'#2b4695'} : {} " @click="openIconbox">
<div>
<span>
......@@ -129,7 +129,7 @@ const state = reactive({
{ required: true, message: '请选择菜单分组', trigger: 'change' },
],
menu_url: [
{ required: true, message: '请输入菜单路径', trigger: 'blur' },
{ required: true, message: '请输入菜单路径', trigger: 'blur' },
]
},
groupList: [],
......@@ -139,6 +139,8 @@ const state = reactive({
showIconArr: [], // 展示的图标
timer: null,
radioDisabled: false,
topLevel: false,
typeDisFlag: null,
})
const getGroupList = () => {
......@@ -180,6 +182,13 @@ const searchIcon = () => {
const setForm = (data) => {
console.log(data)
if (data.level && data.level == 1) {
state.topLevel = true
}else {
state.topLevel = false
}
state.typeDisFlag = data.p_menu_type
console.log(state.topLevel)
if (data.id) { // 编辑状态
state.radioDisabled = true
}else {
......@@ -217,6 +226,8 @@ const {
showIconArr,
icon_search,
radioDisabled,
topLevel,
typeDisFlag,
} = toRefs(state)
defineExpose({ setForm , menuForm, menuRef })
......
src/page/main/system/organization/index.vue
View file @ f830f98c
......@@ -36,18 +36,18 @@
<div class="table_container apaas_scroll">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:account="{ row }">
<span @click="goDetail(row)" class="name_btn">
<span @click="goDetail(row)" class="can_click_text">
{{ row.account }}
</span>
</template>
<template v-slot:action="{ row }">
<bg-table-btn class="btn">
<bg-table-btn class="can_click_text">
编辑
</bg-table-btn>
<bg-table-btn class="btn">
<bg-table-btn class="can_click_text">
修改密码
</bg-table-btn>
<bg-table-btn class="btn">
<bg-table-btn class="can_click_text">
删除
</bg-table-btn>
</template>
......
src/page/main/system/role/add/role_form.vue
View file @ f830f98c
......@@ -5,7 +5,7 @@
<el-breadcrumb separator="/">
<el-breadcrumb-item> 系统管理 </el-breadcrumb-item>
<el-breadcrumb-item to="/system/role"> 角色管理 </el-breadcrumb-item>
<el-breadcrumb-item> 新建 </el-breadcrumb-item>
<el-breadcrumb-item> {{route.query.id ? "编辑" : "新建"}} </el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="main_container">
......@@ -95,7 +95,7 @@ const roleState = reactive({
data_purview: 3,
state: 1,
permission_arr: [],
},
}, // 表单项
rules: {
role_name: [
{ required: true, message: "请输入角色名称", trigger: "blur" },
......@@ -112,13 +112,13 @@ const roleState = reactive({
permission_arr: [
{ required: true, type: "array", validator: checkMenuLength, trigger: "change" }
]
},
}, // 表单校验规则
defaultProps: {
name: 'menu_name',
value: 'id',
children: 'Child',
},
permissionData: [],
}, // 菜单框默认配置
permissionData: [], // 菜单数据
})
const getMenuTree = () => {
axios
......@@ -130,22 +130,37 @@ const getMenuTree = () => {
ElMessage.error(res.data.data)
}
})
}
} // 获取菜单数据
const changeMenu = (val) => {
roleState.formData.permission_arr = val
}
} // 修改选中的菜单
const getRoleDetail = () => {
axios
.get(`/apaas/system/v5/role/detail/${route.query.id}`)
.then((res) => {
if (res.data.code == 200) {
console.log(res.data.data)
let { role_name, role_desc, data_purview, state, menus } = res.data.data
let permission_arr = []
if (menus && menus.length > 0) {
menus.forEach(e => {
permission_arr.push(e.id)
})
}
roleState.formData = {
role_name,
role_desc,
data_purview,
state,
permission_arr:[...permission_arr]
}
console.log(roleState.formData.permission_arr)
}else {
ElMessage.error(res.data.data)
}
})
}
} // 获取角色详情
const saveRole = () => {
roleState.form.validate(valid => {
......@@ -169,7 +184,7 @@ const saveRole = () => {
}
})
}else { // 编辑
params.id = route.query.id
params.id = +route.query.id
axios
.post(`/apaas/system/v5/role/update`,params)
.then((res) => {
......@@ -183,10 +198,12 @@ const saveRole = () => {
}
}
})
}
} // 新增或编辑角色的保存
onBeforeMount(() => {
getMenuTree()
if (route.query.id) {
// 有id表示是编辑，请求详情，回显
getRoleDetail()
}
})
......
src/page/main/system/role/index.vue
View file @ f830f98c
......@@ -22,20 +22,26 @@
<el-button class="register_btn" type="primary" @click="deleteRows">
批量删除
</el-button>
<div class="select_text">
<span>已选择</span>
<span class="num">{{selection.length}}</span>
<span>项</span>
<span class="can_click_text" @click="clearSelection">清空</span>
</div>
</div>
</template>
</bg-filter-group>
<div class="table_container">
<div class="table bg-scroll">
<bg-table
ref="bgTable"
ref="Bgtable"
:headers="headers"
:rows="tableRows"
:select="true"
:stripe="true"
canEdit
canEditFlag='state'
@select="selectRows"
@selectAc="selectRows"
>
<template v-slot:state="{ row }">
<bg-switch
......@@ -50,13 +56,13 @@
{{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
<template v-slot:action="{ row }">
<bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
<bg-table-btn class="can_click_text" :click="()=>{edit_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
编辑
</bg-table-btn>
<bg-table-btn class="btn" :click="()=>{edit_row(row)}" :disabled="row.role_type == 1">
<bg-table-btn class="can_click_text" :click="()=>{distribute_user(row)}" :disabled="row.role_type == 1">
分配用户
</bg-table-btn>
<bg-table-btn class="btn" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
<bg-table-btn class="can_click_text" :click="()=>{delete_row(row)}" :disabled="row.state == 1 || row.role_type == 1">
删除
</bg-table-btn>
</template>
......@@ -72,7 +78,7 @@
</bg-pagination>
</div>
</div>
<!-- 删除弹窗 -->
<!-- 删除弹窗 -->
<el-dialog
custom-class="dialog_box"
title="提示"
......@@ -84,7 +90,7 @@
}
"
>
<div>确定要选中的数据吗？</div>
<div>确定要删除选中的数据吗？</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="delDialog = false">取 消</el-button>
......@@ -92,22 +98,91 @@
</div>
</template>
</el-dialog>
<!-- 分配用户 -->
<el-dialog
custom-class="distribute_dialog"
title="分配用户"
v-model="distributeDialog"
width="1062px"
:before-close="
() => {
distributeDialog = false;
}
"
>
<div class="distribute_box">
<div class="topFilter">
<div class="left">
<span>已选择</span>
<span class="num">0</span>
<span>项</span>
<span class="can_click_text" @click="clearSelection">清空</span>
</div>
<div class="right">
<el-select
v-model="userFilter.type"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="(item, index) in userTypeList"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
<el-select
v-model="userFilter.org"
placeholder="请选择"
style="width: 200px"
>
<el-option
v-for="(item, index) in orgList"
:key="'pushOptions' + index"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
<el-input
v-model="userFilter.search"
placeholder="请输入内容"
style="width: 200px"
:prefix-icon="Search"
/>
<el-button type="primary" @click="distribute">查询</el-button>
<el-button type="default" @click="distributeDialog = false">重置</el-button>
</div>
</div>
<div class="table_box">
</div>
</div>
<template v-slot:footer>
<div class="apaas_button">
<el-button type="default" @click="distributeDialog = false">取 消</el-button>
<el-button type="primary" @click="distribute">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, onBeforeMount, nextTick } from 'vue'
import axios from '../../../../request/http.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const Bgtable = ref(null)
const state = reactive({
filter: {
page: 1,
limit: 10,
search: "",
},
},
headers: [
{
label: "角色名",
......@@ -153,6 +228,35 @@ const state = reactive({
selection: [],
delDialog: false,
delType: 1, // 删除类型 1-单条删除 2-批量删除
distributeDialog: false, // 分配用户弹窗
})
const userState = reactive({
userFilter: {
type: "",
org: "",
search: "",
},
userTypeList: [
{
name: "全部类型",
value: ""
},
{
name: "业务系统账号",
value: 1
},
{
name: "组织管理员账号",
value: 2
},
{
name: "平台用户账号",
value: 3
},
],
orgList: [
]
})
const getRoleRows = () => {
let params = {...state.filter}
......@@ -196,8 +300,12 @@ const changeUseRow = (row) => {
})
} // 更改启用禁用状态
const selectRows = (rows) => {
state.selection = rows
const selectRows = (data) => {
state.selection = data.selection
} // 表格多选
const clearSelection = () => {
Bgtable.value.clearSelection()
}
const register = () => {
......@@ -215,6 +323,14 @@ const edit_row = (row) => {
})
} // 编辑角色
const distribute_user = (row) => {
state.distributeDialog = true
}
const distribute = () => {
state.distributeDialog = false
}
const delete_row = (row) => {
state.actionRow = row
state.delType = 1
......@@ -242,7 +358,6 @@ const deleteData = () => {
let params = {
ids: [...ids]
}
console.log(params)
axios
.delete(`/apaas/system/v5/role/delete`,{data: {ids:[...ids]}})
.then((res) => {
......@@ -265,7 +380,15 @@ const {
tableRows,
tableTotal,
delDialog,
selection,
distributeDialog,
} = toRefs(state)
const {
userFilter,
userTypeList,
orgList,
} =toRefs(userState)
</script>
<style lang="scss" scoped>
......@@ -297,7 +420,66 @@ const {
max-height: calc(100% - 64px);
}
}
.select_text {
display: inline-block;
margin-left: 40px;
font-size: 14px;
color: #404a62;
.num {
color: #202531;
font-weight: 700;
margin: 0 3px;
}
.can_click_text {
margin-left: 24px;
}
}
}
.distribute_dialog {
.distribute_box {
width: 100%;
height: 626px;
.topFilter {
height: 68px;
padding: 16px;
border-bottom: 1px solid #e6e9ef;
display: flex;
text-align: left;
font-size: 14px;
align-items: center;
.left {
width: 240px;
padding-left: 15px;
color: #404a62;
.num {
color: #202531;
font-weight: 700;
margin: 0 3px;
}
.can_click_text {
margin-left: 24px;
}
}
.right {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.el-button {
margin: 0;
width: 64px;
}
}
}
}
}
}
</style>
<style>
.distribute_dialog .el-dialog__footer {
padding: 16px!important;
}
.distribute_dialog .el-dialog__body {
padding: 0px!important;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment