eta_mobile_front/src/components/SetChartEnName.vue

<script setup>
//设置图表英文名称
import {ref,watch} from 'vue'
import apiChart from '@/api/chart'
import apiFutureChart from '@/api/futureChart'
import apiCorrelationChart from '@/api/correlationChart'
import apiLineEquationChart from '@/api/lineEquationChart'
import apiStatisticFeatureChart from '@/api/statisticFeatureChart'
import apiCrossVarietyChart from '@/api/crossVarietyChart'
import { showToast } from 'vant';
const props = defineProps({
    isShow:{
        type:Boolean,
        default:false
    },
    chartInfo:{
        type:Object,
        default:{}
    },
    chartType:{
        type:Number,
        default:0
    }
})
const emits = defineEmits(['cancel','success'])


//折叠面板的展开项
const activeGroup = ref([])
//表格组
const formGroup = ref([
    /* {
        groupName:'图表名称',//分组名称
        formList:[{
            label:'图表名称',
            cnValue:'测试截面散点图',//中文值
            enValue:'',//英文值
            Value:'',//v-model的值,为cnValue/Value
            noEdit:false,//是否允许编辑
        }],//需要填写的项
    } */
])
//截面图的其他参数
const _ExtraConfig = ref({})
watch(
    ()=>props.isShow,
    ()=>{
        if(props.isShow){
            initForm()
        }else{
            formGroup.value = []
        }
    },
    {immediate:true}
)

