本篇實戰(zhàn)文章通過給財務(wù)模塊的收支記賬頁面增加篩選條件來教大家怎么進行二次開發(fā)。你會學(xué)到前端和后端的修改，以及整個的思考過程，而不僅僅是直接給你修改的步驟。

【實戰(zhàn)目標】：在收支記賬列表的頂部增加合同名稱和客戶名稱的篩選。

【實戰(zhàn)內(nèi)容】：

1. 首先我們弄清楚篩選的條件是怎么實現(xiàn)的。

通過瀏覽器的路徑，定位前端頁面位置。在這里是/admin/fd/enterprise/list/index。admin對應(yīng)的是views/目錄下的pc目錄前端代碼。views/pc下的前端代碼起點是src/views。然后順著fd/enterprise/list/index找到對應(yīng)的前端vue源文件完整路徑就是：views\pc\src\views\fd\enterprise\list\index.vue了。

找到源文件后，那我們看看頂部搜索框是怎么實現(xiàn)的?？戳艘蝗ndex.vue代碼似乎沒有篩選框的相關(guān)文本框，但是可以肯定的是篩選框肯定是在頁面頂部對吧，那源代碼頂部只有一個formBox組件，那大概率篩選框就是封裝在這個組件里面了。

通過引入路徑定位到formBox的位置：

 formBox: () => import('./components/formBox'),

我們打開它，然后分析一下代碼。

分析后發(fā)現(xiàn)，里面再次引入了一個oaFromBox的組件，這個組件傳入了一個search參數(shù)，search的值就剛好對應(yīng)了已有篩選框的定義。那么這就是列表定義篩選條件的位置。經(jīng)過對比，陀螺匠其他頁面的篩選框都是通過頁面的search參數(shù)來定義的。

然后我們看看search的字段是怎么定義的：

       {
          field_name: '支付方式',
          field_name_en: 'type_id',
          form_value: 'select',
          // multiple: true,
          data_dict: []
        }

field_name應(yīng)該是篩選條件中文名，field_name_en是對應(yīng)的數(shù)據(jù)字段名，form_value應(yīng)該是字段類型，select代表下拉列表。最重要的應(yīng)該是data_dict，填充這個下拉列表的選項。我們需要添加合同名稱和客戶名稱實際上也需要用到這樣的定義，填充data_dict來做篩選。好的，那第一步就完成了，我們知道了篩選是通過定義search來實現(xiàn)。

2. 修改search的值，添加[客戶名稱]和[合同名稱]篩選條件。

在修改之前，我們先分析一下接口和收支表的數(shù)據(jù)結(jié)構(gòu)?？梢钥吹搅斜硎峭ㄟ^api/ent/bill/list接口一個POST請求來獲取數(shù)據(jù)的。

數(shù)據(jù)結(jié)構(gòu)如下圖：

可以看到合同信息是有返回的，存儲在contract字段，只是默認沒有顯示出來。如果我們要添加合同的篩選，先要確認search數(shù)組當中field_name_en該用哪個字段名，這里contract本身是個對象，具體用什么字段還不好說，先看看后端代碼再決定。

前面我們知道了后端接口是api/ent/bill/list，那么我們先定位到接口的后端代碼。陀螺匠的后端用的Laravel框架，按照框架的路由規(guī)則，我們要定位到接口的源代碼，只需要在VSCODE當中搜中間部分的路由就好了。比如在這里我們搜ent/bill，可以看到BillController.php實現(xiàn)了相關(guān)的路由方法，可以確定路由的起點就是這個類。然后我們要找的是list方法，在BillController當中l(wèi)ist方法首先通過getSearchField獲取了搜索參數(shù)字段，然后直接調(diào)用了BillService的getList方法。

getList的第一個參數(shù)$where就是我們客戶端提交的search篩選條件，$field是獲取哪些字段*代表全部，$sort是排序，$with相當于是聯(lián)表查詢。根據(jù)下面的代碼，可以分析出來，最終返回結(jié)果當中的contract數(shù)據(jù)就是通過$with定義來獲取數(shù)據(jù)的。我們既然要添加篩選字段，那就得從$where入手。這里的$where沒有處理，直接傳給了dao的getList，那我們繼續(xù)打開BillDao.php來繼續(xù)分析。

