scd_tools_ui/src/pages/components/drawModal/GroupModelAdd.vue

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="组合装置类型编码设置" width="30%" @close="handleClose"
            :close-on-click-modal="false">
            <span>组合装置编码：</span>
            <el-input v-model="iedValue" :maxlength="5" :show-word-limit="true" style="width: 300px;"
                placeholder="请输入编码,仅支持大写英文字母"></el-input>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancels">取消</el-button>
                    <el-button type="primary" @click="sureClick">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import flow from '@/api/flow/flow';
import { ElMessage, ElLoading } from 'element-plus';
export default {
    props: {
        groupType: {
            type: Boolean,
            required: true,
        },//模态框显示 
        modelId: {
            type: String,
            required: true,
        },//DrawDesigns.vue传过来的模型id
        groupNodeId:{
            type:String,
            required: true,
        }//分组装置节点ID,确定时需要回传回画布界面
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//模态框打开/关闭状态
        let iedValue = ref('')//输入框value值
        let modelType = ref("")//本组件的模型id
        // 初始化组件
        function reload() {
            dialogVisible.value = props.groupType
            modelType.value = props.modelId
        }
        // 关闭模态框
        function modalClose() {
            dialogVisible.value = false
            emit("groupBack", {"show":dialogVisible.value,'ied_type':'',"groupNodeId":props.groupNodeId})
        }
        // 确认按钮
        function modalSure() {
            const reg= /^[A-Za-z]+$/;
            const v = iedValue.value.replace(/ /g,'')
            if (v == '' || !reg.test(v)) {
                ElMessage({
                    message: "请输入正确的组合装置编码：仅支持纯英文字母",
                    type: "error"
                })
            } else {
                //仅更新本地编码，此处不需要提交到后台
                dialogVisible.value = false
                emit("groupBack", {"show":dialogVisible.value,"ied_type":v.toUpperCase(),"groupNodeId":props.groupNodeId})
                /*
                flow.updateIedType({
                    id: modelType.value - 0,
                    old_iedtype: "",
                    new_iedtype: iedValue.value
                }).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            message: "添加成功",
                            type: "success"
                        })
                        dialogVisible.value = false
                        emit("groupBack", dialogVisible.value)
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
                */
            }
        }
        //将输入的编码内容转为大写
        onMounted(() => {
            reload()
        })
        return {
            reload,//初始化组件函数
            handleClose: modalClose,//关闭模态框函数替代关闭函数
            cancels: modalClose,//关闭模态框函数替代关闭函数
            sureClick: modalSure,//确认按钮函数替代确认函数
            iedValue,//输入框value值
            dialogVisible,//模态框状态
            modelType,//本组件的模型id
        }
    }
}
</script>

<style lang="scss" scoped></style>