!17 feat: 站内信详情查看

Merge pull request !17 from dap1020/master

src/views/system/notify/message/MessageInfoModal.vue

@@ -0,0 +1,27 @@
+<template>
+  <BasicModal title="详情" @register="innerRegister">
+    <Description @register="descriptionRegister" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { Description, useDescription } from '@/components/Description/index'
+import { infoSchema, MessageInfo } from './message.data'
+
+defineOptions({ name: 'MessageInfoModal' })
+
+const [innerRegister] = useModalInner((value: MessageInfo) => {
+  data.value = value
+})
+
+const data = ref<MessageInfo>()
+const [descriptionRegister] = useDescription({
+  column: 1,
+  schema: infoSchema,
+  data
+})
+</script>
+
+<style scoped></style>

src/views/system/notify/message/index.vue

@@ -1,15 +1,36 @@
 <template>
   <div>
-    <BasicTable @register="registerTable" />
+    <BasicTable @register="registerTable">
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.key === 'action'">
+          <TableAction
+            :actions="[
+              {
+                label: '详情',
+                icon: IconEnum.LOG,
+                onClick: handleShowInfo.bind(null, record)
+              }
+            ]"
+          />
+        </template>
+      </template>
+    </BasicTable>
+    <MessageInfoModal @register="registerModal" />
   </div>
 </template>
 <script lang="ts" setup>
-import { BasicTable, useTable } from '@/components/Table'
+import { IconEnum } from '@/enums/appEnum'
+import { useI18n } from '@/hooks/web/useI18n'
+import { BasicTable, useTable, TableAction } from '@/components/Table'
 import { getNotifyMessagePage } from '@/api/system/notify/message'
 import { columns, searchFormSchema } from './message.data'
+import MessageInfoModal from './MessageInfoModal.vue'
+import { useModal } from '@/components/Modal'
 
 defineOptions({ name: 'SystemMessage' })
 
+const { t } = useI18n()
+
 const [registerTable] = useTable({
   title: '站内信记录列表',
   api: getNotifyMessagePage,
@@ -17,6 +38,18 @@ const [registerTable] = useTable({
   formConfig: { labelWidth: 120, schemas: searchFormSchema },
   useSearchForm: true,
   showTableSetting: true,
-  showIndexColumn: false
+  showIndexColumn: false,
+  actionColumn: {
+    width: 100,
+    title: t('common.action'),
+    fixed: 'right',
+    key: 'action'
+  }
 })
+
+const [registerModal, { openModal }] = useModal()
+
+const handleShowInfo = (record: Recordable) => {
+  openModal(true, record)
+}
 </script>

src/views/system/notify/message/message.data.ts

@@ -1,5 +1,8 @@
 import { BasicColumn, FormSchema, useRender } from '@/components/Table'
 import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { JsonPreview } from '@/components/CodeEditor'
+import { DescItem } from '@/components/Description/index'
+import { h } from 'vue'
 
 export const columns: BasicColumn[] = [
   {
@@ -56,6 +59,9 @@ export const columns: BasicColumn[] = [
     dataIndex: 'readTime',
     width: 180,
     customRender: ({ text }) => {
+      if (!text) {
+        return useRender.renderTag('未阅读')
+      }
       return useRender.renderDate(text)
     }
   },
@@ -104,3 +110,95 @@ export const searchFormSchema: FormSchema[] = [
     colProps: { span: 8 }
   }
 ]
+
+// 站内信详情modal
+export const infoSchema: DescItem[] = [
+  {
+    field: 'id',
+    label: '编号',
+    labelMinWidth: 50
+  },
+  {
+    field: 'readStatus',
+    label: '是否已读',
+    render: (value) => {
+      return useRender.renderDict(value, DICT_TYPE.INFRA_BOOLEAN_STRING)
+    }
+  },
+  {
+    field: 'userType',
+    label: '用户类型',
+    render: (value) => {
+      console.log(value)
+      return useRender.renderDict(value, DICT_TYPE.USER_TYPE)
+    }
+  },
+  {
+    field: 'userType',
+    label: '用户编号'
+  },
+  {
+    field: 'templateId',
+    label: '模板编号'
+  },
+  {
+    field: 'templateCode',
+    label: '模板编码'
+  },
+  {
+    field: 'templateNickname',
+    label: '发送人名称'
+  },
+  {
+    field: 'templateContent',
+    label: '模板内容'
+  },
+  {
+    field: 'templateParams',
+    label: '模板参数',
+    render: (value) => {
+      return h(JsonPreview, { data: value })
+    }
+  },
+  {
+    field: 'templateType',
+    label: '模板类型',
+    render: (value) => {
+      return useRender.renderDict(value, DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE)
+    }
+  },
+  {
+    field: 'readTime',
+    label: '阅读时间',
+    render: (value) => {
+      if (!value) {
+        return useRender.renderTag('未阅读')
+      }
+      return useRender.renderDate(value)
+    }
+  },
+  {
+    field: 'createTime',
+    label: '创建时间',
+    render: (value) => {
+      return useRender.renderDate(value)
+    }
+  }
+]
+
+// 站内信详情
+export interface MessageInfo {
+  userId: number
+  userType: number
+  templateId: number
+  templateCode: string
+  templateNickname: string
+  templateContent: string
+  templateType: number
+  templateParams: { [key: string]: string }
+  readStatus: boolean
+  readTime?: any
+  id: number
+  createTime: number
+  key: string
+}