人员库
This commit is contained in:
parent
e93b815634
commit
b0e69564a7
|
|
@ -83,7 +83,7 @@ export default {
|
|||
const item = foundItem ? {
|
||||
fileUploadType: foundItem.value,
|
||||
fields_json: foundItem.raw.remark,
|
||||
suffix: 'mainDatabase'
|
||||
suffix: 'main_database'
|
||||
} : null;
|
||||
|
||||
this.fileUploadList.push(item)
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ export default {
|
|||
const item = foundItem ? {
|
||||
fileUploadType: foundItem.value,
|
||||
fields_json: foundItem.raw.remark,
|
||||
suffix: 'mainDatabase'
|
||||
suffix: 'main_database'
|
||||
} : null;
|
||||
|
||||
this.fileUploadList.push(item)
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ export default {
|
|||
const item = foundItem ? {
|
||||
fileUploadType: foundItem.value,
|
||||
fields_json: foundItem.raw.remark,
|
||||
suffix: 'mainDatabase'
|
||||
suffix: 'main_database'
|
||||
} : null;
|
||||
|
||||
this.fileUploadList.push(item)
|
||||
|
|
|
|||
|
|
@ -221,7 +221,6 @@ export default {
|
|||
this.$router.push({
|
||||
name: 'EnterpriseKnowledge',
|
||||
query: {
|
||||
type: encryptWithSM4('knowledge'),
|
||||
enterpriseId: encryptWithSM4(enterprise.enterpriseId + '' ?? '0'),
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,25 @@
|
|||
<!-- 新增人员表单 -->
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container" :class="{ 'no-pointer-events': showUploadAnimation || showSaveAnimation }">
|
||||
<!-- 全局上传动画 -->
|
||||
<div v-if="showUploadAnimation" class="global-upload-animation">
|
||||
<div class="animation-mask"></div>
|
||||
<div class="animation-content">
|
||||
<div class="spinner"></div>
|
||||
<div class="animation-text">{{ animationText }}</div>
|
||||
<div class="animation-subtext">正在处理文件，请稍候...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存动画 -->
|
||||
<div v-if="showSaveAnimation" class="global-upload-animation">
|
||||
<div class="animation-mask"></div>
|
||||
<div class="animation-content">
|
||||
<div class="spinner"></div>
|
||||
<div class="animation-text">数据上传中</div>
|
||||
<div class="animation-subtext">请稍后，正在保存数据...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-header">
|
||||
<el-button class="reset-btn" @click="handleClose()">返回</el-button>
|
||||
<el-button class="search-btn" @click="handleSave()">保存</el-button>
|
||||
|
|
@ -24,7 +43,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { decryptWithSM4 } from '@/utils/sm'
|
||||
import { encryptWithSM4,decryptWithSM4 } from '@/utils/sm'
|
||||
import BasicInfoPersonnel from './child/BasicInfo.vue'
|
||||
import QualificationInfoPersonnel from './child/QualificationInfo.vue'
|
||||
import OtherInfoPersonnel from './child/OtherInfo.vue'
|
||||
|
|
@ -37,20 +56,31 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
id: decryptWithSM4(this.$route.query.id),
|
||||
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId),
|
||||
personnelId: decryptWithSM4(this.$route.query.personnelId),
|
||||
type: decryptWithSM4(this.$route.query.type),
|
||||
// 人员职位
|
||||
// 默认人员职位为项目经理
|
||||
personnelPosition: {
|
||||
label: '项目经理',
|
||||
value: 'project_manager',
|
||||
qualification:'建造师证书、安全考核B证'
|
||||
},
|
||||
showUploadAnimation: false,
|
||||
showSaveAnimation: false, // 新增：保存动画状态
|
||||
uploadQueue: 0, // 上传队列计数器
|
||||
animationText: '识别中',
|
||||
isSaving: false, // 新增：保存按钮loading状态
|
||||
detailData: {} // 详情数据
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 返回
|
||||
handleClose() {
|
||||
const obj = { path: "/enterpriseLibrary/enterprise" }
|
||||
const obj = { path: "/personnel/index",
|
||||
query: {
|
||||
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
||||
}
|
||||
}
|
||||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
// 人员职位
|
||||
|
|
@ -84,7 +114,43 @@ export default {
|
|||
// console.error('表单校验失败:', error)
|
||||
this.$message.error(error.message || '请完善表单信息')
|
||||
}
|
||||
},
|
||||
// 开始上传
|
||||
handleStartUpload(data) {
|
||||
this.animationText = data
|
||||
this.uploadQueue++
|
||||
this.showUploadAnimation = true
|
||||
},
|
||||
// 结束上传
|
||||
handleEndUpload(data) {
|
||||
if (this.uploadQueue > 0) {
|
||||
this.uploadQueue--
|
||||
}
|
||||
|
||||
// 如果队列为空，隐藏动画
|
||||
if (this.uploadQueue === 0) {
|
||||
this.showUploadAnimation = false
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 监听上传开始事件
|
||||
this.$bus.$on('startUpload', this.handleStartUpload)
|
||||
|
||||
// 监听上传结束事件
|
||||
this.$bus.$on('endUpload', this.handleEndUpload)
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 移除所有事件监听
|
||||
this.$bus.$off('startUpload', this.handleStartUpload)
|
||||
this.$bus.$off('endUpload', this.handleEndUpload)
|
||||
|
||||
// 重置状态
|
||||
this.showUploadAnimation = false
|
||||
this.showSaveAnimation = false
|
||||
this.uploadQueue = 0
|
||||
this.animationText = '识别中'
|
||||
this.isSaving = false
|
||||
},
|
||||
computed: {
|
||||
// 是否为项目总工
|
||||
|
|
@ -102,6 +168,104 @@ export default {
|
|||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
// 当显示动画时，禁用页面点击
|
||||
&.no-pointer-events {
|
||||
pointer-events: none;
|
||||
|
||||
// 子元素也继承禁用点击
|
||||
* {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 全局上传动画样式
|
||||
.global-upload-animation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
// 动画区域本身可以有点击事件（如果需要）
|
||||
pointer-events: auto;
|
||||
|
||||
.animation-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.6); // 添加半透明背景
|
||||
backdrop-filter: blur(4px);
|
||||
|
||||
// 遮罩层阻止点击
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.animation-content {
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
||||
padding: 40px 50px;
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 10px 40px rgba(31, 114, 234, 0.15),
|
||||
0 0 0 1px rgba(31, 114, 234, 0.1);
|
||||
min-width: 280px;
|
||||
animation: slideInUp 0.3s ease-out;
|
||||
|
||||
// 动画内容可以有点击事件
|
||||
pointer-events: auto;
|
||||
|
||||
.spinner {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid #f3f7ff;
|
||||
border-top: 4px solid #1F72EA;
|
||||
border-radius: 50%;
|
||||
animation: spin 1.2s linear infinite;
|
||||
margin: 0 auto 20px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border: 4px solid transparent;
|
||||
border-top: 4px solid #4A8BFF;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-text {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #1F72EA;
|
||||
margin-bottom: 8px;
|
||||
background: linear-gradient(135deg, #1F72EA 0%, #4A8BFF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.animation-subtext {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-body {
|
||||
|
|
@ -122,14 +286,12 @@ export default {
|
|||
border-radius: 16px 16px 16px 16px;
|
||||
min-height: 600px;
|
||||
box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
|
||||
// border: 1px solid #e8f4ff;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -153,6 +315,12 @@ export default {
|
|||
background: #4A8BFF;
|
||||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||||
}
|
||||
|
||||
// 当按钮处于loading状态时的样式
|
||||
&.is-loading {
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
|
|
@ -172,4 +340,27 @@ export default {
|
|||
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px) scale(0.9);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,47 +6,60 @@
|
|||
</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 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>
|
||||
<!-- 身份证人面像 -->
|
||||
<el-form-item label="身份证人面像" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" />
|
||||
<UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule" @del-file="handleDelFile"
|
||||
@file-change="handleFileChange" type="face_id_card_portrait" />
|
||||
</el-form-item>
|
||||
<!-- 身份证国徽面 -->
|
||||
<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-input v-model.trim="form.personnelName" placeholder="自动提取" clearable show-word-limit
|
||||
maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号码" prop="personnelIdCard">
|
||||
<el-input v-model.trim="form.personnelIdCard" placeholder="自动提取" clearable show-word-limit
|
||||
maxlength="18"></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-input min="0" max="60" type="number" v-model="form.employmentYears"
|
||||
placeholder="请输入从业年限"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 学历证书 -->
|
||||
<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-input v-model.trim="form.graduateSchool" placeholder="自动提取" clearable show-word-limit
|
||||
maxlength="64"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="毕业专业" prop="graduationMajor">
|
||||
<el-input v-model="form.graduationMajor" placeholder="自动提取"></el-input>
|
||||
<el-input v-model.trim="form.graduationMajor" placeholder="自动提取" clearable show-word-limit
|
||||
maxlength="64"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="学历" prop="qualification">
|
||||
<el-input v-model="form.qualification" placeholder="自动提取"></el-input>
|
||||
<el-input v-model.trim="form.qualification" placeholder="自动提取" clearable show-word-limit
|
||||
maxlength="32"></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-input v-model.trim="form.personnelPhone" placeholder="请输入联系方式" clearable show-word-limit
|
||||
maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="劳动合同" prop="fileList4">
|
||||
<UploadFile :fileList="form.fileList4" uploadType="pdf、doc、docx" maxFileTips="100MB" />
|
||||
|
|
@ -59,10 +72,16 @@
|
|||
import UploadFile from '@/views/common/UploadFile.vue'
|
||||
export default {
|
||||
name: 'BasicInfoPersonnel',
|
||||
dicts: ['personnel_position'],
|
||||
dicts: ['personnel_position', 'identification_tag'],
|
||||
components: {
|
||||
UploadFile
|
||||
},
|
||||
props: {
|
||||
detailData: {
|
||||
type: Object,
|
||||
default: () => { }
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
|
|
@ -75,11 +94,20 @@ export default {
|
|||
qualification: '',
|
||||
graduationDate: '',
|
||||
personnelPhone: '',
|
||||
personnelIdCard: '',
|
||||
fileList: [],
|
||||
fileList2: [],
|
||||
fileList3: [],
|
||||
fileList4: []
|
||||
},
|
||||
// OCR 识别规则
|
||||
ocrRuleList: ['face_id_card_portrait'],
|
||||
fileUploadList: [],
|
||||
// 根据返回的chat_res对象结构修改映射关系
|
||||
ocrResultParams: {
|
||||
"姓名": "personnelName",
|
||||
"公民身份号码": "personnelIdCard",
|
||||
},
|
||||
rules: {
|
||||
personnelPosition: [
|
||||
{ required: true, message: '请选择人员职位', trigger: 'blur' }
|
||||
|
|
@ -87,6 +115,9 @@ export default {
|
|||
personnelName: [
|
||||
{ required: true, message: '请输入人员姓名', trigger: 'blur' }
|
||||
],
|
||||
personnelIdCard: [
|
||||
{ required: true, message: '请输入身份证号码', trigger: 'blur' }
|
||||
],
|
||||
employmentDate: [
|
||||
{ required: true, message: '请选择入职时间', trigger: 'change' }
|
||||
],
|
||||
|
|
@ -146,7 +177,65 @@ export default {
|
|||
qualification: data.raw.remark
|
||||
}
|
||||
this.$emit('handlePersonnelPosition', obj);
|
||||
},
|
||||
// ocr文件识别规则
|
||||
ocrRule(type) {
|
||||
const foundItem = this.dict.type.identification_tag.find(item => item.value === type);
|
||||
const item = foundItem ? {
|
||||
fileUploadType: foundItem.value,
|
||||
fields_json: foundItem.raw.remark,
|
||||
suffix: 'personnel_database'
|
||||
} : null;
|
||||
|
||||
this.fileUploadList.push(item)
|
||||
},
|
||||
// 添加ocr文件识别规则
|
||||
addOcrRule() {
|
||||
this.ocrRuleList.forEach(item => {
|
||||
this.ocrRule(item)
|
||||
})
|
||||
},
|
||||
// 文件变化
|
||||
handleFileChange(file, type) {
|
||||
|
||||
if (file instanceof Array && file.length > 0 && file[0].response) {
|
||||
const response = file[0].response;
|
||||
if (response.ocrResult && response.ocrResult.status_code === 200) {
|
||||
// ocr识别成功
|
||||
const chat_res = response.ocrResult.data?.chat_res;
|
||||
if (chat_res && typeof chat_res === 'object') {
|
||||
// 直接遍历chat_res对象的属性
|
||||
Object.keys(chat_res).forEach(key => {
|
||||
const formField = this.ocrResultParams[key];
|
||||
if (formField && chat_res[key]) {
|
||||
this.form[formField] = chat_res[key];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
if (type == 'face_id_card_portrait') {
|
||||
this.form.fileList = file;
|
||||
this.$refs.basicInfoForm.validateField(['personnelName', 'personnelIdCard']);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
// 文件删除时触发
|
||||
handleDelFile(file) {
|
||||
console.log(file);
|
||||
this.form.delFileList.push(file.response.fileRes.uploadPath || file.filePath);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 监听字典数据加载完成
|
||||
'dict.type.identification_tag': {
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
this.addOcrRule();
|
||||
}
|
||||
},
|
||||
immediate: true // 立即执行一次
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -162,6 +251,7 @@ export default {
|
|||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,12 @@ export default {
|
|||
|
||||
// 返回上一页
|
||||
handleBack() {
|
||||
const obj = { path: "/enterpriseKnowledge/index" }
|
||||
const obj = {
|
||||
path: "/enterpriseKnowledge/index",
|
||||
query: {
|
||||
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
||||
}
|
||||
}
|
||||
this.$tab.closeOpenPage(obj)
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue