列表添加图表分类、添加子分类、重命名、删除功能

src/api/chart.js

@@ -140,6 +140,42 @@ export default{
      */
     refreshChartMultiple(params){
         return post('/datamanage/chart_info/batch_refresh',params)
+    },
+    /**
+     * 添加图表分类
+     * @param ChartClassifyName 
+     * @param ParentId 一级分类时传0
+     * @param Level 一级分类0 二级分类1
+     */
+    addNewClassify(params){
+        return post('/datamanage/chart_classify/add',params)
+    },
+    /**
+     * 编辑图表分类
+     * @param ChartClassifyName
+     * @param ChartClassifyId
+     */
+    editClassify(params){
+        return post('/datamanage/chart_classify/edit',params)
+    },
+    /**
+     * 删除图表分类/图表
+     * @param ChartClassifyId 
+     * @param ChartInfoId
+     */
+    deleteClassify(params){
+        return post('/datamanage/chart_classify/delete',params)
+    },
+    /**
+     * 删除图表分类/图表检测
+     * @param ChartClassifyId
+     * @param ChartInfoId
+        0 可删除
+        1 有关联图表,不可删除
+        2 有子目录无图表,可删除
+     */
+    deleteCheck(params){
+        return post('/datamanage/chart_classify/delete/check',params)
     }
 
 } 

src/views/chartETA/List.vue

@@ -1,6 +1,7 @@
 <script setup>
 //ETA图库页面
 import {ref,reactive} from 'vue'
+import { showToast,showDialog} from "vant";
 import CatalogTree from './components/CatalogTree.vue';
 import apiChart from '@/api/chart'
 
@@ -35,14 +36,15 @@ 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:'',//上级目录的名称
+    type:'addNew',//编辑类型
     title:'添加图表分类',//弹窗标题 ['添加图表分类','添加子分类','重命名']
     
 })
@@ -50,23 +52,103 @@ const editNameState = reactive({
 const editNameDialogOptIds = ['addNext','reName']
 //目录操作栏被点击,处理事件
 function showFileOptClick({node,opt}){
+    //添加图表分类,添加子分类,重命名
     if(editNameDialogOptIds.includes(opt.id)){
         openEditNameDialog(node,opt)
     }
+    //删除
+    if(opt.id==='delete'){
+        openDeleteDialog(node)
+    }
+    //移动至
+    //加入我的图库
 }
+//编辑目录名称参数
 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.parentName = opt.id==='addNext'?ChartClassifyName:parentName||''
+    editNameState.ParentId=opt.id==='addNext'?node.ChartClassifyId:node.ParentId||0
     editNameState.title = opt.label
+    editNameState.type = opt.id
     editNameState.isShowDialog = true
 }
-function handleConfirmEditClassify(){}
+
+//根据editNameState调用对应接口
+function handleConfirmEditClassify(){
+    //先判断输入框有无内容
+    if(!editNameState.ChartClassifyName.length){
+        showToast('请填写分类名称！')
+        return
+    }
+    if(editNameState.type==='reName'){
+        editClassify()
+    }else{
+        addNewClassify()
+    }
+}
 function handleAddClassifyBeforeClose(action){
     return action==='cancel'
 }
+
+//添加图表分类,添加子分类
+async function addNewClassify(){
+    const {ChartClassifyName,type,ParentId} = editNameState
+    const res = await apiChart.addNewClassify({
+        ChartClassifyName:ChartClassifyName||'',
+        Level:type==='addNext'?1:0,
+        ParentId
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'添加成功',type:'success'})
+    getCatalogList()
+    editNameState.isShowDialog = false
+}
+//重命名
+async function editClassify(){
+    const {ChartClassifyId,ChartClassifyName} = editNameState
+    const res  = await apiChart.editClassify({
+        ChartClassifyId,ChartClassifyName
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'重命名成功',type:'success'})
+    getCatalogList()
+    editNameState.isShowDialog=false
+}
+
+//删除分类
+async function openDeleteDialog(node){
+    const res = await apiChart.deleteCheck({
+        ChartClassifyId:node.ChartClassifyId,
+        ChartInfoId:node.ChartInfoId
+    })
+    if(res.Ret!==200) return
+    //可删除包括删除图表和删除图表分类两种情况,但列表里只能删除分类
+    const hintTextMap = {
+        0:'确定删除当前分类吗？',
+        1:'该分类下关联图表不可删除!',
+        2:'确认删除当前分类及包含的子分类吗？'
+    }
+    showDialog({
+        title: '提示',
+        message: hintTextMap[res.Data.DeleteStatus||0],
+        showCancelButton:res.Data.DeleteStatus!==1
+    }).then(() => {
+        if(res.Data.DeleteStatus!==1){
+            apiChart.deleteClassify({
+                ChartClassifyId:node.ChartClassifyId,
+                ChartInfoId:node.ChartInfoId
+            }).then(res=>{
+                if(res.Ret!==200) return 
+                showToast({message:'删除成功',type:'success'})
+                getCatalogList()
+            })
+        }
+    }).catch(()=>{})
+}
+
 //图表列表
 const listState = reactive({
     cid:0,
@@ -174,7 +256,7 @@ getChartList()
                     />
                 </div>
                 <div class="bottom sticky-part">
-                    <span @click.stop="openEditNameDialog({},{id:'addClass',label:'添加图表分类'})">添加图表分类</span>
+                    <span @click.stop="openEditNameDialog({},{id:'addNew',label:'添加图表分类'})">添加图表分类</span>
                 </div>
             </div>
         </van-popup>
@@ -188,7 +270,7 @@ getChartList()
             :before-close="handleAddClassifyBeforeClose"
         >
             <div class="rename-wrap">
-                <div class="label" v-if="editNameState.parentName.length">一级目录：{{editNameState.parentName}}</div>
+                <div class="label" v-if="editNameState.Level>1||editNameState.type==='addNext'">一级目录：{{editNameState.parentName}}</div>
                 <input type="text" placeholder="请输入分类名称" v-model="editNameState.ChartClassifyName">
             </div>
         </van-dialog>

src/views/chartETA/hooks/useCatalogList.js

@@ -27,6 +27,7 @@ export function useCatalogList(){
             icon:iconSrc.delete,
             id:'delete'
         },
+        /* {id:'addNew',label:'添加图表分类'} */
     ]
     const optArrItem=[
         {