全部关闭和其他关闭

src/page/index/tags.vue

@@ -1,217 +1,230 @@
 <template>
-  <div class="avue-tags"
-       v-if="showTag">
+  <div class="avue-tags" v-if="showTag">
     <!-- tag盒子 -->
-    <div v-if="contextmenuFlag"
-         class="avue-tags__contentmenu"
-         :style="{left:contentmenuX+'px',top:contentmenuY+'px'}">
-      <div class="item"
-           @click="clearCacheTags">{{$t('tagsView.clearCache')}}
+    <div
+      v-if="contextmenuFlag"
+      class="avue-tags__contentmenu"
+      :style="{ left: contentmenuX + 'px', top: contentmenuY + 'px' }"
+    >
+      <div class="item" @click="clearCacheTags">
+        {{ $t("tagsView.clearCache") }}
       </div>
-      <div class="item"
-           @click="closeOthersTags">{{$t('tagsView.closeOthers')}}
+      <div class="item" @click="closeOthersTags">
+        {{ $t("tagsView.closeOthers") }}
       </div>
-      <div class="item"
-           @click="closeAllTags">{{$t('tagsView.closeAll')}}
+      <div class="item" @click="closeAllTags">
+        {{ $t("tagsView.closeAll") }}
       </div>
     </div>
-    <div class="avue-tags__box"
-         :class="{'avue-tags__box--close':!website.isFirstPage}">
-      <el-tabs v-model="active"
-               type="card"
-               @contextmenu.native="handleContextmenu"
-               :closable="tagLen!==1"
-               @tab-click="openTag"
-               @edit="menuTag">
-        <el-tab-pane :key="item.value"
-                     v-for="item in tagList"
-                     :label="generateTitle(item)"
-                     :name="item.value">
+    <div
+      class="avue-tags__box"
+      :class="{ 'avue-tags__box--close': !website.isFirstPage }"
+    >
+      <el-tabs
+        v-model="active"
+        type="card"
+        @contextmenu.native="handleContextmenu"
+        :closable="tagLen !== 1"
+        @tab-click="openTag"
+        @edit="menuTag"
+      >
+        <el-tab-pane
+          :key="item.value"
+          v-for="item in tagList"
+          :label="generateTitle(item)"
+          :name="item.value"
+        >
         </el-tab-pane>
-
       </el-tabs>
       <el-dropdown class="avue-tags__menu">
-        <el-button type="primary"
-                   size="mini">
-          {{$t('tagsView.menu')}}
+        <el-button type="primary" size="mini">
+          {{ $t("tagsView.menu") }}
           <i class="el-icon-arrow-down el-icon--right"></i>
         </el-button>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item @click.native="$parent.isSearch=true">{{$t('tagsView.search')}}</el-dropdown-item>
