Vue3 如何让代码变得清新优雅，代码洁癖患者进！（3）

将 含有 表单的弹窗 单独封装成组件，

如果你想问这又是何必呢？

未经他人苦莫劝他人善！

就是要封装，不想看见一坨一坨的代码。

温馨提示：

若依 获取字典方法还是很好用的，

但是要放在 初始化数据（ 方法 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>