前后端分离(对话框的使用)

1.首先先定义两个按钮(一个添加按钮，一个修改按钮)

<el-button type="primary" @click="openDialog(true)">添加员工</el-button> 
<el-button size="mini" @click="openDialog(false, scope.row)">编辑</el-button>

2.让这两个按钮都绑定同一个事件(绑定打开对话框事件，并传入参数)

openDialog(false, scope.row)

传入参数的作用:

参数1：

用来表示是添加还是编辑

参数2：

当参数1 为 false 时，这个参数应该传递一个代表要编辑的员工对象。如果参数1为 true，则此参数可以为空或不提供，因为在这种情况下不需要填充任何初始数据到表单中。

将传入的参数1参数值赋给一个响应式变量对话框标题，这可能用于在模板中根据不同情况显示不同的内容或行为（例如，改变对话框标题）。

如果参数1是 false 并且 employee 对象存在，则使用 Object.assign 方法将 employee 的属性复制到 employeeForm.value 中，从而预填充表单字段。如果参数1是 true 或者 employee 不存在，则重置 employeeForm.value 为默认的空值，以便用户可以从头开始填写新员工的信息。

最后一步是设置另一个响应式变量 dialogVisible 为 true，这样就可以触发对话框的显示。通常 dialogVisible 是与 <el-dialog> 组件绑定的属性，用来控制对话框是否可见。

const openDialog = (isNew, employee = null) => {isNewRecord.value = isNew;if (!isNew && employee) {Object.assign(employeeForm.value, employee);} else {Object.assign(employeeForm.value, {id: '',name: '',job: '',mgr: '',hiredate: '',sal: '',comm: '',deptno: ''});}dialogVisible.value = true;
};

3.给关闭对话框绑定事件

const closeDialog = () => {dialogVisible.value = false;
};

4.给提交对话框绑定事件(向后台发送编辑或添加的请求)发送完请求，重写更新表格，关闭对话框即可

const submitForm = async () => {isSubmitting.value = true;try {let response;if (isNewRecord.value) {// 添加新员工console.log(employeeForm.value);response = await axios.post('http://localhost:8080/api/addEmp', employeeForm.value, {headers: {'Content-Type': 'application/json'}});ElMessage({message: '员工添加成功',type: 'success'});} else {// 编辑现有员工response = await axios.put(`http://localhost:8080/api/emp/${employeeForm.value.id}`, employeeForm.value);ElMessage({message: '员工信息更新成功',type: 'success'});}fetchData();closeDialog();console.log(response.data);} catch (error) {console.error('Error submitting data:', error);ElMessage({message: '提交数据时出错，请检查输入并重试。',type: 'error'});} finally {isSubmitting.value = false;}
};