메뉴 DB 삽입, 삭제 구현

Author: 2ByungJun

src/store/index.js

@@ -10,4 +10,4 @@ export default new Vuex.Store({
  page,
  menu,
  }
-})
+})

src/store/modules/menu.js

@@ -55,6 +55,24 @@ export default {
  },
  },
  actions: {
+ // 메뉴 파일 삭제
+ async deleteMenu({dispatch}, data){
+ await axios.post('vue/deleteMenu', {'menuSeq' : data.id})
+ await dispatch('selectMenus')
+ },
+
+ // 메뉴 파일 삽입
+ async insertMenu({dispatch}, data){
+ console.log(data)
+ var isLeaf = data.isLeaf == true ? 'Y' : 'N'
+ await axios.post('vue/insertMenu', {
+ 'upperMenuSeq' : data.pid, 
+ 'registId' : 'admin', 
+ 'isLeaf' : isLeaf
+ })
+ await dispatch('selectMenus')
+ },
+
  // 메뉴와 연결 안된 페이지 리스트 호출 액션
  async selectNotConnectPage({commit}){
  await axios.get('vue/selectNotConnectPage').then((res) => {
@@ -126,12 +144,7 @@ export default {
  case "1":
  tree.push(child)
  break
- case "2":
- if(parent){
- parent.children.push(child)
- }
- break
- case "3":
+ default:
  if(parent){
  parent.children.push(child)
  }
@@ -144,4 +157,10 @@ export default {
  },
  getters: {
  }
-}
+}
+
+// dragDisabled: true,
+// addTreeNodeDisabled: true,
+// addLeafNodeDisabled: true,
+// editNodeDisabled: true,
+// delNodeDisabled: true,

src/views/menu/MenuTree.vue

@@ -14,10 +14,10 @@
  <template v-slot:leafNameDisplay="slotProps">
  <span>{{ slotProps.model.name }}</span>
  </template>
- <span class="icon" slot="addTreeNodeIcon" style="display:none">📂</span>
+ <span class="icon" slot="addTreeNodeIcon">📂</span>
  <span class="icon" slot="addLeafNodeIcon">📃</span>
- <span class="icon" slot="editNodeIcon">📝</span>
- <span class="icon" slot="delNodeIcon">✂️</span>
+ <span class="icon" slot="editNodeIcon" style="display:none">📝</span>
+ <span class="icon" slot="delNodeIcon">❌</span>
  <span class="icon" slot="leafNodeIcon">📃</span>
  <span class="icon" slot="treeNodeIcon">📂</span>
  </vue-tree-list>
@@ -56,9 +56,7 @@ export default {
  }
  },
  onDel(node) {
- console.log('---onDel---')
- console.log(node)
- node.remove()
+ this.$store.dispatch('menu/deleteMenu', node)
  },
  onChangeName(params) {
  if(params.eventTpye == "blur"){
@@ -67,8 +65,7 @@ export default {
  }
  },
  onAddNode(params) {
- console.log('---onAddNode---')
- console.log(params)
+ this.$store.dispatch('menu/insertMenu', params)
  },
  addNode() {
  console.log('---addNode---')