本篇實戰文章通過給財務模塊的收支記賬頁面增加篩選條件來教大家怎么進行二次開發。你會學到前端和后端的修改，以及整個的思考過程，而不僅僅是直接給你修改的步驟。
【實戰目標】：在收支記賬列表的頂部增加合同名稱和客戶名稱的篩選。
【實戰內容】：
1. 首先我們弄清楚篩選的條件是怎么實現的。
通過瀏覽器的路徑，定位前端頁面位置。在這里是/admin/fd/enterprise/list/index。admin對應的是views/目錄下的pc目錄前端代碼。views/pc下的前端代碼起點是src/views。然后順著fd/enterprise/list/index找到對應的前端vue源文件完整路徑就是：views\pc\src\views\fd\enterprise\list\index.vue了。
找到源文件后，那我們看看頂部搜索框是怎么實現的。看了一圈index.vue代碼似乎沒有篩選框的相關文本框，但是可以肯定的是篩選框肯定是在頁面頂部對吧，那源代碼頂部只有一個formBox組件，那大概率篩選框就是封裝在這個組件里面了。
通過引入路徑定位到formBox的位置：
formBox: () => import('./components/formBox'),我們打開它，然后分析一下代碼。
分析后發現，里面再次引入了一個oaFromBox的組件，這個組件傳入了一個search參數，search的值就剛好對應了已有篩選框的定義。那么這就是列表定義篩選條件的位置。經過對比，陀螺匠其他頁面的篩選框都是通過頁面的search參數來定義的。
然后我們看看search的字段是怎么定義的：
{
field_name: '支付方式',
field_name_en: 'type_id',
form_value: 'select',
// multiple: true,
data_dict: []
}field_name應該是篩選條件中文名，field_name_en是對應的數據字段名，form_value應該是字段類型，select代表下拉列表。最重要的應該是data_dict，填充這個下拉列表的選項。我們需要添加合同名稱和客戶名稱實際上也需要用到這樣的定義，填充data_dict來做篩選。好的，那第一步就完成了，我們知道了篩選是通過定義search來實現。
2. 修改search的值，添加[客戶名稱]和[合同名稱]篩選條件。
在修改之前，我們先分析一下接口和收支表的數據結構。可以看到列表是通過api/ent/bill/list接口一個POST請求來獲取數據的。
數據結構如下圖：
可以看到合同信息是有返回的，存儲在contract字段，只是默認沒有顯示出來。如果我們要添加合同的篩選，先要確認search數組當中field_name_en該用哪個字段名，這里contract本身是個對象，具體用什么字段還不好說，先看看后端代碼再決定。
前面我們知道了后端接口是api/ent/bill/list，那么我們先定位到接口的后端代碼。陀螺匠的后端用的Laravel框架，按照框架的路由規則，我們要定位到接口的源代碼，只需要在VSCODE當中搜中間部分的路由就好了。比如在這里我們搜ent/bill，可以看到BillController.php實現了相關的路由方法，可以確定路由的起點就是這個類。然后我們要找的是list方法，在BillController當中list方法首先通過getSearchField獲取了搜索參數字段，然后直接調用了BillService的getList方法。
getList的第一個參數$where就是我們客戶端提交的search篩選條件，$field是獲取哪些字段*代表全部，$sort是排序，$with相當于是聯表查詢。根據下面的代碼，可以分析出來，最終返回結果當中的contract數據就是通過$with定義來獲取數據的。我們既然要添加篩選字段，那就得從$where入手。這里的$where沒有處理，直接傳給了dao的getList，那我們繼續打開BillDao.php來繼續分析。
通過BillDao的setModel函數，我們知道BillDao關聯的數據表是eb_bill，我們用數據庫管理工具（寶塔面板的數據庫管理）看一下bill表的數據結構，發現這個表并沒有存儲實際的收支數據，然后通過對比，發現eb_client_bill才是實際存儲收支數據的表，并且bill和client_bill之間是用link_id來關聯的。然后分析client_bill表，可以看到表當中有cid字段來表示收支來自哪個合同，eid來標記收支是來自哪個客戶，那這就是我們要找的合同篩選、客戶篩選的實際的字段。
然后我們再看BillDao的getList方法，$where最終是傳給了search方法，并且search方法是重寫了，針對篩選條件做了預處理。
那我們把合同篩選的字段也放到這里。我這里直接給出實現方案：
①對于合同篩選，我們實際傳參是合同ID：前端的field_name_en設置為contract_id，然后在后端針對$where做判斷，如果存在contract_id，那么添加一個限定eb_client_bill表cid的where條件，查詢出client_bill的記錄，再把查詢bill列表的link_id限定在查詢出來的client_bill范圍內。因為BillController.php當中對可篩選的字段做了前期處理，還需要在BillController的getSearchField當中添加contract_id（默認值為空），才能夠獲取到前端傳進來的參數值。
②對于客戶篩選，我們實際傳參的也是客戶ID：前端的field_name_en設置為eid，然后在后端針對$where做判斷，如果存在eid，那么添加一個限定eb_client_bill表eid的where條件，查詢出client_bill的記錄，再把查詢bill列表的link_id限定在查詢出來的client_bill范圍內。因為BillController.php當中對可篩選的字段做了前期處理，還需要在BillController的getSearchField當中添加eid（默認值為空），才能夠獲取到前端傳進來的參數值。
具體寫法如下：
在BillDao當中先引入App\Http\Service\Client\ClientBillService;
對于合同ID，先處理好$where當中的contract_id，因為eb_bill當中并不存在contract_id，所以這里取出來后，一定要在$where當中去掉。然后根據cid=contract_id來查詢client_bill的記錄，取ids。然后限定bill的link_id在ids范圍內。
對于客戶ID，邏輯是相似的，完整的代碼如下。
好了，到這里后端的代碼就改好了。
接下來，還需要想辦法填充前端下拉列表data_dict的值。對比其他已有的篩選項，和翻看了一下其他列表頁的實現方式，我發現項目列表頁前端有現成的客戶列表和合同列表篩選，和我們需求一致，那我們可以直接拿來用。這里講一下前端的實現邏輯。因為在陀螺匠當中，客戶和合同是關聯的，所以這里實際上客戶和合同是聯動的，也就是選擇了客戶，然后再選擇合同，這樣也減少了合同下拉的數量。
先在tableFrom當中增加eid和contract_id定義。
再引入請求接口：
import { selectContractListApi, customerSelectApi } from '@/api/enterprise'然后我們把views\pc\src\views\program\programList\index.vue的getCustomer方法和getContractList、getContract拷貝過來（注意改cid為contract_id)。然后getCustomer是在頁面創建的時候created()方法當中調用。getContractList是在tableFrom.eid值變化的時候調用。
search的新增字段定義如下：
默認情況下，列表里是沒有合同名稱和客戶名稱的，這里我們再額外添加一下。在pc\src\views\fd\enterprise\list\index.vue頁面，找到el-table標簽，然后增加el-table-column標簽行來顯示合同和客戶名稱。參考下圖。
這樣前端代碼就修改完成。前端打包請參考官方的文檔（地址）。
最終效果如圖：
然后別忘了代碼修改用Git管理起來。
個人水平有限，如果錯誤或者更好的實現方式，歡迎指出和交流。有疑問歡迎留言。
最后，介紹一下自己：我是陀螺匠官方服務商，承接陀螺匠的二次開發業務，有需要深度定制OA系統的公司歡迎聯系。目前已收陀螺匠定制開發費用2萬+。
如果這篇帖子有幫到你，請點個贊、留個言讓更多人看到，謝謝！
