<template>
|
<div class="system-menu-dialog-container">
|
<el-dialog :title="personDialogState.title" v-model="personDialogState.personDialogVisible" :close-on-click-modal="false" width="600px">
|
<el-form ref="PersonFormRef" :rules="personDialogState.personFormRules" :model="personDialogState.personForm" size="default" label-width="120px">
|
<el-row :gutter="35">
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="人员名称" prop="personName">
|
<el-input v-model="personDialogState.personForm.personName" placeholder="人员名称" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="人员年龄" prop="personAge">
|
<el-input @input="onVerifiyNumberInteger($event, 'age')" v-model="personDialogState.personForm.personAge" placeholder="人员年龄" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="人员性别" prop="personGender">
|
<el-select v-model="personDialogState.personForm.personGender" placeholder="人员性别" clearable class="input-length">
|
<el-option v-for="item in personDialogState.personGenderList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="专业" prop="personMajor">
|
<el-input v-model="personDialogState.personForm.personMajor" placeholder="专业" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="部门名称" prop="depName">
|
<el-input v-model="personDialogState.personForm.depName" placeholder="部门名称" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="手机号" prop="phone">
|
<el-input @input="onVerifiyNumberInteger($event, 'phone')" v-model="personDialogState.personForm.phone" placeholder="手机号" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="相关资质" prop="aptitude">
|
<el-input v-model="personDialogState.personForm.aptitude" placeholder="相关资质" clearable class="input-length"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
<el-form-item label="培训情况" prop="training">
|
<el-select v-model="personDialogState.personForm.training" placeholder="培训情况" clearable class="input-length">
|
<el-option v-for="item in personDialogState.trainingList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="personDialogState.personDialogVisible = !personDialogState.personDialogVisible" size="default">取 消</el-button>
|
<el-button type="primary" @click="onSubmitPerson" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { reactive, ref } from "vue";
|
import {useMenuApi} from "/@/api/systemManage/menu";
|
import {ElMessage} from "element-plus";
|
import {personApi} from "/@/api/basic/person";
|
import { verifiyNumberInteger } from '../../../../utils/toolsValidate'
|
|
const PersonFormRef = ref()
|
|
const personDialogState = reactive<PersonDialogType>({
|
title: '',
|
personDialogVisible: false,
|
personForm: {
|
personName: '',
|
personAge: null,
|
personGender: null,
|
personMajor: '',
|
depName: '',
|
phone: null,
|
aptitude: '',
|
training: null,
|
},
|
personFormRules: {
|
personName: [{ required: true, message: '请填写人员名称', trigger: 'blur' }],
|
personMajor: [{ required: true, message: '请填写专业', trigger: 'blur' }],
|
aptitude: [{ required: true, message: '请填写相关资质', trigger: 'blur' }],
|
personAge: [{ required: true, message: '请填写人员年龄', trigger: 'blur' }],
|
personGender: [{ required: true, message: '请选择人员性别', trigger: 'change' }],
|
phone: [{ required: true, message: '请填写手机号', trigger: 'blur' }],
|
training: [{ required: true, message: '请选择培训情况', trigger: 'change' }]
|
},
|
personGenderList: [
|
{id:1, name: '男'},
|
{id:2, name: '女'},
|
],
|
trainingList: [
|
{id:1, name: '已完成当期安全培训'},
|
{id:2, name: '未完成当期安全培训'},
|
]
|
})
|
|
const showPersonDialog = (title: string, value: PersonType,) => {
|
|
personDialogState.personDialogVisible = true;
|
setTimeout(() => {
|
PersonFormRef.value.clearValidate();
|
});
|
if(title === '新增'){
|
personDialogState.title = '新增';
|
personDialogState.personForm = {
|
personName: '',
|
personAge: null,
|
personGender: null,
|
personMajor: '',
|
depName: '',
|
phone: null,
|
aptitude: '',
|
training: null,
|
};
|
}else{
|
personDialogState.title = '编辑'
|
personDialogState.personForm = {
|
id: value.id,
|
personName: value.personName,
|
personAge: value.personAge,
|
personGender: value.personGender,
|
personMajor: value.personMajor,
|
depName: value.depName,
|
phone: value.phone,
|
aptitude: value.aptitude,
|
training: value.training,
|
};
|
}
|
};
|
|
const onSubmitPerson = () => {
|
PersonFormRef.value.validate(async(valid: boolean) => {
|
if(valid){
|
if(personDialogState.title === '新增'){
|
let res = await personApi().addPerson(personDialogState.personForm);
|
if(res.data.code === 100){
|
emit('refresh')
|
personDialogState.personDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '新增成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}else{
|
let res = await personApi().modPerson(personDialogState.personForm)
|
if(res.data.code === 100){
|
emit('refresh')
|
personDialogState.personDialogVisible = false;
|
ElMessage({
|
type: 'success',
|
message: '编辑成功'
|
})
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg,
|
});
|
}
|
}
|
}else{
|
ElMessage({
|
type: 'warning',
|
message: '请完善基本信息',
|
});
|
}
|
})
|
};
|
|
const onVerifiyNumberInteger = (val: number, title: string) => {
|
if (title === 'age') {
|
personDialogState.personForm.personAge = Number(verifiyNumberInteger(val.toString())) === 0 ? null : Number(verifiyNumberInteger(val.toString()));
|
} else if (title === 'phone') {
|
personDialogState.personForm.phone = Number(verifiyNumberInteger(val.toString())) === 0 ? null : Number(verifiyNumberInteger(val.toString()));
|
}
|
};
|
|
const emit = defineEmits(['refresh']);
|
|
defineExpose({
|
showPersonDialog
|
});
|
</script>
|
|
<style scoped>
|
|
</style>
|
