文档驱动 —— 查询组件：将查询功能作到极致！你说还有啥没包含进来？antdv + vue 3.0 全新体验

时间 2020-09-20

标签文档驱动查询组件功能作到极致有啥包含进来 antdv vue 3.0 全新体验繁體版

原文原文链接

源码

https://github.com/naturefwvue/nf-vue3-antcss

目的

简单方便，不用写代码就能够实现各类查询功能
把查询相关的功能都作全，不留遗憾

功能

快捷查询
个性化查询方案
能够更换各类查询方式
更多的查询条件
meta驱动，无需代码

结构

快捷查询

如上图，把经常使用的几个查询条件放在第一行，采用紧凑模式，直接放控件，经过 placeholder 的方式标示控件是哪一个字段的，这样在有限的空间里面能够多放一两个字段。
下面能够放功能按钮（添加等）和数据列表，想要查询直接点就行，不用点个按钮，在打开个某某，麻烦。前端

个性化查询方案

每一个人均可以有本身的查询习惯，我喜欢（或者工做须要）用这几个查询条件，你喜欢那几个查询条件，快捷查询里就那么几个位置，到底放哪几个字段？
不用挣，咱们能够按照本身的须要设置不一样的查询方案，放在快捷里面，你喜欢就行，不影响别人
vue

更换各类查询方式

想要用订单编号查询，使用模糊查询仍是精确查询？
精确查询须要把订单号都输入进去，麻烦。
模糊查询，有可能出现不须要的数据。git

之前作项目，遇到订单号规则升级。老编号五位，新编号十位。用户想查老订单，把订单号都输入全了，结构仍是查到一堆不想要的订单，由于是模糊查询。github

如今好了，用户能够本身选择是模糊查询仍是精确查询。
编程

数字类型能够选择等于仍是区间查询，甚至大于、小于这些查询方式均可以加上。
json

日期类的查询，也能够选择是范围查询，仍是查询某一天。
后端

这样咱们作设计的时候就不用纠结，这个字段到底怎么查才适合，把可能的查询方式都给客户，客户本身选好了。数组

meta 驱动

字段（控件）须要的属性都放在meta里面，作成单独的json文件，用的时候加载进来就好，因此能够说——实现查询，不再用写代码了。

设计思路

根据查询的特色，封装下面几个控件，顺便把查询方式概括终结一下。再构思一下查询数据如何存放的问题。

封装基础控件

基础控件要比表单简单一些，只须要文本、数字、日期、下拉选择、单选组、多选组这几个。其实单选组也能够变成下拉选择的方式，只是想一想有时候作成几个圆圈圈的形式，选择起来更方便一些。

查询方式

主要就是等于、不等于、包含、范围区间这几种，只是不一样的数据类型会有不一样的拼接（查询条件）方式，因此依据不一样的数据类型就变成了这么多。
应该没有漏掉的了。

查询控件自己的属性

查询控件要设置显示几列，四列、五列、六列都行，看用户显示器有多宽了。
要设置快捷查询用哪些查询字段，还有用户本身设置的个性化查询方案。
这些用于生成table
后面的就是每一个控件须要的meta数据了。

代码

子控件，好比文本类

<template>
  <div style="width:160px;" class="components-input-demo-presuffix">
    <a-input
      :id="'id' + meta.controlId"
      :name="'c' + meta.controlId"
      :value="value"
      :placeholder="meta.placeholder"
      :title="meta.title"
      :maxlength="meta.maxlength"
      :autocomplete="meta.autocomplete"
      :key="'ckey_'+meta.controlId"
      size="small"
      @input="myInput"
      >
        <template v-slot:addonBefore>
          <a-dropdown>
            <a class="ant-dropdown-link">{{kind}}</a>
            <template v-slot:overlay>
              <a-menu @click="handleMenuClick">
                <a-menu-item key="401">=</a-menu-item>
                <a-menu-item key="402">≠</a-menu-item>
                <a-menu-item key="403">含</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
    </a-input>
  </div>
</template>

<script>

export default {
  name: 'nf-find-input',
  model: {
    prop: 'modelValue',
    event: 'input'
  },
  props: {
    modelValue: String,
    meta: {
      type: Object,
      default: () => {
        return {
          controlId: Number, // 编号，区别同一个表单里的其余控件
          colName: String, // 字段名称
          controlType: Number, // 用类型编号表示type
          placeholder: String,
          title: String, // 提示信息
          maxlength: Number, // 最大字符数
          autocomplete: { // off
            type: String,
            default: 'on'
          }
        }
      }
    }
  },
  data () {
    return {
      value: '',
      kind: '含',
      kindkey: '403',
      findKind: {
        401: '=', // 字符串
        402: '≠',
        403: '含',
        404: '不含',
        405: '起始',
        406: '结束',
        411: '=', // 数字
        412: '≠',
        413: '>',
        414: '≥',
        415: '<',
        416: '≤',
        421: '=', // 日期
        422: '≠',
        423: '>',
        424: '≥',
        425: '<',
        426: '≤',
        431: '在',
        432: '在',
        433: '在'
      }
    }
  },
  methods: {
    myInput: function (e) {
      this.value = e.target.value
      this.send()
    },
    handleButtonClick (e) {
      console.log('click left button', e)
    },
    handleMenuClick (e) {
      this.kindkey = e.key
      this.kind = this.findKind[e.key]
      console.log('click', e)
      this.send()
    },
    send: function () {
      var returnValue = []
      returnValue.push(this.kindkey)
      returnValue.push(this.value)
      var colName = this.meta.colName
      this.$emit('update:modelValue', returnValue) // 返回给调用者
      this.$emit('getvalue', returnValue, colName) // 返回给中间组件
    }
  }
}
</script>

