Merge remote-tracking branch 'origin/main' into main

# Conflicts: # frontend/src/components/vue-drag-resize-rotate/index.vue
2021-03-16 11:39:04 +08:00 · 2021-03-16 11:39:04 +08:00 · d7e0eb64ef
commit d7e0eb64ef
parent 915ccf326e 029eb33e8c
40 changed files with 968 additions and 544 deletions
--- a/backend/pom.xml
+++ b/backend/pom.xml
@ -17,6 +17,7 @@
        <java.version>1.8</java.version>
        <graalvm.version>20.1.0</graalvm.version>
        <jwt.version>3.12.1</jwt.version>
+        <spark.version>3.1.1</spark.version>
    </properties>

    <dependencies>
@ -333,6 +334,36 @@
            <scope>test</scope>
        </dependency>

+        <dependency>
+            <groupId>org.apache.spark</groupId>
+            <artifactId>spark-core_2.12</artifactId>
+            <version>${spark.version}</version>
+            <exclusions>
+                <exclusion>
+                    <groupId>org.slf4j</groupId>
+                    <artifactId>slf4j-log4j12</artifactId>
+                </exclusion>
+                <exclusion>
+                    <groupId>log4j</groupId>
+                    <artifactId>log4j</artifactId>
+                </exclusion>
+            </exclusions>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>org.apache.spark</groupId>
+            <artifactId>spark-streaming_2.12</artifactId>
+            <version>${spark.version}</version>
+            <scope>provided</scope>
+        </dependency>
+
+        <dependency>
+            <groupId>org.apache.spark</groupId>
+            <artifactId>spark-sql_2.12</artifactId>
+            <version>${spark.version}</version>
+        </dependency>
+
    </dependencies>

    <build>
@ -439,33 +470,33 @@
                </dependencies>
            </plugin>

-<!--            <plugin>-->
-<!--                <groupId>org.apache.maven.plugins</groupId>-->
-<!--                <artifactId>maven-antrun-plugin</artifactId>-->
-<!--                <executions>-->
-<!--                    <execution>-->
-<!--                        <id>main-class-placement</id>-->
-<!--                        <phase>generate-resources</phase>-->
-<!--                        <configuration>-->
-<!--                            <target>-->
-<!--                                <move todir="src/main/resources/static">-->
-<!--                                    <fileset dir="../frontend/dist">-->
-<!--                                        <exclude name="*.html"/>-->
-<!--                                    </fileset>-->
-<!--                                </move>-->
-<!--                                <move todir="src/main/resources/templates">-->
-<!--                                    <fileset dir="../frontend/dist">-->
-<!--                                        <include name="*.html"/>-->
-<!--                                    </fileset>-->
-<!--                                </move>-->
-<!--                            </target>-->
-<!--                        </configuration>-->
-<!--                        <goals>-->
-<!--                            <goal>run</goal>-->
-<!--                        </goals>-->
-<!--                    </execution>-->
-<!--                </executions>-->
-<!--            </plugin>-->
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-antrun-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>main-class-placement</id>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <target>
+                                <move todir="src/main/resources/static">
+                                    <fileset dir="../frontend/dist">
+                                        <exclude name="*.html"/>
+                                    </fileset>
+                                </move>
+                                <move todir="src/main/resources/templates">
+                                    <fileset dir="../frontend/dist">
+                                        <include name="*.html"/>
+                                    </fileset>
+                                </move>
+                            </target>
+                        </configuration>
+                        <goals>
+                            <goal>run</goal>
+                        </goals>
+                    </execution>
+                </executions>
+            </plugin>
        </plugins>
    </build>