async function initForm(){
    const {EdbInfoList} = props.chartInfo
    const {ChartName,ChartNameEn,ExtraConfig} = props.chartInfo.ChartInfo
    //第一项固定为图表名称
    formGroup.value.push({
        groupName:'图表名称',
        formList:[{
            label:'图表中文名称',
            cnValue:ChartName,
            enValue:ChartNameEn,
            Value:ChartName,
            noEdit:true
        },{
            label:'英文图表名称',
            cnValue:ChartName,
            enValue:ChartNameEn,
            Value:ChartNameEn,
            placeholder:'请输入英文图表名称'
        }]
    })
    //截面散点图 chartType===10 与其他图格式不一样
    if(Number(props.chartInfo.ChartInfo.ChartType)===10){
        _ExtraConfig.value = JSON.parse(ExtraConfig)
        const {XName,XNameEn,XUnitName,XUnitNameEn} = JSON.parse(ExtraConfig)
        const {YName,YNameEn,YUnitName,YUnitNameEn} = JSON.parse(ExtraConfig)
        let suppleFormList = [{
            label:`X轴名称：${XName}`,
            cnValue:XName,
            enValue:XNameEn,
            Value:XNameEn,
            key:'XNameEn',
            placeholder:'请输入X轴英文名称'
        },{
            label:`X轴单位：${XUnitName}`,
            cnValue:XUnitName,
            enValue:XUnitNameEn,
            Value:XUnitNameEn,
            key:'XUnitNameEn',
            placeholder:'请输入X轴英文单位'
        },{
            label:`Y轴名称：${YName}`,
            cnValue:YName,
            enValue:YNameEn,
            Value:YNameEn,
            key:'YNameEn',
            placeholder:'请输入Y轴英文名称'
        },{
            label:`Y轴单位：${YUnitName}`,
            cnValue:YUnitName,
            enValue:YUnitNameEn,
            Value:YUnitNameEn,
            key:'YUnitNameEn',
            placeholder:'请输入Y轴英文单位'
        }]
        //补充第一项
        formGroup.value[0].formList = formGroup.value[0].formList.concat(suppleFormList)
        const {SeriesList} = JSON.parse(ExtraConfig)
        const seriesEdbInfoList = SeriesList[0].EdbInfoList //每一项的EdbInfoList是一样的,取第一项就行
        
        let formSeriesList = []
        let formEdbInfoList = []
        SeriesList.forEach((serise,index)=>{
            formSeriesList.push({
                label:`系列${index+1}：${serise.Name}`,
                cnValue:serise.Name,
                enValue:serise.NameEn,
                Value:serise.NameEn,
                placeholder:'请输入系列英文名称'
            })
        })
        seriesEdbInfoList.forEach((edb,index)=>{
            formEdbInfoList.push({
                label:`标签${index+1}：${edb.Name}`,
                cnValue:edb.Name,
                enValue:edb.NameEn,
                Value:edb.NameEn,
                placeholder:'请输入标签英文名称'
            })
        })
        //第二项
        formGroup.value.push({
            groupName:'标签，系列名称',
            SeriesListLength:formSeriesList.length,
            formList:[...formSeriesList,...formEdbInfoList]
        })
        let formEdbList = []
        for(const edb of EdbInfoList){
            formEdbList.push({
                EdbInfoId:edb.EdbInfoId,
                label:edb.EdbName,
                cnValue:edb.EdbName,
                enValue:edb.EdbNameEn,
                Value:edb.EdbNameEn,
                placeholder:'请输入英文指标名称'
            })
        }
        //第三项
        formGroup.value.push({
            groupName:'指标名称',
            formList:formEdbList
        })
        activeGroup.value = formGroup.value.map(i=>i.groupName)
        return
    }

    // 价格曲线
    if(props.chartInfo.ChartInfo.Source===2){
        //补充第一项
        let forwardFormList=[
            {
                label:'期货名称',
                cnValue:props.chartInfo.EdbInfoList[1].EdbName,
                enValue:props.chartInfo.EdbInfoList[1].EdbNameEn,
                Value:props.chartInfo.EdbInfoList[1].EdbName,
                noEdit:true
            },
            {
                label:'英文期货名称',
                cnValue:props.chartInfo.EdbInfoList[1].EdbName,
                enValue:props.chartInfo.EdbInfoList[1].EdbNameEn,
                Value:props.chartInfo.EdbInfoList[1].EdbNameEn,
                placeholder:'请输入英文期货名称'
            }
        ]
        formGroup.value[0].formList = formGroup.value[0].formList.concat(forwardFormList)
        
       for(const edb of [EdbInfoList[0]]){
            formGroup.value.push({
                groupName:`${edb.EdbName}`,
                EdbInfoId:edb.EdbInfoId,
                formList:[
                    {
                        label:'指标名称',
                        cnValue:edb.EdbName,
                        enValue:edb.EdbNameEn,
                        Value:edb.EdbName,
                        noEdit:true,
                    },
                    {
                        label:'单位',
                        cnValue:edb.Unit,
                        enValue:edb.UnitEn,
                        Value:edb.Unit,
                        noEdit:true
                    },
                    {
                        label:'英文指标名称',
                        cnValue:edb.EdbName,
                        enValue:edb.EdbNameEn,
                        Value:edb.EdbNameEn,
                        placeholder:'请输入英文指标名称'
                    },
                    {
                        label:'英文单位',
                        cnValue:edb.Unit,
                        enValue:edb.UnitEn,
                        Value:edb.UnitEn,
                        placeholder:'请输入英文单位'
                    }
                ]
            })
        }
        activeGroup.value = formGroup.value.map(i=>i.groupName)
        return
    }

    // 利润曲线
    if(props.chartInfo.ChartInfo.Source===5){
        //补充第一项
        let forwardFormList=[
            {
                label:'盘面利润名称',
                cnValue:props.chartInfo.DataResp.ProfitName,
                enValue:props.chartInfo.DataResp.ProfitNameEn,
                Value:props.chartInfo.DataResp.ProfitName,
                noEdit:true
            },
            {
                label:'英文盘面利润名称',
                cnValue:props.chartInfo.DataResp.ProfitName,
                enValue:props.chartInfo.DataResp.ProfitNameEn,
                Value:props.chartInfo.DataResp.ProfitNameEn,
                placeholder:'请输入英文盘面利润名称'
            }
        ]
        formGroup.value[0].formList = formGroup.value[0].formList.concat(forwardFormList)
        
       for(const edb of [EdbInfoList[0]]){
            formGroup.value.push({
                groupName:`${edb.EdbName}`,
                EdbInfoId:edb.EdbInfoId,
                formList:[
                    {
                        label:'指标名称',
                        cnValue:edb.EdbName,
                        enValue:edb.EdbNameEn,
                        Value:edb.EdbName,
                        noEdit:true,
                    },
                    {
                        label:'单位',
                        cnValue:edb.Unit,
                        enValue:edb.UnitEn,
                        Value:edb.Unit,
                        noEdit:true
                    },
                    {
                        label:'英文指标名称',
                        cnValue:edb.EdbName,
                        enValue:edb.EdbNameEn,
                        Value:edb.EdbNameEn,
                        placeholder:'请输入英文指标名称'
                    },
                    {
                        label:'英文单位',
                        cnValue:edb.Unit,
                        enValue:edb.UnitEn,
                        Value:edb.UnitEn,
                        placeholder:'请输入英文单位'
                    }
                ]
            })
        }
        activeGroup.value = formGroup.value.map(i=>i.groupName)
        return
    }

    // 相关性-3;拟合方程-6;统计特征-7,8,9
    if([3,6,7,8,9].includes(props.chartInfo.ChartInfo.Source)){
        activeGroup.value = formGroup.value.map(i=>i.groupName)
        return
    }

    if(props.chartInfo.ChartInfo.Source===10) { //跨品种分析
        let res = await apiCrossVarietyChart.chartLangOption({ChartInfoId: props.chartInfo.ChartInfo.ChartInfoId})

        const { TagList,VarietyList } = res.Data;

        let forwardFormList=[
            {
                label:'X轴名称',
                id: TagList[0].ChartTagId,
                cnValue:TagList[0].ChartTagName,
                enValue:TagList[0].ChartTagNameEn,
                Value:TagList[0].ChartTagName,
                noEdit:true
            },
            {
                label:'英文X轴名称',
                id: TagList[0].ChartTagId,
                cnValue:TagList[0].ChartTagName,
                enValue:TagList[0].ChartTagNameEn,
                Value:TagList[0].ChartTagNameEn,
                placeholder:'请输入英文X轴名称'
            },
            {
                label:'Y轴名称',
                id: TagList[1].ChartTagId,
                cnValue:TagList[1].ChartTagName,
                enValue:TagList[1].ChartTagNameEn,
                Value:TagList[1].ChartTagName,
                noEdit:true
            },
            {
                label:'英文Y轴名称',
                id: TagList[1].ChartTagId,
                cnValue:TagList[1].ChartTagName,
                enValue:TagList[1].ChartTagNameEn,
                Value:TagList[1].ChartTagNameEn,
                placeholder:'请输入英文Y轴名称'
            }
        ]

        formGroup.value[0].formList = formGroup.value[0].formList.concat(forwardFormList)

        for(const item of VarietyList){
            formGroup.value.push({
                groupName:`${item.ChartVarietyName}`,
                id:item.ChartVarietyId,
                formList:[
                    {
                        label:'品种名称',
                        cnValue:item.ChartVarietyName,
                        enValue:item.ChartVarietyNameEn,
                        Value:item.ChartVarietyName,
                        noEdit:true,
                    },
                    {
                        label:'英文品种名称',
                        cnValue:item.ChartVarietyName,
                        enValue:item.ChartVarietyNameEn,
                        Value:item.ChartVarietyNameEn,
                        placeholder:'请输入英文品种名称'
                    }
                ]
            })
        }

        activeGroup.value = formGroup.value.map(i=>i.groupName)
        return

    }

    //普通图
    for(const edb of EdbInfoList){
        formGroup.value.push({
            groupName:`${edb.EdbName}`,
            EdbInfoId:edb.EdbInfoId,
            formList:[
                {
                    label:'指标名称',
                    cnValue:edb.EdbName,
                    enValue:edb.EdbNameEn,
                    Value:edb.EdbName,
                    noEdit:true,
                },
                {
                    label:'单位',
                    cnValue:edb.Unit,
                    enValue:edb.UnitEn,
                    Value:edb.Unit,
                    noEdit:true
                },
                {
                    label:'英文指标名称',
                    cnValue:edb.EdbName,
                    enValue:edb.EdbNameEn,
                    Value:edb.EdbNameEn,
                    placeholder:'请输入英文指标名称'
                },
                {
                    label:'英文单位',
                    cnValue:edb.Unit,
                    enValue:edb.UnitEn,
                    Value:edb.UnitEn,
                    placeholder:'请输入英文单位'
                }
            ]
        })
    }
    //默认全部展开
    activeGroup.value = formGroup.value.map(i=>i.groupName)
}

