Merge branch 'dev' into pr@dev@feat_antv_group_stack_bar

backend/pom.xml

@@ -118,7 +118,7 @@
         <dependency>
             <groupId>org.apache.commons</groupId>
             <artifactId>commons-text</artifactId>
-            <version>1.8</version>
+            <version>[1.10.0,)</version>
         </dependency>
         <dependency>
             <groupId>commons-codec</groupId>

backend/src/main/java/io/dataease/auth/api/AuthApi.java

@@ -75,6 +75,10 @@ public interface AuthApi {
     @PostMapping("/isOpenLark")
     boolean isOpenLark();
 
+    @ApiOperation("是否开启国际飞书")
+    @PostMapping("/isOpenLarksuite")
+    boolean isOpenLarksuite();
+
     @ApiIgnore
     @PostMapping("/isPluginLoaded")
     boolean isPluginLoaded();

backend/src/main/java/io/dataease/auth/config/cas/CasStrategy.java

@@ -2,6 +2,7 @@ package io.dataease.auth.config.cas;
 
 import io.dataease.auth.service.impl.ShiroServiceImpl;
 import io.dataease.commons.utils.CommonBeanFactory;
+import io.dataease.commons.utils.ServletUtils;
 import io.dataease.service.system.SystemParameterService;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.shiro.util.AntPathMatcher;
@@ -17,7 +18,7 @@ import java.util.Set;
 public class CasStrategy implements UrlPatternMatcherStrategy {
 
 
-    private static Set<String>  releaseTypes = new HashSet<>();
+    private static Set<String> releaseTypes = new HashSet<>();
 
     @PostConstruct
     public void init() {
@@ -25,6 +26,7 @@ public class CasStrategy implements UrlPatternMatcherStrategy {
         releaseTypes.add("link");
         releaseTypes.add("doc");
     }
+
     @Override
     public boolean matches(String s) {
         SystemParameterService service = CommonBeanFactory.getBean(SystemParameterService.class);
@@ -35,10 +37,14 @@ public class CasStrategy implements UrlPatternMatcherStrategy {
         if ((beginIndex = s.indexOf(serverName)) != -1) {
             s = s.substring(beginIndex + serverName.length());
         }
-        if (StringUtils.equals("/", s)) return false;
+        if (StringUtils.equals("/", s)) {
+            if (fromLink(serverName)) return true;
+            return false;
+        }
         if (StringUtils.equals("/login", s)) return false;
         if (StringUtils.startsWith(s, "/cas/callBack")) return false;
         if (StringUtils.equals("/api/auth/deLogout", s)) return true;
+        if (s.startsWith("/link.html")) return true;
         AntPathMatcher antPathMatcher = new AntPathMatcher();
         ShiroServiceImpl shiroService = CommonBeanFactory.getBean(ShiroServiceImpl.class);
         Map<String, String> stringStringMap = shiroService.loadFilterChainDefinitionMap();
@@ -57,4 +63,15 @@ public class CasStrategy implements UrlPatternMatcherStrategy {
     public void setPattern(String s) {
 
     }
+
+    private Boolean fromLink(String serverName) {
+        String referrer = ServletUtils.request().getHeader("referer");
+        if (StringUtils.isBlank(referrer)) return false;
+        int beginIndex = -1;
+        if ((beginIndex = referrer.indexOf(serverName)) != -1) {
+            referrer = referrer.substring(beginIndex + serverName.length());
+            return referrer.startsWith("/link.html");
+        }
+        return false;
+    }
 }

backend/src/main/java/io/dataease/auth/server/AuthServer.java

@@ -12,6 +12,7 @@ import io.dataease.auth.service.AuthUserService;
 import io.dataease.auth.util.JWTUtils;
 import io.dataease.auth.util.RsaUtil;
 import io.dataease.commons.constants.SysLogConstants;
+import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.*;
 import io.dataease.controller.sys.request.LdapAddRequest;
 import io.dataease.exception.DataEaseException;
@@ -240,8 +241,13 @@ public class AuthServer implements AuthApi {
             HttpServletRequest request = ServletUtils.request();
             String idToken = request.getHeader("IdToken");
             if (StringUtils.isNotBlank(idToken)) {
-                OidcXpackService oidcXpackService = SpringContextUtil.getBean(OidcXpackService.class);
-                oidcXpackService.logout(idToken);
+                try {
+                    OidcXpackService oidcXpackService = SpringContextUtil.getBean(OidcXpackService.class);
+                    oidcXpackService.logout(idToken);
+                } catch (Exception e) {
+                    LogUtil.error(e.getMessage(), e);
+                    DEException.throwException("oidc_logout_error");
+                }
             }
         }
 
@@ -253,11 +259,16 @@ public class AuthServer implements AuthApi {
         String result = null;
         Integer defaultLoginType = systemParameterService.defaultLoginType();
         if (defaultLoginType == 3 && isOpenCas()) {
-            HttpServletRequest request = ServletUtils.request();
-            HttpSession session = request.getSession();
-            session.invalidate();
-            CasXpackService casXpackService = SpringContextUtil.getBean(CasXpackService.class);
-            result = casXpackService.logout();
+            try {
+                HttpServletRequest request = ServletUtils.request();
+                HttpSession session = request.getSession();
+                session.invalidate();
+                CasXpackService casXpackService = SpringContextUtil.getBean(CasXpackService.class);
+                result = casXpackService.logout();
+            } catch (Exception e) {
+                LogUtil.error(e.getMessage(), e);
+                DEException.throwException("cas_logout_error");
+            }
         }
         try {
             Long userId = JWTUtils.tokenInfoByToken(token).getUserId();
@@ -337,6 +348,14 @@ public class AuthServer implements AuthApi {
         return authUserService.supportLark();
     }
 
+    @Override
+    public boolean isOpenLarksuite() {
+        Boolean licValid = PluginUtils.licValid();
+        if (!licValid)
+            return false;
+        return authUserService.supportLarksuite();
+    }
+
     @Override
     public boolean isPluginLoaded() {
         Boolean licValid = PluginUtils.licValid();

backend/src/main/java/io/dataease/auth/service/AuthUserService.java

@@ -23,6 +23,8 @@ public interface AuthUserService {
     SysUserEntity getUserByDingtalkId(String dingtalkId);
     SysUserEntity getUserByLarkId(String larkId);
 
+    SysUserEntity getUserByLarksuiteId(String larksuiteId);
+
     List<String> roles(Long userId);
 
     List<String> permissions(Long userId);
@@ -43,6 +45,8 @@ public interface AuthUserService {
 
     Boolean supportLark();
 
+    Boolean supportLarksuite();
+
     Boolean supportLoginLimit();
 
     Boolean pluginLoaded();

backend/src/main/java/io/dataease/auth/service/impl/AuthUserServiceImpl.java

@@ -21,6 +21,7 @@ import io.dataease.plugins.util.PluginUtils;
 import io.dataease.plugins.xpack.cas.service.CasXpackService;
 import io.dataease.plugins.xpack.dingtalk.service.DingtalkXpackService;
 import io.dataease.plugins.xpack.lark.service.LarkXpackService;
+import io.dataease.plugins.xpack.larksuite.service.LarksuiteXpackService;
 import io.dataease.plugins.xpack.ldap.service.LdapXpackService;
 import io.dataease.plugins.xpack.loginlimit.dto.response.LoginLimitInfo;
 import io.dataease.plugins.xpack.loginlimit.service.LoginLimitXpackService;
@@ -108,6 +109,11 @@ public class AuthUserServiceImpl implements AuthUserService {
         return authMapper.findLarkUser(larkId);
     }
 
+    @Override
+    public SysUserEntity getUserByLarksuiteId(String larksuiteId) {
+        return authMapper.findLarksuiteUser(larksuiteId);
+    }
+
     @Override
     public List<String> roles(Long userId) {
         return authMapper.roleCodes(userId);
@@ -221,6 +227,15 @@ public class AuthUserServiceImpl implements AuthUserService {
         return larkXpackService.isOpen();
     }
 
+    @Override
+    public Boolean supportLarksuite() {
+        Map<String, LarksuiteXpackService> beansOfType = SpringContextUtil.getApplicationContext().getBeansOfType((LarksuiteXpackService.class));
+        if (beansOfType.keySet().size() == 0) return false;
+        LarksuiteXpackService larkXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+        if (ObjectUtils.isEmpty(larkXpackService)) return false;
+        return larkXpackService.isOpen();
+    }
+
     @Override
     public Boolean supportLoginLimit() {
         Map<String, LoginLimitXpackService> beansOfType = SpringContextUtil.getApplicationContext().getBeansOfType((LoginLimitXpackService.class));

backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java

@@ -86,6 +86,8 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/api/auth/isOpenWecom", ANON);
         filterChainDefinitionMap.put("/api/auth/isOpenDingtalk", ANON);
         filterChainDefinitionMap.put("/api/auth/isOpenLark", ANON);
+        filterChainDefinitionMap.put("/api/auth/isOpenCas", ANON);
+        filterChainDefinitionMap.put("/api/auth/isOpenLarksuite", ANON);
         filterChainDefinitionMap.put("/api/auth/getPublicKey", ANON);
         filterChainDefinitionMap.put("/api/pluginCommon/component/*", ANON);
         filterChainDefinitionMap.put("/api/pluginCommon/staticInfo/**", ANON);
@@ -101,7 +103,11 @@ public class ShiroServiceImpl implements ShiroService {
         filterChainDefinitionMap.put("/plugin/lark/callBack*", ANON);
         filterChainDefinitionMap.put("/plugin/lark/bind*", ANON);
         filterChainDefinitionMap.put("/plugin/lark/getQrParam", ANON);
+        filterChainDefinitionMap.put("/plugin/larksuite/callBack*", ANON);
+        filterChainDefinitionMap.put("/plugin/larksuite/bind*", ANON);
+        filterChainDefinitionMap.put("/plugin/larksuite/getQrParam", ANON);
         filterChainDefinitionMap.put("/cas/reset/**", ANON);
+        filterChainDefinitionMap.put("/cas/loginPage", ANON);
 
         filterChainDefinitionMap.put("/unauth", ANON);
         filterChainDefinitionMap.put("/display/**", ANON);

backend/src/main/java/io/dataease/controller/datasource/DatasourceController.java

@@ -86,7 +86,7 @@ public class DatasourceController {
     @PostMapping("/get/{id}")
     public DatasourceDTO getDatasource(@PathVariable String id) throws Exception {
         DatasourceUnionRequest request = new DatasourceUnionRequest();
-        request.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
+        request.setUserId("1");
         request.setId(id);
         List<DatasourceDTO> datasourceList = datasourceService.getDatasourceList(request);
         return CollectionUtils.isNotEmpty(datasourceList) ? datasourceList.get(0) : null;

backend/src/main/java/io/dataease/controller/panel/AppLogController.java

@@ -21,24 +21,31 @@ import java.util.List;
 @RestController
 @Api(tags = "应用市场：应用日志")
 @ApiSupport(order = 220)
-@RequestMapping("/app/log")
+@RequestMapping("app/log")
 public class AppLogController {
 
     @Resource
-    private AppLogService applogService;
+    private AppLogService appLogService;
 
     @I18n
     @ApiOperation("查询日志")
     @PostMapping("/logGrid/{goPage}/{pageSize}")
     @ApiImplicitParams({
-        @ApiImplicitParam(paramType = "path", name = "goPage", value = "页码", required = true, dataType = "Integer"),
-        @ApiImplicitParam(paramType = "path", name = "pageSize", value = "页容量", required = true, dataType = "Integer"),
-        @ApiImplicitParam(name = "request", value = "查询条件", required = true)
+            @ApiImplicitParam(paramType = "path", name = "goPage", value = "页码", required = true, dataType = "Integer"),
+            @ApiImplicitParam(paramType = "path", name = "pageSize", value = "页容量", required = true, dataType = "Integer"),
+            @ApiImplicitParam(name = "request", value = "查询条件", required = true)
     })
     public Pager<List<AppLogGridDTO>> logGrid(@PathVariable int goPage, @PathVariable int pageSize,
                                               @RequestBody KeyGridRequest request) {
         Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
-        return PageUtils.setPageInfo(page, applogService.query(request));
+        return PageUtils.setPageInfo(page, appLogService.query(request));
+    }
+
+
+    @ApiOperation("删除日志和资源")
+    @PostMapping("/deleteLog")
+    public void deleteLogAndResource(@RequestBody AppLogGridDTO request) throws Exception {
+        appLogService.deleteLogAndResource(request);
     }
 
 }

backend/src/main/java/io/dataease/controller/panel/PanelGroupController.java

@@ -203,4 +203,18 @@ public class PanelGroupController {
         result.setResponseSource("appApply");
         return result;
     }
+
+    @PostMapping("/appEdit")
+    public void appEdit(@RequestBody PanelAppTemplateApplyRequest request) throws Exception{
+        panelGroupService.appEdit(request);
+    }
+
+    @GetMapping("/findOneWithParent/{panelId}")
+    public PanelGroupDTO findOneWithParent(@PathVariable String panelId) throws Exception{
+        PanelGroupDTO result = findOne(panelId);
+        result.setParents(authService.parentResource(panelId,"panel"));
+        result.setRequestId(UUIDUtil.getUUIDAsString());
+        result.setResponseSource("appApply");
+        return result;
+    }
 }

backend/src/main/java/io/dataease/controller/request/dataset/DataSetGroupRequest.java

@@ -18,4 +18,6 @@ public class DataSetGroupRequest extends DatasetGroup {
     private String userId;
     @ApiModelProperty("ID集合")
     private Set<String> ids;
+    @ApiModelProperty("排除的ID")
+    private String excludedId;
 }

backend/src/main/java/io/dataease/controller/request/panel/PanelAppTemplateApplyRequest.java

@@ -13,12 +13,18 @@ import java.util.List;
 @Data
 public class PanelAppTemplateApplyRequest {
 
+    private String logId;
+
     private String panelId;
 
+    private String panelGroupPid;
+
     private String panelName;
 
     private String datasetGroupId;
 
+    private String datasetGroupPid;
+
     private String datasetGroupName;
 
     private String appTemplateId;

backend/src/main/java/io/dataease/controller/sys/SysUserController.java

@@ -56,6 +56,8 @@ public class SysUserController {
     private static final String DINGTALK = "dingtalk";
     private static final String LARK = "lark";
 
+    private static final String LARKSUITE = "larksuite";
+
     @Resource
     private SysUserService sysUserService;
 
@@ -246,13 +248,16 @@ public class SysUserController {
         AuthBindDTO dto = new AuthBindDTO();
         if (ObjectUtils.isEmpty(sysUserAssist)) return dto;
         if (authUserService.supportWecom() && StringUtils.isNotBlank(sysUserAssist.getWecomId())) {
-            dto.setWecomBinded(true);
+            dto.setWecomBound(true);
         }
         if (authUserService.supportDingtalk() && StringUtils.isNotBlank(sysUserAssist.getDingtalkId())) {
-            dto.setDingtalkBinded(true);
+            dto.setDingtalkBound(true);
         }
         if (authUserService.supportLark() && StringUtils.isNotBlank(sysUserAssist.getLarkId())) {
-            dto.setLarkBinded(true);
+            dto.setLarkBound(true);
+        }
+        if (authUserService.supportLarksuite() && StringUtils.isNotBlank(sysUserAssist.getLarksuiteId())) {
+            dto.setLarksuiteBound(true);
         }
         return dto;
     }
@@ -260,9 +265,9 @@ public class SysUserController {
     @PostMapping("/unbindAssist/{type}")
     public void unbindAssist(@PathVariable("type") String type) {
 
-        Boolean valid = StringUtils.equals(WECOM, type) || StringUtils.equals(DINGTALK, type) || StringUtils.equals(LARK, type);
+        Boolean valid = StringUtils.equals(WECOM, type) || StringUtils.equals(DINGTALK, type) || StringUtils.equals(LARK, type) || StringUtils.equals(LARKSUITE, type);
         if (!valid) {
-            DEException.throwException("only [wecom, dingtalk, lark] is valid");
+            DEException.throwException("only [wecom, dingtalk, lark, larksuite] is valid");
         }
         Long userId = AuthUtils.getUser().getUserId();
         SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
@@ -275,10 +280,13 @@ public class SysUserController {
         if (StringUtils.equals(LARK, type)) {
             sysUserAssist.setLarkId(null);
         }
-        if (StringUtils.isBlank(sysUserAssist.getWecomId()) && StringUtils.isBlank(sysUserAssist.getDingtalkId()) && StringUtils.isBlank(sysUserAssist.getLarkId())) {
+        if (StringUtils.equals(LARKSUITE, type)) {
+            sysUserAssist.setLarksuiteId(null);
+        }
+        if (StringUtils.isBlank(sysUserAssist.getWecomId()) && StringUtils.isBlank(sysUserAssist.getDingtalkId()) && StringUtils.isBlank(sysUserAssist.getLarkId()) && StringUtils.isBlank(sysUserAssist.getLarksuiteId())) {
             sysUserService.changeUserFrom(userId, 0);
         }
-        sysUserService.saveAssist(userId, sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+        sysUserService.saveAssist(userId, sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
 
     }
 

backend/src/main/java/io/dataease/controller/sys/response/AuthBindDTO.java

@@ -7,9 +7,11 @@ import java.io.Serializable;
 @Data
 public class AuthBindDTO implements Serializable {
 
-    private Boolean wecomBinded = false;
+    private Boolean wecomBound = false;
 
-    private Boolean dingtalkBinded = false;
+    private Boolean dingtalkBound = false;
 
-    private Boolean larkBinded = false;
+    private Boolean larkBound = false;
+
+    private Boolean larksuiteBound = false;
 }

backend/src/main/java/io/dataease/dto/appTemplateMarket/AppLogGridDTO.java

@@ -16,4 +16,18 @@ public class AppLogGridDTO extends PanelAppTemplateLog implements Serializable {
 
     private String panelName;
 
+    private String panelGroupPid;
+
+    private String datasourceType;
+
+    private String datasetGroupPid;
+
+    private Boolean deleteResource;
+
+    private String datasetPrivileges;
+
+    private String panelPrivileges;
+
+    private String datasourcePrivileges;
+
 }

backend/src/main/java/io/dataease/ext/AuthMapper.java

@@ -37,5 +37,6 @@ public interface AuthMapper {
     SysUserEntity findWecomUser(@Param("wecomId") String wecomId);
     SysUserEntity findDingtalkUser(@Param("dingtalkId") String dingtalkId);
     SysUserEntity findLarkUser(@Param("larkId") String larkId);
+    SysUserEntity findLarksuiteUser(@Param("larksuiteId") String larksuiteId);
 
 }

backend/src/main/java/io/dataease/ext/AuthMapper.xml

@@ -23,8 +23,7 @@
 
 
     <select id="findUser" resultMap="baseMap">
-        select
-               sys_user.user_id,
+        select sys_user.user_id,
                sys_user.username,
                sys_user.nick_name,
                sys_user.dept_id,
@@ -37,104 +36,172 @@
                sys_user.`from`,
                sys_dept.name as dept_name
         from sys_user
-        left join sys_dept on sys_user.dept_id=sys_dept.dept_id
+                 left join sys_dept on sys_user.dept_id = sys_dept.dept_id
         where user_id = #{userId}
     </select>
 
     <select id="findUserByName" resultMap="baseMap">
-        select user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from` from sys_user where username = #{username}
+        select user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
+        from sys_user
+        where username = #{username}
     </select>
 
     <select id="findLdapUserByName" resultMap="baseMap">
-        select user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from` from sys_user a where username = #{username} and a.from = 1
+        select user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
+        from sys_user a
+        where username = #{username} and a.from = 1
     </select>
 
 
     <select id="findCasUserByName" resultMap="baseMap">
-        select user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from` from sys_user a where username = #{username} and a.from = 3
+        select user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
+        from sys_user a
+        where username = #{username} and a.from = 3
     </select>
 
     <select id="findUserBySub" resultMap="baseMap">
-        select user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from` from sys_user where sub = #{sub} and `from` = #{userFrom}
+        select user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
+        from sys_user
+        where sub = #{sub}
+          and `from` = #{userFrom}
     </select>
 
     <select id="roleCodes" resultType="String">
-        select r.role_id from sys_role r
-            left join sys_users_roles sur on sur.role_id = r.role_id
-            where sur.user_id = #{userId}
+        select r.role_id
+        from sys_role r
+                 left join sys_users_roles sur on sur.role_id = r.role_id
+        where sur.user_id = #{userId}
     </select>
 
     <select id="permissions" resultType="String">
-		SELECT
-			sys_menu.permission
-		FROM
-			( SELECT GET_V_AUTH_MODEL_ID_P_USE ( #{userId}, 'menu' ) cids ) t,
-			sys_menu
-		WHERE
-			FIND_IN_SET( sys_menu.menu_id, cids ) UNION ALL
-		SELECT
-			plugin_sys_menu.permission
-		FROM
-			( SELECT GET_V_AUTH_MODEL_ID_P_USE (  #{userId}, 'menu' ) cids ) t,
-			plugin_sys_menu
-		WHERE
-			FIND_IN_SET( plugin_sys_menu.menu_id, cids )
+        SELECT sys_menu.permission
+        FROM (SELECT GET_V_AUTH_MODEL_ID_P_USE(#{userId}, 'menu') cids) t,
+             sys_menu
+        WHERE FIND_IN_SET(sys_menu.menu_id, cids)
+        UNION ALL
+        SELECT plugin_sys_menu.permission
+        FROM (SELECT GET_V_AUTH_MODEL_ID_P_USE(#{userId}, 'menu') cids) t,
+             plugin_sys_menu
+        WHERE FIND_IN_SET(plugin_sys_menu.menu_id, cids)
     </select>
 
     <select id="userMenuIds" resultType="Long">
         select srm.menu_id
         from sys_roles_menus srm
-        left join sys_users_roles sur on sur.role_id = srm.role_id
+                 left join sys_users_roles sur on sur.role_id = srm.role_id
         where sur.user_id = #{userId}
     </select>
 
     <select id="roles" resultMap="roleMap">
         select r.role_id, r.name
         from sys_role r
-        left join sys_users_roles sur on sur.role_id = r.role_id
+                 left join sys_users_roles sur on sur.role_id = r.role_id
         where sur.user_id = #{userId}
     </select>
 
 
     <select id="permissionsAll" resultType="String">
-		SELECT
-			sys_menu.permission
-		FROM
-			sys_menu UNION ALL
-		SELECT
-			plugin_sys_menu.permission
-		FROM
-			plugin_sys_menu
+        SELECT sys_menu.permission
+        FROM sys_menu
+        UNION ALL
+        SELECT plugin_sys_menu.permission
+        FROM plugin_sys_menu
     </select>
 
     <select id="findWecomUser" resultMap="baseMap">
-        select
-            u.user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from`
+        select u.user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
         from
             sys_user_assist a
-        left join
-            sys_user u on u.user_id = a.user_id
+            left join
+            sys_user u
+        on u.user_id = a.user_id
         where a.wecom_id = #{wecomId}
     </select>
 
     <select id="findDingtalkUser" resultMap="baseMap">
-        select
-            u.user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from`
+        select u.user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
         from
             sys_user_assist a
             left join
-            sys_user u on u.user_id = a.user_id
+            sys_user u
+        on u.user_id = a.user_id
         where a.dingtalk_id = #{dingtalkId}
     </select>
 
     <select id="findLarkUser" resultMap="baseMap">
-        select
-            u.user_id, username,nick_name, dept_id, password, enabled,email, phone, language ,is_admin, `from`
+        select u.user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
         from
             sys_user_assist a
             left join
-            sys_user u on u.user_id = a.user_id
+            sys_user u
+        on u.user_id = a.user_id
         where a.lark_id = #{larkId}
     </select>
 
+    <select id="findLarksuiteUser" resultMap="baseMap">
+        select u.user_id,
+               username,
+               nick_name,
+               dept_id,
+               password,
+               enabled,
+               email,
+               phone, language, is_admin, `from`
+        from
+            sys_user_assist a
+            left join
+            sys_user u
+        on u.user_id = a.user_id
+        where a.larksuite_id = #{larksuiteId}
+    </select>
+
 </mapper>

backend/src/main/java/io/dataease/ext/ExtAppLogMapper.xml

@@ -7,12 +7,38 @@
         <result column="panel_name" property="panelName"/>
         <result column="dataset_group_name" property="datasetGroupName"/>
         <result column="datasource_name" property="datasourceName"/>
+        <result column="panel_group_pid" property="panelGroupPid"/>
+        <result column="dataset_group_pid" property="datasetGroupPid"/>
+        <result column="datasource_type" property="datasourceType"/>
+        <result column="dataset_privileges" property="datasetPrivileges"/>
+        <result column="panel_privileges" property="panelPrivileges"/>
+        <result column="datasource_privileges" property="datasourcePrivileges"/>
     </resultMap>
     <select id="query" parameterType="io.dataease.service.panel.applog.AppLogQueryParam" resultMap="BaseResultMapDTO">
-        select * from
+        select
+            logInfo.*,
+            get_auths(logInfo.dataset_group_id,'dataset',#{userId}) as `dataset_privileges`,
+            get_auths(logInfo.panel_id,'panel',#{userId}) as `panel_privileges`,
+            get_auths(logInfo.datasource_id,'link',#{userId}) as `datasource_privileges`
+               from
         (select * from
             (SELECT
-            panel_app_template_log.*,
+            panel_app_template_log.id,
+            panel_app_template_log.app_template_id,
+            panel_app_template_log.app_template_name,
+            datasource.id as datasource_id,
+            panel_app_template_log.source_datasource_name,
+            dataset_group.id as dataset_group_id,
+            panel_app_template_log.source_dataset_group_name,
+            panel_group.id as panel_id,
+            panel_app_template_log.source_panel_name,
+            panel_app_template_log.apply_time,
+            panel_app_template_log.apply_persion,
+            panel_app_template_log.is_success,
+            panel_app_template_log.remark,
+            panel_group.pid as panel_group_pid,
+            datasource.type as datasource_type,
+            dataset_group.pid as dataset_group_pid,
             IFNULL(panel_app_template.name,CONCAT(panel_app_template_log.app_template_name,'(Deleted)')) as app_name,
             IFNULL(panel_group.name,CONCAT(panel_app_template_log.source_panel_name,'(Deleted)')) as panel_name,
             IFNULL(dataset_group.name,CONCAT(panel_app_template_log.source_dataset_group_name,'(Deleted)')) as dataset_group_name,

backend/src/main/java/io/dataease/ext/ExtDataSetGroupMapper.xml

@@ -68,6 +68,10 @@
             <if test="createTime != null">
                 and dataset_group.create_time = #{createTime,jdbcType=BIGINT}
             </if>
+            <if test="excludedId != null">
+                and dataset_group.id != #{excludedId,jdbcType=VARCHAR}
+            </if>
+
             <if test="ids != null and ids.size() > 0">
                 and id in
                 <foreach collection="ids" item="item" separator="," open="(" close=")">
@@ -79,6 +83,6 @@
     </select>
 
     <select id="searchIds" resultType="java.util.Map">
-        select GET_V_AUTH_MODEL_WITH_CHILDREN(#{id},#{type}) ids
+        select GET_V_AUTH_MODEL_WITH_CHILDREN(#{id}, #{type}) ids
     </select>
 </mapper>

backend/src/main/java/io/dataease/job/sechedule/strategy/impl/EmailTaskHandler.java

@@ -25,6 +25,8 @@ import io.dataease.plugins.xpack.email.dto.response.XpackEmailTemplateDTO;
 import io.dataease.plugins.xpack.email.service.EmailXpackService;
 import io.dataease.plugins.xpack.lark.dto.entity.LarkMsgResult;
 import io.dataease.plugins.xpack.lark.service.LarkXpackService;
+import io.dataease.plugins.xpack.larksuite.dto.response.LarksuiteMsgResult;
+import io.dataease.plugins.xpack.larksuite.service.LarksuiteXpackService;
 import io.dataease.plugins.xpack.wecom.dto.entity.WecomMsgResult;
 import io.dataease.plugins.xpack.wecom.service.WecomXpackService;
 import io.dataease.service.chart.ViewExportExcel;
@@ -297,6 +299,30 @@ public class EmailTaskHandler extends TaskHandler implements Job {
                                 }
                             }
 
+                        }
+                        break;
+                    case "larksuite":
+                        if (SpringContextUtil.getBean(AuthUserService.class).supportLarksuite()) {
+                            List<String> larksuiteUsers = new ArrayList<>();
+                            for (int j = 0; j < reciLists.size(); j++) {
+                                String reci = reciLists.get(j);
+                                SysUserEntity userBySub = userService.getUserByName(reci);
+                                if (ObjectUtils.isEmpty(userBySub)) continue;
+                                Long userId = userBySub.getUserId();
+                                SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+                                if (ObjectUtils.isEmpty(sysUserAssist) || StringUtils.isBlank(sysUserAssist.getLarksuiteId()))
+                                    continue;
+                                larksuiteUsers.add(sysUserAssist.getLarksuiteId());
+                            }
+
+                            if (CollectionUtils.isNotEmpty(larksuiteUsers)) {
+                                LarksuiteXpackService larksuiteXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+                                LarksuiteMsgResult larksuiteMsgResult = larksuiteXpackService.pushOaMsg(larksuiteUsers, emailTemplateDTO.getTitle(), contentStr, bytes, files);
+                                if (larksuiteMsgResult.getCode() != 0) {
+                                    errorMsgs.add("larksuite: " + larksuiteMsgResult.getMsg());
+                                }
+                            }
+
                         }
                         break;
                     default:

backend/src/main/java/io/dataease/plugins/server/CasServer.java

@@ -115,4 +115,13 @@ public class CasServer {
             return error;
         }
     }
+
+    @GetMapping("/loginPage")
+    @ResponseBody
+    public String loginPage() {
+        String casServerUrlPrefix = systemParameterService.getValue("cas.login");
+        String callBack = systemParameterService.getValue("cas.callBack");
+        String result = casServerUrlPrefix + "?service=" + callBack;
+        return result;
+    }
 }

backend/src/main/java/io/dataease/plugins/server/XDingtalkServer.java

@@ -9,6 +9,8 @@ import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.DeLogUtils;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.ServletUtils;
+import io.dataease.exception.DataEaseException;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.dingtalk.dto.response.DingQrResult;
@@ -101,6 +103,8 @@ public class XDingtalkServer {
                 sysUserService.validateExistUser(username, dingUserEntity.getName(), email);
                 sysUserService.saveDingtalkCUser(dingUserEntity, email);
                 sysUserEntity = authUserService.getUserByDingtalkId(username);
+            } else if (sysUserEntity.getEnabled() == 0) {
+                DataEaseException.throwException(Translator.get("i18n_user_is_disable"));
             }
             TokenInfo tokenInfo = TokenInfo.builder().userId(sysUserEntity.getUserId()).username(sysUserEntity.getUsername()).build();
             String realPwd = sysUserEntity.getPassword();
@@ -185,7 +189,7 @@ public class XDingtalkServer {
                 sysUserAssist.setUserId(Long.parseLong(state));
             }
             sysUserAssist.setDingtalkId(userId);
-            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
             response.sendRedirect(url);
         } catch (Exception e) {
 

backend/src/main/java/io/dataease/plugins/server/XLarkServer.java

@@ -9,6 +9,8 @@ import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.DeLogUtils;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.ServletUtils;
+import io.dataease.exception.DataEaseException;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 
@@ -102,6 +104,8 @@ public class XLarkServer {
                 sysUserService.validateExistUser(username, larkUserInfo.getName(), email);
                 sysUserService.saveLarkCUser(larkUserInfo, email);
                 sysUserEntity = authUserService.getUserByLarkId(username);
+            } else if (sysUserEntity.getEnabled() == 0) {
+                DataEaseException.throwException(Translator.get("i18n_user_is_disable"));
             }
             TokenInfo tokenInfo = TokenInfo.builder().userId(sysUserEntity.getUserId()).username(sysUserEntity.getUsername()).build();
             String realPwd = sysUserEntity.getPassword();
@@ -185,7 +189,7 @@ public class XLarkServer {
                 sysUserAssist.setUserId(Long.parseLong(state));
             }
             sysUserAssist.setLarkId(userId);
-            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
             response.sendRedirect(url);
         } catch (Exception e) {
 

backend/src/main/java/io/dataease/plugins/server/XLarksuiteServer.java

@@ -0,0 +1,210 @@
+package io.dataease.plugins.server;
+
+import io.dataease.auth.entity.SysUserEntity;
+import io.dataease.auth.entity.TokenInfo;
+import io.dataease.auth.service.AuthUserService;
+import io.dataease.auth.util.JWTUtils;
+import io.dataease.commons.constants.SysLogConstants;
+import io.dataease.commons.exception.DEException;
+import io.dataease.commons.utils.DeLogUtils;
+import io.dataease.commons.utils.LogUtil;
+import io.dataease.commons.utils.ServletUtils;
+import io.dataease.exception.DataEaseException;
+import io.dataease.i18n.Translator;
+import io.dataease.plugins.common.base.domain.SysUserAssist;
+import io.dataease.plugins.config.SpringContextUtil;
+import io.dataease.plugins.xpack.display.dto.response.SysSettingDto;
+import io.dataease.plugins.xpack.lark.dto.entity.LarkQrResult;
+import io.dataease.plugins.xpack.lark.dto.response.LarkInfo;
+import io.dataease.plugins.xpack.larksuite.dto.entity.UserData;
+import io.dataease.plugins.xpack.larksuite.dto.response.LarksuiteUserResult;
+import io.dataease.plugins.xpack.larksuite.service.LarksuiteXpackService;
+import io.dataease.service.sys.SysUserService;
+import org.apache.commons.lang3.ObjectUtils;
+import org.apache.commons.lang3.StringUtils;
+import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.*;
+import org.springframework.web.servlet.ModelAndView;
+import springfox.documentation.annotations.ApiIgnore;
+
+import javax.annotation.Resource;
+import javax.servlet.http.Cookie;
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.UnsupportedEncodingException;
+import java.net.URLEncoder;
+import java.util.List;
+import java.util.Map;
+
+@ApiIgnore
+@RequestMapping("/plugin/larksuite")
+@Controller
+public class XLarksuiteServer {
+
+    @Resource
+    private AuthUserService authUserService;
+    @Resource
+    private SysUserService sysUserService;
+
+    @ResponseBody
+    @GetMapping("/info")
+    public LarkInfo getLarkInfo() {
+        LarksuiteXpackService larkXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+        return larkXpackService.info();
+    }
+
+    @ResponseBody
+    @RequiresPermissions("sysparam:read")
+    @PostMapping("/save")
+    public void save(@RequestBody List<SysSettingDto> settings) {
+        LarksuiteXpackService larkXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+        larkXpackService.save(settings);
+    }
+
+    @ResponseBody
+    @PostMapping("/testConn")
+    public void testConn(@RequestBody LarkInfo larkInfo) {
+        LarksuiteXpackService larkXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+        try {
+            larkXpackService.testConn(larkInfo);
+        } catch (Exception e) {
+            throw new RuntimeException(e);
+        }
+    }
+
+    @ResponseBody
+    @PostMapping("/getQrParam")
+    public LarkQrResult getQrParam() {
+        LarksuiteXpackService larkXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+        return larkXpackService.getQrParam();
+    }
+
+    @GetMapping("/callBack")
+    public ModelAndView callBack(@RequestParam("code") String code, @RequestParam("state") String state) {
+        ModelAndView modelAndView = new ModelAndView("redirect:/");
+        HttpServletResponse response = ServletUtils.response();
+        LarksuiteXpackService larksuiteXpackService = null;
+        try {
+            Map<String, LarksuiteXpackService> beansOfType = SpringContextUtil.getApplicationContext().getBeansOfType((LarksuiteXpackService.class));
+            if (beansOfType.keySet().size() == 0) {
+                DEException.throwException("缺少国际飞书插件");
+            }
+            larksuiteXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+            Boolean isOpen = larksuiteXpackService.isOpen();
+            if (!isOpen) {
+                DEException.throwException("未开启国际飞书");
+            }
+            LarksuiteUserResult larksuiteUserResult = larksuiteXpackService.userInfo(code, state, false);
+            UserData larkUserInfo = larksuiteUserResult.getData();
+            String username = larkUserInfo.getUser_id();
+            SysUserEntity sysUserEntity = authUserService.getUserByLarksuiteId(username);
+            if (null == sysUserEntity) {
+                String email = StringUtils.isNotBlank(larkUserInfo.getEmail()) ? larkUserInfo.getEmail() : (username + "@larksuite.work");
+                sysUserService.validateExistUser(username, larkUserInfo.getName(), email);
+                sysUserService.saveLarksuiteCUser(larkUserInfo, email);
+                sysUserEntity = authUserService.getUserByLarksuiteId(username);
+            } else if (sysUserEntity.getEnabled() == 0) {
+                DataEaseException.throwException(Translator.get("i18n_user_is_disable"));
+            }
+            TokenInfo tokenInfo = TokenInfo.builder().userId(sysUserEntity.getUserId()).username(sysUserEntity.getUsername()).build();
+            String realPwd = sysUserEntity.getPassword();
+            String token = JWTUtils.sign(tokenInfo, realPwd);
+            ServletUtils.setToken(token);
+
+            DeLogUtils.save(SysLogConstants.OPERATE_TYPE.LOGIN, SysLogConstants.SOURCE_TYPE.USER, sysUserEntity.getUserId(), null, null, null);
+
+            Cookie cookie_token = new Cookie("Authorization", token);
+            cookie_token.setPath("/");
+
+            response.addCookie(cookie_token);
+        } catch (Exception e) {
+
+            String msg = e.getMessage();
+            if (null != e.getCause()) {
+                msg = e.getCause().getMessage();
+            }
+            try {
+                msg = URLEncoder.encode(msg, "UTF-8");
+                LogUtil.error(e);
+                Cookie cookie_error = new Cookie("LarksuiteError", msg);
+                cookie_error.setPath("/");
+                response.addCookie(cookie_error);
+                return modelAndView;
+            } catch (UnsupportedEncodingException e1) {
+                e.printStackTrace();
+            }
+        }
+        return modelAndView;
+    }
+
+    private void bindError(HttpServletResponse response, String url, String errorMsg) {
+        Cookie cookie_error = new Cookie("LarksuiteError", errorMsg);
+        cookie_error.setPath("/");
+        response.addCookie(cookie_error);
+        try {
+            response.sendRedirect(url);
+        } catch (IOException e) {
+            LogUtil.error(e.getMessage(), e);
+            DEException.throwException(e);
+        }
+    }
+
+    @GetMapping("/bind")
+    public void bind(@RequestParam("code") String code, @RequestParam("state") String state) {
+
+        HttpServletResponse response = ServletUtils.response();
+        String url = "/#person-info/index";
+
+        LarksuiteXpackService larksuiteXpackService = null;
+        try {
+            SysUserEntity userEntity = authUserService.getUserById(Long.parseLong(state));
+            if (ObjectUtils.isEmpty(userEntity)) {
+                bindError(response, url, "绑定用户不存在");
+                return;
+            }
+            SysUserAssist sysUserAssist = sysUserService.assistInfo(Long.parseLong(state));
+            if (ObjectUtils.isNotEmpty(sysUserAssist) && StringUtils.isNotBlank(sysUserAssist.getLarksuiteId())) {
+                bindError(response, url, "目标用户已绑定其他国际飞书账号");
+                return;
+            }
+
+            Boolean isOpen = authUserService.supportLarksuite();
+            if (!isOpen) {
+                DEException.throwException("未开启国际飞书");
+            }
+            larksuiteXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+            LarksuiteUserResult larksuiteUserResult = larksuiteXpackService.userInfo(code, state, true);
+            UserData larkUserInfo = larksuiteUserResult.getData();
+            String userId = larkUserInfo.getUser_id();
+
+
+            SysUserEntity sysUserEntity = authUserService.getUserByLarksuiteId(userId);
+            if (null != sysUserEntity) {
+                bindError(response, url, "当前国际飞书账号已绑定其他DE用户");
+                return;
+            }
+
+            if (ObjectUtils.isEmpty(sysUserAssist)) {
+                sysUserAssist = new SysUserAssist();
+                sysUserAssist.setUserId(Long.parseLong(state));
+            }
+            sysUserAssist.setLarksuiteId(userId);
+            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
+            response.sendRedirect(url);
+        } catch (Exception e) {
+
+            String msg = e.getMessage();
+            if (null != e.getCause()) {
+                msg = e.getCause().getMessage();
+            }
+            try {
+                msg = URLEncoder.encode(msg, "UTF-8");
+                LogUtil.error(e);
+                bindError(response, url, msg);
+            } catch (UnsupportedEncodingException e1) {
+                e.printStackTrace();
+            }
+        }
+    }
+}

backend/src/main/java/io/dataease/plugins/server/XWecomServer.java

@@ -10,6 +10,8 @@ import io.dataease.commons.exception.DEException;
 import io.dataease.commons.utils.DeLogUtils;
 import io.dataease.commons.utils.LogUtil;
 import io.dataease.commons.utils.ServletUtils;
+import io.dataease.exception.DataEaseException;
+import io.dataease.i18n.Translator;
 import io.dataease.plugins.common.base.domain.SysUserAssist;
 import io.dataease.plugins.config.SpringContextUtil;
 import io.dataease.plugins.xpack.display.dto.response.SysSettingDto;
@@ -106,6 +108,8 @@ public class XWecomServer {
                 sysUserService.validateExistUser(userId, userMap.get("name").toString(), email);
                 sysUserService.saveWecomCUser(userMap, userId, email);
                 sysUserEntity = authUserService.getUserByWecomId(userId);
+            } else if (sysUserEntity.getEnabled() == 0) {
+                DataEaseException.throwException(Translator.get("i18n_user_is_disable"));
             }
             TokenInfo tokenInfo = TokenInfo.builder().userId(sysUserEntity.getUserId()).username(sysUserEntity.getUsername()).build();
             String realPwd = sysUserEntity.getPassword();
@@ -193,7 +197,7 @@ public class XWecomServer {
                 sysUserAssist.setUserId(Long.parseLong(state));
             }
             sysUserAssist.setWecomId(userId);
-            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId());
+            sysUserService.saveAssist(sysUserAssist.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
 
             response.sendRedirect(url);
         } catch (Exception e) {

backend/src/main/java/io/dataease/provider/datasource/JdbcProvider.java

@@ -90,7 +90,9 @@ public class JdbcProvider extends DefaultJdbcProvider {
             DatabaseMetaData databaseMetaData = connection.getMetaData();
             String tableNamePattern = datasourceRequest.getTable();
             if(datasourceRequest.getDatasource().getType().equalsIgnoreCase(DatasourceTypes.mysql.name())){
-                tableNamePattern = String.format(MySQLConstants.KEYWORD_TABLE, tableNamePattern);
+                if(databaseMetaData.getDriverMajorVersion() < 8){
+                    tableNamePattern = String.format(MySQLConstants.KEYWORD_TABLE, tableNamePattern);
+                }
             }
             ResultSet resultSet = databaseMetaData.getColumns(null, "%", tableNamePattern, "%");
             while (resultSet.next()) {
@@ -689,7 +691,7 @@ public class JdbcProvider extends DefaultJdbcProvider {
                 if (StringUtils.isEmpty(sqlServerConfiguration.getSchema())) {
                     throw new Exception(Translator.get("i18n_schema_is_empty"));
                 }
-                return "SELECT TABLE_NAME FROM DATABASE.INFORMATION_SCHEMA.VIEWS WHERE  TABLE_SCHEMA = 'DS_SCHEMA' ;"
+                return "SELECT TABLE_NAME FROM \"DATABASE\".INFORMATION_SCHEMA.VIEWS WHERE  TABLE_SCHEMA = 'DS_SCHEMA' ;"
                         .replace("DATABASE", sqlServerConfiguration.getDataBase())
                         .replace("DS_SCHEMA", sqlServerConfiguration.getSchema());
             case oracle:

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -1054,24 +1054,25 @@ public class DataSetTableService {
         return sql;
     }
 
-    public String removeVariables(String sql, String dsType) throws Exception {
+    public String removeVariables(final String sql, String dsType) throws Exception {
+        String tmpSql = sql;
         Pattern pattern = Pattern.compile(regex);
-        Matcher matcher = pattern.matcher(sql);
+        Matcher matcher = pattern.matcher(tmpSql);
         boolean hasVariables = false;
         while (matcher.find()) {
             hasVariables = true;
-            sql = sql.replace(matcher.group(), SubstitutedParams);
+            tmpSql = tmpSql.replace(matcher.group(), SubstitutedParams);
         }
-        if (!hasVariables && !sql.contains(SubstitutedParams)) {
-            return sql;
+        if (!hasVariables && !tmpSql.contains(SubstitutedParams)) {
+            return tmpSql;
         }
-        CCJSqlParserUtil.parse(sql, parser -> parser.withSquareBracketQuotation(true));
-        Statement statement = CCJSqlParserUtil.parse(sql);
+        CCJSqlParserUtil.parse(tmpSql, parser -> parser.withSquareBracketQuotation(true));
+        Statement statement = CCJSqlParserUtil.parse(tmpSql);
         Select select = (Select) statement;
 
         if (select.getSelectBody() instanceof PlainSelect) {
             return handlePlainSelect((PlainSelect) select.getSelectBody(), select, dsType);
-        }else {
+        } else {
             String result = "";
             SetOperationList setOperationList = (SetOperationList) select.getSelectBody();
             for (int i = 0; i < setOperationList.getSelects().size(); i++) {
@@ -1175,15 +1176,24 @@ public class DataSetTableService {
     }
 
     public Map<String, Object> getSQLPreview(DataSetTableRequest dataSetTableRequest) throws Exception {
+        DataTableInfoDTO dataTableInfo = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
+        String sql = dataTableInfo.isBase64Encryption() ? new String(java.util.Base64.getDecoder().decode(dataTableInfo.getSql())) : dataTableInfo.getSql();
         Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
         if (ds == null) {
             throw new Exception(Translator.get("i18n_invalid_ds"));
         }
+        String tmpSql = removeVariables(sql, ds.getType());
+        if (dataSetTableRequest.getMode() == 1 && (tmpSql.contains(SubstitutedParams) || tmpSql.contains(SubstitutedSql.trim()))) {
+            throw new Exception(Translator.get("I18N_SQL_variable_direct_limit"));
+        }
+        if (tmpSql.contains(SubstitutedParams)) {
+            throw new Exception(Translator.get("I18N_SQL_variable_limit"));
+        }
         Provider datasourceProvider = ProviderFactory.getProvider(ds.getType());
         DatasourceRequest datasourceRequest = new DatasourceRequest();
         datasourceRequest.setDatasource(ds);
-        DataTableInfoDTO dataTableInfo = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
-        String sql = dataTableInfo.isBase64Encryption() ? new String(java.util.Base64.getDecoder().decode(dataTableInfo.getSql())) : dataTableInfo.getSql();
+
+
         sql = handleVariableDefaultValue(sql, dataSetTableRequest.getSqlVariableDetails(), ds.getType());
         if (StringUtils.isEmpty(sql)) {
             DataEaseException.throwException(Translator.get("i18n_sql_not_empty"));
@@ -2372,7 +2382,7 @@ public class DataSetTableService {
             if (CollectionUtils.isNotEmpty(data)) {
                 jsonArray = data.stream().map(ele -> {
                     Map<String, Object> map = new HashMap<>();
-                    for (int i = 0; i < ele.size(); i++) {
+                    for (int i = 0; i < fieldArray.length; i++) {
                         map.put(fieldArray[i], ele.get(i));
                     }
                     return map;

backend/src/main/java/io/dataease/service/message/service/strategy/SendLarksuite.java

@@ -0,0 +1,39 @@
+package io.dataease.service.message.service.strategy;
+
+
+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.larksuite.service.LarksuiteXpackService;
+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;
+
+@Service("sendLarksuite")
+public class SendLarksuite implements SendService {
+
+    @Autowired
+    private AuthUserService authUserService;
+
+    @Resource
+    private SysUserService sysUserService;
+
+    @Override
+    public void sendMsg(Long userId, Long typeId, String content, String param) {
+        SysUserAssist sysUserAssist = sysUserService.assistInfo(userId);
+        if (ObjectUtils.isNotEmpty(sysUserAssist) && StringUtils.isNotBlank(sysUserAssist.getLarksuiteId()) && authUserService.supportLarksuite()) {
+            String username = sysUserAssist.getLarksuiteId();
+            LarksuiteXpackService larksuiteXpackService = SpringContextUtil.getBean(LarksuiteXpackService.class);
+            List<String> userIds = new ArrayList<>();
+            userIds.add(username);
+            larksuiteXpackService.pushMsg(userIds, content);
+        }
+    }
+}

backend/src/main/java/io/dataease/service/panel/PanelAppTemplateService.java

@@ -5,6 +5,7 @@ import io.dataease.commons.constants.CommonConstants;
 import io.dataease.commons.constants.PanelConstants;
 import io.dataease.commons.utils.AuthUtils;
 import io.dataease.commons.utils.BeanUtils;
+import io.dataease.controller.datasource.request.UpdataDsRequest;
 import io.dataease.controller.request.dataset.DataSetTableRequest;
 import io.dataease.controller.request.panel.PanelAppTemplateApplyRequest;
 import io.dataease.controller.request.panel.PanelAppTemplateRequest;
@@ -270,15 +271,36 @@ public class PanelAppTemplateService {
         return chartViewFieldsRealMap;
     }
 
-    public void nameCheck(PanelAppTemplateApplyRequest request) {
-        panelGroupService.checkPanelName(request.getPanelName(), request.getPanelId(), PanelConstants.OPT_TYPE_INSERT, null, "panel");
-        DatasetGroup datasetGroup = new DatasetGroup();
-        datasetGroup.setPid(request.getDatasetGroupId());
-        datasetGroup.setName(request.getDatasetGroupName());
-        dataSetGroupService.checkName(datasetGroup);
-        request.getDatasourceList().stream().forEach(datasource -> {
-            datasourceService.checkName(datasource.getName(), datasource.getType(), null);
-        });
+    public void nameCheck(PanelAppTemplateApplyRequest request, String optType) {
+        if ("add".equals(optType)) {
+            panelGroupService.checkPanelName(request.getPanelName(), request.getPanelGroupPid(), PanelConstants.OPT_TYPE_INSERT, null, "panel");
+            DatasetGroup datasetGroup = new DatasetGroup();
+            datasetGroup.setPid(request.getDatasetGroupPid());
+            datasetGroup.setName(request.getDatasetGroupName());
+            dataSetGroupService.checkName(datasetGroup);
+            request.getDatasourceList().stream().forEach(datasource -> {
+                datasourceService.checkName(datasource.getName(), datasource.getType(), null);
+            });
+        } else {
+            DatasetGroup datasetGroup = new DatasetGroup();
+            datasetGroup.setPid(request.getDatasetGroupPid());
+            datasetGroup.setName(request.getDatasetGroupName());
+            datasetGroup.setId(request.getDatasetGroupId());
+            dataSetGroupService.checkName(datasetGroup);
+            request.getDatasourceList().stream().forEach(datasource -> {
+                datasourceService.checkName(datasource.getName(), datasource.getType(), datasource.getId());
+            });
+        }
 
     }
+
+    @Transactional(rollbackFor = Exception.class)
+    public void editDatasource(List<Datasource> updateDatasourceList) throws Exception {
+        for (int i = 0; i < updateDatasourceList.size(); i++) {
+            UpdataDsRequest updataDsRequest = new UpdataDsRequest();
+            BeanUtils.copyBean(updataDsRequest, updateDatasourceList.get(i));
+            datasourceService.updateDatasource(updataDsRequest);
+
+        }
+    }
 }

backend/src/main/java/io/dataease/service/panel/PanelGroupService.java

@@ -127,9 +127,9 @@ public class PanelGroupService {
     @Resource
     private PanelAppTemplateLogService appTemplateLogService;
     @Resource
-    private ChartGroupService chartGroupService;
-    @Resource
     private DataSetGroupService dataSetGroupService;
+    @Resource
+    private DatasetGroupMapper datasetGroupMapper;
 
     public List<PanelGroupDTO> tree(PanelGroupRequest panelGroupRequest) {
         String userId = String.valueOf(AuthUtils.getUser().getUserId());
@@ -232,6 +232,25 @@ public class PanelGroupService {
         return panelId;
     }
 
+    public void move(PanelGroupRequest request){
+        PanelGroupWithBLOBs panelInfo = panelGroupMapper.selectByPrimaryKey(request.getId());
+        if (panelInfo.getPid().equalsIgnoreCase(request.getPid())) {
+            DataEaseException.throwException(Translator.get("i18n_select_diff_folder"));
+        }
+        // 移动校验
+        if (StringUtils.isNotEmpty(request.getName())) {
+            checkPanelName(request.getName(), request.getPid(), PanelConstants.OPT_TYPE_INSERT, request.getId(), panelInfo.getNodeType());
+        }
+        PanelGroupWithBLOBs record = new PanelGroupWithBLOBs();
+        record.setName(request.getName());
+        record.setId(request.getId());
+        record.setPid(request.getPid());
+        record.setUpdateTime(request.getUpdateTime());
+        record.setUpdateBy(request.getUpdateBy());
+        panelGroupMapper.updateByPrimaryKeySelective(record);
+        DeLogUtils.save(SysLogConstants.OPERATE_TYPE.MODIFY, sourceType, request.getId(), panelInfo.getPid(), request.getPid(), sourceType);
+    }
+
 
     public void checkPanelName(String name, String pid, String optType, String id, String nodeType) {
         PanelGroupExample groupExample = new PanelGroupExample();
@@ -811,12 +830,12 @@ public class PanelGroupService {
     @Transactional(rollbackFor = Exception.class)
     public String appApply(PanelAppTemplateApplyRequest request) throws Exception{
         //仪表板名称校验，数据集分组名称校验，数据源名称校验
-        panelAppTemplateService.nameCheck(request);
+        panelAppTemplateService.nameCheck(request,"add");
 
         String newPanelId = UUIDUtil.getUUIDAsString();
         // 新建数据集分组
         DatasetGroup newDatasetGroup = new DatasetGroup();
-        newDatasetGroup.setPid(request.getDatasetGroupId());
+        newDatasetGroup.setPid(request.getDatasetGroupPid());
         newDatasetGroup.setName(request.getDatasetGroupName());
         newDatasetGroup.setType("group");
         DataSetGroupDTO resultDatasetGroup = dataSetGroupService.save(newDatasetGroup);
@@ -853,7 +872,7 @@ public class PanelGroupService {
 
         panelAppTemplateService.applyViewsField(chartViewFieldsInfo,chartViewsRealMap,datasetsRealMap,datasetFieldsRealMap);
 
-        panelAppTemplateService.applyPanel(panelInfo,chartViewsRealMap,newPanelId, request.getPanelName(), request.getPanelId());
+        panelAppTemplateService.applyPanel(panelInfo,chartViewsRealMap,newPanelId, request.getPanelName(), request.getPanelGroupPid());
 
         panelAppTemplateService.applyPanelView(panelViewsInfo,chartViewsRealMap,newPanelId);
 
@@ -873,4 +892,42 @@ public class PanelGroupService {
         appTemplateLogService.newAppApplyLog(templateLog);
         return newPanelId;
     }
+
+    @Transactional(rollbackFor = Exception.class)
+    public void appEdit(PanelAppTemplateApplyRequest request) throws Exception{
+        long currentTime = System.currentTimeMillis();
+        String userName = AuthUtils.getUser().getUsername();
+        //名称校验，数据集分组名称校验，数据源名称校验
+        panelAppTemplateService.nameCheck(request,"update");
+        //仪表板移动更新名称
+        PanelGroup panelHistoryInfo = panelGroupMapper.selectByPrimaryKey(request.getPanelId());
+        String panelHistoryPid = panelHistoryInfo.getPid();
+        if(panelHistoryPid.equals(request.getPanelGroupPid())){
+            // 未移动
+            checkPanelName(request.getPanelName(), request.getPanelGroupPid(), PanelConstants.OPT_TYPE_UPDATE, request.getPanelId(), "panel");
+        }else{
+            checkPanelName(request.getPanelName(), request.getPanelGroupPid(), PanelConstants.OPT_TYPE_INSERT, null, "panel");
+        }
+        panelHistoryInfo.setName(request.getPanelName());
+        panelHistoryInfo.setPid(request.getPanelGroupPid());
+        panelHistoryInfo.setUpdateBy(userName);
+        panelHistoryInfo.setUpdateTime(currentTime);
+        panelGroupMapper.updateByPrimaryKey(panelHistoryInfo);
+
+        //数据集分组移动,变更
+        DatasetGroup datasetGroupHistoryInfo = datasetGroupMapper.selectByPrimaryKey(request.getDatasetGroupId());
+        DatasetGroup datasetGroup = new DatasetGroup();
+        datasetGroup.setName(request.getDatasetGroupName());
+        datasetGroup.setId(request.getDatasetGroupId());
+        if(datasetGroupHistoryInfo.getPid().equals(request.getDatasetGroupPid())){
+            datasetGroup.setPid(request.getDatasetGroupPid());
+        }
+        dataSetGroupService.checkName(datasetGroup);
+        datasetGroupHistoryInfo.setName(request.getDatasetGroupName());
+        datasetGroupHistoryInfo.setPid(request.getDatasetGroupPid());
+        datasetGroupMapper.updateByPrimaryKey(datasetGroupHistoryInfo);
+
+        //数据源变更
+        panelAppTemplateService.editDatasource(request.getDatasourceList());
+    }
 }

backend/src/main/java/io/dataease/service/panel/applog/AppLogQueryParam.java

@@ -7,5 +7,6 @@ import java.util.List;
 
 @Data
 public class AppLogQueryParam extends GridExample {
+    private String userId;
 
 }

backend/src/main/java/io/dataease/service/panel/applog/AppLogService.java

@@ -1,13 +1,20 @@
 package io.dataease.service.panel.applog;
 
 import com.google.gson.Gson;
+import io.dataease.commons.utils.AuthUtils;
 import io.dataease.controller.sys.request.KeyGridRequest;
 import io.dataease.dto.SysLogDTO;
 import io.dataease.dto.appTemplateMarket.AppLogGridDTO;
 import io.dataease.ext.ExtAppLogMapper;
 import io.dataease.ext.query.GridExample;
 import io.dataease.plugins.common.base.mapper.PanelAppTemplateLogMapper;
+import io.dataease.service.dataset.DataSetGroupService;
+import io.dataease.service.datasource.DatasourceService;
+import io.dataease.service.panel.PanelGroupService;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
 import javax.annotation.Resource;
 import java.util.List;
 
@@ -19,12 +26,19 @@ public class AppLogService {
     private PanelAppTemplateLogMapper appLogMapper;
     @Resource
     private ExtAppLogMapper extAppLogMapper;
+    @Resource
+    private PanelGroupService panelGroupService;
+    @Resource
+    private DataSetGroupService dataSetGroupService;
+    @Resource
+    private DatasourceService datasourceService;
 
 
     public List<AppLogGridDTO> query(KeyGridRequest request) {
         GridExample gridExample = request.convertExample();
         gridExample.setExtendCondition(request.getKeyWord());
         AppLogQueryParam logQueryParam = gson.fromJson(gson.toJson(gridExample), AppLogQueryParam.class);
+        logQueryParam.setUserId(String.valueOf(AuthUtils.getUser().getUserId()));
         List<AppLogGridDTO> voLogs = extAppLogMapper.query(logQueryParam);
         return voLogs;
     }
@@ -34,4 +48,19 @@ public class AppLogService {
     }
 
 
+    @Transactional
+    public void deleteLogAndResource(AppLogGridDTO request) throws Exception {
+        if (request.getDeleteResource()) {
+            if (StringUtils.isNotEmpty(request.getPanelId())) {
+                panelGroupService.deleteCircle(request.getPanelId());
+            }
+            if (StringUtils.isNotEmpty(request.getDatasetGroupId())) {
+                dataSetGroupService.delete(request.getDatasetGroupId());
+            }
+            if (StringUtils.isNotEmpty(request.getDatasourceId())) {
+                datasourceService.deleteDatasource(request.getDatasourceId());
+            }
+        }
+        appLogMapper.deleteByPrimaryKey(request.getId());
+    }
 }

backend/src/main/java/io/dataease/service/sys/SysUserService.java

@@ -21,6 +21,7 @@ import io.dataease.plugins.common.base.mapper.SysUsersRolesMapper;
 import io.dataease.plugins.common.entity.XpackLdapUserEntity;
 import io.dataease.plugins.xpack.dingtalk.dto.response.DingUserEntity;
 import io.dataease.plugins.xpack.lark.dto.entity.LarkUserInfo;
+import io.dataease.plugins.xpack.larksuite.dto.entity.UserData;
 import io.dataease.plugins.xpack.oidc.dto.SSOUserInfo;
 
 import org.apache.commons.collections4.CollectionUtils;
@@ -107,7 +108,7 @@ public class SysUserService {
 
         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());
+            saveAssist(userId, sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
         }
 
         return insert;
@@ -157,7 +158,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));
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), u.getUsername(), null, null, null));
 
     }
 
@@ -180,7 +181,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));
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), null, u.getUsername(), null, null));
     }
 
     @Transactional
@@ -202,7 +203,29 @@ 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()));
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), null, null, u.getUsername(), null));
+    }
+
+    @Transactional
+    public void saveLarksuiteCUser(UserData larkUserInfo, String email) {
+        long now = System.currentTimeMillis();
+        SysUser sysUser = new SysUser();
+
+        sysUser.setUsername(larkUserInfo.getUser_id());
+        sysUser.setNickName(larkUserInfo.getName());
+        sysUser.setEmail(email);
+        sysUser.setPassword(CodingUtil.md5(DEFAULT_PWD));
+        sysUser.setCreateTime(now);
+        sysUser.setUpdateTime(now);
+
+        sysUser.setEnabled(1L);
+        sysUser.setLanguage("zh_CN");
+        sysUser.setFrom(7);
+        sysUser.setIsAdmin(false);
+        sysUser.setSub(larkUserInfo.getUnion_id());
+        sysUser.setPhone(larkUserInfo.getMobile());
+        sysUserMapper.insert(sysUser);
+        Optional.ofNullable(findOne(sysUser)).ifPresent(u -> saveAssist(u.getUserId(), null, null, null, u.getUsername()));
     }
 
     @Transactional
@@ -299,7 +322,7 @@ public class SysUserService {
 
         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());
+            saveAssist(user.getUserId(), sysUserAssist.getWecomId(), sysUserAssist.getDingtalkId(), sysUserAssist.getLarkId(), sysUserAssist.getLarksuiteId());
         }
         return result;
     }
@@ -550,12 +573,13 @@ public class SysUserService {
         sysUserAssistMapper.insertSelective(sysUserAssist);
     }
 
-    public void saveAssist(Long userId, String wecomId, String dingtlkId, String larkId) {
+    public void saveAssist(Long userId, String wecomId, String dingtlkId, String larkId, String larksuiteId) {
         SysUserAssist existAssist = sysUserAssistMapper.selectByPrimaryKey(userId);
         if (ObjectUtils.isNotEmpty(existAssist)) {
             existAssist.setWecomId(wecomId);
             existAssist.setDingtalkId(dingtlkId);
             existAssist.setLarkId(larkId);
+            existAssist.setLarksuiteId(larksuiteId);
             sysUserAssistMapper.updateByPrimaryKey(existAssist);
             return;
         }
@@ -564,6 +588,7 @@ public class SysUserService {
         sysUserAssist.setWecomId(wecomId);
         sysUserAssist.setDingtalkId(dingtlkId);
         sysUserAssist.setLarkId(larkId);
+        sysUserAssist.setLarksuiteId(larksuiteId);
         sysUserAssistMapper.insert(sysUserAssist);
     }
 

backend/src/main/resources/db/migration/V29__de1.6.sql

@@ -27,7 +27,7 @@ ADD COLUMN `mobile_layout` tinyint(1) NULL DEFAULT 0 COMMENT '启用移动端布
 DROP FUNCTION IF EXISTS `GET_PANEL_WITH_PRIVILEGE_AND_MOBILE`;
 delimiter ;;
 CREATE FUNCTION `GET_PANEL_WITH_PRIVILEGE_AND_MOBILE`(userId longtext,modelType varchar(255),privilegeType varchar(255))
- RETURNS longtext CHARSET utf8
+ RETURNS longtext CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 
@@ -73,7 +73,7 @@ delimiter ;
 DROP FUNCTION IF EXISTS `GET_V_AUTH_MODEL_ID_P_USE_MOBILE`;
 delimiter ;;
 CREATE FUNCTION `GET_V_AUTH_MODEL_ID_P_USE_MOBILE`(userId longtext,modelType varchar(255))
- RETURNS longtext CHARSET utf8
+ RETURNS longtext CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 

backend/src/main/resources/db/migration/V32__1.8.sql

@@ -344,7 +344,7 @@ CREATE TABLE `sys_background_image` (
   `base_url` varchar(255) DEFAULT NULL,
   `url` varchar(255) DEFAULT NULL,
   PRIMARY KEY (`id`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
 
 -- ----------------------------
 -- Records of sys_background_image
@@ -404,7 +404,7 @@ CREATE TABLE `dataease_code_version` (
   `success` tinyint(1) NOT NULL,
   PRIMARY KEY (`installed_rank`),
   KEY `dataease_version_s_idx` (`success`)
-) ENGINE=InnoDB DEFAULT CHARSET=utf8;
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;
 
 -- ----------------------------
 -- Records of dataease_code_version
@@ -429,7 +429,7 @@ CREATE ALGORITHM = UNDEFINED SQL SECURITY DEFINER VIEW `v_history_chart_view` AS
 DROP FUNCTION IF EXISTS `GET_CHART_GROUP_WITH_CHILDREN`;
 delimiter ;;
 CREATE FUNCTION `GET_CHART_GROUP_WITH_CHILDREN`(parentId varchar(8000))
- RETURNS LONGTEXT CHARSET utf8
+ RETURNS LONGTEXT CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 

backend/src/main/resources/db/migration/V33__1.9.sql

@@ -105,7 +105,7 @@ ADD COLUMN `copy_id` varchar(255) NULL COMMENT '复制ID' AFTER `copy_from`;
 DROP FUNCTION IF EXISTS `copy_auth`;
 delimiter ;;
 CREATE FUNCTION `copy_auth`(authSource varchar(255),authSourceType varchar(255),authUser varchar(255))
- RETURNS varchar(255) CHARSET utf8mb4
+ RETURNS varchar(255) CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 
@@ -256,7 +256,7 @@ delimiter ;
 DROP FUNCTION IF EXISTS `delete_auth_source`;
 delimiter ;;
 CREATE FUNCTION `delete_auth_source`(authSource varchar(255),authSourceType varchar(255))
- RETURNS varchar(255) CHARSET utf8mb4
+ RETURNS varchar(255) CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 
@@ -285,7 +285,7 @@ INSERT INTO `sys_menu` VALUES (101, 1, 4, 1, '插件管理', 'system-plugin', 's
 DROP FUNCTION IF EXISTS `GET_CHART_VIEW_COPY_NAME`;
 delimiter ;;
 CREATE FUNCTION `GET_CHART_VIEW_COPY_NAME`(chartId varchar(255),pid varchar(255))
- RETURNS varchar(255) CHARSET utf8mb4
+ RETURNS varchar(255) CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 

backend/src/main/resources/db/migration/V40__1.15.sql

@@ -213,7 +213,7 @@ delimiter ;
 DROP FUNCTION IF EXISTS `GET_CHART_VIEW_COPY_NAME`;
 delimiter ;;
 CREATE FUNCTION `GET_CHART_VIEW_COPY_NAME`(chartId varchar(255),pid varchar(255))
-    RETURNS varchar(255) CHARSET utf8mb4
+    RETURNS varchar(255) CHARSET utf8mb4 COLLATE utf8mb4_general_ci
   READS SQL DATA
 BEGIN
 

backend/src/main/resources/db/migration/V42__1.16.sql

@@ -1,16 +1,272 @@
-UPDATE `sys_menu` set `component` = REPLACE(`component`, 'SysParam', 'sysParam') where (`component` like '%SysParam%');
+UPDATE `sys_menu`
+set `component` = REPLACE(`component`, 'SysParam', 'sysParam')
+where (`component` like '%SysParam%');
 
-UPDATE `sys_menu` set `component` = REPLACE(`component`, 'privateForm', 'PrivateForm') where (`component` like '%privateForm%');
+UPDATE `sys_menu`
+set `component` = REPLACE(`component`, 'privateForm', 'PrivateForm')
+where (`component` like '%privateForm%');
 
-UPDATE `sys_menu` set `component` = REPLACE(`component`, 'personPwd', 'PersonPwd') where (`component` like '%personPwd%');
+UPDATE `sys_menu`
+set `component` = REPLACE(`component`, 'personPwd', 'PersonPwd')
+where (`component` like '%personPwd%');
 
-UPDATE `sys_menu` set `component` = REPLACE(`component`, 'dataset', 'Dataset') where (`component` = 'system/task/dataset');
+UPDATE `sys_menu`
+set `component` = REPLACE(`component`, 'dataset', 'Dataset')
+where (`component` = 'system/task/dataset');
 
-UPDATE `sys_menu` set `component` = REPLACE(`component`, 'form', 'Form') where (`component` = 'system/task/form');
+UPDATE `sys_menu`
+set `component` = REPLACE(`component`, 'form', 'Form')
+where (`component` = 'system/task/form');
 
-ALTER TABLE `dataset_table_field` ADD COLUMN `date_format` VARCHAR(255) NULL AFTER `accuracy`;
+ALTER TABLE `dataset_table_field`
+    ADD COLUMN `date_format` VARCHAR(255) NULL AFTER `accuracy`;
 
-ALTER TABLE `sys_task_email` ADD COLUMN `view_data_range` VARCHAR(255) NULL DEFAULT 'view' AFTER `reci_users`;
+ALTER TABLE `sys_task_email`
+    ADD COLUMN `view_data_range` VARCHAR(255) NULL DEFAULT 'view' AFTER `reci_users`;
 
 
-UPDATE `sys_msg_type` set `type_name` = 'i18n_msg_type_dataset_sync_failed' WHERE (`msg_type_id` = 6);
+UPDATE `sys_msg_type`
+set `type_name` = 'i18n_msg_type_dataset_sync_failed'
+WHERE (`msg_type_id` = 6);
+
+ALTER TABLE `sys_user_assist`
+    ADD COLUMN `larksuite_id` VARCHAR(255) NULL DEFAULT NULL AFTER `lark_id`;
+
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`,
+                        `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`,
+                        `update_time`)
+VALUES (41, 1, 1, 1, '应用管理', 'system-app-template', 'panel/appTemplate/index', 13, 'sys-param',
+        'panel/appTemplate/index', 0, 0, 0, NULL, NULL, NULL, NULL, 1620444227389);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`,
+                        `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`,
+                        `update_time`)
+VALUES (203, 0, 0, 1, '应用', 'app-template-market', 'panel/appTemplateMarket/index', 6, 'dashboard',
+        '/appTemplateMarket', 0, 0, 0, NULL, NULL, NULL, NULL, 1620444227389);
+
+ALTER TABLE `dataset_table_field` CHANGE COLUMN `type` `type` VARCHAR(255) NOT NULL COMMENT '原始字段类型' ;
+
+INSERT INTO `my_plugin` (`name`, `store`, `free`, `cost`, `category`, `descript`, `version`, `creator`, `load_mybatis`,
+                         `install_time`, `module_name`, `ds_type`)
+VALUES ('Apache Kylin 数据源插件', 'default', '0', '0', 'datasource', 'Apache Kylin 数据源插件', '1.0-SNAPSHOT', 'DATAEASE', '0',
+        '1650765903630', 'kylin-backend', 'kylin');
+
+
+
+INSERT INTO `sys_msg_channel` (`msg_channel_id`, `channel_name`, `service_name`) VALUES ('6', 'webmsg.channel_larksuite_msg', 'sendLarksuite');
+
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (204, 203, 0, 2, '删除记录', NULL, NULL, 999, NULL, NULL, 0, 0, 0, 'appLog:del', NULL, NULL, 1614930903502, 1614930903502);
+INSERT INTO `sys_menu` (`menu_id`, `pid`, `sub_count`, `type`, `title`, `name`, `component`, `menu_sort`, `icon`, `path`, `i_frame`, `cache`, `hidden`, `permission`, `create_by`, `update_by`, `create_time`, `update_time`) VALUES (205, 203, 0, 2, '编辑记录', NULL, NULL, 999, NULL, NULL, 0, 0, 0, 'appLog:edit', NULL, NULL, 1614930935529, 1614930935529);
+
+INSERT INTO `sys_auth` (`id`, `auth_source`, `auth_source_type`, `auth_target`, `auth_target_type`, `auth_time`, `auth_details`, `auth_user`, `update_time`, `copy_from`, `copy_id`) VALUES ('46e4e2cb-1349-40c3-a72d-7b0b30ab5d14', '203', 'menu', '1', 'role', 1666840141866, NULL, 'admin', NULL, NULL, NULL);
+INSERT INTO `sys_auth` (`id`, `auth_source`, `auth_source_type`, `auth_target`, `auth_target_type`, `auth_time`, `auth_details`, `auth_user`, `update_time`, `copy_from`, `copy_id`) VALUES ('6e22ad53-d737-447f-9686-5041e122b4dc', '205', 'menu', '1', 'role', 1666840141468, NULL, 'admin', NULL, NULL, NULL);
+INSERT INTO `sys_auth` (`id`, `auth_source`, `auth_source_type`, `auth_target`, `auth_target_type`, `auth_time`, `auth_details`, `auth_user`, `update_time`, `copy_from`, `copy_id`) VALUES ('da17fcfe-7875-4aaf-983b-d750d71f36d2', '204', 'menu', '1', 'role', 1666840141658, NULL, 'admin', 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 ('b4fe2e52-55a4-11ed-bf84-0242ac130005', '6e22ad53-d737-447f-9686-5041e122b4dc', 'i18n_auth_grant', 15, 0, 'grant', '基础权限-授权', 'admin', 1666840141000, 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 ('b4fe3215-55a4-11ed-bf84-0242ac130005', '6e22ad53-d737-447f-9686-5041e122b4dc', 'i18n_auth_use', 1, 1, 'use', '基础权限-使用', 'admin', 1666840141000, 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 ('b51affbf-55a4-11ed-bf84-0242ac130005', 'da17fcfe-7875-4aaf-983b-d750d71f36d2', 'i18n_auth_grant', 15, 0, 'grant', '基础权限-授权', 'admin', 1666840141000, 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 ('b51b0473-55a4-11ed-bf84-0242ac130005', 'da17fcfe-7875-4aaf-983b-d750d71f36d2', 'i18n_auth_use', 1, 1, 'use', '基础权限-使用', 'admin', 1666840141000, 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 ('b53a1ad7-55a4-11ed-bf84-0242ac130005', '46e4e2cb-1349-40c3-a72d-7b0b30ab5d14', 'i18n_auth_grant', 15, 0, 'grant', '基础权限-授权', 'admin', 1666840142000, 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 ('b53a1dfd-55a4-11ed-bf84-0242ac130005', '46e4e2cb-1349-40c3-a72d-7b0b30ab5d14', 'i18n_auth_use', 1, 1, 'use', '基础权限-使用', 'admin', 1666840142000, NULL, NULL, NULL);
+
+
+DROP VIEW IF EXISTS `v_auth_model`;
+CREATE ALGORITHM = UNDEFINED SQL SECURITY DEFINER VIEW `v_auth_model` AS SELECT
+                                                                             `sys_user`.`user_id` AS `id`,
+                                                                             concat( `sys_user`.`nick_name`, '（', `sys_user`.`username`, '）' ) AS `name`,
+                                                                             `sys_user`.`username` AS `label`,
+                                                                             '0' AS `pid`,
+                                                                             'leaf' AS `node_type`,
+                                                                             'user' AS `model_type`,
+                                                                             'user' AS `model_inner_type`,
+                                                                             'target' AS `auth_type`,
+                                                                             `sys_user`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `sys_user`
+                                                                         WHERE
+                                                                             ( `sys_user`.`is_admin` <> 1 ) UNION ALL
+                                                                         SELECT
+                                                                             `sys_role`.`role_id` AS `id`,
+                                                                             `sys_role`.`name` AS `name`,
+                                                                             `sys_role`.`name` AS `label`,
+                                                                             '0' AS `pid`,
+                                                                             'leaf' AS `node_type`,
+                                                                             'role' AS `model_type`,
+                                                                             'role' AS `model_inner_type`,
+                                                                             'target' AS `auth_type`,
+                                                                             `sys_role`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `sys_role` UNION ALL
+                                                                         SELECT
+                                                                             `sys_dept`.`dept_id` AS `id`,
+                                                                             `sys_dept`.`name` AS `name`,
+                                                                             `sys_dept`.`name` AS `label`,(
+                                                                                     cast( `sys_dept`.`pid` AS CHAR charset utf8mb4 ) COLLATE utf8mb4_general_ci
+                                                                                 ) AS `pid`,
+                                                                             IF
+                                                                                 (( `sys_dept`.`sub_count` = 0 ), 'leaf', 'spine' ) AS `node_type`,
+                                                                             'dept' AS `model_type`,
+                                                                             'dept' AS `model_inner_type`,
+                                                                             'target' AS `auth_type`,
+                                                                             `sys_dept`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `sys_dept` UNION ALL
+                                                                         SELECT
+                                                                             `datasource`.`id` AS `id`,
+                                                                             `datasource`.`name` AS `NAME`,
+                                                                             `datasource`.`name` AS `label`,
+                                                                             '0' AS `pid`,
+                                                                             'leaf' AS `node_type`,
+                                                                             'link' AS `model_type`,
+                                                                             `datasource`.`type` AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `datasource`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `datasource` UNION ALL
+                                                                         SELECT
+                                                                             `dataset_group`.`id` AS `id`,
+                                                                             `dataset_group`.`name` AS `NAME`,
+                                                                             `dataset_group`.`name` AS `label`,
+                                                                             IF
+                                                                                 ( isnull( `dataset_group`.`pid` ), '0', `dataset_group`.`pid` ) AS `pid`,
+                                                                             'spine' AS `node_type`,
+                                                                             'dataset' AS `model_type`,
+                                                                             `dataset_group`.`type` AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `dataset_group`.`create_by` AS `create_by`,
+                                                                             `dataset_group`.`level` AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `dataset_group` UNION ALL
+                                                                         SELECT
+                                                                             `dataset_table`.`id` AS `id`,
+                                                                             `dataset_table`.`name` AS `NAME`,
+                                                                             `dataset_table`.`name` AS `label`,
+                                                                             `dataset_table`.`scene_id` AS `pid`,
+                                                                             'leaf' AS `node_type`,
+                                                                             'dataset' AS `model_type`,
+                                                                             `dataset_table`.`type` AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `dataset_table`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             `dataset_table`.`mode` AS `mode`,
+                                                                             `dataset_table`.`data_source_id` AS `data_source_id`
+                                                                         FROM
+                                                                             `dataset_table` UNION ALL
+                                                                         SELECT
+                                                                             `panel_group`.`id` AS `id`,
+                                                                             `panel_group`.`name` AS `NAME`,
+                                                                             `panel_group`.`name` AS `label`,(
+                                                                                 CASE
+                                                                                     `panel_group`.`id`
+                                                                                     WHEN 'panel_list' THEN
+                                                                                         '0'
+                                                                                     WHEN 'default_panel' THEN
+                                                                                         '0' ELSE `panel_group`.`pid`
+                                                                                     END
+                                                                                 ) AS `pid`,
+                                                                             IF
+                                                                                 (( `panel_group`.`node_type` = 'folder' ), 'spine', 'leaf' ) AS `node_type`,
+                                                                             'panel' AS `model_type`,
+                                                                             `panel_group`.`panel_type` AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `panel_group`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `panel_group` UNION ALL
+                                                                         SELECT
+                                                                             `sys_menu`.`menu_id` AS `menu_id`,
+                                                                             `sys_menu`.`title` AS `name`,
+                                                                             `sys_menu`.`title` AS `label`,
+                                                                             `sys_menu`.`pid` AS `pid`,
+                                                                             IF
+                                                                                 (( `sys_menu`.`sub_count` > 0 ), 'spine', 'leaf' ) AS `node_type`,
+                                                                             'menu' AS `model_type`,(
+                                                                                 CASE
+                                                                                     `sys_menu`.`type`
+                                                                                     WHEN 0 THEN
+                                                                                         'folder'
+                                                                                     WHEN 1 THEN
+                                                                                         'menu'
+                                                                                     WHEN 2 THEN
+                                                                                         'button'
+                                                                                     END
+                                                                                 ) AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `sys_menu`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `sys_menu`
+                                                                         WHERE
+                                                                             ((
+                                                                                      `sys_menu`.`i_frame` <> 1
+                                                                                  )
+                                                                                 OR isnull( `sys_menu`.`i_frame` )) UNION ALL
+                                                                         SELECT
+                                                                             `plugin_sys_menu`.`menu_id` AS `menu_id`,
+                                                                             `plugin_sys_menu`.`title` AS `name`,
+                                                                             `plugin_sys_menu`.`title` AS `label`,
+                                                                             `plugin_sys_menu`.`pid` AS `pid`,
+                                                                             IF
+                                                                                 (( `plugin_sys_menu`.`sub_count` > 0 ), 'spine', 'leaf' ) AS `node_type`,
+                                                                             'menu' AS `model_type`,(
+                                                                                 CASE
+                                                                                     `plugin_sys_menu`.`type`
+                                                                                     WHEN 0 THEN
+                                                                                         'folder'
+                                                                                     WHEN 1 THEN
+                                                                                         'menu'
+                                                                                     WHEN 2 THEN
+                                                                                         'button'
+                                                                                     END
+                                                                                 ) AS `model_inner_type`,
+                                                                             'source' AS `auth_type`,
+                                                                             `plugin_sys_menu`.`create_by` AS `create_by`,
+                                                                             0 AS `level`,
+                                                                             0 AS `mode`,
+                                                                             '0' AS `data_source_id`
+                                                                         FROM
+                                                                             `plugin_sys_menu`
+                                                                         WHERE
+                                                                             ((
+                                                                                      `plugin_sys_menu`.`i_frame` <> 1
+                                                                                  )
+                                                                                 OR isnull( `plugin_sys_menu`.`i_frame` ));
+
+-- ----------------------------
+-- Function structure for delete_auth_target
+-- ----------------------------
+DROP FUNCTION IF EXISTS `delete_auth_target`;
+delimiter ;;
+CREATE FUNCTION `delete_auth_target`(authTarget varchar(255),authTargetType varchar(255))
+    RETURNS varchar(255) CHARSET utf8mb4
+  READS SQL DATA
+BEGIN
+
+delete from sys_auth_detail where auth_id in (
+    select id from  sys_auth where sys_auth.auth_target=authTarget and sys_auth.auth_target_type=authTargetType
+);
+
+delete from sys_auth where sys_auth.auth_target=authTarget and sys_auth.auth_target_type=authTargetType;
+
+RETURN 'success';
+
+END
+;;
+delimiter ;

backend/src/main/resources/i18n/messages_en_US.properties

@@ -194,6 +194,7 @@ I18N_DATASOURCE_LEVEL_GRANT=Grant
 I18N_NO_PERMISSION=You do not have permission to
 I18N_PLEASE_CONCAT_ADMIN=Please contact the administrator for authorization
 I18N_SQL_variable_limit=SQL variables can only be used in where conditions
+I18N_SQL_variable_direct_limit=SQL variables can only be used for direct connection
 I18N_EMAIL_CONFIG_ERROR=Email config error
 I18N_EMAIL_HOST_ERROR=Email host can not be empty
 I18N_EMAIL_PORT_ERROR=Email port can not be empty

backend/src/main/resources/i18n/messages_zh_CN.properties

@@ -194,6 +194,7 @@ I18N_DATASOURCE_LEVEL_GRANT=\u6388\u6743
 I18N_NO_PERMISSION=\u5F53\u524D\u7528\u6237\u6CA1\u6709\u6743\u9650
 I18N_PLEASE_CONCAT_ADMIN=\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458\u5F00\u901A
 I18N_SQL_variable_limit=SQL \u53D8\u91CF\u53EA\u80FD\u5728 WHERE \u6761\u4EF6\u4E2D\u4F7F\u7528
+I18N_SQL_variable_direct_limit=SQL变量只能用于直连
 I18N_EMAIL_CONFIG_ERROR=\u90AE\u4EF6\u914D\u7F6E\u9519\u8BEF
 I18N_EMAIL_HOST_ERROR=\u90AE\u4EF6\u4E3B\u673A\u4E0D\u80FD\u4E3A\u7A7A
 I18N_EMAIL_PORT_ERROR=\u90AE\u4EF6\u7AEF\u53E3\u4E0D\u80FD\u4E3A\u7A7A

backend/src/main/resources/i18n/messages_zh_TW.properties

@@ -190,6 +190,7 @@ I18N_DATASOURCE_LEVEL_GRANT=\u6388\u6B0A
 I18N_NO_PERMISSION=\u7576\u524D\u7528\u6236\u6C92\u6709\u6B0A\u9650
 I18N_PLEASE_CONCAT_ADMIN=\u8ACB\u806F\u7CFB\u7BA1\u7406\u54E1\u958B\u901A
 I18N_SQL_variable_limit=SQL\u8B8A\u6578\u53EA\u80FD\u5728WHERE\u689D\u4EF6\u4E2D\u4F7F\u7528
+I18N_SQL_variable_direct_limit=SQL變數只能用於直連
 I18N_EMAIL_CONFIG_ERROR=\u90F5\u4EF6\u914D\u7F6E\u932F\u8AA4
 I18N_EMAIL_HOST_ERROR=\u90F5\u4EF6\u4E3B\u6A5F\u4E0D\u80FD\u70BA\u7A7A
 I18N_EMAIL_PORT_ERROR=\u90F5\u4EF6\u7AEF\u53E3\u4E0D\u80FD\u70BA\u7A7A

frontend/src/api/appTemplateMarket/log.js

@@ -11,7 +11,7 @@ export function logGrid(page, size, data) {
 
 export function opTypes() {
   return request({
-    url: '/api/log/opTypes',
+    url: '/app/log/opTypes',
     method: 'post',
     loading: true
   })
@@ -19,10 +19,19 @@ export function opTypes() {
 
 export function exportExcel(data) {
   return request({
-    url: '/api/log/export',
+    url: '/app/log/export',
     method: 'post',
     loading: true,
     responseType: 'blob',
     data
   })
 }
+
+export function deleteLogAndResource(data) {
+  return request({
+    url: '/app/log/deleteLog',
+    method: 'post',
+    data,
+    loading: true
+  })
+}

frontend/src/api/panel/panel.js

@@ -313,7 +313,33 @@ export function appApply(data) {
   return request({
     url: 'panel/group/appApply',
     method: 'post',
-    loading: true,
+    loading: false,
     data
   })
 }
+
+export function appEdit(data) {
+  return request({
+    url: 'panel/group/appEdit',
+    method: 'post',
+    loading: false,
+    data
+  })
+}
+
+export function editApply(data) {
+  return request({
+    url: 'panel/group/appApply',
+    method: 'post',
+    loading: false,
+    data
+  })
+}
+
+export function findOneWithParent(panelId) {
+  return request({
+    url: 'panel/group/findOneWithParent/' + panelId,
+    method: 'get',
+    loading: false
+  })
+}

frontend/src/api/user.js

@@ -18,14 +18,16 @@ export function getInfo(token) {
 export function logout() {
   return request({
     url: '/api/auth/logout',
-    method: 'post'
+    method: 'post',
+    hideMsg: true
   })
 }
 
 export function deLogout() {
   return request({
     url: '/api/auth/deLogout',
-    method: 'post'
+    method: 'post',
+    hideMsg: true
   })
 }
 
@@ -100,6 +102,13 @@ export function casStatus() {
   })
 }
 
+export function casLoginPage() {
+  return request({
+    url: '/cas/loginPage',
+    method: 'get'
+  })
+}
+
 export function wecomStatus() {
   return request({
     url: '/api/auth/isOpenWecom',
@@ -121,6 +130,13 @@ export function larkStatus() {
   })
 }
 
+export function larksuiteStatus() {
+  return request({
+    url: '/api/auth/isOpenLarksuite',
+    method: 'post'
+  })
+}
+
 export function pluginLoaded() {
   return request({
     url: '/api/auth/isPluginLoaded',

frontend/src/components/AsyncComponent/index.vue

@@ -52,7 +52,8 @@ export default {
         if (res) {
           const Fn = Function
           const dynamicCode = res.data || res
-          this.mode = new Fn(`return ${dynamicCode}`)()
+          const component = new Fn(`return ${dynamicCode}`)()
+          this.mode = component.default || component
         }
       }
     }

frontend/src/components/DeDrag/MoveInShadow.vue

@@ -1,71 +0,0 @@
-<template>
-  <div
-    style="z-index:-1"
-    :style="style"
-  />
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  replace: true,
-  name: 'MoveInShadow',
-  props: {
-    w: {
-      type: Number,
-      required: true
-    },
-    h: {
-      type: Number,
-      required: true
-    },
-    x: {
-      type: Number,
-      required: true
-    },
-    y: {
-      type: Number,
-      required: true
-    },
-    z: {
-      type: Number,
-      required: true
-    }
-  },
-  computed: {
-    style() {
-      // 当前默认为自适应
-      let left = this.x
-      let top = this.y
-      let width = this.w
-      let height = this.h
-      if (this.canvasStyleData.auxiliaryMatrix) {
-        left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-        top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-        height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      }
-      const style = {
-        transform: `translate(${left}px, ${top}px) rotate(0deg)`,
-        width: width + 'px',
-        height: height + 'px',
-        opacity: 0.4,
-        background: 'gray',
-        position: 'absolute'
-      }
-      return style
-    },
-    ...mapState([
-      'curComponent',
-      'editor',
-      'curCanvasScale',
-      'canvasStyleData',
-      'linkageSettingStatus'
-    ])
-  }
-
-}
-</script>
-<style scoped>
-
-</style>

frontend/src/components/DeDrag/index.vue

@@ -22,6 +22,7 @@
     @mouseleave="leave"
   >
     <div
+      v-show="contentDisplay"
       :class="[
         {
           ['de-drag-active-inner']:enabled,
@@ -35,6 +36,7 @@
         v-if="editBarShow"
         style="transform: translateZ(10px)"
         :active-model="'edit'"
+        :canvas-id="canvasId"
         :element="element"
         @showViewDetails="showViewDetails"
         @amRemoveItem="amRemoveItem"
@@ -42,7 +44,6 @@
         @resizeView="resizeView"
         @linkJumpSet="linkJumpSet"
         @boardSet="boardSet"
-        @fieldSelect="fieldSelect"
       />
       <mobile-check-bar
         v-if="mobileCheckBarShow"
@@ -98,9 +99,13 @@ import { imgUrlTrans } from '@/components/canvas/utils/utils'
 
 export default {
   replace: true,
-  name: 'Dedrag',
+  name: 'DeDrag',
   components: { EditBar, MobileCheckBar },
   props: {
+    canvasId: {
+      type: String,
+      default: 'canvas-main'
+    },
     className: {
       type: String,
       default: 'vdr'
@@ -370,10 +375,21 @@ export default {
     batchOptActive: {
       type: Boolean,
       default: false
+    },
+    // tab 移入检测
+    isTabMoveCheck: {
+      type: Boolean,
+      default: true
     }
   },
   data: function() {
     return {
+      contentDisplay: true,
+      // 当画布在tab中是 宽度左右拓展的余量
+      parentWidthTabOffset: 40,
+      canvasChangeTips: 'none',
+      tabMoveInYOffset: 70,
+      tabMoveInXOffset: 40,
       left: this.x,
       top: this.y,
       right: null,
@@ -417,6 +433,16 @@ export default {
     }
   },
   computed: {
+    parentWidthOffset() {
+      if (this.canvasId === 'canvas-main') {
+        return 0
+      } else {
+        return this.parentWidthTabOffset
+      }
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     svgBg() {
       return {
         width: this.width + 'px!important',
@@ -558,7 +584,7 @@ export default {
         }
       }
       if (this.element.auxiliaryMatrix) {
-        const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
+        const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
         return (width - this.curGap * 2) + 'px'
       } else {
         return (this.width - this.curGap * 2) + 'px'
@@ -572,7 +598,7 @@ export default {
         }
       }
       if (this.element.auxiliaryMatrix) {
-        const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+        const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
         return (height - this.curGap * 2) + 'px'
       } else {
         return (this.height - this.curGap * 2) + 'px'
@@ -625,14 +651,14 @@ export default {
       return (this.canvasStyleData.panel.gap === 'yes' && this.element.auxiliaryMatrix) ? this.componentGap : 0
     },
     miniWidth() {
-      return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0
+      return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleWidth * (this.mobileLayoutStatus ? 1 : 4) : 0
     },
     miniHeight() {
       if (this.element.auxiliaryMatrix) {
         if (this.element.component === 'de-number-range') {
-          return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
+          return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
         } else {
-          return this.element.auxiliaryMatrix ? this.curCanvasScale.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
+          return this.element.auxiliaryMatrix ? this.curCanvasScaleSelf.matrixStyleHeight * (this.mobileLayoutStatus ? 1 : 4) : 0
         }
       } else {
         return 0
@@ -640,13 +666,19 @@ export default {
     },
     ...mapState([
       'editor',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'canvasStyleData',
       'linkageSettingStatus',
       'mobileLayoutStatus',
       'componentGap',
       'scrollAutoMove',
-      'batchOptStatus'
+      'batchOptStatus',
+      'tabMoveInActiveId',
+      'tabActiveTabNameMap',
+      'mousePointShadowMap',
+      'tabMoveOutComponentId',
+      'tabCollisionActiveId',
+      'tabMoveInActiveId'
     ])
   },
   watch: {
@@ -799,6 +831,7 @@ export default {
         const rect = this.$el.parentNode.getBoundingClientRect()
         this.parentX = rect.x
         this.parentY = rect.y
+        // 高度不设置上限100000 宽度增加左右 60px
         return [Math.round(parseFloat(style.getPropertyValue('width'), 10)) + 6, 100000]
       }
       if (typeof this.parent === 'string') {
@@ -834,6 +867,8 @@ export default {
       this.elementDown(e)
       this.$nextTick(() => {
         this.$store.commit('setCurComponent', { component: this.element, index: this.index })
+        this.curComponent.optStatus.dragging = true
+        this.$store.commit('clearTabMoveInfo')
       })
     },
     // 元素按下
@@ -905,8 +940,9 @@ export default {
         }
       } else {
         return {
-          minLeft: this.left % this.grid[0],
-          maxLeft: Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left,
+          // X方向余量向左右偏移this.parentWidthOffset 个余量，可以做到类型像移出canvas的效果，适配Tab的canvas组件
+          minLeft: this.left % this.grid[0] - this.parentWidthOffset,
+          maxLeft: (Math.floor((this.parentWidth - this.width - this.left) / this.grid[0]) * this.grid[0] + this.left) + this.parentWidthOffset,
           minRight: this.right % this.grid[0],
           maxRight: Math.floor((this.parentWidth - this.width - this.right) / this.grid[0]) * this.grid[0] + this.right,
           minTop: this.top % this.grid[1],
@@ -1106,7 +1142,8 @@ export default {
       const bounds = this.bounds
       const mouseClickPosition = this.mouseClickPosition
       // 水平移动
-      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
+      const mX = e.touches ? e.touches[0].pageX : e.pageX
+      const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - mX : 0
       // 垂直移动
       const mY = e.touches ? e.touches[0].pageY : e.pageY
       const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0
@@ -1132,7 +1169,15 @@ export default {
       if (this.element.auxiliaryMatrix) {
         this.$emit('onDragging', e, this.element)
       }
-
+      if ((-left > (this.parentWidthOffset - 10) || left - bounds.maxRight > (this.parentWidthOffset - 10)) && this.canvasId !== 'canvas-main') {
+        this.contentDisplay = false
+        this.$store.commit('setMousePointShadowMap', { mouseX: mX, mouseY: mY, width: this.width, height: this.height })
+        this.$store.commit('setTabMoveOutComponentId', this.element.id)
+      } else {
+        this.$store.commit('setTabMoveOutComponentId', null)
+        this.contentDisplay = true
+      }
+      await this.tabMoveInCheck()
       // private 记录当前样式
       this.recordCurStyle()
     },
@@ -1365,9 +1410,6 @@ export default {
         this.resizing = false
         this.conflictCheck()
         this.$emit('refLineParams', refLine)
-        // this.$emit('resizestop', this.left, this.top, this.width, this.height)
-        // private
-        // this.$emit('resizestop')
       }
       if (this.dragging) {
         this.dragging = false
@@ -1384,9 +1426,13 @@ export default {
 
       // 如果辅助设计 需要最后调整矩阵
       if (this.element.auxiliaryMatrix) {
-        // this.recordMatrixCurStyle()
+        const historyTabMoveInActiveId = this.tabMoveInActiveId
+        const historyTabMoveOutComponentId = this.tabMoveOutComponentId
         setTimeout(() => {
-          this.recordMatrixCurShadowStyle()
+          // 移入组件移入Tab时 不需要计算根据阴影面积重置大小
+          if (!historyTabMoveInActiveId && !historyTabMoveOutComponentId) {
+            this.recordMatrixCurShadowStyle(this.curCanvasScaleSelf)
+          }
           this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
           // 记录snapshot后 移动已记录设置为false
           this.hasMove = false
@@ -1404,14 +1450,77 @@ export default {
 
       // 挤占式画布设计 handleUp
       this.element.auxiliaryMatrix && this.$emit('onHandleUp', e)
+      this.componentCanvasChange()
+      // 还原Tab画布状态
+      this.$store.commit('clearTabMoveInfo')
+      // 松开鼠标时 如果当前内容被隐藏，则需要进行显示出来
+      if (!this.contentDisplay) {
+        this.contentDisplay = true
+      }
     },
-    // 新增方法 ↓↓↓
-    // 设置属性
+    // 如果Tab移入状态还是Active 状态 则将当前的组件 放置到tab页中
+    componentCanvasChange() {
+      // 主画布移入Tab画布
+      if (this.tabMoveInActiveId) {
+        // 从当前画布移除
+        this.$emit('amRemoveItem')
+        this.element.canvasPid = this.element.canvasId
+        // Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
+        const targetCanvasId = this.tabMoveInActiveId + '-' + this.tabActiveTabNameMap[this.tabMoveInActiveId]
+        const targetCanvasScale = this.curCanvasScaleMap[targetCanvasId]
+        if (this.element.auxiliaryMatrix) {
+          this.element.x = 1
+          this.element.y = 108
+          this.element.sizex = Math.round(this.element.sizex * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth)
+          this.element.sizey = Math.round(this.element.sizey * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight)
+          this.element.style.width = this.element.sizex * targetCanvasScale.matrixStyleOriginWidth
+          this.element.style.height = this.element.sizey * targetCanvasScale.matrixStyleOriginHeight
+          this.element.style.left = 0
+          this.element.style.top = (this.element.y - 1) * targetCanvasScale.matrixStyleOriginHeight
+        } else {
+          this.element.style.left = 0
+          this.element.style.top = 0
+          this.element.style.width = this.element.style.width * this.curCanvasScaleSelf.matrixStyleWidth / targetCanvasScale.matrixStyleWidth
+          this.element.style.height = this.element.style.height * this.curCanvasScaleSelf.matrixStyleHeight / targetCanvasScale.matrixStyleHeight
+        }
+        this.element.canvasId = targetCanvasId
+      }
+      // Tab 画布 移入主画布
+      if (this.tabMoveOutComponentId) {
+        // 从当前画布移除
+        this.$emit('amRemoveItem')
+        this.element.canvasPid = 0
+        this.element.canvasId = 'canvas-main'
+        // Tab内部的画布ID 为 tab组件id + '-' + tabActiveName
+        const targetCanvasScale = this.curCanvasScaleMap['canvas-main']
+        // 按照阴影位置定位
+        this.element.style.left = (this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width)) / targetCanvasScale.scalePointWidth
+        this.element.style.top = (this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2)) / targetCanvasScale.scalePointHeight
+        this.element.style.width = this.mousePointShadowMap.width / targetCanvasScale.scalePointWidth
+        this.element.style.height = this.mousePointShadowMap.height / targetCanvasScale.scalePointHeight
+
+        if (this.element.auxiliaryMatrix) {
+          this.element.x = Math.round(this.element.style.left / targetCanvasScale.matrixStyleOriginWidth) + 1
+          this.element.y = Math.round(this.element.style.top / targetCanvasScale.matrixStyleOriginHeight) + 1
+          this.element.sizex = Math.round(this.element.style.width / targetCanvasScale.matrixStyleOriginWidth)
+          this.element.sizey = Math.round(this.element.style.height / targetCanvasScale.matrixStyleOriginHeight)
+          this.recordMatrixCurShadowStyle(targetCanvasScale)
+        }
+      }
+    },
+
+    // 设置属性(属性跟随所属canvas component类型 要做出改变)
     settingAttribute() {
       // 设置冲突检测
       this.$el.setAttribute('data-is-check', `${this.isConflictCheck}`)
       // 设置对齐元素
       this.$el.setAttribute('data-is-snap', `${this.snap}`)
+      // 设置Tab移入检测
+      this.$el.setAttribute('tab-is-check', `${this.isTabMoveCheck}`)
+      // 设置组件类型
+      this.$el.setAttribute('component-type', `${this.element.component}`)
+      // 设置组件ID
+      this.$el.setAttribute('component-id', `${this.element.id}`)
     },
     // 冲突检测
     conflictCheck() {
@@ -1688,10 +1797,10 @@ export default {
 
     // 记录当前样式 矩阵处理
     recordMatrixCurStyle() {
-      const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      const width = Math.round(this.width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
+      const left = Math.round(this.left / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
+      const top = Math.round(this.top / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
+      const width = Math.round(this.width / this.curCanvasScaleSelf.matrixStyleWidth) * this.curCanvasScaleSelf.matrixStyleWidth
+      const height = Math.round(this.height / this.curCanvasScaleSelf.matrixStyleHeight) * this.curCanvasScaleSelf.matrixStyleHeight
       const style = {
         ...this.defaultStyle
       }
@@ -1705,23 +1814,13 @@ export default {
 
       // resize
       self.$emit('resizeView')
-      // const self = this
-      // setTimeout(function() {
-      //   self.$emit('resizeView')
-      // }, 200)
     },
     // 记录当前样式 跟随阴影位置 矩阵处理
-    recordMatrixCurShadowStyle() {
-      const left = (this.element.x - 1) * this.curCanvasScale.matrixStyleWidth
-      const top = (this.element.y - 1) * this.curCanvasScale.matrixStyleHeight
-      const width = this.element.sizex * this.curCanvasScale.matrixStyleWidth
-      const height = this.element.sizey * this.curCanvasScale.matrixStyleHeight
-      // const t1 = Math.round(this.width / this.curCanvasScale.matrixStyleWidth)
-      // const left = Math.round(this.left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
-      // const top = Math.round(this.top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-      // const width = t1 * this.curCanvasScale.matrixStyleWidth
-      // const height = Math.round(this.height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
-
+    recordMatrixCurShadowStyle(scaleSelf) {
+      const left = (this.element.x - 1) * scaleSelf.matrixStyleWidth
+      const top = (this.element.y - 1) * scaleSelf.matrixStyleHeight
+      const width = this.element.sizex * scaleSelf.matrixStyleWidth
+      const height = this.element.sizey * scaleSelf.matrixStyleHeight
       const style = {
         ...this.defaultStyle
       }
@@ -1730,16 +1829,10 @@ export default {
       style.width = width
       style.height = height
       style.rotate = this.rotate
-      // this.hasMove = true
-
       this.$store.commit('setShapeStyle', style)
-
       // resize
       const self = this
       self.$emit('resizeView')
-      // setTimeout(function() {
-      //   self.$emit('resizeView')
-      // }, 200)
     },
     mountedFunction() {
       // private 冲突检测 和水平设计值保持一致
@@ -1821,6 +1914,71 @@ export default {
     // 跳转设置
     boardSet() {
       this.$emit('boardSet')
+    },
+    // tab移入检测
+    async tabMoveInCheck() {
+      const top = this.top
+      const left = this.left
+      const width = this.width
+      const height = this.height
+      // tab 移入检测开启 tab组件不能相互移入另一个tab组件
+      if (this.isTabMoveCheck && this.element.type !== 'de-tabs') {
+        const nodes = this.$el.parentNode.childNodes // 获取当前父节点下所有子节点
+        for (const item of nodes) {
+          if (
+            item.className !== undefined &&
+            !item.className.split(' ').includes(this.classNameActive) &&
+            item.getAttribute('tab-is-check') !== null &&
+            item.getAttribute('tab-is-check') !== 'false' &&
+            item.getAttribute('component-type') === 'de-tabs'
+          ) {
+            const tw = item.offsetWidth
+            const th = item.offsetHeight
+            // 正则获取left与right
+            const [tl, tt] = this.formatTransformVal(item.style.transform)
+            // 碰撞有效区域检查
+            const collisionT = tt + this.tabMoveInYOffset
+            const collisionL = tl + (this.curCanvasScaleSelf.matrixStyleWidth / 2) - width
+            const collisionW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth
+            const collisionH = th + height - this.tabMoveInYOffset
+
+            // 左上角靠近左上角区域
+            const tfAndTf = collisionT <= top && collisionL <= left
+            // 左下角靠近左下角区域
+            const bfAndBf = (collisionT + collisionH) >= (top + height) && collisionL <= left
+            // 右上角靠近右上角区域
+            const trAndTr = collisionT <= top && (collisionL + collisionW) >= (left + width)
+            // 右下角靠近右下角区域
+            const brAndBr = (collisionT + collisionH) >= (top + height) && (collisionL + collisionW) >= (left + width)
+            if (tfAndTf && bfAndBf && trAndTr && brAndBr) {
+              this.$store.commit('setTabCollisionActiveId', item.getAttribute('component-id'))
+            } else if (this.tabCollisionActiveId === item.getAttribute('component-id')) {
+              this.$store.commit('setTabCollisionActiveId', null)
+            }
+
+            // 移入有效区域检查
+            // 碰撞有效区域检查
+            const activeT = tt + this.tabMoveInYOffset
+            const activeL = tl + (this.curCanvasScaleSelf.matrixStyleWidth * 10) - width
+            const activeW = tw + 2 * width - this.curCanvasScaleSelf.matrixStyleWidth * 20
+            const activeH = th + height - 2 * this.tabMoveInYOffset
+
+            // 左上角靠近左上角区域
+            const activeTfAndTf = activeT <= top && activeL <= left
+            // 左下角靠近左下角区域
+            const activeBfAndBf = (activeT + activeH) >= (top + height) && activeL <= left
+            // 右上角靠近右上角区域
+            const activeTrAndTr = activeT <= top && (activeL + activeW) >= (left + width)
+            // 右下角靠近右下角区域
+            const activeBrAndBr = (activeT + activeH) >= (top + height) && (activeL + activeW) >= (left + width)
+            if (activeTfAndTf && activeBfAndBf && activeTrAndTr && activeBrAndBr) {
+              this.$store.commit('setTabMoveInActiveId', item.getAttribute('component-id'))
+            } else if (this.tabMoveInActiveId === item.getAttribute('component-id')) {
+              this.$store.commit('setTabMoveInActiveId', null)
+            }
+          }
+        }
+      }
     }
   }
 

frontend/src/components/DeDrag/pointShadow.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="point-shadow"
+    :style="styleInfo"
+  >
+    <div class="point-shadow-content">
+      <div
+        id="point-shadow-component"
+        class="point-shadow-component"
+      />
+      <div
+        class="point-shadow-tips"
+        :style="tipsStyleInfo"
+      >
+        <div style="width: 100%;text-align: center">组件将被移出Tab</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  replace: true,
+  name: 'PointShadow',
+  props: {
+    canvasId: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    tipsStyleInfo() {
+      return {
+        width: this.mousePointShadowMap.width + 'px',
+        height: this.mousePointShadowMap.height + 'px'
+      }
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    componentCanvasId() {
+      if (this.curComponent.type === 'view') {
+        return 'user-view-' + this.curComponent.propValue.viewId
+      } else {
+        return 'components-' + this.curComponent.id
+      }
+    },
+    styleInfo() {
+      return {
+        left: this.mousePointShadowMap.mouseX - (this.mousePointShadowMap.width) + 'px',
+        top: this.mousePointShadowMap.mouseY - (this.mousePointShadowMap.height / 2) + 'px',
+        width: this.mousePointShadowMap.width + 'px',
+        height: this.mousePointShadowMap.height + 'px'
+      }
+    },
+    ...mapState([
+      'mousePointShadowMap',
+      'curComponent'
+    ])
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    // const targetComponent = document.getElementById(this.componentCanvasId)
+    // const domId = 'dragContent-' + this.curComponent.id
+    // console.log('domId='+domId)
+    // document.getElementById(domId).appendChild(targetComponent)
+  },
+  methods: {
+    init() {
+      // 将拖拽的元素内容复制到shadow区域展示
+      // const targetComponent = document.getElementById(this.componentCanvasId)
+      // document.getElementById('point-shadow-component').appendChild(targetComponent)
+    },
+    scaleH(h) {
+      return h / this.curCanvasScaleSelf.scalePointHeight
+    },
+    scaleW(w) {
+      return w / this.curCanvasScaleSelf.scalePointWidth
+    }
+  }
+
+}
+</script>
+<style scoped>
+.point-shadow {
+  z-index: 1000;
+  position: absolute;
+}
+
+.point-shadow-content {
+  position: relative;
+}
+
+.point-shadow-component {
+  opacity: 0.6;
+  background-color: rgba(179, 212, 252);
+}
+
+.point-shadow-tips {
+  left: 0px;
+  top: 0px;
+  box-sizing: border-box;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  color: #33ef08;
+  font-weight: bold;
+  background-color: rgba(179, 212, 252);
+}
+
+</style>

frontend/src/components/DeDrag/shadow.vue

@@ -10,8 +10,18 @@
 import { mapState } from 'vuex'
 export default {
   replace: true,
-  name: 'ShadowDe',
+  // eslint-disable-next-line
+  name: 'Shadow',
+  props: {
+    canvasId: {
+      type: String,
+      required: true
+    }
+  },
   computed: {
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     styleInfo() {
       let left = 0
       let top = 0
@@ -21,11 +31,11 @@ export default {
       if (this.dragComponentInfo) {
         // 组件移入
         if (this.dragComponentInfo.auxiliaryMatrix) {
-          left = (this.dragComponentInfo.x - 1) * this.curCanvasScale.matrixStyleWidth
-          top = (this.dragComponentInfo.y - 1) * this.curCanvasScale.matrixStyleHeight
+          left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+          top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
 
-          width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
-          height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
+          width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleWidth
+          height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleHeight
           transition = 0.1
         } else {
           left = this.dragComponentInfo.shadowStyle.x
@@ -34,14 +44,10 @@ export default {
           height = this.dragComponentInfo.style.height
         }
       } else {
-        // temp 临时测试
-        // left = this.curComponent.style.left * this.curCanvasScale.scaleWidth / 100
-        // top = this.curComponent.style.top * this.curCanvasScale.scaleHeight / 100
-        left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
-        top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
-
-        width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
-        height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
+        left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+        top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
+        width = this.curComponent.style.width * this.curCanvasScaleSelf.scalePointWidth
+        height = this.curComponent.style.height * this.curCanvasScaleSelf.scalePointHeight
         if (this.curComponent.optStatus.dragging) {
           transition = 0.1
         }
@@ -70,13 +76,13 @@ export default {
       return this.$store.state.dragComponentInfo
     },
     canvasWidth() {
-      const scaleWidth = this.curCanvasScale.scaleWidth / 100
+      const scaleWidth = this.curCanvasScaleSelf.scaleWidth / 100
       return this.canvasStyleData.width * scaleWidth
     },
     ...mapState([
       'curComponent',
       'editor',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'canvasStyleData',
       'linkageSettingStatus'
     ])
@@ -89,10 +95,10 @@ export default {
       this.dragComponentInfo.shadowStyle.y = this.scaleH(y)
     },
     scaleH(h) {
-      return h / this.curCanvasScale.scalePointHeight
+      return h / this.curCanvasScaleSelf.scalePointHeight
     },
     scaleW(w) {
-      return w / this.curCanvasScale.scalePointWidth
+      return w / this.curCanvasScaleSelf.scalePointWidth
     }
   }
 

frontend/src/components/GradientColorSelector/base.js

@@ -86,7 +86,7 @@ export const colorCases = [
 export const gradientColorCases = [
   {
     name: '渐变色1',
-    value: 'gradient1',
+    value: 'gradient1_continuous_gradient',
     colors: [
       ['rgba(144,202,249,0.5)', 'rgba(1,87,155,0.9)'],
       ['rgba(127,222,234,1)', 'rgba(0,77,65,1)'],
@@ -101,3 +101,72 @@ export const gradientColorCases = [
 export const isGradientValue = value => {
   return value && gradientColorCases.some(item => item.value === value)
 }
+
+export const getColorType = value => {
+  if (value.endsWith('_split_gradient')) {
+    return 'split_gradient'
+  }
+  const cloneColorCases = JSON.parse(JSON.stringify(colorCases))
+  if (cloneColorCases.some(item => item.value === value)) {
+    return 'simple'
+  }
+  return 'gradient'
+}
+
+export const getMapColorCases = () => {
+  const cloneColorCases = JSON.parse(JSON.stringify(colorCases))
+  return cloneColorCases.map(colorItem => {
+    const curColors = colorItem.colors
+    const len = curColors.length
+    const start = curColors[0]
+    const end = curColors[len - 1]
+    const itemResult = {
+      name: colorItem.name,
+      value: colorItem.value + '_split_gradient',
+      baseColors: [start, end],
+      colors: stepsColor(start, end, 9, 1)
+    }
+    return itemResult
+  })
+}
+
+export function stepsColor(start, end, steps, gamma) {
+  var i; var j; var ms; var me; var output = []; var so = []
+  gamma = gamma || 1
+  var normalize = function(channel) {
+    return Math.pow(channel / 255, gamma)
+  }
+  start = parseColor(start).map(normalize)
+  end = parseColor(end).map(normalize)
+  for (i = 0; i < steps; i++) {
+    ms = (steps - 1) === 0 ? 0 : (i / (steps - 1))
+    me = 1 - ms
+    for (j = 0; j < 3; j++) {
+      so[j] = pad(
+        Math.round(
+          Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255
+        ).toString(16)
+      )
+    }
+    output.push('#' + so.join(''))
+  }
+  function parseColor(hexStr) {
+    return hexStr.length === 4
+      ? hexStr
+        .substr(1)
+        .split('')
+        .map(function(s) {
+          return 0x11 * parseInt(s, 16)
+        })
+      : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(
+        function(s) {
+          return parseInt(s, 16)
+        }
+      )
+  }
+  function pad(s) {
+    return s.length === 1 ? '0' + s : s
+  }
+  return output
+}
+

frontend/src/components/GradientColorSelector/index.vue

@@ -20,7 +20,7 @@
         <el-tooltip
           class="item"
           effect="dark"
-          content="重置"
+          :content="$t('commons.reset')"
           placement="top"
         >
           <i class="el-icon-refresh" />
@@ -38,7 +38,7 @@
       <div class="custom-switch-div">
         <el-switch
           v-model="enableCustom"
-          active-text="自定义"
+          :active-text="$t('commons.custom')"
           inactive-text=""
         />
       </div>
@@ -47,7 +47,7 @@
         @tab-click="handleClick"
       >
         <el-tab-pane
-          v-for="(pane, i) in tabPanes"
+          v-for="(pane, i) in tabPanes.filter(item => item.name === 'simple' || (showIndex === 1 && item.name === 'split_gradient') || (showIndex === 2 && item.name === 'gradient'))"
           :key="i"
           :label="pane.label"
           :name="pane.name"
@@ -84,22 +84,29 @@
                 v-for="(co,index) in option.colors"
                 v-else
                 :key="index"
-                class="color-span-base is-editor"
+                class="color-span-base"
+                :class="option.value.endsWith('_split_gradient') && index % 8 !== 0 ? 'static-editor' : 'is-editor'"
               >
-                <el-color-picker
-                  v-if="i === 0"
-                  v-model="option.colors[index]"
-                  @change="switchColorItem(option.colors, index)"
+                <span
+                  v-if="option.value.endsWith('_split_gradient') && index % 8 !== 0"
+                  class="color-span-base-split"
+                  :style="{background: formatBgColor(co)}"
                 />
+
                 <de-color-picker
-                  v-else
+                  v-else-if="option.value.endsWith('_continuous_gradient')"
                   :id="option.value + index"
                   ref="de-color-picker"
                   v-model="option.colors[index]"
                   :base-id="option.value + index"
                   show-alpha
                   color-format="rgb"
-                  @change="switchColorItem(option.colors, index)"
+                  @change="switchColorItem(option.colors, option.value)"
+                />
+                <el-color-picker
+                  v-else
+                  v-model="option.colors[index]"
+                  @change="switchColorItem(option.colors, option.value)"
                 />
               </span>
 
@@ -132,7 +139,7 @@
 </template>
 
 <script>
-import { colorCases, gradientColorCases } from './base'
+import { colorCases, gradientColorCases, getMapColorCases, getColorType, stepsColor } from './base'
 import DeColorPicker from './DeColorPicker'
 export default {
   name: 'GradientColorSelector',
@@ -148,6 +155,10 @@ export default {
           colors: []
         }
       }
+    },
+    showIndex: {
+      type: Number,
+      default: 1
     }
   },
   data() {
@@ -161,12 +172,17 @@ export default {
       activeName: 'simple',
       tabPanes: [
         {
-          label: '纯色',
+          label: this.$t('chart.solid_color'),
           name: 'simple',
           data: JSON.parse(JSON.stringify(colorCases))
         },
         {
-          label: '渐变',
+          label: this.$t('chart.split_gradient'),
+          name: 'split_gradient',
+          data: JSON.parse(JSON.stringify(getMapColorCases()))
+        },
+        {
+          label: this.$t('chart.continuous_gradient'),
           name: 'gradient',
           data: JSON.parse(JSON.stringify(gradientColorCases))
         }
@@ -200,10 +216,27 @@ export default {
         parents.scrollTo(0, top)
       }
     },
-    switchColorItem(colors, index) {
-      this.colorDto.colors = JSON.parse(JSON.stringify(colors))
+    switchColorItem(colors, value) {
+      const activeName = getColorType(value)
+      if (activeName === 'split_gradient') {
+        const start = colors[0]
+        const end = colors[colors.length - 1]
+        const targetColors = stepsColor(start, end, 9, 1)
+        this.colorDto.colors = JSON.parse(JSON.stringify(targetColors))
+        this.fillSplitGradientPanel()
+      } else {
+        this.colorDto.colors = JSON.parse(JSON.stringify(colors))
+      }
+
       this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
     },
+    fillSplitGradientPanel() {
+      this.tabPanes[1].data.forEach(item => {
+        if (item.value === this.colorDto.value) {
+          item.colors = this.colorDto.colors
+        }
+      })
+    },
     initcolorDto() {
       let haspPropValue = true
       if (!this.colorDto.value) {
@@ -211,9 +244,9 @@ export default {
         this.colorDto.colors = this.colorCases[0].colors
         haspPropValue = false
       }
-      this.activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
+      this.activeName = getColorType(this.colorDto.value)
       if (haspPropValue) {
-        this.tabPanes[this.activeName === 'simple' ? 0 : 1].data.forEach(item => {
+        this.tabPanes[this.activeName === 'simple' ? 0 : this.activeName === 'split_gradient' ? 1 : 2].data.forEach(item => {
           if (item.value === this.colorDto.value) {
             item.colors = JSON.parse(JSON.stringify(this.colorDto.colors))
           }
@@ -270,14 +303,15 @@ export default {
           return str
         })
       })
-      this.tabPanes[1].data = JSON.parse(JSON.stringify(this.gradientColorCases))
+      const len = this.tabPanes.length
+      this.tabPanes[len - 1].data = JSON.parse(JSON.stringify(this.gradientColorCases))
     },
     formatBgColor(color, useValue) {
       let activeName = this.activeName
       if (useValue) {
-        activeName = this.colorCases.some(item => item.value === this.colorDto.value) ? 'simple' : 'gradient'
+        activeName = getColorType(this.colorDto.value)
       }
-      if (activeName === 'simple') {
+      if (activeName === 'simple' || activeName === 'split_gradient') {
         return color
       }
       return 'linear-gradient(0.0deg,' + color[0] + ' 0.0,' + color[1] + ' 100.0%)'
@@ -296,11 +330,8 @@ export default {
     },
     reset() {
       if (this.colorDto.value) {
-        let activeName = 'simple'
-        if (this.gradientColorCases.some(item => item.value === this.colorDto.value)) {
-          activeName = 'gradient'
-        }
-        (activeName === 'simple' ? colorCases : gradientColorCases).forEach(curcase => {
+        const activeName = getColorType(this.colorDto.value);
+        (activeName === 'simple' ? colorCases : activeName === 'split_gradient' ? getMapColorCases() : gradientColorCases).forEach(curcase => {
           if (curcase.value === this.colorDto.value) {
             this.colorDto.colors = JSON.parse(JSON.stringify(curcase.colors))
             this.$emit('color-change', JSON.parse(JSON.stringify(this.colorDto)))
@@ -318,7 +349,7 @@ export default {
 }
 .gradient-popper {
   background: #fff;
-  padding: 0 10px;
+  padding: 0 10px !important;
   margin-top: 1px !important;
   border-top: none;
   height: 300px;
@@ -340,7 +371,8 @@ export default {
 .color-span-base {
   width: 20px;
   height: 20px;
-  display:inline-block;
+  display:flex;
+  align-items: center;
 }
 .is-editor {
   width:23px !important;
@@ -352,7 +384,11 @@ export default {
   align-items: center !important;
   cursor: pointer;
   padding-left: 5px !important;
+  .static-editor:nth-child(2) {
+    margin-left: 5px !important;
+  }
 }
+
 .custom-switch-div {
   position: absolute;
   top: 8px;
@@ -380,4 +416,11 @@ export default {
     }
   }
 }
+.is-split {
+  width: 28px !important;
+}
+.color-span-base-split {
+  width: 20px;
+  height: 20px;
+}
 </style>

frontend/src/components/business/DeLayoutContent.vue

@@ -42,7 +42,7 @@ export default {
       return backPath || backName || backTo
     },
     needInnerPadding() {
-      return ['sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', 'sys-task-dataset', 'sys-msg-web-all', 'system-plugin'].includes(this.$route.name)
+      return ['system-app-template', 'sys-identification', 'sys-abutment', 'sys-task-email', 'system-dept', 'system-dept-form', 'system-auth', 'sys-appearance', 'system-param', 'system-template', 'sys-task-dataset', 'sys-msg-web-all', 'system-plugin'].includes(this.$route.name)
     }
   }
 }

frontend/src/components/canvas/DeCanvas.vue

@@ -0,0 +1,588 @@
+<template>
+  <div
+    :id="canvasDomId"
+    class="canvas_content"
+    @drop="handleDrop"
+    @dragover="handleDragOver"
+    @mousedown="handleMouseDown"
+    @mouseup="deselectCurComponent"
+    @scroll="canvasScroll"
+  >
+    <slot name="optBar" />
+    <de-editor
+      :ref="editorRefName"
+      :canvas-style-data="canvasStyleData"
+      :component-data="componentData"
+      :canvas-id="canvasId"
+      :parent-forbid="parentForbid"
+      :matrix-count="matrixCountBase"
+      :out-style="outStyle"
+      :scroll-top="scrollTop"
+      @canvasDragging="canvasDragging"
+    />
+    <input
+      id="input"
+      ref="files"
+      type="file"
+      accept="image/*"
+      hidden
+      @click="e => {e.target.value = '';}"
+      @change="handleFileChange"
+    >
+    <el-dialog
+      v-if="buttonVisible && panelInfo.id"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+      :visible.sync="buttonVisible"
+      custom-class="de-button-dialog"
+      :append-to-body="true"
+      @close="cancelButton"
+    >
+      <button-dialog
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonSureWidget'"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-handler="sureHandler"
+        @cancel-handler="cancelHandler"
+      />
+
+      <button-reset-dialog
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonResetWidget'"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @reset-button-handler="sureHandler"
+        @cancel-button-handler="cancelHandler"
+      />
+
+    </el-dialog>
+
+    <el-dialog
+      v-if="filterVisible && panelInfo.id"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+      :visible.sync="filterVisible"
+      custom-class="de-filter-dialog min-width-730"
+      append-to-body
+      @close="cancelFilter"
+    >
+      <filter-dialog
+        v-if="filterVisible && currentWidget"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @sure-button-status="sureStatusChange"
+        @re-fresh-component="reFreshComponent"
+      />
+      <div style="text-align: end !important;margin: 0 15px 10px !important;">
+        <span slot="footer">
+          <el-button
+            size="mini"
+            @click="cancelFilter"
+          >{{ $t('commons.cancel') }}</el-button>
+          <el-button
+            :disabled="!enableSureButton"
+            type="primary"
+            size="mini"
+            @click="sureFilter"
+          >{{ $t('commons.confirm') }}</el-button>
+        </span>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import DeEditor from '@/components/canvas/components/Editor/DeEditor'
+import elementResizeDetectorMaker from 'element-resize-detector'
+import bus from '@/utils/bus'
+import { deepCopy } from '@/components/canvas/utils/utils'
+import { uuid } from 'vue-uuid'
+import componentList, {
+  BASE_MOBILE_STYLE,
+  COMMON_BACKGROUND, commonAttr,
+  HYPERLINKS, PIC_STYLE
+} from '@/components/canvas/custom-component/component-list'
+import { ApplicationContext } from '@/utils/ApplicationContext'
+import { chartCopy } from '@/api/chart/chart'
+import { adaptCurThemeCommonStyle } from '@/components/canvas/utils/style'
+import toast from '@/components/canvas/utils/toast'
+import generateID from '@/components/canvas/utils/generateID'
+import ButtonDialog from '@/views/panel/filter/ButtonDialog'
+import ButtonResetDialog from '@/views/panel/filter/ButtonResetDialog'
+import FilterDialog from '@/views/panel/filter/filterDialog'
+
+export default {
+  components: { FilterDialog, ButtonResetDialog, ButtonDialog, DeEditor },
+  props: {
+    parentForbid: {
+      type: Boolean,
+      require: false,
+      default: true
+    },
+    canvasStyleData: {
+      type: Object,
+      require: true
+    },
+    componentData: {
+      type: Array,
+      require: false,
+      default: () => []
+    },
+    canvasId: {
+      type: String,
+      require: true
+    },
+    canvasPid: {
+      type: String,
+      require: true
+    },
+    mobileLayoutStatus: {
+      type: Boolean,
+      require: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date',
+        'de-video',
+        'de-stream-media',
+        'de-frame'
+      ],
+      enableSureButton: false,
+      filterFromDrag: false,
+      buttonFromDrag: false,
+      filterVisible: false,
+      autoMoveOffSet: 15,
+      buttonVisible: false,
+      currentWidget: null,
+      currentFilterCom: null,
+      currentDropElement: null,
+      canvasDomId: 'canvas-id-' + this.canvasId,
+      editorRefName: 'canvas-editor-' + this.canvasId,
+      scrollLeft: 0,
+      scrollTop: 0,
+      outStyle: {
+        width: null,
+        height: null
+      }
+    }
+  },
+  computed: {
+    matrixCountBase() {
+      if (this.isMainCanvas && this.mobileLayoutStatus) {
+        return this.mobileMatrixCount
+      } else {
+        return this.pcMatrixCountBase
+      }
+    },
+    isMainCanvas() {
+      return this.canvasId === 'canvas-main'
+    },
+    panelInfo() {
+      return this.$store.state.panel.panelInfo
+    },
+    pcMatrixCountBase() {
+      if (this.canvasStyleData.aidedDesign) {
+        return {
+          x: this.pcMatrixCount.x * this.canvasStyleData.aidedDesign.matrixBase,
+          y: this.pcMatrixCount.y * this.canvasStyleData.aidedDesign.matrixBase
+        }
+      } else {
+        return this.pcMatrixCount
+      }
+    },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    showAttr() {
+      if (this.mobileLayoutStatus) {
+        return false
+      } else if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && (!this.curComponent.options.attrs.showTitle || !this.curComponent.options.attrs.title)) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
+    ...mapState([
+      'curComponent',
+      'componentGap',
+      'isClickComponent',
+      'pcMatrixCount',
+      'pcTabMatrixCount',
+      'dragComponentInfo',
+      'curCanvasScaleMap',
+      'mobileMatrixCount'
+    ])
+  },
+  watch: {
+    mobileLayoutStatus() {
+      this.restore()
+    }
+  },
+  created() {
+  },
+  mounted() {
+    const _this = this
+    // 监听div变动事件
+    const erd = elementResizeDetectorMaker()
+    erd.listenTo(document.getElementById(this.canvasDomId), element => {
+      _this.$nextTick(() => {
+        _this.restore()
+      })
+    })
+  },
+  beforeDestroy() {
+    bus.$off('component-dialog-edit', this.editDialog)
+    bus.$off('button-dialog-edit', this.editButtonDialog)
+  },
+  methods: {
+    initEvents() {
+      bus.$on('component-dialog-edit', this.editDialog)
+      bus.$on('button-dialog-edit', this.editButtonDialog)
+    },
+    getGap() {
+      return this.mobileLayoutStatus ? 0 : this.componentGap * 2
+    },
+    restore() {
+      this.$nextTick(() => {
+        const domInfo = document.getElementById(this.canvasDomId)
+        if (domInfo) {
+          this.outStyle.height = domInfo.offsetHeight - this.getGap()
+          // 临时处理 确保每次restore 有会更新
+          this.outStyle.width = domInfo.offsetWidth + (Math.random() * 0.000001)
+        }
+      })
+    },
+    handleDragOver(e) {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'copy'
+      this.$refs[this.editorRefName].handleDragOver(e)
+    },
+    handleMouseDown() {
+      this.$store.commit('setClickComponentStatus', false)
+    },
+
+    deselectCurComponent(e) {
+      if (!this.isClickComponent) {
+        this.$store.commit('setCurComponent', { component: null, index: null })
+      }
+
+      // 0 左击 1 滚轮 2 右击
+      if (e.button !== 2) {
+        this.$store.commit('hideContextMenu')
+      }
+    },
+    canvasScroll(e) {
+      this.$emit('canvasScroll', { scrollLeft: e.target.scrollLeft, scrollTop: e.target.scrollTop })
+      bus.$emit('onScroll')
+    },
+    // handleDrop(e) {
+    //   this.$emit('handleDrop', e)
+    // }
+    handleDrop(e) {
+      this.dragComponentInfo.moveStatus = 'drop'
+      // 记录拖拽信息
+      this.dropComponentInfo = deepCopy(this.dragComponentInfo)
+      this.currentDropElement = e
+      e.preventDefault()
+      e.stopPropagation()
+      let component
+      const newComponentId = uuid.v1()
+      const componentInfo = JSON.parse(e.dataTransfer.getData('componentInfo'))
+      if (componentInfo.type === 'assist') {
+        // 辅助设计组件
+        componentList.forEach(componentTemp => {
+          if (componentInfo.id === componentTemp.id) {
+            component = deepCopy(componentTemp)
+          }
+        })
+        if (component.type === 'picture-add') {
+          this.goFile()
+          this.clearCurrentInfo()
+          return
+        }
+      } else if (componentInfo.type === 'view') {
+        // 用户视图设置 复制一个模板
+        componentList.forEach(componentTemp => {
+          if (componentTemp.type === 'view') {
+            component = deepCopy(componentTemp)
+            const propValue = {
+              id: newComponentId,
+              viewId: componentInfo.id
+            }
+            component.propValue = propValue
+            component.filters = []
+            component.linkageFilters = []
+          }
+        })
+      } else {
+        this.currentWidget = ApplicationContext.getService(componentInfo.id)
+        this.currentFilterCom = this.currentWidget.getDrawPanel()
+        this.currentFilterCom['canvasId'] = this.canvasId
+        this.currentFilterCom['canvasPid'] = this.canvasPid// 待处理
+        if (this.canvasStyleData.auxiliaryMatrix) {
+          this.currentFilterCom.x = this.dropComponentInfo.x
+          this.currentFilterCom.y = this.dropComponentInfo.y
+          this.currentFilterCom.sizex = this.dropComponentInfo.sizex
+          this.currentFilterCom.sizey = this.dropComponentInfo.sizey
+          this.currentFilterCom.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
+          this.currentFilterCom.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
+          this.currentFilterCom.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
+          this.currentFilterCom.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
+        } else {
+          this.currentFilterCom.style.left = this.dragComponentInfo.shadowStyle.x
+          this.currentFilterCom.style.top = this.dragComponentInfo.shadowStyle.y
+          this.currentFilterCom.style.width = this.dragComponentInfo.style.width
+          this.currentFilterCom.style.height = this.dragComponentInfo.style.height
+        }
+        this.currentFilterCom.id = newComponentId
+        this.currentFilterCom.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+        this.currentFilterCom.mobileStyle = deepCopy(BASE_MOBILE_STYLE)
+        this.currentFilterCom['hyperlinks'] = deepCopy(HYPERLINKS)
+        this.currentFilterCom.commonBackground = this.currentFilterCom.commonBackground || deepCopy(COMMON_BACKGROUND)
+
+        if (this.currentWidget.filterDialog) {
+          this.show = false
+          this.openFilterDialog(true)
+          return
+        }
+        if (this.currentWidget.buttonDialog) {
+          this.show = false
+          this.openButtonDialog(true)
+          return
+        }
+        component = deepCopy(this.currentFilterCom)
+      }
+      if (this.canvasStyleData.auxiliaryMatrix) {
+        component.x = this.dropComponentInfo.x
+        component.y = this.dropComponentInfo.y
+        component.sizex = this.dropComponentInfo.sizex
+        component.sizey = this.dropComponentInfo.sizey
+
+        component.style.left = (this.dragComponentInfo.x - 1) * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.top = (this.dragComponentInfo.y - 1) * this.curCanvasScaleSelf.matrixStyleOriginHeight
+        component.style.width = this.dragComponentInfo.sizex * this.curCanvasScaleSelf.matrixStyleOriginWidth
+        component.style.height = this.dragComponentInfo.sizey * this.curCanvasScaleSelf.matrixStyleOriginHeight
+      } else {
+        component.style.top = this.dropComponentInfo.shadowStyle.y
+        component.style.left = this.dropComponentInfo.shadowStyle.x
+        component.style.width = this.dropComponentInfo.shadowStyle.width
+        component.style.height = this.dropComponentInfo.shadowStyle.height
+      }
+
+      component.id = newComponentId
+      component['canvasId'] = this.canvasId
+      component['canvasPid'] = this.canvasPid
+      // 新拖入的组件矩阵状态 和仪表板当前的矩阵状态 保持一致
+      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
+      // 统一设置背景信息
+      component.commonBackground = component.commonBackground || deepCopy(COMMON_BACKGROUND)
+
+      // 视图统一调整为复制
+      if (componentInfo.type === 'view') {
+        chartCopy(component.propValue.viewId, this.panelInfo.id).then(res => {
+          component.propValue.viewId = res.data
+          this.$store.commit('addComponent', { component })
+          this.$store.commit('recordSnapshot', 'handleDrop')
+        })
+      } else {
+        this.$store.commit('addComponent', { component })
+        this.$store.commit('recordSnapshot', 'handleDrop')
+      }
+      adaptCurThemeCommonStyle(component)
+      this.clearCurrentInfo()
+    },
+    goFile() {
+      this.$refs.files.click()
+    },
+    handleFileChange(e) {
+      const _this = this
+      const file = e.target.files[0]
+      if (!file.type.includes('image')) {
+        toast('只能插入图片')
+        return
+      }
+      const reader = new FileReader()
+      reader.onload = (res) => {
+        const fileResult = res.target.result
+        const img = new Image()
+        img.onload = () => {
+          const component = {
+            ...commonAttr,
+            id: generateID(),
+            component: 'Picture',
+            type: 'picture-add',
+            label: '图片',
+            icon: '',
+            hyperlinks: HYPERLINKS,
+            mobileStyle: BASE_MOBILE_STYLE,
+            propValue: fileResult,
+            commonBackground: deepCopy(COMMON_BACKGROUND),
+            style: {
+              ...PIC_STYLE
+            }
+          }
+          component.auxiliaryMatrix = false
+          component.style.top = _this.dropComponentInfo.shadowStyle.y
+          component.style.left = _this.dropComponentInfo.shadowStyle.x
+          component.style.width = _this.dropComponentInfo.shadowStyle.width
+          component.style.height = _this.dropComponentInfo.shadowStyle.height
+          component['canvasId'] = this.canvasId
+          component['canvasPid'] = this.canvasPid
+          this.$store.commit('addComponent', {
+            component: component
+          })
+          this.$store.commit('recordSnapshot', 'handleFileChange')
+        }
+
+        img.src = fileResult
+      }
+
+      reader.readAsDataURL(file)
+    },
+    clearCurrentInfo() {
+      this.currentWidget = null
+      this.currentFilterCom = null
+    },
+    openButtonDialog(fromDrag = false) {
+      this.buttonFromDrag = fromDrag
+      this.buttonVisible = true
+    },
+    closeButton() {
+      this.buttonVisible = false
+      this.currentWidget = null
+      this.clearCurrentInfo()
+    },
+    cancelButton() {
+      this.closeButton()
+      if (this.buttonFromDrag) {
+        bus.$emit('onRemoveLastItem')
+      }
+    },
+    sureButton() {
+
+    },
+    openFilterDialog(fromDrag = false) {
+      this.filterFromDrag = fromDrag
+      this.filterVisible = true
+    },
+    closeFilter() {
+      this.filterVisible = false
+      this.currentWidget = null
+      this.clearCurrentInfo()
+    },
+    cancelFilter() {
+      this.closeFilter()
+      if (this.filterFromDrag) {
+        bus.$emit('onRemoveLastItem')
+      }
+    },
+    sureFilter() {
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      if (this.editType !== 'update') {
+        adaptCurThemeCommonStyle(this.currentFilterCom)
+      }
+      this.$store.commit('setComponentWithId', this.currentFilterCom)
+      this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('reset-default-value', this.currentFilterCom.id)
+      this.closeFilter()
+    },
+    reFreshComponent(component) {
+      this.currentFilterCom = component
+      this.$forceUpdate()
+    },
+    editDialog(editType) {
+      // 主画布打开
+      if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
+        this.editType = editType
+        const serviceName = this.curComponent.serviceName
+        this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openFilterDialog()
+      }
+    },
+    editButtonDialog(editType) {
+      // 主画布打开
+      if (this.isMainCanvas && this.curComponent && this.curComponent.serviceName) {
+        this.editType = editType
+        const serviceName = this.curComponent.serviceName
+        this.currentWidget = ApplicationContext.getService(serviceName)
+        this.currentFilterCom = this.curComponent
+        this.openButtonDialog()
+      }
+    },
+    sureHandler() {
+      this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
+      if (this.editType !== 'update') {
+        adaptCurThemeCommonStyle(this.currentFilterCom)
+      }
+      this.$store.commit('setComponentWithId', this.currentFilterCom)
+      this.$store.commit('recordSnapshot', 'sureFilter')
+      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('refresh-button-info')
+      this.closeButton()
+    },
+    cancelHandler() {
+      this.cancelButton()
+    },
+    sureStatusChange(status) {
+      this.enableSureButton = status
+    },
+    canvasDragging(mY, offsetY) {
+      // if (this.isMainCanvas && this.mobileLayoutStatus && this.curComponent && this.curComponent.optStatus.dragging) {
+      //   // 触发滚动的区域偏移量
+      //   const touchOffset = 100
+      //   const canvasInfoMobile = document.getElementById(this.canvasDomId)
+      //   // 获取子盒子（高度肯定比父盒子大）
+      //   // const editorMobile = document.getElementById('editorMobile')
+      //   // 画布区顶部到浏览器顶部距离
+      //   const canvasTop = canvasInfoMobile.offsetTop + 75
+      //   // 画布区有高度
+      //   const canvasHeight = canvasInfoMobile.offsetHeight
+      //   // 画布区域底部距离浏览器顶部距离
+      //   const canvasBottom = canvasTop + canvasHeight
+      //   if (mY > (canvasBottom - touchOffset) && offsetY > 0) {
+      //     // 触发底部滚动
+      //     this.scrollMove(this.autoMoveOffSet)
+      //   } else if (mY < (canvasTop + touchOffset) && offsetY < 0) {
+      //     // 触发顶部滚动
+      //     this.scrollMove(-this.autoMoveOffSet)
+      //   }
+      // }
+    },
+    scrollMove(offset) {
+      // const canvasInfoMobile = document.getElementById(this.canvasDomId)
+      // canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset
+      // this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.canvas_content {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-size: 100% 100% !important;
+}
+.min-width-730 {
+  min-width: 730px !important;
+}
+</style>

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -41,12 +41,14 @@
         :in-screen="inScreen"
         :edit-mode="'preview'"
         :h="config.style.height"
+        :canvas-id="canvasId"
       />
       <component
         :is="config.component"
         v-else
         ref="wrapperChild"
         class="component"
+        :canvas-id="canvasId"
         :out-style="config.style"
         :style="getComponentStyleDefault(config.style)"
         :prop-value="config.propValue"
@@ -83,6 +85,10 @@ export default {
   components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     sourceConfig: {
       type: Object,
       require: true,
@@ -189,7 +195,7 @@ export default {
       return style
     },
     componentActiveFlag() {
-      return (this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing')
+      return !this.mobileLayoutStatus && ((this.curComponent && this.config === this.curComponent && !this.previewVisible && !this.showPosition.includes('email-task')) || this.showPosition.includes('multiplexing'))
     },
     curGap() {
       return (this.canvasStyleData.panel.gap === 'yes' && this.config.auxiliaryMatrix) ? this.componentGap : 0

frontend/src/components/canvas/components/Editor/DateFormat.vue

@@ -84,11 +84,6 @@
           </el-select>
 
         </el-form-item>
-
-        <!-- <el-form-item>
-          <el-button type="primary" @click="onSubmit">{{ $t('panel.confirm') }}</el-button>
-          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
-        </el-form-item> -->
       </el-form>
     </el-row>
     <i
@@ -104,6 +99,10 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   props: {
+    canvasId: {
+      type: String,
+      require: true
+    },
     formatInfo: {
       type: Object,
       required: true
@@ -131,9 +130,12 @@ export default {
     }
   },
   computed: {
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'curComponent',
-      'curCanvasScale'
+      'curCanvasScaleMap'
     ])
   },
   watch: {
@@ -162,15 +164,13 @@ export default {
     modelChange(val) {
       if (val === '0') {
         this.curComponent.style.height = 100
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       } else if (val === '1') {
         this.curComponent.style.height = 150
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       } else {
-        // this.curComponent.style.width = this.curComponent.style.width / 2
         this.curComponent.style.height = this.curComponent.style.width + 50
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
-        // this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
       }
     }
   }

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -141,6 +141,38 @@
         </a>
       </span>
     </div>
+
+    <!--跳转设置-->
+    <el-dialog
+      :visible.sync="linkJumpSetVisible"
+      width="900px"
+      class="dialog-css"
+      :show-close="true"
+      :destroy-on-close="true"
+      :append-to-body="true"
+    >
+      <link-jump-set
+        v-if="linkJumpSetVisible"
+        :view-id="linkJumpSetViewId"
+        @closeJumpSetDialog="closeJumpSetDialog"
+      />
+    </el-dialog>
+
+    <!--背景设置-->
+    <el-dialog
+      :visible.sync="boardSetVisible"
+      width="750px"
+      class="dialog-css"
+      :close-on-click-modal="false"
+      :show-close="false"
+      :destroy-on-close="true"
+      :append-to-body="true"
+    >
+      <background
+        v-if="boardSetVisible"
+        @backgroundSetClose="backgroundSetClose"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -151,18 +183,24 @@ import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 import LinkageField from '@/components/canvas/components/Editor/LinkageField'
 import toast from '@/components/canvas/utils/toast'
 import FieldsList from '@/components/canvas/components/Editor/fieldsList'
+import LinkJumpSet from '@/views/panel/LinkJumpSet'
+import Background from '@/views/background/index'
 
 export default {
-  components: { FieldsList, SettingMenu, LinkageField },
+  components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField },
 
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     terminal: {
       type: String,
       default: 'pc'
     },
     sourceElement: {
       type: Object,
-      required: true
+      default: () => {}
     },
     element: {
       type: Object,
@@ -191,6 +229,9 @@ export default {
   },
   data() {
     return {
+      boardSetVisible: false,
+      linkJumpSetVisible: false,
+      linkJumpSetViewId: null,
       curFields: [],
       multiplexingCheckModel: false,
       barWidth: 24,
@@ -228,8 +269,8 @@ export default {
     },
     showEditPosition() {
       if (this.activeModel === 'edit' && !this.linkageAreaShow && !this.batchOptAreaShow) {
-        const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScale.scalePointWidth
-        const toLeft = this.element.style.left * this.curCanvasScale.scalePointWidth
+        const toRight = (this.canvasStyleData.width - this.element.style.left - this.element.style.width) * this.curCanvasScaleSelf.scalePointWidth
+        const toLeft = this.element.style.left * this.curCanvasScaleSelf.scalePointWidth
         if (this.barWidth < toRight) {
           return 'bar-main-right'
         } else if (this.barWidth > toRight && this.barWidth > toLeft) {
@@ -278,6 +319,9 @@ export default {
     miniWidth() {
       return this.mobileLayoutStatus ? 1 : 4
     },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'menuTop',
       'menuLeft',
@@ -288,7 +332,7 @@ export default {
       'linkageSettingStatus',
       'targetLinkageInfo',
       'curLinkageView',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'batchOptStatus',
       'mobileLayoutStatus',
       'curBatchOptComponents',
@@ -302,6 +346,16 @@ export default {
     }
   },
   methods: {
+    backgroundSetClose() {
+      this.boardSetVisible = false
+    },
+    linkJumpSet() {
+      this.linkJumpSetViewId = this.element.propValue.viewId
+      this.linkJumpSetVisible = true
+    },
+    closeJumpSetDialog() {
+      this.linkJumpSetVisible = false
+    },
     fieldsAreaDown(e) {
       // ignore
       e.preventDefault()
@@ -347,10 +401,10 @@ export default {
         this.curComponent.auxiliaryMatrix = false
         this.$emit('amRemoveItem')
       } else {
-        this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScale.matrixStyleOriginWidth) + 1
-        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScale.matrixStyleOriginHeight) + 1
-        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScale.matrixStyleOriginWidth)
-        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScale.matrixStyleOriginHeight)
+        this.curComponent.x = Math.round(this.curComponent.style.left / this.curCanvasScaleSelf.matrixStyleOriginWidth) + 1
+        this.curComponent.y = Math.round(this.curComponent.style.top / this.curCanvasScaleSelf.matrixStyleOriginHeight) + 1
+        this.curComponent.sizex = Math.round(this.curComponent.style.width / this.curCanvasScaleSelf.matrixStyleOriginWidth)
+        this.curComponent.sizey = Math.round(this.curComponent.style.height / this.curCanvasScaleSelf.matrixStyleOriginHeight)
         this.curComponent.sizey = this.curComponent.sizey > this.miniHeight ? this.curComponent.sizey : this.miniHeight
         this.curComponent.sizex = this.curComponent.sizex > this.miniWidth ? this.curComponent.sizex : this.miniWidth
         this.curComponent.auxiliaryMatrix = true
@@ -364,10 +418,10 @@ export default {
     },
     // 记录当前样式 跟随阴影位置 矩阵处理
     recordMatrixCurShadowStyle() {
-      const left = (this.curComponent.x - 1) * this.curCanvasScale.matrixStyleWidth
-      const top = (this.curComponent.y - 1) * this.curCanvasScale.matrixStyleHeight
-      const width = this.curComponent.sizex * this.curCanvasScale.matrixStyleWidth
-      const height = this.curComponent.sizey * this.curCanvasScale.matrixStyleHeight
+      const left = (this.curComponent.x - 1) * this.curCanvasScaleSelf.matrixStyleWidth
+      const top = (this.curComponent.y - 1) * this.curCanvasScaleSelf.matrixStyleHeight
+      const width = this.curComponent.sizex * this.curCanvasScaleSelf.matrixStyleWidth
+      const height = this.curComponent.sizey * this.curCanvasScaleSelf.matrixStyleHeight
       const style = {
         left: left,
         top: top,
@@ -409,9 +463,6 @@ export default {
       })
       bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId })
     },
-    linkJumpSet() {
-      this.$emit('linkJumpSet')
-    },
     goFile() {
       this.$refs.files.click()
     },
@@ -435,7 +486,7 @@ export default {
       reader.readAsDataURL(file)
     },
     boardSet() {
-      this.$emit('boardSet')
+      this.boardSetVisible = true
     },
     batchOptChange(val) {
       if (val) {

frontend/src/components/canvas/components/Editor/PGrid.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="grid">
-    <!--    positionBox:{{ positionBox.length }}-->
-    <!--    <div v-for="(yItem, index) in positionBox" v-if="index<positionBox.length-5" :key="index+'y'" style="float: left; width: 105%">-->
     <div
       v-for="(yItem, index) in positionBox"
       :key="index+'y'"
-      style="float: left; width: 105%"
+      class="outer-class"
     >
-      <!--      <div v-for="(xItem, index) in yItem" :key="index+'x'" :style="classInfo" style="float: left; border: 0.2px solid #b3d4fc ;color: #00feff">-->
       <div
-        v-for="(xItem, indx) in yItem"
-        :key="indx+'x'"
+        v-for="(xItem, idx) in yItem"
+        :key="idx+'x'"
         :style="classInfo"
-        style="float: left; border: 0.2px solid #b3d4fc ;"
+        class="inner-class"
       >
-        {{ xItem.el?1:0 }}
+        {{ xItem.el?'.':'' }}
       </div>
     </div>
   </div>
@@ -55,4 +52,11 @@ export default {
     top: 0;
     left: 0;
 }
+.outer-class{
+  float: left; width: 105%
+}
+
+.inner-class{
+  float: left; border: 1px solid #b3d4fc ;
+}
 </style>

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -6,8 +6,8 @@
   >
     <canvas-opt-bar />
     <div
-      id="canvasInfoMain"
-      ref="canvasInfoMain"
+      :id="previewDomId"
+      :ref="previewRefId"
       :style="canvasInfoMainStyle"
     >
       <el-row
@@ -31,8 +31,8 @@
       </el-row>
       <div
         v-else
-        id="canvasInfoTemp"
-        ref="canvasInfoTemp"
+        :id="previewTempDomId"
+        :ref="previewTempRefId"
         :style="[canvasInfoTempStyle,screenShotStyle]"
         class="main-class"
         @mouseup="deselectCurComponent"
@@ -43,6 +43,7 @@
           :key="index"
           ref="viewWrapperChild"
           :config="item"
+          :canvas-id="canvasId"
           :source-config="componentData[index]"
           :search-count="searchCount"
           :in-screen="inScreen"
@@ -53,61 +54,6 @@
           :canvas-style-data="canvasStyleData"
           :show-position="showPosition"
         />
-        <!--视图详情-->
-        <el-dialog
-          :visible.sync="chartDetailsVisible"
-          width="80%"
-          class="dialog-css"
-          :destroy-on-close="true"
-          top="5vh"
-        >
-          <span
-            v-if="chartDetailsVisible"
-            style="position: absolute;right: 70px;top:15px"
-          >
-            <el-button
-              v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
-              class="el-icon-picture-outline"
-              size="mini"
-              @click="exportViewImg"
-            >
-              {{ $t('chart.export_img') }}
-            </el-button>
-            <el-button
-              v-if="showChartInfoType==='details'"
-              size="mini"
-              @click="exportExcel"
-            >
-              <svg-icon
-                icon-class="ds-excel"
-                class="ds-icon-excel"
-              />{{ $t('chart.export') }}Excel
-            </el-button>
-          </span>
-          <UserViewDialog
-            v-if="chartDetailsVisible"
-            ref="userViewDialog"
-            :canvas-style-data="canvasStyleData"
-            :open-type="showChartInfoType"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
-
-        <!--手机视图详情-->
-        <el-dialog
-          :visible.sync="mobileChartDetailsVisible"
-          :fullscreen="true"
-          class="mobile-dialog-css"
-          :destroy-on-close="true"
-        >
-          <UserViewMobileDialog
-            v-if="mobileChartDetailsVisible"
-            :canvas-style-data="canvasStyleData"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
       </div>
     </div>
   </div>
@@ -122,16 +68,14 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
-import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
 import bus from '@/utils/bus'
 import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
 import { hasDataPermission } from '@/utils/permission'
 const erd = elementResizeDetectorMaker()
 
 export default {
-  components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
+  components: { ComponentWrapper, CanvasOptBar },
   model: {
     prop: 'show',
     event: 'change'
@@ -187,10 +131,19 @@ export default {
     panelInfo: {
       type: Object,
       required: true
+    },
+    canvasId: {
+      type: String,
+      require: false,
+      default: 'canvas-main'
     }
   },
   data() {
     return {
+      previewDomId: 'preview-' + this.canvasId,
+      previewRefId: 'preview-ref-' + this.canvasId,
+      previewTempDomId: 'preview-temp-' + this.canvasId,
+      previewTempRefId: 'preview-temp-ref-' + this.canvasId,
       isShowPreview: false,
       panelId: '',
       needToChangeHeight: [
@@ -211,11 +164,6 @@ export default {
       mainWidth: '100%',
       mainHeight: '100%',
       searchCount: 0,
-      chartDetailsVisible: false,
-      mobileChartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {},
-      showChartInfoType: 'details',
       // 布局展示 1.pc pc端布局 2.mobile 移动端布局
       terminal: 'pc',
       buttonFilterMap: null
@@ -353,10 +301,9 @@ export default {
     bus.$on('trigger-reset-button', this.triggerResetButton)
   },
   beforeDestroy() {
-    erd.uninstall(this.$refs.canvasInfoTemp)
-    erd.uninstall(this.$refs.canvasInfoMain)
+    erd.uninstall(this.$refs[this.previewTempRefId])
+    erd.uninstall(this.$refs[this.previewRefId])
     clearInterval(this.timer)
-    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$off('trigger-search-button', this.triggerSearchButton)
     bus.$off('trigger-reset-button', this.triggerResetButton)
   },
@@ -483,8 +430,8 @@ export default {
     changeStyleWithScale,
     getStyle,
     restore() {
-      const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
-      const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
+      const canvasHeight = document.getElementById(this.previewDomId).offsetHeight
+      const canvasWidth = document.getElementById(this.previewDomId).offsetWidth
       this.scaleWidth = (canvasWidth) * 100 / this.canvasStyleData.width // 获取宽度比
       // 如果是后端截图方式使用 的高度伸缩比例和宽度比例相同
       if (this.backScreenShot) {
@@ -492,7 +439,9 @@ export default {
       } else {
         this.scaleHeight = canvasHeight * 100 / this.canvasStyleData.height// 获取高度比
       }
-      this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      if (this.canvasId === 'canvas-main') {
+        this.$store.commit('setPreviewCanvasScale', { scaleWidth: (this.scaleWidth / 100), scaleHeight: (this.scaleHeight / 100) })
+      }
       this.handleScaleChange()
     },
     resetID(data) {
@@ -527,16 +476,6 @@ export default {
         this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }
     },
-    openChartDetailsDialog(chartInfo) {
-      this.showChartInfo = chartInfo.chart
-      this.showChartTableInfo = chartInfo.tableChart
-      this.showChartInfoType = chartInfo.openType
-      if (this.terminal === 'pc') {
-        this.chartDetailsVisible = true
-      } else {
-        this.mobileChartDetailsVisible = true
-      }
-    },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
     },
@@ -559,7 +498,7 @@ export default {
     },
     initListen() {
       const _this = this
-      const canvasMain = document.getElementById('canvasInfoMain')
+      const canvasMain = document.getElementById(this.previewDomId)
       // 监听主div变动事件
       if (canvasMain) {
         erd.listenTo(canvasMain, element => {
@@ -570,9 +509,9 @@ export default {
       }
       setTimeout(() => {
         // 监听画布div变动事件
-        const tempCanvas = document.getElementById('canvasInfoTemp')
+        const tempCanvas = document.getElementById(this.previewTempDomId)
         if (tempCanvas) {
-          erd.listenTo(document.getElementById('canvasInfoTemp'), element => {
+          erd.listenTo(document.getElementById(this.previewTempDomId), element => {
             _this.$nextTick(() => {
               // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
               _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
@@ -581,7 +520,6 @@ export default {
           })
         }
       }, 1500)
-      eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     }
   }
 }

frontend/src/components/canvas/components/Editor/PreviewMobile.vue

@@ -32,32 +32,6 @@
           :canvas-style-data="canvasStyleData"
           :in-screen="inScreen"
         />
-        <!--视图详情-->
-        <el-dialog
-          :visible.sync="chartDetailsVisible"
-          width="70%"
-          class="dialog-css"
-          :destroy-on-close="true"
-        >
-          <span style="position: absolute;right: 70px;top:15px">
-            <el-button
-              size="mini"
-              @click="exportExcel"
-            >
-              <svg-icon
-                icon-class="ds-excel"
-                class="ds-icon-excel"
-              />
-              {{ $t('chart.export_details') }}
-            </el-button>
-          </span>
-          <UserViewDialog
-            ref="userViewDialog"
-            :canvas-style-data="canvasStyleData"
-            :chart="showChartInfo"
-            :chart-table="showChartTableInfo"
-          />
-        </el-dialog>
       </div>
     </div>
   </div>
@@ -72,11 +46,10 @@ import { uuid } from 'vue-uuid'
 import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
 import eventBus from '@/components/canvas/utils/eventBus'
 import elementResizeDetectorMaker from 'element-resize-detector'
-import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 
 export default {
-  components: { ComponentWrapper, UserViewDialog, CanvasOptBar },
+  components: { ComponentWrapper, CanvasOptBar },
   model: {
     prop: 'show',
     event: 'change'
@@ -122,10 +95,7 @@ export default {
       componentDataShow: [],
       mainWidth: '100%',
       mainHeight: '100%',
-      searchCount: 0,
-      chartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {}
+      searchCount: 0
     }
   },
   computed: {
@@ -257,14 +227,6 @@ export default {
         this.$nextTick(() => (eventBus.$emit('resizing', '')))
       }
     },
-    openChartDetailsDialog(chartInfo) {
-      this.showChartInfo = chartInfo.chart
-      this.showChartTableInfo = chartInfo.tableChart
-      this.chartDetailsVisible = true
-    },
-    exportExcel() {
-      this.$refs['userViewDialog'].exportExcel()
-    },
     deselectCurComponent(e) {
       if (!this.isClickComponent) {
         this.$store.commit('setCurComponent', { component: null, index: null })

frontend/src/components/canvas/components/FilterTextAttr.vue

@@ -1,237 +0,0 @@
-<template>
-  <el-card
-    class="el-card-main"
-    :style="mainStyle"
-  >
-    <div style="position: relative;">
-      <el-tooltip :content="$t('panel.fontSize')">
-
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="iconfont icon-font_size"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.fontSize"
-          type="number"
-          size="mini"
-          min="12"
-          max="128"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.fontWeight')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-font-weight-bold"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.fontWeight"
-          type="number"
-          size="mini"
-          min="100"
-          step="100"
-          max="900"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.letterSpacing')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-letter_spacing"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.letterSpacing"
-          type="number"
-          size="mini"
-          min="0"
-          max="99"
-          @change="styleChange"
-        />
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip :content="$t('panel.color')">
-            <i
-              class="icon iconfont icon-zimua"
-              @click="goColor"
-            />
-          </el-tooltip>
-          <div :style="letterDivColor" />
-          <el-color-picker
-            ref="colorPicker"
-            v-model="styleInfo.color"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i
-              class="iconfont icon-beijingse1"
-              @click="goBackgroundColor"
-            />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker
-            ref="backgroundColorPicker"
-            v-model="styleInfo.backgroundColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      textAlignOptions: [
-        {
-          icon: 'iconfont icon-juzuo',
-          tooltip: this.$t('panel.text_align_left'),
-          label: 'left'
-        },
-        {
-          icon: 'iconfont icon-align-center',
-          tooltip: this.$t('panel.text_align_center'),
-          label: 'center'
-        },
-        {
-          icon: 'iconfont icon-juyou',
-          tooltip: this.$t('panel.text_align_right'),
-          label: 'right'
-        }
-      ] }
-  },
-  computed: {
-
-    letterDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.color
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    canvasWidth() {
-      let scaleWidth = 1
-      if (this.canvasStyleData.selfAdaption) {
-        scaleWidth = this.curCanvasScale.scaleWidth / 100
-      }
-      return this.canvasStyleData.width * scaleWidth
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  methods: {
-    goColor() {
-      this.$refs.colorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      let ps = 0
-      if (this.canvasStyleData.selfAdaption) {
-        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        ps = x + 60
-      }
-      // 防止toolbar超出边界
-      const xGap = ps + 295 - this.canvasWidth
-      if (xGap > 0) {
-        return ps - xGap
-      } else {
-        return ps
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    },
-    styleChange() {
-      this.$store.commit('canvasChange')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 350px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-
-  ::v-deep .el-radio-button__inner{
-    padding: 5px!important;
-    width: 30px!important;
-  }
-</style>

frontend/src/components/canvas/components/RectangleAttr.vue

@@ -1,284 +0,0 @@
-<template>
-  <el-card
-    class="el-card-main"
-    :style="mainStyle"
-  >
-    <div style="position: relative;">
-      <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
-        <el-tooltip content="边框风格">
-          <el-select
-            v-model="styleInfo.borderStyle"
-            size="mini"
-            @change="styleChange"
-          >
-            <el-option
-              v-for="item in lineStyle"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-              <span style="float: left;">
-                <i :class="item.icon" />
-              </span>
-              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
-            </el-option>
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="边框宽度">
-          <el-select
-            v-model="styleInfo.borderWidth"
-            size="mini"
-            placeholder=""
-            @change="styleChange"
-          >
-            <el-option
-              v-for="item in lineFont"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </el-tooltip>
-      </div>
-
-      <el-tooltip :content="$t('panel.borderRadius')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-fangxing-"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="styleInfo.borderRadius"
-          type="number"
-          size="mini"
-          min="0"
-          max="100"
-          step="1"
-          @change="styleChange"
-        />
-      </div>
-
-      <el-tooltip :content="$t('panel.opacity')">
-        <i
-          style="float: left;margin-top: 3px;margin-left: 2px;"
-          class="icon iconfont icon-touming"
-        />
-      </el-tooltip>
-
-      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-input
-          v-model="innerOpacity"
-          type="number"
-          size="mini"
-          min="0"
-          max="100"
-          step="10"
-          @change="styleChange"
-        />
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="边框颜色">
-            <i
-              class="iconfont icon-huabi"
-              @click="goBoardColor"
-            />
-          </el-tooltip>
-          <div :style="boardDivColor" />
-          <el-color-picker
-            ref="boardColorPicker"
-            v-model="styleInfo.borderColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
-            <i
-              class="iconfont icon-beijingse1"
-              @click="goBackgroundColor"
-            />
-          </el-tooltip>
-          <div :style="backgroundDivColor" />
-          <el-color-picker
-            ref="backgroundColorPicker"
-            v-model="styleInfo.backgroundColor"
-            style="margin-top: 7px;height: 0px"
-            size="mini"
-            @change="styleChange"
-          />
-        </div>
-      </div>
-
-    </div>
-  </el-card>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-export default {
-  props: {
-    scrollLeft: {
-      type: Number,
-      default: 0
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      lineStyle: [{
-        icon: 'iconfont icon-solid_line',
-        value: 'solid',
-        label: '实线'
-      }, {
-        icon: 'iconfont icon-xuxian',
-        value: 'dashed',
-        label: '虚线'
-      }, {
-        icon: 'iconfont icon-dianxian',
-        value: 'dotted',
-        label: '点线'
-      }],
-      lineFont: [{
-        value: '0',
-        label: '0'
-      }, {
-        value: '1',
-        label: '1'
-      }, {
-        value: '2',
-        label: '2'
-      }, {
-        value: '3',
-        label: '3'
-      }, {
-        value: '4',
-        label: '4'
-      }, {
-        value: '5',
-        label: '5'
-      }],
-      innerOpacity: 0
-    }
-  },
-
-  computed: {
-    boardDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.borderColor
-      }
-      return style
-    },
-    backgroundDivColor() {
-      const style = {
-        height: '2px',
-        background: this.styleInfo.backgroundColor
-      }
-      return style
-    },
-
-    mainStyle() {
-      const style = {
-        left: this.getPositionX(this.curComponent.style.left - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
-      }
-      return style
-    },
-    styleInfo() {
-      return this.$store.state.curComponent.style
-    },
-    canvasWidth() {
-      let scaleWidth = 1
-      if (this.canvasStyleData.selfAdaption) {
-        scaleWidth = this.curCanvasScale.scaleWidth / 100
-      }
-      return this.canvasStyleData.width * scaleWidth
-    },
-    ...mapState([
-      'curComponent',
-      'curCanvasScale',
-      'canvasStyleData'
-    ])
-
-  },
-  watch: {
-    innerOpacity: {
-      handler(oldVal, newVal) {
-        this.styleInfo['opacity'] = this.innerOpacity / 100
-      }
-    }
-  },
-  mounted() {
-    if (this.styleInfo['opacity']) {
-      this.innerOpacity = this.styleInfo['opacity'] * 100
-    }
-  },
-  methods: {
-    goBoardColor() {
-      this.$refs.boardColorPicker.handleTrigger()
-    },
-    goBackgroundColor() {
-      this.$refs.backgroundColorPicker.handleTrigger()
-    },
-    getPositionX(x) {
-      let ps = 0
-      if (this.canvasStyleData.selfAdaption) {
-        ps = (x * this.curCanvasScale.scaleWidth / 100) + 60
-      } else {
-        ps = x + 60
-      }
-      // 防止toolbar超出边界
-      const xGap = ps + 345 - this.canvasWidth
-      if (xGap > 0) {
-        return ps - xGap
-      } else {
-        return ps
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * this.curCanvasScale.scaleHeight / 100
-      } else {
-        return y
-      }
-    },
-    styleChange() {
-      this.$store.commit('canvasChange')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-  .el-card-main {
-    height: 34px;
-    z-index: 10;
-    width: 400px;
-    position: absolute;
-
-  }
-  .el-card-main ::v-deep .el-card__body {
-    padding: 0px!important;
-
-  }
-</style>

frontend/src/components/canvas/components/TextAttr.vue

@@ -319,7 +319,10 @@
         style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;"
       >
         <el-tooltip :content="$t('panel.data_format')">
-          <date-format :format-info="curComponent.formatInfo" />
+          <date-format
+            :canvas-id="canvasId"
+            :format-info="curComponent.formatInfo"
+          />
         </el-tooltip>
       </div>
 
@@ -415,6 +418,10 @@ import FrameLinks from '@/components/canvas/components/Editor/FrameLinks'
 export default {
   components: { FrameLinks, DateFormat, VideoLinks, StreamMediaLinks },
   props: {
+    canvasId: {
+      type: String,
+      default: 'canvas-main'
+    },
     scrollLeft: {
       type: Number,
       default: 0
@@ -581,7 +588,7 @@ export default {
     mainStyle() {
       const style = {
         left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
-        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 25) + 'px'
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop + 20) + 'px'
       }
       return style
     },
@@ -592,14 +599,17 @@ export default {
       return this.$store.state.curComponent.component
     },
     canvasWidth() {
-      return this.canvasStyleData.width * this.curCanvasScale.scalePointWidth
+      return this.canvasStyleData.width * this.curCanvasScaleSelf.scalePointWidth
     },
     showVertical() {
       return !['textSelectGridWidget', 'numberSelectGridWidget'].includes(this.curComponent.serviceName)
     },
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
     ...mapState([
       'curComponent',
-      'curCanvasScale',
+      'curCanvasScaleMap',
       'canvasStyleData',
       'curActiveTabInner'
     ])
@@ -675,7 +685,7 @@ export default {
     },
     getPositionX(x) {
       let ps = 0
-      ps = (x * this.curCanvasScale.scalePointWidth) + 60
+      ps = (x * this.curCanvasScaleSelf.scalePointWidth) + 60
       // 防止toolbar超出边界
       const xGap = ps + this.mainWidthOffset - this.canvasWidth
       if (xGap > 0) {
@@ -685,7 +695,7 @@ export default {
       }
     },
     getPositionY(y) {
-      return y * this.curCanvasScale.scalePointHeight
+      return y * this.curCanvasScaleSelf.scalePointHeight
     },
     styleChange() {
       this.$store.commit('canvasChange')

frontend/src/components/canvas/custom-component/DeRichText.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="rich-main-class"
+    :style="autoStyle"
     @dblclick="setEdit"
   >
     <Editor
@@ -86,9 +87,9 @@ export default {
         plugins: 'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
         // 工具栏
         toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
-            'alignleft aligncenter alignright | bullist numlist |' +
-            ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
-            '| bdmap indent2em lineheight formatpainter axupimgs',
+          'alignleft aligncenter alignright | bullist numlist |' +
+          ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+          '| bdmap indent2em lineheight formatpainter axupimgs',
         toolbar_location: '/',
         font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
         fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
@@ -169,37 +170,37 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rich-main-class {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto!important;
-    position: relative;
-  }
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
-  ::v-deep ol {
-    display: block!important;
-    list-style-type: decimal;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep ul {
-    display: block!important;
-    list-style-type: disc;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep li {
-    display: list-item!important;
-    text-align: -webkit-match-parent!important;
-  }
+.rich-main-class {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto!important;
+  position: relative;
+}
+::-webkit-scrollbar {
+  width: 0px!important;
+  height: 0px!important;
+}
+::v-deep ol {
+  display: block!important;
+  list-style-type: decimal;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep ul {
+  display: block!important;
+  list-style-type: disc;
+  margin-block-start: 1em!important;
+  margin-block-end: 1em!important;
+  margin-inline-start: 0px!important;
+  margin-inline-end: 0px!important;
+  padding-inline-start: 40px!important;
+}
+::v-deep li {
+  display: list-item!important;
+  text-align: -webkit-match-parent!important;
+}
 </style>
 

frontend/src/components/canvas/custom-component/DeRichTextView.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="rich-main-class"
+    :style="autoStyle"
     @dblclick="setEdit"
   >
     <Editor

frontend/src/components/canvas/custom-component/UserView.vue

@@ -120,6 +120,66 @@
         @onDrillJump="drillJump"
       />
     </div>
+
+    <!--dialog-->
+    <!--视图详情-->
+    <el-dialog
+      :visible.sync="chartDetailsVisible"
+      width="80%"
+      class="dialog-css"
+      :destroy-on-close="true"
+      :show-close="true"
+      :append-to-body="true"
+      top="5vh"
+    >
+      <span
+        v-if="chartDetailsVisible"
+        style="position: absolute;right: 70px;top:15px"
+      >
+        <el-button
+          v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
+          class="el-icon-picture-outline"
+          size="mini"
+          @click="exportViewImg"
+        >
+          {{ $t('chart.export_img') }}
+        </el-button>
+        <el-button
+          v-if="showChartInfoType==='details'"
+          size="mini"
+          @click="exportExcel"
+        >
+          <svg-icon
+            icon-class="ds-excel"
+            class="ds-icon-excel"
+          />{{ $t('chart.export') }}Excel
+        </el-button>
+      </span>
+      <user-view-dialog
+        v-if="chartDetailsVisible"
+        ref="userViewDialog"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+        :canvas-style-data="canvasStyleData"
+        :open-type="showChartInfoType"
+      />
+    </el-dialog>
+
+    <!--手机视图详情-->
+    <el-dialog
+      class="mobile-dialog-css"
+      :visible.sync="mobileChartDetailsVisible"
+      :fullscreen="true"
+      :append-to-body="true"
+      :destroy-on-close="true"
+    >
+      <UserViewMobileDialog
+        v-if="mobileChartDetailsVisible"
+        :canvas-style-data="canvasStyleData"
+        :chart="showChartInfo"
+        :chart-table="showChartTableInfo"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -135,7 +195,6 @@ import bus from '@/utils/bus'
 import { mapState } from 'vuex'
 import { isChange } from '@/utils/conditionUtil'
 import { BASE_CHART_STRING } from '@/views/chart/chart/chart'
-import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy } from '@/components/canvas/utils/utils'
 import { getToken, getLinkToken } from '@/utils/auth'
 import DrillPath from '@/views/chart/view/DrillPath'
@@ -151,11 +210,16 @@ import { checkAddHttp } from '@/utils/urlUtils'
 import DeRichTextView from '@/components/canvas/custom-component/DeRichTextView'
 import Vue from 'vue'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 
 export default {
   name: 'UserView',
-  components: { DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
+  components: { UserViewDialog, DeRichTextView, LabelNormalText, PluginCom, ChartComponentS2, EditBarView, ChartComponent, TableNormal, LabelNormal, DrillPath, ChartComponentG2 },
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -219,6 +283,11 @@ export default {
   },
   data() {
     return {
+      mobileChartDetailsVisible: false,
+      chartDetailsVisible: false,
+      showChartInfo: {},
+      showChartTableInfo: {},
+      showChartInfoType: 'details',
       dataRowNameSelect: {},
       dataRowSelect: {},
       curFields: [],
@@ -461,6 +530,12 @@ export default {
     }
   },
   methods: {
+    exportExcel() {
+      this.$refs['userViewDialog'].exportExcel()
+    },
+    exportViewImg() {
+      this.$refs['userViewDialog'].exportViewImg()
+    },
     pluginEditHandler(e) {
       this.$emit('trigger-plugin-edit', { e, id: this.element.id })
     },
@@ -728,7 +803,16 @@ export default {
       tableChart.customStyle.text.show = false
       tableChart.customAttr = JSON.stringify(tableChart.customAttr)
       tableChart.customStyle = JSON.stringify(tableChart.customStyle)
-      eventBus.$emit('openChartDetailsDialog', { chart: this.chart, tableChart: tableChart, openType: params.openType })
+
+      this.showChartInfo = this.chart
+      this.showChartTableInfo = tableChart
+      this.showChartInfoType = params.openType
+      this.chartDetailsVisible = true
+      if (this.terminal === 'pc') {
+        this.chartDetailsVisible = true
+      } else {
+        this.mobileChartDetailsVisible = true
+      }
     },
     chartClick(param) {
       if (this.drillClickDimensionList.length < this.chart.drillFields.length - 1) {

frontend/src/components/canvas/custom-component/component-list.js

@@ -394,7 +394,7 @@ const list = [
       tabList: [{
         title: 'Tab1',
         name: '1',
-        content: null
+        content: { type: 'canvas' }
       }]
     },
     x: 1,

frontend/src/components/canvas/store/copy.js

@@ -35,7 +35,7 @@ export default {
         }
       })
       const canvasStyleData = state.canvasStyleData
-      const curCanvasScale = state.curCanvasScale
+      const curCanvasScaleSelf = state.curCanvasScaleMap['canvas-main']
       const componentGap = state.componentGap
       Object.keys(state.curMultiplexingComponents).forEach(function(componentId, index) {
         const component =
@@ -53,15 +53,15 @@ export default {
         const tilePosition = index % 3
         const divisiblePosition = parseInt(index / 3)
         if (canvasStyleData.auxiliaryMatrix) {
-          const width = component.sizex * curCanvasScale.matrixStyleOriginWidth
+          const width = component.sizex * curCanvasScaleSelf.matrixStyleOriginWidth
           // 取余 平铺4个 此处x 位置偏移
           component.x = component.x + component.sizex * tilePosition
           // Y 方向根据当前应该放置的最大值 加上50矩阵余量
           component.y = pYMax + 50 + state.viewBase.sizex * divisiblePosition
-          component.style.left = (component.x - 1) * curCanvasScale.matrixStyleOriginWidth
-          component.style.top = (component.y - 1) * curCanvasScale.matrixStyleOriginHeight
+          component.style.left = (component.x - 1) * curCanvasScaleSelf.matrixStyleOriginWidth
+          component.style.top = (component.y - 1) * curCanvasScaleSelf.matrixStyleOriginHeight
           component.style.width = width
-          component.style.height = component.sizey * curCanvasScale.matrixStyleOriginHeight
+          component.style.height = component.sizey * curCanvasScaleSelf.matrixStyleOriginHeight
         } else {
           const width = component.style.width
           const height = component.style.height

frontend/src/components/canvas/utils/utils.js

@@ -133,6 +133,9 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
     if (item.component && item.component === 'Picture') {
       item.style.adaptation = item.style.adaptation || 'adaptation'
     }
+    // 增加所属画布ID（canvasId）当前所在画布的父ID（canvasPid） 主画布ID为main-canvas, PID = 0 表示当前所属canvas为最顶层
+    item.canvasId = (item.canvasId || 'canvas-main')
+    item.canvasPid = (item.canvasPid || '0')
   })
   // 初始化密度为最高密度
   componentStyle.aidedDesign.matrixBase = 4
@@ -145,7 +148,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
 export function resetID(data) {
   if (data) {
     data.forEach(item => {
-      item.type !== 'custom' && (item.id = uuid.v1())
+      item.type !== 'custom' && item.type !== 'de-tabs' && (item.id = uuid.v1())
     })
   }
   return data
@@ -224,3 +227,7 @@ export function imgUrlTrans(url) {
     return url
   }
 }
+
+export function getNowCanvasComponentData(canvasId) {
+  return store.state.componentData.filter(item => item.canvasId === canvasId)
+}

frontend/src/components/dataease/DeOutWidget.vue

@@ -40,6 +40,7 @@
                 v-if="element.type==='custom'"
                 :id="'component' + element.id"
                 ref="deOutWidget"
+                :canvas-id="canvasId"
                 class="component-custom"
                 :out-style="element.style"
                 :is-relation="isRelation"
@@ -58,12 +59,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import inputStyleMixin from '@/components/widget/DeWidget/inputStyleMixin'
 export default {
   name: 'DeOutWidget',
   mixins: [inputStyleMixin],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}
@@ -118,9 +122,6 @@ export default {
       }
       return size
     },
-    ...mapState([
-      'curCanvasScale'
-    ]),
     deSelectGridBg() {
       if (this.element.component !== 'de-select-grid') return null
       const { backgroundColorSelect, color } = this.element.commonBackground

frontend/src/components/deCustomCm/deDatePick.vue

@@ -45,7 +45,7 @@ export default {
 
   .el-date-editor {
     padding-left: 12px;
-    width: 100%;
+    width: 100% !important;
   }
 
   .calendar-outlined {

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -35,6 +35,10 @@ import customInput from '@/components/widget/DeWidget/customInput'
 export default {
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -221,6 +225,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeInputSearch.vue

@@ -27,6 +27,10 @@ import bus from '@/utils/bus'
 export default {
 
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -104,6 +108,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: !this.value ? [] : Array.isArray(this.value) ? this.value : [this.value],
         operator: this.operator

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -47,6 +47,10 @@ import bus from '@/utils/bus'
 export default {
 
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -230,6 +234,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: [this.form.min, this.form.max],
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -52,6 +52,10 @@ export default {
   components: { ElVisualSelect },
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}
@@ -311,6 +315,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -73,6 +73,10 @@ import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/
 
 export default {
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: null
@@ -312,6 +316,7 @@ export default {
     },
     getCondition() {
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: this.formatFilterValue(),
         operator: this.operator

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -36,6 +36,10 @@ export default {
   components: { ElTreeSelect },
   mixins: [customInput],
   props: {
+    canvasId: {
+      type: String,
+      required: true
+    },
     element: {
       type: Object,
       default: () => {}
@@ -298,6 +302,7 @@ export default {
       const val = this.formatFilterValue()
 
       const param = {
+        canvasId: this.canvasId,
         component: this.element,
         value: val,
         operator: this.operator,

frontend/src/components/widget/DeWidget/DeTabs.vue

@@ -45,14 +45,6 @@
                 {{ $t('detabs.eidttitle') }}
               </el-dropdown-item>
 
-              <el-dropdown-item :command="beforeHandleCommand('selectView', item)">
-                {{ $t('detabs.selectview') }}
-              </el-dropdown-item>
-
-              <el-dropdown-item :command="beforeHandleCommand('selectOthers', item)">
-                {{ $t('detabs.selectOthers') }}
-              </el-dropdown-item>
-
               <el-dropdown-item
                 v-if=" element.options.tabList.length > 1"
                 :command="beforeHandleCommand('deleteCur', item)"
@@ -63,6 +55,30 @@
             </el-dropdown-menu>
           </el-dropdown>
         </span>
+        <de-canvas-tab
+          v-if="item.content && item.content.type==='canvas' && isEdit && !mobileLayoutStatus"
+          :ref="'canvasTabRef-'+item.name"
+          :parent-forbid="true"
+          :canvas-style-data="canvasStyleData"
+          :component-data="tabCanvasComponentData(item.name)"
+          :canvas-id="element.id+'-'+item.name"
+          class="tab_canvas"
+          :class="moveActive ? 'canvas_move_in':''"
+          @canvasScroll="canvasScroll"
+        />
+        <div
+          v-if="item.content && item.content.type==='canvas' && (!isEdit || mobileLayoutStatus)"
+          style="width: 100%;height:100%"
+        >
+          <Preview
+            :component-data="tabCanvasComponentData(item.name)"
+            :canvas-style-data="canvasStyleData"
+            :canvas-id="element.id+'-'+item.name"
+            :panel-info="panelInfo"
+            :in-screen="true"
+          />
+        </div>
+
         <component
           :is="item.content.component"
           v-if="item.content && item.content.type!=='view'"
@@ -180,6 +196,13 @@
       </span>
     </el-dialog>
 
+    <text-attr
+      v-if="showAttr && curComponent.canvasId !== 'canvas-main'"
+      :canvas-id="curComponent.canvasId"
+      :scroll-left="scrollLeft"
+      :scroll-top="scrollTop"
+    />
+
   </div>
 
 </template>
@@ -195,11 +218,19 @@ import { chartCopy } from '@/api/chart/chart'
 import { buildFilterMap } from '@/utils/conditionUtil'
 import TabUseList from '@/views/panel/AssistComponent/tabUseList'
 import { findPanelElementInfo } from '@/api/panel/panel'
+import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
+import DeCanvasTab from '@/components/canvas/DeCanvas'
+import Preview from '@/components/canvas/components/Editor/Preview'
+import TextAttr from '@/components/canvas/components/TextAttr'
 
 export default {
-  name: 'DeTabls',
-  components: { TabUseList, ViewSelect, DataeaseTabs },
+  name: 'DeTabs',
+  components: { TextAttr, Preview, DeCanvasTab, TabUseList, ViewSelect, DataeaseTabs },
   props: {
+    canvasId: {
+      type: String,
+      default: 'canvas-main'
+    },
     element: {
       type: Object,
       default: null
@@ -236,9 +267,21 @@ export default {
   },
   data() {
     return {
-
+      scrollLeft: 50,
+      scrollTop: 10,
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date',
+        'de-video',
+        'de-stream-media',
+        'de-frame'
+      ],
       activeTabName: null,
-
       tabIndex: 1,
       dialogVisible: false,
       textarea: '',
@@ -250,6 +293,26 @@ export default {
     }
   },
   computed: {
+    curCanvasScaleSelf() {
+      return this.curCanvasScaleMap[this.canvasId]
+    },
+    showAttr() {
+      if (this.mobileLayoutStatus) {
+        return false
+      } else if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && (!this.curComponent.options.attrs.showTitle || !this.curComponent.options.attrs.title)) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
+    moveActive() {
+      return this.tabMoveInActiveId && this.tabMoveInActiveId === this.element.id
+    },
     tabH() {
       return this.h - 50
     },
@@ -263,12 +326,14 @@ export default {
       const map = buildFilterMap(this.componentData)
       return map
     },
-
     ...mapState([
       'componentData',
       'curComponent',
       'mobileLayoutStatus',
-      'canvasStyleData'
+      'canvasStyleData',
+      'tabMoveInActiveId',
+      'curCanvasScaleMap',
+      'pcComponentData'
     ]),
     fontColor() {
       return this.element && this.element.style && this.element.style.headFontColor || 'none'
@@ -295,6 +360,7 @@ export default {
   watch: {
     activeTabName: {
       handler(newVal, oldVla) {
+        this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
         const _this = this
         _this.$nextTick(() => {
           try {
@@ -313,7 +379,7 @@ export default {
             activeTabInner = item.content
           }
         })
-        if (newVal && activeTabInner) {
+        if (newVal && activeTabInner && activeTabInner.type === 'view') {
           this.$store.commit('setCurActiveTabInner', activeTabInner)
           this.$store.dispatch('chart/setViewId', activeTabInner.propValue.viewId)
         } else {
@@ -335,12 +401,31 @@ export default {
   created() {
     bus.$on('add-new-tab', this.addNewTab)
     this.activeTabName = this.element.options.tabList[0].name
+    this.$store.commit('setTabActiveTabNameMap', { tabId: this.element.id, activeTabName: this.activeTabName })
     this.setContentThemeStyle()
   },
   beforeDestroy() {
     bus.$off('add-new-tab', this.addNewTab)
   },
   methods: {
+    initScroll() {
+      this.scrollLeft = 50
+      this.scrollTop = 10
+    },
+    canvasScroll(scrollInfo) {
+      this.scrollLeft = scrollInfo.scrollLeft + 50
+      this.scrollTop = scrollInfo.scrollTop + 10
+      console.log('scrollInfo=' + JSON.stringify(scrollInfo))
+      bus.$emit('onScroll')
+    },
+    tabCanvasComponentData(tabName) {
+      const tabCanvasId = this.element.id + '-' + tabName
+      if (this.mobileLayoutStatus) {
+        return this.pcComponentData.filter(item => item.canvasId === tabCanvasId)
+      } else {
+        return getNowCanvasComponentData(tabCanvasId)
+      }
+    },
     setContentThemeStyle() {
       this.element.options.tabList.forEach(tab => {
         if (tab.content && tab.content.type === 'view') {
@@ -429,7 +514,9 @@ export default {
           component.propValue = propValue
           component.filters = []
           component.linkageFilters = []
-          if (this.themeStyle) { component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle)) }
+          if (this.themeStyle) {
+            component.commonBackground = JSON.parse(JSON.stringify(this.themeStyle))
+          }
         }
       })
       component.id = newComponentId
@@ -494,8 +581,10 @@ export default {
       const tab = {
         title: 'NewTab',
         name: curName,
-        content: null
+        content: { type: 'canvas' }
       }
+      // 的Tab都是画布
+
       this.element.options.tabList.push(tab)
 
       this.styleChange()
@@ -523,18 +612,27 @@ export default {
 
 <style lang="scss" scoped>
 
-  .de-tabs-div {
-    height: 100%;
-    overflow: hidden;
-  }
+.de-tabs-div {
+  height: 100%;
+  overflow: hidden;
+}
 
-  .de-tabs-height {
-    height: 100%;
-  }
+.de-tabs-height {
+  height: 100%;
+}
 
-  .de-tab-content {
-    width: 100%;
-    height: 100%;
-  }
+.de-tab-content {
+  width: 100%;
+  height: 100%;
+}
+
+.tab_canvas {
+  height: calc(100% - 5px);
+  border: 2px dotted transparent;
+}
+
+.canvas_move_in {
+  border-color: blueviolet;
+}
 
 </style>

frontend/src/lang/en.js

@@ -912,6 +912,9 @@ export default {
     password_input_error: 'Original password input error'
   },
   chart: {
+    solid_color: 'Solid color',
+    split_gradient: 'Split gradient',
+    continuous_gradient: 'Continuous gradient',
     map_center_lost: 'The graph is missing the centroid or center attribute, please complete it and try again',
     margin_model: 'Model',
     margin_model_auto: 'Auto',
@@ -1438,7 +1441,7 @@ export default {
     field_rename: 'Rename Field',
     params_work: 'Effective only when editing SQL',
     sql_variable_limit_1: '1、SQL variables can only be used in where conditions',
-    sql_variable_limit_2: '2、Example：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2}',
+    sql_variable_limit_2: "2、Example：select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'",
     select_year: 'Select Year',
     select_month: 'Select Month',
     select_date: 'Select Date',
@@ -1486,6 +1489,7 @@ export default {
     field_origin_name: 'Field Origin Name',
     field_check: 'Selected',
     update_info: 'Update Info',
+    update_records: 'Update Records',
     join_view: 'Data Associated',
     text: 'Text',
     time: 'Time',
@@ -2362,7 +2366,8 @@ export default {
     channel_email_msg: 'Email',
     channel_wecom_msg: 'Wecom',
     channel_dingtalk_msg: 'Dingtalk',
-    channel_lark_msg: 'Lark'
+    channel_lark_msg: 'Lark',
+    channel_larksuite_msg: 'Larksuite'
   },
   denumberrange: {
     label: 'Number range',
@@ -2478,6 +2483,7 @@ export default {
     wecom: 'Wecom',
     dingtalk: 'Dingtalk',
     lark: 'Lark',
+    larksuite: 'Larksuite',
     pixel: 'Pixel',
     default: 'Default',
     custom: 'Custom',
@@ -2620,6 +2626,23 @@ export default {
     search_by_keyword: 'Search by keyword',
     apply_logs: 'Apply logs',
     app_group_delete_tips: 'Are you sure to delete this application category?',
-    app_group_delete_content: 'After deletion, all application templates in this category will also be deleted.'
+
+    app_group_delete_content: 'After deletion, all application templates in this category will also be deleted.',
+    panel_position: 'Panel position',
+    panel_name: 'Panel name',
+    dataset_group_position: 'Dataset group position',
+    dataset_group_name: 'Dataset name',
+    datasource_info: 'Datasource info',
+    datasource: 'Datasource',
+    dataset_group: 'Dataset group',
+    panel: 'Panel',
+    log_delete_tips: 'Are you sure to delete this application record?',
+    log_resource_delete_tips: 'Delete related resources (irrecoverable after deletion)'
+
+  },
+
+  logout: {
+    oidc_logout_error: 'OIDC failed to exit, do you continue to exit DataEase?',
+    cas_logout_error: 'The CAS service is abnormal, please contact the administrator!'
   }
 }

frontend/src/lang/tw.js

@@ -912,6 +912,9 @@ export default {
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
+    solid_color: '純色',
+    split_gradient: '分離漸變',
+    continuous_gradient: '連續漸變',
     map_center_lost: '圖形缺失中心點centroid或center屬性，請補全後再試',
     margin_model: '模式',
     margin_model_auto: '自動',
@@ -1438,7 +1441,7 @@ export default {
     field_rename: '字段重命名',
     params_work: '僅在編輯 sql 時生效',
     sql_variable_limit_1: '1、SQL變數只能在WHERE條件中使用',
-    sql_variable_limit_2: '2、示例：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2}',
+    sql_variable_limit_2: "2、示例：select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'",
     selesql_variable_limit_2ct_year: '選擇年',
     select_month: '選擇月',
     select_date: '選擇日期',
@@ -1486,6 +1489,7 @@ export default {
     field_origin_name: '原始名稱',
     field_check: '選中',
     update_info: '更新信息',
+    update_records: '更新記錄',
     join_view: '數據關聯',
     text: '文本',
     time: '時間',
@@ -2363,7 +2367,8 @@ export default {
     channel_email_msg: '郵件提醒',
     channel_wecom_msg: '企業微信',
     channel_dingtalk_msg: '釘釘提醒',
-    channel_lark_msg: '飛書提醒'
+    channel_lark_msg: '飛書提醒',
+    channel_larksuite_msg: '國際飛書'
   },
   denumberrange: {
     label: '數值區間',
@@ -2479,6 +2484,7 @@ export default {
     wecom: '企業微信',
     dingtalk: '釘釘',
     lark: '飛書',
+    larksuite: '國際飛書',
     pixel: '分辨率',
     default: '默認',
     custom: '自定義',
@@ -2621,6 +2627,23 @@ export default {
     search_by_keyword: '通過關鍵字搜索',
     apply_logs: '應用記錄',
     app_group_delete_tips: '確定刪除該應用分類嗎?',
-    app_group_delete_content: '刪除後，該分類中所有的應用模闆也將被刪除。'
+
+    app_group_delete_content: '刪除後，該分類中所有的應用模板也將被刪除。',
+    panel_position: '儀表板位置',
+    panel_name: '儀表板名稱',
+    dataset_group_position: '數據集分組位置',
+    dataset_group_name: '數據集分組名稱',
+    datasource_info: '數據源信息',
+    datasource: '數據源',
+    dataset_group: '數據集分組',
+    panel: '儀表板',
+    log_delete_tips: '確定刪除該條應用記錄嗎？',
+    log_resource_delete_tips: '刪除相關資源（刪除後不可恢復）'
+
+  },
+
+  logout: {
+    oidc_logout_error: 'OIDC退出失敗，是否繼續退出DataEase？',
+    cas_logout_error: 'CAS服務異常，請聯系管理員！'
   }
 }

frontend/src/lang/zh.js

@@ -911,6 +911,9 @@ export default {
     password_input_error: '原始密码输入错误'
   },
   chart: {
+    solid_color: '纯色',
+    split_gradient: '分离渐变',
+    continuous_gradient: '连续渐变',
     map_center_lost: '图形缺失中心点centroid或center属性，请补全后再试',
     margin_model: '模式',
     margin_model_auto: '自动',
@@ -1438,7 +1441,7 @@ export default {
     params_work: '仅在编辑sql时生效',
     select_year: '选择年',
     sql_variable_limit_1: '1、SQL 变量只能在 WHERE 条件中使用',
-    sql_variable_limit_2: '2、示例：select * from table_name where column_name1=${param_name1} and column_name2 in ${param_name2} ',
+    sql_variable_limit_2: "2、示例：select * from table_name where column_name1='${param_name1}' and column_name2 in '${param_name2}'",
     select_month: '选择月',
     select_date: '选择日期',
     select_time: '选择时间',
@@ -1485,6 +1488,7 @@ export default {
     field_origin_name: '原始名称',
     field_check: '选中',
     update_info: '更新信息',
+    update_records: '更新记录',
     join_view: '数据关联',
     text: '文本',
     time: '时间',
@@ -2363,7 +2367,8 @@ export default {
     channel_email_msg: '邮件提醒',
     channel_wecom_msg: '企业微信',
     channel_dingtalk_msg: '钉钉提醒',
-    channel_lark_msg: '飞书提醒'
+    channel_lark_msg: '飞书提醒',
+    channel_larksuite_msg: '国际飞书'
   },
   denumberrange: {
     label: '数值区间',
@@ -2479,6 +2484,7 @@ export default {
     wecom: '企业微信',
     dingtalk: '钉钉',
     lark: '飞书',
+    larksuite: '国际飞书',
     pixel: '分辨率',
     default: '默认',
     custom: '自定义',
@@ -2621,6 +2627,23 @@ export default {
     search_by_keyword: '通过关键字搜索',
     apply_logs: '应用记录',
     app_group_delete_tips: '确定删除该应用分类吗?',
-    app_group_delete_content: '删除后，该分类中所有的应用模板也将被删除。'
+
+    app_group_delete_content: '删除后，该分类中所有的应用模板也将被删除。',
+    panel_position: '仪表板位置',
+    panel_name: '仪表板名称',
+    dataset_group_position: '数据集分组位置',
+    dataset_group_name: '数据集分组名称',
+    datasource_info: '数据源信息',
+    datasource: '数据源',
+    dataset_group: '数据集分组',
+    panel: '仪表板',
+    log_delete_tips: '确定删除该条应用记录吗？',
+    log_resource_delete_tips: '删除相关资源（删除后不可恢复）'
+
+  },
+
+  logout: {
+    oidc_logout_error: 'OIDC退出失败，是否继续退出DataEase？',
+    cas_logout_error: 'CAS服务异常，请联系管理员！'
   }
 }

frontend/src/store/index.js

@@ -63,6 +63,7 @@ const data = {
     // 当前点击组件
     curComponent: null,
     curCanvasScale: null,
+    curCanvasScaleMap: {},
     curComponentIndex: null,
     // 预览仪表板缩放信息
     previewCanvasScale: {
@@ -95,6 +96,10 @@ const data = {
     mobileLayoutStatus: false,
     // 公共链接状态(当前是否是公共链接打开)
     publicLinkStatus: false,
+    pcTabMatrixCount: {
+      x: 36,
+      y: 36
+    },
     pcMatrixCount: {
       x: 36,
       y: 18
@@ -134,7 +139,20 @@ const data = {
       customAttr: {}
     },
     allViewRender: [],
-    isInEditor: false // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
+    isInEditor: false, // 是否在编辑器中，用于判断复制、粘贴组件时是否生效，如果在编辑器外，则无视这些操作
+    tabCollisionActiveId: null, // 当前在碰撞的Tab组件ID
+    tabMoveInActiveId: null, // 当前在移入的Tab ID
+    tabMoveOutActiveId: null, // 当前在移出的Tab ID
+    tabMoveOutComponentId: null, // 当前在移出Tab de组件ID
+    tabActiveTabNameMap: {}, // 编辑器中 tab组件中的活动tab页,
+    // 鼠标处于drag状态的坐标点
+    mousePointShadowMap: {
+      mouseX: 0,
+      mouseY: 0,
+      width: 0,
+      height: 0
+    }
+
   },
   mutations: {
     ...animation.mutations,
@@ -146,6 +164,10 @@ const data = {
     ...snapshot.mutations,
     ...lock.mutations,
 
+    setTabActiveTabNameMap(state, tabActiveInfo) {
+      state.tabActiveTabNameMap[tabActiveInfo.tabId] = tabActiveInfo.activeTabName
+    },
+
     setClickComponentStatus(state, status) {
       state.isClickComponent = status
     },
@@ -186,8 +208,9 @@ const data = {
       state.curActiveTabInner = curActiveTabInner
     },
 
-    setCurCanvasScale(state, curCanvasScale) {
-      state.curCanvasScale = curCanvasScale
+    setCurCanvasScale(state, curCanvasScaleSelf) {
+      Vue.set(state.curCanvasScaleMap, curCanvasScaleSelf.canvasId, curCanvasScaleSelf)
+      state.curCanvasScale = curCanvasScaleSelf
     },
     setPreviewCanvasScale(state, scale) {
       if (scale.scaleWidth) {
@@ -197,12 +220,13 @@ const data = {
         state.previewCanvasScale.scalePointHeight = scale.scaleHeight
       }
     },
-    setShapeStyle({ curComponent, canvasStyleData, curCanvasScale }, { top, left, width, height, rotate }) {
+    setShapeStyle({ curComponent, canvasStyleData, curCanvasScaleMap }, { top, left, width, height, rotate }) {
+      const curCanvasScaleSelf = curCanvasScaleMap[curComponent.canvasId]
       if (curComponent) {
-        if (top || top === 0) curComponent.style.top = (top / curCanvasScale.scalePointHeight) + 0.0000001
-        if (left || left === 0) curComponent.style.left = (left / curCanvasScale.scalePointWidth) + 0.0000001
-        if (width || width === 0) curComponent.style.width = (width / curCanvasScale.scalePointWidth + 0.0000001)
-        if (height || height === 0) curComponent.style.height = (height / curCanvasScale.scalePointHeight) + 0.0000001
+        if (top || top === 0) curComponent.style.top = (top / curCanvasScaleSelf.scalePointHeight) + 0.0000001
+        if (left || left === 0) curComponent.style.left = (left / curCanvasScaleSelf.scalePointWidth) + 0.0000001
+        if (width || width === 0) curComponent.style.width = (width / curCanvasScaleSelf.scalePointWidth + 0.0000001)
+        if (height || height === 0) curComponent.style.height = (height / curCanvasScaleSelf.scalePointHeight) + 0.0000001
         if (rotate || rotate === 0) curComponent.style.rotate = rotate
       }
     },
@@ -264,6 +288,13 @@ const data = {
       const vValid = valueValid(condition)
       //   1.根据componentId过滤
       const filterComponentId = condition.componentId
+      const canvasId = data.canvasId
+
+      // 过滤时 主画布的过滤组件可以过滤所有的视图
+      const canvasViewIds = state.componentData.filter(item => item.type === 'view' && (canvasId === 'canvas-main' || item.canvasId === canvasId)).map((itemView) => {
+        return itemView.propValue.viewId
+      })
+      const canvasViewIdMatch = (viewId) => canvasViewIds && canvasViewIds.length > 0 && canvasViewIds.includes(viewId)
 
       //   2.循环每个Component 得到 三种情况 a增加b删除c无操作
       const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
@@ -293,7 +324,7 @@ const data = {
         }
         if (!element.type || element.type !== 'view') continue
         const currentFilters = element.filters || []
-        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
+        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId) && canvasViewIdMatch(element.propValue.viewId)
         let j = currentFilters.length
         while (j--) {
           const filter = currentFilters[j]
@@ -460,12 +491,8 @@ const data = {
         }
       }
     },
-
-    deleteComponent(state, index) {
-      if (index === undefined) {
-        index = state.curComponentIndex
-      }
-      state.componentData.splice(index, 1)
+    deleteComponent(state) {
+      this.commit('deleteComponentWithId', state.curComponent.id)
     },
     setLinkageInfo(state, targetLinkageInfo) {
       state.linkageSettingStatus = true
@@ -715,6 +742,30 @@ const data = {
           item.needAdaptor = false
         }
       })
+    },
+    setTabMoveInActiveId(state, tabId) {
+      state.tabMoveInActiveId = tabId
+    },
+    setTabCollisionActiveId(state, tabId) {
+      state.tabCollisionActiveId = tabId
+    },
+    setTabMoveOutActiveId(state, tabId) {
+      state.tabMoveOutActiveId = tabId
+    },
+    setTabMoveOutComponentId(state, componentId) {
+      state.tabMoveOutComponentId = componentId
+    },
+    clearTabMoveInfo(state) {
+      state.tabMoveInActiveId = null
+      state.tabCollisionActiveId = null
+      state.tabMoveOutActiveId = null
+      state.tabMoveOutComponentId = null
+    },
+    setMousePointShadowMap(state, mousePoint) {
+      state.mousePointShadowMap.mouseX = mousePoint.mouseX
+      state.mousePointShadowMap.mouseY = mousePoint.mouseY
+      state.mousePointShadowMap.width = mousePoint.width
+      state.mousePointShadowMap.height = mousePoint.height
     }
   },
   modules: {

frontend/src/store/modules/user.js

@@ -6,6 +6,7 @@ import { getLanguage } from '@/lang/index'
 import Cookies from 'js-cookie'
 import router from '@/router'
 import i18n from '@/lang'
+import { $alert, $confirm } from '@/utils/message'
 const getDefaultState = () => {
   return {
     token: getToken(),
@@ -146,6 +147,28 @@ const actions = {
         resolve(res.data)
       }).catch(error => {
         reject(error)
+        if (error?.response?.data?.message) {
+          if (error.response.data.message === ('oidc_logout_error')) {
+            const message = i18n.t('logout.' + error.response.data.message)
+            $confirm(message, () => {
+              removeToken() // must remove  token  first
+              resetRouter()
+              commit('RESET_STATE')
+              window.location.href = '/'
+            }, {
+              confirmButtonText: i18n.t('commons.confirm')
+            })
+          }
+          if (error.response.data.message === ('cas_logout_error')) {
+            const message = i18n.t('logout.' + error.response.data.message)
+            $alert(message, () => {
+
+            }, {
+              confirmButtonText: i18n.t('commons.confirm'),
+              showClose: false
+            })
+          }
+        }
       })
     })
   },

frontend/src/views/chart/chart/util.js

@@ -3297,3 +3297,5 @@ export function getRemark(chart) {
   }
   return remark
 }
+
+export const quotaViews = ['label', 'richTextView', 'text', 'gauge', 'liquid']

frontend/src/views/chart/components/drag-item/QuotaExtItem.vue

@@ -175,7 +175,10 @@
                   :disabled="disableEditCompare"
                   :command="beforeQuickCalc('setting')"
                 >{{ $t('chart.yoy_label') }}...</el-dropdown-item>
-                <el-dropdown-item :command="beforeQuickCalc('percent')">{{ $t('chart.percent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  :disabled="quotaViews.indexOf(chart.type) > -1"
+                  :command="beforeQuickCalc('percent')"
+                >{{ $t('chart.percent') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
@@ -242,6 +245,7 @@ import { getItemType, getOriginFieldName } from '@/views/chart/components/drag-i
 import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
 import bus from '@/utils/bus'
 import { formatterItem } from '@/views/chart/chart/formatter'
+import { quotaViews } from '@/views/chart/chart/util'
 
 export default {
   name: 'QuotaExtItem',
@@ -277,7 +281,8 @@ export default {
       compareItem: compareItem,
       disableEditCompare: false,
       tagType: 'success',
-      formatterItem: formatterItem
+      formatterItem: formatterItem,
+      quotaViews: quotaViews
     }
   },
   watch: {
@@ -385,6 +390,10 @@ export default {
           this.editCompare()
           break
         case 'percent':
+          // 选择占比，自动将数值格式设置为百分比并保留2位小数
+          this.item.formatterCfg.type = 'percent'
+          this.item.formatterCfg.decimalCount = 2
+
           this.item.compareCalc.type = 'percent'
           this.$emit('onQuotaItemChange', this.item)
           break

frontend/src/views/chart/components/drag-item/QuotaItem.vue

@@ -175,7 +175,10 @@
                   :disabled="disableEditCompare"
                   :command="beforeQuickCalc('setting')"
                 >{{ $t('chart.yoy_label') }}...</el-dropdown-item>
-                <el-dropdown-item :command="beforeQuickCalc('percent')">{{ $t('chart.percent') }}</el-dropdown-item>
+                <el-dropdown-item
+                  :disabled="quotaViews.indexOf(chart.type) > -1"
+                  :command="beforeQuickCalc('percent')"
+                >{{ $t('chart.percent') }}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
@@ -242,6 +245,7 @@ import { getItemType, getOriginFieldName } from '@/views/chart/components/drag-i
 import FieldErrorTips from '@/views/chart/components/drag-item/components/FieldErrorTips'
 import bus from '@/utils/bus'
 import { formatterItem } from '@/views/chart/chart/formatter'
+import { quotaViews } from '@/views/chart/chart/util'
 
 export default {
   name: 'QuotaItem',
@@ -277,7 +281,8 @@ export default {
       compareItem: compareItem,
       disableEditCompare: false,
       tagType: 'success',
-      formatterItem: formatterItem
+      formatterItem: formatterItem,
+      quotaViews: quotaViews
     }
   },
   watch: {
@@ -382,6 +387,10 @@ export default {
           this.editCompare()
           break
         case 'percent':
+          // 选择占比，自动将数值格式设置为百分比并保留2位小数
+          this.item.formatterCfg.type = 'percent'
+          this.item.formatterCfg.decimalCount = 2
+
           this.item.compareCalc.type = 'percent'
           this.$emit('onQuotaItemChange', this.item)
           break

frontend/src/views/chart/components/senior/AssistLine.vue

@@ -51,7 +51,7 @@
       :title="$t('chart.assist_line')"
       :visible="editLineDialog"
       :show-close="false"
-      width="70%"
+      width="1000px"
       class="dialog-css"
     >
       <assist-line-edit

frontend/src/views/chart/components/senior/Threshold.vue

@@ -243,7 +243,7 @@
       :title="$t('chart.threshold')"
       :visible="editLabelThresholdDialog"
       :show-close="false"
-      width="50%"
+      width="800px"
       class="dialog-css"
       append-to-body
     >
@@ -274,7 +274,7 @@
       :title="$t('chart.threshold')"
       :visible="editTableThresholdDialog"
       :show-close="false"
-      width="50%"
+      width="800px"
       class="dialog-css"
       append-to-body
     >

frontend/src/views/chart/components/senior/dialog/AssistLineEdit.vue

@@ -17,6 +17,7 @@
           <el-input
             v-model="item.name"
             class="value-item"
+            style="width: 90% !important;"
             :placeholder="$t('chart.name')"
             size="mini"
             clearable
@@ -97,6 +98,7 @@
             v-model="item.summary"
             size="mini"
             class="select-item"
+            style="margin-left: 10px;"
             :placeholder="$t('chart.aggregation')"
             @change="changeAssistLine"
           >

frontend/src/views/chart/components/senior/dialog/TableThresholdEdit.vue

@@ -100,6 +100,7 @@
               v-show="!item.term.includes('null') && !item.term.includes('empty') && item.term !== 'between'"
               v-model="item.value"
               class="value-item"
+              style="margin-left: 10px;"
               :placeholder="$t('chart.drag_block_label_value')"
               size="mini"
               clearable

frontend/src/views/chart/components/shape-attr/SizeSelector.vue

@@ -541,97 +541,99 @@
             @change="changeBarSizeCase('dimensionShow')"
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontSize')"
-          :label="$t('chart.dimension_font_size')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionFontSize"
-            :placeholder="$t('chart.dimension_font_size')"
-            @change="changeBarSizeCase('dimensionFontSize')"
+        <div v-show="sizeForm.dimensionShow">
+          <el-form-item
+            v-show="showProperty('dimensionFontSize')"
+            :label="$t('chart.dimension_font_size')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontFamily')"
-          :label="$t('chart.dimension_font_family')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionFontFamily"
-            :placeholder="$t('chart.dimension_font_family')"
-            @change="changeBarSizeCase('dimensionFontFamily')"
+            <el-select
+              v-model="sizeForm.dimensionFontSize"
+              :placeholder="$t('chart.dimension_font_size')"
+              @change="changeBarSizeCase('dimensionFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontFamily')"
+            :label="$t('chart.dimension_font_family')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontFamily"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontStyle')"
-          :label="$t('chart.dimension_text_style')"
-          class="form-item"
-        >
-          <el-checkbox
-            v-model="sizeForm.dimensionFontIsItalic"
-            @change="changeBarSizeCase('dimensionFontIsItalic')"
-          >{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox
-            v-model="sizeForm.dimensionFontIsBolder"
-            @change="changeBarSizeCase('dimensionFontIsBolder')"
-          >{{ $t('chart.bolder') }}</el-checkbox>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionLetterSpace')"
-          :label="$t('chart.dimension_letter_space')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionLetterSpace"
-            :placeholder="$t('chart.dimension_letter_space')"
-            @change="changeBarSizeCase('dimensionLetterSpace')"
+            <el-select
+              v-model="sizeForm.dimensionFontFamily"
+              :placeholder="$t('chart.dimension_font_family')"
+              @change="changeBarSizeCase('dimensionFontFamily')"
+            >
+              <el-option
+                v-for="option in fontFamily"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontStyle')"
+            :label="$t('chart.dimension_text_style')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontLetterSpace"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
+            <el-checkbox
+              v-model="sizeForm.dimensionFontIsItalic"
+              @change="changeBarSizeCase('dimensionFontIsItalic')"
+            >{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox
+              v-model="sizeForm.dimensionFontIsBolder"
+              @change="changeBarSizeCase('dimensionFontIsBolder')"
+            >{{ $t('chart.bolder') }}</el-checkbox>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionLetterSpace')"
+            :label="$t('chart.dimension_letter_space')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.dimensionLetterSpace"
+              :placeholder="$t('chart.dimension_letter_space')"
+              @change="changeBarSizeCase('dimensionLetterSpace')"
+            >
+              <el-option
+                v-for="option in fontLetterSpace"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontShadow')"
+            :label="$t('chart.font_shadow')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.dimensionFontShadow"
+              @change="changeBarSizeCase('dimensionFontShadow')"
+            >{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
+          <el-divider v-if="showProperty('spaceSplit')" />
+          <el-form-item
+            v-show="showProperty('spaceSplit')"
+            :label="$t('chart.space_split')"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="sizeForm.spaceSplit"
+              :min="0"
+              size="mini"
+              @change="changeBarSizeCase('spaceSplit')"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontShadow')"
-          :label="$t('chart.font_shadow')"
-          class="form-item"
-        >
-          <el-checkbox
-            v-model="sizeForm.dimensionFontShadow"
-            @change="changeBarSizeCase('dimensionFontShadow')"
-          >{{ $t('chart.font_shadow') }}</el-checkbox>
-        </el-form-item>
-        <el-divider v-if="showProperty('spaceSplit')" />
-        <el-form-item
-          v-show="showProperty('spaceSplit')"
-          :label="$t('chart.space_split')"
-          class="form-item"
-        >
-          <el-input-number
-            v-model="sizeForm.spaceSplit"
-            :min="0"
-            size="mini"
-            @change="changeBarSizeCase('spaceSplit')"
-          />
-        </el-form-item>
+          </el-form-item>
+        </div>
         <!--text&label-end-->
         <!--scatter-begin-->
         <el-form-item

frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue

@@ -892,97 +892,99 @@
             @change="changeBarSizeCase('dimensionShow')"
           >{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontSize')"
-          :label="$t('chart.dimension_font_size')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionFontSize"
-            :placeholder="$t('chart.dimension_font_size')"
-            @change="changeBarSizeCase('dimensionFontSize')"
+        <div v-show="sizeForm.dimensionShow">
+          <el-form-item
+            v-show="showProperty('dimensionFontSize')"
+            :label="$t('chart.dimension_font_size')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontSize"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontFamily')"
-          :label="$t('chart.dimension_font_family')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionFontFamily"
-            :placeholder="$t('chart.dimension_font_family')"
-            @change="changeBarSizeCase('dimensionFontFamily')"
+            <el-select
+              v-model="sizeForm.dimensionFontSize"
+              :placeholder="$t('chart.dimension_font_size')"
+              @change="changeBarSizeCase('dimensionFontSize')"
+            >
+              <el-option
+                v-for="option in fontSize"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontFamily')"
+            :label="$t('chart.dimension_font_family')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontFamily"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontStyle')"
-          :label="$t('chart.dimension_text_style')"
-          class="form-item"
-        >
-          <el-checkbox
-            v-model="sizeForm.dimensionFontIsItalic"
-            @change="changeBarSizeCase('dimensionFontIsItalic')"
-          >{{ $t('chart.italic') }}</el-checkbox>
-          <el-checkbox
-            v-model="sizeForm.dimensionFontIsBolder"
-            @change="changeBarSizeCase('dimensionFontIsBolder')"
-          >{{ $t('chart.bolder') }}</el-checkbox>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionLetterSpace')"
-          :label="$t('chart.dimension_letter_space')"
-          class="form-item"
-        >
-          <el-select
-            v-model="sizeForm.dimensionLetterSpace"
-            :placeholder="$t('chart.dimension_letter_space')"
-            @change="changeBarSizeCase('dimensionLetterSpace')"
+            <el-select
+              v-model="sizeForm.dimensionFontFamily"
+              :placeholder="$t('chart.dimension_font_family')"
+              @change="changeBarSizeCase('dimensionFontFamily')"
+            >
+              <el-option
+                v-for="option in fontFamily"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontStyle')"
+            :label="$t('chart.dimension_text_style')"
+            class="form-item"
           >
-            <el-option
-              v-for="option in fontLetterSpace"
-              :key="option.value"
-              :label="option.name"
-              :value="option.value"
+            <el-checkbox
+              v-model="sizeForm.dimensionFontIsItalic"
+              @change="changeBarSizeCase('dimensionFontIsItalic')"
+            >{{ $t('chart.italic') }}</el-checkbox>
+            <el-checkbox
+              v-model="sizeForm.dimensionFontIsBolder"
+              @change="changeBarSizeCase('dimensionFontIsBolder')"
+            >{{ $t('chart.bolder') }}</el-checkbox>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionLetterSpace')"
+            :label="$t('chart.dimension_letter_space')"
+            class="form-item"
+          >
+            <el-select
+              v-model="sizeForm.dimensionLetterSpace"
+              :placeholder="$t('chart.dimension_letter_space')"
+              @change="changeBarSizeCase('dimensionLetterSpace')"
+            >
+              <el-option
+                v-for="option in fontLetterSpace"
+                :key="option.value"
+                :label="option.name"
+                :value="option.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-show="showProperty('dimensionFontShadow')"
+            :label="$t('chart.font_shadow')"
+            class="form-item"
+          >
+            <el-checkbox
+              v-model="sizeForm.dimensionFontShadow"
+              @change="changeBarSizeCase('dimensionFontShadow')"
+            >{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
+          <el-divider v-if="showProperty('spaceSplit')" />
+          <el-form-item
+            v-show="showProperty('spaceSplit')"
+            :label="$t('chart.space_split')"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="sizeForm.spaceSplit"
+              :min="0"
+              size="mini"
+              @change="changeBarSizeCase('spaceSplit')"
             />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-show="showProperty('dimensionFontShadow')"
-          :label="$t('chart.font_shadow')"
-          class="form-item"
-        >
-          <el-checkbox
-            v-model="sizeForm.dimensionFontShadow"
-            @change="changeBarSizeCase('dimensionFontShadow')"
-          >{{ $t('chart.font_shadow') }}</el-checkbox>
-        </el-form-item>
-        <el-divider v-if="showProperty('spaceSplit')" />
-        <el-form-item
-          v-show="showProperty('spaceSplit')"
-          :label="$t('chart.space_split')"
-          class="form-item"
-        >
-          <el-input-number
-            v-model="sizeForm.spaceSplit"
-            :min="0"
-            size="mini"
-            @change="changeBarSizeCase('spaceSplit')"
-          />
-        </el-form-item>
+          </el-form-item>
+        </div>
         <!--text&label-end-->
         <!--scatter-begin-->
         <el-form-item

frontend/src/views/chart/view/ChartEdit.vue

@@ -1589,6 +1589,7 @@ import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
 import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
 import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
 import { equalsAny } from '@/utils/StringUtils'
+import { quotaViews } from '@/views/chart/chart/util'
 
 export default {
   name: 'ChartEdit',
@@ -1748,7 +1749,6 @@ export default {
       tabActive: 'data',
       currentAreaCode: '',
       showStackCustomSort: false
-
     }
   },
   computed: {
@@ -2094,6 +2094,10 @@ export default {
         if (!ele.compareCalc) {
           ele.compareCalc = compareItem
         }
+        if (quotaViews.indexOf(view.type) > -1) {
+          ele.compareCalc = compareItem
+          ele.formatterCfg.type = 'auto'
+        }
       })
       if (view.type === 'chart-mix') {
         view.yaxisExt.forEach(function(ele) {
@@ -2121,6 +2125,10 @@ export default {
           if (!ele.compareCalc) {
             ele.compareCalc = compareItem
           }
+          if (quotaViews.indexOf(view.type) > -1) {
+            ele.compareCalc = compareItem
+            ele.formatterCfg.type = 'auto'
+          }
         })
       }
       view.extStack.forEach(function(ele) {
@@ -2167,9 +2175,6 @@ export default {
       if (view.type === 'line' && trigger === 'chart') {
         view.customAttr.size.lineArea = false
       }
-      if (view.type === 'treemap' && trigger === 'chart') {
-        view.customAttr.label.show = true
-      }
       if (view.type === 'liquid' ||
         (view.type.includes('table') && view.render === 'echarts') ||
         view.type.includes('text') ||

frontend/src/views/chart/view/ChartStyle.vue

@@ -18,7 +18,7 @@
       style="overflow:auto;border-right: 1px solid #e6e6e6;height: 100%;width: 100%;padding-right: 6px"
       class="attr-style theme-border-class"
     >
-      <el-row>
+      <el-row class="de-collapse-style">
         <span class="padding-lr">{{ $t('chart.shape_attr') }}</span>
         <el-collapse
           v-model="attrActiveNames"
@@ -475,6 +475,15 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.de-collapse-style {
+  .el-collapse-item__header {
+    height: 34px !important;
+    line-height: 34px !important;
+    padding: 0 0 0 6px !important;
+    font-size: 12px !important;
+    font-weight: 400 !important;
+  }
+}
   .padding-lr {
     padding: 0 6px;
   }

frontend/src/views/dataset/add/AddExcel.vue

@@ -374,8 +374,8 @@ export default {
         this.sheetObj = data
         this.fields = data.fields
         this.jsonArray = data.jsonArray
-        const data = this.jsonArray
-        this.$refs.plxTable.reloadData(data)
+        const dataList = this.jsonArray
+        this.$refs.plxTable.reloadData(dataList)
       }
     },
     handleCommand(type, field) {

frontend/src/views/dataset/add/AddSQL.vue

@@ -73,7 +73,6 @@
             {{ $t('deDataset.data_reference') }}
           </el-button>
           <el-button
-            v-if="mode === '1'"
             type="text"
             size="small"
             style="color: #1f2329"
@@ -263,7 +262,7 @@
             :title="dialogTitle"
             :visible.sync="showVariableMgm"
             custom-class="de-user-drawer sql-dataset-drawer"
-            size="840px"
+            size="870px"
             direction="rtl"
           >
             <div class="content">
@@ -703,6 +702,7 @@ export default {
       post('/dataset/table/sqlPreview', {
         dataSourceId: this.dataSource,
         type: 'sql',
+        mode: parseInt(this.mode),
         sqlVariableDetails: JSON.stringify(this.variables),
         info: JSON.stringify({
           sql: Base64.encode(this.sql.trim()),
@@ -868,11 +868,11 @@ export default {
   }
   .content {
     height: 62px;
-    width: 792px;
+    width: 822px;
     border-radius: 4px;
     background: #e1eaff;
     position: relative;
-    padding: 9px 19px 9px 40px;
+    padding: 9px 0 9px 40px;
     font-family: PingFang SC;
     font-size: 14px;
     font-weight: 400;
@@ -1048,7 +1048,7 @@ export default {
     }
 
     .table-sql {
-      height: calc(100% - 64px);
+      height: calc(100% - 54px);
       padding: 18px 25px;
       overflow-y: auto;
       box-sizing: border-box;

frontend/src/views/dataset/common/datasetTree.vue

@@ -60,6 +60,16 @@
                 :class="`ds-icon-${data.modelInnerType}`"
               />
             </span>
+            <span v-if="['db', 'sql'].includes(data.modelInnerType)">
+              <span
+                v-if="data.mode === 0"
+                style="margin-left: 6px"
+              ><i class="el-icon-s-operation" /></span>
+              <span
+                v-if="data.mode === 1"
+                style="margin-left: 6px"
+              ><i class="el-icon-alarm-clock" /></span>
+            </span>
             <span
               style="
                 margin-left: 6px;
@@ -247,16 +257,18 @@ export default {
           modelInnerTypeArray: this.customType
         },
         !userCache
-      ).then((res) => {
-        if (cache) {
-          localStorage.setItem('dataset-tree', JSON.stringify(res.data))
-        }
-        if (!userCache) {
-          this.treeData = res.data
-        }
-      }).finally(() => {
-        this.loading = false
-      })
+      )
+        .then((res) => {
+          if (cache) {
+            localStorage.setItem('dataset-tree', JSON.stringify(res.data))
+          }
+          if (!userCache) {
+            this.treeData = res.data
+          }
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
     nodeClick(data, node) {
       if (data.modelInnerType !== 'group') {

frontend/src/views/dataset/data/UpdateRecords.vue

@@ -0,0 +1,976 @@
+<template>
+  <el-col>
+    <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-row style="margin-top: 10px;">
+      <el-table
+        size="mini"
+        :data="taskLogData"
+        border
+        :height="height"
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="name"
+          :label="$t('dataset.task_name')"
+        />
+        <el-table-column
+          prop="startTime"
+          :label="$t('dataset.start_time')"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.startTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="endTime"
+          :label="$t('dataset.end_time')"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.endTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          prop="status"
+          :label="$t('dataset.status')"
+        >
+          <template slot-scope="scope">
+            <span
+              v-if="scope.row.status === 'Completed'"
+              style="color: green"
+            >{{ $t('dataset.completed') }}</span>
+            <span
+              v-if="scope.row.status === 'Underway'"
+              class="blue-color"
+            >
+              <i class="el-icon-loading" />
+              {{ $t('dataset.underway') }}
+            </span>
+            <span
+              v-if="scope.row.status === 'Error'"
+              style="color: red"
+            >
+              <el-link
+                type="danger"
+                style="font-size: 12px"
+                @click="showErrorMassage(scope.row.info)"
+              >{{ $t('dataset.error') }}</el-link>
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row style="margin-top: 10px;text-align: right;">
+        <el-pagination
+          :current-page="page.currentPage"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="page.pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="page.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-row>
+    </el-row>
+
+    <el-dialog
+      v-dialogDrag
+      :title="$t('dataset.detail')"
+      :visible="show_error_massage"
+      :show-close="false"
+      width="50%"
+      class="dialog-css"
+    >
+      <span class="err-msg">{{ error_massage }}
+      </span>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="show_error_massage = false"
+        >{{ $t('dataset.close') }}</el-button>
+      </span>
+    </el-dialog>
+
+    <el-dialog
+      v-dialogDrag
+      :title="table.name+' '+$t('dataset.update_setting')"
+      :visible="update_setting"
+      :show-close="false"
+      width="50%"
+      class="dialog-css"
+    >
+      <el-dialog
+        v-dialogDrag
+        :title="update_task_dialog_title"
+        :visible="update_task"
+        :show-close="false"
+        width="50%"
+        class="dialog-css"
+        append-to-body
+      >
+        <el-col>
+          <el-form
+            ref="taskForm"
+            :form="taskForm"
+            :model="taskForm"
+            label-width="100px"
+            size="mini"
+            :rules="taskFormRules"
+          >
+            <el-form-item
+              :label="$t('dataset.task_name')"
+              prop="name"
+            >
+              <el-input
+                v-model="taskForm.name"
+                size="mini"
+                style="width: 50%"
+                :placeholder="$t('dataset.task_name')"
+              />
+            </el-form-item>
+            <el-form-item
+              :label="$t('dataset.update_type')"
+              prop="type"
+            >
+              <el-select
+                v-model="taskForm.type"
+                size="mini"
+              >
+                <el-option
+                  :label="$t('dataset.all_scope')"
+                  value="all_scope"
+                />
+                <el-option
+                  :label="$t('dataset.add_scope')"
+                  value="add_scope"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dataset.execute_rate')"
+              prop="rate"
+            >
+              <el-select
+                v-model="taskForm.rate"
+                size="mini"
+                @change="onRateChange"
+              >
+                <el-option
+                  :label="$t('dataset.execute_once')"
+                  value="SIMPLE"
+                />
+                <el-option
+                  :label="$t('dataset.simple_cron')"
+                  value="SIMPLE_CRON"
+                />
+                <el-option
+                  :label="$t('dataset.cron_config')"
+                  value="CRON"
+                />
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              v-if="taskForm.rate === 'CRON'"
+              label=""
+            >
+              <el-popover v-model="cronEdit">
+                <cron
+                  v-model="taskForm.cron"
+                  @close="cronEdit = false"
+                />
+                <el-input
+                  slot="reference"
+                  v-model="taskForm.cron"
+                  size="mini"
+                  style="width: 50%"
+                  @click="cronEdit = true"
+                />
+              </el-popover>
+            </el-form-item>
+
+            <el-form-item
+              v-if="taskForm.rate === 'SIMPLE_CRON'"
+              label=""
+            >
+              <el-form :inline="true">
+                <el-form-item :label="$t('cron.every')">
+                  <el-input
+                    v-model="taskForm.extraData.simple_cron_value"
+                    size="mini"
+                    type="number"
+                    min="1"
+                    @change="onSimpleCronChange()"
+                  />
+                </el-form-item>
+
+                <el-form-item class="form-item">
+                  <el-select
+                    v-model="taskForm.extraData.simple_cron_type"
+                    filterable
+                    size="mini"
+                    @change="onSimpleCronChange()"
+                  >
+                    <el-option
+                      :label="$t('cron.minute_default')"
+                      value="minute"
+                    />
+                    <el-option
+                      :label="$t('cron.hour_default')"
+                      value="hour"
+                    />
+                    <el-option
+                      :label="$t('cron.day_default')"
+                      value="day"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  class="form-item"
+                  :label="$t('cron.every_exec')"
+                />
+              </el-form>
+            </el-form-item>
+
+            <el-form-item
+              v-if="taskForm.rate !== 'SIMPLE'"
+              :label="$t('dataset.start_time')"
+              prop="startTime"
+            >
+              <el-date-picker
+                v-model="taskForm.startTime"
+                type="datetime"
+                :placeholder="$t('dataset.select_data_time')"
+                size="mini"
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="taskForm.rate !== 'SIMPLE'"
+              :label="$t('dataset.end_time')"
+              prop="end"
+            >
+              <el-select
+                v-model="taskForm.end"
+                size="mini"
+              >
+                <el-option
+                  :label="$t('dataset.no_limit')"
+                  value="0"
+                />
+                <el-option
+                  :label="$t('dataset.set_end_time')"
+                  value="1"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="taskForm.end === '1'"
+              label=""
+            >
+              <el-date-picker
+                v-model="taskForm.endTime"
+                type="datetime"
+                :placeholder="$t('dataset.select_data_time')"
+                size="mini"
+              />
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <div
+          slot="footer"
+          class="dialog-footer"
+        >
+          <el-button
+            class="dialog_cancel_button"
+            size="mini"
+            @click="closeTask"
+          >{{ $t('dataset.cancel') }}</el-button>
+          <el-button
+            type="primary"
+            size="mini"
+            @click="saveTask(taskForm)"
+          >{{ $t('dataset.confirm') }}</el-button>
+        </div>
+      </el-dialog>
+      <el-row>
+        <el-button
+          icon="el-icon-plus"
+          size="mini"
+          @click="addTask(undefined)"
+        >
+          {{ $t('dataset.add_task') }}
+        </el-button>
+      </el-row>
+      <el-row style="margin-top: 10px;">
+        <el-table
+          border
+          size="mini"
+          :data="taskData"
+          style="width: 100%"
+          height="240"
+        >
+          <el-table-column
+            prop="name"
+            :label="$t('dataset.task_name')"
+          />
+          <el-table-column
+            prop="rate"
+            :label="$t('dataset.execute_rate')"
+          >
+            <template slot-scope="scope">
+              <span v-if="scope.row.rate === 'SIMPLE'">{{ $t('dataset.execute_once') }}</span>
+              <span v-if="scope.row.rate === 'SIMPLE_CRON'">{{ $t('dataset.simple_cron') }}</span>
+              <span v-if="scope.row.rate === 'CRON'">{{ $t('dataset.cron_config') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="status"
+            :label="$t('dataset.task.task_status')"
+          >
+            <template slot-scope="scope">
+              <span
+                v-if="scope.row.status === 'Underway'"
+                style="color: green"
+              >
+                <el-link
+                  type="success"
+                  style="font-size: 12px"
+                  @click="changeTaskStatus(scope.row)"
+                >{{ $t('dataset.task.underway') }}</el-link>
+              </span>
+              <span v-if="scope.row.status === 'Stopped'">
+                <div style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
+              </span>
+              <span
+                v-if="scope.row.status === 'Pending'"
+                class="blue-color"
+              >
+                <el-link
+                  type="primary"
+                  style="font-size: 12px"
+                  @click="changeTaskStatus(scope.row)"
+                >{{ $t('dataset.task.pending') }}</el-link>
+              </span>
+              <span
+                v-if="scope.row.status === 'Exec'"
+                class="blue-color"
+              >
+                <i class="el-icon-loading" />
+                {{ $t('dataset.underway') }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="$t('dataset.operate')"
+          >
+            <template
+              slot-scope="scope"
+            >
+              <el-button
+                size="mini"
+                type="primary"
+                icon="el-icon-edit"
+                circle
+                :disabled="scope.row.rate === 'SIMPLE' || scope.row.status === 'Stopped'"
+                @click="addTask(scope.row)"
+              />
+              <el-button
+                size="mini"
+                type="danger"
+                icon="el-icon-delete"
+                circle
+                @click="deleteTask(scope.row)"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+
+      <el-divider />
+
+      <el-row
+        v-if="table.type !== 'api'"
+        style="height: 26px;"
+      >
+        <el-row>
+          <el-col :span="4"><span>{{ $t('dataset.incremental_update_type') }}:</span></el-col>
+          <el-col :span="18">
+            <el-radio-group
+              v-model="incrementalUpdateType"
+              size="mini"
+              @change="incrementalUpdateTypeChange"
+            >
+              <el-radio label="incrementalAdd">{{ $t('dataset.incremental_add') }}</el-radio>
+              <el-radio label="incrementalDelete">{{ $t('dataset.incremental_delete') }}</el-radio>
+            </el-radio-group>
+          </el-col>
+        </el-row>
+      </el-row>
+
+      <el-row
+        v-if="table.type !== 'api'"
+        style="height: 26px;"
+      >
+        <el-row>
+          <el-col
+            :span="4"
+            style="height: 26px;"
+          ><span style="display: inline-block;height: 26px;line-height: 26px;">{{ $t('dataset.param') }}:</span></el-col>
+          <el-col :span="18">
+            <el-button
+              type="text"
+              size="mini"
+              @click="insertParamToCodeMirror('${__last_update_time__}')"
+            >{{ $t('dataset.last_update_time') }}</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              @click="insertParamToCodeMirror('${__current_update_time__}')"
+            >{{ $t('dataset.current_update_time') }}</el-button>
+          </el-col>
+        </el-row>
+      </el-row>
+
+      <el-row v-if="table.type !== 'api'">
+        <el-col style="min-width: 200px;">
+          <codemirror
+            ref="myCm"
+            v-model="sql"
+            class="codemirror"
+            :options="sqlOption"
+            @ready="onCmReady"
+            @focus="onCmFocus"
+            @input="onCmCodeChange"
+          />
+        </el-col>
+      </el-row>
+
+      <div
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          size="mini"
+          @click="update_setting = false"
+        >{{ $t('dataset.close') }}</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          @click="saveIncrementalConfig"
+        >{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+  </el-col>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/solarized.css'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/addon/selection/active-line.js'
+import 'codemirror/addon/edit/closebrackets.js'
+import 'codemirror/mode/clike/clike.js'
+import 'codemirror/addon/edit/matchbrackets.js'
+import 'codemirror/addon/comment/comment.js'
+import 'codemirror/addon/dialog/dialog.js'
+import 'codemirror/addon/dialog/dialog.css'
+import 'codemirror/addon/search/searchcursor.js'
+import 'codemirror/addon/search/search.js'
+import 'codemirror/keymap/emacs.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/sql-hint'
+import 'codemirror/addon/hint/show-hint'
+import cron from '@/components/cron/cron'
+import { hasDataPermission } from '@/utils/permission'
+import { engineMode } from '@/api/system/engine'
+export default {
+  name: 'UpdateInfo',
+  components: { codemirror, cron },
+  props: {
+    table: {
+      type: Object,
+      default: null
+    },
+    param: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      height: 500,
+      update_setting: false,
+      update_task: false,
+      show_error_massage: false,
+      update_task_dialog_title: '',
+      error_massage: '',
+      taskForm: {
+        name: '',
+        type: 'all_scope',
+        startTime: '',
+        rate: 'SIMPLE',
+        cron: '',
+        endTime: '',
+        end: '0',
+        extraData: {
+          simple_cron_type: 'hour',
+          simple_cron_value: 1
+        }
+      },
+      page: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      },
+      taskLogData: [],
+      taskData: [],
+      taskFormRules: {
+        name: [
+          { required: true, message: this.$t('dataset.required'), trigger: 'change' },
+          { min: 2, max: 50, message: this.$t('datasource.input_limit_2_50', [2, 50]), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
+        ],
+        rate: [
+          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
+        ],
+        end: [
+          { required: true, message: this.$t('dataset.required'), trigger: 'change' }
+        ]
+      },
+      sqlOption: {
+        tabSize: 2,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: 'text/x-sql',
+        theme: 'solarized',
+        hintOptions: { // 自定义提示选项
+          completeSingle: false // 当匹配只有一项的时候是否自动补全
+        }
+      },
+      incrementalUpdateType: 'incrementalAdd',
+      sql: '',
+      incrementalConfig: {},
+      cronEdit: false,
+      lang: this.$store.getters.language === 'en_US' ? 'en' : 'cn',
+      taskLastRequestComplete: true,
+      taskLogLastRequestComplete: true,
+      enableUpdate: true,
+      engineMode: 'local'
+    }
+  },
+  computed: {
+    codemirror() {
+      return this.$refs.myCm.codemirror
+    }
+  },
+  watch: {
+    table: {
+      handler() {
+        if (hasDataPermission('manage', this.param.privileges)) {
+          this.listTask()
+        }
+        this.listTaskLog()
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.calHeight()
+  },
+  created() {
+    this.taskLogTimer = setInterval(() => {
+      if (!this.taskLogLastRequestComplete) {
+        return
+      } else {
+        this.taskLogLastRequestComplete = false
+      }
+      this.listTaskLog(false)
+    }, 10000)
+
+    this.taskTimer = setInterval(() => {
+      if (!this.taskLastRequestComplete) {
+        return
+      } else {
+        this.taskLastRequestComplete = false
+      }
+      if (hasDataPermission('manage', this.param.privileges)) {
+        this.listTask(false)
+      }
+    }, 10000)
+
+    engineMode().then(res => {
+      this.engineMode = res.data
+      if (this.engineMode === 'simple') {
+        if (this.table.type === 'api') {
+          this.enableUpdate = true
+        } else {
+          this.enableUpdate = false
+        }
+      } else {
+        if (this.table.type === 'excel') {
+          this.enableUpdate = false
+        } else {
+          this.enableUpdate = true
+        }
+      }
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.taskTimer)
+    clearInterval(this.taskLogTimer)
+  },
+  methods: {
+    calHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
+      }, 10)
+    },
+    cellStyle({ row, column }) {
+      // 状态列字体颜色
+      if (row.status === 'Underway' && column === 'status') {
+        return 'color: var(--Main, #0000ff)'
+      } else if (row.status === 'Completed' && column === 'status') {
+        return 'color: green'
+      } else if (row.status === 'Error' && column === 'status') {
+        return 'color: red'
+      }
+    },
+    incrementalUpdateTypeChange: function() {
+      if (this.incrementalUpdateType === 'incrementalAdd') {
+        if (this.sql) {
+          this.incrementalConfig.incrementalDelete = this.sql
+        } else {
+          this.incrementalConfig.incrementalDelete = ''
+        }
+        if (this.incrementalConfig.incrementalAdd) {
+          this.sql = this.incrementalConfig.incrementalAdd
+        } else {
+          this.sql = ''
+        }
+      }
+
+      if (this.incrementalUpdateType === 'incrementalDelete') {
+        if (this.sql) {
+          this.incrementalConfig.incrementalAdd = this.sql
+        } else {
+          this.incrementalConfig.incrementalAdd = ''
+        }
+        if (this.incrementalConfig.incrementalDelete) {
+          this.sql = this.incrementalConfig.incrementalDelete
+        } else {
+          this.sql = ''
+        }
+      }
+    },
+    showConfig() {
+      this.update_setting = true
+      this.listTask()
+      this.getIncrementalConfig()
+    },
+    refreshLog() {
+      this.listTaskLog()
+    },
+    showErrorMassage(massage) {
+      this.show_error_massage = true
+      this.error_massage = massage
+    },
+    addTask(task) {
+      if (!task) {
+        this.resetTaskForm()
+        this.taskForm.name = this.table.name + ' ' + this.$t('dataset.task_update')
+        this.taskForm.startTime = new Date()
+        this.update_task_dialog_title = this.$t('dataset.task_add_title')
+      } else {
+        this.taskForm = JSON.parse(JSON.stringify(task))
+        this.taskForm.extraData = JSON.parse(this.taskForm.extraData)
+        this.update_task_dialog_title = this.$t('dataset.task_edit_title')
+      }
+      this.update_task = true
+    },
+    listTask(loading = true) {
+      post('/dataset/task/list', { tableId: this.table.id }, loading).then(response => {
+        this.taskData = response.data
+        this.taskLastRequestComplete = true
+      }).catch(() => {
+        this.taskLastRequestComplete = true
+      })
+    },
+    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) {
+          if (this.incrementalUpdateType === 'incrementalAdd') {
+            this.incrementalConfig.incrementalAdd = this.sql
+          } else {
+            this.incrementalConfig.incrementalDelete = this.sql
+          }
+          this.incrementalConfig.tableId = this.table.id
+          task.startTime = new Date(task.startTime).getTime()
+          task.endTime = new Date(task.endTime).getTime()
+          task.tableId = this.table.id
+          const form = JSON.parse(JSON.stringify(task))
+          form.extraData = JSON.stringify(form.extraData)
+          const dataSetTaskRequest = {
+            datasetTableTask: form,
+            datasetTableIncrementalConfig: this.incrementalConfig
+          }
+          post('/dataset/task/save', dataSetTaskRequest).then(response => {
+            this.$message({
+              message: this.$t('dataset.save_success'),
+              type: 'success',
+              showClose: true
+            })
+            this.update_task = false
+            this.resetTaskForm()
+            this.listTask()
+            this.listTaskLog()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    changeTaskStatus(task) {
+      const param = task
+      param.status = task.status === 'Underway' ? 'Pending' : 'Underway'
+      post('/dataset/task/updateStatus', task).then(response => {
+        task.status = param.status
+        this.$message({
+          message: this.$t('dataset.task.change_success'),
+          type: 'success',
+          showClose: true
+        })
+      })
+    },
+    deleteTask(task) {
+      this.$confirm(this.$t('dataset.confirm_delete'), this.$t('dataset.tips'), {
+        confirmButtonText: this.$t('dataset.confirm'),
+        cancelButtonText: this.$t('dataset.cancel'),
+        type: 'warning'
+      }).then(() => {
+        post('/dataset/task/delete/' + task.id, null).then(response => {
+          this.$message({
+            message: this.$t('dataset.delete_success'),
+            type: 'success',
+            showClose: true
+          })
+          this.resetTaskForm()
+          this.listTask()
+          this.listTaskLog()
+        })
+      }).catch(() => {
+      })
+    },
+    closeTask() {
+      this.update_task = false
+      this.resetTaskForm()
+    },
+    onSimpleCronChange() {
+      if (this.taskForm.extraData.simple_cron_type === 'minute') {
+        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 59) {
+          this.$message({ message: this.$t('cron.minute_limit'), type: 'warning', showClose: true })
+          this.taskForm.extraData.simple_cron_value = 59
+        }
+        this.taskForm.cron = '0 0/' + this.taskForm.extraData.simple_cron_value + ' * * * ? *'
+        return
+      }
+      if (this.taskForm.extraData.simple_cron_type === 'hour') {
+        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 23) {
+          this.$message({ message: this.$t('cron.hour_limit'), type: 'warning', showClose: true })
+          this.taskForm.extraData.simple_cron_value = 23
+        }
+        this.taskForm.cron = '0 0 0/' + this.taskForm.extraData.simple_cron_value + ' * * ? *'
+        return
+      }
+      if (this.taskForm.extraData.simple_cron_type === 'day') {
+        if (this.taskForm.extraData.simple_cron_value < 1 || this.taskForm.extraData.simple_cron_value > 31) {
+          this.$message({ message: this.$t('cron.day_limit'), type: 'warning', showClose: true })
+          this.taskForm.extraData.simple_cron_value = 31
+        }
+        this.taskForm.cron = '0 0 0 1/' + this.taskForm.extraData.simple_cron_value + ' * ? *'
+        return
+      }
+    },
+    onRateChange() {
+      if (this.taskForm.rate === 'SIMPLE') {
+        this.taskForm.end = '0'
+        this.taskForm.endTime = ''
+        this.taskForm.cron = ''
+      }
+      if (this.taskForm.rate === 'SIMPLE_CRON') {
+        this.taskForm.cron = '0 0 0/1 *  * ? *'
+      }
+      if (this.taskForm.rate === 'CRON') {
+        this.taskForm.cron = '00 00 * ? * * *'
+      }
+    },
+    listTaskLog(loading = true) {
+      const params = { 'conditions': [{ 'field': 'dataset_table_task_log.table_id', 'operator': 'eq', 'value': this.table.id }], 'orders': [] }
+      post('/dataset/taskLog/listForDataset/' + this.table.type + '/' + this.page.currentPage + '/' + this.page.pageSize, params, loading).then(response => {
+        this.taskLogData = response.data.listObject
+        this.page.total = response.data.itemCount
+        this.taskLogLastRequestComplete = true
+      }).catch(() => {
+        this.taskLogLastRequestComplete = true
+      })
+    },
+    handleSizeChange(val) {
+      this.page.pageSize = val
+      this.listTaskLog()
+    },
+    handleCurrentChange(val) {
+      this.page.currentPage = val
+      this.listTaskLog()
+    },
+    resetTaskForm() {
+      this.taskForm = {
+        name: '',
+        type: 'all_scope',
+        startTime: '',
+        rate: 'SIMPLE',
+        endTime: '',
+        end: '0',
+        extraData: {
+          simple_cron_type: 'hour',
+          simple_cron_value: 1
+        }
+      }
+    },
+    showSQL(val) {
+      this.sql = val || ''
+    },
+    onCmReady(cm) {
+      this.codemirror.setSize('-webkit-fill-available', 'auto')
+    },
+    onCmFocus(cm) {
+    },
+    onCmCodeChange(newCode) {
+      this.sql = newCode
+      this.$emit('codeChange', this.sql)
+    },
+    insertParamToCodeMirror(param) {
+      const pos1 = this.$refs.myCm.codemirror.getCursor()
+      const pos2 = {}
+      pos2.line = pos1.line
+      pos2.ch = pos1.ch
+      this.$refs.myCm.codemirror.replaceRange(param, pos2)
+    },
+    cronChange(val) {
+      this.taskForm.cron = val
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-divider--horizontal {
+    margin: 12px 0;
+  }
+
+  .el-radio{
+    margin-right: 10px;
+  }
+  .el-radio ::v-deep .el-radio__label{
+    font-size: 12px;
+  }
+
+  .dialog-css ::v-deep .el-dialog__header {
+    padding: 20px 20px 0;
+  }
+
+  .dialog-css ::v-deep .el-dialog__body {
+    padding: 10px 20px 20px;
+  }
+
+  .el-form-item {
+    margin-bottom: 10px;
+  }
+
+  .codemirror {
+    height: 100px;
+    overflow-y: auto;
+  }
+  .codemirror ::v-deep .CodeMirror-scroll {
+    height: 100px;
+    overflow-y: auto;
+  }
+
+  .err-msg{
+    font-size: 12px;
+    word-break:normal;
+    width:auto;
+    display:block;
+    white-space:pre-wrap;
+    word-wrap : break-word ;
+    overflow: hidden ;
+  }
+
+  .blackTheme .dialog_cancel_button {
+    background-color: #171b22 !important;
+    color: #2681ff !important;
+  }
+
+  .span{
+    font-size: 12px;
+  }
+</style>

frontend/src/views/dataset/data/ViewTable.vue

@@ -125,8 +125,7 @@
       </el-tab-pane>
       <el-tab-pane
         v-if="
-          table.mode === 1 &&
-            (table.type === 'db' || table.type === 'sql' || table.type === 'api')
+          table.mode === 1 && ['api', 'sql', 'db'].includes(table.type)
         "
         :label="$t('dataset.update_info')"
         name="updateInfo"
@@ -137,6 +136,19 @@
           :table="table"
         />
       </el-tab-pane>
+      <el-tab-pane
+        v-if="
+          table.mode === 1 && ['excel'].includes(table.type)
+        "
+        :label="$t('dataset.update_records')"
+        name="updateInfo"
+      >
+        <update-records
+          v-if="tabActive == 'updateInfo'"
+          :param="param"
+          :table="table"
+        />
+      </el-tab-pane>
       <el-tab-pane
         v-if="isPluginLoaded && hasDataPermission('manage', param.privileges)"
         :lazy="true"
@@ -175,7 +187,7 @@ import DatasetDetail from '../common/DatasetDetail'
 import FieldEdit from './FieldEdit'
 import { pluginLoaded } from '@/api/user'
 import PluginCom from '@/views/system/plugin/PluginCom'
-
+import UpdateRecords from './UpdateRecords'
 export default {
   name: 'ViewTable',
   components: {
@@ -183,6 +195,7 @@ export default {
     DatasetDetail,
     UpdateInfo,
     TabDataPreview,
+    UpdateRecords,
     PluginCom
   },
   props: {