qgb-process 0.2.3 → 0.2.7

package/src/components/public/TagLine.vue

@@ -1,353 +1,353 @@
-<template>
-  <div class="tagsbox">
-    <div class="taglines">
-      <el-button
-        v-show="showController"
-        @click="scroll('left')"
-        icon="el-icon-arrow-left"
-        class="btns"
-        size="mini"
-      ></el-button>
-      <div class="tagcontent" ref="tagcontent">
-        <div class="tagbox" :style="styles" ref="tags">
-          <el-tag
-            disable-transitions
-            type="info"
-            :class="'/index' == $route.path?'active':''"
-            :color="'/index' == $route.path?'#409eff':'#fff'"
-            size="small"
-            @click="changeTag('/index')"
-          >工作台</el-tag>
-          <el-tag
-            v-for="(tag,index) in tags"
-            :key="index"
-            size="small"
-            :data-index="tag.path"
-            :class="tag.path == $route.path?'active':''"
-            :color="tag.path == $route.path?'#409eff':'#fff'"
-            @click="changeTag(tag.path,tag.query,tag.params)"
-            @close="delTag($event,tag.path,index)"
-            closable
-            disable-transitions
-            type="info"
-          >{{tag.meta.Title}}</el-tag>
-        </div>
-      </div>
-      <el-button
-        v-show="showController"
-        @click="scroll('right')"
-        icon="el-icon-arrow-right"
-        class="btns"
-        size="mini"
-      ></el-button>
-    </div>
-    <div class="tagclose">
-      <el-dropdown @command="close">
-        <el-button type="primary" size="mini">
-          标签选项
-          <i class="el-icon-arrow-down el-icon--right"></i>
-        </el-button>
-        <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
-          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import { setTimeout } from "timers";
-export default {
-  name: "Tagline",
-  data() {
-    return {
-      showController: false,
-      styles: {
-        left: 0
-      },
-      tags: this.$store.state.tags
-    };
-  },
-  mounted() {
-    this.$nextTick(function() {
-      this.initTag();
-    });
-  },
-  computed: {
-    tagsData() {
-      return this.$store.state.tags;
-    }
-  },
-  watch: {
-    tagsData: {
-      handler: function(newVal, oldVal) {
-        this.tags = newVal;
-        this.$nextTick(function() {
-          this.initTag();
-        });
-      }
-    },
-    $route() {
-      this.$nextTick(function() {
-        this.transform();
-      });
-    }
-  },
-  methods: {
-    transform: function() {
-      /**
-       * variable
-       * _CurrentTarget_                       当前选中tag
-       * _TagsTarget_                          tags容器 width auto
-       * _TagcontentTarget_                    可视范围 tags 滑动容器
-       * TagTagsWidth                          tags容器宽度
-       * TagContentWidth                       可视范围宽度
-       * TagsWidth                             当前tag宽度（每个tag width auto）
-       * CurrentOffsetLeft/CurrentOffsetRight  当前tag偏移量
-       */
-      const _CurrentTarget_ = document.getElementsByClassName("active")[0];
-      const _TagsTarget_ = this.$refs.tags;
-      const _TagcontentTarget_ = this.$refs.tagcontent;
-      if (_CurrentTarget_) {
-        const TagTagsWidth = _TagsTarget_.offsetWidth;
-        const TagContentWidth = _TagcontentTarget_.offsetWidth;
-        const TagsWidth = _CurrentTarget_.offsetWidth;
-        const CurrentOffsetLeft = _CurrentTarget_.offsetLeft;
-        const CurrentOffsetRight =
-          _TagsTarget_.offsetWidth -
-          (_CurrentTarget_.offsetLeft + _CurrentTarget_.offsetWidth);
-        if (TagContentWidth > TagsWidth + CurrentOffsetLeft) {
-          // 当前偏移量小于可视范围
-          if (
-            CurrentOffsetLeft + TagsWidth / 2 > TagContentWidth / 2 &&
-            TagTagsWidth > TagContentWidth
-          ) {
-            if (
-              TagTagsWidth > TagContentWidth &&
-              CurrentOffsetLeft +
-                TagsWidth / 2 -
-                TagContentWidth / 2 +
-                TagContentWidth >
-                TagTagsWidth
-            ) {
-              _TagsTarget_.style.left =
-                -1 * (TagTagsWidth - TagContentWidth) + "px";
-            } else {
-              _TagsTarget_.style.left =
-                -1 * (CurrentOffsetLeft + TagsWidth / 2 - TagContentWidth / 2) +
-                "px";
-            }
-          } else {
-            _TagsTarget_.style.left = 0;
-          }
-        } else if (
-          CurrentOffsetLeft + TagsWidth > TagContentWidth &&
-          CurrentOffsetRight + TagsWidth > TagContentWidth
-        ) {
-          // 左右偏移量均大于可视范围
-          _TagsTarget_.style.left =
-            -1 * (CurrentOffsetLeft - (TagContentWidth - TagsWidth) / 2) + "px";
-        } else {
-          // 当前偏移量大于可视范围
-          if (CurrentOffsetRight + TagsWidth / 2 > TagContentWidth / 2) {
-            _TagsTarget_.style.left =
-              -1 * (CurrentOffsetLeft + TagsWidth / 2 - TagContentWidth / 2) +
-              "px";
-          } else {
-            _TagsTarget_.style.left =
-              -1 * (TagTagsWidth - TagContentWidth) + "px";
-          }
-        }
-      }
-    },
-    initTag: function() {
-      const TagWidth = this.$refs.tags.offsetWidth;
-      const TagContentWidth = this.$refs.tagcontent.offsetWidth;
-      if (TagWidth > TagContentWidth) {
-        this.showController = true;
-      } else {
-        this.showController = false;
-      }
-      this.$nextTick(function() {
-        this.transform();
-      });
-    },
-
-    changeTag: function(path, query, params) {
-      if (this.$route.path != path) {
-        this.$router.push({ path, query, params });
-      }
-      if (path == "/") {
-        this.$store.commit("SET_CURRENTMENU", "");
-      } else {
-        this.$store.commit("SET_CURRENTMENU", this.$route.matched[0].path);
-      }
-    },
-    delTag: function(e, path, index) {
-      const el = e.currentTarget.parentNode;
-      const active = !!this.hasClass(el.className, "active");
-      // this.$emit("delTag", active, path, index);
-      const newTag = this.tags.filter(item => {
-        return item.path != path;
-      });
-      if (active) {
-        if (index > 0) {
-          const current = this.tags[index - 1];
-          this.$router.push({
-            path: current.path,
-            query: current.query,
-            params: current.query
-          });
-        } else {
-          if (this.tags.length > 1) {
-            const current = this.tags[index + 1];
-            this.$router.push({
-              path: current.path,
-              query: current.query,
-              params: current.query
-            });
-          } else {
-            this.$router.push({ path: "/" });
-          }
-        }
-      }
-      // this.$store.commit("RESET_TAGS", newTag);
-      if (window.__POWERED_BY_QIANKUN__) {
-        window.$store.commit("RESET_TAGS", newTag);
-      } else {
-        this.$store.commit("RESET_TAGS", newTag);
-      }
-      this.$nextTick(function() {
-        this.transform();
-      });
-    }, // 是否存在某class
-    hasClass(_classList, _className) {
-      if (_classList.indexOf(_className) !== -1) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-    scroll: function(position) {
-      const TagWidth = this.$refs.tags.offsetWidth;
-      const TagLeft = this.$refs.tags.offsetLeft;
-      const TagContentWidth = this.$refs.tagcontent.offsetWidth;
-      if (position == "left") {
-        if (TagLeft >= 0) {
-          return false;
-        } else {
-          this.styles.left = TagLeft + 70 >= 0 ? 0 : TagLeft + 70 + "px";
-        }
-      } else {
-        if (TagLeft >= TagWidth - TagContentWidth) {
-          return false;
-        } else {
-          this.styles.left =
-            TagLeft - 70 <= -1 * (TagWidth - TagContentWidth)
-              ? -1 * (TagWidth - TagContentWidth) + "px"
-              : TagLeft - 70 + "px";
-        }
-      }
-    },
-    close: function(command) {
-      const _this = this;
-      if (this.tags.length > 0) {
-        if (command == "other") {
-          const currentTag = document
-            .getElementsByClassName("active")[0]
-            .getAttribute("data-index");
-          const tag = this.tags.filter(item => {
-            return item.path == currentTag;
-          });
-          this.updateTag(tag);
-          this.styles.left = 0;
-        } else {
-          this.updateTag([]);
-        }
-      }
-    },
-    updateTag(param) {
-      if (param.length <= 0) {
-        this.$router.push({ path: "/" });
-      }
-      // this.$store.commit("RESET_TAGS", param);
-      if (window.__POWERED_BY_QIANKUN__) {
-        window.$store.commit("RESET_TAGS", param);
-      } else {
-        this.$store.commit("RESET_TAGS", param);
-      }
-    }
-  }
-};
-</script>
-<style>
-.el-tag--info.active .el-tag__close {
-  color: #fff;
-}
-.taglines .el-tag.el-tag--info .el-tag__close:hover {
-  background-color: #f56c6c;
-}
-</style>
-
-<style lang="scss" scoped>
-/deep/.el-tag--small {
-  height: 18px;
-  line-height: 18px;
-  font-size: 13px;
-}
-
-.tagsbox {
-  display: flex;
-  height: 22px;
-  overflow: hidden;
-  border-bottom: 1px solid rgba(154, 154, 154, 0.4);
-  moz-user-select: -moz-none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  -khtml-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: white;
-  .el-button--mini,
-  .el-button--mini.is-round {
-    padding: 5px 8px;
-  }
-  .taglines {
-    display: flex;
-    flex: 1;
-    bottom: 0;
-    height: 20px;
-    margin-right: 3px;
-    .btns {
-      width: 24px;
-      padding: 9px 5px;
-    }
-    .tagcontent {
-      flex: 1;
-      white-space: nowrap;
-      overflow: hidden;
-      position: relative;
-      .tagbox {
-        position: absolute;
-        padding-top:1px;
-        top: 0;
-        bottom: 0;
-        transition: left 0.3s ease-out;
-        .el-tag {
-          margin-left: 4px;
-          cursor: pointer;
-        }
-        .active {
-          color: #fff;
-        }
-      }
-    }
-  }
-  .tagclose {
-    width: 90px;
-    line-height: 20px;
-  }
-}
-</style>
+<template>
+  <div class="tagsbox">
+    <div class="taglines">
+      <el-button
+        v-show="showController"
+        @click="scroll('left')"
+        icon="el-icon-arrow-left"
+        class="btns"
+        size="mini"
+      ></el-button>
+      <div class="tagcontent" ref="tagcontent">
+        <div class="tagbox" :style="styles" ref="tags">
+          <el-tag
+            disable-transitions
+            type="info"
+            :class="'/index' == $route.path?'active':''"
+            :color="'/index' == $route.path?'#409eff':'#fff'"
+            size="small"
+            @click="changeTag('/index')"
+          >工作台</el-tag>
+          <el-tag
+            v-for="(tag,index) in tags"
+            :key="index"
+            size="small"
+            :data-index="tag.path"
+            :class="tag.path == $route.path?'active':''"
+            :color="tag.path == $route.path?'#409eff':'#fff'"
+            @click="changeTag(tag.path,tag.query,tag.params)"
+            @close="delTag($event,tag.path,index)"
+            closable
+            disable-transitions
+            type="info"
+          >{{tag.meta.Title}}</el-tag>
+        </div>
+      </div>
+      <el-button
+        v-show="showController"
+        @click="scroll('right')"
+        icon="el-icon-arrow-right"
+        class="btns"
+        size="mini"
+      ></el-button>
+    </div>
+    <div class="tagclose">
+      <el-dropdown @command="close">
+        <el-button type="primary" size="mini">
+          标签选项
+          <i class="el-icon-arrow-down el-icon--right"></i>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
+          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTimeout } from "timers";
+export default {
+  name: "Tagline",
+  data() {
+    return {
+      showController: false,
+      styles: {
+        left: 0
+      },
+      tags: this.$store.state.tags
+    };
+  },
+  mounted() {
+    this.$nextTick(function() {
+      this.initTag();
+    });
+  },
+  computed: {
+    tagsData() {
+      return this.$store.state.tags;
+    }
+  },
+  watch: {
+    tagsData: {
+      handler: function(newVal, oldVal) {
+        this.tags = newVal;
+        this.$nextTick(function() {
+          this.initTag();
+        });
+      }
+    },
+    $route() {
+      this.$nextTick(function() {
+        this.transform();
+      });
+    }
+  },
+  methods: {
+    transform: function() {
+      /**
+       * variable
+       * _CurrentTarget_                       当前选中tag
+       * _TagsTarget_                          tags容器 width auto
+       * _TagcontentTarget_                    可视范围 tags 滑动容器
+       * TagTagsWidth                          tags容器宽度
+       * TagContentWidth                       可视范围宽度
+       * TagsWidth                             当前tag宽度（每个tag width auto）
+       * CurrentOffsetLeft/CurrentOffsetRight  当前tag偏移量
+       */
+      const _CurrentTarget_ = document.getElementsByClassName("active")[0];
+      const _TagsTarget_ = this.$refs.tags;
+      const _TagcontentTarget_ = this.$refs.tagcontent;
+      if (_CurrentTarget_) {
+        const TagTagsWidth = _TagsTarget_.offsetWidth;
+        const TagContentWidth = _TagcontentTarget_.offsetWidth;
+        const TagsWidth = _CurrentTarget_.offsetWidth;
+        const CurrentOffsetLeft = _CurrentTarget_.offsetLeft;
+        const CurrentOffsetRight =
+          _TagsTarget_.offsetWidth -
+          (_CurrentTarget_.offsetLeft + _CurrentTarget_.offsetWidth);
+        if (TagContentWidth > TagsWidth + CurrentOffsetLeft) {
+          // 当前偏移量小于可视范围
+          if (
+            CurrentOffsetLeft + TagsWidth / 2 > TagContentWidth / 2 &&
+            TagTagsWidth > TagContentWidth
+          ) {
+            if (
+              TagTagsWidth > TagContentWidth &&
+              CurrentOffsetLeft +
+                TagsWidth / 2 -
+                TagContentWidth / 2 +
+                TagContentWidth >
+                TagTagsWidth
+            ) {
+              _TagsTarget_.style.left =
+                -1 * (TagTagsWidth - TagContentWidth) + "px";
+            } else {
+              _TagsTarget_.style.left =
+                -1 * (CurrentOffsetLeft + TagsWidth / 2 - TagContentWidth / 2) +
+                "px";
+            }
+          } else {
+            _TagsTarget_.style.left = 0;
+          }
+        } else if (
+          CurrentOffsetLeft + TagsWidth > TagContentWidth &&
+          CurrentOffsetRight + TagsWidth > TagContentWidth
+        ) {
+          // 左右偏移量均大于可视范围
+          _TagsTarget_.style.left =
+            -1 * (CurrentOffsetLeft - (TagContentWidth - TagsWidth) / 2) + "px";
+        } else {
+          // 当前偏移量大于可视范围
+          if (CurrentOffsetRight + TagsWidth / 2 > TagContentWidth / 2) {
+            _TagsTarget_.style.left =
+              -1 * (CurrentOffsetLeft + TagsWidth / 2 - TagContentWidth / 2) +
+              "px";
+          } else {
+            _TagsTarget_.style.left =
+              -1 * (TagTagsWidth - TagContentWidth) + "px";
+          }
+        }
+      }
+    },
+    initTag: function() {
+      const TagWidth = this.$refs.tags.offsetWidth;
+      const TagContentWidth = this.$refs.tagcontent.offsetWidth;
+      if (TagWidth > TagContentWidth) {
+        this.showController = true;
+      } else {
+        this.showController = false;
+      }
+      this.$nextTick(function() {
+        this.transform();
+      });
+    },
+
+    changeTag: function(path, query, params) {
+      if (this.$route.path != path) {
+        this.$router.push({ path, query, params });
+      }
+      if (path == "/") {
+        this.$store.commit("SET_CURRENTMENU", "");
+      } else {
+        this.$store.commit("SET_CURRENTMENU", this.$route.matched[0].path);
+      }
+    },
+    delTag: function(e, path, index) {
+      const el = e.currentTarget.parentNode;
+      const active = !!this.hasClass(el.className, "active");
+      // this.$emit("delTag", active, path, index);
+      const newTag = this.tags.filter(item => {
+        return item.path != path;
+      });
+      if (active) {
+        if (index > 0) {
+          const current = this.tags[index - 1];
+          this.$router.push({
+            path: current.path,
+            query: current.query,
+            params: current.query
+          });
+        } else {
+          if (this.tags.length > 1) {
+            const current = this.tags[index + 1];
+            this.$router.push({
+              path: current.path,
+              query: current.query,
+              params: current.query
+            });
+          } else {
+            this.$router.push({ path: "/" });
+          }
+        }
+      }
+      // this.$store.commit("RESET_TAGS", newTag);
+      if (window.__POWERED_BY_QIANKUN__) {
+        window.$store.commit("RESET_TAGS", newTag);
+      } else {
+        this.$store.commit("RESET_TAGS", newTag);
+      }
+      this.$nextTick(function() {
+        this.transform();
+      });
+    }, // 是否存在某class
+    hasClass(_classList, _className) {
+      if (_classList.indexOf(_className) !== -1) {
+        return true;
+      } else {
+        return false;
+      }
+    },
+    scroll: function(position) {
+      const TagWidth = this.$refs.tags.offsetWidth;
+      const TagLeft = this.$refs.tags.offsetLeft;
+      const TagContentWidth = this.$refs.tagcontent.offsetWidth;
+      if (position == "left") {
+        if (TagLeft >= 0) {
+          return false;
+        } else {
+          this.styles.left = TagLeft + 70 >= 0 ? 0 : TagLeft + 70 + "px";
+        }
+      } else {
+        if (TagLeft >= TagWidth - TagContentWidth) {
+          return false;
+        } else {
+          this.styles.left =
+            TagLeft - 70 <= -1 * (TagWidth - TagContentWidth)
+              ? -1 * (TagWidth - TagContentWidth) + "px"
+              : TagLeft - 70 + "px";
+        }
+      }
+    },
+    close: function(command) {
+      const _this = this;
+      if (this.tags.length > 0) {
+        if (command == "other") {
+          const currentTag = document
+            .getElementsByClassName("active")[0]
+            .getAttribute("data-index");
+          const tag = this.tags.filter(item => {
+            return item.path == currentTag;
+          });
+          this.updateTag(tag);
+          this.styles.left = 0;
+        } else {
+          this.updateTag([]);
+        }
+      }
+    },
+    updateTag(param) {
+      if (param.length <= 0) {
+        this.$router.push({ path: "/" });
+      }
+      // this.$store.commit("RESET_TAGS", param);
+      if (window.__POWERED_BY_QIANKUN__) {
+        window.$store.commit("RESET_TAGS", param);
+      } else {
+        this.$store.commit("RESET_TAGS", param);
+      }
+    }
+  }
+};
+</script>
+<style>
+.el-tag--info.active .el-tag__close {
+  color: #fff;
+}
+.taglines .el-tag.el-tag--info .el-tag__close:hover {
+  background-color: #f56c6c;
+}
+</style>
+
+<style lang="scss" scoped>
+/deep/.el-tag--small {
+  height: 18px;
+  line-height: 18px;
+  font-size: 13px;
+}
+
+.tagsbox {
+  display: flex;
+  height: 22px;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(154, 154, 154, 0.4);
+  moz-user-select: -moz-none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: white;
+  .el-button--mini,
+  .el-button--mini.is-round {
+    padding: 5px 8px;
+  }
+  .taglines {
+    display: flex;
+    flex: 1;
+    bottom: 0;
+    height: 20px;
+    margin-right: 3px;
+    .btns {
+      width: 24px;
+      padding: 9px 5px;
+    }
+    .tagcontent {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      position: relative;
+      .tagbox {
+        position: absolute;
+        padding-top:1px;
+        top: 0;
+        bottom: 0;
+        transition: left 0.3s ease-out;
+        .el-tag {
+          margin-left: 4px;
+          cursor: pointer;
+        }
+        .active {
+          color: #fff;
+        }
+      }
+    }
+  }
+  .tagclose {
+    width: 90px;
+    line-height: 20px;
+  }
+}
+</style>