<style>
h1, div > h3:first-child, tbody > tr >td{
text-align: center;
}
tbody > tr >td:first-child{
text-align: left;
font-Weight: bold;

}
thead > tr >td{
text-align: center;
font-Weight: bold;
padding: 0 6px
}
tbody > tr:nth-child(even) >td{
background: white
}

</style>

全鋒事業客服管理中心（網頁版）
===
[TOC]

# 簡介
#### 正式機
* 網址 ：
#### 測試機
* 網址 ： fonghs.emct.tw/tms
#### 相關人員
* PM : Rema
* 網頁設計師： Cooper
* 前端工程師： 淑芳
* 後端工程師： Jun
#### 相關文件
* [Figma設計稿](https://www.figma.com/file/pjpK4owVcLy7cn4jZ20PyS/Tms-Mainweb_Mockup?node-id=128847%3A179316)

# 程式相關
#### 前端框架 ： react.js
#### 前端框架套件
- @ant-design/icons: ^4.7.0
- @testing-library/jest-dom: ^5.11.4
- @testing-library/jest-dom: ^5.11.4
- antd： ^4.17.3
- connected-react-router: ^6.9.2
- history: ^4.10.1
- moment: ^2.29.1
- react-redux: ^7.2.6
- redux-thunk: ^2.4.1
- styled-components: ^5.3.3

#### 程式頁面 (src)

├── App.css
├── App.js
├── actions
│   ├── cases.js    
│   ├── iniCase.js
│   ├── iniFetch.js
│   └── notification.js
├── components                      #頁面模組
│   ├── cases
│   │   ├── add                      
│   │   │   ├── CarExpandRow.js    #車輛不可行駛原因
│   │   │   ├── CarInfo.js         #車輛資訊
│   │   │   ├── ExpandRow.js       #運送車輛
│   │   │   ├── step1.js           #案件內容頁
│   │   │   ├── step2.js           #最後確認頁
│   │   │   └── step3.js           #新增完成頁
│   │   └── case
│   │       ├── CaseClosure.js     #案件結案
│   │       ├── CaseEdit.js        #案件編輯
│   │       ├── ManualDispatch.js  #案件手動派遣
│   │       ├── ModalCard.js       #彈跳視窗
│   │       ├── Table.js           #資訊列表（案件資訊、技師資訊）
│   │       └── TechnicianList.js  #支援技師清單
│   ├── execution
│   │   ├── ModalCard.js           #技師提出異況視窗
│   │   └── execute
│   │       ├── cancel.js          #取消執行
│   │       ├── changeLocation.js  #迄運點變更
│   │       └── changeRoute.js     #改派
│   ├── fuel
│   │   └── CustomTable.js         #油站明細
│   ├── points
│   │   ├── add
│   │   │   ├── step1.js           #新增據點（基本資訊）
│   │   │   ├── step2.js           #新增據點（派遣規則）
│   │   │   └── step3.js           #新增據點（完成）
│   │   └── point
│   │       ├── CustomCalendar.js  #出勤管理（日曆-日）
│   │       ├── Table.js           #資料列表（基本資料、派遣資料）
│   │       └── basicInfo.js       #
│   └── shared
│       ├── BreadCrumb.js          #麵包屑
│       ├── Footer.js              #頁尾
│       ├── Header.js              #頁首
│       └── UnionIcon.js           #客製ICON
├── css
├── images
│   └── icon
│       └── Union.svg
├── index.css
├── index.js
├── pages                    
│   ├── ErrorPage.js            #404頁面
│   ├── cases                   
│   │   ├── add.js              #新增案件頁
│   │   ├── case.js             #案件詳細頁
│   │   └── index.js            #案件列表頁
│   ├── execution
│   │   ├── execute.js          #執行詳細頁
│   │   └── index.js            #執行列表頁
│   ├── fuel
│   │   ├── evaluation.js       #即時油價及預估頁
│   │   ├── record.js           #加油紀錄列表頁
│   │   ├── recordDetail.js     #加油紀錄詳細頁
│   │   ├── search.js           #通路查詢列表頁
│   │   └── searchDetail.js     #通路查詢詳細頁
│   ├── member
│   │   └── login.js            #登入頁
│   ├── monitor
│   │   └── index.js            #即時監控頁
│   ├── notifications
│   │   └── index.js            #通知頁
│   └── points
│       ├── add.js              #新增據點頁
│       ├── carAdd.js           #新增據點車籍頁
│       ├── carDetail.js        #車籍詳細頁
│       ├── index.js            #據點列表頁
│       ├── point.js            #據點詳細頁
│       ├── technicianAdd.js    #新增據點技師頁
│       └── technicianDetail.js #據點技師詳細頁
├── reducers
│   ├── cases.js
│   ├── fetchApi.js
│   ├── fetchCase.js
│   ├── fetchCases.js
│   ├── index.js
│   └── notification.js

# 各頁面
## 案件列表
1. #### 案件狀態

 訂單成立方式
i. 客戶透過客服管理中心上單（訂單直接成立，無人工需審核）
ii. 客戶直接透過客戶端網頁上單（需人工審核，案子狀態為待收單）

<table>
<thead>
<tr>
<td></td>
<td>待收單</td>
<td>待派遣</td>
<td>已派遣,執行前</td>
<td>待結案(已完成派遣)</td>
<td>已結案</td>
</tr>
</thead>
<tbody>
<tr>
<td>人工審核訂單</td>
<td>V</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>案件取消</td>
<td rowSpan="3">訂單未成立</td>
<td>V</td>
<td>V</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>資訊修改</td>
<td>除客戶別跟
案件類型外都能改</td>
<td colSpan="2">
可修改：
車牌/車身/引擎號碼,
車輛狀態,
交接車人,
案件來源,
請款對象,
金額三兄弟,
費用歸屬,
備註
</td>
<td>X</td>
</tr>
<tr>
<td>技師資訊</td>
<td>X</td>
<td>V</td>
<td>V</td>
<td>V</td>
</tr>
</tbody>
</table>
<img src="https://i.imgur.com/M2Loi0M.png" style="margin: 24px 0" />

## 執行列表

<table>
<thead>
<tr>
<td></td>
<td>改派</td>
<td>取消訂單</td>
<td>變更迄運點</td>
<td>技師變更</td>
</tr>
</thead>
<tbody>
<tr>
<td>執行前</td>
<td>V</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>執行中</td>
<td>V</td>
<td>V</td>
<td>V</td>
<td>V</td>
</tr>
</tbody>
</table>

<img src="https://i.imgur.com/IgDHDqJ.png" style="margin: 24px 0" />

## 據點管理
1. ### 基本資訊
派遣狀態設定： 可派遣/停派/請假
2. ### 技師資訊
更新駕照效期： 有效/無效
任職狀態設定： 在職/離職
4. ### 出勤管理
5. ### 車籍資料

<img src="https://i.imgur.com/xnpIsWt.png" style="margin: 24px 0" />