Logo

菜单

Administrator
Administrator
发布于 2025-01-06 / 43 阅读
0
0

FastCrud前端——补充

#fast-crud-ui#fast-crud

FastCrud除了导出核心的几个组件，还有一些类和使用的方法。

类

使用方法

import {FastTableOption, Opt, PageQuery, Query, Order, Cond} from 'fast-crud-ui'

可导出的类介绍

类

说明

使用场景

FastTableOption

FastTable组件唯一接收的prop参数！非常重要，详细配置参考前面FastTable介绍。

FastTable配置

Opt

这是一个枚举。分页、列表查询时，表示筛选条件的比较操作符。完整的操作符有：

{
    EQ: "=",
    NE: "!=",
    GT: ">",
    GE: ">=",
    LT: "<",
    LE: "<=",
    IN: "in",
    NIN: "nin",
    LIKE: "like",
    NLIKE: "nlike",
    NULL: "null",
    NNULL: "nnull",
    EMPTY: "empty",
    NEMPTY: "nempty"
}

分页、列表查询时的筛选条件比较操作符。用于Cond的构造参数。

Cond

列表、分页查询时的筛选条件。

构造函数：(col: String, opt: Opt, val: Any)

列表、分页查询时。如果opt为Opt.NULL、Opt.NNULL这样的值，则val无需传。

Order

列表、分页查询时排序。

构造函数: (col: String, asc: Boolean = false)

列表、分页查询时。

Query

列表查询时，完整参数的类。

空构造函数，通过set给值。完整可用方法有:

  • setCols(cols: Array)

  • addCond(cond: Cond)

  • removeCond(col: String)

  • setCond(conds: Array<Cond>)

  • getCond(col: String)

  • setDistinct()

  • addOrder(col:String, asc: Boolean)

  • removeOrder(col: String)

  • getOrder(col: String)

  • toJson()

完整的属性有:

  • cols: Array<String> = [] 指定返回的列

  • conds: Array<Cond> 指定筛选条件

  • distinct: Boolean = false 指定是否Distinct

  • orders: Array<Order> = [] 指定排序条件

列表查询时。用于操作、构造列表查询的条件(指定返回列、筛选条件、是否distinct、排序、toJson)

注意: toJson会将相关col转为驼峰

PageQuery

PageQuery是Query的继承子类，除了Query的参数和方法，还多了分页的两个参数：

  • current: Number = 1

  • size: Number = 20

分页查询时，用于操作、构造列表查询的条件(指定返回列、筛选条件、是否distinct、排序、toJson)

工具类方法

使用方法

import {util} from 'fast-crud-ui';

if (util.isEmpty("")) {
  // ...
}

util可用的方法列表

方法

参数

说明

isEmpty

(val: Any)

判断空字符串、空对象、空数组、null、undefined

isString

(val: Any)

判断是否为字符串

isNumber

(val: Any)

判断是否为数值

isArray

(val: Any)

判断是否为数组

ifBlank

(val: String)

是否为空串(内部会trim), undefined、null和trim后长度为0, 视为true

isFunction

(val: Any)

是否为函数

isObject

(val: Any)

是否为对象

isBoolean

(val: Any)

是否为布尔值

isNull

(val: Any)

是否为null值

isUndefined

(val: Any)

是否为undefined

defaultIfEmpty

(val: Any, defaultVal: Any)

val如果isEmpty为true, 则返回defaultVal值

defaultIfBlank

(val: String, defaultVal: String)

val如果ifBlank为true, 则返回defaultVal值

camelCaseTo

(val: String, separator: String = '_')

驼峰转指定分隔符(默认下划线)

caseToCamel

(val: String, separator: String = '_')

?(默认下划线)转驼峰

clear

(val: Object)

清空对象所有的键值

deepClone

(val: Object|Array)

深度拷贝

merge

(obj1: Object, obj2: Object, deep: Boolean = true, ignoreNullAndUndefined: Boolean = false, coverFn: Function = (obj1, obj2, key, valueOfObj2) => {})

针对两个obj做merge，策略: 将opt2 merge到opt1, 对于opt1已有的key-value, 默认不覆盖(可由coverFn决定), 对于opt2中新的key-value, 追加到opt1中。deep值表示是否深度执行merge逻辑(不传入则为true). 函数将更改opt1的值, 同时返回opt1

coverMerge

(obj1: Object, obj2: Object, deep: Boolean = true, ignoreNullAndUndefined: Boolean = false)

针对两个obj做merge, 策略: 将opt2中的key-value根据key merge到opt1上： 若op1也存在这个key，则取opt2这个key的值覆盖到opt1上； 若opt1中不存在, 则会被直接追加到opt1中， 因此函数会更改opt1, 执行完后, opt1将是merge后的对象。最后将opt1的深拷贝返回

openDialog

(config: Object)

打开一个模态框(弹窗)。完整配置如下:

{
  component: YourComponentInstance,
  props: {
    // 传递到component中的prop
  },
  dialogProps: {
    // 传递到el-dialog中的prop，如:
    width: "50%" // 这个是默认值
    // 其它原生el-dialog支持的配置
    // ...
    // 此外还支持一个非原生的buttons属性(1.1.2+)
    buttons: [
     {
         text: '确定',
         type: 'primary',
         onClick: (component) => { 
             // component是你传入的YourForm组件实例
             // YourForm里提供的校验方法
             if (!component.validate()) {
                 Message.warning('校验不通过!');
                 return; // 返回非Promise则不会关闭对话框
             }
              // YourForm提供的getModel获取表单数据, 走resolve逻辑
             return Promise.resolve(component.getModel());       
         }
     },
     {
         text: '取消',
         onClick: (component) => {
             return Promise.reject(); // 走catch逻辑
         }
     }
     // 其它自定义按钮
    ]
  }
}

此方法会返回一个Promise, 通过then可接收YourComponentInstance emit的ok事件中传递的参数;

通过catch可接收YourComponentInstance emit的cancel事件。

通过此方法，可以方便的实现js驱动的弹窗，避免部分属性污染组件全局。

pick(1.1.2+)

(config: Object)

内部调用openDialog, 并根据config.option动态创建一个FastTable，以便pick数据。完整配置如下:

{
  option: new FastTableOption({
    // ...具体配置详见FastTable章节中的FastTableOption, 但下面这个是必须要的
    render(h) {
      return [
        h('fast-table-column', {props: {prop: 'id', label: 'id'}}),
        h('fast-table-column', {props: {prop: 'name', label: '姓名', firstFilter: true}})
      ]
    }
  })，
  multiple: false, // 默认是false, 此值将覆盖option.enableMulti
  dialog: {
    // dialog配置项等同于openDialog方法中的dialogProps配置项
    // 不同的是，pick内部默认给的宽度是70%，另外会默认给一组buttons(确认和取消)
    // 当然，你也可以完全再自定义宽度和按钮，不过必要性不大，加一个按钮倒是更有实际意义
  }
}

ElementUI图标扩展——利用...
Fast-Crud前端——Fast...

评论