# 原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) # 目的 * 簡單方便，不用寫程式碼就可以實現各種查詢功能 * 把查詢相關的功能都做全，不留遺憾 # 功能 * 快捷查詢 * 個性化查詢方案 * 可以更換各種查詢方式 * 更多的查詢條件 * meta驅動，無需程式碼 # 結構 ## 快捷查詢  如上圖，把常用的幾個查詢條件放在第一行，採用緊湊模式，直接放控制元件，通過 placeholder 的方式標示控制元件是哪個欄位的，這樣在有限的空間裡面可以多放一兩個欄位。 下面可以放功能按鈕（新增等）和資料列表，想要查詢直接點就行，不用點個按鈕，在打開個某某，麻煩。 ## 個性化查詢方案 每個人都可以有自己的查詢習慣，我喜歡（或者工作需要）用這幾個查詢條件，你喜歡那幾個查詢條件，快捷查詢裡就那麼幾個位置，到底放哪幾個欄位？ 不用掙，我們可以按照自己的需要設定不同的查詢方案，放在快捷裡面，你喜歡就行，不影響別人  ## 更換各種查詢方式 想要用訂單編號查詢，使用模糊查詢還是精確查詢？ 精確查詢需要把訂單號都輸入進去，麻煩。 模糊查詢，有可能出現不需要的資料。 > 以前做專案，遇到訂單號規則升級。老編號五位，新編號十位。使用者想查老訂單，把訂單號都輸入全了，結構還是查到一堆不想要的訂單，因為是模糊查詢。 現在好了，使用者可以自己選擇是模糊查詢還是精確查詢。  數字型別可以選擇等於還是區間查詢，甚至大於、小於這些查詢方式都可以加上。  日期類的查詢，也可以選擇是範圍查詢，還是查詢某一天。  這樣我們做設計的時候就不用糾結，這個欄位到底怎麼查才適合，把可能的查詢方式都給客戶，客戶自己選好了。 ## 更多的查詢條件 有些模組，裡面的欄位非常多，再怎麼個性化設定也不夠用，那麼就需要把全部可以查詢的欄位都拿出來顯示，於是就有了這個全部查詢  ### 多行多列可以多佔 採用<table>的格式的格式，多行多列顯示，這樣更規則一些，更容易對齊。 如果有些控制元件比較長，比如時間的範圍查詢、多選組等，那麼可以設定這些長控制元件多佔用幾個td，在調整一下先後順序，整個頁面就可以比較好看，不會出現擠的擠死餓的餓死的情況。 這裡“公司名稱”和“公司郵編”佔用兩列（四個td），下面的日期查詢也佔用了兩列（四個td），這樣整體結構比較緊湊，不會有浪費空間的感覺。 ## meta 驅動 欄位（控制元件）需要的屬性都放在meta裡面，做成單獨的json檔案，用的時候載入進來就好，所以可以說——實現查詢，再也不用寫程式碼了。 # 設計思路 根據查詢的特點，封裝下面幾個控制元件，順便把查詢方式歸納終結一下。再構思一下查詢資料如何存放的問題。  ## 封裝基礎控制元件 基礎控制元件要比表單簡單一些，只需要文字、數字、日期、下拉選擇、單選組、多選組這幾個。其實單選組也可以變成下拉選擇的方式，只是想想有時候做成幾個圓圈圈的形式，選擇起來更方便一些。 ## 查詢方式 主要就是等於、不等於、包含、範圍區間這幾種，只是不同的資料型別會有不同的拼接（查詢條件）方式，所以依據不同的資料型別就變成了這麼多。 應該沒有漏掉的了。 ## 查詢控制元件本身的屬性 查詢控制元件要設定顯示幾列，四列、五列、六列都行，看使用者顯示器有多寬了。 要設定快捷查詢用哪些查詢欄位，還有使用者自己設定的個性化查詢方案。 這些用於生成table 後面的就是每個控制元件需要的meta資料了。 # 程式碼 ## 子控制元件，比如文字類 ~~~ ~~~ ~~~ ~~~ 這個比表單用的子控制元件要簡單很多。 其他的就不貼了，大同小異。 ## 查詢控制元件 暫時沒有做成單獨的控制元件，馬上要改了，因為vue3.0的setup方式是在是要命，當然也可能是我能力有限，反正現在程式碼是看著都頭大，必須重構。 重構之前也可以先看看第一版，以後可以做個對比 ~~~ ~~~ 其中生成查詢語句的地方，不用前端操心，因為那是後端的事情，前端只需要提供資料即可，只是我就是後端，所以先在前端拼一下查詢語句。 ~~~ 有點亂，不貼了。 ~~~ 看了看，實在分不出來個數，不知道在這個setup裡面，要如何組織程式碼結構，目前只有一百多行的js程式碼，包括註釋{}等，實際程式碼也就幾十行，我都懷疑我的程式設計能力了，居然弄的這麼沒法看。 反省中。 改成元件的方式，就可以用data模式了，這樣可看性會高不少。 # 感想 Ant Design Vue，研究了幾天，感覺有個強大的UI庫，太方便了。其實以前就一直想做這種方式的查詢控制元件，但是css很爛，一些效果做不出來，比如抽屜形式的更多查詢條件、查詢方式的切換、個性化方案的選擇等。 日期控制元件太複雜了，研究了好幾天還是沒用研究透，還需要繼續專研，因為關於日期時間查詢的地方還有一些細節沒有實現好。 # one more thing 後面就是資料列表、分頁。然後一個模組的增刪改查就