Review 代码, 还原原始代码, 增加名称重复校验规则
This commit is contained in:
andy
parent
38593ba9e3
commit
7882f5b24f
@ -1,5 +1,3 @@
|
||||
import { checkStaffName } from '@/api/system/staff'
|
||||
import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, listStaffByDept, clearAllStaff, reEmployment, checkStaffName } from '@/api/system/staff'
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="98px">
|
||||
@ -9,12 +7,11 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
|
||||
placeholder="请输入姓名"
|
||||
clearable
|
||||
@keyup.enter.native="handleQuery"
|
||||
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="归属部门：" prop="deptId">
|
||||
<treeselect v-model="queryParams.deptId" :options="deptOptions" style="width: 240px" :show-count="true" :autoSelectAncestors="true" placeholder="请选择归属部门" />
|
||||
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="住宿标识：" prop="zsFlag">
|
||||
<el-select v-model="queryParams.zsFlag" placeholder="请选择住宿标识" clearable>
|
||||
@ -306,7 +303,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="姓名：" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名"@blur="handleCheckName" />
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -580,7 +577,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
|
||||
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注：" prop="remarks">
|
||||
<el-input v-model="form.remarks" placeholder="请输入备注" />
|
||||
@ -739,7 +736,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-tooltip>
|
||||
|
||||
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-tooltip placement="top" effect="light">
|
||||
@ -939,7 +936,7 @@ import { listStaff, getStaff, addStaff, updateStaff, delStaff, listStaffAll, lis
|
||||
|
||||
|
||||
<script>
|
||||
import { listStaff, getStaff, delStaff, addStaff, updateStaff, clearAllStaff,reEmployment } from '@/api/system/staff'
|
||||
import { listStaff, getStaff, delStaff, addStaff, updateStaff, clearAllStaff,reEmployment,checkStaffName } from '@/api/system/staff'
|
||||
import { getDetailByUser,updateDetail } from "@/api/system/staffDetail";
|
||||
import { listAllDepts } from '@/api/system/dept';
|
||||
import { listAllOptions } from '@/api/personnelMatters/subsidyInformation';
|
||||
@ -947,16 +944,32 @@ import { getToken } from "@/utils/auth";
|
||||
import Treeselect from "@riophae/vue-treeselect";
|
||||
import { getAllowAdjustment } from "@/api/system/allowAdjustment";
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
import {checkStaffName} from "../../../api/system/staff";
|
||||
|
||||
export default {
|
||||
name: "Staff",
|
||||
dicts: ['sys_user_sex', 'sys_level','sys_yes_no','sys_worker_status','sys_contract','sys_company','time_clock','job_info'],
|
||||
components: { Treeselect },
|
||||
data() {
|
||||
return {
|
||||
nameTimer: null,
|
||||
|
||||
var checkUsernameAsync = async(rule, value, callback) =>{
|
||||
// 异步请求后台接口校验用户名是否存在
|
||||
await checkStaffName({ userId: this.form.userId,name: value }).then(res=>{
|
||||
if (res.data) {
|
||||
callback(new Error('员工【'+value+'】已存在(包含离职)'))
|
||||
} else {
|
||||
callback() // 校验通过
|
||||
}
|
||||
});
|
||||
|
||||
// 假设后台返回 { code: 0, data: true } true=已存在
|
||||
// if (res.data.data) {
|
||||
// callback(new Error('姓名【'+value+'】已存在，所有员工（含离职）不可重名'))
|
||||
// } else {
|
||||
// callback() // 校验通过
|
||||
// }
|
||||
}
|
||||
|
||||
return {
|
||||
url: process.env.VUE_APP_BASE_URL,
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
@ -1039,39 +1052,14 @@ export default {
|
||||
//详情form表单
|
||||
infoForm:{},
|
||||
infoRules: {
|
||||
async handleCheckName()
|
||||
{
|
||||
if (!this.infoForm.name) return
|
||||
const res = await checkStaffName({
|
||||
id: this.infoForm.id || null, // 新增传null，编辑传员工id
|
||||
name: this.infoForm.name
|
||||
})
|
||||
if (res.data) {
|
||||
this.$message.error(`姓名【${this.infoForm.name}】已存在，在职/离职人员均不可重名`)
|
||||
}
|
||||
},
|
||||
|
||||
// 提交表单前二次校验兜底
|
||||
async submitForm()
|
||||
{
|
||||
await this.$refs.form.validate()
|
||||
// 提交前再次校验，防止快速提交绕过失焦校验
|
||||
const repeatRes = await checkStaffName({ id: this.infoForm.id, name: this.infoForm.name })
|
||||
if (repeatRes.data) {
|
||||
return this.$message.error('姓名重复，无法保存')
|
||||
}
|
||||
// 执行新增/编辑提交
|
||||
await this.$api.staff.saveOrUpdate(this.infoForm)
|
||||
this.$message.success('保存成功')
|
||||
this.dialogVisible = false
|
||||
this.getTableList() // 刷新员工列表
|
||||
}
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: "姓名不能为空", trigger: "blur" },
|
||||
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 25 之间', trigger: 'blur' }
|
||||
{ min: 2, max: 20, message: '用户名称长度必须介于 2 和 25 之间', trigger: 'blur' },
|
||||
{ validator: checkUsernameAsync, trigger: 'blur' }
|
||||
],
|
||||
deptId: [
|
||||
{ required: true, message: "部门不能为空", trigger: "blur" }
|
||||
@ -1137,6 +1125,7 @@ export default {
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getAllowAdjustment();
|
||||
@ -1145,26 +1134,28 @@ export default {
|
||||
this.getSubsidyList();
|
||||
},
|
||||
methods: {
|
||||
//上传头像
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.form.imageUrl = res.url;
|
||||
this.form.fileId = res.fileId;
|
||||
},
|
||||
//上传前检查头像格式
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传头像图片大小不能超过 5MB!');
|
||||
}
|
||||
return isJPG && isLt5M;
|
||||
},
|
||||
|
||||
//上传头像
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.form.imageUrl = res.url;
|
||||
this.form.fileId = res.fileId;
|
||||
},
|
||||
//上传前检查头像格式
|
||||
beforeAvatarUpload(file) {
|
||||
const isJPG = file.type === 'image/jpeg';
|
||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
||||
|
||||
if (!isJPG) {
|
||||
this.$message.error('上传头像图片只能是 JPG 格式!');
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传头像图片大小不能超过 5MB!');
|
||||
}
|
||||
return isJPG && isLt5M;
|
||||
},
|
||||
/**获取补贴 */
|
||||
getSubsidyList() {
|
||||
getSubsidyList(){
|
||||
listAllOptions().then(response => {
|
||||
this.subsidyOptions = response.data;
|
||||
});
|
||||
@ -1172,14 +1163,14 @@ export default {
|
||||
},
|
||||
|
||||
/** 获取部门 */
|
||||
getDeptList() {
|
||||
getDeptList(){
|
||||
listAllDepts().then(response => {
|
||||
this.deptOptions = response;
|
||||
this.deptOpt = JSON.parse(JSON.stringify(this.deptOptions).replaceAll('id', 'value'))
|
||||
this.deptOpt = JSON.parse(JSON.stringify(this.deptOptions).replaceAll('id','value'))
|
||||
});
|
||||
},
|
||||
|
||||
getAllowAdjustment() {
|
||||
getAllowAdjustment(){
|
||||
getAllowAdjustment().then(response => {
|
||||
this.allowAdjustment = response.data;
|
||||
});
|
||||
@ -1236,11 +1227,11 @@ export default {
|
||||
status: null,
|
||||
socialSubsidy: null,
|
||||
companyName: null,
|
||||
imageUrl: null,
|
||||
fileId: null,
|
||||
timeClock: null,
|
||||
timeClockList: null,
|
||||
subsidyList: null
|
||||
imageUrl:null,
|
||||
fileId:null,
|
||||
timeClock:null,
|
||||
timeClockList:null,
|
||||
subsidyList:null
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
@ -1274,8 +1265,8 @@ export default {
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
console.log(this.form.deptId)
|
||||
if (Array.isArray(this.form.deptId)) {
|
||||
this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
|
||||
if(Array.isArray(this.form.deptId)){
|
||||
this.form.deptId = this.form.deptId[this.form.deptId.length -1]
|
||||
}
|
||||
if (this.form.userId != null) {
|
||||
updateStaff(this.form).then(response => {
|
||||
@ -1297,13 +1288,12 @@ export default {
|
||||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$modal.confirm('是否确认删除员工名称为"' + row.name + '"的数据项？').then(function () {
|
||||
this.$modal.confirm('是否确认删除员工名称为"' + row.name + '"的数据项？').then(function() {
|
||||
return delStaff(row.userId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
}).catch(() => {
|
||||
});
|
||||
}).catch(() => {});
|
||||
},
|
||||
/** 导出员工 */
|
||||
handleExport() {
|
||||
@ -1312,7 +1302,7 @@ export default {
|
||||
}, `员工信息_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
//导出员工详情
|
||||
handleExportDetail() {
|
||||
handleExportDetail(){
|
||||
this.download('system/staff/exportDetail', {
|
||||
...this.queryParams
|
||||
}, `员工详情_${new Date().getTime()}.xlsx`)
|
||||
@ -1324,10 +1314,10 @@ export default {
|
||||
},
|
||||
/** 下载模板操作 */
|
||||
importTemplate() {
|
||||
this.download('system/staff/importTemplate', {}, `staff_template_${new Date().getTime()}.xlsx`)
|
||||
this.download('system/staff/importTemplate', {
|
||||
}, `staff_template_${new Date().getTime()}.xlsx`)
|
||||
this.upload.open = false;
|
||||
},
|
||||
|
||||
// 文件上传中处理
|
||||
handleFileUploadProgress(event, file, fileList) {
|
||||
this.upload.isUploading = true;
|
||||
@ -1337,7 +1327,7 @@ export default {
|
||||
this.upload.open = false;
|
||||
this.upload.isUploading = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", {dangerouslyUseHTMLString: true});
|
||||
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
@ -1345,7 +1335,7 @@ export default {
|
||||
this.$refs.upload.submit();
|
||||
},
|
||||
//离职设置
|
||||
handleJobStatus(row) {
|
||||
handleJobStatus(row){
|
||||
this.reset();
|
||||
this.disPlayFlag = "0";
|
||||
getStaff(row.userId).then(response => {
|
||||
@ -1354,18 +1344,18 @@ export default {
|
||||
this.title = "离职对话框";
|
||||
});
|
||||
},
|
||||
reEmployment(row) {
|
||||
reEmployment(row){
|
||||
reEmployment(row.userId).then(response => {
|
||||
if (response.code == 200) {
|
||||
if(response.code==200){
|
||||
this.$modal.msgSuccess("重新入职成功");
|
||||
this.getList();
|
||||
} else {
|
||||
this.getList();
|
||||
}else{
|
||||
this.$modal.msgError(response.data.msg);
|
||||
}
|
||||
});
|
||||
},
|
||||
//员工全额工资对话框
|
||||
handleDelay(row) {
|
||||
handleDelay(row){
|
||||
this.reset();
|
||||
this.disPlayFlag = "2";
|
||||
getStaff(row.userId).then(response => {
|
||||
@ -1375,7 +1365,7 @@ export default {
|
||||
});
|
||||
},
|
||||
//员工转正对话框
|
||||
handleChange(row) {
|
||||
handleChange(row){
|
||||
this.reset();
|
||||
this.disPlayFlag = "1";
|
||||
getStaff(row.userId).then(response => {
|
||||
@ -1398,12 +1388,12 @@ export default {
|
||||
});
|
||||
},
|
||||
//销售提成上传
|
||||
importSalesCommissions() {
|
||||
importSalesCommissions(){
|
||||
this.uploadSale.title = "销售提成上传";
|
||||
this.uploadSale.open = true;
|
||||
},
|
||||
//公积金导入
|
||||
uploadAccumulationFund() {
|
||||
uploadAccumulationFund(){
|
||||
this.uploadFund.title = "五险一金导入";
|
||||
this.uploadFund.open = true;
|
||||
},
|
||||
@ -1416,68 +1406,41 @@ export default {
|
||||
this.uploadFund.open = false;
|
||||
this.uploadFund.isUploading = false;
|
||||
this.$refs.uploadFund.clearFiles();
|
||||
this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
|
||||
this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
|
||||
this.getList();
|
||||
},
|
||||
// 提交上传文件
|
||||
submitFundForm() {
|
||||
this.$refs.uploadFund.submit();
|
||||
},
|
||||
handleClearAll() {
|
||||
handleClearAll(){
|
||||
clearAllStaff().then(response => {
|
||||
this.$modal.msgSuccess("清理成功");
|
||||
this.getList();
|
||||
});
|
||||
|
||||
async function handleCheckName() {
|
||||
if (this.nameTimer) clearTimeout(this.nameTimer)
|
||||
const name = this.infoForm.name?.trim()
|
||||
if (!name) return
|
||||
|
||||
this.nameTimer = setTimeout(async () => {
|
||||
try {
|
||||
const params = {name}
|
||||
if (this.infoForm.id) params.id = this.infoForm.id
|
||||
const res = await checkStaffName(params)
|
||||
if (res.data) {
|
||||
this.$modal.msgWarning('该员工姓名已存在，不能重复')
|
||||
}
|
||||
} catch (e) {
|
||||
this.$modal.msgError('姓名校验接口异常')
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//查看详情
|
||||
handleDetail(row) {
|
||||
handleDetail(row){
|
||||
getDetailByUser(row.userId).then(response => {
|
||||
this.infoForm = response.data;
|
||||
this.openInfo = true;
|
||||
});
|
||||
},
|
||||
//关闭详情
|
||||
cancelInfo() {
|
||||
cancelInfo(){
|
||||
this.openInfo = false;
|
||||
this.resetInfo();
|
||||
},
|
||||
resetInfo() {
|
||||
this.infoForm = {};
|
||||
resetInfo(){
|
||||
this.infoForm={};
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
async submitInfoForm() {
|
||||
this.$refs["infoForm"].validate(async valid => {
|
||||
/** 提交按钮 */
|
||||
submitInfoForm() {
|
||||
this.$refs["infoForm"].validate(valid => {
|
||||
if (valid) {
|
||||
const name = this.form.name.trim()
|
||||
const params = {name}
|
||||
if (this.form.id) params.id = this.form.id
|
||||
const {data} = await checkStaffName(params)
|
||||
if (data) {
|
||||
this.$modal.msgWarning('该员工姓名已存在，不能重复')
|
||||
return
|
||||
}
|
||||
updateDetail(this.infoForm).then(response => {
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
this.openInfo = false;
|
||||
@ -1485,25 +1448,6 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
async handleCheckName() {
|
||||
if (this.nameTimer) clearTimeout(this.nameTimer)
|
||||
const name = this.infoForm?.name?.trim()
|
||||
if (!name) return
|
||||
|
||||
this.nameTimer = setTimeout(async () => {
|
||||
try {
|
||||
const params = {name}
|
||||
if (this.infoForm.id) params.id = this.infoForm.id
|
||||
const res = await checkStaffName(params)
|
||||
if (res.data) {
|
||||
this.$modal.msgWarning('该员工姓名已存在，不能重复')
|
||||
}
|
||||
} catch (e) {
|
||||
this.$modal.msgError('姓名校验接口异常')
|
||||
}
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user