文檔驅動 —— 查詢組件：將查詢功能作到極致！你說還有啥沒包含進來？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很爛，一些效果作不出來，好比抽屜形式的更多查詢條件、查詢方式的切換、個性化方案的選擇等。
日期控件太複雜了，研究了好幾天仍是沒用研究透，還須要繼續專研，由於關於日期時間查詢的地方還有一些細節沒有實現好。