eta_mobile_front/src/views/dataEDB/calculate/components/FormulaCalculate.vue

<script setup>
import { showToast } from 'vant';
import {ref} from 'vue'
import SelectEDB from './SelectEDB.vue'

const letterOpts = [];//字母数据
function initLetterOpt(){
    for(let i=0;i<26;i++){
        letterOpts.push(String.fromCharCode(65+i));
    }
}
initLetterOpt()

//选择的指标集合
const edbList=ref([
    {
        tag:letterOpts[0],
        target:'',
        startDate:'',
        endDate:''
    },
    {
        tag:letterOpts[1],
        target:'',
        startDate:'',
        endDate:''
    },
    {
        tag:letterOpts[2],
        target:'',
        startDate:'',
        endDate:''
    },
    {
        tag:letterOpts[3],
        target:'',
        startDate:'',
        endDate:''
    }
])
function handleAddEdbList(){
    if(edbList.value.length>=26){
        showToast('添加指标个数已达上限')
        return
    }
    let tag = edbList.value[edbList.value.length-1].tag;
	let index = letterOpts.findIndex(item => item === tag);
	const item = {
		tag: letterOpts[index+1],
		target: '',
		start_date: '',
		end_date: ''
	};
	edbList.value.push(item);
}
function handleDeleteEDBItem(index){
    edbList.value.splice(index, 1)
}

// 选择指标
const showSelectEDB=ref(false)
let whichIndex=0
function handleShowSelectEDB(index){
    whichIndex=index
    showSelectEDB.value=true
}




</script>

<template>
    <div class="formula-calculate-wrap">
        <section class="section select-edb-box">
            <van-swipe-cell  v-for="(item,index) in edbList" :key="item.tag" :disabled="index<4">
                <van-field 
                    :label="item.tag"
                    is-link
                    @click-input="handleShowSelectEDB(index)"
                >
                    <template #left-icon>
                        <div class="left-icon"></div>
                    </template>
                    <template #input>
                        <div class="edb-info-box">
                            <div class="edb-info" v-if="true">
                                <span class="name">指标名称</span>
                                <span class="time">2019-11-25至2023-08-23</span>
                            </div>
                            <span class="placeholder" v-else>请选择指标</span>
                        </div>
                    </template>
                </van-field>
                <template #right>
                    <van-button square type="danger" text="删除" @click="handleDeleteEDBItem(index)"/>
                </template>
            </van-swipe-cell>
            <div class="add-edb-box" @click="handleAddEdbList">
                <img src="@/assets/imgs/icon01.png" alt="">
                <span>添加更多参数</span>
            </div>
        </section>
        <section class="section formula-box">
            <!-- <van-field 
                v-model="item.target" 
                :label="item.tag"
                is-link
                readonly
                input-align="right"
                placeholder="请选择指标"
            >
                <template #left-icon>
                    <div class="left-icon"></div>
                </template>
            </van-field> -->
        </section>
    </div>

    <!-- 选择指标 -->
    <SelectEDB v-model:show="showSelectEDB"/>
</template>

<style lang="scss" scoped>
.formula-calculate-wrap{
    min-height: 80vh;
    background-color: $page-bg-grey;
}
.section{
    background-color: #fff;
    margin-bottom: 32px;
}
.select-edb-box{
    .left-icon{
        width: 48px;
        height: 48px;
    }
    :deep(.van-cell__right-icon){
        align-self: center;
        color: #333;
    }
    .edb-info-box{
        width: 100%;
        text-align: right;
        .placeholder{
            color: var(--van-text-color-3);
        }
        .edb-info{
            display: flex;
            flex-direction: column;
        }
        .time{
            color: $font-grey_999;
            font-size: 24px;
        }
    }
    .add-edb-box{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: $theme-color;
        font-size: 32px;
        padding: 32px var(--van-cell-horizontal-padding);
        img{
            width: 48px;
            height: 48px;
        }
    }

}
</style>