const showCellEditDialog = ref(false)
const currentCell = ref({})
let tempValue=''
function handleCellClick(cell){
    if(cell.noEdit) return
    currentCell.value = cell
    tempValue = cell.Value
    showCellEditDialog.value = true
}
function handleConfirmEditCell(){
    //console.log('check',currentCell.value)
}
function handleCancelEditCell(){
    currentCell.value.Value = tempValue
}
function handleSave(){
    let params = {
        ChartInfoId:props.chartInfo.ChartInfo.ChartInfoId,
        ChartNameEn:formGroup.value[0].formList[1].Value,
        ChartEdbInfoList:[],
    }
    if(Number(props.chartInfo.ChartInfo.ChartType)===10){
        //指标数据
        let ChartEdbInfoList = []
        formGroup.value[2].formList.forEach(item=>{
            ChartEdbInfoList.push({
                EdbInfoId:item.EdbInfoId,
                EdbNameEn:item.Value.trim(),
                UnitEn:''
            })
        })
        params.ChartEdbInfoList = ChartEdbInfoList
        //额外数据
        _ExtraConfig.value.SeriesList.forEach((item,index)=>{
            const {SeriesListLength} = formGroup.value[1]
            item.NameEn = formGroup.value[1].formList[index].Value.trim()
            item.EdbInfoList.forEach((edb,edb_index) => {
                edb.NameEn= formGroup.value[1].formList[edb_index+SeriesListLength].Value.trim();
            })
        })
        let suppleConfig = {}
        let suppleList = formGroup.value[0].formList
        for(let suppleIndex = 2;suppleIndex<suppleList.length;suppleIndex++){
            const key = suppleList[suppleIndex].key
            suppleConfig[key] = suppleList[suppleIndex].Value.trim()
        }
        _ExtraConfig.value = {..._ExtraConfig.value,...suppleConfig}
        params.ExtraConfig = JSON.stringify(_ExtraConfig.value)
    }
    else if(Number(props.chartInfo.ChartInfo.Source)===10) {
        params = {
            ChartInfoId:props.chartInfo.ChartInfo.ChartInfoId,
            ChartNameEn:formGroup.value[0].formList[1].Value,
            TagList: [
                { ChartTagId: formGroup.value[0].formList[3].id,TagNameEn: formGroup.value[0].formList[3].Value },
                { ChartTagId: formGroup.value[0].formList[5].id,TagNameEn: formGroup.value[0].formList[5].Value }
            ],
            VarietyList: formGroup.value.filter((_,index)=>index>0).map(_ => ({
                ChartVarietyId: _.id,
                VarietyNameEn: _.formList[1].Value
            }))
        }
    }
    else{
        let ChartEdbInfoList = []
        for(let index = 1;index<formGroup.value.length;index++){
            ChartEdbInfoList.push({
                EdbInfoId:formGroup.value[index].EdbInfoId,
                EdbNameEn:formGroup.value[index].formList[2].Value.trim(),
                UnitEn:formGroup.value[index].formList[3].Value.trim()
            })
        }
        params.ChartEdbInfoList = ChartEdbInfoList
    }
    saveChartEn(params)
}

