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

<template>
    <div>
        <el-dialog v-model="dialogVisible" title="匹配正则" width="30%" @close="handleClose" :close-on-click-modal="false">
            <el-form ref="testFormRef" :model="testForm" :rules="rules" label-width="180px">
                <el-form-item label="正则表达式" prop="txt">
                    <el-input v-model="testForm.txt"></el-input>
                </el-form-item>
                <el-form-item label="匹配的字符串" prop="textTxt">
                    <el-input v-model="testForm.textTxt"></el-input>
                </el-form-item>
            </el-form>
            <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 { ElMessage } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, watch, reactive } from 'vue';
import flow from '@/api/flow/flow';
export default {
    props: {
        testType: {
            type: Boolean,
            required: true,
        },//AbilityModal.vue传过来的模态框状态
    },
    setup(props, { emit }) {
        let dialogVisible = ref(false)//本组件模态框状态
        let testForm = ref({
            txt: "",//正则表达式
            textTxt: "",//需要验证的正则表达式
        })//表单value
        let testFormRef = ref()//表单的ref
        let rules = reactive({
            txt: [
                { required: true, message: '请输入正则表达式', trigger: 'blur' },
            ],
            textTxt: [
                { required: true, message: '请输入验证的正则表达式', trigger: 'blur' },
            ],
        })//表单输入验证
        // 初始化本组件函数
        function reload() {
            dialogVisible.value = props.testType
        }
        // 关闭模态框
        function closeModal() {
            // 模态框状态设置为关闭
            dialogVisible.value = false
            // 传回给AbilityModal.vue
            emit("ktBack", dialogVisible.value)
        }
        // 确认事件
        function sureModal() {
            // element plus表单组件自带验证
            testFormRef.value.validate((val) => {
                if (val) {
                    // 调用接口拿到正确或错误
                    flow.cruxTestNow({
                        regstr: testForm.value.txt,
                        str: testForm.value.textTxt,
                    }).then(res => {
                        // 判断接口返回是否成功
                        if (res.code == 0) {
                            ElMessage({
                                message: "验证通过！",
                                type: "success"
                            })
                            // 模态框状态设置为关闭
                            // dialogVisible.value = false
                            // 传回给AbilityModal.vue
                            // emit("ktBack", dialogVisible.value)
                        } else {
                            ElMessage({
                                message: "验证失败！",
                                type: "error"
                            })
                        }
                    })

                } else {
                    ElMessage({
                        message: "您还有表单项没有输入！",
                        type: "error"
                    })
                }
            })

        }
        onMounted(() => {
            reload()
        })
        return {
            dialogVisible,//本组件模态框状态
            reload,//初始化本组件函数
            testForm,//表单value
            cancels: closeModal,//取消按钮事件换为closemodal
            handleClose: closeModal,//全局关闭模态框事件换为closemodal
            sureClick: sureModal,//确认按钮函数替换为suremodal
            testFormRef,//表单的ref
            rules,//表单输入验证
        }
    }
}
</script>

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