From d4713ad3e4389db30b74f47023242c64878167a6 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Sun, 28 Apr 2024 01:36:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=81=8A=E5=A4=A9=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/passport/login/index.ts               |   1 +
 src/api/system/chatConversation/index.ts      | 106 +++++++
 .../system/chatConversation/model/index.ts    |  37 +++
 src/api/system/chatMessage/index.ts           | 106 +++++++
 src/api/system/chatMessage/model/index.ts     |  47 +++
 src/utils/common.ts                           |  11 +
 src/views/shop/order/components/search.vue    |  30 +-
 src/views/shop/order/index.vue                | 172 ++++++++++-
 .../components/chatConversationEdit.vue       | 230 ++++++++++++++
 .../chatConversation/components/search.vue    |  42 +++
 src/views/system/chatConversation/index.vue   | 263 ++++++++++++++++
 .../components/chatMessageEdit.vue            | 259 ++++++++++++++++
 .../system/chatMessage/components/search.vue  |  42 +++
 src/views/system/chatMessage/index.vue        | 287 ++++++++++++++++++
 14 files changed, 1611 insertions(+), 22 deletions(-)
 create mode 100644 src/api/system/chatConversation/index.ts
 create mode 100644 src/api/system/chatConversation/model/index.ts
 create mode 100644 src/api/system/chatMessage/index.ts
 create mode 100644 src/api/system/chatMessage/model/index.ts
 create mode 100644 src/views/system/chatConversation/components/chatConversationEdit.vue
 create mode 100644 src/views/system/chatConversation/components/search.vue
 create mode 100644 src/views/system/chatConversation/index.vue
 create mode 100644 src/views/system/chatMessage/components/chatMessageEdit.vue
 create mode 100644 src/views/system/chatMessage/components/search.vue
 create mode 100644 src/views/system/chatMessage/index.vue