async function saveChartEn(params){
    console.log(params);
    let res=null
    if([2,5].includes(props.chartInfo.ChartInfo.Source)){//商品价格
        res=await apiFutureChart.chartInfoEditEn({
            ChartInfoId: params.ChartInfoId,
            ChartNameEn: params.ChartNameEn,
            UnitEn: formGroup.value[1].formList[3].enValue || '',
            EdbNameEn: formGroup.value[1].formList[2].enValue || '',
            FutureGoodNameEn: props.chartInfo.ChartInfo.Source==2?formGroup.value[0].formList[3].enValue : '',
            ProfitNameEn: props.chartInfo.ChartInfo.Source==5?formGroup.value[0].formList[3].enValue : '',
        })
    }else if(props.chartInfo.ChartInfo.Source===3){//相关性
        res=await apiCorrelationChart.chartInfoEditEn({
            ChartInfoId: params.ChartInfoId,
            ChartNameEn: params.ChartNameEn,
        })
    }else if(props.chartInfo.ChartInfo.Source===6){//拟合方程
        res=await apiLineEquationChart.chartInfoEditEn({
            ChartInfoId: params.ChartInfoId,
            ChartNameEn: params.ChartNameEn,
        })
    }else if([7,8,9].includes(props.chartInfo.ChartInfo.Source)){//统计特征
        res=await apiStatisticFeatureChart.chartInfoEditEn({
            ChartInfoId: params.ChartInfoId,
            ChartNameEn: params.ChartNameEn,
        })
    }else if(props.chartInfo.ChartInfo.Source===10){//统计特征
        res=await apiCrossVarietyChart.editChartEn(params)
    }else{
        res = await apiChart.chartInfoEditEn(params)
    }

    
    if(res.Ret!==200) return 
    showToast({message:'设置英文名称成功',type:'success'})
    emits('success')
}
</script>

