图详情更多操作done

src/api/chart.js

@@ -44,4 +44,21 @@ export function apiChartInfoById(params){
  */
 export function apiEDBInfo(params){
     return get('/datamanage/chart_info/edb_info/detail',params)
+}
+
+/**
+ * 获取ETA图库分类数据
+ */
+export function apiETAChartClassifyList(){
+    return get('/datamanage/chart_classify/items',{})
+}
+
+/**
+ * ETA图库图表另存为
+ * @param ChartInfoId
+ * @param ChartClassifyId
+ * @param ChartName
+ */
+export function apiETAChartSaveOther(params){
+    return post('/datamanage/chart_info/copy',params)
 }

src/api/correlationChart.js

@@ -10,4 +10,23 @@ import { get,post } from "./index";
  */
 export function apiCorrelationChartList(params){
     return get('/correlation/chart_info/list',params)
+}
+
+/**
+ * 获取相关性图表分类数据
+ * @param IsShowMe
+ * @param Source
+ */
+export function apiCorrelationChartClassifyList(params){
+    return get('/correlation/chart_classify/list',params)
+}
+
+/**
+ * 相关性图表另存为
+ * @param ChartInfoId
+ * @param ChartClassifyId
+ * @param ChartName
+ */
+export function apiCorrelationChartSaveOther(params){
+    return post('/correlation/chart_info/copy',params)
 }

src/api/futureChart.js

@@ -11,3 +11,20 @@ import { get,post } from "./index";
 export function apiFutureSearchChartList(params){
     return get('/future_good/chart_info/search_by_es',params)
 }
+
+/**
+ * 获取商品价格分类数据
+ */
+export function apiFutureChartClassifyList(params){
+    return get('/future_good/chart_classify/list',params)
+}
+
+/**
+ * 商品价格图库图表另存为
+ * @param ChartInfoId
+ * @param ChartClassifyId
+ * @param ChartName
+ */
+export function apiFutureChartSaveOther(params){
+    return post('/future_good/chart_info/copy',params)
+}

src/api/myETA.js

@@ -82,4 +82,30 @@ export function apiMyChartRemove(params){
  */
 export function apiMyChartAdd(params){
     return post('/my_chart/add',params)
+}
+
+/**
+ * 获取当前的图在我的图库中哪些分类存在
+ * @param ChartInfoId
+ */
+export function apiChartInMyClassifyList(params){
+    return get('/my_chart/get_mychart_classify_id_list',params)
+}
+
+/**
+ * 将图表加入图库分类中
+ * @param ChartInfoId
+ * @param {arr} MyChartClassifyId
+ */
+export function apiChartAddToClassify(params){
+    return post('/my_chart/add_to_classify',params)
+}
+
+/**
+ * 删除图表分类/图表
+ * @param ChartClassifyId
+ * @param ChartInfoId
+ */
+export function apiChartDel(params){
+    return post('/datamanage/chart_classify/delete',params)
 }

src/plugin/vant.js

@@ -1,7 +1,7 @@
 /* vant 公共配置模块 */
 
 // Toast
-// import { showToast } from 'vant';
+import { allowMultipleToast  } from 'vant';
 import 'vant/es/toast/style';
 
 // Dialog
@@ -19,5 +19,6 @@ import 'vant/es/image-preview/style';
 import { Lazyload } from 'vant';
 
 export const registerVant=(app)=>{
+    allowMultipleToast();
     app.use(Lazyload)
 }

src/views/myETA/ChartDetail.vue

@@ -1,14 +1,25 @@
 <script setup>
 import {ref,nextTick, reactive} from 'vue'
 import {apiChartInfoByCode,apiChartInfoById,apiEDBInfo} from '@/api/chart'
-import {apiMyChartList} from '@/api/myETA'
-import { useRoute } from 'vue-router'
+import {
+    apiMyChartList,
+    apiMyClassifyList,
+    apiChartInMyClassifyList,
+    apiChartAddToClassify,
+    apiMyChartRemove,
+    apiChartDel
+} from '@/api/myETA'
+import { useRoute, useRouter } from 'vue-router'
 import {chartRender} from '@/hooks/chart/render'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import EDBInfo from './components/EDBInfo.vue'
 import moment from 'moment'
+import { showToast,showDialog} from 'vant'
+import ChartSaveOther from './components/ChartSaveOther.vue'
+
 
 const route=useRoute()
+const router=useRouter()
 let chartCode=route.query.code
 
 // 获取当前图表所在分类下的所有图表数据 用于上一张下一张切换
@@ -179,6 +190,96 @@ function handleUpdateRender(val){
 // 更多操作弹窗
 let showMoreAction=ref(false)
 
+// 复制到
+let myChartClassifyList=[]//我的图库中的所有分类
+async function getMyChartClassifyList(){
+    const res=await apiMyClassifyList()
+    if(res.Ret===200){
+        myChartClassifyList=res.Data.List||[]
+    }
+}
+getMyChartClassifyList()
+let showCopyTo=ref(false)
+let copyToOpt=ref([])
+async function handleShowCopyTo(){
+    const res=await apiChartInMyClassifyList({ChartInfoId:chartInfo.value.ChartInfoId})
+    if(res.Ret===200){
+        const arr=res.Data||[]
+        copyToOpt.value=myChartClassifyList.map(e=>{
+            return {
+                ...e,
+                select:false
+            }
+        }).filter((x) => !arr.includes(x.MyChartClassifyId))
+        showCopyTo.value=true
+    }
+}
+async function handleConfirmCopy(){
+    const arr=[]
+    copyToOpt.value.map(item=>{
+        if(item.select){
+            arr.push(item.MyChartClassifyId)
+        }
+    })
+    if(arr.length===0){
+        showToast('请选择分类')
+        return
+    }
+    const res=await apiChartAddToClassify({
+        ChartInfoId:chartInfo.value.ChartInfoId,
+        MyChartClassifyId:arr
+    })
+    if(res.Ret===200){
+        showToast('复制成功')
+        showCopyTo.value=false
+    }
+}
+
+// 移除图表
+function handleRemoveChart(){
+    showDialog({
+        title: '提示',
+        message: '是否确认移出？',
+        showCancelButton:true
+    }).then(() => {
+        // on close
+        apiMyChartRemove({
+            MyChartClassifyId:Number(route.query.cid),
+            MyChartId:chartInfo.value.MyChartId
+        }).then(res=>{
+            if(res.Ret===200){
+                showToast('移出成功')
+                setTimeout(() => {
+                    router.back()
+                }, 1500)
+            }
+        })
+    }).catch(()=>{})
+}
+
+//删除图表
+function handleDeleteChart(){
+    showDialog({
+        title: '提示',
+        message: '删除后该图表将不能再引用，确认删除吗？',
+        showCancelButton:true
+    }).then(() => {
+        // on close
+        apiChartDel({
+            ChartInfoId:chartInfo.value.ChartInfoId
+        }).then(res=>{
+            if(res.Ret===200){
+                showToast('删除成功')
+                setTimeout(() => {
+                    router.back()
+                }, 1500)
+            }
+        })
+    }).catch(()=>{})
+}
+
+// 另存为
+let showSaveChartOther=ref(false)
 </script>
 
 <template>
@@ -382,24 +483,58 @@ let showMoreAction=ref(false)
         round
     >
         <div class="more-action-wrap">
-            <div class="item">
-                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+            <div class="item" @click.stop="handleShowCopyTo">
+                <img src="@/assets/imgs/myETA/icon_copy.png" alt="">
                 <span>复制到</span>
             </div>
-            <div class="item">
-                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+            <div class="item" @click.stop="showSaveChartOther=true">
+                <img src="@/assets/imgs/myETA/icon_save.png" alt="">
                 <span>另存为</span>
             </div>
-            <div class="item">
-                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+            <div class="item" @click.stop="handleRemoveChart">
+                <img src="@/assets/imgs/myETA/icon_remove.png" alt="">
                 <span>移出</span>
             </div>
-            <div class="item">
-                <img src="@/assets/imgs/ppt/icon_action_copy.png" alt="">
+            <div class="item" @click.stop="handleDeleteChart">
+                <img src="@/assets/imgs/myETA/icon_del.png" alt="">
                 <span>删除</span>
             </div>
         </div>
     </van-popup>
+
+    <!-- 复制到 -->
+    <van-popup 
+        v-model:show="showCopyTo"
+        position="bottom"
+        round
+        closeable
+    >
+        <div class="global-pop-wrap_mobile chart-copyto-wrap">
+            <div class="head-box">
+                <div class="title">复制到</div>
+            </div>
+            <div class="content">
+                <ul>
+                    <li 
+                        :class="['item',item.select?'active':'']"
+                        v-for="item in copyToOpt" 
+                        :key="item.MyChartClassifyId"
+                        @click="item.select=!item.select"
+                    >{{item.MyChartClassifyName}}</li>
+                </ul>
+                <div v-if="copyToOpt.length===0" style="padding:50px 0;text-align:center">无数据</div>
+            </div>
+            <div class="bot-btn-box" @click="handleConfirmCopy">确定</div>
+        </div>
+    </van-popup>
+
+    <!-- 另存为 -->
+    <ChartSaveOther
+        :source="chartInfo?.Source"
+        :chartInfo="chartInfo"
+        :show="showSaveChartOther"
+        @close="showSaveChartOther=false"
+    />
 </template>
 
 <style lang="scss" scoped>
@@ -600,4 +735,45 @@ let showMoreAction=ref(false)
         }
     }
 }
