通知列表和搜索

src/api/notice.ts

@@ -7,3 +7,8 @@ export function noticeTotal() {
 export function getNewMailAudio() {
     return request.get({ url: '/notice/newMailAudio' })
 }
+
+
+export function getlist(query: any) {
+    return request.get({ url: '/notice/list',query })
+}

src/layout/components/NoticeMessage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="notice flex gap v-center">
+    <div class="notice flex gap v-center" @click="gotoNotice()">
         <el-badge :value="total" v-if="total">
             <icon name="el-icon-BellFilled" :size="32" />
         </el-badge>
@@ -25,6 +25,12 @@ import { onMounted } from "vue";
 initSocket();
 
 const todoAudioRef = ref();
+const router = useRouter();
+function gotoNotice() {
+    router.push('/work/notice');
+}
+
+
 let enableSound = true;
 emitter.on("notice", () => {
     console.log("notice event");
@@ -113,5 +119,6 @@ function getNewMailAudioFlag() {
     border-radius: 10px;
     box-sizing: border-box;
     padding: 16px 20px;
+    cursor: pointer;
 }
 </style>

src/views/work/Notice.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="container">
+        <header>
+            <el-form :label-width="120">
+                <el-row>
+                    <el-col :span="6">
+                    <el-form-item label="来信时间">
+                            <el-date-picker v-model="query.searchTime" value-format="YYYY-MM-DD HH:mm:ss"
+                                type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="~"
+                                start-placeholder="开始日期" end-placeholder="结束日期" @change="handleMailTimeQuery" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div class="flex end mb-20">
+                    <el-button type="primary" @click="getList">查询</el-button>
+                    <el-button @click="reset">重置</el-button>
+                </div>
+            </el-form>
+        </header>
+        <main>
+            <div class="table-container">
+                <el-table :data="notice" style="width: 100%">
+                    <el-table-column prop="createTime" label="时间" align="center"  width="200" />
+                    <el-table-column prop="content" label="消息内容"  >
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="flex mt-4 end">
+                <el-pagination @size-change="getList" @current-change="getList" :current-page="query.current"
+                    :page-sizes="[10, 20, 50]" :page-size="query.size" v-model:current-page="query.current"
+                    layout="total,sizes, prev, pager, next, jumper" :total="totalSize.total">
+                </el-pagination>
+            </div>
+        </main>
+    </div>
+
+    
+</template>
+<script lang="ts" setup>
+import MailDialog from "./components/MailDialog.vue";
+
+import { getMailFlowDetail } from "@/api/mail";
+import { useDictData } from "@/hooks/useDictOptions";
+import { useDictOptions } from '@/hooks/useDictOptions'
+import { onMounted, onUnmounted } from 'vue'
+import useMailStore from "@/stores/modules/mail";
+import { getDictLable, formatTimeText, getFlowTagType } from "@/utils/util";
+import { ref, reactive, watchEffect } from "vue";
+import { getlist } from '@/api/notice'
+import { getFlowNodes } from '@/api/org/flowNode'
+const mailStore = useMailStore();
+mailStore.getMailCategorys();
+const { dictData } = useDictData(["mail_source", "mail_level", "mail_state"]);
+
+const query = ref({
+    size: 10,
+    current: 1
+});
+const totalSize = reactive({
+    total: 0,
+    pages: 0
+})
+
+const notice = ref([]);
+
+const handleMailTimeQuery = (val: any) => {
+    if (val) {
+        query.value.searchStartTime = val[0];
+        query.value.searchEndTime = val[1];
+    } else {
+        delete query.value.searchStartTime
+        delete query.value.searchEndTime
+    }
+}
+
+
+
+function getList() {
+    getlist(query.value).then((data) => {
+        notice.value = data.records;
+        totalSize.total = data.total;
+        totalSize.pages = data.pages;
+    });
+}
+
+function reset() {
+    query.value = {}
+    getList()
+}
+
+getList()
+
+
+
+
+
+
+
+</script>
+<style lang="scss" scoped>
+.success {
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+
+    .text {
+        color: #128009;
+    }
+}
+
+.error {
+    background-color: #ff0000;
+    color: #fff;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 20px;
+    text-align: center;
+}
+</style>