发送消息

src/api/system/user.ts

@@ -239,3 +239,13 @@ export function getCityByList(pid: any) {
     method: 'get',
   });
 }
+/**
+ * @description: 发送消息
+ */
+export function sendMsg(data) {
+  return http.request({
+    url: '/websocket/sendMsg',
+    method: 'post',
+    data
+  });
+}

src/views/system/user/index.vue

@@ -75,6 +75,12 @@
               </template>
               导出
             </a-button>
+            <a-button type="primary" @click="sendMessage">
+              <template #icon>
+                <CommentOutlined />
+              </template>
+              发送消息
+            </a-button>
           </a-space>
         </template>
         <template #bodyCell="{ column, record }">
@@ -118,6 +124,8 @@
       @success="reloadTable('noRefresh')"
     />
     <userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
+     <!-- 发送WebSocket消息 -->
+     <sendMsgDialog v-if="sendMsgVisible" v-model:visible="sendMsgVisible" :receiveId="receiveId" />
   </PageWrapper>
 </template>
 
@@ -131,6 +139,7 @@
     DownloadOutlined,
     UploadOutlined,
     PrinterOutlined,
+    CommentOutlined
   } from '@ant-design/icons-vue';
   import { useForm } from '@/components/Form/index';
   import {
@@ -152,7 +161,9 @@
    */
   const userId = ref(0);
   const tableRef = ref();
+  const receiveId = ref('');
   const editVisible = ref(false);
+  const sendMsgVisible = ref(false);
   const importVisible = ref(false);
   const selectionData = ref([]);
   const exportLoading = ref(false);
@@ -162,6 +173,7 @@
    */
   const editDialog = defineAsyncComponent(() => import('./edit.vue'));
   const userUpload = defineAsyncComponent(() => import('./userUpload.vue'));
+  const sendMsgDialog = defineAsyncComponent(() => import('./sendMsg.vue'));
 
   /**
    * 定义查询参数
@@ -310,4 +322,16 @@
       showModal: true,
     });
   };
+    /**
+   * 发送消息
+   * 此处写的是Socket消息发送案例，实际业务研发时根据实际需求自行接入模板消息
+   */
+   const sendMessage = async () => {
+    if (selectionData.value.length == 0) {
+      message.error('请选择数据');
+      return;
+    }
+    receiveId.value = selectionData.value.join();
+    sendMsgVisible.value = true;
+  };
 </script>

src/views/system/user/sendMsg.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-modal
+    v-model:visible="props.visible"
+    title="发送消息"
+    width="800px"
+    @cancel="dialogClose"
+  >
+    <a-form :model="formData" :label-col="{ style: { width: '10-0px' } }" ref="formRef">
+      <a-form-item
+        label="消息内容"
+        name="message"
+        :rules="{ required: true, message: '请输入消息内容', trigger: 'blur' }"
+      >
+        <a-textarea v-model:value="formData.message"/>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <a-button @click="dialogClose">取消</a-button>
+        <a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
+      </span>
+    </template>
+  </a-modal>
+</template>
+<script lang="ts" setup>
+  import { sendMsg } from '@/api/system/user';
+  import { useUserStore } from '@/store/modules/user';
+  import { onMounted, reactive, ref } from 'vue';
+  import { useLockFn } from '@/utils/useLockFn';
+  import { message } from 'ant-design-vue';
+
+  /**
+   * 定义参数
+   */
+  const userStore = useUserStore();
+  const userInfo: object = userStore.getUserInfo || {};
+  const emit = defineEmits(['update:visible']);
+  const formRef = ref();
+
+  /**
+   * 定义接收的参数
+   */
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    receiveId: {
+      type: String,
+      default: '',
+    },
+  });
+
+  /**
+   * 定义表单参数
+   */
+  const formData = reactive({
+    message: '',
+  });
+
+  /**
+   * 关闭窗体
+   */
+  const dialogClose = () => {
+    emit('update:visible', false);
+  };
+
+  /**
+   * 执行提交表单数据
+   */
+  const handleSubmit = async () => {
+    await formRef.value?.validate();
+    await sendMsg({
+      formId: userInfo.id,
+      receiveId: props.receiveId,
+      message: formData.message,
+    });
+    message.success('发送成功');
+    emit('update:visible', false);
+  };
+
+  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
+</script>

src/views/system/user/userUpload.vue

@@ -2,12 +2,12 @@
   <a-modal
     v-model:visible="props.visible"
     :title="dialogTitle"
-    width="450"
-    :okText="''"
+    width="400"
     @cancel="dialogClose"
+    :footer="null"
   >
     <a-upload-dragger
-      style="width: 400px; padding: 40px"
+      style="padding: 20px"
       action="/api/user/import"
       :headers="uploadHeaders"
       name="file"