preview的peport页面
This commit is contained in:
X1627315083@163.com
206
src/views/home/agent/components/versionTree/index.vue
Normal file
206
src/views/home/agent/components/versionTree/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
|
||||
import Tree from './tree/index.vue'
|
||||
import Detail from './detail/index.vue'
|
||||
import { versionsList } from './tools/versionsData'
|
||||
import { findAndAddChild, findAndRemoveChild } from './tools/tools'
|
||||
|
||||
const props = defineProps({
|
||||
versionTreeData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
drawer: false,
|
||||
list: []
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
//const emit = defineEmits([
|
||||
//])
|
||||
|
||||
const treeRef = ref(null)
|
||||
const treeKey = ref(0)
|
||||
const treeState = ref(true)//
|
||||
|
||||
const selectItem:any = ref({})
|
||||
|
||||
const openTree = (state)=>{
|
||||
treeState.value = state
|
||||
}
|
||||
|
||||
const versionRestore = ()=>{
|
||||
let id = ''
|
||||
if(selectItem.value?.child?.length > 0){
|
||||
function findMaxForYourFormat(items) {
|
||||
let max = 0
|
||||
|
||||
for (const item of items) {
|
||||
// 直接分割并取最后一部分
|
||||
const parts = item.id.split('-')
|
||||
const lastNumber = parseInt(parts[parts.length - 1], 10)
|
||||
|
||||
if (lastNumber > max) {
|
||||
max = lastNumber
|
||||
}
|
||||
}
|
||||
|
||||
return max
|
||||
}
|
||||
id = `${selectItem.value?.id}-${findMaxForYourFormat(selectItem.value?.child) + 1}`
|
||||
}else{
|
||||
id = `${selectItem.value?.id}-1`
|
||||
}
|
||||
let addObj = {
|
||||
id,
|
||||
name:`V${id}`
|
||||
}
|
||||
findAndAddChild(versionsList, selectItem.value?.id, addObj)
|
||||
selectItem.value = {...addObj}
|
||||
treeKey.value++
|
||||
}
|
||||
const versionDelete = (versionDetail)=>{
|
||||
if(!selectItem.value.id)return
|
||||
findAndRemoveChild(versionsList, selectItem.value.id)
|
||||
treeKey.value++
|
||||
}
|
||||
|
||||
let data = reactive({})
|
||||
onMounted(() => {})
|
||||
onUnmounted(() => {})
|
||||
defineExpose({})
|
||||
const {} = toRefs(data)
|
||||
</script>
|
||||
<template>
|
||||
<div class="versionTree">
|
||||
<el-drawer
|
||||
v-model="versionTreeData.drawer"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
:size="treeState ? '109rem' : '49rem'"
|
||||
body-class="versionTreeBody"
|
||||
:with-header="false"
|
||||
>
|
||||
<div class="versionTreeTitle">
|
||||
<span>Version Tree: Retro Sofa Sketch</span>
|
||||
<div class="closeBtn" @click="versionTreeData.drawer = false">
|
||||
<div class="closeIcon">
|
||||
<SvgIcon name="close" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="expandBtnBox">
|
||||
<div class="btn" @click="openTree(true)">
|
||||
<div class="versionExport">
|
||||
<SvgIcon name="versionExport" size="17" color="rgba(0, 0, 0, 0.6)" />
|
||||
</div>
|
||||
<span>{{ $t('VersionTree.export') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="expandBtnBox">
|
||||
<div class="btn" @click="openTree(true)">
|
||||
<div class="bg left" :class="{'active':treeState}"></div>
|
||||
<span>{{ $t('VersionTree.linearNodeTree') }}</span>
|
||||
</div>
|
||||
<div class="btn" @click="openTree(false)">
|
||||
<div class="bg right" :class="{'active':!treeState}"></div>
|
||||
<span>{{ $t('VersionTree.branchingNodeTree') }}</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="versionTreeBox">
|
||||
<div class="tree">
|
||||
<Tree
|
||||
ref="treeRef"
|
||||
:versionsList="versionsList"
|
||||
:treeState="treeState"
|
||||
v-model:selectItem="selectItem"
|
||||
@versionRestore="versionRestore"
|
||||
@versionDelete="versionDelete"
|
||||
:key="treeKey"
|
||||
></Tree>
|
||||
</div>
|
||||
<div class="detail">
|
||||
<Detail
|
||||
v-model:selectItem="selectItem"
|
||||
></Detail>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.versionTree{
|
||||
--border-radius: 1rem;
|
||||
--treeItem-width: 5.4rem;
|
||||
--treeItem-height: 5.4rem;
|
||||
--treeItem-raduis: 50%;
|
||||
--treeItem-border: 2px solid #C1C1C1;
|
||||
--treeItem-background: #ffffff;
|
||||
--treeItem-active-background: #e6e6e6;
|
||||
|
||||
:deep(.versionTreeBody) {
|
||||
--el-drawer-padding-primary: 0rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.versionTreeTitle{
|
||||
width: 100%;
|
||||
height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 .8rem 0 2.4rem;
|
||||
border-bottom: 1px solid #C9C9C9;
|
||||
> span{
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
font-family: 'SemiBold';
|
||||
}
|
||||
> .closeBtn{
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.expandBtnBox{
|
||||
margin-left: auto;
|
||||
margin-top: 2.2rem;
|
||||
margin-right: 3rem;
|
||||
> .btn{
|
||||
padding: .6rem 1.8rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #D9D9D9;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
> .versionExport{
|
||||
margin-right: .6rem;
|
||||
}
|
||||
> span{
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: Letter Spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
.versionTreeBox {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
> .tree {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 2.5rem 0 5.4rem 2.2rem;
|
||||
}
|
||||
> .detail {
|
||||
width: 35rem;
|
||||
margin: 2.5rem 3rem 5.4rem 3.4rem;
|
||||
height: calc(100% - 2.1rem - 5.4rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user