原始碼
https://github.com/naturefwvue/nf-vue3-ant
目的
- 簡單方便，不用寫程式碼就可以實現各種查詢功能
- 把查詢相關的功能都做全，不留遺憾
功能
- 快捷查詢
- 個性化查詢方案
- 可以更換各種查詢方式
- 更多的查詢條件
- meta驅動，無需程式碼
結構
快捷查詢
如上圖，把常用的幾個查詢條件放在第一行，採用緊湊模式，直接放控制元件，通過 placeholder 的方式標示控制元件是哪個欄位的，這樣在有限的空間裡面可以多放一兩個欄位。
下面可以放功能按鈕（新增等）和資料列表，想要查詢直接點就行，不用點個按鈕，在開啟個某某，麻煩。
個性化查詢方案
每個人都可以有自己的查詢習慣，我喜歡（或者工作需要）用這幾個查詢條件，你喜歡那幾個查詢條件，快捷查詢裡就那麼幾個位置，到底放哪幾個欄位？
不用掙，我們可以按照自己的需要設定不同的查詢方案，放在快捷裡面，你喜歡就行，不影響別人
更換各種查詢方式
想要用訂單編號查詢，使用模糊查詢還是精確查詢？
精確查詢需要把訂單號都輸入進去，麻煩。
模糊查詢，有可能出現不需要的資料。
以前做專案，遇到訂單號規則升級。老編號五位，新編號十位。使用者想查老訂單，把訂單號都輸入全了，結構還是查到一堆不想要的訂單，因為是模糊查詢。
現在好了，使用者可以自己選擇是模糊查詢還是精確查詢。
數字型別可以選擇等於還是區間查詢，甚至大於、小於這些查詢方式都可以加上。
日期類的查詢，也可以選擇是範圍查詢，還是查詢某一天。
這樣我們做設計的時候就不用糾結，這個欄位到底怎麼查才適合，把可能的查詢方式都給客戶，客戶自己選好了。
更多的查詢條件
有些模組，裡面的欄位非常多，再怎麼個性化設定也不夠用，那麼就需要把全部可以查詢的欄位都拿出來顯示，於是就有了這個全部查詢
多行多列可以多佔
採用<table>的格式的格式，多行多列顯示，這樣更規則一些，更容易對齊。
如果有些控制元件比較長，比如時間的範圍查詢、多選組等，那麼可以設定這些長控制元件多佔用幾個td，在調整一下先後順序，整個頁面就可以比較好看，不會出現擠的擠死餓的餓死的情況。
這裡“公司名稱”和“公司郵編”佔用兩列（四個td），下面的日期查詢也佔用了兩列（四個td），這樣整體結構比較緊湊，不會有浪費空間的感覺。
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
後面就是資料列表、分頁。然後一個模組的增刪改查就全了。