即时通信嵌入测试
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
# 项目功能介绍
|
||||
* 于若依管理系统 ruoyi-flowable-plus进行二次开发，基于Spring Boot、Mybatis-plus、Vue和ElementUI技术栈。
|
||||
* 工程项目管理系统适用于工程项目的投标管理及项目进度及成本控制用户的OA办公系统；
|
||||
* 工程福安德综合办公系统适用于工程项目的投标管理及项目进度及成本控制用户的OA办公系统；
|
||||
* 流程管理：流程发起、我的流程、待办任务、已办任务；
|
||||
* 流程部署：在原有基础上增加了任务监听器，根据部门 id 流转到该部门的主管审批；
|
||||
* 项目管理：项目信息的维护，重点功能是项目的流程进度控制，根据项目进度类型填写任务进度信息；
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
package com.ruoyi.web.controller.system;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Arrays;
|
||||
import java.util.concurrent.TimeUnit;
|
||||
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import javax.validation.constraints.*;
|
||||
import cn.dev33.satoken.annotation.SaCheckPermission;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
import org.springframework.validation.annotation.Validated;
|
||||
import com.ruoyi.common.annotation.RepeatSubmit;
|
||||
import com.ruoyi.common.annotation.Log;
|
||||
import com.ruoyi.common.core.controller.BaseController;
|
||||
import com.ruoyi.common.core.domain.PageQuery;
|
||||
import com.ruoyi.common.core.domain.R;
|
||||
import com.ruoyi.common.core.validate.AddGroup;
|
||||
import com.ruoyi.common.core.validate.EditGroup;
|
||||
import com.ruoyi.common.core.validate.QueryGroup;
|
||||
import com.ruoyi.common.enums.BusinessType;
|
||||
import com.ruoyi.common.utils.poi.ExcelUtil;
|
||||
import com.ruoyi.system.domain.vo.SocketContactVo;
|
||||
import com.ruoyi.system.domain.bo.SocketContactBo;
|
||||
import com.ruoyi.system.service.ISocketContactService;
|
||||
import com.ruoyi.common.core.page.TableDataInfo;
|
||||
|
||||
/**
|
||||
* 通信目录
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
@Validated
|
||||
@RequiredArgsConstructor
|
||||
@RestController
|
||||
@RequestMapping("/system/contact")
|
||||
public class SocketContactController extends BaseController {
|
||||
|
||||
private final ISocketContactService iSocketContactService;
|
||||
|
||||
/**
|
||||
* 查询通信目录列表
|
||||
*/
|
||||
@SaCheckPermission("system:contact:list")
|
||||
@GetMapping("/list")
|
||||
public TableDataInfo<SocketContactVo> list(SocketContactBo bo, PageQuery pageQuery) {
|
||||
return iSocketContactService.queryPageList(bo, pageQuery);
|
||||
}
|
||||
|
||||
/**
|
||||
* 导出通信目录列表
|
||||
*/
|
||||
@SaCheckPermission("system:contact:export")
|
||||
@Log(title = "通信目录", businessType = BusinessType.EXPORT)
|
||||
@PostMapping("/export")
|
||||
public void export(SocketContactBo bo, HttpServletResponse response) {
|
||||
List<SocketContactVo> list = iSocketContactService.queryList(bo);
|
||||
ExcelUtil.exportExcel(list, "通信目录", SocketContactVo.class, response);
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取通信目录详细信息
|
||||
*
|
||||
* @param id 主键
|
||||
*/
|
||||
@SaCheckPermission("system:contact:query")
|
||||
@GetMapping("/{id}")
|
||||
public R<SocketContactVo> getInfo(@NotNull(message = "主键不能为空")
|
||||
@PathVariable Long id) {
|
||||
return R.ok(iSocketContactService.queryById(id));
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增通信目录
|
||||
*/
|
||||
@SaCheckPermission("system:contact:add")
|
||||
@Log(title = "通信目录", businessType = BusinessType.INSERT)
|
||||
@RepeatSubmit()
|
||||
@PostMapping()
|
||||
public R<Void> add(@Validated(AddGroup.class) @RequestBody SocketContactBo bo) {
|
||||
return toAjax(iSocketContactService.insertByBo(bo));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改通信目录
|
||||
*/
|
||||
@SaCheckPermission("system:contact:edit")
|
||||
@Log(title = "通信目录", businessType = BusinessType.UPDATE)
|
||||
@RepeatSubmit()
|
||||
@PutMapping()
|
||||
public R<Void> edit(@Validated(EditGroup.class) @RequestBody SocketContactBo bo) {
|
||||
return toAjax(iSocketContactService.updateByBo(bo));
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除通信目录
|
||||
*
|
||||
* @param ids 主键串
|
||||
*/
|
||||
@SaCheckPermission("system:contact:remove")
|
||||
@Log(title = "通信目录", businessType = BusinessType.DELETE)
|
||||
@DeleteMapping("/{ids}")
|
||||
public R<Void> remove(@NotEmpty(message = "主键不能为空")
|
||||
@PathVariable Long[] ids) {
|
||||
return toAjax(iSocketContactService.deleteWithValidByIds(Arrays.asList(ids), true));
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@ captcha:
|
||||
# 开发环境配置
|
||||
server:
|
||||
# 服务器的HTTP端口，默认为8080
|
||||
port: 8078
|
||||
port: 8080
|
||||
servlet:
|
||||
# 应用的访问路径
|
||||
context-path: /
|
||||
|
||||
@@ -34,6 +34,7 @@ public class SecurityConfig {
|
||||
, adminContextPath + "/login"
|
||||
, "/actuator"
|
||||
, "/actuator/**"
|
||||
,adminContextPath+"/websocket/**"
|
||||
).permitAll()
|
||||
.anyRequest().authenticated()
|
||||
.and()
|
||||
|
||||
@@ -18,15 +18,15 @@
|
||||
<dependencies>
|
||||
|
||||
<!-- SpringBoot Web容器 -->
|
||||
<dependency>
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
<exclusions>
|
||||
<exclusion>
|
||||
<artifactId>spring-boot-starter-tomcat</artifactId>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
<exclusions>
|
||||
<exclusion>
|
||||
<artifactId>spring-boot-starter-tomcat</artifactId>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
</exclusion>
|
||||
</exclusions>
|
||||
</dependency>
|
||||
<!-- web 容器使用 undertow 性能更强 -->
|
||||
<dependency>
|
||||
@@ -67,6 +67,17 @@
|
||||
<artifactId>ruoyi-common</artifactId>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-websocket</artifactId>
|
||||
<version>2.0.4.RELEASE</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>com.alibaba.fastjson2</groupId>
|
||||
<artifactId>fastjson2</artifactId>
|
||||
<version>2.0.43</version>
|
||||
<scope>compile</scope>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
|
||||
</project>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
package com.ruoyi.framework.webSocket;
|
||||
|
||||
/**
|
||||
* 消息类型
|
||||
*/
|
||||
public enum MessageType {
|
||||
|
||||
SYS("sys", "系统消息"), CHAT("chat", "聊天消息");
|
||||
|
||||
private String type;
|
||||
private String value;
|
||||
|
||||
private MessageType(String type, String value) {
|
||||
this.type = type;
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
public String getType() {
|
||||
return type;
|
||||
}
|
||||
|
||||
public String getValue() {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
package com.ruoyi.framework.webSocket;
|
||||
|
||||
import org.springframework.context.annotation.Bean;
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
|
||||
|
||||
/**
|
||||
* websocket 配置
|
||||
*
|
||||
*/
|
||||
@Configuration
|
||||
public class WebSocketConfig
|
||||
{
|
||||
@Bean
|
||||
public ServerEndpointExporter serverEndpointExporter()
|
||||
{
|
||||
return new ServerEndpointExporter();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
package com.ruoyi.framework.webSocket;
|
||||
|
||||
import com.alibaba.fastjson2.JSONObject;
|
||||
import org.slf4j.Logger;
|
||||
import org.slf4j.LoggerFactory;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import javax.websocket.*;
|
||||
import javax.websocket.server.PathParam;
|
||||
import javax.websocket.server.ServerEndpoint;
|
||||
import java.io.IOException;
|
||||
import java.util.List;
|
||||
import java.util.concurrent.ConcurrentHashMap;
|
||||
import java.util.concurrent.CopyOnWriteArrayList;
|
||||
import java.util.concurrent.atomic.AtomicInteger;
|
||||
|
||||
@Component
|
||||
@ServerEndpoint("/websocket/{userId}")
|
||||
public class WebSocketServer {
|
||||
private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
|
||||
|
||||
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
|
||||
private static AtomicInteger onlineNum = new AtomicInteger();
|
||||
|
||||
//concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
|
||||
private static ConcurrentHashMap<String, Session> sessionPools = new ConcurrentHashMap<>();
|
||||
|
||||
/**
|
||||
* 线程安全list，用来存放 在线客户端账号
|
||||
*/
|
||||
public static List<String> userList = new CopyOnWriteArrayList<>();
|
||||
|
||||
|
||||
/**
|
||||
* 连接成功
|
||||
* @param session
|
||||
* @param userId
|
||||
*/
|
||||
@OnOpen
|
||||
public void onOpen(Session session, @PathParam(value = "userId") String userId) {
|
||||
sessionPools.put(userId, session);
|
||||
if (!userList.contains(userId)) {
|
||||
addOnlineCount();
|
||||
userList.add(userId);
|
||||
}
|
||||
log.debug("ID为【" + userId + "】的用户加入websocket！当前在线人数为：" + onlineNum);
|
||||
log.debug("当前在线：" + userList);
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭连接
|
||||
* @param userId
|
||||
*/
|
||||
@OnClose
|
||||
public void onClose(@PathParam(value = "userId") String userId) {
|
||||
sessionPools.remove(userId);
|
||||
if (userList.contains(userId)) {
|
||||
userList.remove(userId);
|
||||
subOnlineCount();
|
||||
}
|
||||
log.debug(userId + "断开webSocket连接！当前人数为" + onlineNum);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 消息监听
|
||||
* @param message
|
||||
* @throws IOException
|
||||
*/
|
||||
@OnMessage
|
||||
public void onMessage(String message) throws IOException {
|
||||
JSONObject jsonObject = JSONObject.parseObject(message);
|
||||
String userId = jsonObject.getString("userId");
|
||||
String type = jsonObject.getString("type");
|
||||
if (type.equals(MessageType.CHAT.getType())) {
|
||||
log.debug("聊天消息推送");
|
||||
sendToUser(userId, JSONObject.toJSONString(jsonObject));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 连接错误
|
||||
* @param session
|
||||
* @param throwable
|
||||
* @throws IOException
|
||||
*/
|
||||
@OnError
|
||||
public void onError(Session session, Throwable throwable) throws IOException {
|
||||
log.error("websocket连接错误！");
|
||||
throwable.printStackTrace();
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
public void sendMessage(Session session, String message) throws IOException, EncodeException {
|
||||
if (session != null) {
|
||||
synchronized (session) {
|
||||
session.getBasicRemote().sendText(message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 给指定用户发送信息
|
||||
*/
|
||||
public void sendToUser(String userId, String message) {
|
||||
Session session = sessionPools.get(userId);
|
||||
try {
|
||||
if (session != null) {
|
||||
sendMessage(session, message);
|
||||
}else {
|
||||
log.debug("推送用户不在线");
|
||||
}
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
}
|
||||
}
|
||||
|
||||
public static void addOnlineCount() {
|
||||
onlineNum.incrementAndGet();
|
||||
}
|
||||
|
||||
public static void subOnlineCount() {
|
||||
onlineNum.decrementAndGet();
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
package com.ruoyi.system.domain;
|
||||
|
||||
import com.baomidou.mybatisplus.annotation.*;
|
||||
import lombok.Data;
|
||||
import lombok.EqualsAndHashCode;
|
||||
import java.io.Serializable;
|
||||
import java.util.Date;
|
||||
import java.math.BigDecimal;
|
||||
|
||||
import com.ruoyi.common.core.domain.BaseEntity;
|
||||
|
||||
/**
|
||||
* 通信目录对象 socket_contact
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
@Data
|
||||
@EqualsAndHashCode(callSuper = true)
|
||||
@TableName("socket_contact")
|
||||
public class SocketContact extends BaseEntity {
|
||||
|
||||
private static final long serialVersionUID=1L;
|
||||
|
||||
/**
|
||||
* 通信id
|
||||
*/
|
||||
@TableId(value = "id")
|
||||
private Long id;
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
private Long contactUserId;
|
||||
/**
|
||||
* 发送者
|
||||
*/
|
||||
private Long userId;
|
||||
/**
|
||||
* 删除标志
|
||||
*/
|
||||
@TableLogic
|
||||
private Long delFlag;
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
private String remark;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
package com.ruoyi.system.domain.bo;
|
||||
|
||||
import com.ruoyi.common.core.validate.AddGroup;
|
||||
import com.ruoyi.common.core.validate.EditGroup;
|
||||
import lombok.Data;
|
||||
import lombok.EqualsAndHashCode;
|
||||
import javax.validation.constraints.*;
|
||||
|
||||
import java.util.Date;
|
||||
|
||||
import com.ruoyi.common.core.domain.BaseEntity;
|
||||
|
||||
/**
|
||||
* 通信目录业务对象 socket_contact
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
|
||||
@Data
|
||||
@EqualsAndHashCode(callSuper = true)
|
||||
public class SocketContactBo extends BaseEntity {
|
||||
|
||||
/**
|
||||
* 通信id
|
||||
*/
|
||||
@NotNull(message = "通信id不能为空", groups = { EditGroup.class })
|
||||
private Long id;
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
@NotNull(message = "用户id不能为空", groups = { AddGroup.class, EditGroup.class })
|
||||
private Long contactUserId;
|
||||
|
||||
/**
|
||||
* 发送者
|
||||
*/
|
||||
@NotNull(message = "发送者不能为空", groups = { AddGroup.class, EditGroup.class })
|
||||
private Long userId;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
@NotBlank(message = "备注不能为空", groups = { AddGroup.class, EditGroup.class })
|
||||
private String remark;
|
||||
|
||||
/** 用户名 */
|
||||
private String userName;
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
package com.ruoyi.system.domain.vo;
|
||||
|
||||
import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
|
||||
import com.alibaba.excel.annotation.ExcelProperty;
|
||||
import com.ruoyi.common.annotation.ExcelDictFormat;
|
||||
import com.ruoyi.common.convert.ExcelDictConvert;
|
||||
import com.ruoyi.common.core.domain.entity.SysUser;
|
||||
import lombok.Data;
|
||||
import java.util.Date;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 通信目录视图对象 socket_contact
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
@Data
|
||||
@ExcelIgnoreUnannotated
|
||||
public class SocketContactVo {
|
||||
|
||||
private static final long serialVersionUID = 1L;
|
||||
|
||||
/**
|
||||
* 通信id
|
||||
*/
|
||||
@ExcelProperty(value = "通信id")
|
||||
private Long id;
|
||||
|
||||
/**
|
||||
* 用户id
|
||||
*/
|
||||
@ExcelProperty(value = "用户id")
|
||||
private Long contactUserId;
|
||||
|
||||
/**
|
||||
* 发送者
|
||||
*/
|
||||
@ExcelProperty(value = "发送者")
|
||||
private Long userId;
|
||||
|
||||
/**
|
||||
* 备注
|
||||
*/
|
||||
@ExcelProperty(value = "备注")
|
||||
private String remark;
|
||||
|
||||
/**
|
||||
* user对象
|
||||
*/
|
||||
private SysUser user;
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
package com.ruoyi.system.mapper;
|
||||
|
||||
import com.ruoyi.system.domain.SocketContact;
|
||||
import com.ruoyi.system.domain.vo.SocketContactVo;
|
||||
import com.ruoyi.common.core.mapper.BaseMapperPlus;
|
||||
|
||||
/**
|
||||
* 通信目录Mapper接口
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
public interface SocketContactMapper extends BaseMapperPlus<SocketContactMapper, SocketContact, SocketContactVo> {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
package com.ruoyi.system.service;
|
||||
|
||||
import com.ruoyi.system.domain.SocketContact;
|
||||
import com.ruoyi.system.domain.vo.SocketContactVo;
|
||||
import com.ruoyi.system.domain.bo.SocketContactBo;
|
||||
import com.ruoyi.common.core.page.TableDataInfo;
|
||||
import com.ruoyi.common.core.domain.PageQuery;
|
||||
|
||||
import java.util.Collection;
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 通信目录Service接口
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
public interface ISocketContactService {
|
||||
|
||||
/**
|
||||
* 查询通信目录
|
||||
*/
|
||||
SocketContactVo queryById(Long id);
|
||||
|
||||
/**
|
||||
* 查询通信目录列表
|
||||
*/
|
||||
TableDataInfo<SocketContactVo> queryPageList(SocketContactBo bo, PageQuery pageQuery);
|
||||
|
||||
/**
|
||||
* 查询通信目录列表
|
||||
*/
|
||||
List<SocketContactVo> queryList(SocketContactBo bo);
|
||||
|
||||
/**
|
||||
* 新增通信目录
|
||||
*/
|
||||
Boolean insertByBo(SocketContactBo bo);
|
||||
|
||||
/**
|
||||
* 修改通信目录
|
||||
*/
|
||||
Boolean updateByBo(SocketContactBo bo);
|
||||
|
||||
/**
|
||||
* 校验并批量删除通信目录信息
|
||||
*/
|
||||
Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
package com.ruoyi.system.service.impl;
|
||||
|
||||
import cn.hutool.core.bean.BeanUtil;
|
||||
import com.ruoyi.common.core.domain.entity.SysUser;
|
||||
import com.ruoyi.common.utils.StringUtils;
|
||||
import com.ruoyi.common.core.page.TableDataInfo;
|
||||
import com.ruoyi.common.core.domain.PageQuery;
|
||||
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
||||
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
|
||||
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
|
||||
import com.ruoyi.system.mapper.SysUserMapper;
|
||||
import com.ruoyi.system.service.ISysUserService;
|
||||
import liquibase.pro.packaged.S;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
import com.ruoyi.system.domain.bo.SocketContactBo;
|
||||
import com.ruoyi.system.domain.vo.SocketContactVo;
|
||||
import com.ruoyi.system.domain.SocketContact;
|
||||
import com.ruoyi.system.mapper.SocketContactMapper;
|
||||
import com.ruoyi.system.service.ISocketContactService;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
import java.util.Collection;
|
||||
|
||||
/**
|
||||
* 通信目录Service业务层处理
|
||||
*
|
||||
* @author hdka
|
||||
* @date 2024-10-21
|
||||
*/
|
||||
@RequiredArgsConstructor
|
||||
@Service
|
||||
public class SocketContactServiceImpl implements ISocketContactService {
|
||||
|
||||
private final SocketContactMapper baseMapper;
|
||||
|
||||
private final SysUserMapper sysUserMapper;
|
||||
|
||||
/**
|
||||
* 查询通信目录
|
||||
*/
|
||||
@Override
|
||||
public SocketContactVo queryById(Long id){
|
||||
return baseMapper.selectVoById(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询通信目录列表
|
||||
*/
|
||||
@Override
|
||||
public TableDataInfo<SocketContactVo> queryPageList(SocketContactBo bo, PageQuery pageQuery) {
|
||||
LambdaQueryWrapper<SocketContact> socketContactLambdaQueryWrapper = buildQueryWrapper(bo);
|
||||
Page<SocketContactVo> result = baseMapper.selectVoPage(pageQuery.build(), socketContactLambdaQueryWrapper);
|
||||
for (SocketContactVo record : result.getRecords()) {
|
||||
SysUser sysUser = sysUserMapper.selectUserById(record.getContactUserId());
|
||||
record.setUser(sysUser);
|
||||
}
|
||||
return TableDataInfo.build(result);
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询通信目录列表
|
||||
*/
|
||||
@Override
|
||||
public List<SocketContactVo> queryList(SocketContactBo bo) {
|
||||
LambdaQueryWrapper<SocketContact> lqw = buildQueryWrapper(bo);
|
||||
return baseMapper.selectVoList(lqw);
|
||||
}
|
||||
|
||||
private LambdaQueryWrapper<SocketContact> buildQueryWrapper(SocketContactBo bo) {
|
||||
Map<String, Object> params = bo.getParams();
|
||||
LambdaQueryWrapper<SocketContact> lqw = Wrappers.lambdaQuery();
|
||||
lqw.eq(bo.getContactUserId() != null, SocketContact::getContactUserId, bo.getContactUserId());
|
||||
lqw.eq(bo.getUserId() != null, SocketContact::getUserId, bo.getUserId());
|
||||
return lqw;
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增通信目录
|
||||
*/
|
||||
@Override
|
||||
public Boolean insertByBo(SocketContactBo bo) {
|
||||
SocketContact add = BeanUtil.toBean(bo, SocketContact.class);
|
||||
validEntityBeforeSave(add);
|
||||
boolean flag = baseMapper.insert(add) > 0;
|
||||
if (flag) {
|
||||
bo.setId(add.getId());
|
||||
}
|
||||
return flag;
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改通信目录
|
||||
*/
|
||||
@Override
|
||||
public Boolean updateByBo(SocketContactBo bo) {
|
||||
SocketContact update = BeanUtil.toBean(bo, SocketContact.class);
|
||||
validEntityBeforeSave(update);
|
||||
return baseMapper.updateById(update) > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 保存前的数据校验
|
||||
*/
|
||||
private void validEntityBeforeSave(SocketContact entity){
|
||||
//TODO 做一些数据校验,如唯一约束
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量删除通信目录
|
||||
*/
|
||||
@Override
|
||||
public Boolean deleteWithValidByIds(Collection<Long> ids, Boolean isValid) {
|
||||
if(isValid){
|
||||
//TODO 做一些业务上的校验,判断是否需要校验
|
||||
}
|
||||
return baseMapper.deleteBatchIds(ids) > 0;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 工程项目进度及成本控制管理系统
|
||||
VUE_APP_TITLE = 福安德综合办公系统
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
@@ -13,6 +13,10 @@ VUE_APP_CONTEXT_PATH = '/'
|
||||
# 监控地址
|
||||
VUE_APP_MONITRO_ADMIN = 'http://localhost:9090/admin/login'
|
||||
|
||||
|
||||
# websocket服务地址
|
||||
VUE_APP_SOCKET_SERVER = 'ws://localhost:8080/websocket/'
|
||||
|
||||
# xxl-job 控制台地址
|
||||
VUE_APP_XXL_JOB_ADMIN = 'http://localhost:9100/xxl-job-admin'
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 工程项目进度及成本控制管理系统
|
||||
VUE_APP_TITLE = 福安德综合办公系统
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
@@ -13,6 +13,9 @@ VUE_APP_CONTEXT_PATH = '/'
|
||||
# 监控地址
|
||||
VUE_APP_MONITRO_ADMIN = '/admin/login'
|
||||
|
||||
# websocket服务地址
|
||||
VUE_APP_SOCKET_SERVER = 'ws://localhost:8080/websocket/'
|
||||
|
||||
# xxl-job 控制台地址
|
||||
VUE_APP_XXL_JOB_ADMIN = '/xxl-job-admin'
|
||||
|
||||
|
||||
@@ -53,6 +53,7 @@
|
||||
"quill": "1.3.7",
|
||||
"screenfull": "5.0.2",
|
||||
"sortablejs": "1.10.2",
|
||||
"v-emoji-picker": "^2.3.3",
|
||||
"vue": "2.6.12",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-cropper": "0.5.5",
|
||||
|
||||
44
ruoyi-ui/src/api/system/contact.js
Normal file
44
ruoyi-ui/src/api/system/contact.js
Normal file
@@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询通信目录列表
|
||||
export function listContact(query) {
|
||||
return request({
|
||||
url: '/system/contact/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询通信目录详细
|
||||
export function getContact(id) {
|
||||
return request({
|
||||
url: '/system/contact/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增通信目录
|
||||
export function addContact(data) {
|
||||
return request({
|
||||
url: '/system/contact',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改通信目录
|
||||
export function updateContact(data) {
|
||||
return request({
|
||||
url: '/system/contact',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除通信目录
|
||||
export function delContact(id) {
|
||||
return request({
|
||||
url: '/system/contact/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
0
ruoyi-ui/src/api/system/message.js
Normal file
0
ruoyi-ui/src/api/system/message.js
Normal file
BIN
ruoyi-ui/src/assets/images/contact.png
Normal file
BIN
ruoyi-ui/src/assets/images/contact.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
ruoyi-ui/src/assets/images/emoji.png
Normal file
BIN
ruoyi-ui/src/assets/images/emoji.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
ruoyi-ui/src/assets/images/message.png
Normal file
BIN
ruoyi-ui/src/assets/images/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
@@ -35,7 +35,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '项目管理系统',
|
||||
title: '福安德综合办公系统',
|
||||
logo: logoImg
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,6 +40,8 @@ import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
|
||||
import webSocket from "./utils/websocket";
|
||||
|
||||
//打印组件 添加时间：2024年3月9日
|
||||
import Print from 'vue-print-nb'
|
||||
|
||||
@@ -55,6 +57,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
|
||||
Vue.prototype.selectDictLabels = selectDictLabels
|
||||
Vue.prototype.download = download
|
||||
Vue.prototype.handleTree = handleTree
|
||||
Vue.prototype.$webSocket = webSocket
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
@@ -91,9 +94,32 @@ Vue.use(Element, {
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
let newVue = new Vue({
|
||||
el: '#app',
|
||||
created() {
|
||||
//监听用户窗口是否关闭
|
||||
window.addEventListener('beforeunload', this.closeSocket);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('beforeunload', this.closeSocket);
|
||||
},
|
||||
methods: {
|
||||
onBeforeUnload(event) {
|
||||
// 在这里编写你想要执行的代码
|
||||
// 例如：发送数据到服务器或者显示警告信息
|
||||
// 设置event.returnValue以显示浏览器默认的警告信息
|
||||
event.returnValue = '您可能有未保存的更改！';
|
||||
},
|
||||
closeSocket() {
|
||||
//关闭websocket连接
|
||||
this.$websocket.close();
|
||||
}
|
||||
},
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
||||
|
||||
|
||||
export default newVue
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { login, logout, getInfo } from '@/api/login'
|
||||
import { getToken, setToken, removeToken } from '@/utils/auth'
|
||||
|
||||
import newVue from '@/main'
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
@@ -25,7 +25,10 @@ const user = {
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
}
|
||||
},
|
||||
SET_ID: (state, id) => {
|
||||
state.id = id
|
||||
},
|
||||
},
|
||||
|
||||
actions: {
|
||||
@@ -51,6 +54,7 @@ const user = {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.data.user
|
||||
console.log(user)
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
||||
if (res.data.roles && res.data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', res.data.roles)
|
||||
@@ -58,8 +62,11 @@ const user = {
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_ID',user.userId)
|
||||
commit('SET_NAME', user.userName)
|
||||
commit('SET_AVATAR', avatar)
|
||||
// TODO 获取用户信息时检查socket连接状态并进行连接
|
||||
newVue.$webSocket.initWebSocket()
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
@@ -75,6 +82,8 @@ const user = {
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
// TODO 用户推出登陆后 关闭socket连接
|
||||
newVue.$webSocket.close()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
|
||||
123
ruoyi-ui/src/utils/websocket.js
Normal file
123
ruoyi-ui/src/utils/websocket.js
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Notification } from "element-ui";
|
||||
import { getToken } from "./auth";
|
||||
import store from '../store'
|
||||
|
||||
var socket = null;//实例对象
|
||||
var lockReconnect = false; //是否真正建立连接
|
||||
var timeout = 20 * 1000; //20秒一次心跳
|
||||
var timeoutObj = null; //心跳倒计时
|
||||
var serverTimeoutObj = null; //服务心跳倒计时
|
||||
var timeoutnum = null; //断开 重连倒计时
|
||||
|
||||
const initWebSocket = async () => {
|
||||
if ("WebSocket" in window) {
|
||||
if (!store.state.user.id) {
|
||||
console.log("未登录！websocket工具获取不到userId")
|
||||
}else {
|
||||
const wsUrl = process.env.VUE_APP_SOCKET_SERVER + store.state.user.id;
|
||||
console.log("连接已开启")
|
||||
|
||||
socket = new WebSocket(wsUrl);
|
||||
|
||||
socket.onerror = webSocketOnError;
|
||||
socket.onmessage = webSocketOnMessage;
|
||||
socket.onclose = closeWebsocket;
|
||||
socket.onopen = openWebsocket;
|
||||
console.log(socket)
|
||||
}
|
||||
} else {
|
||||
Notification.error({
|
||||
title: "错误",
|
||||
message: "您的浏览器不支持websocket，请更换Chrome或者Firefox",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//建立连接
|
||||
const openWebsocket = (e) => {
|
||||
start();
|
||||
}
|
||||
|
||||
const start = ()=> {
|
||||
//开启心跳
|
||||
timeoutObj && clearTimeout(timeoutObj);
|
||||
serverTimeoutObj && clearTimeout(serverTimeoutObj);
|
||||
timeoutObj = setTimeout(function() {
|
||||
//这里发送一个心跳，后端收到后，返回一个心跳消息
|
||||
if (socket.readyState == 1) {
|
||||
//如果连接正常
|
||||
// socket.send("heartbeat");
|
||||
} else {
|
||||
//否则重连
|
||||
reconnect();
|
||||
}
|
||||
serverTimeoutObj = setTimeout(function() {
|
||||
//超时关闭
|
||||
socket.close();
|
||||
}, timeout);
|
||||
}, timeout);
|
||||
}
|
||||
|
||||
//重新连接
|
||||
const reconnect =() => {
|
||||
if (lockReconnect) {
|
||||
return;
|
||||
}
|
||||
lockReconnect = true;
|
||||
//没连接上会一直重连，设置延迟避免请求过多
|
||||
timeoutnum && clearTimeout(timeoutnum);
|
||||
timeoutnum = setTimeout(function() {
|
||||
//新连接
|
||||
initWebSocket();
|
||||
lockReconnect = false;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
//重置心跳
|
||||
const reset =() => {
|
||||
//清除时间
|
||||
clearTimeout(timeoutObj);
|
||||
clearTimeout(serverTimeoutObj);
|
||||
//重启心跳
|
||||
start();
|
||||
}
|
||||
|
||||
const sendWebsocket = (message) =>{
|
||||
socket.send(message);
|
||||
}
|
||||
|
||||
const webSocketOnError = (e) => {
|
||||
initWebSocket();
|
||||
reconnect();
|
||||
|
||||
}
|
||||
|
||||
//服务器返回的数据
|
||||
const webSocketOnMessage = (e)=> {
|
||||
//判断是否登录
|
||||
console.log("111111111111"+e)
|
||||
if (getToken()) {
|
||||
//window自定义事件
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("onmessageWS", {
|
||||
detail: {
|
||||
data: JSON.parse(e?.data)
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
// socket.onmessage(e)
|
||||
reset();
|
||||
}
|
||||
|
||||
const closeWebsocket=(e) => {
|
||||
reconnect();
|
||||
}
|
||||
|
||||
//断开连接
|
||||
const close =() => {
|
||||
//WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。
|
||||
socket.close();
|
||||
}
|
||||
//具体问题具体分析,把需要用到的方法暴露出去
|
||||
export default { initWebSocket, sendWebsocket, webSocketOnMessage, close };
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
||||
<h3 class="title">工程项目进度及成本控制管理系统</h3>
|
||||
<h3 class="title">福安德综合办公系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
v-model="loginForm.username"
|
||||
@@ -56,7 +56,7 @@
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-login-footer">
|
||||
<span>Copyright © 2021-2023 KonBAI All Rights Reserved.</span>
|
||||
<span>Copyright © 2024 spark All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
361
ruoyi-ui/src/views/oa/webSocket/index.vue
Normal file
361
ruoyi-ui/src/views/oa/webSocket/index.vue
Normal file
@@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-container class="app">
|
||||
<el-aside width="calc(30% - 20px)" style="background-color: white">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人" v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<!-- TODO 这里搞一个弹窗去搜索用户表 从而进行添加好友操作 -->
|
||||
<el-button size="mini">添加联系人</el-button>
|
||||
|
||||
</el-row>
|
||||
<el-row style="margin-top: 5px">
|
||||
<el-button size="mini">全部</el-button>
|
||||
<el-button size="mini">个人</el-button>
|
||||
<el-button size="mini">群聊</el-button>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<div v-loading="contactListLoading" style="margin-top: 30px">
|
||||
<el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750" :infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
|
||||
<el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId" :style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
|
||||
<el-col :span="6">
|
||||
<el-image :src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar" fit="fill" style="width: 70%;border-radius: 50%;"/>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-row>
|
||||
<el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{item.user.nickName}}</span></el-col>
|
||||
<el-col :span="5">
|
||||
<el-divider direction="vertical"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
|
||||
<span><i class="el-icon-circle-check"></i> {{item.endMsg}}</span>
|
||||
</el-col>
|
||||
<el-col :span="5" style="float: right">
|
||||
<el-dropdown class="hover_down_menu">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-arrow-down el-icon-more"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>置顶</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
<el-main v-else class="msgListMain_empty">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="@/assets/images/contact.png" style="width: 80%; height: 80%"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span style="color: gray">暂无联系人</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</div>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
|
||||
<div v-if="currentContact.id">
|
||||
<el-row>
|
||||
<el-col :span="8" style="color: #666">
|
||||
<span style="font-weight: 500; font-size: 16px">{{currentContact.userName}}</span>
|
||||
<span style="font-size: 16px; margin-left: 30px">{{currentContact.industry}}</span>
|
||||
<el-divider direction="vertical"/>
|
||||
<span style="font-size: 16px;">{{currentContact.job}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span>{{currentContact.major}}</span>
|
||||
<span style="color: red; font-size: 17px; margin-left: 20px">{{currentContact.salary}}</span>
|
||||
<span style="margin-left: 20px">{{currentContact.city}}</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24" class="msg_content" id="message_content">
|
||||
<el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
|
||||
<div v-if="item.userId === currentContact.contactUserId">
|
||||
<el-col :span="2" style="text-align: center">
|
||||
<el-image :src="currentContact.avatar" fit="cover" style="width: 40%;border-radius: 50%"/>
|
||||
</el-col>
|
||||
<el-col :span="10" style="font-size: 16px; line-height: 40px;">
|
||||
<span>{{item.content}}</span>
|
||||
<span style="font-size: 11px; color: gray; margin-left: 5px">{{item.createTime}}</span>
|
||||
</el-col>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-col :span="24" style="font-size: 16px;">
|
||||
<div class="chat_bubble">
|
||||
<span>{{item.content}}</span>
|
||||
</div>
|
||||
<i class="el-icon-circle-check" style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
|
||||
<span style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{item.createTime}}</span>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row id="message_content_end" style="height: 15px"><el-col></el-col></el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="click">
|
||||
<div>
|
||||
<VEmojiPicker :showSearch="false" @select="insertEmoji" />
|
||||
</div>
|
||||
<img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-input type="textarea" :rows="3" v-model="inputVal" style="font-size: 17px; color: black" @keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="@/assets/images/message.png"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VEmojiPicker } from 'v-emoji-picker';
|
||||
import { parseTime } from '@/utils/ruoyi';
|
||||
import { listContact, getContact } from "@/api/system/contact";
|
||||
import { addMessage } from "@/api/system/message";
|
||||
|
||||
export default {
|
||||
name: "chat",
|
||||
components: {
|
||||
VEmojiPicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//联系人列表
|
||||
contactList: [],
|
||||
contactListTotal: 0,
|
||||
contactListLoading: false,
|
||||
//消息记录
|
||||
msgList: [],
|
||||
msgListTotal: 0,
|
||||
msgListLoading: false,
|
||||
inputVal: '',
|
||||
search: '',
|
||||
contactUserId: null,
|
||||
userId: null,
|
||||
contactQueryParams: {
|
||||
pageSize: 10,
|
||||
pageNum: 1
|
||||
},
|
||||
currentContact: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener("onmessageWS", this.subscribeMessage);
|
||||
},
|
||||
created() {
|
||||
this.userId = this.$store.state.user.id;
|
||||
this.subscribeMessage();
|
||||
this.getContactList();
|
||||
},
|
||||
methods: {
|
||||
getContactList() {
|
||||
this.contactListLoading = true;
|
||||
this.contactQueryParams.userId = this.userId;
|
||||
listContact(this.contactQueryParams).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.contactList = response.rows;
|
||||
this.contactListTotal = response.total;
|
||||
const contactUserId = this.$route.query.userId;
|
||||
if (contactUserId) {
|
||||
this.contactUserId = contactUserId;
|
||||
let contact = response.rows.find(row => row.contactUserId == contactUserId);
|
||||
this.loadMessage(contact.id);
|
||||
}
|
||||
}
|
||||
this.contactListLoading = false;
|
||||
})
|
||||
},
|
||||
contactLoadMore() {
|
||||
// this.contactQueryParams.pageSize = 5;
|
||||
// this.contactQueryParams.pageNum++;
|
||||
this.getContactList();
|
||||
},
|
||||
loadMessage(concatId) {
|
||||
this.msgListLoading = true;
|
||||
getContact(concatId).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.currentContact = response.data;
|
||||
this.msgList = response.data.messages;
|
||||
}
|
||||
this.msgListLoading = false;
|
||||
this.fleshScroll();
|
||||
})
|
||||
},
|
||||
insertEmoji(emoji) {
|
||||
this.inputVal += emoji.data;
|
||||
},
|
||||
send() {
|
||||
const message = {
|
||||
contactId: this.currentContact.id,
|
||||
userId: this.userId,
|
||||
content: this.inputVal,
|
||||
roomId: this.currentContact.roomId
|
||||
}
|
||||
this.msgList.push({
|
||||
...message,
|
||||
id: this.msgList.length + 1,
|
||||
createTime: parseTime(new Date())
|
||||
})
|
||||
this.fleshLastMsg();
|
||||
addMessage(message);
|
||||
const msg = {
|
||||
sendUserId: this.userId,
|
||||
sendUserName: this.$store.state.user.name,
|
||||
userId: this.currentContact.contactUserId,
|
||||
type: "chat",
|
||||
detail: this.inputVal
|
||||
}
|
||||
this.$websocket.sendWebsocket(JSON.stringify(msg));
|
||||
this.inputVal = '';
|
||||
this.fleshScroll();
|
||||
},
|
||||
subscribeMessage(res) {
|
||||
console.log(res);
|
||||
if (res) {
|
||||
const { sendUserId, sendUserName, userId, type, detail } = res.detail.data;
|
||||
const message = {
|
||||
id: 1,
|
||||
contactId: userId,
|
||||
userId: sendUserId,
|
||||
content: detail,
|
||||
roomId: this.currentContact.roomId,
|
||||
createTime: parseTime(new Date())
|
||||
}
|
||||
this.msgList.push(message);
|
||||
this.fleshLastMsg();
|
||||
this.fleshScroll();
|
||||
}
|
||||
},
|
||||
fleshLastMsg() {
|
||||
const index = this.contactList.findIndex(e => e.id === this.currentContact.id);
|
||||
this.contactList[index].endMsg = this.msgList[this.msgList.length - 1].content;
|
||||
},
|
||||
fleshScroll() {
|
||||
this.$nextTick(() => {
|
||||
document.getElementById("message_content_end").scrollIntoView();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-container {
|
||||
background: linear-gradient(180deg, rgba(0, 190, 189, .1), rgba(136, 255, 254, .2) 50%, rgba(242, 244, 247, .1));
|
||||
}
|
||||
.app {
|
||||
background-color: white;
|
||||
border-radius: 12px 12px 0 0;
|
||||
}
|
||||
.msgListMain {
|
||||
height: 500px;
|
||||
overflow-y:auto;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.msgUserList {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.msgListMain_empty {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.hover_down_menu {
|
||||
display: none;
|
||||
}
|
||||
.msgUserList:hover {
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
}
|
||||
.msgUserList:hover .hover_down_menu{
|
||||
display: block;
|
||||
}
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.main {
|
||||
background-color: white;
|
||||
height: 600px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.main_empty {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
height: 600px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.main_empty .el-row {
|
||||
text-align: center;
|
||||
}
|
||||
.main_empty img {
|
||||
width: 25%;
|
||||
}
|
||||
.msg_content {
|
||||
margin-top: 30px;
|
||||
height: 390px;
|
||||
overflow: auto;
|
||||
//background-color: gray;
|
||||
}
|
||||
.chat_bubble {
|
||||
float: right;
|
||||
margin-right: 35px;
|
||||
color: #333;
|
||||
background-color: rgba(0, 190, 189, .2);
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 12px 0 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.input_top_menu_img{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="register">
|
||||
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
|
||||
<h3 class="title">工程项目进度及成本控制管理系统</h3>
|
||||
<h3 class="title">福安德综合办公系统</h3>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
|
||||
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
|
||||
@@ -61,7 +61,7 @@
|
||||
</el-form>
|
||||
<!-- 底部 -->
|
||||
<div class="el-register-footer">
|
||||
<span>Copyright © 2018-2023 KonBAI All Rights Reserved.</span>
|
||||
<span>Copyright © 2018-2023 spark All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -7,7 +7,7 @@ function resolve(dir) {
|
||||
|
||||
const CompressionPlugin = require('compression-webpack-plugin')
|
||||
|
||||
const name = process.env.VUE_APP_TITLE || '工程项目进度及成本控制管理系统' // 网页标题
|
||||
const name = process.env.VUE_APP_TITLE || '福安德综合办公系统' // 网页标题
|
||||
|
||||
const port = process.env.port || process.env.npm_config_port || 80 // 端口
|
||||
|
||||
@@ -35,7 +35,7 @@ module.exports = {
|
||||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://localhost:8078`,
|
||||
target: `http://localhost:8080`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
|
||||
Reference in New Issue
Block a user