推送查询

src/components/MailEtl.vue

@@ -0,0 +1,215 @@
+<template>
+    <div style="width: 90vw;margin: 0 auto;">
+        <el-form :model="form" label-width="150px" style="margin-top: 20px; margin-right: -50px;;">
+            <el-row>
+            
+            <el-col :span="6">
+            <el-form-item label="数据库名">
+                     <el-select
+                        v-model="MailTab"
+                        placeholder="Select"
+                        size="small"
+                        style="width: 240px"
+                    >
+                    <el-option
+                        v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    />    
+                    </el-select>
+            </el-form-item>
+            </el-col>
+                <el-col :span="6">
+                    <el-form-item label="etl编号">
+                        <el-input v-model="form.id" placeholder="请输入etl编号" max-length="200px"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="信件编号">
+                        <el-input v-model="form.mailId" placeholder="请输入信件编号"></el-input>
+                    </el-form-item>
+                </el-col>
+                
+            </el-row>
+            <el-row>
+                
+                <el-col :span="6">
+                    <el-form-item label="是否成功">
+                        <el-input v-model="form.success" placeholder=""></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="3"></el-col>
+                <el-col :span="14" :style="{ display: 'inline-flex', alignItems: 'center' }">
+                    <el-row>
+                        <el-col :span="6"></el-col>
+                        <el-col :span="6">
+                            <el-button type="primary"  @click="search" class="under-btn">搜索</el-button></el-col>
+                        <el-col :span="6">
+                            <el-button type="default" style="position: relative; left: 100px;" @click="reset" class="under-btn">重置</el-button></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+        </el-form>
+
+        <div class="table-box" ref="tableBoxHeight" v-loading="loading">
+            <el-table :data="tableData" border :height="tableHeight" table-layout="fixed"
+                :header-cell-style="{ 'background-color': '#EBEEFC', 'color': '#1D2C86' }">
+                <el-table-column fixed="left" prop="id" label="etl编号" width="200px">
+                </el-table-column>
+                <el-table-column fixed="left" prop="mailId" label="信件编号" width="200px">
+                </el-table-column>
+                <el-table-column prop="success" label="是否成功" width="100px">
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建日期" width="120px">
+                </el-table-column>
+                <el-table-column prop="errMsg" label="错误信息" width="800px">
+                </el-table-column>
+            </el-table>
+        </div>
+        <div style="display: flex; justify-content: center;position: relative;top: 20px;">
+                <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
+                    :current-page="pageData.currentPage" :page-sizes="[4, 10, 20, 40, 50]" :page-size="pageData.pageSize"
+                    layout="total,sizes, prev, pager, next, jumper" :total="pageData.totalSize">
+                </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { request } from '../util/axios_config'
+import { onMounted, ref } from 'vue';
+import router from '../router';
+const MailTab = ref('mail_etl')
+
+const options = [
+  {
+    value: 'mail_etl',
+    label: 'mail_etl',
+  },
+  {
+    value: 'mail_evaluate_etl',
+    label: 'mail_evaluate_etl',
+  },
+  
+]
+const loading = ref(true);
+
+const form = ref({
+    id: '',
+    mailId: '',
+    success: '',
+})
+
+// 定义可变的tableData变量，并用axios请求数据
+const tableData = ref([])
+
+const pageData = ref({
+    currentPage: 1,
+    pageSize: 8,
+    totalSize: 0
+})
+
+const tableBoxHeight = ref(null)
+const tableHeight = ref('100%')
+const flexColumnWidth = (label, prop) => {
+    const width = Math.max(label.length * 12, 120)
+    return `${width}px`
+}
+
+const handleResponse = (response) => {
+    tableData.value=[];
+    if(MailTab.value=='mail_etl'){
+        console.log("aaaa")
+        tableData.value = response.data.mails;
+    }else{
+        console.log("bbbb")
+        tableData.value = response.data.evaMails;
+    }
+    tableData.value.forEach(item => {
+        item.createTime = item.createTime.split('T')[0]
+    })
+    pageData.value.totalSize = response.data.pageSet.totalSize;
+    loading.value = false;
+}
+
+const makeRequest = (requestData, callback) => {
+    const data = JSON.stringify(requestData)
+    request({
+        url: 'api/mailetl/list-submit',
+        method: 'POST',
+        data: data,
+        headers: { 'Content-Type': 'application/json' }
+    }).then(callback)
+        .catch(function (error) { console.log(error) })
+}
+
+const updateData = (requestData) => {
+    makeRequest(requestData, function (response) {
+        handleResponse(response)
+    })
+}
+
+onMounted(() => {
+    const requestData = {
+        formData: form.value,
+        selectData:MailTab.value,
+        pageData: pageData.value
+    }
+    updateData(requestData)
+})
+
+
+
+
+const handleSizeChange = (size) => {
+    const requestData = {
+        formData: form.value,
+        selectData:MailTab.value,
+        pageData: pageData.value
+    }
+    pageData.value.pageSize = size
+    updateData(requestData)
+}
+
+const handlePageChange = (currentPage) => {
+    const requestData = {
+        formData: form.value,
+        selectData:MailTab.value,
+        pageData: pageData.value
+    }
+    pageData.value.currentPage = currentPage
+    updateData(requestData)
+}
+
+const search = () => {
+    const requestData = {
+        formData: form.value,
+        selectData:MailTab.value,
+        pageData: pageData.value
+    }
+    updateData(requestData)
+}
+
+const reset = () => {
+    form.value = {
+        id: '',
+        mailId: '',
+        success: '',
+    }
+}
+
+
+</script>
+
+<style scoped>
+.under-btn {
+    margin-right: 30px;
+    margin-bottom: 5px;
+}
+
+.table-box {
+    /* 全屏时顶部元素总和316px */
+    height: calc(100vh - 336px);
+}
+</style>

src/layout/Index.vue

@@ -1,7 +1,7 @@
 <template>
     <header class="flex v-center between">
         <div style="display: inline-flex;align-items: center;justify-content: center;height: 100%;">
-            <el-image src="public\police-icon.png" style="width: 40px;height: 40px;margin-right: 10px;"></el-image>
+            <el-image src="/police-icon.png" style="width: 40px;height: 40px;margin-right: 10px;"></el-image>
             <div class="title"><a href="">局长信箱即接即办管理端</a></div>
         </div>
         <div>
@@ -10,32 +10,26 @@
     </header>
     <div class="flex">
         <aside>
-
             <nav>
-                <a class="flex v-center center wrap pointer" @click="router.push('/')">
+                <a class="flex v-center center wrap pointer" @click="router.push('/mailbox')">
-                    <el-icon>
+                    <el-icon><Message /></el-icon>
-                        <HomeFilled />
+                    <span>信件管理</span>
-                    </el-icon>
-                    <span>首页</span>
                 </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/holiday')">
-                    <el-icon>
+                    <el-icon><Calendar /></el-icon>
-                        <Platform />
-                    </el-icon>
                     <span>节假日管理</span>
                 </a>
-                <a class="flex v-center center wrap pointer" @click="router.push('/mailbox')">
-                    <el-icon>
-                        <Menu />
-                    </el-icon>
-                    <span>信件管理</span>
-                </a>
                 <a class="flex v-center center wrap pointer" @click="router.push('/user')">
                     <el-icon>
                         <User />
                     </el-icon>
                     <span>人员管理</span>
                 </a>
+                <a class="flex v-center center wrap pointer" @click="router.push('/mail_etl')">
+                    <el-icon><ChatDotSquare /></el-icon>
+                    <span>信件推送查询</span>
+                </a>
+                
             </nav>
         </aside>
         <main style="width: 100%;"><router-view /></main>
@@ -43,7 +37,7 @@
 </template>
 
 <script setup>
-import { HomeFilled, Platform, Menu, User } from '@element-plus/icons-vue'
+import { HomeFilled, Platform, Menu, User,Message,Calendar,ChatDotSquare } from '@element-plus/icons-vue'
 import { useRouter } from "vue-router";
 import { useTokenStore } from '../stores/useTokenStore';
 import { request } from '../util/axios_config';

src/router/index.js

@@ -16,7 +16,7 @@ const constantRoutes = [
         children: [
             {
                 path: '/',
-                component: Home
+                component: () => import('@/components/ManageMail.vue'),
             },
             {
                 path: '/mailbox',
@@ -33,6 +33,10 @@ const constantRoutes = [
             {
                 path: '/holiday',
                 component: () => import('@/components/HolidayList.vue')
+            },
+            {
+                path: '/mail_etl',
+                component: () => import('@/components/MailEtl.vue')
             }
         ]
     },