feat: ✨新增消息内容

src/components/BdMsg/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <!-- 文本 -->
+    <span v-if="msg.type == 1">
+      {{ msg['content'] }}
+    </span>
+    <!-- 图片 -->
+    <img v-else-if="msg.type == 2" class="h-220px" :src="`${url}${msg['url']}`" />
+    <!-- GIF -->
+    <img v-else-if="msg.type == 3" class="w-320px" :src="`${url}${msg['url']}`" />
+    <!-- 语音 -->
+    <audio v-else-if="msg.type == 4" :src="`${url}${msg['url']}`"></audio>
+    <!-- 视频 -->
+    <video v-else-if="msg.type == 5" controls :src="`${url}${msg['url']}`" class="w-25px h-200px"></video>
+    <!-- 位置 -->
+    <div v-else-if="msg.type == 6">
+      <div>{{ msg['title'] }}</div>
+      <div>{{ msg['address'] }}</div>
+    </div>
+    <!-- 名片 -->
+    <div v-else-if="msg.type == 7">
+      <div>名片UID：{{ msg['uid'] }}</div>
+      <div>用户名：{{ msg['name'] }}</div>
+    </div>
+    <!-- 文件 -->
+    <div v-else-if="msg.type == 8">
+      <div>{{ msg['title'] }}</div>
+      <div>{{ msg['address'] }}</div>
+    </div>
+    <!-- 红包 -->
+    <div v-else-if="msg.type == 9">
+      <div>红包编号：{{ msg['redpacket_no'] }}</div>
+      <div>祝福语：{{ msg['blessing'] }}</div>
+    </div>
+    <!-- 转帐 -->
+    <div v-else-if="msg.type == 10">
+      <div>金额：¥{{ msg['amount'] }}</div>
+      <div>备注：{{ msg['remark'] }}</div>
+    </div>
+    <!-- 合并转发 -->
+    <span v-else-if="msg.type == 11"> [合并转发] </span>
+    <!-- 动态表情 -->
+    <div v-else-if="msg.type == 12">[动态表情]</div>
+    <!-- 矢量emoji -->
+    <span v-else-if="msg.type == 13"> [矢量emoji] </span>
+    <!-- 矢量emoji -->
+    <span v-else-if="msg.type == 1014"> [截屏消息] </span>
+    <!-- 系统消息 -->
+    <span v-else-if="msg.type >= 1000 && msg.type <= 2000"> [系统消息] </span>
+    <!-- 未知消息类型 -->
+    <span v-else> [未知消息类型] </span>
+  </div>
+</template>
+
+<script lang="tsx" name="BdMsg" setup>
+import { BU_DOU_CONFIG } from '@/config';
+interface IProps {
+  msg: any;
+}
+defineProps<IProps>();
+const url = BU_DOU_CONFIG.APP_URL;
+</script>

src/pages/message/record.vue

@@ -1,7 +1,6 @@
 <template>
   <bd-page class="flex-col">
     <!-- 布局 -->
-
     <div class="flex-1 el-card border-none flex-col box-border overflow-hidden">
       <div class="h-50px pl-12px pr-12px box-border flex items-center justify-between bd-title">
         <div class="bd-title-left">
@@ -69,6 +68,7 @@ meta:
 <script lang="tsx" setup>
 import { useRoute } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
+import BdMsg from '@/components/BdMsg/index.vue';
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
 import { messageRecordGet, messageDelete } from '@/api/message';
@@ -116,12 +116,14 @@ const column = reactive<Column.ColumnOptions[]>([
     label: '消息内容',
     minWidth: 300,
     render: (scope: any) => {
-      const showContent = scope.row['payload'];
-      // 是否加密
-      if (scope.row['is_encrypt'] == 1) {
-        return '加密消息，无法查看';
-      } else {
-        return showContent?.content;
+      if (scope.row['payload']) {
+        const showContent = scope.row['payload'];
+        // 是否加密
+        if (scope.row['is_encrypt'] == 1) {
+          return '[加密消息，无法查看]';
+        } else {
+          return <BdMsg msg={showContent} />;
+        }
       }
     }
   },

src/pages/message/recordpersonal.vue

@@ -71,6 +71,7 @@ meta:
 <script lang="tsx" setup>
 import { useRoute } from 'vue-router';
 import { ElButton, ElSpace, ElAvatar, ElMessage, ElMessageBox } from 'element-plus';
+import BdMsg from '@/components/BdMsg/index.vue';
 import { BU_DOU_CONFIG } from '@/config';
 // API 接口
 import { messageRecordpersonalGet, messageDelete } from '@/api/message';
@@ -118,12 +119,14 @@ const column = reactive<Column.ColumnOptions[]>([
     label: '消息内容',
     minWidth: 300,
     render: (scope: any) => {
-      const showContent = scope.row['payload'];
-      // 是否加密
-      if (scope.row['is_encrypt'] == 1) {
-        return '加密消息，无法查看';
-      } else {
-        return showContent?.content;
+      if (scope.row['payload']) {
+        const showContent = scope.row['payload'];
+        // 是否加密
+        if (scope.row['is_encrypt'] == 1) {
+          return '[加密消息，无法查看]';
+        } else {
+          return <BdMsg msg={showContent} />;
+        }
       }
     }
   },

src/types/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AddNode: typeof import('./../components/bdWorkflow/nodes/addNode.vue')['default']
     Approver: typeof import('./../components/bdWorkflow/nodes/approver.vue')['default']
+    BdMsg: typeof import('./../components/BdMsg/index.vue')['default']
     BdPage: typeof import('./../components/BdPage/index.vue')['default']
     BdSandAllMsg: typeof import('./../components/BdSandAllMsg/index.vue')['default']
     BdSendMsg: typeof import('./../components/BdSendMsg/index.vue')['default']

src/types/global.d.ts

@@ -88,6 +88,6 @@ declare namespace Column {
     minWidth?: string | number;
     align?: 'left' | 'center' | 'right';
     formatter?: (scope: any) => void;
-    render?: (scope: any) => VNode;
+    render?: (scope?: any) => void;
   }
 }