From 47c39acb8dd7316c7f68d9cc08bbd7ed1ffb5330 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 12 Mar 2021 17:49:41 +0800
Subject: [PATCH 01/17] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0SQL=EF=BC=8CUI=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                       |  1 +
 frontend/src/views/chart/view/ChartEdit.vue |  2 +-
 frontend/src/views/dataset/add/AddSQL.vue   | 90 ++++++++++++++++++++-
 3 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 9cadee7c56..a4ecbb5dd3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue": "2.6.10",
+    "vue-codemirror": "^4.0.6",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.6",
     "vuedraggable": "^2.24.3",
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 7aa484402d..1085f3d544 100644
--- 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)
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 4d716fd4a4..f527948670 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -27,24 +27,84 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item class="form-item">
+            <el-input v-model="name" size="mini" placeholder="名称" />
+          </el-form-item>
         </el-form>
       </el-row>
+      <el-row>
+        <el-col style="width:35vh;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>
   </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/rubyblue.css'
+import 'codemirror/mode/python/python.js'
+import 'codemirror/mode/sql/sql.js'
+// theme css
+import 'codemirror/theme/3024-day.css'
+// 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'
 
 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-mysql',
+        theme: '3024-day',
+        hintOptions: {
+          completeSingle: true // 当匹配只有一项的时候是否自动补全
+        }
+      }
+    }
+  },
+  computed: {
+    codemirror() {
+      return this.$refs.myCm.codemirror
     }
   },
   watch: {},
@@ -57,6 +117,21 @@ export default {
         this.options = response.data
       })
     },
+
+    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)
+    },
     cancel() {
       // this.dataReset()
       this.$emit('switchComponent', { name: '' })
@@ -83,4 +158,15 @@ export default {
   .el-checkbox.is-bordered + .el-checkbox.is-bordered {
     margin-left: 0;
   }
+
+  .codemirror {
+    height: 40vh;
+    min-height: 300px;
+    width: 100%;
+    min-width: 200px;
+  }
+  .codemirror >>> .CodeMirror-scroll {
+    height: 40vh;
+    min-height: 300px;
+  }
 </style>

From 573641b4266c8470c0f5546f65e17b04f69f3025 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 12 Mar 2021 18:18:51 +0800
Subject: [PATCH 02/17] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0SQL=EF=BC=8CUI=E5=88=9D=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/add/AddSQL.vue | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index f527948670..feb132fb51 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -33,7 +33,7 @@
         </el-form>
       </el-row>
       <el-row>
-        <el-col style="width:35vh;min-width: 200px;">
+        <el-col style="min-width: 200px;">
           <codemirror
             ref="myCm"
             v-model="sql"
@@ -55,11 +55,8 @@ import { codemirror } from 'vue-codemirror'
 // 核心样式
 import 'codemirror/lib/codemirror.css'
 // 引入主题后还需要在 options 中指定主题才会生效
-import 'codemirror/theme/rubyblue.css'
-import 'codemirror/mode/python/python.js'
+import 'codemirror/theme/solarized.css'
 import 'codemirror/mode/sql/sql.js'
-// theme css
-import 'codemirror/theme/3024-day.css'
 // require active-line.js
 import 'codemirror/addon/selection/active-line.js'
 // closebrackets
@@ -94,10 +91,10 @@ export default {
         styleActiveLine: true,
         lineNumbers: true,
         line: true,
-        mode: 'text/x-mysql',
-        theme: '3024-day',
+        mode: 'text/x-sql',
+        theme: 'solarized',
         hintOptions: {
-          completeSingle: true // 当匹配只有一项的时候是否自动补全
+          completeSingle: true
         }
       }
     }
@@ -160,13 +157,11 @@ export default {
   }
 
   .codemirror {
-    height: 40vh;
-    min-height: 300px;
-    width: 100%;
-    min-width: 200px;
+    height: auto;
+    min-height: 100px;
   }
   .codemirror >>> .CodeMirror-scroll {
-    height: 40vh;
-    min-height: 300px;
+    height: auto;
+    min-height: 100px;
   }
 </style>

From 19fa6975ebee8d76b0f71383d5d87d362281da5e Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Fri, 12 Mar 2021 21:51:37 +0800
Subject: [PATCH 03/17] =?UTF-8?q?feat:=20=E5=89=8D=E6=AE=B5=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=81=B5=E5=BE=AAESLint=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataease/auth/config/WhitelistConfig.java |  17 -
 .../auth/service/impl/ShiroServiceImpl.java   |  13 +-
 .../vue-drag-resize-rotate/index.vue          | 759 +++++++++---------
 3 files changed, 380 insertions(+), 409 deletions(-)
 delete mode 100644 backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java

diff --git a/backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java b/backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java
deleted file mode 100644
index 357222cc20..0000000000
--- a/backend/src/main/java/io/dataease/auth/config/WhitelistConfig.java
+++ /dev/null
@@ -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;
-
-
-}
diff --git a/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java b/backend/src/main/java/io/dataease/auth/service/impl/ShiroServiceImpl.java
index ef4feab900..8711b9d27b 100644
--- 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");
diff --git a/frontend/src/components/vue-drag-resize-rotate/index.vue b/frontend/src/components/vue-drag-resize-rotate/index.vue
index 032c17fee9..12567cf9a0 100644
--- a/frontend/src/components/vue-drag-resize-rotate/index.vue
+++ b/frontend/src/components/vue-drag-resize-rotate/index.vue
@@ -17,16 +17,16 @@
     @touchstart="elementTouchDown"
   >
     <div
-      v-for="(handle,index) in actualHandles"
+      v-for="(item,index) in actualHandles"
       :key="index"
-      :class="[classNameHandle, classNameHandle + '-' + handle]"
-      :style="handleStyle(handle,index)"
-      @mousedown.stop.prevent="handleDown(handle, $event)"
-      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+      :class="[classNameHandle, classNameHandle + '-' + item]"
+      :style="handleStyle(item,index)"
+      @mousedown.stop.prevent="handleDown(item, $event)"
+      @touchstart.stop.prevent="handleTouchDown(item, $event)"
     >
-      <slot :name="handle"></slot>
+      <slot :name="item" />
     </div>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
@@ -45,7 +45,7 @@ const events = {
     move: 'touchmove',
     stop: 'touchend'
   }
-};
+}
 
 // 禁止用户选取
 const userSelectNone = {
@@ -53,20 +53,20 @@ const userSelectNone = {
   MozUserSelect: 'none',
   WebkitUserSelect: 'none',
   MsUserSelect: 'none'
-};
+}
 // 用户选中自动
 const userSelectAuto = {
   userSelect: 'auto',
   MozUserSelect: 'auto',
   WebkitUserSelect: 'auto',
   MsUserSelect: 'auto'
-};
+}
 
