开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第18天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目的后台系统中写新增，本篇文章介绍如何在vite+vue项目的后台系统中写编辑

账号：admin
密码：admin

编辑

编辑的表单和新增的表单复用同一个dialog，所以需要将新增的dialog和AddEdit.vue的代码做一些修改，先将编辑的dialog的标题改写一下 :title="(editItem ? '编辑' : '新增') + '用户'"，编辑的时候给editItem赋值，通过editItem是否为true判断是编辑还是新增，在页面点击编辑按钮后，显示编辑用户的弹框，表单内容和新增的一样，\views\SystemSet\UserManage\index.vue编辑相关的代码：

const handleEdit = (row: any) => {
    addEditShow.value = true
    editItem.value = row
}
...
const handleSubmit = async () => {
    await AddEditRef.value.ruleFormRef.validate((valid: any, fields: any) => {
        if (valid) {
            let form = AddEditRef.value.ruleForm

            let asyncFun = postUser
            if (editItem.value) {
                asyncFun = putUser
            }
            asyncFun(form).then((res: any) => {
                if (res.code === 0) {
                    getTableData()
                    addEditShow.value = false
                    ElMessage({
                        message: res.msg,
                        type: "success",
                    });
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

src\api\SystemSet\UserManage.ts文件中模拟编辑用户和获取用户详情的接口，是简单的js逻辑编写，相关代码如下：

/**
 * 编辑用户
 * @method putUser
 */
export const putUser = (data: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        let findIndex = userList.findIndex(el => el.id === data.id)
        if (findIndex !== -1) {
            userList[findIndex] = {
                ...data,
                orgName: orgs.find(el => el.id === data.orgId)?.name,
                roleNameList: roleIds.filter(el => data.roleIdList.includes(el.id)).map(el => el.name)
            }
            resolve({
                code: 0,
                msg: '编辑成功！'
            })
        }
    })
}

/**
 * 获取用户详细信息
 * @method getUserDetail
 */

export const getUserDetail = (params: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        let id = params.id
        let findUser = userList.find(el => el.id === id)
        if (findUser) {
            resolve({
                code: 0,
                data: findUser
            })
        }
    })
}

views\SystemSet\UserManage\AddEdit.vue文件的代码也需要做一些修改，这里涉及了vue3中props的使用，与vue2中props的使用不同，需要注意。还有对于使用reactive定义的对象，需要使用Object.assign()来更改他的值，而不能简单的=赋值，否则页面内容不会响应，相关代码如下：

import { getUserDetail } from '@/api/SystemSet/UserManage'

const props = defineProps({
    editItem: {}
})

onMounted(() => {
    if (props.editItem) {
        getEditData()
    }
})

const getEditData = () => {
    getUserDetail(props.editItem).then((res: any) => {
        Object.assign(ruleForm, res.data)
    })
}

如此，就实现了编辑用户的功能

写在最后

以上就是在在vite+vue项目的后台系统中写编辑的代码和说明

vite+vue项目之后台系统写编辑

写在前面

编辑

写在最后