将 含有 表单的弹窗 单独封装成组件，
如果你想问这又是何必呢？
未经他人苦莫劝他人善！
就是要封装，不想看见一坨一坨的代码。
温馨提示：
若依 获取字典方法还是很好用的，
但是要放在 初始化数据（ 方法 init ）的时候使用，proxy.useDict，避免字典重复加载！已加载的字典会从 store 中获取！
I think you can understand all above!
如何维护呢？
接口、表单内容、表单校验、提交参数、字典 都是要改的，
如果在打开弹窗后，需要通过其它接口获取数据，那么只需要在 el-dialog 组件 的 opened 回调方法中执行 或者 调用需要的方法！
只是举个栗子，大家别当真 check.vue：
<template>
<div>
<!-- 审核 -->
<el-dialog title="审核需求信息" destroy-on-close v-model="dialogFormVisible" width="800px" :append-to-body="true" :close-on-press-escape="false" :close-on-click-modal="false" @close="resetForm">
<el-form ref="createFormRef" :model="form" :rules="rules" label-width="130px" label-position="right">
<el-form-item label="需求名称" prop="name">
<span>{{form.name}}</span>
</el-form-item>
<el-form-item label="审核状态">
<el-radio-group v-model="form.checkStatus" >
<el-radio v-for="dict in dicts.sys_checkStatus" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<!-- 2 审核未通过 -->
<el-form-item label="未通过原因" prop="checkMessage" v-if="form.checkStatus == '2'">
<el-input v-model="form.checkMessage" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="上下架状态">
<el-radio-group v-model="form.status">
<el-radio v-for="dict in dicts.demand_status" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
</el-form-item>
<!-- 0 待审核 -->
<el-form-item label="审核人" v-if="form.checkStatus != '0' && form.checkName">
<span>{{form.checkName}}</span><el-divider direction="vertical"></el-divider>
<span>{{form.checkTel}}</span><el-divider direction="vertical"></el-divider>
<span>{{form.checkDate}}</span>
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" @click="submit">提 交</el-button>
<el-button @click="dialogFormVisible = false">取 消</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup name="DemandCheck">
import { check } from "@/api/demand";
const { proxy } = getCurrentInstance()
// 字典
const dicts = ref({})
// const { pay_style } = proxy.useDict("pay_style");
const emits = defineEmits(['refresh'])
// 新增/修改表单相关
const dialogFormVisible = ref(false)
const createFormRef = ref(null)
// 表单
const form = ref({
demandId:undefined,// 主键
name: undefined, //需求名称
checkStatus: undefined, // 审核状态
checkMessage:undefined,//未通过原因
status:undefined,//上下架状态
remark:undefined,//备注
// 以下仅展示
checkName:undefined, //审核人姓名
checkTel:undefined, //审核人手机号
checkDate:undefined, //审核日期
})
// 校验规则
const rules = ref({
checkMessage:[
{
required:true,
message:"请输入审核未通过原因",
trigger: 'blur'
}]
})
// 重置表单
const resetForm = ()=>{
form.value.demandId = undefined
createFormRef.value.resetFields()
}
// 新增/修改提交
const submit = ()=>{
createFormRef.value.validate(isValid=>{
if(isValid){
proxy.$modal.loading("正在提交...")
check(form.value).then(res=>{
if(res.code == 200){
proxy.$modal.msgSuccess("操作成功！")
dialogFormVisible.value = false
emits('refresh')
}else{
proxy.$modal.msgError(res.msg || "请求发生错误，请稍后重试")
}
}).finally(() => {
proxy.$modal.closeLoading();
});
}else{
proxy.$modal.closeLoading();
return false
}
})
}
// 设置表单数据
const setFormData = (data) => {
let keysArray = Object.keys(form.value);
for (const key in data) {
if (keysArray.includes(key)) {
form.value[key] = data[key];
}
}
}
// 初始化
const init = async (row)=>{
// 显示弹窗
dialogFormVisible.value = true
await nextTick() // 将回调推迟到下一个DOM更新周期之后执行,在更改了一些数据以等待DOM更新后立即使用它。
setFormData(row || {})
dicts.value = proxy.useDict("sys_checkStatus","demand_status")
}
defineExpose({
init
})
</script>
<style lang="scss" scoped>
</style>