-let eventsFor = events.mouse;
+let eventsFor = events.mouse
 
 export default {
   replace: true,
-  name: 'vue-drag-resize-rotate',
+  name: 'VueDragResizeRotate',
   props: {
     className: {
       type: String,
@@ -141,7 +141,7 @@ export default {
       type: Boolean,
       default: false
     },
-    // 新增 外部传入纵横比 w/h 
+    // 新增 外部传入纵横比 w/h
     outsideAspectRatio: {
       type: [Number, String],
       default: 0
@@ -151,9 +151,9 @@ export default {
       default: 200,
       validator: val => {
         if (typeof val === 'number') {
-          return val > 0;
+          return val > 0
         }
-        return val === 'auto';
+        return val === 'auto'
       }
     },
     h: {
@@ -161,9 +161,9 @@ export default {
       default: 200,
       validator: val => {
         if (typeof val === 'number') {
-          return val > 0;
+          return val > 0
         }
-        return val === 'auto';
+        return val === 'auto'
       }
     },
     minWidth: {
@@ -278,8 +278,8 @@ export default {
     snapTolerance: {
       type: Number,
       default: 5,
-      validator: function (val) {
-        return typeof val === 'number';
+      validator: function(val) {
+        return typeof val === 'number'
       }
     },
     // 缩放比例
@@ -296,12 +296,12 @@ export default {
           size: 8,
           offset: -4,
           switch: true
-        };
+        }
       }
     }
   },
 
-  data: function () {
+  data: function() {
     return {
       left: this.x,
       top: this.y,
@@ -336,8 +336,209 @@ export default {
       lastCenterY: 0
     }
   },
+  computed: {
+    handleStyle() {
+      return (stick, index) => {
+        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' }
+        // 新增 当没有开启旋转的时候，旋转手柄不显示
+        if (stick === 'rot' && !this.rotatable) return { display: 'none' }
+        const size = (this.handleInfo.size / this.scaleRatio).toFixed(2)
+        const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2)
+        const center = (size / 2).toFixed(2)
 
-  created: function () {
+        const styleMap = {
+          tl: {
+            top: `${offset}px`,
+            left: `${offset}px`
+          },
+          tm: {
+            top: `${offset}px`,
+            left: `calc(50% - ${center}px)`
+          },
+          tr: {
+            top: `${offset}px`,
+            right: `${offset}px`
+          },
+          mr: {
+            top: `calc(50% - ${center}px)`,
+            right: `${offset}px`
+          },
+          br: {
+            bottom: `${offset}px`,
+            right: `${offset}px`
+          },
+          bm: {
+            bottom: `${offset}px`,
+            right: `calc(50% - ${center}px)`
+          },
+          bl: {
+            bottom: `${offset}px`,
+            left: `${offset}px`
+          },
+          ml: {
+            top: `calc(50% - ${center}px)`,
+            left: `${offset}px`
+          },
+          rot: {}
+        }
+        const stickStyle = {
+          width: `${size}px`,
+          height: `${size}px`,
+          top: styleMap[stick].top,
+          left: styleMap[stick].left,
+          right: styleMap[stick].right,
+          bottom: styleMap[stick].bottom
+        }
+        // 新增 让控制手柄的鼠标样式跟随玄幻角度变化
+        if (stick !== 'rot') {
+          const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
+          const STEP = 45
+          const rotate = this.rotate + STEP / 2
+          const deltaIndex = Math.floor(rotate / STEP)
+          index = (index + deltaIndex) % 8
+          stickStyle.cursor = cursorStyleArray[index]
+        }
+        stickStyle.display = this.enabled ? 'block' : 'none'
+        return stickStyle
+      }
+    },
+    style() {
+      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)
+      }
+    },
+    // 控制柄显示与否
+    actualHandles() {
+      if (!this.resizable) return []
+
+      return this.handles
+    },
+    //  根据left right 算出元素的宽度
+    computedWidth() {
+      if (this.w === 'auto') {
+        if (!this.widthTouched) {
+          return 'auto'
+        }
+      }
+      return this.width + 'px'
+    },
+    // 根据top bottom 算出元素的宽度
+    computedHeight() {
+      if (this.h === 'auto') {
+        if (!this.heightTouched) {
+          return 'auto'
+        }
+      }
+      return this.height + 'px'
+    },
+    // 表示只修改宽度
+    resizingOnX() {
+      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'))
+    },
+    // 表示只修改高度
+    resizingOnY() {
+      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'))
+    },
+    // 表示正在调整边角
+    isCornerHandle() {
+      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle)
+    }
+  },
+
+  watch: {
+    active(val) {
+      this.enabled = val
+
+      if (val) {
+        this.$emit('activated')
+      } else {
+        this.$emit('deactivated')
+      }
+    },
+    z(val) {
+      if (val >= 0 || val === 'auto') {
+        this.zIndex = val
+      }
+    },
+    x(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+
+      this.moveHorizontally(val)
+    },
+    y(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcDragLimits()
+      }
+
+      this.moveVertically(val)
+    },
+    // 新增 监听外部传入参数  旋转角度
+    r(val) {
+      if (val >= 0) {
+        this.rotate = val % 360
+      }
+    },
+    lockAspectRatio(val) {
+      if (val) {
+        this.aspectFactor = this.width / this.height
+      } else {
+        this.aspectFactor = undefined
+      }
+    },
+    minWidth(val) {
+      if (val > 0 && val <= this.width) {
+        this.minW = val
+      }
+    },
+    minHeight(val) {
+      if (val > 0 && val <= this.height) {
+        this.minH = val
+      }
+    },
+    maxWidth(val) {
+      this.maxW = val
+    },
+    maxHeight(val) {
+      this.maxH = val
+    },
+    w(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+
+      this.changeWidth(val)
+    },
+    h(val) {
+      if (this.resizing || this.dragging) {
+        return
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits()
+      }
+
+      this.changeHeight(val)
+    }
+  },
+
+  created: function() {
     // eslint-disable-next-line 无效的prop：minWidth不能大于maxWidth
     if (this.maxWidth && this.minWidth > this.maxWidth) console.warn('[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth')
     // eslint-disable-next-line 无效prop：minHeight不能大于maxHeight'
@@ -359,7 +560,7 @@ export default {
     this.BR = {}
     this.resetBoundsAndMouseState()
   },
-  mounted: function () {
+  mounted: function() {
     if (!this.enableNativeDrag) {
       this.$el.ondragstart = () => false
     }
@@ -382,7 +583,7 @@ export default {
     //  窗口变化时，检查容器大小
     addEvent(window, 'resize', this.checkParentSize)
   },
-  beforeDestroy: function () {
+  beforeDestroy: function() {
     removeEvent(document.documentElement, 'mousedown', this.deselect)
     removeEvent(document.documentElement, 'touchstart', this.handleUp)
     removeEvent(document.documentElement, 'mousemove', this.move)
@@ -503,7 +704,7 @@ export default {
           minTop: -9999,
           maxTop: 9999,
           minBottom: -9999,
-          maxBottom: 9999,
+          maxBottom: 9999
         }
       } else {
         return {
@@ -514,42 +715,42 @@ export default {
           minTop: this.top % this.grid[1],
           maxTop: Math.floor((this.parentHeight - this.height - this.top) / this.grid[1]) * this.grid[1] + this.top,
           minBottom: this.bottom % this.grid[1],
-          maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom,
-        };
+          maxBottom: Math.floor((this.parentHeight - this.height - this.bottom) / this.grid[1]) * this.grid[1] + this.bottom
+        }
       }
     },
     // 取消
     deselect(e) {
-      const target = e.target || e.srcElement;
-      const regex = new RegExp(this.className + '-([trmbl]{2})', '');
+      const target = e.target || e.srcElement
+      const regex = new RegExp(this.className + '-([trmbl]{2})', '')
       if (!this.$el.contains(target) && !regex.test(target.className)) {
         if (this.enabled && !this.preventDeactivation) {
-          this.enabled = false;
-          this.$emit('deactivated');
-          this.$emit('update:active', false);
+          this.enabled = false
+          this.$emit('deactivated')
+          this.$emit('update:active', false)
         }
 
-        removeEvent(document.documentElement, eventsFor.move, this.move);
+        removeEvent(document.documentElement, eventsFor.move, this.move)
       }
 
-      this.resetBoundsAndMouseState();
+      this.resetBoundsAndMouseState()
     },
     // 控制柄触摸按下
     handleTouchDown(handle, e) {
-      eventsFor = events.touch;
+      eventsFor = events.touch
 
-      this.handleDown(handle, e);
+      this.handleDown(handle, e)
     },
     // 控制柄按下
     handleDown(handle, e) {
       if (e instanceof MouseEvent && e.which !== 1) {
-        return false;
+        return false
       }
       if (this.onResizeStart(handle, e) === false) {
-        return false;
+        return false
       }
 
-      if (e.stopPropagation) e.stopPropagation();
+      if (e.stopPropagation) e.stopPropagation()
       // 锁定纵横比时，将顶点转换为中点 - 不在需要因而将其注释
       // if (this.lockAspectRatio && !handle.includes('m')) {
       //   this.handle = 'm' + handle.substring(1)
@@ -557,7 +758,7 @@ export default {
       // this.handle = handle;
       // }
 
-      this.handle = handle;
+      this.handle = handle
       // 新增
       if (this.handle === 'rot') {
         this.rotating = true
@@ -566,57 +767,57 @@ export default {
       }
       // 新增保存矩形信息
       // 获取父元素的位置大小信息
-      let { top, left, width, height } = this.$el.getBoundingClientRect()
+      const { top, left, width, height } = this.$el.getBoundingClientRect()
       // 保存旋转中心的绝对坐标
       this.lastCenterX = window.pageXOffset + left + width / 2
       this.lastCenterY = window.pageYOffset + top + height / 2
       // 保存四个顶点的坐标
-      let oleft = this.left
-      let otop = this.top
-      let owidth = this.width
-      let oheight = this.height
-      let centerX = oleft + owidth / 2
-      let centerY = otop + oheight / 2
-      let rotate = this.rotate
-      this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate);
-      this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate);
-      this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate);
-      this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate);
+      const oleft = this.left
+      const otop = this.top
+      const owidth = this.width
+      const oheight = this.height
+      const centerX = oleft + owidth / 2
+      const centerY = otop + oheight / 2
+      const rotate = this.rotate
+      this.TL = this.rotatedPoint(centerX, centerY, oleft, otop, rotate)
+      this.TR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop, rotate)
+      this.BL = this.rotatedPoint(centerX, centerY, oleft, otop + oheight, rotate)
+      this.BR = this.rotatedPoint(centerX, centerY, oleft + owidth, otop + oheight, rotate)
 
       //  保存鼠标按下时的当前状态
-      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX;
-      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY;
-      this.mouseClickPosition.left = this.left;
-      this.mouseClickPosition.right = this.right;
-      this.mouseClickPosition.top = this.top;
-      this.mouseClickPosition.bottom = this.bottom;
-      this.mouseClickPosition.width = this.width;
-      this.mouseClickPosition.height = this.height;
+      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX
+      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY
+      this.mouseClickPosition.left = this.left
+      this.mouseClickPosition.right = this.right
+      this.mouseClickPosition.top = this.top
+      this.mouseClickPosition.bottom = this.bottom
+      this.mouseClickPosition.width = this.width
+      this.mouseClickPosition.height = this.height
       // 计算边界
-      this.bounds = this.calcResizeLimits();
+      this.bounds = this.calcResizeLimits()
       // 添加事件
-      addEvent(document.documentElement, eventsFor.move, this.move);
-      addEvent(document.documentElement, eventsFor.stop, this.handleUp);
+      addEvent(document.documentElement, eventsFor.move, this.move)
+      addEvent(document.documentElement, eventsFor.stop, this.handleUp)
     },
     // 计算调整大小范围
     calcResizeLimits() {
-      let minW = this.minW;
-      let minH = this.minH;
-      let maxW = this.maxW;
-      let maxH = this.maxH;
+      const minW = this.minW
+      const minH = this.minH
+      let maxW = this.maxW
+      let maxH = this.maxH
 
-      const [gridX, gridY] = this.grid;
+      const [gridX, gridY] = this.grid
       // 获取矩形信息
-      const width = this.width;
-      const height = this.height;
-      const left = this.left;
-      const top = this.top;
-      const right = this.right;
-      const bottom = this.bottom;
+      const width = this.width
+      const height = this.height
+      const left = this.left
+      const top = this.top
+      const right = this.right
+      const bottom = this.bottom
 
       // 对齐网格
-      maxW = maxW - (maxW % gridX);
-      maxH = maxH - (maxH % gridY);
+      maxW = maxW - (maxW % gridX)
+      maxH = maxH - (maxH % gridY)
 
       const limits = {
         minLeft: null,
@@ -630,7 +831,7 @@ export default {
       }
       // 边界限制
       if (this.parent) {
-        limits.minLeft = left;
+        limits.minLeft = left
         limits.maxLeft = left + Math.floor((width - minW) / gridX)
         limits.minTop = top
         limits.maxTop = top + Math.floor((height - minH) / gridY)
@@ -639,17 +840,14 @@ export default {
         limits.minBottom = bottom
         limits.maxBottom = bottom + Math.floor((height - minH) / gridY)
 
-
         if (maxW) {
-          limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW);
-          limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW);
-
+          limits.minLeft = Math.max(limits.minLeft, this.parentWidth - right - maxW)
+          limits.minRight = Math.max(limits.minRight, this.parentWidth - left - maxW)
         }
 
         if (maxH) {
-          limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH);
-          limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH);
-
+          limits.minTop = Math.max(limits.minTop, this.parentHeight - bottom - maxH)
+          limits.minBottom = Math.max(limits.minBottom, this.parentHeight - top - maxH)
         }
       } else {
         limits.minLeft = null
@@ -683,7 +881,7 @@ export default {
     // 移动
     move(e) {
       if (this.resizing) {
-        console.log('resizing');
+        console.log('resizing')
         this.handleResize(e)
       } else if (this.dragging) {
         this.handleDrag(e)
@@ -720,8 +918,8 @@ export default {
       const rad = (Math.PI / 180) * rotate
       const cos = Math.cos(rad)
       const sin = Math.sin(rad)
-      let x = offsetX - originX
-      let y = offsetY - originY
+      const x = offsetX - originX
+      const y = offsetY - originY
       return {
         x: x * cos - y * sin + originX,
         y: x * sin + y * cos + originY
@@ -760,13 +958,13 @@ export default {
       this.$emit('dragging', this.left, this.top)
     },
     moveHorizontally(val) {
-      const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale)
+      const [deltaX] = snapToGrid(this.grid, val, this.top, this.scale)
       const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
       this.left = left
       this.right = this.parentWidth - this.width - left
     },
     moveVertically(val) {
-      const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
+      const [deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
       const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
       this.top = top
       this.bottom = this.parentHeight - this.height - top
@@ -778,17 +976,17 @@ export default {
       const { TL, TR, BL, BR } = this
       const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
       // 获取鼠标移动的坐标差
-      let deltaX = mouseX - this.mouseClickPosition.mouseX
-      let deltaY = mouseY - this.mouseClickPosition.mouseY
+      const deltaX = mouseX - this.mouseClickPosition.mouseX
+      const deltaY = mouseY - this.mouseClickPosition.mouseY
       let diffX, diffY, scale, scaleB, scaleC, newX, newY, newW, newH
-      let Fixed = {}   // 固定点
-      let BX = {}      // 高度边选点
-      let CX = {}     //  宽度边选点
-      let Va = {}      // 固定点到鼠标 向量
-      let Vb = {}      // 固定点到投影边  向量
-      let Vc = {}     //  另一边投影
-      let Vw = {};    // 宽度向量
-      let Vh = {}     // 高度向量
+      let Fixed = {} // 固定点
+      let BX = {} // 高度边选点
+      let CX = {} //  宽度边选点
+      let Va = {} // 固定点到鼠标 向量
+      let Vb = {} // 固定点到投影边  向量
+      let Vc = {} //  另一边投影
+      let Vw = {} // 宽度向量
+      let Vh = {} // 高度向量
       // 拖动中点
       if (handle.includes('m')) {
         switch (handle) {
@@ -803,7 +1001,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vh = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'bm':
             diffX = deltaX + (BL.x + BR.x) / 2
             diffY = deltaY + (BL.y + BR.y) / 2
@@ -815,7 +1013,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vw = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vh = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'ml':
             diffX = deltaX + (TL.x + BL.x) / 2
             diffY = deltaY + (TL.y + BL.y) / 2
@@ -827,7 +1025,7 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vw = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           case 'mr':
             diffX = deltaX + (TR.x + TR.x) / 2
             diffY = deltaY + (TR.y + TR.y) / 2
@@ -839,9 +1037,9 @@ export default {
             scale = (Va.x * Vb.x + Va.y * Vb.y) / (Math.pow(Vb.x, 2) + Math.pow(Vb.y, 2))
             Vh = { x: CX.x - Fixed.x, y: CX.y - Fixed.y }
             Vw = { x: Vb.x * scale, y: Vb.y * scale }
-            break;
+            break
           default:
-            break;
+            break
         }
         newX = Fixed.x + (Vw.x + Vh.x) / 2
         newY = Fixed.y + (Vw.y + Vh.y) / 2
@@ -856,30 +1054,30 @@ export default {
             Fixed = BR
             BX = BL // 高度 TL BL
             CX = TR // 宽度 TL TR
-            break;
+            break
           case 'tr':
             diffX = deltaX + TR.x
             diffY = deltaY + TR.y
             Fixed = BL
             BX = BR
             CX = TL
-            break;
+            break
           case 'bl':
             diffX = deltaX + BL.x
             diffY = deltaY + BL.y
             Fixed = TR
             BX = TL
             CX = BR
-            break;
+            break
           case 'br':
             diffX = deltaX + BR.x
             diffY = deltaY + BR.y
             Fixed = TL
             BX = TR
             CX = BL
-            break;
+            break
           default:
-            break;
+            break
         }
         Va = { x: diffX - Fixed.x, y: diffY - Fixed.y }
         Vb = { x: BX.x - Fixed.x, y: BX.y - Fixed.y }
@@ -895,29 +1093,28 @@ export default {
       }
 
       // 边界限制(矩形的外接圆不能超出父盒子)
-      let bounds = this.bounds
+      const bounds = this.bounds
       if (this.rotatable) {
         this.left = newX - newW / 2
         this.top = newY - newH / 2
         this.width = newW
         this.height = newH
       } else {
-        this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft);
-        this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop);
+        this.left = restrictToBounds(newX - newW / 2, bounds.minLeft, bounds.maxLeft)
+        this.top = restrictToBounds(newY - newH / 2, bounds.minTop, bounds.maxTop)
         if (this.parent) {
           newW = newW <= this.parentWidth ? newW : this.parentWidth
           newH = newH <= this.parentHeight ? newH : this.parentHeight
         }
-        this.width = restrictToBounds(newW, this.minW, this.maxW);
-        this.height = restrictToBounds(newH, this.minH, this.maxH);
+        this.width = restrictToBounds(newW, this.minW, this.maxW)
+        this.height = restrictToBounds(newH, this.minH, this.maxH)
       }
 
       this.$emit('resizing', this.left, this.top, this.width, this.height)
     },
 
-
     changeWidth(val) {
-      const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale)
+      const [newWidth] = snapToGrid(this.grid, val, 0, this.scale)
       const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight)
       let bottom = this.bottom
       if (this.lockAspectRatio) {
@@ -931,7 +1128,7 @@ export default {
       this.height = height
     },
     changeHeight(val) {
-      const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale)
+      const [newHeight] = snapToGrid(this.grid, 0, val, this.scale)
       const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom)
       let right = this.right
       if (this.lockAspectRatio) {
@@ -948,10 +1145,10 @@ export default {
     async handleUp(e) {
       this.handle = null
       // 初始化辅助线数据
-      const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' });
-      const refLine = { vLine: [], hLine: [] };
+      const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+      const refLine = { vLine: [], hLine: [] }
       for (const i in refLine) {
-        refLine[i] = JSON.parse(JSON.stringify(temArr));
+        refLine[i] = JSON.parse(JSON.stringify(temArr))
       }
       // 保存 鼠标松开的坐标
       const { x: mouseX, y: mouseY } = this.getMouseCoordinate(e)
@@ -960,14 +1157,14 @@ export default {
 
       if (this.resizing) {
         this.resizing = false
-        await this.conflictCheck();
-        this.$emit('refLineParams', refLine);
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
         this.$emit('resizestop', this.left, this.top, this.width, this.height)
       }
       if (this.dragging) {
         this.dragging = false
-        await this.conflictCheck();
-        this.$emit('refLineParams', refLine);
+        await this.conflictCheck()
+        this.$emit('refLineParams', refLine)
         this.$emit('dragstop', this.left, this.top)
       }
       if (this.rotating) {
@@ -1041,16 +1238,16 @@ export default {
         let activeBottom = this.top + height
 
         // 初始化辅助线数据
-        const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' });
-        const refLine = { vLine: [], hLine: [] };
+        const temArr = new Array(3).fill({ display: false, position: '', origin: '', lineLength: '' })
+        const refLine = { vLine: [], hLine: [] }
         for (const i in refLine) {
-          refLine[i] = JSON.parse(JSON.stringify(temArr));
+          refLine[i] = JSON.parse(JSON.stringify(temArr))
         }
         const tem = {
           value: { x: [[], [], []], y: [[], [], []] },
           display: [],
           position: []
-        };
+        }
         // 获取当前父节点下所有子节点
         const nodes = this.$el.parentNode.childNodes
         //  当允许多个同时激活时，获取总体的属性
@@ -1084,8 +1281,8 @@ export default {
               const hc = Math.abs((activeTop + height / 2) - (t + h / 2)) <= this.snapTolerance // 水平中线
               const vc = Math.abs((activeLeft + width / 2) - (l + w / 2)) <= this.snapTolerance // 垂直中线
 
-              const ts = Math.abs(t - activeBottom) <= this.snapTolerance; // 从上到下
-              const TS = Math.abs(b - activeBottom) <= this.snapTolerance; // 从上到下
+              const ts = Math.abs(t - activeBottom) <= this.snapTolerance // 从上到下
+              const TS = Math.abs(b - activeBottom) <= this.snapTolerance // 从上到下
 
               const bs = Math.abs(t - activeTop) <= this.snapTolerance // 从下到上 上边共线
               const BS = Math.abs(b - activeTop) <= this.snapTolerance // 从下到上
@@ -1095,61 +1292,61 @@ export default {
               const rs = Math.abs(l - activeLeft) <= this.snapTolerance // 外右
               const RS = Math.abs(r - activeLeft) <= this.snapTolerance // 外右
 
-              tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc];
-              tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2];
+              tem.display = [ts, TS, bs, BS, hc, hc, ls, LS, rs, RS, vc, vc]
+              tem.position = [t, b, t, b, t + h / 2, t + h / 2, l, r, l, r, l + w / 2, l + w / 2]
 
               // 单个可激活元素与其他元素对齐
               if (bln) {
                 if (ts) {
                   this.top = t - height
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[0].push(l, r, activeLeft, activeRight);
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
                 }
                 if (bs) {
                   this.top = t
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[0].push(l, r, activeLeft, activeRight);
+                  tem.value.y[0].push(l, r, activeLeft, activeRight)
                 }
                 if (TS) {
                   this.top = b - height
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[1].push(l, r, activeLeft, activeRight);
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
                 }
                 if (BS) {
                   this.top = b
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[1].push(l, r, activeLeft, activeRight);
+                  tem.value.y[1].push(l, r, activeLeft, activeRight)
                 }
 
                 if (ls) {
                   this.left = l - width
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[0].push(t, b, activeTop, activeBottom);
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
                 }
                 if (rs) {
                   this.left = l
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[0].push(t, b, activeTop, activeBottom);
+                  tem.value.x[0].push(t, b, activeTop, activeBottom)
                 }
                 if (LS) {
                   this.left = r - width
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[1].push(t, b, activeTop, activeBottom);
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
                 }
                 if (RS) {
                   this.left = r
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[1].push(t, b, activeTop, activeBottom);
+                  tem.value.x[1].push(t, b, activeTop, activeBottom)
                 }
                 if (hc) {
                   this.top = t + h / 2 - height / 2
                   this.bottom = this.parentHeight - this.top - height
-                  tem.value.y[2].push(l, r, activeLeft, activeRight);
+                  tem.value.y[2].push(l, r, activeLeft, activeRight)
                 }
                 if (vc) {
                   this.left = l + w / 2 - width / 2
                   this.right = this.parentWidth - this.left - width
-                  tem.value.x[2].push(t, b, activeTop, activeBottom);
+                  tem.value.x[2].push(t, b, activeTop, activeBottom)
                 }
                 // 和容器贴边
                 if (this.snapBorder) {
@@ -1172,279 +1369,79 @@ export default {
                 }
               }
               // 再次进行边界处理
-              let bounds = this.bounds
-              this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft);
-              this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop);
-              this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight);
-              this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom);
+              const bounds = this.bounds
+              this.left = restrictToBounds(this.left, bounds.minLeft, bounds.maxLeft)
+              this.top = restrictToBounds(this.top, bounds.minTop, bounds.maxTop)
+              this.right = restrictToBounds(this.right, bounds.minRight, bounds.maxRight)
+              this.bottom = restrictToBounds(this.bottom, bounds.minBottom, bounds.maxBottom)
 
               // 辅助线坐标与是否显示(display)对应的数组,易于循环遍历
-              const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2];
+              const arrTem = [0, 1, 0, 1, 2, 2, 0, 1, 0, 1, 2, 2]
               for (let i = 0; i <= arrTem.length; i++) {
                 // 前6为Y辅助线,后6为X辅助线
-                const xory = i < 6 ? 'y' : 'x';
-                const horv = i < 6 ? 'hLine' : 'vLine';
+                const xory = i < 6 ? 'y' : 'x'
+                const horv = i < 6 ? 'hLine' : 'vLine'
                 if (tem.display[i]) {
-                  const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]]);
-                  refLine[horv][arrTem[i]].display = tem.display[i];
-                  refLine[horv][arrTem[i]].position = tem.position[i] + 'px';
-                  refLine[horv][arrTem[i]].origin = origin;
-                  refLine[horv][arrTem[i]].lineLength = length;
+                  const { origin, length } = this.calcLineValues(tem.value[xory][arrTem[i]])
+                  refLine[horv][arrTem[i]].display = tem.display[i]
+                  refLine[horv][arrTem[i]].position = tem.position[i] + 'px'
+                  refLine[horv][arrTem[i]].origin = origin
+                  refLine[horv][arrTem[i]].lineLength = length
                 }
               }
             }
           }
         }
-        this.$emit('refLineParams', refLine);
+        this.$emit('refLineParams', refLine)
       }
     },
     // 计算参考线
     calcLineValues(arr) {
-      const length = Math.max(...arr) - Math.min(...arr) + 'px';
-      const origin = Math.min(...arr) + 'px';
-      return { length, origin };
+      const length = Math.max(...arr) - Math.min(...arr) + 'px'
+      const origin = Math.min(...arr) + 'px'
+      return { length, origin }
     },
     async getActiveAll(nodes) {
-      const activeAll = [];
-      const XArray = [];
-      const YArray = [];
-      let groupWidth = 0;
-      let groupHeight = 0;
-      let groupLeft = 0;
-      let groupTop = 0;
+      const activeAll = []
+      const XArray = []
+      const YArray = []
+      let groupWidth = 0
+      let groupHeight = 0
+      let groupLeft = 0
+      let groupTop = 0
       for (const item of nodes) {
         // 修复判断条件
         if (item.className !== undefined && item.className.split(' ').includes(this.classNameActive)) {
-          activeAll.push(item);
+          activeAll.push(item)
         }
       }
-      const AllLength = activeAll.length;
+      const AllLength = activeAll.length
       if (AllLength > 1) {
         for (const i of activeAll) {
-          const l = i.offsetLeft;
-          const r = l + i.offsetWidth;
-          const t = i.offsetTop;
-          const b = t + i.offsetHeight;
-          XArray.push(l, r);
-          YArray.push(t, b);
+          const l = i.offsetLeft
+          const r = l + i.offsetWidth
+          const t = i.offsetTop
+          const b = t + i.offsetHeight
+          XArray.push(l, r)
+          YArray.push(t, b)
         }
         groupWidth = Math.max(...XArray) - Math.min(...XArray)
         groupHeight = Math.max(...YArray) - Math.min(...YArray)
         groupLeft = Math.min(...XArray)
         groupTop = Math.min(...YArray)
       }
-      const bln = AllLength === 1;
-      return { groupWidth, groupHeight, groupLeft, groupTop, bln };
+      const bln = AllLength === 1
+      return { groupWidth, groupHeight, groupLeft, groupTop, bln }
     },
     // 修复 正则获取left与top
     formatTransformVal(string) {
-      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g);
-      if (top === undefined) top = 0;
-      return [Number(left), Number(top), rotate];
-    }
-  },
-  computed: {
-    handleStyle() {
-      return (stick, index) => {
-        if (!this.handleInfo.switch) return { display: this.enabled ? 'block' : 'none' };
-        // 新增 当没有开启旋转的时候，旋转手柄不显示
-        if (stick === 'rot' && !this.rotatable) return { display: 'none' };
-        const size = (this.handleInfo.size / this.scaleRatio).toFixed(2);
-        const offset = (this.handleInfo.offset / this.scaleRatio).toFixed(2);
-        const center = (size / 2).toFixed(2);
-
-        const styleMap = {
-          tl: {
-            top: `${offset}px`,
-            left: `${offset}px`
-          },
-          tm: {
-            top: `${offset}px`,
-            left: `calc(50% - ${center}px)`
-          },
-          tr: {
-            top: `${offset}px`,
-            right: `${offset}px`
-          },
-          mr: {
-            top: `calc(50% - ${center}px)`,
-            right: `${offset}px`
-          },
-          br: {
-            bottom: `${offset}px`,
-            right: `${offset}px`
-          },
-          bm: {
-            bottom: `${offset}px`,
-            right: `calc(50% - ${center}px)`
-          },
-          bl: {
-            bottom: `${offset}px`,
-            left: `${offset}px`
-          },
-          ml: {
-            top: `calc(50% - ${center}px)`,
-            left: `${offset}px`
-          },
-          rot: {}
-        };
-        const stickStyle = {
-          width: `${size}px`,
-          height: `${size}px`,
-          top: styleMap[stick].top,
-          left: styleMap[stick].left,
-          right: styleMap[stick].right,
-          bottom: styleMap[stick].bottom
-        }
-        // 新增 让控制手柄的鼠标样式跟随玄幻角度变化
-        if (stick !== 'rot') {
-          const cursorStyleArray = ['nw-resize', 'n-resize', 'ne-resize', 'e-resize', 'se-resize', 's-resize', 'sw-resize', 'w-resize']
-          const STEP = 45
-          const rotate = this.rotate + STEP / 2
-          const deltaIndex = Math.floor(rotate / STEP)
-          index = (index + deltaIndex) % 8
-          stickStyle.cursor = cursorStyleArray[index]
-        }
-        stickStyle.display = this.enabled ? 'block' : 'none'
-        return stickStyle
-      }
-    },
-    style() {
-      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)
-      };
-    },
-    // 控制柄显示与否
-    actualHandles() {
-      if (!this.resizable) return [];
-
-      return this.handles;
-    },
-    //  根据left right 算出元素的宽度
-    computedWidth() {
-      if (this.w === 'auto') {
-        if (!this.widthTouched) {
-          return 'auto';
-        }
-      }
-      return this.width + 'px';
-    },
-    // 根据top bottom 算出元素的宽度
-    computedHeight() {
-      if (this.h === 'auto') {
-        if (!this.heightTouched) {
-          return 'auto';
-        }
-      }
-      return this.height + 'px';
-    },
-    // 表示只修改宽度
-    resizingOnX() {
-      return Boolean(this.handle) && (this.handle.includes('l') || this.handle.includes('r'));
-    },
-    // 表示只修改高度
-    resizingOnY() {
-      return Boolean(this.handle) && (this.handle.includes('t') || this.handle.includes('b'));
-    },
-    // 表示正在调整边角
-    isCornerHandle() {
-      return Boolean(this.handle) && ['tl', 'tr', 'br', 'bl'].includes(this.handle);
-    }
-  },
-
-  watch: {
-    active(val) {
-      this.enabled = val;
-
-      if (val) {
-        this.$emit('activated');
-      } else {
-        this.$emit('deactivated');
-      }
-    },
-    z(val) {
-      if (val >= 0 || val === 'auto') {
-        this.zIndex = val;
-      }
-    },
-    x(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-      if (this.parent) {
-        this.bounds = this.calcDragLimits();
-      }
-
-      this.moveHorizontally(val);
-    },
-    y(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcDragLimits();
-      }
-
-      this.moveVertically(val);
-    },
-    // 新增 监听外部传入参数  旋转角度
-    r(val) {
-      if (val >= 0) {
-        this.rotate = val % 360;
-      }
-    },
-    lockAspectRatio(val) {
-      if (val) {
-        this.aspectFactor = this.width / this.height;
-      } else {
-        this.aspectFactor = undefined;
-      }
-    },
-    minWidth(val) {
-      if (val > 0 && val <= this.width) {
-        this.minW = val;
-      }
-    },
-    minHeight(val) {
-      if (val > 0 && val <= this.height) {
-        this.minH = val;
-      }
-    },
-    maxWidth(val) {
-      this.maxW = val;
-    },
-    maxHeight(val) {
-      this.maxH = val;
-    },
-    w(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcResizeLimits();
-      }
-
-      this.changeWidth(val);
-    },
-    h(val) {
-      if (this.resizing || this.dragging) {
-        return;
-      }
-
-      if (this.parent) {
-        this.bounds = this.calcResizeLimits();
-      }
-
-      this.changeHeight(val);
+      // eslint-disable-next-line prefer-const
+      let [left, top, rotate = 0] = string.match(/[\d|\.]+/g)
+      if (top === undefined) top = 0
+      return [Number(left), Number(top), rotate]
     }
   }
