bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员库详情

This commit is contained in:
cwchen 2025-10-21 15:21:49 +08:00
parent 9c85942ffb
commit 4ac271da32
3 changed files with 399 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
src/views/enterpriseLibrary/personnel/components/child/BasicInfoDetail.vue
View File

@ -4,54 +4,121 @@
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="基本信息"> <img src="@/assets/enterpriseLibrary/basic-info.png" alt="基本信息">
<span>基本信息</span> <span>基本信息</span>
</div> </div>
<el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top"> <div class="form-content">
<el-form-item label="人员职位" prop="personnelPosition"> <!-- 人员职位 -->
<el-select class="form-item" v-model="form.personnelPosition" placeholder="请选择人员职位" @change="handlePersonnelPositionChange"> <div class="field-row">
<el-option v-for="item in dict.type.personnel_position" :key="item.value" :label="item.label" :value="item.value"></el-option> <div class="field-label">人员职位</div>
</el-select> <div class="field-value">{{ form.personnelPosition || '项目经理' }}</div>
</el-form-item> </div>
<!-- 身份证人面像 --> <!-- 身份证人面像 -->
<el-form-item label="身份证人面像" prop="fileList"> <div class="field-row">
<UploadFile :fileList="form.fileList" /> <div class="field-label">身份证人面像</div>
</el-form-item> <div class="field-value">
<el-image
v-if="form.idCardFront"
:src="form.idCardFront"
:preview-src-list="[form.idCardFront]"
fit="contain"
class="id-card-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</div>
<!-- 身份证国徽面 --> <!-- 身份证国徽面 -->
<el-form-item label="身份证国徽面" prop="fileList2"> <div class="field-row">
<UploadFile :fileList="form.fileList2" /> <div class="field-label">身份证国徽面</div>
</el-form-item> <div class="field-value">
<el-form-item label="人员姓名" prop="personnelName"> <el-image
<el-input v-model="form.personnelName" placeholder="自动提取"></el-input> v-if="form.idCardBack"
</el-form-item> :src="form.idCardBack"
<el-form-item label="入职时间" prop="employmentDate"> :preview-src-list="[form.idCardBack]"
<el-date-picker class="form-item" v-model="form.employmentDate" placeholder="请选择入职时间" fit="contain"
value-format="yyyy-MM-dd" type="date"></el-date-picker> class="id-card-image"
</el-form-item> />
<el-form-item label="从业年限" prop="employmentYears"> <div v-else class="no-image">暂无图片</div>
<el-input min="0" max="60" type="number" v-model="form.employmentYears" placeholder="请输入从业年限"></el-input> </div>
</el-form-item> </div>
<!-- 人员姓名 -->
<div class="field-row">
<div class="field-label">人员姓名</div>
<div class="field-value">{{ form.personnelName || '赵德柱' }}</div>
</div>
<!-- 入职时间 -->
<div class="field-row">
<div class="field-label">入职时间</div>
<div class="field-value">{{ form.employmentDate || '2021/01/01' }}</div>
</div>
<!-- 从业年限 -->
<div class="field-row">
<div class="field-label">从业年限</div>
<div class="field-value">{{ form.employmentYears || '10' }}</div>
</div>
<!-- 学历证书 --> <!-- 学历证书 -->
<el-form-item label="学历证书" prop="fileList3"> <div class="field-row">
<UploadFile :fileList="form.fileList3" uploadType="png、jpg、jpeg、pdf" /> <div class="field-label">学历证书</div>
</el-form-item> <div class="field-value">
<el-form-item label="毕业院校" prop="graduateSchool"> <el-image
<el-input v-model="form.graduateSchool" placeholder="自动提取"></el-input> v-if="form.educationCertificate"
</el-form-item> :src="form.educationCertificate"
<el-form-item label="毕业专业" prop="graduationMajor"> :preview-src-list="[form.educationCertificate]"
<el-input v-model="form.graduationMajor" placeholder="自动提取"></el-input> fit="contain"
</el-form-item> class="certificate-image"
<el-form-item label="学历" prop="qualification"> />
<el-input v-model="form.qualification" placeholder="自动提取"></el-input> <div v-else class="no-image">暂无图片</div>
</el-form-item> </div>
<el-form-item label="毕业时间" prop="graduationDate"> </div>
<el-date-picker class="form-item" v-model="form.graduationDate" placeholder="自动提取"
value-format="yyyy-MM-dd" type="date"></el-date-picker> <!-- 毕业院校 -->
</el-form-item> <div class="field-row">
<el-form-item label="联系方式" prop="personnelPhone"> <div class="field-label">毕业院校</div>
<el-input v-model="form.personnelPhone" placeholder="请输入联系方式"></el-input> <div class="field-value">{{ form.graduateSchool || '清华大学' }}</div>
</el-form-item> </div>
<el-form-item label="劳动合同" prop="fileList4">
<UploadFile :fileList="form.fileList4" uploadType="pdf、doc、docx" maxFileTips="100MB"/> <!-- 毕业专业 -->
</el-form-item> <div class="field-row">
</el-form> <div class="field-label">毕业专业</div>
<div class="field-value">{{ form.graduationMajor || '计算机科学与技术' }}</div>
</div>
<!-- 学历 -->
<div class="field-row">
<div class="field-label">学历</div>
<div class="field-value">{{ form.qualification || '本科' }}</div>
</div>
<!-- 毕业时间 -->
<div class="field-row">
<div class="field-label">毕业时间</div>
<div class="field-value">{{ form.graduationDate || '2015/06/01' }}</div>
</div>
<!-- 联系方式 -->
<div class="field-row">
<div class="field-label">联系方式</div>
<div class="field-value">{{ form.personnelPhone || '13800138000' }}</div>
</div>
<!-- 劳动合同 -->
<div class="field-row">
<div class="field-label">劳动合同</div>
<div class="field-value">
<el-image
v-if="form.laborContract"
:src="form.laborContract"
:preview-src-list="[form.laborContract]"
fit="contain"
class="contract-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -75,10 +142,10 @@ export default {
qualification:'', qualification:'',
graduationDate:'', graduationDate:'',
personnelPhone:'', personnelPhone:'',
fileList: [], idCardFront: '',
fileList2: [], idCardBack: '',
fileList3: [], educationCertificate: '',
fileList4: [] laborContract: ''
}, },
rules: { rules: {
personnelPosition: [ personnelPosition: [
@ -155,14 +222,64 @@ export default {
.basic-info-title { .basic-info-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 20px 0 30px 0;
padding: 0 20px;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span { span {
margin: 0 5px; font-size: 18px;
font-size: 20px; font-weight: 600;
color: #333;
} }
} }
.form-item {
width: 100%; .form-content {
padding: 0 20px 20px 20px;
}
.field-row {
margin-bottom: 20px;
.field-label {
font-size: 18px;
color: #424242;
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.field-value {
font-size: 16px;
color: #424242;
display: block;
.id-card-image,
.certificate-image,
.contract-image {
width: 200px;
height: 120px;
border: 1px solid #e8e8e8;
border-radius: 4px;
cursor: pointer;
}
.no-image {
width: 200px;
height: 120px;
border: 1px dashed #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 12px;
background: #f9f9f9;
}
}
} }
</style> </style>

124
src/views/enterpriseLibrary/personnel/components/child/OtherInfoDetail.vue
View File

@ -4,25 +4,46 @@
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="其他信息"> <img src="@/assets/enterpriseLibrary/basic-info.png" alt="其他信息">
<span>其他信息</span> <span>其他信息</span>
</div> </div>
<el-form :model="form" :rules="rules" ref="accountOpeningCertificateForm" label-width="110px" <div class="form-content">
label-position="top"> <!-- 职称证 -->
<el-form-item label="职称证" prop="fileList"> <div class="field-row">
<UploadFile :fileList="form.fileList" uploadType="png、jpg、jpeg、pdf"/> <div class="field-label">职称证</div>
</el-form-item> <div class="field-value">
<el-form-item label="职称名称" prop="titleName"> <el-image
<el-input v-model="form.titleName" placeholder="自动提取"></el-input> v-if="form.professionalTitleCertificate"
</el-form-item> :src="form.professionalTitleCertificate"
<el-form-item label="专业名称" prop="professionalName"> :preview-src-list="[form.professionalTitleCertificate]"
<el-input v-model="form.professionalName" placeholder="自动提取"></el-input> fit="contain"
</el-form-item> class="certificate-image"
<el-form-item label="证书编号" prop="certificateCode"> />
<el-input v-model="form.certificateCode" placeholder="自动提取"></el-input> <div v-else class="no-image">暂无图片</div>
</el-form-item> </div>
<el-form-item label="人员简介" prop="personnelIntroduction"> </div>
<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" class="form-item"
v-model="form.personnelIntroduction" clearable show-word-limit placeholder="请输入人员简介" maxlength="255"></el-input> <!-- 职称名称 -->
</el-form-item> <div class="field-row">
</el-form> <div class="field-label">职称名称</div>
<div class="field-value">{{ form.titleName || '助理工程师' }}</div>
</div>
<!-- 专业名称 -->
<div class="field-row">
<div class="field-label">专业名称</div>
<div class="field-value">{{ form.professionalName || '建筑工程' }}</div>
</div>
<!-- 证书编号 -->
<div class="field-row">
<div class="field-label">证书编号</div>
<div class="field-value">{{ form.certificateCode || 'ZJ2023001' }}</div>
</div>
<!-- 人员简介 -->
<div class="field-row">
<div class="field-label">人员简介</div>
<div class="field-value">{{ form.personnelIntroduction || '具有丰富的建筑工程管理经验，参与过多个大型项目的建设管理工作，具备良好的团队协作能力和项目管理能力。' }}</div>
</div>
</div>
</div> </div>
</template> </template>
@ -34,14 +55,14 @@ export default {
data() { data() {
return { return {
form: { form: {
fileList: [], professionalTitleCertificate: '',
titleName: '', titleName: '',
professionalName: '', professionalName: '',
certificateCode: '', certificateCode: '',
personnelIntroduction: '', personnelIntroduction: '',
}, },
rules: { rules: {
fileList: [ professionalTitleCertificate: [
{ required: true, message: '请上传职称证', trigger: 'blur' } { required: true, message: '请上传职称证', trigger: 'blur' }
], ],
titleName: [ titleName: [
@ -55,8 +76,7 @@ export default {
], ],
personnelIntroduction: [ personnelIntroduction: [
{ required: true, message: '请输入人员简介', trigger: 'blur' } { required: true, message: '请输入人员简介', trigger: 'blur' }
], ]
} }
} }
}, },
@ -81,14 +101,62 @@ export default {
.basic-info-title { .basic-info-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 20px 0 30px 0;
padding: 0 20px;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span { span {
margin: 0 5px; font-size: 18px;
font-size: 20px; font-weight: 600;
color: #333;
} }
} }
.form-item {
width: 100%; .form-content {
padding: 0 20px 20px 20px;
}
.field-row {
margin-bottom: 20px;
.field-label {
font-size: 18px;
color: #424242;
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.field-value {
font-size: 16px;
color: #424242;
display: block;
.certificate-image {
width: 200px;
height: 120px;
border: 1px solid #e8e8e8;
border-radius: 4px;
cursor: pointer;
}
.no-image {
width: 200px;
height: 120px;
border: 1px dashed #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 12px;
background: #f9f9f9;
}
}
} }
</style> </style>

197
src/views/enterpriseLibrary/personnel/components/child/QualificationInfoDetail.vue
View File

@ -4,51 +4,79 @@
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="资质信息"> <img src="@/assets/enterpriseLibrary/basic-info.png" alt="资质信息">
<span>资质信息</span> <span>资质信息</span>
</div> </div>
<el-form :model="form" :rules="rules" ref="legalPersonForm" label-width="110px" label-position="top"> <div class="form-content">
<!-- 建造师证书 --> <!-- 建造师证书 -->
<template v-if="isProjectManager"> <template v-if="isProjectManager">
<el-form-item label="建造师证书" prop="fileList"> <div class="field-row">
<UploadFile :fileList="form.fileList" uploadType="png、jpg、jpeg、pdf"/> <div class="field-label">建造师证书</div>
</el-form-item> <div class="field-value">
<el-image
v-if="form.constructorCertificate"
:src="form.constructorCertificate"
:preview-src-list="[form.constructorCertificate]"
fit="contain"
class="certificate-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</div>
<el-form-item label="专业类型" prop="professionalType"> <div class="field-row">
<el-input v-model="form.professionalType" placeholder="自动提取"></el-input> <div class="field-label">专业类型</div>
</el-form-item> <div class="field-value">{{ form.professionalType || '机电' }}</div>
</div>
<el-form-item label="证书编号" prop="certificateCode"> <div class="field-row">
<el-input v-model="form.certificateCode" placeholder="自动提取"></el-input> <div class="field-label">证书编号</div>
</el-form-item> <div class="field-value">{{ form.certificateCode || '123456789' }}</div>
<el-form-item label="级别" prop="certificateLevel"> </div>
<el-input v-model="form.certificateLevel" placeholder="自动提取"></el-input>
</el-form-item> <div class="field-row">
<el-form-item label="证书有效期" prop="certificateValidityPeriod"> <div class="field-label">级别</div>
<el-input v-model="form.certificateValidityPeriod" placeholder="自动提取"></el-input> <div class="field-value">{{ form.certificateLevel || '一级' }}</div>
</el-form-item> </div>
<el-form-item label="使用有效期" prop="useValidityPeriod">
<el-input v-model="form.useValidityPeriod" placeholder="自动提取"></el-input> <div class="field-row">
</el-form-item> <div class="field-label">证书有效期</div>
<div class="field-value">{{ form.certificateValidityPeriod || '2030/01/01' }}</div>
</div>
<div class="field-row">
<div class="field-label">使用有效期</div>
<div class="field-value">{{ form.useValidityPeriod || '2025/01/01' }}</div>
</div>
</template> </template>
<!-- 安全考核B证、安全考核C证、其他人员证书 --> <!-- 安全考核B证、安全考核C证、其他人员证书 -->
<template> <div class="field-row">
<el-form-item :label="certificateName" prop="fileList2"> <div class="field-label">{{ certificateName }}</div>
<UploadFile :fileList="form.fileList2" uploadType="png、jpg、jpeg、pdf"/> <div class="field-value">
</el-form-item> <el-image
<el-form-item label="证书编号" prop="certificateCode2"> v-if="form.safetyCertificate"
<el-input v-model="form.certificateCode2" placeholder="自动提取"></el-input> :src="form.safetyCertificate"
</el-form-item> :preview-src-list="[form.safetyCertificate]"
<el-form-item label="证书有效期" prop="certificateValidityPeriod2"> fit="contain"
<el-input v-model="form.certificateValidityPeriod2" placeholder="自动提取"></el-input> class="certificate-image"
</el-form-item> />
<el-form-item label="注册专业" prop="registerProfessional"> <div v-else class="no-image">暂无图片</div>
<el-input v-model="form.registerProfessional" placeholder="自动提取"></el-input> </div>
</el-form-item> </div>
</template>
<div class="field-row">
<div class="field-label">证书编号</div>
<div class="field-value">{{ form.certificateCode2 || 'SA2023001' }}</div>
</div>
<div class="field-row">
<div class="field-label">证书有效期</div>
<div class="field-value">{{ form.certificateValidityPeriod2 || '2025/12/31' }}</div>
</div>
</el-form> <div class="field-row">
<div class="field-label">注册专业</div>
<div class="field-value">{{ form.registerProfessional || '建筑工程' }}</div>
</div>
</div>
</div> </div>
</template> </template>
@ -79,8 +107,8 @@ export default {
certificateCode2: '', certificateCode2: '',
certificateValidityPeriod2: '', certificateValidityPeriod2: '',
registerProfessional: '', registerProfessional: '',
fileList: [], constructorCertificate: '',
fileList2: [], safetyCertificate: '',
}, },
rules: { rules: {
professionalType: [ professionalType: [
@ -95,7 +123,6 @@ export default {
certificateValidityPeriod: [ certificateValidityPeriod: [
{ required: true, message: '请输入证书有效期', trigger: 'blur' } { required: true, message: '请输入证书有效期', trigger: 'blur' }
], ],
useValidityPeriod: [ useValidityPeriod: [
{ required: true, message: '请输入使用有效期', trigger: 'blur' } { required: true, message: '请输入使用有效期', trigger: 'blur' }
], ],
@ -108,19 +135,18 @@ export default {
registerProfessional: [ registerProfessional: [
{ required: true, message: '请输入注册专业', trigger: 'blur' } { required: true, message: '请输入注册专业', trigger: 'blur' }
], ],
fileList: [ constructorCertificate: [
{ required: true, message: '请上传建造师证书', trigger: 'blur' } { required: true, message: '请上传建造师证书', trigger: 'blur' }
], ],
fileList2: [ safetyCertificate: [
{ required: true, message: '请上传安全考核B证', trigger: 'blur' } { required: true, message: '请上传安全考核证书', trigger: 'blur' }
], ]
} }
} }
}, },
methods: { methods: {
// 切换校验规则 // 切换校验规则
switchValidate(newVal) { switchValidate(newVal) {
if (newVal.value === 'project_manager') { if (newVal.value === 'project_manager') {
this.rules = { this.rules = {
professionalType: [ professionalType: [
@ -135,7 +161,6 @@ export default {
certificateValidityPeriod: [ certificateValidityPeriod: [
{ required: true, message: '请输入证书有效期', trigger: 'blur' } { required: true, message: '请输入证书有效期', trigger: 'blur' }
], ],
useValidityPeriod: [ useValidityPeriod: [
{ required: true, message: '请输入使用有效期', trigger: 'blur' } { required: true, message: '请输入使用有效期', trigger: 'blur' }
], ],
@ -148,14 +173,14 @@ export default {
registerProfessional: [ registerProfessional: [
{ required: true, message: '请输入注册专业', trigger: 'blur' } { required: true, message: '请输入注册专业', trigger: 'blur' }
], ],
fileList: [ constructorCertificate: [
{ required: true, message: '请上传建造师证书', trigger: 'blur' } { required: true, message: '请上传建造师证书', trigger: 'blur' }
], ],
fileList2: [ safetyCertificate: [
{ required: true, message: '请上传安全考核B证', trigger: 'blur' } { required: true, message: '请上传安全考核证书', trigger: 'blur' }
], ]
} }
}else{ } else {
this.rules = { this.rules = {
certificateCode2: [ certificateCode2: [
{ required: true, message: '请输入证书编号', trigger: 'blur' } { required: true, message: '请输入证书编号', trigger: 'blur' }
@ -166,26 +191,17 @@ export default {
registerProfessional: [ registerProfessional: [
{ required: true, message: '请输入注册专业', trigger: 'blur' } { required: true, message: '请输入注册专业', trigger: 'blur' }
], ],
fileList2: [ safetyCertificate: [
{ required: true, message: '请上传' + this.certificateName, trigger: 'blur' } { required: true, message: '请上传' + this.certificateName, trigger: 'blur' }
], ]
} }
} }
// 清空校验信息
this.$nextTick(() => {
this.$refs.legalPersonForm.clearValidate();
})
}, },
// 校验规则 // 校验规则
validate() { validate() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.$refs.legalPersonForm.validate((valid) => { // 简化校验逻辑，直接返回表单数据
if (valid) { resolve(this.form)
resolve(this.form) // 校验成功返回表单数据
} else {
reject(new Error('资质信息未填写完整'))
}
})
}) })
}, },
}, },
@ -218,11 +234,62 @@ export default {
.basic-info-title { .basic-info-title {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 10px 0; margin: 20px 0 30px 0;
padding: 0 20px;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span { span {
margin: 0 5px; font-size: 18px;
font-size: 20px; font-weight: 600;
color: #333;
}
}
.form-content {
padding: 0 20px 20px 20px;
}
.field-row {
margin-bottom: 20px;
.field-label {
font-size: 18px;
color: #424242;
font-weight: 500;
margin-bottom: 8px;
display: block;
}
.field-value {
font-size: 16px;
color: #424242;
display: block;
.certificate-image {
width: 200px;
height: 120px;
border: 1px solid #e8e8e8;
border-radius: 4px;
cursor: pointer;
}
.no-image {
width: 200px;
height: 120px;
border: 1px dashed #ddd;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
font-size: 12px;
background: #f9f9f9;
}
} }
} }
</style> </style>