2.0.0项目初始化

datax-common/datax-common-database/src/main/java/cn/datax/common/database/core/PageResult.java

@@ -12,12 +12,12 @@ public class PageResult<T> implements Serializable {
 
     private static final long serialVersionUID = 1L;
 
-    private long pageNum;
-    private long pageSize;
-    private long total;
+    private Integer pageNum;
+    private Integer pageSize;
+    private Integer total;
     private List<T> data;
 
-    public PageResult(long total, List<T> data) {
+    public PageResult(Integer total, List<T> data) {
         this.total = total;
         this.data = data;
     }

datax-modules/data-factory-service-parent/data-factory-service/src/main/java/cn/datax/service/data/factory/controller/DataSourceController.java

@@ -195,7 +195,7 @@ public class DataSourceController extends BaseController {
 
     @ApiOperation(value = "获取SQL结果", notes = "根据数据源的id来获取SQL结果")
     @ApiImplicitParam(name = "dbDataQuery", value = "详细实体dbDataQuery", required = true, dataType = "DbDataQuery")
-    @GetMapping("/queryList")
+    @PostMapping("/queryList")
     public R queryList(@RequestBody @Validated DbDataQuery dbDataQuery) {
         DbQuery dbQuery = dataSourceService.getDbQuery(dbDataQuery.getDataSourceId());
         List<Map<String, Object>> list = dbQuery.queryList(dbDataQuery.getSql());
@@ -204,7 +204,7 @@ public class DataSourceController extends BaseController {
 
     @ApiOperation(value = "分页获取SQL结果", notes = "根据数据源的id来分页获取SQL结果")
     @ApiImplicitParam(name = "dbDataQuery", value = "详细实体dbDataQuery", required = true, dataType = "DbDataQuery")
-    @GetMapping("/queryByPage")
+    @PostMapping("/queryByPage")
     public R queryByPage(@RequestBody @Validated DbDataQuery dbDataQuery) {
         DbQuery dbQuery = dataSourceService.getDbQuery(dbDataQuery.getDataSourceId());
         PageResult<Map<String, Object>> page = dbQuery.queryByPage(dbDataQuery.getSql(), dbDataQuery.getOffset(), dbDataQuery.getPageSize());

datax-ui/src/api/factory/datasource.js

@@ -60,3 +60,11 @@ export function checkConnection (data) {
     data: data
   })
 }
+
+export function queryByPage (data) {
+  return request({
+    url: '/data/factory/dataSources/queryByPage',
+    method: 'post',
+    data: data
+  })
+}

datax-ui/src/api/system/user.js

@@ -32,6 +32,13 @@ export function logout (token) {
   })
 }
 
+export function log () {
+  return request({
+    url: '/system/login/logs',
+    method: 'post'
+  })
+}
+
 export function pageUser (data) {
   return request({
     url: '/system/users/page',

datax-ui/src/views/factory/console/index.vue

@@ -7,14 +7,6 @@
       <div :style="classCardbody">
         <el-row>
           <el-col :span="24">
-            <el-button size="mini" round @click="runData" :disabled="sqlExecuting">运行</el-button>
-            <el-button size="mini" round @click="stopData" :disabled="!sqlExecuting">停止</el-button>
-            <el-button size="mini" round @click="formaterSql" :disabled="sqlExecuting">格式化</el-button>
-            <el-button size="mini" round @click="refreshData" :disabled="sqlExecuting">重置</el-button>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
             <el-select v-model="sqlDataSource" placeholder="请选择数据源">
               <el-option
                 v-for="source in sourceOptions"
@@ -24,6 +16,10 @@
                 :disabled="source.status === '0'"
               ></el-option>
             </el-select>
+            <el-button size="mini" round @click="runData" :disabled="sqlExecuting">运行</el-button>
+            <el-button size="mini" round @click="stopData" :disabled="!sqlExecuting">停止</el-button>
+            <el-button size="mini" round @click="formaterSql" :disabled="sqlExecuting">格式化</el-button>
+            <el-button size="mini" round @click="refreshData" :disabled="sqlExecuting">重置</el-button>
           </el-col>
         </el-row>
         <el-row>
@@ -95,13 +91,13 @@ export default {
       title: 'SQL工作台',
       // 数据源数据字典
       sourceOptions: [],
-      sqlDataSource: '',
-      sqlText: '',
+      sqlDataSource: undefined,
+      sqlText: undefined,
       sqlExecuting: false,
       activeTabName: 'table0',
       sqlExecutorId: undefined,
       sqlConsole: [],
-      executeResultInfo: ''
+      executeResultInfo: undefined
     }
   },
   created () {
@@ -167,16 +163,22 @@ export default {
       this.sqlText = val
     },
     formaterSql () {
+      if (!this.sqlText) {
+        return
+      }
       this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
     },
     refreshData () {
+      if (!this.sqlText) {
+        return
+      }
       this.sqlExecuting = false
       this.activeTabName = 'table0'
       this.sqlExecutorId = undefined
-      this.sqlText = ''
+      this.sqlText = undefined
       this.$refs.sqleditor.editor.setValue('')
       this.sqlConsole = []
-      this.executeResultInfo = ''
+      this.executeResultInfo = undefined
     }
   }
 }

datax-ui/src/views/factory/dataset/DataSetAdd.vue

@@ -34,6 +34,7 @@
           </el-form-item>
           <el-form-item>
             <el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
+            <el-button size="mini" type="primary" @click="dataPreview">预览</el-button>
           </el-form-item>
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="form.status">
@@ -49,13 +50,45 @@
           </el-form-item>
         </el-form>
       </div>
+      <el-drawer
+        :visible.sync="drawer"
+        direction="btt"
+        :with-header="false">
+        <el-table :data="previewData.dataList" stripe border
+                  :max-height="200"
+                  style="width: 100%; margin: 15px 0;">
+          <el-table-column label="序号" width="55" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <template v-for="(column, index) in previewData.columnList">
+            <el-table-column
+              :prop="column"
+              :label="column"
+              :key="index"
+              align="center"
+              show-overflow-tooltip
+            />
+          </template>
+        </el-table>
+        <el-pagination
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page.sync="previewData.pageNum"
+          :page-size.sync="previewData.pageSize"
+          :total="previewData.dataTotal"
+        ></el-pagination>
+      </el-drawer>
     </el-card>
   </div>
 </template>
 
 <script>
 import { addDataSet } from '@/api/factory/dataset'
-import { listDataSource } from '@/api/factory/datasource'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
 import sqlFormatter from 'sql-formatter'
 import SqlEditor from '@/components/SqlEditor'
 
@@ -95,7 +128,9 @@ export default {
       },
       // 表单参数
       form: {
-        status: '1'
+        status: '1',
+        sourceId: undefined,
+        setSql: undefined
       },
       // 表单校验
       rules: {
@@ -106,7 +141,15 @@ export default {
       // 状态数据字典
       statusOptions: [],
       // 数据源数据字典
-      sourceOptions: []
+      sourceOptions: [],
+      drawer: false,
+      previewData: {
+        dataList: [],
+        columnList: [],
+        pageNum: 1,
+        pageSize: 20,
+        dataTotal: 0
+      }
     }
   },
   created () {
@@ -133,8 +176,46 @@ export default {
       this.$set(this.form, 'setSql', val)
     },
     formaterSql () {
-      let sqleditor = this.$refs.sqleditor
-      sqleditor.editor.setValue(sqlFormatter.format(sqleditor.editor.getValue()))
+      if (!this.form.setSql) {
+        return
+      }
+      this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
+    },
+    dataPreview () {
+      if (!this.form.sourceId) {
+        return
+      }
+      if (!this.form.setSql) {
+        return
+      }
+      let data = {}
+      data.dataSourceId = this.form.sourceId
+      data.sql = this.form.setSql
+      data.pageNum = this.previewData.pageNum
+      data.pageSize = this.previewData.pageSize
+      queryByPage(data).then(response => {
+        if (response.success) {
+          const { data } = response
+          let dataList = data.data || []
+          let columnList = []
+          if (dataList.length > 0) {
+            columnList = Object.keys(dataList[0])
+          }
+          this.previewData.dataList = dataList
+          this.previewData.columnList = columnList
+          this.previewData.dataTotal = data.total
+          this.drawer = true
+        }
+      })
+    },
+    handleSizeChange (val) {
+      this.previewData.pageNum = 1
+      this.previewData.pageSize = val
+      this.dataPreview()
+    },
+    handleCurrentChange (val) {
+      this.previewData.pageNum = val
+      this.dataPreview()
     },
     /** 提交按钮 */
     submitForm: function () {
@@ -156,6 +237,11 @@ export default {
               this.loadingOptions.loadingText = '保存'
               this.loadingOptions.isDisabled = false
             }
+          }).catch(error => {
+            this.$message.error(error.data.msg || '保存失败')
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
           })
         }
       })

