WXRedian | BCVP代码创新社 | BCVP.VUE3系列第十四课(3)：快速对接业务之编辑删除模板

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

2、function事件模块

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

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

import { getModuleListApi, addModule, editModule } from '@/api/moduleApi'; // 接口
// ↓↓↓↓↓ 编辑 ↓↓↓↓↓export const editForm = reactive<Module>({    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业务页面模块

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

页面src\views\Permission\Module.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代码创新社

专注于 NetCore 相关技术栈的推广，致力于前后端之间的完全分离，从壹开始，让每一个程序员都能从这里学有所成。