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

// 编辑业务数据export const editModule = async (params: Module): Promisestring>> => { try { const response = await putstring>>('/api/module/put', params); return response; } catch (error) { throw new Error('请求失败'); }

2、function事件模块

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

在srcviewsPermissionmoduleFunctions.ts文件中

import { getModuleListApi, addModule, editModule } from '@/api/moduleApi'; // 接口
// ↓↓↓↓↓ 编辑 ↓↓↓↓↓export const editForm = 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 handleEdit = async () => { if (!(currentRow.value && currentRow.value?.Id)) { ElMessage.error('请选择要编辑的一行数据！'); return; }
 editFormVisible.value = true; editLoading.value = true; if (currentRow.value) { Object.assign(editForm, currentRow.value); } editLoading.value = false; isResouceShow.value++;};export const editSubmit = async () => { const formEl = editFormRef.value; // 获取表单实例 if (!formEl) return;
 await formEl.validate(async (isValid) => { if (isValid) { ElMessageBox.confirm("确认提交吗？", "温馨提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(async () => { const postData = toRaw(editForm); postData.ModifyTime = formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"); console.log(postData); const { success, msg } = await editModule(postData); if (success) { ElMessage.success('提交成功'); await handleQuery({ name: '' }); } else { ElMessage.error('提交失败' + msg); } });
 editFormVisible.value = false;
 } else { ElMessage.error('验证失败，请检查输入项'); } });};
// ↑↑↑↑↑ 编辑 ↑↑↑↑↑

3、Vue业务页面模块

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

页面srcviewsPermissionModule.vue

  el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false"> el-form :model="editForm" label-width="80px" :rules="addFormRules" ref="editFormRef"> el-form-item label="接口地址" prop="LinkUrl"> el-input v-model="editForm.LinkUrl" auto-complete="off">el-input> el-form-item> el-form-item label="接口描述" prop="Name"> el-input v-model="editForm.Name" auto-complete="off">el-input> el-form-item> el-form-item label="状态" prop="Enabled"> el-select v-model="editForm.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="editFormVisible = false">取消el-button> el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交el-button> div> el-dialog>

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

打完收工：

当然，删除更是简单，定一个接口调用，写个function即可，具体的可以看看代码，就能立刻明白了。

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

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

BCVP.VUE3系列第十三课：框架底座已写完，欢迎加入我们！