Skip to content

Latest commit

 

History

History
293 lines (262 loc) · 10.9 KB

README.md

File metadata and controls

293 lines (262 loc) · 10.9 KB
Raw

mone-query 组件API

mone-query mone-query是基于element-ui的查询组件，它通过丰富的配置让你尽可能少的前端编码就可以完成大部分报表需求。

必要依赖

vue >= 2.5.2
element-ui >= 2.4.0
axios >= 0.16.0

安装

CommonJS方式

npm install mone-query -D

umd方式

<link href="mone-query/lib/style.css" rel="stylesheet">
<script src="../mone-query/lib/index.js"></script>

快速上手

import Vue from "vue";
import 'mone-query/style.css';
import MoneQuery from "mone-query";
Vue.use(MoneQuery, {
  // options
  ...
})

<mone-query border :config="config" :data="data" />
...
import Config from "@/Config.json";
import Data from "@/Data.json";
data() {
  return {
    // 传入请求路径
    config: "/api/config",
    data: "/api/data"
    // or
    // 传入对象
    config: Config.resultData,
    data: Data.resultData
  };
}

运行机制

  1. 校验入参

    mone-query有两个必要参数config和data, config控制表格结构和自定义功能，data渲染数据行，这两个参数可以传入ajax路径字符串，也可以传入json对象，其他类型的参数传入时会抛出异常。注意组件还有其它一些参数可以传入，组件传入的参数与config有一些参数是重复的，甚至你还可以在Vue.use时给所有的组件实例传入默认参数，这是为了增加组件配置的灵活性，不过通过组件直接传入的参数优先级最高，config属性其次，最后是默认配置

  2. 根据config参数获取配置

    如果config传入字符串，那么组件首先会发起Get请求查询配置json，这段期间表格会一直loading到请求结束，如果请求失败，表格将会触发on-error事件，使用者可以监听事件做后续处理，或者让页面保持错误面板的状态；请求成功的结果将直接作为配置对象使用。如果config传入json，将直接作为配置对象使用(具体结构示例参照Config.json)。

  3. 根据配置对象渲染表结构

    受配置影响的部分包括：

    • colbox: 工具栏的字段面板
    • cols: 表头
    • ......

  4. 根据data参数获取结果集

    如果data传入字符串，那么组件会将之作为ajax路径查询结果集。如果data传入json，将直接作为结果集使用（具体结构示例参照Data.json）。

  5. 有时候在结果集渲染之前需要对某些字段进行处理，比如映射新值、时间转换等等，这时提供formatters对象，这是一个属性名为col.prop、属性值为该列过滤函数的对象，过滤函数有四个形参：row, column, cellValue, index

MoneQuery Attributes

属性名 类型 含义 可选值 默认值
*config Object , String 表头列 ajax路径\配置对象 {}
*data Array , String 数据行 ajax路径\数据集合 []
height String/Number Table高度 auto\80\80px auto
max-height String/Number Table的最大高度 - -
border Boolean 是否带有纵向边框 - false
primary-key String 主键(数据行多选时必要) - id
page-name String 分页参数中的pageSize键名 - pageIndex
size-name String 分页参数中的pageSize键名 - pageSize
rows-name String ajax请求结果集键名 - resultData.rows
total-name String ajax请求结果总数键名 - resultData.total
colbox Object 字段显示框方位 - { placement: "top", width: "540px", trigger: "click" }
visible-fields Boolean,Array 默认显示字段 true: 全部显示; false: 全部隐藏; ["propA", "propB", ...] true
visible-fields-config Array<FieldGroup> 字段在工具栏的显示配置 - -
formatters Object 包含各个列过滤函数的对象 - {}
show-action Boolean 是否显示右侧操作栏 - false
show-delete Boolean 是否显示删除按钮 - false
show-header Boolean 是否显示表头（包含筛选条件） - true
show-selection Boolean 是否显示多选框 - true
show-index Boolean 是否自定义序列 - false

MoneQuery Events

事件名 说明 参数
delete 点击删除按钮触发 selection
search 点击查询按钮触发 parameters
config-success 查询配置成功 res
config-error 查询配置失败 error
config-complete 查询配置完成(成功或失败都会触发) -
data-success 查询结果集成功 res
data-error 查询结果集失败 error
data-complete 查询结果集完成(成功或失败都会触发) -

MoneQuery Slots

名称 说明
header 头部栏
header-left 头部栏左侧

config Attributes

属性名 类型 含义 可选值 默认值
baseUrl String ajax根路径 - -
primary-key String 主键(数据行多选时必要) - id
cols Array<Col> 列 - id
page-name String 分页参数中的pageSize键名 - pageIndex
size-name String 分页参数中的pageSize键名 - pageSize
rows-name String ajax请求结果集键名 - resultData.rows
total-name String ajax请求结果总数键名 - resultData.total
colbox Object 字段显示框方位 - { placement: "top", width: "540px", trigger: "click" }
visible-fields Boolean,Array 默认显示字段 true: 全部显示; false: 全部隐藏; ["propA", "propB", ...] true
visible-fields-config Array<FieldGroup> 字段在工具栏的显示配置 - -
show-action Boolean 是否显示右侧操作栏 - false
show-delete Boolean 是否显示删除按钮 - false
show-header Boolean 是否显示表头（包含筛选条件） - true
show-selection Boolean 是否显示多选框 - true
show-index Boolean 是否自定义序列 - false

