Skip to content

D
datax-cloud
Commit 35d4a029 by yuwei
Options

2.0.0项目初始化

parent e46659aa
Showing with 257 additions and 16 deletions
datax-ui/package-lock.json
...@@ -7657,6 +7657,11 @@ ...@@ -7657,6 +7657,11 @@
} }
} }
}, },
"monaco-editor": {
"version": "0.20.0",
"resolved": "https://registry.npm.taobao.org/monaco-editor/download/monaco-editor-0.20.0.tgz",
"integrity": "sha1-XVAJNDpVASRCbLTZZaTSejSLTeo="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
...@@ -10398,6 +10403,14 @@ ...@@ -10398,6 +10403,14 @@
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true "dev": true
}, },
"sql-formatter": {
"version": "2.3.3",
"resolved": "https://registry.npm.taobao.org/sql-formatter/download/sql-formatter-2.3.3.tgz",
"integrity": "sha1-kQ70hPu5iKXlEL6kFhFX47gLL2I=",
"requires": {
"lodash": "^4.16.0"
}
},
"sshpk": { "sshpk": {
"version": "1.16.1", "version": "1.16.1",
"resolved": "https://registry.npm.taobao.org/sshpk/download/sshpk-1.16.1.tgz", "resolved": "https://registry.npm.taobao.org/sshpk/download/sshpk-1.16.1.tgz",
......
datax-ui/package.json
...@@ -12,10 +12,12 @@ ...@@ -12,10 +12,12 @@
"axios": "^0.19.1", "axios": "^0.19.1",
"core-js": "^3.4.4", "core-js": "^3.4.4",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"monaco-editor": "^0.20.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"path-to-regexp": "^6.1.0", "path-to-regexp": "^6.1.0",
"screenfull": "^5.0.0", "screenfull": "^5.0.0",
"sql-formatter": "^2.3.3",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.1.2" "vuex": "^3.1.2"
......
datax-ui/src/components/CodeEditor/index.vue 0 → 100644
<template>
<div class="the-code-editor-container" ref="container"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
let sqlStr = 'ADD EXCEPT PERCENT ALL EXEC PLAN ALTER EXECUTE PRECISION AND EXISTS PRIMARY ANY EXIT PRINT AS FETCH PROC ASC FILE PROCEDURE AUTHORIZATION FILLFACTOR PUBLIC BACKUP FOR RAISERROR BEGIN FOREIGN READ BETWEEN FREETEXT READTEXT BREAK FREETEXTTABLE RECONFIGURE BROWSE FROM REFERENCES BULK FULL REPLICATION BY FUNCTION RESTORE CASCADE GOTO RESTRICT CASE GRANT RETURN CHECK GROUP REVOKE CHECKPOINT HAVING RIGHT CLOSE HOLDLOCK ROLLBACK CLUSTERED IDENTITY ROWCOUNT COALESCE IDENTITY_INSERT ROWGUIDCOL COLLATE IDENTITYCOL RULE COLUMN IF SAVE COMMIT IN SCHEMA COMPUTE INDEX SELECT CONSTRAINT INNER SESSION_USER CONTAINS INSERT SET CONTAINSTABLE INTERSECT SETUSER CONTINUE INTO SHUTDOWN CONVERT IS SOME CREATE JOIN STATISTICS CROSS KEY SYSTEM_USER CURRENT KILL TABLE CURRENT_DATE LEFT TEXTSIZE CURRENT_TIME LIKE THEN CURRENT_TIMESTAMP LINENO TO CURRENT_USER LOAD TOP CURSOR NATIONAL TRAN DATABASE NOCHECK TRANSACTION DBCC NONCLUSTERED TRIGGER DEALLOCATE NOT TRUNCATE DECLARE NULL TSEQUAL DEFAULT NULLIF UNION DELETE OF UNIQUE DENY OFF UPDATE DESC OFFSETS UPDATETEXT DISK ON USE DISTINCT OPEN USER DISTRIBUTED OPENDATASOURCE VALUES DOUBLE OPENQUERY VARYING DROP OPENROWSET VIEW DUMMY OPENXML WAITFOR DUMP OPTION WHEN ELSE OR WHERE END ORDER WHILE ERRLVL OUTER WITH ESCAPE OVER WRITETEXT'
export default {
name: 'CodeEditor',
props: {
options: {
type: Object,
default () {
return {
language: 'sql', // shell、sql、python
readOnly: true // 不能编辑
}
}
},
value: {
type: String,
default: ''
}
},
data () {
return {
monacoInstance: null,
provider: null,
hints: [
'SELECT',
'INSERT',
'DELETE',
'UPDATE',
'CREATE TABLE',
'DROP TABLE',
'ALTER TABLE',
'CREATE VIEW',
'DROP VIEW',
'CREATE INDEX',
'DROP INDEX',
'CREATE PROCEDURE',
'DROP PROCEDURE',
'CREATE TRIGGER',
'DROP TRIGGER',
'CREATE SCHEMA',
'DROP SCHEMA',
'CREATE DOMAIN',
'ALTER DOMAIN',
'DROP DOMAIN',
'GRANT',
'DENY',
'REVOKE',
'COMMIT',
'ROLLBACK',
'SET TRANSACTION',
'DECLARE',
'EXPLAN',
'OPEN',
'FETCH',
'CLOSE',
'PREPARE',
'EXECUTE',
'DESCRIBE',
'FORM',
'ORDER BY'
]
}
},
created () {
this.initHints()
},
mounted () {
this.init()
},
beforeDestroy () {
this.dispose()
},
methods: {
dispose () {
if (this.monacoInstance) {
if (this.monacoInstance.getModel()) {
this.monacoInstance.getModel().dispose()
}
this.monacoInstance.dispose()
this.monacoInstance = null
if (this.provider) {
this.provider.dispose()
this.provider = null
}
}
},
initHints () {
let sqlArr = sqlStr.split(' ')
this.hints = Array.from(new Set([...this.hints, ...sqlArr])).sort()
},
init () {
let that = this
// console.log(monaco.languages.CompletionItemKind)
this.dispose()
let createCompleters = textUntilPosition => {
// 过滤特殊字符
let _textUntilPosition = textUntilPosition
.replace(/[\*\[\]@\$\(\)]/g, '')
.replace(/(\s+|\.)/g, ' ')
// 切割成数组
let arr = _textUntilPosition.split(' ')
// 取当前输入值
let activeStr = arr[arr.length - 1]
// 获得输入值的长度
let len = activeStr.length
// 获得编辑区域内已经存在的内容
let rexp = new RegExp('([^\\w]|^)' + activeStr + '\\w*', 'gim')
let match = that.value.match(rexp)
let _hints = !match ? [] : match.map(ele => {
let rexp = new RegExp(activeStr, 'gim')
let search = ele.search(rexp)
return ele.substr(search)
})
// 查找匹配当前输入值的元素
let hints = Array.from(new Set([...that.hints, ..._hints])).sort().filter(ele => {
let rexp = new RegExp(ele.substr(0, len), 'gim')
return match && match.length === 1 && ele === activeStr || ele.length === 1
? false
: activeStr.match(rexp)
})
// 添加内容提示
let res = hints.map(ele => {
return {
label: ele,
kind: that.hints.indexOf(ele) > -1 ? monaco.languages.CompletionItemKind.Keyword : monaco.languages.CompletionItemKind.Text,
documentation: ele,
insertText: ele
}
})
return res
}
this.provider = monaco.languages.registerCompletionItemProvider('sql', {
provideCompletionItems (model, position) {
var textUntilPosition = model.getValueInRange({
startLineNumber: position.lineNumber,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column
})
var suggestions = createCompleters(textUntilPosition)
return {
suggestions: suggestions
}
return createCompleters(textUntilPosition)
}
})
// 初始化编辑器实例
this.monacoInstance = monaco.editor.create(this.$refs['container'], {
value: this.value,
theme: 'vs-dark',
autoIndex: true,
...this.options
})
// 监听编辑器content变化事件
this.monacoInstance.onDidChangeModelContent(() => {
this.$emit('contentChange', this.monacoInstance.getValue())
})
}
}
}
</script>
<style lang="scss" scoped>
.the-code-editor-container {
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #eaeaea;
.monaco-editor .scroll-decoration {
box-shadow: none;
}
}
</style>
datax-ui/src/views/factory/dataset/DataSetAdd.vue
...@@ -24,7 +24,12 @@ ...@@ -24,7 +24,12 @@
<el-input v-model="form.setName" placeholder="请输入数据集名称" /> <el-input v-model="form.setName" placeholder="请输入数据集名称" />
</el-form-item> </el-form-item>
<el-form-item label="数据集sql" prop="setSql"> <el-form-item label="数据集sql" prop="setSql">
<el-input v-model="form.setSql" placeholder="请输入数据集sql" /> <code-editor
:options="codeEditorOptions"
:value="form.setSql"
@contentChange="contentChange"
style="height: 300px;"
></code-editor>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
...@@ -46,9 +51,13 @@ ...@@ -46,9 +51,13 @@
<script> <script>
import { addDataSet } from '@/api/factory/dataset' import { addDataSet } from '@/api/factory/dataset'
import { listDataSource } from '@/api/factory/datasource' import { listDataSource } from '@/api/factory/datasource'
import CodeEditor from '@/components/CodeEditor'
export default { export default {
name: 'DataSetAdd', name: 'DataSetAdd',
components: {
CodeEditor
},
props: { props: {
data: { data: {
type: Object, type: Object,
...@@ -87,7 +96,12 @@ export default { ...@@ -87,7 +96,12 @@ export default {
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
// 数据源数据字典 // 数据源数据字典
sourceOptions: [] sourceOptions: [],
codeEditorOptions: {
language: 'sql',
theme: 'vs-dark',
readOnly: false
}
} }
}, },
created () { created () {
...@@ -109,6 +123,10 @@ export default { ...@@ -109,6 +123,10 @@ export default {
} }
}) })
}, },
// 绑定编辑器value值的变化
contentChange (val) {
this.form.setSql = val
},
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { submitForm: function () {
this.$refs['form'].validate(valid => { this.$refs['form'].validate(valid => {
......
datax-ui/src/views/factory/dataset/DataSetDetail.vue
...@@ -23,7 +23,11 @@ ...@@ -23,7 +23,11 @@
<el-input v-model="form.setName" placeholder="请输入数据集名称" /> <el-input v-model="form.setName" placeholder="请输入数据集名称" />
</el-form-item> </el-form-item>
<el-form-item label="数据集sql" prop="setSql"> <el-form-item label="数据集sql" prop="setSql">
<el-input v-model="form.setSql" placeholder="请输入数据集sql" /> <code-editor
:options="codeEditorOptions"
:value="form.setSql"
style="height: 300px;"
></code-editor>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
...@@ -45,9 +49,13 @@ ...@@ -45,9 +49,13 @@
<script> <script>
import { getDataSet } from '@/api/factory/dataset' import { getDataSet } from '@/api/factory/dataset'
import { listDataSource } from '@/api/factory/datasource' import { listDataSource } from '@/api/factory/datasource'
import CodeEditor from '@/components/CodeEditor'
export default { export default {
name: 'DataSetDetail', name: 'DataSetDetail',
components: {
CodeEditor
},
props: { props: {
data: { data: {
type: Object, type: Object,
...@@ -72,7 +80,12 @@ export default { ...@@ -72,7 +80,12 @@ export default {
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
// 数据源数据字典 // 数据源数据字典
sourceOptions: [] sourceOptions: [],
codeEditorOptions: {
language: 'sql',
theme: 'vs-dark',
readOnly: true
}
} }
}, },
created () { created () {
......
datax-ui/src/views/factory/dataset/DataSetEdit.vue
...@@ -24,7 +24,12 @@ ...@@ -24,7 +24,12 @@
<el-input v-model="form.setName" placeholder="请输入数据集名称" /> <el-input v-model="form.setName" placeholder="请输入数据集名称" />
</el-form-item> </el-form-item>
<el-form-item label="数据集sql" prop="setSql"> <el-form-item label="数据集sql" prop="setSql">
<el-input v-model="form.setSql" placeholder="请输入数据集sql" /> <code-editor
:options="codeEditorOptions"
:value="form.setSql"
@contentChange="contentChange"
style="height: 300px;"
></code-editor>
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
...@@ -46,9 +51,13 @@ ...@@ -46,9 +51,13 @@
<script> <script>
import { getDataSet, updateDataSet } from '@/api/factory/dataset' import { getDataSet, updateDataSet } from '@/api/factory/dataset'
import { listDataSource } from '@/api/factory/datasource' import { listDataSource } from '@/api/factory/datasource'
import CodeEditor from '@/components/CodeEditor'
export default { export default {
name: 'DataSetEdit', name: 'DataSetEdit',
components: {
CodeEditor
},
props: { props: {
data: { data: {
type: Object, type: Object,
...@@ -85,7 +94,12 @@ export default { ...@@ -85,7 +94,12 @@ export default {
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
// 数据源数据字典 // 数据源数据字典
sourceOptions: [] sourceOptions: [],
codeEditorOptions: {
language: 'sql',
theme: 'vs-dark',
readOnly: false
}
} }
}, },
created () { created () {
...@@ -117,6 +131,10 @@ export default { ...@@ -117,6 +131,10 @@ export default {
} }
}) })
}, },
// 绑定编辑器value值的变化
contentChange (val) {
this.form.setSql = val
},
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { submitForm: function () {
this.$refs['form'].validate(valid => { this.$refs['form'].validate(valid => {
......
datax-ui/src/views/factory/datasource/DataSourceAdd.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button> <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </div>
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success" align-center>
<el-step title="数据源信息"></el-step> <el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step> <el-step title="连接信息"></el-step>
</el-steps> </el-steps>
......
datax-ui/src/views/factory/datasource/DataSourceDetail.vue
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button> <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </div>
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success" align-center>
<el-step title="数据源信息"></el-step> <el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step> <el-step title="连接信息"></el-step>
</el-steps> </el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="active == 1"> <el-form ref="form" :model="form" label-width="80px" v-if="active == 1" disabled>
<el-form-item label="数据源类型" prop="dbType"> <el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType"> <el-select v-model="form.dbType">
<el-option <el-option
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" v-if="active == 2"> <el-form ref="form2" :model="form2" label-width="80px" v-if="active == 2" disabled>
<el-form-item label="主机" prop="host"> <el-form-item label="主机" prop="host">
<el-input v-model="form2.host" placeholder="请输入主机" /> <el-input v-model="form2.host" placeholder="请输入主机" />
</el-form-item> </el-form-item>
...@@ -54,10 +54,8 @@ ...@@ -54,10 +54,8 @@
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
<el-input v-model="form2.password" placeholder="请输入密码" /> <el-input v-model="form2.password" placeholder="请输入密码" />
</el-form-item> </el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
</el-form-item>
</el-form> </el-form>
<el-button size="mini" type="primary" @click="handleCheckConnection" v-if="active == 2">连通性检测</el-button>
<el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active == 1">下一步</el-button> <el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active == 1">下一步</el-button>
<el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active == 2">上一步</el-button> <el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active == 2">上一步</el-button>
</el-card> </el-card>
......
datax-ui/src/views/factory/datasource/DataSourceEdit.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button> <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </div>
<el-steps :active="active" finish-status="success"> <el-steps :active="active" finish-status="success" align-center>
<el-step title="数据源信息"></el-step> <el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step> <el-step title="连接信息"></el-step>
</el-steps> </el-steps>
......
datax-ui/src/views/system/dept/DeptList.vue
...@@ -120,7 +120,7 @@ export default { ...@@ -120,7 +120,7 @@ export default {
name: 'DeptList', name: 'DeptList',
data () { data () {
return { return {
tableHeight: document.body.offsetHeight - 340 + 'px', tableHeight: document.body.offsetHeight - 240 + 'px',
// 展示切换 // 展示切换
showOptions: { showOptions: {
data: {}, data: {},
......
datax-ui/src/views/system/menu/MenuList.vue
...@@ -119,7 +119,7 @@ export default { ...@@ -119,7 +119,7 @@ export default {
name: 'MenuList', name: 'MenuList',
data () { data () {
return { return {
tableHeight: document.body.offsetHeight - 340 + 'px', tableHeight: document.body.offsetHeight - 240 + 'px',
// 展示切换 // 展示切换
showOptions: { showOptions: {
data: {}, data: {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment