perf: 支持站内信列表

src/components/TableFormatters/BooleanTagFormatter.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-tag v-if="isOk" type="success">{{ $t('common.Yes') }}</el-tag>
+    <el-tag v-else type="danger">{{ $t('common.No') }}</el-tag>
+  </div>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'BoolTagFormatter',
+  extends: BaseFormatter,
+  props: {
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          typeChange(val) {
+            return !!val
+          }
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    isOk() {
+      return this.formatterArgs.typeChange(this.cellValue)
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/TableFormatters/HtmlDisplayFormatter.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-tooltip effect="light" placement="top-start">
+    <div slot="content"><span v-html="display" /></div>
+    <span style="overflow: auto" v-html="title" />
+  </el-tooltip>
+</template>
+
+<script>
+import BaseFormatter from './base'
+export default {
+  name: 'HtmlDisplayFormatter',
+  extends: BaseFormatter,
+  data() {
+    return {
+      title: this.col.formatterArgs.getTitle(this.row),
+      display: this.col.formatterArgs.getDisplay(this.row)
+    }
+  },
+  computed: {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/TableFormatters/index.js

@@ -15,6 +15,8 @@ import ObjectRelatedFormatter from './ObjectRelatedFormatter'
 import TwoTabFormatter from './TwoTabFormatter'
 import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
+import BooleanTagFormatter from './BooleanTagFormatter'
+import HtmlDisplayFormatter from './HtmlDisplayFormatter'
 
 export default {
   DetailFormatter,
@@ -53,5 +55,7 @@ export {
   ObjectRelatedFormatter,
   TwoTabFormatter,
   ProtocolsFormatter,
-  TagChoicesFormatter
+  TagChoicesFormatter,
+  BooleanTagFormatter,
+  HtmlDisplayFormatter
 }

src/i18n/langs/en.json

@@ -1936,6 +1936,9 @@
     "dateLastLogin": "Date last login"
   },
   "notifications": {
+    "AllMessages": "All messages",
+    "ReadMessages": "Read messages",
+    "UnreadMessages": "Unread messages",
     "MessageType": "Message Type",
     "Receivers": "Receivers",
     "Subscription": "Subscription",

src/i18n/langs/ja.json

@@ -1926,6 +1926,9 @@
     "passwordWillExpiredSuffixMsg": "期限が切れた後、できるだけ早くパスワードを変更してください。"
   },
   "notifications": {
+    "AllMessages": "すべてのニュースです",
+    "ReadMessages": "既読メッセージです",
+    "UnreadMessages": "未読メッセージです",
     "MessageType": "メッセージタイプ",
     "Receivers": "受取人",
     "Subscription": "メッセージ購読",

src/i18n/langs/zh.json

@@ -1919,6 +1919,9 @@
     "passwordWillExpiredSuffixMsg": "天 后过期，请尽快修改您的密码。"
   },
   "notifications": {
+    "AllMessages": "所有消息",
+    "ReadMessages": "已读消息",
+    "UnreadMessages": "未读消息",
     "MessageType": "消息类型",
     "Receivers": "接收人",
     "Subscription": "消息订阅",

src/layout/components/NavHeader/SiteMessages.vue

@@ -16,7 +16,9 @@
       @open="getMessages"
     >
       <div slot="title">
-        <span>{{ $t('notifications.SiteMessage') }}</span>
+        <router-link :to="{name: 'SiteMessages'}">
+          <span @click="handleClose">{{ $t('notifications.SiteMessage') }}</span>
+        </router-link>
         <div v-if="unreadMsgCount !== 0" class="msg-list-all-read-btn" @click.stop="oneClickRead(messages)">
           <a style="vertical-align: sub;"> {{ $t('notifications.AllClickRead') }}</a>
         </div>

src/router/workbench/index.js

@@ -42,7 +42,6 @@ export default {
         permissions: ['perms.view_myassets']
       }
     },
-
     {
       path: `external-luna`,
       component: empty,
@@ -251,6 +250,16 @@ export default {
           }
         }
       ]
+    },
+    {
+      path: '/workbench/messages',
+      name: 'SiteMessages',
+      component: () => import('@/views/messages'),
+      meta: {
+        icon: 'assets',
+        title: i18n.t('route.SiteMessageList'),
+        permissions: []
+      }
     }
   ]
 }

