workspace 分离出原本workLine在中的顶部文件夹导航部分

src/views/main_web/workspace/components/header-flow-tabs.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="flow-tabs" ref="allFolderWrapEl">
+    <div class="tabs-container worklinkBtngroup set-transition" :style="setTranslate">
+      <div
+        class="has-prev-node no-drag"
+        v-if="nowFolderIndex > 2"
+        @click.stop="nowFolderClick(nowFolderIndex - 1)"
+      >
+        <img class="prev-icon no-drag" src="/static/img/下拉箭头.svg"/>
+      </div>
+
+      <template v-for="(folder, index) in folderList">
+        <button ref="nowFolderEl"
+          type="button"
+          class="no-drag"
+          :class="{'nowfolder-wrap yiyuntitle nowFolderName': index == nowFolderIndex,
+                  'yiyuntitle sectitle': index !== nowFolderIndex,
+                    'hide-folder': Math.abs(index - nowFolderIndex) > 2}"
+          :key="index"
+          @click="nowFolderClick(index)"
+        >
+          <div :class="{'now-folder-text': index === nowFolderIndex, 'other-folder-text': index !== nowFolderIndex }"
+              class="use-ellipsis">{{ folder.folderName }}
+          </div>
+          <div class="jump-icon-wrap">
+            <img v-if="index == nowFolderIndex" @click.stop="showWorklinkPage" 
+                class="jump-icon"
+                src="/static/img/下拉箭头.svg"/>
+          </div>
+        </button>
+      </template>
+
+      <div class="has-next-node no-drag" v-if="totalNodeNum - nowFolderIndex > 2 && totalNodeNum > 5 "
+          @click.stop="nowFolderClick(nowFolderIndex + 1)">
+            <img  class="next-icon no-drag" src="/static/img/下拉箭头.svg"/>
+      </div>
+      <div :style="{display: divDisplay ? 'block': 'none'}"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { notify } from '@/utils/tool';
+export default {
+  props: {
+    folderList: Array,
+    currentNodeFolder: Object,
+  },
+  data() {
+    return {
+      projectId: sessionStorage.projId,
+
+      moveX: 0,//移动的距离
+      divDisplay: '',
+    }
+  },
+  updated() {
+    this.nowFolderEl = this.$refs.nowFolderEl ? this.$refs.nowFolderEl[this.nowFolderIndex] : null;
+    const allFolderWrapEl = this.$refs.allFolderWrapEl;
+
+    if(this.nowFolderEl && allFolderWrapEl) {
+      const x1 = this.nowFolderEl.offsetLeft;
+      const x2 =  allFolderWrapEl.clientWidth/2 - this.nowFolderEl.clientWidth/2;
+      this.moveX = x1-x2;
+    }
+  },
+  methods: {
+    /*
+     * 当前工作点击
+     * */
+    nowFolderClick(nextFolderIndex) {
+      if(nextFolderIndex < 0) {
+        notify.error('不能再向前了');
+        return;
+      }
+      if(nextFolderIndex > this.folderList.length - 1) {
+        notify.error('不能再向后了');
+        return;
+      }
+      this.$emit("changeFolder", this.folderList[nextFolderIndex]);
+    },
+    /**
+     * 查看工作链页面
+     */
+    showWorklinkPage() {
+      this.$emit("showWorkFlow", true);
+      this.isShowworklink = true;
+      this.workheight = "workheight";
+    },
+  },
+  computed: {
+    nowFolderIndex() {
+      return this.folderList.indexOf(this.currentNodeFolder);
+    },
+    setTranslate() {
+      const translate = {
+        transform: `translate(${-this.moveX}px, 0)`
+      }
+      return translate;
+    },
+    // 总共的工作节点数目 即listUserFolders的长度
+    totalNodeNum() {
+      return this.folderList ? this.folderList.length : 0;
+    },
+  },
+  watch: {
+    moveX(val) {
+      setTimeout(()=> { this.divDisplay = !this.divDisplay}, 500);
+    },
+    nowFolderIndex(val) {
+      if(val > -1) {
+        this.nowFolderEl = this.$refs.nowFolderEl ? this.$refs.nowFolderEl[val] : this.nowFolderEl;
+        this.allFolderWrapEl = this.$refs.allFolderWrapEl;
+
+        // 在这里不需要计算moveX的大小 即使计算了 也是按照原先居中的节点（较大的状态）计算的 -> 不准确
+        // 但是实际移动计算的moveX 应该是按照原先居中的节点（恢复为较小的状态)
+
+      }
+    },
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.flow-tabs {
+  position: relative;
+
+  .tabs-container {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .worklinkBtngroup button {
+    flex-shrink: 0;
+  }
+
+  /* 当前节点的样式  */
+  .nowfolder-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 44px;
+    line-height: 44px;
+    cursor: pointer;
+    .jump-icon-wrap {
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+      background-color : #e1e1e2;
+      margin: 0 8px 0 12px;
+      cursor: pointer;
+    }
+    .jump-icon {
+      width: 100%;
+      height: 100%;
+      vertical-align: top;
+      border-radius: 4px;
+    }
+    
+  }
+
+  .has-next-node, .has-prev-node {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    background-color: rgba(250, 250, 250, 1);
+    margin: 0 8px;
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  .prev-icon, .next-icon {
+    width: 100%;
+    height: 100%;
+    vertical-align: top;
+    cursor: pointer;
+  }
+  .prev-icon {
+    transform: rotate(90deg);
+  }
+  .next-icon {
+    transform: rotate(-90deg);
+  }
+
+  // 最多显示7个字符 多余的用省略号表示
+  .now-folder-text {
+    max-width: 157px;
+  }
+  .other-folder-text {
+    max-width: 110px;
+  }
+
+  .use-ellipsis {
+    overflow: hidden;
+    text-overflow:ellipsis;
+    white-space: nowrap;
+  }
+
+  .hide-folder {
+    display: none;
+  }
+
+  .set-transition {
+    transition: transform .5s ease;
+  }
+}
+</style>