发送消息

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/edit.vue

@@ -353,7 +353,6 @@
    * 执行提交表单
    */
   const handleSubmit = () => {
-    console.log(formData);
     formRef.value
       .validate()
       .then(async () => {

src/views/system/user/index.vue

@@ -61,6 +61,14 @@
               </template>
               导出
             </n-button>
+            <n-button type="primary" @click="sendMessage">
+              <template #icon>
+                <n-icon>
+                  <CommentOutlined />
+                </n-icon>
+              </template>
+              发送消息
+            </n-button>
           </n-space>
         </template>
       </BasicTable>
@@ -74,6 +82,13 @@
     />
     <!-- 上传文件 -->
     <userUpload v-if="importVisible" v-model:visible="importVisible" @success="reloadTable()" />
+    <!-- 发送WebSocket消息 -->
+    <sendMsgDialog
+      v-if="sendMsgVisible"
+      v-model:visible="sendMsgVisible"
+      :receiveId="receiveId"
+      ref="sendModalRef"
+    />
   </div>
 </template>
 
@@ -99,8 +114,10 @@
     PrinterOutlined,
     ToTopOutlined,
     FormOutlined,
+    CommentOutlined,
   } from '@vicons/antd';
   import editDialog from './edit.vue';
+  import sendMsgDialog from './sendMsg.vue';
   import userUpload from './userUpload.vue';
   import { downloadByData } from '@/utils/file/download';
   import { schemas } from './querySchemas';
@@ -114,7 +131,10 @@
   const dialog = useDialog();
   const basicTableRef = ref();
   const createModalRef = ref();
+  const sendModalRef = ref();
+  const receiveId = ref('');
   const editVisible = ref(false);
+  const sendMsgVisible = ref(false);
   const userId = ref(0);
   const rowKeys = ref([]);
   const importVisible = ref(false);
@@ -245,7 +265,6 @@
    * @param id 参数
    */
   const handleResetPassword = (record) => {
-    console.log(rowKeys.value);
     dialog.warning({
       title: '提示',
       content: '确定重置密码？',
@@ -319,6 +338,20 @@
       showModal: true,
     });
   };
+  /**
+   * 发送消息
+   * 此处写的是Socket消息发送案例，实际业务研发时根据实际需求自行接入模板消息
+   */
+  const sendMessage = async () => {
+    if (rowKeys.value.length == 0) {
+      message.error('请选择数据');
+      return;
+    }
+    receiveId.value = rowKeys.value.join();
+    sendMsgVisible.value = true;
+    await nextTick();
+    sendModalRef.value.openModal();
+  };
 </script>
 
 <style lang="less" scoped></style>

src/views/system/user/sendMsg.vue

@@ -0,0 +1,98 @@
+<template>
+  <basicModal
+    @register="modalRegister"
+    ref="modalRef"
+    class="basicModal basicFormModal"
+    @on-ok="handleSubmit"
+    @on-close="handleClose"
+  >
+    <template #default>
+      <n-form :model="formData" label-placement="left" label-width="100px" ref="formRef">
+        <n-form-item
+          label="消息内容"
+          path="message"
+          :rule="{ required: true, message: '请输入消息内容', trigger: 'blur' }"
+        >
+          <n-input v-model:value="formData.message" type="textarea" />
+        </n-form-item>
+      </n-form>
+    </template>
+  </basicModal>
+</template>
+<script lang="ts" setup>
+  import { sendMsg } from '@/api/system/user';
+  import { useUserStore } from '@/store/modules/user';
+  import { onMounted, reactive, ref } from 'vue';
+  import { useModal } from '@/components/Modal';
+  import { useMessage } from 'naive-ui';
+
+  /**
+   * 定义参数
+   */
+  const message = useMessage();
+  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 [modalRegister, { openModal, setSubLoading }] = useModal({
+    title: '发送消息',
+    subBtuText: '确定',
+    width: 600,
+  });
+  /**
+   * 关闭窗体
+   */
+  const handleClose = () => {
+    emit('update:visible', false);
+  };
+
+  /**
+   * 执行提交表单数据
+   */
+  const handleSubmit = async () => {
+    formRef.value
+      .validate()
+      .then(async () => {
+        await sendMsg({
+          formId: userInfo.id,
+          receiveId: props.receiveId,
+          message: formData.message,
+        });
+        setSubLoading(false);
+        message.success('发送成功');
+        emit('update:visible', false);
+      })
+      .catch((error) => {
+        setSubLoading(false);
+      });
+  };
+  defineExpose({
+    openModal,
+  });
+</script>