-};
+}
 </script>
 
 <style scoped>

From a0ee5d636f627f70d53b5b549258acc0b59f0816 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 10:29:39 +0800
Subject: [PATCH 04/17] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=89=93?=
 =?UTF-8?q?=E5=8C=85=E9=83=A8=E7=BD=B2=E5=89=8D=E7=AB=AF=E5=88=B7=E6=96=B0?=
 =?UTF-8?q?=E8=A2=AB=E6=8B=A6=E6=88=AA=E7=9A=84bu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.env.production                  | 3 ++-
 frontend/src/router/index.js              | 3 ++-
 frontend/src/views/dataset/add/AddSQL.vue | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/.env.production b/frontend/.env.production
index a33fdd2479..d24a4671c1 100644
--- 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 = '/'
 
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 26ae503f3e..de8da4cb05 100644
--- 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
 })
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index feb132fb51..fc29f85146 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script>
-import { post, listDatasource } from '@/api/dataset/dataset'
+import { listDatasource } from '@/api/dataset/dataset'
 import { codemirror } from 'vue-codemirror'
 // 核心样式
 import 'codemirror/lib/codemirror.css'

From 105d8a2a5fa66ea2c2194b6c364a1fdf109bc0a7 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 12:12:14 +0800
Subject: [PATCH 05/17] =?UTF-8?q?feat:=20datasource=E9=87=87=E7=94=A8?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base/mapper/ext/ExtDataSourceMapper.java  |  11 +
 .../base/mapper/ext/ExtDataSourceMapper.xml   |  25 ++
 .../base/mapper/ext/ExtDeptMapper.xml         |   2 +-
 .../controller/DatasourceController.java      |   6 +-
 .../datasource/service/DatasourceService.java |  11 +
 frontend/src/api/system/datasource.js         |   1 +
 frontend/src/lang/zh.js                       |   2 +-
 .../src/views/system/datasource/index.vue     | 379 ++++++------------
 8 files changed, 173 insertions(+), 264 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.java
 create mode 100644 backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.xml

diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.java b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.java
new file mode 100644
index 0000000000..0303cadd8d
--- /dev/null
+++ 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);
+}
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDataSourceMapper.xml
new file mode 100644
index 0000000000..4d4988ec9c
--- /dev/null
+++ 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>
diff --git a/backend/src/main/java/io/dataease/base/mapper/ext/ExtDeptMapper.xml b/backend/src/main/java/io/dataease/base/mapper/ext/ExtDeptMapper.xml
index 9dcec17d12..a47f873a84 100644
--- 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>
diff --git a/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java b/backend/src/main/java/io/dataease/datasource/controller/DatasourceController.java
index b019df64a5..c04b3fc470 100644
--- 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}")
diff --git a/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java b/backend/src/main/java/io/dataease/datasource/service/DatasourceService.java
index 5924dd3d41..24f6b2a4c0 100644
--- 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);
     }
diff --git a/frontend/src/api/system/datasource.js b/frontend/src/api/system/datasource.js
index 611338fed1..a8deddbff8 100644
--- 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
   })
 }
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index efd0a7e737..82175f45d0 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -682,7 +682,7 @@ export default {
     please_input_password: '请输入密码',
     please_input_host: '请输入主机',
     please_input_port: '请输入端口',
-    modify: '修改组织',
+    modify: '编辑数据连接',
     validate_success: '校验成功',
     delete: '删除组织',
     delete_confirm: '删除该组织会关联删除该组织下的所有资源(如：相关工作空间，项目，测试用例等），确定要删除吗?',
diff --git a/frontend/src/views/system/datasource/index.vue b/frontend/src/views/system/datasource/index.vue
index d41269deff..347f51134b 100644
--- 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>

From 8d911cd4630ef205cbc30469925c0bf7ec230962 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 12:25:11 +0800
Subject: [PATCH 06/17] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B7=BB=E5=8A=A0SQL=E7=9A=84UI=E3=80=82?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8umy-ui=E6=9B=BF=E6=8D=A2element-ui=E4=B8=ADel?=
 =?UTF-8?q?-table=EF=BC=8C=E6=94=AF=E6=8C=81=E8=B6=85=E5=A4=9A=E8=A1=8C?=
 =?UTF-8?q?=E3=80=81=E5=88=97=EF=BC=88=E4=B8=8A=E4=B8=87=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=EF=BC=89=E7=9A=84table=E8=99=9A=E6=8B=9F=EF=BC=8Cgrid=E8=99=9A?=
 =?UTF-8?q?=E6=8B=9F=EF=BC=8Ctable=E4=B8=8D=E4=BC=9A=E5=8D=A1=E9=A1=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataset/DataSetTableController.java       |  5 +
 .../provider/DatasourceProvider.java          |  7 ++
 .../datasource/provider/JdbcProvider.java     | 75 ++++++++++-----
 .../service/dataset/DataSetTableService.java  | 32 ++++++-
 frontend/package.json                         |  1 +
 frontend/src/lang/zh.js                       |  3 +-
 frontend/src/main.js                          |  4 +
 .../src/views/chart/components/QuotaItem.vue  |  2 +-
 frontend/src/views/chart/view/ChartEdit.vue   | 10 +-
 frontend/src/views/dataset/add/AddSQL.vue     | 91 ++++++++++++++++---
 .../src/views/dataset/data/TabDataPreview.vue | 26 ++++--
 11 files changed, 204 insertions(+), 52 deletions(-)

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 5660a44244..827386e0bb 100644
--- 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);
+    }
 }
diff --git a/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java b/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
index d1dc06956d..1339ac63ac 100644
--- a/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
@@ -4,6 +4,7 @@ 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 +14,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 +30,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<String> fetchResultField(ResultSet rs) throws Exception;
+
 }
diff --git a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
index 4b53abfb49..d015063659 100644
--- a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
@@ -8,12 +8,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 +26,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 +89,24 @@ public class JdbcProvider extends DatasourceProvider{
         return list;
     }
 
+    @Override
+    public List<String> fetchResultField(ResultSet rs) throws Exception {
+        List<String> fieldList = new ArrayList<>();
+        ResultSetMetaData metaData = rs.getMetaData();
+        int columnCount = metaData.getColumnCount();
+        for (int j = 0; j < columnCount; j++) {
+            fieldList.add(metaData.getColumnName(j + 1));
+        }
+        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 +116,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 +140,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 +161,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 +179,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 +207,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 +221,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:
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 518042cb89..b74124be9f 100644
--- 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;
@@ -150,7 +151,7 @@ public class DataSetTableService {
         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");
+        datasourceRequest.setQuery(createQuerySQL(ds.getType(), table, fieldArray) + " LIMIT 0,10");// todo limit
 
         List<String[]> data = new ArrayList<>();
         try {
@@ -177,6 +178,35 @@ public class DataSetTableService {
         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<String> fields = datasourceProvider.fetchResultField(dataResultSet);
+
+        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(fields.get(i), ele[i]);
+                }
+                return map;
+            }).collect(Collectors.toList());
+        }
+
+        Map<String, Object> map = new HashMap<>();
+        map.put("fields", fields);
+        map.put("data", jsonArray);
+
+        return map;
+    }
+
     public List<String[]> getDataSetData(String datasourceId, String table, List<DatasetTableField> fields) {
         List<String[]> data = new ArrayList<>();
         Datasource ds = datasourceMapper.selectByPrimaryKey(datasourceId);
diff --git a/frontend/package.json b/frontend/package.json
index a4ecbb5dd3..194e165f0f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "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",
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 82175f45d0..539eef1de9 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -666,7 +666,8 @@ export default {
     close: '关闭',
     required: '必填',
     input_content: '请输入内容',
-    add_sql_table: '添加SQL'
+    add_sql_table: '添加SQL',
+    preview: '预览'
   },
   datasource: {
     create: '新建数据连接',
diff --git a/frontend/src/main.js b/frontend/src/main.js
index b5ddc1e834..f7270d1b94 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -28,6 +28,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
diff --git a/frontend/src/views/chart/components/QuotaItem.vue b/frontend/src/views/chart/components/QuotaItem.vue
index dcf0f26220..c616da6676 100644
--- 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">
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 1085f3d544..5163cf3d7c 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -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 {
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index fc29f85146..d55f8296e2 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -28,7 +28,11 @@
             </el-select>
           </el-form-item>
           <el-form-item class="form-item">
-            <el-input v-model="name" size="mini" placeholder="名称" />
+            <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>
@@ -45,12 +49,38 @@
           />
         </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="500"
+              :checkbox-config="{highlight: true}"
+            >
+              <ux-table-column
+                v-for="field in fields"
+                :key="field"
+                min-width="200px"
+                :field="field"
+                :title="field"
+                :resizable="true"
+              />
+            </ux-grid>
+          </div>
+        </el-card>
+      </el-row>
     </el-row>
   </el-col>
 </template>
 
 <script>
-import { listDatasource } from '@/api/dataset/dataset'
+import { post, listDatasource } from '@/api/dataset/dataset'
 import { codemirror } from 'vue-codemirror'
 // 核心样式
 import 'codemirror/lib/codemirror.css'
@@ -96,7 +126,10 @@ export default {
         hintOptions: {
           completeSingle: true
         }
-      }
+      },
+      data: [],
+      fields: [],
+      mode: '0'
     }
   },
   computed: {
@@ -115,6 +148,32 @@ export default {
       })
     },
 