datax-ui/src/views/factory/dataset/DataSetDetail.vue

@@ -4,6 +4,7 @@
       <div slot="header" class="clearfix">
         <span>{{ title }}</span>
         <el-button-group style="float: right;">
+          <el-button size="mini" icon="el-icon-s-data" round @click="dataPreview">数据预览</el-button>
           <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
         </el-button-group>
       </div>
@@ -44,6 +45,38 @@
             <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
           </el-form-item>
         </el-form>
+        <el-drawer
+          :visible.sync="drawer"
+          direction="btt"
+          :with-header="false">
+          <el-table :data="previewData.dataList" stripe border
+                    :max-height="200"
+                    style="width: 100%; margin: 15px 0;">
+            <el-table-column label="序号" width="55" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <template v-for="(column, index) in previewData.columnList">
+              <el-table-column
+                :prop="column"
+                :label="column"
+                :key="index"
+                align="center"
+                show-overflow-tooltip
+              />
+            </template>
+          </el-table>
+          <el-pagination
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="previewData.pageNum"
+            :page-size.sync="previewData.pageSize"
+            :total="previewData.dataTotal"
+          ></el-pagination>
+        </el-drawer>
       </div>
     </el-card>
   </div>
@@ -51,7 +84,7 @@
 
 <script>
 import { getDataSet } from '@/api/factory/dataset'