colbox Attributes

属性名 类型 含义 可选值 默认值
placement String 展示方位 - top
width String 面板宽度 - 540px
trigger String 触发事件类型 - click

Col class

属性名 类型 含义 可选值 默认值
label String 列标题 - -
prop String 列字段名 - -
type String 列字段类型 varchar、option、date、datetime -
width String 列宽度 width width
order Number 排列顺序 - -
action String 查询类型 - varchar:lk,option:in; data:lt& gt; datetime:le& ge
placeholder String 输入提示 - -
fixed Boolean 是否固定列 - -
options Array 多选组件的选项列表,eg: [{label, value}] - -

Col.type enum

枚举值 含义
varchar 文本
option 多选
date 日期
datetime 日期时间

FieldGroup class

属性名 类型 含义 可选值 默认值
title String 组标题 - -
order String 排列顺序 - -
selection Array 选中的 - -
checkAll Boolean 是否全选 - true
isIndeterminate Boolean 是否半选 - false
colProps Array 组成员 - -

查询配置标准结构（application/json）

  • resultCode 响应码
  • resultData 响应结果(注意resultData必须是JSON对象)
    • primaryKey String 主键prop（默认：id）
    • rowsName String 结果集属性名，将根据rowsName指定的属性名获取目标结果集(默认: resultData.rows)
    • totalName String 结果总数属性名，将根据totalName指定的属性名获取目标结果总数(默认: resultData.total)
    • pageName String 当前页属性名，将根据pageName指定的属性名设置分页参数(默认: pageIndex)
    • sizeName String 每页条数属性名，将根据sizeName指定的属性名设置分页参数(默认: pageSize)
    • pageSize Number 默认每页查询的数据数量(默认: 20)
    • cols Array 列头（字段）对象集合
      • label String 标题
      • prop String 属性名
      • type String 属性类型
        • varchar 文本
        • option 多选
        • date 日期
        • datetime 日期时间
        • bit 单选（暂不支持）
        • int 数字（暂不支持）
        • time 时间（暂不支持）
      • width String 列宽
      • order Number 排列顺序
    • colbox Object 可选字段配置
      • placement String 展示方位（默认：top）
      • width String 面板宽度（默认：540px）
      • trigger String 触发事件类型（默认：click）
      • value Array （默认：所有字段）

查询参数标准结构（application/json）

  • colProps Array 要查询的字段列
  • params Array 查询参数字段
    • field String
    • action String
      • eq 等于
      • ne 不等于
      • in 包含在
      • ni 不包含在
      • sw start with
      • ew end with
      • lk like
      • gt 大于
      • lt 小于
      • ge 大于等于
      • le 小于等于
    • filedType String
      • varchar 字符串
      • option 多选
      • date 日期范围
      • datetime 日期时间范围
      • bit 单选（暂不支持）
      • int 数字（暂不支持）
      • time 时间（暂不支持）
    • value any
  • sort Array 排序字段
    • prop String 字段名
    • type String 排序方式
      • asc 正序
      • desc 降序
  • page Object
    • pageIndex Number 当前页（默认：1）
    • pageSize Number 每页多少条（默认：20）
# 查询参数示例
cols: ["name", "age", "grade", "isMarried", "birthday", "schoolTime"],
params: [
  {
    field: "name",
    action: "lk",
    filedType: "varchar",
    value: "李",
  },
  {
    field: "birthday",
    action: "lt",
    filedType: "datetime",
    value: "2019-04-13",
  },
  {
    field: "birthday",
    action: "ge",
    filedType: "datetime",
    value: "2019-03-13",
  },
  {
    field: "grade",
    action: "in",
    filedType: "option",
    value: [1,2,5],
  }
]
sort: [
  {
    prop: "age',
    type: "asc"
  }
],
page: {
  pageIndex: 1,
  pageSize: 20
}

查询结果集标准结构（application/json）

  • [resultCode] 响应码
  • [resultData] 响应结果
    • [rows] 结果集
    • [total] 结果总数

轻量版

mone-query默认依赖element-ui部分组件和axios请求库，这里有两个构建版供你的应用选择：

  • 全部引入(js≈360kb, style≈103kb)：包括element相关组件(可以在应用中使用这些组件，因为它们已经全局注册过了)；另外是axios。
  • 只引入核心代码(≈24kb, style≈1kb)，如果你的应用已经引入了element和axios，那建议只引入核心代码即可。 
      import "mone-query/lib/lite/style.css";
  import moneQuery from "mone-query/lib/lite";
  ...

PS： 这里说来说去最终不影响物质守恒，如果你不是太关心你应用的构建体积可以忽略