添加图表分类,添加子分类,重命名弹窗

src/views/chartETA/List.vue

@@ -35,10 +35,37 @@ function catalogItemClick({item,type='node',parent}){
     listState.page=1
     getChartList()
 }
+//弹窗标识
+//编辑目录名称
+const editNameState = reactive({
+    isShowDialog:false,//是否展示编辑名称弹窗
+    ChartClassifyId:0,//目录id,为0表示新增
+    ChartClassifyName:'',
+    Level:1,//层级,大于1时parentName有值
+    parentName:'',//上级目录的名称
+    title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
+    
+})
+//打开编辑目录弹窗的操作id
+const editNameDialogOptIds = ['addNext','reName']
 //目录操作栏被点击,处理事件
 function showFileOptClick({node,opt}){
-    console.log('a,node:',node)
-    console.log('b,opt',opt)
+    if(editNameDialogOptIds.includes(opt.id)){
+        openEditNameDialog(node,opt)
+    }
+}
+function openEditNameDialog(node,opt){
+    const {Level,ChartClassifyId,ChartClassifyName,parentName} = node
+    editNameState.Level = Level||1
+    editNameState.ChartClassifyId = opt.id==='addNext'?0:ChartClassifyId||0
+    editNameState.ChartClassifyName = opt.id==='addNext'?'':ChartClassifyName||''
+    editNameState.parentName = parentName||(opt.id==='addNext')?ChartClassifyName:''
+    editNameState.title = opt.label
+    editNameState.isShowDialog = true
+}
+function handleConfirmEditClassify(){}
+function handleAddClassifyBeforeClose(action){
+    return action==='cancel'
 }
 //图表列表
 const listState = reactive({
@@ -147,11 +174,24 @@ getChartList()
                     />
                 </div>
                 <div class="bottom sticky-part">
-                    <span>添加图表分类</span>
+                    <span @click.stop="openEditNameDialog({},{id:'addClass',label:'添加图表分类'})">添加图表分类</span>
                 </div>
             </div>
         </van-popup>
         <!-- 添加/重命名一二级分类 弹窗 -->
+        <van-dialog 
+            v-model:show="editNameState.isShowDialog" 
+            :title="editNameState.title" 
+            show-cancel-button
+            confirmButtonText="确定"
+            @confirm="handleConfirmEditClassify"
+            :before-close="handleAddClassifyBeforeClose"
+        >
+            <div class="rename-wrap">
+                <div class="label" v-if="editNameState.parentName.length">一级目录：{{editNameState.parentName}}</div>
+                <input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
+            </div>
+        </van-dialog>
         <!-- 移动至 弹窗-->
         <!-- 加入我的图库 弹窗 -->
     </div>
@@ -274,6 +314,20 @@ getChartList()
             }
         }
     }
+    .rename-wrap{
+        padding:48px;
+        input{
+            padding: 24px 32px;
+            border-radius: 12px;
+            background-color: #F6F6F6;
+            width: 100%;
+        }
+        .label{
+            color: #666666;
+            margin-bottom: 32px;
+            text-align: center;
+        }
+    }
 
     @media screen and (min-width:$media-width){
         .select-wrap{
@@ -341,6 +395,18 @@ getChartList()
                 }
             }
         }
+        .rename-wrap{
+            padding:24px;
+            input{
+                padding: 12px 16px;
+                border-radius: 6px;
+                background-color: #F6F6F6;
+                width: 100%;
+            }
+            .label{
+                margin-bottom: 16px;
+            }
+        }
     }
 }
 </style>

src/views/chartETA/hooks/useCatalogList.js

@@ -64,8 +64,20 @@ export function useCatalogList(){
         const res = await apiChart.ETAChartClassifyList()
         if(res.Ret!==200) return 
         catalogNodes.value = res.Data?res.Data.AllNodes:[]||[]
+        catalogNodes.value = catalogNodes.value.map(node=>{
+            if(node.Children){
+                node.Children = node.Children.map(child=>{
+                    child.parentName = node.ChartClassifyName //添加子分类时需要显示父级分类名称
+                    return child
+                })
+            }
+            return node
+        })
     }
 
+    //添加/编辑目录名称
+    function editCatalog(){}
+