From ba769e6592fc0ddb8ae24b7a5906c55ce611f684 Mon Sep 17 00:00:00 2001
From: Lu Chaohai <luchaohai@cn.ibm.com>
Date: Tue, 31 Jul 2018 21:10:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=AC=AC=E4=B8=80?=
 =?UTF-8?q?=E6=AD=A5=EF=BC=9A=E5=AE=9A=E5=88=B6=E8=87=AA=E5=B7=B1=E7=9A=84?=
 =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly ce0304d2a56962ad9fe64a12c802c11909457afa [formerly 37d262cdbc810790b833d06503ca0c38d940310c [formerly 2afb0e2f7d7ca0d7ef3df1a34ccbf726786370d6]]]]]
Former-commit-id: 5868cdaeb5da645fd4964e4f8d0375e9bd8df178
Former-commit-id: 3742735054ffd6dea30adab4803c9d4187091467
Former-commit-id: 4907c8e6ed8b8769d5f441076d9e4c65474440d9 [formerly 4dab0307c98aef7e71ba749887fbb95a48b12ed5]
Former-commit-id: 224a72f5de9cdabacdac076fb58516dbca6a0216
Former-commit-id: 6f1576eec600ef6f192850f449ac6b67e71f30e1
Former-commit-id: 095d0f4d404728bb68ee56e4193ad4d53548a119
Former-commit-id: 9da6f4c2e4c0c2ef4f5ae43b34d9ad1c5f0910c0
Former-commit-id: 7b871cd75a69dfea4053644bc8852db779b67fb6
---
 .../components/contextmenu/index.vue          | 67 +++++++++++++++++++
 .../header-aside/components/tabs/index.vue    | 35 +++++++++-
 2 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 src/layout/header-aside/components/contextmenu/index.vue

diff --git a/src/layout/header-aside/components/contextmenu/index.vue b/src/layout/header-aside/components/contextmenu/index.vue
new file mode 100644
index 00000000..deba534d
--- /dev/null
+++ b/src/layout/header-aside/components/contextmenu/index.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="d2-contextmenu" v-show="flag" :style="style">
+    <slot />
+  </div>
+</template>
+<style>
+  .d2-contextmenu {
+    position: absolute;
+    padding: 5px;
+    z-index: 2018;
+    background: white;
+    border: 1px solid #cfd7e5;
+    border-radius: 3px;
+    box-shadow: 0px 0px 5px #ccc;
+  }
+</style>
+<script>
+export default {
+  name: 'd2-contextmenu',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    flag: {
+      get () {
+        console.log('change flag')
+        if (this.visible) {
+          // 注册全局监听事件[目前只考虑鼠标解除触发]
+          window.addEventListener('mousedown', this.watchContextmenu)
+        }
+        return this.visible
+      },
+      set (newVal) {
+        this.$emit('update:visible', newVal)
+      }
+    },
+    style () {
+      return {
+        left: this.x + 'px',
+        top: this.y + 'px',
+        display: this.visible === true ? 'block' : 'none '
+      }
+    }
+  },
+  methods: {
+    watchContextmenu () {
+      this.flag = false
+      window.removeEventListener('mousedown', this.watchContextmenu)
+    }
+  },
+  mounted () {
+    // 将菜单放置到body下
+    document.querySelector('body').appendChild(this.$el)
+  }
+}
+</script>
diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue
index 8c31778f..0f91f97e 100644
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -2,18 +2,24 @@
   <div class="d2-multiple-page-control-group" flex>
     <div class="d2-multiple-page-control-content" flex-box="1">
       <div class="d2-multiple-page-control-content-inner">
+        <d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
+          test
+        </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
           :value="pageCurrent"
           type="card"
           :closable="true"
           @tab-click="handleClick"
-          @edit="handleTabsEdit">
+          @edit="handleTabsEdit"
+          @contextmenu.native="handleContextmenu">
           <el-tab-pane
+            class="hello"
             v-for="(page, index) in pageOpenedList"
             :key="index"
             :label="page.meta.title || '未命名'"
