最近寫了一個批量刪除功能,遇到了不少坑,特此記錄一下
表格的代碼如下
如圖所示,表格最前面有一個復選框
代碼很簡單
<el-table-column type="selection" width="65"></el-table-column>
刪除按鈕的代碼如下:
data的代碼如下:
data() { return { pageSize: 12, total: 0, pageData: [], query: '', sort: 'createAt', order: 'descending', defaultSnap: srcFallback, accept: '', ws: null, sels: [],//選中顯示的值 disabled:true }; }表格中的視頻數據來自于pageData,每個視頻都是一個對象,對象的status屬性等于waiting或者有progress屬性時,此視頻正在轉碼,或者正在準備轉碼,不允許刪除, 批量刪除就是把被選中的行添加到sels這個數組中,把數組里的每一個對象的id屬性組成一個數組,發送給后端,此外,正在轉碼的視頻不允許刪除,此時按鈕也是禁用狀態
根據官方文檔,@selection-change="selsChange"是復選框選擇改變時觸發的事件
在methods中添加一個方法
selsChange(sels) { //被選中的行組成數組 this.sels = sels; //遍歷被選中行數所組成的數組 for(let element of this.sels){ //如果視頻正在轉碼或者等待轉碼,禁用按鈕,結束方法 if(element.status == 'waiting'||element.progress){ this.disabled = true; return; } //如果沒有視頻正在轉碼或者等待轉碼,按鈕可用 this.disabled = false; } }把請求發送給后端,代碼如下:
removeBatch(rows){ var ids = []; rows.forEach(element =>{ ids.push(element.id) }) this.$confirm('確定要刪除選中的文件嗎?','提示').then(() =>{ $.post('/vod/removeBatch',{ ids:ids }).then(dara =>{ this.updateData(); }) }).catch(()=>{}); }前端已經排除正在轉碼的視頻了,后端是否能根據前端傳來的數據,直接刪除視頻呢?
答案是不可以,后端一樣要做驗證
思路是,拿到前端傳來的數據后,遍歷數組兩次,第一次如果發現有正在轉碼的視頻,拋出異常,不會進入第二次循環,第二次循環才根據id刪除視頻
代碼如下
r.post('/removeBatch',async(req,res) => { var ids = req.body.ids; var files = utils.vod.get("files"); //第一次循環,如果有正在轉碼的文件,就拋出異常,結束循環 for(let id of ids){ var transing = trans.agent.transing[id]; if(transing){ throw new Error('正在轉碼的文件無法刪除'); return; } } //如果沒有轉碼的文件,進入第二次循環 for(let id of ids){ var files = utils.vod.get("files"); var row = files.find({id: id}).cloneDeep().value(); //如果沒有要刪除的,就結束 if(!row) { res.sendStatus(200); return; } var dir = path.dirname(row.path); var name = path.basename(row.path, path.extname(row.path)); var transDir = path.resolve(dir, name); //刪除源文件 if(fs.existsSync(row.path)){ fs.removeSync(row.path); } //刪除轉碼文件 if(fs.existsSync(transDir)){ fs.removeSync(transDir); } //刪除json文件記錄 files.remove({id: id}).write(); } res.sendStatus(200);})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
