Merge branch 'camera-batch-import' into 'dev'

fix: 修正切换pageSize时重置pageNumber为1；优化批量导入按钮交互体验

See merge request skyeye/skyeye_frontend/skyeye-admin!52

src/views/cameras/overview/CamerasOverview.vue

@@ -156,6 +156,7 @@ const handlePageNumChange = (pageNum) => {
 };
 
 const handlePageSizeChange = (pageSize) => {
+  page.value = 1;
   size.value = pageSize;
   getCameraItems();
 };

src/views/cameras/overview/components/BatchImportCamera.vue

@@ -10,10 +10,10 @@
         </div>
       </template>
       <div class="upload-content">
-        <el-upload ref="upload" class="upload-demo" :multiple="false" :limit="1" drag
-          action="/skyeye-admin-api/addCameraList/uploadForm" :headers="headers" :with-credentials="true"
-          :auto-upload="false" :on-exceed="handleExceed" :before-upload="beforeUpload" :on-success="handleUploadSuccess"
-          style="width: 384px; height: 192px; border-radius: 8px">
+        <el-upload ref="upload" style="width: 384px; height: 192px; border-radius: 8px" :headers="headers"
+          :multiple="false" :limit="1" drag action="/skyeye-admin-api/addCameraList/uploadForm" :with-credentials="true"
+          :auto-upload="false" :before-upload="beforeUpload" :on-success="handleUploadSuccess" :on-exceed="handleExceed"
+          :on-change="handleChange" :on-remove="handleRemove">
           <el-icon class="el-icon--upload" style="width: 33px; height: 42px; color: #409efc;">
             <Document />
           </el-icon>
@@ -32,7 +32,7 @@
               @click="handleDownloadSceneCode">场景code信息查询</span>
           </el-tooltip>
           <el-button @click="handleDownloadTemplate">下载模板</el-button>
-          <el-button type="primary" @click="handleImport">导入</el-button>
+          <el-button type="primary" @click="handleImport" :disabled="isImportEnable">导入</el-button>
         </div>
       </div>
     </el-card>
@@ -82,6 +82,7 @@ const headers = {
 
 const upload = ref<UploadInstance>();
 const cardVisible = ref<boolean>(true);
+const isImportEnable = ref<boolean>(true);
 const DialogVisibleErr = ref<boolean>(false);
 const sucCount = ref<number>(0);
 const errCount = ref<number>(0);
@@ -161,7 +162,7 @@ const beforeUpload = (file) => {
       type: 'error',
     });
     return false; // 阻止上传
-  }
+  };
   return true; // 允许上传
 };
 
@@ -171,28 +172,33 @@ const handleUploadSuccess = (response, _file, _fileList) => {
   errCount.value = response.data.failCount;
   errDetail.value = response.data.errorList;
 
-  if (errDetail.value.length > 0) {
-    errDetail.value.forEach((item, index) => {
-      if (item.indexOf('【添加失败】') >= 0) {
-        errDetail.value[index] = item.replace('【添加失败】', '<span style="color: #ff4d4f">【添加失败】</span>')
-      } else if (item.indexOf('【添加成功】') >= 0) {
-        errDetail.value[index] = item.replace('【添加成功】', '<span style="color: #52c41a">【添加成功】</span>')
-      }
-    })
-  }
+  try {
+    if (errDetail.value.length > 0) {
+      errDetail.value.forEach((item, index) => {
+        if (item.indexOf('【添加失败】') >= 0) {
+          errDetail.value[index] = item.replace('【添加失败】', '<span style="color: #ff4d4f">【添加失败】</span>')
+        } else if (item.indexOf('【添加成功】') >= 0) {
+          errDetail.value[index] = item.replace('【添加成功】', '<span style="color: #52c41a">【添加成功】</span>')
+        }
+      })
+    };
 
-  // 1.全部添加成功 —— failCount === 0
-  if (sucCount.value != 0 && errCount.value === 0 && errDetail.value.length === 0) {
+    if (sucCount.value != 0 && errCount.value === 0 && errDetail.value.length === 0) {
+      ElMessage({
+        message: '添加成功',  // 1.全部添加成功 —— failCount === 0
+        type: 'success',
+      });
+    } else {
+      DialogVisibleErr.value = true;    // 2.有错误 —— 显示错误dialog
+    };
+    cardVisible.value = false;
+  } catch (error) {
     ElMessage({
-      message: '添加成功',
-      type: 'success',
+      message: '系统错误',
+      type: 'error',
     });
-  } else {
-    // 2.有错误 —— 显示错误dialog
-    DialogVisibleErr.value = true;
+    emits('update:modelValue', false);
   };
-
-  cardVisible.value = false;
 };
 
 const handleErrComfirm = () => {
@@ -208,6 +214,14 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
   file.uid = genFileId();
   upload.value!.handleStart(file);
 };
+
+const handleChange = () => {
+  isImportEnable.value = false;
+};
+
+const handleRemove = () => {
+  isImportEnable.value = true;
+};
 </script>
 
 <style scoped>