这个比表单用的子控件要简单不少。
其余的就不贴了，大同小异。

查询控件

暂时没有作成单独的控件，立刻要改了，由于vue3.0的setup方式是在是要命，固然也多是我能力有限，反正如今代码是看着都头大，必须重构。
重构以前也能够先看看初版，之后能够作个对比

<template>
  <div class="home">
    <h1>查询演示</h1>
    <div style="background-color:#dddddd;height:600px;width:100px;float:left;">
      <a href="#" @click="myClick('companyFind')">公司信息</a> <br>
      <a href="#" @click="myClick('personFind')">员工信息</a>
    </div>
    <div style="background-color:#eee;height:600px;width:1100px;float:left;">
      <!--快捷查询，一行-->
      <div
        :style="{
          height: '70px',
          overflow: 'hidden',
          position: 'relative',
          border: '1px solid #ebedf0',
          borderRadius: '2px',
          padding: '2px',
          textAlign: 'left',
          background: '#fafafa',
        }"
      >
        <div class="ant-table ant-table-body ant-table-default ant-table-bordered" >
          <table role="all">
            <tbody class="ant-table-tbody">
              <tr>
                <td><!--个性化查询方案-->
                  <a-dropdown size="small">
                    <template v-slot:overlay>
                      <a-menu @click="handleMenuClick">
                        <a-menu-item v-for="(item,key) in findMeta.customer" :key="key">
                          <UserOutlined />{{item.name}}</a-menu-item>
                      </a-menu>
                    </template>
                    <a-button style="margin-left: 8px"> 快捷 <DownOutlined /> </a-button>
                  </a-dropdown>
                </td>
                <template v-for="key in findMeta.quickFind" :key="key">
                  <td align="left" style="padding:3px 3px;height:20px" v-if="!isEnd(tr, td)">
                    <nfInput v-model="modelValue[getMeta2(key).colName]"
                    :meta="findItem[key]" />
                  </td>
                </template>
                <td><a-button type="primary" @click="showDrawer">更多</a-button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--更多查询条件，用抽屉打开-->
      <a-drawer
        title="更多查询条件"
        placement="top"
        :closable="false"
        :visible="findVisible"
        @close="onClose"
      >
        <div class="ant-table ant-table-body ant-table-default ant-table-bordered" >
          <table role="all">
            <tbody class="ant-table-tbody">
              <template v-for="(tr, index) in findTable" :key="index"><!--循环行-tr-->
                <tr>
                  <template v-for="(td, index2) in tr" :key="index+'-'+index2"><!--循环列-td-->
                    <td align="right" style="padding:3px 3px;height:20px">
                      {{findItem[td].title}}：
                    </td>
                    <td :colspan="findItem[td].tdCount" align="left" style="padding:3px 3px;height:20px">
                      <nfInput v-model="modelValue[getMeta2(td).colName]"
                      :meta="findItem[td]" />
                    </td>
                  </template>
                </tr><!--循环行-tr 结束 -->
              </template>
            </tbody>
          </table>
        </div>
      </a-drawer>
      <!--生成查询语句，这个是不用的-->
      <div align="left" style="padding:100px 15px">
        <span v-for="(item,key,index) in modelValue" :key="index"><!--遍历model-->
          <template v-if="typeof item === 'object'"><!--判断是否是数组-->
            <template v-if="item.length == 2"> <!--判断数组长度-->
              {{key}} {{findWhere[item[0]].replace('{k}',item[1])}} and <br>
            </template>
            <template v-if="item.length == 3"> <!--判断数组长度-->
              {{key}} {{findWhere[item[0]].replace('{k1}',item[1]).replace('{k2}',item[2])}} and <br>
            </template>
          </template>
        </span>
      </div>
    </div>
  </div>
</template>

其中生成查询语句的地方，不用前端操心，由于那是后端的事情，前端只须要提供数据便可，只是我就是后端，因此先在前端拼一下查询语句。

有点乱，不贴了。

看了看，实在分不出来个数，不知道在这个setup里面，要如何组织代码结构，目前只有一百多行的js代码，包括注释{}等，实际代码也就几十行，我都怀疑个人编程能力了，竟然弄的这么无法看。
检讨中。

改为组件的方式，就能够用data模式了，这样可看性会高很多。

感想

Ant Design Vue，研究了几天，感受有个强大的UI库，太方便了。其实之前就一直想作这种方式的查询控件，可是css很烂，一些效果作不出来，好比抽屉形式的更多查询条件、查询方式的切换、个性化方案的选择等。
日期控件太复杂了，研究了好几天仍是没用研究透，还须要继续专研，由于关于日期时间查询的地方还有一些细节没有实现好。

one more thing

后面就是数据列表、分页。而后一个模块的增删改查就全了。