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

写在前面

上篇文章介绍了如何在vite+vue项目的后台系统中写列表、分页、查询，本篇文章介绍如何在vite+vue项目的后台系统中写新增

账号：admin
密码：admin

新增

新增的弹出框用element plus的el-dialog实现

点击新增按钮后，显示新增用户的弹出框，：

<el-dialog v-model="addEditShow" v-if="addEditShow" title="新增" width="480px">
    <add-edit :editItem="editItem" ref="AddEditRef"></add-edit>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="addEditShow = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">
                确 定
            </el-button>
        </span>
    </template>
</el-dialog>
...
import AddEdit from './AddEdit.vue'
import { getUser, postUser } from '@/api/SystemSet/UserManage'
...
let addEditShow = ref(false)
let editItem = ref(null)
const AddEditRef = ref()

const handleAdd = () => {
    addEditShow.value = true
    editItem.value = null
}

const handleSubmit = async () => {
    await AddEditRef.value.ruleFormRef.validate((valid: any, fields: any) => {
        if (valid) {
            let form = AddEditRef.value.ruleForm
            postUser(form).then((res: any) => {
                if (res.code === 0) {
                    getTableData()
                    addEditShow.value = false
                    ElMessage({
                        message: res.msg,
                        type: "success",
                    });
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

在该页面引入了AddEdit.vue文件，AddEdit.vue文件包含新增的表单的代码，表单用element plus的el-form组件， AddEdit.vue代码如下，表单需要填写的字段有用户名、姓名、性别、手机号、岗位、所属部门、角色，全部设置为必填项，表单里用到了element-plus的el-input、el-select、el-cascader组件，角色列表roleIds和组织列表orgIds的数据是前端写的假数据。同时在该页面使用defineExpose方法将ruleFormRef和ruleForm传递给父组件，父组件的handleSubmit方法中通过refs调用，这和vue2的父子之间通信有出入，但是应该挺好理解：

<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" status-icon>
        <el-form-item label="用户名" prop="userName">
            <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
            <el-input v-model="ruleForm.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                <el-option label="男" :value="0" />
                <el-option label="女" :value="1" />
            </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="岗位" prop="post">
            <el-input v-model="ruleForm.post" placeholder="请输入岗位" />
        </el-form-item>
        <el-form-item label="所属部门" prop="orgId">
            <el-cascader v-model="ruleForm.orgId" :options="orgIds" :props="{
                checkStrictly: true, value: 'id', label: 'name',emitPath: false
            }" clearable placeholder="请选择所属部门" />
        </el-form-item>
        <el-form-item label="角色" prop="roleIdList">
            <el-select v-model="ruleForm.roleIdList" placeholder="请选择角色" multiple filterable collapse-tags
                collapse-tags-tooltip>
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in roleIds" :key="index" />
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    userName: '',
    realName: '',
    gender: '',
    mobile: '',
    post: '',
    orgId: '',
    roleIdList: []
})

const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    realName: [
        { required: true, message: '请输入姓名', trigger: 'change' },
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'change' },
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'change' },
    ],
    post: [
        { required: true, message: '请输入岗位', trigger: 'change' },
    ],
    orgId: [
        { required: true, message: '请选择所属部门', trigger: 'change' },
    ],
    roleIdList: [
        { required: true, message: '请选择角色', trigger: 'change' },
    ],
})

const orgIds = [
    {
        id: 1,
        name: '研发部',
    },
    {
        id: 4,
        name: '销售部',
        children: [
            {
                id: 2,
                name: '销售1部',
            },
            {
                id: 3,
                name: '销售2部',
            },
        ],
    },
]

const roleIds = [
    { name: '管理员', id: 1 },
    { name: '开发人员', id: 2 },
    { name: '销售人员', id: 3 }
]

defineExpose({
    ruleFormRef,
    ruleForm
})
</script>

<style lang="less" scoped>
.el-select,
:deep(.el-cascader) {
    width: 100%;
}
</style>

api\SystemSet\UserManage.ts文件中模拟了新增用户的接口，增加的代码如下，完整代码可去gitee上将项目clone下来看：

/**
 * 新增用户
 * @method postUser
 */
export const postUser = (data: any) => {
    //模拟接口
    return new Promise((resolve, reject) => {
        userList.unshift({
            ...data,
            orgName: orgs.find(el => el.id === data.orgId)?.name,
            roleNameList: roleIds.filter(el => data.roleIdList.includes(el.id)).map(el => el.name),
            createTime: getCurTime(),
            id: userList.length + 1
        })
        resolve({
            code: 0,
            msg: '新增成功！'
        })
    })
}

下面是新增用户的表单的图片：

写在最后

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

vite+vue项目之后台系统写新增

写在前面

新增

写在最后