yiyun-fe
/
yiyunjianzhu-vue
4
0
Vork 0
Code Pull-aanvragen 0 Publicaties 0 Activiteit
Bladeren bron

commit

dev-remain
revive 4 jaren geleden
bovenliggende
2e5ac62331
commit
af957bcbb6
4 gewijzigde bestanden met toevoegingen van 614 en 369 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +1
    -1
      src/router.js
  2. +203
    -0
      src/views/main_web/workspace/components/file-milestone.vue
  3. +27
    -368
      src/views/main_web/workspace/components/version-item.vue
  4. +383
    -0
      src/views/main_web/workspace/components/version.vue

+ 1
- 1
src/router.js Bestand weergeven

@@ -82,7 +82,7 @@ const router = new Router({
{
path: '/history',
name: 'history',
component: () => import('@/views/main_web/workspace/components/file-history'),
component: () => import('@/views/main_web/workspace/components/file-milestone'),
},
{
path: '/cloud',


+ 203
- 0
src/views/main_web/workspace/components/file-milestone.vue Bestand weergeven

@@ -0,0 +1,203 @@
<template>
<div class="milestone_panel">
<!-- 用户中心弹窗模块 -->
<div :class="yiyunAnimated + ' flex_right_pain'">
<!-- 历史版本管理 -->
<div class="flex_right_pain_body_box">
<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>
</div>
<div class="bottombtnitem">
<div class="bottombtnitemlonBtn">
<el-button
type="primary"
round
class="longBtn defualtBtnInfo quitBtn"
@click="checkAllMilestone"
>查看所有历史版本</el-button
>
</div>
</div>
</div>
<!-- 查看所有历史版本 -->
<div class="flex_right_pain_body_box" v-if="milestoneCheck">
<div class="flex_right_pain_head">
<div class="EC_col_4">
<i
class="el-collapse-item__arrow el-icon-arrow-left left-list_btn"
@click.stop="enterMilestoneManage"
></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>
</div>
</div>
</div>
</div>
</template>

<script>
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,
colorList:['#7850FF','#4AE2A6','#FFBE00',
'#3C7DFF','#D6243A','#FF6634',
'#14A3FF','#7DE217'
],//颜色盘
selectedColor:'#7850FF',
toolboxShow:false,
color:'#fff', //标记icon的颜色
milestoneManage:true,
milestoneCheck:false,
};
},
methods: {
//点击某一版本
clickVersion(){
this.isFileNameShow = true;
},
//触发input焦点事件
editRemarks(){
this.isEdit = true;
},
//完成备注
setRemarks(){
this.isFileNameShow = false;
this.isEdit = false;
},
//取消备注
cancelEdit(){

},
// 查看所有历史版本
checkAllMilestone(){
this.milestoneManage = false;
this.milestoneCheck = true;
},
//返回历史版本管理
enterMilestoneManage(){
this.milestoneManage = true;
this.milestoneCheck = false;
},


/**
* 用户设置面板
*/
openSetPain: function () {
this.yiyunAnimated = "AnimatedRightIn";
},
/**
* 关闭
*/
closeSetPain: function () {
this.yiyunAnimated = "";
},
// 打开设置颜色
setColor(){
this.toolboxShow = true;
this.isFileNameShow = true;
},
// 选择颜色
selectColor(color){
this.selectedColor = color;
},
// 关闭设置颜色
closeSetColor(){
this.toolboxShow = false;
},
//创建里程碑
createMilestone(){
this.toolboxShow = false;
this.color = this.selectedColor;
}
},
};
</script>

<style lang="scss" scoped>
.icon-gerenshezhi {
line-height: inherit;
}
.yiyun_yinyongname {
line-height: 1.2;
}
.milestone_panel .flex_right_pain{
right: 30px;
}
.milestone_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;
}
/* 关闭弹窗 */
.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>

+ 27
- 368
src/views/main_web/workspace/components/version-item.vue Bestand weergeven

@@ -1,383 +1,42 @@
<template>
<div>
<!-- 选择颜色弹窗 -->
<div class="toolbox" v-if="toolboxShow">
<div class="toolbox_content">
<div class="toolbox_top">
<div class="version_icon" :style="{border:`1px solid ${selectedColor}`}">
</div>
<div class="create_btn" @click="createMilestone">
创建里程碑
</div>
<div class="close_btn" @click.stop="closeSetColor">
<i class="el-icon-close"></i>
</div>
<div class="version_item">
<div class="content">
<div class="content_header">
<p class="version_title">当前协同-版本9</p>
</div>
<div class="toolbox_bottom">
<div class="colorbox" @click.stop="selectColor(color)" v-for="(color,index) in colorList" :key="index" :style="{backgroundColor:`${color}`}">
<div class="point" v-if="selectedColor == color"></div>
<div class="content_icon">
<div class="icon_box">
<i></i>
</div>
<div class="switch_btn">
<el-switch
v-model="switchValue"
active-color="#7850FF"
inactive-color="#fff">
</el-switch>
</div>
</div>
</div>
<div class="triangle-down">
</div>
</div>
<!-- 历史版本信息 -->
<div class="version_item" :class="{version_big : toolboxShow || isNowVersion ||isVersionClick}" @click.stop="clickVersion">
<div class="version_item_icon" @click.stop="setColor" :style="{backgroundColor:`${color}`}">
</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="isVersionClick">
<p>文件名</p>
<p class="content_right">由备用名创建</p>
<div class="version_info">

