jczzq/mone-query

基于element/table的查询组件

mone-query 组件API

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： 这里说来说去最终不影响物质守恒，如果你不是太关心你应用的构建体积可以忽略