微信搜索【大奇測試開】，關注這個堅持分享測試開發干貨的家伙。
本篇講解概要，快速了解內容關鍵點，也可先參照脈絡點先實現再對照。這樣的印象會更深刻。
TPMServer
狀態流轉接口
在提測功這個大功能涉及到狀態直接流轉的有兩處，一個是提測成功后，對應測試在計划時間內需要點擊 “開始測試” 將狀態標記為下個階段，即數據庫表中status=2（測試進行中），另一個就在測試報告提交的時候如果狀態為廢棄后，可以將將其數據刪除不展示（即軟刪除表字段isDel=1），從這兩個動作來看都是同一個表的更新操作，所以可以合並一個接口實現，減少接口的冗余。
@test_manager.route("/api/test/change", methods=['POST'])
def changeStatus():
# 初始化返回對象
resp_success = format.resp_format_success
resp_failed = format.resp_format_failed
# 獲取請求參數Body
reqbody = json.loads(request.get_data())
if 'id' not in reqbody:
resp_failed['message'] = '提測ID不能為空'
return resp_failed
elif 'status' not in reqbody:
resp_failed['message'] = '更改的狀態不能為空'
return resp_failed
# 重新鏈接數據庫
connection = pool.connection()
with connection.cursor() as cursor:
# 判斷狀態流轉的操作，如果status==start為開始測試，status==delete 軟刪除
if reqbody['status'] == 'start':
sql = "UPDATE `request` SET `status`=2 WHERE id=%s"
resp_success['message'] = '狀態流轉成功，進入測試階段。'
elif reqbody['status'] == 'delete':
sql = "UPDATE `request` SET `isDel`=1 WHERE id=%s"
resp_success['message'] = '提測已被刪除!'
else:
resp_failed.message = '狀態標記錯誤'
return resp_failed
cursor.execute(sql, reqbody['id'])
connection.commit()
return resp_success
接口實現很簡單，通過一個額外的字段標記做哪個字段更新，參考代碼如上。
依然不要忘了對后端接口的測試：
Case1：請求不給定id或者status參數驗證是否有參數錯誤提示返回
Case2：狀態操作status=start驗證是否將提測狀態改為2
Case3：狀態操作status=delete驗證是否對數據進行軟刪除標記isDel=1
其實還有一種嚴格情況就是如果更改的id不存在該怎么處理，示例代碼沒有給出，看看是你的話如何進行優化呢？也當作個小練習吧。
TPMWeb
狀態流轉功能實現
前端分別對之前操作欄中的“開始測試”和“刪除測試”添加 @click 方法，對后端狀態改變接口進行調用，步驟套用不變
1.test.js 定義接口請求
export function changeStatus(body) {
return request({
url: '/api/test/change',
method: 'post',
data: body
})
}
2. /src/views/test/index.vue的<template>添加觸發方法
3.同頁面vue的method中進行方法邏輯處理，此次對於請求的返回注意加了個$message 提示，在有正確的結果返回的時候給出服務端的消息提示，另外不要忘記代碼中在更新成功后要進行一次查詢請求，列表刷新最新的數據。
startTest(row) {
const reqBody = {
id: row.id,
status: 'start'
}
changeStatus(reqBody).then(resp => {
this.$message({
message: resp.message,
type: 'success'
})
this.searchClick()
})
},
deleteTest(row) {
const reqBody = {
id: row.id,
status: 'delete'
}
changeStatus(reqBody).then(resp => {
this.$message({
message: resp.message,
type: 'success'
})
this.searchClick()
})
},
為了提升用戶感知度，這里還對table增加了延遲loading的，參考圖的標記位置，即定義是否顯示加載動畫的動態變量，然后搜索前操作打開，有結果后關閉。
由於本地查詢可能比較快，特別設置300毫秒作為延遲，如果你在測試的過程中還是不是很明顯，可以加大時間到1000毫秒體驗一下。請注意圖中還有兩個變量聲明 requestInfoVisible 和 requestInfo 是要在接下來的實現提測詳情展示用到的。
提測詳情展示
在實際使用中，提測內容很多，是需要有在平台查看詳細的功能，這里通過彈出對話框，並內嵌 "描述列表" 來進行展示，組件的使用方法參考官方 [ https://element.eleme.io/2.15/#/zh-CN/component/descriptions ]，這里就不再粘貼了，點擊操作”提測詳情“彈窗的實現Demo樣式相關片段代碼如下：
1. template 部分，核心組件 dialog 和 descriptions
<el-link type="primary" @click="showRequestInfo(scope.row)">提測詳情</el-link>
<div>
<el-dialog :title="requestInfo.title" :visible.sync="requestInfoVisible">
<el-descriptions title="提測信息">
<el-descriptions-item label="用戶名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手機號">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">蘇州市</el-descriptions-item>
<el-descriptions-item label="備注">
<el-tag size="small">學校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="聯系地址">江蘇省蘇州市吳中區吳中大道 1188 號</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
2. js部分，行數據賦值，顯示無底角標按對話框
showRequestInfo(row) {
this.requestInfo = row
this.requestInfoVisible = true
},
運行查看效果卻發現沒有按照預期展示正常樣式
這是由於項目引用的element-ui是2.13.0版本，並沒有這個組件，需要升級到 "element-ui": "2.15.17"才可以，記得在package.json更改版本后要進行npm install 安裝最新依賴包。
然后一並修改下<el-descriptions-item>展示內容為項目的內容，最終實現的效果如下。
樣式還有點奇怪，注意到有一些字段是會很長的，進行下處理，利用官方自定義分欄和合並列屬性進一步優化，最終效果如圖。
這部分的優化后的完整代碼參考
到此為止，本篇要實現的兩個功能已經全部完成。
缺陷修復
在更新本次內容中，實際上發現兩個隱藏的問題，如果之前大家在認真實踐操作中應該早被發現了，我這里也Mark下
問題1: 錯誤消息體(字典/Json)變量賦值引用錯誤，正確應該是下角標的方式。
問題2: 列表查詢翻頁報錯，是因為統計總數不應該帶有limit條件，需要獨立處理語句。
兩個缺陷前后優化了什么代碼，可以通過git工具得到完整的詮釋。
最后說一下，如果你在跟着本系列分享教程中有任何的問題和想法建議，歡迎私信或者加我個人微信、群等進行交流，微信可以通過公眾號留言和菜單兩種方法是獲取。真心希望公眾號博客更新的原創實戰內容，能在茫茫泛濫網絡文章帶來幫助和切實干貨價值。
【代碼更新】
-
地址：https://github.com/mrzcode/TestProjectManagement
-
TAG：TPMShare16
堅持原創，堅持實踐，堅持干貨，如果你覺得有用，請點擊推薦，也歡迎關注我博客園和微信公眾號。