github-learning · github-learning · Dec 16, 2024 · Dec 15, 2024 · Dec 16, 2024 · Dec 16, 2024
diff --git a/components.d.ts b/components.d.ts
@@ -20,6 +20,7 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']

diff --git a/src/apis/menu.ts b/src/apis/menu.ts
@@ -40,5 +40,5 @@ export const updateMenuById = (
  * @returns
  */
 export const updateBulkMenu = (data: Partial<MenuData>[]): Promise<Api> => {
-  return request.patch('/menu/update', { access: data })
+  return request.patch('/menu', { access: data })
 }
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
@@ -57,7 +57,7 @@ export const useMenuStore = defineStore('menu', () => {
 
   const updateBulkMenu = async () => {
     // 1.更新sortId
-    state.menuTreeData.forEach((menu, idx) => (menu.sort_id = idx))
+    state.menuTreeData.forEach((menu, idx) => (menu.sortId = idx))
     // 2.删除子节点
     const menus = state.menuTreeData.map((menu) => {
       const temp = { ...menu }

diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
@@ -40,11 +40,14 @@
         :data="editData!"
         @updateEdit="handleUpdateEdit"
       />
-      <span v-if="editData == null">从菜单列表选择一项后，进行编辑</span>
+
+      <span v-if="Object.keys(editData).length === 0"
+        >从菜单列表选择一项后，进行编辑</span
+      >
     </el-card>
-    <right-panel v-model="panelVisible" :title="panelTitle" :size="330">
+    <el-drawer v-model="panelVisible" :title="panelTitle" :size="330">
       <add-menu @submit="submitMenuForm"></add-menu>
-    </right-panel>
+    </el-drawer>
   </div>
 </template>
 
@@ -71,16 +74,11 @@ const handleUpdateEdit = async (data: Partial<MenuData>) => {
 }
 // 拖拽节点
 const allowDrag = (draggingNode: Node) => {
-  return (
-    draggingNode.data.parent_id !== 0 || draggingNode.data.parent_id != null
-  )
+  return draggingNode.data.parentId !== 0 || draggingNode.data.parentId != null
 }
 type DropType = 'prev' | 'inner' | 'next'
 const allowDrop = (draggingNode: Node, dropNode: Node, type: DropType) => {
-  if (
-    draggingNode.data.parent_id === 0 ||
-    draggingNode.data.parent_id == null
-  ) {
+  if (draggingNode.data.parentId === 0 || draggingNode.data.parentId == null) {
     return type !== 'inner'
   }
 }
@@ -129,15 +127,15 @@ const resetStatus = () => {
 
 const genMenuSortId = (list: ITreeItemData[]) => {
   if (list && list.length) {
-    return list[list.length - 1].sort_id + 1
+    return list[list.length - 1].sortId + 1
   }
   return 0
 }
 
 const handleAddRootMenu = async (data: MenuData) => {
-  // parent_id , sord_id
-  data.parent_id = 0
-  data.sort_id = genMenuSortId(menus.value) // 根节点是根据 所有的父节点来计算的， 儿子是根据爸爸有几个儿子来算的
+  // parentId , sord_id
+  data.parentId = 0
+  data.sortId = genMenuSortId(menus.value) // 根节点是根据 所有的父节点来计算的， 儿子是根据爸爸有几个儿子来算的
   let res = await store.appendMenu(data)
   if (res) {
     proxy?.$message.success('根菜单添加成功了')
@@ -149,8 +147,8 @@ const genChild = (data: MenuData) => {
   if (!parent.children) {
     parent.children = []
   }
-  data.sort_id = genMenuSortId(parent.children)
-  data.parent_id = parent.id
+  data.sortId = genMenuSortId(parent.children)
+  data.parentId = parent.id
   return data
 }
 const handleChildRootMenu = async (data: MenuData) => {

diff --git a/src/views/system/role/components/roleMenu.vue b/src/views/system/role/components/roleMenu.vue
@@ -1,4 +1,4 @@
-<!-- <template>
+<template>
   <el-dialog v-model="dialogVisible">
     <el-tree
       :data="treeData"
@@ -20,94 +20,84 @@
 
 <script lang="ts" setup>
 import { IRole } from '@/apis/role'
-// import { useMenuStore } from '@/stores/menu'
+import { useMenuStore } from '@/stores/menu'
 import { PropType } from 'vue'
 import { ElTree } from 'element-plus'
 import Node from 'element-plus/es/components/tree/src/model/node.mjs'
-// import { allocRoleAccess, getRoleAccess } from '@/api/roleAccess'
-// import { useReloadPage } from '@/hooks/useReloadPage'
 import { allocRoleAccess, getRoleAccess } from '@/apis/roleAccess'
+import { useReloadPage } from '@/hooks/useReloadPage'
 
 const checkStrictly = ref(false)
-// const { reloadPage } = useReloadPage()
-const treeData = ref([])
-// const store = useMenuStore()
-// const treeData = computed(() => store.state.menuTreeData) // 所有的菜单
-// onMounted(() => {
-//   store.getAllMenuList()
-// })
+const { reloadPage } = useReloadPage()
+const store = useMenuStore()
+const treeData = computed(() => store.state.menuTreeData) // 所有的菜单
+onMounted(() => {
+  store.getAllMenuList()
+})
 const defaultProps = {
   children: 'children',
   label: 'title'
 }
 type ElTreeInstance = InstanceType<typeof ElTree>
 const menuTree = ref<ElTreeInstance | null>(null)
 
-// const isCheckAll = ref(false)
+const isCheckAll = ref(false)
 const handleCheckAll = () => {
-  // if (!isCheckAll.value) {
-  //   menuTree.value?.setCheckedNodes(treeData.value as unknown as Node[], false)
-  // } else {
-  //   menuTree.value?.setCheckedNodes([], false)
-  // }
-  // isCheckAll.value = !isCheckAll.value
+  if (!isCheckAll.value) {
+    menuTree.value?.setCheckedNodes(treeData.value as unknown as Node[], false)
+  } else {
+    menuTree.value?.setCheckedNodes([], false)
+  }
+  isCheckAll.value = !isCheckAll.value
 }
-// const { proxy } = getCurrentInstance()!
-// const handleSubmit = async () => {
-//   const tree = menuTree.value!
-//   const keys = tree.getCheckedKeys(false) // 所有选中的节点
-//   const halfKeys = tree.getHalfCheckedKeys()
-//   const selectKeys = [...keys, ...halfKeys]
+const { proxy } = getCurrentInstance()!
+const handleSubmit = async () => {
+  const tree = menuTree.value!
+  const keys = tree.getCheckedKeys(false) // 所有选中的节点
+  const halfKeys = tree.getHalfCheckedKeys()
+  const selectKeys = [...keys, ...halfKeys]
 
-//   const res = await allocRoleAccess(role.id, selectKeys as number[])
-//   if (res.code === 0) {
-//     proxy?.$message.success('权限分配成功')
-//     reloadPage()
-//   }
-// }
-const handleSubmit = () => {}
+  const res = await allocRoleAccess(role.id, selectKeys as number[])
+  if (res.code === 0) {
+    proxy?.$message.success('权限分配成功')
+    reloadPage()
+  }
+}
 
-// const { role, modelValue } = defineProps({
-//   role: {
-//     type: Object as PropType<IRole>,
-//     required: true
-//   },
-//   modelValue: {
-//     type: Boolean,
-//     default: false
-//   }
-// })
-// const dialogVisible = ref(modelValue)
-// const emit = defineEmits(['update:modelValue'])
+const { role, modelValue } = defineProps({
+  role: {
+    type: Object as PropType<IRole>,
+    required: true
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+const dialogVisible = ref(modelValue)
+const emit = defineEmits(['update:modelValue'])
 
-// watch(
-//   () => dialogVisible.value,
-//   (newValue) => {
-//     emit('update:modelValue', newValue)
-//   }
-// )
+watch(
+  () => dialogVisible.value,
+  (newValue) => {
+    emit('update:modelValue', newValue)
+  }
+)
 const getRoleAccessList = async () => {
-  // checkStrictly.value = true // 先解除关系
-  // const res = await getRoleAccess(role.id)
-  // if (res.code === 0) {
-  //   const access = res.data.map((item) => item.access_id)
-  //   menuTree.value?.setCheckedKeys(access)
-  //   setTimeout(() => {
-  //     checkStrictly.value = false
-  //   }, 0)
-  // }
+  checkStrictly.value = true // 先解除关系
+  const res = await getRoleAccess(role.id)
+  if (res.code === 0) {
+    const access = res.data.map((item) => item.access_id)
+    menuTree.value?.setCheckedKeys(access)
+    setTimeout(() => {
+      checkStrictly.value = false
+    }, 0)
+  }
   //
 }
 
 onMounted(() => {
   console.log('----')
   getRoleAccessList()
 })
-</script> -->
-
-<template>
-  <div>111</div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped></style>
+</script>