<template>
    <div class="set-name-pop-wrap">
        <van-collapse v-model="activeGroup">
            <van-collapse-item
                v-for="node in formGroup"
                :key="node.groupName"
                :name="node.groupName"
                :title="node.groupName"
                :is-link="true"
            >
                <van-cell
                    v-for="cell in node.formList"
                    :key="cell.label"
                    :title="cell.label"
                    :label="cell.Value.length?cell.Value:cell.placeholder"
                    :is-link="!cell.noEdit"
                    @click.stop="handleCellClick(cell,node)"
                >
                </van-cell>
            </van-collapse-item>
        </van-collapse>
        <div class="tool-box">
            <div class="btn cancel" @click="emits('cancel')">取消</div>
            <div class="btn" @click="handleSave">保存</div>
        </div>
        <van-dialog 
            v-model:show="showCellEditDialog" 
            title="设置英文名称" 
            show-cancel-button
            confirmButtonText="确定"
            @cancel="handleCancelEditCell"
            @confirm="handleConfirmEditCell"
        >
            <div class="name">{{ currentCell.cnValue||'无'}}</div>
            <div class="rename-wrap">
                <input type="text" :placeholder="currentCell.placeholder" v-model="currentCell.Value">
            </div>
        </van-dialog>
    </div>
</template>

<style lang="scss">
.set-name-pop-wrap{
    .van-collapse{
        flex: 1;
        background-color:#F6F6F6;
    }
    .van-collapse-item{
        padding-bottom:20px;
        &:last-child{
            padding-bottom: 0;
        }
    }
    .van-badge__wrapper{
        align-self: center;
    }
    .van-collapse-item__content{
        padding:0;
    }
    .name{
        text-align: center;
        margin-top:32px;
        color: #666;
    }
    .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){
        .van-collapse-item{
            padding-bottom:10px;
        }
        .name{
            margin-top:16px;
        }
        .rename-wrap{
            padding:24px;
            input{
                padding: 12px 16px;
                border-radius: 6px;
                background-color: #F6F6F6;
                width: 100%;
            }
            .label{
                margin-bottom: 16px;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.set-name-pop-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    .tool-box{
        position:sticky;
        z-index: 99;
        bottom: 0;
        left:0;
        right:0;
        background-color: #fff;
        padding:48px;
        display: flex;
        gap: 24px;
        .btn{
            flex: 1;
            border:1px solid $theme-color;
            border-radius: 12px;
            background-color: $theme-color;
            color:#fff;
            text-align: center;
            padding:16px;
            &.cancel{
                background-color: #fff;
                color: $theme-color;
            }
        }
    }
    @media screen and (min-width:$media-width){
        .tool-box{
            padding:24px;
            gap:12px;
            .btn{
                border-radius: 6px;
                padding:8px;
            }
        }
    }
}
</style>