知识森林

Appearance

On this page

useSource 资源管理 ​

由于钩子useSource作为前后台数据交互的传送门，页面中的数据最终需要汇聚在这里，如增删改查页面的table、form、useCurd，所以useSource需要抛出页面中需要用到的方法及变量，同时也需要收集相关组件的数据，以确保成功完成前后台交互。以下是useSource抛出的数据。

如何使用 ​

ts
import { useSource } from '@dt-frames/ui'

const {
    api,                    // 返回完整的api
    form,                   // 与form进行交互
    table,                  // 与table进行交互
    curd,                   // 与useCurd进行交互
    loading,                // 加载状态集合
    dataSource,             // table中的数据
    onOPenAddDialog,        // 调用此方法可打开新增弹框
    onOpenUpdateDialog,     // 调用此方法可打开编辑弹框
    onDelete,               // 单个文件删除
    onDeletes,              // 批量删除
    onQueryById,            // 通过id查询数据
    onSave,                 // 文件保存
    onSearch,               // 查询
    onReset,                // 重置
} = useSource({
    baseUrl: 'xxxx',
    exportName: '测试',
    api: {
        ....
    }
})

// 如果页面中用到table 需要将资源中的table与useTable挂上关系（** useCurd 与 useForm 一样的道理 **）
const [] = useTable({
    ...table,
    columns: []
})

SourceOption ​

属性说明类型默认值版本
baseUrl基础路径string
exportName文件导出名称string | ComputedRef
queryAfterUpdate编辑成功后是否需要查询 包括增删改booleantrue
beforeUpdate编辑或修改之前需要做的公共操作(model: Recordable) => boolean | Recordable | undefined
afterUpdate编辑或修改之后需要做的公共操作(data: Recordable) => void
api配置api接口ApiObjType

ApiObjType ​

以下是固定 api 的 key 值。

属性说明类型默认值版本
add新增string | ApiType
update修改string | ApiType
save保存string | ApiType
deletes删除string | ApiType
queryById查找string | ApiType
queryPage分页查询string | ApiType
[key: string]其他string | ApiType

ApiType ​

以下是关于调用后台接口相关的配置数据，我们可以在请求接口前、后处理相关的参数。

属性说明类型默认值版本
api请求后台接口的路径string
type请求类型'get' | 'post' | 'put' | 'delete''post'
header请求头信息{ 'Content-Type': HttpContentTypeEnum } & Partial<AxiosRequestHeaders>
model默认的基础数据Recordable
beforeFetch请求之前( params: Recordable ) => any
afterFetch请求之后( data: Recordable) => void

注意：
1、请求之前（beforeFetch），如果返回了false, 则会停止请求后台接口；
2、如果返回了数据，则请求后台时候使用返回的数据；
3、我们也可以利用对象内存空间的特性，直接修改params,而没有返回值。

某些情况，后台返回的数据结构与我们期望的完全不同，则需要重写返回的数据结构：

ts
import { useSource } from '@dt-frames/ui'
    import { HttpContentTypeEnum } from '@dt-frames/core'

    const {  } = useSource({
        ....
        api: {
            queryPage: {
                api: 'xxx',
                header: {
                    onlyData: false,    // 返回所有的数据，而不是只返回data数据
                    header: {
                        'Content-Type': HttpContentTypeEnum.FORM_DATA
                    }
                },
                afterFetch( data ) {
                    // 这里需要对数据进行处理
                    ....

                    // 以下是公司框架需要返回的分页查询数据格式
                    return {
                        code: 200,
                        data: {
                            records: [],    // 分页数据
                            current: 1,     // 当前为第几页
                            pages: 1,       // 总共多少页
                            size: 10,       // 分页大小
                            total: 8        // 总共多少条数据
                        }
                    }
                }
            }
        }
    })