fix: 修复: 🧩 单独拆分添加和编辑员工信息

src/commpent/button/cancel-save-add.vue

@@ -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>

src/commpent/button/cancel-save.vue

@@ -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>

src/router/index.ts

@@ -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'),
 					},
 				],
 			},

src/views/employee/add-employee.vue

@@ -1,42 +1,12 @@
 <template>
-	<PageHeader :title="title" @back="handelCancel" />
+	<EmployeeForm :form="form" title="添加员工信息" @cancel="handelCancel" @save="handelSave" @saveAndAdd="handelSaveAndAdd" />
-	<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>
 </template>
-
 <script lang="ts" setup>
-import { onMounted, reactive, ref, toRaw } from 'vue';
+import { reactive, toRaw } from 'vue';
-import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { ElMessage, FormInstance } from 'element-plus';
-import CancelSaveAdd from '@/commpent/button/cancel-save-add.vue';
 import { employeeStore } from '@/store/employee';
-import PageHeader from '@/commpent/page-header.vue';
+import { useRouter } from 'vue-router';
-import { useRoute, 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>

src/views/employee/edit-employee.vue

@@ -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>

src/views/employee/employee-form.vue

@@ -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>

src/views/employee/index.vue

@@ -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 } });
 };
 
 /**