</div>
<div class="content_remarks" v-if="!isVersionClick">
{{remarks}}
</div>
</div>
<div class="edit_remarks" v-if="isVersionClick">
<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>
123
</div>
</div>
</div>

</div>
</template>

<script>
export default {
props:{
isNowVersion:{
type:Boolean,
default: false,
},
isCheckMilestone:{
type:Boolean,
default: false,
data(){
return{
switchValue:true,
}


},
data() {
return {
isVersionClick:false,
remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
isEdit:false,
colorList:['#7850FF','#4AE2A6','#FFBE00',
'#3C7DFF','#D6243A','#FF6634',
'#14A3FF','#7DE217'
],//颜色盘
selectedColor:'#7850FF',
toolboxShow:false,//选择颜色盘显示
color:'#fff', //标记icon的颜色

};
},
methods: {
//点击某一版本
clickVersion(){
if(!this.isNowVersion){
this.isVersionClick = true;
}
},
//触发input焦点事件
editRemarks(){
this.isEdit = true;
},
//完成备注
setRemarks(){
this.isFileNameShow = false;
this.isEdit = false;
},
//取消备注
cancelEdit(){

},
// 打开设置颜色
setColor(){
if(this.isCheckMilestone){
this.toolboxShow = true;
this.isFileNameShow = true;
}
},
// 选择颜色
selectColor(color){
this.selectedColor = color;
},
// 关闭设置颜色
closeSetColor(){
this.toolboxShow = false;
},
//创建里程碑
createMilestone(){
this.toolboxShow = false;
this.color = this.selectedColor;
}
},
};
</script>

<style scoped lang="scss">
.icon-gerenshezhi {
line-height: inherit;
}
.yiyun_yinyongname {
line-height: 1.2;
}
.milestone_panel .flex_right_pain{
right: 30px;
}
.milestone_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_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;
position: relative;
}

.version_big{
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: 8px;
font-size: 14px;
}
.share_btn{
width: 120px;
border: 1px solid rgba(167, 168, 183, 1);
text-align: center;
border-radius: 8px;
font-size: 14px;
line-height: 24px;
}
.share_btn:hover{
background: #7850FF;
border-color: #7850FF;
color: #fff;
transition: all ease 0.5s;
}
.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_item_icon,.version_icon{
width: 20px;
height: 20px;
background-color: green;
border-radius: 6px;
}
.version_item_icon{
position:absolute;
}

.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);
}
/*选择颜色弹框*/
.toolbox{
width: 359px;
height: 74px;
margin: 8px auto;
.toolbox_content{
background-color: #fff;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 12px 21px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
.toolbox_top{
display: flex;
box-sizing: border-box;
justify-content: flex-end;
margin-bottom: 12px;
.create_btn{
width: 100px;
line-height: 20px;
color: rgba(50, 50, 60, 100);
font-size: 14px;
text-align: center;
border-radius: 6px;
box-sizing: border-box;
border: 1px solid #8C00FF;
cursor: pointer;
}
.version_icon{
margin-right: auto;
background-color:#fff;
}
.close_btn{
color: #8C00FF;
margin-left: 12px;
}
}
}

}
.toolbox_bottom{
padding-left: 2px;
display:flex;
.colorbox{
width: 16px;
text-align: center;
height: 16px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
cursor: pointer;
.point{
background-color: #fff;
border-radius: 50%;
width: 5px;
height: 5px;

}
}
}
.triangle-down{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #fff;
left: 20px;
position: absolute;
}
.el-icon-close::before{
content: "\e6db" !important;
}
/*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;

}

.fade-btn-enter{
opacity: 0;
}
.fade-btn-enter-active{
transition: all 0.5s ;
}
.fade-btn-leave-to{
opacity: 0;
}
.fade-btn-leave-active{
transition: all 0.5s;
}


</style>
</script>

+ 383
- 0
src/views/main_web/workspace/components/version.vue Bestand weergeven

@@ -0,0 +1,383 @@
<template>
<div>
<!-- 选择颜色弹窗 -->
<div class="toolbox" v-if="toolboxShow">
<div class="toolbox_content">
<div class="toolbox_top">
<div class="version_icon" :style="{border:`1px solid ${selectedColor}`}">
</div>
<div class="create_btn" @click="createMilestone">
创建里程碑
</div>
<div class="close_btn" @click.stop="closeSetColor">
<i class="el-icon-close"></i>
</div>
</div>
<div class="toolbox_bottom">
<div class="colorbox" @click.stop="selectColor(color)" v-for="(color,index) in colorList" :key="index" :style="{backgroundColor:`${color}`}">
<div class="point" v-if="selectedColor == color"></div>
</div>
</div>
</div>
<div class="triangle-down">
</div>
</div>
<!-- 历史版本信息 -->
<div class="version_item" :class="{version_big : toolboxShow || isNowVersion ||isVersionClick}" @click.stop="clickVersion">
<div class="version_item_icon" @click.stop="setColor" :style="{backgroundColor:`${color}`}">
</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="isVersionClick">
<p>文件名</p>
<p class="content_right">由备用名创建</p>
</div>
<div class="content_remarks" v-if="!isVersionClick">
{{remarks}}
</div>
</div>
<div class="edit_remarks" v-if="isVersionClick">
<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>
</template>
<script>
export default {
props:{
isNowVersion:{
type:Boolean,
default: false,
},
isCheckMilestone:{
type:Boolean,
default: false,
}


},
data() {
return {
isVersionClick:false,
remarks:'备注内容，默认显示两行。备注内容，默认显示两行。',
isEdit:false,
colorList:['#7850FF','#4AE2A6','#FFBE00',
'#3C7DFF','#D6243A','#FF6634',
'#14A3FF','#7DE217'
],//颜色盘
selectedColor:'#7850FF',
toolboxShow:false,//选择颜色盘显示
color:'#fff', //标记icon的颜色

};
},
methods: {
//点击某一版本
clickVersion(){
if(!this.isNowVersion){
this.isVersionClick = true;
}
},
//触发input焦点事件
editRemarks(){
this.isEdit = true;
},
//完成备注
setRemarks(){
this.isFileNameShow = false;
this.isEdit = false;
},
//取消备注
cancelEdit(){

},
// 打开设置颜色
setColor(){
if(this.isCheckMilestone){
this.toolboxShow = true;
this.isFileNameShow = true;
}
},
// 选择颜色
selectColor(color){
this.selectedColor = color;
},
// 关闭设置颜色
closeSetColor(){
this.toolboxShow = false;
},
//创建里程碑
createMilestone(){
this.toolboxShow = false;
this.color = this.selectedColor;
}
},
};
</script>

<style scoped lang="scss">
.icon-gerenshezhi {
line-height: inherit;
}
.yiyun_yinyongname {
line-height: 1.2;
}
.milestone_panel .flex_right_pain{
right: 30px;
}
.milestone_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_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;
position: relative;
}

.version_big{
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: 8px;
font-size: 14px;
}
.share_btn{
width: 120px;
border: 1px solid rgba(167, 168, 183, 1);
text-align: center;
border-radius: 8px;
font-size: 14px;
line-height: 24px;
}
.share_btn:hover{
background: #7850FF;
border-color: #7850FF;
color: #fff;
transition: all ease 0.5s;
}
.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_item_icon,.version_icon{
width: 20px;
height: 20px;
background-color: green;
border-radius: 6px;
}
.version_item_icon{
position:absolute;
}

.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);
}
/*选择颜色弹框*/
.toolbox{
width: 359px;
height: 74px;
margin: 8px auto;
.toolbox_content{
background-color: #fff;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 12px 21px 2px rgba(0, 0, 0, 0.1), 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
.toolbox_top{
display: flex;
box-sizing: border-box;
justify-content: flex-end;
margin-bottom: 12px;
.create_btn{
width: 100px;
line-height: 20px;
color: rgba(50, 50, 60, 100);
font-size: 14px;
text-align: center;
border-radius: 6px;
box-sizing: border-box;
border: 1px solid #8C00FF;
cursor: pointer;
}
.version_icon{
margin-right: auto;
background-color:#fff;
}
.close_btn{
color: #8C00FF;
margin-left: 12px;
}
}
}

}
.toolbox_bottom{
padding-left: 2px;
display:flex;
.colorbox{
width: 16px;
text-align: center;
height: 16px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 8px;
cursor: pointer;
.point{
background-color: #fff;
border-radius: 50%;
width: 5px;
height: 5px;

}
}
}
.triangle-down{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #fff;
left: 20px;
position: absolute;
}
.el-icon-close::before{
content: "\e6db" !important;
}
/*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;

}

.fade-btn-enter{
opacity: 0;
}
.fade-btn-enter-active{
transition: all 0.5s ;
}
.fade-btn-leave-to{
opacity: 0;
}
.fade-btn-leave-active{
transition: all 0.5s;
}


</style>

Schrijf Voorbeeld
Laden…
Annuleren
Opslaan