<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="200px" :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="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="jobTitle">
|
<el-input v-model="form.jobTitle" :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="请选择" style="width: 100%" :disabled="disable">
|
<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="expiredTime">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.expiredTime"
|
value-format="yyyy-MM-dd"
|
type="date"
|
:disabled="disable"
|
placeholder="选择日期">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="在职情况" prop="status">
|
<el-radio-group v-model="form.status" :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="描述">
|
<el-input v-model="form.description" type="textarea" :autosize="{ minRows: 2}" :readonly="disable"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="证件照" prop="photoAttachment">
|
<el-upload
|
:disabled="disable"
|
action="#"
|
multiple
|
:limit="1"
|
:on-exceed="overLimit"
|
:auto-upload="false"
|
accept="image/*,.pdf"
|
:file-list="resumeList"
|
list-type="picture-card"
|
:before-upload="beforeAvatarUpload"
|
:on-change="resumeChange"
|
:on-preview="handlePreview"
|
:on-remove="(file,fileList)=>handleRemove(file,fileList,'证件照')">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="资质" prop="qaAttachment">
|
<el-upload
|
:disabled="disable"
|
action=""
|
multiple
|
:limit="1"
|
:on-exceed="overLimit"
|
:auto-upload="false"
|
accept="image/*,.pdf"
|
list-type="picture-card"
|
:file-list="inventionList"
|
:before-upload="beforeAvatarUpload"
|
:on-change="inventChange"
|
:on-preview="handlePreview"
|
:on-remove="(file,fileList)=>handleRemove(file,fileList,'资质')">
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="工种详情" prop="operateTypes">
|
<el-table :data="form.operateTypes" border>
|
<el-table-column label="序号" type="index" align="center"/>
|
<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" class-name="small-padding fixed-width" v-if="disable == false">
|
<template #default="scope">
|
<!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="openEdit(scope.row,'edit')">编辑</el-button>-->
|
<el-button size="mini" type="text" icon="el-icon-delete" @click="deleteItem(scope.index)" v-hasPermi="['system:experts:remove']">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-button v-if="disable == false" @click="openEdit({},'add')" style="margin-top: 15px">新增</el-button>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div style="width: 100%;padding-bottom: 30px;display: flex;justify-content: center" v-if="disable == false">
|
<el-button type="primary" @click="submit()">提交</el-button>
|
</div>
|
<el-dialog :visible.sync="dialogVisible" append-to-body>
|
<img width="100%" :src="dialogImageUrl" alt="">
|
</el-dialog>
|
<el-dialog :title="dialogTitle" :visible.sync="addVisible" width="50%" append-to-body>
|
<el-form :model="addForm" :rules="addRules" ref="addRuleForm" label-width="200px">
|
<el-row>
|
<el-col :span="20">
|
<el-form-item label="资格类型" prop="operate">
|
<el-cascader
|
v-model="addForm.operate"
|
:options="typeList"
|
style="width: 100%"
|
:props="{ expandTrigger: 'hover', value: 'id',label: 'name'}"></el-cascader>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div style="width: 100%;padding-bottom: 30px;display: flex;justify-content: center">
|
<el-button type="primary" @click="submitAdd()">提交</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { verifySimplePhone, verifyIdCard } from "@/utils/validate";
|
import {getOperatePage} from "@/api/coalMine/operateType";
|
import {addExaminer, editExaminer, uploadFile} from "@/api/coalMine/teacher";
|
export default {
|
name: "teacherDialog",
|
dicts: ['sys_highest_education_code'],
|
data() {
|
// let validateTypes = (rule, value, callback) => {
|
// if (this.form.operateTypes.length == 0) {
|
// callback(new Error('请添加工种详情'));
|
// } else {
|
// callback();
|
// }
|
// }
|
let validateResume = (rule, value, callback) => {
|
if (this.resumeList.length == 0) {
|
callback(new Error('请上传证件照'));
|
} else {
|
callback();
|
}
|
}
|
let validateCert = (rule, value, callback) => {
|
if (this.inventionList.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 {
|
title: '新增考评员',
|
open: false,
|
disable: false,
|
labelPosition: 'right',
|
form:{
|
id: null,
|
isCm: '1',
|
name:'',
|
sex:'',
|
code: '',
|
mobilePhone: '',
|
jobTitle: '',
|
eduLevel: '',
|
expiredTime: '',
|
status: '',
|
operateTypes: [],
|
photoAttachment: null,
|
qaAttachment: null,
|
description: '',
|
},
|
resumeList: [],
|
inventionList: [],
|
dialogImageUrl: '',
|
dialogVisible: false,
|
dialogTitle: '新增',
|
addVisible: false,
|
addForm: {
|
operate: [],
|
qualificationType: '',
|
jobCategory: '',
|
operationItems: '',
|
operateTypeId: null
|
},
|
typeList: [],
|
rules:{
|
name:[{ required: true, message: '请填写姓名', trigger: 'blur'}],
|
sex:[{ required: true, message: '请选择性别', trigger: 'blur'}],
|
code:[{ required: true, validator: verifyId, trigger: 'blur' }],
|
mobilePhone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
|
// code:[{ required: true, message: '请填写身份证号', trigger: 'blur'}],
|
// mobilePhone:[{ required: true, message: '请填写联系方式', trigger: 'blur'}],
|
jobTitle: [{ required: true, message: '请填写职称', trigger: 'blur'}],
|
eduLevel: [{ required: true, message: '请选择最高学历', trigger: 'blur'}],
|
expiredTime: [{ required: true, message: '请选择到期时间', trigger: 'blur'}],
|
status: [{ required: true, message: '请选择在岗情况', trigger: 'blur'}],
|
// operateTypes: [{ required: true,validator: validateTypes, trigger: 'blur' }],
|
photoAttachment: [{ required: true,validator: validateResume, trigger: 'blur'}],
|
qaAttachment: [{ required: true,validator: validateCert, trigger: 'blur'}]
|
},
|
addRules:{
|
operate:[{ required: true, message: '请选择', trigger: 'blur' }]
|
}
|
};
|
},
|
created() {
|
const t = this
|
},
|
methods: {
|
openDialog(val,type){
|
this.resumeList = []
|
this.inventionList = []
|
if(type == 'add'){
|
this.title = '新增考评员'
|
this.disable = false
|
this.form = {
|
id: null,
|
isCm: '1',
|
name:'',
|
sex:'',
|
code: '',
|
mobilePhone: '',
|
jobTitle: '',
|
eduLevel: '',
|
expiredTime: '',
|
status: '',
|
operateTypes: [],
|
photoAttachment: null,
|
qaAttachment: null,
|
description: '',
|
}
|
}else{
|
if(type == 'edit'){
|
this.title = '编辑考评员'
|
this.disable = false
|
}else{
|
this.title = '查看考评员'
|
this.disable = true
|
}
|
if(val){
|
for(let i in val){
|
if(this.isValidKey(i,this.form)){
|
this.form[i] = val[i]
|
}
|
}
|
}
|
this.form.sex = Number(this.form.sex)
|
// 仅限单张图片处理
|
this.form.photoAttachment = val.photoAttachment.id
|
this.form.qaAttachment = val.qaAttachment.id
|
this.resumeList.push({
|
name: val.photoAttachment.fileName,
|
url: process.env.VUE_APP_BASE_API + val.photoAttachment.fileUrl
|
})
|
this.inventionList.push({
|
name: val.qaAttachment.fileName,
|
url: process.env.VUE_APP_BASE_API + val.qaAttachment.fileUrl
|
})
|
if(!this.form.operateTypes){
|
this.form.operateTypes = []
|
}
|
console.log(this.form,'form')
|
}
|
this.open = true
|
},
|
|
isValidKey(key,obj){
|
return key in obj
|
},
|
|
openEdit(data,type){
|
this.getList()
|
if(type == 'add'){
|
this.dialogTitle = '新增'
|
this.addVisible = true
|
this.addForm = {
|
operate: [],
|
qualificationType: '',
|
jobCategory: '',
|
operationItems: '',
|
operateTypeId: null
|
}
|
}else{
|
|
}
|
},
|
async submitUpload() {
|
const { resumeList, inventionList, form } = this;
|
const uploadAndCollect = async (fileList, type) => {
|
if (fileList.length > 0 && fileList.find((file)=>file.raw)) {
|
for (const file of fileList) {
|
const formData = new FormData();
|
formData.append("file", file.raw);
|
formData.append("module", 'accountPath');
|
try {
|
const res = await uploadFile(formData);
|
if (res.code === 200) {
|
if (type === '证件照') {
|
form.photoAttachment = res.data.id;
|
}
|
if (type === '资质') {
|
form.qaAttachment = res.data.id;
|
}
|
} else {
|
this.$message.error('图片上传出错!');
|
}
|
} catch (error) {
|
this.$message.error('图片上传出错!');
|
}
|
}
|
}else{
|
return
|
}
|
};
|
const uploadPromises = [
|
uploadAndCollect(resumeList, '证件照'),
|
uploadAndCollect(inventionList, '资质')
|
];
|
try {
|
await Promise.all(uploadPromises);
|
console.log(form, 'form1');
|
} catch (error) {
|
console.error('上传出错:', error);
|
}
|
},
|
|
async submit(){
|
this.$refs["ruleForm"].validate(async(valid) =>{
|
if(valid) {
|
await this.submitUpload()
|
if(this.title == '新增考评员'){
|
const {id,...data} = this.form
|
const res= await addExaminer(data)
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
this.resumeList = []
|
this.inventionList = []
|
this.open = false
|
this.$emit('closeDialog')
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else{
|
const res= await editExaminer(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:'请完善必填信息'
|
})
|
}
|
})
|
},
|
deleteItem(index){
|
this.form.operateTypes.splice(index,1);
|
},
|
async getList() {
|
this.loading = true;
|
const res = await getOperatePage({name: ''})
|
if(res.code == 200){
|
this.typeList = this.handleTree(res.data, "id");
|
}else{
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
this.loading = false;
|
},
|
|
resumeChange(file, fileList) {
|
this.resumeList = fileList;
|
},
|
inventChange(file, fileList){
|
this.inventionList = fileList;
|
},
|
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;
|
},
|
|
handleRemove(file,fileList,type) {
|
if(type == '证件照'){
|
this.resumeList = fileList
|
}else{
|
this.inventionList = fileList
|
}
|
},
|
async submitAdd(){
|
this.$refs["addRuleForm"].validate(async(valid) =>{
|
if(valid) {
|
if(this.addForm.operate.length == 2){
|
this.addForm.qualificationType = this.findNameById(this.typeList,this.addForm.operate[0])
|
this.addForm.jobCategory = this.findNameById(this.typeList,this.addForm.operate[1])
|
this.addForm.operateTypeId = this.addForm.operate[1]
|
}
|
if(this.addForm.operate.length == 3){
|
this.addForm.qualificationType = this.findNameById(this.typeList,this.addForm.operate[0])
|
this.addForm.jobCategory = this.findNameById(this.typeList,this.addForm.operate[1])
|
this.addForm.operationItems = this.findNameById(this.typeList,this.addForm.operate[2])
|
this.addForm.operateTypeId = this.addForm.operate[2]
|
}
|
const {operate,...obj} = this.addForm
|
this.form.operateTypes.push(obj)
|
this.addVisible = false
|
}else{
|
this.$message({
|
type:'warning',
|
message:'请完善必填信息'
|
})
|
}
|
})
|
},
|
findNameById(data,id){
|
for(const node of data){
|
if(node.id == id){
|
return node.name
|
}
|
if(node.children){
|
const foundName = this.findNameById(node.children,id)
|
if(foundName){
|
return foundName
|
}
|
}
|
}
|
return null
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.home {
|
.main-title{
|
font-size: 24px;
|
font-weight: bolder;
|
text-align: center;
|
margin-bottom: 20px;
|
color: #333;
|
}
|
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>
|
