workspace 添加systemAPI代码; 指派工作 替换文件夹树组件

src/services/system.js

@@ -9,10 +9,12 @@ let socket;
 const noop = () => {};
 
 const io = (path) => {
-  return new WebSocket(path);
+  const sk = new WebSocket(`ws://127.0.0.1:7777/${path}`);
+  sk.on = sk.addEventListener;
+  return sk;
 }
 
-console.log(global.electron);
+
 
 const safeCall = f => isClient ? f : noop;
 const safeSocket = f => (...args) => socket && f(...args);
@@ -21,15 +23,14 @@ const system = {
   isClient,
   init: safeCall(() => {
     console.log('客户端 electron API 检测:', global.electron);
-    system.initialSocket();
   }),
   
-  initialSocket: () => {
-    socket = io('ws://10.240.5.17:8000');
-    // socket = io('ws://127.0.0.1:3000');
-    debugger;
-    socket.on('connect', () => { console.log('本地socket服务连接成功') });
-  },
+  // initialSocket: () => {
+  //   socket = io('ws://10.240.5.17:8000');
+  //   // socket = io('ws://127.0.0.1:3000');
+  //   debugger;
+  //   socket.on('connect', () => { console.log('本地socket服务连接成功') });
+  // },
   /**
    * todo
    * 通知登录 
@@ -48,32 +49,60 @@ const system = {
    * todo
    * 通知系统进入当前的工作空间
    */
-  entryProject: () => {
-
-  },
+  entryProject: safeCall((projectId, userId, fileChangeHandler) => {
+    const socket = io('init');
+    socket.on('open', () => {
+      socket.send([projectId, userId].join('|'));
+      socket.close();
+    });
+    const watchSocket = io('subscriptionFileChange');
+    watchSocket.on('message', fileChangeHandler);
+    return watchSocket
+  }),
+  /**
+   * todo
+   * 离开工作空间时注销socket
+   */
+  leaveProject: safeCall((watchSocket) => {
+    watchSocket.close();
+  }),
   /**
    * 下载文件到工作空间
    */
-  downloadFile: () => {
-
-  },
+  downloadFile: safeCall((fileIpfsId, projectName, fileName, dirName) => {
+    const socket = io('download');
+    socket.on('open', () => {
+      socket.send([fileIpfsId, projectName, fileName, dirName].join('|'));
+    });
+    socket.on('message', (...args) => {
+      console.log('receive download file message:', args);
+      // todo 输出下载进度
+      socket.close();
+    });
+    // socket.on('error')
+  }),
   /**
    * 上传文件到工作空间
    * issue:
    *  + 浏览器的文件上传不会带有本地的文件路径，本地服务是否可以唤起一个选择文件的弹窗?
    */
-  uploadFile: safeCall(async () => {
+  uploadFile: safeCall(async (projectName, dirName) => {
     const { ipcRenderer } = global.electron;
-    const res = await ipcRenderer.invoke('project-upload-file', { value: 'custom-var-test' });
+    const res = await ipcRenderer.invoke('project-upload-file');
     console.log('ipcRenderer project-selected-upload-file: ', res);
-    // todo 调用socket上传文件到节点服务
-    // ipcRenderer.send('project-upload-file', { value: 'custom-var-test' });
-    // ipcRenderer.once('project-selected-upload-file', (event, path) => {
-    //   console.log('ipcRenderer project-selected-upload-file:', event, path);
-    //   debugger;
-    //   // todo 取出文件的本地路径, 及当前项目相关的数据通过socket，发送给本机服务
-    //   // 
-    // });
+    const { canceled, filePaths } = res;
+    if(canceled) return;
+    const filePath = filePaths[0];
+    const fileName = filePath.split(/\/|\\/g).pop();
+    const socket = io('upload');
+    socket.on('open', () => {
+      const data = [filePath, fileName, projectName, dirName].join('|');
+      socket.send(data);
+    });
+    socket.on('message', (...args) => {
+      console.log('receive download file message:', args);
+      // socket.close();
+    });
   }),
   /**
    * 系统打开文件
@@ -82,19 +111,6 @@ const system = {
     const { shell } = global.electron;
     shell.openPath(filePath);
   }),
-  /**
-   * 初始化ipcRender
-   */
-  initialClient: safeCall(() => {
-    // const { ipcRenderer } = global.electron;
-    // // 项目中的文件上传事件监听
-    // ipcRenderer.on('project-selected-upload-file', (event, path) => {
-    //   console.log('ipcRenderer project-selected-upload-file:', event, path);
-    //   debugger;
-    //   // todo 取出文件的本地路径, 及当前项目相关的数据通过socket，发送给本机服务
-    //   // 
-    // });
-  }),
 }
 
 export default system;

src/views/components_web/distWork/distWork.vue

@@ -123,7 +123,12 @@
                   </div>
                 </div>
                   <!-- 项目管理权限 end -->
-                  <div>
+                  <folder-list
+                    :folderList="listNewFolder"
+                    :aloneAddUserForFolder="aloneAddUserForFolder"
+                    :aloneAddUserOnlyStaff="aloneAddUserOnlyStaff"
+                  />
+                  <!-- <div>
                     <div class="tianjiaxiezuorenBox" v-for="(folder, folderIndex) in listNewFolder" :key="folderIndex">
                       <div v-if="tempIndex!=folderIndex||folderIndex==0" class="self_newitem">
                         <h5 class="fl label_text">
@@ -149,10 +154,8 @@
                       </div>
                       <div>
                         <div class="fl firstPeople">
-                          <!-- 默认添加 -->
                           <div v-if="folder.manageUser == ''">
                             <div class="avtarface" @click="aloneAddUserForFolder(folder)">
-                              <!-- <i class="large_huangguan icon font_family icon-icon_huangguan-jihuo"></i> -->
                               <i class="large_huangguan el-icon-plus"></i>
                             </div>
                             <span class="Text_tiny tinyText_wirte">工作负责人</span>
@@ -160,7 +163,6 @@
                           <li v-for="(user, index) in folder.manageUser" :key="index">
                             <div>
                               <div class="avtarface" title="编辑">
-                                <!-- <img src="" v-lazy="headSrc + user.headImgUrl" @click="aloneAddUserForFolder(folder)" /> -->
                                 <img :src="user.headImgUrl | resolveAvator" @click="aloneAddUserForFolder(folder)" />
                               </div>
                               <span class="Text_tiny tinyText_wirte">{{
@@ -169,9 +171,7 @@
                             </div>
                           </li>
                         </div>
-                        <!-- 竖线 -->
                         <div class="fl vhLine mlr-20"></div>
-                        <!-- 添加职员 -->
                         <div class="fl addBtn_new" title="添加职员" @click="aloneAddUserOnlyStaff(folder)" v-if="folder.manageUser != ''">
                           <i class="el-icon-plus middleaddEC"></i>
                         </div>
@@ -182,7 +182,6 @@
                               )" :key="index">
                               <div v-if="index < 14 || showAll">
                                 <div class="avtarface" title="编辑">
-                                  <!-- <img src="" v-lazy="headSrc + user.headImgUrl" /> -->
                                   <img :src="user.headImgUrl | resolveAvator" />
                                 </div>
                                 <span class="Text_tiny tinyText_wirte">{{
@@ -228,7 +227,7 @@
                         </div>
                         <div>
                           <div class="fl firstPeople">
-                            <!-- 默认添加 -->
+
                             <div v-if="folderChild.manageUser == ''">
                               <div class="avtarface" @click="aloneAddUserForFolder(folderChild)">
                                 <i class="large_huangguan el-icon-plus"></i>
@@ -238,7 +237,6 @@
                             <li v-for="(user, index) in folderChild.manageUser" :key="index">
                               <div>
                                 <div class="avtarface" title="编辑">
-                                  <!-- <img src="" v-lazy="headSrc + user.headImgUrl" @click="aloneAddUserForFolder(folderChild)" /> -->
                                    <img :src="user.headImgUrl | resolveAvator" @click="aloneAddUserForFolder(folderChild)" />
                                 </div>
                                 <span class="Text_tiny tinyText_wirte">{{
@@ -247,9 +245,9 @@
                               </div>
                             </li>
                           </div>
-                          <!-- 竖线 -->
+
                           <div class="fl vhLine mlr-20"></div>
-                          <!-- 添加职员 -->
+
                           <div class="fl addBtn_new" title="添加职员" @click="aloneAddUserOnlyStaff(folderChild)">
                             <i class="el-icon-plus middleaddEC"></i>
                           </div>
@@ -286,11 +284,11 @@
                         </div>
                       </div>
                     </div>
-                  </div>
-                  <div v-show="listNewFolder.length > 0 && false">
+                  </div> -->
+                  <!-- <div v-show="listNewFolder.length > 0 && false">
                     <span class="fl label_text">自定义工作</span>
                     <span class="fr mt-10" @click="addProjFolderWork()"><i class="yiyunPlusmini"></i></span>
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -665,8 +663,12 @@
 import { getUserInfo,roleOptions,fetchDeptList,getUserListByNode,roleMap,stateOptions} from '@/services/user.js';
 import { fetchApi } from '@/utils/request';
 import { firstCharToLowerCase, firstCharToUpperCase } from '@/utils/tool';
+import FolderList from './folder-list';
 
 export default {
+  components: {
+    FolderList
+  },
   data() {
     return {
       imgSrc: process.env.API_HOST + "archives/cover?path=",
@@ -1473,9 +1475,7 @@ export default {
         this.currUser = this.listManagerUser[0] || {};
         this.listManagerUser = this.listManagerUser.slice(1);
       }
-      // todo folder, userList
       const folderList = mergeFolderList(folder, userHash);
-      console.log(folderList);
       this.listNewFolder = folderList;
     },
     async getUserList(){

src/views/components_web/distWork/folder-list.vue

@@ -0,0 +1,149 @@
+<template>
+  <div>
+    <div
+      class="tianjiaxiezuorenBox"
+      v-for="(folder, folderIndex) in folderList"
+      :key="folderIndex"
+    >
+      <div
+        class="self_newitem"
+      >
+        <h5 class="fl label_text">
+          <i
+            class="hand"
+            :class="!!folder.expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
+            v-show="folder.listChildren && folder.listChildren.length"
+            @click="toggleFolderExpand(folder)"
+          />
+          <!-- {{ folderIndex + 1 }} <span>.</span> -->
+          {{ folder.folderName }}
+        </h5>
+        <!-- <div class="selfoptiongroup">
+          <el-button v-if="folder.default == false" v-on:click="eidtTitle(folderIndex)">编辑</el-button>
+        </div> -->
+      </div>
+      <!-- 自定义工作 -->
+      <!-- <div v-if="showTitle == 2&&tempIndex==folderIndex" class="self_newitem">
+        <input v-model="folderChild.folderName" :class="
+            folderChild.default == false
+              ? 'bianji_input self_Inputwork'
+              : 'fl label_text_moren'
+          " :disabled="folderChild.default" />
+        <div class="selfoptiongroup">
+          <el-button type="primary" v-if="folderChild.default == false" v-on:click="saveTitle">保存</el-button>
+          <el-button v-if="folderChild.default == false" v-on:click="deleTitle(folderIndex)">删除</el-button>
+        </div>
+      </div> -->
+      <!-- 职员行 -->
+      <div>
+        <div class="fl firstPeople">
+          <!-- 默认添加 -->
+          <div v-if="folder.manageUser == ''">
+            <div class="avtarface" @click="aloneAddUserForFolder(folder)">
+              <!-- <i class="large_huangguan icon font_family icon-icon_huangguan-jihuo"></i> -->
+              <i class="large_huangguan el-icon-plus"></i>
+            </div>
+            <span class="Text_tiny tinyText_wirte">工作负责人</span>
+          </div>
+          <li v-for="(user, index) in folder.manageUser" :key="index">
+            <div>
+              <div class="avtarface" title="编辑">
+                <!-- <img src="" v-lazy="headSrc + user.headImgUrl" @click="aloneAddUserForFolder(folder)" /> -->
+                <img
+                  :src="user.headImgUrl | resolveAvator"
+                  @click="aloneAddUserForFolder(folder)"
+                />
+              </div>
+              <span class="Text_tiny tinyText_wirte">{{ user.cnName }}</span>
+            </div>
+          </li>
+        </div>
+        <!-- 竖线 -->
+        <div class="fl vhLine mlr-20"></div>
+        <!-- 添加职员 -->
+        <div
+          class="fl addBtn_new"
+          title="添加职员"
+          @click="aloneAddUserOnlyStaff(folder)"
+          v-if="folder.manageUser != ''"
+        >
+          <i class="el-icon-plus middleaddEC"></i>
+        </div>
+        <div class="fl chengyuanbox">
+          <ul class="ECworkerList">
+            <li
+              v-for="(user, index) in listUserComputed(folder.listUser)"
+              :key="index"
+            >
+              <div v-if="index < 14 || showAll">
+                <div class="avtarface" title="编辑">
+                  <!-- <img src="" v-lazy="headSrc + user.headImgUrl" /> -->
+                  <img :src="user.headImgUrl | resolveAvator" />
+                </div>
+                <span class="Text_tiny tinyText_wirte">{{ user.cnName }}</span>
+              </div>
+              <div class v-if="index == 14 && !showAll" @click="showAllClick">
+                <span class="zhangkai_down"></span>
+                <span class="Text_tiny tinyText_wirte">展开全部</span>
+              </div>
+              <div
+                v-if="
+                  showAll && index == folder.listUser.length - 1 && index > 14
+                "
+                @click="showAll = false"
+                class="newweizhi"
+              >
+                <span class="zhangkai_up"></span>
+                <span class="Text_tiny tinyText_wirte">收起职员</span>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="clear"></div>
+      </div>
+
+      <template v-if="folder.listChildren">
+        <folder-list
+          :folderList="folder.listChildren"
+          :aloneAddUserForFolder="aloneAddUserForFolder"
+          :aloneAddUserOnlyStaff="aloneAddUserOnlyStaff"
+          v-show="folder.expanded"
+          class="folder-children"
+        />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'folderList',
+  props: {
+    folderList: Array,
+    aloneAddUserForFolder: Function,
+    aloneAddUserOnlyStaff: Function,
+  },
+  methods: {
+    toggleFolderExpand(folder) {
+      folder.expanded = !folder.expanded;
+      this.$forceUpdate();
+    }
+  },
+  computed: {
+    listUserComputed: function () {
+      var thisApp=this;
+        return function (listUsers) {
+          return listUsers.filter(function(user) {
+              return user.folderPerm != 2;
+          });
+        };
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .folder-children {
+    padding-left: 30px;
+  }
+</style>

src/views/main_web/workspace/workspace.vue

@@ -2972,6 +2972,9 @@ export default {
       myFileBreadNodeData: [initialTempFile('myFile', '我的文件')],
       myComFileBreadNodeData: [initialTempFile('myComFile', '公共文件')],
       showadow: false,
+
+      // 
+      socketIns: null, // 监听文件变化的socket实例
     };
   },
   created: function () {
@@ -2996,6 +2999,8 @@ export default {
     window.addEventListener("resize", this.listenBottomHeight, true);
     //添加鼠标移入齿轮事件
     window.addEventListener("mouseenter", this.setIconMouseEnter, true);
+
+    this.socketIns = system.entryProject(sessionStorage.projName, sessionStorage.userId);
   },
   computed: {
     /**
@@ -4635,7 +4640,7 @@ export default {
      */
     clientUpload() {
       if(!this.isClient) return;
-      // this.isShowNewFiledialog = false;
+      this.isShowNewFiledialog = false;
       // var foldergroupId = "";
       // if (
       //   this.dbClickSelectedFolderGroupData != null &&
@@ -4648,7 +4653,7 @@ export default {
       //   sessionStorage.userId,
       //   foldergroupId
       // );
-      system.uploadFile();
+      system.uploadFile(sessionStorage.projName, this.nowFolder.folderName);
     },
     /**
      * 重命名我的文件
@@ -6984,6 +6989,7 @@ export default {
     window.removeEventListener("resize", this.listenBottomHeight);
     window.removeEventListener("mouseenter", this.setIconMouseEnter);
     clearInterval(this.timer);
+    system.levelProject(this.socketIns);
   },
   components: {
     Forgeview: forgeview,