ETA图库目录改为三级,替换了一些只支持二级的组件

src/views/chartETA/List.vue

@@ -1,10 +1,11 @@
 <script setup name="ChartETAList">
 //ETA图库页面
-import {ref,reactive,watch} from 'vue'
+import {ref,reactive,watch,computed} from 'vue'
 import { useRouter } from 'vue-router'
 import { showToast,showDialog} from "vant";
 import { useWindowSize } from '@vueuse/core'
 import CatalogTree from './components/CatalogTree.vue';
+import CatalogItem from './components/CatalogItem.vue';
 import OptionPopup from './components/OptionPopup.vue';
 import AddChartToMyETA from './components/AddChartToMyETA.vue';
 import TreeSelectPop from './components/TreeSelectPop.vue';
@@ -21,6 +22,7 @@ const {
     catalogNodes,//目录列表
     getCatalogList,//获取图库目录
     UserInfo,//用户信息
+    optArrNode,
     authOptArr,
 } = useCatalogList()
 
@@ -46,6 +48,8 @@ const goChartDetail = (item)=>{
 
 //是否展示目录列表
 const IsShowCatalog = ref(false)
+//展开的目录
+const activeCatalogs = ref([])
 
 //展示目录列表
 function showCatalog(){
@@ -64,9 +68,13 @@ async function changeLang(){
 }
 //激活的目录路径
 const catalogMenu = ref('')
-//目录被点击 type:['node'一级目录,'item'二级目录]
-function catalogItemClick({item,type='node',parent}){
-    catalogMenu.value = type==='node'?item.ChartClassifyName||'':parent.ChartClassifyName+'/'+item.ChartClassifyName
+//目录被点击 type:['top'一级目录,'node'二级目录,'item'三级目录]
+function catalogItemClick({item,type='node',parent={}}){
+    const topMenu = type==='top'?item.ChartClassifyName:type==='node'?item.parentName:parent.parentName
+    const nodeMenu = type==='node'?item.ChartClassifyName:type==='item'?parent.ChartClassifyName:''
+    const itemMenu = type==='item'?item.ChartClassifyName:''
+
+    catalogMenu.value = `${topMenu}${nodeMenu.length?`/${nodeMenu}`:''}${itemMenu.length?`/${itemMenu}`:''}`
     listState.cid = item.ChartClassifyId
     listState.list=[]
     listState.page=1
@@ -106,6 +114,7 @@ const editNameState = reactive({
     ChartClassifyId:0,//目录id,为0表示新增
     ChartClassifyName:'',
     Level:1,//层级,大于1时parentName有值
+    parentNames:[],
     parentName:'',//上级目录的名称
     type:'addNew',//编辑类型
     title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
@@ -113,7 +122,17 @@ const editNameState = reactive({
 //编辑目录
 function openEditNameDialog(node,opt){
     const {Level,ChartClassifyId,ChartClassifyName,parentName} = node
-    editNameState.Level = Level||1
+    editNameState.Level = Level
+
+    if(editNameState.Level>1){
+        //找到目录的所有父级目录,并获取目录名称
+        const parentNodes = findParentNodeHandle(catalogNodes.value,ChartClassifyId)
+        editNameState.parentNames = parentNodes.reverse().map(i=>i.ChartClassifyName)
+        opt.id!=='addNext'&&editNameState.parentNames.pop()
+    }else{
+        editNameState.parentNames = []
+    }
+
     editNameState.ChartClassifyId = opt.id==='addNext'?0:ChartClassifyId||0
     editNameState.ChartClassifyName = opt.id==='addNext'?'':ChartClassifyName||''
     editNameState.parentName = opt.id==='addNext'?ChartClassifyName:parentName||''
@@ -141,10 +160,10 @@ function handleAddClassifyBeforeClose(action){
 
 //添加图表分类,添加子分类
 async function addNewClassify(){
-    const {ChartClassifyName,type,ParentId} = editNameState
+    const {ChartClassifyName,ParentId,Level} = editNameState
     const res = await apiChart.addNewClassify({
         ChartClassifyName:ChartClassifyName||'',
-        Level:type==='addNext'?1:0,
+        Level,
         ParentId
     })
     if(res.Ret!==200) return 
@@ -201,12 +220,24 @@ const moveClassState = reactive({
     ClassifyId:0,//移动的分类id
     ParentClassifyId:0,//移动至哪个分类下
     PrevClassifyId:0,//移动后所处的位置,由于不能拖拽,一直为0
-    NextClassifyId:0
+    NextClassifyId:0,
+    Level:1,//用于判断移动的是二级目录还是三级目录
+    ParentId:0,
+    isShowPickerPop:false,//是否显示移动二级分类弹窗
+    isShowTreePop:false,//是否显示移动三级分类弹窗
+})
+moveClassState.isShowPickerPop = computed(()=>{
+    return moveClassState.isShowPopup&&moveClassState.Level===2
+})
+moveClassState.isShowTreePop = computed(()=>{
+    return moveClassState.isShowPopup&&moveClassState.Level!==2
 })
 //移动分类
 function openMoveDialog(node){
-    const {ChartClassifyId} = node
+    const {ChartClassifyId,Level,ParentId} = node
     moveClassState.ClassifyId = ChartClassifyId
+    moveClassState.Level = Level
+    moveClassState.ParentId = ParentId
     moveClassState.isShowPopup = true
 }
 function handleMoveClassify({selectedValues}){
@@ -219,23 +250,52 @@ function closeMoveDialog(){
     moveClassState.ParentClassifyId = 0
     moveClassState.PrevClassifyId = 0
     moveClassState.NextClassifyId = 0
+    moveClassState.Level = 1
+    moveClassState.ParentId = 0
 }
 async function moveClassify(){
-    const {ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId} = moveClassState
+    const {ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId,Level} = moveClassState
     const res = await apiChart.moveClassify({
         ClassifyId,ParentClassifyId,PrevClassifyId,NextClassifyId
     })
     if(res.Ret!==200) return 
     showToast({message:'移动成功',type:'success'})
     await getCatalogList()
-    //点击移动后的上层目录
-    const parentNode = catalogNodes.value.find(node=>node.ChartClassifyId===ParentClassifyId)
-    const moveNode = parentNode?parentNode.Children.find(node=>node.ChartClassifyId===ClassifyId):null
-    moveNode&&catalogItemClick({item:moveNode,type:'item',parent:parentNode})
+    //选中移动后的目录，并展开父级目录
+    const parentNodes = findParentNodeHandle(catalogNodes.value,ClassifyId)
+    catalogItemClick({
+        item:parentNodes[0],
+        type:Level===2?'node':'item',
+        parent:parentNodes[1]
+    })
+    console.log(parentNodes)
+    /* if(Level===2){
+        const parentNode = catalogNodes.value.find(node=>node.ChartClassifyId===ParentClassifyId)
+        const moveNode = parentNode?parentNode.Children.find(node=>node.ChartClassifyId===ClassifyId):null
+        moveNode&&catalogItemClick({item:moveNode,type:'item',parent:parentNode})
+    }else{
+
+    }
+     */
     moveClassState.isShowPopup = false
 
 }
 
+//找到节点的所有父节点
+function findParentNodeHandle(arr, id) {
+    for (let i of arr) {
+        if (i.ChartClassifyId === id) {
+            return [i];
+        }
+        if (i.Children) {
+            let node = findParentNodeHandle(i.Children, id);
+            if (node) {
+                return node.concat(i);
+            }
+        }
+    }
+}
+
 //添加我的图库参数
 const addChartState = reactive({
     isShowDialog:false,
@@ -395,16 +455,30 @@ getChartList()
                     <h3>分类</h3>
                     <van-icon name="cross" @click.stop="IsShowCatalog=false"/>
                 </div>
-                <div class="list-box">
-                    <CatalogTree 
-                        :catalog-nodes="catalogNodes"
-                        :showFileOpt="showFileOpt"
-                        :activeId="listState.cid"
-                        @handleCatalogItemClick="catalogItemClick"
-                    />
+                <!-- 将目录改为三级 -->
+                <div class="list-box catalog-tree-wrap">
+                    <van-collapse v-model="activeCatalogs" :border="false">
+                        <van-collapse-item 
+                            v-for="catalog in catalogNodes" :key="catalog.UniqueCode" :name="catalog.UniqueCode"
+                            @click.stop="catalogItemClick({item:catalog,type:'top'})">
+                            <template #title>
+                                <CatalogItem 
+                                    :node="catalog" 
+                                    :optArr="optArrNode"
+                                    :authOptArr="authOptArr"
+                                    @showPopup="showFileOpt"/>
+                            </template>
+                            <CatalogTree 
+                                :catalog-nodes="catalog.Children"
+                                :showFileOpt="showFileOpt"
+                                :activeId="listState.cid"
+                                @handleCatalogItemClick="catalogItemClick"
+                            />
+                        </van-collapse-item>
+                    </van-collapse>
                 </div>
                 <div class="bottom sticky-part" v-if="['rai_admin', 'ficc_admin','admin'].includes(UserInfo.RoleTypeCode)">
-                    <span @click.stop="openEditNameDialog({},{id:'addNew',label:'添加图表分类'})">添加图表分类</span>
+                    <span @click.stop="openEditNameDialog({Level:0},{id:'addNew',label:'添加图表分类'})">添加图表分类</span>
                 </div>
             </div>
         </van-popup>
@@ -426,20 +500,35 @@ getChartList()
             :before-close="handleAddClassifyBeforeClose"
         >
             <div class="rename-wrap">
-                <div class="label" v-if="editNameState.Level>1||editNameState.type==='addNext'">一级目录：{{editNameState.parentName}}</div>
+                <!-- <div class="label" v-if="editNameState.Level>1||editNameState.type==='addNext'">一级目录：{{editNameState.parentName}}</div> -->
+                <template v-if="editNameState.Level>1||editNameState.type==='addNext'">
+                    <div class="label" v-for="(name,index) in editNameState.parentNames" :key="index">{{index+1===1?'一':'二'}}级目录：{{name}}</div>
+                </template>
                 <input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
             </div>
         </van-dialog>
-        <!-- 移动分类 弹窗-->
-        <van-popup v-model:show="moveClassState.isShowPopup" round :position="width>650?'center':'bottom'" class="move-popup">
+        <!-- 移动二级分类 弹窗-->
+        <van-popup 
+            v-model:show="moveClassState.isShowPickerPop" round :position="width>650?'center':'bottom'" class="move-popup">
             <van-picker
                 title="移动至"
                 :columns="catalogNodes"
                 :columns-field-names="{text:'ChartClassifyName',value:'ChartClassifyId'}"
                 @confirm="handleMoveClassify"
                 @cancel="closeMoveDialog"
-                />
+            />
         </van-popup>
+        <!-- 移动三级分类 弹窗 -->
+        <TreeSelectPop 
+            :isShowDialog="moveClassState.isShowTreePop"
+            popTitle="移动至"
+            renderType="catalog"
+            :catalogNodes="catalogNodes"
+            :chartInfo="moveClassState"
+            :dialogPosition="width>650?'center':'bottom'"
+            @close="closeMoveDialog"
+            @confirmMove="(id)=>{moveClassState.ParentClassifyId=id;moveClassify()}"
+        />
         <!-- 加入我的图库 弹窗 -->
         <AddChartToMyETA 
             :isShowDialog="addChartState.isShowDialog"

src/views/chartETA/components/TreeSelectPop.vue

@@ -22,12 +22,16 @@ const props = defineProps({
     chartInfo:{
         type:Object,
         default:{}
+    },
+    renderType:{ //图表的移动/另存为：chart; 目录的移动：catalog
+        type:String,
+        default:'chart'
     }
 })
 
-const treeData = ref([])
-function getTreeData(){
-    treeData.value = props.catalogNodes.map(item=>{
+let activeTab = ref(0)
+function getTreeData(topNode={}){
+    return topNode.Children.map(item=>{
         const children=item.Children.map(e=>{
                 return {
                     text:e.ChartClassifyName,
@@ -40,7 +44,7 @@ function getTreeData(){
             }
     })
 }
-watch(()=>props.catalogNodes,getTreeData,{immediate:true,deep:true})
+//watch(()=>props.catalogNodes,getTreeData,{immediate:true,deep:true})
 const showPop = ref(false)
 const activeId=ref(0)//选中的分类
 const activeIndex=ref(0)
@@ -48,9 +52,12 @@ watch(()=>props.isShowDialog,()=>{
     showPop.value = props.isShowDialog
 })
 watch(()=>props.chartInfo,()=>{
-    if(props.popTitle==='移动至'){
+    if(props.popTitle==='移动至'&&props.renderType==='chart'){
         activeId.value = props.chartInfo.ChartClassifyId
     }
+    if(props.popTitle==='移动至'&&props.renderType==='catalog'){
+        activeId.value = props.chartInfo.ParentId
+    }
 },{immediate:true,deep:true})
 const emits = defineEmits(['close','confirmMove'])
 watch(showPop,()=>{
@@ -80,11 +87,26 @@ function handleConfirmMove(){
             <div class="head-box">
                 <div class="title">{{popTitle}}</div>
             </div>
-            <div class="content">
+            <!-- 目录改为三级,增加tab组件作为一级目录 -->
+            <div class="tag-box" v-if="renderType==='chart'">
+                <van-tabs v-model:active="activeTab" shrink>
+                    <van-tab v-for="catalog in catalogNodes" :key="catalog.UniqueCode"
+                    :title="catalog.ChartClassifyName">
+                        <div class="content">
+                            <van-tree-select
+                                v-model:active-id="activeId"
+                                v-model:main-active-index="activeIndex"
+                                :items="getTreeData(catalog)"
+                            />
+                        </div>
+                    </van-tab>
+                </van-tabs>
+            </div>
+            <div class="content" v-else>
                 <van-tree-select
                     v-model:active-id="activeId"
                     v-model:main-active-index="activeIndex"
-                    :items="treeData"
+                    :items="getTreeData({Children:catalogNodes})"
                 />
             </div>
             <div class="bot-btn-box" @click="handleConfirmMove">确定</div>
@@ -102,6 +124,11 @@ function handleConfirmMove(){
     .bot-btn-box{
         color: $theme-color;
     }
+    :deep(.van-tabs__wrap){
+        position: relative;
+        z-index: 3;
+        box-shadow: 0px 6px 10px 0 #DCDFE6;
+    }
     .content{
         :deep(.van-tree-select__nav){
             &::-webkit-scrollbar{
@@ -115,6 +142,12 @@ function handleConfirmMove(){
             padding:16px;
             font-size: 18px;
         }
+        :deep(.van-tabs__wrap){
+            box-shadow: 0px 3px 5px 0 #DCDFE6;
+        }
+        .bot-btn-box{
+            border-top:10px solid #F2F6FA;;
+        }
     }
 }
 </style>

src/views/chartETA/hooks/useCatalogList.js

@@ -77,6 +77,12 @@ export function useCatalogList(){
             if(node.Children){
                 node.Children = node.Children.map(child=>{
                     child.parentName = node.ChartClassifyName //添加子分类时需要显示父级分类名称
+                    if(child.Children){//改成三级目录了
+                        child.Children = child.Children.map(_child=>{
+                            _child.parentName = child.ChartClassifyName
+                            return _child
+                        })
+                    }
                     return child
                 })
             }
@@ -88,6 +94,13 @@ export function useCatalogList(){
     //根据权限过滤操作栏
     function authOptArr(node,optArr){
         let currentArr = []
+        if(node.Level===2){ //目录改为三级后，二级目录也可以移动
+            !optArr.find(i=>i.id==='moveTo')&&optArr.push({
+                label:'移动至',
+                icon:iconSrc.moveTo,
+                id:'moveTo'
+            })
+        }
         optArr.forEach(opt=>{
             if(checkOpt(node,opt)){
                 currentArr.push(opt)