diff --git a/backend/src/main/java/io/dataease/auth/api/dto/DynamicMenuDto.java b/backend/src/main/java/io/dataease/auth/api/dto/DynamicMenuDto.java
index d79a6e6bbd..2121aaf1c7 100644
--- a/backend/src/main/java/io/dataease/auth/api/dto/DynamicMenuDto.java
+++ b/backend/src/main/java/io/dataease/auth/api/dto/DynamicMenuDto.java
@@ -25,6 +25,8 @@ public class DynamicMenuDto implements Serializable {
 
     private String permission;
 
+    private Boolean hidden;
+
     private List<DynamicMenuDto> children;
 
 }
diff --git a/backend/src/main/java/io/dataease/auth/config/F2CRealm.java b/backend/src/main/java/io/dataease/auth/config/F2CRealm.java
index 46b942ef48..719f6db9d9 100644
--- a/backend/src/main/java/io/dataease/auth/config/F2CRealm.java
+++ b/backend/src/main/java/io/dataease/auth/config/F2CRealm.java
@@ -68,6 +68,9 @@ public class F2CRealm extends AuthorizingRealm {
         if (user == null) {
             throw new AuthenticationException("User didn't existed!");
         }
+        if (user.getEnabled()==0) {
+            throw new AuthenticationException("User is valid!");
+        }
         String pass = null;
         try {
             pass = user.getPassword();
diff --git a/backend/src/main/java/io/dataease/auth/server/AuthServer.java b/backend/src/main/java/io/dataease/auth/server/AuthServer.java
index 6c454034f7..56211cab1d 100644
--- a/backend/src/main/java/io/dataease/auth/server/AuthServer.java
+++ b/backend/src/main/java/io/dataease/auth/server/AuthServer.java
@@ -35,10 +35,14 @@ public class AuthServer implements AuthApi {
         String username = loginDto.getUsername();
         String password = loginDto.getPassword();
         SysUserEntity user = authUserService.getUserByName(username);
-        String realPwd = user.getPassword();
+
         if (ObjectUtils.isEmpty(user)){
             throw new RuntimeException("没有该用户！");
         }
+        if (user.getEnabled()==0){
+            throw new RuntimeException("用户已经失效！");
+        }
+        String realPwd = user.getPassword();
         //私钥解密
         String pwd = RsaUtil.decryptByPrivateKey(RsaProperties.privateKey, password);
         //md5加密
diff --git a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
index 1d256f478b..3004bf553c 100644
--- a/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
+++ b/backend/src/main/java/io/dataease/auth/service/impl/DynamicMenuServiceImpl.java
@@ -42,6 +42,7 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
         menuMeta.setIcon(sysMenu.getIcon());
         dynamicMenuDto.setMeta(menuMeta);
         dynamicMenuDto.setPermission(sysMenu.getPermission());
+        dynamicMenuDto.setHidden(sysMenu.getHidden());
         return dynamicMenuDto;
     }
 
diff --git a/backend/src/main/java/io/dataease/auth/util/JWTUtils.java b/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
index 9b171a936f..8dbed6faf2 100644
--- a/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
+++ b/backend/src/main/java/io/dataease/auth/util/JWTUtils.java
@@ -13,6 +13,8 @@ import org.apache.commons.lang3.StringUtils;
 import org.apache.shiro.authc.AuthenticationException;
 import org.springframework.cache.Cache;
 import org.springframework.cache.CacheManager;
+import org.springframework.core.env.Environment;
+
 import java.util.Date;
 
 
@@ -22,7 +24,9 @@ public class JWTUtils {
     // token过期时间1min (过期会自动刷新续命 目的是避免一直都是同一个token )
     private static final long EXPIRE_TIME = 1*60*1000;
     // 登录间隔时间10min 超过这个时间强制重新登录
-    private static final long Login_Interval = 10*60*1000;
+     private static long Login_Interval;
+
+
 
 
     /**
@@ -79,6 +83,11 @@ public class JWTUtils {
      * @return
      */
     public static boolean loginExpire(String token){
+        if (Login_Interval==0) {
+            String property = CommonBeanFactory.getBean(Environment.class).getProperty("dataease.login_timeout");
+            int seconds = StringUtils.isNotEmpty(property) ? Integer.parseInt(property): (10*60);
+            Login_Interval = seconds * 1000;
+        }
         Long now = System.currentTimeMillis();
         Long lastOperateTime = tokenLastOperateTime(token);
         boolean isExpire = false;
@@ -169,4 +178,5 @@ public class JWTUtils {
         long now = System.currentTimeMillis();
         tokens_expire.put(token, now);
     }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
index 3d491518ba..2a90d706f9 100644
--- a/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
+++ b/backend/src/main/java/io/dataease/controller/dataset/DataSetTableController.java
@@ -63,9 +63,9 @@ public class DataSetTableController {
         return dataSetTableService.getData(dataSetTableRequest);
     }
 
-    @PostMapping("getPreviewData")
-    public Map<String, Object> getPreviewData(@RequestBody DataSetTableRequest dataSetTableRequest) throws Exception {
-        return dataSetTableService.getPreviewData(dataSetTableRequest);
+    @PostMapping("getPreviewData/{page}/{pageSize}")
+    public Map<String, Object> getPreviewData(@RequestBody DataSetTableRequest dataSetTableRequest, @PathVariable Integer page, @PathVariable Integer pageSize) throws Exception {
+        return dataSetTableService.getPreviewData(dataSetTableRequest, page, pageSize);
     }
 
     @PostMapping("sqlPreview")
diff --git a/backend/src/main/java/io/dataease/dto/dataset/DataSetPreviewPage.java b/backend/src/main/java/io/dataease/dto/dataset/DataSetPreviewPage.java
new file mode 100644
index 0000000000..18aa7fd859
--- /dev/null
+++ b/backend/src/main/java/io/dataease/dto/dataset/DataSetPreviewPage.java
@@ -0,0 +1,17 @@
+package io.dataease.dto.dataset;
+
+import lombok.Getter;
+import lombok.Setter;
+
+/**
+ * @Author gin
+ * @Date 2021/4/28 11:13 上午
+ */
+@Getter
+@Setter
+public class DataSetPreviewPage {
+    private Integer total = 0;
+    private Integer show = 0;
+    private Integer page = 1;
+    private Integer pageSize = 100;
+}
diff --git a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
index 7e5f034ad0..2941638e8e 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -14,6 +14,7 @@ import io.dataease.datasource.dto.TableFiled;
 import io.dataease.datasource.provider.DatasourceProvider;
 import io.dataease.datasource.provider.ProviderFactory;
 import io.dataease.datasource.request.DatasourceRequest;
+import io.dataease.dto.dataset.DataSetPreviewPage;
 import io.dataease.dto.dataset.DataTableInfoDTO;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
@@ -34,7 +35,6 @@ import javax.annotation.Resource;
 import java.io.*;
 import java.math.BigDecimal;
 import java.nio.charset.StandardCharsets;
-import java.sql.ResultSet;
 import java.text.MessageFormat;
 import java.util.*;
 import java.util.stream.Collectors;
@@ -172,7 +172,7 @@ public class DataSetTableService {
         return datasourceProvider.getData(datasourceRequest);
     }
 
-    public Map<String, Object> getPreviewData(DataSetTableRequest dataSetTableRequest) throws Exception {
+    public Map<String, Object> getPreviewData(DataSetTableRequest dataSetTableRequest, Integer page, Integer pageSize) throws Exception {
         DatasetTableField datasetTableField = DatasetTableField.builder().build();
         datasetTableField.setTableId(dataSetTableRequest.getId());
         datasetTableField.setChecked(Boolean.TRUE);
@@ -183,6 +183,14 @@ public class DataSetTableService {
         DatasetTable datasetTable = datasetTableMapper.selectByPrimaryKey(dataSetTableRequest.getId());
 
         List<String[]> data = new ArrayList<>();
+        DataSetPreviewPage dataSetPreviewPage = new DataSetPreviewPage();
+        dataSetPreviewPage.setShow(Integer.valueOf(dataSetTableRequest.getRow()));
+        dataSetPreviewPage.setPage(page);
+        dataSetPreviewPage.setPageSize(pageSize);
+        int realSize = Integer.parseInt(dataSetTableRequest.getRow()) < pageSize ? Integer.parseInt(dataSetTableRequest.getRow()) : pageSize;
+        if (page == Integer.parseInt(dataSetTableRequest.getRow()) / pageSize + 1) {
+            realSize = Integer.parseInt(dataSetTableRequest.getRow()) % pageSize;
+        }
         if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "db")) {
             Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
             DatasourceProvider datasourceProvider = ProviderFactory.getProvider(ds.getType());
@@ -190,11 +198,18 @@ public class DataSetTableService {
             datasourceRequest.setDatasource(ds);
 
             String table = dataTableInfoDTO.getTable();
-            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT 0," + dataSetTableRequest.getRow());
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT " + (page - 1) * realSize + "," + realSize);
 
             try {
                 data.addAll(datasourceProvider.getData(datasourceRequest));
             } catch (Exception e) {
+                e.printStackTrace();
+            }
+            try {
+                datasourceRequest.setQuery(createQueryCountSQL(ds.getType(), table));
+                dataSetPreviewPage.setTotal(Integer.valueOf(datasourceProvider.getData(datasourceRequest).get(0)[0]));
+            } catch (Exception e) {
+                e.printStackTrace();
             }
         } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "sql")) {
             Datasource ds = datasourceMapper.selectByPrimaryKey(dataSetTableRequest.getDataSourceId());
@@ -203,11 +218,18 @@ public class DataSetTableService {
             datasourceRequest.setDatasource(ds);
 
             String sql = dataTableInfoDTO.getSql();
-            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray) + " LIMIT 0," + dataSetTableRequest.getRow());
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray) + " LIMIT " + (page - 1) * realSize + "," + realSize);
 
             try {
                 data.addAll(datasourceProvider.getData(datasourceRequest));
             } catch (Exception e) {
+                e.printStackTrace();
+            }
+            try {
+                datasourceRequest.setQuery(createQueryCountSQL(ds.getType(), " (" + sql + ") AS tmp "));
+                dataSetPreviewPage.setTotal(Integer.valueOf(datasourceProvider.getData(datasourceRequest).get(0)[0]));
+            } catch (Exception e) {
+                e.printStackTrace();
             }
         } else if (StringUtils.equalsIgnoreCase(datasetTable.getType(), "excel")) {
 
@@ -229,6 +251,7 @@ public class DataSetTableService {
         Map<String, Object> map = new HashMap<>();
         map.put("fields", fields);
         map.put("data", jsonArray);
+        map.put("page", dataSetPreviewPage);
 
         return map;
     }
@@ -314,6 +337,18 @@ public class DataSetTableService {
         }
     }
 
+    public String createQueryCountSQL(String type, String table) {
+        DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
+        switch (datasourceType) {
+            case mysql:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+            case sqlServer:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+            default:
+                return MessageFormat.format("SELECT count(*) FROM {0}", table);
+        }
+    }
+
     public String createQuerySQL(String type, String table, String[] fields) {
         DatasourceTypes datasourceType = DatasourceTypes.valueOf(type);
         switch (datasourceType) {
diff --git a/backend/src/main/java/io/dataease/service/sys/SysUserService.java b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
index 85ccfc0ef2..096eb96511 100644
--- a/backend/src/main/java/io/dataease/service/sys/SysUserService.java
+++ b/backend/src/main/java/io/dataease/service/sys/SysUserService.java
@@ -15,12 +15,12 @@ import io.dataease.controller.sys.base.BaseGridRequest;
 import io.dataease.controller.sys.request.SysUserCreateRequest;
 import io.dataease.controller.sys.request.SysUserPwdRequest;
 import io.dataease.controller.sys.request.SysUserStateRequest;
-import io.dataease.controller.sys.request.UserGridRequest;
 import io.dataease.controller.sys.response.SysUserGridResponse;
 import io.dataease.controller.sys.response.SysUserRole;
 import org.apache.commons.collections4.CollectionUtils;
 import org.apache.commons.lang3.ObjectUtils;
 import org.apache.commons.lang3.StringUtils;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.cache.annotation.CacheEvict;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -31,7 +31,10 @@ import java.util.stream.Collectors;
 @Service
 public class SysUserService {
 
-    private final static String DEFAULT_PWD = "DataEase123..";
+    //private final static String DEFAULT_PWD = "DataEase123..";
+
+    @Value("${dataease.init_password:DataEase123..}")
+    private String DEFAULT_PWD;
 
     @Resource
     private SysUserMapper sysUserMapper;
@@ -89,6 +92,7 @@ public class SysUserService {
     }
 
 
+    @CacheEvict(value = AuthConstants.USER_CACHE_NAME, key = "'user' + #request.userId")
     public int updateStatus(SysUserStateRequest request){
         SysUser sysUser = new SysUser();
         sysUser.setUserId(request.getUserId());
diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties
index 93567fed38..69f15f7e2a 100644
--- a/backend/src/main/resources/application.properties
+++ b/backend/src/main/resources/application.properties
@@ -62,6 +62,10 @@ spring.mvc.log-request-details=true
 pagehelper.PageRowBounds=true
 #excel等用户上传文件路径
 upload.file.path=/opt/dataease/data/upload/
+#用户初始密码,如果不设置默认是DataEase123..
+dataease.init_password=DataEase123456
+#登录超时时间单位s 设置默认30分钟 如果雨不设置 默认10分钟也就是10*60
+dataease.login_timeout=1800
 
 
 
diff --git a/frontend/package.json b/frontend/package.json
index dac5d81076..65c1a2ba34 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,7 @@
     "element-resize-detector": "^1.2.2",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.5",
-    "fit2cloud-ui": "^0.1.12",
+    "fit2cloud-ui": "^1.1.1",
     "html2canvas": "^1.0.0-rc.7",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
diff --git a/frontend/src/components/back-button/index.vue b/frontend/src/components/back-button/index.vue
new file mode 100644
index 0000000000..6d72ad6009
--- /dev/null
+++ b/frontend/src/components/back-button/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-icon name="back" class="back-button" @click.native="jump" />
+</template>
+
+<script>
+export default {
+  name: 'BackButton',
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    path: String,
+    // eslint-disable-next-line vue/require-default-prop
+    name: String,
+    // eslint-disable-next-line vue/require-default-prop
+    to: Object
+  },
+  methods: {
+    jump() {
+      const { path, name, to } = this
+      if (path) {
+        this.$router.push(path)
+      }
+      if (name) {
+        this.$router.push({ name: this.name })
+      }
+      if (to) {
+        this.$router.push(to)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
+
+.back-button {
+  cursor: pointer;
+  margin-right: 10px;
+  font-weight: 600;
+
+  &:active {
+    transform: scale(0.85);
+  }
+}
+</style>
diff --git a/frontend/src/components/business/LayoutContent.vue b/frontend/src/components/business/LayoutContent.vue
index daabdb6ee3..b1365a2d95 100644
--- a/frontend/src/components/business/LayoutContent.vue
+++ b/frontend/src/components/business/LayoutContent.vue
@@ -1,17 +1,45 @@
 <template>
   <div class="content-container">
+    <div v-if="$slots.header || header" class="content-container__header">
+      <slot name="header">
+        <back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
+        {{ header }}
+      </slot>
+    </div>
+    <div v-if="$slots.toolbar" class="content-container__toolbar">
+      <slot name="toolbar" />
+    </div>
     <slot />
   </div>
 </template>
 
 <script>
+import BackButton from '@/components/back-button'
+
 export default {
-  name: 'LayoutContent'
+  name: 'LayoutContent',
+  components: { BackButton },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    header: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backPath: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backName: String,
+    // eslint-disable-next-line vue/require-default-prop
+    backTo: Object
+  },
+  computed: {
+    showBack({ backPath, backName, backTo }) {
+      return backPath || backName || backTo
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import "~@/styles/variables";
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
 .content-container {
   transition: 0.3s;
@@ -23,5 +51,15 @@ export default {
   border-radius: 4px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
   box-sizing: border-box;
+
+  .content-container__header {
+    line-height: 60px;
+    font-size: 18px;
+  }
+
+  .content-container__toolbar {
+    @include flex-row(space-between, center);
+    margin-bottom: 10px;
+  }
 }
 </style>
diff --git a/frontend/src/components/business/complex-table/index.vue b/frontend/src/components/business/complex-table/index.vue
index fe330ee3a0..9c625a4edb 100644
--- a/frontend/src/components/business/complex-table/index.vue
+++ b/frontend/src/components/business/complex-table/index.vue
@@ -1,3 +1,4 @@
+
 <template>
   <div class="complex-table">
     <div v-if="$slots.header || header" class="complex-table__header">
@@ -5,12 +6,16 @@
     </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>
+        <slot name="toolbar" />
+      </div>
+      <fu-search-bar v-bind="searchConfig" @exec="search">
+        <template #complex>
+          <slot name="complex" />
+        </template>
+        <slot name="buttons" />
+        <fu-table-column-select :columns="columns" />
+      </fu-search-bar>
     </div>
 
     <div class="complex-table__body">
@@ -41,13 +46,9 @@ export default {
       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() {
@@ -72,12 +73,16 @@ export default {
 .complex-table {
   .complex-table__header {
     @include flex-row(flex-start, center);
-    height: 60px;
-    font-size: 20px;
+    line-height: 60px;
+    font-size: 18px;
   }
 
   .complex-table__toolbar {
-    @include flex-row(flex-end, center);
+    @include flex-row(space-between, center);
+
+    .fu-search-bar {
+      width: auto;
+    }
   }
 
   .complex-table__pagination {
diff --git a/frontend/src/components/business/tree-table/index.vue b/frontend/src/components/business/tree-table/index.vue
index c253f9621d..fde1775c67 100644
--- a/frontend/src/components/business/tree-table/index.vue
+++ b/frontend/src/components/business/tree-table/index.vue
@@ -5,12 +5,22 @@
     </div>
 
     <div v-if="$slots.toolbar || searchConfig" class="complex-table__toolbar">
-      <slot name="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>
+      </slot> -->
+      <div>
+        <slot name="toolbar" />
+      </div>
+      <fu-search-bar v-bind="searchConfig" @exec="search">
+        <template #complex>
+          <slot name="complex" />
+        </template>
+        <slot name="buttons" />
+        <fu-table-column-select :columns="columns" />
+      </fu-search-bar>
     </div>
 
     <div class="complex-table__body">
@@ -73,12 +83,16 @@ export default {
 .complex-table {
   .complex-table__header {
     @include flex-row(flex-start, center);
-    height: 60px;
-    font-size: 20px;
+    line-height: 60px;
+    font-size: 18px;
   }
 
   .complex-table__toolbar {
-    @include flex-row(flex-end, center);
+    @include flex-row(space-between, center);
+
+    .fu-search-bar {
+      width: auto;
+    }
   }
 
   .complex-table__pagination {
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4297f9f0b3..562a6918c6 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -791,7 +791,11 @@ export default {
     type: '类型',
     create_by: '创建者',
     create_time: '创建时间',
-    preview_100_data: '预览前100行数据'
+    preview_100_data: '预览前100行数据',
+    preview_show: '显示',
+    preview_item: '条数据',
+    preview_total: '共',
+    pls_input_less_9: '请输入9位以内的正整数'
   },
   datasource: {
     datasource: '数据源',
diff --git a/frontend/src/layout/components/AppMain.vue b/frontend/src/layout/components/AppMain.vue
index 475cfda6e5..b31f25780d 100644
--- a/frontend/src/layout/components/AppMain.vue
+++ b/frontend/src/layout/components/AppMain.vue
@@ -2,9 +2,9 @@
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <el-main class="ms-main-container">
-        <keep-alive>
-          <router-view :key="key" />
-        </keep-alive>
+        <!-- <keep-alive> -->
+        <router-view :key="key" />
+        <!-- </keep-alive> -->
       </el-main>
     </transition>
   </section>
diff --git a/frontend/src/styles/common/mixins.scss b/frontend/src/styles/common/mixins.scss
index 13c38117a0..91ed5a95f8 100644
--- a/frontend/src/styles/common/mixins.scss
+++ b/frontend/src/styles/common/mixins.scss
@@ -1,9 +1,16 @@
 @mixin flex-row($justify: flex-start, $align: stretch) {
-  display: flex;
-  @if $justify != flex-start {
-    justify-content: $justify;
+    display: flex;
+    @if $justify != flex-start {
+      justify-content: $justify;
+    }
+    @if $align != stretch {
+      align-items: $align;
+    }
   }
-  @if $align != stretch {
-    align-items: $align;
+  
+  @mixin variant($color, $background-color, $border-color) {
+    color: $color;
+    background-color: $background-color;
+    border-color: $border-color;
   }
-}
+  
\ No newline at end of file
diff --git a/frontend/src/styles/mixin.scss b/frontend/src/styles/mixin.scss
index f6e60a40ff..a02e67210f 100644
--- a/frontend/src/styles/mixin.scss
+++ b/frontend/src/styles/mixin.scss
@@ -36,4 +36,10 @@
     align-items: $align;
   }
 }
+
+@mixin variant($color, $background-color, $border-color) {
+    color: $color;
+    background-color: $background-color;
+    border-color: $border-color;
+  }
   
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index 629f4303a8..6571d9ad5f 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -88,6 +88,9 @@ export const BASE_BAR = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {},
   legend: {
     show: true,
@@ -114,6 +117,9 @@ export const HORIZONTAL_BAR = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {},
   legend: {
     show: true,
@@ -141,6 +147,9 @@ export const BASE_LINE = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {},
   legend: {
     show: true,
@@ -169,6 +178,9 @@ export const BASE_PIE = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {},
   legend: {
     show: true,
@@ -199,6 +211,9 @@ export const BASE_FUNNEL = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {
     trigger: 'item'
   },
@@ -252,6 +267,9 @@ export const BASE_RADAR = {
   title: {
     text: ''
   },
+  grid: {
+    containLabel: true
+  },
   tooltip: {},
   legend: {
     show: true,
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 75747febb3..2955d5d166 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -26,7 +26,7 @@
                 <el-radio-button label="right">{{ $t('chart.text_pos_right') }}</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
+            <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.text_v_position')" class="form-item">
               <el-radio-group v-model="titleForm.vPosition" size="mini" @change="changeTitleStyle">
                 <el-radio-button label="top">{{ $t('chart.text_pos_top') }}</el-radio-button>
                 <el-radio-button label="center">{{ $t('chart.text_pos_center') }}</el-radio-button>
diff --git a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
index da36e6547d..65bbfaca88 100644
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@@ -8,7 +8,7 @@
       >
         <el-col>
           <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
+            <el-form-item v-show="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
               <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
                 <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                   <div style="float: left">
@@ -19,16 +19,16 @@
               </el-select>
             </el-form-item>
 
-            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
+            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
               <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
             </el-form-item>
-            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
+            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
               <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
             </el-form-item>
-            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
+            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
               <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
             </el-form-item>
-            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
+            <el-form-item v-show="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
               <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
             </el-form-item>
 
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index a3404a0d2d..fbbde9c6fc 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -7,7 +7,7 @@
         trigger="click"
       >
         <el-col>
-          <el-form v-if="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('bar')" ref="sizeFormBar" :model="sizeForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.adapt')" class="form-item">
               <el-checkbox v-model="sizeForm.barDefault" @change="changeBarSizeCase">{{ $t('chart.adapt') }}</el-checkbox>
             </el-form-item>
@@ -19,7 +19,7 @@
             </el-form-item>
           </el-form>
 
-          <el-form v-if="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('line')" ref="sizeFormLine" :model="sizeForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.line_width')" class="form-item form-item-slider">
               <el-slider v-model="sizeForm.lineWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="10" @change="changeBarSizeCase" />
             </el-form-item>
@@ -50,7 +50,7 @@
             </el-form-item>
           </el-form>
 
-          <el-form v-if="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('pie')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.pie_inner_radius')" class="form-item form-item-slider">
               <el-slider v-model="sizeForm.pieInnerRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
             </el-form-item>
@@ -58,7 +58,7 @@
               <el-slider v-model="sizeForm.pieOuterRadius" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
             </el-form-item>
 
-            <span v-if="chart.type && chart.type.includes('pie-rose')">
+            <span v-show="chart.type && chart.type.includes('pie-rose')">
               <el-form-item :label="$t('chart.rose_type')" class="form-item">
                 <el-radio-group v-model="sizeForm.pieRoseType" size="mini" @change="changeBarSizeCase">
                   <el-radio-button label="radius">{{ $t('chart.radius_mode') }}</el-radio-button>
@@ -71,13 +71,13 @@
             </span>
           </el-form>
 
-          <el-form v-if="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('funnel')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.funnel_width')" class="form-item form-item-slider">
               <el-slider v-model="sizeForm.funnelWidth" show-input :show-input-controls="false" input-size="mini" :min="0" :max="100" @change="changeBarSizeCase" />
             </el-form-item>
           </el-form>
 
-          <el-form v-if="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('radar')" ref="sizeFormPie" :model="sizeForm" label-width="80px" size="mini">
             <el-form-item :label="$t('chart.shape')" class="form-item">
               <el-radio-group v-model="sizeForm.radarShape" size="mini" @change="changeBarSizeCase">
                 <el-radio-button label="polygon">{{ $t('chart.polygon') }}</el-radio-button>
@@ -86,7 +86,7 @@
             </el-form-item>
           </el-form>
 
-          <el-form v-if="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+          <el-form v-show="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
             <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
               <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
                 <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
diff --git a/frontend/src/views/chart/components/table/TableNormal.vue b/frontend/src/views/chart/components/table/TableNormal.vue
index 3e99494190..6a62794a16 100644
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@@ -164,7 +164,7 @@ export default {
       // console.log(s_table)
       let s = ''
       for (const i in this.table_header_class) {
-        s += i + ':' + this.table_header_class[i] + ';'
+        s += (i === 'fontSize' ? 'font-size' : i) + ':' + this.table_header_class[i] + ';'
       }
       s_table.setAttribute('style', s)
     },
@@ -176,23 +176,28 @@ export default {
       }
     },
     summaryMethod({ columns, data }) {
+      const that = this
       const means = [] // 合计
       columns.forEach((column, columnIndex) => {
         if (columnIndex === 0) {
           means.push('合计')
         } else {
-          const values = data.map(item => Number((item[column.property] + '').trim() === '' ? 'a' : item[column.property]))
-          // 合计
-          if (!values.every(value => isNaN(value))) {
-            means[columnIndex] = values.reduce((prev, curr) => {
-              const value = Number(curr)
-              if (!isNaN(value)) {
-                return prev + curr
-              } else {
-                return prev
-              }
-            }, 0)
-            means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
+          if (columnIndex >= that.chart.data.fields.length - that.chart.data.series.length) {
+            const values = data.map(item => Number(item[column.property]))
+            // 合计
+            if (!values.every(value => isNaN(value))) {
+              means[columnIndex] = values.reduce((prev, curr) => {
+                const value = Number(curr)
+                if (!isNaN(value)) {
+                  return prev + curr
+                } else {
+                  return prev
+                }
+              }, 0)
+              means[columnIndex] = (means[columnIndex] + '').includes('.') ? means[columnIndex].toFixed(2) : means[columnIndex]
+            } else {
+              means[columnIndex] = ''
+            }
           } else {
             means[columnIndex] = ''
           }
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index ff2378ea05..906c6ca9e5 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -129,14 +129,14 @@
             <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
               <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
               <size-selector class="attr-selector" :chart="chart" @onSizeChange="onSizeChange" />
-              <label-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
-              <tooltip-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
+              <label-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLabelChange="onLabelChange" />
+              <tooltip-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onTooltipChange="onTooltipChange" />
             </el-tab-pane>
             <el-tab-pane :label="$t('chart.module_style')" class="padding-lr">
               <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />
-              <legend-selector v-if="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
-              <x-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
-              <y-axis-selector v-if="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
+              <legend-selector v-show="!view.type.includes('table')" class="attr-selector" :chart="chart" @onLegendChange="onLegendChange" />
+              <x-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeXAxisForm="onChangeXAxisForm" />
+              <y-axis-selector v-show="view.type.includes('bar') || view.type.includes('line')" class="attr-selector" :chart="chart" @onChangeYAxisForm="onChangeYAxisForm" />
               <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
             </el-tab-pane>
           </el-tabs>
diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index b19f47353c..13a835d6ed 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -1,61 +1,59 @@
 <template>
-  <el-col>
-    <el-row>
-      <el-row style="height: 26px;">
-        <span style="line-height: 26px;">
-          {{ $t('dataset.add_db_table') }}
-        </span>
-        <el-row style="float: right">
-          <el-button size="mini" @click="cancel">
-            {{ $t('dataset.cancel') }}
-          </el-button>
-          <el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
-            {{ $t('dataset.confirm') }}
-          </el-button>
-        </el-row>
-      </el-row>
-      <el-divider />
-      <el-row>
-        <el-form :inline="true">
-          <el-form-item class="form-item">
-            <el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
-              <el-option
-                v-for="item in options"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="form-item">
-            <el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
-              <el-option :label="$t('dataset.direct_connect')" value="0" />
-              <el-option :label="$t('dataset.sync_data')" value="1" />
-            </el-select>
-          </el-form-item>
-          <el-form-item class="form-item" style="float: right;">
-            <el-input
-              v-model="searchTable"
-              size="mini"
-              :placeholder="$t('dataset.search')"
-              prefix-icon="el-icon-search"
-              clearable
-            />
-          </el-form-item>
-        </el-form>
-      </el-row>
-      <el-row style="overflow: auto;height: 60vh;">
-        <el-checkbox-group v-model="checkTableList" size="small">
-          <el-checkbox
-            v-for="t in tableData"
-            :key="t"
-            border
-            :label="t"
-          />
-        </el-checkbox-group>
+  <el-row style="display: flex;flex-direction: column;height: 100%">
+    <el-row style="height: 26px;">
+      <span style="line-height: 26px;">
+        {{ $t('dataset.add_db_table') }}
+      </span>
+      <el-row style="float: right">
+        <el-button size="mini" @click="cancel">
+          {{ $t('dataset.cancel') }}
+        </el-button>
+        <el-button size="mini" type="primary" :disabled="checkTableList.length < 1" @click="save">
+          {{ $t('dataset.confirm') }}
+        </el-button>
       </el-row>
     </el-row>
-  </el-col>
+    <el-divider />
+    <el-row>
+      <el-form :inline="true">
+        <el-form-item class="form-item">
+          <el-select v-model="dataSource" filterable :placeholder="$t('dataset.pls_slc_data_source')" size="mini">
+            <el-option
+              v-for="item in options"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item">
+          <el-select v-model="mode" filterable :placeholder="$t('dataset.connect_mode')" size="mini">
+            <el-option :label="$t('dataset.direct_connect')" value="0" />
+            <el-option :label="$t('dataset.sync_data')" value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item" style="float: right;">
+          <el-input
+            v-model="searchTable"
+            size="mini"
+            :placeholder="$t('dataset.search')"
+            prefix-icon="el-icon-search"
+            clearable
+          />
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-col style="overflow-y: auto;">
+      <el-checkbox-group v-model="checkTableList" size="small">
+        <el-checkbox
+          v-for="t in tableData"
+          :key="t"
+          border
+          :label="t"
+        />
+      </el-checkbox-group>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index ae8010ad0f..1839633ac3 100644
--- a/frontend/src/views/dataset/common/DatasetTableData.vue
+++ b/frontend/src/views/dataset/common/DatasetTableData.vue
@@ -58,7 +58,7 @@ export default {
       this.resetData()
       if (this.table.id) {
         this.table.row = 10
-        post('/dataset/table/getPreviewData', this.table).then(response => {
+        post('/dataset/table/getPreviewData/1/10', this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
           const datas = this.data
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 357b40f023..d9cd02d34e 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -34,6 +34,32 @@
         </template>
       </ux-table-column>
     </ux-grid>
+    <el-row style="margin-top: 4px;">
+      <span class="table-count">
+        <span v-if="page.total <= currentPage.show">
+          {{ $t('dataset.preview_total') }}
+          <span class="span-number">{{ page.total }}</span>
+          {{ $t('dataset.preview_item') }}
+        </span>
+        <span v-if="page.total > currentPage.show">
+          {{ $t('dataset.preview_show') }}
+          <span class="span-number">{{ currentPage.show }}</span>
+          {{ $t('dataset.preview_item') }}
+          ，{{ $t('dataset.preview_total') }}
+          <span class="span-number">{{ page.total }}</span>
+          {{ $t('dataset.preview_item') }}
+        </span>
+      </span>
+      <el-pagination
+        :current-page="currentPage.page"
+        :page-sizes="[100]"
+        :page-size="currentPage.pageSize"
+        :pager-count="5"
+        layout="sizes, prev, pager, next"
+        :total="currentPage.show"
+        @current-change="pageChange"
+      />
+    </el-row>
   </el-col>
 </template>
 
@@ -56,11 +82,20 @@ export default {
     form: {
       type: Object,
       required: true
+    },
+    page: {
+      type: Object,
+      required: false
     }
   },
   data() {
     return {
-      height: 500
+      height: 500,
+      currentPage: {
+        page: 1,
+        pageSize: 100,
+        show: parseInt(this.form.row)
+      }
     }
   },
   computed: {
@@ -69,28 +104,68 @@ export default {
     data() {
       const datas = this.data
       this.$refs.plxTable.reloadData(datas)
+    },
+    page() {
+      if (this.page.total < parseInt(this.form.row)) {
+        this.currentPage.show = this.page.total
+      } else {
+        this.currentPage.show = parseInt(this.form.row)
+      }
     }
   },
   mounted() {
-    window.onresize = () => {
-      return (() => {
-        this.height = window.innerHeight / 2
-      })()
-    }
-    this.height = window.innerHeight / 2
-  },
-  activated() {
+    this.init()
   },
   methods: {
+    init() {
+      this.calHeight()
+    },
+    calHeight() {
+      const that = this
+      setTimeout(function() {
+        const currentHeight = document.documentElement.clientHeight
+        that.height = currentHeight - 56 - 30 - 26 - 25 - 55 - 38 - 28 - 10
+      }, 10)
+    },
     reSearch() {
-      this.$emit('reSearch', this.form)
+      if (!this.form.row || this.form.row === '' || this.form.row.length > 8 || isNaN(Number(this.form.row)) || String(this.form.row).includes('.')) {
+        this.$message({
+          message: this.$t('dataset.pls_input_less_9'),
+          type: 'error',
+          showClose: true
+        })
+        return
+      }
+      this.currentPage.show = parseInt(this.form.row)
+      this.currentPage.page = 1
+      this.$emit('reSearch', { form: this.form, page: this.currentPage })
+    },
+    pageChange(val) {
+      this.currentPage.page = val
+      // console.log(this.currentPage)
+      this.$emit('reSearch', { form: this.form, page: this.currentPage })
     }
   }
 }
 </script>
 
 <style scoped>
-.row-style>>>.el-form-item__label{
-  font-size: 12px;
-}
+  .row-style>>>.el-form-item__label{
+    font-size: 12px;
+  }
+  .row-style>>>.el-form-item--mini.el-form-item{
+    margin-bottom: 10px;
+  }
+  .el-pagination{
+    float: right;
+  }
+  span{
+    font-size: 14px;
+  }
+  .span-number{
+    color: #f18126;
+  }
+  .table-count{
+    color: #606266;
+  }
 </style>
diff --git a/frontend/src/views/dataset/data/UpdateInfo.vue b/frontend/src/views/dataset/data/UpdateInfo.vue
index f38e806d28..d883bb07b8 100644
--- a/frontend/src/views/dataset/data/UpdateInfo.vue
+++ b/frontend/src/views/dataset/data/UpdateInfo.vue
@@ -464,9 +464,11 @@ export default {
       })
     },
     handleSizeChange(val) {
+      this.page.pageSize = val
       this.listTaskLog()
     },
     handleCurrentChange(val) {
+      this.page.currentPage = val
       this.listTaskLog()
     },
     resetTaskForm() {
diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index de610cf5a8..e7a73a12e8 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -1,93 +1,90 @@
 <template>
-  <el-col>
-    <el-row>
-      <el-row style="height: 26px;">
-        <span v-show="false">{{ tableId }}</span>
-        <el-popover
-          placement="right-start"
-          width="400"
-          trigger="click"
-          @show="showTab"
-          @hide="hideTab"
-        >
-          <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
-          <span slot="reference" style="line-height: 26px;cursor: pointer;">
-            {{ table.name }}
-          </span>
-        </el-popover>
-        <el-row style="float: right">
-          <el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
-            {{ $t('dataset.edit_sql') }}
-          </el-button>
-          <el-button size="mini" @click="edit">
-            {{ $t('dataset.edit') }}
-          </el-button>
-          <!--        <el-button size="mini" type="primary" @click="createChart">-->
-          <!--          {{$t('dataset.create_view')}}-->
-          <!--        </el-button>-->
-        </el-row>
+  <el-row style="height: 100%;overflow-y: hidden;width: 100%;">
+    <el-row style="height: 26px;">
+      <el-popover
+        placement="right-start"
+        width="400"
+        trigger="click"
+        @show="showTab"
+        @hide="hideTab"
+      >
+        <dataset-chart-detail type="dataset" :data="table" :tab-status="tabStatus" />
+        <span slot="reference" style="line-height: 26px;cursor: pointer;">
+          {{ table.name }}
+        </span>
+      </el-popover>
+      <el-row style="float: right">
+        <el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
+          {{ $t('dataset.edit_sql') }}
+        </el-button>
+        <el-button size="mini" @click="edit">
+          {{ $t('dataset.edit') }}
+        </el-button>
+        <!--        <el-button size="mini" type="primary" @click="createChart">-->
+        <!--          {{$t('dataset.create_view')}}-->
+        <!--        </el-button>-->
       </el-row>
-      <el-divider />
-
-      <el-tabs v-model="tabActive">
-        <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
-          <tab-data-preview :table="table" :fields="fields" :data="data" :form="tableViewRowForm" @reSearch="reSearch" />
-        </el-tab-pane>
-        <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
-          关联视图 TODO
-        </el-tab-pane>
-        <el-tab-pane v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
-          <update-info :table="table" />
-        </el-tab-pane>
-      </el-tabs>
-
-      <el-dialog :title="table.name" :visible.sync="editField" :fullscreen="true" :show-close="false" class="dialog-css">
-        <el-table :data="tableFields" size="mini" max-height="600px">
-          <el-table-column property="type" :label="$t('dataset.field_type')" width="100">
-            <template slot-scope="scope">
-              <span v-if="scope.row.deType === 0">
-                <svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
-                {{ $t('dataset.text') }}
-              </span>
-              <span v-if="scope.row.deType === 1">
-                <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
-                {{ $t('dataset.time') }}
-              </span>
-              <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
-                <svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
-                {{ $t('dataset.value') }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.name" size="mini" />
-            </template>
-          </el-table-column>
-          <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
-          <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
-            <template slot-scope="scope">
-              <el-checkbox v-model="scope.row.checked" />
-            </template>
-          </el-table-column>
-          <!--下面这一列占位-->
-          <el-table-column property="" />
-        </el-table>
-        <div slot="footer" class="dialog-footer">
-          <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
-          <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
-        </div>
-      </el-dialog>
-
-      <!--    <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
-      <!--      <chart-edit/>-->
-      <!--    </el-dialog>-->
     </el-row>
-  </el-col>
+    <el-divider />
+
+    <el-tabs v-model="tabActive">
+      <el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
+        <tab-data-preview :table="table" :fields="fields" :data="data" :page="page" :form="tableViewRowForm" @reSearch="reSearch" />
+      </el-tab-pane>
+      <el-tab-pane :label="$t('dataset.join_view')" name="joinView">
+        关联视图 TODO
+      </el-tab-pane>
+      <el-tab-pane v-if="table.mode === 1 && (table.type === 'db' || table.type === 'sql')" :label="$t('dataset.update_info')" name="updateInfo">
+        <update-info :table="table" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog :title="table.name" :visible.sync="editField" :fullscreen="true" :show-close="false" class="dialog-css">
+      <el-table :data="tableFields" size="mini" :max-height="maxHeight">
+        <el-table-column property="type" :label="$t('dataset.field_type')" width="100">
+          <template slot-scope="scope">
+            <span v-if="scope.row.deType === 0">
+              <svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
+              {{ $t('dataset.text') }}
+            </span>
+            <span v-if="scope.row.deType === 1">
+              <svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
+              {{ $t('dataset.time') }}
+            </span>
+            <span v-if="scope.row.deType === 2 || scope.row.deType === 3">
+              <svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
+              {{ $t('dataset.value') }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column property="name" :label="$t('dataset.field_name')" width="180">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.name" size="mini" />
+          </template>
+        </el-table-column>
+        <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="180" />
+        <el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
+          <template slot-scope="scope">
+            <el-checkbox v-model="scope.row.checked" />
+          </template>
+        </el-table-column>
+        <!--下面这一列占位-->
+        <el-table-column property="" />
+      </el-table>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
+      </div>
+    </el-dialog>
+
+    <!--    <el-dialog title="view" :visible.sync="createViewDialog" :fullscreen="true">-->
+    <!--      <chart-edit/>-->
+    <!--    </el-dialog>-->
+  </el-row>
 </template>
 
 <script>
-import { getTable, getPreviewData, fieldList, batchEdit } from '@/api/dataset/dataset'
+import { getTable, post, fieldList, batchEdit } from '@/api/dataset/dataset'
 import TabDataPreview from './TabDataPreview'
 import UpdateInfo from './UpdateInfo'
 import DatasetChartDetail from '../common/DatasetChartDetail'
@@ -95,6 +92,12 @@ import DatasetChartDetail from '../common/DatasetChartDetail'
 export default {
   name: 'ViewTable',
   components: { DatasetChartDetail, UpdateInfo, TabDataPreview },
+  props: {
+    param: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
       createViewDialog: false,
@@ -104,23 +107,34 @@ export default {
       },
       fields: [],
       data: [],
+      page: {
+        page: 1,
+        pageSize: 100,
+        show: 1000
+      },
       tabActive: 'dataPreview',
       tableFields: [],
       tableViewRowForm: {
         row: 1000
       },
-      tabStatus: false
+      tabStatus: false,
+      maxHeight: 'auto'
     }
   },
-  computed: {
-    tableId() {
-      this.initTable(this.$store.state.dataset.table)
-      return this.$store.state.dataset.table
+  // computed: {
+  //   tableId() {
+  //     this.initTable(this.$store.state.dataset.table)
+  //     return this.$store.state.dataset.table
+  //   }
+  // },
+  watch: {
+    'param': function() {
+      this.initTable(this.param)
     }
   },
-  watch: {},
   mounted() {
-    this.initTable(this.$store.state.dataset.table)
+    this.maxHeight = (document.documentElement.clientHeight - 45 - 78) + 'px'
+    this.initTable(this.param)
   },
   methods: {
     initTable(id) {
@@ -132,17 +146,18 @@ export default {
         this.data = []
         getTable(id).then(response => {
           this.table = response.data
-          this.initPreviewData()
+          this.initPreviewData(this.page)
         })
       }
     },
 
-    initPreviewData() {
+    initPreviewData(page) {
       if (this.table.id) {
         this.table.row = this.tableViewRowForm.row
-        getPreviewData(this.table).then(response => {
+        post('/dataset/table/getPreviewData/' + page.page + '/' + page.pageSize, this.table).then(response => {
           this.fields = response.data.fields
           this.data = response.data.data
+          this.page = response.data.page
         })
       }
     },
@@ -182,8 +197,8 @@ export default {
     },
 
     reSearch(val) {
-      this.tableViewRowForm = val
-      this.initPreviewData()
+      this.tableViewRowForm = val.form
+      this.initPreviewData(val.page)
     },
 
     showTab() {
@@ -215,6 +230,6 @@ export default {
     padding: 10px 20px;
   }
   .dialog-css >>> .el-dialog__footer {
-    padding-top: 30px;
+    padding-top: 10px;
   }
 </style>
diff --git a/frontend/src/views/dataset/group/Group.vue b/frontend/src/views/dataset/group/Group.vue
index a488bf1e42..c7decf7396 100644
--- a/frontend/src/views/dataset/group/Group.vue
+++ b/frontend/src/views/dataset/group/Group.vue
@@ -204,7 +204,7 @@
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickMore('editTable',data,node)">
-                    {{ $t('dataset.edit') }}
+                    {{ $t('dataset.rename') }}
                   </el-dropdown-item>
                   <!--                  <el-dropdown-item icon="el-icon-right" :command="beforeClickMore('move',data,node)">-->
                   <!--                    {{$t('dataset.move_to')}}-->
@@ -523,10 +523,6 @@ export default {
 
     back() {
       this.sceneMode = false
-      //   const route = this.$store.state.permission.currentRoutes
-      //   console.log(route)
-      // this.$router.push('/dataset/index')
-      this.$store.dispatch('dataset/setSceneData', null)
       this.$emit('switchComponent', { name: '' })
     },
 
@@ -559,16 +555,7 @@ export default {
     },
 
     sceneClick(data, node) {
-      // console.log(data);
-      this.$store.dispatch('dataset/setTable', null)
-      this.$store.dispatch('dataset/setTable', data.id)
-      // this.$router.push({
-      //   name: 'table',
-      //   params: {
-      //     table: data
-      //   }
-      // })
-      this.$emit('switchComponent', { name: 'ViewTable' })
+      this.$emit('switchComponent', { name: 'ViewTable', param: data.id })
     },
 
     refresh() {
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index cb9a3e59ab..f6f63e7702 100644
--- a/frontend/src/views/system/datasource/index.vue
+++ b/frontend/src/views/system/datasource/index.vue
@@ -3,14 +3,14 @@
     <complex-table
       :data="data"
       :columns="columns"
-      :buttons="buttons"
-      :header="header"
+
       :search-config="searchConfig"
       :pagination-config="paginationConfig"
       @select="select"
       @search="search"
     >
-      <template #buttons>
+
+      <template #toolbar>
         <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" />
       </template>
 
@@ -154,7 +154,7 @@ export default {
       }
     }
   },
-  activated() {
+  mounted() {
     this.search()
   },
   methods: {
@@ -199,7 +199,7 @@ export default {
             this.$success(this.$t('commons.save_success'))
             this.search()
             this.dialogVisible = false
-          });
+          })
         } else {
           return false
         }
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index fd65bcdbdb..19a3c8b8ce 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -18,12 +18,11 @@
     > -->
     <tree-table
       :columns="columns"
-      :buttons="buttons"
-      :header="header"
+
       :search-config="searchConfig"
       @search="search"
     >
-      <template #buttons>
+      <template #toolbar>
         <fu-table-button v-permission="['dept:add']" icon="el-icon-circle-plus-outline" :label="$t('organization.create')" @click="create" />
       </template>
       <el-table
@@ -86,7 +85,7 @@
         </el-form-item>
 
         <el-form-item label="顶级组织" prop="top">
-          <el-radio-group v-model="form.top" style="width: 140px">
+          <el-radio-group v-model="form.top" style="width: 140px" @change="topChange">
             <el-radio :label="true">是</el-radio>
             <el-radio :label="false">否</el-radio>
           </el-radio-group>
@@ -199,7 +198,7 @@ export default {
       isLazy: true
     }
   },
-  activated() {
+  mounted() {
     this.form = Object.assign({}, this.defaultForm)
     this.search()
   },
@@ -507,6 +506,10 @@ export default {
         }
       })
       return roots
+    },
+    topChange(value) {
+    //   console.log(value)
+      !value && (this.depts = null)
     }
 
   }
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index cbd91334e6..1fb23fc3b1 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -2,12 +2,11 @@
   <layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
     <tree-table
       :columns="columns"
-      :buttons="buttons"
-      :header="header"
+
       :search-config="searchConfig"
       @search="initTableData"
     >
-      <template v-permission="['menu:add']" #buttons>
+      <template #toolbar>
         <fu-table-button v-permission="['menu:add']" icon="el-icon-circle-plus-outline" :label="$t('menu.create')" @click="create" />
       </template>
 
@@ -173,7 +172,7 @@ export default {
         }
       ],
       searchConfig: {
-        useQuickSearch: false,
+        useQuickSearch: true,
         useComplexSearch: false,
         quickPlaceholder: '按姓名搜索',
         components: [
@@ -195,7 +194,7 @@ export default {
 
     }
   },
-  activated() {
+  mounted() {
     this.form = Object.assign({}, this.defaultForm)
     this.initTableData()
   },
diff --git a/frontend/src/views/system/role/index.vue b/frontend/src/views/system/role/index.vue
index d5eda06f63..a80a4a55a5 100644
--- a/frontend/src/views/system/role/index.vue
+++ b/frontend/src/views/system/role/index.vue
@@ -7,14 +7,13 @@
           highlight-current-row
           :data="tableData"
           :columns="columns"
-          :buttons="buttons"
-          :header="header"
+
           :search-config="searchConfig"
           :pagination-config="paginationConfig"
           @search="search"
           @row-click="rowClick"
         >
-          <template #buttons>
+          <template #toolbar>
             <fu-table-button icon="el-icon-circle-plus-outline" :label="$t('role.add')" @click="create" />
           </template>
 
@@ -107,7 +106,8 @@ export default {
       rule: {
         name: [
           { required: true, message: '请输入名称', trigger: 'blur' }
-        ]
+        ],
+        code: [{ required: true, message: '请输入代码', trigger: 'blur' }]
       },
       currentRow: null,
       permission: {
@@ -145,7 +145,7 @@ export default {
   watch: {
     currentRow: 'currentRowChange'
   },
-  activated() {
+  mounted() {
     this.search()
   },
   methods: {
diff --git a/frontend/src/views/system/user/form.vue b/frontend/src/views/system/user/form.vue
new file mode 100644
index 0000000000..520684236f
--- /dev/null
+++ b/frontend/src/views/system/user/form.vue
@@ -0,0 +1,262 @@
+<template>
+  <layout-content :header="formType=='add' ? $t('user.create') : $t('user.modify')" back-name="用户管理">
+    <el-form ref="createUserForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
+      <el-form-item label="用户名" prop="username">
+        <el-input v-model="form.username" />
+      </el-form-item>
+      <el-form-item label="电话" prop="phone">
+        <el-input v-model="form.phone" />
+      </el-form-item>
+      <el-form-item label="昵称" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="form.email" />
+      </el-form-item>
+
+      <el-form-item label="性别">
+        <el-radio-group v-model="form.gender" style="width: 178px">
+          <el-radio label="男">男</el-radio>
+          <el-radio label="女">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="form.enabled" style="width: 140px">
+          <el-radio :label="1">启用</el-radio>
+          <el-radio :label="0">停用</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="部门" prop="dept">
+        <treeselect
+          v-model="form.deptId"
+          :options="depts"
+          :load-options="loadDepts"
+
+          placeholder="选择部门"
+        />
+      </el-form-item>
+      <el-form-item label="角色" prop="roleIds">
+        <el-select
+          v-model="form.roleIds"
+          style="width: 100%"
+          multiple
+          placeholder="请选择"
+          @remove-tag="deleteTag"
+          @change="changeRole"
+        >
+          <el-option
+            v-for="item in roles"
+            :key="item.name"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">保存</el-button>
+        <el-button @click="reset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { PHONE_REGEX } from '@/utils/validate'
+import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
+import { getDeptTree, treeByDeptId } from '@/api/system/dept'
+import { allRoles } from '@/api/system/role'
+import { addUser, editUser } from '@/api/system/user'
+export default {
+
+  components: { LayoutContent, Treeselect },
+  data() {
+    return {
+      form: {
+        roles: [{
+          id: ''
+        }]
+      },
+      rule: {
+        username: [
+          { required: true, message: this.$t('user.input_id'), trigger: 'blur' },
+          { min: 1, max: 50, message: this.$t('commons.input_limit', [1, 50]), trigger: 'blur' },
+          {
+            required: true,
+            pattern: '^[^\u4e00-\u9fa5]+$',
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
+        ],
+        nickName: [
+          { required: true, message: this.$t('user.input_name'), trigger: 'blur' },
+          { min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur' },
+          {
+            required: true,
+            message: this.$t('user.special_characters_are_not_supported'),
+            trigger: 'blur'
+          }
+        ],
+        phone: [
+          {
+            pattern: PHONE_REGEX,
+            message: this.$t('user.mobile_number_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        email: [
+          { required: true, message: this.$t('user.input_email'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^[a-zA-Z0-9_._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
+            message: this.$t('user.email_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        password: [
+          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        newPassword: [
+          { required: true, message: this.$t('user.input_password'), trigger: 'blur' },
+          {
+            required: true,
+            pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,30}$/,
+            message: this.$t('member.password_format_is_incorrect'),
+            trigger: 'blur'
+          }
+        ],
+        roleIds: [{ required: true, message: this.$t('user.input_roles'), trigger: 'change' }]
+
+      },
+      defaultForm: { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 1, deptId: null, phone: null, roleIds: [] },
+      depts: null,
+      roles: [],
+      roleDatas: [],
+      userRoles: [],
+      formType: 'add'
+    }
+  },
+
+  created() {
+    if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
+      const row = this.$router.currentRoute.params
+      this.edit(row)
+    } else {
+      this.create()
+    }
+    this.initRoles()
+  },
+  methods: {
+    create() {
+      this.depts = null
+      this.formType = 'add'
+      this.form = Object.assign({}, this.defaultForm)
+      console.log(this.form)
+    },
+    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()
+    },
+    initRoles() {
+      allRoles().then(res => {
+        this.roles = res.data
+      })
+    },
+    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 && !this.form.deptId) {
+        const _self = this
+        treeByDeptId(0).then(res => {
+          const results = res.data.map(node => {
+            if (node.hasChildren && !node.children) {
+              node.children = null
+            }
+            return node
+          })
+          _self.depts = results
+          callback()
+        })
+      }
+
+      if (action === LOAD_CHILDREN_OPTIONS) {
+        const _self = this
+        getDeptTree(parentNode.id).then(res => {
+          parentNode.children = res.data.map(function(obj) {
+            return _self.normalizer(obj)
+          })
+          callback()
+        })
+      }
+    },
+    normalizer(node) {
+      if (node.hasChildren) {
+        node.children = null
+      }
+      return {
+        id: node.deptId,
+        label: node.name,
+        children: node.children
+      }
+    },
+    deleteTag(value) {
+      this.userRoles.forEach(function(data, index) {
+        if (data.id === value) {
+          this.userRoles.splice(index, value)
+        }
+      }.bind(this))
+    },
+    changeRole(value) {
+      this.userRoles = []
+      value.forEach(function(data, index) {
+        const role = { id: data }
+        this.userRoles.push(role)
+      }.bind(this))
+    },
+    reset() {
+      this.$refs.createUserForm.resetFields()
+    },
+    save() {
+      this.$refs.createUserForm.validate(valid => {
+        if (valid) {
+          const method = this.formType === 'add' ? addUser : editUser
+          method(this.form).then(res => {
+            this.$success(this.$t('commons.save_success'))
+            this.backToList()
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    backToList() {
+      this.$router.push({ name: '用户管理' })
+    }
+  }
+}
+</script>
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index c999f3aa1f..76fd8e07e9 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -3,18 +3,16 @@
     <complex-table
       :data="data"
       :columns="columns"
-      :buttons="buttons"
-      :header="header"
+
       :search-config="searchConfig"
       :pagination-config="paginationConfig"
       @select="select"
       @search="search"
     >
-      <template #buttons>
+      <template #toolbar>
         <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 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" />
@@ -109,7 +107,6 @@
       </div>
     </el-dialog>
 
-    <!--Changing user password in system settings-->
     <el-dialog
       :close-on-click-modal="false"
       :title="$t('member.edit_password')"
@@ -145,9 +142,7 @@
 <script>
 import LayoutContent from '@/components/business/LayoutContent'
 import ComplexTable from '@/components/business/complex-table'
-// import conditionTable from '@/components/business/condition-table'
-// import CustomCondition from './CustomCondtion'
-// import { GridButton } from '@/components/GridButton'
+
 import { checkPermission } from '@/utils/permission'
 import { formatCondition } from '@/utils/index'
 import { PHONE_REGEX } from '@/utils/validate'
@@ -285,7 +280,7 @@ export default {
       }
     }
   },
-  activated() {
+  mounted() {
     // this.form = Object.assign({}, this.defaultForm);
     this.allRoles()
     this.search()
@@ -306,23 +301,28 @@ export default {
         this.paginationConfig.total = response.data.itemCount
       })
     },
-
     create() {
-      this.depts = null
-      this.formType = 'add'
-      this.form = Object.assign({}, this.defaultForm)
-      this.dialogVisible = true
+      this.$router.push({ name: '用户表单' })
     },
+    // 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()
+      this.$router.push({ name: '用户表单', params: row })
     },
+    // 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
       const tempForm = Object.assign({}, row)