From 2795da0a9edc02a0cb371d9e47f43e43ee4e7312 Mon Sep 17 00:00:00 2001
From: revive <1664535558@qq.com>
Date: Wed, 20 Jan 2021 11:06:27 +0800
Subject: [PATCH] commit

---
 public/static/css/main.css                    |   3 +-
 src/router.js                                 |   5 +
 .../workspace/components/file-history.vue     | 407 ++++++++++++++++++
 3 files changed, 413 insertions(+), 2 deletions(-)
 create mode 100644 src/views/main_web/workspace/components/file-history.vue

diff --git a/public/static/css/main.css b/public/static/css/main.css
index 16f5090f..dc6aa2fd 100644
--- a/public/static/css/main.css
+++ b/public/static/css/main.css
@@ -6524,8 +6524,7 @@ h4.biaoqianweizhi2{
     position: absolute;
     top: 28%;
     left: auto;
-    right: 10px;
-    background-color: #fff;
+    right: 0px;
 }
 .card_box_pane{
 	width: 260px;
diff --git a/src/router.js b/src/router.js
index e74741b0..a3562741 100644
--- a/src/router.js
+++ b/src/router.js
@@ -79,6 +79,11 @@ const router = new Router({
 		name: 'recycle',
 		component: () => import('@/views/main_web/workspace/recyclebin'),
 	},
+	{
+		path: '/history',
+		name: 'history',
+		component: () => import('@/views/main_web/workspace/components/file-history'),
+	},
 	{
 		path: '/cloud',
 		name: 'cloud',
diff --git a/src/views/main_web/workspace/components/file-history.vue b/src/views/main_web/workspace/components/file-history.vue
new file mode 100644
index 00000000..8afa70e9
--- /dev/null
+++ b/src/views/main_web/workspace/components/file-history.vue
@@ -0,0 +1,407 @@
+<template>
+  <div class="historyFile_panel">
+    <!-- 用户中心弹窗模块 -->
+    <div :class="yiyunAnimated + ' flex_right_pain'">
+      <div class="flex_right_pain_body_box" v-if="false">
+        <div class="flex_right_pain_head">
+          <div class="EC_col_12">
+            <h4 class="RdiaheaderTitle">历史版本管理</h4>
+          </div>
+          <div class="EC_col_12">
+            <div class="close-wrap"
+                 :class="{'close-hover': isCloseHover}"
+                @click.stop="closeSetPain" 
+                @mouseenter="isCloseHover = true" 
+                @mouseleave="isCloseHover = false"
+            >
+              <img v-show="!isCloseHover" class="close-icon vert-hori-center" src="/static/img/operate-pop-window/关闭.svg" alt />
+              <img v-show="isCloseHover" class="close-icon vert-hori-center" src="/static/img/operate-pop-window/关闭激活.svg" alt />
+            </div>
+          </div>
+        </div>
+        <div class="pxline"></div>
+        <div class="flex_right_pain_body">
+          <div class="yiyun_app_itemClasss">
+              <div class="version_now">
+                  <div class="version_now_icon">
+
+                  </div>
+                  <div class="content">
+                      <div class="content_header">
+                        <p class="version_title">当前协作-版本9</p>
+                        <p class="content_right">协同于12月12日 下午3:23</p>
+                      </div>
+                      <div class="content_name">
+                        <p>文件名</p>
+                        <p  class="content_right">由备用名创建</p>
+                      </div>
+                      <div class="content_remarks">
+                        备注内容，默认显示两行。备注内容，默认显示两行。
+                        备注内容，默认显示两行。备注内容，默认显示两行。
+                        备注内容，默认显示两行。备注内容，默认显示两行。
+                      </div>
+                  </div>
+              </div>
+              <!-- 分割线 -->
+              <div class="title">里程碑</div>
+              <!-- 历史版本 -->
+              <div class="version_history">
+
+                <div class="version_item" @click.stop="clickVersion" :class="{version_click : isFileNameShow}">
+                  <div class="version_now_icon">
+
+                  </div>
+                  <div class="content">
+                      <div class="content_header">
+                        <p class="version_title">当前协作-版本9</p>
+                        <p class="content_right">协同于12月12日 下午3:23</p>
+                      </div>
+                      <div class="content_name" v-if="isFileNameShow">
+                        <p>文件名</p>
+                        <p  class="content_right">由备用名创建</p>
+                      </div>
+                      <div class="content_remarks" v-if="!isFileNameShow">
+                        {{remarks}}
+                      </div>
+                  </div>  
+                    <div class="edit_remarks" v-if="isFileNameShow">
+                        <el-input v-model="remarks" placeholder="创建备注" @focus="editRemarks" :class="{input_border:isEdit}"></el-input>
+                          <div class="select_box" v-if="!isEdit">
+                            <div class="share_btn">设定为协同版本</div>
+                            <div class="look_btn">查看</div>
+                          </div>
+
+                          <div class="select_box" v-if="isEdit">
+                            <div class="cancel_btn button">取消</div>
+                            <div class="set_btn button" @click.stop="setRemarks">完成备注</div>
+                          </div>
+
+                    </div>                
+                </div>
+                <div class="version_item">
+                  <div class="version_now_icon">
+                  </div>
+                  <div class="content">
+                      <div class="content_header">
+                        <p class="version_title">当前协作-版本9</p>
+                        <p class="content_right">协同于12月12日 下午3:23</p>
+                      </div>
+                  </div>                  
+                </div>
+              </div>
+          </div>
+        </div>
+        <div class="bottombtnitem">
+          <div class="bottombtnitemlonBtn">
+            <el-button 
+              type="primary"
+              round
+              class="longBtn defualtBtnInfo quitBtn"
+              @click="tryToLogout"
+              >查看所有历史版本</el-button
+            >
+          </div>
+        </div>
+      </div>
+      <!-- 所有历史版本 -->
+      <div class="flex_right_pain_body_box" v-if="true">
+        <div class="flex_right_pain_head">
+          <div class="EC_col_4">
+            <i
+              class="el-collapse-item__arrow el-icon-arrow-left left-list_btn"
+              
+            ></i>
+          </div>
+          <div class="EC_col_16">
+            <h4 class="centertext">所有历史版本</h4>
+          </div>
+          <div class="EC_col_4">
+            <i
+              class="Cicon icon font_family icon-icon_quxiaohuoguanbi fr"
+              title="关闭"
+              @click="closeSetPain"
+            ></i>
+          </div>
+        </div>
+        <div class="pxline"></div>
+        <div class="flex_right_pain_body">
+          <div class="yiyun_app_itemClasss">
+              <!--选择历史版本 -->
+              <div class="version_history">
+
+                <div class="version_item" :class="{version_click : isFileNameShow}">
+                  <div class="version_now_icon">             
+                  </div>
+                  <div class="content" >
+                      <div class="content_header">
+                        <p class="version_title">当前协作-版本9</p>
+                        <p class="content_right">协同于12月12日 下午3:23</p>
+                      </div>
+                      <div class="content_name" v-if="isFileNameShow">
+                        <p>文件名</p>
+                        <p  class="content_right">由备用名创建</p>
+                      </div>
+                      <div class="content_remarks" v-if="!isFileNameShow">
+                        {{remarks}}
+                      </div>
+                  </div>  
+                    <div class="edit_remarks" v-if="isFileNameShow">
+                        <el-input v-model="remarks" placeholder="创建备注" @focus="editRemarks" :class="{input_border:isEdit}"></el-input>
+                          <div class="select_box" v-if="!isEdit">
+                            <div class="share_btn">设定为协同版本</div>
+                            <div class="look_btn">下载浏览</div>
+                          </div>
+
+                          <div class="select_box" v-if="isEdit">
+                            <div class="cancel_btn button">取消</div>
+                            <div class="set_btn button" @click.stop="setRemarks">完成备注</div>
+                          </div>
+                    </div>                
+                </div>
+                <div class="version_item">
+                  <div class="version_now_icon">
+                  </div>
+                  <div class="content">
+                      <div class="content_header">
+                        <p class="version_title">当前协作-版本9</p>
+                        <p class="content_right">协同于12月12日 下午3:23</p>
+                      </div>
+                  </div>                  
+                </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import fileUploader from "@/components/fileUploader/Index";
+import FileUpload from "@/components/file-uploader";
+import BtnSmsCode from "@/components/BtnSmsCode/BtnSmsCode.vue";
+import { getUserInfo, updateUserAvator } from "@/services/user";
+import { wrapOssProtocol } from "@/services/oss";
+import system from '@/services/system';
+Vue.use(fileUploader);
+
+const $ = window.jQuery;
+
+
+export default {
+  components: {
+  },
+  async mounted() {
+    const userInfo = await getUserInfo(this.$store.state.accountId);
+    this.user = userInfo;
+  },
+  data() {
+    return {
+      yiyunAnimated: "", //设置面板默认动画为空  AnimatedRightIn动画右边进入
+      isCloseHover: false,
+      //添加的
+      clickedVersion:'',
+      isFileNameShow:false,
+      remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
+      isEdit:false
+
+    };
+  },
+  methods: {
+    //点击某一版本
+    clickVersion(){
+      this.isFileNameShow = true;
+    },
+    //触发input焦点事件
+    editRemarks(){
+      this.isEdit = true;
+    },
+    //完成备注
+    setRemarks(){
+      this.isFileNameShow = false;
+      this.isEdit = false;
+    },
+    //取消备注
+    cancelEdit(){
+
+    },
+
+
+    /**
+     * 用户设置面板
+     */
+    openSetPain: function () {
+      this.yiyunAnimated = "AnimatedRightIn";
+    },
+    /**
+     * 关闭
+     */
+    closeSetPain: function () {
+      this.yiyunAnimated = "";
+    },
+     
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.icon-gerenshezhi {
+  line-height: inherit;
+}
+.yiyun_yinyongname {
+  line-height: 1.2;
+}
+.historyFile_panel .flex_right_pain{
+    right: 30px;
+}
+.historyFile_panel .flex_right_pain_body {
+  font-size: 16px;
+  height: calc(100vh - 24px - 16px - 48px - 58px - 6px - 50px) !important;
+}
+.check-for-updates {
+  display: flex;
+  align-items: center;
+}
+.version_now,.version_item{
+    margin: 8px auto;
+    border-radius: 8px;
+    padding: 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    transition: all .3s linear;	
+    background-color: gray;
+}
+.version_item{
+  width: 343px;
+}
+.version_click{
+  width: 359px;
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
+              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+.edit_remarks {
+  margin-top: 8px;
+  .edit_input{
+    width: 343px;
+    height: 40px;
+  }
+  .select_box{
+    display: flex;
+    padding-top: 8px;
+    justify-content: space-between;
+    .button{
+      width: 167px;
+      height: 24px;
+      line-height: 24px;
+      text-align: center;
+      border-radius: 4px;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+    }
+    .share_btn{
+      width: 120px;
+      height: 24px;
+      border: 1px solid rgba(167, 168, 183, 1);
+      font-family: PingFangSC-Regular;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .look_btn{
+      font-size: 12px;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.56);
+    }
+    .cancel_btn{
+      background-color: rgba(255, 255, 255, 1);
+      border: 0.5px solid rgba(209, 210, 211, 1);      
+    }
+    .set_btn{
+      color:#fff;
+      background-color: #7850FF;
+      border: 0.5px solid #7850FF;
+    }
+  }
+}
+.title{
+  width: 100%;
+  padding: 12px 24px;
+  box-sizing: border-box;
+  border-bottom: 1px solid black;
+  font-weight: bold;
+}
+.version_now_icon{
+    width: 20px;
+    height: 20px;
+    background-color: green;
+    position:absolute;
+    border-radius: 6px;
+    //margin-bottom: 8px;
+
+}
+.content{
+
+    margin-left: 24px;
+    font-size: 11px;
+    cursor: pointer;
+    .content_name{
+       padding-top: 8px;
+     
+    }
+    .content_header{
+      line-height: 20px;
+    }
+    .version_title{
+      font-weight: bold;
+      font-family: PingFangSC-Medium;      
+    }
+    .content_right{
+      margin-left: auto;
+      color: rgba(0, 0, 0, 0.56);
+    }
+    .content_remarks{
+      margin-top: 8px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2 ;
+      -webkit-box-orient: vertical ;
+      font-size: 14px;
+      text-align: left;
+      font-family: PingFangSC-Regular;
+    }
+}
+.content_header,.content_name{
+  display: flex;
+  justify-content: start;
+}
+.version_now:hover{
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 
+              0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+}
+/*input边框变紫色 */
+.input_border{
+  border: 1px solid #7850FF;
+
+}
+/* 关闭弹窗 */
+.close-hover {
+  background-color: #d6243a;
+}
+.close-wrap {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  width: 32px;
+  height: 32px;
+
+  line-height: 32px;
+  text-align: center;
+
+  border-radius: 4px;
+
+  cursor: pointer;
+
+}
+
+</style>
\ No newline at end of file