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

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


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

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

const formState=reactive({
    enName:'',
    enUnit:''
})
watch(
    ()=>props.show,
    ()=>{
        if(props.show){
            formState.enName=props.edbInfo?.EdbNameEn||''
            formState.enUnit=props.edbInfo?.UnitEn||''
        }else{
            formState.enName=''
            formState.enUnit=''
        }
    }
)

async function handleSave(){
    const res=await apiDataEDB.edbInfoEnEdit({
        EdbInfoId:props.edbInfo.EdbInfoId,
        EdbNameEn:formState.enName,
        UnitEn:formState.enUnit
    })
    if(res.Ret===200){
        showToast(res.Msg)
        handleClose()
    }
}

</script>

<template>
    <van-dialog 
        :show="props.show" 
        title="设置英文名称" 
        show-cancel-button
        @confirm="handleSave"
        @cancel="handleClose"
    >
        <div class="edb-info-set-en-wrap">
            <div class="info-item">
                <h3 class="label">指标名称</h3>
                <p class="text">{{props.edbInfo?.EdbName}}</p>
            </div>
            <div class="info-item" v-if="props.edbInfo?.Unit&&props.edbInfo?.Unit!='无'">
                <h3 class="label">单位</h3>
                <p class="text">{{props.edbInfo?.Unit}}</p>
            </div>
            <div class="info-item">
                <input class="input" type="text" placeholder="请输入英文指标名称" v-model="formState.enName">
            </div>
            <div class="info-item" v-if="props.edbInfo?.Unit&&props.edbInfo?.Unit!='无'">
                <input class="input" type="text" placeholder="请输入英文单位" v-model="formState.enUnit">
            </div>
        </div>
    </van-dialog>
</template>

<style lang="scss" scoped>
.edb-info-set-en-wrap{
    padding: 48px;
    .info-item{
        margin-bottom: 32px;
        .label{
            font-size: 32px;
            margin: 0;
            line-height: 48px;
        }
        .text{
            color: $font-grey;
            margin: 0;
        }
        .input{
            background-color: $page-bg-grey;
            box-sizing: border-box;
            display: block;
            width: 100%;
            padding: 24px 32px;
            border-radius: 12px;
        }
    }
}
@media screen and (min-width:$media-width){
    .edb-info-set-en-wrap{
        padding: 24px;
        .info-item{
            margin-bottom: 16px;
            .label{
                font-size: 16px;
                line-height: 28px;
            }
            .input{
                padding: 12px 16px;
                border-radius: 6px;
            }
        }
    }
}
</style>