移动图表功能

src/api/chart.js

@@ -181,11 +181,21 @@ export default{
      * 移动分类
      * @param ClassifyId
      * @param ParentClassifyId
-     * @param PrevClassifyId
-     * @param NextClassifyId
+     * @param PrevClassifyId 0
+     * @param NextClassifyId 0
      */
     moveClassify(params){
         return post('/datamanage/chart_classify/move',params)
-    }
+    },
+    /**
+     * 移动图表
+     * @param ChartClassifyId
+     * @param ChartInfoId
+     * @param PrevChartInfoId
+     * @param NextChartInfoId
+     */
+    moveChart(params){
+        return post('/datamanage/chart_info/move',params)
+    },
 
 } 

src/views/chartETA/List.vue

@@ -6,6 +6,7 @@ import { useWindowSize } from '@vueuse/core'
 import CatalogTree from './components/CatalogTree.vue';
 import OptionPopup from './components/OptionPopup.vue';
 import AddChartToMyETA from './components/AddChartToMyETA.vue';
+import TreeSelectPop from './components/TreeSelectPop.vue';
 import apiChart from '@/api/chart'
 
 import {useCatalogList} from './hooks/useCatalogList';
@@ -209,7 +210,34 @@ function openAddChartDialog(node){
     addChartState.chartInfo = node
     addChartState.isShowDialog = true
 }
-function openMoveChartDialog(){}
+//移动参数
+const moveChartState = reactive({
+    isShowDialog:false,
+    popTitle:'移动至',
+    catalogNodes:catalogNodes,
+    chartInfo:{}
+})
+function openMoveChartDialog(node){
+    moveChartState.chartInfo = node
+    moveChartState.isShowDialog = true
+}
+async function MoveChart(moveId){
+    const res = await apiChart.moveChart({
+        ChartClassifyId:moveId,
+        ChartInfoId:moveChartState.chartInfo.ChartInfoId,
+        PrevChartInfoId:0,
+        NextChartInfoId:0
+    })
+    if(res.Ret!==200) return 
+    showToast({message:'移动图表成功',type:'success'})
+    //手动修改移动的图表
+    listState.list.find(item=>{
+        if(item.ChartInfoId===moveChartState.chartInfo.ChartInfoId){
+            item.ChartClassifyId = moveId
+        }
+    })
+    moveChartState.isShowDialog = false
+}
 
 //图表列表
 const listState = reactive({
@@ -360,7 +388,15 @@ getChartList()
             :chartInfo="addChartState.chartInfo"
             @close="addChartState.isShowDialog=false"
         />
-        <!-- 移动图表弹窗 -->
+        <!-- 移动/另存为图表 弹窗 -->
+        <TreeSelectPop 
+            :isShowDialog="moveChartState.isShowDialog"
+            :popTitle="moveChartState.popTitle"
+            :catalogNodes="moveChartState.catalogNodes"
+            :chartInfo="moveChartState.chartInfo"
+            @close="moveChartState.isShowDialog=false"
+            @confirmMove="MoveChart"
+        />
     </div>
 </template>
 <style lang="scss">

src/views/chartETA/components/AddChartToMyETA.vue

@@ -2,7 +2,7 @@
 //加入我的图库
 import {ref,watch} from 'vue'
 import {showToast} from 'vant'
-import{apiMyClassifyList,apiMyChartAdd} from '@/api/myETA'
+import{apiMyClassifyList,apiMyChartAdd,apiAddClassify} from '@/api/myETA'
 
 const props = defineProps({
     isShowDialog:{//是否展示弹窗
@@ -80,7 +80,17 @@ function handleConfirmAddChart(){
     })
 }
 //添加新的分类
-function handleConfirmEditClassify(){}
+function handleConfirmEditClassify(){
+    if(!addClassifyName.value){
+        showToast('请填写分类名称！')
+        return
+    }
+    apiAddClassify({MyChartClassifyName:addClassifyName.value}).then(res=>{
+        if(res.Ret!==200) return
+        showAddClassify.value=false
+        getMyClassifyList()
+    })
+}
 </script>
 
 <template>

src/views/chartETA/components/TreeSelectPop.vue

@@ -0,0 +1,113 @@
+<script setup>
+//移动图表,另存为弹窗
+import {ref,watch} from 'vue'
+import { showToast } from 'vant';
+const props = defineProps({
+    isShowDialog:{
+        type:Boolean,
+        default:false
+    },
+    dialogPosition:{
+        type:String,
+        default:'bottom'
+    },
+    popTitle:{
+        type:String,
+        default:'移动至'
+    },
+    catalogNodes:{
+        type:Array,
+        default:[]
+    },
+    chartInfo:{
+        type:Object,
+        default:{}
+    }
+})
+
+const treeData = ref([])
+function getTreeData(){
+    treeData.value = props.catalogNodes.map(item=>{
+        const children=item.Children.map(e=>{
+                return {
+                    text:e.ChartClassifyName,
+                    id:e.ChartClassifyId
+                }
+            })
+            return {
+                text:item.ChartClassifyName,
+                children:children
+            }
+    })
+}
+watch(()=>props.catalogNodes,getTreeData,{immediate:true,deep:true})
+const showPop = ref(false)
+const activeId=ref(0)//选中的分类
+const activeIndex=ref(0)
+watch(()=>props.isShowDialog,()=>{
+    showPop.value = props.isShowDialog
+})
+watch(()=>props.chartInfo,()=>{
+    activeId.value = props.chartInfo.ChartClassifyId
+},{immediate:true,deep:true})
+const emits = defineEmits(['close','confirmMove'])
+watch(showPop,()=>{
+    if(!showPop.value){
+        emits('close')
+    }
+})
+
+
+function handleConfirmMove(){
+    emits('confirmMove',activeId.value)
+}
+</script>
+
+<template>
+    <van-popup 
+        v-model:show="showPop"
+        :position="dialogPosition"
+        round
+        closeable
+    >
+        <div class="global-pop-wrap_mobile tree-select-pop-wrap">
+            <div class="head-box">
+                <div class="title">{{popTitle}}</div>
+            </div>
+            <div class="content">
+                <van-tree-select
+                    v-model:active-id="activeId"
+                    v-model:main-active-index="activeIndex"
+                    :items="treeData"
+                />
+            </div>
+            <div class="bot-btn-box" @click="handleConfirmMove">确定</div>
+        </div>
+    </van-popup>
+</template>
+
+<style scoped lang="scss">
+.tree-select-pop-wrap{
+    .head-box,.bot-btn-box{
+        font-size: 36px;
+        padding:32px;
+        text-align: center;
+    }
+    .bot-btn-box{
+        color: $theme-color;
+    }
+    .content{
+        :deep(.van-tree-select__nav){
+            &::-webkit-scrollbar{
+                display: none;
+            }
+        }
+    }
+    @media screen and (min-width:$media-width){
+        .head-box,.bot-btn-box{
+            padding:16px;
+            font-size: 18px;
+        }
+    }
+}
+</style>