微调交付物页面结构

src/views/main_web/workspace/components/archive-view/index.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="archive-view">
     <div class="view-left">
-      <div class="view-left-title">从成果中选择交付物</div>
-      <div class="view-left-button" @click="receiverModalVisible = true">查看接收方信息</div>
-      <el-collapse v-model="collapseActiveKeys" class="panel-wrapper">
-        <el-collapse-item class="panel" title="项目成果" name="1">
+      <!-- <div class="view-left-title">从成果中选择交付物</div> -->
+      <el-collapse
+        v-model="collapseActiveKeys"
+        class="panel-wrapper"
+      >
+        <el-collapse-item
+          class="panel"
+          title="项目成果"
+          name="1"
+        >
           <div
-            class="list-item" 
-            :class="{ 'list-item-active': tabKey === 'all' }" 
+            class="list-item"
+            :class="{ 'list-item-active': tabKey === 'all' }"
             @click.stop="filterArchive()"
           >
             <span>显示所有勾选文件{{selectedKeyCount ? ` (${selectedKeyCount}/${fileTotalCount})`:''}}</span>
@@ -22,7 +28,11 @@
             <span>{{folder.folderName}}</span>
           </div>
         </el-collapse-item>
-        <el-collapse-item class="panel" title="历史提交记录" name="2">
+        <el-collapse-item
+          class="panel"
+          title="历史提交记录"
+          name="2"
+        >
           <div
             v-for="commit in commitHisList"
             :key="commit.id"
@@ -34,22 +44,33 @@
           </div>
         </el-collapse-item>
       </el-collapse>
+      <div class="button-group">
+        <el-button
+          class="view-left-button"
+          @click="receiverModalVisible = true"
+        >查看接收方信息</el-button>
+        <el-button
+          type="success"
+          class="view-left-button"
+          :disabled="!selectedKeyCount"
+          @click.stop="authModalVisible = true"
+        >
+          交付并认证</el-button>
+      </div>
+
     </div>
 
     <div class="view-right">
-      <el-button type="primary" class="view-right-button" :disabled="!selectedKeyCount" @click.stop="authModalVisible = true">点击认证并交付所有勾选文件</el-button>
       <div class="table-like">
         <div class="table-header">
-          <div class="table-th">由工作成果提交的文件</div>
+          <div class="table-th">选择成果</div>
           <div class="table-th">版本号</div>
-          <div class="table-th">文件类型</div>
+          <!-- <div class="table-th">文件类型</div> -->
           <div class="table-th">创建人</div>
           <div class="table-th">提交时间</div>
-          <div class="table-th">操作</div>
+          <!-- <div class="table-th">操作</div> -->
         </div>
-        <template
-          v-for="node in rightPanelItemList"
-        >
+        <template v-for="node in rightPanelItemList">
           <list-file-item
             :file="node"
             :key="node.id"
@@ -58,10 +79,17 @@
             :checked="selectedKeyMap[node.id]"
             @check="toggleCheck"
           />
-          <div v-else :key="node.id" class="table-node">
+          <div
+            v-else
+            :key="node.id"
+            class="table-node"
+          >
             <div class="table-node-header">
               <div class="table-node-header-th">{{node.folderName}}</div>
-              <div class="table-node-header-extra" v-show="!readOnly">
+              <div
+                class="table-node-header-extra"
+                v-show="!readOnly"
+              >
                 <el-checkbox
                   class="table-node-header-checkbox"
                   @change="toggleCheck(node)"
@@ -90,7 +118,7 @@
         <div class="auth-title">账户认证</div>
         <div class="auth-hint">请输入您的账户密码，一旦交付将不可撤回！</div>
       </template>
-      
+
       <el-input
         v-model="authInpVal"
         placeholder="请输入密码"
@@ -98,9 +126,16 @@
         auto-complete="new-password"
         @keyup.enter.native="doCommit"
       />
-      <div slot="footer" class="dialog-footer">
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
         <el-button @click="authModalVisible = false">取 消</el-button>
-        <el-button :disabled="!authInpVal" type="primary"  @click="doCommit" >认证并提交交付物</el-button>
+        <el-button
+          :disabled="!authInpVal"
+          type="primary"
+          @click="doCommit"
+        >认证并提交交付物</el-button>
       </div>
     </el-dialog>
     <el-dialog
@@ -112,12 +147,15 @@
         <top-header
           class="set-header-position header-wrap"
           theme=""