--- a/backend/src/main/java/io/dataease/auth/config/ShiroConfig.java
+++ b/backend/src/main/java/io/dataease/auth/config/ShiroConfig.java
@ -53,7 +53,8 @@ public class ShiroConfig {
        /*filterMap.put("jwt", jwtFilter);*/
        filterMap.put("logout", new F2CLogoutFilter());
        factoryBean.setSecurityManager(securityManager);
-        factoryBean.setUnauthorizedUrl("/permissionMiss");
+        factoryBean.setLoginUrl("/index.html");
+        factoryBean.setUnauthorizedUrl("/index.html");
        factoryBean.setFilterChainDefinitionMap(shiroService.loadFilterChainDefinitionMap());
        factoryBean.setFilters(filterMap);
        return factoryBean;
--- a/backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java
+++ b/backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java
@ -1,17 +0,0 @@
-package io.dataease.auth.config;
-
-import lombok.Data;
-import org.springframework.boot.context.properties.ConfigurationProperties;
-import org.springframework.context.annotation.Configuration;
-
-import java.util.List;
-
-@Configuration
-@ConfigurationProperties(prefix = "dataease")
-@Data
-public class WhitelistConfig {
-
-    private List<String> whitelist;
-
-
-}
--- a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
@ -1,13 +1,9 @@
 package io.dataease.auth.service.impl;

-import io.dataease.auth.config.WhitelistConfig;
 import io.dataease.auth.service.ShiroService;
-import org.apache.commons.collections.CollectionUtils;
 import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 import java.util.LinkedHashMap;
-import java.util.List;
 import java.util.Map;

@Service
@ -15,8 +11,7 @@ public class ShiroServiceImpl implements ShiroService {
    
    private final static String ANON = "anon";

-    @Autowired
-    private WhitelistConfig whitelistConfig;
+

    @Override
    public Map<String, String> loadFilterChainDefinitionMap() {
@ -47,11 +42,7 @@ public class ShiroServiceImpl implements ShiroService {
        filterChainDefinitionMap.put("/downline", ANON);
        filterChainDefinitionMap.put("/common-files/**", ANON);

-        List<String> whitelist = whitelistConfig.getWhitelist();
-        if (CollectionUtils.isNotEmpty(whitelist))
-        whitelist.forEach(path -> {
-            filterChainDefinitionMap.put(path, ANON);
-        });
+

        filterChainDefinitionMap.put("/api/auth/logout", "logout");
        filterChainDefinitionMap.put("/**", "jwt");
--- a/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
+++ b/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
@ -20,9 +20,9 @@ public class JWTUtils {


    // token过期时间1min (过期会自动刷新续命 目的是避免一直都是同一个token )
-    private static final long EXPIRE_TIME = 1*60*1000/2;
+    private static final long EXPIRE_TIME = 5*60*1000;
    // 登录间隔时间10min 超过这个时间强制重新登录
-    private static final long Login_Interval = 20*60*1000;
+    private static final long Login_Interval = 30*60*1000;


    /**
@ -81,6 +81,7 @@ public class JWTUtils {
    public static boolean loginExpire(String token){
        Long now = System.currentTimeMillis();
        Long lastOperateTime = tokenLastOperateTime(token);
+        if (lastOperateTime == null) return true;
        return now - lastOperateTime > Login_Interval;
    }

--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.java
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.java
@ -0,0 +1,11 @@
+package io.dataease.base.mapper.ext;
+
+import io.dataease.base.domain.Datasource;
+import io.dataease.base.mapper.ext.query.GridExample;
+
+import java.util.List;
+
+public interface ExtDataSourceMapper {
+
+    List<Datasource> query(GridExample example);
+}
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.xml
@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
+<mapper namespace="io.dataease.base.mapper.ext.ExtDataSourceMapper">
+
+
+
+
+
+
+    <select id="query" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="io.dataease.base.mapper.DatasourceMapper.BaseResultMap">
+        select id , name , `desc` ,`type` , configuration ,create_time ,update_time from datasource
+
+        <if test="_parameter != null">
+            <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
+        </if>
+        <if test="orderByClause != null">
+            order by ${orderByClause}
+        </if>
+        <if test="orderByClause == null">
+            order by update_time desc
+        </if>
+    </select>
+
+
+</mapper>
--- a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDeptMapper.xml
+++ b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDeptMapper.xml
@ -12,7 +12,7 @@
    </select>


-    <select id="nodesByExample" resultType="io.dataease.base.mapper.ext.query.GridExample" resultMap="simpleNode">
+    <select id="nodesByExample" parameterType="io.dataease.base.mapper.ext.query.GridExample" resultMap="simpleNode">
        select dept_id as id, pid from sys_dept
        <include refid="io.dataease.base.mapper.ext.query.GridSql.gridCondition" />
    </select>
--- a/backend/src/main/java/io/dataease/config/CommonConfig.java
+++ b/backend/src/main/java/io/dataease/config/CommonConfig.java
@ -1,6 +1,9 @@
 package io.dataease.config;

 import com.fit2cloud.autoconfigure.QuartzAutoConfiguration;
+import org.apache.spark.SparkConf;
+import org.apache.spark.api.java.JavaSparkContext;
+import org.apache.spark.sql.SparkSession;
 import org.springframework.boot.autoconfigure.AutoConfigureBefore;
 import org.springframework.boot.autoconfigure.condition.ConditionalOnMissingBean;
 import org.springframework.context.annotation.Bean;
@ -12,7 +15,7 @@ import javax.annotation.Resource;

@Configuration
@AutoConfigureBefore(QuartzAutoConfiguration.class)
-public class HbaseConfig {
+public class CommonConfig {

    @Resource
    private Environment env; // 保存了配置文件的信息
@ -27,4 +30,14 @@ public class HbaseConfig {
        configuration.set("hbase.client.retries.number", env.getProperty("hbase.client.retries.number", "1"));
        return configuration;
    }
+
+
+    @Bean
+    @ConditionalOnMissingBean
+    public JavaSparkContext javaSparkContext(){
+        SparkConf conf = new SparkConf().setAppName(env.getProperty("spark.appName", "DataeaseJob") ).setMaster(env.getProperty("spark.master", "local[*]") );
+        SparkSession spark = SparkSession.builder().config(conf).getOrCreate();
+        JavaSparkContext sc = new JavaSparkContext(spark.sparkContext());
+        return sc;
+    }
 }
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@ -65,4 +65,9 @@ public class DataSetTableController {
    public Map<String, Object> getPreviewData(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
        return dataSetTableService.getPreviewData(dataSetTableRequest);
    }
+
+    @PostMapping("sqlPreview")
+    public Map<String, Object> getSQLPreview(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
+        return dataSetTableService.getSQLPreview(dataSetTableRequest);
+    }
 }
--- a/backend/src/main/java/io/dataease/controller/sys/SysDeptController.java
+++ b/backend/src/main/java/io/dataease/controller/sys/SysDeptController.java
@ -8,6 +8,7 @@ import io.dataease.controller.sys.request.DeptCreateRequest;
 import io.dataease.controller.sys.request.DeptDeleteRequest;
 import io.dataease.controller.sys.request.DeptStatusRequest;
 import io.dataease.controller.sys.response.DeptNodeResponse;
+import io.dataease.controller.sys.response.DeptTreeNode;
 import io.dataease.service.sys.DeptService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
@ -82,4 +83,9 @@ public class SysDeptController extends ResultHolder {
        deptService.updateStatus(request);
    }

+    @PostMapping("/nodesByDeptId/{deptId}")
+    public List<DeptTreeNode> nodesByDeptId(@PathVariable("deptId") Long deptId){
+        return deptService.searchTree(deptId);
+    }
+
 }
--- a/backend/src/main/java/io/dataease/controller/sys/response/DeptTreeNode.java
+++ b/backend/src/main/java/io/dataease/controller/sys/response/DeptTreeNode.java
@ -0,0 +1,27 @@
+package io.dataease.controller.sys.response;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.ArrayList;
+import java.util.List;
+
+@Data
+@JsonInclude(JsonInclude.Include.NON_NULL)
+public class DeptTreeNode implements Serializable {
+
+    private Long id;
+
+    private String label;
+
+    private Boolean hasChildren;
+
+    private List<DeptTreeNode> children;
+
+    public List<DeptTreeNode> toList(){
+        List<DeptTreeNode> lists = new ArrayList<>();
+        lists.add(this);
+        return lists;
+    }
+}
--- a/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
+++ b/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
@ -5,6 +5,7 @@ import com.github.pagehelper.PageHelper;
 import io.dataease.base.domain.Datasource;
 import io.dataease.commons.utils.PageUtils;
 import io.dataease.commons.utils.Pager;
+import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.datasource.service.DatasourceService;
 import org.springframework.web.bind.annotation.*;

@ -34,9 +35,10 @@ public class DatasourceController {
    }

    @PostMapping("/list/{goPage}/{pageSize}")
-    public Pager<List<Datasource>> getDatasourceList(@RequestBody Datasource request, @PathVariable int goPage, @PathVariable int pageSize) throws Exception {
+    public Pager<List<Datasource>> getDatasourceList(@RequestBody BaseGridRequest request, @PathVariable int goPage, @PathVariable int pageSize) throws Exception {
        Page<Object> page = PageHelper.startPage(goPage, pageSize, true);
-        return PageUtils.setPageInfo(page, datasourceService.getDatasourceList(request));
+        // return PageUtils.setPageInfo(page, datasourceService.getDatasourceList(request));
+        return PageUtils.setPageInfo(page, datasourceService.gridQuery(request));
    }

    @GetMapping("/delete/{datasourceID}")
--- a/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
@ -1,9 +1,11 @@
 package io.dataease.datasource.provider;

+import io.dataease.base.domain.DatasetTableField;
 import io.dataease.base.domain.Datasource;
 import io.dataease.datasource.dto.TableFiled;
 import io.dataease.datasource.request.DatasourceRequest;

+import java.sql.ResultSet;
 import java.util.ArrayList;
 import java.util.List;

@ -13,6 +15,8 @@ public abstract class DatasourceProvider {

    abstract public List<String[]> getData(DatasourceRequest datasourceRequest) throws Exception;

+    abstract public ResultSet getDataResultSet(DatasourceRequest datasourceRequest) throws Exception;
+
    abstract public List<String> getTables(DatasourceRequest datasourceRequest) throws Exception;

    public List<TableFiled> getTableFileds(DatasourceRequest datasourceRequest) throws Exception{
@ -27,4 +31,8 @@ public abstract class DatasourceProvider {

    abstract public List<String[]> getPageData(DatasourceRequest datasourceRequest) throws Exception;

+    abstract public List<String[]> fetchResult(ResultSet rs) throws Exception;
+
+    abstract public List<TableFiled> fetchResultField(ResultSet rs) throws Exception;
+
 }
--- a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
@ -1,6 +1,7 @@
 package io.dataease.datasource.provider;

 import com.google.gson.Gson;
+import io.dataease.base.domain.DatasetTableField;
 import io.dataease.datasource.constants.DatasourceTypes;
 import io.dataease.datasource.dto.MysqlConfigrationDTO;
 import io.dataease.datasource.dto.SqlServerConfigration;
@ -8,12 +9,13 @@ import io.dataease.datasource.dto.TableFiled;
 import io.dataease.datasource.request.DatasourceRequest;
 import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;
+
 import java.sql.*;
 import java.text.MessageFormat;
 import java.util.*;

@Service("jdbc")
-public class JdbcProvider extends DatasourceProvider{
+public class JdbcProvider extends DatasourceProvider {


    @Override
@ -25,33 +27,48 @@ public class JdbcProvider extends DatasourceProvider{
                ResultSet rs = stat.executeQuery(datasourceRequest.getQuery())
        ) {
            list = fetchResult(rs);
-        } catch (SQLException e){
+        } catch (SQLException e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
-        }catch (Exception e) {
+        } catch (Exception e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
        }
        return list;
    }

+    @Override
+    public ResultSet getDataResultSet(DatasourceRequest datasourceRequest) throws Exception {
+        ResultSet rs;
+        try {
+            Connection connection = getConnection(datasourceRequest);
+            Statement stat = connection.createStatement();
+            rs = stat.executeQuery(datasourceRequest.getQuery());
+        } catch (SQLException e) {
+            throw new Exception("ERROR:" + e.getMessage(), e);
+        } catch (Exception e) {
+            throw new Exception("ERROR:" + e.getMessage(), e);
+        }
+        return rs;
+    }
+
    @Override
    public List<String[]> getPageData(DatasourceRequest datasourceRequest) throws Exception {
        List<String[]> list = new LinkedList<>();
        try (
                Connection connection = getConnection(datasourceRequest);
                Statement stat = connection.createStatement();
-                ResultSet rs = stat.executeQuery(datasourceRequest.getQuery() + MessageFormat.format(" LIMIT {0}, {1}", (datasourceRequest.getStartPage() -1)*datasourceRequest.getPageSize(), datasourceRequest.getPageSize()))
+                ResultSet rs = stat.executeQuery(datasourceRequest.getQuery() + MessageFormat.format(" LIMIT {0}, {1}", (datasourceRequest.getStartPage() - 1) * datasourceRequest.getPageSize(), datasourceRequest.getPageSize()))
        ) {
            list = fetchResult(rs);
-        } catch (SQLException e){
+        } catch (SQLException e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
-        }catch (Exception e) {
+        } catch (Exception e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
        }
        return list;
    }

-
-    private List<String[]> fetchResult( ResultSet rs) throws Exception{
+    @Override
+    public List<String[]> fetchResult(ResultSet rs) throws Exception {
        List<String[]> list = new LinkedList<>();
        ResultSetMetaData metaData = rs.getMetaData();
        int columnCount = metaData.getColumnCount();
@ -73,13 +90,31 @@ public class JdbcProvider extends DatasourceProvider{
        return list;
    }

+    @Override
+    public List<TableFiled> fetchResultField(ResultSet rs) throws Exception {
+        List<TableFiled> fieldList = new ArrayList<>();
+        ResultSetMetaData metaData = rs.getMetaData();
+        int columnCount = metaData.getColumnCount();
+        for (int j = 0; j < columnCount; j++) {
+            String f = metaData.getColumnName(j + 1);
+            String l = StringUtils.isNotEmpty(metaData.getColumnLabel(j + 1)) ? metaData.getColumnLabel(j + 1) : f;
+            String t = metaData.getColumnTypeName(j + 1);
+            TableFiled field = new TableFiled();
+            field.setFieldName(l);
+            field.setRemarks(l);
+            field.setFieldType(t);
+            fieldList.add(field);
+        }
+        return fieldList;
+    }
+
    @Override
    public List<String> getTables(DatasourceRequest datasourceRequest) throws Exception {
        List<String> tables = new ArrayList<>();
        String queryStr = getTablesSql(datasourceRequest);
        try (Connection con = getConnection(datasourceRequest); Statement ps = con.createStatement()) {
            ResultSet resultSet = ps.executeQuery(queryStr);
-            while (resultSet.next()){
+            while (resultSet.next()) {
                tables.add(resultSet.getString(1));
            }
        } catch (Exception e) {
@ -89,22 +124,22 @@ public class JdbcProvider extends DatasourceProvider{
    }

    @Override
-    public List<TableFiled> getTableFileds(DatasourceRequest datasourceRequest) throws Exception{
+    public List<TableFiled> getTableFileds(DatasourceRequest datasourceRequest) throws Exception {
        List<TableFiled> list = new LinkedList<>();
        try (
-            Connection connection = getConnection(datasourceRequest);
+                Connection connection = getConnection(datasourceRequest);
        ) {
            DatabaseMetaData databaseMetaData = connection.getMetaData();
            ResultSet resultSet = databaseMetaData.getColumns(null, "%", datasourceRequest.getTable().toUpperCase(), "%");
            while (resultSet.next()) {
                String tableName = resultSet.getString("TABLE_NAME");
                String database = resultSet.getString("TABLE_CAT");
-                if(tableName.equals(datasourceRequest.getTable()) && database.equalsIgnoreCase(getDatabase(datasourceRequest))){
+                if (tableName.equals(datasourceRequest.getTable()) && database.equalsIgnoreCase(getDatabase(datasourceRequest))) {
                    TableFiled tableFiled = new TableFiled();
                    String colName = resultSet.getString("COLUMN_NAME");
                    tableFiled.setFieldName(colName);
                    String remarks = resultSet.getString("REMARKS");
-                    if(remarks == null || remarks.equals("")){
+                    if (remarks == null || remarks.equals("")) {
                        remarks = colName;
                    }
                    tableFiled.setRemarks(remarks);
@ -113,13 +148,15 @@ public class JdbcProvider extends DatasourceProvider{
                    list.add(tableFiled);
                }
            }
-        } catch (SQLException e){
+        } catch (SQLException e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
-        }catch (Exception e) {
+        } catch (Exception e) {
            throw new Exception("ERROR:" + e.getMessage(), e);
        }
        return list;
-    };
+    }
+
+    ;

    @Override
    public void test(DatasourceRequest datasourceRequest) throws Exception {
@ -132,7 +169,7 @@ public class JdbcProvider extends DatasourceProvider{
    }


-    public Long count(DatasourceRequest datasourceRequest)throws Exception{
+    public Long count(DatasourceRequest datasourceRequest) throws Exception {
        try (Connection con = getConnection(datasourceRequest); Statement ps = con.createStatement()) {
            ResultSet resultSet = ps.executeQuery(datasourceRequest.getQuery());
            while (resultSet.next()) {
@ -150,16 +187,16 @@ public class JdbcProvider extends DatasourceProvider{
        String driver = null;
        String jdbcurl = null;
        DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
-        switch (datasourceType){
+        switch (datasourceType) {
            case mysql:
-                MysqlConfigrationDTO mysqlConfigrationDTO  = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), MysqlConfigrationDTO.class);
+                MysqlConfigrationDTO mysqlConfigrationDTO = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), MysqlConfigrationDTO.class);
                username = mysqlConfigrationDTO.getUsername();
                password = mysqlConfigrationDTO.getPassword();
                driver = mysqlConfigrationDTO.getDriver();
                jdbcurl = mysqlConfigrationDTO.getJdbc();
                break;
            case sqlServer:
-                SqlServerConfigration sqlServerConfigration= new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), SqlServerConfigration.class);
+                SqlServerConfigration sqlServerConfigration = new Gson().fromJson(datasourceRequest.getDatasource().getConfiguration(), SqlServerConfigration.class);
                username = sqlServerConfigration.getUsername();
                password = sqlServerConfigration.getPassword();
                driver = sqlServerConfigration.getDriver();
@ -178,7 +215,7 @@ public class JdbcProvider extends DatasourceProvider{
        return DriverManager.getConnection(jdbcurl, props);
    }

-    private String getDatabase(DatasourceRequest datasourceRequest){
+    private String getDatabase(DatasourceRequest datasourceRequest) {
        DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
        switch (datasourceType) {
            case mysql:
@ -192,9 +229,9 @@ public class JdbcProvider extends DatasourceProvider{
        }
    }

-    private String getTablesSql(DatasourceRequest datasourceRequest){
+    private String getTablesSql(DatasourceRequest datasourceRequest) {
        DatasourceTypes datasourceType = DatasourceTypes.valueOf(datasourceRequest.getDatasource().getType());
-        switch (datasourceType){
+        switch (datasourceType) {
            case mysql:
                return "show tables;";
            case sqlServer:
--- a/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
+++ b/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
@ -2,7 +2,10 @@ package io.dataease.datasource.service;

 import io.dataease.base.domain.*;
 import io.dataease.base.mapper.*;
+import io.dataease.base.mapper.ext.ExtDataSourceMapper;
+import io.dataease.base.mapper.ext.query.GridExample;
 import io.dataease.commons.exception.DEException;
+import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.datasource.provider.DatasourceProvider;
 import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
@ -22,6 +25,9 @@ public class DatasourceService {
    @Resource
    private DatasourceMapper datasourceMapper;

+    @Resource
+    private ExtDataSourceMapper extDataSourceMapper;
+
    public Datasource addDatasource(Datasource datasource) {
        DatasourceExample example = new DatasourceExample();
        example.createCriteria().andNameEqualTo(datasource.getName());
@ -49,6 +55,11 @@ public class DatasourceService {
        return datasourceMapper.selectByExampleWithBLOBs(example);
    }

+    public List<Datasource> gridQuery(BaseGridRequest request){
+        GridExample gridExample = request.convertExample();
+        return extDataSourceMapper.query(gridExample);
+    }
+
    public void deleteDatasource(String datasourceId) {
        datasourceMapper.deleteByPrimaryKey(datasourceId);
    }
--- a/backend/src/main/java/io/dataease/job/sechedule/DeScheduleJob.java
+++ b/backend/src/main/java/io/dataease/job/sechedule/DeScheduleJob.java
@ -18,7 +18,6 @@ public abstract class DeScheduleJob implements Job {
        this.taskId = jobDataMap.getString("taskId");

        LogUtil.info(jobKey.getGroup() + " Running: " + datasetTableId);
-        LogUtil.info(jobKey.getName() + " Running: " + datasetTableId);
        LogUtil.info("CronExpression: " + expression);
        businessExecute(context);
    }
--- a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
+++ b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
@ -102,8 +102,13 @@ public class ChartViewService {
        DatasourceRequest datasourceRequest = new DatasourceRequest();
        datasourceRequest.setDatasource(ds);
        DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(table.getInfo(), DataTableInfoDTO.class);
-        datasourceRequest.setTable(dataTableInfoDTO.getTable());
-        datasourceRequest.setQuery(getSQL(ds.getType(), dataTableInfoDTO.getTable(), xAxis, yAxis));
+        if (StringUtils.equalsIgnoreCase(table.getType(), "db")) {
+            datasourceRequest.setTable(dataTableInfoDTO.getTable());
+            datasourceRequest.setQuery(getSQL(ds.getType(), dataTableInfoDTO.getTable(), xAxis, yAxis));
+        } else if (StringUtils.equalsIgnoreCase(table.getType(), "sql")) {
+            datasourceRequest.setQuery(getSQL(ds.getType(), " (" + dataTableInfoDTO.getSql() + ") AS tmp ", xAxis, yAxis));
+        }
+
        List<String[]> data = datasourceProvider.getData(datasourceRequest);

        // todo 处理结果,目前做一个单系列图表，后期图表组件再扩展
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@ -21,6 +21,7 @@ import org.apache.commons.lang3.StringUtils;
 import org.springframework.stereotype.Service;

 import javax.annotation.Resource;
+import java.sql.ResultSet;
 import java.text.MessageFormat;
 import java.util.*;
 import java.util.stream.Collectors;
@ -53,8 +54,8 @@ public class DataSetTableService {
            DataTableInfoDTO dataTableInfoDTO = new DataTableInfoDTO();
            if (StringUtils.equalsIgnoreCase("db", datasetTable.getType())) {
                dataTableInfoDTO.setTable(datasetTable.getName());
+                datasetTable.setInfo(new Gson().toJson(dataTableInfoDTO));
            }
-            datasetTable.setInfo(new Gson().toJson(dataTableInfoDTO));
            int insert = datasetTableMapper.insert(datasetTable);
            // 添加表成功后，获取当前表字段和类型，抽象到dataease数据库
            if (insert == 1) {
@ -142,15 +143,22 @@ public class DataSetTableService {
        DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
        DatasourceRequest datasourceRequest = new DatasourceRequest();
        datasourceRequest.setDatasource(ds);
-        String table = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class).getTable();

        DatasetTableField datasetTableField = DatasetTableField.builder().build();
        datasetTableField.setTableId(dataSetTableRequest.getId());
        datasetTableField.setChecked(Boolean.TRUE);
        List<DatasetTableField> fields = dataSetTableFieldsService.list(datasetTableField);
-
        String[] fieldArray = fields.stream().map(DatasetTableField::getOriginName).toArray(String[]::new);
-        datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT 0,10");
+
+        DataTableInfoDTO dataTableInfoDTO = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class);
+        DatasetTable datasetTable = datasetTableMapper.selectByPrimaryKey(dataSetTableRequest.getId());
+        if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "db")) {
+            String table = dataTableInfoDTO.getTable();
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT 0,10");// todo limit
+        } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "sql")) {
+            String sql = dataTableInfoDTO.getSql();
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray));// todo 因为编辑可能取消某些字段展示，这里sql看看怎么处理
+        }

        List<String[]> data = new ArrayList<>();
        try {
@ -169,6 +177,35 @@ public class DataSetTableService {
            }).collect(Collectors.toList());
        }

+        Map<String, Object> map = new HashMap<>();
+        map.put("fields", fields);
+        map.put("data", jsonArray);
+
+        return map;
+    }
+
+    public Map<String, Object> getSQLPreview(DataSetTableRequest dataSetTableRequest) throws Exception {
+        Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
+        DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
+        DatasourceRequest datasourceRequest = new DatasourceRequest();
+        datasourceRequest.setDatasource(ds);
+        String sql = new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class).getSql();
+        datasourceRequest.setQuery(sql);
+        ResultSet dataResultSet = datasourceProvider.getDataResultSet(datasourceRequest);
+        List<String[]> data = datasourceProvider.fetchResult(dataResultSet);
+        List<TableFiled> fields = datasourceProvider.fetchResultField(dataResultSet);
+        String[] fieldArray = fields.stream().map(TableFiled::getFieldName).toArray(String[]::new);
+
+        List<Map<String, Object>> jsonArray = new ArrayList<>();
+        if (CollectionUtils.isNotEmpty(data)) {
+            jsonArray = data.stream().map(ele -> {
+                Map<String, Object> map = new HashMap<>();
+                for (int i = 0; i < ele.length; i++) {
+                    map.put(fieldArray[i], ele[i]);
+                }
+                return map;
+            }).collect(Collectors.toList());
+        }

        Map<String, Object> map = new HashMap<>();
        map.put("fields", fields);
@ -228,8 +265,19 @@ public class DataSetTableService {
        Datasource ds = datasourceMapper.selectByPrimaryKey(datasetTable.getDataSourceId());
        DataSetTableRequest dataSetTableRequest = new DataSetTableRequest();
        BeanUtils.copyBean(dataSetTableRequest, datasetTable);
-        List<TableFiled> fields = getFields(dataSetTableRequest);
+
+        List<TableFiled> fields = new ArrayList<>();
        long syncTime = System.currentTimeMillis();
+        if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "db")) {
+            fields = getFields(dataSetTableRequest);
+        } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "sql")) {
+            DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
+            DatasourceRequest datasourceRequest = new DatasourceRequest();
+            datasourceRequest.setDatasource(ds);
+            datasourceRequest.setQuery(new Gson().fromJson(dataSetTableRequest.getInfo(), DataTableInfoDTO.class).getSql());
+            ResultSet dataResultSet = datasourceProvider.getDataResultSet(datasourceRequest);
+            fields = datasourceProvider.fetchResultField(dataResultSet);
+        }
        if (CollectionUtils.isNotEmpty(fields)) {
            for (int i = 0; i < fields.size(); i++) {
                TableFiled filed = fields.get(i);
--- a/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java
@ -6,6 +6,7 @@ import io.dataease.base.domain.DatasetTableField;
 import io.dataease.base.domain.DatasetTableTaskLog;
 import io.dataease.commons.constants.JobStatus;
 import io.dataease.commons.utils.CommonBeanFactory;
+import io.dataease.commons.utils.LogUtil;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import org.apache.hadoop.conf.Configuration;
 import org.apache.hadoop.hbase.TableName;
@ -76,6 +77,9 @@ public class ExtractDataService {
            datasetTableTaskLog.setEndTime(System.currentTimeMillis());
            dataSetTableTaskLogService.save(datasetTableTaskLog);
        }catch (Exception e){
+            e.printStackTrace();
+            LogUtil.error("ExtractData error, dataaset: " + datasetTableId);
+            LogUtil.error(e.getMessage(), e);
            datasetTableTaskLog.setStatus(JobStatus.Error.name());
            datasetTableTaskLog.setEndTime(System.currentTimeMillis());
            dataSetTableTaskLogService.save(datasetTableTaskLog);
--- a/backend/src/main/java/io/dataease/service/sys/DeptService.java
+++ b/backend/src/main/java/io/dataease/service/sys/DeptService.java
@ -8,10 +8,12 @@ import io.dataease.base.mapper.ext.query.GridExample;
 import io.dataease.commons.utils.BeanUtils;
 import io.dataease.commons.utils.CommonBeanFactory;
 import io.dataease.controller.sys.base.BaseGridRequest;
+import io.dataease.controller.sys.base.ConditionEntity;
 import io.dataease.controller.sys.request.DeptCreateRequest;
 import io.dataease.controller.sys.request.DeptDeleteRequest;
 import io.dataease.controller.sys.request.DeptStatusRequest;
 import io.dataease.controller.sys.request.SimpleTreeNode;
+import io.dataease.controller.sys.response.DeptTreeNode;
 import org.apache.commons.lang3.ObjectUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@ -139,6 +141,33 @@ public class DeptService {
        return sysDepts;
    }

+    public List<DeptTreeNode> searchTree(Long deptId){
+        List<SysDept> roots = nodesByPid(0L);
+        if (deptId == DEPT_ROOT_PID) return roots.stream().map(this::format).collect(Collectors.toList());
+        SysDept sysDept = sysDeptMapper.selectByPrimaryKey(deptId);
+        if (roots.stream().anyMatch(node -> node.getDeptId() == deptId)) return roots.stream().map(this::format).collect(Collectors.toList());
+        SysDept current = sysDept;
+        DeptTreeNode currentNode = format(sysDept);
+        while (current.getPid() != DEPT_ROOT_PID){
+            SysDept parent = sysDeptMapper.selectByPrimaryKey(current.getPid()); //pid上有索引 所以效率不会太差
+            DeptTreeNode parentNode = format(parent);
+            parentNode.setChildren(currentNode.toList());
+            current = parent;
+            currentNode = parentNode;
+        }
+
+        DeptTreeNode targetRootNode = currentNode;
+        return roots.stream().map(node -> node.getDeptId() == targetRootNode.getId() ? targetRootNode : format(node)).collect(Collectors.toList());
+    }
+
+    private DeptTreeNode format(SysDept sysDept){
+        DeptTreeNode deptTreeNode = new DeptTreeNode();
+        deptTreeNode.setId(sysDept.getDeptId());
+        deptTreeNode.setLabel(sysDept.getName());
+        deptTreeNode.setHasChildren(sysDept.getSubCount() > 0);
+        return deptTreeNode;
+    }
+
    private DeptService proxy(){
        return CommonBeanFactory.getBean(DeptService.class);
    }
--- a/frontend/.env.production
+++ b/frontend/.env.production
@ -2,5 +2,6 @@
 ENV = 'production'

 # base api
-VUE_APP_BASE_API = 'http://localhost:8081/'
+# VUE_APP_BASE_API = 'http://localhost:8081/'
+VUE_APP_BASE_API = '/'

--- a/frontend/package.json
+++ b/frontend/package.json
@ -27,7 +27,9 @@
    "screenfull": "4.2.0",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
+    "umy-ui": "^1.1.6",
    "vue": "2.6.10",
+    "vue-codemirror": "^4.0.6",
    "vue-i18n": "7.3.2",
    "vue-router": "3.0.6",
    "vuedraggable": "^2.24.3",
--- a/frontend/src/api/system/datasource.js
+++ b/frontend/src/api/system/datasource.js
@ -4,6 +4,7 @@ export function dsGrid(pageIndex, pageSize, data) {
  return request({
    url: 'datasource/list/' + pageIndex + '/' + pageSize,
    method: 'post',
+    loading: true,
    data
  })
 }
--- a/frontend/src/api/system/dept.js
+++ b/frontend/src/api/system/dept.js
@ -41,4 +41,11 @@ export function editDept(data) {
  })
 }

-export default { addDept, delDept, editDept, getDeptTree, loadTable }
+export function treeByDeptId(deptId) {
+  return request({
+    url: '/api/dept/nodesByDeptId/' + deptId,
+    method: 'post'
+  })
+}
+
+export default { addDept, delDept, editDept, getDeptTree, loadTable, treeByDeptId }
--- a/frontend/src/components/business/tree-table/index.vue
+++ b/frontend/src/components/business/tree-table/index.vue
@ -0,0 +1,90 @@
+<template>
+  <div class="complex-table">
+    <div v-if="$slots.header || header" class="complex-table__header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+
+    <div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
+      <slot name="toolbar">
+        <fu-search-bar v-bind="searchConfig" @exec="search">
+          <slot name="buttons" />
+          <fu-table-column-select :columns="columns" />
+        </fu-search-bar>
+      </slot>
+    </div>
+
+    <div class="complex-table__body">
+      <slot />
+      <!-- <fu-table ref="table" v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
+        <slot />
+      </fu-table> -->
+    </div>
+
+    <div v-if="$slots.pagination || paginationConfig" class="complex-table__pagination">
+      <slot name="pagination">
+        <fu-table-pagination
+          :current-page.sync="paginationConfig.currentPage"
+          :page-size.sync="paginationConfig.pageSize"
+          v-bind="paginationConfig"
+          @change="search"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TreeTable',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    // eslint-disable-next-line vue/require-default-prop
+    localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
+    // eslint-disable-next-line vue/require-default-prop
+    header: String,
+    // eslint-disable-next-line vue/require-default-prop
+    searchConfig: Object,
+    // eslint-disable-next-line vue/require-default-prop
+    paginationConfig: Object
+  },
+  data() {
+    return {
+      condition: {}
+    }
+  },
+  methods: {
+    search(condition, e) {
+      if (condition) {
+        this.condition = condition
+      }
+      this.$emit('search', this.condition, e)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+.complex-table {
+  .complex-table__header {
+    @include flex-row(flex-start, center);
+    height: 60px;
+    font-size: 20px;
+  }
+
+  .complex-table__toolbar {
+    @include flex-row(flex-end, center);
+  }
+
+  .complex-table__pagination {
+    margin-top: 20px;
+    @include flex-row(flex-end);
+  }
+}
+
+</style>
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@ -69,10 +69,6 @@ export default {
  replace: true,
  name: 'vue-drag-resize-rotate',
  props: {
-    viewId: {
-      type: String,
-      default: ''
-    },
    className: {
      type: String,
      default: 'vdr'
@ -399,11 +395,6 @@ export default {
  },

  methods: {
-    removeView(){
-      debugger
-      console.log(this.viewId);
-      this.$emit('removeView',this.viewId)
-    },
    // 重置边界和鼠标状态
    resetBoundsAndMouseState() {
      this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 }
@ -1320,15 +1311,13 @@ export default {
      }
    },
    style() {
-      let newStyle ={
+      return {
        transform: `translate(${this.left}px, ${this.top}px) rotate(${this.rotate}deg)`,
        width: this.computedWidth,
        height: this.computedHeight,
        zIndex: this.zIndex,
        ...(this.dragging && this.disableUserSelect ? userSelectNone : userSelectAuto)
      };
-      this.$emit('newStyle', this.viewId,newStyle);
-      return newStyle;
    },
    // 控制柄显示与否
    actualHandles() {
@ -1515,11 +1504,4 @@ export default {
  height: 7px;
  background-color: #666;
 }
-
-.close {
-  float: right;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
 </style>
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -666,7 +666,9 @@ export default {
    close: '关闭',
    required: '必填',
    input_content: '请输入内容',
-    add_sql_table: '添加SQL'
+    add_sql_table: '添加SQL',
+    preview: '预览',
+    pls_input_name: '请输入名称'
  },
  datasource: {
    create: '新建数据连接',
@ -682,7 +684,7 @@ export default {
    please_input_password: '请输入密码',
    please_input_host: '请输入主机',
    please_input_port: '请输入端口',
-    modify: '修改组织',
+    modify: '编辑数据连接',
    validate_success: '校验成功',
    delete: '删除组织',
    delete_confirm: '删除该组织会关联删除该组织下的所有资源(如：相关工作空间，项目，测试用例等），确定要删除吗?',
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -31,6 +31,10 @@ import * as echarts from 'echarts'

 Vue.prototype.$echarts = echarts

+import UmyUi from 'umy-ui'
+import 'umy-ui/lib/theme-chalk/index.css'// 引入样式
+Vue.use(UmyUi)
+
 /**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@ -178,7 +178,8 @@ export const constantRoutes = [
 ]

 const createRouter = () => new Router({
-  mode: 'history', // require service support
+  // mode: 'history', // require service support
+  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
 })
--- a/frontend/src/views/chart/components/QuotaItem.vue
+++ b/frontend/src/views/chart/components/QuotaItem.vue
@ -3,7 +3,7 @@
    <el-dropdown trigger="click" size="small">
      <span class="el-dropdown-link">
        <el-tag size="small" class="item-axis">
-          {{ item.name }}<span class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
+          {{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
        </el-tag>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-notebook-2">
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@ -291,10 +291,10 @@ export default {
      this.removeCheckedKey(e)
      this.save()
    },
+    // 右边往左边拖动时的事件
    start2(e) {
      console.log(e)
    },
-    // 右边往左边拖动时的事件
    end2(e) {
      console.log(e)
      this.removeDuplicateKey(e)
@ -394,8 +394,8 @@ export default {
  }

  .item {
-    padding: 3px 10px;
-    margin: 3px 3px 0 3px;
+    padding: 2px 10px;
+    margin: 2px 2px 0 2px;
    border: solid 1px #eee;
    text-align: left;
    color: #606266;
@ -403,15 +403,15 @@ export default {
  }

  .item-on-move {
-    padding: 3px 10px;
-    margin: 3px 3px 0 3px;
+    padding: 2px 10px;
+    margin: 2px 2px 0 2px;
    border: solid 1px #eee;
    text-align: left;
    color: #606266;
  }

  .item + .item {
-    margin-top: 3px;
+    margin-top: 2px;
  }

  .item:hover {
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@ -42,7 +42,7 @@
          </el-form-item>
        </el-form>
      </el-row>
-      <el-row style="overflow: auto;height: 600px;">
+      <el-row style="overflow: auto;height: 60vh;">
        <el-checkbox-group v-model="checkTableList" size="small">
          <el-checkbox
            v-for="t in tableData"
@ -62,7 +62,10 @@ import { listDatasource, post } from '@/api/dataset/dataset'
 export default {
  name: 'AddDB',
  props: {
-    param: Object
+    param: {
+      type: Object,
+      default: null
+    }
  },
  data() {
    return {
@ -163,4 +166,8 @@ export default {
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  }
+
+  span{
+    font-size: 14px;
+  }
 </style>
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@ -9,7 +9,7 @@
          <el-button size="mini" @click="cancel">
            {{ $t('dataset.cancel') }}
          </el-button>
-          <el-button size="mini" type="primary">
+          <el-button size="mini" type="primary" @click="save">
            {{ $t('dataset.confirm') }}
          </el-button>
        </el-row>
@ -27,29 +27,133 @@
              />
            </el-select>
          </el-form-item>
+          <el-form-item class="form-item">
+            <el-input v-model="name" size="mini" :placeholder="$t('commons.name')" />
+          </el-form-item>
+          <el-form-item class="form-item">
+            <el-radio v-model="mode" label="0">{{ $t('dataset.direct_connect') }}</el-radio>
+            <el-radio v-model="mode" label="1">{{ $t('dataset.sync_data') }}</el-radio>
+          </el-form-item>
        </el-form>
      </el-row>
+      <el-row>
+        <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>
+      <el-row style="margin-top: 10px;">
+        <el-card class="box-card dataPreview" shadow="never">
+          <div slot="header" class="clearfix">
+            <span>{{ $t('dataset.data_preview') }}</span>
+            <el-button style="float: right; padding: 3px 0" type="text" size="mini" @click="getSQLPreview">{{ $t('dataset.preview') }}</el-button>
+          </div>
+          <div class="text item">
+            <ux-grid
+              ref="plxTable"
+              size="mini"
+              style="width: 100%;"
+              :height="height"
+              :checkbox-config="{highlight: true}"
+            >
+              <ux-table-column
+                v-for="field in fields"
+                :key="field.fieldName"
+                min-width="200px"
+                :field="field.fieldName"
+                :title="field.remarks"
+                :resizable="true"
+              />
+            </ux-grid>
+          </div>
+        </el-card>
+      </el-row>
    </el-row>
  </el-col>
 </template>

 <script>
 import { post, listDatasource } from '@/api/dataset/dataset'
+import { codemirror } from 'vue-codemirror'
+// 核心样式
+import 'codemirror/lib/codemirror.css'
+// 引入主题后还需要在 options 中指定主题才会生效
+import 'codemirror/theme/solarized.css'
+import 'codemirror/mode/sql/sql.js'
+// require active-line.js
+import 'codemirror/addon/selection/active-line.js'
+// closebrackets
+import 'codemirror/addon/edit/closebrackets.js'
+// keyMap
+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'

 export default {
  name: 'AddSQL',
+  components: { codemirror },
  props: {
-    param: Object
+    param: {
+      type: Object,
+      required: true
+    }
  },
  data() {
    return {
      dataSource: '',
-      options: []
+      options: [],
+      name: '',
+      sql: '',
+      sqlOption: {
+        tabSize: 2,
+        styleActiveLine: true,
+        lineNumbers: true,
+        line: true,
+        mode: 'text/x-sql',
+        theme: 'solarized',
+        hintOptions: { // 自定义提示选项
+          completeSingle: false // 当匹配只有一项的时候是否自动补全
+        }
+      },
+      data: [],
+      fields: [],
+      mode: '0',
+      height: 500
+    }
+  },
+  computed: {
+    codemirror() {
+      return this.$refs.myCm.codemirror
    }
  },
  watch: {},
  mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 2
+      })()
+    }
+    this.height = window.innerHeight / 2
    this.initDataSource()
+    this.$refs.myCm.codemirror.on('keypress', () => {
+      this.$refs.myCm.codemirror.showHint()
+    })
  },
  methods: {
    initDataSource() {
@ -57,9 +161,77 @@ export default {
        this.options = response.data
      })
    },
+
+    getSQLPreview() {
+      if (!this.dataSource || this.datasource === '') {
+        this.$message({
+          showClose: true,
+          message: this.$t('dataset.pls_slc_data_source'),
+          type: 'error'
+        })
+        return
+      }
+      post('/dataset/table/sqlPreview', {
+        dataSourceId: this.dataSource,
+        type: 'sql',
+        info: '{"sql":"' + this.sql + '"}'
+      }).then(response => {
+        this.fields = response.data.fields
+        this.data = response.data.data
+        const datas = this.data
+        this.$refs.plxTable.reloadData(datas)
+      })
+    },
+
+    save() {
+      if (!this.dataSource || this.datasource === '') {
+        this.$message({
+          showClose: true,
+          message: this.$t('dataset.pls_slc_data_source'),
+          type: 'error'
+        })
+        return
+      }
+      if (!this.name || this.name === '') {
+        this.$message({
+          showClose: true,
+          message: this.$t('dataset.pls_input_name'),
+          type: 'error'
+        })
+        return
+      }
+      const table = {
+        name: this.name,
+        sceneId: this.param.id,
+        dataSourceId: this.dataSource,
+        type: 'sql',
+        mode: parseInt(this.mode),
+        info: '{"sql":"' + this.sql + '"}'
+      }
+      post('/dataset/table/update', table).then(response => {
+        this.$store.dispatch('dataset/setSceneData', new Date().getTime())
+        this.cancel()
+      })
+    },
+
    cancel() {
      // this.dataReset()
      this.$emit('switchComponent', { name: '' })
+    },
+
+    showSQL(val) {
+      this.sql = val || ''
+    },
+    onCmReady(cm) {
+      this.codemirror.setSize('-webkit-fill-available', 'auto')
+    },
+    onCmFocus(cm) {
+      // console.log('the editor is focus!', cm)
+    },
+    onCmCodeChange(newCode) {
+      // console.log(newCode)
+      this.sql = newCode
+      this.$emit('codeChange', this.sql)
    }
  }
 }
@ -83,4 +255,25 @@ export default {
  .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    margin-left: 0;
  }
+
+  .codemirror {
+    height: 160px;
+    overflow-y: auto;
+  }
+  .codemirror >>> .CodeMirror-scroll {
+    height: 160px;
+    overflow-y: auto;
+  }
+
+  .dataPreview>>>.el-card__header{
+    padding: 6px 8px;
+  }
+
+  .dataPreview>>>.el-card__body{
+    padding:10px;
+  }
+
+  span{
+    font-size: 14px;
+  }
 </style>
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@ -1,21 +1,22 @@
 <template>
  <el-col>
    <span>{{ table.name }}</span>
-    <el-table
+    <ux-grid
+      ref="plxTable"
      size="mini"
-      :data="data"
-      height="40vh"
-      border
-      style="width: 100%;margin-top: 6px;"
+      style="width: 100%;"
+      :height="height"
+      :checkbox-config="{highlight: true}"
    >
-      <el-table-column
+      <ux-table-column
        v-for="field in fields"
        :key="field.originName"
        min-width="200px"
-        :prop="field.originName"
-        :label="field.name"
+        :field="field.originName"
+        :title="field.name"
+        :resizable="true"
      />
-    </el-table>
+    </ux-grid>
  </el-col>
 </template>

@ -25,13 +26,16 @@ import { post } from '@/api/dataset/dataset'
 export default {
  name: 'DatasetTableData',
  props: {
-    // eslint-disable-next-line vue/require-default-prop
-    table: Object
+    table: {
+      type: Object,
+      required: true
+    }
  },
  data() {
    return {
      fields: [],
-      data: []
+      data: [],
+      height: 500
    }
  },
  watch: {
@ -39,10 +43,14 @@ export default {
      this.initData()
    }
  },
-  created() {
-    this.initData()
-  },
  mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 3
+      })()
+    }
+    this.height = window.innerHeight / 3
+    this.initData()
  },
  methods: {
    initData() {
@ -51,6 +59,8 @@ export default {
        post('/dataset/table/getPreviewData', this.table).then(response => {
          this.fields = response.data.fields
          this.data = response.data.data
+          const datas = this.data
+          this.$refs.plxTable.reloadData(datas)
        })
      }
    },
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@ -1,19 +1,21 @@
 <template>
  <el-col>
-    <el-table
+    <ux-grid
+      ref="plxTable"
      size="mini"
-      :data="data"
-      border
      style="width: 100%;"
+      :height="height"
+      :checkbox-config="{highlight: true}"
    >
-      <el-table-column
+      <ux-table-column
        v-for="field in fields"
        :key="field.originName"
        min-width="200px"
-        :prop="field.originName"
-        :label="field.name"
+        :field="field.originName"
+        :title="field.name"
+        :resizable="true"
      />
-    </el-table>
+    </ux-grid>
  </el-col>
 </template>

@ -21,19 +23,39 @@
 export default {
  name: 'TabDataPreview',
  props: {
-    table: Object,
-    fields: Array,
-    data: Array
+    table: {
+      type: Object,
+      required: true
+    },
+    fields: {
+      type: Array,
+      required: true
+    },
+    data: {
+      type: Array,
+      required: true
+    }
  },
  data() {
    return {
+      height: 500
    }
  },
-  computed: {},
-  watch: {},
-  created() {
+  computed: {
+  },
+  watch: {
+    data() {
+      const datas = this.data
+      this.$refs.plxTable.reloadData(datas)
+    }
  },
  mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 2
+      })()
+    }
+    this.height = window.innerHeight / 2
  },
  activated() {
  },
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@ -1,40 +1,32 @@
 <template>
-  <div v-loading="result.loading">
-
-    <el-card class="table-card">
-      <template v-slot:header>
-        <ms-table-header
-          :condition.sync="condition"
-          :create-tip="$t('datasource.create')"
-          :title="$t('commons.datasource')"
-          @search="initTableData"
-          @create="create"
-        />
+  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
+    <complex-table
+      :data="data"
+      :columns="columns"
+      :buttons="buttons"
+      :header="header"
+      :search-config="searchConfig"
+      :pagination-config="paginationConfig"
+      @select="select"
+      @search="search"
+    >
+      <template #buttons>
+        <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" />
      </template>
-      <!-- system menu datasource table-->
-      <el-table border class="adjust-table" :data="tableData" style="width: 100%">
-        <el-table-column prop="name" :label="$t('commons.name')" />
-        <el-table-column prop="desc" :label="$t('commons.description')" />
-        <el-table-column prop="type" :label="$t('datasource.type')" />
-        <el-table-column :label="$t('commons.operating')">
-          <template v-slot:default="scope">
-            <ms-table-operator @editClick="edit(scope.row)" @deleteClick="handleDelete(scope.row)" />
-          </template>
-        </el-table-column>
-      </el-table>
-      <ms-table-pagination
-        :change="initTableData"
-        :current-page.sync="currentPage"
-        :page-size.sync="pageSize"
-        :total="total"
-      />
-    </el-card>
+
+      <!-- <el-table-column type="selection" fix /> -->
+      <el-table-column prop="name" :label="$t('commons.name')" />
+      <el-table-column prop="desc" :label="$t('commons.description')" />
+      <el-table-column prop="type" :label="$t('datasource.type')" />
+      <fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
+
+    </complex-table>

    <!-- add datasource form -->
    <el-dialog
      :close-on-click-modal="false"
-      :title="$t('datasource.create')"
-      :visible.sync="dialogDatasourceAddVisible"
+      :title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
+      :visible.sync="dialogVisible"
      width="30%"
      :destroy-on-close="true"
      @closed="closeFunc"
@ -84,130 +76,37 @@
        </el-form-item>

      </el-form>
-      <template v-slot:footer>
-        <ms-dialog-footer
-          :is-show-validate="true"
-          @cancel="dialogDatasourceAddVisible = false"
-          @validate="validaDatasource('createDatasource')"
-          @confirm="createDatasource('createDatasource')"
-        />
-      </template>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
+        <el-button type="primary" @click="saveDatasource('createDatasource')">确认</el-button>
+      </div>
    </el-dialog>

-    <!-- update datasource form -->
-    <el-dialog
-      :close-on-click-modal="false"
-      :title="$t('datasource.modify')"
-      :visible.sync="dialogDatasourceUpdateVisible"
-      width="30%"
-      :destroy-on-close="true"
-      @close="closeFunc"
-    >
-      <el-form
-        ref="updateDatasourceForm"
-        :model="form"
-        label-position="right"
-        label-width="100px"
-        size="small"
-        :rules="rule"
-      >
-        <el-form-item
-          :label="$t('commons.name')"
-          prop="name"
-          :rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
-                   {min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
-        >
-          <el-input v-model="form.name" autocomplete="off" />
-        </el-form-item>
-        <el-form-item
-          :label="$t('commons.description')"
-          prop="desc"
-          :rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
-                   {min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
-        >
-          <el-input v-model="form.desc" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
-          <el-input v-model="form.configuration.dataBase" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username">
-          <el-input v-model="form.configuration.username" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
-          <el-input v-model="form.configuration.password" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
-          <el-input v-model="form.configuration.host" autocomplete="off" />
-        </el-form-item>
-        <el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
-          <el-input v-model="form.configuration.port" autocomplete="off" />
-        </el-form-item>
-      </el-form>
-      <template v-slot:footer>
-        <ms-dialog-footer
-          :is-show-validate="true"
-          @cancel="dialogDatasourceUpdateVisible = false"
-          @validate="validaDatasource('updateDatasourceForm')"
-          @confirm="updateDatasource('updateDatasourceForm')"
-        />
-      </template>
-    </el-dialog>
-
-    <ms-delete-confirm ref="deleteConfirm" :title="$t('datasource.delete')" @delete="_handleDelete" />
-
-  </div>
+  </layout-content>
 </template>

 <script>
-import MsTablePagination from '@/metersphere/common/pagination/TablePagination'
-import MsTableHeader from '@/metersphere/common/components/MsTableHeader'
-import MsTableOperator from '@/metersphere/common/components/MsTableOperator'
-import MsDialogFooter from '@/metersphere/common/components/MsDialogFooter'
-import {
-  listenGoBack,
-  removeGoBackListener
-} from '@/metersphere/common/js/utils'
-import MsDeleteConfirm from '@/metersphere/common/components/MsDeleteConfirm'

+import LayoutContent from '@/components/business/LayoutContent'
+import ComplexTable from '@/components/business/complex-table'
+import { checkPermission } from '@/utils/permission'
+import { formatCondition } from '@/utils/index'
 import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'

 export default {
  name: 'DEDatasource',
  components: {
-    MsDeleteConfirm,
-    MsTablePagination,
-    MsTableHeader,
-    MsTableOperator,
-    MsDialogFooter
+    LayoutContent,
+    ComplexTable
  },
  data() {
    return {
-      queryPath: '/datasource/list',
-      deletePath: '/datasource/delete/',
-      createPath: '/datasource/add',
-      updatePath: '/datasource/update',
-      validatePath: '/datasource/validate',
-      result: {},
-      dialogDatasourceAddVisible: false,
-      dialogDatasourceUpdateVisible: false,
-      dialogDatasourceMemberVisible: false,
-      dialogDatasourceMemberAddVisible: false,
-      dialogDatasourceMemberUpdateVisible: false,
-      multipleSelection: [],
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      dialogCurrentPage: 1,
-      dialogPageSize: 10,
-      dialogTotal: 0,
-      currentRow: {},
-      condition: {},
-      dialogCondition: {},
-      tableData: [],
-      memberLineData: [],
+      formType: 'add',
+      dialogVisible: false,
+      data: [],
      form: { configuration: {}},
      allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
-      memberForm: {},
      rule: {
        name: [
          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
@ -217,79 +116,62 @@ export default {
          { required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
          { max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
        ]
+      },
+      header: '',
+      columns: [],
+      buttons: [
+        {
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
+          show: checkPermission(['datasource:edit'])
+        }, {
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
+          show: checkPermission(['datasource:del'])
+        }
+      ],
+      searchConfig: {
+        useQuickSearch: true,
+        quickPlaceholder: '按名称搜索',
+        combine: false,
+        components: [
+        //   { field: 'name', label: '姓名', component: 'FuComplexInput', defaultOperator: 'eq' },
+          { field: 'name', label: '名称', component: 'FuComplexInput' },
+
+          {
+            field: 'type',
+            label: '类型',
+            component: 'FuComplexSelect',
+            options: [{ label: 'mysql', value: 'mysql' }, { label: 'sqlServer', value: 'sqlServer' }],
+            multiple: false
+          }
+        //   { field: 'deptId', label: '组织', component: conditionTable }
+        ]
+      },
+      paginationConfig: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
      }
    }
  },
  activated() {
-    this.initTableData()
+    this.search()
  },
  methods: {
+    select(selection) {
+      console.log(selection)
+    },
    create() {
-      this.dialogDatasourceAddVisible = true
-      listenGoBack(this.closeFunc)
-    },
-    dataFilter(val) {
-      if (val) {
-        this.memberForm.userList = this.memberForm.copyUserList.filter((item) => {
-          if (!!~item.id.indexOf(val) || !!~item.id.toUpperCase().indexOf(val.toUpperCase())) {
-            return true
-          }
-        })
-      } else {
-        this.memberForm.userList = this.memberForm.copyUserList
-      }
+      this.formType = 'add'
+      this.dialogVisible = true
    },
+
    edit(row) {
-      this.dialogDatasourceUpdateVisible = true
+      this.formType = 'modify'
+      this.dialogVisible = true
      this.form = Object.assign({}, row)
      this.form.configuration = JSON.parse(this.form.configuration)
-      listenGoBack(this.closeFunc)
-    },
-    cellClick(row) {
-      // 保存当前点击的组织信息到currentRow
-      this.currentRow = row
-      this.dialogDatasourceMemberVisible = true
-      const param = {
-        name: '',
-        organizationId: row.id
-      }
-      const path = '/user/special/org/member/list'
-      this.result = this.$post(path + '/' + this.dialogCurrentPage + '/' + this.dialogPageSize, param, res => {
-        const data = res.data
-        this.memberLineData = data.listObject
-        const url = '/userrole/list/org/' + row.id
-        for (let i = 0; i < this.memberLineData.length; i++) {
-          this.$get(url + '/' + encodeURIComponent(this.memberLineData[i].id), response => {
-            const roles = response.data
-            this.$set(this.memberLineData[i], 'roles', roles)
-          })
-        }
-        this.dialogTotal = data.itemCount
-      })
-      listenGoBack(this.closeFunc)
-    },
-    dialogSearch() {
-      const row = this.currentRow
-      this.dialogDatasourceMemberVisible = true
-      const param = this.dialogCondition
-      this.$set(param, 'organizationId', row.id)
-      const path = '/user/special/org/member/list'
-      this.result = this.$post(path + '/' + this.dialogCurrentPage + '/' + this.dialogPageSize, param, res => {
-        const data = res.data
-        this.memberLineData = data.listObject
-        const url = '/userrole/list/org/' + row.id
-        for (let i = 0; i < this.memberLineData.length; i++) {
-          this.$get(url + '/' + encodeURIComponent(this.memberLineData[i].id), response => {
-            const roles = response.data
-            this.$set(this.memberLineData[i], 'roles', roles)
-          })
-        }
-        this.dialogTotal = data.itemCount
-      })
-    },
-    handleDelete(datasource) {
-      this.$refs.deleteConfirm.open(datasource)
    },
+
    _handleDelete(datasource) {
      this.$confirm(this.$t('datasource.delete_confirm'), '', {
        confirmButtonText: this.$t('commons.confirm'),
@ -298,7 +180,7 @@ export default {
      }).then(() => {
        delDs(datasource.id).then(res => {
          this.$success(this.$t('commons.delete_success'))
-          this.initTableData()
+          this.search()
        })
      }).catch(() => {
        this.$message({
@ -307,37 +189,22 @@ export default {
        })
      })
    },
-    createDatasource(createDatasourceForm) {
+    saveDatasource(createDatasourceForm) {
      this.$refs[createDatasourceForm].validate(valid => {
        if (valid) {
+          const method = this.formType === 'add' ? addDs : editDs
          this.form.configuration = JSON.stringify(this.form.configuration)
-          addDs(this.form).then(res => {
+          method(this.form).then(res => {
            this.$success(this.$t('commons.save_success'))
-            this.initTableData()
-            this.dialogDatasourceAddVisible = false
-          })
-
-          this.dialogDatasourceAddVisible = false
-        } else {
-          return false
-        }
-      })
-    },
-    updateDatasource(updateDatasourceForm) {
-      this.$refs[updateDatasourceForm].validate(valid => {
-        if (valid) {
-          this.form.configuration = JSON.stringify(this.form.configuration)
-
-          editDs(this.form).then(res => {
-            this.$success(this.$t('commons.modify_success'))
-            this.dialogDatasourceUpdateVisible = false
-            this.initTableData()
+            this.search()
+            this.dialogVisible = false
          })
        } else {
          return false
        }
      })
    },
+
    validaDatasource(datasourceForm) {
      this.$refs[datasourceForm].validate(valid => {
        if (valid) {
@ -359,54 +226,46 @@ export default {
        }
      }
    },
-    initTableData() {
-      dsGrid(this.currentPage, this.pageSize, this.condition).then(response => {
-        const data = response.data
-        this.tableData = data.listObject
-        this.total = data.itemCount
+    quick_condition(condition) {
+      const result = {}
+      if (condition && condition.quick) {
+        for (const [key, value] of Object.entries(condition)) {
+          // console.log(`${key}`)
+          if (`${key}` === 'quick') {
+            const v_new = Object.assign({}, value)
+            v_new['field'] = 'name'
+            result['name'] = v_new
+          } else {
+            result[`${key}`] = value
+          }
+        }
+        return result
+      }
+      return Object.assign({}, condition)
+    },
+    search(condition) {
+      const temp_param = this.quick_condition(condition)
+      const temp = formatCondition(temp_param)
+      const param = temp || {}
+      const { currentPage, pageSize } = this.paginationConfig
+      dsGrid(currentPage, pageSize, param).then(response => {
+        this.data = response.data.listObject
+        this.paginationConfig.total = response.data.itemCount
      })
    },
+
    closeFunc() {
-      this.memberLineData = []
-      this.initTableData()
+      this.formType = 'add'
+      // this.search()
      this.form = { configuration: {}}
-      removeGoBackListener(this.closeFunc)
-      this.dialogDatasourceAddVisible = false
-      this.dialogDatasourceUpdateVisible = false
-      this.dialogDatasourceMemberVisible = false
-      this.dialogDatasourceMemberAddVisible = false
-      this.dialogDatasourceMemberUpdateVisible = false
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
+      this.dialogVisible = false
    }
+
  }

 }
 </script>

 <style scoped>
-@import "~@/metersphere/common/css/index.css";
-  .member-size {
-    text-decoration: underline;
-  }
-
-  .org-member-id {
-    float: left;
-  }
-
-  .org-member-email {
-    float: right;
-    color: #8492a6;
-    font-size: 13px;
-  }
-
-  .select-width {
-    width: 100%;
-  }
-
-  .dialog-css >>> .el-dialog__header {
-    padding: 0;
-  }

 </style>
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@ -1,7 +1,7 @@
 <template>
  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">

-    <complex-table
+    <!-- <complex-table
      ref="table"
      :data="tableData"
      :lazy="isLazy"
@ -15,15 +15,31 @@
      :default-expand-all="isTableExpand"
      row-key="deptId"
      @search="search"
+    > -->
+    <tree-table
+      :columns="columns"
+      :buttons="buttons"
+      :header="header"
+      :search-config="searchConfig"
+      @search="search"
    >
      <template #buttons>
-        <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
+        <fu-table-button v-permission="['dept:add']" icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
      </template>
+      <el-table
+        ref="table"
+        :data="tableData"
+        lazy
+        :load="loadExpandDatas"
+        style="width: 100%"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        row-key="deptId"
+      >

-      <!-- <el-table-column type="selection" fix /> -->
-      <el-table-column label="名称" prop="name" />
-      <el-table-column label="下属组织数" prop="subCount" />
-      <!-- <el-table-column label="状态" align="center" prop="enabled">
+        <!-- <el-table-column type="selection" fix /> -->
+        <el-table-column label="名称" prop="name" />
+        <el-table-column label="下属组织数" prop="subCount" />
+        <!-- <el-table-column label="状态" align="center" prop="enabled">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
@ -34,14 +50,16 @@
          />
        </template>
      </el-table-column> -->
-      <el-table-column prop="createTime" label="创建日期">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
+        <el-table-column prop="createTime" label="创建日期">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>

-      <fu-table-operations :buttons="buttons" label="操作" fix />
-    </complex-table>
+        <fu-table-operations :buttons="buttons" label="操作" fix />
+      </el-table>
+    </tree-table>
+    <!-- </complex-table> -->

    <!-- add organization form -->
    <el-dialog
@ -106,19 +124,19 @@

 <script>
 import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
+import TreeTable from '@/components/business/tree-table'
 import Treeselect from '@riophae/vue-treeselect'
 import { formatCondition } from '@/utils/index'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-
+import { checkPermission } from '@/utils/permission'
 import { getDeptTree, addDept, editDept, delDept, loadTable } from '@/api/system/dept'

 export default {
  name: 'MsOrganization',
  components: {
    LayoutContent,
-    ComplexTable,
+    TreeTable,
    Treeselect
  },
  data() {
@ -155,9 +173,11 @@ export default {
      columns: [],
      buttons: [
        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
+          show: checkPermission(['dept:edit'])
        }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
+          show: checkPermission(['dept:del'])
        }
      ],
      searchConfig: {
@ -168,11 +188,7 @@ export default {

        ]
      },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
+
      defaultCondition: {
        field: 'pid',
        operator: 'eq',
@ -271,7 +287,7 @@ export default {
    },
    // 加载表格数据
    search(condition) {
-      this.setTableAttr()
+      // this.setTableAttr()
      this.tableData = []
      let param = {}
      if (condition && condition.quick) {
@ -293,7 +309,7 @@ export default {

        if (condition && condition.quick) {
          data = this.buildTree(data)
-          this.setTableAttr(true)
+          // this.setTableAttr(true)
        }
        this.tableData = data
        this.depts = null
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@ -1,59 +1,46 @@
 <template>
  <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
-    <complex-table
-      ref="table"
-      :data="tableData"
-      lazy
-      :load="initTableData"
+    <tree-table
      :columns="columns"
      :buttons="buttons"
      :header="header"
      :search-config="searchConfig"
-      :pagination-config="paginationConfig"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      row-key="menuId"
      @search="initTableData"
    >
-      <template #buttons>
-        <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
+      <template v-permission="['menu:add']" #buttons>
+        <fu-table-button v-permission="['menu:add']" icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
      </template>

-      <!-- <el-table-column type="selection" fix /> -->
-      <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
-      <el-table-column prop="icon" label="图标" align="center" width="60px">
-        <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
-        </template>
-      </el-table-column>
+      <el-table
+        ref="table"
+        :data="tableData"
+        lazy
+        :load="initTableData"
+        style="width: 100%"
+        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+        row-key="menuId"
+      >

-      <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
-      <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
-      <!-- <el-table-column prop="iframe" label="外链" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.iframe">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="cache" label="缓存" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.cache">是</span>
-          <span v-else>否</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="hidden" label="可见" width="75px">
-        <template slot-scope="scope">
-          <span v-if="scope.row.hidden">否</span>
-          <span v-else>是</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column prop="createTime" label="创建日期" width="160px">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | timestampFormatDate }}</span>
-        </template>
-      </el-table-column>
+        <!-- <el-table-column type="selection" fix /> -->
+        <el-table-column :show-overflow-tooltip="true" label="菜单标题" width="150px" prop="title" />
+        <el-table-column prop="icon" label="图标" align="center" width="60px">
+          <template slot-scope="scope">
+            <svg-icon :icon-class="scope.row.icon ? scope.row.icon : ''" />
+          </template>
+        </el-table-column>

-      <fu-table-operations :buttons="buttons" label="操作" fix />
-    </complex-table>
+        <el-table-column :show-overflow-tooltip="true" prop="permission" label="权限标识" />
+        <el-table-column :show-overflow-tooltip="true" prop="component" label="组件路径" />
+
+        <el-table-column prop="createTime" label="创建日期" width="160px">
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | timestampFormatDate }}</span>
+          </template>
+        </el-table-column>
+
+        <fu-table-operations :buttons="buttons" label="操作" fix />
+      </el-table>
+    </tree-table>

    <el-dialog
      :close-on-click-modal="false"
@ -66,13 +53,13 @@
      <el-form ref="menuForm" inline :model="form" :rules="rule" size="small" label-width="80px">

        <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="form.type" size="mini" style="width: 179px">
+          <el-radio-group v-model="form.type" size="mini" :disabled="formType!=='add'" style="width: 179px">
            <el-radio-button label="0">目录</el-radio-button>
            <el-radio-button label="1">菜单</el-radio-button>
            <el-radio-button label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
-        <el-form-item v-show="form.type!== '2'" label="菜单图标" prop="icon">
+        <el-form-item v-show="form.type!== 2" label="菜单图标" prop="icon">
          <el-popover
            placement="bottom-start"
            width="425"
@ -86,48 +73,32 @@
            </el-input>
          </el-popover>
        </el-form-item>
-        <!-- <el-form-item v-show="form.type !== '2'" label="外链菜单" prop="iframe">
-          <el-radio-group v-model="form.iframe" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type=== '1'" label="菜单缓存" prop="cache">
-          <el-radio-group v-model="form.cache" size="mini">
-            <el-radio-button label="true">是</el-radio-button>
-            <el-radio-button label="false">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item v-show="form.type !== '2'" label="菜单可见" prop="hidden">
-          <el-radio-group v-model="form.hidden" size="mini">
-            <el-radio-button label="false">是</el-radio-button>
-            <el-radio-button label="true">否</el-radio-button>
-          </el-radio-group>
-        </el-form-item> -->
-        <el-form-item v-if="form.type !== '2'" label="菜单标题" prop="title">
+
+        <el-form-item v-if="form.type !== 2" label="菜单标题" prop="title">
          <el-input v-model="form.title" :style=" form.type === '0' ? 'width: 450px' : 'width: 179px'" placeholder="菜单标题" />
        </el-form-item>
-        <el-form-item v-if="form.type === '2'" label="按钮名称" prop="title">
+        <el-form-item v-if="form.type === 2" label="按钮名称" prop="title">
          <el-input v-model="form.title" placeholder="按钮名称" style="width: 179px;" />
        </el-form-item>
-        <el-form-item v-show="form.type !== '0'" label="权限标识" prop="permission">
-          <el-input v-model="form.permission" :disabled="form.iframe" placeholder="权限标识" style="width: 179px;" />
+        <el-form-item v-show="form.type !== 0" label="权限标识" prop="permission">
+          <el-input v-model="form.permission" :disabled="form.iframe || formType!=='add'" placeholder="权限标识" style="width: 179px;" />
        </el-form-item>
-        <el-form-item v-if="form.type !== '2'" label="路由地址" prop="path">
-          <el-input v-model="form.path" placeholder="路由地址" style="width: 179px;" />
+        <el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
+          <el-input v-model="form.path" placeholder="路由地址" :disabled="formType!=='add'" style="width: 179px;" />
        </el-form-item>
        <el-form-item label="菜单排序" prop="menuSort">
          <el-input-number v-model.number="form.menuSort" :min="0" :max="999" controls-position="right" style="width: 179px;" />
        </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === '1'" label="组件名称" prop="componentName">
-          <el-input v-model="form.componentName" style="width: 179px;" placeholder="匹配组件内Name字段" />
+        <el-form-item v-show="!form.iframe && form.type === 1" label="组件名称" prop="componentName">
+          <el-input v-model="form.componentName" :disabled="formType!=='add'" style="width: 179px;" placeholder="匹配组件内Name字段" />
        </el-form-item>
-        <el-form-item v-show="!form.iframe && form.type === '1'" label="组件路径" prop="component">
-          <el-input v-model="form.component" style="width: 179px;" placeholder="组件路径" />
+        <el-form-item v-show="!form.iframe && form.type === 1" label="组件路径" prop="component">
+          <el-input v-model="form.component" :disabled="formType!=='add'" style="width: 179px;" placeholder="组件路径" />
        </el-form-item>
        <el-form-item label="上级类目" prop="pid">
          <treeselect
            v-model="form.pid"
+            :disabled="formType!=='add'"
            :options="menus"
            :load-options="loadMenus"
            style="width: 450px;"
@ -139,12 +110,7 @@
        <el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
        <el-button type="primary" @click="createMenu('menuForm')">确认</el-button>
      </div>
-      <!-- <template v-slot:footer>
-        <ms-dialog-footer
-          @cancel="dialogVisible = false"
-          @confirm="createMenu('menuForm')"
-        />
-      </template> -->
+
    </el-dialog>

  </layout-content>
@ -152,19 +118,18 @@

 <script>
 import LayoutContent from '@/components/business/LayoutContent'
-import ComplexTable from '@/components/business/complex-table'
+import TreeTable from '@/components/business/tree-table'
 // import { checkPermission } from '@/utils/permission'
 import IconSelect from '@/components/IconSelect'
 import Treeselect from '@riophae/vue-treeselect'
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-
+import { checkPermission } from '@/utils/permission'
 import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'

 export default {
-  name: 'MsMenu',
  components: {
-    ComplexTable,
+    TreeTable,
    LayoutContent,
    Treeselect,
    IconSelect
@ -172,7 +137,7 @@ export default {
  data() {
    return {
      menus: [],
-      topMunu: { id: 0, label: '顶级类目', children: null },
+      topMunu: { id: 0, label: '顶级目录', children: null },
      formType: 'add',
      dialogVisible: false,
      condition: {},
@ -200,9 +165,11 @@ export default {
      columns: [],
      buttons: [
        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
+          show: checkPermission(['menu:edit'])
        }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
+          show: checkPermission(['menu:del'])
        }
      ],
      searchConfig: {
@ -224,11 +191,6 @@ export default {
        //     multiple: false
        //   }
        ]
-      },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
      }

    }
@ -374,7 +336,7 @@ export default {
          this.formType === 'modify' && this.form['menuId'] && (method = editMenu)
          method(this.form).then(res => {
            this.$success(this.$t('commons.save_success'))
-            this.initTableData()
+            // this.initTableData()
            this.oldPid && this.reloadByPid(this.oldPid)
            this.reloadByPid(this.form['pid'])
            this.dialogVisible = false
@ -407,7 +369,8 @@ export default {
    reloadByPid(pid) {
      if (pid !== 0 && this.maps.get(pid)) {
        const { row, treeNode, resolve } = this.maps.get(pid)
-        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, pid, [])
+        const sto = this.$refs.table['store']
+        this.$set(sto.states.lazyTreeNodeMap, pid, [])
        this.initTableData(row, treeNode, resolve)
      }
    },
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@ -11,10 +11,10 @@
      @search="search"
    >
      <template #buttons>
-        <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
+        <fu-table-button v-permission="['user:add']" icon="el-icon-circle-plus-outline" :label="$t('user.create')" @click="create" />
      </template>

-      <el-table-column type="selection" fix />
+      <!-- <el-table-column type="selection" fix /> -->
      <el-table-column prop="username" label="ID" width="80" />
      <el-table-column prop="nickName" :label="$t('commons.name')" width="140" />
      <el-table-column prop="gender" label="性别" width="50" />
@ -157,7 +157,7 @@ import '@riophae/vue-treeselect/dist/vue-treeselect.css'

 import { userLists, addUser, editUser, delUser, editPassword, editStatus } from '@/api/system/user'
 import { allRoles } from '@/api/system/role'
-import { getDeptTree } from '@/api/system/dept'
+import { getDeptTree, treeByDeptId } from '@/api/system/dept'

 export default {

@ -168,9 +168,11 @@ export default {
      columns: [],
      buttons: [
        {
-          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit
+          label: this.$t('commons.edit'), icon: 'el-icon-edit', click: this.edit,
+          show: checkPermission(['user:edit'])
        }, {
-          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del
+          label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this.del,
+          show: checkPermission(['user:del'])
        }, {
          label: this.$t('member.edit_password'), icon: 'el-icon-s-tools', type: 'danger', click: this.editPassword,
          show: checkPermission(['user:editPwd'])
@ -306,14 +308,20 @@ export default {
    },

    create() {
+      this.depts = null
      this.formType = 'add'
      this.form = Object.assign({}, this.defaultForm)
      this.dialogVisible = true
    },
    edit(row) {
+      this.depts = null
      this.formType = 'modify'
      this.dialogVisible = true
      this.form = Object.assign({}, row)
+      if (this.form.deptId === 0) {
+        this.form.deptId = null
+      }
+      this.initDeptTree()
    },
    editPassword(row) {
      this.editPasswordVisible = true
@ -364,6 +372,7 @@ export default {
      })
    },
    handleClose() {
+      this.depts = null
      this.formType = 'add'
      this.form = {}
      this.editPasswordVisible = false
@ -376,12 +385,30 @@ export default {
        this.$success(this.$t('commons.modify_success'))
      })
    },
+
+    initDeptTree() {
+      treeByDeptId(this.form.deptId || 0).then(res => {
+        const results = res.data.map(node => {
+          if (node.hasChildren && !node.children) {
+            node.children = null
+          }
+          return node
+        })
+        this.depts = results
+      })
+    },
    // 获取弹窗内部门数据
    loadDepts({ action, parentNode, callback }) {
-      if (action === LOAD_ROOT_OPTIONS) {
+      if (action === LOAD_ROOT_OPTIONS && !this.form.deptId) {
        const _self = this
-        !this.depts && getDeptTree('0').then(res => {
-          _self.depts = res.data.map(node => _self.normalizer(node))
+        treeByDeptId(0).then(res => {
+          const results = res.data.map(node => {
+            if (node.hasChildren && !node.children) {
+              node.children = null
+            }
+            return node
+          })
+          _self.depts = results
          callback()
        })
      }