yiyun-fe
/
yiyunjianzhu-vue
4
0
複製 0
程式碼 合併請求 0 版本發佈 0 Activity
瀏覽代碼

commit

dev-remain
revive 4 年之前
父節點
c72edc42c2
當前提交
2795da0a9e
共有 3 個文件被更改，包括 413 次插入 和 2 次删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -2
      public/static/css/main.css
  2. +5
    -0
      src/router.js
  3. +407
    -0
      src/views/main_web/workspace/components/file-history.vue

+ 1
- 2
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;


+ 5
- 0
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',


+ 407
- 0
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>

Write Preview
Loading…
取消
儲存