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

<script setup>
import {watch,ref, reactive, computed} from 'vue'
import apiDataEDB from '@/api/dataEDB'
import {edbFrequencyOpts,edbUnitOpts} from '../util/config'
import {deleteClassifyItemEmpty,findItemWithIdAndParents} from '../util/util'
import { showToast } from 'vant'

const props=defineProps({
    modelValue:{
        type:Boolean,
        default:false
    },
    edbInfoId:{
        type:Number,
        default:0
    },//当前指标id
    baseInfo:{},//新增指标时传来的初始数据
})
const emits=defineEmits(['update:modelValue','success','addSuccess'])

const edbNameInputFocus=ref(false)//指标名称输入框聚焦状态

const formState=reactive({
    name:'',
    classify:'',
    frequency:'',
    unit:''
})
// 获取指标详情
async function getEDBInfo(){
    const res=await apiDataEDB.getBaseEdbInfo({EdbInfoId:props.edbInfoId})
    if(res.Ret===200){
        formState.name=res.Data.EdbName
        formState.classify=res.Data.ClassifyId
        formState.frequency=res.Data.Frequency
        formState.unit=res.Data.Unit

        getEdbClassifyList()
    }
}
watch(
    ()=>props.modelValue,
    ()=>{
        if(props.modelValue){
            // 编辑
            if(props.edbInfoId){
                getEDBInfo()
            }else{
                // 新增
                formState.name=props.baseInfo.edb_name
                formState.frequency=props.baseInfo.frequency
                formState.unit=props.baseInfo.unit
                getEdbClassifyList()
            }
        }
    }
)

function handleClose(){
    emits('update:modelValue',false)
}

// 获取指标库分类
const edbClassifyList=ref([])
function getEdbClassifyList(){
    apiDataEDB.edbClassifyList().then(res=>{
        if(res.Ret===200){
            deleteClassifyItemEmpty(res.Data.AllNodes||[])
            edbClassifyList.value=res.Data.AllNodes||[]
        }
    })
}
const showSelectClassify=ref(false)
const selectClassifyNameStr=computed(()=>{
    if(!formState.classify) return ''

    let arr=[]
    arr=findItemWithIdAndParents(edbClassifyList.value,formState.classify)
    if(arr?.length){
        const textArr=arr.map(item=>item.ClassifyName)
        return `${textArr.join('/')}`
    }
})

// 选择频率
const showSelectFrequency=ref(false)
const frequencyOpts=edbFrequencyOpts.map(item=>{
    return {
        text:item,
        value:item
    }
})
function onConfirmSelectFrequency(e){
    formState.frequency=e.selectedValues[0]
    showSelectFrequency.value=false
}

// 选择单位
const showSelectUnit=ref(false)
const unitOpts=edbUnitOpts.map(item=>{return{text:item,value:item}})
function onConfirmSelectUnit(e){
    formState.unit=e.selectedValues[0]
    showSelectUnit.value=false
}

// 保存编辑
async function handleSave(){
    let params={
        ClassifyId:formState.classify,
        EdbName:formState.name,
        Frequency:formState.frequency,
        Unit:formState.unit
    }
    if(!params.EdbName){
        showToast('指标名称不能为空')
        return
    }
    if(!params.ClassifyId){
        showToast('目录名称不能为空')
        return
    }
    if(!params.Frequency){
        showToast('频率不能为空')
        return
    }
    if(!params.Unit){
        showToast('单位不能为空')
        return
    }
    if(props.edbInfoId){
        params={
            EdbInfoId:props.edbInfoId,
            ...params
        }
        const res=await apiDataEDB.editBaseEdbInfo(params)
        if(res.Ret===200){
            showToast(res.Msg)
            emits('update:modelValue',false)
            emits('success',params)
        }
    }else{
        params={
            ...props.baseInfo,
            ...params
        }
        const res=await apiDataEDB.AddBaseEdbInfo(params)
        if(res.Ret===200){
            showToast('新增指标成功！')
            emits('update:modelValue',false)
            emits('addSuccess')
        }
    }
    
}

</script>

<template>
    <van-popup 
        :show="props.modelValue"
        position="bottom"
        style="width:100%;height:100%"
    >
        <div class="edit-baseEDB-wrap">
            <van-field 
                v-model="formState.name" 
                label="指标名称" 
                placeholder="指标名称"
                input-align="right"
                @focus="edbNameInputFocus=true"
                @blur="edbNameInputFocus=false"
            >
                <template #right-icon>
                    <svg class="edit-icon" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <path d="M23.4 13.2L34.8 24.6L19.4 40H8V28.6L23.4 13.2ZM23.4 19L12 30.4V36H17.6L29 24.6L23.4 19ZM28.8 8L40 19.4L36.6 22.8L25.2 11.4L28.8 8Z" :fill="edbNameInputFocus?'#0052D9':'#333333'"/>
                    </svg>
                </template>
            </van-field>
            <van-field 
                :modelValue="selectClassifyNameStr"
                readonly
                label="所属目录" 
                placeholder="请选择所属目录"
                input-align="right"
                right-icon="arrow"
                @click-input="showSelectClassify=true"
            />
            <van-field 
                :modelValue="formState.frequency"
                readonly
                label="频率" 
                placeholder="请选择频率"
                input-align="right"
                right-icon="arrow"
                @click-input="showSelectFrequency=true"
            />
            <van-field 
                :modelValue="formState.unit"
                readonly
                label="单位" 
                placeholder="请选择单位"
                input-align="right"
                right-icon="arrow"
                @click-input="showSelectUnit=true"
            />

            <div class="btn-box">
                <van-button @click="handleClose">取消</van-button>
                <van-button type="primary" @click="handleSave">保存</van-button>
            </div>
            
        </div>
    </van-popup>

    <!-- 选择分类 -->
    <van-popup 
        v-model:show="showSelectClassify" 
        round 
        position="bottom"
    >
        <van-cascader
            v-model="formState.classify"
            title="选择目录"
            :options="edbClassifyList"
            :field-names="{text:'ClassifyName',value:'ClassifyId',children:'Children'}"
            @close="showSelectClassify = false"
        />
        <div style="width:300px;margin:0 auto;padding:20px 0">
            <van-button type="primary" round block @click="showSelectClassify = false">确定</van-button>
        </div>
    </van-popup>

    <!-- 选择频率 -->
    <van-popup 
        v-model:show="showSelectFrequency" 
        round 
        position="bottom"
    >
        <van-picker
            title="请选择频率"
            :columns="frequencyOpts"
            @cancel="showSelectFrequency=false"
            @confirm="onConfirmSelectFrequency"
        />
    </van-popup>

    <!-- 选择单位 -->
    <van-popup 
        v-model:show="showSelectUnit" 
        round 
        position="bottom"
    >
        <van-picker
            title="选择单位"
            :columns="unitOpts"
            @cancel="showSelectUnit=false"
            @confirm="onConfirmSelectUnit"
        />
    </van-popup>
</template>

<style lang="scss" scoped>
.edit-baseEDB-wrap{
    .edit-icon{
        width: 48px;
        height: 48px;
    }
    :deep(.van-field__right-icon){
        width: 60px;
    }
    .btn-box{
        margin-top: 50PX;
        text-align: center;
        .van-button{
            width: 150PX;
            margin: 0 10PX;
        }
    }
}
@media screen and (min-width:$media-width){
    .edit-baseEDB-wrap{
        .edit-icon{
            width: 24px;
            height: 24px;
        }
        :deep(.van-field__right-icon){
            width: 30px;
        }
    }
}
</style>