信息通知前端、后端代码、websocket(el-admin版本)、添加sys_dict到excel

mes/qd/src/layout/components/Navbar.vue

@@ -15,6 +15,8 @@
         <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
+        <notice-icon class="right-menu-item"/>
+        <notice-icon-reader ref="noticeIconReader"/>
 
         <el-tooltip content="布局设置" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
@@ -58,9 +60,13 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import Avatar from '@/assets/images/avatar.png'
+import NoticeIcon from "@/views/system/notice/NoticeIcon.vue";
+import NoticeIconReader from "@/views/system/notice/NoticeIconReader.vue";
 
 export default {
   components: {
+    NoticeIconReader,
+    NoticeIcon,
     Breadcrumb,
     Hamburger,
     Screenfull,

mes/qd/src/main.js

@@ -40,6 +40,8 @@ import { getValueByCode } from '@/api/system/param'
 
 import 'jquery'
 
+// 安装总线
+import VueBus from 'vue-bus'
 Vue.use(scroll)
 
 Vue.use(AFTableColumn)
@@ -48,6 +50,7 @@ Vue.use(VueHighlightJS)
 Vue.use(mavonEditor)
 Vue.use(permission)
 Vue.use(dict)
+Vue.use(VueBus)
 
 // 全局设置控件样式https://codeantenna.com/a/0IN5FMJk5h
 Element.Table.props.border = { type: Boolean, default: true }

mes/qd/src/views/system/notice/NoticeIcon.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-popover
+    placement="top-end"
+    width="450"
+    trigger="manual"
+    v-model="visible">
+    <div style="margin: 5px" v-loading="loading">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane :label="d.label" :name="d.value" v-for="d in dict.notice_type" :key="d.id">
+          <el-empty v-show="notReadMsgList[d.value-1].length == 0" description="暂无信息" ></el-empty>
+          <div v-for="o in notReadMsgList[d.value-1]" :key="o.notice_id">
+            <a href="javascript:" @click="showMessage(o)">
+              <el-row @click="showMessage">
+                <el-col :span="6">
+                  <el-tag type="danger">{{ dict.label.notice_type[o.notice_type] }}</el-tag>
+                </el-col>
+                <el-col :span="9" style="font-weight: bolder">{{o.notice_title}}</el-col>
+                <el-col :span="9" style="color: #cccccc">{{o.create_time}}</el-col>
+              </el-row>
+              <el-divider ></el-divider>
+            </a>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <div style="text-align: right">
+        <el-button type="text" @click="visible = !visible">取消</el-button>
+        <el-button type="text" @click="toSiteMessage" >查看更多>></el-button>
+      </div>
+    </div>
+    <span slot="reference" @click="fetchNotice">
+      <el-badge :value="notReadMsgCount" :hidden="notReadMsgCount==0">
+        <el-icon class="el-icon-bell" style="font-size: 22px;"></el-icon>
+      </el-badge>
+    </span>
+  </el-popover>
+</template>
+
+<script>
+import crudNotice from './api/notice'
+import { NOTICE_MESSAGE_UPDATE, NOTICE_SHOW_MESSAGE } from './code/VueBaseCode'
+export default {
+  dicts: ['deal_status', 'have_read_type', 'notice_type'],
+  name: 'NoticeIcon',
+  data() {
+    return {
+      loading: false,
+      visible: false,
+      activeName: '1',
+      // 未读消息数量
+      notReadMsgCount: 0,
+      // 消息内容
+      notReadMsgList: []
+    }
+  },
+  methods: {
+    /**
+     * 打开列表页
+     */
+    fetchNotice() {
+      if (this.visible) {
+        this.visible = false
+        this.loading = false
+      } else {
+        this.visible = true
+        this.loading = true
+        // 消息列表
+        crudNotice.pageByReceive().then(res => {
+          this.notReadMsgList = res
+          this.loading = false
+          console.log(this.notReadMsgList)
+        })
+      }
+    },
+    /**
+     * 未读的消息数量
+     */
+    receivedCount() {
+      // 查询当前用户的未读消息数量
+      crudNotice.countByReceiveNotRead().then(res => {
+        this.notReadMsgCount = res
+      })
+    },
+    /**
+     * 查看消息
+     */
+    showMessage(message) {
+      // 标记已读
+      crudNotice.read(message.notice_id).then(() => {
+        this.receivedCount()
+      })
+      this.$bus.emit(NOTICE_SHOW_MESSAGE, message)
+      this.visible = false
+    },
+    /**
+     * 跳转到站内信界面
+     */
+    toSiteMessage() {
+      this.$router.push({
+        path: '/monitor/notice'
+      })
+      this.visible = false
+    },
+    handleClick(tab, event) {
+      // console.log(this.dict.notice_type)
+      // console.log(tab, event)
+    }
+  },
+  mounted() {
+    this.receivedCount()
+    this.$bus.on(NOTICE_MESSAGE_UPDATE, this.receivedCount) // 监听事件
+  },
+  destroyed() {
+    this.$bus.off(NOTICE_MESSAGE_UPDATE)
+  }
+}
+</script>
+
+<style scoped>
+/deep/.el-badge__content.is-fixed {
+  top: 10px;
+}
+.el-divider{
+  margin: 8px 0;
+}
+</style>

mes/qd/src/views/system/notice/NoticeIconReader.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-dialog
+    title="消息详情"
+    :visible.sync="visible"
+    :modal-append-to-body="false"
+    :append-to-body="true"
+    width="40%">
+    <div style="margin-top: 5px">
+      <el-descriptions class="margin-top" :column="3" border>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-user"></i>
+            标题
+          </template>
+          {{message.notice_title}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-mobile-phone"></i>
+            信息类型
+          </template>
+          <el-tag size="small" type="danger">
+            {{ dict.label.notice_type[message.notice_type] }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-location-outline"></i>
+            创建时间
+          </template>
+          {{ message.create_time }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-tickets"></i>
+            处理情况
+          </template>
+          <el-tag size="small" type="warning">
+            {{ dict.label.deal_status[message.deal_status] }}
+          </el-tag>
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-office-building"></i>
+            内容
+          </template>
+          {{message.notice_content}}
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button type="primary" size="mini" @click="handleCancel">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import crudNotice from './api/notice'
+import { NOTICE_SHOW_MESSAGE } from './code/VueBaseCode'
+export default {
+  dicts: ['deal_status', 'have_read_type', 'notice_type'],
+  name: 'NoticeIconReader',
+  data() {
+    return {
+      visible: false,
+      confirmLoading: false,
+      message: {
+        have_read: false,
+        notice_type: null,
+        deal_status: null,
+        notice_content: null,
+        notice_id: '',
+        create_time: '',
+        notice_title: '',
+        read_time: ''
+      },
+      bodyStyle: {
+        padding: '0',
+        maxHeight: (window.innerHeight * 0.6) + 'px',
+        'overflow-y': 'auto'
+      },
+      modelStyle: {
+        width: '60%',
+        style: { top: '10px' },
+        fullScreen: false
+      }
+    }
+  },
+  methods: {
+    /**
+     * 显示消息内容
+     */
+    show(row) {
+      // console.log('sss', row)
+      this.visible = true
+      this.confirmLoading = true
+      this.message = row
+      crudNotice.findById(row.notice_id).then(res => {
+        this.message = res
+        this.confirmLoading = false
+      })
+    },
+    /**
+     * 关闭
+     */
+    handleCancel() {
+      this.visible = false
+    }
+  },
+  mounted() {
+    // 绑定查看站内信消息事件
+    this.$bus.on(NOTICE_SHOW_MESSAGE, this.show)
+  },
+  destroyed() {
+    this.$bus.off(NOTICE_SHOW_MESSAGE)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

mes/qd/src/views/system/notice/api/notice.js

@@ -0,0 +1,94 @@
+import request from '@/utils/request'
+
+/**
+ * 获取未读信息
+ * @returns {AxiosPromise}
+ */
+export function pageByReceive() {
+  return request({
+    url: '/api/notice/pageByReceive',
+    method: 'get'
+  })
+}
+
+/**
+ * 未读消息数量
+ */
+export function countByReceiveNotRead() {
+  return request({
+    url: '/api/notice/countByReceiveNotRead',
+    method: 'GET'
+  })
+}
+
+/**
+ * 标记为已读
+ */
+export function read(id) {
+  return request({
+    url: '/api/notice/read',
+    method: 'post',
+    data: id
+  })
+}
+
+/**
+ * 标记为已修改
+ */
+export function deal(id) {
+  return request({
+    url: '/api/notice/deal',
+    method: 'post',
+    data: id
+  })
+}
+
+/**
+ * 批量已读
+ * @param data
+ * @returns {*}
+ */
+export function changeRead(data) {
+  return request({
+    url: 'api/notice/changeRead',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 查看消息
+ */
+export function findById(id) {
+  return request({
+    url: '/api/notice/findById',
+    method: 'post',
+    data: id
+  })
+}
+
+export function add(data) {
+  return request({
+    url: 'api/notice',
+    method: 'post',
+    data
+  })
+}
+
+export function del(ids) {
+  return request({
+    url: 'api/notice/',
+    method: 'delete',
+    data: ids
+  })
+}
+
+export function edit(data) {
+  return request({
+    url: 'api/notice',
+    method: 'put',
+    data
+  })
+}
+
+export default { add, edit, del, pageByReceive, countByReceiveNotRead, read, findById, deal, changeRead }

mes/qd/src/views/system/notice/code/VueBaseCode.js

@@ -0,0 +1,15 @@
+/* 消息服务 */
+/**
+ * 显示站内信消息
+ */
+export const NOTICE_SHOW_MESSAGE = 'notice_show_message'
+/**
+ * 通知消息发生消息更新 主要是 未读数量更新
+ */
+export const NOTICE_MESSAGE_UPDATE = 'notice_message_update'
+
+/* 其他 */
+/**
+ * ws测试事件
+ */
+export const EVENT_TEST_WEBSOCKET = 'event_test_websocket'

mes/qd/src/views/system/notice/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <!--工具栏-->
+    <div class="head-container">
+      <div v-if="crud.props.searchToggle">
+        <!-- 搜索 -->
+        <el-form
+          :inline="true"
+          class="demo-form-inline"
+          label-position="right"
+          label-width="90px"
+          label-suffix=":"
+        >
+          <el-form-item label="信息标题">
+            <el-input
+              v-model="query.notice_title"
+              clearable
+              size="mini"
+              placeholder="请输入标题"
+              @keyup.enter.native="crud.toQuery"
+            />
+          </el-form-item>
+          <el-form-item label="信息类型">
+            <el-select
+              v-model="query.notice_type"
+              clearable
+              size="mini"
+              placeholder="信息类型"
+              class="filter-item"
+              @change="hand"
+            >
+              <el-option
+                v-for="item in dict.notice_type"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="读取状态">
+            <el-select
+              v-model="query.have_read"
+              clearable
+              size="mini"
+              placeholder="读取状态"
+              class="filter-item"
+              @change="hand"
+            >
+              <el-option
+                v-for="item in dict.have_read_type"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="处理情况">
+            <el-select
+              v-model="query.deal_status"
+              clearable
+              size="mini"
+              placeholder="处理情况"
+              class="filter-item"
+              @change="hand"
+            >
+              <el-option
+                v-for="item in dict.deal_status"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <rrOperation />
+        </el-form>
+      </div>
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <crudOperation :permission="permission">
+        <el-button
+          slot="right"
+          class="filter-item"
+          size="mini"
+          type="success"
+          icon="el-icon-circle-check"
+          :disabled="crud.selections.length === 0"
+          @click="changeRead(crud.selections)"
+        >
+          批量已读
+        </el-button>
+      </crudOperation>
+      <!--表单组件-->
+      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
+        <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
+          <el-form-item label="信息标题" prop="notice_title">
+            <el-input v-model="form.notice_title" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="信息内容" prop="notice_content">
+            <el-input v-model="form.notice_content" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="信息类型" prop="notice_type">
+            <el-input v-model="form.notice_type" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="读取状态" prop="have_read">
+            <el-input v-model="form.have_read" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="读取时间">
+            <el-input v-model="form.read_time" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="处理状态" prop="deal_status">
+            <el-input v-model="form.deal_status" style="width: 370px;" />
+          </el-form-item>
+          <el-form-item label="创建时间" prop="create_time">
+            <el-input v-model="form.create_time" style="width: 370px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="text" @click="crud.cancelCU">取消</el-button>
+          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
+        </div>
+      </el-dialog>
+      <!--表格渲染-->
+      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="mini" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
+        <el-table-column type="selection" width="55" />
+        <el-table-column prop="notice_title" label="信息标题" :min-width="flexWidth('notice_title',crud.data,'信息标题')" />
+        <el-table-column prop="notice_content" label="信息内容" :min-width="flexWidth('notice_content',crud.data,'信息内容')" />
+        <el-table-column prop="notice_type" label="信息类型" :min-width="flexWidth('notice_type',crud.data,'信息类型')">
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.notice_type == 1" type="danger">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
+            <el-tag v-else type="warning">{{ dict.label.notice_type[scope.row.notice_type] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="have_read" label="读取状态" :min-width="flexWidth('have_read',crud.data,'读取状态')" >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.have_read == 1" type="danger">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
+            <el-tag v-else type="success">{{ dict.label.have_read_type[scope.row.have_read] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="read_time" label="读取时间" :min-width="flexWidth('read_time',crud.data,'读取时间')" />
+        <el-table-column prop="deal_status" label="处理状态" :min-width="flexWidth('deal_status',crud.data,'处理状态')" >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.deal_status == 1" type="info">{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
+            <el-tag v-else>{{ dict.label.deal_status[scope.row.deal_status] }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="create_time" label="创建时间" :min-width="flexWidth('create_time',crud.data,'创建时间')" />
+        <el-table-column v-permission="[]" label="操作" width="200px" align="center" fixed="right">
+          <template slot-scope="scope">
+            <el-button
+              type="text"
+              slot="left"
+              icon="el-icon-view"
+              @click="show(scope.row)">
+              查看
+            </el-button>
+            <el-button
+              type="text"
+              slot="left"
+              icon="el-icon-help"
+              @click="deal(scope.row)">
+              处理
+            </el-button>
+            <udOperation
+              :data="scope.row"
+              :permission="permission"
+              :is-visiable-edit="false"
+              style="display: inline"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!--分页组件-->
+      <pagination />
+    </div>
+  </div>
+</template>
+
+<script>
+import CRUD, { crud, form, header, presenter } from '@crud/crud'
+import crudNotice from './api/notice'
+import rrOperation from '@crud/RR.operation.vue'
+import crudOperation from '@crud/CRUD.operation.vue'
+import udOperation from '@crud/UD.operation.vue'
+import pagination from '@crud/Pagination.vue'
+import { NOTICE_SHOW_MESSAGE, NOTICE_MESSAGE_UPDATE } from '@/views/system/notice/code/VueBaseCode'
+
+const defaultForm = { notice_id: null, notice_title: null, notice_content: null, notice_type: null, have_read: null, read_time: null, deal_status: null, create_time: null }
+export default {
+  name: 'Notice',
+  dicts: ['deal_status', 'have_read_type', 'notice_type'],
+  components: { pagination, crudOperation, rrOperation, udOperation },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
+  cruds() {
+    return CRUD({
+      title: '消息通知',
+      url: 'api/notice',
+      idField: 'notice_id',
+      sort: 'notice_id,desc',
+      crudMethod: { ...crudNotice },
+      optShow: {
+        add: false,
+        edit: false,
+        del: true,
+        download: false,
+        reset: true
+      }
+    })
+  },
+  data() {
+    return {
+      permission: {},
+      rules: {
+        notice_title: [
+          { required: true, message: '信息标题不能为空', trigger: 'blur' }
+        ],
+        notice_content: [
+          { required: true, message: '信息内容不能为空', trigger: 'blur' }
+        ],
+        notice_type: [
+          { required: true, message: '信息类型不能为空', trigger: 'blur' }
+        ],
+        have_read: [
+          { required: true, message: '读取状态不能为空', trigger: 'blur' }
+        ],
+        deal_status: [
+          { required: true, message: '处理状态不能为空', trigger: 'blur' }
+        ],
+        create_time: [
+          { required: true, message: '创建时间不能为空', trigger: 'blur' }
+        ]
+      }}
+  },
+  methods: {
+    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
+    [CRUD.HOOK.beforeRefresh]() {
+      return true
+    },
+    show(record) {
+      if (record.have_read == '1') {
+        crudNotice.read(record.notice_id).then(() => {
+          record.have_read = '2'
+          this.$bus.emit(NOTICE_MESSAGE_UPDATE)
+        })
+      }
+      this.$bus.emit(NOTICE_SHOW_MESSAGE, record)
+      this.crud.toQuery()
+    },
+    hand(value) {
+      this.crud.toQuery()
+    },
+    deal(row) {
+      crudNotice.deal(row.notice_id).then(() => {
+        row.have_read = '2'
+        this.$bus.emit(NOTICE_MESSAGE_UPDATE)
+      })
+      this.crud.toQuery()
+    },
+    changeRead(data) {
+      const param = {}
+      param.data = data
+      param.have_read = '2'
+      crudNotice.changeRead(param).then(() => {
+        this.$bus.emit(NOTICE_MESSAGE_UPDATE)
+      })
+      this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      this.crud.toQuery()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>