<template>
|
<div class="form-container">
|
<el-dialog
|
v-model="dialogVisible"
|
title="专家申请进度查询"
|
width="550px"
|
:before-close="handleClose"
|
center
|
>
|
<el-form :model="state.form" size="default" ref="formRef" :rules="state.formRules" label-width="110px" >
|
<el-form-item label="身份证号:" prop="idCard">
|
<el-input v-model.trim="state.form.idCard" placeholder="请输入身份证号"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号:" prop="phone">
|
<el-input v-model.trim="state.form.phone" placeholder="请输入申报时预留的手机号"></el-input>
|
</el-form-item>
|
<el-form-item label="业务处室:" prop="roomId">
|
<el-select v-model="state.form.roomId" style="width: 100%" class="m-2" placeholder="请选择申请的业务处室">
|
<el-option
|
v-for="item in state.agencyList"
|
:key="item.id"
|
:label="item.name"
|
:value="item.name"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button type="primary" @click="onSubmit" size="default" v-preReClick>进度查询</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<div class="pro-map">
|
<button class="pro-btn-active">申请提交</button>
|
<button class="pro-btn">
|
<span>待评定</span>
|
</button>
|
<button class="pro-btn">
|
专家入库
|
</button>
|
<button class="pro-btn">
|
专家证书下载
|
</button>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs, defineEmits, nextTick, onMounted} from 'vue'
|
import {ElMessage, ElMessageBox} from "element-plus"
|
import {verifyPhone, verifyIdCard} from "../../../../utils/validate"
|
import { getToken } from "@/utils/auth"
|
|
|
let validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifyPhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
let verifyId = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入身份证号'))
|
}else{
|
if(!verifyIdCard(value)){
|
callback(new Error('身份证号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
|
const dialogVisible = ref(false)
|
const formRef = ref()
|
const handleClose = () => {
|
reset();
|
formRef.value.clearValidate();
|
dialogVisible.value = false;
|
}
|
|
|
const state = reactive({
|
form:{
|
idCard: null,
|
phone: '',
|
roomId: null
|
},
|
formRules:{
|
idCard:[{ required: true, validator: verifyId, trigger: 'blur' }],
|
phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
|
roomId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
|
}
|
})
|
|
onMounted(()=>{
|
|
})
|
|
const onSubmit = async (formEl)=> {
|
if (!formEl) return
|
await formEl.validate(async (valid, fields) => {
|
if (valid) {
|
|
} else {
|
ElMessage.warning('请完善必填信息')
|
}
|
})
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.form-container{
|
padding: 20px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.pro-map{
|
width: 75%;
|
margin-top: 40px;
|
display: flex;
|
justify-content: space-around;
|
|
.pro-btn {
|
width: calc(25% - 20px);
|
color: #fff;
|
cursor: pointer;
|
border: 1px solid #000;
|
border-radius: 40px 99px 99px 40px;
|
padding: 2em 4em;
|
background: #000;
|
transition: 0.2s;
|
}
|
|
.pro-btn-active {
|
width: calc(25% - 20px);
|
color: #fff;
|
cursor: pointer;
|
border: 1px solid #000;
|
border-radius: 40px 99px 99px 40px;
|
padding: 2em 4em;
|
transition: 0.2s;
|
transform: translate(-0.25rem, -0.25rem);
|
background: #03a9f4;
|
box-shadow: 0.25rem 0.25rem #000;
|
}
|
}
|
}
|
</style>
|
