<template>
|
<div class="form-container">
|
<el-form :model="queryParams" size="default" ref="formRef" inline :rules="formRules" label-width="110px" >
|
<el-form-item label="身份证号:">
|
<el-input v-model.trim="queryParams.idCard" placeholder="请输入身份证号"></el-input>
|
</el-form-item>
|
<el-form-item label="手机号:">
|
<el-input v-model.trim="queryParams.phone" placeholder="请输入申报时预留的手机号"></el-input>
|
</el-form-item>
|
<el-form-item label="专业领域:">
|
<!-- <el-cascader-->
|
<!-- clearable-->
|
<!-- placeholder="请选择申请的业务处室"-->
|
<!-- v-model="queryParams.deptId"-->
|
<!-- :options="deptList"-->
|
<!-- :props="{ expandTrigger: 'hover', value: 'deptId',label: 'deptName',checkStrictly: true,emitPath: false}"></el-cascader>-->
|
<el-cascader
|
clearable
|
v-model="queryParams.domain"
|
:options="expertsType"
|
:props="{ expandTrigger: 'hover',value: 'classifyName',label: 'classifyName',emitPath: false }"
|
@change="professionChange"></el-cascader>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="Search" @click="onSubmit(formRef)" v-preReClick>进度查询</el-button>
|
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="pro-map" v-if="showProgress">
|
<button class="pro-btn-active">申请提交</button>
|
<button :class="(result.state == 4 ||result.state == 2) ?'pro-btn-active':result.state == 3?'pro-btn-red':result.state == 1?'pro-btn-blue':'pro-btn'">
|
<span v-if="result.state == 1">待评定</span>
|
<span v-if="result.state == 3">评定不符合</span>
|
<span v-if="result.state == 2">评定通过</span>
|
</button>
|
<button :class="result.state == 2?'pro-btn-active':'pro-btn'">
|
专家入库
|
</button>
|
<button :class="result.state == 2?'pro-download-active':'pro-download'" @click="downloadPdf(result)">
|
专家证书下载
|
</button>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs, defineEmits, nextTick, onMounted} from 'vue'
|
import { useRouter } from 'vue-router'
|
import {ElMessage, ElMessageBox} from "element-plus"
|
import {verifyPhone, verifyIdCard} from "../../../../utils/validate"
|
import { getToken } from "@/utils/auth"
|
import {getExpertsList, getExpertTypes, queryApprove} from "@/api/form";
|
import {listOutDept} from "@/api/system/dept";
|
const { proxy } = getCurrentInstance();
|
const router = useRouter()
|
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 data = reactive({
|
queryParams: {
|
idCard: '',
|
phone: '',
|
domain: ''
|
},
|
expertsType: [],
|
formRules:{
|
|
},
|
result: {}
|
})
|
|
const {queryParams,expertsType,formRules,result} = toRefs(data)
|
const deptList = ref([]);
|
onMounted(()=>{
|
getDepList()
|
})
|
|
|
const showProgress = ref(false)
|
const formRef = ref()
|
function getDepList() {
|
listOutDept({}).then(response => {
|
deptList.value = proxy.handleTree(response.data, "deptId",'parentId','children');
|
})
|
}
|
|
onMounted(()=>{
|
getExpertsType()
|
})
|
|
const getExpertsType = async ()=>{
|
const res = await getExpertTypes()
|
if(res.code == 200){
|
data.expertsType = res.data
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.msg
|
})
|
}
|
}
|
const professionChange=(value)=> {
|
console.log(value,'val')
|
}
|
const onSubmit = async (formEl)=> {
|
if (!formEl) return
|
await formEl.validate(async (valid, fields) => {
|
if (valid) {
|
const res = await queryApprove(data.queryParams)
|
if(res.code == 200){
|
data.result = res.data
|
showProgress.value = true
|
}else{
|
showProgress.value = false
|
ElMessage.warning(res.msg)
|
}
|
} else {
|
ElMessage.warning('请完善必填信息')
|
}
|
})
|
}
|
|
const downloadPdf=(info)=>{
|
if(info.state == 2){
|
const routePath = '/certPdf';
|
const resolvedRoute = router.resolve(routePath);
|
const queryString = new URLSearchParams(info).toString();
|
const fullPath = `${resolvedRoute.href}?${queryString}`;
|
window.open(fullPath, '_blank');
|
}else{
|
ElMessage.warning('下载聘书需等待评定通过')
|
}
|
}
|
|
const resetQuery = ()=>{
|
data.queryParams = {
|
idCard: '',
|
phone: '',
|
domain: ''
|
}
|
showProgress.value = false
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.form-container{
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.pro-map{
|
width: 75%;
|
margin-top: 40px;
|
display: flex;
|
justify-content: space-around;
|
|
.pro-btn,.pro-download{
|
width: calc(25% - 20px);
|
color: #333;
|
cursor: pointer;
|
border: 1px solid #666;
|
border-radius: 40px 99px 99px 40px;
|
padding: 2em 4em;
|
background: #ccc;
|
transition: 0.2s;
|
}
|
|
.pro-btn-active,.pro-btn-red,.pro-btn-blue,.pro-download-active {
|
width: calc(25% - 20px);
|
color: #fff;
|
cursor: pointer;
|
border: 1px solid #666;
|
border-radius: 40px 99px 99px 40px;
|
padding: 2em 4em;
|
transition: 0.2s;
|
transform: translate(-0.25rem, -0.25rem);
|
background: #67C23A;
|
box-shadow: 0.25rem 0.25rem #ccc;
|
}
|
|
.pro-download-active,.pro-download{
|
border-radius: 20px;
|
}
|
|
.pro-btn-red{
|
color: #fff;
|
background: #F56C6C;
|
}
|
|
.pro-btn-blue{
|
color: #fff;
|
background: #2563EB;
|
}
|
}
|
}
|
</style>
|
