异常消息弹窗

src/api/errorNotification.ts

@@ -2,82 +2,82 @@ import { request } from '@/utils/request'
 
 // ErrorNotification 类型定义
 export interface ErrorNotification {
-  id?: number
+    id?: number
 
-  subscriptionKey?:  string
+    subscriptionKey?:  string
 
-  title?:  string
+    title?:  string
 
-  subscriptionDeviceIds?:  string
+    subscriptionDeviceIds?:  string
 
-  subscriptionDiscoverField?:  string
+    subscriptionDiscoverField?:  string
 
-  sendingMethod?:  string
+    sendingMethod?:  string
 
-  discoverValue?:  string
+    discoverValue?:  string
 
-  detectionMethod?:  string
+    detectionMethod?:  string
 
-  notifier?:  string
+    notifier?:  string
 
-  createBy?: number
+    createBy?: number
 
-  crateTime?:  string
+    crateTime?:  string
 
-  notifierContent?:  string
+    notifierContent?:  string
 
-  abnormalReporting?: number
+    abnormalReporting?: number
 
 }
 
 // ErrorNotification API
 export const errorNotificationApi = {
-  // 分页查询
+    // 分页查询
-  page(params: { page: number; pageSize: number }) {
+    page(params: { page: number; pageSize: number }) {
-    return request({ url: '/biz/errorNotification/page', method: 'get', params })
+        return request({ url: '/biz/errorNotification/page', method: 'get', params })
-  },
+    },
 
-  // 获取详情
+    // 获取详情
-  detail(id:  string) {
+    detail(id:  number) {
-    return request({ url: `/biz/errorNotification/${id}`, method: 'get' })
+        return request({ url: `/biz/errorNotification/${id}`, method: 'get' })
-  },
+    },
 
-  // 新增
+    // 新增
-  create(data: ErrorNotification) {
+    create(data: ErrorNotification) {
-    return request({ url: '/biz/errorNotification', method: 'post', data })
+        return request({ url: '/biz/errorNotification', method: 'post', data })
-  },
+    },
 
-  // 修改
+    // 修改
-  update(data: ErrorNotification) {
+    update(data: ErrorNotification) {
-    return request({ url: '/biz/errorNotification', method: 'put', data })
+        return request({ url: '/biz/errorNotification', method: 'put', data })
-  },
+    },
 
-  // 删除
+    // 删除
-  delete(ids:  string[]) {
+    delete(ids:  string[]) {
-    return request({ url: `/biz/errorNotification/${ids.join(',')}`, method: 'delete' })
+        return request({ url: `/biz/errorNotification/${ids.join(',')}`, method: 'delete' })
-  },
+    },
 
-  // 导出
+    // 导出
-  export(params?: { ids?:  string[] }) {
+    export(params?: { ids?:  string[] }) {
-    const p: Record<string, any> = {}
+        const p: Record<string, any> = {}
-    if (params?.ids?.length) p.ids = params.ids.join(',')
+        if (params?.ids?.length) p.ids = params.ids.join(',')
-    return request({ url: `/biz/errorNotification/export`, method: 'get', params: p, responseType: 'blob' })
+        return request({ url: `/biz/errorNotification/export`, method: 'get', params: p, responseType: 'blob' })
-  },
+    },
 
-  // 导入
+    // 导入
-  importData(file: File) {
+    importData(file: File) {
-    const formData = new FormData()
+        const formData = new FormData()
-    formData.append('file', file)
+        formData.append('file', file)
-    return request<{ success: number; fail: number; errors: string[] }>({
+        return request<{ success: number; fail: number; errors: string[] }>({
-      url: `/biz/errorNotification/import`,
+            url: `/biz/errorNotification/import`,
-      method: 'post',
+            method: 'post',
-      data: formData,
+            data: formData,
-      headers: { 'Content-Type': 'multipart/form-data' }
+            headers: { 'Content-Type': 'multipart/form-data' }
-    })
+        })
-  },
+    },
 
-  // 下载导入模板
+    // 下载导入模板
-  downloadTemplate() {
+    downloadTemplate() {
-    return request({ url: `/biz/errorNotification/template`, method: 'get', responseType: 'blob' })
+        return request({ url: `/biz/errorNotification/template`, method: 'get', responseType: 'blob' })
-  }
+    }
 }

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() } })
+  // }
 }
 
 // 点击聊天