信件统计报表导出

src/views/data/category.vue

@@ -29,9 +29,20 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <div class="flex end mb-20">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
-                    <el-button type="primary" @click="getList">查询</el-button>
+                    <div>
-                    <el-button @click="reset">重置</el-button>
+                        <el-popconfirm title="是否导出当前筛选条件的所有数据?" @confirm="exportLedger">
+                            <template #reference>
+                                <el-button type="primary" @click="getList" class="ml-4">报表导出</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </div>
+                    <div>
+                        <div class="flex end mb-20">
+                            <el-button type="primary" @click="getList">查询</el-button>
+                            <el-button @click="reset">重置</el-button>
+                        </div>
+                    </div>
                 </div>
             </el-form>
         </header>
@@ -103,7 +114,8 @@ import { ref, reactive, watchEffect } from "vue";
 import { getCategoryHeaderlist ,getCategorylist} from '@/api/data'
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptEasyLists,listSecond } from '@/api/org/department'
-
+import { getToken } from '@/utils/auth'
+import axios from 'axios'
 const { optionsData } = useDictOptions<{
     dept: any[]
     seconddept:any[]
@@ -165,7 +177,31 @@ function reset() {
 getList()
 
 
-
+const exportLedger = () => {
+    delete query.value.size
+    delete query.value.current
+
+    const data = query.value
+    console.log("exportLedger", data);
+    axios.post('/lan-api/api/data/exportcategory', data, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            "Admin": getToken()
+        },
+        responseType: 'blob'
+    }).then((res: any) => {
+        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', '局长信箱即接即办信件三率统计.xlsx'); // 根据需求修改文件名
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }).catch((err: any) => {
+        console.log(err);
+    });
+}
 
 
 

src/views/data/data.vue

@@ -29,9 +29,21 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <div class="flex end mb-20">
+
-                    <el-button type="primary" @click="getList">查询</el-button>
+                <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
-                    <el-button @click="reset">重置</el-button>
+                    <div>
+                        <el-popconfirm title="是否导出当前筛选条件的所有数据?" @confirm="exportLedger">
+                            <template #reference>
+                                <el-button type="primary" @click="getList" class="ml-4">报表导出</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </div>
+                    <div>
+                        <div class="flex end mb-20">
+                            <el-button type="primary" @click="getList">查询</el-button>
+                            <el-button @click="reset">重置</el-button>
+                        </div>
+                    </div>
                 </div>
             </el-form>
         </header>
@@ -44,7 +56,7 @@
                             <div>
                             <span class="mr-4">信件总量</span>
                             <el-tooltip effect="dark" :content="aLLCountContent" raw-content placement="top">
-                            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+                            <icon name="el-icon-QuestionFilled" :size="12" class="pointer" />
                             </el-tooltip>
                             </div>
                         </template>
@@ -55,7 +67,7 @@
                             <div>
                             <span class="mr-4">办结率</span>
                             <el-tooltip effect="dark" :content="completedrateContent" raw-content placement="top">
-                            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+                            <icon name="el-icon-QuestionFilled" :size="12" class="pointer" />
                             </el-tooltip>
                             </div>
                         </template>
@@ -66,7 +78,7 @@
                             <div>
                             <span class="mr-4">解决率</span>
                             <el-tooltip effect="dark" :content="resolvedrateContent" raw-content placement="top">
-                            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+                            <icon name="el-icon-QuestionFilled" :size="12" class="pointer" />
                             </el-tooltip>
                             </div>
                         </template>
@@ -77,7 +89,7 @@
                             <div>
                             <span class="mr-4">满意率</span>
                             <el-tooltip effect="dark" :content="satisfiedrateContent" raw-content placement="top">
-                            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+                            <icon name="el-icon-QuestionFilled" :size="12" class="pointer" />
                             </el-tooltip>
                             </div>
                         </template>
@@ -87,7 +99,7 @@
                             <div>
                             <span class="mr-4">总得分</span>
                             <el-tooltip effect="dark" :content="scoreContent" raw-content placement="top">