通過BillDao的setModel函數(shù)，我們知道BillDao關(guān)聯(lián)的數(shù)據(jù)表是eb_bill，我們用數(shù)據(jù)庫管理工具（寶塔面板的數(shù)據(jù)庫管理）看一下bill表的數(shù)據(jù)結(jié)構(gòu)，發(fā)現(xiàn)這個表并沒有存儲實際的收支數(shù)據(jù)，然后通過對比，發(fā)現(xiàn)eb_client_bill才是實際存儲收支數(shù)據(jù)的表，并且bill和client_bill之間是用link_id來關(guān)聯(lián)的。然后分析client_bill表，可以看到表當中有cid字段來表示收支來自哪個合同，eid來標記收支是來自哪個客戶，那這就是我們要找的合同篩選、客戶篩選的實際的字段。

然后我們再看BillDao的getList方法，$where最終是傳給了search方法，并且search方法是重寫了，針對篩選條件做了預(yù)處理。

那我們把合同篩選的字段也放到這里。我這里直接給出實現(xiàn)方案：

①對于合同篩選，我們實際傳參是合同ID：前端的field_name_en設(shè)置為contract_id，然后在后端針對$where做判斷，如果存在contract_id，那么添加一個限定eb_client_bill表cid的where條件，查詢出client_bill的記錄，再把查詢bill列表的link_id限定在查詢出來的client_bill范圍內(nèi)。因為BillController.php當中對可篩選的字段做了前期處理，還需要在BillController的getSearchField當中添加contract_id（默認值為空），才能夠獲取到前端傳進來的參數(shù)值。

②對于客戶篩選，我們實際傳參的也是客戶ID：前端的field_name_en設(shè)置為eid，然后在后端針對$where做判斷，如果存在eid，那么添加一個限定eb_client_bill表eid的where條件，查詢出client_bill的記錄，再把查詢bill列表的link_id限定在查詢出來的client_bill范圍內(nèi)。因為BillController.php當中對可篩選的字段做了前期處理，還需要在BillController的getSearchField當中添加eid（默認值為空），才能夠獲取到前端傳進來的參數(shù)值。

具體寫法如下：

在BillDao當中先引入App\Http\Service\Client\ClientBillService;

對于合同ID，先處理好$where當中的contract_id，因為eb_bill當中并不存在contract_id，所以這里取出來后，一定要在$where當中去掉。然后根據(jù)cid=contract_id來查詢client_bill的記錄，取ids。然后限定bill的link_id在ids范圍內(nèi)。

對于客戶ID，邏輯是相似的，完整的代碼如下。

好了，到這里后端的代碼就改好了。

接下來，還需要想辦法填充前端下拉列表data_dict的值。對比其他已有的篩選項，和翻看了一下其他列表頁的實現(xiàn)方式，我發(fā)現(xiàn)項目列表頁前端有現(xiàn)成的客戶列表和合同列表篩選，和我們需求一致，那我們可以直接拿來用。這里講一下前端的實現(xiàn)邏輯。因為在陀螺匠當中，客戶和合同是關(guān)聯(lián)的，所以這里實際上客戶和合同是聯(lián)動的，也就是選擇了客戶，然后再選擇合同，這樣也減少了合同下拉的數(shù)量。

先在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是在頁面創(chuàng)建的時候created()方法當中調(diào)用。getContractList是在tableFrom.eid值變化的時候調(diào)用。

search的新增字段定義如下：

默認情況下，列表里是沒有合同名稱和客戶名稱的，這里我們再額外添加一下。在pc\src\views\fd\enterprise\list\index.vue頁面，找到el-table標簽，然后增加el-table-column標簽行來顯示合同和客戶名稱。參考下圖。

這樣前端代碼就修改完成。前端打包請參考官方的文檔（地址）。

最終效果如圖：

然后別忘了代碼修改用Git管理起來。

個人水平有限，如果錯誤或者更好的實現(xiàn)方式，歡迎指出和交流。有疑問歡迎留言。

最后，介紹一下自己：我是陀螺匠官方服務(wù)商，承接陀螺匠的二次開發(fā)業(yè)務(wù)，有需要深度定制OA系統(tǒng)的公司歡迎聯(lián)系。目前已收陀螺匠定制開發(fā)費用2萬+。

如果這篇帖子有幫到你，請點個贊、留個言讓更多人看到，謝謝！