【mone-query】基於 element-ui 的通用查詢組件

mone-query

Github: https://github.com/jczzq/mone...
Demo: https://blog.jczzq.com/mone-q...

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高度	auto8080px	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	查詢結果集完成(成功或失敗都會觸發)	-

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： 這裏說來講去最終不影響物質守恆，若是你不是太關心你應用的構建體積能夠忽略