批量处理上传文件后返回部分上传失败数据并展示修改

src/views/demo/layer/BatchProcessingModal/ImportComponent/index.vue

@@ -51,12 +51,30 @@
       :destroyOnClose="true"
       style="top: 50px"
     >
-    <MergeSourceModal
-      :tableName="props.tableName"
-      :nowData="nowData"
-      :originData="originData"
-      :tableColumn="props.tableColumn"
-      @closemergeSourceModal="closemergeSourceModal"/>
+      <MergeSourceModal
+        :tableName="props.tableName"
+        :nowData="nowData"
+        :originData="originData"
+        :tableColumn="props.tableColumn"
+        @closemergeSourceModal="closemergeSourceModal"/>
+    </a-modal>
+    <a-modal
+      :keyboard="false"
+      :maskClosable="false"
+      wrapClassName="batch-modal-wrap"
+      class="BatchProcessingModal"
+      width="1660px"
+      v-model:open="errorDataModal"
+      :footer="null"
+      :closable="false"
+      :destroyOnClose="true"
+      style="top: 50px"
+    >
+      <ShowErrorDataModal 
+        :tableColumn="props.tableColumn"
+        :errorData="errorData"
+        @closeErrorDataModal="closeErrorDataModal"
+      />
     </a-modal>
 </template>
 
@@ -64,6 +82,7 @@
 import { ref, h, defineProps, defineEmits } from "vue"
 import { PlusOutlined } from '@ant-design/icons-vue';
 import MergeSourceModal from './MergeSourceModal/index.vue'
+import ShowErrorDataModal from '@/views/demo/layer/BatchProcessingModal/ShowErrorDataModal/index.vue'
 import { UploadShape1, Upload, UploadExcelInsert } from '@/api/demo/BatchProcessingModal'
 import { message } from "ant-design-vue";
 import axios from 'axios';
@@ -75,8 +94,10 @@ const props = defineProps(['tableName','tableColumn'])
 const emits = defineEmits(['changeBatchProcessingModal'])
 const procedure = ref(0)
 const mergeSourceModal = ref(false)
+const errorDataModal = ref(false)
 const nowData = ref([])
 const originData = ref([])
+const errorData = ref([])
 const uploadPercent = ref(0);
 const progresStatus = ref('')
 const showProgress = ref(false)
@@ -87,6 +108,9 @@ const submit = () => {
 const closemergeSourceModal = () => {
   mergeSourceModal.value = false
 }
+const closeErrorDataModal = () => {
+  errorDataModal.value = false
+}
 const beforeUpload = (file) => {
   showProgress.value = true
   fileName.value = file.name
@@ -124,8 +148,7 @@ const customRequest = async (file) => {
         tableName: props.tableName,
         zipFilePath: filePath,
       });
-
-      handleUploadResult(result.result);
+      handleUploadResult(result);
     } else {
       handleUploadResult(resData.result);
     }
@@ -140,12 +163,21 @@ const customRequest = async (file) => {
   }
 }
 const handleUploadResult = (result: any) => {
+  let error = 0
+  if(result.errorData && result.errorData.length > 0){
+    errorData.value = result.errorData
+    errorDataModal.value = true
+    message.warning('部分数据上传失败请查看');
+    error++
+  }
   if (result.nowData && result.nowData.length > 0) {
     nowData.value = result.nowData;
     originData.value = result.originData;
     mergeSourceModal.value = true;
-  } else {
-    message.success('导入成功');
+    error++
+  }
+  if(error == 0){
+    message.success('导入成功')
   }
 };
 </script>

