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="基本信息">
<span>基本信息</span>
</div>
<el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
<el-form-item label="人员职位" prop="personnelPosition">
<el-select class="form-item" v-model="form.personnelPosition" placeholder="请选择人员职位" @change="handlePersonnelPositionChange">
<el-option v-for="item in dict.type.personnel_position" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<div class="form-content">
<!-- 人员职位 -->
<div class="field-row">
<div class="field-label">人员职位</div>
<div class="field-value">{{ form.personnelPosition || '项目经理' }}</div>
</div>
<!-- 身份证人面像 -->
<el-form-item label="身份证人面像" prop="fileList">
<UploadFile :fileList="form.fileList" />
</el-form-item>
<div class="field-row">
<div class="field-label">身份证人面像</div>
<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">
<UploadFile :fileList="form.fileList2" />
</el-form-item>
<el-form-item label="人员姓名" prop="personnelName">
<el-input v-model="form.personnelName" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="入职时间" prop="employmentDate">
<el-date-picker class="form-item" v-model="form.employmentDate" placeholder="请选择入职时间"
value-format="yyyy-MM-dd" type="date"></el-date-picker>
</el-form-item>
<el-form-item label="从业年限" prop="employmentYears">
<el-input min="0" max="60" type="number" v-model="form.employmentYears" placeholder="请输入从业年限"></el-input>
</el-form-item>
<div class="field-row">
<div class="field-label">身份证国徽面</div>
<div class="field-value">
<el-image
v-if="form.idCardBack"
:src="form.idCardBack"
:preview-src-list="[form.idCardBack]"
fit="contain"
class="id-card-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</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">
<UploadFile :fileList="form.fileList3" uploadType="png、jpg、jpeg、pdf" />
</el-form-item>
<el-form-item label="毕业院校" prop="graduateSchool">
<el-input v-model="form.graduateSchool" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="毕业专业" prop="graduationMajor">
<el-input v-model="form.graduationMajor" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="学历" prop="qualification">
<el-input v-model="form.qualification" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="毕业时间" prop="graduationDate">
<el-date-picker class="form-item" v-model="form.graduationDate" placeholder="自动提取"
value-format="yyyy-MM-dd" type="date"></el-date-picker>
</el-form-item>
<el-form-item label="联系方式" prop="personnelPhone">
<el-input v-model="form.personnelPhone" placeholder="请输入联系方式"></el-input>
</el-form-item>
<el-form-item label="劳动合同" prop="fileList4">
<UploadFile :fileList="form.fileList4" uploadType="pdf、doc、docx" maxFileTips="100MB"/>
</el-form-item>
</el-form>
<div class="field-row">
<div class="field-label">学历证书</div>
<div class="field-value">
<el-image
v-if="form.educationCertificate"
:src="form.educationCertificate"
:preview-src-list="[form.educationCertificate]"
fit="contain"
class="certificate-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</div>
<!-- 毕业院校 -->
<div class="field-row">
<div class="field-label">毕业院校</div>
<div class="field-value">{{ form.graduateSchool || '清华大学' }}</div>
</div>
<!-- 毕业专业 -->
<div class="field-row">
<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>
</template>
@ -75,10 +142,10 @@ export default {
qualification:'',
graduationDate:'',
personnelPhone:'',
fileList: [],
fileList2: [],
fileList3: [],
fileList4: []
idCardFront: '',
idCardBack: '',
educationCertificate: '',
laborContract: ''
},
rules: {
personnelPosition: [
@ -155,14 +222,64 @@ export default {
.basic-info-title {
display: flex;
align-items: center;
margin: 10px 0;
margin: 20px 0 30px 0;
padding: 0 20px;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span {
margin: 0 5px;
font-size: 20px;
font-size: 18px;
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;
.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;
}
}
.form-item {
width: 100%;
}
</style>

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

@ -4,25 +4,46 @@
<img src="@/assets/enterpriseLibrary/basic-info.png" alt="其他信息">
<span>其他信息</span>
</div>
<el-form :model="form" :rules="rules" ref="accountOpeningCertificateForm" label-width="110px"
label-position="top">
<el-form-item label="职称证" prop="fileList">
<UploadFile :fileList="form.fileList" uploadType="png、jpg、jpeg、pdf"/>
</el-form-item>
<el-form-item label="职称名称" prop="titleName">
<el-input v-model="form.titleName" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="专业名称" prop="professionalName">
<el-input v-model="form.professionalName" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="证书编号" prop="certificateCode">
<el-input v-model="form.certificateCode" placeholder="自动提取"></el-input>
</el-form-item>
<el-form-item label="人员简介" prop="personnelIntroduction">
<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>
</el-form>
<div class="form-content">
<!-- 职称证 -->
<div class="field-row">
<div class="field-label">职称证</div>
<div class="field-value">
<el-image
v-if="form.professionalTitleCertificate"
:src="form.professionalTitleCertificate"
:preview-src-list="[form.professionalTitleCertificate]"
fit="contain"
class="certificate-image"
/>
<div v-else class="no-image">暂无图片</div>
</div>
</div>
<!-- 职称名称 -->
<div class="field-row">
<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>
</template>
@ -34,14 +55,14 @@ export default {
data() {
return {
form: {
fileList: [],
professionalTitleCertificate: '',
titleName: '',
professionalName: '',
certificateCode: '',
personnelIntroduction: '',
},
rules: {
fileList: [
professionalTitleCertificate: [
{ required: true, message: '请上传职称证', trigger: 'blur' }
],
titleName: [
@ -55,8 +76,7 @@ export default {
],
personnelIntroduction: [
{ required: true, message: '请输入人员简介', trigger: 'blur' }
],
]
}
}
},
@ -81,14 +101,62 @@ export default {
.basic-info-title {
display: flex;
align-items: center;
margin: 10px 0;
margin: 20px 0 30px 0;
padding: 0 20px;
img {
width: 24px;
height: 24px;
margin-right: 8px;
}
span {
margin: 0 5px;
font-size: 20px;
font-size: 18px;
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;
}
}
.form-item {
width: 100%;
}
</style>

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

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