fix: 修复: 🧩 单独拆分添加和编辑员工信息
This commit is contained in:
parent
e149c57502
commit
3fc1ed9b0f
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-button @click="handelCancel">取消</el-button>
|
||||
<el-button size="large" @click="handelCancel">取消</el-button>
|
||||
<el-button :bg="true" class="save" color="#1f1f1f" size="large" @click="handelSave">保存</el-button>
|
||||
<el-button v-if="!$route.query.id" :bg="true" class="handelSaveAndAdd" size="large" type="primary" @click="handelSaveAndAdd">
|
||||
<el-button :bg="true" class="handelSaveAndAdd" size="large" type="primary" @click="handelSaveAndAdd">
|
||||
保存并继续添加
|
||||
</el-button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-button size="large" @click="handelCancel">取消</el-button>
|
||||
<el-button class="save" size="large" type="primary" @click="handelSave">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { defineEmits } from 'vue';
|
||||
|
||||
const emit = defineEmits(['save', 'SaveAndAdd', 'cancel']);
|
||||
|
||||
/**
|
||||
* 取消
|
||||
*/
|
||||
const handelCancel = () => {
|
||||
emit('cancel');
|
||||
};
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
const handelSave = () => {
|
||||
emit('save');
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
.save {
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -45,7 +45,11 @@ const routes: Array<RouteRecordRaw> = [
|
|||
path: 'add',
|
||||
name: 'employeeAdd',
|
||||
component: () => import(/* webpackChunkName: "employeeAdd" */ '@/views/employee/add-employee.vue'),
|
||||
meta: { title: '添加员工' },
|
||||
},
|
||||
{
|
||||
path: 'edit',
|
||||
name: 'employeeEdit',
|
||||
component: () => import(/* webpackChunkName: "employeeEdit" */ '@/views/employee/edit-employee.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,42 +1,12 @@
|
|||
<template>
|
||||
<PageHeader :title="title" @back="handelCancel" />
|
||||
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="190px" size="large" status-icon>
|
||||
<!--账号-->
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="form.username" clearable />
|
||||
</el-form-item>
|
||||
<!--员工姓名-->
|
||||
<el-form-item label="员工姓名" prop="name">
|
||||
<el-input v-model="form.name" clearable />
|
||||
</el-form-item>
|
||||
<!--手机号-->
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" clearable />
|
||||
</el-form-item>
|
||||
<!--性别-->
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="form.sex" placeholder="选择性别">
|
||||
<el-radio label="1">男</el-radio>
|
||||
<el-radio label="0">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!--身份证号-->
|
||||
<el-form-item label="身份证号" prop="idNumber">
|
||||
<el-input v-model="form.idNumber" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<CancelSaveAdd @SaveAndAdd="handelSaveAndAdd(ruleFormRef)" @cancel="handelCancel" @save="handelSave(ruleFormRef)" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<EmployeeForm :form="form" title="添加员工信息" @cancel="handelCancel" @save="handelSave" @saveAndAdd="handelSaveAndAdd" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, toRaw } from 'vue';
|
||||
import { ElMessage, FormInstance, FormRules } from 'element-plus';
|
||||
import CancelSaveAdd from '@/commpent/button/cancel-save-add.vue';
|
||||
import { reactive, toRaw } from 'vue';
|
||||
import { ElMessage, FormInstance } from 'element-plus';
|
||||
import { employeeStore } from '@/store/employee';
|
||||
import PageHeader from '@/commpent/page-header.vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
import EmployeeForm from '@/views/employee/employee-form.vue';
|
||||
|
||||
interface RuleForm {
|
||||
idNumber: string;
|
||||
|
|
@ -46,32 +16,8 @@ interface RuleForm {
|
|||
username: string;
|
||||
}
|
||||
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入员工姓名', trigger: 'blur' },
|
||||
{ min: 3, max: 16, message: '长度为3-16字符', trigger: 'blur' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur', max: 11 },
|
||||
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'change' },
|
||||
],
|
||||
sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur', max: 18 },
|
||||
{
|
||||
pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
|
||||
message: '身份证格式不正确',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const store = employeeStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const title = ref('添加员工');
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
const form = reactive<RuleForm>({
|
||||
idNumber: '', // 身份证号
|
||||
name: '', // 姓名
|
||||
|
|
@ -80,29 +26,12 @@ const form = reactive<RuleForm>({
|
|||
username: '', // 用户名
|
||||
});
|
||||
|
||||
/**
|
||||
* 判断当前是否有用户id
|
||||
* 如果有合并信息
|
||||
*/
|
||||
const getEmployeeDetail = async () => {
|
||||
if (route.query.id) {
|
||||
title.value = '修改员工信息';
|
||||
await store.getEmployeeListById(route.query.id);
|
||||
Object.assign(form, store.employeeDetail);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置员工信息
|
||||
*/
|
||||
const setEmployeeDetail = async () => {
|
||||
if (route.query.id) {
|
||||
await store.editEmployee(toRaw(form));
|
||||
ElMessage.success('修改员工信息成功');
|
||||
} else {
|
||||
await store.addEmployee(toRaw(form));
|
||||
ElMessage.success('添加员工信息成功');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -114,7 +43,7 @@ const handelSave = async (formEl: FormInstance | undefined) => {
|
|||
await formEl.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
await setEmployeeDetail(); // 修改或添加员工信息
|
||||
await setEmployeeDetail(); // 添加员工信息
|
||||
await store.getEmployeePage(store.requestData);
|
||||
await router.push('/employee');
|
||||
} catch (e: any) {
|
||||
|
|
@ -149,9 +78,6 @@ const handelSaveAndAdd = async (formEl: FormInstance | undefined) => {
|
|||
const handelCancel = () => {
|
||||
router.push('/employee');
|
||||
};
|
||||
onMounted(() => {
|
||||
getEmployeeDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<EmployeeForm :form="form" title="编辑员工信息" @cancel="handelCancel" @save="handelSave" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, reactive, ref, toRaw } from 'vue';
|
||||
import { ElMessage, FormInstance } from 'element-plus';
|
||||
import { employeeStore } from '@/store/employee';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import EmployeeForm from '@/views/employee/employee-form.vue';
|
||||
|
||||
interface RuleForm {
|
||||
idNumber: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
sex: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
const store = employeeStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const title = ref('添加员工');
|
||||
const form = reactive<RuleForm>({
|
||||
idNumber: '', // 身份证号
|
||||
name: '', // 姓名
|
||||
phone: '', // 手机号
|
||||
sex: '1', // 性别
|
||||
username: '', // 用户名
|
||||
});
|
||||
|
||||
/**
|
||||
* 判断当前是否有用户id
|
||||
* 如果有合并信息
|
||||
*/
|
||||
const getEmployeeDetail = async () => {
|
||||
if (route.query.id) {
|
||||
title.value = '修改员工信息';
|
||||
await store.getEmployeeListById(route.query.id);
|
||||
Object.assign(form, store.employeeDetail);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加员工
|
||||
* @param formEl
|
||||
*/
|
||||
const handelSave = async (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
await formEl.validate(async valid => {
|
||||
if (valid) {
|
||||
try {
|
||||
await store.editEmployee(toRaw(form)); // 修改加员工信息
|
||||
await store.getEmployeePage(store.requestData);
|
||||
await router.push('/employee');
|
||||
ElMessage.success('修改员工信息成功');
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 返回
|
||||
*/
|
||||
const handelCancel = () => {
|
||||
router.push('/employee');
|
||||
};
|
||||
onMounted(() => {
|
||||
getEmployeeDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-form {
|
||||
padding: 26px;
|
||||
background: #fff;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<PageHeader :title="title" @back="handelCancel" />
|
||||
<el-form ref="ruleFormRef" :model="form" :rules="rules" label-width="190px" size="large" status-icon>
|
||||
<!--账号-->
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="form.username" clearable />
|
||||
</el-form-item>
|
||||
<!--员工姓名-->
|
||||
<el-form-item label="员工姓名" prop="name">
|
||||
<el-input v-model="form.name" clearable />
|
||||
</el-form-item>
|
||||
<!--手机号-->
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="form.phone" clearable />
|
||||
</el-form-item>
|
||||
<!--性别-->
|
||||
<el-form-item label="性别" prop="sex">
|
||||
<el-radio-group v-model="form.sex" placeholder="选择性别">
|
||||
<el-radio label="1">男</el-radio>
|
||||
<el-radio label="0">女</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!--身份证号-->
|
||||
<el-form-item label="身份证号" prop="idNumber">
|
||||
<el-input v-model="form.idNumber" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<slot name="submit" />
|
||||
<CancelSaveAdd
|
||||
v-if="$route.name === 'employeeAdd'"
|
||||
@SaveAndAdd="handelSaveAndAdd(ruleFormRef)"
|
||||
@cancel="handelCancel"
|
||||
@save="handelSave(ruleFormRef)"
|
||||
/>
|
||||
<CancelSave v-else @cancel="handelCancel" @save="handelSave(ruleFormRef)" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineEmits, defineProps, reactive, ref } from 'vue';
|
||||
import { FormInstance, FormRules } from 'element-plus';
|
||||
import CancelSaveAdd from '@/commpent/button/cancel-save-add.vue';
|
||||
import PageHeader from '@/commpent/page-header.vue';
|
||||
import CancelSave from '@/commpent/button/cancel-save.vue';
|
||||
|
||||
interface RuleForm {
|
||||
idNumber: string;
|
||||
name: string;
|
||||
phone: string;
|
||||
sex: string;
|
||||
username: string;
|
||||
}
|
||||
|
||||
defineProps(['form', 'title']);
|
||||
const emits = defineEmits(['cancel', 'save', 'saveAndAdd']);
|
||||
const rules = reactive<FormRules<RuleForm>>({
|
||||
name: [
|
||||
{ required: true, message: '请输入员工姓名', trigger: 'blur' },
|
||||
{ min: 3, max: 16, message: '长度为3-16字符', trigger: 'blur' },
|
||||
],
|
||||
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '请输入手机号', trigger: 'blur', max: 11 },
|
||||
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'change' },
|
||||
],
|
||||
sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
|
||||
idNumber: [
|
||||
{ required: true, message: '请输入身份证号', trigger: 'blur', max: 18 },
|
||||
{
|
||||
pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
|
||||
message: '身份证格式不正确',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
});
|
||||
const ruleFormRef = ref<FormInstance>();
|
||||
|
||||
/**
|
||||
* 返回
|
||||
*/
|
||||
const handelCancel = () => {
|
||||
emits('cancel');
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加员工
|
||||
* @param formEl
|
||||
*/
|
||||
const handelSave = async (formEl: FormInstance | undefined) => {
|
||||
emits('save', formEl);
|
||||
};
|
||||
|
||||
/**
|
||||
* 继续添加员工信息
|
||||
* @param formEl
|
||||
*/
|
||||
const handelSaveAndAdd = async (formEl: FormInstance | undefined) => {
|
||||
emits('saveAndAdd', formEl);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-form {
|
||||
padding: 26px;
|
||||
background: #fff;
|
||||
|
||||
.el-input,
|
||||
.el-select {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<RouterView />
|
||||
<div v-show="$route.name !== 'employeeAdd'" class="container">
|
||||
<div v-show="$route.name !== 'employeeAdd' && $route.name !== 'employeeEdit'" class="container">
|
||||
<!-- 头部 -->
|
||||
<TableHeader>
|
||||
<template #left>
|
||||
|
|
@ -78,7 +78,7 @@ const handelSearch = () => {
|
|||
* @param id
|
||||
*/
|
||||
const handelEdit = (id: number) => {
|
||||
router.push({ path: '/employee/add', query: { id } });
|
||||
router.push({ path: '/employee/edit', query: { id } });
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue