弹幕脚本导入数据

src/views/live/liveConfig/barrage.vue

@@ -18,7 +18,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['live:task:remove']"
+          type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete()" v-hasPermi="['live:task:remove']"
         >删除</el-button>
       </el-col>
       <el-col :span="1.5">
@@ -107,7 +107,7 @@
     </el-dialog>
 
     <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '' " :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '' " :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :on-error="handleFileError" :auto-upload="false" drag>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">
           将文件拖到此处，或
@@ -116,7 +116,7 @@
         <div class="el-upload__tip" slot="tip">
           <el-link type="info" style="font-size:12px;float:right" @click="importTemplate">下载模板</el-link>
         </div>
-        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+        <div class="el-upload__tip" style="color:red" slot="tip">提示：表头需为「时间、昵称、台词」，时间格式 HH:mm:ss；仅支持 xls/xlsx</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitFileForm">确 定</el-button>
@@ -211,6 +211,7 @@ export default {
       socket: null,
       isLoading: false, // 是否正在加载
       hasMore: true, // 是否还有更多数据
+      listSeq: 0, // 列表请求序号，防止竞态回写旧数据
     };
   },
   watch: {
@@ -281,12 +282,18 @@ export default {
         return;
       }
       this.loading = true;
+      const seq = ++this.listSeq;
       listTaskBarrage(this.queryParams).then(res => {
-        if(res.rows.length > 0) {
-          this.taskList = res.rows;
+        if (seq !== this.listSeq) {
+          return;
         }
-        this.total = res.total;
+        this.taskList = Array.isArray(res.rows) ? res.rows : [];
+        this.total = res.total || 0;
         this.loading = false;
+      }).catch(() => {
+        if (seq === this.listSeq) {
+          this.loading = false;
+        }
       });
     },
     // 取消按钮
@@ -370,23 +377,43 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$confirm('是否确认删除直播间弹幕脚本配置编号为"' + ids + '"的数据项?', "警告", {
+      // 工具栏批量删除不要把 click Event 当成 row
+      const isRowDelete = row && row.id != null && (typeof row.id === 'number' || typeof row.id === 'string');
+      const ids = isRowDelete ? row.id : this.ids;
+      const idList = Array.isArray(ids) ? ids.filter(id => id != null && id !== '') : (ids != null && ids !== '' ? [ids] : []);
+      if (idList.length === 0) {
+        this.$message.warning('请选择要删除的数据');
+        return;
+      }
+      this.$confirm('是否确认删除直播间弹幕脚本配置编号为"' + idList.join(',') + '"的数据项?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
-      }).then(function() {
-        return delTask(ids);
       }).then(() => {
-        this.getList();
+        return delTask(idList.join(','));
+      }).then(() => {
         this.msgSuccess("删除成功");
-        const msg={
-          cmd:'delAutoTask',
-          data:row.absValue,
-          liveId:this.liveId,
-          userType:1
+        // 先本地移除，避免列表接口竞态导致“删了还显示”
+        const idSet = new Set(idList.map(id => String(id)));
+        this.taskList = (this.taskList || []).filter(item => !idSet.has(String(item.id)));
+        this.total = Math.max(0, (this.total || 0) - idList.length);
+        this.ids = [];
+        this.single = true;
+        this.multiple = true;
+        if (this.taskList.length === 0 && this.queryParams.pageNum > 1) {
+          this.queryParams.pageNum = 1;
         }
-        this.socket.send(JSON.stringify( msg))
+        this.getList();
+        try {
+          if (this.socket && this.socket.send && isRowDelete) {
+            this.socket.send(JSON.stringify({
+              cmd: 'delAutoTask',
+              data: row.absValue,
+              liveId: this.liveId,
+              userType: 1
+            }));
+          }
+        } catch (e) {}
       }).catch(() => {});
     },
     /** 导出按钮操作 */
@@ -417,9 +444,16 @@ export default {
       this.upload.open = false;
       this.upload.isUploading = false;
       this.$refs.upload.clearFiles();
-      this.importMsgOpen=true;
-      this.importMsg=response.msg
-      this.getList();
+      if (response && response.code === 200) {
+        this.msgSuccess(response.msg || "导入成功");
+        this.getList();
+      } else {
+        this.msgError((response && response.msg) || "导入失败");
+      }
+    },
+    handleFileError() {
+      this.upload.isUploading = false;
+      this.msgError("导入失败，请稍后重试");
     },
     // 提交上传文件
     submitFileForm() {
@@ -427,6 +461,7 @@ export default {
         this.$message.error("错误直播间，请联系管理员处理");
         return ;
       }
+      this.upload.url = process.env.VUE_APP_BASE_API + "/live/task/importData?liveId=" + this.liveId;
       this.$refs.upload.submit();
     },
     /** 下载模板操作 */