feat: 继续完善消息提醒

backend/src/main/java/io/dataease/base/mapper/ext/ExtSysMsgMapper.java

+package io.dataease.base.mapper.ext;
+
+import org.apache.ibatis.annotations.Delete;
+import org.apache.ibatis.annotations.Mapper;
+import org.apache.ibatis.annotations.Param;
+import org.apache.ibatis.annotations.Update;
+
+import java.util.List;
+
+@Mapper
+public interface ExtSysMsgMapper {
+
+
+    @Update({
+        "<script>",
+            "update sys_msg set status = 1 where msg_id in ",
+            "<foreach collection='msgIds' item='msgId' open='(' separator=',' close=')' >",
+                " #{msgId}",
+            "</foreach>",
+        "</script>"
+    })
+    int batchStatus(@Param("msgIds") List<Long> msgIds);
+
+
+    @Delete({
+            "<script>",
+                "delete from sys_msg where msg_id in ",
+                "<foreach collection='msgIds' item='msgId' open='(' separator=',' close=')' >",
+                    " #{msgId}",
+                "</foreach>",
+            "</script>"
+    })
+    int batchDelete(@Param("msgIds") List<Long> msgIds);
+
+
+}

backend/src/main/java/io/dataease/controller/message/MsgController.java

@@ -36,4 +36,15 @@ public class MsgController {
     public void setReaded(@PathVariable Long msgId) {
         sysMsgService.setReaded(msgId);
     }
+
+
+    @PostMapping("/batchRead")
+    public void batchRead(@RequestBody List<Long> msgIds) {
+        sysMsgService.setBatchReaded(msgIds);
+    }
+
+    @PostMapping("/batchDelete")
+    public void batchDelete(@RequestBody List<Long> msgIds) {
+        sysMsgService.batchDelete(msgIds);
+    }
 }

backend/src/main/java/io/dataease/controller/message/dto/MsgRequest.java

@@ -3,11 +3,16 @@ package io.dataease.controller.message.dto;
 import lombok.Data;
 
 import java.io.Serializable;
+import java.util.List;
 
 @Data
 public class MsgRequest implements Serializable {
 
+    private static final long serialVersionUID = 1920091635946508658L;
+
     private Integer type;
 
     private Boolean status;
+
+    private List<String> orders;
 }

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -10,6 +10,7 @@ import io.dataease.commons.constants.JdbcConstants;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.commons.utils.CommonBeanFactory;
+import io.dataease.commons.utils.LogUtil;
 import io.dataease.controller.request.chart.ChartExtFilterRequest;
 import io.dataease.controller.request.chart.ChartExtRequest;
 import io.dataease.controller.request.chart.ChartGroupRequest;
