新建核对功能实现

src/views/work/components/MailCheck.vue

@@ -43,11 +43,15 @@
                 <el-button type="primary" @click="handleCheck">信件核对</el-button>
             </div>
         </div>
-        <div>
+        <div class="mr-20 ml-20">
             <div v-if="result" v-show="ifShow">
                 <span class="allRight">数据核对无误</span>
             </div>
             <div class="table-container" v-if="!result" v-show="ifShow">
+                <div style="display: flex;align-items: center;justify-content: space-between; margin-bottom: 20px">
+                    <span class="title-label">以下数据共 {{ form.length }} 条，数据不匹配</span>
+                    <el-button type="primary" @click="handleImport">下载不匹配数据</el-button>
+                </div>
                 <el-table :data="form" style="width: 100%" stripe ref="tableRef">
                     <el-table-column prop="mailTime" label="来信时间" align="center" width="170" />
                     <el-table-column label="信件来源" align="center" width="94">
@@ -100,10 +104,11 @@ import { ref, defineProps } from 'vue'
 import { watch } from 'vue'
 import { formatTimeText, getDictLable, getFlowTagType } from "@/utils/util";
 import { useDictData } from "@/hooks/useDictOptions";
-import { ElTable } from "element-plus";
+import { ElMessage, ElTable } from "element-plus";
 import { genFileId } from 'element-plus'
 import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
 import axios from 'axios';
+import request from "@/utils/request";
 const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
 const props = defineProps({
     show: {
@@ -139,21 +144,39 @@ const fileList = ref([])
 const handleUpload: UploadProps['httpRequest'] = (file) => {
     const formData = new FormData(); // 创建表单数据对象
     formData.append("file", file.file); // 将文件添加到表单数据中
-    return axios.post("/lan-api/api/work/import", formData) // 使用 axios 发送 post 请求到后端
+    return axios.post("/lan-api/api/work/check", formData) // 使用 axios 发送 post 请求到后端
-        .then((response) => {
+        .then((res) => {
             // 处理成功的响应
-            console.log(response.data);
+            console.log('checkMsg', res.data);            
+            if (res.data[0]) {
+                result.value = false
+                ifShow.value = true
+                form.value = res.data.data
+            } else {
+                ifShow.value = true
+                result.value = true
+            }
             upload.value.clearFiles(); // 清空文件列表
         })
         .catch((error) => {
             // 处理失败的响应
             console.error(error);
+            ElMessage.error('上传失败')
         });
 }
 const handleCheck = () => {
     upload.value!.submit()
     console.log(query.value)
 }
+const handleImport = () => {
+    request.post({ url: '/work/import', body: form.value }).then((data: any) => {
+        ElMessage.success('下载成功')
+        resetView()
+    }).catch((error: any) => {
+        console.error(error);
+        ElMessage.error('下载失败')
+    })
+}
 
 const handleExceed: UploadProps['onExceed'] = (files) => {
     upload.value!.clearFiles()
@@ -162,6 +185,9 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
     upload.value!.handleStart(file)
 }
 
+function resetView(){
+    ifShow.value = false
+}
 </script>
 
 <style lang="scss" scoped>
@@ -203,7 +229,12 @@ const handleExceed: UploadProps['onExceed'] = (files) => {
 }
 
 .title-label {
-    margin-bottom: 20px;
+    height: 16px;
+    font-size: 16px;
+    font-family: SourceHanSansCN, SourceHanSansCN;
+    font-weight: 600;
+    color: #162582;
+    line-height: 24px;
 }
 
 .info-input {