DataFront/components/tools/qqazk/QqazkSearchBox.vue

<script setup lang="ts">
import {MessageBox} from "@element-plus/icons-vue";
import {Action} from "element-plus";
// import router from "#app/plugins/router";
import {useRouter,useRoute} from "vue-router";
const router = useRouter()
const route = useRoute()
const allEng = /^[a-zA-Z]+$/;
const allChi = /^[\u4e00-\u9fa5]+$/
interface SearchLable{
  words:string
  method:string
}
const formLabelAlign = reactive<SearchLable>({
  words: '',
  method: 'bsmf',
})
const testAndSearch = ()=>{
  if (formLabelAlign.words.length<1 ||
      formLabelAlign.method=='bsmf'&&!allEng.test(formLabelAlign.words) ||
      formLabelAlign.method=='bsmc'&&!allEng.test(formLabelAlign.words) ||
      formLabelAlign.method=='hz'&&!allChi.test(formLabelAlign.words) ||
      formLabelAlign.words.length>20
  ){
      ElMessageBox.alert("输入内容错误，请检查是否选择了正确的搜索方式。搜素长度不大于20字符","输入内容不符合规范",{
          confirmButtonText: '确认',
          callback:(action:Action)=>{

          }
      }
    )
  }else {
    router.push({
      path:"/tools/qqazk/search",
      query:{
        words:formLabelAlign.words,
        method:formLabelAlign.method
      }
    })
  }

}

</script>

<template>
  <el-form
      :label-position="'right'"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
      @keydown.enter="testAndSearch"
  >
    <el-form-item label="查询方法">
      <el-radio-group v-model="formLabelAlign.method" label="label position">
        <el-radio-button label="bsmf">笔顺码前部</el-radio-button>
        <el-radio-button label="bsmc">笔顺码中部</el-radio-button>
        <el-radio-button label="hz">汉字</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="查询内容">
      <el-input @keydown.enter="testAndSearch"   v-model="formLabelAlign.words" />
    </el-form-item>
    <el-form-item>
      <el-button @click="testAndSearch">搜索</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>