-                            <icon name="el-icon-QuestionFilled" :size="18" class="pointer" />
+                            <icon name="el-icon-QuestionFilled" :size="12" class="pointer" />
                             </el-tooltip>
                             </div>
                         </template>
@@ -112,7 +124,8 @@ import { ref, reactive, watchEffect } from "vue";
 import { getlist } from '@/api/data'
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptEasyLists,listSecond } from '@/api/org/department'
-
+import { getToken } from '@/utils/auth'
+import axios from 'axios'
 const { optionsData } = useDictOptions<{
     dept: any[]
     seconddept:any[]
@@ -155,6 +168,31 @@ const handleMailTimeQuery = (val: any) => {
     }
 }
 
+const exportLedger = () => {
+    delete query.value.size
+    delete query.value.current
+
+    const data = query.value
+    console.log("exportLedger", data);
+    axios.post('/lan-api/api/data/exportdata', data, {
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            "Admin": getToken()
+        },
+        responseType: 'blob'
+    }).then((res: any) => {
+        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', '局长信箱即接即办信件三率统计.xlsx'); // 根据需求修改文件名
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }).catch((err: any) => {
+        console.log(err);
+    });
+}
 
 
 

src/views/data/source.vue

@@ -29,9 +29,20 @@
                         </el-form-item>
                     </el-col>
                 </el-row>
-                <div class="flex end mb-20">
+                <div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
-                    <el-button type="primary" @click="getList">查询</el-button>
+                    <div>
-                    <el-button @click="reset">重置</el-button>
+                        <el-popconfirm title="是否导出当前筛选条件的所有数据?" @confirm="exportLedger">
+                            <template #reference>
+                                <el-button type="primary" @click="getList" class="ml-4">报表导出</el-button>
+                            </template>
+                        </el-popconfirm>
+                    </div>
+                    <div>
+                        <div class="flex end mb-20">
+                            <el-button type="primary" @click="getList">查询</el-button>
+                            <el-button @click="reset">重置</el-button>
+                        </div>
+                    </div>
                 </div>
             </el-form>
         </header>
@@ -88,7 +99,8 @@ import { ref, reactive, watchEffect } from "vue";
 import { getsourcelist} from '@/api/data'
 import { useDictOptions } from '@/hooks/useDictOptions'
 import { deptEasyLists,listSecond } from '@/api/org/department'
-
+import { getToken } from '@/utils/auth'
+import axios from 'axios'
 const { optionsData } = useDictOptions<{
     dept: any[]
     seconddept:any[]
@@ -100,34 +112,31 @@ const { optionsData } = useDictOptions<{
         api: listSecond
     },
 })
-const modifiedCategoryHeaders = computed(() => {
+const exportLedger = () => {
-      const headers = [...categoryHeaders.value];
+    delete query.value.size
-      const complaintIndex = headers.findIndex(h => h.label === '投诉类');
+    delete query.value.current
-      
+
-      if (complaintIndex !== -1) {
+    const data = query.value
-        const complaintHeader = headers.splice(complaintIndex, 1);
+    console.log("exportLedger", data);
-        headers.splice(complaintIndex, 0, ...complaintHeader, { label: '数量', width: 120 }, { label: '占比', width: 120 });
+    axios.post('/lan-api/api/data/exportsource', data, {
-      }
+        headers: {
-
+            'Content-Type': 'application/json',
-      return headers;
+            'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+            "Admin": getToken()
+        },
+        responseType: 'blob'
+    }).then((res: any) => {
+        const url = window.URL.createObjectURL(new Blob([res.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', '局长信箱即接即办信件三率统计.xlsx'); // 根据需求修改文件名
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }).catch((err: any) => {
+        console.log(err);
     });
-
+}
-const categoryHeaders = ref([
-      { label: '投诉类' },
-      { label: '举报类' },
-      { label: '咨询求助类' },
-      { label: '工作建议类' },
-      { label: '涉众金融平台类' },
-      { label: '无效类' },
-      { label: '终止类' },
-      { label: '感谢信类' },
-    ]) ;
-
-const subHeaders = ref([
-      { label: '数量' },
-      { label: '占比' },
-    ]);
-
 const mailStore = useMailStore();
 mailStore.getMailCategorys();
 const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);