+    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)
+      })
+    },
+
+    cancel() {
+      // this.dataReset()
+      this.$emit('switchComponent', { name: '' })
+    },
+
     showSQL(val) {
       this.sql = val || ''
     },
@@ -125,13 +184,9 @@ export default {
       // console.log('the editor is focus!', cm)
     },
     onCmCodeChange(newCode) {
-      console.log(newCode)
+      // console.log(newCode)
       this.sql = newCode
       this.$emit('codeChange', this.sql)
-    },
-    cancel() {
-      // this.dataReset()
-      this.$emit('switchComponent', { name: '' })
     }
   }
 }
@@ -157,11 +212,23 @@ export default {
   }
 
   .codemirror {
-    height: auto;
-    min-height: 100px;
+    height: 160px;
+    overflow-y: auto;
   }
   .codemirror >>> .CodeMirror-scroll {
-    height: auto;
-    min-height: 100px;
+    height: 160px;
+    overflow-y: auto;
+  }
+
+  .dataPreview>>>.el-card__header{
+    padding: 6px 8px;
+  }
+
+  .dataPreview>>>.el-card__body{
+    padding:10px;
+  }
+
+  span{
+    font-size: 14px;
   }
 </style>
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index b55b6f8cdb..7ce0331f28 100644
--- 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="500"
+      :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>
 
@@ -29,8 +31,14 @@ export default {
     return {
     }
   },
-  computed: {},
-  watch: {},
+  computed: {
+  },
+  watch: {
+    data() {
+      const datas = this.data
+      this.$refs.plxTable.reloadData(datas)
+    }
+  },
   created() {
   },
   mounted() {

From ac8f8271aeb2af9b3d0a642647d5e519947e5753 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 14:56:01 +0800
Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=A0=91?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/business/tree-table/index.vue  |  90 ++++++++++++
 frontend/src/views/system/dept/index.vue      |  56 ++++---
 frontend/src/views/system/menu/index.vue      | 137 +++++++-----------
 3 files changed, 174 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/components/business/tree-table/index.vue

diff --git a/frontend/src/components/business/tree-table/index.vue b/frontend/src/components/business/tree-table/index.vue
new file mode 100644
index 0000000000..c253f9621d
--- /dev/null
+++ 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>
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index 2e9b5d8cc9..e9aaeb5f17 100644
--- 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" />
       </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,7 +124,7 @@
 
 <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'
@@ -118,7 +136,7 @@ export default {
   name: 'MsOrganization',
   components: {
     LayoutContent,
-    ComplexTable,
+    TreeTable,
     Treeselect
   },
   data() {
@@ -168,11 +186,7 @@ export default {
 
         ]
       },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
-      },
+
       defaultCondition: {
         field: 'pid',
         operator: 'eq',
@@ -271,7 +285,7 @@ export default {
     },
     // 加载表格数据
     search(condition) {
-      this.setTableAttr()
+      // this.setTableAttr()
       this.tableData = []
       let param = {}
       if (condition && condition.quick) {
@@ -293,7 +307,7 @@ export default {
 
         if (condition && condition.quick) {
           data = this.buildTree(data)
-          this.setTableAttr(true)
+          // this.setTableAttr(true)
         }
         this.tableData = data
         this.depts = null
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 9eee43df8a..92286d12ff 100644
--- 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>
 
-      <!-- <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,7 +118,7 @@
 
 <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'
@@ -162,9 +128,8 @@ import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselec
 import { addMenu, editMenu, delMenu, getMenusTree } from '@/api/system/menu'
 
 export default {
-  name: 'MsMenu',
   components: {
-    ComplexTable,
+    TreeTable,
     LayoutContent,
     Treeselect,
     IconSelect
@@ -224,11 +189,6 @@ export default {
         //     multiple: false
         //   }
         ]
-      },
-      paginationConfig: {
-        currentPage: 1,
-        pageSize: 10,
-        total: 0
       }
 
     }
@@ -374,7 +334,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 +367,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)
       }
     },

From c8f9ba00ddc05e5a2d97ad4db4755d1174e82cb6 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 15:24:10 +0800
Subject: [PATCH 08/17] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=9B=86=E6=B7=BB=E5=8A=A0SQL=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=EF=BC=8C=E6=95=B0=E6=8D=AE=E9=A2=84=E8=A7=88=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../provider/DatasourceProvider.java          |  3 +-
 .../datasource/provider/JdbcProvider.java     | 14 ++++--
 .../service/dataset/DataSetTableService.java  | 34 ++++++++++---
 frontend/src/lang/zh.js                       |  3 +-
 frontend/src/views/dataset/add/AddSQL.vue     | 50 ++++++++++++++++---
 5 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java b/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
index 1339ac63ac..71b513471f 100644
--- a/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/DatasourceProvider.java
@@ -1,5 +1,6 @@
 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;
@@ -32,6 +33,6 @@ public abstract class DatasourceProvider {
 
     abstract public List<String[]> fetchResult(ResultSet rs) throws Exception;
 
-    abstract public List<String> fetchResultField(ResultSet rs) throws Exception;
+    abstract public List<TableFiled> fetchResultField(ResultSet rs) throws Exception;
 
 }
diff --git a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
index d015063659..f0292b6664 100644
--- 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;
@@ -90,12 +91,19 @@ public class JdbcProvider extends DatasourceProvider {
     }
 
     @Override
-    public List<String> fetchResultField(ResultSet rs) throws Exception {
-        List<String> fieldList = new ArrayList<>();
+    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++) {
-            fieldList.add(metaData.getColumnName(j + 1));
+            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(f);
+            field.setRemarks(l);
+            field.setFieldType(t);
+            fieldList.add(field);
         }
         return fieldList;
     }
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 b74124be9f..fae8ba496e 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -54,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) {
@@ -143,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");// todo limit
+
+        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(sql);// todo 因为编辑可能取消某些字段展示，这里sql看看怎么处理
+        }
 
         List<String[]> data = new ArrayList<>();
         try {
@@ -170,7 +177,6 @@ public class DataSetTableService {
             }).collect(Collectors.toList());
         }
 
-
         Map<String, Object> map = new HashMap<>();
         map.put("fields", fields);
         map.put("data", jsonArray);
@@ -187,14 +193,15 @@ public class DataSetTableService {
         datasourceRequest.setQuery(sql);
         ResultSet dataResultSet = datasourceProvider.getDataResultSet(datasourceRequest);
         List<String[]> data = datasourceProvider.fetchResult(dataResultSet);
-        List<String> fields = datasourceProvider.fetchResultField(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(fields.get(i), ele[i]);
+                    map.put(fieldArray[i], ele[i]);
                 }
                 return map;
             }).collect(Collectors.toList());
@@ -258,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);
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 539eef1de9..ee5fc92263 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -667,7 +667,8 @@ export default {
     required: '必填',
     input_content: '请输入内容',
     add_sql_table: '添加SQL',
-    preview: '预览'
+    preview: '预览',
+    pls_input_name: '请输入名称'
   },
   datasource: {
     create: '新建数据连接',
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index d55f8296e2..17d9b5e056 100644
--- 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>
@@ -65,10 +65,10 @@
             >
               <ux-table-column
                 v-for="field in fields"
-                :key="field"
+                :key="field.fieldName"
                 min-width="200px"
-                :field="field"
-                :title="field"
+                :field="field.fieldName"
+                :title="field.remarks"
                 :resizable="true"
               />
             </ux-grid>
@@ -100,6 +100,10 @@ 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',
@@ -123,8 +127,8 @@ export default {
         line: true,
         mode: 'text/x-sql',
         theme: 'solarized',
-        hintOptions: {
-          completeSingle: true
+        hintOptions: { // 自定义提示选项
+          completeSingle: false // 当匹配只有一项的时候是否自动补全
         }
       },
       data: [],
@@ -140,6 +144,9 @@ export default {
   watch: {},
   mounted() {
     this.initDataSource()
+    this.$refs.myCm.codemirror.on('keypress', () => {
+      this.$refs.myCm.codemirror.showHint()
+    })
   },
   methods: {
     initDataSource() {
@@ -169,6 +176,37 @@ export default {
       })
     },
 
+    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: '' })

From d565385aca47cd2985c18c443fa06582797bac31 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 15:51:34 +0800
Subject: [PATCH 09/17] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E9=9B=86):=20css?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=EF=BC=8Cel-table=E6=9B=BF=E6=8D=A2umy-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/add/AddDB.vue      |  2 +-
 frontend/src/views/dataset/add/AddSQL.vue     | 11 ++++-
 .../views/dataset/common/DatasetTableData.vue | 40 ++++++++++++-------
 .../src/views/dataset/data/TabDataPreview.vue | 26 +++++++++---
 4 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index f47fd53219..c80c8b4d4a 100644
--- 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"
diff --git a/frontend/src/views/dataset/add/AddSQL.vue b/frontend/src/views/dataset/add/AddSQL.vue
index 17d9b5e056..159c10325e 100644
--- a/frontend/src/views/dataset/add/AddSQL.vue
+++ b/frontend/src/views/dataset/add/AddSQL.vue
@@ -60,7 +60,7 @@
               ref="plxTable"
               size="mini"
               style="width: 100%;"
-              :height="500"
+              :height="height"
               :checkbox-config="{highlight: true}"
             >
               <ux-table-column
@@ -133,7 +133,8 @@ export default {
       },
       data: [],
       fields: [],
-      mode: '0'
+      mode: '0',
+      height: 500
     }
   },
   computed: {
@@ -143,6 +144,12 @@ export default {
   },
   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()
diff --git a/frontend/src/views/dataset/common/DatasetTableData.vue b/frontend/src/views/dataset/common/DatasetTableData.vue
index 25068f3e8e..1b097b9246 100644
--- 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)
         })
       }
     },
diff --git a/frontend/src/views/dataset/data/TabDataPreview.vue b/frontend/src/views/dataset/data/TabDataPreview.vue
index 7ce0331f28..c5263bdcaa 100644
--- a/frontend/src/views/dataset/data/TabDataPreview.vue
+++ b/frontend/src/views/dataset/data/TabDataPreview.vue
@@ -4,7 +4,7 @@
       ref="plxTable"
       size="mini"
       style="width: 100%;"
-      :height="500"
+      :height="height"
       :checkbox-config="{highlight: true}"
     >
       <ux-table-column
@@ -23,12 +23,22 @@
 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: {
@@ -39,9 +49,13 @@ export default {
       this.$refs.plxTable.reloadData(datas)
     }
   },
-  created() {
-  },
   mounted() {
+    window.onresize = () => {
+      return (() => {
+        this.height = window.innerHeight / 2
+      })()
+    }
+    this.height = window.innerHeight / 2
   },
   activated() {
   },

From 1aed2355c2d906e2b65f8ee6e8f39903f2a763d6 Mon Sep 17 00:00:00 2001
From: TaoJinlong <jinlong@fit2cloud.com>
Date: Mon, 15 Mar 2021 17:03:38 +0800
Subject: [PATCH 10/17] =?UTF-8?q?fix:=20=E6=89=93=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/pom.xml | 54 ++++++++++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/backend/pom.xml b/backend/pom.xml
index 80a883c497..29fec47f92 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -439,33 +439,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>
 