-          <el-dropdown-item @click.native="closeOthersTags">{{$t('tagsView.closeOthers')}}</el-dropdown-item>
-          <el-dropdown-item @click.native="closeAllTags">{{$t('tagsView.closeAll')}}</el-dropdown-item>
-          <el-dropdown-item @click.native="clearCacheTags">{{$t('tagsView.clearCache')}}</el-dropdown-item>
+          <el-dropdown-item @click.native="$parent.isSearch = true">{{
+            $t("tagsView.search")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click.native="closeOthersTags">{{
+            $t("tagsView.closeOthers")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click.native="closeAllTags">{{
+            $t("tagsView.closeAll")
+          }}</el-dropdown-item>
+          <el-dropdown-item @click.native="clearCacheTags">{{
+            $t("tagsView.clearCache")
+          }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
-
   </div>
 </template>
 <script>
-  import {mapGetters, mapState} from "vuex";
-  import {clearCache} from "@/api/user";
+import {mapGetters, mapState} from "vuex";
+import {clearCache} from "@/api/user";
 
-  export default {
-    name: "tags",
-    data() {
-      return {
-        active: "",
-        contentmenuX: "",
-        contentmenuY: "",
-        contextmenuFlag: false,
-        data:''
-      };
-    },
-    created() {
-    },
-    mounted() {
+export default {
+  name: "tags",
+  data() {
+    return {
+      active: "",
+      contentmenuX: "",
+      contentmenuY: "",
+      contextmenuFlag: false,
+      data:''
+    };
+  },
+  created() {
+  },
+  mounted() {
+    this.setActive();
+    this.data = this.active
+  },
+  watch: {
+    tag() {
       this.setActive();
-      this.data = this.active
     },
-    watch: {
-      tag() {
-        this.setActive();
-      },
-      contextmenuFlag() {
-        window.addEventListener("mousedown", this.watchContextmenu);
+    contextmenuFlag() {
+      window.addEventListener("mousedown", this.watchContextmenu);
+    }
+  },
+  computed: {
+    ...mapGetters(["tagWel", "tagList", "tag", "website"]),
+    ...mapState({
+      showTag: state => state.common.showTag
+    }),
+    tagLen() {
+      return this.tagList.length || 0;
+    }
+  },
+  methods: {
+    generateTitle(item) {
+      return this.$router.$avueRouter.generateTitle(
+        item.label,
+        (item.meta || {}).i18n
+      );
+    },
+    watchContextmenu(event) {
+      if (!this.$el.contains(event.target) || event.button !== 0) {
+        this.contextmenuFlag = false;
       }
+      window.removeEventListener("mousedown", this.watchContextmenu);
     },
-    computed: {
-      ...mapGetters(["tagWel", "tagList", "tag", "website"]),
-      ...mapState({
-        showTag: state => state.common.showTag
-      }),
-      tagLen() {
-        return this.tagList.length || 0;
+    handleContextmenu(event) {
+      let target = event.target;
+      // 解决 https://github.com/d2-projects/d2-admin/issues/54
+      let flag = false;
+      if (target.className.indexOf("el-tabs__item") > -1) flag = true;
+      else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
+        target = target.parentNode;
+        flag = true;
+      }
+      if (flag) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.contentmenuX = event.clientX;
+        this.contentmenuY = event.clientY;
+        this.tagName = target.getAttribute("aria-controls").slice(5);
+        this.contextmenuFlag = true;
       }
     },
-    methods: {
-      generateTitle(item) {
-        return this.$router.$avueRouter.generateTitle(
-          item.label,
-          (item.meta || {}).i18n
-        );
-      },
-      watchContextmenu(event) {
-        if (!this.$el.contains(event.target) || event.button !== 0) {
-          this.contextmenuFlag = false;
+    //激活当前选项
+    setActive() {
+      this.data = this.active
+      this.active = this.tag.value;
+    },
+    menuTag(value, action) {
+      if (action === "remove") {
+        let {tag, key} = this.findTag(value);
+        if(tag.label=="出口发货单"){
+          this.$store.commit("OUT_OUT_DETAIL");
         }
-        window.removeEventListener("mousedown", this.watchContextmenu);
-      },
-      handleContextmenu(event) {
-        let target = event.target;
-        // 解决 https://github.com/d2-projects/d2-admin/issues/54
-        let flag = false;
-        if (target.className.indexOf("el-tabs__item") > -1) flag = true;
-        else if (target.parentNode.className.indexOf("el-tabs__item") > -1) {
-          target = target.parentNode;
-          flag = true;
+          if(tag.label=="国内发货单"){
+          this.$store.commit("IN_OUT_DETAIL");
         }
-        if (flag) {
-          event.preventDefault();
-          event.stopPropagation();
-          this.contentmenuX = event.clientX;
-          this.contentmenuY = event.clientY;
-          this.tagName = target.getAttribute("aria-controls").slice(5);
-          this.contextmenuFlag = true;
+          if(tag.label=="进口发货单"){
+          this.$store.commit("GO_OUT_DETAIL");
         }
-      },
-      //激活当前选项
-      setActive() {
-        this.data = this.active
-        this.active = this.tag.value;
-      },
-      menuTag(value, action) {
-        if (action === "remove") {
-          let {tag, key} = this.findTag(value);
-          if(tag.label=="出口发货单"){
-            this.$store.commit("OUT_OUT_DETAIL");
-          }
-            if(tag.label=="国内发货单"){
-            this.$store.commit("IN_OUT_DETAIL");
-          }
-            if(tag.label=="进口发货单"){
-            this.$store.commit("GO_OUT_DETAIL");
-          }
-          if(tag.label=="进口收货单"){
-            this.$store.commit("TAKE_OUT_DETAIL");
-          }
-          if(tag.label=="付款管理"){
-            this.$store.commit("PAY_OUT_DETAIL");
-          }
-          this.$store.commit("DEL_TAG", tag);
-          if (tag.value === this.tag.value) {
-            tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
-            this.openTag(tag);
-          }
+        if(tag.label=="进口收货单"){
+          this.$store.commit("TAKE_OUT_DETAIL");
+        }
+        if(tag.label=="付款管理"){
+          this.$store.commit("PAY_OUT_DETAIL");
+        }
+        this.$store.commit("DEL_TAG", tag);
+        if (tag.value === this.tag.value) {
+          tag = this.tagList[key === 0 ? key : key - 1]; //如果关闭本标签让前推一个
+          this.openTag(tag);
+        }
+      }
+    },
+    openTag(item) {
+      // this.$confirm('未保存数据是否确认, 是否继续?', '提示', {
+      //   confirmButtonText: '确定',
+      //   cancelButtonText: '取消',
+      //   type: 'warning'
+      // }).then(() => {
+        let tag;
+        if (item.name) {
+          tag = this.findTag(item.name).tag;
+        } else {
+          tag = item;
         }
-      },
-      openTag(item) {
-        // this.$confirm('未保存数据是否确认, 是否继续?', '提示', {
-        //   confirmButtonText: '确定',
-        //   cancelButtonText: '取消',
-        //   type: 'warning'
-        // }).then(() => {
-          let tag;
-          if (item.name) {
-            tag = this.findTag(item.name).tag;
-          } else {
-            tag = item;
-          }
-          this.$router.push({
-            path: this.$router.$avueRouter.getPath({
-              name: tag.label,
-              src: tag.value
-            }, tag.meta),
-            query: tag.query
-          });
-        // }).catch(() => {
-        //   this.active = this.data
-        //   console.log(this.data)
-        //   this.$message({
-        //     type: 'info',
-        //     message: '已取消删除'
-        //   });
-        // });
-      },
-      closeOthersTags() {
-        this.contextmenuFlag = false;
-        this.$store.commit("DEL_TAG_OTHER");
-      },
-      findTag(value) {
-        let tag, key;
-        this.tagList.map((item, index) => {
-          if (item.value === value) {
-            tag = item;
-            key = index;
-          }
-        });
-        return {tag: tag, key: key};
-      },
-      closeAllTags() {
-        this.contextmenuFlag = false;
-        this.$store.commit("DEL_ALL_TAG");
         this.$router.push({
           path: this.$router.$avueRouter.getPath({
-            src: this.tagWel.value
-          }),
-          query: this.tagWel.query
-        });
-      },
-      clearCacheTags() {
-        this.$confirm("是否需要清除缓存?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
-          clearCache().then(() => {
-            this.contextmenuFlag = false;
-            this.$message.success('清除完毕');
-          })
+            name: tag.label,
+            src: tag.value
+          }, tag.meta),
+          query: tag.query
         });
-      }
+      // }).catch(() => {
+      //   this.active = this.data
+      //   console.log(this.data)
+      //   this.$message({
+      //     type: 'info',
+      //     message: '已取消删除'
+      //   });
+      // });
+    },
+    closeOthersTags() {
+      this.contextmenuFlag = false;
+      this.$store.commit("DEL_TAG_OTHER");
+              console.log(this.$store.getters.tag)
+      this.$store.commit("DEL_OTHER_DETAIL",this.$store.getters.tag);
+    },
+    findTag(value) {
+      let tag, key;
+      this.tagList.map((item, index) => {
+        if (item.value === value) {
+          tag = item;
+          key = index;
+        }
+      });
+      return {tag: tag, key: key};
+    },
+    closeAllTags() {
+      this.contextmenuFlag = false;
+      this.$store.commit("DEL_ALL_TAG");
+      this.$router.push({
+        path: this.$router.$avueRouter.getPath({
+          src: this.tagWel.value
+        }),
+        query: this.tagWel.query
+      });
+      this.$store.commit("DEL_ALL_DETAIL");
+    },
+    clearCacheTags() {
+      this.$confirm("是否需要清除缓存?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        clearCache().then(() => {
+          this.contextmenuFlag = false;
+          this.$message.success('清除完毕');
+        })
+      });
     }
-  };
+  }
+};
 </script>
-
-

src/store/modules/ifdetail.js

@@ -52,6 +52,33 @@ const ifdetail = {
     //退出详情页
     PAY_OUT_DETAIL(state) {
       state.payStatus = false;
+    },
+    //关闭所有
+    DEL_ALL_DETAIL(state) {
+      for (let item in state) {
+        state[item] = false
+      }
+    },
+    //关闭其他
+    DEL_OTHER_DETAIL(state, tag) {
+      for (let item in state) {
+        state[item] = false
+      }
+      if (tag.label == '国内发货单') {
+        state.inStatus = true;
+      }
+      if (tag.label == '进口发货单') {
+        state.goStatus = true;
+      }
+      if (tag.label == "进口收货单") {
+        state.goStatus = true;
+      }
+      if (tag.label == '出口发货单') {
+        state.takeStatus = true;
+      }
+      if (tag.label == '付款管理') {
+        state.payStatus = true;
+      }
     }
   }