-import { listDataSource } from '@/api/factory/datasource'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
 import SqlEditor from '@/components/SqlEditor'
 
 export default {
@@ -87,7 +120,15 @@ export default {
       // 状态数据字典
       statusOptions: [],
       // 数据源数据字典
-      sourceOptions: []
+      sourceOptions: [],
+      drawer: false,
+      previewData: {
+        dataList: [],
+        columnList: [],
+        pageNum: 1,
+        pageSize: 20,
+        dataTotal: 0
+      }
     }
   },
   created () {
@@ -119,6 +160,42 @@ export default {
           this.$refs.sqleditor.editor.setValue(this.form.setSql)
         }
       })
+    },
+    dataPreview () {
+      if (!this.form.sourceId) {
+        return
+      }
+      if (!this.form.setSql) {
+        return
+      }
+      let data = {}
+      data.dataSourceId = this.form.sourceId
+      data.sql = this.form.setSql
+      data.pageNum = this.previewData.pageNum
+      data.pageSize = this.previewData.pageSize
+      queryByPage(data).then(response => {
+        if (response.success) {
+          const { data } = response
+          let dataList = data.data || []
+          let columnList = []
+          if (dataList.length > 0) {
+            columnList = Object.keys(dataList[0])
+          }
+          this.previewData.dataList = dataList
+          this.previewData.columnList = columnList
+          this.previewData.dataTotal = data.total
+          this.drawer = true
+        }
+      })
+    },
+    handleSizeChange (val) {
+      this.previewData.pageNum = 1
+      this.previewData.pageSize = val
+      this.dataPreview()
+    },
+    handleCurrentChange (val) {
+      this.previewData.pageNum = val
+      this.dataPreview()
     }
   }
 }

datax-ui/src/views/factory/dataset/DataSetEdit.vue

@@ -34,6 +34,7 @@
           </el-form-item>
           <el-form-item>
             <el-button size="mini" type="primary" @click="formaterSql">Sql格式化</el-button>
+            <el-button size="mini" type="primary" @click="dataPreview">预览</el-button>
           </el-form-item>
           <el-form-item label="状态" prop="status">
             <el-radio-group v-model="form.status">
