From d2503ee227b694def22614d2cd88e3a53fc3052f Mon Sep 17 00:00:00 2001
From: ruibaby <i@ryanc.cc>
Date: Thu, 25 Apr 2019 23:54:34 +0800
Subject: [PATCH] Complete menu create with parent.

---
 src/views/interface/MenuList.vue              | 13 ++---
 .../interface/components/MenuSelectTree.vue   | 56 +++++++++++++++++++
 2 files changed, 62 insertions(+), 7 deletions(-)
 create mode 100644 src/views/interface/components/MenuSelectTree.vue

diff --git a/src/views/interface/MenuList.vue b/src/views/interface/MenuList.vue
index f4b8ee4f9..2c80ff014 100644
--- a/src/views/interface/MenuList.vue
+++ b/src/views/interface/MenuList.vue
@@ -24,13 +24,10 @@
               <a-input v-model="menuToCreate.url" />
             </a-form-item>
             <a-form-item label="上级菜单：">
-              <a-select v-model="menuToCreate.parentId">
-                <a-select-option
-                  v-for="(menu,index) in menus"
-                  :key="index"
-                  :value="menu.id"
-                >{{ menu.name }}</a-select-option>
-              </a-select>
+              <menu-select-tree
+                :menus="menus"
+                v-model="menuToCreate.parentId"
+              />
             </a-form-item>
             <a-form-item label="排序编号：">
               <a-input
@@ -120,6 +117,7 @@
 </template>
 
 <script>
+import MenuSelectTree from './components/MenuSelectTree'
 import menuApi from '@/api/menu'
 const columns = [
   {
@@ -146,6 +144,7 @@ const columns = [
   }
 ]
 export default {
+  components: { MenuSelectTree },
   data() {
     return {
       data: [],
diff --git a/src/views/interface/components/MenuSelectTree.vue b/src/views/interface/components/MenuSelectTree.vue
new file mode 100644
index 000000000..6ed5cf44d
--- /dev/null
+++ b/src/views/interface/components/MenuSelectTree.vue
@@ -0,0 +1,56 @@
+<template>
+  <a-tree-select
+    :treeData="menuTreeData"
+    placeholder="请选择上级菜单，默认为顶级菜单"
+    treeDefaultExpandAll
+    :treeDataSimpleMode="true"
+    :allowClear="true"
+    @change="handleSelectionChange"
+  >
+  </a-tree-select>
+</template>
+
+<script>
+export default {
+  name: 'MenuSelectTree',
+  model: {
+    prop: 'menuId',
+    event: 'change'
+  },
+  props: {
+    menuId: {
+      type: Number,
+      required: true,
+      default: 0
+    },
+    menus: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    menuTreeData() {
+      return this.menus.map(menu => {
+        return {
+          id: menu.id,
+          title: menu.name,
+          value: menu.id.toString(),
+          pId: menu.parentId
+        }
+      })
+    }
+  },
+  methods: {
+    handleSelectionChange(value, label, extra) {
+      this.$log.debug('value: ', value)
+      this.$log.debug('label: ', label)
+      this.$log.debug('extra: ', extra)
+      this.$emit('change', value ? parseInt(value) : 0)
+    }
+  }
+}
+</script>
+
+<style>
+</style>