eta_mobile_front/src/views/dataEDB/components/SetEDBNewData.vue

<script setup>
import { reactive, watch,ref } from "vue"
import apiDataEDB from '@/api/dataEDB'
import { showToast } from "vant"
import moment from "moment"

const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    edbInfo:null
})
const emit=defineEmits(['update:show'])

function handleClose(){
    emit('update:show',false)
}

const minDate=new Date(1970, 0, 1)
const maxDate=new Date(2050, 11, 31)
const currentDate=ref(moment().format('YYYY-MM-DD').split('-'))
const showDate=ref(false)
function handleConfirmDate({ selectedValues, selectedOptions }){
    console.log(selectedValues);
    formState.date=selectedValues.join('-')
    showDate.value=false
}

const formState=reactive({
    date:'',
    val:''
})

watch(
    ()=>props.show,
    ()=>{
        if(props.show){
            if(props.edbInfo?.DataInsertConfig.Date){
                formState.date=props.edbInfo?.DataInsertConfig.Date
                const val=props.edbInfo?.DataInsertConfig.Value
                formState.val=val?Number(val):''
                currentDate.value=formState.date.split('-')
            }
        }else{
            formState.date=''
            formState.val=''
        }
    }
)

async function handleSave(){
    if(!formState.date){
        showToast('请选择日期')
        return
    }
    if(!formState.val){
        showToast('请填写值')
        return
    }
    
    const res=await apiDataEDB.edbNewDataEdit({
        EdbInfoId:props.edbInfo.EdbInfoId,
        Date:formState.date,
        Value:formState.val
    })
    if(res.Ret===200){
        showToast('保存成功')
        handleClose()
    }
}

</script>

<template>
    <van-dialog 
        :show="props.show" 
        :title="props.edbInfo?.DataInsertConfig.Date?'编辑最新值':'设置最新值'" 
        show-cancel-button
        @confirm="handleSave"
        @cancel="handleClose"
    >
        <div class="set-edb-newdata-wrap">
            <div class="edb-name">
                <div class="label">指标名称</div>
                <div class="grey-text">{{props.edbInfo?.EdbName}}</div>
            </div>
            <div class="flex-data-box">
                <div class="item">
                    <div class="label">频度</div>
                    <div class="grey-text">{{props.edbInfo?.Frequency}}</div>
                </div>
                <div class="item">
                    <div class="label">最新日期</div>
                    <div class="grey-text">{{props.edbInfo?.LatestDate}}</div>
                </div>
                <div class="item">
                    <div class="label">最新值</div>
                    <div class="grey-text">{{props.edbInfo?.LatestValue}}</div>
                </div>
            </div>
            <div class="input-box">
                <div class="label">预测日期</div>
                <div class="select-date-box" @click="showDate=true">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
                        <path d="M20 6H12L12 3H10L10 6H6C4.89543 6 4 6.89543 4 8V26C4 27.1046 4.89543 28 6 28H26C27.1046 28 28 27.1046 28 26V8C28 6.89543 27.1046 6 26 6H22V3H20L20 6ZM10 10L12 10L12 8H20L20 10L22 10V8H26V12H6V8H10L10 10ZM6 14H26V26H6L6 14Z" fill="#999999"/>
                    </svg>
                    <input type="text" readonly placeholder="请选择日期" v-model="formState.date">
                </div>
            </div>
            <div class="input-box">
                <div class="label">预测值</div>
                <input class="val-input" type="number" placeholder="输入值" v-model.number="formState.val"> 
            </div>
        </div>
    </van-dialog>
    
    <!-- 选择日期 -->
    <van-popup
        v-model:show="showDate"
        position="bottom"
    >
        <van-date-picker
            v-model="currentDate"
            title="选择日期"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="handleConfirmDate"
            @cancel="showDate=false"
        />
    </van-popup>
    
</template>

<style lang="scss" scoped>
.set-edb-newdata-wrap{
    padding: 20px 42px;
    .label{
        line-height: 48px;
        font-size: 32px;
    }
    .grey-text{
        color: $font-grey;
    }
    .flex-data-box{
        margin: 40px 0;
        display: flex;
        justify-content: space-between;
        .item{
            // flex: 1;
            text-align: center;
            padding: 0 10px;
        }
    }
    .input-box{
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .select-date-box{
            background-color: $page-bg-grey;
            display: flex;
            align-items: center;
            padding: 12px 32px;
            max-width: 350px;
            border-radius: 12px;
            svg{
                width: 32px;
                height: 32px;
            }
            input{
                background-color: transparent;
                width: 180px;
            }
        }
        .val-input{
            background-color: $page-bg-grey;
            padding: 12px 32px;
            border-radius: 12px;
            max-width: 200px;
            text-align: center;
        }
    }
}

@media screen and (min-width:$media-width){
    .set-edb-newdata-wrap{
        padding: 10px 21px;
        .label{
            line-height: 28px;
            font-size: 16px;
        }
        .flex-data-box{
            margin: 20px 0;
            .item{
                padding: 0 5px;
            }
        }
        .input-box{
            margin-top: 20px;
            .select-date-box{
                padding: 6px 16px;
                max-width: 140px;
                border-radius: 6px;
                svg{
                    width: 20px;
                    height: 20px;
                }
                input{
                    width: 90px;
                }
            }
            .val-input{
                padding: 6px 16px;
                border-radius: 6px;
                max-width: 100px;
            }
        }
    }
}
</style>