+
+.chart-copyto-wrap{
+    .head-box{
+        .title{
+            padding: 0 $page-padding;
+            font-size: 36px;
+            font-weight: 600;
+            line-height: 120px;
+        }
+    }
+    .bot-btn-box{
+        line-height: 112px;
+        text-align: center;
+        color: $theme-color;
+        font-size: 32px;
+    }
+    .content{
+        .item{
+            padding: 32px $page-padding;
+            font-size: 32px;
+            border-bottom: 1px solid $border-color;
+            position: relative;
+            &.active{
+                color: $theme-color;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 36px;
+                    height: 36px;
+                    background-image: url('@/assets/imgs/icon_select2.png');
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    top: 50%;
+                    right: $page-padding;
+                    transform: translateY(-50%);
+                }
+            }
+        }
+    }
+}
 </style>

src/views/myETA/components/ChartSaveOther.vue

@@ -0,0 +1,185 @@
+<script setup>
+import {watch,ref} from 'vue'
+import {apiETAChartClassifyList,apiETAChartSaveOther} from '@/api/chart'
+import {apiCorrelationChartClassifyList,apiCorrelationChartSaveOther} from '@/api/correlationChart'
+import {apiFutureChartClassifyList,apiFutureChartSaveOther} from '@/api/futureChart'
+import { showToast } from 'vant'
+
+const props=defineProps({
+    show:{
+        type:Boolean,
+        default:false
+    },
+    chartInfo:{
+        default:{}
+    },
+    source:{//来源 1普通图表 2(good_price)商品价格 3('relevance_chart')相关性图表
+        default:''
+    }
+})
+const emits=defineEmits(['close'])
+
+let showPop=ref(props.show)
+watch(
+    ()=>props.show,
+    (n)=>{
+        if(n){
+            getOpts()
+        }
+        showPop.value=props.show
+    }
+)
+watch(showPop,()=>{
+    if(!showPop.value){
+        emits('close')
+    }
+})
+
+// 获取选项数据
+let opts=ref([])
+async function getOpts(){
+    let res
+    if(props.source==2){
+        res=await apiFutureChartClassifyList({})
+    }else if(props.source==3){
+        res=await apiCorrelationChartClassifyList({})
+    }else{
+        res=await apiETAChartClassifyList({})
+    }
+    if(res.Ret!=200) return
+    const arr=res.Data.AllNodes||[]
+    if([2,3].includes(props.source)){
+        opts.value=arr
+    }else{
+        opts.value=arr.map(item=>{
+            const children=item.Children.map(e=>{
+                return {
+                    text:e.ChartClassifyName,
+                    id:e.ChartClassifyId
+                }
+            })
+            return {
+                text:item.ChartClassifyName,
+                children:children
+            }
+        })
+    }
+    
+
+}
+
+let activeIds=ref('')//选中的分类
+const activeIndex=ref(0)
+
+
+async function handleConfirmSave(){
+    const params={
+        ChartInfoId:props.chartInfo.ChartInfoId,
+        ChartName:props.chartInfo.ChartName+'(1)',
+        ChartClassifyId:activeIds.value
+    }
+    let res
+    if(props.source==2){
+        res=await apiFutureChartSaveOther(params)
+    }else if(props.source==3){
+        res=await apiCorrelationChartSaveOther(params)
+    }else{
+        res=await apiETAChartSaveOther(params)
+    }
+
+    if(res.Ret!==200) return
+    showToast('保存成功')
+    emits('close')
+}
+
+</script>
+
+<template>
+    <van-popup 
+        v-model:show="showPop"
+        position="bottom"
+        round
+        closeable
+    >
+        <div class="global-pop-wrap_mobile chart-save-other-wrap">
+            <div class="head-box">
+                <div class="title">另存为</div>
+            </div>
+            <div class="content">
+                <template v-if="[2,3].includes(source)">
+                    <ul class="list-box">
+                        <li 
+                            :class="['item',activeIds==item.ChartClassifyId?'active':'']"
+                            v-for="item in opts" 
+                            :key="item.ChartClassifyId"
+                            @click="activeIds=item.ChartClassifyId"
+                        >{{item.ChartClassifyName}}</li>
+                    </ul>
+                </template>
+                <template v-else>
+                    <van-tree-select
+                        v-model:active-id="activeIds"
+                         v-model:main-active-index="activeIndex"
+                        :items="opts"
+                    />
+                </template>
+            </div>
+            <div class="bot-btn-box" @click="handleConfirmSave">确定</div>
+        </div>
+    </van-popup>
+</template>
+
+<style lang="scss" scoped>
+.chart-save-other-wrap{
+    .head-box{
+        .title{
+            padding: 0 $page-padding;
+            font-size: 36px;
+            font-weight: 600;
+            line-height: 120px;
+        }
+    }
+    .bot-btn-box{
+        line-height: 112px;
+        text-align: center;
+        color: $theme-color;
+        font-size: 32px;
+    }
+    .content{
+        :deep(.van-tree-select__nav){
+            &::-webkit-scrollbar{
+                display: none;
+            }
+        }
+        .list-box{
+            max-height: 40vh;
+            overflow-y: auto;
+            &::-webkit-scrollbar{
+                display: none;
+            }
+        }
+        .item{
+            padding: 32px $page-padding;
+            font-size: 32px;
+            border-bottom: 1px solid $border-color;
+            position: relative;
+            &.active{
+                color: $theme-color;
+                &::after{
+                    content: '';
+                    display: block;
+                    width: 36px;
+                    height: 36px;
+                    background-image: url('@/assets/imgs/icon_select2.png');
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    top: 50%;
+                    right: $page-padding;
+                    transform: translateY(-50%);
+                }
+            }
+        }
+    }
+}
+</style>