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

src/bg-ui/bg-table-btns-more.vue

@@ -38,6 +38,7 @@ export default {
       }
     },
     clickAction({ callback }) {
+      this.$parent.hideBox()
       typeof callback === "function" && callback();
     },
     getName({ name }) {

src/bg-ui/bg-table-btns.vue

@@ -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

@@ -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

@@ -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

@@ -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>