-            :name="page.name">
+            :name="page.name"
+            >
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -49,7 +55,18 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex'
+import D2Contextmenu from '../contextmenu'
 export default {
+  components: {
+    D2Contextmenu
+  },
+  data () {
+    return {
+      contextmenuFlag: false,
+      contentmenuX: 0,
+      contentmenuY: 0
+    }
+  },
   computed: {
     ...mapState({
       pageOpenedList: state => state.d2admin.pageOpenedList,
@@ -63,6 +80,20 @@ export default {
       'd2adminTagCloseOther',
       'd2adminTagCloseAll'
     ]),
+    /**
+     * @description 右键菜单功能点击
+     */
+    handleContextmenu (event) {
+      let target = event.target
+      if (target.className.indexOf('el-tabs__item') > -1 || target.parentNode.className.indexOf('el-tabs__item') > -1) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.contextmenuFlag = true
+        this.contentmenuX = event.clientX
+        this.contentmenuY = event.clientY
+        console.log(event)
+      }
+    },
     /**
      * @description 接收点击关闭控制上选项的事件
      */

From 19410908a83b980c6ac69e812880806351898675 Mon Sep 17 00:00:00 2001
From: Lu Chaohai <luchaohai@cn.ibm.com>
Date: Wed, 1 Aug 2018 13:19:11 +0800
Subject: [PATCH 2/2] =?UTF-8?q?1.=20vuex=E9=87=8C=20=E5=AF=B9d2adminTagClo?=
 =?UTF-8?q?seLeft=EF=BC=8Cd2adminTagCloseRight=EF=BC=8Cd2adminTagCloseOthe?=
 =?UTF-8?q?r=20=E5=81=9A=E4=BA=86=E5=85=BC=E5=AE=B9=E6=80=A7=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0=E3=80=90=E4=BD=BF=E5=BE=97=E4=BD=A0=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3=E4=B8=8D=E9=9C=80=E8=A6=81=E4=BF=AE=E6=94=B9=E3=80=91?=
 =?UTF-8?q?=EF=BC=9A=20=E6=97=A0=E5=8F=82=E6=95=B0=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E5=92=8C=E5=8F=82=E6=95=B0=E6=B5=8B=E8=AF=95=E9=83=BD=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=E4=BA=86=202.=20=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AAcontentmenuList=E5=81=9A=E5=8F=B3=E9=94=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=86=85=E5=AE=B9=E7=9A=84=E6=B8=B2=E6=9F=93=E5=92=8C?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=20=E2=80=94=E2=80=94=20=E5=A6=82=E6=9E=9C?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E5=B0=86=E5=8F=82=E6=95=B0=E6=8F=90=E5=87=BA?=
 =?UTF-8?q?=E5=87=BA=E6=9D=A5=E5=81=9A=E6=A0=B7=E5=BC=8F=E7=9A=84=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=88=91=E9=9C=80=E8=A6=81=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=88=97=E8=A1=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly 4726d045828af2827cbed2da8b673acb7debd71f [formerly a1a2811342e61d0008f9199254070d700fd3b5bc] [formerly a1a2811342e61d0008f9199254070d700fd3b5bc [formerly 118b051ea28087166f54eedbf4af330e827f3e9c [formerly e4ec6d960fca41d9fbc5c5247ec2dff051bd52ee]]]]]
Former-commit-id: 81e60a1c9c6f35d4683d6caa8ba1e0fa69f8a2e7
Former-commit-id: fd9303ed5c8c13a87a67ee2b803aab4f45665eca
Former-commit-id: 8cf659c2a6adf39509fd79ecd295bc020ca833a4 [formerly 242bb104727c67d7c5fb3d2861ca3fb09e8c91a4]
Former-commit-id: 2fa2f3625e7db96c90c1dcf2fba4da685f233be8
Former-commit-id: bc7df38e257b2025ce107f09b01292ba256ee94c
Former-commit-id: d07007823fcd159cb496ed0db922e017449a5ea6
Former-commit-id: 72e5cd2e6d9c3293f38fa6eee6fb34b3e6947ad3
Former-commit-id: f704ab58381896ae24c78f6bf677fc9e23c73273
---
 .../components/contentmenuList/index.vue      | 45 ++++++++++++++++
 .../components/contextmenu/index.vue          | 12 ++---
 .../header-aside/components/tabs/index.vue    | 54 +++++++++++++++----
 src/store/modules/d2admin.js.REMOVED.git-id   |  2 +-
 4 files changed, 97 insertions(+), 16 deletions(-)
 create mode 100644 src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue

