use

初始化crud

useFs

• 说明: 初始化crud
• 类型： (props:UseFsProps<R,C>):UseFsRet<R>
• 参数说明：
  • props.crudExposeRef : crudExpose创建好之后，会填充进此ref，可以让你在useFs之前创建使用crudExpose的方法(要在useFs之后才能调用)
  • props.context: 上下文容器，可以放入任何东西
  • ret.context: props传入的上下文容器，如果没传则会自动创建一个
  • R: 行数据模型，默认为any
  • C: 上下文模型，默认为any
• 示例：

//index.vue

type ContextModel = {
    props:any;
    ctx:any;
}
type RowModel = {
    id?:number;
    name?:string;
    //...
}; //行数据模型
export default {
    setup(props:any,ctx:any){
        const context: ContextModel = {
            props,ctx
        }; //自定义变量，传给createCrudOptions的额外参数（可以任意命名，传任意参数）
        const crudExposeRef:Ref<CrudExpose> = ref() //crudExpose创建好之后，会填充进此ref，可以在useFs之前创建使用crudExpose的方法
        const customAdd = ()=>{
            crudExposeRef.value.openAdd({row:{}})
        }
       
        const { crudBinding, crudRef, crudExpose, resetCrudOptions } = useFs<RowModel,ContextModel>({ createCrudOptions, context, crudExposeRef});
        return {
            crudBinding,
            crudRef,
            customAdd
        }
    }
}

// crud.ts
import { CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from "@fast-crud/fast-crud";
import { addRequest, delRequest, editRequest, pageRequest } from "./api";

//------------------------------------↓↓↓↓↓↓↓↓↓↓ 获取传入的额外参数
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
   const {props,ctx} = context
    return {
    crudOptions: {
      // 自定义crudOptions配置
    }
  }
}

useFsAsync

• 说明: 异步初始化crud , 可以从后台获取配置后再初始化crud, 需要事先定义crudRef,crudBinding
• 类型： (props:UseFsProps):Promise<UseFsRet>
• demo： antdv / element / naive
• 示例：

//index.vue
export default {
    setup(){
        const crudBinding:Ref<CrudBinding> = ref()
        const crudRef:Ref = ref()
        const context: any = {}; //变量上下文，传给createCrudOptions的额外参数（可以任意命名，任意多个）
        const onExpose = (e:OnExposeContext)=>{}
        onMounted(async ()=>{
            // 要求createCrudOptions也要是一个异步方法
            const {  crudExpose, context } = await useFs({crudBinding,crudRef, createCrudOptions, context });
        })
        return {
            crudBinding,
            crudRef
        }
    }
}

props.createCrudOptions

• 说明: 创建CrudOptions的方法，需要用户实现，并传入useFs 或 useFsAsync
• 类型： (props:CreateCrudOptionsProps):CreateCrudOptionsRet | (props:CreateCrudOptionsProps):Promise<CreateCrudOptionsRet>

ret.resetCrudOptions

• 说明: useFs返回值之一，可以重新设置crudOptions，重设后表格数据会被清空
• 类型： (opts:CrudOptions)=>void
• 示例：

//index.vue
export default {
    setup(){
        const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });

        // 此处演示如何合并crudOptions，
        // 合并后在原有配置基础上追加多一个字段
        // 然后进行重置（重置后，data数据会被清空，需要重新refresh）
        onMounted(()=>{
            resetCrudOptions(_.merge({},crudOptions,{
                columns:{
                    addField:{
                        title:"追加字段",
                        type:'text'
                    }
                }
            }))
            crudExpose.doRefresh()
        })
        
        return {
            crudBinding,
            crudRef
        }
    }
}

form对话框

useFormWrapper

• 说明: 获得打开自定义对话框能力，可以同时打开多个（默认的view/add/edit只能打开一个）
• 类型： ()=>{opts:OpenDialogProps}
• 示例：

import {useFormWrapper,useColumns,CrudOptions} from "@fast-crud/fast-crud";
import createCrudOptions from 'crud'

async function openCustomDialog(){
  const {openDialog} = useFormWrapper()
  const {buildFormOptions} = useColumns();
  const {crudOptions} = createCrudOptions({...} as CrudOptions);
  const opts = buildFormOptions(crudOptions); //将 crudOptions 转化为form表单所需要的options
  const wrapperRef = await openDialog(opts) //打开对话框
  //获取formData
  const formData = wrapperRef.getFormData();
  wrapperRef.setFormData({xxx:'value'});
  //对话框实例
  return wrapperRef
}

WARNING

使用此方式打开的对话框无法通过crudExpose.getFormWrapperRef、crudExpose.getFormData获取到实例Ref和data。你只能通过返回值获取

插件

registerCrudOptionsPlugin