|
|
@@ -4,38 +4,86 @@
|
|
|
<template #left>
|
|
|
<div class="left-box-container bg-white">
|
|
|
<div class="hc-project-box">
|
|
|
- <div class="hc-project-icon-box">
|
|
|
- <HcIcon name="stack" />
|
|
|
+ <div>
|
|
|
+ <el-tooltip
|
|
|
+ v-model:visible="collectListVisible"
|
|
|
+ placement="bottom"
|
|
|
+ effect="light"
|
|
|
+ trigger="click"
|
|
|
+ :virtual-ref="triggerRef"
|
|
|
+ popper-class="custom-tooltip-pro"
|
|
|
+ >
|
|
|
+ <template #content>
|
|
|
+ <div class="tooltip-content">
|
|
|
+ <!-- 新建文件夹按钮 -->
|
|
|
+ <div class="new-folder" @click.stop="showAddInput = true">
|
|
|
+ 新建文件夹
|
|
|
+ <HcIcon name="add-circle" class="add-icon cursor-pointer" style="color:white;" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 新建文件夹输入框 -->
|
|
|
+ <div v-if="showAddInput" class="add-input-container">
|
|
|
+ <el-input
|
|
|
+ v-model="newFolderName"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ class="folder-input"
|
|
|
+ @keyup.enter="confirmAddFolder"
|
|
|
+ />
|
|
|
+ <div class="input-buttons">
|
|
|
+ <HcIcon name="check" class="confirm-icon cursor-pointer" @click="confirmAddFolder" />
|
|
|
+ <HcIcon name="close" class="cancel-icon cursor-pointer" @click="cancelAddFolder" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 文件夹列表容器（带滚动） -->
|
|
|
+ <div class="folder-list-container">
|
|
|
+ <div
|
|
|
+ v-for="(folder, index) in folders"
|
|
|
+ :key="index"
|
|
|
+ class="folder-item"
|
|
|
+ >
|
|
|
+ <span class="folder-name">{{ folder.name }}</span>
|
|
|
+ <HcIcon
|
|
|
+ name="delete-bin"
|
|
|
+ class="delete-icon cursor-pointer"
|
|
|
+ style="color:white;"
|
|
|
+ @click.stop="deleteFolder(index)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <HcIcon name="star-half" class="mr-3 cursor-pointer" style="color:rgb(255, 125, 67);" />
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <HcIcon name="eye-off" style="color:#3F9EFF" class="cursor-pointer" />
|
|
|
</div>
|
|
|
- <div class="project-name-box ml-2">
|
|
|
- <div class="project-alias">
|
|
|
- {{ projectInfo?.projectName }}
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <HcIcon name="time" class="mr-3 cursor-pointer" style="color:#3F9EFF" />
|
|
|
+ <HcIcon name="article" style="color:gray" class="cursor-pointer" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="hc-tree-box hc-tree-box1">
|
|
|
<div class="hc-tree-back-to">
|
|
|
- <el-link type="primary" @click="gobackHistory">
|
|
|
- 回到上一次填报部位
|
|
|
- </el-link>
|
|
|
- <el-link
|
|
|
- type="warning"
|
|
|
- class="ml-4"
|
|
|
- @click="wbsMapTypeTab"
|
|
|
- >
|
|
|
- 导图结构填报
|
|
|
- </el-link>
|
|
|
- <HcTooltip keys="data-fill-wbs-hide-btn">
|
|
|
- <el-button
|
|
|
- class="data-fill-wbs-hide-btn ml-6"
|
|
|
- hc-btn
|
|
|
- keys="data-fill-wbs-hide-btn"
|
|
|
- :loading="hideSaveLoading"
|
|
|
- @click="hideTreeNode"
|
|
|
+ <div>
|
|
|
+ <el-link type="primary" @click="gobackHistory">
|
|
|
+ 回到上一次填报部位
|
|
|
+ </el-link>
|
|
|
+ <el-link
|
|
|
+ type="warning"
|
|
|
+ class="ml-4"
|
|
|
+ @click="wbsMapTypeTab"
|
|
|
>
|
|
|
- 隐藏
|
|
|
- </el-button>
|
|
|
- </HcTooltip>
|
|
|
+ 导图结构填报
|
|
|
+ </el-link>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="back-button"
|
|
|
+ :class="{ scaling: isScaling }"
|
|
|
+ @click="handleClick"
|
|
|
+ >
|
|
|
+ <HcIcon name="arrow-go-back" style="color:#FF7D43" class="cursor-pointer text-18px font-700" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="hc-search-tree-val">
|
|
|
<el-input
|
|
|
@@ -1405,7 +1453,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import { useAppStore } from '~src/store'
|
|
|
import { HcIsButton } from '~src/plugins/IsButtons'
|
|
|
@@ -3704,10 +3752,87 @@ const moveSaveClick = ()=>{
|
|
|
// 刷新页面
|
|
|
window?.location?.reload()
|
|
|
}
|
|
|
+// 收藏夹
|
|
|
+// 控制tooltip显示状态
|
|
|
+const collectListVisible = ref(false)
|
|
|
+// 触发元素引用
|
|
|
+const triggerRef = ref(null)
|
|
|
+// 显示添加输入框
|
|
|
+const showAddInput = ref(false)
|
|
|
+// 新文件夹名称
|
|
|
+const newFolderName = ref('')
|
|
|
+// 文件夹列表
|
|
|
+const folders = ref([
|
|
|
+ { name: '文件夹名称166' },
|
|
|
+ { name: '文件夹名称26666666666' },
|
|
|
+ // 可以添加更多测试数据
|
|
|
+ // { name: '文件夹3' },
|
|
|
+ // { name: '文件夹4' },
|
|
|
+ // { name: '文件夹5' },
|
|
|
+ // { name: '文件夹6' } // 第6个会触发滚动
|
|
|
+])
|
|
|
+
|
|
|
+// 最多显示5个文件夹
|
|
|
+
|
|
|
+// 确认添加文件夹
|
|
|
+const confirmAddFolder = () => {
|
|
|
+ if (newFolderName.value.trim()) {
|
|
|
+ folders.value.unshift({ name: newFolderName.value.trim() })
|
|
|
+ newFolderName.value = ''
|
|
|
+ showAddInput.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 取消添加文件夹
|
|
|
+const cancelAddFolder = () => {
|
|
|
+ newFolderName.value = ''
|
|
|
+ showAddInput.value = false
|
|
|
+}
|
|
|
+
|
|
|
+// 删除文件夹
|
|
|
+const deleteFolder = (index) => {
|
|
|
+ folders.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+// 控制缩放状态的变量
|
|
|
+const isScaling = ref(false)
|
|
|
+
|
|
|
+// 点击事件处理函数
|
|
|
+const handleClick = () => {
|
|
|
+ // 触发缩放效果
|
|
|
+ isScaling.value = true
|
|
|
+
|
|
|
+ // 缩放动画结束后重置状态
|
|
|
+ setTimeout(() => {
|
|
|
+ isScaling.value = false
|
|
|
+ }, 300) // 与CSS过渡时间保持一致
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import "../../styles/data-fill/wbs.scss";
|
|
|
+
|
|
|
+.back-button {
|
|
|
+ /* 确保按钮有足够的空间来展示放大效果 */
|
|
|
+ padding: 4px;
|
|
|
+ /* 过渡效果：所有属性变化在300ms内完成，使用ease-out缓动函数 */
|
|
|
+ transition: all 300ms ease-out;
|
|
|
+ /* 防止放大时内容溢出 */
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+/* 缩放状态的样式 */
|
|
|
+.back-button.scaling {
|
|
|
+ /* 放大到1.2倍 */
|
|
|
+ transform: scale(1.2);
|
|
|
+}
|
|
|
+.hc-project-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size:20px;
|
|
|
+
|
|
|
+}
|
|
|
.title-input{
|
|
|
height: 30px;
|
|
|
padding: 10px;
|
|
|
@@ -3911,10 +4036,15 @@ html.theme-dark {
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.hc-tree-back-to{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
/* 新增拖拽排序相关样式 */
|
|
|
.sortable-ghost {
|
|
|
opacity: 0.5;
|
|
|
background: #f5f5f5;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
|
|
|
.hc-attachment-item {
|
|
|
@@ -3963,4 +4093,107 @@ html.theme-dark {
|
|
|
display: flex;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.custom-tooltip-pro {
|
|
|
+ background-color: #7691E0 !important;
|
|
|
+ color: white !important;
|
|
|
+ border: none !important;
|
|
|
+ max-width: 300px !important; /* 最大宽度 */
|
|
|
+ padding: 10px !important;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.tooltip-content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.new-folder {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 5px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.add-icon {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.add-input-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 5px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+
|
|
|
+.folder-input {
|
|
|
+ flex: 1;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.input-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.confirm-icon {
|
|
|
+ color: #4CAF50;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.cancel-icon {
|
|
|
+ color: #f44336;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.folder-list-container {
|
|
|
+ max-height: 200px; /* 最大高度 */
|
|
|
+ overflow-y: auto; /* 超出滚动 */
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.folder-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 5px;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.folder-name {
|
|
|
+ margin-right: 15px; /* 名称与删除图标间距 */
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+
|
|
|
+.delete-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ flex-shrink: 0; /* 防止图标被压缩 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动条样式优化 */
|
|
|
+.folder-list-container::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+.folder-list-container::-webkit-scrollbar-thumb {
|
|
|
+ background-color: rgba(255, 255, 255, 0.3);
|
|
|
+ border-radius: 3px;
|
|
|
+}
|
|
|
+</style>
|
