vue組件(25)做一個(gè)更好用的查詢控件(一)多種查詢方式

查詢?nèi)?/h1>

查詢功能由三個(gè)要素組成:查詢字段、查詢關(guān)鍵字、查詢方式

一般的查詢側(cè)重前兩項(xiàng),比如按照手機(jī)號(hào)查詢、按照訂單號(hào)查詢等等。

但是查詢方式呢?往往都是只設(shè)置了一種,比如查詢手機(jī)號(hào),只能是模糊查詢,包含要查的數(shù)字就算,不會(huì)做更詳細(xì)的區(qū)分。

比如我想查138 開頭的手機(jī)號(hào),那么中間可以能出現(xiàn)138 ,我想查0318結(jié)尾的手機(jī)號(hào),那么0318也可能出現(xiàn)在中間。

一般的情況下,如果客戶不是特意強(qiáng)調(diào)需求的話,一個(gè)字段只會(huì)給出一個(gè)查詢方式,不會(huì)提供其他備選的查詢方式。

這個(gè),是不是不夠靈活?

所以我想做一個(gè)更靈活的查詢控件,首先就要實(shí)現(xiàn)多種查詢方式。

那么有多少種查詢方式呢?簡單的整理了一下

/**
 * 查詢方式
 * * 數(shù)字 =、<>、>=、<=、between
 * * 字符串 =、不等于、包含、起始于、結(jié)束于
 * * 日期時(shí)間 =、between
*/
export const findKindList = {
  // 字符串
  401: { // 等于 字符
    id: 401,
    name: '=',
    where: '{col} = "{key}"'
  },
  402: { // 不等于 字符
    id: 402,
    name: '不等',
    where: '{col} <> "{key}"'
  },
  403: { // 包含 字符
    id: 403,
    name: '包含',
    where: '{col} like "%{key}%"'
  },
  404: { // 不包含 字符
    id: 404,
    name: '不包含',
    where: '{col} not like "%{key}%"'
  },
  405: { // 起始于 字符
    id: 405,
    name: '起始于',
    where: '{col} like "{key}%"'
  },
  406: { // 結(jié)束于 字符
    id: 406,
    name: '結(jié)束于',
    where: '{col} like "%{key}"'
  },
  // 數(shù)字
  411: { // 等于 數(shù)字
    id: 411,
    name: '等于',
    where: '{col} = {key}'
  },
  412: { // 不等于 數(shù)字
    id: 412,
    name: '不等于',
    where: '{col} <> {key}'
  },
  413: { // 大于 數(shù)字
    id: 413,
    name: '>',
    where: '{col} > {key}'
  },
  414: { // 大于等于 數(shù)字
    id: 414,
    name: '>=',
    where: '{col} >= {key}'
  },
  415: { // 小于 數(shù)字
    id: 415,
    name: '<',
    where: '{col} < {key}'
  },
  416: { // 小于等于 數(shù)字
    id: 416,
    name: '<=',
    where: '{col} <= {key}'
  },
  417: { // 范圍 數(shù)字
    id: 417,
    name: '從',
    where: '{col} between {key1} and {key2}'
  },
  // 多選組
  420: {
    id: 420,
    name: 'in',
    where: '{col} in ({key})'
  }
}

基本是這些,然后就是日期的查詢方式,這個(gè)比較亂。

以前只是“等于日期”,日期范圍就可以了,但是現(xiàn)在日期控件不僅可以提供日期,還可以提供“年月”、“年”、“年周”這類的形式。

而且后端也出現(xiàn)了用int或者char的類型來存放日期數(shù)據(jù)。

那么綜合起來要如何做查詢呢?

似乎排列組合的結(jié)果有點(diǎn)多。

等于
日期、日期+時(shí)間、年月、年周

范圍
開始日期 + 結(jié)束日期、年月(比如202101)、年周(比如202104)、年(比如2021)
開始年月+結(jié)束年月、開始年周+結(jié)束年周、開始年份 + 結(jié)束年份

大于小于的情況。

其中年月,就是指的某一個(gè)月份,比如202101,指的是2021年01月01日到 2021年01月31日

有的時(shí)候只是查一個(gè)月的范圍,那么也就沒必要選擇開始日期+結(jié)束日期的形式,或者開始年月+結(jié)束年月這么麻煩。

所以日期的查詢還是很麻煩的,目前是想用兩個(gè)角度的分類。

首先按照查詢條件來分:等于、范圍、大于、小于
然后按照日期類型來分:日期、日期+時(shí)間、年月、年周、年

這樣避免羅列組合的數(shù)量。另外還有一個(gè)顯示格式和交給后端的格式的問題。這就要看后端期待什么格式了,是字符串的‘2021-01-01’的形式,還是標(biāo)識(shí)的日期格式,或者是時(shí)間戳。

總是很麻煩,那么為啥要考慮這么多呢?因?yàn)榫褪沁@些事情,前端不愛管,后端也不愛管,那么誰來管?只能是做控件的來操心了呀,要不然豈不是封裝了個(gè)寂寞。。。

所以還是需要一些時(shí)間來完善的。

目前是這樣的,比較簡陋


0001簡單查詢.png

數(shù)據(jù)格式

如果只是字段和查詢關(guān)鍵字的話,可以用key-value的對(duì)象形式,但是現(xiàn)在多了一個(gè)查詢條件,那么要如何設(shè)計(jì)呢?

  • 方案一:
{
   colName: 'title',
   findKind: 401,
   findValue: '某某某'
},
{
  ...
}

比較標(biāo)準(zhǔn)吧,只是太繁瑣,如果項(xiàng)目要求查詢必須用get,那么這個(gè)就太長了,很容易超出字符數(shù)的限制。

  • 方案二:
title:[401, '某某某']

這個(gè)比較簡潔,字段名稱作為key,后面跟一個(gè)數(shù)組,第一個(gè)元素是查詢條件,第二個(gè)元素是查詢關(guān)鍵字,如果是范圍查詢,那么第二個(gè)元素是數(shù)組。

缺點(diǎn)就是沒有明確的區(qū)分說明,不看定義,說知道數(shù)組里面都是啥東東。

查詢方式為啥又是數(shù)字?

這個(gè),個(gè)人習(xí)慣吧,我是特別喜歡數(shù)字的形式,因?yàn)椤昂米R(shí)別”,當(dāng)然這個(gè)不是針對(duì)程序員的,而是針對(duì)代碼的。其實(shí)這一套查詢解決方案,包括前后端的,都不用程序員去讀去寫,而是可視化的方式來實(shí)現(xiàn)的,所以看到的是數(shù)字對(duì)應(yīng)的name。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容