BCVP.VUE3系列第十四课(2)：快速对接业务之新增模板

BCVP 开发者社区出品BCVP V3开发数字化服务化绿色化

周末学习不停歇，最近新开一个VUE3全新系列，这一系列会从0开始学习VUE3，使用Vite、TS、Pinia、Element-Plus、mittBus等新知识点，既是查漏补缺，也是知识分享。

目前项目的登录、鉴权、动态菜单、权限按钮、页面布局、标签页、数据增删改查案例等基本功能都已经写完，整体效果如动图，欢迎各位小伙伴可以加入到这个项目，可以提交PR，早期参与贡献的，可以作为核心成员。

代码地址：

https://github.com/anjoy8/bcvp.vue3.git

这是每篇文章一节课一个分支，方便大家学习，系列文章：

《

》

《第二课：基于泛型基类封装Axios请求》

《第三课：封装Axios拦截器》

《第四课：登录页设计》

《第五课：获取用户信息》

《第六课：获取动态菜单接口》

《第七课：基于布局模式实现动态菜单渲染》

《第八课：丰富面包屑组件》

《第九课：实现tabs标签栏》

《第十课：个人中心模块》

《第十一课：基于总线实现框架多种布局样式》

《第十二课：渲染动态权限按钮》

《第十三课：框架底座已写完，欢迎加入我们！》

0、本文介绍

本文参考的是开源项目

https://gitee.com/HalseySpicy/Geeker-Admin/tree/template

今天主要是帮助使用本框架的同学可以快速的基于底座进行设计业务逻辑，基于现有的模板，按照统一约定好的规则，直接对关键字进行查找替换即可，本文接着说增删改查之——新增：

1、API接口模块

脚本已经是上一篇查询页面中设计好，就需要补充新增即可

参考src\api\moduleApi.ts

// 新增业务数据export const addModule = async (params: Module): Promise<BaseResponse<string>> => { try { const response = await post<BaseResponse<string>>('/api/module/post', params); return response; } catch (error) { throw new Error('请求失败'); }};

2、function事件模块

事件页面在上篇也新增好了，继续补充新增模块的相关内容。

在src\views\Permission\moduleFunctions.ts文件中

import { getModuleListApi, addModule } from '@/api/moduleApi'; // 接口// ↓↓↓↓↓ 新增 ↓↓↓↓↓export const addForm = reactive<Module>({ IsDeleted: false, // 默认为false表示未删除 Name: "", LinkUrl: "", Area: , // 可以根据需要初始化为或其它值 Controller: , Action: , Icon: , Code: , OrderSort: 0, // 根据你的需求初始化数值 Description: , IsMenu: false, // 根据需求设置默认值 Enabled: true, // 例如设置为true以允许功能 CreateId: "", CreateBy: "", CreateTime: "", ModifyId: , ModifyBy: , ModifyTime: "", ParentId: "", // 初始化为合适的字符串，可能是"0"或"根" Id: ""});export const handleAdd = async () => { addFormVisible.value = true; // 使用引用重置表单 if (addFormRef.value) { addFormRef.value.resetFields(); }};export const addSubmit = async () => { const formEl = addFormRef.value; // 获取表单实例 if (!formEl) return; await formEl.validate(async (isValid) => { if (isValid) { addLoading.value = true; const postData = toRaw(addForm); postData.CreateTime = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"); postData.ModifyTime = postData.CreateTime; postData.IsDeleted = false; console.log(postData); const { success, msg } = await addModule(postData); if (success) { ElMessage.success('提交成功'); await handleQuery({ name: '' }); } else { ElMessage.error('提交失败' + msg); } addLoading.value = false; addFormVisible.value = false; } else { ElMessage.error('验证失败，请检查输入项'); } });};// ↑↑↑↑↑ 新增 ↑↑↑↑↑

3、Vue业务页面模块

还是继续基于原有页面进行补充。

页面src\views\Permission\Module.vue

<el-dialog title="新增" v-model="addFormVisible" :close-on-click-modal="false"> <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addFormRef"> <el-form-item label="接口地址" prop="LinkUrl"> <el-input v-model="addForm.LinkUrl" auto-complete="off"></el-input> </el-form-item> <el-form-item label="接口描述" prop="Name"> <el-input v-model="addForm.Name" auto-complete="off"></el-input> </el-form-item> <el-form-item label="状态" prop="Enabled"> <el-select v-model="addForm.Enabled" placeholder="请选择状态"> <el-option label="激活" :value="true"></el-option> <el-option label="禁用" :value="false"></el-option> </el-select> </el-form-item> </el-form> <div slot="footer">提交</el-button> </div> </el-dialog>

整体还是比较简单的，得益于我们比较规整的封装，只需要绑定上对应的form表单就行了。

打完收工：