场景
点击编辑
点击添加员工
这俩其实是用的同一个组件，只不过要进行封装，我这里就基于el-dialog组件封装这种表单弹窗
需要解决的问题
1.动态标题问题
解决方案：通过自定义属性title(名字随便起)在组件挂载时给属性赋值，同时组件内部显示这个标题属性
const props = defineProps({ staffId: { type: Number, default: () => null }, title:{ type:String, default: () => null } })
showEdit：用来控制弹窗表单的显示
editStaffId:用来区分是编辑还是新增，编辑需要拿到ID调接口进行数据回显，新增不需要，可以根据需求自己定义标题动态赋值
<div v-if="showEdit"> <StaffDetails :title="editStaffId?'编辑员工':'添加员工'" :staff-id="editStaffId?editStaffId:null" @exit-edit-page=" showEdit=false"></StaffDetails> </div>
2.底层组件el-dialog自带关闭按钮默认关闭行为问题
(自定义了关闭按钮，并设置el-dialog的show-close属性值为false即不用el-dialog提供的关闭按钮的没有该问题)
因为底层是基于el-dialog组件封装的弹窗关闭按钮默认是显示的，关闭按钮默认点击事件就是关闭自身（把el-dialog的v-model的值修改为false）但是我们是希望这个el-dialog组件是一直显示的，因为我们是基于el-dialog封装的一个弹窗表单组件，我们是直接控制这个弹窗表单组件的显示的，
那我们既然想用这个el-dialog自带的关闭按钮，就要修改这个按钮的点击事件，让他去关闭弹窗表单组件（整个父组件）
解决方案：修改el-dialog的before-close属性（关闭前的回调）改成我们自己的阻止默认关闭行为
//关闭事件 const emit = defineEmits(["exitEditPage"]); function goBack() { emit("exitEditPage"); }
触发这个自定义关闭事件：在回调函数里面设置控制弹窗表单显示的变量值为false，即关闭弹窗表单组件
3.是否数据回显问题
添加不需要回显，编辑需要
解决方案：自定义属性staffId(随便起，我这里的含义是员工id)，默认值为null,当这个属性的值不为null时说明需要数据回显，通过判断这个属性就可以处理是否回显的问题了
const props = defineProps({ staffId: { type: Number, default: () => null }, title:{ type:String, default: () => null } })
在钩子函数里面做判断
onMounted(()=>{ if(props.staffId){ //回显函数 getEcho(props.staffId) } })
4.动态提交函数问题
点击保存按钮在添加时调用提交添加的函数，编辑是调用提交编辑的函数
解决方案：根据标记是添加还是修改的属性值做判断，我这里的属性是staffId,这个的值存在就是编辑，为默认的null就是添加
<el-button type="primary" @click="props.staffId?submitFormEdit(ruleFormRef):submitFormAdd(ruleFormRef)">保存</el-button>
