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

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

2、function事件模块

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

在srcviewsPermissionmoduleFunctions.ts文件中

import { getModuleListApi, addModule } from '@/api/moduleApi'; // 接口

// ↓↓↓↓↓ 新增 ↓↓↓↓↓export const addForm = reactive({ IsDeleted: false, // 默认为false表示未删除 Name: "", LinkUrl: "", Area: null, // 可以根据需要初始化为null或其它值 Controller: null, Action: null, Icon: null, Code: null, OrderSort: 0, // 根据你的需求初始化数值 Description: null, IsMenu: false, // 根据需求设置默认值 Enabled: true, // 例如设置为true以允许功能 CreateId: "", CreateBy: "", CreateTime: "", ModifyId: null, ModifyBy: null, 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业务页面模块

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

页面srcviewsPermissionModule.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" class="dialog-footer"> el-button @click.native="addFormVisible = false">取消el-button> el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交el-button> div> el-dialog>

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

打完收工：

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

BCVP.VUE3系列第十四课(1)：快速对接业务之查询模板

BCVP.VUE3系列第十四课(3)：快速对接业务之编辑删除模板