diff --git a/src/api/passport/login/index.ts b/src/api/passport/login/index.ts
index 790ebf1..8dfb744 100644
--- a/src/api/passport/login/index.ts
+++ b/src/api/passport/login/index.ts
@@ -23,6 +23,7 @@ export async function login(data: LoginParam) {
     if (res.data.data?.user) {
       const user = res.data.data?.user;
       localStorage.setItem('TenantId', String(user.tenantId));
+      localStorage.setItem('UserId', String(user.userId));
     }
 
     return res.data.message;
diff --git a/src/api/system/chatConversation/index.ts b/src/api/system/chatConversation/index.ts
new file mode 100644
index 0000000..4c84dc4
--- /dev/null
+++ b/src/api/system/chatConversation/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { ChatConversation, ChatConversationParam } from './model';
+import { MODULES_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询聊天消息表
+ */
+export async function pageChatConversation(params: ChatConversationParam) {
+  const res = await request.get<ApiResult<PageResult<ChatConversation>>>(
+    MODULES_API_URL + '/shop/chat-conversation/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询聊天消息表列表
+ */
+export async function listChatConversation(params?: ChatConversationParam) {
+  const res = await request.get<ApiResult<ChatConversation[]>>(
+    MODULES_API_URL + '/shop/chat-conversation',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加聊天消息表
+ */
+export async function addChatConversation(data: ChatConversation) {
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/chat-conversation',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改聊天消息表
+ */
+export async function updateChatConversation(data: ChatConversation) {
+  const res = await request.put<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/chat-conversation',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除聊天消息表
+ */
+export async function removeChatConversation(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/chat-conversation/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除聊天消息表
+ */
+export async function removeBatchChatConversation(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    MODULES_API_URL + '/shop/chat-conversation/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询聊天消息表
+ */
+export async function getChatConversation(id: number) {
+  const res = await request.get<ApiResult<ChatConversation>>(
+    MODULES_API_URL + '/shop/chat-conversation/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/system/chatConversation/model/index.ts b/src/api/system/chatConversation/model/index.ts
new file mode 100644
index 0000000..110806d
--- /dev/null
+++ b/src/api/system/chatConversation/model/index.ts
@@ -0,0 +1,37 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 聊天消息表
+ */
+export interface ChatConversation {
+  // 自增ID
+  id?: number;
+  // 用户ID
+  userId?: number;
+  // 好友ID
+  friendId?: number;
+  // 消息类型
+  type?: number;
+  // 消息内容
+  content?: string;
+  // 未读消息
+  unRead?: number;
+  // 状态, 0未读, 1已读
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+}
+
+/**
+ * 聊天消息表搜索条件
+ */
+export interface ChatConversationParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}
diff --git a/src/api/system/chatMessage/index.ts b/src/api/system/chatMessage/index.ts
new file mode 100644
index 0000000..2bbd109
--- /dev/null
+++ b/src/api/system/chatMessage/index.ts
@@ -0,0 +1,106 @@
+import request from '@/utils/request';
+import type { ApiResult, PageResult } from '@/api';
+import type { ChatMessage, ChatMessageParam } from './model';
+import { SERVER_API_URL } from '@/config/setting';
+
+/**
+ * 分页查询聊天消息表
+ */
+export async function pageChatMessage(params: ChatMessageParam) {
+  const res = await request.get<ApiResult<PageResult<ChatMessage>>>(
+    SERVER_API_URL + '/system/chat-message/page',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 查询聊天消息表列表
+ */
+export async function listChatMessage(params?: ChatMessageParam) {
+  const res = await request.get<ApiResult<ChatMessage[]>>(
+    SERVER_API_URL + '/system/chat-message',
+    {
+      params
+    }
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 添加聊天消息表
+ */
+export async function addChatMessage(data: ChatMessage) {
+  const res = await request.post<ApiResult<unknown>>(
+    SERVER_API_URL + '/system/chat-message',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 修改聊天消息表
+ */
+export async function updateChatMessage(data: ChatMessage) {
+  const res = await request.put<ApiResult<unknown>>(
+    SERVER_API_URL + '/system/chat-message',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 删除聊天消息表
+ */
+export async function removeChatMessage(id?: number) {
+  const res = await request.delete<ApiResult<unknown>>(
+    SERVER_API_URL + '/system/chat-message/' + id
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 批量删除聊天消息表
+ */
+export async function removeBatchChatMessage(data: (number | undefined)[]) {
+  const res = await request.delete<ApiResult<unknown>>(
+    SERVER_API_URL + '/system/chat-message/batch',
+    {
+      data
+    }
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+/**
+ * 根据id查询聊天消息表
+ */
+export async function getChatMessage(id: number) {
+  const res = await request.get<ApiResult<ChatMessage>>(
+    SERVER_API_URL + '/system/chat-message/' + id
+  );
+  if (res.data.code === 0 && res.data.data) {
+    return res.data.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/api/system/chatMessage/model/index.ts b/src/api/system/chatMessage/model/index.ts
new file mode 100644
index 0000000..0ef3626
--- /dev/null
+++ b/src/api/system/chatMessage/model/index.ts
@@ -0,0 +1,47 @@
+import type { PageParam } from '@/api';
+
+/**
+ * 聊天消息表
+ */
+export interface ChatMessage {
+  // 自增ID
+  id?: number;
+  // 发送人ID
+  formUserId?: number;
+  // 接收人ID
+  toUserId?: number;
+  // 消息类型
+  type?: string;
+  // 消息内容
+  content?: string;
+  // 屏蔽接收方
+  sideTo?: number;
+  // 屏蔽发送方
+  sideFrom?: number;
+  // 是否撤回
+  withdraw?: number;
+  // 文件信息
+  fileInfo?: string;
+  toUserName?: string;
+  formUserName?: string;
+  // 存在联系方式
+  hasContact?: number;
+  // 状态, 0未读, 1已读
+  status?: number;
+  // 是否删除, 0否, 1是
+  deleted?: number;
+  // 租户id
+  tenantId?: number;
+  // 注册时间
+  createTime?: string;
+  // 修改时间
+  updateTime?: string;
+}
+
+/**
+ * 聊天消息表搜索条件
+ */
+export interface ChatMessageParam extends PageParam {
+  id?: number;
+  keywords?: string;
+}
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 417718e..c42daf8 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -320,3 +320,14 @@ export const decrypt = (encrypt) => {
   const bytes = CryptoJS.AES.decrypt(encrypt, APP_SECRET);
   return bytes.toString(CryptoJS.enc.Utf8);
 };
+
+// 获取当前登录用户ID
+export const getUserId = () => {
+  let userId = 0;
+  const uid = Number(localStorage.getItem('UserId'));
+  if (uid) {
+    userId = uid;
+    return userId;
+  }
+  return userId;
+};
diff --git a/src/views/shop/order/components/search.vue b/src/views/shop/order/components/search.vue
index 82fea9d..f56585d 100644
--- a/src/views/shop/order/components/search.vue
+++ b/src/views/shop/order/components/search.vue
@@ -1,19 +1,20 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" @click="add">
-      <template #icon>
-        <PlusOutlined />
-      </template>
-      <span>添加</span>
-    </a-button>
+    <a-input-search
+      allow-clear
+      v-model:value="where.keywords"
+      placeholder="请输入关键词"
+      @search="search"
+      @pressEnter="search"
+    />
   </a-space>
 </template>
 
 <script lang="ts" setup>
-  import { PlusOutlined } from '@ant-design/icons-vue';
-  import type { GradeParam } from '@/api/user/grade/model';
   import { watch } from 'vue';
+  import useSearch from '@/utils/use-search';
+  import { OrderParam } from '@/api/shop/order/model';
 
   const props = withDefaults(
     defineProps<{
@@ -24,15 +25,20 @@
   );
 
   const emit = defineEmits<{
-    (e: 'search', where?: GradeParam): void;
+    (e: 'search', where?: OrderParam): void;
     (e: 'add'): void;
     (e: 'remove'): void;
     (e: 'batchMove'): void;
   }>();
 
-  // 新增
-  const add = () => {
-    emit('add');
+  // 表单数据
+  const { where } = useSearch<OrderParam>({
+    keywords: ''
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', where);
   };
 
   watch(
diff --git a/src/views/shop/order/index.vue b/src/views/shop/order/index.vue
index 5363934..c113a25 100644
--- a/src/views/shop/order/index.vue
+++ b/src/views/shop/order/index.vue
@@ -25,6 +25,144 @@
             <template v-if="column.key === 'image'">
               <a-image :src="record.image" :width="50" />
             </template>
+            <template v-if="column.key === 'payType'">
+              <a-tag v-if="record.payType == 1" color="green"
+                ><WechatOutlined class="tag-icon" />微信支付</a-tag
+              >
+              <a-tag v-if="record.payType == 2" color="green">积分</a-tag>
+              <a-tag v-if="record.payType == 3" color="green"
+                ><AlipayCircleOutlined class="tag-icon" />支付宝</a-tag
+              >
+              <a-tag v-if="record.payType == 4" color="green"
+                ><IdcardOutlined class="tag-icon" />现金</a-tag
+              >
+              <a-tag v-if="record.payType == 5" color="green"
+                ><IdcardOutlined class="tag-icon" />POS机</a-tag
+              >
+              <a-tag v-if="record.payType == 6" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+              >
+              <a-tag v-if="record.payType == 7" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+              >
+              <a-tag v-if="record.payType == 8" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+              >
+              <a-tag v-if="record.payType == 9" color="green"
+                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+              >
+              <a-tag v-if="record.payType == 10" color="green"
+                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+              >
+              <a-tag v-if="record.payType == 11" color="green"
+                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+              >
+              <a-tag v-if="record.payType == 12" color="green"
+                ><IdcardOutlined class="tag-icon" />免费</a-tag
+              >
+              <a-tag v-if="record.payType == 13" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+              >
+              <a-tag v-if="record.payType == 14" color="green"
+                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+              >
+              <a-tag v-if="record.payType == 15" color="green"
+                ><IdcardOutlined class="tag-icon" />积分支付</a-tag
+              >
+              <a-tag v-if="record.payType == 16" color="green"
+                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+              >
+              <a-tag v-if="record.payType == 17" color="green"
+                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'type'">
+              <a-tag v-if="record.type == 0">无</a-tag>
+              <a-tag v-if="record.type == 1" color="blue"
+                ><IdcardOutlined class="tag-icon" />抵扣优惠券</a-tag
+              >
+              <a-tag v-if="record.type == 2" color="blue"
+                ><IdcardOutlined class="tag-icon" />折扣优惠券</a-tag
+              >
+              <a-tag v-if="record.type == 3" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP月卡</a-tag
+              >
+              <a-tag v-if="record.type == 4" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP年卡</a-tag
+              >
+              <a-tag v-if="record.type == 5" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP次卡</a-tag
+              >
+              <a-tag v-if="record.type == 6" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP会员卡</a-tag
+              >
+              <a-tag v-if="record.type == 7" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC月卡</a-tag
+              >
+              <a-tag v-if="record.type == 8" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC年卡</a-tag
+              >
+              <a-tag v-if="record.type == 9" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC次卡</a-tag
+              >
+              <a-tag v-if="record.type == 10" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC会员卡</a-tag
+              >
+              <a-tag v-if="record.type == 11" color="blue"
+                ><IdcardOutlined class="tag-icon" />免费订单</a-tag
+              >
+              <a-tag v-if="record.type == 12" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP充值卡</a-tag
+              >
+              <a-tag v-if="record.type == 13" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC充值卡</a-tag
+              >
+              <a-tag v-if="record.type == 14" color="blue"
+                ><IdcardOutlined class="tag-icon" />VIP季卡</a-tag
+              >
+              <a-tag v-if="record.type == 15" color="blue"
+                ><IdcardOutlined class="tag-icon" />IC季卡</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'payStatus'">
+              <a-tag v-if="record.payStatus == 1" color="green"
+                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              >
+              <a-tag v-if="record.payStatus == 2" color="error"
+                ><CloseOutlined class="tag-icon" />未付款</a-tag
+              >
+              <a-tag v-if="record.payStatus == 3" color="cyan"
+                ><CoffeeOutlined class="tag-icon" />未付款,占场中</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'orderStatus'">
+              <a-tag v-if="record.orderStatus == 1" color="green"
+                ><CheckOutlined class="tag-icon" />已付款</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 2" color="blue"
+                ><ClockCircleOutlined class="tag-icon" />未使用</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 3" color="error"
+                ><CloseOutlined class="tag-icon" />已取消</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 4" color="error"
+                >退款申请中</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 5" color="error"
+                >退款被拒绝</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 6" color="green"
+                >退款成功</a-tag
+              >
+              <a-tag v-if="record.orderStatus == 7" color="green"
+                >客户端申请退款</a-tag
+              >
+            </template>
+            <template v-if="column.key === 'isInvoice'">
+              <a-tag v-if="record.isInvoice == 1" color="green">已开</a-tag>
+              <a-tag v-if="record.isInvoice == 2" color="green">未开</a-tag>
+              <a-tag v-if="record.isInvoice == 1" color="green">不能开</a-tag>
+            </template>
             <template v-if="column.key === 'status'">
               <a-tag v-if="record.status === 0" color="green">显示</a-tag>
               <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
@@ -47,8 +185,18 @@
 <script lang="ts" setup>
   import { createVNode, ref } from 'vue';
   import { message, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-  import { EleProTable, toDateString } from "ele-admin-pro";
+  import {
+    ExclamationCircleOutlined,
+    CheckOutlined,
+    CloseOutlined,
+    RestOutlined,
+    ClockCircleOutlined,
+    IdcardOutlined,
+    WechatOutlined,
+    CoffeeOutlined,
+    AlipayCircleOutlined
+  } from '@ant-design/icons-vue';
+  import { EleProTable, toDateString } from 'ele-admin-pro';
   import type {
     DatasourceFunction,
     ColumnItem
@@ -174,16 +322,16 @@
     //   align: 'center',
     //   customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:mm:ss')
     // },
-    {
-      title: '备注',
-      dataIndex: 'comments',
-      key: 'comments',
-      align: 'center'
-    },
+    // {
+    //   title: '备注',
+    //   dataIndex: 'comments',
+    //   key: 'comments',
+    //   align: 'center'
+    // },
     {
       title: '操作',
       key: 'action',
-      width: 180,
+      width: 120,
       fixed: 'right',
       align: 'center',
       hideInSetting: true
@@ -276,4 +424,8 @@
   };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .tag-icon {
+    padding-right: 6px;
+  }
+</style>
diff --git a/src/views/system/chatConversation/components/chatConversationEdit.vue b/src/views/system/chatConversation/components/chatConversationEdit.vue
new file mode 100644
index 0000000..c894024
--- /dev/null
+++ b/src/views/system/chatConversation/components/chatConversationEdit.vue
@@ -0,0 +1,230 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑聊天消息表' : '添加聊天消息表'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="用户ID" name="userId">
+        <a-input
+          allow-clear
+          placeholder="请输入用户ID"
+          v-model:value="form.userId"
+        />
+      </a-form-item>
+      <a-form-item label="好友ID" name="friendId">
+        <a-input
+          allow-clear
+          placeholder="请输入好友ID"
+          v-model:value="form.friendId"
+        />
+      </a-form-item>
+      <a-form-item label="消息类型" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入消息类型"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="消息内容" name="content">
+        <a-input
+          allow-clear
+          placeholder="请输入消息内容"
+          v-model:value="form.content"
+        />
+      </a-form-item>
+      <a-form-item label="未读消息" name="unRead">
+        <a-input
+          allow-clear
+          placeholder="请输入未读消息"
+          v-model:value="form.unRead"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0未读, 1已读" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import {
+    addChatConversation,
+    updateChatConversation
+  } from '@/api/system/chatConversation';
+  import { ChatConversation } from '@/api/system/chatConversation/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ChatConversation | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<ChatConversation>({
+    id: undefined,
+    userId: undefined,
+    friendId: undefined,
+    type: undefined,
+    content: undefined,
+    unRead: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    chatConversationId: undefined,
+    chatConversationName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    chatConversationName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写聊天消息表名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateChatConversation
+          : addChatConversation;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/system/chatConversation/components/search.vue b/src/views/system/chatConversation/components/search.vue
new file mode 100644
index 0000000..82fea9d
--- /dev/null
+++ b/src/views/system/chatConversation/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/system/chatConversation/index.vue b/src/views/system/chatConversation/index.vue
new file mode 100644
index 0000000..7e40e50
--- /dev/null
+++ b/src/views/system/chatConversation/index.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="chatConversationId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ChatConversationEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import ChatConversationEdit from './components/chatConversationEdit.vue';
+  import { pageChatConversation, removeChatConversation, removeBatchChatConversation } from '@/api/system/chatConversation';
+  import type { ChatConversation, ChatConversationParam } from '@/api/system/chatConversation/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<ChatConversation[]>([]);
+  // 当前编辑数据
+  const current = ref<ChatConversation | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageChatConversation({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '自增ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '用户ID',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '好友ID',
+      dataIndex: 'friendId',
+      key: 'friendId',
+      align: 'center',
+    },
+    {
+      title: '消息类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '消息内容',
+      dataIndex: 'content',
+      key: 'content',
+      align: 'center',
+    },
+    {
+      title: '未读消息',
+      dataIndex: 'unRead',
+      key: 'unRead',
+      align: 'center',
+    },
+    {
+      title: '状态, 0未读, 1已读',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '是否删除, 0否, 1是',
+      dataIndex: 'deleted',
+      key: 'deleted',
+      align: 'center',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: ChatConversationParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: ChatConversation) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: ChatConversation) => {
+    const hide = message.loading('请求中..', 0);
+    removeChatConversation(row.chatConversationId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchChatConversation(selection.value.map((d) => d.chatConversationId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: ChatConversation) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ChatConversation'
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/chatMessage/components/chatMessageEdit.vue b/src/views/system/chatMessage/components/chatMessageEdit.vue
new file mode 100644
index 0000000..efd5289
--- /dev/null
+++ b/src/views/system/chatMessage/components/chatMessageEdit.vue
@@ -0,0 +1,259 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑聊天消息表' : '添加聊天消息表'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="发送人ID" name="formUserId">
+        <a-input
+          allow-clear
+          placeholder="请输入发送人ID"
+          v-model:value="form.formUserId"
+        />
+      </a-form-item>
+      <a-form-item label="接收人ID" name="toUserId">
+        <a-input
+          allow-clear
+          placeholder="请输入接收人ID"
+          v-model:value="form.toUserId"
+        />
+      </a-form-item>
+      <a-form-item label="消息类型" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入消息类型"
+          v-model:value="form.type"
+        />
+      </a-form-item>
+      <a-form-item label="消息内容" name="content">
+        <a-input
+          allow-clear
+          placeholder="请输入消息内容"
+          v-model:value="form.content"
+        />
+      </a-form-item>
+      <a-form-item label="屏蔽接收方" name="sideTo">
+        <a-input
+          allow-clear
+          placeholder="请输入屏蔽接收方"
+          v-model:value="form.sideTo"
+        />
+      </a-form-item>
+      <a-form-item label="屏蔽发送方" name="sideFrom">
+        <a-input
+          allow-clear
+          placeholder="请输入屏蔽发送方"
+          v-model:value="form.sideFrom"
+        />
+      </a-form-item>
+      <a-form-item label="是否撤回" name="withdraw">
+        <a-input
+          allow-clear
+          placeholder="请输入是否撤回"
+          v-model:value="form.withdraw"
+        />
+      </a-form-item>
+      <a-form-item label="文件信息" name="fileInfo">
+        <a-input
+          allow-clear
+          placeholder="请输入文件信息"
+          v-model:value="form.fileInfo"
+        />
+      </a-form-item>
+      <a-form-item label="存在联系方式" name="hasContact">
+        <a-input
+          allow-clear
+          placeholder="请输入存在联系方式"
+          v-model:value="form.hasContact"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0未读, 1已读" name="status">
+        <a-radio-group v-model:value="form.status">
+          <a-radio :value="0">显示</a-radio>
+          <a-radio :value="1">隐藏</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item label="是否删除, 0否, 1是" name="deleted">
+        <a-input
+          allow-clear
+          placeholder="请输入是否删除, 0否, 1是"
+          v-model:value="form.deleted"
+        />
+      </a-form-item>
+      <a-form-item label="修改时间" name="updateTime">
+        <a-input
+          allow-clear
+          placeholder="请输入修改时间"
+          v-model:value="form.updateTime"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid } from 'ele-admin-pro';
+  import { addChatMessage, updateChatMessage } from '@/api/system/chatMessage';
+  import { ChatMessage } from '@/api/system/chatMessage/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FormInstance } from 'ant-design-vue/es/form';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: ChatMessage | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+  const images = ref<ItemType[]>([]);
+
+  // 用户信息
+  const form = reactive<ChatMessage>({
+    id: undefined,
+    formUserId: undefined,
+    toUserId: undefined,
+    type: undefined,
+    content: undefined,
+    sideTo: undefined,
+    sideFrom: undefined,
+    withdraw: undefined,
+    fileInfo: undefined,
+    hasContact: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    chatMessageId: undefined,
+    chatMessageName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    chatMessageName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写聊天消息表名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseImage = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.image = data.path;
+  };
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index, 1);
+    form.image = '';
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateChatMessage
+          : addChatMessage;
+        saveOrUpdate(formData)
+          .then((msg) => {
+            loading.value = false;
+            message.success(msg);
+            updateVisible(false);
+            emit('done');
+          })
+          .catch((e) => {
+            loading.value = false;
+            message.error(e.message);
+          });
+      })
+      .catch(() => {});
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        images.value = [];
+        if (props.data) {
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
diff --git a/src/views/system/chatMessage/components/search.vue b/src/views/system/chatMessage/components/search.vue
new file mode 100644
index 0000000..82fea9d
--- /dev/null
+++ b/src/views/system/chatMessage/components/search.vue
@@ -0,0 +1,42 @@
+<!-- 搜索表单 -->
+<template>
+  <a-space :size="10" style="flex-wrap: wrap">
+    <a-button type="primary" class="ele-btn-icon" @click="add">
+      <template #icon>
+        <PlusOutlined />
+      </template>
+      <span>添加</span>
+    </a-button>
+  </a-space>
+</template>
+
+<script lang="ts" setup>
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import type { GradeParam } from '@/api/user/grade/model';
+  import { watch } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      selection?: [];
+    }>(),
+    {}
+  );
+
+  const emit = defineEmits<{
+    (e: 'search', where?: GradeParam): void;
+    (e: 'add'): void;
+    (e: 'remove'): void;
+    (e: 'batchMove'): void;
+  }>();
+
+  // 新增
+  const add = () => {
+    emit('add');
+  };
+
+  watch(
+    () => props.selection,
+    () => {}
+  );
+</script>
diff --git a/src/views/system/chatMessage/index.vue b/src/views/system/chatMessage/index.vue
new file mode 100644
index 0000000..8b4688d
--- /dev/null
+++ b/src/views/system/chatMessage/index.vue
@@ -0,0 +1,287 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="chatMessageId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <template #toolbar>
+            <search
+              @search="reload"
+              :selection="selection"
+              @add="openEdit"
+              @remove="removeBatch"
+              @batchMove="openMove"
+            />
+          </template>
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'image'">
+              <a-image :src="record.image" :width="50" />
+            </template>
+            <template v-if="column.key === 'status'">
+              <a-tag v-if="record.status === 0" color="green">显示</a-tag>
+              <a-tag v-if="record.status === 1" color="red">隐藏</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a @click="openEdit(record)">修改</a>
+                <a-divider type="vertical" />
+                <a-popconfirm
+                  title="确定要删除此记录吗？"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-popconfirm>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <ChatMessageEdit v-model:visible="showEdit" :data="current" @done="reload" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro';
+  import { toDateString } from 'ele-admin-pro';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import ChatMessageEdit from './components/chatMessageEdit.vue';
+  import { pageChatMessage, removeChatMessage, removeBatchChatMessage } from '@/api/system/chatMessage';
+  import type { ChatMessage, ChatMessageParam } from '@/api/system/chatMessage/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<ChatMessage[]>([]);
+  // 当前编辑数据
+  const current = ref<ChatMessage | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    return pageChatMessage({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '自增ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '发送人ID',
+      dataIndex: 'formUserId',
+      key: 'formUserId',
+      align: 'center',
+    },
+    {
+      title: '接收人ID',
+      dataIndex: 'toUserId',
+      key: 'toUserId',
+      align: 'center',
+    },
+    {
+      title: '消息类型',
+      dataIndex: 'type',
+      key: 'type',
+      align: 'center',
+    },
+    {
+      title: '消息内容',
+      dataIndex: 'content',
+      key: 'content',
+      align: 'center',
+    },
+    {
+      title: '屏蔽接收方',
+      dataIndex: 'sideTo',
+      key: 'sideTo',
+      align: 'center',
+    },
+    {
+      title: '屏蔽发送方',
+      dataIndex: 'sideFrom',
+      key: 'sideFrom',
+      align: 'center',
+    },
+    {
+      title: '是否撤回',
+      dataIndex: 'withdraw',
+      key: 'withdraw',
+      align: 'center',
+    },
+    {
+      title: '文件信息',
+      dataIndex: 'fileInfo',
+      key: 'fileInfo',
+      align: 'center',
+    },
+    {
+      title: '存在联系方式',
+      dataIndex: 'hasContact',
+      key: 'hasContact',
+      align: 'center',
+    },
+    {
+      title: '状态, 0未读, 1已读',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '是否删除, 0否, 1是',
+      dataIndex: 'deleted',
+      key: 'deleted',
+      align: 'center',
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '修改时间',
+      dataIndex: 'updateTime',
+      key: 'updateTime',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: ChatMessageParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: ChatMessage) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: ChatMessage) => {
+    const hide = message.loading('请求中..', 0);
+    removeChatMessage(row.chatMessageId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 批量删除 */
+  const removeBatch = () => {
+    if (!selection.value.length) {
+      message.error('请至少选择一条数据');
+      return;
+    }
+    Modal.confirm({
+      title: '提示',
+      content: '确定要删除选中的记录吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        removeBatchChatMessage(selection.value.map((d) => d.chatMessageId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: ChatMessage) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ChatMessage'
+  };
+</script>
+
+<style lang="less" scoped></style>