專案總結
一：概述
1.專案名稱–燃氣安全檢查
2.任務：添加季度考核統計頁面
? 添加網格人員設定頁面
? 添加網格員得分記錄頁面
3.功能實作：
? 季度考核統計頁面功能：頁面渲染指定區域的街道和社區，街道得分，街道網格員得分，社區網格員及其得分，點擊網格員得分，可查看該網格員的得分詳情記錄，在彈出框內添加搜索框，虛假巡檢按鈕填寫內容及上傳附件，
? 網格人員設定頁面功能：頁面渲染街道和社區，街道網格員，商戶總數，已分配商戶數，未分配商戶數，社區網格員，網格員已分配的商戶數，社區未分配的商戶數，在社區已分配的網格員串列中添加洗掉功能，在社區未分配的彈窗中添加關聯功能，與已分配的串列形成關聯，
? 網格積分記錄頁面功能：呈現積分記錄串列，搜索框
4.專案技術堆疊：react + umi+antd+javascript
二：專案中技術分析，遇到的問題
1.網格員得分記錄頁面：
鏈接service 配置models ,在主頁index.jsx檔案中 query dispatch,渲染table，
1.1一般把table的columns 寫在return 后面，規范代碼的整潔，
1.2在每一列判斷資料，為空時顯示‘-’(組件isCorrectStr()),
? 同時可以做其他操作，可以限制每列的欄位長度（組件 showStringByTip()),
? 復制每列的欄位（組件 <Typography.Paragraph copyable={{ text: val }}></Typography.Paragraph>）
在render:(val)=>{} 中實作這些操作， 使用的組件是大佬同事寫的
1.3需撰寫的組件：控制頁面切換組件，控制搜索框組件，控制查看附件的彈出框組件
1.4在搜索組件中，要判斷時間的型別，moment型別和數值型別轉換，
1.5父組件向子組件傳參，
2.網格人員設定頁面：
2.1 需要一個類似與樹結點的 組件，遍歷市，區，街道，社區
2.2 需要一個判斷數值大小 并給不同范圍的數值賦予不同的顏色，背景顏色等樣式，
注意：自定義的組件 如果需要添加點擊事件，設定相應的引數，傳參，才能實作（我剛開始忘記了，所以沒有實作）
2.3需要一個控制卡片組件內容的組件，要在這個組件中判斷社區網格員的個數，如果超過四個，就用PopOver組件（antd組件）顯示“更多”
2.4父組件呼叫子組件的query
在父組件中，
呼叫的子組件中 <getInstance={(list) =>(this.list = list)} />
需要的位置，this.list && this.list.query();
list 為引數名稱可根據需要隨意
在子組件中
componentDidMount(){
const { getInstance } = this.props;
if (typeof getInstance === ‘function’) {
getInstance(this);
}
}
3.季度考核統計頁面：
3.1有兩處彈出框用的是用一個，但是需要在社區網格員彈出框添加“虛假巡檢”按鈕，這時需要給指定位置傳參，
父組件傳子組件，在呼叫的子組件中
子組件在this.props中獲取
4.其他
4.1 transform 不支持行內元素
4.2 在model 中對service 進行增刪改查的判斷與配置，資料的保存
4.3 要注意控制每個彈出框的顯示與關閉，執行完增刪改查后要及時更新頁面串列
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/249033.html
標籤：其他
上一篇：2021-01-14