sgc/mes-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

异常消息弹窗

Browse Source
This commit is contained in:
shaoleiliu-netizen123 2026-07-29 13:54:42 +08:00
parent 23edd93c97
commit 4c7d5b56ae
4 changed files with 322 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/api/errorNotification.ts
View File

@ -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 }) {
return request({ url: '/biz/errorNotification/page', method: 'get', params })
},
// 分页查询
page(params: { page: number; pageSize: number }) {
return request({ url: '/biz/errorNotification/page', method: 'get', params })
},
// 获取详情
detail(id: string) {
return request({ url: `/biz/errorNotification/${id}`, method: 'get' })
},
// 获取详情
detail(id: number) {
return request({ url: `/biz/errorNotification/${id}`, method: 'get' })
},
// 新增
create(data: ErrorNotification) {
return request({ url: '/biz/errorNotification', method: 'post', data })
},
// 新增
create(data: ErrorNotification) {
return request({ url: '/biz/errorNotification', method: 'post', data })
},
// 修改
update(data: ErrorNotification) {
return request({ url: '/biz/errorNotification', method: 'put', data })
},
// 修改
update(data: ErrorNotification) {
return request({ url: '/biz/errorNotification', method: 'put', data })
},
// 删除
delete(ids: string[]) {
return request({ url: `/biz/errorNotification/${ids.join(',')}`, method: 'delete' })
},
// 删除
delete(ids: string[]) {
return request({ url: `/biz/errorNotification/${ids.join(',')}`, method: 'delete' })
},
// 导出
export(params?: { ids?: string[] }) {
const p: Record<string, any> = {}
if (params?.ids?.length) p.ids = params.ids.join(',')
return request({ url: `/biz/errorNotification/export`, method: 'get', params: p, responseType: 'blob' })
},
// 导出
export(params?: { ids?: string[] }) {
const p: Record<string, any> = {}
if (params?.ids?.length) p.ids = params.ids.join(',')
return request({ url: `/biz/errorNotification/export`, method: 'get', params: p, responseType: 'blob' })
},
// 导入
importData(file: File) {
const formData = new FormData()
formData.append('file', file)
return request<{ success: number; fail: number; errors: string[] }>({
url: `/biz/errorNotification/import`,
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
})
},
// 导入
importData(file: File) {
const formData = new FormData()
formData.append('file', file)
return request<{ success: number; fail: number; errors: string[] }>({
url: `/biz/errorNotification/import`,
method: 'post',
data: formData,
headers: { 'Content-Type': 'multipart/form-data' }
})
},
// 下载导入模板
downloadTemplate() {
return request({ url: `/biz/errorNotification/template`, method: 'get', responseType: 'blob' })
}
}
// 下载导入模板
downloadTemplate() {
return request({ url: `/biz/errorNotification/template`, method: 'get', responseType: 'blob' })
}
}

7
src/api/message.ts
View File

@ -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 {

218
src/components/ErrorReportModal.vue Normal file
View File

@ -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>

54
src/layout/index.vue
View File

@ -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 {
await noticeApi.markAsRead(item.id)
// 刷新未读数量
loadUnreadCount()
} catch (error) {
// 忽略
}
}
router.push({ path: '/message/notice', query: { id: item.id?.toString() } })
const res = await errorNotificationApi.detail(item.errorNotificationId);
errorNotifiaction.value = {...res}
errorNotifiaction.value.noticeId = item.id
notice.value = item
//异常填报直接弹窗
showErrorReportModal.value = true
// if (item.abnormalReporting) {
//
// }else {
// // 标记已读
// if (item.id) {
// try {
// await noticeApi.markAsRead(item.id)
// // 刷新未读数量
// loadUnreadCount()
// } catch (error) {
// // 忽略
// }
// }
// router.push({ path: '/message/notice', query: { id: item.id?.toString() } })
// }
}
// 点击聊天