diff --git a/backend/src/main/java/io/dataease/controller/sys/SysUserController.java b/backend/src/main/java/io/dataease/controller/sys/SysUserController.java
index a03fad7d85..e95563f748 100644
--- a/backend/src/main/java/io/dataease/controller/sys/SysUserController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/SysUserController.java
@@ -24,6 +24,7 @@ import io.dataease.controller.sys.request.SysUserStateRequest;
 import io.dataease.controller.sys.response.RoleUserItem;
 import io.dataease.controller.sys.response.SysUserGridResponse;
 import io.dataease.plugins.common.base.domain.SysUser;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.service.sys.SysRoleService;
 import io.dataease.service.sys.SysUserService;
 import io.swagger.annotations.Api;
@@ -66,7 +67,7 @@ public class SysUserController {
             @ApiImplicitParam(name = "request", value = "查询条件", required = true)
     })
     public Pager<List<SysUserGridResponse>> userGrid(@PathVariable int goPage, @PathVariable int pageSize,
-            @RequestBody KeyGridRequest request) {
+                                                     @RequestBody KeyGridRequest request) {
         Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
         List<SysUserGridResponse> users = sysUserService.query(request);
         users.forEach(user -> {
@@ -87,9 +88,9 @@ public class SysUserController {
     @RequiresPermissions("user:add")
     @PostMapping("/create")
     @DeLog(
-        operatetype = SysLogConstants.OPERATE_TYPE.CREATE,
-        sourcetype = SysLogConstants.SOURCE_TYPE.USER,
-        value = "userId"
+            operatetype = SysLogConstants.OPERATE_TYPE.CREATE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.USER,
+            value = "userId"
     )
     public void create(@RequestBody SysUserCreateRequest request) {
         sysUserService.save(request);
@@ -99,9 +100,9 @@ public class SysUserController {
     @RequiresPermissions("user:edit")
     @PostMapping("/update")
     @DeLog(
-        operatetype = SysLogConstants.OPERATE_TYPE.MODIFY,
-        sourcetype = SysLogConstants.SOURCE_TYPE.USER,
-        value = "userId"
+            operatetype = SysLogConstants.OPERATE_TYPE.MODIFY,
+            sourcetype = SysLogConstants.SOURCE_TYPE.USER,
+            value = "userId"
     )
     public void update(@RequestBody SysUserCreateRequest request) {
         sysUserService.update(request);
@@ -112,8 +113,8 @@ public class SysUserController {
     @PostMapping("/delete/{userId}")
     @ApiImplicitParam(paramType = "path", value = "用户ID", name = "userId", required = true, dataType = "Integer")
     @DeLog(
-        operatetype = SysLogConstants.OPERATE_TYPE.DELETE,
-        sourcetype = SysLogConstants.SOURCE_TYPE.USER
+            operatetype = SysLogConstants.OPERATE_TYPE.DELETE,
+            sourcetype = SysLogConstants.SOURCE_TYPE.USER
     )
     public void delete(@PathVariable("userId") Long userId) {
         sysUserService.delete(userId);
@@ -124,9 +125,9 @@ public class SysUserController {
     @RequiresRoles("1")
     @PostMapping("/updateStatus")
     @DeLog(
-        operatetype = SysLogConstants.OPERATE_TYPE.MODIFY,
-        sourcetype = SysLogConstants.SOURCE_TYPE.USER,
-        value = "userId"
+            operatetype = SysLogConstants.OPERATE_TYPE.MODIFY,
+            sourcetype = SysLogConstants.SOURCE_TYPE.USER,
+            value = "userId"
     )
     public void updateStatus(@RequestBody SysUserStateRequest request) {
         sysUserService.updateStatus(request);
@@ -201,7 +202,7 @@ public class SysUserController {
             @ApiImplicitParam(name = "request", value = "查询条件", required = true)
     })
     public Pager<List<SysRole>> roleGrid(@PathVariable int goPage, @PathVariable int pageSize,
-            @RequestBody BaseGridRequest request) {
+                                         @RequestBody BaseGridRequest request) {
         Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
         Pager<List<SysRole>> listPager = PageUtils.setPageInfo(page, sysRoleService.query(request));
         return listPager;
@@ -226,4 +227,9 @@ public class SysUserController {
         authUserService.unlockAccount(username, one.getFrom());
     }
 
+    @PostMapping("/assistInfo/{userId}")
+    public SysUserAssist assistInfo(@PathVariable("userId") Long userId) {
+        return sysUserService.assistInfo(userId);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/sys/request/SysUserCreateRequest.java b/backend/src/main/java/io/dataease/controller/sys/request/SysUserCreateRequest.java
index 69b63ee655..5ecc781fc7 100644
--- a/backend/src/main/java/io/dataease/controller/sys/request/SysUserCreateRequest.java
+++ b/backend/src/main/java/io/dataease/controller/sys/request/SysUserCreateRequest.java
@@ -1,6 +1,7 @@
 package io.dataease.controller.sys.request;
 
 import io.dataease.plugins.common.base.domain.SysUser;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.swagger.annotations.ApiModel;
 import io.swagger.annotations.ApiModelProperty;
 import lombok.Data;
@@ -14,4 +15,7 @@ public class SysUserCreateRequest extends SysUser {
     @ApiModelProperty(value = "角色ID集合", required = true, position = 7)
     private List<Long> roleIds;
 
+    @ApiModelProperty(value = "辅助信息", required = false, position = 8)
+    private SysUserAssist sysUserAssist;
+
 }
diff --git a/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java b/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java
deleted file mode 100644
index ad6d042a0b..0000000000
--- a/backend/src/main/java/io/dataease/ext/ExtSysUserAssistMapper.java
+++ /dev/null
@@ -1,17 +0,0 @@
-package io.dataease.ext;
-
-import io.dataease.plugins.common.base.domain.SysUserAssist;
-import org.apache.ibatis.annotations.Insert;
-import org.apache.ibatis.annotations.Mapper;
-import org.apache.ibatis.annotations.Param;
-import org.apache.ibatis.annotations.Select;
-
-@Mapper
-public interface ExtSysUserAssistMapper {
-
-    @Insert("insert into sys_user_assist values(#{po.userId}, #{po.needFirstNoti})")
-    void save(@Param("po") SysUserAssist po);
-
-    @Select("select * from sys_user_assist where user_id = #{userId}")
-    SysUserAssist query(@Param("userId") Long userId);
-}
diff --git a/backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java b/backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java
index 2833af3d71..ce61fc0395 100644
--- a/backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java
+++ b/backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java
@@ -14,6 +14,7 @@ import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.ServletUtils;
 import io.dataease.job.sechedule.ScheduleManager;
 import io.dataease.job.sechedule.strategy.TaskHandler;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.common.entity.GlobalTaskEntity;
 import io.dataease.plugins.common.entity.GlobalTaskInstance;
 import io.dataease.plugins.config.SpringContextUtil;
@@ -28,6 +29,7 @@ import io.dataease.plugins.xpack.lark.service.LarkXpackService;
 import io.dataease.plugins.xpack.wecom.dto.entity.WecomMsgResult;
 import io.dataease.plugins.xpack.wecom.service.WecomXpackService;
 import io.dataease.service.chart.ViewExportExcel;
+import io.dataease.service.sys.SysUserService;
 import io.dataease.service.system.EmailService;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
@@ -154,6 +156,7 @@ public class EmailTaskHandler extends TaskHandler implements Job {
 
         EmailXpackService emailXpackService = SpringContextUtil.getBean(EmailXpackService.class);
         AuthUserServiceImpl userService = SpringContextUtil.getBean(AuthUserServiceImpl.class);
+        SysUserService sysUserService = SpringContextUtil.getBean(SysUserService.class);
         try {
             XpackEmailTaskRequest taskForm = emailXpackService.taskForm(taskInstance.getTaskId());
             if (ObjectUtils.isEmpty(taskForm) || CronUtils.taskExpire(taskForm.getEndTime())) {
@@ -215,17 +218,24 @@ public class EmailTaskHandler extends TaskHandler implements Job {
             for (int i = 0; i < channels.size(); i++) {
                 String channel = channels.get(i);
                 switch (channel) {
-                    case "email" :
+                    case "email":
                         if (StringUtils.isNotBlank(recipients))
-                        emailService.sendWithImageAndFiles(recipients, emailTemplateDTO.getTitle(), contentStr, bytes, files);
+                            emailService.sendWithImageAndFiles(recipients, emailTemplateDTO.getTitle(), contentStr, bytes, files);
                         break;
-                    case "wecom" :
+                    case "wecom":
                         if (SpringContextUtil.getBean(AuthUserService.class).supportWecom()) {
-
-                            List<String> wecomUsers = reciLists.stream().filter(reci -> {
+                            List<String> wecomUsers = new ArrayList<>();
+                            for (int j = 0; j < reciLists.size(); j++) {
+                                String reci = reciLists.get(j);
                                 SysUserEntity userBySub = userService.getUserBySub(reci, 4);
-                                return ObjectUtils.isNotEmpty(userBySub);
-                            }).collect(Collectors.toList());
+                                if (ObjectUtils.isEmpty(userBySub)) continue;
+                                Long userId = userBySub.getUserId();
+                                SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+                                if (ObjectUtils.isEmpty(sysUserAssist) || StringUtils.isBlank(sysUserAssist.getLarkId()))
+                                    continue;
+                                wecomUsers.add(sysUserAssist.getLarkId());
+                            }
+
                             if (CollectionUtils.isNotEmpty(wecomUsers)) {
                                 WecomXpackService wecomXpackService = SpringContextUtil.getBean(WecomXpackService.class);
                                 WecomMsgResult wecomMsgResult = wecomXpackService.pushOaMsg(wecomUsers, emailTemplateDTO.getTitle(), contentStr, bytes, files);
@@ -236,12 +246,20 @@ public class EmailTaskHandler extends TaskHandler implements Job {
 
                         }
                         break;
-                    case "dingtalk" :
+                    case "dingtalk":
                         if (SpringContextUtil.getBean(AuthUserService.class).supportDingtalk()) {
-                            List<String> dingTalkUsers = reciLists.stream().filter(reci -> {
+                            List<String> dingTalkUsers = new ArrayList<>();
+                            for (int j = 0; j < reciLists.size(); j++) {
+                                String reci = reciLists.get(j);
                                 SysUserEntity userBySub = userService.getUserBySub(reci, 5);
-                                return ObjectUtils.isNotEmpty(userBySub);
-                            }).collect(Collectors.toList());
+                                if (ObjectUtils.isEmpty(userBySub)) continue;
+                                Long userId = userBySub.getUserId();
+                                SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+                                if (ObjectUtils.isEmpty(sysUserAssist) || StringUtils.isBlank(sysUserAssist.getLarkId()))
+                                    continue;
+                                dingTalkUsers.add(sysUserAssist.getLarkId());
+                            }
+
                             if (CollectionUtils.isNotEmpty(dingTalkUsers)) {
                                 DingtalkXpackService dingtalkXpackService = SpringContextUtil.getBean(DingtalkXpackService.class);
                                 DingtalkMsgResult dingtalkMsgResult = dingtalkXpackService.pushOaMsg(dingTalkUsers, emailTemplateDTO.getTitle(), contentStr, bytes, files);
@@ -252,12 +270,20 @@ public class EmailTaskHandler extends TaskHandler implements Job {
 
                         }
                         break;
-                    case "lark" :
+                    case "lark":
                         if (SpringContextUtil.getBean(AuthUserService.class).supportLark()) {
-                            List<String> larkUsers = reciLists.stream().filter(reci -> {
+                            List<String> larkUsers = new ArrayList<>();
+                            for (int j = 0; j < reciLists.size(); j++) {
+                                String reci = reciLists.get(j);
                                 SysUserEntity userBySub = userService.getUserBySub(reci, 6);
-                                return ObjectUtils.isNotEmpty(userBySub);
-                            }).collect(Collectors.toList());
+                                if (ObjectUtils.isEmpty(userBySub)) continue;
+                                Long userId = userBySub.getUserId();
+                                SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+                                if (ObjectUtils.isEmpty(sysUserAssist) || StringUtils.isBlank(sysUserAssist.getLarkId()))
+                                    continue;
+                                larkUsers.add(sysUserAssist.getLarkId());
+                            }
+
                             if (CollectionUtils.isNotEmpty(larkUsers)) {
                                 LarkXpackService larkXpackService = SpringContextUtil.getBean(LarkXpackService.class);
                                 LarkMsgResult larkMsgResult = larkXpackService.pushOaMsg(larkUsers, emailTemplateDTO.getTitle(), contentStr, bytes, files);
diff --git a/backend/src/main/java/io/dataease/service/message/service/strategy/SendDingtalk.java b/backend/src/main/java/io/dataease/service/message/service/strategy/SendDingtalk.java
index 101bfd973a..3f428d71aa 100644
--- a/backend/src/main/java/io/dataease/service/message/service/strategy/SendDingtalk.java
+++ b/backend/src/main/java/io/dataease/service/message/service/strategy/SendDingtalk.java
@@ -1,13 +1,17 @@
 package io.dataease.service.message.service.strategy;
 
-import io.dataease.auth.entity.SysUserEntity;
 import io.dataease.auth.service.AuthUserService;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.dingtalk.service.DingtalkXpackService;
 import io.dataease.service.message.service.SendService;
+import io.dataease.service.sys.SysUserService;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -17,12 +21,14 @@ public class SendDingtalk implements SendService {
     @Autowired
     private AuthUserService authUserService;
 
+    @Resource
+    private SysUserService sysUserService;
+
     @Override
     public void sendMsg(Long userId, Long typeId, String content, String param) {
-        SysUserEntity userEntity = authUserService.getUserById(userId);
-
-        if (userEntity.getFrom() == 5 && authUserService.supportDingtalk()) {
-            String username = userEntity.getUsername();
+        SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && StringUtils.isNotBlank(sysUserAssist.getDingtalkId()) && authUserService.supportDingtalk()) {
+            String username = sysUserAssist.getDingtalkId();
             DingtalkXpackService dingtalkXpackService = SpringContextUtil.getBean(DingtalkXpackService.class);
             List<String> userIds = new ArrayList<>();
             userIds.add(username);
diff --git a/backend/src/main/java/io/dataease/service/message/service/strategy/SendLark.java b/backend/src/main/java/io/dataease/service/message/service/strategy/SendLark.java
index 7793d4c7db..1c400ec3c9 100644
--- a/backend/src/main/java/io/dataease/service/message/service/strategy/SendLark.java
+++ b/backend/src/main/java/io/dataease/service/message/service/strategy/SendLark.java
@@ -1,13 +1,17 @@
 package io.dataease.service.message.service.strategy;
 
-import io.dataease.auth.entity.SysUserEntity;
 import io.dataease.auth.service.AuthUserService;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.lark.service.LarkXpackService;
 import io.dataease.service.message.service.SendService;
+import io.dataease.service.sys.SysUserService;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -17,12 +21,14 @@ public class SendLark implements SendService {
     @Autowired
     private AuthUserService authUserService;
 
+    @Resource
+    private SysUserService sysUserService;
+
     @Override
     public void sendMsg(Long userId, Long typeId, String content, String param) {
-        SysUserEntity userEntity = authUserService.getUserById(userId);
-
-        if (userEntity.getFrom() == 6 && authUserService.supportLark()) {
-            String username = userEntity.getUsername();
+        SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && StringUtils.isNotBlank(sysUserAssist.getLarkId()) && authUserService.supportLark()) {
+            String username = sysUserAssist.getLarkId();
             LarkXpackService larkXpackService = SpringContextUtil.getBean(LarkXpackService.class);
             List<String> userIds = new ArrayList<>();
             userIds.add(username);
diff --git a/backend/src/main/java/io/dataease/service/message/service/strategy/SendWecom.java b/backend/src/main/java/io/dataease/service/message/service/strategy/SendWecom.java
index de5481b561..4ccdf141e0 100644
--- a/backend/src/main/java/io/dataease/service/message/service/strategy/SendWecom.java
+++ b/backend/src/main/java/io/dataease/service/message/service/strategy/SendWecom.java
@@ -1,13 +1,17 @@
 package io.dataease.service.message.service.strategy;
 
-import io.dataease.auth.entity.SysUserEntity;
 import io.dataease.auth.service.AuthUserService;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.wecom.service.WecomXpackService;
 import io.dataease.service.message.service.SendService;
+import io.dataease.service.sys.SysUserService;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
+import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -16,12 +20,16 @@ public class SendWecom implements SendService {
 
     @Autowired
     private AuthUserService authUserService;
+
+    @Resource
+    private SysUserService sysUserService;
+
     @Override
     public void sendMsg(Long userId, Long typeId, String content, String param) {
-        SysUserEntity userEntity = authUserService.getUserById(userId);
+        SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && StringUtils.isNotBlank(sysUserAssist.getWecomId()) && authUserService.supportWecom()) {
 
-        if (userEntity.getFrom() == 4 && authUserService.supportWecom()) {
-            String username = userEntity.getUsername();
+            String username = sysUserAssist.getWecomId();
             WecomXpackService wecomXpackService = SpringContextUtil.getBean(WecomXpackService.class);
             List<String> userIds = new ArrayList<>();
             userIds.add(username);
diff --git a/backend/src/main/java/io/dataease/service/sys/SysUserService.java b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
index f9189d80f0..ab70cae6a5 100644
--- a/backend/src/main/java/io/dataease/service/sys/SysUserService.java
+++ b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
@@ -5,7 +5,6 @@ import io.dataease.auth.service.AuthUserService;
 import io.dataease.auth.service.ExtAuthService;
 import io.dataease.commons.exception.DEException;
 import io.dataease.controller.sys.request.*;
-import io.dataease.ext.ExtSysUserAssistMapper;
 import io.dataease.ext.ExtSysUserMapper;
 import io.dataease.ext.query.GridExample;
 import io.dataease.commons.constants.AuthConstants;
@@ -16,6 +15,7 @@ import io.dataease.controller.sys.response.SysUserGridResponse;
 import io.dataease.controller.sys.response.SysUserRole;
 import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.*;
+import io.dataease.plugins.common.base.mapper.SysUserAssistMapper;
 import io.dataease.plugins.common.base.mapper.SysUserMapper;
 import io.dataease.plugins.common.base.mapper.SysUsersRolesMapper;
 import io.dataease.plugins.common.entity.XpackLdapUserEntity;
@@ -36,6 +36,7 @@ import javax.annotation.Resource;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
+import java.util.Optional;
 import java.util.stream.Collectors;
 
 @Service
@@ -57,8 +58,9 @@ public class SysUserService {
     @Resource
     private ExtAuthService extAuthService;
 
+
     @Resource
-    private ExtSysUserAssistMapper extSysUserAssistMapper;
+    private SysUserAssistMapper sysUserAssistMapper;
 
     @Resource
     private AuthUserService authUserService;
@@ -99,8 +101,15 @@ public class SysUserService {
         }
         int insert = sysUserMapper.insert(user);
         SysUser dbUser = findOne(user);
-        request.setUserId(dbUser.getUserId());
-        saveUserRoles(dbUser.getUserId(), request.getRoleIds());//插入用户角色关联
+        Long userId = dbUser.getUserId();
+        request.setUserId(userId);
+        saveUserRoles(userId, request.getRoleIds());//插入用户角色关联
+
+        SysUserAssist sysUserAssist = request.getSysUserAssist();
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && (StringUtils.isNotBlank(sysUserAssist.getWecomId()) || StringUtils.isNotBlank(sysUserAssist.getDingtalkId()) || StringUtils.isNotBlank(sysUserAssist.getLarkId()))) {
+            saveAssist(userId, sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+        }
+
         return insert;
     }
 
@@ -125,12 +134,12 @@ public class SysUserService {
             // oidc默认角色是普通员工
             List<Long> roleIds = new ArrayList<Long>();
             roleIds.add(2L);
-            saveUserRoles( dbUser.getUserId(), roleIds);
+            saveUserRoles(dbUser.getUserId(), roleIds);
         }
     }
 
     @Transactional
-    public void saveWecomCUser(Map<String, Object> userMap , String userId, String email) {
+    public void saveWecomCUser(Map<String, Object> userMap, String userId, String email) {
         long now = System.currentTimeMillis();
         SysUser sysUser = new SysUser();
 
@@ -148,6 +157,7 @@ public class SysUserService {
         sysUser.setIsAdmin(false);
         sysUser.setSub(userId);
         sysUserMapper.insert(sysUser);
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), u.getUsername(), null, null));
 
     }
 
@@ -170,7 +180,7 @@ public class SysUserService {
         sysUser.setSub(dingUserEntity.getUnionid());
         sysUser.setPhone(dingUserEntity.getMobile());
         sysUserMapper.insert(sysUser);
-
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), null, u.getUsername(), null));
     }
 
     @Transactional
@@ -192,7 +202,7 @@ public class SysUserService {
         sysUser.setSub(larkUserInfo.getSub());
         sysUser.setPhone(larkUserInfo.getMobile());
         sysUserMapper.insert(sysUser);
-
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), null, null, u.getUsername()));
     }
 
     @Transactional
@@ -215,7 +225,7 @@ public class SysUserService {
             // oidc默认角色是普通员工
             List<Long> roleIds = new ArrayList<Long>();
             roleIds.add(2L);
-            saveUserRoles( dbUser.getUserId(), roleIds);
+            saveUserRoles(dbUser.getUserId(), roleIds);
         }
     }
 
@@ -247,7 +257,7 @@ public class SysUserService {
             sysUserMapper.insert(sysUser);
             SysUser dbUser = findOne(sysUser);
             if (null != dbUser && null != dbUser.getUserId()) {
-                saveUserRoles( dbUser.getUserId(), request.getRoleIds());
+                saveUserRoles(dbUser.getUserId(), request.getRoleIds());
             }
         });
     }
@@ -285,7 +295,13 @@ public class SysUserService {
         saveUserRoles(user.getUserId(), request.getRoleIds());//再插入角色关联
         if (ObjectUtils.isEmpty(user.getDeptId())) user.setDeptId(0L);
         authUserService.clearCache(user.getUserId());
-        return sysUserMapper.updateByPrimaryKeySelective(user);
+        int result = sysUserMapper.updateByPrimaryKeySelective(user);
+
+        SysUserAssist sysUserAssist = request.getSysUserAssist();
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && (StringUtils.isNotBlank(sysUserAssist.getWecomId()) || StringUtils.isNotBlank(sysUserAssist.getDingtalkId()) || StringUtils.isNotBlank(sysUserAssist.getLarkId()))) {
+            saveAssist(user.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+        }
+        return result;
     }
 
     /**
@@ -308,6 +324,7 @@ public class SysUserService {
      * 更新用户基本信息
      * 只允许修改 email, nickname, phone
      * 防止此接口被恶意利用更改不允许更改的信息，新建SysUser对象并只设置部分值
+     *
      * @param request
      * @return
      */
@@ -426,33 +443,34 @@ public class SysUserService {
         SysUserExample example = new SysUserExample();
         example.createCriteria().andUsernameEqualTo(userName);
         List<SysUser> users = sysUserMapper.selectByExample(example);
-        if(CollectionUtils.isNotEmpty(users)) {
-            throw new RuntimeException("用户ID【"+userName+"】已存在,请联系管理员");
+        if (CollectionUtils.isNotEmpty(users)) {
+            throw new RuntimeException("用户ID【" + userName + "】已存在,请联系管理员");
         }
     }
+
     public void validateExistUser(String userName, String nickName, String email) {
         SysUserExample example = new SysUserExample();
         if (StringUtils.isNotBlank(userName)) {
             example.createCriteria().andUsernameEqualTo(userName);
             List<SysUser> users = sysUserMapper.selectByExample(example);
-            if(CollectionUtils.isNotEmpty(users)) {
-                throw new RuntimeException("用户ID【"+userName+"】已存在,请联系管理员");
+            if (CollectionUtils.isNotEmpty(users)) {
+                throw new RuntimeException("用户ID【" + userName + "】已存在,请联系管理员");
             }
         }
 
         if (StringUtils.isNotBlank(nickName)) {
             example.createCriteria().andNickNameEqualTo(nickName);
             List<SysUser> users = sysUserMapper.selectByExample(example);
-            if(CollectionUtils.isNotEmpty(users)) {
-                throw new RuntimeException("用户姓名【"+nickName+"】已存在,请联系管理员");
+            if (CollectionUtils.isNotEmpty(users)) {
+                throw new RuntimeException("用户姓名【" + nickName + "】已存在,请联系管理员");
             }
         }
         example.clear();
         if (StringUtils.isNotBlank(email)) {
             example.createCriteria().andEmailEqualTo(email);
             List<SysUser> users = sysUserMapper.selectByExample(example);
-            if(CollectionUtils.isNotEmpty(users)) {
-                throw new RuntimeException("用户邮箱【"+email+"】已存在,请联系管理员");
+            if (CollectionUtils.isNotEmpty(users)) {
+                throw new RuntimeException("用户邮箱【" + email + "】已存在,请联系管理员");
             }
         }
     }
@@ -510,16 +528,43 @@ public class SysUserService {
     }
 
     public boolean needPwdNoti(Long userId) {
-        SysUserAssist userAssist = extSysUserAssistMapper.query(userId);
+        SysUserAssist userAssist = sysUserAssistMapper.selectByPrimaryKey(userId);
         return ObjectUtils.isEmpty(userAssist) || userAssist.getNeedFirstNoti();
     }
 
     public void saveUserAssist(Boolean noti) {
         Long userId = AuthUtils.getUser().getUserId();
+        SysUserAssist existAssist = sysUserAssistMapper.selectByPrimaryKey(userId);
+        if (ObjectUtils.isNotEmpty(existAssist)) {
+            existAssist.setNeedFirstNoti(noti);
+            sysUserAssistMapper.updateByPrimaryKey(existAssist);
+            return;
+        }
         SysUserAssist sysUserAssist = new SysUserAssist();
         sysUserAssist.setUserId(userId);
         sysUserAssist.setNeedFirstNoti(noti);
-        extSysUserAssistMapper.save(sysUserAssist);
+        sysUserAssistMapper.insertSelective(sysUserAssist);
+    }
+
+    public void saveAssist(Long userId, String wecomId, String dingtlkId, String larkId) {
+        SysUserAssist existAssist = sysUserAssistMapper.selectByPrimaryKey(userId);
+        if (ObjectUtils.isNotEmpty(existAssist)) {
+            existAssist.setWecomId(wecomId);
+            existAssist.setDingtalkId(dingtlkId);
+            existAssist.setLarkId(larkId);
+            sysUserAssistMapper.updateByPrimaryKey(existAssist);
+            return;
+        }
+        SysUserAssist sysUserAssist = new SysUserAssist();
+        sysUserAssist.setUserId(userId);
+        sysUserAssist.setWecomId(wecomId);
+        sysUserAssist.setDingtalkId(dingtlkId);
+        sysUserAssist.setLarkId(larkId);
+        sysUserAssistMapper.insert(sysUserAssist);
+    }
+
+    public SysUserAssist assistInfo(Long userId) {
+        return sysUserAssistMapper.selectByPrimaryKey(userId);
     }
 
 }
diff --git a/backend/src/main/resources/db/migration/V40__1.15.sql b/backend/src/main/resources/db/migration/V40__1.15.sql
index 0dbc5b1707..b4b31501c6 100644
--- a/backend/src/main/resources/db/migration/V40__1.15.sql
+++ b/backend/src/main/resources/db/migration/V40__1.15.sql
@@ -116,3 +116,8 @@ INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_typ
 INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_type`, `privilege_value`, `privilege_extend`, `remark`, `create_user`, `create_time`, `update_time`, `copy_from`, `copy_id`) VALUES ('98d77463-38bb-11ed-8383-0242ac130005', 'f4e07708-26f1-4f42-9a4a-8e6dae63353c', 'i18n_auth_grant', 15, 0, 'grant', '基础权限-授权', 'admin', 1663661389000, NULL, NULL, NULL);
 INSERT INTO `sys_auth_detail` (`id`, `auth_id`, `privilege_name`, `privilege_type`, `privilege_value`, `privilege_extend`, `remark`, `create_user`, `create_time`, `update_time`, `copy_from`, `copy_id`) VALUES ('98d77856-38bb-11ed-8383-0242ac130005', 'f4e07708-26f1-4f42-9a4a-8e6dae63353c', 'i18n_auth_use', 1, 1, 'use', '基础权限-使用', 'admin', 1663661389000, NULL, NULL, NULL);
 
+ALTER TABLE `sys_user_assist`
+    ADD COLUMN `wecom_id` varchar(255) NULL COMMENT '企业微信账号' AFTER `need_first_noti`,
+    ADD COLUMN `dingtalk_id` varchar(255) NULL COMMENT '钉钉账号' AFTER `wecom_id`,
+    ADD COLUMN `lark_id` varchar(255) NULL COMMENT '飞书账号' AFTER `dingtalk_id`;
+
diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index 8588a7fac0..647cb4445b 100644
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@@ -148,4 +148,11 @@ export function updateDriver(data) {
   })
 }
 
-export default { dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }
+export function getDatasourceDetail(id) {
+  return request({
+    url: `/datasource/get/${id}`,
+    loading: true,
+    method: 'post',
+  })
+}
+export default { getDatasourceDetail, dsGrid, addDs, editDs, delDs, validateDs, listDatasource, getSchema }
diff --git a/frontend/src/api/system/user.js b/frontend/src/api/system/user.js
index 4e4ee78512..cdfc543a6d 100644
--- a/frontend/src/api/system/user.js
+++ b/frontend/src/api/system/user.js
@@ -10,7 +10,8 @@ const pathMap = {
   updatePath: '/api/user/update',
   editPasswordPath: '/api/user/adminUpdatePwd',
   editStatusPath: '/api/user/updateStatus',
-  unlockPath: '/api/user/unlock/'
+  unlockPath: '/api/user/unlock/',
+  queryAssistPath: '/api/user/assistInfo/'
 }
 export function userLists(page, size, data) {
   return request({
@@ -142,4 +143,12 @@ export function unLock(username) {
   })
 }
 
-export default { editPassword, delUser, editUser, addUser, userLists, editStatus, personInfo, updatePerson, updatePersonPwd, allRoles, roleGrid, ldapUsers, saveLdapUser, existLdapUsers, unLock }
+export function queryAssist(userId) {
+  return request({
+    url: pathMap.queryAssistPath + userId,
+    method: 'post',
+    loading: false
+  })
+}
+
+export default { editPassword, delUser, editUser, addUser, userLists, editStatus, personInfo, updatePerson, updatePersonPwd, allRoles, roleGrid, ldapUsers, saveLdapUser, existLdapUsers, unLock, queryAssist }
diff --git a/frontend/src/icons/svg/data-reference.svg b/frontend/src/icons/svg/data-reference.svg
new file mode 100644
index 0000000000..b294b7c599
--- /dev/null
+++ b/frontend/src/icons/svg/data-reference.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2.00033C11.5933 2.00033 5.23004 2.00033 3.99954 2.00033C3.26316 2.00033 2.66666 2.59728 2.66666 3.33366V10.0003H10.6667V1.00033H12V11.0003C12 11.1844 11.8508 11.3337 11.6667 11.3337H3.99999C3.26362 11.3337 2.66666 11.9306 2.66666 12.667C2.66666 13.4034 3.26164 14.0003 3.99802 14.0003C6.32365 14.0003 12.2815 14.0003 13 14.0003C13.1841 14.0003 13.3333 13.8511 13.3333 13.667V5.33366H14.6667V14.667C14.6667 15.0352 14.3682 15.3337 14 15.3337H3.99999C2.52724 15.3337 1.33333 14.1437 1.33333 12.6709C1.33333 10.0477 1.33333 6.0493 1.33333 3.33243C1.33333 1.85967 2.52688 0.666992 3.99964 0.666992C5.02765 0.666992 9.06402 0.666992 11.0023 0.666992C11.5546 0.666992 12 1.11471 12 1.66699V2.00033Z" />
+<path d="M4.33333 12.0003C4.14923 12.0003 3.99999 12.1496 3.99999 12.3337V13.0003C3.99999 13.1844 4.14923 13.3337 4.33333 13.3337H11.6667C11.8508 13.3337 12 13.1844 12 13.0003V12.3337C12 12.1496 11.8508 12.0003 11.6667 12.0003H4.33333Z"/>
+</svg>
diff --git a/frontend/src/icons/svg/reference-field.svg b/frontend/src/icons/svg/reference-field.svg
new file mode 100644
index 0000000000..b311d14227
--- /dev/null
+++ b/frontend/src/icons/svg/reference-field.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66668 4.66634H11C11.1841 4.66634 11.3333 4.81558 11.3333 4.99967V5.66634C11.3333 5.85044 11.1841 5.99967 11 5.99967H8.66668V10.9997C8.66668 11.1838 8.51744 11.333 8.33334 11.333H7.66668C7.48258 11.333 7.33334 11.1838 7.33334 10.9997V5.99967H5.00001C4.81592 5.99967 4.66668 5.85044 4.66668 5.66634V4.99967C4.66668 4.81558 4.81592 4.66634 5.00001 4.66634H7.33334C7.33334 4.66634 8.66668 4.68523 8.66668 4.66634Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.33334 1.99967C1.33334 1.63148 1.63182 1.33301 2.00001 1.33301H14C14.3682 1.33301 14.6667 1.63148 14.6667 1.99967V13.9997C14.6667 14.3679 14.3682 14.6663 14 14.6663H2.00001C1.63182 14.6663 1.33334 14.3679 1.33334 13.9997V1.99967ZM2.66668 13.333V2.66634H13.3333V13.333H2.66668Z" fill="#646A73"/>
+</svg>
diff --git a/frontend/src/icons/svg/reference-play.svg b/frontend/src/icons/svg/reference-play.svg
new file mode 100644
index 0000000000..5a706247bd
--- /dev/null
+++ b/frontend/src/icons/svg/reference-play.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4476_153334)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99984 1.66699C11.4976 1.66699 14.3332 4.50261 14.3332 8.00033C14.3332 11.498 11.4976 14.3337 7.99984 14.3337C4.50212 14.3337 1.6665 11.498 1.6665 8.00033C1.6665 4.50261 4.50212 1.66699 7.99984 1.66699ZM7.99984 0.666992C12.0498 0.666992 15.3332 3.95033 15.3332 8.00033C15.3332 12.0503 12.0498 15.3337 7.99984 15.3337C3.94984 15.3337 0.666504 12.0503 0.666504 8.00033C0.666504 3.95033 3.94984 0.666992 7.99984 0.666992ZM6.85744 11.4096L11.4714 8.50657C11.5568 8.45249 11.6271 8.37772 11.6758 8.2892C11.7245 8.20069 11.75 8.1013 11.75 8.00027C11.75 7.89924 11.7245 7.79985 11.6758 7.71133C11.6271 7.62282 11.5568 7.54804 11.4714 7.49397L6.85764 4.59117C6.76324 4.53177 6.65444 4.50037 6.54324 4.50037C6.46511 4.50063 6.38779 4.51628 6.3157 4.54642C6.24361 4.57657 6.17816 4.62061 6.1231 4.67605C6.06803 4.73149 6.02443 4.79723 5.99477 4.86952C5.96511 4.94181 5.94998 5.01923 5.95024 5.09737V10.9036C5.95031 11.0152 5.98155 11.1247 6.04044 11.2196C6.0814 11.2859 6.13508 11.3435 6.1984 11.389C6.26172 11.4345 6.33342 11.4671 6.40937 11.4847C6.48532 11.5024 6.56402 11.5048 6.64092 11.4919C6.71782 11.479 6.79141 11.451 6.85744 11.4096Z"/>
+</g>
+<defs>
+<clipPath id="clip0_4476_153334">
+<rect width="16" height="16"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/icons/svg/reference-setting.svg b/frontend/src/icons/svg/reference-setting.svg
new file mode 100644
index 0000000000..74107b66d3
--- /dev/null
+++ b/frontend/src/icons/svg/reference-setting.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11.333H14.2393C14.3879 11.333 14.4418 11.3485 14.4961 11.3775C14.5505 11.4066 14.5931 11.4492 14.6221 11.5035C14.6512 11.5579 14.6667 11.6117 14.6667 11.7603V12.239C14.6667 12.3876 14.6512 12.4415 14.6221 12.4958C14.5931 12.5501 14.5505 12.5928 14.4961 12.6218C14.4418 12.6509 14.3879 12.6663 14.2393 12.6663H11V14.239C11 14.3876 10.9845 14.4415 10.9555 14.4958C10.9264 14.5501 10.8838 14.5928 10.8295 14.6218C10.7751 14.6509 10.7213 14.6663 10.5727 14.6663H10.094C9.94539 14.6663 9.89151 14.6509 9.83719 14.6218C9.78287 14.5928 9.74024 14.5501 9.71118 14.4958C9.68213 14.4415 9.66666 14.3876 9.66666 14.239V12.6663H1.76064C1.61206 12.6663 1.55817 12.6509 1.50385 12.6218C1.44953 12.5928 1.4069 12.5501 1.37785 12.4958C1.3488 12.4415 1.33333 12.3876 1.33333 12.239V11.7603C1.33333 11.6117 1.3488 11.5579 1.37785 11.5035C1.4069 11.4492 1.44953 11.4066 1.50385 11.3775C1.55817 11.3485 1.61206 11.333 1.76064 11.333H9.66666V9.76032C9.66666 9.61174 9.68213 9.55785 9.71118 9.50353C9.74024 9.44921 9.78287 9.40658 9.83719 9.37753C9.89151 9.34848 9.94539 9.33301 10.094 9.33301H10.5727C10.7213 9.33301 10.7751 9.34848 10.8295 9.37753C10.8838 9.40658 10.9264 9.44921 10.9555 9.50353C10.9845 9.55785 11 9.61174 11 9.76032V11.333ZM4.99999 3.33301V1.76032C4.99999 1.61174 5.01547 1.55785 5.04452 1.50353C5.07357 1.44921 5.1162 1.40658 5.17052 1.37753C5.22484 1.34848 5.27872 1.33301 5.42731 1.33301H5.90601C6.0546 1.33301 6.10848 1.34848 6.1628 1.37753C6.21712 1.40658 6.25976 1.44921 6.28881 1.50353C6.31786 1.55785 6.33333 1.61174 6.33333 1.76032V3.33301H14.2393C14.3879 3.33301 14.4418 3.34848 14.4961 3.37753C14.5505 3.40658 14.5931 3.44921 14.6221 3.50353C14.6512 3.55785 14.6667 3.61174 14.6667 3.76032V4.23903C14.6667 4.38761 14.6512 4.44149 14.6221 4.49582C14.5931 4.55014 14.5505 4.59277 14.4961 4.62182C14.4418 4.65087 14.3879 4.66634 14.2393 4.66634H6.33333V6.23903C6.33333 6.38761 6.31786 6.44149 6.28881 6.49582C6.25976 6.55014 6.21712 6.59277 6.1628 6.62182C6.10848 6.65087 6.0546 6.66634 5.90601 6.66634H5.42731C5.27872 6.66634 5.22484 6.65087 5.17052 6.62182C5.1162 6.59277 5.07357 6.55014 5.04452 6.49582C5.01547 6.44149 4.99999 6.38761 4.99999 6.23903V4.66634H1.76064C1.61206 4.66634 1.55817 4.65087 1.50385 4.62182C1.44953 4.59277 1.4069 4.55014 1.37785 4.49582C1.3488 4.44149 1.33333 4.38761 1.33333 4.23903V3.76032C1.33333 3.61174 1.3488 3.55785 1.37785 3.50353C1.4069 3.44921 1.44953 3.40658 1.50385 3.37753C1.55817 3.34848 1.61206 3.33301 1.76064 3.33301H4.99999Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/icons/svg/reference-table.svg b/frontend/src/icons/svg/reference-table.svg
new file mode 100644
index 0000000000..96a9732884
--- /dev/null
+++ b/frontend/src/icons/svg/reference-table.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.15156 1.33301C2.1474 1.33301 1.33337 2.14703 1.33337 3.15119V12.8482C1.33337 13.8523 2.1474 14.6663 3.15155 14.6663H12.8485C13.8527 14.6663 14.6667 13.8523 14.6667 12.8482V3.15119C14.6667 2.14704 13.8527 1.33301 12.8485 1.33301H3.15156ZM13.3334 2.66634H2.66671V5.33301H5.33337H6.66671H9.33337H10.6667H13.3334V2.66634ZM2.66671 9.33301V6.66634H5.33337V9.33301H2.66671ZM2.66671 10.6663V13.333L5.33337 13.333V10.6663H2.66671ZM6.66671 10.6663V13.333H9.33337V10.6663H6.66671ZM10.6667 10.6663V13.333L13.3334 13.333V10.6663H10.6667ZM13.3334 9.33301V6.66634H10.6667V9.33301H13.3334ZM9.33337 9.33301H6.66671V6.66634H9.33337V9.33301Z"/>
+</svg>
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 15b7c31d3c..ea90af461c 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -132,11 +132,10 @@ export default {
   },
   commons: {
 
-
     unlock: 'Unlock',
     unlock_success: 'Unlock success',
 
-    uninstall:'Uninstall',
+    uninstall: 'Uninstall',
 
     no_result: 'No Result',
     manage_member: 'Managing members',
@@ -525,7 +524,10 @@ export default {
     convert_to_dimension: 'Convert to Dimension',
     left_to_edit: 'Select the data table on the left to edit',
     cannot_be_duplicate: 'The dataset name cannot be duplicate',
-    set_saved_successfully: 'Data set saved successfully'
+    set_saved_successfully: 'Data set saved successfully',
+    to_start_using: 'Browse the contents of your database, tables and columns. Choose a database to get started.',
+    to_run_query: 'Click to run query',
+    the_running_results: 'You can view the running results'
   },
   detabs: {
     eidttitle: 'Edit Title',
@@ -671,7 +673,13 @@ export default {
     filter: 'Screen',
     list: 'List item',
     list_info: 'Please select the information to be displayed in the list',
-    sure_delete: 'Are you sure to delete this user?'
+    sure_delete: 'Are you sure to delete this user?',
+    wecom_id: 'Wecom Account',
+    dingtalk_id: 'Dingtalk Account',
+    lark_id: 'Lark Account',
+    input_wecom_id: 'Please input wecom account',
+    input_dingtalk_id: 'Please input dingtalk account',
+    input_lark_id: 'Please input lark account'
   },
   ldap: {
     url: 'LDAP url',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index ed7a4863db..cb6c2df8eb 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -132,11 +132,10 @@ export default {
   },
   commons: {
 
-
     unlock: '解鎖',
     unlock_success: '解鎖成功',
 
-    uninstall:'卸载',
+    uninstall: '卸载',
 
     no_result: '没有找到相关内容',
     manage_member: '管理成員',
@@ -525,7 +524,10 @@ export default {
     convert_to_dimension: '轉換為維度',
     left_to_edit: '選中左側的資料表可進行編輯',
     cannot_be_duplicate: '數据集名稱不允許重複',
-    set_saved_successfully: '數据集保存成功'
+    set_saved_successfully: '數据集保存成功',
+    to_start_using: '瀏覽您的數据庫，表和列的內容。 選擇一個數据庫即可開始使用。',
+    to_run_query: '點擊運行査詢',
+    the_running_results: '即可查看運行結果'
   },
   detabs: {
     eidttitle: '編輯標題',
@@ -671,7 +673,13 @@ export default {
     filter: '篩選',
     list: '列表項',
     list_info: '請選擇列表中要展示的信息',
-    sure_delete: '確定刪除該用戶嗎？'
+    sure_delete: '確定刪除該用戶嗎？',
+    wecom_id: '企業微信賬號',
+    dingtalk_id: '釘釘賬號',
+    lark_id: '飛書賬號',
+    input_wecom_id: '請輸入企業微信賬號',
+    input_dingtalk_id: '請輸入釘釘賬號',
+    input_lark_id: '請輸入飛書賬號'
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 2179467cf2..511dba8785 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -134,7 +134,7 @@ export default {
 
     unlock: '解锁',
     unlock_success: '解锁成功',
-    uninstall:'卸载',
+    uninstall: '卸载',
 
     no_result: '没有找到相关内容',
     manage_member: '管理成员',
@@ -523,7 +523,10 @@ export default {
     convert_to_dimension: '转换为维度',
     left_to_edit: '选中左侧的数据表可进行编辑',
     cannot_be_duplicate: '数据集名称不允许重复',
-    set_saved_successfully: '数据集保存成功'
+    set_saved_successfully: '数据集保存成功',
+    to_start_using: '浏览您的数据库，表和列的内容。 选择一个数据库即可开始使用。',
+    to_run_query: '点击运行查询',
+    the_running_results: '即可查看运行结果'
   },
   detabs: {
     eidttitle: '编辑标题',
@@ -669,7 +672,13 @@ export default {
     filter: '筛选',
     list: '列表项',
     list_info: '请选择列表中要展示的信息',
-    sure_delete: '确定删除该用户吗？'
+    sure_delete: '确定删除该用户吗？',
+    wecom_id: '企业微信账号',
+    dingtalk_id: '钉钉账号',
+    lark_id: '飞书账号',
+    input_wecom_id: '请输入企业微信账号',
+    input_dingtalk_id: '请输入钉钉账号',
+    input_lark_id: '请输入飞书账号'
   },
   ldap: {
     url: 'LDAP地址',
diff --git a/frontend/src/views/dataset/add/AddApi.vue b/frontend/src/views/dataset/add/AddApi.vue
index 9c3c4e9ba9..8160b47e20 100644
--- a/frontend/src/views/dataset/add/AddApi.vue
+++ b/frontend/src/views/dataset/add/AddApi.vue
@@ -32,7 +32,6 @@
         clearable
       />
       <div class="table-checkbox-list">
-        <!-- <div class="item" v-for="(ele, index) in tableData"> -->
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             v-for="t in tableData"
@@ -57,7 +56,6 @@
             </div>
           </el-tooltip>
         </el-checkbox-group>
-        <!-- </div> -->
       </div>
     </div>
     <div class="table-detail">
@@ -379,6 +377,7 @@ export default {
   display: flex;
   height: 100%;
   position: relative;
+  width: 100%;
 
   .arrow-right {
     position: absolute;
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index e89180b5dd..06d5c82607 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -33,7 +33,6 @@
         clearable
       />
       <div class="table-checkbox-list">
-        <!-- <div class="item" v-for="(ele, index) in tableData"> -->
         <el-checkbox-group v-model="checkTableList" size="small">
           <el-tooltip
             :disabled="t.enableCheck"
@@ -59,7 +58,6 @@
             </div>
           </el-tooltip>
         </el-checkbox-group>
-        <!-- </div> -->
       </div>
     </div>
     <div class="table-detail">
@@ -282,14 +280,6 @@ export default {
   },
   methods: {
     nameExsitValidator(activeIndex) {
-      if (
-        !this.nameList ||
-        this.nameList.length === 0 ||
-        !this.checkDatasetName.includes(this.tableData[activeIndex].datasetName)
-      ) {
-        this.tableData[activeIndex].nameExsit = false
-        return
-      }
       this.tableData[activeIndex].nameExsit =
         this.nameList
           .concat(this.checkDatasetName)
@@ -300,6 +290,8 @@ export default {
       this.tableData.forEach((ele, index) => {
         if (this.checkDatasetName.includes(ele.datasetName)) {
           this.nameExsitValidator(index)
+        } else {
+          ele.nameExsit = false;
         }
       })
     },
@@ -402,6 +394,8 @@ export default {
   display: flex;
   height: 100%;
   position: relative;
+  width: 100%;
+
 
   .arrow-right {
     position: absolute;
diff --git a/frontend/src/views/dataset/add/AddExcel.vue b/frontend/src/views/dataset/add/AddExcel.vue
index 0326710de0..7e29c5f224 100644
--- a/frontend/src/views/dataset/add/AddExcel.vue
+++ b/frontend/src/views/dataset/add/AddExcel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dataset-excel">
-    <p v-if="!showLeft" class="arrow-right" @click="showLeft = true">
-      <i class="el-icon-d-arrow-right" />
+    <p v-if="!showLeft" @click="showLeft = true" class="arrow-right">
+      <i class="el-icon-d-arrow-right"></i>
     </p>
     <div v-else class="table-list">
       <p class="select-ds">
@@ -50,7 +50,14 @@
           highlight-current
           @node-click="handleNodeClick"
           @check-change="handleCheckChange"
-        />
+        >
+          <span class="custom-tree-node" slot-scope="{ data }">
+            {{ data.excelLable }}
+            <span class="error-name-exsit" v-if="data.nameExsit">
+              <svg-icon icon-class="exclamationmark" class="ds-icon-scene" />
+            </span>
+          </span>
+        </el-tree>
       </div>
     </div>
     <div class="table-detail">
@@ -68,7 +75,15 @@
             v-model="sheetObj.datasetName"
             :placeholder="$t('commons.name')"
             @change="changeDatasetName"
+            size="small"
           />
+          <div
+            v-if="sheetObj.nameExsit"
+            style="left: 107px; top: 52px"
+            class="el-form-item__error"
+          >
+            {{ $t('deDataset.already_exists') }}
+          </div>
         </div>
         <div class="data">
           <div class="result-num">
@@ -174,11 +189,13 @@ import { getToken } from '@/utils/auth'
 import i18n from '@/lang'
 import { $alert, $confirm } from '@/utils/message'
 import store from '@/store'
+import msgCfm from '@/components/msgCfm/index'
 
 const token = getToken()
 
 export default {
   name: 'AddExcel',
+  mixins: [msgCfm],
   props: {
     param: {
       type: Object,
@@ -191,6 +208,10 @@ export default {
     editType: {
       type: Number,
       default: 0
+    },
+    nameList: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -230,15 +251,6 @@ export default {
       defaultCheckedKeys: []
     }
   },
-  watch: {
-    defaultCheckedKeys(val) {
-      const excelNum = this.excelData.map((ele) => ele.id)
-      this.$emit(
-        'setTableNum',
-        val.filter((ele) => !excelNum.includes(ele)).length
-      )
-    }
-  },
   mounted() {
     window.onresize = () => {
       this.calHeight()
@@ -266,7 +278,33 @@ export default {
         })
         this.defaultCheckedKeys.splice(index, 1)
       }
-      this.$emit('setTableNum', this.defaultCheckedKeys.length)
+      this.validateName()
+      const labelList = this.$refs.tree.getCheckedNodes().map(ele => ele.excelLable)
+      const excelList = this.excelData.map(ele => ele.excelLable);
+      this.$emit('setTableNum', labelList.filter(ele => !excelList.includes(ele)).length)
+    },
+    nameExsitValidator(ele, checkList) {
+      this.$set(
+        ele,
+        'nameExsit',
+        this.nameList
+          .concat(checkList)
+          .filter((name) => name === ele.datasetName).length > 1
+      )
+    },
+    validateName() {
+      const checkList = this.$refs.tree
+        .getCheckedNodes()
+        .map((ele) => ele.datasetName)
+      this.excelData
+        .reduce((pre, next) => pre.concat(next.sheets), [])
+        .forEach((ele, index) => {
+          if (checkList.includes(ele.datasetName)) {
+            this.nameExsitValidator(ele, checkList)
+          } else {
+            this.$set(ele, 'nameExsit', false)
+          }
+        })
     },
     handleNodeClick(data) {
       if (data.sheet) {
@@ -291,6 +329,7 @@ export default {
           }
         }
       }
+      this.validateName()
     },
     calHeight() {
       const that = this
@@ -358,24 +397,20 @@ export default {
       var effectExtField = false
       var changeFiled = false
       var selectNode = this.$refs.tree.getCheckedNodes()
+      if (selectNode.some((ele) => ele.nameExsit)) {
+        this.openMessageSuccess('deDataset.cannot_be_duplicate', 'error')
+        return
+      }
       for (var i = 0; i < selectNode.length; i++) {
         if (selectNode[i].sheet) {
           if (!selectNode[i].datasetName || selectNode[i].datasetName === '') {
             validate = false
-            this.$message({
-              showClose: true,
-              message: this.$t('dataset.pls_input_name'),
-              type: 'error'
-            })
+            this.openMessageSuccess('dataset.pls_input_name', 'error')
             return
           }
           if (selectNode[i].datasetName.length > 50 && !this.param.tableId) {
             validate = false
-            this.$message({
-              showClose: true,
-              message: this.$t('dataset.char_can_not_more_50'),
-              type: 'error'
-            })
+            this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
             return
           }
           if (selectNode[i].effectExtField) {
@@ -389,7 +424,7 @@ export default {
         }
       }
       if (selectedSheet.length == 0) {
-        this.$message.warning(this.$t('dataset.ple_select_excel'))
+        this.openMessageSuccess('dataset.ple_select_excel', 'error')
         return
       }
       if (!validate) {
@@ -420,8 +455,16 @@ export default {
         }
       }
 
-      if (this.param.editType === 0 && this.param.tableId && (effectExtField || changeFiled)) {
-        var msg = effectExtField ? i18n.t('dataset.effect_ext_field') + ', ' + i18n.t('dataset.excel_replace_msg') : i18n.t('dataset.excel_replace_msg')
+      if (
+        this.param.editType === 0 &&
+        this.param.tableId &&
+        (effectExtField || changeFiled)
+      ) {
+        var msg = effectExtField
+          ? i18n.t('dataset.task.effect_ext_field') +
+            ', ' +
+            i18n.t('dataset.task.excel_replace_msg')
+          : i18n.t('dataset.task.excel_replace_msg')
         $confirm(msg, () => {
           this.saveExcelData(sheetFileMd5, table)
         })
@@ -435,7 +478,7 @@ export default {
         !this.param.tableId
       ) {
         this.$confirm(
-          this.$t('dataset.excel_replace_msg'),
+          this.$t('dataset.task.excel_replace_msg'),
           this.$t('dataset.merge_title'),
           {
             distinguishCancelAndClose: true,
@@ -447,7 +490,7 @@ export default {
           .then(() => {
             table.mergeSheet = true
             post('/dataset/table/update', table).then((response) => {
-              this.$emit('saveSuccess', table)
+              this.openMessageSuccess('deDataset.set_saved_successfully')
               this.cancel()
             })
           })
@@ -457,29 +500,20 @@ export default {
             }
             table.mergeSheet = false
             post('/dataset/table/update', table).then((response) => {
-              this.$emit('saveSuccess', table)
+              this.openMessageSuccess('deDataset.set_saved_successfully')
               this.cancel()
             })
           })
       } else {
         post('/dataset/table/update', table).then((response) => {
-          this.$emit('saveSuccess', table)
+          this.openMessageSuccess('deDataset.set_saved_successfully')
           this.cancel()
         })
       }
     },
     cancel() {
-      this.dataReset()
-      if (this.param.tableId) {
-        this.$emit('switchComponent', {
-          name: 'ViewTable',
-          param: this.param.table
-        })
-      } else {
-        this.$emit('switchComponent', { name: '' })
-      }
+      this.$router.back()
     },
-
     dataReset() {
       this.searchTable = ''
       this.options = []
@@ -508,6 +542,8 @@ export default {
   display: flex;
   height: 100%;
   position: relative;
+  width: 100%;
+
   .arrow-right {
     position: absolute;
     top: 15px;
@@ -553,6 +589,18 @@ export default {
     .table-checkbox-list {
       height: calc(100% - 100px);
       overflow-y: auto;
+      .custom-tree-node {
+        position: relative;
+        width: 80%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .error-name-exsit {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
       .item {
         height: 40px;
         width: 215px;
@@ -588,6 +636,7 @@ export default {
       border-bottom: 1px solid rgba(31, 35, 41, 0.15);
       display: flex;
       align-items: center;
+      position: relative;
       .name {
         font-size: 14px;
         font-weight: 400;
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 27e3e31c35..39f9293e2c 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="dataset-sql" @mouseup="mouseupDrag">
-    <!-- <el-input v-model="name" size="mini" :placeholder="$t('commons.name')"/> -->
-
-    <!-- <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button> -->
-
-    <div class="sql-editer" :style="{ height: sqlHeight + 'px' }">
+    <div class="sql-editer">
       <el-row>
         <el-col :span="12">
           <el-select
@@ -60,206 +51,293 @@
         </el-col>
         <el-col style="text-align: right" :span="12">
           <el-button
-            icon="el-icon-s-operation"
             type="text"
             size="small"
             class="de-text-btn"
-            @click="variableMgm"
+            @click="dataReference = true"
           >
-            {{ $t('sql_variable.variable_mgm') }}
+            <svg-icon icon-class="data-reference" />
+            {{ $t('deDataset.data_reference') }}
           </el-button>
           <el-button
-            icon="el-icon-video-play"
+            type="text"
+            size="small"
+            style="color: #1f2329"
+            class="de-text-btn"
+            @click="variableMgm"
+          >
+            <svg-icon icon-class="reference-setting" />
+            {{ $t('sql_variable.variable_mgm') }}
+          </el-button>
+          <el-divider direction="vertical"></el-divider>
+          <el-button
             class="de-text-btn"
             type="text"
             size="small"
             @click="getSQLPreview"
           >
+            <svg-icon icon-class="reference-play" />
             {{ $t('deDataset.run_a_query') }}
           </el-button>
         </el-col>
       </el-row>
-      <div class="code-container">
-        <codemirror
-          ref="myCm"
-          v-model="sql"
-          class="codemirror"
-          :options="sqlOption"
-          @ready="onCmReady"
-          @focus="onCmFocus"
-          @input="onCmCodeChange"
-        />
-      </div>
     </div>
-    <div class="sql-result">
-      <div class="sql-title">
-        {{ $t('deDataset.running_results') }}
-        <span class="result-num">{{
-          `(${$t('dataset.preview_show')} 1000 ${$t('dataset.preview_item')})`
+    <div class="refrence-sql-table">
+      <div class="data-reference" v-if="dataReference">
+        <div class="table-database-name">
+          <p>
+            <span
+              @click="
+                showTable = false
+                dataTable = ''
+              "
+              style="cursor: pointer"
+              v-if="showTable"
+              ><i class="el-icon-arrow-left"></i> {{ $t('chart.back') }}</span
+            >
+            <span v-else>{{ $t('deDataset.data_reference') }}</span>
+            <i
+              @click="
+                showTable = false
+                dataTable = ''
+                dataReference = false
+              "
+              style="cursor: pointer"
+              class="el-icon-close"
+            ></i>
+          </p>
+          <p v-if="dataSource">
+            <span>
+              <svg-icon icon-class="db-de" />
+              {{ (showTable && dataTable) || selectedDatasource.name }}
+            </span>
+            <span class="grey">
+              <svg-icon
+                :icon-class="showTable ? 'reference-table' : 'reference-field'"
+              />
+              {{ (showTable && fieldData.length) || tableData.length }}
+            </span>
+          </p>
+        </div>
+        <span class="no-select-datasource" v-if="!dataSource">{{
+          $t('deDataset.to_start_using')
         }}</span>
-
-        <span @mousedown="mousedownDrag" class="drag"></span>
-      </div>
-      <div class="table-sql">
-        <el-empty
-          :image-size="60"
-          v-if="errMsg"
-          :image="errImg"
-          :description="$t('deDataset.run_failed')"
-        ></el-empty>
-        <ux-grid
-          v-else
-          ref="plxTable"
-          size="mini"
-          style="width: 100%"
-          :height="height"
-          :checkbox-config="{ highlight: true }"
-          :width-resize="true"
-        >
-          <ux-table-column
-            v-for="field in fields"
-            :key="field.fieldName"
-            min-width="200px"
-            :field="field.fieldName"
-            :title="field.remarks"
-            :resizable="true"
-          />
-        </ux-grid>
-      </div>
-      <el-drawer
-        :title="dialogTitle"
-        :visible.sync="showVariableMgm"
-        custom-class="user-drawer sql-dataset-drawer"
-        size="840px"
-        v-closePress
-        direction="rtl"
-      >
-        <div class="content">
-          <i class="el-icon-info"></i> {{ $t('dataset.sql_variable_limit_1')
-          }}<br />
-          {{ $t('dataset.sql_variable_limit_2') }}<br />
-        </div>
-        <el-table :data="variablesTmp">
-          <el-table-column prop="variableName" :label="$t('panel.param_name')">
-          </el-table-column>
-          <el-table-column width="200" :label="$t('deDataset.parameter_type')">
-            <template slot-scope="scope">
-              <el-cascader
-                v-model="scope.row.type"
-                size="mini"
-                class="select-type"
-                :options="fieldOptions"
-                @change="variableTypeChange(scope.row)"
-              >
-              </el-cascader>
-              <span class="select-svg-icon">
-                <svg-icon
-                  v-if="scope.row.type[0] === 'TEXT'"
-                  icon-class="field_text"
-                  class="field-icon-text"
-                />
-                <svg-icon
-                  v-if="
-                    [
-                      'DATETIME-YEAR',
-                      'DATETIME-YEAR-MONTH',
-                      'DATETIME',
-                      'DATETIME-YEAR-MONTH-DAY'
-                    ].includes(scope.row.type[0])
-                  "
-                  icon-class="field_time"
-                  class="field-icon-time"
-                />
-                <svg-icon
-                  v-if="['LONG', 'DOUBLE'].includes(scope.row.type[0])"
-                  icon-class="field_value"
-                  class="field-icon-value"
-                />
-                <!-- <svg-icon
-                    v-if="scope.row.deType === 5"
-                    icon-class="field_location"
-                    class="field-icon-location"
-                  /> -->
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            min-width="350"
-            prop="defaultValue"
-            :label="$t('commons.params_value')"
+        <div v-else-if="dataSource && !dataTable" class="item-list">
+          <div
+            @click="typeSwitch(ele)"
+            :key="ele.name"
+            v-for="ele in tableData"
+            class="table-or-field"
           >
-            <template slot-scope="scope">
-              <el-input
-                size="small"
-                v-if="scope.row.type[0] === 'TEXT'"
-                type="text"
-                :placeholder="$t('fu.search_bar.please_input')"
-                v-model="scope.row.defaultValue"
-              />
-              <el-input
-                size="small"
-                v-if="
-                  scope.row.type[0] === 'LONG' || scope.row.type[0] === 'DOUBLE'
-                "
-                :placeholder="$t('fu.search_bar.please_input')"
-                type="number"
-                v-model="scope.row.defaultValue"
-              />
-
-              <el-date-picker
-                v-if="scope.row.type[0] === 'DATETIME-YEAR'"
-                v-model="scope.row.defaultValue"
-                type="year"
-                size="small"
-                value-format="yyyy"
-                :placeholder="$t('dataset.select_year')"
-              >
-              </el-date-picker>
-
-              <el-date-picker
-                v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH'"
-                v-model="scope.row.defaultValue"
-                type="month"
-                size="small"
-                :format="scope.row.type[1]"
-                :value-format="scope.row.type[1]"
-                :placeholder="$t('dataset.select_month')"
-              >
-              </el-date-picker>
-
-              <el-date-picker
-                v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH-DAY'"
-                v-model="scope.row.defaultValue"
-                type="date"
-                size="small"
-                :format="scope.row.type[1]"
-                :value-format="scope.row.type[1]"
-                :placeholder="$t('dataset.select_date')"
-              >
-              </el-date-picker>
-
-              <el-date-picker
-                v-if="scope.row.type[0] === 'DATETIME'"
-                v-model="scope.row.defaultValue"
-                type="datetime"
-                size="small"
-                :format="scope.row.type[1]"
-                :value-format="scope.row.type[1]"
-                :placeholder="$t('dataset.select_time')"
-              >
-              </el-date-picker>
-            </template>
-          </el-table-column>
-        </el-table>
-        <div class="de-foot">
-          <deBtn secondary @click="closeVariableMgm">{{
-            $t('dataset.cancel')
-          }}</deBtn>
-          <deBtn type="primary" @click="saveVariable()">{{
-            $t('dataset.confirm')
-          }}</deBtn>
+            {{ ele.name }}
+          </div>
         </div>
-      </el-drawer>
+        <div v-else-if="dataSource && dataTable" class="item-list">
+          <div
+            :key="ele.fieldName"
+            v-for="ele in fieldData"
+            class="table-or-field"
+          >
+            {{ ele.fieldName }}
+          </div>
+        </div>
+      </div>
+      <div class="sql-table">
+        <div class="code-container" :style="{ height: sqlHeight + 'px' }">
+          <codemirror
+            ref="myCm"
+            v-model="sql"
+            class="codemirror"
+            :options="sqlOption"
+            @ready="onCmReady"
+            @focus="onCmFocus"
+            @input="onCmCodeChange"
+          />
+        </div>
+
+        <div class="sql-result">
+          <div class="sql-title">
+            {{ $t('deDataset.running_results') }}
+            <span class="result-num">{{
+              `(${$t('dataset.preview_show')} 1000 ${$t(
+                'dataset.preview_item'
+              )})`
+            }}</span>
+
+            <span @mousedown="mousedownDrag" class="drag"></span>
+          </div>
+          <div class="table-sql">
+            <el-empty
+              :image-size="125"
+              v-if="initFlag"
+              style="margin-top: 80px"
+              :image="initImg"
+              :description="$t('deDataset.to_run_query')"
+              >{{ $t('deDataset.the_running_results') }}
+            </el-empty>
+            <el-empty
+              :image-size="60"
+              v-else-if="errMsg"
+              :image="errImg"
+              :description="$t('deDataset.run_failed')"
+            ></el-empty>
+            <ux-grid
+              v-else
+              ref="plxTable"
+              size="mini"
+              style="width: 100%"
+              :height="height"
+              :checkbox-config="{ highlight: true }"
+              :width-resize="true"
+            >
+              <ux-table-column
+                v-for="field in fields"
+                :key="field.fieldName"
+                min-width="200px"
+                :field="field.fieldName"
+                :title="field.remarks"
+                :resizable="true"
+              />
+            </ux-grid>
+          </div>
+          <el-drawer
+            :title="dialogTitle"
+            :visible.sync="showVariableMgm"
+            custom-class="user-drawer sql-dataset-drawer"
+            size="840px"
+            v-closePress
+            direction="rtl"
+          >
+            <div class="content">
+              <i class="el-icon-info"></i>
+              {{ $t('dataset.sql_variable_limit_1') }}<br />
+              {{ $t('dataset.sql_variable_limit_2') }}<br />
+            </div>
+            <el-table :data="variablesTmp">
+              <el-table-column
+                prop="variableName"
+                :label="$t('panel.param_name')"
+              >
+              </el-table-column>
+              <el-table-column
+                width="200"
+                :label="$t('deDataset.parameter_type')"
+              >
+                <template slot-scope="scope">
+                  <el-cascader
+                    v-model="scope.row.type"
+                    size="mini"
+                    class="select-type"
+                    :options="fieldOptions"
+                    @change="variableTypeChange(scope.row)"
+                  >
+                  </el-cascader>
+                  <span class="select-svg-icon">
+                    <svg-icon
+                      v-if="scope.row.type[0] === 'TEXT'"
+                      icon-class="field_text"
+                      class="field-icon-text"
+                    />
+                    <svg-icon
+                      v-if="
+                        [
+                          'DATETIME-YEAR',
+                          'DATETIME-YEAR-MONTH',
+                          'DATETIME',
+                          'DATETIME-YEAR-MONTH-DAY'
+                        ].includes(scope.row.type[0])
+                      "
+                      icon-class="field_time"
+                      class="field-icon-time"
+                    />
+                    <svg-icon
+                      v-if="['LONG', 'DOUBLE'].includes(scope.row.type[0])"
+                      icon-class="field_value"
+                      class="field-icon-value"
+                    />
+                  </span>
+                </template>
+              </el-table-column>
+              <el-table-column
+                min-width="350"
+                prop="defaultValue"
+                :label="$t('commons.params_value')"
+              >
+                <template slot-scope="scope">
+                  <el-input
+                    size="small"
+                    v-if="scope.row.type[0] === 'TEXT'"
+                    type="text"
+                    :placeholder="$t('fu.search_bar.please_input')"
+                    v-model="scope.row.defaultValue"
+                  />
+                  <el-input
+                    size="small"
+                    v-if="
+                      scope.row.type[0] === 'LONG' ||
+                      scope.row.type[0] === 'DOUBLE'
+                    "
+                    :placeholder="$t('fu.search_bar.please_input')"
+                    type="number"
+                    v-model="scope.row.defaultValue"
+                  />
+
+                  <el-date-picker
+                    v-if="scope.row.type[0] === 'DATETIME-YEAR'"
+                    v-model="scope.row.defaultValue"
+                    type="year"
+                    size="small"
+                    value-format="yyyy"
+                    :placeholder="$t('dataset.select_year')"
+                  >
+                  </el-date-picker>
+
+                  <el-date-picker
+                    v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH'"
+                    v-model="scope.row.defaultValue"
+                    type="month"
+                    size="small"
+                    :format="scope.row.type[1]"
+                    :value-format="scope.row.type[1]"
+                    :placeholder="$t('dataset.select_month')"
+                  >
+                  </el-date-picker>
+
+                  <el-date-picker
+                    v-if="scope.row.type[0] === 'DATETIME-YEAR-MONTH-DAY'"
+                    v-model="scope.row.defaultValue"
+                    type="date"
+                    size="small"
+                    :format="scope.row.type[1]"
+                    :value-format="scope.row.type[1]"
+                    :placeholder="$t('dataset.select_date')"
+                  >
+                  </el-date-picker>
+
+                  <el-date-picker
+                    v-if="scope.row.type[0] === 'DATETIME'"
+                    v-model="scope.row.defaultValue"
+                    type="datetime"
+                    size="small"
+                    :format="scope.row.type[1]"
+                    :value-format="scope.row.type[1]"
+                    :placeholder="$t('dataset.select_time')"
+                  >
+                  </el-date-picker>
+                </template>
+              </el-table-column>
+            </el-table>
+            <div class="de-foot">
+              <deBtn secondary @click="closeVariableMgm">{{
+                $t('dataset.cancel')
+              }}</deBtn>
+              <deBtn type="primary" @click="saveVariable()">{{
+                $t('dataset.confirm')
+              }}</deBtn>
+            </div>
+          </el-drawer>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -292,10 +370,12 @@ import 'codemirror/addon/hint/show-hint.css'
 import 'codemirror/addon/hint/sql-hint'
 import 'codemirror/addon/hint/show-hint'
 import { engineMode } from '@/api/system/engine'
+import msgCfm from '@/components/msgCfm/index'
 
 export default {
   name: 'AddSQL',
   components: { codemirror },
+  mixins: [msgCfm],
   props: {
     param: {
       type: Object,
@@ -305,9 +385,15 @@ export default {
   data() {
     return {
       dataSource: '',
+      dataTable: '',
+      initFlag: true,
+      showTable: false,
+      tableData: [],
+      fieldData: [],
       errMsg: false,
       options: [],
       sql: '',
+      dataReference: false,
       sqlOption: {
         tabSize: 2,
         styleActiveLine: true,
@@ -322,7 +408,8 @@ export default {
       },
       data: [],
       errImg: require('@/assets/error.png'),
-      sqlHeight: 330,
+      initImg: require('@/assets/None.png'),
+      sqlHeight: 248,
       fields: [],
       mode: '0',
       syncType: 'sync_now',
@@ -392,7 +479,8 @@ export default {
   computed: {
     codemirror() {
       return this.$refs.myCm.codemirror
-    }
+    },
+    dataSourceDetail() {}
   },
   watch: {
     'param.tableId': {
@@ -421,6 +509,19 @@ export default {
     })
   },
   methods: {
+    getField(name) {
+      post('/dataset/table/getFields', {
+        dataSourceId: this.dataSource,
+        info: JSON.stringify({ table: name })
+      }).then((res) => {
+        this.fieldData = res.data
+      })
+    },
+    typeSwitch({ name }) {
+      this.showTable = true
+      this.dataTable = name
+      this.getField(name)
+    },
     mousedownDrag() {
       document
         .querySelector('.dataset-sql')
@@ -455,6 +556,9 @@ export default {
           }
         }
       }
+      post('/datasource/getTables/' + this.dataSource, {}).then((response) => {
+        this.tableData = response.data
+      })
     },
     calHeight() {
       const that = this
@@ -492,12 +596,9 @@ export default {
 
     getSQLPreview() {
       this.errMsg = false
+      this.initFlag = false
       if (!this.dataSource || this.datasource === '') {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.pls_slc_data_source'),
-          type: 'error'
-        })
+        this.openMessageSuccess('dataset.pls_slc_data_source', 'error')
         return
       }
       this.parseVariable()
@@ -523,33 +624,21 @@ export default {
 
     save() {
       if (!this.dataSource || this.datasource === '') {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.pls_slc_data_source'),
-          type: 'error'
-        })
+        this.openMessageSuccess('dataset.pls_slc_data_source', 'error')
         return
       }
-      if (!this.table.name || this.table.name === '') {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.pls_input_name'),
-          type: 'error'
-        })
+      if (!this.param.name || this.param.name === '') {
+        this.openMessageSuccess('dataset.pls_input_name', 'error')
         return
       }
-      if (this.table.name.length > 50) {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.char_can_not_more_50'),
-          type: 'error'
-        })
+      if (this.param.name.length > 50) {
+        this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
         return
       }
       this.parseVariable()
       const table = {
         id: this.param.tableId,
-        name: this.table.name,
+        name: this.param.name,
         sceneId: this.param.id,
         dataSourceId: this.dataSource,
         type: 'sql',
@@ -562,20 +651,13 @@ export default {
         })
       }
       post('/dataset/table/update', table).then((response) => {
-        this.$emit('saveSuccess', table)
+        this.openMessageSuccess('deDataset.set_saved_successfully')
         this.cancel()
       })
     },
 
     cancel() {
-      if (this.param.tableId) {
-        this.$emit('switchComponent', {
-          name: 'ViewTable',
-          param: this.param.table
-        })
-      } else {
-        this.$emit('switchComponent', { name: '' })
-      }
+      this.$router.back()
     },
 
     showSQL(val) {
@@ -592,7 +674,7 @@ export default {
 
     resetComponent() {
       this.dataSource = ''
-      this.table.name = ''
+      this.param.name = ''
       this.sql = ''
       this.data = []
       this.fields = []
@@ -715,16 +797,90 @@ export default {
   display: flex;
   flex-direction: column;
   .sql-editer {
-    min-height: 330px;
     background: #f5f6f7;
     padding: 16px 24px;
-    .code-container {
-      box-sizing: border-box;
-      height: calc(100% - 64px);
-      margin-top: 16px;
-      color: var(--deTextPrimary, #1f2329);
-      .CodeMirror {
-        height: 100% !important;
+  }
+
+  .refrence-sql-table {
+    flex: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    overflow: hidden;
+    .data-reference {
+      width: 280px;
+      height: 100%;
+      overflow: hidden;
+      border-left: 1px solid var(--deCardStrokeColor, #dee0e3);
+      .no-select-datasource {
+        font-family: PingFang SC;
+        font-size: 14px;
+        color: var(--deTextPrimary, #1f2329);
+        font-weight: 400;
+        display: inline-block;
+        width: 100%;
+        padding: 16px 12px;
+      }
+      .table-database-name {
+        font-family: PingFang SC;
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--deTextPrimary, #1f2329);
+        padding: 16px 12px;
+        border-bottom: 1px solid var(--deCardStrokeColor, #dee0e3);
+        p {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin: 0;
+        }
+
+        :nth-child(2)p {
+          margin-top: 16px;
+        }
+        .grey {
+          font-size: 14px;
+          font-weight: 400;
+          color: var(--deTextSecondary, #646a73);
+        }
+      }
+
+      .item-list {
+        padding: 16px 8px;
+        height: calc(100vh - 200px);
+        overflow: auto;
+        .table-or-field {
+          height: 40px;
+          width: 100%;
+          box-sizing: border-box;
+          border-radius: 4px;
+          color: var(--primary, #3370ff);
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: flex;
+          align-items: center;
+          padding-left: 4px;
+
+          &:hover {
+            background: rgba(31, 35, 41, 0.1);
+          }
+        }
+      }
+    }
+    .sql-table {
+      flex: 1;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      .code-container {
+        background: #f5f6f7;
+        box-sizing: border-box;
+        min-height: 248px;
+        color: var(--deTextPrimary, #1f2329);
+        .CodeMirror {
+          height: 100% !important;
+        }
       }
     }
   }
@@ -768,6 +924,14 @@ export default {
       padding: 18px 25px;
       overflow-y: auto;
       box-sizing: border-box;
+      .el-empty__bottom,
+      .el-empty__description p {
+        font-family: PingFang SC;
+        font-size: 14px;
+        font-weight: 400;
+        margin-top: 0;
+        color: var(--deTextSecondary, #646a73);
+      }
     }
   }
 }
diff --git a/frontend/src/views/dataset/add/AddUnion.vue b/frontend/src/views/dataset/add/AddUnion.vue
index ba42bf5b8e..e7deb93c6f 100644
--- a/frontend/src/views/dataset/add/AddUnion.vue
+++ b/frontend/src/views/dataset/add/AddUnion.vue
@@ -1,15 +1,5 @@
 <template>
   <div class="dataset-union" @mouseup="mouseupDrag">
-    <!-- <el-form :inline="true" style="display: flex;align-items: center;justify-content: space-between;">
-        <el-form-item class="form-item" :label="$t('commons.name')">
-          <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" clearable />
-        </el-form-item>
-        <el-form-item class="form-item">
-          <el-button :disabled="dataset.length === 0" size="mini" @click="previewData">
-            {{ $t('dataset.preview_result') }}
-          </el-button>
-        </el-form-item>
-      </el-form> -->
     <div :style="{ height: unionHeight + 'px' }" class="unio-editer-container">
       <!--添加第一个数据集按钮-->
       <div v-if="dataset.length === 0">
@@ -209,19 +199,11 @@ export default {
     },
     save() {
       if (!this.param.name || this.param.name === '') {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.pls_input_name'),
-          type: 'error'
-        })
+        this.openMessageSuccess('dataset.pls_input_name', 'error')
         return
       }
       if (this.param.name.length > 50) {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.char_can_not_more_50'),
-          type: 'error'
-        })
+        this.openMessageSuccess('dataset.char_can_not_more_50', 'error')
         return
       }
       const table = {
@@ -239,14 +221,7 @@ export default {
       })
     },
     cancel() {
-      if (this.param.tableId) {
-        this.$emit('switchComponent', {
-          name: 'ViewTable',
-          param: this.param.table
-        })
-      } else {
-        this.$emit('switchComponent', { name: '' })
-      }
+      this.$router.back()
     },
     selectDs() {
       this.selectDsDialog = true
@@ -260,11 +235,7 @@ export default {
     },
     confirmSelectDs() {
       if (this.tempDs.mode === 0 && this.tempDs.modelInnerType === 'sql') {
-        this.$message({
-          showClose: true,
-          message: this.$t('dataset.sql_ds_union_error'),
-          type: 'error'
-        })
+        this.openMessageSuccess('deDataset.sql_ds_union_error')
         return
       }
       const ds = JSON.parse(JSON.stringify(this.unionItem))
@@ -315,11 +286,7 @@ export default {
       if (this.checkUnion()) {
         this.editUnion = false
       } else {
-        this.$message({
-          message: this.$t('dataset.union_error'),
-          type: 'error',
-          showClose: true
-        })
+        this.openMessageSuccess('deDataset.union_error')
       }
     },
     cancelUnion(val) {
diff --git a/frontend/src/views/dataset/data/FieldEdit.vue b/frontend/src/views/dataset/data/FieldEdit.vue
index 4a1b739927..13ae6bae6c 100644
--- a/frontend/src/views/dataset/data/FieldEdit.vue
+++ b/frontend/src/views/dataset/data/FieldEdit.vue
@@ -1,16 +1,5 @@
 <template>
   <div :style="{ height: maxHeight, overflow: 'auto' }">
-    <!--    <el-row style="height: 26px;">-->
-    <!--      <span style="line-height: 26px;">-->
-    <!--        {{ $t('dataset.field_edit') }}-->
-    <!--        <span>{{ param.name }}</span>-->
-    <!--      </span>-->
-    <!--      <el-row style="float: right">-->
-    <!--        <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>-->
-    <!--        <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>-->
-    <!--      </el-row>-->
-    <!--    </el-row>-->
-    <!--    <el-divider />-->
     <el-row style="margin: 6px 0 16px 0">
       <el-col :span="12">
         <deBtn
@@ -187,7 +176,6 @@
                     icon-class="field_text"
                     class="field-icon-text"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.text") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 1">
                   <svg-icon
@@ -195,7 +183,6 @@
                     icon-class="field_time"
                     class="field-icon-time"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.time") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
                   <svg-icon
@@ -203,12 +190,6 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <!-- <span v-if="scope.row.deType === 2" class="field-class">{{
-                    $t("dataset.value")
-                  }}</span>
-                  <span v-if="scope.row.deType === 3" class="field-class">{{
-                    $t("dataset.value") + "(" + $t("dataset.float") + ")"
-                  }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 5">
                   <svg-icon
@@ -216,7 +197,6 @@
                     icon-class="field_location"
                     class="field-icon-location"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.location") }}</span> -->
                 </span>
               </span>
             </template>
@@ -310,14 +290,6 @@
               </span>
             </template>
           </el-table-column>
-          <!--          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <el-radio-group v-model="scope.row.groupType" size="mini">-->
-          <!--                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
-          <!--                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
-          <!--              </el-radio-group>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
           <el-table-column min-width="182" :label="$t('dataset.operator')">
             <template slot-scope="scope">
               <el-button
@@ -326,7 +298,7 @@
                 style="margin-left: -4px"
                 :disabled="!hasDataPermission('manage', param.privileges)"
                 @click="dqTrans(scope.row, 'd')"
-                >{{ $t('convert_to_indicator') }}</el-button
+                >{{ $t('deDataset.convert_to_indicator') }}</el-button
               >
               <template v-if="scope.row.extField !== 0">
                 <el-button
@@ -522,7 +494,6 @@
                     icon-class="field_text"
                     class="field-icon-text"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.text") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 1">
                   <svg-icon
@@ -530,7 +501,6 @@
                     icon-class="field_time"
                     class="field-icon-time"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.time") }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
                   <svg-icon
@@ -538,12 +508,6 @@
                     icon-class="field_value"
                     class="field-icon-value"
                   />
-                  <!-- <span v-if="scope.row.deType === 2" class="field-class">{{
-                    $t("dataset.value")
-                  }}</span>
-                  <span v-if="scope.row.deType === 3" class="field-class">{{
-                    $t("dataset.value") + "(" + $t("dataset.float") + ")"
-                  }}</span> -->
                 </span>
                 <span v-if="scope.row.deType === 5">
                   <svg-icon
@@ -551,7 +515,6 @@
                     icon-class="field_location"
                     class="field-icon-location"
                   />
-                  <!-- <span class="field-class">{{ $t("dataset.location") }}</span> -->
                 </span>
               </span>
             </template>
@@ -637,29 +600,6 @@
               </span>
             </template>
           </el-table-column>
-          <!--          <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
-          <!--            <template slot-scope="scope">-->
-          <!--              <el-radio-group v-model="scope.row.groupType" size="mini">-->
-          <!--                <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
-          <!--                <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
-          <!--              </el-radio-group>-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
-          <!-- <el-table-column
-            property="groupType"
-            :label="$t('dataset.d_q_trans')"
-            width="120"
-          >
-            <template slot-scope="scope">
-              <el-button
-                icon="el-icon-sort"
-                size="mini"
-                circle
-                :disabled="!hasDataPermission('manage', param.privileges)"
-                @click="dqTrans(scope.row, 'q')"
-              />
-            </template>
-          </el-table-column> -->
           <el-table-column
             min-width="182"
             property=""
@@ -734,7 +674,7 @@
 
     <el-dialog
       :visible.sync="editCalcField"
-      class="de-dialog-form"
+      class="de-dialog-form de-center-dialog"
       width="980px"
       :title="
         currEditField.id
@@ -841,11 +781,6 @@ export default {
       })
     },
     saveEdit(item) {
-      // const list = this.tableFields.dimensionListData.concat(this.tableFields.quotaListData)
-      // batchEdit(list).then(response => {
-      //   // this.closeEdit()
-      //   this.initField()
-      // })
       if (item.name && item.name.length > 50) {
         this.$message.error(this.$t('dataset.field_name_less_50'))
         return
@@ -1153,3 +1088,14 @@ span {
   border-bottom: 0 solid #e6ebf5 !important;
 }
 </style>
+
+<style lang="scss">
+.de-center-dialog {
+  .el-dialog {
+    margin: 0 !important;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 1dd84f6dac..b72ce33586 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -23,7 +23,7 @@
       </span>
       <span class="title-text" style="width: 100px"
         >{{ $t('deDataset.display') }} {{ form.row }}
-        {{ $t('deDataset.that_s_ok') }}</span
+        {{ $t('deDataset.row') }}</span
       >
       <el-popover
         popper-class="de-set-count de-card-dropdown"
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index 9578815e64..b04f9e1b77 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -185,15 +185,6 @@
       </grid-table>
     </div>
 
-    <!-- <el-row>
-      <el-button v-if="hasDataPermission('manage',param.privileges) && enableUpdate" icon="el-icon-setting" size="mini" @click="showConfig">
-        {{ $t('dataset.update_setting') }}
-      </el-button>
-      <el-button icon="el-icon-refresh" size="mini" @click="refreshLog">
-        {{ $t('commons.refresh') }}
-      </el-button>
-    </el-row> -->
-
     <el-dialog
       v-dialogDrag
       :title="$t('dataset.detail')"
@@ -305,7 +296,7 @@
         </el-form-item>
         <div class="add-scope-cont" v-if="taskForm.type === 'add_scope'">
           <el-form-item
-            prop="incrementalUpdateType"
+            prop="type"
             :label="$t('dataset.incremental_update_type')"
           >
             <el-radio-group
@@ -451,13 +442,11 @@
           </el-form-item>
         </div>
       </el-form>
-      <div class="de-foot-layout">
-        <!-- <div class="cont">
-          <deBtn secondary @click="closeTask">{{ $t("dataset.cancel") }}</deBtn>
-          <deBtn type="primary" @click="saveTask(taskForm)">{{
-            $t("dataset.confirm")
-          }}</deBtn>
-        </div> -->
+      <div class="de-foot">
+        <deBtn secondary @click="closeTask">{{ $t('dataset.cancel') }}</deBtn>
+        <deBtn type="primary" @click="saveTask(taskForm)">{{
+          $t('dataset.confirm')
+        }}</deBtn>
       </div>
     </el-drawer>
   </el-col>
@@ -707,11 +696,7 @@ export default {
     showConfig() {
       this.userDrawer = true
       this.listTaskLog()
-      // this.getIncrementalConfig()
     },
-    // refreshLog() {
-    //   this.listTaskLog();
-    // },
     showErrorMassage(massage) {
       this.show_error_massage = true
       this.error_massage = massage
@@ -857,47 +842,6 @@ export default {
           this.initSearch(false)
         })
     },
-    // getIncrementalConfig() {
-    //   post("/dataset/table/incrementalConfig", { tableId: this.table.id }).then(
-    //     (response) => {
-    //       this.incrementalConfig = response.data;
-    //       if (
-    //         this.incrementalConfig.incrementalAdd.length === 0 &&
-    //         this.incrementalConfig.incrementalDelete.length === 0
-    //       ) {
-    //         this.incrementalUpdateType = "incrementalAdd";
-    //         this.sql = "";
-    //         return;
-    //       }
-    //       if (this.incrementalConfig.incrementalAdd.length > 0) {
-    //         this.incrementalUpdateType = "incrementalAdd";
-    //         this.sql = this.incrementalConfig.incrementalAdd;
-    //       } else {
-    //         this.incrementalUpdateType = "incrementalDelete";
-    //         this.sql = this.incrementalConfig.incrementalDelete;
-    //       }
-    //     }
-    //   );
-    // },
-    // saveIncrementalConfig() {
-    //   if (this.incrementalUpdateType === "incrementalAdd") {
-    //     this.incrementalConfig.incrementalAdd = this.sql;
-    //   } else {
-    //     this.incrementalConfig.incrementalDelete = this.sql;
-    //   }
-    //   this.incrementalConfig.tableId = this.table.id;
-    //   post(
-    //     "/dataset/table/save/incrementalConfig",
-    //     this.incrementalConfig
-    //   ).then((response) => {
-    //     this.$message({
-    //       message: this.$t("dataset.save_success"),
-    //       type: "success",
-    //       showClose: true,
-    //     });
-    //     this.update_setting = false;
-    //   });
-    // },
     saveTask(task) {
       this.$refs.taskForm.validate((valid) => {
         if (valid) {
@@ -1203,7 +1147,7 @@ export default {
 
     .codemirror-cont {
       box-sizing: border-box;
-      width: 560px;
+      width: 100%;
       height: 200px;
       background: #ffffff;
       border: 1px solid #bbbfc4;
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index 6f1fce6145..16eac3aeb2 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -102,8 +102,7 @@
       <el-tab-pane
         v-if="
           table.mode === 1 &&
-          (table.type === 'excel' ||
-            table.type === 'db' ||
+          (table.type === 'db' ||
             table.type === 'sql' ||
             table.type === 'api')
         "
diff --git a/frontend/src/views/dataset/form.vue b/frontend/src/views/dataset/form.vue
index 7458bd4210..ee25963638 100644
--- a/frontend/src/views/dataset/form.vue
+++ b/frontend/src/views/dataset/form.vue
@@ -25,7 +25,7 @@
           class="table-num"
           v-if="['db', 'excel', 'api'].includes(datasetType)"
           >{{ $t('deDataset.selected') }} {{ tableNum }}
-          {{ $t('deDataset.zhang_biao') }}</span
+          {{ $t('deDataset.table') }}</span
         >
         <deBtn @click="datasetSave" type="primary">{{
           $t('commons.save')
@@ -173,6 +173,13 @@ export default {
             trigger: 'change'
           },
           { required: true, trigger: 'blur', validator: this.nameValidator }
+        ],
+        id: [
+          {
+            required: true,
+            message: this.$t('fu.search_bar.please_select'),
+            trigger: 'blur'
+          },
         ]
       }
     }
@@ -204,7 +211,7 @@ export default {
   },
   methods: {
     back() {
-      this.$router.back()
+      this.$router.push('/dataset/index')
     },
     nameBlur() {
       this.nameExsitValidator()
@@ -340,7 +347,7 @@ export default {
     switchComponent(c) {
       let type = ''
       if (['db', 'excel', 'api'].includes(c)) {
-        this.datasetFormRules = {}
+        this.$delete(this.datasetFormRules, 'name')
       }
       switch (c) {
         case 'db':
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index 98656749fd..a69cb97e2d 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -72,7 +72,7 @@
           <div v-if="!tData.length" class="no-tdata">
             {{ $t('deDataset.no_dataset_click') }}
             <span @click="() => clickAdd()" class="no-tdata-new">{{
-              $t('deDataset.newly_build')
+              $t('deDataset.create')
             }}</span>
           </div>
           <el-tree
@@ -113,7 +113,6 @@
                 class="child"
               >
                 <span v-if="data.modelInnerType === 'group'" @click.stop>
-                  <!-- <el-dropdown trigger="click" size="small" @command="clickAdd"> -->
                   <el-dropdown
                     size="small"
                     placement="bottom-start"
@@ -528,6 +527,9 @@ export default {
       this.$refs.datasetTreeRef.filter(this.filterText)
     }
   },
+  activated() {
+    this.nodeClick(this.$refs.datasetTreeRef.getCurrentNode())
+  },
   created() {
     this.kettleState()
     engineMode().then((res) => {
diff --git a/frontend/src/views/dataset/index.vue b/frontend/src/views/dataset/index.vue
index 161ef94347..2aa38bba0c 100644
--- a/frontend/src/views/dataset/index.vue
+++ b/frontend/src/views/dataset/index.vue
@@ -5,16 +5,15 @@
     <de-aside-container type="dataset">
       <group :save-status="saveStatus" @switchComponent="switchComponent" />
     </de-aside-container>
-
-    <de-main-container>
-      <component
-        :is="component"
-        ref="dynamic_component"
-        :param="param"
-        @switchComponent="switchComponent"
-        @saveSuccess="saveSuccess"
-      />
-    </de-main-container>
+      <de-main-container>
+        <component
+          :is="component"
+          ref="dynamic_component"
+          :param="param"
+          @switchComponent="switchComponent"
+          @saveSuccess="saveSuccess"
+        />
+      </de-main-container>
   </de-container>
 </template>
 
diff --git a/frontend/src/views/system/datasource/DsConfiguration.vue b/frontend/src/views/system/datasource/DsConfiguration.vue
index 96dc0f218c..7738935aa2 100644
--- a/frontend/src/views/system/datasource/DsConfiguration.vue
+++ b/frontend/src/views/system/datasource/DsConfiguration.vue
@@ -11,81 +11,91 @@
     >
       <template v-if="form.type == 'api'">
         <div class="de-row-rules flex-space">
-          <span>{{ $t("datasource.data_table") }}</span>
+          <span>{{ $t('datasource.data_table') }}</span>
           <deBtn
             icon="el-icon-plus"
             type="primary"
             @click="addApiItem(undefined)"
-            >{{ $t("commons.add") }}</deBtn
+            >{{ $t('commons.add') }}</deBtn
           >
         </div>
-        <el-empty :image="noneImg" v-if="!form.apiConfiguration.length" :description="$t('datasource.no_data_table')"></el-empty>
+        <el-empty
+          :image="noneImg"
+          v-if="!form.apiConfiguration.length"
+          :description="$t('datasource.no_data_table')"
+        ></el-empty>
         <template v-else>
           <div
-          v-for="api in form.apiConfiguration"
-          :key="api.id"
-          class="api-card"
-        >
-          <el-row>
-            <el-col :span="12">
-              <span class="name">{{ api.name }}</span>
-              <span
-                v-if="api.status === 'Error'"
-                class="de-tag"
-                style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
-                >{{ $t("datasource.invalid") }}</span
-              >
-              <span
-                v-if="api.status === 'Success'"
-                class="de-tag"
-                style="color: green; background: rgba(52, 199, 36, 0.2)"
-                >{{ $t("datasource.valid") }}</span
-              >
-            </el-col>
-            <el-col style="text-align: right" :span="12">
-              <svg-icon
-                @click="copyItem(api)"
-                icon-class="de-copy"
-                class="de-copy-icon"
-              />
-
-              <el-popover
-                placement="top"
-                width="200"
-                :ref="'apiTable' + api.name"
-                popper-class="api-table-delete"
-                trigger="click"
-              >
-                <i class="el-icon-warning"></i>
-                <div class="tips">{{ $t("datasource.delete_this_item") }}</div>
-                <div class="foot">
-                  <deBtn class="small" @click="cancelItem(api)" secondary>{{
-                    $t("fu.search_bar.cancel")
-                  }}</deBtn>
-                  <deBtn
-                    class="small"
-                    @click="deleteItem(api)"
-                    type="primary"
-                    >{{ $t("fu.search_bar.ok") }}</deBtn
-                  >
-                </div>
+            v-for="api in form.apiConfiguration"
+            :key="api.id"
+            @click="addApiItem(api)"
+            :style="{ cursor: disabled ? 'not-allowed': 'pointer'}"
+            class="api-card"
+          >
+            <el-row>
+              <el-col :span="12">
+                <span class="name">{{ api.name }}</span>
+                <span
+                  v-if="api.status === 'Error'"
+                  class="de-tag"
+                  style="color: #646a73; background: rgba(31, 35, 41, 0.1)"
+                  >{{ $t('datasource.invalid') }}</span
+                >
+                <span
+                  v-if="api.status === 'Success'"
+                  class="de-tag"
+                  style="color: green; background: rgba(52, 199, 36, 0.2)"
+                  >{{ $t('datasource.valid') }}</span
+                >
+              </el-col>
+              <el-col style="text-align: right" :span="12">
                 <svg-icon
-                  slot="reference"
-                  icon-class="de-delete"
-                  class="de-delete-icon"
+                  @click.stop="copyItem(api)"
+                  icon-class="de-copy"
+                  class="de-copy-icon"
                 />
-              </el-popover>
-            </el-col>
-          </el-row>
-          <div class="req-title">
-            <span>{{ $t("datasource.method") }}</span>
-            <span>{{ $t("datasource.url") }}</span>
+
+                <span @click.stop>
+                  <el-popover
+                    placement="top"
+                    width="200"
+                    :ref="`apiTable${api.name}`"
+                    popper-class="api-table-delete"
+                    trigger="click"
+                  >
+                    <i class="el-icon-warning"></i>
+                    <div class="tips">
+                      {{ $t('datasource.delete_this_item') }}
+                    </div>
+                    <div class="foot">
+                      <deBtn class="small" @click="cancelItem(api)" secondary>{{
+                        $t('fu.search_bar.cancel')
+                      }}</deBtn>
+                      <deBtn
+                        class="small"
+                        @click="deleteItem(api)"
+                        type="primary"
+                        >{{ $t('fu.search_bar.ok') }}</deBtn
+                      >
+                    </div>
+                    <svg-icon
+                      slot="reference"
+                      icon-class="de-delete"
+                      class="de-delete-icon"
+                    />
+                  </el-popover>
+                </span>
+              </el-col>
+            </el-row>
+            <div class="req-title">
+              <span>{{ $t('datasource.method') }}</span>
+              <span>{{ $t('datasource.url') }}</span>
+            </div>
+            <div class="req-value">
+              <span>{{ api.method }}</span>
+              <span>{{ api.url }}</span>
+            </div>
           </div>
-          <div class="req-value">
-            <span>{{ api.method }}</span>
-            <span>{{ api.url }}</span>
-          </div>
-        </div>
         </template>
       </template>
 
@@ -94,7 +104,11 @@
         :label="$t('datasource.host')"
         prop="configuration.host"
       >
-        <el-input :placeholder="$t('datasource._ip_address')" v-model="form.configuration.host" autocomplete="off" />
+        <el-input
+          :placeholder="$t('datasource._ip_address')"
+          v-model="form.configuration.host"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -114,7 +128,11 @@
         :label="$t('datasource.data_base')"
         prop="configuration.dataBase"
       >
-        <el-input :placeholder="$t('datasource.please_input_data_base')" v-model="form.configuration.dataBase" autocomplete="off" />
+        <el-input
+          :placeholder="$t('datasource.please_input_data_base')"
+          v-model="form.configuration.dataBase"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -123,13 +141,13 @@
         prop="configuration.connectionType"
       >
         <el-radio v-model="form.configuration.connectionType" label="sid"
-          >{{ $t("datasource.oracle_sid") }}
+          >{{ $t('datasource.oracle_sid') }}
         </el-radio>
         <el-radio
           v-model="form.configuration.connectionType"
           label="serviceName"
         >
-          {{ $t("datasource.oracle_service_name") }}
+          {{ $t('datasource.oracle_service_name') }}
         </el-radio>
       </el-form-item>
 
@@ -164,7 +182,7 @@
       >
         <dePwd v-model="form.configuration.password" />
         <p>
-          {{ $t("datasource.kerbers_info") }}
+          {{ $t('datasource.kerbers_info') }}
         </p>
       </el-form-item>
 
@@ -183,7 +201,11 @@
         "
         :label="$t('datasource.user_name')"
       >
-        <el-input :placeholder="$t('components.one_user_name')" v-model="form.configuration.username" autocomplete="off" />
+        <el-input
+          :placeholder="$t('components.one_user_name')"
+          v-model="form.configuration.username"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
@@ -194,21 +216,31 @@
         "
         :label="$t('datasource.password')"
       >
-        <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.password" />
+        <dePwd
+          :placeholder="$t('components.input_a_password')"
+          v-model="form.configuration.password"
+        />
       </el-form-item>
 
       <el-form-item
         v-if="form.type === 'es'"
         :label="$t('datasource.user_name')"
       >
-        <el-input :placeholder="$t('components.one_user_name')" v-model="form.configuration.esUsername" autocomplete="off" />
+        <el-input
+          :placeholder="$t('components.one_user_name')"
+          v-model="form.configuration.esUsername"
+          autocomplete="off"
+        />
       </el-form-item>
 
       <el-form-item
         v-if="form.type === 'es'"
         :label="$t('datasource.password')"
       >
-        <dePwd :placeholder="$t('components.input_a_password')" v-model="form.configuration.esPassword" />
+        <dePwd
+          :placeholder="$t('components.input_a_password')"
+          v-model="form.configuration.esPassword"
+        />
       </el-form-item>
 
       <el-form-item
@@ -235,17 +267,19 @@
       </el-form-item>
 
       <el-form-item
-        v-if="['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)"
+        v-if="
+          ['oracle', 'sqlServer', 'pg', 'redshift', 'db2'].includes(form.type)
+        "
         class="schema-label"
       >
         <template slot="label">
-          {{ $t("datasource.schema") }}
+          {{ $t('datasource.schema') }}
           <el-button
             type="text"
             icon="el-icon-plus"
             size="small"
             @click="getSchema()"
-            >{{ $t("datasource.get_schema") }}
+            >{{ $t('datasource.get_schema') }}
           </el-button>
         </template>
         <el-select
@@ -305,7 +339,7 @@
         v-if="!['es', 'api', 'mongo'].includes(form.type)"
         @click="showPriority = !showPriority"
         class="de-expand de-mar0"
-        >{{ $t("datasource.priority")
+        >{{ $t('datasource.priority')
         }}<i v-if="showPriority" class="el-icon-arrow-up"></i>
         <i v-else class="el-icon-arrow-down"></i
       ></span>
@@ -369,7 +403,7 @@
                 type="number"
                 :min="0"
               >
-                <template slot="append">{{ $t("panel.second") }}</template>
+                <template slot="append">{{ $t('panel.second') }}</template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -408,7 +442,7 @@
           :rules="rule"
         >
           <div class="row-rules">
-            <span>{{ $t("datasource.base_info") }}</span>
+            <span>{{ $t('datasource.base_info') }}</span>
           </div>
           <el-form-item :label="$t('commons.name')" prop="name">
             <el-input v-model="apiItem.name" autocomplete="off" />
@@ -439,7 +473,7 @@
 
           <div v-loading="loading">
             <div class="row-rules mr40">
-              <span>{{ $t("datasource.req_param") }}</span>
+              <span>{{ $t('datasource.req_param') }}</span>
             </div>
             <!-- HTTP 请求参数 -->
             <el-form-item>
@@ -462,7 +496,7 @@
           :rules="rule"
         >
           <div class="row-rules">
-            <span>{{ $t("datasource.column_info") }}</span>
+            <span>{{ $t('datasource.column_info') }}</span>
           </div>
           <div class="table-container">
             <el-table
@@ -490,7 +524,8 @@
               </el-table-column>
               <el-table-column prop="name" :label="$t('dataset.field_rename')">
                 <template slot-scope="scope">
-                  <el-input :disabled="scope.row.children"
+                  <el-input
+                    :disabled="scope.row.children"
                     size="mini"
                     type="text"
                     v-model="scope.row.name"
@@ -504,7 +539,8 @@
                 :label="$t('dataset.field_type')"
               >
                 <template slot-scope="scope">
-                  <el-select :disabled="scope.row.children"
+                  <el-select
+                    :disabled="scope.row.children"
                     v-model="scope.row.deExtractType"
                     size="mini"
                     style="display: inline-block; width: 120px"
@@ -540,7 +576,7 @@
           </div>
 
           <div class="row-rules">
-            <span>{{ $t("dataset.data_preview") }}</span>
+            <span>{{ $t('dataset.data_preview') }}</span>
           </div>
 
           <ux-grid
@@ -587,7 +623,7 @@
       </el-row>
       <div class="foot">
         <el-button class="btn normal" @click="closeEditItem">{{
-          $t("commons.cancel")
+          $t('commons.cancel')
         }}</el-button>
         <el-button
           class="btn"
@@ -595,21 +631,21 @@
           @click="next"
           :disabled="disabledNext"
           v-show="active === 1"
-          >{{ $t("fu.steps.next") }}
+          >{{ $t('fu.steps.next') }}
         </el-button>
         <el-button
           class="btn"
           type="primary"
           @click="before"
           v-show="active === 2"
-          >{{ $t("fu.steps.prev") }}
+          >{{ $t('fu.steps.prev') }}
         </el-button>
         <el-button
           class="btn"
           type="primary"
           @click="saveItem"
           v-show="active === 2"
-          >{{ $t("commons.save") }}
+          >{{ $t('commons.save') }}
         </el-button>
       </div>
     </el-drawer>
@@ -617,25 +653,24 @@
 </template>
 
 <script>
-import i18n from "@/lang";
-import { checkApiDatasource, getSchema } from "@/api/system/datasource";
-import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
-import dePwd from "@/components/deCustomCm/dePwd.vue";
-import msgCfm from "@/components/msgCfm";
-
+import i18n from '@/lang'
+import { checkApiDatasource, getSchema } from '@/api/system/datasource'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import dePwd from '@/components/deCustomCm/dePwd.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsConfiguration",
+  name: 'DsConfiguration',
   mixins: [msgCfm],
   components: {
     ApiHttpRequestForm,
-    dePwd,
+    dePwd
   },
   props: {
     disabled: {
       type: Boolean,
       default() {
-        return false;
-      },
+        return false
+      }
     },
     method: String,
     request: {},
@@ -643,7 +678,7 @@ export default {
     datasourceType: {},
     showScript: {
       type: Boolean,
-      default: true,
+      default: true
     },
     form: {
       type: Object,
@@ -651,19 +686,19 @@ export default {
         return {
           configuration: {
             initialPoolSize: 5,
-            extraParams: "",
+            extraParams: '',
             minPoolSize: 5,
             maxPoolSize: 50,
             maxIdleTime: 30,
             acquireIncrement: 5,
             idleConnectionTestPeriod: 5,
             connectTimeout: 5,
-            queryTimeout: 30,
+            queryTimeout: 30
           },
-          apiConfiguration: [],
-        };
-      },
-    },
+          apiConfiguration: []
+        }
+      }
+    }
   },
   data() {
     return {
@@ -673,172 +708,172 @@ export default {
         name: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
+          }
         ],
         desc: [
           {
             min: 2,
             max: 50,
-            message: i18n.t("datasource.input_limit_2_50"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_50'),
+            trigger: 'blur'
+          }
         ],
         type: [
           {
             required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.dataBase": [
+        'configuration.dataBase': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_data_base"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_data_base'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectionType": [
+        'configuration.connectionType': [
           {
             required: true,
-            message: i18n.t("datasource.please_select_oracle_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_select_oracle_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.username": [
+        'configuration.username': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_user_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_user_name'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.password": [
+        'configuration.password': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_password"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_password'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.host": [
+        'configuration.host': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_host"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_host'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.url": [
+        'configuration.url': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_port"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_port'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.initialPoolSize": [
+        'configuration.initialPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_initial_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_initial_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.minPoolSize": [
+        'configuration.minPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_min_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_min_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxPoolSize": [
+        'configuration.maxPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxIdleTime": [
+        'configuration.maxIdleTime': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_idle_time"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_idle_time'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.acquireIncrement": [
+        'configuration.acquireIncrement': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_acquire_increment"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_acquire_increment'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.queryTimeout": [
+        'configuration.queryTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_query_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_query_timeout'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectTimeout": [
+        'configuration.connectTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_connect_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_connect_timeout'),
+            trigger: 'blur'
+          }
         ],
         url: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
         dataPath: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_dataPath"),
-            trigger: "blur",
-          },
-        ],
+            message: i18n.t('datasource.please_input_dataPath'),
+            trigger: 'blur'
+          }
+        ]
       },
-      api_table_title: "",
+      api_table_title: '',
       schemas: [],
       canEdit: false,
       edit_api_item: false,
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: "",
-        url: "",
-        method: "GET",
+        name: '',
+        url: '',
+        method: 'GET',
         request: {
           headers: [{}],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
-          },
+            type: '',
+            raw: '',
+            kvs: []
+          }
         },
-        fields: [],
+        fields: []
       },
       apiItem: {
-        status: "",
-        name: "",
-        url: "",
-        method: "GET",
-        dataPath: "",
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
         request: {
           headers: [],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
+            type: '',
+            raw: '',
+            kvs: []
           },
-          authManager: {},
+          authManager: {}
         },
         fields: [],
         jsonFields: [
@@ -846,57 +881,57 @@ export default {
             deType: 0,
             size: 65535,
             children: null,
-            name: "comments",
+            name: 'comments',
             checked: false,
             extField: 0,
-            jsonPath: "$[*].comments",
-            type: "STRING",
-            originName: "comments",
-            deExtractType: 0,
-          },
-        ],
+            jsonPath: '$[*].comments',
+            type: 'STRING',
+            originName: 'comments',
+            deExtractType: 0
+          }
+        ]
       },
       reqOptions: [
-        { id: "GET", label: "GET" },
-        { id: "POST", label: "POST" },
+        { id: 'GET', label: 'GET' },
+        { id: 'POST', label: 'POST' }
       ],
       loading: false,
-      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
-      api_step2_active_name: "first",
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
+      api_step2_active_name: 'first',
       fieldTypes: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.time"), value: 1 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
         },
-        { label: this.$t("dataset.location"), value: 5 },
+        { label: this.$t('dataset.location'), value: 5 }
       ],
       height: 500,
       disabledNext: false,
       authMethodList: [
         {
-          id: "passwd",
-          label: i18n.t("datasource.passwd"),
+          id: 'passwd',
+          label: i18n.t('datasource.passwd')
         },
         {
-          id: "kerberos",
-          label: "Kerberos",
-        },
+          id: 'kerberos',
+          label: 'Kerberos'
+        }
       ],
       fieldOptions: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
-        },
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
+        }
       ],
-      certinKey: false,
-    };
+      certinKey: false
+    }
   },
   created() {},
   watch: {},
@@ -904,90 +939,87 @@ export default {
     getSchema() {
       this.$refs.DsConfig.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.configuration = JSON.stringify(data.configuration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
           getSchema(data).then((res) => {
-            this.schemas = res.data;
-            this.$success(i18n.t("commons.success"));
-          });
+            this.schemas = res.data
+            this.$success(i18n.t('commons.success'))
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false;
+        let hasRepeatName = false
         this.form.apiConfiguration.forEach((item) => {
           if (
             item.name === this.apiItem.name &&
             item.serialNumber !== this.apiItem.serialNumber
           ) {
-            hasRepeatName = true;
+            hasRepeatName = true
           }
-        });
+        })
         if (hasRepeatName) {
-          this.$message.error(i18n.t("datasource.has_repeat_name"));
-          return;
+          this.$message.error(i18n.t('datasource.has_repeat_name'))
+          return
         }
-
         this.$refs.apiItemBasicInfo.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            this.loading = true;
-            this.disabledNext = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            this.loading = true
+            this.disabledNext = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-                this.apiItem.status = "Success";
-                this.$success(i18n.t("commons.success"));
-                this.active++;
-                this.apiItem.jsonFields = res.data.jsonFields;
-                this.apiItem.fields = [];
-                this.handleFiledChange();
-                this.previewData();
+                this.loading = false
+                this.disabledNext = false
+                this.apiItem.status = 'Success'
+                this.$success(i18n.t('commons.success'))
+                this.active++
+                this.apiItem.jsonFields = res.data.jsonFields
+                this.apiItem.fields = []
+                this.handleFiledChange()
+                this.previewData()
               })
               .catch((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-              });
+                this.loading = false
+                this.disabledNext = false
+              })
           } else {
-            this.apiItem.fields = [];
-            return false;
+            this.apiItem.fields = []
+            return false
           }
-        });
+        })
       }
     },
     before() {
-      this.active--;
+      this.active--
     },
     closeEditItem() {
-      this.active = 0;
-      this.$refs.apiItemBasicInfo.clearValidate();
-      this.edit_api_item = false;
+      this.active = 0
+      this.$refs.apiItemBasicInfo.clearValidate()
+      this.edit_api_item = false
     },
     saveItem() {
       if (this.apiItem.fields.length === 0) {
-        this.$message.warning(i18n.t("datasource.api_field_not_empty"));
-        return;
+        this.$message.warning(i18n.t('datasource.api_field_not_empty'))
+        return
       }
-
       for (var i = 0; i < this.apiItem.fields.length - 1; i++) {
         for (var j = i + 1; j < this.apiItem.fields.length; j++) {
           if (this.apiItem.fields[i].name === this.apiItem.fields[j].name) {
             this.$message.error(
               this.apiItem.fields[i].name +
-                ", " +
-                i18n.t("datasource.has_repeat_field_name")
-            );
-            return;
+                ', ' +
+                i18n.t('datasource.has_repeat_field_name')
+            )
+            return
           }
         }
       }
-      this.active = 0;
-      this.edit_api_item = false;
-
+      this.active = 0
+      this.edit_api_item = false
       if (!this.add_api_item) {
         for (var i = 0; i < this.form.apiConfiguration.length; i++) {
           if (
@@ -996,71 +1028,75 @@ export default {
           ) {
             this.form.apiConfiguration[i] = JSON.parse(
               JSON.stringify(this.apiItem)
-            );
-            this.certinKey = !this.certinKey;
+            )
+            this.certinKey = !this.certinKey
           }
         }
       } else {
-        this.form.apiConfiguration.push(this.apiItem);
+        this.form.apiConfiguration.push(this.apiItem)
       }
     },
     copyItem(item) {
-      var newItem = JSON.parse(JSON.stringify(item));
+      var newItem = JSON.parse(JSON.stringify(item))
       newItem.serialNumber =
         this.form.apiConfiguration[this.form.apiConfiguration.length - 1]
-          .serialNumber + 1;
-      var reg = new RegExp(item.name + "_copy_" + "([0-9]*)", "gim");
-      var number = 0;
+          .serialNumber + 1
+      var reg = new RegExp(item.name + '_copy_' + '([0-9]*)', 'gim')
+      var number = 0
       for (var i = 1; i < this.form.apiConfiguration.length; i++) {
-        var match = this.form.apiConfiguration[i].name.match(reg);
+        var match = this.form.apiConfiguration[i].name.match(reg)
         if (match !== null) {
           var num = match[0].substring(
             this.form.apiConfiguration[i].name.length + 5,
             match[0].length - 1
-          );
+          )
           if (parseInt(num) != NaN && parseInt(num) > number) {
-            number = parseInt(num);
+            number = parseInt(num)
           }
         }
       }
-      number = number + 1;
-      newItem.name = item.name + "_copy_" + number;
-      this.form.apiConfiguration.push(newItem);
-      this.openMessageSuccess("datasource.success_copy");
+      number = number + 1
+      newItem.name = item.name + '_copy_' + number
+      this.form.apiConfiguration.push(newItem)
+      this.openMessageSuccess('datasource.success_copy')
     },
     addApiItem(item) {
+      if (this.disabled) {
+        return
+      }
       if (item) {
-        this.add_api_item = false;
-        this.api_table_title = this.$t("datasource.edit_api_table");
-        this.apiItem = JSON.parse(JSON.stringify(item));
+        this.add_api_item = false
+        this.api_table_title = this.$t('datasource.edit_api_table')
+        this.apiItem = JSON.parse(JSON.stringify(item))
       } else {
-        this.add_api_item = true;
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
+        this.add_api_item = true
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
         this.apiItem.serialNumber =
           this.form.apiConfiguration.length > 0
             ? this.form.apiConfiguration[this.form.apiConfiguration.length - 1]
                 .serialNumber + 1
-            : 0;
-        this.api_table_title = this.$t("datasource.add_api_table");
+            : 0
+        this.api_table_title = this.$t('datasource.add_api_table')
       }
-      this.active = 1;
-      this.edit_api_item = true;
+      this.active = 1
+      this.edit_api_item = true
     },
     deleteItem(item) {
       this.form.apiConfiguration.splice(
         this.form.apiConfiguration.indexOf(item),
         1
-      );
-      this.openMessageSuccess("commons.delete_success");
+      )
+      this.$refs[`apiTable${item.name}`][0].doClose()
+      this.openMessageSuccess('commons.delete_success')
     },
     cancelItem({ name }) {
-      this.$refs["apiTable" + name].doClose();
+      this.$refs[`apiTable${name}`][0].doClose()
     },
     handleCheckAllChange(row) {
-      this.handleCheckChange(row);
-      this.apiItem.fields = [];
-      this.handleFiledChange(row);
-      this.previewData();
+      this.handleCheckChange(row)
+      this.apiItem.fields = []
+      this.handleFiledChange(row)
+      this.previewData()
     },
     handleFiledChange() {
       for (var i = 0; i < this.apiItem.jsonFields.length; i++) {
@@ -1068,50 +1104,49 @@ export default {
           this.apiItem.jsonFields[i].checked &&
           this.apiItem.jsonFields[i].children === undefined
         ) {
-          this.apiItem.fields.push(this.apiItem.jsonFields[i]);
+          this.apiItem.fields.push(this.apiItem.jsonFields[i])
         }
         if (this.apiItem.jsonFields[i].children !== undefined) {
-          this.handleFiledChange2(this.apiItem.jsonFields[i].children);
+          this.handleFiledChange2(this.apiItem.jsonFields[i].children)
         }
       }
     },
-
     handleFiledChange2(jsonFields) {
       for (var i = 0; i < jsonFields.length; i++) {
         if (jsonFields[i].checked && jsonFields[i].children === undefined) {
           for (var j = 0; j < this.apiItem.fields.length; j++) {
             if (this.apiItem.fields[j].name === jsonFields[i].name) {
               this.$nextTick(() => {
-                jsonFields[i].checked = false;
-              });
+                jsonFields[i].checked = false
+              })
               this.$message.error(
                 jsonFields[i].name +
-                  ", " +
-                  i18n.t("datasource.has_repeat_field_name")
-              );
-              return;
+                  ', ' +
+                  i18n.t('datasource.has_repeat_field_name')
+              )
+              return
             }
           }
-          this.apiItem.fields.push(jsonFields[i]);
+          this.apiItem.fields.push(jsonFields[i])
         }
         if (jsonFields[i].children !== undefined) {
-          this.handleFiledChange2(jsonFields[i].children);
+          this.handleFiledChange2(jsonFields[i].children)
         }
       }
     },
     previewData() {
-      let datas = [];
-      let maxPreviewNum = 0;
+      let datas = []
+      let maxPreviewNum = 0
       for (let j = 0; j < this.apiItem.fields.length; j++) {
         if (
           this.apiItem.fields[j].value &&
           this.apiItem.fields[j].value.length > maxPreviewNum
         ) {
-          maxPreviewNum = this.apiItem.fields[j].value.length;
+          maxPreviewNum = this.apiItem.fields[j].value.length
         }
       }
       for (let i = 0; i < maxPreviewNum; i++) {
-        datas.push({});
+        datas.push({})
       }
       for (let i = 0; i < this.apiItem.fields.length; i++) {
         for (let j = 0; j < this.apiItem.fields[i].value.length; j++) {
@@ -1119,25 +1154,25 @@ export default {
             datas[j],
             this.apiItem.fields[i].name,
             this.apiItem.fields[i].value[j]
-          );
+          )
         }
-        this.$refs.plxTable.reloadData(datas);
+        this.$refs.plxTable.reloadData(datas)
       }
     },
     handleCheckChange(node) {
       if (node.children !== undefined) {
         node.children.forEach((item) => {
-          item.checked = node.checked;
-          this.handleCheckChange(item);
-        });
+          item.checked = node.checked
+          this.handleCheckChange(item)
+        })
       }
     },
     fieldNameChange(row) {
-      this.previewData();
+      this.previewData()
     },
-    fieldTypeChange(row) {},
-  },
-};
+    fieldTypeChange(row) {}
+  }
+}
 </script>
 
 <style lang="scss">
@@ -1145,12 +1180,10 @@ export default {
   padding: 20px 24px !important;
   display: flex;
   flex-wrap: wrap;
-
   .small {
     height: 28px;
     min-width: 48px !important;
   }
-
   .tips {
     font-family: PingFang SC;
     font-size: 14px;
@@ -1159,13 +1192,11 @@ export default {
     margin-left: 8.67px;
     color: var(--deTextPrimary, #1f2329);
   }
-
   i {
     font-size: 14.666666030883789px;
     color: var(--deWarning, #ff8800);
     line-height: 22px;
   }
-
   .foot {
     text-align: right;
     width: 100%;
@@ -1182,7 +1213,6 @@ export default {
   margin: 12px 0 16px 0;
   display: inline-block;
 }
-
 .de-mar0 {
   margin-top: 0;
 }
@@ -1197,7 +1227,6 @@ export default {
     color: #1f2329;
     position: relative;
     border-bottom: 1px solid rgba(187, 191, 196, 0.5);
-
     .el-drawer__close-btn {
       position: absolute;
       right: 24px;
@@ -1208,16 +1237,13 @@ export default {
       align-items: center;
       justify-content: center;
     }
-
     .el-drawer__close-btn:hover {
       background: #e9e9ea;
     }
   }
-
   .el-drawer__body {
     padding: 0 24px 81px 24px;
   }
-
   .row-rules {
     display: flex;
     align-items: center;
@@ -1228,9 +1254,8 @@ export default {
     line-height: 22px;
     padding-left: 10px;
     margin: 24px 0 16px 0;
-
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       left: 0;
       top: 50%;
@@ -1240,28 +1265,23 @@ export default {
       background: #3370ff;
     }
   }
-
   .input-with-select {
     .el-input-group__prepend {
       background-color: #fff;
       border-color: #bbbfc4;
-
       .el-select {
         width: 84px !important;
         color: #1f2329;
       }
     }
   }
-
   ::v-deep .el-form-item__label {
     width: 100% !important;
     text-align: left;
   }
-
   .el-steps {
     margin-top: 23px !important;
     justify-content: center;
-
     .el-step__line {
       line-height: 1.5;
       text-align: center;
@@ -1273,12 +1293,10 @@ export default {
       left: calc(50% + 22px) !important;
       width: 100px;
       margin-right: 0px;
-
       i {
         border-top: none;
       }
     }
-
     .el-step__icon.is-text {
       border: none;
       font-family: PingFang SC;
@@ -1288,13 +1306,11 @@ export default {
       height: 28px;
       background: #3370ff;
     }
-
     .el-step__icon.is-icon {
       i {
         font-size: 27px;
       }
     }
-
     .el-step__title {
       font-family: PingFang SC;
       font-size: 14px;
@@ -1304,7 +1320,6 @@ export default {
       color: #1f2329;
       margin-top: 4px;
     }
-
     .is-process {
       .el-step__icon.is-text {
         background: none;
@@ -1312,39 +1327,31 @@ export default {
         border: 1px solid #8f959e;
       }
     }
-
     .is-process.el-step__title {
       font-weight: 400;
       color: #8f959e;
     }
   }
-
   .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
     display: none;
   }
-
   .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::after {
-    content: "*";
+    content: '*';
     color: #f54a45;
     margin-left: 2px;
   }
-
   ::v-deep .el-form-item__content {
     margin-left: 0 !important;
   }
-
   .el-form-item {
     margin-bottom: 28px;
   }
-
   .el-form-item__label {
     padding-bottom: 8px;
   }
-
   .mr40 {
     margin-top: 40px;
   }
-
   .btn {
     border-radius: 4px;
     padding: 5px 26px 5px 26px;
@@ -1357,30 +1364,25 @@ export default {
     border: none;
     box-sizing: border-box;
   }
-
   .normal {
     color: #1f2329;
     border: 1px solid #bbbfc4;
     margin-left: 12px;
   }
-
   .table-container {
     padding: 20px;
     border: 1px solid #dee0e3;
-
     .el-table__header-wrapper {
       background-color: #f5f6f7;
       border-top: 1px solid #dee0e3;
       // border-top: 1px solid rgba(31, 35, 41, 0.15);
     }
-
     .el-table__fixed-header-wrapper {
       th {
         background-color: var(--TableBG, #f5f6f7) !important;
       }
     }
   }
-
   .foot {
     width: 100%;
     z-index: 5;
@@ -1393,7 +1395,6 @@ export default {
     background: #ffffff;
     box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.05);
   }
-
   .el-checkbox__label {
     width: 150px;
     overflow: hidden;
@@ -1409,7 +1410,6 @@ export default {
       margin-top: 4px;
     }
   }
-
   .cell.el-tooltip {
     display: flex;
     align-items: center;
@@ -1426,13 +1426,11 @@ export default {
   margin-bottom: 12px;
   padding: 20px 16px;
   font-family: PingFang SC;
-
   .name {
     font-size: 16px;
     font-weight: 500;
     margin-right: 8px;
   }
-
   .req-title,
   .req-value {
     display: flex;
@@ -1445,12 +1443,10 @@ export default {
       margin-left: 84px;
     }
   }
-
   .req-title {
     color: var(--deTextPrimary, #1f2329);
     margin: 16px 0 4px 0;
   }
-
   .req-value {
     color: var(--deTextSecondary, #646a73);
   }
@@ -1459,14 +1455,12 @@ export default {
     margin-right: 20px;
     color: var(--deTextSecondary, #646a73);
   }
-
   .de-delete-icon {
     cursor: pointer;
     &:hover {
       color: var(--deDanger, #f54a45);
     }
   }
-
   .de-tag {
     display: inline-flex;
     justify-content: center;
@@ -1484,21 +1478,17 @@ export default {
   ::v-deep .el-input__inner {
     text-align: left;
   }
-
   ::v-deep.el-input-number__decrease,
   ::v-deep.el-input-number__increase {
     background: transparent;
   }
-
   &.is-disabled {
     .el-input-number__decrease {
       border-right-color: #e4e7ed;
     }
-
     .el-input-number__increase {
       border-bottom-color: #e4e7ed;
     }
   }
 }
-</style>
-
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index d6225c3e21..f74a99a5db 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -7,18 +7,18 @@
           params &&
           params.id &&
           params.showModel &&
-          params.showModel === "show" &&
+          params.showModel === 'show' &&
           !canEdit
-            ? $t("datasource.show_info")
-            : formType == "add"
-            ? $t("datasource.create")
-            : $t("datasource.modify")
+            ? $t('datasource.show_info')
+            : formType == 'add'
+            ? $t('datasource.create')
+            : $t('datasource.modify')
         }}
       </span>
       <div class="apply">
         <template v-if="canEdit">
           <deBtn secondary @click="backToList"
-            >{{ $t("commons.cancel") }}
+            >{{ $t('commons.cancel') }}
           </deBtn>
           <deBtn
             secondary
@@ -27,7 +27,7 @@
               hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t("commons.validate") }}
+            >{{ $t('commons.validate') }}
           </deBtn>
           <deBtn
             v-if="
@@ -36,7 +36,7 @@
             "
             type="primary"
             @click="save"
-            >{{ $t("commons.save") }}
+            >{{ $t('commons.save') }}
           </deBtn>
         </template>
         <template v-else>
@@ -47,7 +47,7 @@
                 : hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t("commons.validate") }}
+            >{{ $t('commons.validate') }}
           </deBtn>
           <deBtn
             v-if="
@@ -56,7 +56,7 @@
             "
             type="primary"
             @click="changeEdit"
-            >{{ $t("commons.edit") }}
+            >{{ $t('commons.edit') }}
           </deBtn>
         </template>
       </div>
@@ -142,7 +142,7 @@
 </template>
 
 <script>
-import LayoutContent from "@/components/business/LayoutContent";
+import LayoutContent from '@/components/business/LayoutContent'
 import {
   addDs,
   editDs,
@@ -151,24 +151,25 @@ import {
   validateDsById,
   checkApiDatasource,
   listDriverByType,
-} from "@/api/system/datasource";
-import { $confirm } from "@/utils/message";
-import i18n from "@/lang/index";
-import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
-import DsConfiguration from "@/views/system/datasource/DsConfiguration";
-import PluginCom from "@/views/system/plugin/PluginCom";
-import { listDatasourceType, listDatasource } from "@/api/system/datasource";
-import deTextarea from "@/components/deCustomCm/deTextarea.vue";
-import msgCfm from "@/components/msgCfm";
+  getDatasourceDetail
+} from '@/api/system/datasource'
+import { $confirm } from '@/utils/message'
+import i18n from '@/lang/index'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
+import PluginCom from '@/views/system/plugin/PluginCom'
+import { listDatasourceType, listDatasource } from '@/api/system/datasource'
+import deTextarea from '@/components/deCustomCm/deTextarea.vue'
+import msgCfm from '@/components/msgCfm'
 export default {
-  name: "DsForm",
+  name: 'DsForm',
   mixins: [msgCfm],
   components: {
     DsConfiguration,
     LayoutContent,
     ApiHttpRequestForm,
     PluginCom,
-    deTextarea,
+    deTextarea
   },
   data() {
     return {
@@ -176,154 +177,154 @@ export default {
       form: {
         configuration: {
           initialPoolSize: 5,
-          extraParams: "",
+          extraParams: '',
           minPoolSize: 5,
           maxPoolSize: 50,
           maxIdleTime: 30,
           acquireIncrement: 5,
           idleConnectionTestPeriod: 5,
           connectTimeout: 5,
-          customDriver: "default",
+          customDriver: 'default',
           queryTimeout: 30,
-          host: "",
+          host: ''
         },
-        apiConfiguration: [],
+        apiConfiguration: []
       },
       datasourceType: {},
       rule: {
         name: [
           {
             required: true,
-            message: i18n.t("datasource.input_name"),
-            trigger: "blur",
+            message: i18n.t('datasource.input_name'),
+            trigger: 'blur'
           },
           {
             min: 2,
             max: 25,
-            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
+            trigger: 'blur'
+          }
         ],
         desc: [
           {
             min: 2,
             max: 50,
-            message: i18n.t("datasource.input_limit_2_50"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.input_limit_2_50'),
+            trigger: 'blur'
+          }
         ],
         type: [
           {
             required: true,
-            message: i18n.t("datasource.please_choose_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_choose_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.dataBase": [
+        'configuration.dataBase': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_data_base"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_data_base'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectionType": [
+        'configuration.connectionType': [
           {
             required: true,
-            message: i18n.t("datasource.please_select_oracle_type"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_select_oracle_type'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.username": [
+        'configuration.username': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_user_name"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_user_name'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.password": [
+        'configuration.password': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_password"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_password'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.host": [
+        'configuration.host': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_host"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_host'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.url": [
+        'configuration.url': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.port": [
+        'configuration.port': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_port"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_port'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.initialPoolSize": [
+        'configuration.initialPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_initial_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_initial_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.minPoolSize": [
+        'configuration.minPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_min_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_min_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxPoolSize": [
+        'configuration.maxPoolSize': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_pool_size"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_pool_size'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.maxIdleTime": [
+        'configuration.maxIdleTime': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_max_idle_time"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_max_idle_time'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.acquireIncrement": [
+        'configuration.acquireIncrement': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_acquire_increment"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_acquire_increment'),
+            trigger: 'blur'
+          }
         ],
-        "configuration.connectTimeout": [
+        'configuration.connectTimeout': [
           {
             required: true,
-            message: i18n.t("datasource.please_input_connect_timeout"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_connect_timeout'),
+            trigger: 'blur'
+          }
         ],
         url: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_url"),
-            trigger: "blur",
-          },
+            message: i18n.t('datasource.please_input_url'),
+            trigger: 'blur'
+          }
         ],
         dataPath: [
           {
             required: true,
-            message: i18n.t("datasource.please_input_dataPath"),
-            trigger: "blur",
-          },
-        ],
+            message: i18n.t('datasource.please_input_dataPath'),
+            trigger: 'blur'
+          }
+        ]
       },
       schemas: [],
       canEdit: false,
@@ -332,236 +333,242 @@ export default {
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: "",
-        url: "",
-        method: "GET",
+        name: '',
+        url: '',
+        method: 'GET',
         request: {
           headers: [{}],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
-          },
+            type: '',
+            raw: '',
+            kvs: []
+          }
         },
-        fields: [],
+        fields: []
       },
       apiItem: {
-        status: "",
-        name: "",
-        url: "",
-        method: "GET",
-        dataPath: "",
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
         request: {
           headers: [],
           body: {
-            type: "",
-            raw: "",
-            kvs: [],
+            type: '',
+            raw: '',
+            kvs: []
           },
-          authManager: {},
+          authManager: {}
         },
-        fields: [],
+        fields: []
       },
       reqOptions: [
-        { id: "GET", label: "GET" },
-        { id: "POST", label: "POST" },
+        { id: 'GET', label: 'GET' },
+        { id: 'POST', label: 'POST' }
       ],
       loading: false,
-      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
-      api_table_title: "",
-      api_step2_active_name: "first",
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
+      api_table_title: '',
+      api_step2_active_name: 'first',
       fieldTypes: [
-        { label: this.$t("dataset.text"), value: 0 },
-        { label: this.$t("dataset.time"), value: 1 },
-        { label: this.$t("dataset.value"), value: 2 },
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
         {
           label:
-            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
-          value: 3,
+            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
+          value: 3
         },
-        { label: this.$t("dataset.location"), value: 5 },
+        { label: this.$t('dataset.location'), value: 5 }
       ],
       height: 500,
       disabledNext: false,
       driverList: [],
       tData: [],
       dsTypes: [],
-      msgNodeId: "",
+      msgNodeId: '',
       params: {},
-      formType: "add",
-    };
+      formType: 'add'
+    }
   },
   async created() {
-    await this.datasourceTypes();
-    this.queryTreeDatas();
-    const { id, showModel, msgNodeId, type } = this.$route.params;
-    this.params = this.$route.params;
+    await this.datasourceTypes()
+    this.queryTreeDatas()
+    const { id, showModel, msgNodeId, type } = this.$route.query
+    this.params = this.$route.query
     if (id) {
-      this.edit(this.params);
-      this.changeType(true);
+      await this.getDatasourceDetail(id, showModel)
+      this.edit(this.params)
+      this.changeType(true)
     } else {
-      this.canEdit = true;
-      this.disabled = false;
+      this.canEdit = true
+      this.disabled = false
       if (type) {
-        this.setType();
-        this.changeType();
+        this.setType()
+        this.changeType()
       }
     }
-    this.disabled = Boolean(id) && showModel === "show" && !this.canEdit;
+    this.disabled = Boolean(id) && showModel === 'show' && !this.canEdit
   },
   methods: {
     datasourceTypes() {
       return listDatasourceType().then((res) => {
-        this.dsTypes = res.data || [];
-      });
+        this.dsTypes = res.data || []
+      })
+    },
+    getDatasourceDetail(id, showModel) {
+      return getDatasourceDetail(id).then((res) => {
+        this.params = {...res.data, showModel}
+      })
     },
     queryTreeDatas() {
       listDatasource().then((res) => {
-        this.tData = this.buildTree(res.data);
-      });
+        this.tData = this.buildTree(res.data)
+      })
     },
     buildTree(array) {
-      const types = {};
-      const newArr = [];
+      const types = {}
+      const newArr = []
       for (let index = 0; index < array.length; index++) {
-        const element = array[index];
+        const element = array[index]
         if (this.msgNodeId) {
           if (element.id === this.msgNodeId) {
-            element.msgNode = true;
+            element.msgNode = true
           }
         }
         if (!(element.type in types)) {
-          types[element.type] = [];
+          types[element.type] = []
           // newArr.push(...element, ...{ children: types[element.type] })
           newArr.push({
             id: element.type,
             name: element.typeDesc,
-            type: "folder",
-            children: types[element.type],
-          });
+            type: 'folder',
+            children: types[element.type]
+          })
         }
-        types[element.type].push(element);
+        types[element.type].push(element)
         // newArr.children.push({ id: element.id, label: element.name })
       }
-      return newArr;
+      return newArr
     },
     setType() {
-      this.form.type = this.params.type;
+      this.form.type = this.params.type
       this.form.configuration = {
         initialPoolSize: 5,
-        extraParams: "",
+        extraParams: '',
         minPoolSize: 5,
         maxPoolSize: 50,
         maxIdleTime: 30,
         acquireIncrement: 5,
         idleConnectionTestPeriod: 5,
         connectTimeout: 5,
-        customDriver: "default",
-        queryTimeout: 30,
-      };
+        customDriver: 'default',
+        queryTimeout: 30
+      }
     },
     changeEdit() {
-      this.canEdit = true;
-      this.formType = "modify";
+      this.canEdit = true
+      this.formType = 'modify'
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === "show" &&
-        !this.canEdit;
+        this.params.showModel === 'show' &&
+        !this.canEdit
     },
     edit(row) {
-      this.formType = "modify";
-      this.form = JSON.parse(JSON.stringify(row));
-      if (row.type === "api") {
+      this.formType = 'modify'
+      this.form = JSON.parse(JSON.stringify(row))
+      if (row.type === 'api') {
         this.originConfiguration = JSON.parse(
           JSON.stringify(this.form.apiConfiguration)
-        );
+        )
         this.originConfiguration.forEach((item) => {
-          delete item.status;
-        });
-        this.originConfiguration = JSON.stringify(this.originConfiguration);
+          delete item.status
+        })
+        this.originConfiguration = JSON.stringify(this.originConfiguration)
       } else {
-        this.form.configuration = JSON.parse(this.form.configuration);
-        this.originConfiguration = JSON.stringify(this.form.configuration);
+        this.form.configuration = JSON.parse(this.form.configuration)
+        this.originConfiguration = JSON.stringify(this.form.configuration)
       }
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === "show" &&
-        !this.canEdit;
+        this.params.showModel === 'show' &&
+        !this.canEdit
     },
     reset() {
-      this.$refs.dsForm.resetFields();
+      this.$refs.dsForm.resetFields()
     },
     save() {
       if (
         !this.form.configuration.schema &&
-        (this.form.type === "oracle" ||
-          this.form.type === "sqlServer" ||
-          this.form.type === "pg" ||
-          this.form.type === "redshift" ||
-          this.form.type === "db2")
+        (this.form.type === 'oracle' ||
+          this.form.type === 'sqlServer' ||
+          this.form.type === 'pg' ||
+          this.form.type === 'redshift' ||
+          this.form.type === 'db2')
       ) {
-        this.$message.error(i18n.t("datasource.please_choose_schema"));
-        return;
+        this.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
       }
       if (
-        this.form.type !== "es" &&
-        this.form.type !== "api" &&
+        this.form.type !== 'es' &&
+        this.form.type !== 'api' &&
         this.form.configuration.port <= 0
       ) {
-        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
       }
       if (
         this.form.configuration.initialPoolSize < 0 ||
         this.form.configuration.minPoolSize < 0 ||
         this.form.configuration.maxPoolSize < 0
       ) {
-        this.$message.error(i18n.t("datasource.no_less_then_0"));
-        return;
+        this.$message.error(i18n.t('datasource.no_less_then_0'))
+        return
       }
-      let repeat = false;
-      const repeatDsName = [];
+      let repeat = false
+      const repeatDsName = []
       if (!this.datasourceType.isPlugin) {
         this.tData.forEach((item) => {
           if (item.id === this.form.type) {
             item.children.forEach((child) => {
-              if (this.formType === "modify" && child.id === this.form.id) {
-                return;
+              if (this.formType === 'modify' && child.id === this.form.id) {
+                return
               }
-              const configuration = JSON.parse(child.configuration);
+              const configuration = JSON.parse(child.configuration)
               if (!configuration) {
-                return;
+                return
               }
               switch (this.form.type) {
-                case "mysql":
-                case "TiDB":
-                case "StarRocks":
-                case "hive":
-                case "mariadb":
-                case "ds_doris":
-                case "ck":
-                case "mongo":
-                case "mariadb":
-                case "impala":
+                case 'mysql':
+                case 'TiDB':
+                case 'StarRocks':
+                case 'hive':
+                case 'mariadb':
+                case 'ds_doris':
+                case 'ck':
+                case 'mongo':
+                case 'mariadb':
+                case 'impala':
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
-                  break;
-                case "pg":
-                case "sqlServer":
-                case "redshift":
-                case "oracle":
-                case "db2":
+                  break
+                case 'pg':
+                case 'sqlServer':
+                case 'redshift':
+                case 'oracle':
+                case 'db2':
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
@@ -569,33 +576,33 @@ export default {
                     configuration.port == this.form.configuration.port &&
                     configuration.schema == this.form.configuration.schema
                   ) {
-                    repeatDsName.push(child.name);
-                    repeat = true;
+                    repeatDsName.push(child.name)
+                    repeat = true
                   }
-                  break;
-                case "es":
+                  break
+                case 'es':
                   if (configuration.url == this.form.configuration.url) {
-                    repeatDsName.push(child.name);
-                    repeat = true;
+                    repeatDsName.push(child.name)
+                    repeat = true
                   }
-                  break;
+                  break
                 default:
-                  break;
+                  break
               }
-            });
+            })
           }
-        });
+        })
       } else {
         if (this.datasourceType.isJdbc) {
           this.tData.forEach((item) => {
             if (item.id === this.form.type) {
               item.children.forEach((child) => {
-                if (this.formType === "modify" && child.id === this.form.id) {
-                  return;
+                if (this.formType === 'modify' && child.id === this.form.id) {
+                  return
                 }
-                const configuration = JSON.parse(child.configuration);
+                const configuration = JSON.parse(child.configuration)
                 if (!configuration) {
-                  return;
+                  return
                 }
                 if (configuration.schema != null) {
                   if (
@@ -605,8 +612,8 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
                 } else {
                   if (
@@ -615,330 +622,330 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true;
-                    repeatDsName.push(child.name);
+                    repeat = true
+                    repeatDsName.push(child.name)
                   }
                 }
-              });
+              })
             }
-          });
+          })
         }
       }
-      let status = null;
+      let status = null
       if (this.datasourceType.isPlugin) {
-        status = this.$refs["pluginDsConfig"].callPluginInner({
-          methodName: "validate",
-        });
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
       } else {
-        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
-          status = valid;
-        });
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
+        })
       }
       if (!status) {
-        return;
+        return
       }
       this.$refs.dsForm.validate((valid) => {
         if (!valid) {
-          return false;
+          return false
         }
-        const method = this.formType === "add" ? addDs : editDs;
-        const form = JSON.parse(JSON.stringify(this.form));
-        if (form.type === "api") {
+        const method = this.formType === 'add' ? addDs : editDs
+        const form = JSON.parse(JSON.stringify(this.form))
+        if (form.type === 'api') {
           if (this.form.apiConfiguration.length < 1) {
-            this.$message.error(i18n.t("datasource.api_table_not_empty"));
-            return;
+            this.$message.error(i18n.t('datasource.api_table_not_empty'))
+            return
           }
           form.apiConfiguration.forEach((item) => {
-            delete item.status;
-          });
-          form.configuration = JSON.stringify(form.apiConfiguration);
+            delete item.status
+          })
+          form.configuration = JSON.stringify(form.apiConfiguration)
         } else {
-          form.configuration = JSON.stringify(form.configuration);
+          form.configuration = JSON.stringify(form.configuration)
         }
         if (
-          this.formType === "modify" &&
+          this.formType === 'modify' &&
           this.originConfiguration !== form.configuration
         ) {
           if (repeat) {
             $confirm(
-              i18n.t("datasource.repeat_datasource_msg") +
-                "[" +
-                repeatDsName.join(",") +
-                "], " +
-                i18n.t("datasource.confirm_save"),
+              i18n.t('datasource.repeat_datasource_msg') +
+                '[' +
+                repeatDsName.join(',') +
+                '], ' +
+                i18n.t('datasource.confirm_save'),
               () => {
-                $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
-                  this.method(method, form);
-                });
+                $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+                  this.method(method, form)
+                })
               }
-            );
+            )
           } else {
-            $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
-              this.method(method, form);
-            });
+            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+              this.method(method, form)
+            })
           }
-          return;
+          return
         }
         if (repeat) {
           $confirm(
-            i18n.t("datasource.repeat_datasource_msg") +
-              "[" +
-              repeatDsName.join(",") +
-              "], " +
-              i18n.t("datasource.confirm_save"),
+            i18n.t('datasource.repeat_datasource_msg') +
+              '[' +
+              repeatDsName.join(',') +
+              '], ' +
+              i18n.t('datasource.confirm_save'),
             () => {
-              this.method(method, form);
+              this.method(method, form)
             }
-          );
+          )
         } else {
-          this.method(method, form);
+          this.method(method, form)
         }
-      });
+      })
     },
     method(method, form) {
       method(form).then((res) => {
-        this.$success(i18n.t("commons.save_success"));
-        this.refreshType(form);
-        this.backToList();
-      });
+        this.$success(i18n.t('commons.save_success'))
+        this.refreshType(form)
+        this.backToList()
+      })
     },
     getSchema() {
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          data.configuration = JSON.stringify(data.configuration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
           getSchema(data).then((res) => {
-            this.schemas = res.data;
-            this.openMessageSuccess("commons.success");
-          });
+            this.schemas = res.data
+            this.openMessageSuccess('commons.success')
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     validaDatasource() {
-      if (!this.form.configuration.schema && this.form.type === "oracle") {
-        this.openMessageSuccess("datasource.please_choose_schema","error");
-        return;
+      if (!this.form.configuration.schema && this.form.type === 'oracle') {
+        this.openMessageSuccess('datasource.please_choose_schema', 'error')
+        return
       }
       if (
-        this.form.type !== "es" &&
-        this.form.type !== "api" &&
+        this.form.type !== 'es' &&
+        this.form.type !== 'api' &&
         this.form.configuration.port <= 0
       ) {
-        this.openMessageSuccess("datasource.port_no_less_then_0","error");
-        return;
+        this.openMessageSuccess('datasource.port_no_less_then_0', 'error')
+        return
       }
-      let status = null;
+      let status = null
       if (this.datasourceType.isPlugin) {
-        status = this.$refs["pluginDsConfig"].callPluginInner({
-          methodName: "validate",
-        });
+        status = this.$refs['pluginDsConfig'].callPluginInner({
+          methodName: 'validate'
+        })
       } else {
-        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
-          status = valid;
+        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
+          status = valid
           if (!valid) {
-            return;
+            return
           }
-        });
+        })
       }
       if (!status) {
-        return;
+        return
       }
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form));
-          if (data.type === "api") {
-            data.configuration = JSON.stringify(data.apiConfiguration);
+          const data = JSON.parse(JSON.stringify(this.form))
+          if (data.type === 'api') {
+            data.configuration = JSON.stringify(data.apiConfiguration)
           } else {
-            data.configuration = JSON.stringify(data.configuration);
+            data.configuration = JSON.stringify(data.configuration)
           }
-          if (data.showModel === "show" && !this.canEdit) {
+          if (data.showModel === 'show' && !this.canEdit) {
             validateDsById(data.id).then((res) => {
               if (res.success) {
-                this.openMessageSuccess("datasource.validate_success");
+                this.openMessageSuccess('datasource.validate_success')
               } else {
                 if (res.message.length < 2500) {
-                  this.openMessageSuccess(res.message,"error");
+                  this.openMessageSuccess(res.message, 'error')
                 } else {
                   this.openMessageSuccess(
-                    res.message.substring(0, 2500) + "......",
-                    "danger"
-                  );
+                    res.message.substring(0, 2500) + '......',
+                    'danger'
+                  )
                 }
               }
-              this.refreshType(data);
-            });
+              this.refreshType(data)
+            })
           } else {
             validateDs(data)
               .then((res) => {
                 if (res.success) {
-                  this.$success(i18n.t("datasource.validate_success"));
+                  this.$success(i18n.t('datasource.validate_success'))
                 } else {
-                  if (data.type === "api") {
-                    this.form.apiConfiguration = res.data.apiConfiguration;
+                  if (data.type === 'api') {
+                    this.form.apiConfiguration = res.data.apiConfiguration
                   }
                   if (res.message.length < 2500) {
-                    this.openMessageSuccess(res.message,"error");
+                    this.openMessageSuccess(res.message, 'error')
                   } else {
                     this.openMessageSuccess(
-                      res.message.substring(0, 2500) + "......",
-                      "danger"
-                    );
+                      res.message.substring(0, 2500) + '......',
+                      'danger'
+                    )
                   }
                 }
               })
               .catch((res) => {
-                this.openMessageSuccess(res.message,"error");
-              });
+                this.openMessageSuccess(res.message, 'error')
+              })
           }
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if (this.form.type !== "api" && !init) {
-            this.form.configuration.extraParams = this.dsTypes[i].extraParams;
-            this.form.configuration.customDriver = "default";
+          if (this.form.type !== 'api' && !init) {
+            this.form.configuration.extraParams = this.dsTypes[i].extraParams
+            this.form.configuration.customDriver = 'default'
           }
-          this.datasourceType = this.dsTypes[i];
+          this.datasourceType = this.dsTypes[i]
           if (this.datasourceType.isJdbc) {
             listDriverByType(this.datasourceType.type).then((res) => {
-              this.driverList = [];
+              this.driverList = []
               this.driverList.push({
-                id: "default",
-                name: "Default",
-                driverClass: "Default",
-              });
-              this.driverList = this.driverList.concat(res.data);
-            });
+                id: 'default',
+                name: 'Default',
+                driverClass: 'Default'
+              })
+              this.driverList = this.driverList.concat(res.data)
+            })
           }
         }
       }
     },
     backToList() {
-      this.$router.push("/datasource/index");
+      this.$router.push('/datasource/index')
     },
     refreshType(form) {
-      this.$emit("refresh-type", form);
+      this.$emit('refresh-type', form)
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false;
+        let hasRepeatName = false
         if (this.add_api_item) {
           this.form.apiConfiguration.forEach((item) => {
             if (item.name === this.apiItem.name) {
-              hasRepeatName = true;
+              hasRepeatName = true
             }
-          });
+          })
         } else {
-          const index = this.form.apiConfiguration.indexOf(this.apiItem);
+          const index = this.form.apiConfiguration.indexOf(this.apiItem)
           for (let i = 0; i < this.form.apiConfiguration.length; i++) {
             if (
               i !== index &&
               this.form.apiConfiguration[i].name === this.apiItem.name
             ) {
-              hasRepeatName = true;
+              hasRepeatName = true
             }
           }
         }
         if (hasRepeatName) {
-          this.$message.error(i18n.t("datasource.has_repeat_name"));
-          return;
+          this.$message.error(i18n.t('datasource.has_repeat_name'))
+          return
         }
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            data.request = JSON.stringify(data.request);
-            this.loading = true;
-            this.disabledNext = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
+            this.disabledNext = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-                this.apiItem.status = "Success";
-                this.$success(i18n.t("commons.success"));
-                this.active++;
-                this.apiItem.fields = res.data.fields;
-                this.$refs.plxTable.reloadData(res.data.datas);
+                this.loading = false
+                this.disabledNext = false
+                this.apiItem.status = 'Success'
+                this.$success(i18n.t('commons.success'))
+                this.active++
+                this.apiItem.fields = res.data.fields
+                this.$refs.plxTable.reloadData(res.data.datas)
               })
               .catch((res) => {
-                this.loading = false;
-                this.disabledNext = false;
-              });
+                this.loading = false
+                this.disabledNext = false
+              })
           } else {
-            this.apiItem.fields = [];
-            return false;
+            this.apiItem.fields = []
+            return false
           }
-        });
+        })
       }
     },
     before() {
-      this.active--;
+      this.active--
     },
     closeEditItem() {
-      this.active = 0;
-      this.edit_api_item = false;
+      this.active = 0
+      this.edit_api_item = false
     },
     saveItem() {
-      this.active = 0;
-      this.edit_api_item = false;
+      this.active = 0
+      this.edit_api_item = false
       if (this.add_api_item) {
-        this.form.apiConfiguration.push(this.apiItem);
+        this.form.apiConfiguration.push(this.apiItem)
       }
     },
     addApiItem(item) {
       this.$nextTick(() => {
-        this.$refs.apiItem.clearValidate();
-      });
+        this.$refs.apiItem.clearValidate()
+      })
       if (item) {
-        this.add_api_item = false;
-        this.api_table_title = this.$t("datasource.edit_api_table");
-        this.apiItem = item;
+        this.add_api_item = false
+        this.api_table_title = this.$t('datasource.edit_api_table')
+        this.apiItem = item
       } else {
-        this.add_api_item = true;
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
-        this.api_table_title = this.$t("datasource.add_api_table");
+        this.add_api_item = true
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
+        this.api_table_title = this.$t('datasource.add_api_table')
       }
-      this.active = 1;
-      this.edit_api_item = true;
+      this.active = 1
+      this.edit_api_item = true
     },
     deleteItem(item) {
       this.form.apiConfiguration.splice(
         this.form.apiConfiguration.indexOf(item),
         1
-      );
+      )
     },
     validateApi(item) {
       if (undefined) {
       } else {
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem));
-            data.request = JSON.stringify(data.request);
-            this.loading = true;
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false;
-                this.$success(i18n.t("commons.success"));
-                this.apiItem.fields = res.data.fields;
-                this.$refs.plxTable.reloadData(res.data.datas);
+                this.loading = false
+                this.$success(i18n.t('commons.success'))
+                this.apiItem.fields = res.data.fields
+                this.$refs.plxTable.reloadData(res.data.datas)
               })
               .catch((res) => {
-                this.loading = false;
-              });
+                this.loading = false
+              })
           } else {
-            return false;
+            return false
           }
-        });
+        })
       }
     },
-    handleClick(tab, event) {},
-  },
-};
+    handleClick(tab, event) {}
+  }
+}
 </script>
 <style lang="scss" scoped>
 .de-ds-form {
@@ -952,7 +959,7 @@ export default {
     padding: 12px 24px;
     box-shadow: 0px 2px 4px rgba(31, 35, 41, 0.08);
     .name {
-      font-family: "PingFang SC";
+      font-family: 'PingFang SC';
       font-style: normal;
       font-weight: 500;
       font-size: 16px;
diff --git a/frontend/src/views/system/datasource/DsMain.vue b/frontend/src/views/system/datasource/DsMain.vue
index c68c53cc12..25d96e55e9 100644
--- a/frontend/src/views/system/datasource/DsMain.vue
+++ b/frontend/src/views/system/datasource/DsMain.vue
@@ -47,7 +47,6 @@ import DsTree from "./DsTree";
 import DsForm from "./DsForm";
 import dsTable from "./dsTable";
 import DriverForm from "./DriverFormDetail";
-
 export default {
   name: "DsMain",
   components: { DeMainContainer, DeAsideContainer, DsTree },
@@ -128,7 +127,6 @@ export default {
   flex-wrap: wrap;
   display: flex;
   box-sizing: border-box;
-
   .el-empty {
     height: 100%;
   }
@@ -139,7 +137,6 @@ export default {
   min-width: 260px;
   max-width: 460px;
 }
-
 .dsr-route-title {
   width: 100%;
   margin: -2px 0 22px 0;
@@ -147,7 +144,6 @@ export default {
   justify-content: space-between;
   align-content: center;
 }
-
 .is-driver-mgm {
   background-color: var(--MainBG, #f5f6f7);
   padding: 24px;
@@ -155,7 +151,6 @@ export default {
   .ms-main-container {
     height: calc(100vh - 170px);
     background-color: var(--ContentBG, #ffffff);
-
     .tree-style {
       padding-top: 24px;
     }
@@ -166,4 +161,4 @@ export default {
     padding: 24px 0 70px 24px;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/DsTree.vue b/frontend/src/views/system/datasource/DsTree.vue
index fcb2d15f25..ac396184f0 100644
--- a/frontend/src/views/system/datasource/DsTree.vue
+++ b/frontend/src/views/system/datasource/DsTree.vue
@@ -246,7 +246,6 @@ import {
 import { ApplicationContext } from "@/utils/ApplicationContext";
 import deTextarea from "@/components/deCustomCm/deTextarea.vue";
 import msgCfm from "@/components/msgCfm";
-
 export default {
   name: "DsTree",
   mixins: [msgCfm],
@@ -406,7 +405,6 @@ export default {
         }
         if (!(element.type in types)) {
           types[element.type] = [];
-          // newArr.push(...element, ...{ children: types[element.type] })
           newArr.push({
             id: element.type,
             name: element.typeDesc,
@@ -415,7 +413,6 @@ export default {
           });
         }
         types[element.type].push(element);
-        // newArr.children.push({ id: element.id, label: element.name })
       }
       return newArr;
     },
@@ -449,8 +446,8 @@ export default {
     },
     addDb({ type }) {
       this.$router.push({
-        name: "datasource-form",
-        params: { type },
+        path: "/ds-form",
+        query: { type },
       });
     },
     addFolderWithType(data) {
@@ -460,8 +457,8 @@ export default {
         this.editDriver = true;
       } else {
         this.$router.push({
-          name: "datasource-form",
-          params: { type: data.id },
+          path: "/ds-form",
+          query: { type: data.id },
         });
       }
     },
@@ -547,10 +544,13 @@ export default {
     },
     switchMain(component, componentParam, tData, dsTypes) {
       if (component === "DsForm") {
+        const { id, type, showModel } = componentParam;
         this.$router.push({
-          name: "datasource-form",
-          params: {
-            ...componentParam,
+          path: "/ds-form",
+          query: {
+            id,
+            type,
+            showModel,
             msgNodeId: this.msgNodeId,
           },
         });
@@ -608,7 +608,6 @@ export default {
 .custom-tree-container {
   margin-top: 16px;
 }
-
 .custom-tree-node {
   flex: 1;
   display: flex;
@@ -618,7 +617,6 @@ export default {
   padding-right: 8px;
   width: 100%;
 }
-
 .custom-tree-node-list {
   flex: 1;
   display: flex;
@@ -627,33 +625,27 @@ export default {
   font-size: 14px;
   padding: 0 8px;
   width: calc(100% - 40px);
-
   .child {
     /*display: none;*/
     visibility: hidden;
   }
-
   &:hover .child {
     /*display: inline;*/
     visibility: visible;
   }
 }
-
 .tree-list ::v-deep .el-tree-node__expand-icon.is-leaf {
   display: none;
 }
-
 .tree-style {
   padding: 16px 24px;
   height: 100%;
   overflow-y: auto;
-
   .title-text {
     line-height: 26px;
     color: #1f2329;
     margin-bottom: 16px;
   }
-
   .title-operate {
     text-align: right;
     i {
@@ -670,7 +662,6 @@ export default {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-
   .db-card {
     height: 193px;
     width: 270px;
@@ -694,7 +685,6 @@ export default {
       padding: 8px 12px;
       border-top: 1px solid rgba(#1f2329, 0.15);
     }
-
     &:hover {
       box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
     }
diff --git a/frontend/src/views/system/datasource/dsTable.vue b/frontend/src/views/system/datasource/dsTable.vue
index d6c1b4260b..3a1db9d51c 100644
--- a/frontend/src/views/system/datasource/dsTable.vue
+++ b/frontend/src/views/system/datasource/dsTable.vue
@@ -211,13 +211,11 @@ export default {
     line-height: 24px;
     color: var(--deTextPrimary, #1f2329);
   }
-
   .table-container {
     height: calc(100% - 50px);
   }
-
   .el-table__fixed-right::before {
     background: transparent;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/form.vue b/frontend/src/views/system/datasource/form.vue
index 1fa82629f4..0eec277ed7 100644
--- a/frontend/src/views/system/datasource/form.vue
+++ b/frontend/src/views/system/datasource/form.vue
@@ -4,10 +4,8 @@
 
 <script>
 export default {
-
 }
 </script>
 
 <style>
-
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/system/task/filterUserRecord.vue b/frontend/src/views/system/task/filterUserRecord.vue
index b7ec0f0c78..3788b12815 100644
--- a/frontend/src/views/system/task/filterUserRecord.vue
+++ b/frontend/src/views/system/task/filterUserRecord.vue
@@ -200,6 +200,7 @@ export default {
       this.selectDatasets = [];
       this.datasetCahe = [];
       this.selectDatasetsCahe = [];
+      this.$refs.datasetTreeRef.filter();
       this.$emit("search", [], []);
     },
     clearOneFilter(index) {
@@ -211,6 +212,9 @@ export default {
         } else {
           this[ele] = [];
         }
+        if (ele === 'activeDataset') {
+          this.$refs.datasetTreeRef.filter();
+        }
       });
     },
     statusChange(value, type) {
diff --git a/frontend/src/views/system/task/form.vue b/frontend/src/views/system/task/form.vue
index 00e62591cc..1743dd271d 100644
--- a/frontend/src/views/system/task/form.vue
+++ b/frontend/src/views/system/task/form.vue
@@ -42,7 +42,7 @@
           </el-form-item>
           <div class="add-scope-cont" v-if="taskForm.type === 'add_scope'">
             <el-form-item
-              prop="incrementalUpdateType"
+              prop="type"
               :label="$t('dataset.incremental_update_type')"
             >
               <el-radio-group
@@ -315,12 +315,6 @@ export default {
             trigger: "change",
           },
         ],
-        incrementalUpdateType: [
-          {
-            required: true,
-            trigger: "change",
-          },
-        ],
       },
       cronEdit: false,
       sqlOption: {
diff --git a/frontend/src/views/system/user/userEditer.vue b/frontend/src/views/system/user/userEditer.vue
index 0407833d85..f790ada9c0 100644
--- a/frontend/src/views/system/user/userEditer.vue
+++ b/frontend/src/views/system/user/userEditer.vue
@@ -9,7 +9,7 @@
     :before-close="reset"
   >
     <div v-if="formType === 'add'" class="editer-form-title">
-      <i class="el-icon-info"></i>
+      <i class="el-icon-info" />
       <span class="pwd" type="text">{{
         $t("commons.default_pwd") + "：" + defaultPWD
       }}</span>
@@ -36,16 +36,16 @@
         <el-col :span="12">
           <el-form-item :label="$t('commons.nick_name')" prop="nickName">
             <el-input
-              :placeholder="$t('user.input_name')"
               v-model="form.nickName"
+              :placeholder="$t('user.input_name')"
             />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="ID" prop="username">
             <el-input
-              :placeholder="$t('user.input_id')"
               v-model="form.username"
+              :placeholder="$t('user.input_id')"
               :disabled="formType !== 'add'"
             />
           </el-form-item>
@@ -55,24 +55,24 @@
         <el-col :span="12">
           <el-form-item :label="$t('commons.email')" prop="email">
             <el-input
-              :placeholder="$t('user.input_email')"
               v-model="form.email"
+              :placeholder="$t('user.input_email')"
             />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item :label="$t('commons.mobile_phone_number')" prop="phone">
             <el-input
-              :placeholder="$t('commons.mobile_phone')"
               v-model="form.phone"
+              :placeholder="$t('commons.mobile_phone')"
               class="input-with-select"
             >
               <el-select
-                v-model="form.phonePrefix"
                 slot="prepend"
+                v-model="form.phonePrefix"
                 :placeholder="$t('fu.search_bar.please_select')"
               >
-                <el-option label="+86" value="+86"></el-option>
+                <el-option label="+86" value="+86" />
               </el-select>
             </el-input>
           </el-form-item>
@@ -82,14 +82,13 @@
         <el-col :span="12">
           <el-form-item :label="$t('commons.gender')" prop="gender">
             <el-select
-              class="form-gender-select"
               v-model="form.gender"
+              class="form-gender-select"
               :placeholder="$t('user.select_gender')"
             >
-              <el-option :label="$t('commons.man')" value="男"> </el-option>
-              <el-option :label="$t('commons.woman')" value="女"> </el-option>
-              <el-option :label="$t('commons.keep_secret')" value="保密">
-              </el-option>
+              <el-option :label="$t('commons.man')" value="男" />
+              <el-option :label="$t('commons.woman')" value="女" />
+              <el-option :label="$t('commons.keep_secret')" value="保密" />
             </el-select>
           </el-form-item>
         </el-col>
@@ -100,37 +99,37 @@
             prop="deptId"
           >
             <el-popover
-            placement="bottom"
-            popper-class="user-popper dept"
-            width="384"
-            trigger="click"
-          >
-            <el-tree
-              v-if="dialogVisible"
-              :load="loadNode"
-              :lazy="true"
-              :expand-on-click-node="false"
-              :data="depts"
-              :props="defaultProps"
-              @node-click="handleNodeClick"
-            ></el-tree>
-
-            <el-select
-              ref="roleSelect"
-              v-model="form.deptId"
-              clearable
-              slot="reference"
-              class="form-gender-select"
-              popper-class="tree-select"
-              :placeholder="$t('commons.please_select')"
+              placement="bottom"
+              popper-class="user-popper dept"
+              width="384"
+              trigger="click"
             >
-            <el-option
-              v-for="item in selectDepts"
-              :key="item.label"
-              :label="item.label"
-              :value="item.id"
-            />
-            </el-select>
+              <el-tree
+                v-if="dialogVisible"
+                :load="loadNode"
+                :lazy="true"
+                :expand-on-click-node="false"
+                :data="depts"
+                :props="defaultProps"
+                @node-click="handleNodeClick"
+              />
+
+              <el-select
+                ref="roleSelect"
+                slot="reference"
+                v-model="form.deptId"
+                clearable
+                class="form-gender-select"
+                popper-class="tree-select"
+                :placeholder="$t('commons.please_select')"
+              >
+                <el-option
+                  v-for="item in selectDepts"
+                  :key="item.label"
+                  :label="item.label"
+                  :value="item.id"
+                />
+              </el-select>
             </el-popover>
           </el-form-item>
         </el-col>
@@ -165,14 +164,24 @@
           />
         </el-select>
       </el-form-item>
+
+      <el-form-item v-show="isPluginLoaded && wecomOpen" :label="$t('user.wecom_id')">
+        <el-input v-model="form.sysUserAssist.wecomId" :placeholder="$t('user.input_wecom_id')" />
+      </el-form-item>
+      <el-form-item v-show="isPluginLoaded && dingTalkOpen" :label="$t('user.dingtalk_id')">
+        <el-input v-model="form.sysUserAssist.dingtalkId" :placeholder="$t('user.input_dingtalk_id')" />
+      </el-form-item>
+      <el-form-item v-show="isPluginLoaded && larkOpen" :label="$t('user.lark_id')">
+        <el-input v-model="form.sysUserAssist.larkId" :placeholder="$t('user.input_lark_id')" />
+      </el-form-item>
+
       <el-form-item :label="$t('commons.status')" prop="enabled">
         <el-switch
-          :disabled="formType !== 'add' && form.isAdmin"
           v-model="form.enabled"
+          :disabled="formType !== 'add' && form.isAdmin"
           :active-value="1"
           :inactive-value="0"
-        >
-        </el-switch>
+        />
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -187,280 +196,328 @@
 </template>
 
 <script>
-import { PHONE_REGEX } from "@/utils/validate";
-import { getDeptTree, treeByDeptId } from "@/api/system/dept";
-import { addUser, editUser, allRoles } from "@/api/system/user";
-import { pluginLoaded, defaultPwd } from "@/api/user";
+import { PHONE_REGEX } from '@/utils/validate'
+import { getDeptTree, treeByDeptId } from '@/api/system/dept'
+import { addUser, editUser, allRoles, queryAssist } from '@/api/system/user'
+import { pluginLoaded, defaultPwd, wecomStatus, dingtalkStatus, larkStatus } from '@/api/user'
 export default {
   data() {
     return {
       defaultProps: {
-        children: "children",
-        label: "label",
-        isLeaf: "leaf",
+        children: 'children',
+        label: 'label',
+        isLeaf: 'leaf'
       },
       selectDepts: [],
       form: {
         roles: [
           {
-            id: "",
-          },
+            id: ''
+          }
         ],
+        sysUserAssist: {
+          wecomId: null,
+          dingtalkId: null,
+          larkId: null
+        }
       },
       rule: {
         username: [
           {
             required: true,
-            message: this.$t("user.id_mandatory"),
-            trigger: "blur",
+            message: this.$t('user.id_mandatory'),
+            trigger: 'blur'
           },
           {
             min: 1,
             max: 50,
-            message: this.$t("commons.input_limit", [1, 50]),
-            trigger: "blur",
+            message: this.$t('commons.input_limit', [1, 50]),
+            trigger: 'blur'
           },
           {
             required: true,
-            pattern: "^[^\u4e00-\u9fa5]+$",
-            message: this.$t("user.special_characters_are_not_supported"),
-            trigger: "blur",
-          },
+            pattern: '^[^\u4e00-\u9fa5]+$',
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
         ],
         nickName: [
           {
             required: true,
-            message: this.$t("user.name_mandatory"),
-            trigger: "blur",
+            message: this.$t('user.name_mandatory'),
+            trigger: 'blur'
           },
           {
             min: 2,
             max: 50,
-            message: this.$t("commons.input_limit", [2, 50]),
-            trigger: "blur",
+            message: this.$t('commons.input_limit', [2, 50]),
+            trigger: 'blur'
           },
           {
             required: true,
-            message: this.$t("user.special_characters_are_not_supported"),
-            trigger: "blur",
-          },
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
         ],
         phone: [
           {
             pattern: PHONE_REGEX,
-            message: this.$t("user.phone_format"),
-            trigger: "blur",
-          },
+            message: this.$t('user.phone_format'),
+            trigger: 'blur'
+          }
         ],
         email: [
           {
             required: true,
-            message: this.$t("user.email_mandatory"),
-            trigger: "blur",
+            message: this.$t('user.email_mandatory'),
+            trigger: 'blur'
           },
           {
             required: true,
             pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-            message: this.$t("user.email_format_is_incorrect"),
-            trigger: "blur",
-          },
+            message: this.$t('user.email_format_is_incorrect'),
+            trigger: 'blur'
+          }
         ],
         password: [
           {
             required: true,
-            message: this.$t("user.input_password"),
-            trigger: "blur",
+            message: this.$t('user.input_password'),
+            trigger: 'blur'
           },
           {
             required: true,
             pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t("member.password_format_is_incorrect"),
-            trigger: "blur",
-          },
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
         ],
         confirmPassword: [
           {
             required: true,
-            message: this.$t("user.input_password"),
-            trigger: "blur",
+            message: this.$t('user.input_password'),
+            trigger: 'blur'
           },
-          { required: true, validator: this.repeatValidator, trigger: "blur" },
+          { required: true, validator: this.repeatValidator, trigger: 'blur' }
         ],
         newPassword: [
           {
             required: true,
-            message: this.$t("user.input_password"),
-            trigger: "blur",
+            message: this.$t('user.input_password'),
+            trigger: 'blur'
           },
           {
             required: true,
             pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
-            message: this.$t("member.password_format_is_incorrect"),
-            trigger: "blur",
-          },
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
         ],
         deptId: [],
         gender: [],
-        enabled: [{ required: true, trigger: "change" }],
+        enabled: [{ required: true, trigger: 'change' }]
       },
       defaultForm: {
         id: null,
         username: null,
         nickName: null,
-        gender: "男",
+        gender: '男',
         email: null,
         enabled: 1,
         deptId: null,
         phone: null,
-        phonePrefix: "+86",
+        phonePrefix: '+86',
         roleIds: [2],
+        sysUserAssist: {
+          wecomId: null,
+          dingtalkId: null,
+          larkId: null
+        }
       },
       depts: [],
       roles: [],
       roleDatas: [],
       userRoles: [],
-      formType: "add",
+      formType: 'add',
       isPluginLoaded: false,
-      defaultPWD: "DataEase123..",
+      defaultPWD: 'DataEase123..',
       dialogVisible: false,
-    };
+      wecomOpen: false,
+      dingTalkOpen: false,
+      larkOpen: false,
+      assistInfo: {}
+    }
   },
   beforeCreate() {
     pluginLoaded().then((res) => {
-      this.isPluginLoaded = res.success && res.data;
-    });
+      this.isPluginLoaded = res.success && res.data
+    })
+    wecomStatus().then(res => {
+      if (res.success && res.data) {
+        this.wecomOpen = true
+      }
+    })
+
+    dingtalkStatus().then(res => {
+      if (res.success && res.data) {
+        this.dingTalkOpen = true
+      }
+    })
+
+    larkStatus().then(res => {
+      if (res.success && res.data) {
+        this.larkOpen = true
+      }
+    })
     defaultPwd().then((res) => {
       if (res && res.data) {
-        this.defaultPWD = res.data;
+        this.defaultPWD = res.data
       }
-    });
+    })
   },
   methods: {
     repeatValidator(rule, value, callback) {
       if (value !== this.form.password) {
-        callback(new Error(this.$t("member.inconsistent_passwords")));
+        callback(new Error(this.$t('member.inconsistent_passwords')))
       } else {
-        callback();
+        callback()
       }
     },
     create() {
-      this.formType = "add";
-      this.form = Object.assign({}, this.defaultForm);
+      this.formType = 'add'
+      this.form = Object.assign({}, JSON.parse(JSON.stringify(this.defaultForm)))
     },
     init(row) {
-      this.initRoles();
-      this.dialogVisible = true;
-      if (!row) {
-        this.create();
-        return;
-      }
-      const { deptId:id, deptName:label }  = (row.dept || {});
-      this.selectDepts = [{id, label}]
-      this.formType = "modify";
-      this.dialogVisible = true;
-      this.form = Object.assign({}, row);
-      this.form.password = "";
-      if (this.form.deptId === 0) {
-        this.form.deptId = null;
-      }
+      this.initRoles()
 
-      if (!this.form.phonePrefix) {
-        this.form.phonePrefix = '+86';
+      this.dialogVisible = true
+      if (!row) {
+        this.create()
+        return
       }
+      this.initAssistInfo(row.userId).then(res => {
+        this.assistInfo = res.data
+        const { deptId: id, deptName: label } = (row.dept || {})
+        this.selectDepts = [{ id, label }]
+        this.formType = 'modify'
+        this.dialogVisible = true
+        row.sysUserAssist = JSON.parse(JSON.stringify(this.defaultForm.sysUserAssist))
+        this.form = Object.assign({}, row)
+        this.form.password = ''
+        if (this.form.deptId === 0) {
+          this.form.deptId = null
+        }
+
+        if (!this.form.phonePrefix) {
+          this.form.phonePrefix = '+86'
+        }
+
+        if (this.assistInfo) {
+          const info = JSON.parse(JSON.stringify(this.assistInfo))
+          delete info.needFirstNoti
+          delete info.userId
+          const assist = Object.assign(JSON.parse(JSON.stringify(this.defaultForm.sysUserAssist)), info)
+          this.form.sysUserAssist = assist
+        }
+      })
     },
     initRoles() {
       allRoles().then((res) => {
-        this.roles = res.data;
-      });
+        this.roles = res.data
+      })
+    },
+    initAssistInfo(userId) {
+      return queryAssist(userId)
     },
     handleNodeClick({ id, label }) {
-      const [ dept ] = this.selectDepts;
+      const [dept] = this.selectDepts
       if (!dept || dept.id !== id) {
-        this.selectDepts = [{ id, label }];
+        this.selectDepts = [{ id, label }]
         this.form.deptId = id
         return
       }
 
       if (dept.id === id) {
-        this.selectDepts = [];
+        this.selectDepts = []
         this.form.deptId = null
       }
     },
     // 获取弹窗内部门数据
     treeByDeptId() {
       treeByDeptId(0).then((res) => {
-        this.depts =  (res.data || []).map(ele =>  {
-        return {
+        this.depts = (res.data || []).map(ele => {
+          return {
             ...ele,
-            leaf: !ele.hasChildren,
+            leaf: !ele.hasChildren
           }
         })
-      });
+      })
     },
-      loadNode(node, resolve) {
+    loadNode(node, resolve) {
       if (!this.depts.length) {
-        this.treeByDeptId();
-        return;
+        this.treeByDeptId()
+        return
       }
       getDeptTree(node.data.id).then((res) => {
         resolve(
           res.data.map((dept) => {
-            return this.normalizer(dept);
+            return this.normalizer(dept)
           })
-        );
-      });
+        )
+      })
     },
     normalizer(node) {
       return {
         id: node.deptId,
         label: node.name,
-        leaf: !node.hasChildren,
-      };
+        leaf: !node.hasChildren
+      }
     },
     deleteTag(value) {
       this.userRoles.forEach(
-        function (data, index) {
+        function(data, index) {
           if (data.id === value) {
-            this.userRoles.splice(index, value);
+            this.userRoles.splice(index, value)
           }
         }.bind(this)
-      );
+      )
     },
     changeRole(value) {
-      this.userRoles = [];
+      this.userRoles = []
       value.forEach(
-        function (data, index) {
-          const role = { id: data };
-          this.userRoles.push(role);
+        function(data, index) {
+          const role = { id: data }
+          this.userRoles.push(role)
         }.bind(this)
-      );
+      )
     },
     reset() {
-      this.depts = [];
-      this.$refs.createUserForm.resetFields();
-      this.dialogVisible = false;
+      this.depts = []
+      this.form.sysUserAssist = JSON.parse(JSON.stringify(this.defaultForm.sysUserAssist))
+      this.$refs.createUserForm.resetFields()
+      this.dialogVisible = false
     },
     save() {
       this.$refs.createUserForm.validate((valid) => {
         if (valid) {
           // !this.form.deptId && (this.form.deptId = 0)
-          const method = this.formType === "add" ? addUser : editUser;
+          const method = this.formType === 'add' ? addUser : editUser
           method(this.form).then((res) => {
-            this.$success(this.$t("commons.save_success"));
-            this.reset();
+            this.$success(this.$t('commons.save_success'))
+            this.reset()
             this.$emit('saved')
-          });
+          })
         } else {
-          return false;
+          return false
         }
-      });
+      })
     },
     onCopy(e) {
-      this.$success(this.$t("commons.copy_success"));
+      this.$success(this.$t('commons.copy_success'))
     },
-    onError(e) {},
-  },
-};
+    onError(e) {}
+  }
+}
 </script>
 
 <style lang="scss" scoped>