workspace 开新文件重构

src/views/main_web/workspace/index.js

@@ -1 +0,0 @@
-export { default } from './workspace.new';

src/views/main_web/workspace/index.vue

@@ -0,0 +1,442 @@
+<template>
+  <div v-cloak>
+    <app-header
+      backBtnTitle="退出"
+      :isWorkspaceTopBar="true"
+      :showUserCenter="true"
+      class="app-header-style workspace-header"
+      showRecycleBin
+    >
+      <template #center>
+        <!-- 工作链 -->
+        <header-flow-tabs
+          :folderList="nodeFolders"
+          :currentNodeFolder="currentNodeFolder"
+          @changeFolder="nowFolderClick"
+          @showWorkFlow="workFlowVisible = true"
+        />
+        <!-- <WorkLine
+          class="my-workline"
+          :class="{'adjust-workline-pos-client': isClient, 'adjust-workline-pos-web': !isClient}"
+          :isShowlink="showWorkline"
+          :listUserFolders="nodeFolders"
+          :nowFolderIndex="nowFolderIndex"
+          :nowFolderName="nowFolderName"
+          :nestTemplateLists="nestTemplateLists"
+          @goFolderAndBack="goFolderAndBack"
+          @previousFolder="previousFolder"
+          @showWorklinkPage="showWorklinkPage"
+          @nowFolderClick="nowFolderClick"
+          @hideWorklinkPage="hideWorklinkPage"
+          @finishGetExchangeNodes="finishGetExchangeNodes"
+        /> -->
+      </template>
+      <template #right>
+        <search-bar
+          class="proj-search-bar"
+          placeholder="请输入要搜索的文件名"
+         
+        />
+      </template>
+    </app-header>
+  </div>
+</template>
+
+<script>
+import { propertyOf, uniqBy, throttle, flatten, debounce, cloneDeep } from 'lodash';
+import AppHeader from '@/components/app-header'
+import SearchBar from "@/components/search-bar/search-bar";
+import HeaderFlowTabs from './components/header-flow-tabs';
+import * as services from './service';
+import { getUserListByNode } from '@/services/user.js';
+import { firstCharToLowerCase } from '@/utils/tool';
+
+export default {
+  components: { AppHeader, HeaderFlowTabs, SearchBar },
+  data() {
+    return {
+      userId: sessionStorage.userId, // 当前用户id
+      projectId: sessionStorage.projId, // 当前项目id
+      projectName: sessionStorage.projName, // 当前项目名称
+      nodeFolders: [], // 节点文件夹
+      currentNodeFolder: {}, // 当前节点文件夹
+      currentFolder: {}, // 当前文件夹，可以是节点文件夹，可以是子文件夹
+      workFlowVisible: false, // 工作链页面显示开关
+    }
+  },
+  mounted() {
+    // 获取含有节点人员分配信息的节点列表 listNewFolder
+    this.getAllNodePeopleInfo();
+
+    this.fetchNodeFolders();
+  },
+  methods: {
+    /* 获取节点文件夹列表 */
+    async fetchNodeFolders() {
+      const workList = await services.fetchWorkFlow(this.projectId, this.userId);
+      const folderList = workList.filter(folder => folder.nodeId !== folder.templateId && folder.folderName !== '公共文件夹');
+
+      this.nodeFolders = folderList;
+      this.folderMap = folderList.reduce((h, f) => (h[f.id] = f, h), {});
+      if(!folderList.length) return;
+      const paramsFolderId = this.$route.params.folderId;
+      
+      // 匹配存在
+      if (paramsFolderId) {
+        this.currentNodeFolder = folderList.find(folder => folder.id === paramsFolderId) || folderList[0];
+      } else if(sessionStorage.nowFolderIndex) {
+        this.currentNodeFolder = folderList[sessionStorage.nowFolderIndex] ||  folderList[0];
+      } else {
+        this.currentNodeFolder = folderList[0];
+      }
+      this.currentFolder = this.currentNodeFolder;
+      // this.currentFolderInCoop  = this.currentNodeFolder;
+      // this.fetchFolderFiles();
+    },
+    async getUserList(){
+      const { list: userList } = await getUserListByNode({ id: this.$store.state.currentCompanyId, nodeType: 'company' }, 1, 10000);
+      this.userList = userList;
+      return userList;
+    },
+    // 获得所有工作链节点的 协同节点的人员指派信息
+    async getAllNodePeopleInfo() {
+      // 获取所有的节点信息 以及 人员列表信息
+      const [userList, projectDataRes] = await Promise.all([
+        this.getUserList(),
+        this.$fetchApi('folder/queryAllNodeFolderListByProjectId', { projectId: this.projectId }),
+      ]);
+
+      const userHash = userList.reduce((h, user) => (h[user.id] = user, h), {})
+      const folderMap = {};
+      const { folder, manager } = (projectDataRes.Data || {});
+      const allNodefolderList = folder.reduce((iList,upperFolder) => {
+        if(upperFolder.FolderName === '公共文件夹') { return iList; }
+        if(upperFolder.NodeId === upperFolder.TemplateId) { return iList; }
+        const folder = firstCharToLowerCase(upperFolder);
+        folder.listChildren = [];
+        folder.listUser = folder.oldGeneralId.split(',').filter(a => a).map(id => ({...userHash[id]}));
+        folder.manageUser = (folder.oldManager === '0' ? '' : folder.oldManager).split(',').filter(a => a).map(id => ({...userHash[id]}));
+        folderMap[folder.id] = folder;
+        const parentFolder = folderMap[folder.superId];
+        if(!parentFolder) return iList;
+        parentFolder.listChildren.push(folder);
+        iList.push(folder);
+        return iList;
+      }, []);
+      // const uniqFolder = uniqBy(folder, 'Id').filter(folder => folder.nodeId !== folder.templateId && folder.folderName !== '公共文件夹');
+      // const folderList = mergeFolderList(folder, userHash);
+
+      // this.listNewFolder = folderList;
+      this.allNodefolderList = allNodefolderList;
+    },
+    /**
+     * 切换节点文件夹
+     */
+    nowFolderClick(nextFolder) {
+      this.goFolder(nextFolder);
+      // this.isShowStartNodeFolders = true;//上面切换点击到另一个工作节点的时候 协作文件先显示总的节点入口
+    },
+    /**
+     * 跳转到当前工作
+     */
+    goFolder: function (nextFolder) {
+      const nextFolderIndex = this.nodeFolders.indexOf(nextFolder);
+      sessionStorage.nowFolderIndex = nextFolderIndex; // 用于刷新页面时使用
+      this.currentNodeFolder = nextFolder;
+      if(this.currentNodeFolder !== this.currentFolder) {
+        this.clearCurrentFolderFiles();
+      }
+      this.currentFolder = this.currentNodeFolder;
+      // this.currentFolderInCoop = this.currentNodeFolder;
+
+      this.breadcrumbFolderList = [];
+      this.breadcrumbFolderListInCoop = [];
+      // this.fetchFolderFiles();
+      // this.loadListTempFiles();
+
+      this.$nextTick(()=> {
+        // this.listenBottomHeight();
+      })
+    },
+  },
+  
+}
+
+// function mergeFolderList(folderList, userHash) {
+//   const [headFolder, hash] = folderList.reduce((h, upperFolder) => {
+//     if(upperFolder.FolderName === '公共文件夹') { return h; }
+//     const folder = firstCharToLowerCase(upperFolder);
+//     folder.listChildren = [];
+//     folder.listUser = folder.oldGeneralId.split(',').filter(a => a).map(id => ({...userHash[id]}));
+//     folder.manageUser = (folder.oldManager === '0' ? '' : folder.oldManager).split(',').filter(a => a).map(id => ({...userHash[id]}));
+//     h[1][folder.id] = folder;
+//     if(folder.nodeId === folder.templateId) {
+//       h[0] = folder;
+//       return h;
+//     }
+//     const parentFolder = h[1][folder.superId];
+//     if(!parentFolder) return h;
+//     parentFolder.listChildren.push(folder);
+//     return h;
+//   }, [[], {}]);
+//   return [headFolder];
+// }
+
+//  function getPlainOldFolderList(folderList) {
+//   const plainFolderList = [];
+//   function circulate(folderList) {
+//     if(folderList.length > 0) {
+//       folderList.forEach(folder => {
+//         plainFolderList.push(folder);
+//         if(folder.listChildren && folder.listChildren.length > 0) {
+//           circulate(folder.listChildren);
+//         }
+//       })
+//     } 
+//   }
+//   circulate(folderList);
+//   return plainFolderList;
+// }
+
+</script>
+
+<style>
+.section_item.section_item_aside_fl {
+  overflow: hidden;
+}
+.el-message-box--center .el-message-box__status.el-icon-warning {
+  position: absolute;
+  left: 0;
+}
+.yywenjiantitle_text1 {
+  position: relative;
+  top: 2px;
+}
+.youbian {
+  color: #a7a8b7;
+  position: relative;
+  top: 2px;
+}
+.app-header-style {
+  background-color: #f0f0f0;
+}
+.app-header-style .app-header-content-right {
+    display: flex;
+}
+
+</style>
+<style lang="scss" scoped>
+  .titleBox {
+    position: relative;
+  }
+  .app-header-style {
+    background-color: #f0f0f0;
+  }
+
+  .titlebar_head {
+    flex-direction: column;
+  }
+
+  .yiyun_section_top {
+    overflow: visible;
+  }
+
+  .folder_breadcrumb {
+    ::v-deep .el-breadcrumb__item {
+      user-select: none;
+      font-size: 18px;
+      display: inline-block;
+      height: 40px;
+      line-height: 40px;
+      .el-breadcrumb__separator {
+        color: #a7a8b7;
+      }
+      &:not(:last-child) {
+        cursor: pointer;
+      }
+    }
+  }
+
+  ::v-deep .readytodownload-icon {
+    position: relative;
+    top: 40px;
+    margin: 0 auto;
+  }
+  ::v-deep .progress-circle , ::v-deep .readytodownload-icon {
+    width: 45px;
+    height: 45px;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+ ::v-deep .progress-circle , ::v-deep .readytodownload-icon img, ::v-deep .progress-circle .bg-pic{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+ 
+ ::v-deep .progress-circle svg {
+    position:relative !important;
+  }
+
+  ::v-deep .progress-circle svg .el-progress-circle__track {
+    stroke: #fff !important;
+  }
+  .filePreview{
+    text-align: center;
+    video{
+        width: 820px;
+        height: 600px;
+    }
+  }
+
+  .img-container {
+    margin: 0 auto;
+  }
+  /* 新建样本文件弹框样式 */
+  .temp-file-dialog {
+   
+    /* 新建样板文件弹框的提示文件名 */
+    .guide-template-file-name {
+      color: rgba(0, 0, 0, 1);
+      font-size: 14px;
+      text-align: center;
+      font-family: PingFangSC-Regular;
+      padding: 16px;
+      text-align: center;
+    }
+  }
+
+</style>
+<style lang="scss">
+  .temp-file-dialog {
+    .el-dialog {
+      background-color: #fcfcfc;
+
+      .el-dialog__header {
+      padding: 19px 0;
+      }
+      .el-dialog__body {
+        padding: 0 !important;
+        .el-form {
+          padding: 20px 0 0 0;
+          background-color: #f1f1f1;
+          .el-form-item {
+            margin:0 0 0 0;
+          }
+        }
+      }
+      .el-form-item__content {
+        padding: 0 16px;
+        .el-input__inner {
+          background-color: #ddd;
+          margin: 0 0 20px 0;
+        }
+      }
+      .dialog-footer {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px;
+      }
+      .el-dialog__footer {
+        padding: 0;
+        .el-button {
+          border-radius: 8px;
+          /* &.el-button--primary {
+            background-color: #7850ff;
+          } */
+        }
+      }
+    }
+  }
+  
+
+</style>
+<style scoped lang="scss">
+  .set-bg {
+    background-color: #f6f6f6;
+  }
+  .operate-bar {
+    width: 162px;
+    margin: 28px auto 15px;
+  }
+
+  .search-res-page-wrap {
+    margin: 0 64px;
+    box-sizing: border-box;
+  }
+  .out-wrap {
+    height: calc(100vh - (60px + 28px + 28px + 15px));
+    overflow: scroll;
+  }
+  .out-wrap::-webkit-scrollbar{
+    width: 8px;
+    border-radius: 4px;
+  }
+
+  .out-wrap::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    height: 10px;
+    background-color: #adadad;
+  }
+
+  /*当前窗口失去焦点时的滑块样式*/
+  .out-wrap::-webkit-scrollbar-thumb:window-inactive {
+    background-color: #adadad;
+  }
+  .no-file-tips {
+    font-size: 22px;
+    text-align: center;
+    margin: 100px auto;
+  }
+  .my-workline {
+    text-align: center;
+  }
+
+  .adjust-workline-pos-client {
+    position: relative;
+    top: -12px;
+  }
+  .adjust-workline-pos-web {
+    position: relative;
+    top: -2.5px;
+  }
+  .ml-4-mt-20 {
+    margin: 20px 0 0 4px;
+  }
+  .height-0 {
+    height: 0;
+  }
+
+  .layout_content2 {
+    height: calc(100vh - 64px);
+  }
+// 调整协作文件显示区域的高度
+  .coopBox-max-height {
+    height: 300px;
+  }
+
+</style>
+
+<style scoped>
+  .workspace-header .app-header-center {
+    -webkit-app-region: no-drag;
+  }
+
+  .set-workarea-height {
+    height: calc(100vh - 64px - 300px) !important;
+  }
+
+  #workspace .yiyun_section_warp {
+    margin: 0 0 0 64px;
+    overflow: visible !important;
+    /* 防止只有一行文件的时候 工作区域的右键菜单会被遮挡 */
+  }
+</style>
+
+<style>
+  .conflit-message-box .el-icon-close:before {
+    content: '\e6db' !important;
+  }
+</style>