UNPKG

crud-up

Version:

基于el-plus-crud上做细微修改以适配新的依赖特性 原版请见https://github.com/KDJack/el-plus-crud

571 lines (541 loc) 14.9 kB
import { Ref } from 'vue' // 基础类型 export type IBaseObj = IBaseObj /** * 表单回调 */ export interface IFormBack { response?: any formData?: IBaseObj callBack: Function } /** * 按钮回调data */ export interface IBtnBack { row: IBaseObj callBack?: Function field: string rowIndex: number files?: Array<any> } /** * 通用请求 */ export interface IFetch<T> { // 查询数据的方法,入参和返回格式固定 (data?: any): Promise<T | null> } /** * 设定如何解析请求结果 */ export interface IFetchTableMap { // 结果列表key-默认records list?: string page?: { // 总数key-默认total total?: string // 当前页key-默认current current?: string // 最大显示条数 pageSize?: string } } /** * 表单描述 */ export interface IFormDesc { [key: string]: IFormDescItem } /** * 基础的descItem */ export type IDescItem = { type?: string label?: string | ((data?: any) => string) prop?: string | ((data?: any) => string) width?: string format?: string | ((val?: any, row?: any) => string) vif?: boolean | ((data?: any) => boolean) vshow?: boolean | ((data?: any) => boolean) limit?: number required?: boolean | Ref<boolean> | ((data?: any) => boolean) style?: IBaseObj | ((data?: any) => IBaseObj) // 事件 on?: { [key: string]: Function } // 查看详情 linkId?: string | ((val: any, formData: any) => string) linkType?: string | ((val: any, formData: any) => string) linkLabel?: string | ((val: any, formData: any) => string) // 内部使用属性 _vif?: boolean // 权限 auth?: string // 其他字符串 [key: string]: any } /** * 表单项描述 */ export interface IFormDescItem extends IDescItem { field?: string disabled?: boolean | Ref<boolean> | ((data?: any) => boolean) showLabel?: boolean labelWidth?: string | number tip?: string | ((data?: any) => string) size?: string placeholder?: string attrs?: IBaseObj | ((data?: any) => IBaseObj) options?: Ref<Array<IFormDescItemOptionItem>> | Array<IFormDescItemOptionItem> | (() => Array<IFormDescItemOptionItem>) | IFetch<Array<IFormDescItemOptionItem>> | string default?: string | boolean | number defaultKey?: { value: string; label: string } rules?: string | Array<any> valueFormat?: Function | string isBlank?: boolean colspan?: number upType?: string multiple?: boolean noTip?: boolean maxSize?: number remote?: Function // 如果是列表 tableConfig?: ITableConfig tableAttr?: IBaseObj tableEvent?: IBaseObj // 内部接口 _type?: string _tip?: string _disabled?: boolean _attrs?: IBaseObj _label?: string _prop?: IBaseObj _options?: Array<IFormDescItemOptionItem> // 其他属性 // 级联下拉是否只选中最后一级 checkStrictly?: boolean // key的前缀-方便同一个表单中,存在多个daterange等组件 propPrefix?: string // 开始时间key startTimeKey?: string // 结束时间key endTimeKey?: string } /** * option描述 */ export interface IFormDescItemOptionItem { l?: string v?: string | number label?: string value?: string | number children?: Array<IFormDescItemOptionItem> } /** * 表单配置 */ export interface IFormConfig { // 表单描述对象 formDesc: IFormDesc // 表单的列数,默认是1 column?: number // 提交前执行 beforeRequest?: (data?: any) => any // 请求地址 requestFn?: (data?: any) => Promise<T> // 更新的函数 updateFn?: (data?: any) => Promise<T> // 请求成功时 success?: (data?: IFormBack) => any // 成功时的提醒文本 successTip?: string | ((data?: any) => string) // 列表的ref tableRef?: any } /** * group表单配置 */ export interface IFormGroupConfig { // 表单的列数,默认是1 column?: number // 提交前执行 beforeRequest?: (data: T) => T beforeValidate?: (data: T) => T // 请求地址 requestFn?: (data?: any) => Promise<T> // 更新的函数 updateFn?: (data?: any) => Promise<T> // 请求成功时 success?: (data: IFormBack) => any // 成功时的提醒文本 successTip?: string | ((data?: any) => string) // 列表的ref tableRef?: any // 分组配置信息 group: Array<{ // 小标题 title?: string // 是否显示showBtns showBtns?: boolean // 最大宽度 maxWidth?: string // label宽度 labelWidth?: string // 表单的列数,默认是1 column?: number // 表单描述对象 formDesc: IFormDesc // 是否显示 vif?: boolean | ((data?: any) => boolean) // 是否显示-内部使用 _vif?: boolean // 表单的ID fid?: string }> } /************************************列表************************************ */ /** * 表格项 */ export interface IColumnItem extends IDescItem { minWidth?: string color?: string | Array<string> align?: string headerAlign?: string btns?: Array<IColumnItem> isBatch?: Boolean fixed?: 'left' | 'right' count?: number nodes?: Array<any> inline?: Boolean text?: Boolean children?: Array<IColumnItem> scShow?: boolean showOverflowTooltip?: boolean content?: any hstyle?: any noHide?: boolean | ((data?: any) => boolean) // 真正的vif __vif?: boolean // 是否合并行 isRowSpan?: boolean // 是否合并列 isColSpan?: boolean // 判断合并行的prop数组 rsProps?: Array<string> } /** * 导出项 */ export interface IExportConfig { // 按钮名称 label?: string // 导出的URL接口地址 url?: string // 查询导出URL的fetch fetch?: IFetch<string> // 如何去解析数据结果获取url urlKey?: string | Array<string> // 请求夹带的数据 data?: Object // 文件名 name?: string // 是否增加token权限 isAuth?: Boolean // token名称 tokenKey?: string // 是否需要拼接查询条件 noQuery?: Boolean // 导出文件的后缀 suffix?: string // 请求类型 method?: 'get' | 'post' // 请求数据处理 beforeRequest?: Function // 启用禁用状态 disabled?: boolean // token关键key tokenKey?: string } /** * 列表工具 */ export interface ITableToolbar { // 列表顶部的功能按钮 btns?: Array<any> // btn靠右显示, 只有当formConfig为null,可设置改属性 btnRight?: boolean // 顶部查询条件的form formConfig?: IFormConfig // 顶部导出excel配置 export?: IExportConfig | Array<IExportConfig> } /** * 表单数解析 */ export interface ITreeProps { // 子集的key字段 children: string // 是否拥有子集的key hasChildren?: boolean } /** * 展开配置 */ export interface IExpConfig { // 是否自动展开 isAutoLoadData?: Boolean // 展开自身的查询主键的Id名称 idName?: string // 渲染嵌套数据的配置选项 treeProps?: ITreeProps // 需要查询的父类ID-展开类型的列表时采用;; queryId?: string } /** * 统计项 */ export interface IStatisticConfig { // 数据库对应字段 dbKeys: Array<string> // 需要统计的字段信息 keys: Array<Object> } /** * 列表的选项卡配置 */ export interface ITableTabConf { prop?: string tabs: Array<ITableTabItem> attrs?: IBaseObj | Function // 远程拉取数量信息 fetch?: IFetch<any> // 查询条件 queryMap?: any // 默认选中的下标 default?: number // 默认选中的值 defaultVal?: string | number } /** * 列表的选项配置 */ export interface ITableTabItem { label: string | ((data?: any) => string) value: string | number key?: string } /** * 尾行合计配置 */ export interface ISummaryConf { // 尾行合计的属性名, 多个用逗号分割 prop: string // 尾行合计的显示名称, 多个用逗号分割 label?: string // 格式化 format?: string // 尾行合计的合并方法 sumFn?: (tableData: any[], allSelectRowList?: any[]) => string //尾行合计的样式 hstyle?: any vif?: boolean | ((data?: any) => boolean) } /** * 列表配置 */ export interface ITableConfig { // 列表的名称,全局唯一,且固定,方便存储列表设置 tbName?: string tabConf?: ITableTabConf // 调用接口 fetch?: IFetch<any> // 如何去解析数据结果 fetchMap?: IFetchTableMap // 列表配置,包含表头,每列信息等 column?: Array<IColumnItem> // 查询条件 queryMap?: any // 列表顶部的工具栏 toolbar?: ITableToolbar // 每行自身展开配置项 explan?: IExplanConfig // 针对每行的class进行单独控制 formatRowClass?: Function // 如果数据返回有多级,那么这里就是解析的地方 比如 ['res', 'data', 'list'] 这说明,要获取的是请求返回数据中,rea.data.list 这个数据 dataListModel?: Array<string> // 统计信息 statistic?: IStatisticConfig // 最大高度 maxHeight?: number // 表格属性 tableAttr?: any // 显示选中项的名称Key showSelectNameKey?: String // 配置通用的合计行 summaryConf?: ISummaryConf } /** * 对象存储Info */ export interface IOssInfo { id?: string name?: string furl?: string mimeType?: string fsize?: number suffix?: string busId?: string busType?: number // upload组件需要的字段 url?: string uid?: number previewUrl?: string shareUrl?: string uploadId?: string } /************************************表单详情************************************ */ export interface IFormGroupItem { title?: string // 表单描述对象 formDesc: IFormDesc // 表单的列数,默认是1 column?: number // 最大宽度 maxWidth?: string // 是否是表格 isTable?: boolean // labelWidth labelWidth?: string } /************************************批量下载************************************ */ /** * 文件(夹)信息 */ export interface IFiles { id: string // 是否是文件夹 folder?: 0 | 1 // 文件(夹)名称 name: string // 文件地址 url?: string // 文件夹中的文件列表 files?: Array<IFiles> } /** * 下载信息 */ export interface IDownInfo { // 文件名 name: string // 到期时间 endData?: string // 来源 sc?: string // 状态:1可下载;2已过期;3已删除;4无权限; 5无效 status: 1 | 2 | 3 | 4 | 5 // 是否zip压缩,如果不是压缩,则默认下载files[0] zip: 0 | 1 // 文件列表 files: Array<IFiles> } /** * 下载文件信息 */ export interface IDownFile { // 文件名 name: string // 文件夹名 folder: string // 文件地址 url: string // 上传进度 percent?: number } /** * 注册curd配置 */ export interface ICRUDConfig { // 是否开始debug调试模式,目前主要时一些console信息打印 debug?: boolean // element plus组件的size size?: 'default' | 'small' | 'large' // 本地存储的key前缀 storagePrefix?: string // 表单相关配置 form?: { // 输入长度限制 leng?: { // input长度限制 input?: number // 文本域长度限制 textare?: number // 数字输入框限制信息 nbinput?: { // 最小数值 min?: number // 最大数值 max?: number // 小数位数 precision?: number // 是左右加减,还是 右侧的上下箭头 element plus number组件的属性 controlsPosition?: 'right' | '' } } // 用户选择组件设置 linkUser?: { // 获取用户列表的查询接口 getUserList: IFetch<any> // 部门列表key deptListKey: string } // 用户自定义form组件的名称,使用这个,全局注册的名字为el-plus-form-xxx,form中就可以使用xxx进行引入 comList?: string[] } table?: IFetchTableMap // 上传组件配置 upload?: { // 类型 minio 或者 七牛 / 阿里云 或者不填,不填则完全依赖 action type?: 'minio' | 'quniu' | 'aliyun' // 上传路径,也可以单独配置到子组件desc中 action?: string | ((data?: any) => string | Promise<any>) // 如果action返回的值是对象的话,则按照以下map进行解析 actionMap?: { // 获取文件上传地址的对象key,如果不在根级,则需使用数组的形式。如:data.xxx.action 就需要写为 ['data', 'xxx', 'action'] actionKey?: string | Array<string> // 获取文件对象的名称key,如果不在根级,则需使用数组的形式。如:data.xxx.name 就需要写为 ['data', 'xxx', 'name'] nameKey?: string | Array<string> // 获取文件上传id对象key,如果不在根级,则需使用数组的形式。如:data.xxx.uploadId 就需要写为 ['data', 'xxx', 'uploadId'] uploadIdKey?: string | Array<string> // 获取文件对象的地址key,如果不在根级,则需使用数组的形式。如:data.xxx.objectUrl 就需要写为 ['data', 'xxx', 'objectUrl'] objectUrlKey?: string | Array<string> } // 上传图片最大限制 maxISize?: number // 上传文件最大限制 maxFSize?: number // 真正的上传方法 uploadFn?: (data?: Object) => Promise<any> // 获取上传的token信息 token?: string | Object | ((data?: Object) => Promise<Object>) // 获取文件上传的token对象key,如果不在根级,则需使用数组的形式。如:data.xxx.token 就需要写为 ['data', 'xxx', 'token'] tokenKey?: string | Array<string> // 获取文件访问签名-私有云或私有minio时必填 sign?: (uploadId: string) => Promise<any> // 解析签名数据Map signMap?: { // 获取文件对象的地址key,如果不在根级,则需使用数组的形式。如:data.xxx.objectUrl 就需要写为 ['data', 'xxx', 'objectUrl'] objectUrlKey?: string | Array<string> // 获取文件上传地址的对象key,如果不在根级,则需使用数组的形式。如:data.xxx.previewUrl 就需要写为 ['data', 'xxx', 'previewUrl'] previewUrlKey?: string | Array<string> } // 分片配置 sharding?: { // TODO } } // token 或者是 获取token 的方法 token?: string | ((data?: any) => string) // 校验按钮权限方法 auth?: (data?: any) => boolean }