@@ -239,7 +240,17 @@ public class ChartViewService {
             else {
                 data = (List<String[]>) cache;
             }*/
-            data = cacheViewData(datasourceProvider, datasourceRequest, id);
+            try{
+                data = cacheViewData(datasourceProvider, datasourceRequest, id);
+            }catch (Exception e) {
+                LogUtil.error(e);
+            }finally {
+                // 如果当前对象被锁 且 当前线程冲入次数 > 0 则释放锁
+                if (lock.isLocked() && lock.getHoldCount() > 0) {
+                    lock.unlock();
+                }
+            }
+
         }
         if (StringUtils.containsIgnoreCase(view.getType(), "pie") && data.size() > 1000) {
             data = data.subList(0, 1000);
@@ -320,11 +331,17 @@ public class ChartViewService {
         Object cache = CacheUtils.get(JdbcConstants.VIEW_CACHE_KEY, viewId);
         if (cache == null) {
             if (lock.tryLock()) {// 获取锁成功
-                result = datasourceProvider.getData(datasourceRequest);
-                if (result != null) {
-                    CacheUtils.put(JdbcConstants.VIEW_CACHE_KEY, viewId, result, null, null);
+                try{
+                    result = datasourceProvider.getData(datasourceRequest);
+                    if (result != null) {
+                        CacheUtils.put(JdbcConstants.VIEW_CACHE_KEY, viewId, result, null, null);
+                    }
+                }catch (Exception e) {
+                    LogUtil.error(e);
+                    throw e;
+                }finally {
+                    lock.unlock();
                 }
-                lock.unlock();
             }else {//获取锁失败
                 Thread.sleep(100);//避免CAS自旋频率过大 占用cpu资源过高
                 result = cacheViewData(datasourceProvider, datasourceRequest, viewId);

backend/src/main/java/io/dataease/service/message/SysMsgService.java

@@ -4,7 +4,9 @@ package io.dataease.service.message;
 import io.dataease.base.domain.SysMsg;
 import io.dataease.base.domain.SysMsgExample;
 import io.dataease.base.mapper.SysMsgMapper;
+import io.dataease.base.mapper.ext.ExtSysMsgMapper;
 import io.dataease.controller.message.dto.MsgRequest;
+import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.stereotype.Service;
 import javax.annotation.Resource;
@@ -16,12 +18,20 @@ public class SysMsgService {
     @Resource
     private SysMsgMapper sysMsgMapper;
 
+    @Resource
+    private ExtSysMsgMapper extSysMsgMapper;
+
     public List<SysMsg> query(Long userId, MsgRequest msgRequest) {
-        String orderClause = "";
+        String orderClause = " create_time desc";
         SysMsgExample example = new SysMsgExample();
         SysMsgExample.Criteria criteria = example.createCriteria();
         criteria.andUserIdEqualTo(userId);
 
+        List<String> orders = msgRequest.getOrders();
+
+        if (CollectionUtils.isNotEmpty(orders)) {
+            orderClause = String.join(", ", orders);
+        }
 
         if (ObjectUtils.isNotEmpty(msgRequest.getType())) {
             criteria.andTypeEqualTo(msgRequest.getType());
@@ -29,11 +39,8 @@ public class SysMsgService {
 
         if (ObjectUtils.isNotEmpty(msgRequest.getStatus())) {
             criteria.andStatusEqualTo(msgRequest.getStatus());
-        }else {
-            orderClause += " status asc ,";
         }
 
-        orderClause += " create_time desc";
         example.setOrderByClause(orderClause);
         List<SysMsg> sysMsgs = sysMsgMapper.selectByExample(example);
         return sysMsgs;
@@ -43,18 +50,20 @@ public class SysMsgService {
         SysMsg sysMsg = new SysMsg();
         sysMsg.setMsgId(msgId);
         sysMsg.setStatus(true);
+        sysMsg.setReadTime(System.currentTimeMillis());
         sysMsgMapper.updateByPrimaryKeySelective(sysMsg);
     }
 
-    public void save(SysMsg sysMsg) {
-//        sysMsg.setStatus(false);
-//        sysMsg.setCreateTime(System.currentTimeMillis());
-        sysMsgMapper.insert(sysMsg);
+    public void setBatchReaded(List<Long> msgIds) {
+        extSysMsgMapper.batchStatus(msgIds);
     }
 
-    public void update(SysMsg sysMsg) {
+    public void batchDelete(List<Long> msgIds) {
+        extSysMsgMapper.batchDelete(msgIds);
+    }
 
-        sysMsgMapper.updateByPrimaryKey(sysMsg);
+    public void save(SysMsg sysMsg) {
+        sysMsgMapper.insert(sysMsg);
     }
 
 

backend/src/main/resources/i18n/messages_en_US.properties

@@ -261,4 +261,8 @@ i18n_sql_delete_not_matching=The data column of incremental delete SQL does not
 i18n_cst_ds_tb_or_field_deleted=Custom dataset union data is deleted or field changed,can not display
 i18n_no_all_delete_privilege_folder=This folder have sources which have no manage or view privilege,Can Not Be Deleted.
 i18n_excel_field_repeat=Excel exists repeat field，please fix and upload again.
-i18n_schema_is_empty=Database schema is empty
+i18n_schema_is_empty=Database schema is empty
\ No newline at end of file
+站内消息=Internal Messages
+所有消息=All Messages
+未读消息=Unread Messages
+已读消息=Read Messages
\ No newline at end of file

backend/src/main/resources/i18n/messages_zh_CN.properties

@@ -261,3 +261,7 @@ i18n_cst_ds_tb_or_field_deleted=自定义数据集所关联数据被删除或字
 i18n_no_all_delete_privilege_folder=该目录下存在没有管理权限或查看权限的资源，无法删除
 i18n_excel_field_repeat=Excel存在重复字段，请修改后重新上传
 i18n_schema_is_empty=数据库 Schema 为空
+站内消息=站内消息
+所有消息=所有消息
+未读消息=未读消息
+已读消息=已读消息

backend/src/main/resources/i18n/messages_zh_TW.properties

@@ -263,4 +263,8 @@ i18n_sql_delete_not_matching=增量刪除 sql 的數據列與數據集不匹配,
 i18n_cst_ds_tb_or_field_deleted=自定義數據集所關聯數據被刪除或字段發生變化，無法正常顯示
 i18n_no_all_delete_privilege_folder=該目錄下存在沒有管理權限或查看權限的資源，無法刪除
 i18n_excel_field_repeat=Excel存在重復字段，請修改後重新上傳
-i18n_schema_is_empty=數據庫 Schema 為空
+i18n_schema_is_empty=數據庫 Schema 為空
\ No newline at end of file
+站内消息=站內消息
+所有消息=所有消息
+未读消息=未讀消息
+已读消息=已讀消息
\ No newline at end of file

frontend/src/api/system/msg.js

@@ -17,3 +17,12 @@ export function updateStatus(msgId) {
   })
 }
 
+export function batchRead(data) {
+  return request({
+    url: '/api/sys_msg/batchRead',
+    method: 'post',
+    loading: true,
+    data
+  })
+}
+

frontend/src/components/Notification/index.vue

@@ -41,9 +41,9 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="msg-foot-class">
+    <div class="msg-foot-class" @click="showMore">
       <el-row style="padding: 5px 0;margin-bottom: -5px;cursor:point;" @click="showMore">
-        <span @click="showMore">{{ $t('webmsg.show_more') }}</span>
+        <span>{{ $t('webmsg.show_more') }}</span>
       </el-row>
     </div>
 
@@ -62,6 +62,8 @@
 <script>
 import { query, updateStatus } from '@/api/system/msg'
 import { msgTypes, getTypeName } from '@/utils/webMsg'
+import { mapGetters } from 'vuex'
+import bus from '@/utils/bus'
 export default {
   data() {
     return {
@@ -78,7 +80,9 @@ export default {
     }
   },
   computed: {
-
+    ...mapGetters([
+      'permission_routes'
+    ])
   },
   created() {
     this.search()
@@ -87,6 +91,11 @@ export default {
       this.search()
     }, 30000)
   },
+  mounted() {
+    bus.$on('refresh-top-notification', () => {
+      this.search()
+    })
+  },
   beforeDestroy() {
     this.timer && clearInterval(this.timer)
   },
@@ -100,8 +109,15 @@ export default {
     showDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.type, sourceParam: row.param }}
       this.visible = false
-      this.$router.push({ name: row.router, params: param })
-      this.setReaded(row.msgId)
+      if (this.$route && this.$route.name && this.$route.name.includes('panel') && row.type === 0) {
+        bus.$emit('to-msg-share', param)
+      } else if (this.$route && this.$route.name && this.$route.name.includes('dataset') && row.type === 1) {
+        bus.$emit('to-msg-dataset', param)
+      } else {
+        this.$router.push({ name: row.router, params: param })
+      }
+
+      row.status || this.setReaded(row.msgId)
     },
     remove(row) {
 
@@ -113,11 +129,24 @@ export default {
       const routerName = 'sys-msg-web-all'
       this.visible = false
       this.$router.push({ name: routerName })
-      this.$emit('refresh-top-bar')
+      this.openSystem()
+    },
+    openSystem() {
+      const path = '/system'
+      let route = this.permission_routes.find(
+        item => item.path === '/' + path.split('/')[1]
+      )
+      // 如果找不到这个路由，说明是首页
+      if (!route) {
+        route = this.permission_routes.find(item => item.path === '/')
+      }
+      this.$store.commit('permission/SET_CURRENT_ROUTES', route)
+      // this.setSidebarHide(route)
     },
     search() {
       const param = {
-        status: false
+        status: false,
+        orders: [' create_time desc ']
       }
       const { currentPage, pageSize } = this.paginationConfig
       query(currentPage, pageSize, param).then(response => {

frontend/src/lang/en.js

@@ -1200,6 +1200,13 @@ export default {
     show_more: 'View more',
     all_type: 'All type',
     panel_type: 'Panel Share',
-    dataset_type: 'Dataset sync'
+    dataset_type: 'Dataset sync',
+    content: 'Content',
+    sned_time: 'Send Time',
+    read_time: 'Read Time',
+    type: 'Type',
+    mark_readed: 'Mark As Read',
+    please_select: 'Please select at least one message',
+    mark_success: 'Mark read successfully'
   }
 }

frontend/src/lang/tw.js

@@ -947,7 +947,7 @@ export default {
     oracle_service_name: '服務名',
     get_schema: '獲取 Schema',
     schema: '數據庫 Schema',
-    please_choose_schema: '請選擇數據庫 Schema',
+    please_choose_schema: '請選擇數據庫 Schema'
   },
   pblink: {
     key_pwd: '請輸入密碼打開鏈接',
@@ -1200,6 +1200,13 @@ export default {
     show_more: '查看更多',
     all_type: '全部類型',
     panel_type: '儀表板分享',
-    dataset_type: '數據集同步'
+    dataset_type: '數據集同步',
+    content: '消息內容',
+    sned_time: '提交時間',
+    read_time: '查看時間',
+    type: '類型',
+    mark_readed: '標記已讀',
+    please_select: '請至少選擇一條消息',
+    mark_success: '標記已讀成功'
   }
 }

frontend/src/lang/zh.js

@@ -1202,6 +1202,13 @@ export default {
     show_more: '查看更多',
     all_type: '全部类型',
     panel_type: '仪表板分享',
-    dataset_type: '数据集同步'
+    dataset_type: '数据集同步',
+    content: '消息内容',
+    sned_time: '提交时间',
+    read_time: '查看时间',
+    type: '类型',
+    mark_readed: '标记已读',
+    please_select: '请至少选择一条消息',
+    mark_success: '标记已读成功'
   }
 }

frontend/src/layout/components/Topbar.vue

@@ -35,7 +35,7 @@
         <!-- <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
         </el-tooltip> -->
-        <notification class="right-menu-item hover-effect" @refresh-top-bar="initCurrentRoutes" />
+        <notification class="right-menu-item hover-effect" />
         <lang-select class="right-menu-item hover-effect" />
         <div style="height: 100%;padding: 0 8px;" class="right-menu-item hover-effect">
           <a href="https://dataease.io/docs/" target="_blank" style="display: flex;height: 100%;width: 100%;justify-content: center;align-items: center;">

frontend/src/views/dataset/index.vue

@@ -26,7 +26,7 @@ import AddExcel from './add/AddExcel'
 import AddCustom from './add/AddCustom'
 import FieldEdit from './data/FieldEdit'
 import { removeClass } from '@/utils'
-
+import bus from '@/utils/bus'
 export default {
   name: 'DataSet',
   components: { DeMainContainer, DeContainer, DeAsideContainer, Group, DataHome, ViewTable, AddDB, AddSQL, AddExcel, AddCustom },
@@ -39,27 +39,31 @@ export default {
   },
   mounted() {
     removeClass(document.body, 'showRightPanel')
+    bus.$on('to-msg-dataset', params => {
+      this.toMsgShare(params)
+    })
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
-    let routerParam
-    if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
-      // 说明是从消息通知跳转过来的
-      if (routerParam.msgType === 1) { // 是数据集同步
-        if (routerParam.sourceParam) {
-          try {
-            const msgParam = JSON.parse(routerParam.sourceParam)
-            this.param = msgParam.tableId
-            this.component = ViewTable
-            this.$nextTick(() => {
-              this.$refs.dynamic_component.msg2Current(routerParam.sourceParam)
-            })
-          } catch (error) {
-            console.error(error)
-          }
-        }
-      }
-    }
+    const routerParam = this.$router.currentRoute.params
+    this.toMsgShare(routerParam)
+    // if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
+    //   // 说明是从消息通知跳转过来的
+    //   if (routerParam.msgType === 1) { // 是数据集同步
+    //     if (routerParam.sourceParam) {
+    //       try {
+    //         const msgParam = JSON.parse(routerParam.sourceParam)
+    //         this.param = msgParam.tableId
+    //         this.component = ViewTable
+    //         this.$nextTick(() => {
+    //           this.$refs.dynamic_component.msg2Current(routerParam.sourceParam)
+    //         })
+    //       } catch (error) {
+    //         console.error(error)
+    //       }
+    //     }
+    //   }
+    // }
   },
   methods: {
     switchComponent(c) {
@@ -91,6 +95,26 @@ export default {
 
     saveSuccess(val) {
       this.saveStatus = val
+    },
+
+    toMsgShare(routerParam) {
+      if (routerParam !== null && routerParam.msgNotification) {
+      // 说明是从消息通知跳转过来的
+        if (routerParam.msgType === 1) { // 是数据集同步
+          if (routerParam.sourceParam) {
+            try {
+              const msgParam = JSON.parse(routerParam.sourceParam)
+              this.param = msgParam.tableId
+              this.component = ViewTable
+              this.$nextTick(() => {
+                this.$refs.dynamic_component.msg2Current(routerParam.sourceParam)
+              })
+            } catch (error) {
+              console.error(error)
+            }
+          }
+        }
+      }
     }
   }
 }

frontend/src/views/msg/all.vue

@@ -11,10 +11,11 @@
       :pagination-config="paginationConfig"
       @select="select"
       @search="search"
+      @sort-change="sortChange"
     >
 
-      <el-table-column prop="content" :label="$t('commons.name')">
-        <template v-slot:default="scope">
+      <el-table-column prop="content" :label="$t('webmsg.content')">
+        <template slot-scope="scope">
 
           <span style="display: flex;flex: 1;">
             <span>
@@ -29,13 +30,13 @@
         </template>
       </el-table-column>
 
-      <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
-        <template v-slot:default="scope">
+      <el-table-column prop="createTime" sortable="custom" :label="$t('webmsg.sned_time')" width="180">
+        <template slot-scope="scope">
           <span>{{ scope.row.createTime | timestampFormatDate }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column prop="type" :label="$t('datasource.type')" width="120">
+      <el-table-column prop="type" sortable="custom" :label="$t('webmsg.type')" width="120">
         <template slot-scope="scope">
           <span>{{ $t(getTypeName(scope.row.type)) }}</span>
         </template>
@@ -52,6 +53,8 @@ import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
 import { query, updateStatus } from '@/api/system/msg'
 import { msgTypes, getTypeName } from '@/utils/webMsg'
+import bus from '@/utils/bus'
+import { addOrder, formatOrders } from '@/utils/index'
 export default {
   components: {
     LayoutContent,
@@ -75,7 +78,8 @@ export default {
         currentPage: 1,
         pageSize: 10,
         total: 0
-      }
+      },
+      orderConditions: []
     }
   },
   mounted() {
@@ -91,6 +95,13 @@ export default {
       if (this.selectType >= 0) {
         param.type = this.selectType
       }
+
+      if (this.orderConditions.length === 0) {
+        param.orders = [' status asc ', 'create_time desc ']
+      } else {
+        param.orders = formatOrders(this.orderConditions)
+      }
+
       const { currentPage, pageSize } = this.paginationConfig
       query(currentPage, pageSize, param).then(response => {
         this.data = response.data.listObject
@@ -106,13 +117,26 @@ export default {
     toDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.type, sourceParam: row.param }}
       this.$router.push({ name: row.router, params: param })
-      this.setReaded(row)
+      row.status || this.setReaded(row)
     },
     // 设置已读
     setReaded(row) {
       updateStatus(row.msgId).then(res => {
+        bus.$emit('refresh-top-notification')
         this.search()
       })
+    },
+    sortChange({ column, prop, order }) {
+      this.orderConditions = []
+      if (!order) {
+        this.search()
+        return
+      }
+      if (prop === 'createTime') {
+        prop = 'create_time'
+      }
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search()
     }
   }
 

frontend/src/views/msg/readed.vue

@@ -11,10 +11,11 @@
       :pagination-config="paginationConfig"
       @select="select"
       @search="search"
+      @sort-change="sortChange"
     >
 
-      <el-table-column prop="content" :label="$t('commons.name')">
-        <template v-slot:default="scope">
+      <el-table-column prop="content" :label="$t('webmsg.content')">
+        <template slot-scope="scope">
 
           <span style="display: flex;flex: 1;">
             <span>
@@ -29,13 +30,19 @@
         </template>
       </el-table-column>
 
-      <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
-        <template v-slot:default="scope">
+      <el-table-column prop="createTime" sortable="custom" :label="$t('webmsg.sned_time')" width="180">
+        <template slot-scope="scope">
           <span>{{ scope.row.createTime | timestampFormatDate }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column prop="type" :label="$t('datasource.type')" width="120">
+      <el-table-column prop="readTime" sortable="custom" :label="$t('webmsg.read_time')" width="180">
+        <template slot-scope="scope">
+          <span>{{ scope.row.readTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="type" sortable="custom" :label="$t('webmsg.type')" width="120">
         <template slot-scope="scope">
           <span>{{ $t(getTypeName(scope.row.type)) }}</span>
         </template>
@@ -52,6 +59,7 @@ import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
 import { query } from '@/api/system/msg'
 import { msgTypes, getTypeName } from '@/utils/webMsg'
+import { addOrder, formatOrders } from '@/utils/index'
 export default {
   components: {
     LayoutContent,
@@ -70,6 +78,7 @@ export default {
       allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
 
       columns: [],
+      orderConditions: [],
 
       paginationConfig: {
         currentPage: 1,
@@ -91,6 +100,13 @@ export default {
       if (this.selectType >= 0) {
         param.type = this.selectType
       }
+
+      if (this.orderConditions.length === 0) {
+        param.orders = [' create_time desc ']
+      } else {
+        param.orders = formatOrders(this.orderConditions)
+      }
+
       const { currentPage, pageSize } = this.paginationConfig
       query(currentPage, pageSize, param).then(response => {
         this.data = response.data.listObject
@@ -106,6 +122,21 @@ export default {
     toDetail(row) {
       const param = { ...{ msgNotification: true, msgType: row.type, sourceParam: row.param }}
       this.$router.push({ name: row.router, params: param })
+    },
+    sortChange({ column, prop, order }) {
+      this.orderConditions = []
+      if (!order) {
+        this.search()
+        return
+      }
+      if (prop === 'createTime') {
+        prop = 'create_time'
+      }
+      if (prop === 'readTime') {
+        prop = 'read_time'
+      }
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search()
     }
 
   }

frontend/src/views/msg/unread.vue

@@ -9,12 +9,22 @@
       :data="data"
       :columns="columns"
       :pagination-config="paginationConfig"
+      :search-config="searchConfig"
       @select="select"
       @search="search"
+      @selection-change="handleSelectionChange"
+      @sort-change="sortChange"
     >
-
-      <el-table-column prop="content" :label="$t('commons.name')">
-        <template v-slot:default="scope">
+      <template #toolbar>
+        <el-button :disabled="multipleSelection.length === 0" @click="markReaded">{{ $t('webmsg.mark_readed') }}</el-button>
+        <!-- <fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" /> -->
+      </template>
+      <el-table-column
+        type="selection"
+        width="55"
+      />
+      <el-table-column prop="content" :label="$t('webmsg.content')">
+        <template slot-scope="scope">
 
           <span style="display: flex;flex: 1;">
             <span>
@@ -29,13 +39,13 @@
         </template>
       </el-table-column>
 
-      <el-table-column prop="createTime" :label="$t('commons.create_time')" width="180">
-        <template v-slot:default="scope">
+      <el-table-column prop="createTime" sortable="custom" :label="$t('webmsg.sned_time')" width="180">
+        <template slot-scope="scope">
           <span>{{ scope.row.createTime | timestampFormatDate }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column prop="type" :label="$t('datasource.type')" width="120">
+      <el-table-column prop="type" sortable="custom" :label="$t('webmsg.type')" width="120">
         <template slot-scope="scope">
           <span>{{ $t(getTypeName(scope.row.type)) }}</span>
         </template>
@@ -50,8 +60,11 @@
 
 import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
-import { query, updateStatus } from '@/api/system/msg'
+import { query, updateStatus, batchRead } from '@/api/system/msg'
 import { msgTypes, getTypeName } from '@/utils/webMsg'
+import bus from '@/utils/bus'
+import { addOrder, formatOrders } from '@/utils/index'
+
 export default {
   components: {
     LayoutContent,
@@ -75,7 +88,13 @@ export default {
         currentPage: 1,
         pageSize: 10,
         total: 0
-      }
+      },
+      searchConfig: {
+        useQuickSearch: false,
+        useComplexSearch: false
+      },
+      multipleSelection: [],
+      orderConditions: []
     }
   },
   mounted() {
@@ -91,6 +110,13 @@ export default {
       if (this.selectType >= 0) {
         param.type = this.selectType
       }
+
+      if (this.orderConditions.length === 0) {
+        param.orders = [' create_time desc ']
+      } else {
+        param.orders = formatOrders(this.orderConditions)
+      }
+
       const { currentPage, pageSize } = this.paginationConfig
       query(currentPage, pageSize, param).then(response => {
         this.data = response.data.listObject
@@ -111,9 +137,37 @@ export default {
     // 设置已读
     setReaded(row) {
       updateStatus(row.msgId).then(res => {
+        bus.$emit('refresh-top-notification')
         this.search()
       })
+    },
+    markReaded() {
+      if (this.multipleSelection.length === 0) {
+        this.$warning(this.$t('webmsg.please_select'))
+        return
+      }
+      const param = this.multipleSelection.map(item => item.msgId)
+      batchRead(param).then(res => {
+        this.$success('webmsg.mark_success')
+        this.search()
+      })
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    sortChange({ column, prop, order }) {
+      this.orderConditions = []
+      if (!order) {
+        this.search()
+        return
+      }
+      if (prop === 'createTime') {
+        prop = 'create_time'
+      }
+      addOrder({ field: prop, value: order }, this.orderConditions)
+      this.search()
     }
+
   }
 
 }

frontend/src/views/panel/GrantAuth/shareTree.vue

@@ -71,7 +71,7 @@ export default {
       return data
     },
     expandMsgNode(panelIds) {
-      console.log(panelIds)
+      // console.log(panelIds)
       this.$nextTick(() => {
         this.getMsgNodes(panelIds)
       })

frontend/src/views/panel/index.vue

@@ -27,7 +27,17 @@ export default {
       param: {}
     }
   },
+  watch: {
+    $route(to, from) {
+      console.log(to)
+      console.log(from)
+      // 对路由变化作出响应...
+    }
+  },
   mounted() {
+    bus.$on('to-msg-share', params => {
+      this.toMsgShare(params)
+    })
     bus.$on('PanelSwitchComponent', (c) => {
       this.param = c.param
       this.componentName = c.name
@@ -50,18 +60,30 @@ export default {
   },
   created() {
     this.$store.dispatch('app/toggleSideBarHide', true)
-    let routerParam
-    if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
+    const routerParam = this.$router.currentRoute.params
+    // if ((routerParam = this.$router.currentRoute.params) !== null && routerParam.msgNotification) {
+    //   // 说明是从消息通知跳转过来的
+    //   if (routerParam.msgType === 0) { // 是仪表板分享
+    //     this.componentName = 'PanelMain'
+    //     this.$nextTick(() => {
+    //       this.$refs.panel_main.msg2Current(routerParam.sourceParam)
+    //     })
+    //   }
+    // }
+    this.toMsgShare(routerParam)
+  },
+  methods: {
+    toMsgShare(routerParam) {
+      if (routerParam !== null && routerParam.msgNotification) {
       // 说明是从消息通知跳转过来的
-      if (routerParam.msgType === 0) { // 是仪表板分享
-        this.componentName = 'PanelMain'
-        this.$nextTick(() => {
-          this.$refs.panel_main.msg2Current(routerParam.sourceParam)
-        })
+        if (routerParam.msgType === 0) { // 是仪表板分享
+          this.componentName = 'PanelMain'
+          this.$nextTick(() => {
+            this.$refs.panel_main.msg2Current(routerParam.sourceParam)
+          })
+        }
       }
     }
-  },
-  methods: {
 
   }
 }