<template>
|
<el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
|
<div class="main_form">
|
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" :label-position="labelPosition">
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="姓名" prop="name">
|
<el-input v-model="form.name" :readonly="disable"></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="form.sex" :disabled="disable">
|
<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="code">
|
<el-input v-model="form.code" :readonly="disable"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="民族" prop="nationCode">
|
<el-select v-model="form.nationCode" placeholder="请选择" :disabled="disable" style="width: 100%">
|
<el-option
|
v-for="dict in dict.type.sys_nation_code"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="联系电话" prop="mobilePhone">
|
<el-input v-model="form.mobilePhone" :readonly="disable"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="最高学历" prop="eduLevel">
|
<el-select v-model="form.eduLevel" placeholder="请选择" :disabled="disable" style="width: 100%">
|
<el-option
|
v-for="dict in dict.type.sys_highest_education_code"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="证件照" prop="photoAttachment">
|
<el-upload
|
action=""
|
:disabled="disable"
|
:auto-upload="false"
|
:limit="1"
|
accept="image/*,.pdf"
|
:file-list="fileList"
|
list-type="picture-card"
|
:before-upload="beforeAvatarUpload"
|
:on-change="avatorChange"
|
:on-preview="handlePreview"
|
:on-exceed="overLimit"
|
:on-remove="handleRemove">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<template v-if="title == '查看人员'">
|
<el-row v-if="form.violationRegistrationVOS && form.violationRegistrationVOS.length>0">
|
<el-col :span="24">
|
<el-form-item label="违章记录">
|
<el-table :data="form.violationRegistrationVOS" border>
|
<el-table-column label="发生时间" align="center" prop="violationTime"/>
|
<el-table-column label="违章（时）所属单位" align="center" prop="dept"/>
|
<el-table-column label="作业类别/操作项目" align="center" prop="dept"/>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="form.cmStaffResumes && form.cmStaffResumes.length>0">
|
<el-col :span="24">
|
<el-form-item label="个人履历">
|
<el-table :data="form.cmStaffResumes" border>
|
<el-table-column label="时间" align="center">
|
<template #default="scope">
|
{{scope.row.startTime.substring(0,7) + '~' + scope.row.endTime.substring(0,7)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="单位" align="center" prop="unit" />
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="form.cmStaffQas && form.cmStaffQas.length>0">
|
<el-col :span="24">
|
<el-form-item label="资格证书">
|
<el-table :data="form.cmStaffQas" border>
|
<el-table-column label="证书名称" align="center" prop="name"/>
|
<el-table-column label="资格类型" align="center" prop="qualificationType" />
|
<el-table-column label="作业类别" align="center" prop="jobCategory" />
|
<el-table-column label="操作项目" align="center" prop="operationItems" />
|
<el-table-column label="人员" align="center" prop="staffId" />
|
<el-table-column label="有效期至" align="center" prop="expiredTime"/>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="form.cmStaffTrains && form.cmStaffTrains.length>0">
|
<el-col :span="24">
|
<el-form-item label="培训经历">
|
<el-table :data="form.cmStaffTrains" border>
|
<el-table-column label="培训时间" align="center" prop="startTime">
|
<template #default="scope">
|
{{scope.row.startTime.substring(0,7) + '~' + scope.row.endTime.substring(0,7)}}
|
</template>
|
</el-table-column>
|
<el-table-column label="培训单位" align="center" prop="unit" />
|
<el-table-column label="所属批次" align="center" prop="batch" />
|
<el-table-column label="科目" align="center" prop="subject" />
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row v-if="form.cmStaffExams && form.cmStaffExams.length>0">
|
<el-col :span="24">
|
<el-form-item label="考试经历">
|
<el-table :data="form.cmStaffExams" border>
|
<el-table-column label="考试时间" align="center" prop="examTime"/>
|
<el-table-column label="考试中心" align="center" prop="examCenter"/>
|
<el-table-column label="科目" align="center" prop="subject"/>
|
<el-table-column label="考试结果" align="center" prop="result">
|
<template #default="scope">
|
{{scope.row.result == 0 ? '通过' : '未通过'}}
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
</el-form>
|
<div style="width: 100%;padding-bottom: 30px;display: flex;justify-content: center">
|
<el-button @click="open = false">取消</el-button>
|
<el-button v-if="title == '查看人员'" type="primary" @click="open = false">确认</el-button>
|
<el-button v-else type="primary" @click="submit()">提交</el-button>
|
</div>
|
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { uploadFile,addPeople,editPeople } from '@/api/coalMine/people'
|
import { verifySimplePhone, verifyIdCard } from "@/utils/validate";
|
export default {
|
name: "peopleDialog",
|
dicts: ['sys_nation_code','sys_highest_education_code'],
|
data() {
|
var validatePass = (rule, value, callback) => {
|
if (this.fileList.length == 0) {
|
callback(new Error('请上传证件照'));
|
} else {
|
callback();
|
}
|
}
|
let validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifySimplePhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
let verifyId = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入身份证号'))
|
}else{
|
if(!verifyIdCard(value)){
|
callback(new Error('身份证号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
return {
|
labelPosition: 'right',
|
disable: false,
|
title: '新增人员',
|
open: false,
|
form:{
|
id: null,
|
name: '',
|
sex: null,
|
code: '',
|
nationCode: '',
|
mobilePhone: '',
|
eduLevel: '',
|
photoAttachment: null
|
},
|
fileList: [],
|
dialogImageUrl: '',
|
dialogVisible: false,
|
rules:{
|
name:[{ required: true, message: '请填写姓名', trigger: 'blur' }],
|
sex:[{ required: true, message: '请选择性别', trigger: 'blur' }],
|
code: [{ required: true, validator: verifyId, trigger: 'blur' }],
|
nationCode: [{ required: true, message: '请选择民族', trigger: 'blur' }],
|
mobilePhone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
|
eduLevel: [{ required: true, message: '请填写最高学历', trigger: 'blur' }],
|
photoAttachment: [{ required: true,validator: validatePass, trigger: 'blur' }]
|
},
|
};
|
},
|
created() {
|
const t = this
|
},
|
methods: {
|
openDialog(val,type){
|
const t = this
|
t.fileList = []
|
t.open = true
|
if(type == 'add'){
|
t.title = '新增人员'
|
t.disable = false
|
t.form = {
|
id: null,
|
name:'',
|
sex: null,
|
code: '',
|
nationCode: '',
|
mobilePhone:'',
|
eduLevel: '',
|
photoAttachment: null
|
}
|
}else{
|
if(type == 'edit'){
|
t.title = '编辑人员'
|
t.disable = false
|
if(val){
|
for(let i in val){
|
if(t.isValidKey(i,this.form)){
|
t.form[i] = val[i]
|
}
|
}
|
t.form.sex = Number(t.form.sex)
|
// 仅限单张图片处理
|
t.form.photoAttachment = val.photoAttachment.id
|
let file = {
|
name: val.photoAttachment.fileName,
|
url: process.env.VUE_APP_BASE_API + val.photoAttachment.fileUrl
|
}
|
t.fileList.push(file)
|
}
|
}else{
|
t.title = '查看人员'
|
t.disable = true
|
if(val){
|
for(let i in val){
|
if(t.isValidKey(i,this.form)){
|
t.form[i] = val[i]
|
}
|
}
|
t.form.sex = Number(t.form.sex)
|
t.form.violationRegistrationVOS = val.violationRegistrationVOS
|
t.form.cmStaffResumes = val.cmStaffResumes
|
t.form.cmStaffQas = val.cmStaffQas
|
t.form.cmStaffTrains = val.cmStaffTrains
|
t.form.cmStaffExams = val.cmStaffExams
|
// 仅限单张图片处理
|
t.form.photoAttachment = val.photoAttachment.id
|
let file = {
|
name: val.photoAttachment.fileName,
|
url: process.env.VUE_APP_BASE_API + val.photoAttachment.fileUrl
|
}
|
t.fileList.push(file)
|
}
|
console.log(t.form,'form')
|
}
|
}
|
},
|
isValidKey(key,obj){
|
return key in obj
|
},
|
|
avatorChange(file, fileList) {
|
this.fileList = fileList;
|
console.log(fileList,'list2')
|
},
|
|
overLimit(){
|
this.$message({
|
type: 'warning',
|
message: '超出文件上传数量'
|
});
|
},
|
handlePreview(file) {
|
this.dialogImageUrl = file.url;
|
this.dialogVisible = true;
|
},
|
beforeAvatarUpload(file) {
|
const isLt5M = file.size / 1024 / 1024 < 5;
|
if (!isLt5M) {
|
this.$message.error('上传头像图片大小不能超过 5MB!');
|
}
|
return isLt5M;
|
},
|
async submitUpload() {
|
// 仅限单张图片处理
|
const { fileList } = this;
|
if (fileList.length === 0 || !fileList.find((file)=>file.raw)) {
|
return;
|
}
|
const uploadPromises = fileList.map(async (file) => {
|
const formData = new FormData();
|
formData.append("file", file.raw);
|
formData.append("module", 'accountPath');
|
try {
|
const res = await uploadFile(formData);
|
if (res.code == 200) {
|
return res.data.id
|
} else {
|
this.$message.error('图片上传出错!');
|
return null;
|
}
|
} catch (error) {
|
console.error('上传文件出错:', error);
|
return null;
|
}
|
});
|
const uploadedFiles = await Promise.all(uploadPromises);
|
const validUploadedFiles = uploadedFiles.filter(file => file !== null);
|
if (validUploadedFiles.length > 0) {
|
// 返回数据，单张多张处理不同
|
this.form.photoAttachment = validUploadedFiles[0]
|
}
|
},
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
this.fileList = fileList
|
},
|
async submit(){
|
this.$refs["ruleForm"].validate(async(valid) =>{
|
if(valid) {
|
await this.submitUpload()
|
if(this.title == '新增人员'){
|
const {id,...data} = this.form
|
const res= await addPeople(data)
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
this.fileList = []
|
this.open = false
|
this.$emit('closeDialog')
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else{
|
const res= await editPeople(this.form)
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
this.fileList = []
|
this.open = false
|
this.$emit('closeDialog')
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}
|
}else{
|
this.$message({
|
type:'warning',
|
message:'请完善必填信息'
|
})
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.home {
|
blockquote {
|
padding: 10px 20px;
|
margin: 0 0 20px;
|
font-size: 17.5px;
|
border-left: 5px solid #eee;
|
}
|
hr {
|
margin-top: 20px;
|
margin-bottom: 20px;
|
border: 0;
|
border-top: 1px solid #eee;
|
}
|
.col-item {
|
margin-bottom: 20px;
|
}
|
|
ul {
|
padding: 0;
|
margin: 0;
|
}
|
|
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-size: 13px;
|
color: #676a6c;
|
overflow-x: hidden;
|
|
ul {
|
list-style-type: none;
|
}
|
|
h4 {
|
margin-top: 0px;
|
}
|
|
h2 {
|
margin-top: 10px;
|
font-size: 26px;
|
font-weight: 100;
|
}
|
|
p {
|
margin-top: 10px;
|
|
b {
|
font-weight: 700;
|
}
|
}
|
|
.update-log {
|
ol {
|
display: block;
|
list-style-type: decimal;
|
margin-block-start: 1em;
|
margin-block-end: 1em;
|
margin-inline-start: 0;
|
margin-inline-end: 0;
|
padding-inline-start: 40px;
|
}
|
}
|
}
|
.avatar-uploader .el-upload {
|
border: 1px dashed #d9d9d9;
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
}
|
.avatar-uploader .el-upload:hover {
|
border-color: #409EFF;
|
}
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
width: 178px;
|
height: 178px;
|
line-height: 178px;
|
text-align: center;
|
}
|
.avatar {
|
width: 178px;
|
height: 178px;
|
display: block;
|
}
|
</style>
|
