From 12a7587eb12e3d33809ef9c169dd76b20ac707c4 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 13 十一月 2024 10:23:47 +0800 Subject: [PATCH] 修改 --- src/views/safetyReview/expertManage/checkProgress/index.vue | 659 ++++++++--------------------------------------------------- 1 files changed, 95 insertions(+), 564 deletions(-) diff --git a/src/views/safetyReview/expertManage/checkProgress/index.vue b/src/views/safetyReview/expertManage/checkProgress/index.vue index 543b20b..30173e0 100644 --- a/src/views/safetyReview/expertManage/checkProgress/index.vue +++ b/src/views/safetyReview/expertManage/checkProgress/index.vue @@ -1,333 +1,57 @@ <template> - <div class="form-container"> - <div class="main-title" style="font-size: 24px;font-weight: bolder;text-align: center;margin: 40px 0">专家信息录入</div> - <div class="main_form"> - <el-form :model="state.form" :rules="state.rules" ref="ruleFormRef" label-width="200px"> - <el-row> - <el-col :span="20"> - <el-form-item label="专业类别" prop="profession"> - <el-cascader - style="width: 100%" - v-model="state.form.profession" - :options="state.expertsType" - :props="{ expandTrigger: 'hover',value: 'id',label: 'classifyName' }" - @change="professionChange"></el-cascader> - </el-form-item> - </el-col> - </el-row> - <!-- <el-row>--> - <!-- <el-col :span="20">--> - <!-- <el-form-item label="填报日期" prop="date">--> - <!-- <el-date-picker--> - <!-- style="width: 100%"--> - <!-- v-model="form.date"--> - <!-- type="date"--> - <!-- placeholder="选择日期">--> - <!-- </el-date-picker>--> - <!-- </el-form-item>--> - <!-- </el-col>--> - <!-- </el-row>--> - <el-row> - <el-col :span="20"> - <el-form-item label="姓名" prop="name"> - <el-input v-model="state.form.name"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="性别" prop="sex"> - <el-radio-group v-model="state.form.sex"> - <el-radio :label="0">男</el-radio> - <el-radio :label="1">女</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="出生日期" prop="birthday"> - <el-date-picker - style="width: 100%" - v-model="state.form.birthday" - value-format="YYYY-MM-DD 00:00:00" - type="date" - placeholder="选择日期"> - </el-date-picker> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="联系电话" prop="phone"> - <el-input v-model="state.form.phone"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="职称" prop="title"> - <!-- <el-select v-model="form.title" placeholder="请选择" style="width: 100%">--> - <!-- <el-option--> - <!-- v-for="item in professionalList"--> - <!-- :key="item.value"--> - <!-- :label="item.label"--> - <!-- :value="item.value">--> - <!-- </el-option>--> - <!-- </el-select>--> - <el-input v-model="state.form.title"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="证件照" prop="electronicPhoto"> - <el-upload accept="image/*" :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'证件照')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='1' v-model:file-list="state.fileList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'证件照')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传1张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="身份证号" prop="idCard"> - <el-input v-model="state.form.idCard"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="在岗情况" prop="dutyStatus"> - <el-radio-group v-model="state.form.dutyStatus"> - <el-radio :label="0">在岗</el-radio> - <el-radio :label="1">退休</el-radio> - </el-radio-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="单位全称" prop="companyName"> - <el-input v-model="state.form.companyName"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="单位地址"> - <el-input v-model="state.form.companyAddress"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="所在部门"> - <el-input v-model="state.form.deptName"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="职务"> - <el-input v-model="state.form.job"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="单位电话"> - <el-input v-model="state.form.companyTelephone"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="传真号码"> - <el-input v-model="state.form.faxNum"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="电子邮箱"> - <el-input v-model="state.form.email"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="毕业学校"> - <el-input v-model="state.form.graduationSchool"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="最高学历" prop="degree"> - <el-input v-model="state.form.degree"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="所学专业"> - <el-input v-model="state.form.speciality"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="现从事的专业及方向"> - <el-input v-model="state.form.currentProfession"></el-input> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="支撑方向_安全生产" prop="supportDirectionSafety"> - <!-- <el-radio-group v-model="form.supportDirectionSafety">--> - <!-- <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>--> - <!-- </el-radio-group>--> - <el-checkbox-group v-model="state.form.supportDirectionSafety"> - <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox> - </el-checkbox-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="支撑方向_防灾减灾救灾" prop="supportDirectionPrevention"> - <!-- <el-radio-group v-model="form.supportDirectionPrevention">--> - <!-- <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>--> - <!-- </el-radio-group>--> - <el-checkbox-group v-model="state.form.supportDirectionPrevention"> - <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox> - </el-checkbox-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="支撑方向_应急救援" prop="supportDirectionEmergency"> - <!-- <el-radio-group v-model="form.supportDirectionEmergency">--> - <!-- <el-radio v-for="item in directionList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>--> - <!-- </el-radio-group>--> - <el-checkbox-group v-model="state.form.supportDirectionEmergency"> - <el-checkbox v-for="item in state.directionList" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox> - </el-checkbox-group> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="工作简历"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'简历')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.resumeList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'简历')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="发明、著作、学术论文情况(何时、何地出版或发表)"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'著作')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.inventionList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'著作')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="受过何种奖励"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'奖励')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.rewardList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'奖励')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="应急管理相关工作主要业绩及研究成果"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'研究')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.achievementList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'研究')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="专家本人意见"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'本人')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.proAdviceList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'本人')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="推荐单位意见"> - <el-upload accept="image/*" multiple :action="state.uploadUrl" :headers="state.header" method="post" :on-success="(res, uploadFile)=>handleAvatarSuccess(res, uploadFile,'单位')" :on-exceed="showTip" :on-preview="handlePictureCardPreview" :limit='8' v-model:file-list="state.adviceList" list-type="picture-card" :before-upload="picSize" :on-remove="(file, uploadFiles)=>handleRemove(file, uploadFiles,'单位')" :before-remove="beforeRemove"> - <el-icon><Plus /></el-icon> - <template #tip> - <div class="el-upload__tip">上传jpg/png图片尺寸小于5M,最多可上传5张</div> - </template> - </el-upload> - </el-form-item> - </el-col> - </el-row> - <el-row> - <el-col :span="20"> - <el-form-item label="补充说明"> - <el-input v-model="state.form.remark" type="textarea" :autosize="{ minRows: 2}"></el-input> - </el-form-item> - </el-col> - </el-row> - </el-form> - <el-dialog v-model="imgDialog"> - <img w-full :src="state.dialogImageUrl" alt=""> - </el-dialog> - </div> - <div style="width: 100%;display: flex;justify-content: center;margin: 20px 0"> - <el-button type="primary" @click="onSubmit(ruleFormRef)" size="large" v-preReClick style="width: 40%">确认</el-button> - </div> + <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 {addExpertInfo, getExpertTypes, uploadFile} from "@/api/form" -import {delPic} from "@/api/login" import { getToken } from "@/utils/auth" -import {Base64} from "js-base64" -const imgDialog = ref(false) -const ruleFormRef = ref() -var validatePass = (rule, value, callback) => { - if (state.fileList.length == 0) { - callback(new Error('请上传证件照')); - } else { - callback(); - } -} + let validatePhone = (rule, value, callback)=>{ if(value === ''){ callback(new Error('请输入手机号')) @@ -351,255 +75,37 @@ } } +const dialogVisible = ref(false) +const formRef = ref() +const handleClose = () => { + reset(); + formRef.value.clearValidate(); + dialogVisible.value = false; +} + + const state = reactive({ form:{ - name:'', - sex:'', - profession: [], - bigClassify:null, - smallClassify: null, - birthday: '', - phone:'', - title: '', - electronicPhoto: '', - idCard: '', - dutyStatus: null, - companyName: '', - companyAddress: '', - deptName: '', - job: '', - companyTelephone: '', - faxNum: '', - email: '', - graduationSchool: '', - degree: '', - speciality: '', - currentProfession: '', - supportDirectionSafety: [], - supportDirectionPrevention: [], - supportDirectionEmergency: [], - resumeKey: '', - paperSituationKey: '', - rewardKey: '', - achievementKey: '', - personalOpinionKey: '', - recommendUnitOpinionKey: '', - remark: '', - source: 1 + idCard: null, + phone: '', + roomId: null }, - expertsType: [], - directionList: [ - { - value: 1, - label: '现场检查' - }, - { - value: 2, - label: '调查评估' - }, - { - value: 3, - label: '咨询服务' - }, - { - value: 4, - label: '教育培训' - }, - { - value: 5, - label: '其他' - } - ], - uploadUrl: import.meta.env.VITE_APP_BASE_API + '/system/common/uploadFile', - header: { - Authorization: 'Bearer ' + getToken() - }, - fileList: [], - resumeList: [], - inventionList: [], - rewardList: [], - achievementList: [], - proAdviceList: [], - adviceList: [], - dialogImageUrl: '', - rules:{ - name:[{ required: true, message: '请填写姓名', trigger: 'blur' }], - sex:[{ required: true, message: '请选择性别', trigger: 'blur' }], - profession: [{ required: true, message: '请选择专业类别', trigger: 'blur' }], - birthday: [{ required: true, message: '请选择出生日期', trigger: 'blur' }], + formRules:{ + idCard:[{ required: true, validator: verifyId, trigger: 'blur' }], phone:[{ required: true, validator: validatePhone, trigger: 'blur' }], - title: [{ required: true, message: '请填写职称', trigger: 'blur' }], - electronicPhoto: [{ required: true,validator: validatePass, trigger: 'blur' }], - idCard: [{ required: true, validator: verifyId, trigger: 'blur' }], - dutyStatus: [{ required: true, message: '请选择在岗情况', trigger: 'blur' }], - companyName: [{ required: true, message: '请填写单位全称', trigger: 'blur' }], - degree: [{ required: true, message: '请填写最高学历', trigger: 'blur' }] + roomId: [{ required: true, message: '请选择申请的业务处室', trigger: 'blur' }] } }) - onMounted(()=>{ - getExpertsType() - }) +onMounted(()=>{ - const getExpertsType = async ()=>{ - const res = await getExpertTypes() - if(res.code == 200){ - state.expertsType = res.data - }else{ - ElMessage({ - type: 'warning', - message: res.message - }); - } - } - - const professionChange=(value)=> { - console.log(value,'val') - } - - - - // 图片上传 - const showTip =()=>{ - ElMessage({ - type: 'warning', - message: '超出文件上传数量' - }); - } - - const picSize = async (rawFile) => { - if(rawFile.size / 1024 / 1024 > 5){ - ElMessage({ - type: 'warning', - message: '文件大小不能超过5M' - }); - return false - } - }; - - const handlePictureCardPreview = (uploadFile) => { - state.dialogImageUrl = uploadFile.url - imgDialog.value = true; - } - - const handleAvatarSuccess = (res, uploadFile,type) => { - if(res.code == 200){ - if(type == '证件照'){ - state.form.electronicPhoto = res.data.path - }else{ - uploadFile.name = res.data.path - } - }else{ - ElMessage({ - type: 'warning', - message: '文件上传失败' - }) - } - } - - const handleRemove = (file, uploadFiles,type) => { - if(file && file.status == 'success') { - ElMessageBox.confirm( - '该操作将永久删除此文件内容,是否继续?', - '提示', - { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning', - }) - .then(async () => { - let path = '' - if (type == '证件照') { - path = state.form.electronicPhoto - } else { - path = file.name - } - const res = await delPic({path: path}) - if (res.code == 200) { - ElMessage({ - type: 'success', - message: '文件已删除' - }) - } else { - ElMessage({ - type: 'warning', - message: res.message - }) - } - }) - } - } +}) const onSubmit = async (formEl)=> { if (!formEl) return await formEl.validate(async (valid, fields) => { if (valid) { - if(state.form.supportDirectionSafety.length==0&&state.form.supportDirectionSafety.length==0&&state.form.supportDirectionSafety.length==0){ - ElMessage.warning('请至少选择一种支撑方向') - return - } - let data = JSON.parse(JSON.stringify(state.form)) - data.supportDirectionSafety = data.supportDirectionSafety.join(',') - data.supportDirectionPrevention = data.supportDirectionPrevention.join(',') - data.supportDirectionEmergency = data.supportDirectionEmergency.join(',') - data.bigClassify = data.profession[0] - data.smallClassify = data.profession[1] - data.resumeKey = state.resumeList.map(i=>i.name).join(',') - data.paperSituationKey = state.inventionList.map(i=>i.name).join(',') - data.rewardKey = state.rewardList.map(i=>i.name).join(',') - data.achievementKey = state.achievementList.map(i=>i.name).join(',') - data.personalOpinionKey = state.proAdviceList.map(i=>i.name).join(',') - data.recommendUnitOpinionKey = state.adviceList.map(i=>i.name).join(',') - delete data.profession - delete data.id - const res= await addExpertInfo(data) - if(res.code == 200){ - ElMessage.success(res.message) - state.form = { - name:'', - sex:'', - profession: [], - bigClassify:null, - smallClassify: null, - birthday: '', - phone:'', - title: '', - electronicPhoto: '', - idCard: '', - dutyStatus: null, - companyName: '', - companyAddress: '', - deptName: '', - job: '', - companyTelephone: '', - faxNum: '', - email: '', - graduationSchool: '', - degree: '', - speciality: '', - currentProfession: '', - supportDirectionSafety: [], - supportDirectionPrevention: [], - supportDirectionEmergency: [], - resumeKey: '', - paperSituationKey: '', - rewardKey: '', - achievementKey: '', - personalOpinionKey: '', - recommendUnitOpinionKey: '', - remark: '', - source: 1 - } - state.fileList = [] - state.resumeList = [] - state.inventionList = [] - state.rewardList = [] - state.achievementList = [] - state.proAdviceList = [] - state.adviceList = [] - }else{ - ElMessage.warning(res.message) - } + } else { ElMessage.warning('请完善必填信息') } @@ -610,15 +116,40 @@ <style scoped lang="scss"> .form-container{ - padding: 20px; + padding: 20px; + display: flex; + justify-content: center; + align-items: center; - :deep(.el-form .el-form-item__label) { - font-size: 15px; + .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; } - .file { - display: flex; - flex-direction: column; - align-items: flex-start; + + .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> -- Gitblit v1.9.2