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

【實(shí)戰(zhàn)目標(biāo)】：在收支記賬列表的頂部增加合同名稱(chēng)和客戶(hù)名稱(chēng)的篩選。

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

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

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

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

通過(guò)引入路徑定位到formBox的位置：

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

我們打開(kāi)它，然后分析一下代碼。

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

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

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

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

2. 修改search的值，添加[客戶(hù)名稱(chēng)]和[合同名稱(chēng)]篩選條件。

在修改之前，我們先分析一下接口和收支表的數(shù)據(jù)結(jié)構(gòu)。可以看到列表是通過(guò)api/ent/bill/list接口一個(gè)POST請(qǐng)求來(lái)獲取數(shù)據(jù)的。

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

可以看到合同信息是有返回的，存儲(chǔ)在contract字段，只是默認(rèn)沒(méi)有顯示出來(lái)。如果我們要添加合同的篩選，先要確認(rèn)search數(shù)組當(dāng)中field_name_en該用哪個(gè)字段名，這里contract本身是個(gè)對(duì)象，具體用什么字段還不好說(shuō)，先看看后端代碼再?zèng)Q定。

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

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

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

然后我們?cè)倏碆illDao的getList方法，$where最終是傳給了search方法，并且search方法是重寫(xiě)了，針對(duì)篩選條件做了預(yù)處理。

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

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

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

具體寫(xiě)法如下：

在BillDao當(dāng)中先引入App\Http\Service\Client\ClientBillService;

對(duì)于合同ID，先處理好$where當(dāng)中的contract_id，因?yàn)閑b_bill當(dāng)中并不存在contract_id，所以這里取出來(lái)后，一定要在$where當(dāng)中去掉。然后根據(jù)cid=contract_id來(lái)查詢(xún)client_bill的記錄，取ids。然后限定bill的link_id在ids范圍內(nèi)。

對(duì)于客戶(hù)ID，邏輯是相似的，完整的代碼如下。

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

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

先在tableFrom當(dāng)中增加eid和contract_id定義。

再引入請(qǐng)求接口：

import { selectContractListApi, customerSelectApi } from '@/api/enterprise'

然后我們把views\pc\src\views\program\programList\index.vue的getCustomer方法和getContractList、getContract拷貝過(guò)來(lái)（注意改cid為contract_id)。然后getCustomer是在頁(yè)面創(chuàng)建的時(shí)候created()方法當(dāng)中調(diào)用。getContractList是在tableFrom.eid值變化的時(shí)候調(diào)用。

search的新增字段定義如下：

默認(rèn)情況下，列表里是沒(méi)有合同名稱(chēng)和客戶(hù)名稱(chēng)的，這里我們?cè)兕~外添加一下。在pc\src\views\fd\enterprise\list\index.vue頁(yè)面，找到el-table標(biāo)簽，然后增加el-table-column標(biāo)簽行來(lái)顯示合同和客戶(hù)名稱(chēng)。參考下圖。

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

最終效果如圖：

然后別忘了代碼修改用Git管理起來(lái)。

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

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

如果這篇帖子有幫到你，請(qǐng)點(diǎn)個(gè)贊、留個(gè)言讓更多人看到，謝謝！