异常消息弹窗

src/api/errorNotification.ts

@@ -38,7 +38,7 @@ export const errorNotificationApi = {
     },
 
     // 获取详情
-  detail(id:  string) {
+    detail(id:  number) {
         return request({ url: `/biz/errorNotification/${id}`, method: 'get' })
     },
 

src/api/message.ts

@@ -13,7 +13,12 @@ export interface SysNotice {
   status: number
   createBy?: number
   createName?: string
-  createTime?: string
+  createTime?: string,
+  abnormalReporting?:number,
+  reportReason?:string,
+  errorNotificationId?:number,
+  filler?:number,
+  filingStatus?:number,
 }
 
 export interface NoticeChannelOption {

src/components/ErrorReportModal.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+
+import {onMounted, ref, watch} from "vue";
+import { Notifications } from '@vicons/ionicons5'
+import  { ErrorNotification } from '@/api/errorNotification.ts'
+import {} from '@/api/system.ts'
+import {noticeApi, SysNotice} from '@/api/message'
+import type {FormInst} from "naive-ui";
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+}>()
+
+const props = defineProps<{
+  show: boolean
+  errorNotifiaction:ErrorNotification,
+  notice:SysNotice,
+}>()
+
+const showModal = ref(false)
+
+const formRef = ref<FormInst | null>(null)
+
+const isFili = ref<Boolean>(false)
+const isShow = ref<Boolean>(true)
+const disabled = ref<Boolean>(false)
+const rules = {
+  fillingPerson:[{required: true, message: '请填写填报原因'}]
+}
+
+const formData = ref<SysNotice>({
+    id:undefined,
+    reportReason:undefined,
+    filingStatus:undefined
+})
+
+watch(()=>props.show, (val) => {
+  showModal.value = val
+  //关闭弹框重置
+  if (!val) {
+    isFili.value = false
+    formData.value = {
+      id:undefined,
+      reportReason:undefined,
+      filingStatus:undefined,
+    }
+    isShow.value = true
+    disabled.value = false
+  }
+
+  if (props.notice.abnormalReporting) {//需要填报
+      isFili.value = true
+      formData.value = {...props.notice}
+      //已经填报禁用填报栏  隐藏提交按钮
+      if (formData.value.filingStatus == 1) {
+        isShow.value = false
+        disabled.value = true
+      }else {
+        isShow.value = true
+        disabled.value = false
+      }
+  }else {
+    isFili.value = false
+    isShow.value = true
+    disabled.value = false
+  }
+},{immediate:true})
+
+watch(showModal, (val) => {
+  emit("update:show",val)
+})
+
+async function handleSubmit() {
+  try {
+    await formRef.value?.validate()
+    formData.value.id = props.errorNotifiaction.noticeId
+    formData.value.filingStatus = 1
+    //修改通知表
+    noticeApi.update({
+      id:formData.value.id,
+      reportReason:formData.value.reportReason,
+      filingStatus:formData.value.filingStatus
+    })
+    window.$message?.success('填报成功')
+    showModal.value= false
+  }catch ( error:any) {
+    if (error?.message) {
+      window.$message?.error(error.message)
+    }
+  }
+}
+
+
+</script>
+
+<template>
+  <n-modal
+      v-model:show="showModal"
+      preset="card"
+      :style="{ width: '1200px', height: '600px'}"
+      :mask-closable="false"
+  >
+    <template #header >
+      <div  style="text-align: center;">
+        <h2>
+          <n-icon>
+            <Notifications />
+          </n-icon>
+          异常填报
+        </h2>
+      </div>
+    </template>
+
+    <n-split direction="horizontal" :max="0.75" :min="0.25" v-if="isFili">
+      <template #1>
+        <n-grid x-gap="12" :cols="1">
+          <n-gi>
+            <h2>异常内容</h2>
+          </n-gi>
+        </n-grid>
+        <n-form
+            label-placement="left"
+            label-width="100"
+            style="margin: 10px"
+        >
+          <n-form-item label="异常名称" path="title">
+            <n-input
+                v-model:value="props.errorNotifiaction.title"
+                disabled
+            />
+          </n-form-item>
+          <n-form-item label="异常设备" path="devices">
+            <n-input
+                v-model:value="props.errorNotifiaction.devices"
+                disabled
+            />
+          </n-form-item>
+          <n-form-item label="通知内容" path="notifierContent">
+            <n-input
+                v-model:value="errorNotifiaction.notifierContent"
+                type="textarea"
+                disabled
+            />
+          </n-form-item>
+        </n-form>
+      </template>
+      <template #2>
+        <n-grid x-gap="12" :cols="1">
+          <n-gi>
+            <h2>异常填报</h2>
+          </n-gi>
+        </n-grid>
+        <n-form
+            ref="formRef"
+            :model="formData"
+            label-placement="left"
+            label-width="100"
+            style="margin: 10px"
+            :rules="rules"
+        >
+          <n-form-item ref="reason" label="填报原因" path="reportReason">
+            <n-input
+                v-model:value="formData.reportReason"
+                type="textarea"
+                placeholder="请填写填报原因"
+                :disabled="disabled"
+            />
+          </n-form-item>
+        </n-form>
+      </template>
+    </n-split>
+
+      <div v-if="!isFili">
+        <n-grid x-gap="12" :cols="1">
+          <n-gi>
+            <h2>异常内容</h2>
+          </n-gi>
+        </n-grid>
+        <n-form
+            label-placement="left"
+            label-width="100"
+            style="margin: 10px"
+        >
+          <n-form-item label="异常名称" path="title">
+            <n-input
+                v-model:value="props.errorNotifiaction.title"
+                disabled
+            />
+          </n-form-item>
+          <n-form-item label="异常设备" path="devices">
+            <n-input
+                v-model:value="props.errorNotifiaction.devices"
+                disabled
+            />
+          </n-form-item>
+          <n-form-item label="通知内容" path="notifierContent">
+            <n-input
+                v-model:value="errorNotifiaction.notifierContent"
+                type="textarea"
+                disabled
+            />
+          </n-form-item>
+        </n-form>
+      </div>
+
+
+    <!-- 底部操作按钮 -->
+    <template #action>
+      <n-space justify="end">
+        <n-button @click="showModal = false">关闭</n-button>
+        <n-button  v-if="isFili && isShow" type="primary" @click="handleSubmit">提交</n-button>
+      </n-space>
+    </template>
+  </n-modal>
+</template>
+
+<style scoped>
+
+</style>

src/layout/index.vue

@@ -331,6 +331,13 @@
 
     <!-- 消息通知弹窗 -->
     <MessageNotification />
+
+    <!--异常填报弹窗-->
+    <ErrorReportModal
+        v-model:show="showErrorReportModal"
+        :errorNotifiaction ="errorNotifiaction"
+        :notice = "notice"
+    />
   </n-layout>
 </template>
 
@@ -382,6 +389,8 @@ import TabBar from '@/components/TabBar.vue'
 import SiteLogoMark from '@/components/SiteLogoMark.vue'
 import { noticeApi, chatApi, type SysNotice, type ChatMessage } from '@/api/message'
 import { iconMap as externalIconMap } from '@/utils/icons'
+import ErrorReportModal from "@/components/ErrorReportModal.vue";
+import {errorNotificationApi} from "@/api/errorNotification.ts";
 
 const route = useRoute()
 const router = useRouter()
@@ -405,6 +414,7 @@ window.$message = message
 const collapsed = ref(false)
 const showProfileModal = ref(false)
 const showPasswordModal = ref(false)
+const showErrorReportModal = ref(false)
 const messageTab = ref('notice')
 
 // 消息相关
@@ -599,18 +609,40 @@ function stripHtml(html: string | undefined): string {
 }
 
 // 点击通知
+//异常订阅内容
+const errorNotifiaction = ref({
+  title: '',
+  devices: '',
+  sendingMethodName: '',
+  notifierName: '',
+  notifierContent: ''
+})
+//是否需要填报
+const notice = ref<SysNotice>( {})
 async function handleNoticeClick(item: SysNotice) {
-  // 标记已读
+
-  if (item.id) {
+
-    try {
+  const res = await errorNotificationApi.detail(item.errorNotificationId);
-      await noticeApi.markAsRead(item.id)
+  errorNotifiaction.value = {...res}
-      // 刷新未读数量
+  errorNotifiaction.value.noticeId = item.id
-      loadUnreadCount()
+  notice.value = item
-    } catch (error) {
+  //异常填报直接弹窗
-      // 忽略
+  showErrorReportModal.value = true
-    }
+  // if (item.abnormalReporting) {
-  }
+  //
-  router.push({ path: '/message/notice', query: { id: item.id?.toString() } })
+  // }else {
+  //   // 标记已读
+  //   if (item.id) {
+  //     try {
+  //       await noticeApi.markAsRead(item.id)
+  //       // 刷新未读数量
+  //       loadUnreadCount()
+  //     } catch (error) {
+  //       // 忽略
+  //     }
+  //   }
+  //   router.push({ path: '/message/notice', query: { id: item.id?.toString() } })
+  // }
 }
 
 // 点击聊天