UA 整理提交 准备修改标签

he wei

2022-09-27 23786b9ef2dc1d9f06dd7d9458e926369aab8c25

 src/App.vue

@@ -6,6 +6,7 @@
        <div class="title">文件列表</div>
        <div class="file-list" @contextmenu.prevent="openContextMenu($event)">
          <el-tree
            :class="['station-tree', { empty: !stationData.length }]"
            :data="stationData"
            @node-click="handleNodeClick"
            @node-contextmenu="nodeContextClick"
@@ -14,16 +15,26 @@
      </div>
      <div class="handle" ref="handle"></div>
      <div class="right">
        <div class="" @click="select">选文件</div>
        <div class="">当前选中的文件夹为：{{ path }}</div>
        <router-view />
        <div class="right-inner">
          <!-- 文件标签 -->
          <tabs-bar></tabs-bar>
          <div class="right-content">
            <div class="posIner">
              <keep-alive :include="cachedViews">
                <router-view :key="$route.fullPath" />
              </keep-alive>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右键菜单 -->
    <context-menu
      v-model="contextMenu.visible"
      :disabled-list="disabledList"
      :context-data="contextMenu.node"
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
      @reload="reload"
    ></context-menu>
  </div>
</template>
@@ -34,6 +45,7 @@

import MenuList from "@/components/menuList";
import ContextMenu from "@/components/contextMenu";
import TabsBar from "@/components/tabsBar";
import { getStation } from "./apis";

export default {
@@ -41,10 +53,10 @@
  components: {
    MenuList,
    ContextMenu,
    TabsBar,
  },
  data() {
    return {
      path: "",
      startX: 0,
      leftW: 0,
      stationData: [],
@@ -52,14 +64,17 @@
        x: 0,
        y: 0,
        visible: false,
        node: {},
      },
      disabledList: [],
    };
  },
  methods: {
    select() {
      window.api.send("open-file-dialog");
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews;
    },
  },
  methods: {
    onMouseDown(e) {
      // const el = e.target;
      this.startX = e.clientX;
@@ -83,6 +98,7 @@
      }
      left.style.width = CurBoxLen + "px";
      el.style.left = CurBoxLen + "px";
      this.$bus.$emit("checkScroll");
    },
    getStation() {
      getStation().then((res) => {
@@ -109,8 +125,10 @@
                    label: item1.fileName,
                    url: item1.fileUrl,
                    level: 3,
                    parent: [v.station1, val.station2, item.station3],
                  })),
                  level: 2,
                  parent: [v.station1, val.station2],
                });
              } else {
                children.push(
@@ -118,6 +136,7 @@
                    label: item1.fileName,
                    url: item1.fileUrl,
                    level: 3,
                    parent: [v.station1, val.station2],
                  }))
                );
              }
@@ -126,6 +145,7 @@
              label: val.station2,
              children,
              level: 1,
              parent: [v.station1],
            });
          } else {
            sname2s.push(
@@ -133,6 +153,7 @@
                label: item.fileName,
                url: item.fileUrl,
                level: 3,
                parent: [v.station1],
              }))
            );
          }
@@ -141,16 +162,20 @@
          children: sname2s,
          label: v.station1,
          level: 0,
          parent: [],
        };
      });
      console.log(res);
      return res;
    },
    reload() {
      this.getStation();
    },
    handleNodeClick(obj) {
      console.log(123, obj);
    },
    nodeContextClick($e, obj) {
      console.log(obj);
      // console.log(obj);
      const { clientX, clientY } = $e;
      this.contextMenu.x = clientX;
      let y = clientY;
@@ -162,9 +187,12 @@
      switch (obj.level) {
        case 0:
        case 1:
        case 2:
          // 子站上按鼠标右键，不能“打开文件”、“新建根文件”
          this.disabledList = [0, 11];
          break;
        case 2:
          // 此层级 只能添加文件 不能新建子站
          this.disabledList = [0, 1];
          break;
        case 3:
          // 添加的测试文件上按鼠标右键，可以点击“打开文件”、“重命名”、“删除”
@@ -173,6 +201,7 @@
        default:
          return false;
      }
      this.contextMenu.node = obj;
      this.contextMenu.visible = true;
    },
    // 右键菜单
@@ -193,7 +222,7 @@
      if (classList.contains("file-list")) {
        // 在空白处点击的右键 只能新建
        this.disabledList = [0, 12, 2, 3, 4];

        this.contextMenu.node = {};
        this.contextMenu.visible = true;
      }
    },
@@ -203,14 +232,18 @@
    maskClick() {
      this.closeContextMenu();
    },
    test() {
      setTimeout(() => {
        console.log(this.cachedViews, "cachedViews");
        this.test();
      }, 2000);
    },
  },
  mounted() {
    window.api.receive("selected-directory", (path) => {
      this.path = path.filePaths;
    });
    let handle = this.$refs.handle;
    handle.addEventListener("mousedown", this.onMouseDown);
    this.getStation();
    this.test();
  },
};
</script>
@@ -223,6 +256,9 @@
  padding: 0;
  overflow: hidden;
}
div {
  box-sizing: border-box;
}
#app {
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -230,7 +266,7 @@
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #000;
  background: #fff;
  background: #076fec;
}
ul,
li {
@@ -245,6 +281,7 @@
  height: 100%;
  position: relative;
  display: flex;
  z-index: 1;
}
.left {
  width: 14em;
@@ -253,27 +290,46 @@
  display: flex;
  flex-direction: column;
  .title {
    background: #999;
    background: #0055bf;
    color: #fff;
    padding: 4px;
  }
  .file-list {
    flex: 1;
    overflow-y: auto;
    text-align: left;
    /deep/ .el-tree {
      color: #333;
    user-select: none;
    :deep(.el-tree.station-tree) {
      background: transparent;
      color: #fff;
      display: inline-block;
      &.empty {
        display: block;
      }
      .el-tree-node__content {
        display: inline-block;
      }
      // .el-tree-node.is-expanded>.el-tree-node__children {
      //   display: inline-block;
      // }
      .el-tree-node:hover,
      .el-tree-node:focus > .el-tree-node__content {
        background-color: rgba(39, 134, 255, 0.4);
        .el-tree-node__label {
          color: #000;
        }
      }
      .el-tree-node__content.el-tree-node__content:hover,
      .el-tree-node__content.el-upload-list__item:hover {
        background-color: rgba(200, 200, 200, 0.4);
        color: #000;
        .el-tree-node__label {
          color: #000;
        }
      }
    }
  }
}
.handle {
  width: 6px;
  z-index: 1;
  position: absolute;
  top: 0;
  bottom: 0;
@@ -287,27 +343,24 @@
.right {
  /* background: rgba(0,0,0,.4); */
  flex: 1;
}
.context-menu {
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px #ccc solid;
  border-radius: 4px;
  padding: 4px;
  .main-ul {
  position: relative;
  .right-inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    .main-li {
      cursor: pointer;
    .right-content {
      flex: 1;
      border: 1px #ccc solid;
      padding: 4px;
      &:hover {
        background: #f0f0f0;
      }
      & ~ .main-li {
        margin-top: 2px;
      position: relative;
      .posIner {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
      }
    }
  }