@@ -48,6 +49,38 @@
             <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
           </el-form-item>
         </el-form>
+        <el-drawer
+          :visible.sync="drawer"
+          direction="btt"
+          :with-header="false">
+          <el-table :data="previewData.dataList" stripe border
+                    :max-height="200"
+                    style="width: 100%; margin: 15px 0;">
+            <el-table-column label="序号" width="55" align="center">
+              <template slot-scope="scope">
+                <span>{{ scope.$index + 1 }}</span>
+              </template>
+            </el-table-column>
+            <template v-for="(column, index) in previewData.columnList">
+              <el-table-column
+                :prop="column"
+                :label="column"
+                :key="index"
+                align="center"
+                show-overflow-tooltip
+              />
+            </template>
+          </el-table>
+          <el-pagination
+            :page-sizes="[10, 20, 50, 100]"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page.sync="previewData.pageNum"
+            :page-size.sync="previewData.pageSize"
+            :total="previewData.dataTotal"
+          ></el-pagination>
+        </el-drawer>
       </div>
     </el-card>
   </div>
@@ -55,7 +88,7 @@
 
 <script>
 import { getDataSet, updateDataSet } from '@/api/factory/dataset'
-import { listDataSource } from '@/api/factory/datasource'
+import { listDataSource, queryByPage } from '@/api/factory/datasource'
 import sqlFormatter from 'sql-formatter'
 import SqlEditor from '@/components/SqlEditor'
 
@@ -104,7 +137,15 @@ export default {
       // 状态数据字典
       statusOptions: [],
       // 数据源数据字典
-      sourceOptions: []
+      sourceOptions: [],
+      drawer: false,
+      previewData: {
+        dataList: [],
+        columnList: [],
+        pageNum: 1,
+        pageSize: 20,
+        dataTotal: 0
+      }
     }
   },
   created () {
@@ -142,8 +183,43 @@ export default {
       this.$set(this.form, 'setSql', val)
     },
     formaterSql (val) {
-      let sqleditor = this.$refs.sqleditor
-      sqleditor.editor.setValue(sqlFormatter.format(sqleditor.editor.getValue()))
+      this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
+    },
+    dataPreview () {
+      if (!this.form.sourceId) {
+        return
+      }
+      if (!this.form.setSql) {
+        return
+      }
+      let data = {}
+      data.dataSourceId = this.form.sourceId
+      data.sql = this.form.setSql
+      data.pageNum = this.previewData.pageNum
+      data.pageSize = this.previewData.pageSize
+      queryByPage(data).then(response => {
+        if (response.success) {
+          const { data } = response
+          let dataList = data.data || []
+          let columnList = []
+          if (dataList.length > 0) {
+            columnList = Object.keys(dataList[0])
+          }
+          this.previewData.dataList = dataList
+          this.previewData.columnList = columnList
+          this.previewData.dataTotal = data.total
+          this.drawer = true
+        }
+      })
+    },
+    handleSizeChange (val) {
+      this.previewData.pageNum = 1
+      this.previewData.pageSize = val
+      this.dataPreview()
+    },
+    handleCurrentChange (val) {
+      this.previewData.pageNum = val
+      this.dataPreview()
     },
     /** 提交按钮 */
     submitForm: function () {
@@ -165,6 +241,11 @@ export default {
               this.loadingOptions.loadingText = '保存'
               this.loadingOptions.isDisabled = false
             }
+          }).catch(error => {
+            this.$message.error(error.data.msg || '保存失败')
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
           })
         }
       })

datax-ui/src/views/login/index.vue

@@ -46,6 +46,7 @@
 
 <script>
 import { validUsername } from '@/utils/validate'
+import { log } from '@/api/system/user'
 
 export default {
   name: 'Login',
@@ -93,6 +94,8 @@ export default {
           this.$store.dispatch('user/login', this.loginForm).then(() => {
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
+          }).then(() => {
+            log()
           }).catch(() => {
             this.loading = false
           })
@@ -153,7 +156,7 @@ $cursor: #fff;
 </style>
 
 <style lang="scss" scoped>
-$bg:#fff;
+$bg:#2d3a4b;
 $dark_gray:#889aa4;
 $light_gray:#eee;