-          :onBackBtnClick="returnToDistWorkClick" 
           backBtnTitle="接收方信息"
           :showUserCenter="false"
           :showBackBtn="true"
         >
-        <div slot="right" class="edit-template-btn" @click.stop="receiverModalVisible = false">关闭</div>
+          <div
+            slot="right"
+            class="edit-template-btn"
+            @click.stop="receiverModalVisible = false"
+          >关闭</div>
         </top-header>
         <div class="summary-wrap">
           <div class="item">
@@ -151,14 +189,18 @@
 </template>
 
 <script>
-import ItemList from './item-list.vue';
-import * as services from '../../service';
-import { firstCharToLowerCase, firstCharToUpperCase, notify } from '@/utils/tool';
-import moment from 'dayjs';
-import { VirtualFolder } from '../../helper';
-import ListFileItem from './list-file-item.vue';
-import { wrapErrorHint } from '@/utils/request';
-import TopHeader from '@/components/app-header/components/top-header.vue';
+import ItemList from "./item-list.vue";
+import * as services from "../../service";
+import {
+  firstCharToLowerCase,
+  firstCharToUpperCase,
+  notify,
+} from "@/utils/tool";
+import moment from "dayjs";
+import { VirtualFolder } from "../../helper";
+import ListFileItem from "./list-file-item.vue";
+import { wrapErrorHint } from "@/utils/request";
+import TopHeader from "@/components/app-header/components/top-header.vue";
 
 export default {
   components: { ItemList, ListFileItem, TopHeader },
@@ -168,19 +210,19 @@ export default {
   },
   filters: {
     formatTime(v) {
-      return moment(v).format('YYYY年MM月DD日 A HH:mm');
-    }
+      return moment(v).format("YYYY年MM月DD日 A HH:mm");
+    },
   },
   data() {
     const accountName = this.$store.state.accountName;
     return {
       accountName,
       userId: sessionStorage.userId, // 当前用户id
-      collapseActiveKeys: ['1', '2'],
+      collapseActiveKeys: ["1", "2"],
       // selectedItemKeys: [], // 选中
       readOnly: false, // 查看历史提交记录时改为true
       commitHisList: [],
-      tabKey: 'all', // 左侧菜单选中key
+      tabKey: "all", // 左侧菜单选中key
       currentArchivePlainList: [],
       currentArchiveTreeList: [],
       rightPanelItemList: [],
@@ -188,7 +230,7 @@ export default {
 
       // 认证弹窗
       authModalVisible: false,
-      authInpVal: '',
+      authInpVal: "",
 
       //
       receiverModalVisible: false,
@@ -197,7 +239,7 @@ export default {
   },
   computed: {
     selectedKeyCount() {
-      return Object.values(this.selectedKeyMap).filter(i => i).length;
+      return Object.values(this.selectedKeyMap).filter((i) => i).length;
     },
   },
   mounted() {
@@ -208,15 +250,15 @@ export default {
   },
   watch: {
     authModalVisible(v) {
-      if(!v) {
-        this.authInpVal = '';
+      if (!v) {
+        this.authInpVal = "";
       }
     },
     receiverModalVisible(flag) {
-      if(flag) {
+      if (flag) {
         this.fetchReceiverInfo();
       }
-    }
+    },
   },
   methods: {
     isChildrenAllChecked(node) {
@@ -225,23 +267,29 @@ export default {
     //
     toggleCheck(node) {
       const tempMap = this.selectedKeyMap;
-      if(node.nodeType === 'file') {
-        this.selectedKeyMap = { ...tempMap, [node.id]: !tempMap[node.id]  }
-      } else { // folder
+      if (node.nodeType === "file") {
+        this.selectedKeyMap = { ...tempMap, [node.id]: !tempMap[node.id] };
+      } else {
+        // folder
         const relationKeys = [];
         let checkFlag = true;
         recursionForEach(node.children, (fileNode) => {
           relationKeys.push(fileNode.id);
           checkFlag = checkFlag && tempMap[fileNode.id];
         });
-        const stateMap = relationKeys.reduce((h, key) => (h[key] = !checkFlag, h), {});
-        this.selectedKeyMap = { ...tempMap, ...stateMap  };
+        const stateMap = relationKeys.reduce(
+          (h, key) => ((h[key] = !checkFlag), h),
+          {}
+        );
+        this.selectedKeyMap = { ...tempMap, ...stateMap };
       }
     },
     filterArchive(folder) {
-      this.tabKey = !folder ? 'all' : folder.id;
+      this.tabKey = !folder ? "all" : folder.id;
       this.readOnly = false;
-      this.rightPanelItemList = !folder ? this.currentArchiveTreeList : this.currentArchiveTreeList.filter(i => i.id === folder.id);
+      this.rightPanelItemList = !folder
+        ? this.currentArchiveTreeList
+        : this.currentArchiveTreeList.filter((i) => i.id === folder.id);
     },
     /**
      * 查询当前文件夹内容
@@ -249,24 +297,33 @@ export default {
     async fetchFolderFiles() {
       const nodeFolder = this.currentNodeFolder;
       const userId = this.userId;
-      if(!nodeFolder || !nodeFolder.id) return;
-      const folderResInfo = await services.fetchFolderFileList(nodeFolder.id, userId, nodeFolder.id);
+      if (!nodeFolder || !nodeFolder.id) return;
+      const folderResInfo = await services.fetchFolderFileList(
+        nodeFolder.id,
+        userId,
+        nodeFolder.id
+      );
 
-      if(!folderResInfo) return;
+      if (!folderResInfo) return;
       // 快速切换节点的时候
-      if(this.currentNodeFolder.id !== nodeFolder.id) return;
-      
-      this.currentArchiveTreeList = resolveFileListToTree(folderResInfo.deliverables);
+      if (this.currentNodeFolder.id !== nodeFolder.id) return;
+
+      this.currentArchiveTreeList = resolveFileListToTree(
+        folderResInfo.deliverables
+      );
       this.fileTotalCount = folderResInfo.deliverables.length;
       this.currentArchivePlainList = folderResInfo.deliverables;
-        
+
       this.rightPanelItemList = this.currentArchiveTreeList;
     },
     /**
      * 查看提交历史记录
      */
     async fetchArchiveHistory() {
-      const res = await this.$fetchApi('file/queryProjDeliverablesSubmitByDeliverablesFolderId', { deliverablesFolderId: this.currentNodeFolder.id });
+      const res = await this.$fetchApi(
+        "file/queryProjDeliverablesSubmitByDeliverablesFolderId",
+        { deliverablesFolderId: this.currentNodeFolder.id }
+      );
       this.commitHisList = (res.Data || []).map(firstCharToLowerCase);
     },
     /**
@@ -274,28 +331,42 @@ export default {
      */
     async checkCommitHistory(commit) {
       this.tabKey = commit.id;
-      const res = await this.$fetchApi('file/queryProjDeliverablesSubmitDetailByDeliverablesSubmitId', { deliverablesSubmitId: commit.id });
-      this.rightPanelItemList = resolveFileListToTree((res.Data || []).map(firstCharToLowerCase));
+      const res = await this.$fetchApi(
+        "file/queryProjDeliverablesSubmitDetailByDeliverablesSubmitId",
+        { deliverablesSubmitId: commit.id }
+      );
+      this.rightPanelItemList = resolveFileListToTree(
+        (res.Data || []).map(firstCharToLowerCase)
+      );
       this.readOnly = true;
     },
     /**
      * 提交新的交付物
      */
     async doCommit() {
-      const res = await this.$fetchApi('authentication/passwordCheck', { password: this.authInpVal, userName: this.accountName });
+      const res = await this.$fetchApi("authentication/passwordCheck", {
+        password: this.authInpVal,
+        userName: this.accountName,
+      });
       wrapErrorHint(res);
-      if(res.Code) { return; }
+      if (res.Code) {
+        return;
+      }
       const selectedKeyMap = this.selectedKeyMap;
-      const commitFileList = this.currentArchivePlainList.filter(file => selectedKeyMap[file.id]);
-      const commitRes = await this.$fetchApi('file/submitDeliverables', {
+      const commitFileList = this.currentArchivePlainList.filter(
+        (file) => selectedKeyMap[file.id]
+      );
+      const commitRes = await this.$fetchApi("file/submitDeliverables", {
         DeliverablesFolderId: this.currentNodeFolder.id,
         ProjId: this.projectId,
         DeliverablesFile: commitFileList.map(firstCharToUpperCase),
       });
       wrapErrorHint(commitRes);
       console.log(commitRes);
-      if(commitRes.Code) { return; }
-      notify.success('交付成功');
+      if (commitRes.Code) {
+        return;
+      }
+      notify.success("交付成功");
       this.authModalVisible = false;
       this.selectedKeyMap = {};
       this.fetchArchiveHistory();
@@ -305,94 +376,107 @@ export default {
      * 查看接收方信息
      */
     async fetchReceiverInfo() {
-      const res = await this.$fetchApi('folder/queryProjAcceptInfoByDeliverablesFolderId', { deliverablesFolderId: this.currentNodeFolder.id, projId: this.projectId });
+      const res = await this.$fetchApi(
+        "folder/queryProjAcceptInfoByDeliverablesFolderId",
+        {
+          deliverablesFolderId: this.currentNodeFolder.id,
+          projId: this.projectId,
+        }
+      );
       wrapErrorHint(res);
       this.receiverInfo = firstCharToLowerCase(res.Data || {});
     },
-  }
-}
+  },
+};
 
 function recursionForEach(list, f) {
-  list.forEach(iNode => {
-    if(iNode.nodeType === 'file') {
+  list.forEach((iNode) => {
+    if (iNode.nodeType === "file") {
       f(iNode);
       return;
     }
     recursionForEach(iNode.children, f);
-  })
+  });
 }
 
 function resolveFileListToTree(fileList) {
   const folderMap = {}; // [key: folderPath]: folder
   const headList = [];
-  fileList.forEach(file => {
-    file.nodeType = 'file';
+  fileList.forEach((file) => {
+    file.nodeType = "file";
     file.nodeFolderName = file.nodeName;
     // delete file.nodeName;
-    if(!file.nodeFolderName) { headList.push(file); return; }
-    const filePath = `${file.nodeFolderName}${file.relativePath ? `/${file.relativePath}`: ''}`;
+    if (!file.nodeFolderName) {
+      headList.push(file);
+      return;
+    }
+    const filePath = `${file.nodeFolderName}${
+      file.relativePath ? `/${file.relativePath}` : ""
+    }`;
     generateFolder(folderMap, filePath);
     const folder = folderMap[filePath];
     folder.children.push(file);
   });
   // const headFolder = [];
 
-  Object.values(folderMap)
-    .forEach(folder => {
-      // 取顶级文件夹
-      if(!folder.parentFolderPath) {
-        headList.push(folder);
-      }
-      // 排序
-      folder.children = folder.children
-        .filter(i => i.nodeType === 'file')
-        .concat(folder.children.filter(i => i.nodeType !== 'file'));
-    })
+  Object.values(folderMap).forEach((folder) => {
+    // 取顶级文件夹
+    if (!folder.parentFolderPath) {
+      headList.push(folder);
+    }
+    // 排序
+    folder.children = folder.children
+      .filter((i) => i.nodeType === "file")
+      .concat(folder.children.filter((i) => i.nodeType !== "file"));
+  });
 
   return headList;
 }
 
 function generateFolder(folderMap, filePath) {
-  const paths = filePath.split('/');
+  const paths = filePath.split("/");
   paths.forEach((_, idx) => {
-    const fullRelativePath = paths.slice(0, idx + 1).join('/');
-    if(folderMap[fullRelativePath]) return;
+    const fullRelativePath = paths.slice(0, idx + 1).join("/");
+    if (folderMap[fullRelativePath]) return;
     const folder = new VirtualFolder(fullRelativePath);
     folder.children = [];
-    folder.nodeType = 'folder';
+    folder.nodeType = "folder";
     const parentRelativePath = folder.parentFolderPath;
     folderMap[fullRelativePath] = folder;
-    if(folderMap[parentRelativePath]) {
+    if (folderMap[parentRelativePath]) {
       folderMap[parentRelativePath].children.push(folder);
     }
   });
 }
 
 function recursionEvery(list, checkedMap) {
-  return list.every(node => {
-    if(node.nodeType === 'file') return checkedMap[node.id];
+  return list.every((node) => {
+    if (node.nodeType === "file") return checkedMap[node.id];
     return recursionEvery(node.children, checkedMap);
-  })
+  });
 }
 </script>
 
 <style lang="less" scoped>
 .archive-view {
   height: 100%;
-  padding: 0 40px 0 48px;
+  padding: 10px 40px 20px 48px;
+  box-sizing: border-box;
   @leftViewWidth: 312px;
   // 修改该页面下所有checkbox样式
   // ::v-deep .el-checkbox__input:not(.is-checked) .el-checkbox__inner {
   //   background-color: #cbcbce;
   // }
 
-
   .view-left {
-    display: inline-block;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: space-between;
     vertical-align: top;
     width: @leftViewWidth;
     height: 100%;
-    padding-top: 4px;
+    // padding-top: 20px;
+    // background: red;
     &-title {
       font-size: 18px;
       line-height: 54px;
@@ -401,16 +485,19 @@ function recursionEvery(list, checkedMap) {
     }
     &-button {
       width: 100%;
-      height: 32px;
-      line-height: 32px;
-      margin-bottom: 8px;
-      text-align: center;
-      font-size: 14px;
-      color: #32323c;
-      background-color: rgba(255, 255, 255, 1);
-      border: 0.5px solid rgba(17, 17, 17, 0.25);
-      border-radius: 6px;
-      cursor: pointer;
+      box-sizing: border-box;
+      margin-left: 0;
+      margin-bottom: 10px;
+      // height: 32px;
+      // line-height: 32px;
+      // margin-bottom: 8px;
+      // text-align: center;
+      // font-size: 14px;
+      // color: #32323c;
+      // background-color: rgba(255, 255, 255, 1);
+      // border: 0.5px solid rgba(17, 17, 17, 0.25);
+      // border-radius: 6px;
+      // cursor: pointer;
     }
   }
   .view-right {
@@ -419,11 +506,12 @@ function recursionEvery(list, checkedMap) {
     width: calc(100% - @leftViewWidth);
     height: 100%;
     padding-left: 24px;
-    padding-top: 14px;
+    // padding-top: 14px;
     box-sizing: border-box;
     &-button {
       margin-left: calc(50% - @leftViewWidth / 2 - 120px);
-      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1), 0px 2px 5px 0px rgba(0, 0, 0, 0.16);
+      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1),
+        0px 2px 5px 0px rgba(0, 0, 0, 0.16);
       margin-bottom: 6px;
     }
   }
@@ -438,16 +526,28 @@ function recursionEvery(list, checkedMap) {
         position: relative;
         box-sizing: border-box;
         color: #32323c;
-        flex: 124;
+        // flex: 124;
+
         font-size: 12px;
         height: 44px;
         line-height: 44px;
-        &:nth-child(1) { flex: 359; font-size: 18px; }
-        &:nth-child(5) { flex: 187; }
-        &:nth-child(6) { flex: 90; }
-        &:not(:first-child){
+        &:nth-child(1) {
+          flex: 1;
+          font-size: 18px;
+        }
+        &:nth-child(2),
+        &:nth-child(3) {
+          flex: 0 0 80px;
+        }
+        &:nth-child(4) {
+          flex: 0 0 180px;
+        }
+        // &:nth-child(5) {
+        //   flex: 90;
+        // }
+        &:not(:first-child) {
           &:after {
-            content: '';
+            content: "";
             position: absolute;
             left: 0;
             top: 0;
@@ -458,7 +558,7 @@ function recursionEvery(list, checkedMap) {
             background-color: rgba(17, 17, 17, 0.1);
           }
           &:before {
-            content: '';
+            content: "";
             display: inline-block;
             width: 1px;
             height: 1px;
@@ -526,7 +626,7 @@ function recursionEvery(list, checkedMap) {
       z-index: 2;
     }
     &:before {
-      content: '';
+      content: "";
       position: absolute;
       top: 0px;
       left: 24px;
@@ -541,7 +641,7 @@ function recursionEvery(list, checkedMap) {
     &:not(.disabled):hover,
     &-active {
       &:after {
-        content: '';
+        content: "";
         position: absolute;
         z-index: 1;
         top: 0;
@@ -551,7 +651,6 @@ function recursionEvery(list, checkedMap) {
         background-color: rgba(#cbcbce, 0.5);
         border-radius: 10px 0 0 10px;
       }
-      
     }
   }
 }
@@ -564,7 +663,7 @@ function recursionEvery(list, checkedMap) {
   }
   .auth-hint {
     font-size: 16px;
-    color: #32323c; 
+    color: #32323c;
     text-align: center;
     margin-bottom: 20px;
   }
@@ -587,7 +686,7 @@ function recursionEvery(list, checkedMap) {
       padding-left: 24px !important;
     }
   }
-  .edit-template-btn{
+  .edit-template-btn {
     position: relative;
     left: 24px;
     cursor: pointer;
@@ -608,7 +707,7 @@ function recursionEvery(list, checkedMap) {
     margin: 14px 0;
     font-size: 14px;
     font-family: PingFangSC-Regular;
-    color: #32323C;
+    color: #32323c;
     .item-title {
       color: #62492f;
       width: 24%;
@@ -622,7 +721,4 @@ function recursionEvery(list, checkedMap) {
     }
   }
 }
-
-
-
 </style>

src/views/main_web/workspace/components/archive-view/list-file-item.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="list-file-item">
-    <div class="list-file-item-cell" :style="{ flex: '359' }">
+    <div class="list-file-item-cell" :style="{ flex: '1' }">
       <el-checkbox v-show="!readOnly" :value="checked" @change="onCheckChange" class="list-file-item-checkbox"  />
       <span :title="fileName">{{fileName}}</span>
     </div>
-    <div class="list-file-item-cell" :style="{ flex: '124' }" @click="onCheckChange">
+    <div class="list-file-item-cell" :style="{ flex: '0 0 80px' }" @click="onCheckChange">
       <span>V{{file.version}}</span>
     </div>
-    <div class="list-file-item-cell" :style="{ flex: '124' }">
+    <!-- <div class="list-file-item-cell" :style="{ flex: '124' }">
       <span>{{fileType}}</span>
-    </div>
-    <div class="list-file-item-cell" :style="{ flex: '124' }">
+    </div> -->
+    <div class="list-file-item-cell" :style="{ flex: '0 0 80px' }">
       <span>{{file.createUserName}}</span>
     </div>
-    <div class="list-file-item-cell" :style="{ flex: '187' }">
+    <div class="list-file-item-cell" :style="{ flex: '0 0 180px' }">
       <span>{{file.modifyTime | formatTime}}</span>
     </div>
-    <div class="list-file-item-cell" :style="{ flex: '90' }"></div>
+    <!-- <div class="list-file-item-cell" :style="{ flex: '90' }"></div> -->
   </div>
 </template>
 

src/views/main_web/workspace/index.vue

@@ -4,24 +4,25 @@
     v-cloak
   >
     <app-header
-      :backBtnTitle="workFlowVisible ? '回到协作空间' : '退出'"
+      :backBtnTitle="appHeaderTitle"
       :isWorkspaceTopBar="true"
       :showUserCenter="true"
       class="app-header-style workspace-header"
       :showRecycleBin="!workFlowVisible"
-      :onBackBtnClick="workFlowVisible ? closeWorkFlow : undefined"
+      :onBackBtnClick="appHeaderBackBtnClick"
     >
       <template #center>
         <!-- 工作链 -->
         <header-flow-tabs
           v-if="currentNodeFolder"
-          v-show="!workFlowVisible"
+          v-show="!workFlowVisible && viewType !== 'archive-view'"
           :folderList="nodeFolders"
           :currentNodeFolder="currentNodeFolder"
           @changeFolder="nowFolderClick"
           @showWorkFlow="workFlowVisible = true"
         />
         <span v-show="workFlowVisible">{{projectName}}</span>
+        <span v-show="viewType === 'archive-view'">交付模板成果</span>
       </template>
       <template #right>
         <search-bar
@@ -91,13 +92,27 @@ export default {
       searchKeywords: "",
     };
   },
-  // computed: {
+  computed: {
+    appHeaderTitle() {
+      return this.workFlowVisible
+        ? '回到协作空间'
+        : this.viewType === 'archive-view'
+          ? '返回'
+          : '退出';
+    },
+    appHeaderBackBtnClick() {
+      return this.workFlowVisible
+        ? this.closeWorkFlow
+        : this.viewType === 'archive-view'
+          ? this.backToFileExplorer
+          : undefined;
+    }
   //   viewType() {
   //     const folder = this.currentNodeFolder;
   //     if(!folder) return '';
   //     return folder.folderType === 'archive' ? 'archive-view' : 'file-explorer';
   //   }
-  // },
+  },
   mounted() {
     // 获取含有节点人员分配信息的节点列表 listNewFolder
     this.getAllNodePeopleInfo();
@@ -108,6 +123,9 @@ export default {
     closeWorkFlow() {
       this.workFlowVisible = false;
     },
+    backToFileExplorer() {
+      this.viewType = 'file-explorer';
+    },
     offSearch() {
       this.searchKeywords = "";
     },