From cc3e08bda13360c88b7189e8f8d043b60783c7fb Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 21 十一月 2024 16:46:32 +0800
Subject: [PATCH] 新增
---
src/views/safetyReview/expertManage/checkProgress/index.vue | 152 ++++++++++++++++++++++++++++++--------------------
1 files changed, 92 insertions(+), 60 deletions(-)
diff --git a/src/views/safetyReview/expertManage/checkProgress/index.vue b/src/views/safetyReview/expertManage/checkProgress/index.vue
index 30173e0..b448ce7 100644
--- a/src/views/safetyReview/expertManage/checkProgress/index.vue
+++ b/src/views/safetyReview/expertManage/checkProgress/index.vue
@@ -1,45 +1,36 @@
<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">
+ <el-form :model="queryParams" size="default" ref="formRef" inline :rules="formRules" label-width="110px" >
+ <el-form-item label="身份证号:" prop="idCard">
+ <el-input v-model.trim="queryParams.idCard" placeholder="请输入身份证号"></el-input>
+ </el-form-item>
+ <el-form-item label="手机号:" prop="phone">
+ <el-input v-model.trim="queryParams.phone" placeholder="请输入申报时预留的手机号"></el-input>
+ </el-form-item>
+ <el-form-item label="业务处室:" prop="deptId">
+ <el-cascader
+ clearable
+ placeholder="请选择申请的业务处室"
+ v-model="queryParams.deptId"
+ :options="deptList"
+ :props="{ expandTrigger: 'hover', value: 'deptId',label: 'deptName',checkStrictly: true,emitPath: false}"></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="pro-btn">
- <span>待评定</span>
+ <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="pro-btn">
+ <button :class="result.state == 4?'pro-btn-active':'pro-btn'">
专家入库
</button>
- <button class="pro-btn">
+ <button :class="result.state == 4?'pro-download-active':'pro-download'">
专家证书下载
</button>
</div>
@@ -50,7 +41,10 @@
import {ElMessage, ElMessageBox} from "element-plus"
import {verifyPhone, verifyIdCard} from "../../../../utils/validate"
import { getToken } from "@/utils/auth"
+import {getExpertsList, queryApprove} from "@/api/form";
+import {listOutDept} from "@/api/system/dept";
+const { proxy } = getCurrentInstance();
let validatePhone = (rule, value, callback)=>{
if(value === ''){
@@ -75,27 +69,34 @@
}
}
-const dialogVisible = ref(false)
-const formRef = ref()
-const handleClose = () => {
- reset();
- formRef.value.clearValidate();
- dialogVisible.value = false;
-}
-
-
-const state = reactive({
- form:{
- idCard: null,
+const data = reactive({
+ queryParams: {
+ idCard: '',
phone: '',
- roomId: null
+ deptId: null
},
formRules:{
idCard:[{ required: true, validator: verifyId, trigger: 'blur' }],
phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
- roomId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
- }
+ deptId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }]
+ },
+ result: {}
})
+
+const {queryParams,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(()=>{
@@ -105,19 +106,36 @@
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 resetQuery = ()=>{
+ data.queryParams = {
+ idCard: '',
+ phone: '',
+ deptId: null
+ }
+ showProgress.value = false
+}
</script>
<style scoped lang="scss">
.form-container{
padding: 20px;
display: flex;
+ flex-direction: column;
justify-content: center;
align-items: center;
@@ -127,28 +145,42 @@
display: flex;
justify-content: space-around;
- .pro-btn {
+ .pro-btn,.pro-download{
width: calc(25% - 20px);
- color: #fff;
+ color: #333;
cursor: pointer;
- border: 1px solid #000;
+ border: 1px solid #666;
border-radius: 40px 99px 99px 40px;
padding: 2em 4em;
- background: #000;
+ background: #ccc;
transition: 0.2s;
}
- .pro-btn-active {
+ .pro-btn-active,.pro-btn-red,.pro-btn-blue,.pro-download-active {
width: calc(25% - 20px);
color: #fff;
cursor: pointer;
- border: 1px solid #000;
+ border: 1px solid #666;
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;
+ 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;
}
}
}
--
Gitblit v1.9.2