vue组件(25)做一个更好用的查询控件(一)多种查询方式

查询三要素

查询功能由三个要素组成:查询字段、查询关键字、查询方式

一般的查询侧重前两项,比如按照手机号查询、按照订单号查询等等。

但是查询方式呢?往往都是只设置了一种,比如查询手机号,只能是模糊查询,包含要查的数字就算,不会做更详细的区分。

比如我想查138 开头的手机号,那么中间可以能出现138 ,我想查0318结尾的手机号,那么0318也可能出现在中间。

一般的情况下,如果客户不是特意强调需求的话,一个字段只会给出一个查询方式,不会提供其他备选的查询方式。

这个,是不是不够灵活?

所以我想做一个更灵活的查询控件,首先就要实现多种查询方式。

那么有多少种查询方式呢?简单的整理了一下

/**
 * 查询方式
 * * 数字 =、<>、>=、<=、between
 * * 字符串 =、不等于、包含、起始于、结束于
 * * 日期时间 =、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: { // 结束于 字符
    id: 406,
    name: '结束于',
    where: '{col} like "%{key}"'
  },
  // 数字
  411: { // 等于 数字
    id: 411,
    name: '等于',
    where: '{col} = {key}'
  },
  412: { // 不等于 数字
    id: 412,
    name: '不等于',
    where: '{col} <> {key}'
  },
  413: { // 大于 数字
    id: 413,
    name: '>',
    where: '{col} > {key}'
  },
  414: { // 大于等于 数字
    id: 414,
    name: '>=',
    where: '{col} >= {key}'
  },
  415: { // 小于 数字
    id: 415,
    name: '<',
    where: '{col} < {key}'
  },
  416: { // 小于等于 数字
    id: 416,
    name: '<=',
    where: '{col} <= {key}'
  },
  417: { // 范围 数字
    id: 417,
    name: '从',
    where: '{col} between {key1} and {key2}'
  },
  // 多选组
  420: {
    id: 420,
    name: 'in',
    where: '{col} in ({key})'
  }
}

基本是这些,然后就是日期的查询方式,这个比较乱。

以前只是“等于日期”,日期范围就可以了,但是现在日期控件不仅可以提供日期,还可以提供“年月”、“年”、“年周”这类的形式。

而且后端也出现了用int或者char的类型来存放日期数据。

那么综合起来要如何做查询呢?

似乎排列组合的结果有点多。

等于
日期、日期+时间、年月、年周

范围
开始日期 + 结束日期、年月(比如202101)、年周(比如202104)、年(比如2021)
开始年月+结束年月、开始年周+结束年周、开始年份 + 结束年份

大于小于的情况。

其中年月,就是指的某一个月份,比如202101,指的是2021年01月01日到 2021年01月31日

有的时候只是查一个月的范围,那么也就没必要选择开始日期+结束日期的形式,或者开始年月+结束年月这么麻烦。

所以日期的查询还是很麻烦的,目前是想用两个角度的分类。

首先按照查询条件来分:等于、范围、大于、小于
然后按照日期类型来分:日期、日期+时间、年月、年周、年

这样避免罗列组合的数量。另外还有一个显示格式和交给后端的格式的问题。这就要看后端期待什么格式了,是字符串的‘2021-01-01’的形式,还是标识的日期格式,或者是时间戳。

总是很麻烦,那么为啥要考虑这么多呢?因为就是这些事情,前端不爱管,后端也不爱管,那么谁来管?只能是做控件的来操心了呀,要不然岂不是封装了个寂寞。。。

所以还是需要一些时间来完善的。

目前是这样的,比较简陋


0001简单查询.png

数据格式

如果只是字段和查询关键字的话,可以用key-value的对象形式,但是现在多了一个查询条件,那么要如何设计呢?

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

比较标准吧,只是太繁琐,如果项目要求查询必须用get,那么这个就太长了,很容易超出字符数的限制。

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

这个比较简洁,字段名称作为key,后面跟一个数组,第一个元素是查询条件,第二个元素是查询关键字,如果是范围查询,那么第二个元素是数组。

缺点就是没有明确的区分说明,不看定义,说知道数组里面都是啥东东。

查询方式为啥又是数字?

这个,个人习惯吧,我是特别喜欢数字的形式,因为“好识别”,当然这个不是针对程序员的,而是针对代码的。其实这一套查询解决方案,包括前后端的,都不用程序员去读去写,而是可视化的方式来实现的,所以看到的是数字对应的name。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容