src/views/messages/AllMessageList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  </div>
+</template>
+
+<script>
+import GenericListTable from '@/layout/components/GenericListTable'
+import getConfig from './tableConfig'
+export default {
+  name: 'AllMessageList',
+  components: {
+    GenericListTable
+  },
+  data() {
+    const config = getConfig.bind(this)()
+    return {
+      tableConfig: {
+        url: '/api/v1/notifications/site-messages/',
+        columns: config.tableConfigColumns,
+        columnsShow: config.tableConfigColumnsShow,
+        columnsMeta: config.tableConfigColumnsMeta
+      },
+      headerActions: config.headerActions
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/messages/ReadMessageList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  </div>
+</template>
+
+<script>
+import GenericListTable from '@/layout/components/GenericListTable'
+import getConfig from '@/views/messages/tableConfig'
+export default {
+  name: 'ReadMessageList',
+  components: {
+    GenericListTable
+  },
+  data() {
+    const config = getConfig.bind(this)()
+    return {
+      tableConfig: {
+        url: '/api/v1/notifications/site-messages/?has_read=true',
+        columns: config.tableConfigColumns,
+        columnsShow: config.tableConfigColumnsShow,
+        columnsMeta: config.tableConfigColumnsMeta
+      },
+      headerActions: config.headerActions
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/messages/UnreadMessageList.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <GenericListTable :table-config="tableConfig" :header-actions="headerActions" />
+  </div>
+</template>
+
+<script>
+import GenericListTable from '@/layout/components/GenericListTable'
+import getConfig from '@/views/messages/tableConfig'
+export default {
+  name: 'UnreadMessageList',
+  components: {
+    GenericListTable
+  },
+  data() {
+    const config = getConfig.bind(this)()
+    return {
+      tableConfig: {
+        url: '/api/v1/notifications/site-messages/?has_read=false',
+        columns: config.tableConfigColumns,
+        columnsShow: config.tableConfigColumnsShow,
+        columnsMeta: config.tableConfigColumnsMeta
+      },
+      headerActions: Object.assign(config.headerActions, {
+        extraActions: [
+          {
+            name: 'MarkRead',
+            title: this.$t('notifications.MarkAsRead'),
+            type: 'info',
+            can: (cellValue) => {
+              return cellValue.selectedRows.length > 0
+            },
+            callback: (cellValue) => {
+              const url = `/api/v1/notifications/site-messages/mark-as-read/`
+              const msgIds = cellValue.selectedRows.map((item) => {
+                return item.id
+              })
+              this.$axios.patch(url, { ids: msgIds }).then(res => {
+                this.$children[0].$refs.ListTable.reloadTable()
+              }).catch(err => {
+                this.$message(err.detail)
+              })
+            }
+          }
+        ]
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/messages/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <TabPage :active-menu.sync="config.activeMenu" :submenu="config.submenu">
+    <div slot="title">
+      {{ Title }}
+    </div>
+    <keep-alive>
+      <component :is="config.activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import AllMessageList from './AllMessageList'
+import ReadMessageList from './ReadMessageList'
+import UnreadMessageList from './UnreadMessageList'
+export default {
+  name: 'Index',
+  components: {
+    TabPage,
+    AllMessageList,
+    ReadMessageList,
+    UnreadMessageList
+  },
+  data() {
+    return {
+      config: {
+        activeMenu: 'UnreadMessageList',
+        submenu: [
+          {
+            title: this.$t('notifications.AllMessages'),
+            name: 'AllMessageList'
+          },
+          {
+            title: this.$t('notifications.ReadMessages'),
+            name: 'ReadMessageList'
+          },
+          {
+            title: this.$t('notifications.UnreadMessages'),
+            name: 'UnreadMessageList'
+          }
+        ]
+      }
+    }
+  },
+  computed: {
+    Title() {
+      return this.$t('route.MessageCenter')
+    }
+  },
+  mounted() {
+    const params = this.$route.params
+    switch (params.activeMenu) {
+      case 'AllMessageList':
+        this.config.activeMenu = 'AllMessageList'
+        break
+      case 'ReadMessageList':
+        this.config.activeMenu = 'ReadMessageList'
+        break
+      case 'UnreadMessageList':
+        this.config.activeMenu = 'UnreadMessageList'
+        break
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/messages/tableConfig.js

@@ -0,0 +1,53 @@
+import i18n from '@/i18n/i18n'
+import { DateFormatter, BooleanTagFormatter, HtmlDisplayFormatter } from '@/components/TableFormatters'
+
+function getConfig() {
+  const tableConfigColumns = [
+    'message', 'date_created', 'has_read'
+  ]
+
+  const tableConfigColumnsShow = {
+    default: ['content.message', 'date_created', 'has_read'],
+    min: ['message', 'has_read']
+  }
+
+  const tableConfigColumnsMeta = {
+    message: {
+      label: i18n.t('notifications.Message'),
+      formatter: HtmlDisplayFormatter,
+      formatterArgs: {
+        getTitle: (row) => {
+          return row.content.subject
+        },
+        getDisplay: (row) => {
+          return row.content.message
+        }
+      }
+    },
+    date_created: {
+      showOverflowTooltip: true,
+      formatter: DateFormatter
+    },
+    has_read: {
+      label: i18n.t('notifications.OneClickRead'),
+      width: '100px',
+      align: 'center',
+      formatter: BooleanTagFormatter
+    }
+  }
+
+  const headerActions = {
+    hasCreate: false,
+    hasExport: false,
+    hasImport: false,
+    canBulkDelete: true
+  }
+  return {
+    tableConfigColumns: tableConfigColumns,
+    tableConfigColumnsShow: tableConfigColumnsShow,
+    headerActions: headerActions,
+    tableConfigColumnsMeta: tableConfigColumnsMeta
+  }
+}
+
+export default getConfig