From 3a5921377fc48e2484be75862f5c0cb5aab61dca Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 17:08:54 +0800
Subject: [PATCH 11/17] =?UTF-8?q?feat(SQL):=20=E7=94=A8=E6=88=B7=E8=87=AA?=
 =?UTF-8?q?=E5=B7=B1=E5=86=99SQL=EF=BC=8C=E5=B0=86=E7=94=A8=E6=88=B7?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E7=9A=84SQL=E4=BD=9C=E4=B8=BA=E5=86=85?=
 =?UTF-8?q?=E9=83=A8=E4=B8=B4=E6=97=B6=E8=A1=A8=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../java/io/dataease/service/chart/ChartViewService.java | 9 +++++++--
 .../io/dataease/service/dataset/DataSetTableService.java | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/backend/src/main/java/io/dataease/service/chart/ChartViewService.java b/backend/src/main/java/io/dataease/service/chart/ChartViewService.java
index 9dd307c471..381362aadc 100644
--- 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 处理结果,目前做一个单系列图表，后期图表组件再扩展
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 fae8ba496e..eb7e2576d4 100644
--- a/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
+++ b/backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java
@@ -157,7 +157,7 @@ public class DataSetTableService {
             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(sql);// todo 因为编辑可能取消某些字段展示，这里sql看看怎么处理
+            datasourceRequest.setQuery(createQuerySQL(ds.getType(), " (" + sql + ") AS tmp ", fieldArray));// todo 因为编辑可能取消某些字段展示，这里sql看看怎么处理
         }
 
         List<String[]> data = new ArrayList<>();

From 0bf906779e3156d68c4faf1c2e69b3cc645b440b Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 17:23:21 +0800
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controller/sys/SysDeptController.java     |  6 +++
 .../controller/sys/response/DeptTreeNode.java | 27 ++++++++++++
 .../io/dataease/service/sys/DeptService.java  | 29 +++++++++++++
 frontend/src/api/system/dept.js               |  9 +++-
 frontend/src/views/system/dept/index.vue      | 10 +++--
 frontend/src/views/system/menu/index.vue      | 14 ++++---
 frontend/src/views/system/user/index.vue      | 41 +++++++++++++++----
 7 files changed, 118 insertions(+), 18 deletions(-)
 create mode 100644 backend/src/main/java/io/dataease/controller/sys/response/DeptTreeNode.java

diff --git a/backend/src/main/java/io/dataease/controller/sys/SysDeptController.java b/backend/src/main/java/io/dataease/controller/sys/SysDeptController.java
index 0f922996ef..1576da9a98 100644
--- 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);
+    }
+
 }
diff --git a/backend/src/main/java/io/dataease/controller/sys/response/DeptTreeNode.java b/backend/src/main/java/io/dataease/controller/sys/response/DeptTreeNode.java
new file mode 100644
index 0000000000..10fcc4ebf6
--- /dev/null
+++ 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;
+    }
+}
diff --git a/backend/src/main/java/io/dataease/service/sys/DeptService.java b/backend/src/main/java/io/dataease/service/sys/DeptService.java
index 290d3468af..d33adcd36e 100644
--- 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);
     }
diff --git a/frontend/src/api/system/dept.js b/frontend/src/api/system/dept.js
index e322d2f08d..a371ee9998 100644
--- 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 }
diff --git a/frontend/src/views/system/dept/index.vue b/frontend/src/views/system/dept/index.vue
index e9aaeb5f17..fd65bcdbdb 100644
--- a/frontend/src/views/system/dept/index.vue
+++ b/frontend/src/views/system/dept/index.vue
@@ -24,7 +24,7 @@
       @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"
@@ -129,7 +129,7 @@ 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 {
@@ -173,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: {
diff --git a/frontend/src/views/system/menu/index.vue b/frontend/src/views/system/menu/index.vue
index 92286d12ff..cbd91334e6 100644
--- a/frontend/src/views/system/menu/index.vue
+++ b/frontend/src/views/system/menu/index.vue
@@ -7,8 +7,8 @@
       :search-config="searchConfig"
       @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
@@ -124,7 +124,7 @@ 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 {
@@ -137,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: {},
@@ -165,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: {
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index b0998f4d36..a6929a77a2 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -11,7 +11,7 @@
       @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 />
@@ -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()
         })
       }

From 2756e736094a9144f4169af222c59d9dcadf36f0 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 17:36:52 +0800
Subject: [PATCH 13/17] =?UTF-8?q?feat(SQL):=20SQL=E6=A8=A1=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8B=EF=BC=8CdatasetTableField=E7=9A=84=E5=8E=9F=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E5=90=8D=EF=BC=8C=E5=8F=96select=20field=20as=20new?=
 =?UTF-8?q?=5Ffield=20...as=E5=90=8E=E8=BE=B9=E7=9A=84=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../main/java/io/dataease/datasource/provider/JdbcProvider.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
index f0292b6664..6ef5ee0b1d 100644
--- a/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
+++ b/backend/src/main/java/io/dataease/datasource/provider/JdbcProvider.java
@@ -100,7 +100,7 @@ public class JdbcProvider extends DatasourceProvider {
             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(f);
+            field.setFieldName(l);
             field.setRemarks(l);
             field.setFieldType(t);
             fieldList.add(field);

From 1ae2d00621dcd1738d366fb39955b7e6c61d0afa Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Mon, 15 Mar 2021 18:18:11 +0800
Subject: [PATCH 14/17] =?UTF-8?q?refactor(css):=20css=20=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/add/AddDB.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index c80c8b4d4a..1ed5551dd9 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -163,4 +163,8 @@ export default {
   .el-checkbox.is-bordered + .el-checkbox.is-bordered {
     margin-left: 0;
   }
+
+  span{
+    font-size: 14px;
+  }
 </style>

From 52e4155a080c65c7b452c4f026fc8496fd9155f1 Mon Sep 17 00:00:00 2001
From: TaoJinlong <jinlong@fit2cloud.com>
Date: Mon, 15 Mar 2021 18:21:37 +0800
Subject: [PATCH 15/17] =?UTF-8?q?feat:=20=E5=AF=B9=E6=8E=A5spark?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/pom.xml                               | 31 +++++++++++++++++++
 .../{HbaseConfig.java => CommonConfig.java}   | 15 ++++++++-
 .../dataease/job/sechedule/DeScheduleJob.java |  1 -
 .../service/dataset/ExtractDataService.java   |  4 +++
 4 files changed, 49 insertions(+), 2 deletions(-)
 rename backend/src/main/java/io/dataease/config/{HbaseConfig.java => CommonConfig.java} (67%)

diff --git a/backend/pom.xml b/backend/pom.xml
index 29fec47f92..177a028f21 100644
--- 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>
diff --git a/backend/src/main/java/io/dataease/config/HbaseConfig.java b/backend/src/main/java/io/dataease/config/CommonConfig.java
similarity index 67%
rename from backend/src/main/java/io/dataease/config/HbaseConfig.java
rename to backend/src/main/java/io/dataease/config/CommonConfig.java
index f7b8bfaece..229ee6a069 100644
--- a/backend/src/main/java/io/dataease/config/HbaseConfig.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;
+    }
 }
diff --git a/backend/src/main/java/io/dataease/job/sechedule/DeScheduleJob.java b/backend/src/main/java/io/dataease/job/sechedule/DeScheduleJob.java
index 3c409114d8..8400020daa 100644
--- 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);
     }
diff --git a/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java b/backend/src/main/java/io/dataease/service/dataset/ExtractDataService.java
index 037fe397d5..248d98f497 100644
--- 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);

From a05fb2db52d91733a7280d175497b9f8e25bd0ed Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 18:23:12 +0800
Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86token=E8=BF=87?=
 =?UTF-8?q?=E6=9C=9F=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/java/io/dataease/auth/config/ShiroConfig.java   | 3 ++-
 backend/src/main/java/io/dataease/auth/util/JWTUtils.java    | 5 +++--
 frontend/src/views/system/user/index.vue                     | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/backend/src/main/java/io/dataease/auth/config/ShiroConfig.java b/backend/src/main/java/io/dataease/auth/config/ShiroConfig.java
index c8cdc9214f..4767cda249 100644
--- 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;
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 b43ae98bd3..7219376e10 100644
--- 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;
     }
 
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
index a6929a77a2..c999f3aa1f 100644
--- a/frontend/src/views/system/user/index.vue
+++ b/frontend/src/views/system/user/index.vue
@@ -14,7 +14,7 @@
         <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" />

From bad0bf003a8a8176d679ec42164f73e1052c7617 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Mon, 15 Mar 2021 18:24:38 +0800
Subject: [PATCH 17/17] =?UTF-8?q?feat:=20=E6=A0=BC=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/add/AddDB.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/dataset/add/AddDB.vue b/frontend/src/views/dataset/add/AddDB.vue
index 1ed5551dd9..99313ac5b0 100644
--- a/frontend/src/views/dataset/add/AddDB.vue
+++ b/frontend/src/views/dataset/add/AddDB.vue
@@ -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 {