提交

src/plugins/notification.js

@@ -1,13 +1,18 @@
 import { render, createVNode } from "vue";
-import notification from "@/views/dialog/updateAnnouncement.vue";
+import notification from "../views/dialog/updateAnnouncement.vue";
 const div = document.createElement('div')
 div.setAttribute('class', 'my-message-contsiner')
+div.setAttribute('style', 'z-index: 2007;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);')
 document.body.appendChild(div)
 
 export default (data) => {
+  // console.log(data)
   const { title, content } = data
+  // console.log(notification)
+  console.log(div)
   // 创建虚拟 DOM
   const VNode = createVNode(notification, { title, content })
+  // console.log(VNode)
   // 通过 render 函数挂载到页面中
   render(VNode, div)
 }

src/utils/request.js

@@ -6,7 +6,7 @@ import { tansParams, blobValidate } from '@/utils/ruoyi'
 import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 import useUserStore from '@/store/modules/user'
-// import notification from '../views/dialog/notification.vue'
+import Notification from '../plugins/notification'
 // import emitter from '../eventBus'
 // import { getCurrentInstance } from 'vue';
 // import { reject } from 'lodash-es'
@@ -165,6 +165,8 @@ service.interceptors.response.use(
       message = '系统接口' + message.substr(message.length - 3) + '异常'
     } else if (message.includes('SHOW NOTIFICATION')) {
       // showDialog(data)
+      // Notification(data[0])
+
     }
     ElMessage({ message: message, type: 'error', duration: 5 * 1000 })
     return Promise.reject(error)

src/views/dialog/notification.vue

@@ -41,7 +41,7 @@ onMounted(() => {
   // console.log(emitter)
   // emitter.on('show-dialog', open);
   const instance = getCurrentInstance().appContext.app
-  // app.config.globalProperties.$notificate = { openForUpdate }
+  instance.config.globalProperties.$notificate = { openForUpdate }
 });
 
 onUnmounted(() => {

src/views/dialog/updateAnnouncement.vue

@@ -10,39 +10,63 @@
     <div v-html="content" style="padding: 12px;height: 500px;"></div>
   </el-dialog>
 </template>
-<script setup>
-import { getCurrentInstance, toRefs } from 'vue'
-
-// import emitter from '../../eventBus';
-const props = defineProps({
-  title: {
-    type: 'String',
-    default: ''
+<script>
+import { getCurrentInstance, toRefs, onMounted } from 'vue'
+import { ElDialog } from 'element-plus';
+import 'element-plus/theme-chalk/el-dialog.css'; // 引入 el-dialog 的样式
+import 'element-plus/theme-chalk/el-button.css';
+// import { ElDialog } from 'element-plus';
+export default {
+  name: 'Notification',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    }
   },
-  content: {
-    type: 'String',
-    default: ''
+  setup() {
+    const visible = ref(false)
+    onMounted(() => {
+      visible.value = true
+    })
+    return { visible }
   }
-});
-const { title, content } = toRefs(props)
-const visible = ref(false)
-const close = () => {
-  visible.value = false
 }
-onMounted(() => {
-  // console.log('mounted notification')
-  // console.log(emitter)
-  // emitter.on('show-dialog', open);
-  const instance = getCurrentInstance().appContext.app
-  // app.config.globalProperties.$notificate = { openForUpdate }
-});
 
-onUnmounted(() => {
-  // emitter.off('show-dialog');
-});
+// // import emitter from '../../eventBus';
+// const props = defineProps({
+//   title: {
+//     type: 'String',
+//     default: ''
+//   },
+//   content: {
+//     type: 'String',
+//     default: ''
+//   }
+// });
+// const { title, content } = toRefs(props)
+// const visible = ref(false)
+// const close = () => {
+//   visible.value = false
+// }
+// onMounted(() => {
+//   // console.log('mounted notification')
+//   // console.log(emitter)
+//   // emitter.on('show-dialog', open);
+//   // const instance = getCurrentInstance().appContext.app
+//   // instance.config.globalProperties.$notificate = { openForUpdate }
+// });
+
+// onUnmounted(() => {
+//   // emitter.off('show-dialog');
+// });
 
-defineExpose({
-  open,
-  openForUpdate
-})
+// defineExpose({
+//   open,
+//   openForUpdate
+// })
 </script>