JinLinC个人在线文档库

页面配置

一个crud主要分为3个部分：

crud.ts： crud配置，每个crud最大的不同就在于此文件，数据管理和界面配置都存放在这个文件中
index.vue：页面组件，一般是较为固定的，只需修改名称即可，也可以在后续添加自定义的组件
api.ts：接口，可以用于实现添删改查请求接口

const crudOptions ={
    request:{},     //http请求
    columns:{       //字段配置
        key:{       //字段key
            column:{},  //对应table-column配置，主要用于表格列的配置
            form:{},    //表单中该字段的公共配置，viewForm、addForm、editForm、search会集成此配置，支持对应ui的form-item配置
            viewForm:{}, //查看表单中该字段的配置，支持对应ui的form-item配置
            addForm:{}, // 添加表单中该字段的配置，支持对应ui的form-item配置
            editForm:{}, //编辑表单中该字段的配置，支持对应ui的form-item配置
            search:{}   //对应查询表单的form-item配置，search: { show: true } 表示显示查询
        }
    },
    search:{        //查询框配置 ，对应fs-search组件
        options:{}  //查询表单配置 ，对应el-from, a-form配置    
    },
    actionbar:{},   //动作条，添加按钮，对应fs-actionbar组件
    toolbar:{},     //工具条 ，对应fs-toolbar组件
    table:{         //表格配置，对应fs-table
        // 对应 el-table / a-table的配置
        slots:{}    // 对应el-table ,a-table的插槽
    },
    data:{},        //列表数据，无需配置，自动从pageRequest中获取 
    rowHandle:{},   //操作列配置，对应fs-row-handle
    form:{          //表单的公共配置,对应el-form，a-form配置
        wrapper:{}  //表单外部容器（对话框）的配置，对应el-dialog,el-drawer,a-model,a-drawer的配置
    },
    viewForm:{},    //查看表单的独立配置
    editForm:{},    //编辑表单的独立配置
    addForm:{},     //添加表单的独立配置
    pagination:{},  //分页配置 ，对应el-pagination / a-pagination
    container:{},   //容器配置 ，对应fs-container
}

在.vue界面中的具体内容解释：

vue

<template>
    <fs-page>
        <fs-crud ref="crudRef" v-bind="crudBinding" customClass="crud-com-box crud-com-table"/>   <!--customClass用于相关样式的引入，可以引入多个-->
    </fs-page>
</template>

<script setup lang="ts">
    import { defineComponent, onMounted, ref } from "vue";
    import { useFs ,OnExposeContext, useCrud, useExpose } from "@fast-crud/fast-crud";
    import createCrudOptions from "./crud";  <!--引入对应的.tsx文件-->
    import {FirstRow} from "./crud";

    //此处为组件定义
    export default defineComponent({
        name: "FsCrudFirst",
        setup(props:any,ctx:any) {
            // // crud组件的ref
            // const crudRef = ref();
            // // crud 配置的ref
            // const crudBinding = ref();
            // // 暴露的方法
            // const {crudExpose} = useExpose({crudRef, crudBinding});
            // // 你的crud配置
            // const {crudOptions} = createCrudOptions({crudExpose});
            // // 初始化crud配置
            // const {resetCrudOptions , appendCrudBinding} = useCrud({crudExpose, crudOptions});

            //  =======以上为fs的初始化代码=========
            //  =======你可以简写为下面这一行========
            const context: any = {props,ctx}; // 自定义变量, 将会传递给createCrudOptions, 比如直接把props,和ctx直接传过去使用
            function onExpose(e:OnExposeContext){} //将在createOptions之前触发，可以获取到crudExpose,和context
            const { crudRef, crudBinding, crudExpose } = useFs<FirstRow>({ createCrudOptions, onExpose, context});
            
            // 页面打开后获取列表数据
            onMounted(async () => {
                crudExpose.doRefresh();
            });
            return {
                crudBinding,
                crudRef
            };
        }
    });
</script>

<style lang="scss" scoped>
.crud-com-box {
    margin-top: 8px;
    padding: 0 10px;
    border-radius: 8px 0 0 8px;
    box-sizing: border-box;
    background-color: #fff;
}

.crud-com-table {
    height: 100%;
}
</style>

在api.ts文件中的基本格式为：

import {AddReq, DelReq, EditReq, InfoReq, UserPageQuery} from "@fast-crud/fast-crud";
import {request} from "/@/utils/service";
export const apiPrefix = 'api/rbi_system/';

export function postFault(query: AddReq) {
    return request({
        url: apiPrefix + `fault/`,
        method: 'post',
        data: query,
    });
}

这段代码是一个函数 postFault(query: AddReq)，用于向服务器发送一个 POST 请求来添加故障数据
export function postFault(query: AddReq) { ... }：这行代码定义了一个导出的函数 postFault，接受一个参数 query，类型为 AddReq。这个函数负责向服务器发送POST请求来添加故障数据。
return request({ ... });：在函数内部，通过调用 request 函数发送HTTP请求
url: apiPrefix + 'fault/'：指定了请求的URL地址，包括了 apiPrefix 变量和'fault/'字符串，构成了完整的请求地址
method: 'post'：指定了请求的方法为 POST，表示这个请求是用来提交数据给服务器端的，用于添加新的故障数据
data: query：将传入的query对象作为请求的数据发送到服务器端，这个对象包含了需要添加的故障数据的信息
综合来看，这段代码定义了一个函数 postFault(query: AddReq)，通过向指定URL发送 POST 请求来添加故障数据，请求中携带了需要添加的数据信息。这样的函数可以方便在前端代码中调用，实现向服务器提交故障数据的操作

最后还需要在路由文件夹下添加路由程序，具体程序格式如下：

export const crudResources = [
    {
        title: "CRUD示例",
        name: "crud",
        path: "/crud",
        redirect: "/crud/basis",
        meta: {
            icon: "ion:apps-sharp"
        },
        children: [
            // 在此位置增加路由配置
            {
                title: "myFirstCrud",
                name: "myFirstCrud",
                path: "/test/myFirstCrud",
                component: "/test/myFirstCrud/index.vue"
            },
        ]
    }
]

页面配置 ​

页面配置