src/views/demo/layer/BatchProcessingModal/ShowErrorDataModal/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="title">
+    提示
+    <div class="close-button" @click="emits('closeErrorDataModal')"></div>
+  </div>
+  <div class="modal-content">
+    <div class="cue-span">检测到以下数据上传失败请重新上传以下数据：</div>
+    <div class="comparison-div">
+        <a-table rowKey="Id" :dataSource="props.errorData" :columns="columns"
+          :scroll="{  x: 'max-content',y: 500 }" :pagination="false">
+          <template #bodyCell="{ text }">
+            <span :style="{ color: text?.startsWith?.('error') ? 'red' : 'inherit' }">
+              {{ text }}
+            </span>
+          </template>
+        </a-table>
+    </div>
+    <div class="footer">
+      <a-button class="operation-button" @click="emits('closeErrorDataModal')">取消</a-button>
+      <a-button type="primary" class="operation-button" @click="emits('closeErrorDataModal')">确定</a-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, computed } from "vue"
+const emits = defineEmits(['closeErrorDataModal'])
+const props = defineProps(['errorData','tableColumn','tableName'])
+const columns = computed(() => {
+  return props.tableColumn.map(item => {
+    return {
+      title: item.label.match(/[(（](.*?)[)）]/)[1],
+      dataIndex: item.value,
+    }
+  })
+})
+
+
+</script>
+
+<style lang="scss" scoped>
+.title{
+  height: 86px;
+  padding-left: 43px;
+  padding-right: 43px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: PingFangSC-Regular;
+  font-weight: 400;
+  font-size: 36px;
+  color: #1E1E20;
+  line-height: 50px;
+  user-select: none;
+  border-bottom: 1px solid #E4E4E7;
+  .close-button{
+    width: 30px;
+    height: 30px;
+    background-image: url('/public/components/BatchProcessingModal/close_icon.png');
+    background-size: 100% 100%;
+    cursor: pointer;
+  }
+}
+.modal-content{
+  width: 100%;
+  height: 790px;
+  padding: 28px 44px 27px 34px;
+  .cue-span{
+    font-size: 20px;
+    margin-bottom: 10px;
+  }
+  .comparison-div{
+    display: flex;
+    margin-bottom: 30px;
+    .table-title{
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+    :deep(.ant-table-body){
+      height: 472px;
+    }
+  }
+  .footer{
+    width: 100%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    .operation-button{
+      width: 220px;
+      height: 60px;
+      margin-right: 16px;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 33px;
+    }
+  }
+}
+</style>

src/views/demo/layer/BatchProcessingModal/UpdateComponent/index.vue

@@ -40,6 +40,24 @@
       <a-button v-if="procedure == 1" type="primary" class="operation-button">替换原数据</a-button>
     </div>
   </div>
+  <a-modal
+    :keyboard="false"
+    :maskClosable="false"
+    wrapClassName="batch-modal-wrap"
+    class="BatchProcessingModal"
+    width="1660px"
+    v-model:open="errorDataModal"
+    :footer="null"
+    :closable="false"
+    :destroyOnClose="true"
+    style="top: 50px"
+  >
+    <ShowErrorDataModal 
+      :tableColumn="props.tableColumn"
+      :errorData="errorData"
+      @closeErrorDataModal="closeErrorDataModal"
+    />
+  </a-modal>
 </template>
 
 <script setup lang="ts">
@@ -49,6 +67,7 @@ import { UploadShape1, Upload, UpdateTableOriginalData, AddUploadExcel } from '@
 import { message } from "ant-design-vue";
 import axios from 'axios';
 import { getAppEnvConfig } from '@/utils/env';
+import ShowErrorDataModal from '@/views/demo/layer/BatchProcessingModal/ShowErrorDataModal/index.vue'
 
 const { VITE_GLOB_API_URL } = getAppEnvConfig();
 const emits = defineEmits(['changeBatchProcessingModal'])
@@ -58,6 +77,8 @@ const uploadPercent = ref(0);
 const progresStatus = ref('')
 const showProgress = ref(false)
 const fileName = ref('')
+const errorDataModal = ref(false)
+const errorData = ref([])
 const beforeUpload = (file) => {
   showProgress.value = true
   fileName.value = file.name
@@ -94,19 +115,30 @@ const customRequest = async (file) => {
         tableName: props.tableName,
         zipFilePath: filePath,
       });
+      if(result.errorData && result.errorData.length > 0){
+        errorData.value = result.errorData
+        errorDataModal.value = true
+        message.warning('部分数据上传失败请查看');
+      }
       let resultParams = {
         tableName: props.tableName,
         list: []
       }
-      if(result.result.nowData.length > 0){
-        resultParams.list = result.result.nowData
+      if(result.nowData.length > 0){
+        resultParams.list = result.nowData
       }
       const lastResult = await UpdateTableOriginalData(resultParams)
       progresStatus.value = 'success'
       message.success('更新成功')
     }else{
       progresStatus.value = 'success'
-      message.success('更新成功')
+      if(resData.result.errorData && resData.result.errorData.length > 0){
+        errorData.value = resData.result.errorData
+        errorDataModal.value = true
+        message.warning('部分数据上传失败请查看');
+      }else{
+        message.success('更新成功')
+      }
     }
   } catch ( error ) {
     console.log('error',error)
@@ -114,6 +146,9 @@ const customRequest = async (file) => {
     progresStatus.value = 'exception'
   }
 }
+const closeErrorDataModal = () => {
+  errorDataModal.value = false
+}
 </script>
 
 <style lang="scss" scoped>