diff --git a/src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue b/src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue
new file mode 100644
index 00000000..78247678
--- /dev/null
+++ b/src/layout/header-aside/components/contextmenu/components/contentmenuList/index.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="d2-contentmenu-list" @click="rowClick">
+    <div class="d2-contentmenu-item" flex="cross:center main:center" v-for="item in menulist" :key="item.value" :data-value="item.value">
+      <d2-icon v-if="item.icon" :name="item.icon"/>
+      <div class="d2-contentmenu-item-title" flex-box="1">{{item.title}}</div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+  .d2-contentmenu-list {
+    .d2-contentmenu-item {
+      padding: 8px 20px;
+      margin: 0;
+      font-size: 14px;
+      color: #606266;
+      cursor: pointer;
+      &:hover {
+        background: #ecf5ff;
+        color: #66b1ff;
+      }
+      .d2-contentmenu-item-title {
+        margin-left: 10px;
+      }
+    }
+  }
+</style>
+<script>
+  export default {
+    props: {
+      menulist: {
+        type: Array,
+        default: () => []
+      }
+    },
+    methods: {
+      rowClick (event) {
+        let target = event.target
+        while(!target.dataset.value) {
+          target = target.parentNode
+        }
+        this.$emit('rowClick', target.dataset.value)
+      }
+    }
+  }
+</script>
diff --git a/src/layout/header-aside/components/contextmenu/index.vue b/src/layout/header-aside/components/contextmenu/index.vue
index deba534d..c3866ebe 100644
--- a/src/layout/header-aside/components/contextmenu/index.vue
+++ b/src/layout/header-aside/components/contextmenu/index.vue
@@ -6,12 +6,12 @@
 <style>
   .d2-contextmenu {
     position: absolute;
-    padding: 5px;
+    padding: 5px 0;
     z-index: 2018;
     background: white;
-    border: 1px solid #cfd7e5;
-    border-radius: 3px;
-    box-shadow: 0px 0px 5px #ccc;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   }
 </style>
 <script>
@@ -54,8 +54,8 @@ export default {
     }
   },
   methods: {
-    watchContextmenu () {
-      this.flag = false
+    watchContextmenu (event) {
+      if (!this.$el.contains(event.target)) this.flag = false
       window.removeEventListener('mousedown', this.watchContextmenu)
     }
   },
diff --git a/src/layout/header-aside/components/tabs/index.vue b/src/layout/header-aside/components/tabs/index.vue
index 0f91f97e..f4137be7 100644
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/src/layout/header-aside/components/tabs/index.vue
@@ -3,7 +3,7 @@
     <div class="d2-multiple-page-control-content" flex-box="1">
       <div class="d2-multiple-page-control-content-inner">
         <d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
-          test
+          <d2-contextmenu-list :menulist="contextmenuList" @rowClick="contextmenuClick"></d2-contextmenu-list>
         </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
@@ -56,15 +56,40 @@
 <script>
 import { mapState, mapMutations } from 'vuex'
 import D2Contextmenu from '../contextmenu'
+import D2ContextmenuList from '../contextmenu/components/contentmenuList'
 export default {
   components: {
-    D2Contextmenu
+    D2Contextmenu,
+    D2ContextmenuList
   },
   data () {
     return {
       contextmenuFlag: false,
       contentmenuX: 0,
-      contentmenuY: 0
+      contentmenuY: 0,
+      contextmenuList: [
+        {
+          icon: 'arrow-left',
+          title: '关闭左侧',
+          value: 'left'
+        },
+        {
+          icon: 'arrow-right',
+          title: '关闭右侧',
+          value: 'right'
+        },
+        {
+          icon: 'times',
+          title: '关闭其它',
+          value: 'other'
+        },
+        {
+          icon: 'times-circle',
+          title: '关闭全部',
+          value: 'all'
+        }
+      ],
+      tagName: 'index'
     }
   },
   computed: {
@@ -88,25 +113,36 @@ export default {
       if (target.className.indexOf('el-tabs__item') > -1 || target.parentNode.className.indexOf('el-tabs__item') > -1) {
         event.preventDefault()
         event.stopPropagation()
-        this.contextmenuFlag = true
         this.contentmenuX = event.clientX
         this.contentmenuY = event.clientY
-        console.log(event)
+        this.tagName = target.getAttribute('aria-controls').slice(5)
+        this.contextmenuFlag = true
       }
     },
+    /**
+     * @description 右键菜单的row-click事件
+     */
+    contextmenuClick (command) {
+      this.handleControlItemClick(command, this.tagName)
+    },
     /**
      * @description 接收点击关闭控制上选项的事件
      */
-    handleControlItemClick (command) {
+    handleControlItemClick (command, tagName = null) {
+      if (tagName) this.contextmenuFlag = false
+      const params = {
+        pageSelect: tagName,
+        vm: this
+      }
       switch (command) {
         case 'left':
-          this.d2adminTagCloseLeft()
+          this.d2adminTagCloseLeft(params)
           break
         case 'right':
-          this.d2adminTagCloseRight()
+          this.d2adminTagCloseRight(params)
           break
         case 'other':
-          this.d2adminTagCloseOther()
+          this.d2adminTagCloseOther(params)
           break
         case 'all':
           this.d2adminTagCloseAll(this)
diff --git a/src/store/modules/d2admin.js.REMOVED.git-id b/src/store/modules/d2admin.js.REMOVED.git-id
index 3afd8c33..7248e9ce 100644
--- a/src/store/modules/d2admin.js.REMOVED.git-id
+++ b/src/store/modules/d2admin.js.REMOVED.git-id
@@ -1 +1 @@
-2b2ad59e01ff445075c4b6d63e425cba12153aec
\ No newline at end of file
+22b6be35e998dbde4cfb9b13b41394742608265b
\ No newline at end of file