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

// 新增业务数据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: 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业务页面模块

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

页面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" 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代码创新社

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