Skip to content

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

update：菜单管理对接接口，字典配置对接上下移

parent f5a9cb0b
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 111 deletions
src/bg-ui/bg-table-btns-more.vue
View file @ 21fea5e2
......@@ -38,6 +38,7 @@ export default {
}
},
clickAction({ callback }) {
this.$parent.hideBox()
typeof callback === "function" && callback();
},
getName({ name }) {
......
src/bg-ui/bg-table-btns.vue
View file @ 21fea5e2
......@@ -53,6 +53,9 @@ export default {
},
},
methods: {
hideBox() {
this.showMore = false
},
isDisabled({ disabled }) {
if (typeof disabled === "function") {
return disabled();
......
src/page/main/config/dict/index.vue
View file @ 21fea5e2
......@@ -56,7 +56,7 @@
</template>
</bg-filter-group>
<div class="table_container">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true" :select="true">
<bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
<template v-slot:updated_time="{ row }">
{{ row.updated_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
</template>
......@@ -521,20 +521,20 @@ const moveRow = (row,type) => {
sort: row.sort
}
]
// axios
// .put(``,[...params])
// .then((res) => {
// if (res.data.code == 200) {
// ElMessage.success(res.data.data)
// state.tableRows = []
// changePage(1)
// }else {
// ElMessage.error(res.data.data)
// }
// })
// .catch((err) => {
// console.log(err)
// })
axios
.put(`/apaas/system/v5/dictionary/sort`,[...params])
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.tableRows = []
changePage(1)
}else {
ElMessage.error(res.data.data)
}
})
.catch((err) => {
console.log(err)
})
}
onBeforeMount(() => {
......
src/page/main/develop/menu/index.vue
View file @ 21fea5e2
......@@ -25,6 +25,7 @@
:highlight-current="true"
node-key="menu_id"
ref="menuTree"
:filter-node-method="filterNode"
>
<template #default="{ node, data }">
<div class="custom-tree-node" pointer-events="none">
......@@ -74,7 +75,7 @@
<div class="flex_right">
<div class="main_container">
<div class="base-info bg-scroll">
<menuForm ref="menuFormRef" :data="menuFormData" @action="getMenuFormData"></menuForm>
<menuForm ref="menuFormRef" :data="menuFormData"></menuForm>
</div>
<div class="base-btn">
<el-button type="primary" @click="saveMenu(menuFormRef,addType)">
......@@ -89,51 +90,61 @@
<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount, watch } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
import menuForm from './menu-form.vue'
const router = useRouter();
const menuTree = ref(null)
const treeAction = ref(null)
const menuFormRef = ref(null)
const menuTree = ref(null) // 树形
const treeAction = ref(null) // 树形操作弹出框
const menuFormRef = ref(null) // 右侧表单
const acTop = ref('');
const acLeft = ref('');
const acBottom = ref('');
const actionFlag = ref(false)
const actionFlag = ref(false) // 弹出框状态标识
const state = reactive({
data: [],
search: "",
selectData:null,
selectParentData:null,
data: [], // 树形数据
search: "", // 树形搜索
selectData:null, // 当前选中的节点
selectParentData:null, // 当前选中节点的父节点
treeAction,
menuTree,
bottomGap:30,//弹窗吸底高度
defaultProps: {
children: 'Child',
label: 'menu_name',
},
actionDataIndex: 0,
menuFormData: null,
}, // 树形配置
actionDataIndex: 0, // 当前选中节点在本级的位置，用来判断是否可以上下移动
menuFormData: null, // 菜单数据
addType: 1, // 1-新增本级 2-新增下级
newMenuId: 0,
newMenuId: 0, // 新增菜单时用来指定menu_id，达到选中效果
timer: null, // 定时器
})
const moveIndex = computed({
get: () => {
let index = 0
if(state.selectData) {
console.log(state.selectData)
findIndex(state.selectData.menu_id,state.data)
index = state.actionDataIndex
}
return index
}
})
}) // 计算上下移动
watch(() => state.search,(n,o) => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
state.menuTree.filter(n)
}, 500);
}) // 树形搜索值
const getMenuTree = () => {
axios
.get(`/apaas/system/v5/menu/tree`)
......@@ -155,11 +166,11 @@ const getMenuTree = () => {
}
})
} // 获取菜单树
const findIndex= (code,arr) => {
arr.forEach((e,i) => {
if (e.menu_id == code) {
state.actionDataIndex = i
console.log(e,i)
}else {
if (e.Child && e.Child.length > 0) {
findIndex(code,e.Child)
......@@ -174,7 +185,6 @@ const showAction = (e, data,node) => {
acBottom.value = ''
const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
var allHeight = document.body.scrollHeight
console.log(rect, data,node);
actionFlag.value = true;
state.selectData = data
......@@ -200,7 +210,6 @@ const showAction = (e, data,node) => {
})
} // 树形操作框
const handleNodeClick = (data) => {
if (state.selectData && state.selectData.menu_id == data.menu_id) {
return
......@@ -210,10 +219,16 @@ const handleNodeClick = (data) => {
closeAction()
} // 菜单树节点点击
const filterNode = (val,data) => {
if (!val) {
return true
}
return data.menu_name.includes(val)
} // 树形筛选
const fileAction = (val,data,parent,disabled=false) => {
if (val == 1) {
if (val == 1) { // 新建本级菜单
state.addType = 1
console.log("新建本级", data ,parent,disabled)
let newChild = {
menu_name: "新菜单",
menu_id: 'new' + state.newMenuId,
......@@ -227,9 +242,8 @@ const fileAction = (val,data,parent,disabled=false) => {
state.menuTree && state.menuTree.setCurrentKey(newChild.menu_id);
handleNodeClick(newChild);
state.newMenuId++
}else if (val == 2) {
}else if (val == 2) { // 新建下级菜单
state.addType = 2
console.log("新建下级",data,parent,disabled)
let newChild = {
menu_name: "新菜单",
menu_id: 'new' + state.newMenuId,
......@@ -244,9 +258,7 @@ const fileAction = (val,data,parent,disabled=false) => {
handleNodeClick(newChild);
state.selectParentData = data
state.newMenuId++
test()
}else if (val == 3) {
console.log("删除",data,parent,disabled)
}else if (val == 3) { // 删除菜单
axios
.delete(`/apaas/system/v5/menu/${data.id}`)
.then((res) => {
......@@ -258,20 +270,44 @@ const fileAction = (val,data,parent,disabled=false) => {
ElMessage.error(res.data.data)
}
})
test()
}else if (val == 4) {
console.log("上移",data,parent,disabled)
test()
}else if (val == 4) { // 菜单上移
if (disabled) {
return
}
test()
let nextObj = null
if (parent) {
parent.Child.forEach((e,i)=> {
if (data.id == e.id) {
nextObj = parent.Child[i-1]
}
})
}else {
console.log("下移",data,parent,disabled)
state.data.forEach((e,i) => {
if (data.id == e.id) {
nextObj = state.data[i-1]
}
})
}
changeSort(data,nextObj)
}else { // 菜单下移
if (disabled) {
return
}
test()
let nextObj = null
if (parent) {
parent.Child.forEach((e,i)=> {
if (data.id == e.id) {
nextObj = parent.Child[i+1]
}
})
}else {
state.data.forEach((e,i) => {
if (data.id == e.id) {
nextObj = state.data[i+1]
}
})
}
changeSort(data,nextObj)
}
if (menuFormRef) {
nextTick().then(() => {
......@@ -281,22 +317,37 @@ const fileAction = (val,data,parent,disabled=false) => {
}
})
})
}
} // 清除表单验证
} // 各种操作按钮
const test = () => {
console.log("执行了")
}
const changeSort = (data,nextObj) => {
let params = [
{
id: data.id,
sort: nextObj.sort
},
{
id: nextObj.id,
sort: data.sort
}
]
axios
.put(`/apaas/system/v5/menu/sort`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
getMenuTree()
}else {
ElMessage.error(res.data.data)
}
})
} // 菜单上下移
const closeAction = () => {
actionFlag.value = false;
} // 点击其他地方，菜单操作框关闭
const getMenuFormData = (date) => {
}
const saveMenu = (el,type) => {
console.log(el,type)
let params = {
menu_name: el.menuForm.menu_name,
menu_type: el.menuForm.menu_type,
......@@ -322,24 +373,25 @@ const saveMenu = (el,type) => {
}else { // 新增下级
params.p_menu_id = state.selectParentData.menu_id
}
console.log(123)
axios
.post(`/apaas/system/v5/menu/add`,params)
.then((res) => {
if (res.data.code == 200) {
ElMessage.success(res.data.data)
state.selectData = null
getMenuTree()
}else {
ElMessage.error(res.data.data)
}
})
}
}
} // 保存按钮，新增或编辑菜单
onBeforeMount(()=>{
window.addEventListener("click", closeAction)
window.addEventListener("scroll", closeAction,true)
getMenuTree()
})
onBeforeUnmount(()=>{
......@@ -360,24 +412,45 @@ const {
</script>
<style scoped>
.flex_left {
background-color: #fff;
height: calc(100% - 16px);
width: 320px;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
margin-right: 10px;
overflow: hidden;
}
.flex_right {
background-color: #fff;
height: calc(100% - 16px);
flex: 1;
box-shadow: 0px 1px 4px 0px
rgba(0, 7, 101, 0.15);
border-radius: 6px;
overflow: hidden;
}
.tree_content {
overflow: hidden;
height: calc(100% - 4px);
position: relative;
overflow: hidden;
height: calc(100% - 4px);
position: relative;
}
.search {
padding: 16px 16px 10px;
padding: 16px 16px 10px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
overflow: auto;
height: calc(100% - 65px);
}
.tree :deep().el-tree-node .el-tree-node__content {
padding: 0 16px!important;
.tree :deep().el-tree-node>.el-tree-node__content {
/* padding: 0 16px!important; */
}
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
padding-left: 16px;
overflow: unset;
/* padding-left: 16px; */
}
.tree-action-box {
......@@ -393,6 +466,17 @@ padding-left: 16px;
.tree .el-tree-node__content:hover .tree-action-box {
display: inline-block;
}
.tree .el-tree {
position: static!important;
}
.tree .el-tree :deep().el-tree-node__content{
height: 36px!important;
}
.tree .el-tree :deep().el-tree-node__content:hover {
background-image: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 83%,
rgba(0, 0, 0, 0.05) 86%);
}
.tree-more {
font-size: 12px;
color: #3759be;
......
src/page/main/develop/menu/menu-form.vue
View file @ 21fea5e2
......@@ -23,7 +23,7 @@
<el-option
v-for="item in groupList"
:key="item.dict_id"
:label="item.name"
:label="item.dict_name"
:value="item.dict_id"
/>
</el-select>
......@@ -78,7 +78,7 @@
</el-input>
</div>
<div class="icon_content bg-scroll">
<div class="icon_item" v-for="(e,i) in iconArr" :key="i+100" @click="changeIcon(e)">
<div class="icon_item" v-for="(e,i) in showIconArr" :key="i+100" @click="changeIcon(e)">
<span>
<bg-icon
class="selectBgIcon"
......@@ -106,7 +106,7 @@ const props = defineProps({
data: {
type: Object,
default: null,
}
},
})
const state = reactive({
menuRef,
......@@ -133,83 +133,85 @@ const state = reactive({
]
},
groupList: [],
iconFlag: false,
icon_search: "",
iconArr: [],
iconFlag: false, // 图标盒子
icon_search: "", // 图标筛选
iconArr: [], // 所有的图标
showIconArr: [], // 展示的图标
timer: null,
})
const emit = defineEmits(['action'])
const submitForm = async () => {
if (!state.menuRef) return
await state.menuRef.validate((valid, fields) => {
if (valid) {
emit('action', state.menuForm)
} else {
emit('action',null)
}
})
}
const getGroupList = () => {
axios
.get(`/apaas/system/v5/dictionary/list?state=1&id=5`)
.get(`/apaas/system/v5/menu/group/dict`)
.then((res) => {
if (res.data.code == 200) {
state.groupList = res.data.data || []
console.log(state.groupList)
}else {
ElMessage.error(res.data.data)
}
}).catch((err) => {
console.log(err)
})
}
} // 获取分组数据
const openIconbox = () => {
state.iconFlag = !state.iconFlag
}
state.icon_search = ""
searchIcon()
} // 打开/关闭图标盒子
const searchIcon = () => {
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(() => {
let iconList = []
if (state.icon_search == "") {
state.showIconArr = state.iconArr
}else {
state.iconArr.map(e => {
if (e.name.indexOf(state.icon_search) !== -1) {
iconList.push(e)
}
})
state.showIconArr = iconList
}
},500)
} // 图标筛选
}
const clearForm = () => {
if (!state.menuRef) return
state.menuRef.resetFields()
}
const setForm = (data) => {
state.menuForm = Object.assign(state.menuForm, data);
}
} // 表单赋值
const clearIcon = () => {
state.menuForm.menu_logo = ""
}
} // 清除选中的图标
const changeIcon = (e) => {
console.log(e)
state.menuForm.menu_logo = e.icon
state.iconFlag = false
}
state.icon_search = ""
searchIcon()
} // 选中图标
onMounted(() => {
// 处理图标数据
allIconArr.forEach(e => {
state.iconArr.push({
icon: e,
name: e.replace("bg-ic-","")
})
})
state.showIconArr = state.iconArr
getGroupList()
})
const {
menuForm,
formRules,
groupList,
iconFlag,
iconArr
showIconArr,
icon_search,
} = toRefs(state)
onMounted(() => {
getGroupList()
})
defineExpose({ submitForm, clearForm, setForm , menuForm, menuRef })
defineExpose({ setForm , menuForm, menuRef })
</script>
<style lang="scss" scoped>
......
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