You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by li...@apache.org on 2020/12/11 14:58:37 UTC
[incubator-dolphinscheduler] branch dev updated:
[Feature-3878]Replace the page with element-ui (#4065)
This is an automated email from the ASF dual-hosted git repository.
lidongdai pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new e033f81 [Feature-3878]Replace the page with element-ui (#4065)
e033f81 is described below
commit e033f81e9d340d45896a89144668762fe1f7d5b7
Author: break60 <79...@qq.com>
AuthorDate: Fri Dec 11 22:58:28 2020 +0800
[Feature-3878]Replace the page with element-ui (#4065)
* [Feature-3878]Introduce elment-ui and replace the security center module page with elment-ui
* Change node version
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* Replace the page with element-ui
* Replace user management with elment-ui
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* Repair the last Sunday of each month
---
.github/workflows/ci_frontend.yml | 3 +-
dolphinscheduler-dist/release-docs/LICENSE | 1 +
.../licenses/ui-licenses/LICENSE-element-ui | 21 +
dolphinscheduler-ui/build/config.js | 2 +-
dolphinscheduler-ui/package.json | 6 +-
dolphinscheduler-ui/pom.xml | 3 +-
dolphinscheduler-ui/src/js/conf/home/index.js | 13 +-
.../src/js/conf/home/pages/dag/_source/config.js | 38 +-
.../src/js/conf/home/pages/dag/_source/dag.js | 35 +-
.../src/js/conf/home/pages/dag/_source/dag.scss | 3 +-
.../src/js/conf/home/pages/dag/_source/dag.vue | 577 +++++++++----------
.../_source/formModel/_source/dependentTimeout.vue | 32 +-
.../dag/_source/formModel/_source/selectInput.vue | 27 +-
.../dag/_source/formModel/_source/timeoutAlarm.vue | 14 +-
.../dag/_source/formModel/_source/workerGroups.vue | 15 +-
.../pages/dag/_source/formModel/formLineModel.vue | 32 +-
.../home/pages/dag/_source/formModel/formModel.vue | 171 +++---
.../conf/home/pages/dag/_source/formModel/log.vue | 33 +-
.../_source/formModel/tasks/_source/datasource.vue | 22 +-
.../formModel/tasks/_source/dependItemList.vue | 56 +-
.../_source/formModel/tasks/_source/httpParams.vue | 27 +-
.../tasks/_source/{scriptBox.vue => jsonBox.vue} | 13 +-
.../formModel/tasks/_source/localParams.vue | 38 +-
.../_source/formModel/tasks/_source/nodeStatus.vue | 26 +-
.../_source/formModel/tasks/_source/resources.vue | 9 +-
.../_source/formModel/tasks/_source/scriptBox.vue | 7 -
.../_source/formModel/tasks/_source/sqlType.vue | 15 +-
.../formModel/tasks/_source/statementList.vue | 13 +-
.../dag/_source/formModel/tasks/_source/udfs.vue | 9 +-
.../dag/_source/formModel/tasks/conditions.vue | 6 +-
.../pages/dag/_source/formModel/tasks/datax.vue | 99 +---
.../dag/_source/formModel/tasks/dependent.vue | 6 +-
.../pages/dag/_source/formModel/tasks/flink.vue | 93 ++--
.../pages/dag/_source/formModel/tasks/http.vue | 40 +-
.../home/pages/dag/_source/formModel/tasks/mr.vue | 32 +-
.../dag/_source/formModel/tasks/pre_tasks.vue | 9 +-
.../dag/_source/formModel/tasks/procedure.vue | 14 +-
.../pages/dag/_source/formModel/tasks/python.vue | 51 +-
.../pages/dag/_source/formModel/tasks/shell.vue | 58 +-
.../pages/dag/_source/formModel/tasks/spark.vue | 148 +++--
.../home/pages/dag/_source/formModel/tasks/sql.vue | 69 +--
.../pages/dag/_source/formModel/tasks/sqoop.vue | 263 +++++----
.../dag/_source/formModel/tasks/sub_process.vue | 21 +-
.../dag/_source/formModel/tasks/waterdrop.vue | 43 +-
.../home/pages/dag/_source/jumpAffirm/index.js | 43 +-
.../home/pages/dag/_source/plugIn/jsPlumbHandle.js | 83 +--
.../js/conf/home/pages/dag/_source/plugIn/util.js | 12 +-
.../home/pages/dag/_source/startingParam/index.vue | 2 +-
.../pages/dag/_source/udp/_source/selectTenant.vue | 15 +-
.../src/js/conf/home/pages/dag/_source/udp/udp.vue | 26 +-
.../pages/dag/_source/variable/variablesView.vue | 16 +-
.../pages/list/_source/createDataSource.vue | 99 ++--
.../pages/datasource/pages/list/_source/list.vue | 142 ++---
.../home/pages/datasource/pages/list/index.vue | 62 ++-
.../src/js/conf/home/pages/home/index.vue | 2 +-
.../src/js/conf/home/pages/monitor/index.vue | 2 +-
.../pages/servers/_source/zookeeperDirectories.vue | 23 +-
.../pages/servers/_source/zookeeperList.vue | 108 +---
.../home/pages/monitor/pages/servers/apiserver.vue | 6 -
.../conf/home/pages/monitor/pages/servers/db.vue | 17 +-
.../home/pages/monitor/pages/servers/worker.vue | 23 +-
.../conditions/instance/processInstance.vue | 61 +-
.../_source/conditions/instance/taskInstance.vue | 63 +--
.../_source/taskRecordList/_source/conditions.vue | 68 ++-
.../pages/_source/taskRecordList/_source/list.vue | 96 ++--
.../pages/_source/taskRecordList/index.vue | 11 +-
.../pages/definition/pages/list/_source/email.vue | 38 +-
.../pages/definition/pages/list/_source/list.vue | 615 +++++++++------------
.../definition/pages/list/_source/relatedItems.vue | 12 +-
.../pages/definition/pages/list/_source/start.vue | 101 ++--
.../pages/definition/pages/list/_source/timing.vue | 143 +++--
.../definition/pages/list/_source/versions.vue | 171 ++----
.../projects/pages/definition/pages/list/index.vue | 17 +-
.../projects/pages/definition/pages/tree/index.vue | 24 +-
.../pages/definition/timing/_source/list.vue | 240 ++++----
.../projects/pages/definition/timing/index.vue | 2 +-
.../conf/home/pages/projects/pages/index/index.vue | 26 +-
.../projects/pages/instance/pages/gantt/index.vue | 2 +-
.../pages/instance/pages/list/_source/list.vue | 487 +++++++---------
.../projects/pages/instance/pages/list/index.vue | 12 +-
.../pages/kinship/_source/graphGridOption.js | 53 +-
.../home/pages/projects/pages/kinship/index.vue | 26 +-
.../projects/pages/list/_source/createProject.vue | 24 +-
.../pages/projects/pages/list/_source/list.vue | 142 ++---
.../conf/home/pages/projects/pages/list/index.vue | 47 +-
.../projects/pages/taskInstance/_source/list.vue | 196 +++----
.../pages/projects/pages/taskInstance/index.vue | 12 +-
.../src/js/conf/home/pages/resource/index.vue | 1 -
.../conf/home/pages/resource/pages/file/index.vue | 1 -
.../resource/pages/file/pages/create/index.vue | 29 +-
.../pages/file/pages/createFolder/index.vue | 34 +-
.../pages/file/pages/createUdfFolder/index.vue | 22 +-
.../resource/pages/file/pages/details/index.vue | 6 +-
.../pages/resource/pages/file/pages/edit/index.vue | 4 +-
.../pages/file/pages/list/_source/list.vue | 215 +++----
.../pages/file/pages/list/_source/rename.vue | 21 +-
.../pages/resource/pages/file/pages/list/index.vue | 22 +-
.../resource/pages/file/pages/subFile/index.vue | 26 +-
.../pages/file/pages/subFileFolder/index.vue | 34 +-
.../pages/file/pages/subdirectory/_source/list.vue | 211 +++----
.../file/pages/subdirectory/_source/rename.vue | 21 +-
.../pages/file/pages/subdirectory/index.vue | 22 +-
.../pages/udf/pages/createUdfFolder/index.vue | 21 +-
.../pages/udf/pages/function/_source/createUdf.vue | 48 +-
.../pages/udf/pages/function/_source/list.vue | 186 ++-----
.../resource/pages/udf/pages/function/index.vue | 59 +-
.../pages/udf/pages/resource/_source/list.vue | 208 +++----
.../pages/udf/pages/resource/_source/rename.vue | 21 +-
.../resource/pages/udf/pages/resource/index.vue | 20 +-
.../udf/pages/subUdfDirectory/_source/list.vue | 203 +++----
.../udf/pages/subUdfDirectory/_source/rename.vue | 21 +-
.../pages/udf/pages/subUdfDirectory/index.vue | 20 +-
.../pages/udf/pages/subUdfFolder/index.vue | 21 +-
.../src/js/conf/home/pages/security/index.vue | 1 -
.../security/pages/queue/_source/createQueue.vue | 22 +-
.../pages/security/pages/queue/_source/list.vue | 96 +---
.../conf/home/pages/security/pages/queue/index.vue | 61 +-
.../pages/tenement/_source/createTenement.vue | 37 +-
.../pages/security/pages/tenement/_source/list.vue | 123 ++---
.../home/pages/security/pages/tenement/index.vue | 61 +-
.../conf/home/pages/security/pages/token/index.vue | 1 -
.../security/pages/users/_source/createUser.vue | 56 +-
.../pages/security/pages/users/_source/list.vue | 426 ++++++--------
.../conf/home/pages/security/pages/users/index.vue | 62 ++-
.../pages/warningGroups/_source/createWarning.vue | 30 +-
.../security/pages/warningGroups/_source/list.vue | 176 +++---
.../pages/security/pages/warningGroups/index.vue | 62 ++-
.../pages/workerGroups/_source/createWorker.vue | 10 +-
.../security/pages/workerGroups/_source/list.vue | 64 +--
.../pages/security/pages/workerGroups/index.vue | 38 +-
.../src/js/conf/home/pages/user/index.vue | 1 -
.../home/pages/user/pages/account/_source/info.vue | 56 +-
.../conf/home/pages/user/pages/account/index.vue | 1 -
.../pages/user/pages/password/_source/info.vue | 12 +-
.../conf/home/pages/user/pages/password/index.vue | 1 -
.../pages/user/pages/token/_source/createToken.vue | 43 +-
.../home/pages/user/pages/token/_source/list.vue | 110 ++--
.../js/conf/home/pages/user/pages/token/index.vue | 60 +-
.../src/js/conf/home/store/dag/actions.js | 18 +-
.../src/js/conf/home/store/dag/mutations.js | 4 +-
.../src/js/conf/home/store/kinship/actions.js | 26 +-
.../src/js/conf/home/store/projects/mutations.js | 4 +-
.../src/js/conf/home/store/projects/state.js | 2 +-
dolphinscheduler-ui/src/js/conf/login/App.vue | 16 +-
dolphinscheduler-ui/src/js/conf/login/index.js | 8 +-
.../js/module/components/conditions/conditions.vue | 10 +-
.../crontab/source/_source/input-number.vue | 9 +-
.../components/crontab/source/_times/day.vue | 104 ++--
.../components/crontab/source/_times/hour.vue | 36 +-
.../components/crontab/source/_times/minute.vue | 36 +-
.../components/crontab/source/_times/month.vue | 36 +-
.../components/crontab/source/_times/second.vue | 36 +-
.../components/crontab/source/_times/year.vue | 36 +-
.../js/module/components/crontab/source/app.vue | 14 +-
.../module/components/crontab/source/util/index.js | 2 +-
.../components/fileUpdate/definitionUpdate.vue | 29 +-
.../components/fileUpdate/fileChildReUpdate.vue | 25 +-
.../components/fileUpdate/fileChildUpdate.vue | 37 +-
.../module/components/fileUpdate/fileReUpload.vue | 25 +-
.../js/module/components/fileUpdate/fileUpdate.vue | 34 +-
.../components/fileUpdate/resourceChildUpdate.vue | 35 +-
.../js/module/components/fileUpdate/udfUpdate.vue | 18 +-
.../src/js/module/components/layout/layout.vue | 4 +-
.../src/js/module/components/nav/nav.vue | 351 ++++++------
.../src/js/module/components/popup/popup.vue | 5 +-
.../src/js/module/components/priority/priority.vue | 47 +-
.../components/secondaryMenu/_source/menu.js | 32 +-
.../components/secondaryMenu/secondaryMenu.vue | 6 +-
.../components/tooltipsJSON/tooltipsJSON.vue | 10 +-
.../src/js/module/components/transfer/resource.vue | 68 +--
.../src/js/module/components/transfer/transfer.vue | 66 +--
.../src/js/module/i18n/locale/en_US.js | 42 +-
.../src/js/module/i18n/locale/zh_CN.js | 36 +-
dolphinscheduler-ui/src/sass/common/_table.scss | 9 +
dolphinscheduler-ui/src/sass/common/index.scss | 1 -
e2e/testng.xml | 8 +-
176 files changed, 4308 insertions(+), 5667 deletions(-)
diff --git a/.github/workflows/ci_frontend.yml b/.github/workflows/ci_frontend.yml
index b8e1125..1feaaba 100644
--- a/.github/workflows/ci_frontend.yml
+++ b/.github/workflows/ci_frontend.yml
@@ -52,7 +52,6 @@ jobs:
npm install
npm run lint
npm run build
-
License-check:
runs-on: ubuntu-latest
steps:
@@ -68,4 +67,4 @@ jobs:
with:
java-version: 1.8
- name: Check
- run: mvn -B apache-rat:check
+ run: mvn -B apache-rat:check
\ No newline at end of file
diff --git a/dolphinscheduler-dist/release-docs/LICENSE b/dolphinscheduler-dist/release-docs/LICENSE
index 038eea9..27bbaed 100644
--- a/dolphinscheduler-dist/release-docs/LICENSE
+++ b/dolphinscheduler-dist/release-docs/LICENSE
@@ -490,6 +490,7 @@ MIT licenses
clipboard 2.0.1: https://github.com/zenorocha/clipboard.js MIT
codemirror 5.43.0: https://github.com/codemirror/CodeMirror MIT
dayjs 1.7.8: https://github.com/iamkun/dayjs MIT
+ element-ui 2.13.2: https://github.com/ElemeFE/element MIT
html2canvas 0.5.0-beta4: https://github.com/niklasvh/html2canvas MIT
jquery 3.3.1: https://github.com/jquery/jquery MIT
jquery-ui 1.12.1: https://github.com/jquery/jquery-ui MIT
diff --git a/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui b/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui
new file mode 100644
index 0000000..4b275d0
--- /dev/null
+++ b/dolphinscheduler-dist/release-docs/licenses/ui-licenses/LICENSE-element-ui
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present ElemeFE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/dolphinscheduler-ui/build/config.js b/dolphinscheduler-ui/build/config.js
index 2800115..11bbec5 100644
--- a/dolphinscheduler-ui/build/config.js
+++ b/dolphinscheduler-ui/build/config.js
@@ -207,7 +207,7 @@ const baseConfig = {
'jquery':'jquery/dist/jquery.min.js',
'jquery-ui': 'jquery-ui'
},
- extensions: ['.js', 'json', '.vue', '.scss']
+ extensions: ['*', '.js', 'json', '.vue', '.scss']
},
plugins: [
new VueLoaderPlugin(),
diff --git a/dolphinscheduler-ui/package.json b/dolphinscheduler-ui/package.json
index 9624fa6..8a9291c 100644
--- a/dolphinscheduler-ui/package.json
+++ b/dolphinscheduler-ui/package.json
@@ -13,7 +13,6 @@
},
"dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
- "ans-ui": "1.1.9",
"axios": "^0.16.2",
"bootstrap": "3.3.7",
"canvg": "1.5.1",
@@ -23,6 +22,8 @@
"dagre": "^0.8.5",
"dayjs": "^1.7.8",
"echarts": "4.1.0",
+ "element-ui": "2.13.2",
+ "font-awesome": "^4.7.0",
"html2canvas": "^0.5.0-beta4",
"jquery": "3.3.1",
"jquery-ui": "^1.12.1",
@@ -31,7 +32,7 @@
"lodash": "^4.17.11",
"normalize.css": "^8.0.1",
"vue": "^2.5.17",
- "vue-router": "2.7.0",
+ "vue-router": "^3.0.0",
"vuex": "^3.0.0",
"vuex-router-sync": "^5.0.0"
},
@@ -65,6 +66,7 @@
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.2",
"node-sass": "^4.14.1",
+ "pack": "^2.2.0",
"postcss-loader": "^3.0.0",
"progress-bar-webpack-plugin": "^1.12.1",
"rimraf": "^2.6.2",
diff --git a/dolphinscheduler-ui/pom.xml b/dolphinscheduler-ui/pom.xml
index 8e644de..1263502 100644
--- a/dolphinscheduler-ui/pom.xml
+++ b/dolphinscheduler-ui/pom.xml
@@ -203,5 +203,4 @@
</profiles>
-
-</project>
+</project>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/js/conf/home/index.js b/dolphinscheduler-ui/src/js/conf/home/index.js
index efec218..1324705 100644
--- a/dolphinscheduler-ui/src/js/conf/home/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/index.js
@@ -18,6 +18,9 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
+import ElementUI from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/en'
+import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import store from './store'
@@ -27,20 +30,20 @@ import Chart from '@/module/ana-charts'
import '@/module/filter/formatDate'
import themeData from '@/module/echarts/themeData.json'
import Permissions from '@/module/permissions'
-import 'ans-ui/lib/ans-ui.min.css'
-import ans from 'ans-ui/lib/ans-ui.min'
-import en_US from 'ans-ui/lib/locale/en' // eslint-disable-line
import 'sass/conf/home/index.scss'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'canvg/dist/browser/canvg.min.js'
+import 'font-awesome/css/font-awesome.min.css'
// Component internationalization
-const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: en_US } : {}
+const useOpt = i18n.globalScope.LOCALE === 'en_US' ? { locale: locale } : {}
+
+i18n.globalScope.LOCALE === 'en_US' ? Vue.use(ElementUI, { locale }) : Vue.use(ElementUI)
// Vue.use(ans)
-Vue.use(ans, useOpt)
+Vue.use(useOpt)
sync(store, router)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
index 18fbd94..f759496 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/config.js
@@ -29,31 +29,31 @@ const toolOper = (dagThis) => {
return [
{
code: 'pointer',
- icon: 'ans-icon-pointer',
+ icon: 'el-icon-thumb',
disable: disabled,
desc: `${i18n.$t('Drag Nodes and Selected Items')}`
},
{
code: 'line',
- icon: 'ans-icon-slash',
+ icon: 'el-icon-top-right',
disable: disabled,
desc: `${i18n.$t('Select Line Connection')}`
},
{
code: 'remove',
- icon: 'ans-icon-trash',
+ icon: 'el-icon-delete',
disable: disabled,
desc: `${i18n.$t('Delete selected lines or nodes')}`
},
{
code: 'download',
- icon: 'ans-icon-download',
+ icon: 'el-icon-download',
disable: !dagThis.type,
desc: `${i18n.$t('Download')}`
},
{
code: 'screen',
- icon: 'ans-icon-max',
+ icon: 'el-icon-rank',
disable: false,
desc: `${i18n.$t('Full Screen')}`
}
@@ -150,98 +150,98 @@ const tasksState = {
id: 0,
desc: `${i18n.$t('Submitted successfully')}`,
color: '#A9A9A9',
- icoUnicode: 'ans-icon-dot-circle',
+ icoUnicode: 'fa-dot-circle-o',
isSpin: false
},
RUNNING_EXECUTION: {
id: 1,
desc: `${i18n.$t('Executing')}`,
color: '#0097e0',
- icoUnicode: 'ans-icon-gear',
+ icoUnicode: 'el-icon-s-tools',
isSpin: true
},
READY_PAUSE: {
id: 2,
desc: `${i18n.$t('Ready to pause')}`,
color: '#07b1a3',
- icoUnicode: 'ans-icon-pause-solid',
+ icoUnicode: 'fa-pause-circle',
isSpin: false
},
PAUSE: {
id: 3,
desc: `${i18n.$t('Pause')}`,
color: '#057c72',
- icoUnicode: 'ans-icon-pause',
+ icoUnicode: 'el-icon-video-pause',
isSpin: false
},
READY_STOP: {
id: 4,
desc: `${i18n.$t('Ready to stop')}`,
color: '#FE0402',
- icoUnicode: 'ans-icon-coin',
+ icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
STOP: {
id: 5,
desc: `${i18n.$t('Stop')}`,
color: '#e90101',
- icoUnicode: 'ans-icon-stop',
+ icoUnicode: 'fa-stop-circle',
isSpin: false
},
FAILURE: {
id: 6,
desc: `${i18n.$t('failed')}`,
color: '#000000',
- icoUnicode: 'ans-icon-fail-empty',
+ icoUnicode: 'el-icon-circle-close',
isSpin: false
},
SUCCESS: {
id: 7,
desc: `${i18n.$t('success')}`,
color: '#33cc00',
- icoUnicode: 'ans-icon-success-empty',
+ icoUnicode: 'el-icon-circle-check',
isSpin: false
},
NEED_FAULT_TOLERANCE: {
id: 8,
desc: `${i18n.$t('Need fault tolerance')}`,
color: '#FF8C00',
- icoUnicode: 'ans-icon-pen',
+ icoUnicode: 'el-icon-edit',
isSpin: false
},
KILL: {
id: 9,
desc: `${i18n.$t('kill')}`,
color: '#a70202',
- icoUnicode: 'ans-icon-minus-circle-empty',
+ icoUnicode: 'el-icon-remove-outline',
isSpin: false
},
WAITTING_THREAD: {
id: 10,
desc: `${i18n.$t('Waiting for thread')}`,
color: '#912eed',
- icoUnicode: 'ans-icon-sand-clock',
+ icoUnicode: 'fa-hourglass-end',
isSpin: false
},
WAITTING_DEPEND: {
id: 11,
desc: `${i18n.$t('Waiting for dependence')}`,
color: '#5101be',
- icoUnicode: 'ans-icon-dependence',
+ icoUnicode: 'fa-window-restore',
isSpin: false
},
DELAY_EXECUTION: {
id: 12,
desc: `${i18n.$t('Delay execution')}`,
color: '#5102ce',
- icoUnicode: 'ans-icon-coin',
+ icoUnicode: 'fa-stop-circle-o',
isSpin: false
},
FORCED_SUCCESS: {
id: 13,
desc: `${i18n.$t('Forced success')}`,
color: '#5102ce',
- icoUnicode: 'ans-icon-success-solid',
+ icoUnicode: 'el-icon-success',
isSpin: false
}
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
index 937b739..e98cda2 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
@@ -15,14 +15,13 @@
* limitations under the License.
*/
import Vue from 'vue'
-let v = new Vue()
import _ from 'lodash'
import i18n from '@/module/i18n'
import { jsPlumb } from 'jsplumb'
import JSP from './plugIn/jsPlumbHandle'
import DownChart from './plugIn/downChart'
import store from '@/conf/home/store'
-import dagre from "dagre"
+import dagre from 'dagre'
/**
* Prototype method
@@ -53,7 +52,7 @@ Dag.prototype.setConfig = function (o) {
*/
Dag.prototype.create = function () {
const self = this
- let plumbIns = jsPlumb.getInstance()
+ const plumbIns = jsPlumb.getInstance()
plumbIns.reset()
plumbIns.ready(() => {
JSP.init({
@@ -78,7 +77,7 @@ Dag.prototype.create = function () {
* Action event on the right side of the toolbar
*/
Dag.prototype.toolbarEvent = function ({ item, code, is }) {
- let self = this
+ const self = this
switch (code) {
case 'pointer':
JSP.handleEventPointer(is)
@@ -93,21 +92,15 @@ Dag.prototype.toolbarEvent = function ({ item, code, is }) {
JSP.handleEventScreen({ item, is })
break
case 'download':
- v.$modal.dialog({
- width: 350,
- closable: false,
- showMask: true,
- maskClosable: true,
- title: i18n.$t('Download'),
- content: i18n.$t('Please confirm whether the workflow has been saved before downloading'),
- ok: {
- handle (e) {
- DownChart.download({
- dagThis: self.dag
- })
- }
- },
- cancel: {}
+ Vue.prototype.$confirm(`${i18n.$t('Please confirm whether the workflow has been saved before downloading')}`, `${i18n.$t('Download')}`, {
+ confirmButtonText: `${i18n.$t('Confirm')}`,
+ cancelButtonText: `${i18n.$t('Cancel')}`,
+ type: 'warning'
+ }).then(() => {
+ DownChart.download({
+ dagThis: self.dag
+ })
+ }).catch(() => {
})
break
}
@@ -130,7 +123,7 @@ Dag.prototype.backfill = function (arg) {
for (const i in store.state.dag.connects) {
const connect = store.state.dag.connects[i]
- g.setEdge(connect['endPointSourceId'], connect['endPointTargetId'])
+ g.setEdge(connect.endPointSourceId, connect.endPointTargetId)
}
dagre.layout(g)
@@ -166,7 +159,7 @@ Dag.prototype.backfill = function (arg) {
})
})
} else {
- let plumbIns = jsPlumb.getInstance()
+ const plumbIns = jsPlumb.getInstance()
plumbIns.reset()
plumbIns.ready(() => {
JSP.init({
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
index 88f2d11..cc9ae76 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.scss
@@ -277,8 +277,9 @@ svg path:hover {
background: #fff;
border-radius: 3px;
box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
- padding: 4px 0;
+ padding: 4px 4px;
visibility:hidden;
+ z-index: 10000;
a {
height: 30px;
line-height: 28px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 1880adc..a47d729 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -34,31 +34,33 @@
<div class="dag-contect">
<div class="dag-toolbar">
<div class="assist-btn">
- <x-button
- style="vertical-align: middle;"
- data-toggle="tooltip"
- :title="$t('View variables')"
- data-container="body"
- type="primary"
- size="xsmall"
- :disabled="$route.name !== 'projects-instance-details'"
- @click="_toggleView"
- icon="ans-icon-code">
- </x-button>
- <x-button
+ <el-button
style="vertical-align: middle;"
data-toggle="tooltip"
- :title="$t('Startup parameter')"
+ :title="$t('View variables')"
data-container="body"
type="primary"
- size="xsmall"
+ size="mini"
:disabled="$route.name !== 'projects-instance-details'"
- @click="_toggleParam"
- icon="ans-icon-arrow-circle-right">
- </x-button>
+ @click="_toggleView"
+ icon="el-icon-c-scale-to-original">
+ </el-button>
+ <span>
+ <el-button
+ style="vertical-align: middle;"
+ data-toggle="tooltip"
+ :title="$t('Startup parameter')"
+ data-container="body"
+ type="primary"
+ size="mini"
+ :disabled="$route.name !== 'projects-instance-details'"
+ @click="_toggleParam"
+ icon="el-icon-arrow-right">
+ </el-button>
+ </span>
<span class="name">{{name}}</span>
- <span v-if="name" class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body" data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
+ <span v-if="name" class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="el-icon-copy-document" data-container="body" data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
</div>
<div class="save-btn">
<div class="operation" style="vertical-align: middle;">
@@ -68,71 +70,75 @@
:id="item.code"
:key="$index"
@click="_ckOperation(item,$event)">
- <x-button type="text" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></x-button>
+ <el-button type="text" class="operBtn" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></el-button>
</a>
</div>
- <x-button
- type="primary"
- v-tooltip.light="$t('Format DAG')"
- icon="ans-icon-triangle-solid-right"
- size="xsmall"
- data-container="body"
- v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
- style="vertical-align: middle;"
- @click="dagAutomaticLayout">
- </x-button>
- <x-button
- v-tooltip.light="$t('Refresh DAG status')"
- data-container="body"
- style="vertical-align: middle;"
- icon="ans-icon-refresh"
- type="primary"
- :loading="isRefresh"
- v-if="type === 'instance'"
- @click="!isRefresh && _refresh()"
- size="xsmall" >
- </x-button>
- <x-button
+ <el-button
+ type="primary"
+ v-tooltip.light="$t('Format DAG')"
+ icon="el-icon-caret-right"
+ size="mini"
+ data-container="body"
+ v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
+ style="vertical-align: middle;"
+ @click="dagAutomaticLayout">
+ </el-button>
+ <span>
+ <el-button
+ v-tooltip.light="$t('Refresh DAG status')"
+ data-container="body"
+ style="vertical-align: middle;"
+ icon="el-icon-refresh"
+ type="primary"
+ :loading="isRefresh"
+ v-if="type === 'instance'"
+ @click="!isRefresh && _refresh()"
+ size="mini" >
+ </el-button>
+ </span>
+ <el-button
v-if="isRtTasks"
style="vertical-align: middle;"
type="primary"
- size="xsmall"
- icon="ans-icon-play"
+ size="mini"
+ icon="el-icon-back"
@click="_rtNodesDag" >
{{$t('Return_1')}}
- </x-button>
- <x-button
- type="primary"
- v-tooltip.light="$t('Close')"
- icon="ans-icon-off"
- size="xsmall"
- data-container="body"
- v-if="(type === 'instance' || 'definition') "
- style="vertical-align: middle;"
- @click="_closeDAG">
- {{$t('Close')}}
- </x-button>
- <x-button
+ </el-button>
+ <span>
+ <el-button
+ type="primary"
+ v-tooltip.light="$t('Close')"
+ icon="el-icon-switch-button"
+ size="mini"
+ data-container="body"
+ v-if="(type === 'instance' || 'definition') "
+ style="vertical-align: middle;"
+ @click="_closeDAG">
+ {{$t('Close')}}
+ </el-button>
+ </span>
+ <el-button
style="vertical-align: middle;"
type="primary"
- size="xsmall"
+ size="mini"
:loading="spinnerLoading"
@click="_saveChart"
- icon="ans-icon-save"
+ icon="el-icon-document-checked"
>
{{spinnerLoading ? 'Loading...' : $t('Save')}}
- </x-button>
- <x-button
- style="vertical-align: middle;"
- type="primary"
- size="xsmall"
- v-if="this.type !== 'instance' && this.urlParam.id !== null"
- :loading="spinnerLoading"
- @click="_version"
- icon="ans-icon-dependence"
- >
- {{spinnerLoading ? 'Loading...' : $t('Version Info')}}
- </x-button>
+ </el-button>
+ <span>
+ <el-button
+ style="vertical-align: middle;"
+ type="primary"
+ size="mini"
+ :loading="spinnerLoading"
+ @click="_version"
+ icon="el-icon-info">
+ {{spinnerLoading ? 'Loading...' : $t('Version Info')}}
+ </el-button>
+ </span>
</div>
</div>
<div class="scrollbar dag-container">
@@ -140,6 +146,45 @@
<div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan jtk-draggable" id="canvas" ></div>
</div>
</div>
+ <el-drawer
+ :visible.sync="drawer"
+ size="35%"
+ :with-header="false">
+ <m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion"></m-versions>
+ </el-drawer>
+ <el-drawer
+ :visible.sync="nodeDrawer"
+ size="50%"
+ :with-header="false">
+ <m-form-model v-if="nodeDrawer" :nodeData = nodeData @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
+ </el-drawer>
+ <el-drawer
+ :visible.sync="lineDrawer"
+ size="50%"
+ :wrapperClosable="false"
+ :with-header="false">
+ <m-form-line-model :lineData = lineData @addLineInfo="addLineInfo" @cancel="cancel"></m-form-line-model>
+ </el-drawer>
+ <el-drawer
+ :visible.sync="udpDrawer"
+ size="50%"
+ :wrapperClosable="false"
+ :with-header="false">
+ <m-udp></m-udp>
+ </el-drawer>
+ <el-dialog
+ :title="$t('Set the DAG diagram name')"
+ :visible.sync="dialogVisible"
+ width="45%">
+ <m-udp @onUdp="onUdpDialog" @close="closeDialog"></m-udp>
+ </el-dialog>
+
+ <el-dialog
+ :title="$t('Please set the parameters before starting')"
+ :visible.sync="startDialog"
+ width="65%">
+ <m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
+ </el-dialog>
</div>
</div>
</template>
@@ -159,6 +204,7 @@
import disabledState from '@/module/mixin/disabledState'
import { mapActions, mapState, mapMutations } from 'vuex'
import mVersions from '../../projects/pages/definition/pages/list/_source/versions'
+ import mStart from '../../projects/pages/definition/pages/list/_source/start'
let eventModel
@@ -179,7 +225,39 @@
isLoading: false,
taskId: null,
arg: false,
-
+ versionData: {
+ processDefinition: {
+ id: null,
+ version: '',
+ state: ''
+ },
+ processDefinitionVersions: [],
+ total: null,
+ pageNo: null,
+ pageSize: null
+ },
+ drawer: false,
+ nodeData: {
+ id: null,
+ taskType: '',
+ self: {},
+ preNode: [],
+ rearList: [],
+ instanceId: null
+ },
+ nodeDrawer: false,
+ lineData: {
+ id: null,
+ sourceId: '',
+ targetId: ''
+ },
+ lineDrawer: false,
+ udpDrawer: false,
+ dialogVisible: false,
+ startDialog: false,
+ startData: {},
+ startNodeList: '',
+ sourceType: ''
}
},
mixins: [disabledState],
@@ -190,7 +268,18 @@
methods: {
...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState', 'switchProcessDefinitionVersion', 'getProcessDefinitionVersionsPage', 'deleteProcessDefinitionVersion']),
...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']),
-
+ startRunning(item,startNodeList,sourceType) {
+ this.startData = item
+ this.startNodeList.startNodeList
+ this.sourceType = sourceType
+ this.startDialog = true
+ },
+ onUpdateStart() {
+ this.startDialog = false
+ },
+ closeStart() {
+ this.startDialog = false
+ },
// DAG automatic layout
dagAutomaticLayout() {
if(this.store.state.dag.isEditDag) {
@@ -379,7 +468,12 @@
* @param saveEditDAGChart => Process definition editing
*/
this[this.type === 'instance' ? 'updateInstance' : 'updateDefinition'](this.urlParam.id).then(res => {
- this.$message.success(res.msg)
+ // this.$message.success(res.msg)
+ this.$message({
+ message: res.msg,
+ type: 'success',
+ offset: 80
+ })
this.spinnerLoading = false
// Jump process definition
if (this.type === 'instance') {
@@ -439,33 +533,12 @@
}
return true
},
- /**
- * Global parameter
- * @param Promise
- */
- _udpTopFloorPop () {
- return new Promise((resolve, reject) => {
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mUdp, {
- on: {
- onUdp () {
- modal.remove()
- resolve()
- },
- close () {
- modal.remove()
- }
- }
- })
- }
- })
- })
+ onUdpDialog () {
+ this._save()
+ this.dialogVisible = false
+ },
+ closeDialog () {
+ this.dialogVisible = false
},
/**
* Save chart
@@ -476,11 +549,7 @@
this.$message.warning(`${i18n.$t('Failed to create node to save')}`)
return
}
-
- // Global parameters (optional)
- this._udpTopFloorPop().then(() => {
- return this._save()
- })
+ this.dialogVisible = true
},
/**
* Return to the previous child node
@@ -540,44 +609,46 @@
_toggleParam () {
findComponentDownward(this.$root, `starting-params-dag-index`)._toggleParam()
},
+ addLineInfo ({ item, fromThis }) {
+ this.addConnects(item)
+ this.lineDrawer = false
+ },
+ cancel ({fromThis}) {
+ this.lineDrawer = false
+ },
+
/**
* Create a node popup layer
* @param Object id
*/
_createLineLabel({id, sourceId, targetId}) {
- // $('#jsPlumb_2_50').text('111')
- let self = this
- self.$modal.destroy()
- const removeNodesEvent = (fromThis) => {
- // Manually destroy events inside the component
- fromThis.$destroy()
- // Close the popup
- eventModel.remove()
+ this.lineData.id = id
+ this.lineData.sourceId = sourceId
+ this.lineData.targetId = targetId
+ this.lineDrawer = true
+ },
+
+ addTaskInfo ({ item, fromThis }) {
+ this.addTasks(item)
+ this.nodeDrawer = false
+ },
+
+ cacheTaskInfo({item, fromThis}) {
+ this.cacheTasks(item)
+ },
+
+ close ({ item,flag, fromThis }) {
+ this.addTasks(item)
+ // Edit status does not allow deletion of nodes
+ if (flag) {
+ jsPlumb.remove(this.nodeData.id)
}
- eventModel = this.$drawer({
- className: 'dagMask',
- render (h) {
- return h(mFormLineModel,{
- on: {
- addLineInfo ({ item, fromThis }) {
- self.addConnects(item)
- setTimeout(() => {
- removeNodesEvent(fromThis)
- }, 100)
- },
- cancel ({fromThis}) {
- removeNodesEvent(fromThis)
- }
- },
- props: {
- id: id,
- sourceId: sourceId,
- targetId: targetId
- }
- })
- }
- })
+ this.nodeDrawer = false
},
+ onSubProcess ({ subProcessId, fromThis }) {
+ this._subProcessHandle(subProcessId)
+ },
+
_createNodes ({ id, type }) {
let self = this
let preNode = []
@@ -609,66 +680,19 @@
} else {
preNode = []
}
- if (eventModel) {
- // Close the popup
- eventModel.remove()
- }
-
- const removeNodesEvent = (fromThis) => {
- // Manually destroy events inside the component
- fromThis.$destroy()
- // Close the popup
- eventModel.remove()
- }
this.taskId = id
type = type || self.dagBarId
- eventModel = this.$drawer({
- closable: false,
- direction: 'right',
- escClose: true,
- className: 'dagMask',
- render: h => h(mFormModel, {
- on: {
- addTaskInfo ({ item, fromThis }) {
- self.addTasks(item)
- setTimeout(() => {
- removeNodesEvent(fromThis)
- }, 100)
- },
- /**
- * Cache the item
- * @param item
- * @param fromThis
- */
- cacheTaskInfo({item, fromThis}) {
- self.cacheTasks(item)
- },
- close ({ item,flag, fromThis }) {
- self.addTasks(item)
- // Edit status does not allow deletion of nodes
- if (flag) {
- jsPlumb.remove(id)
- }
-
- removeNodesEvent(fromThis)
- },
- onSubProcess ({ subProcessId, fromThis }) {
- removeNodesEvent(fromThis)
- self._subProcessHandle(subProcessId)
- }
- },
- props: {
- id: id,
- taskType: type,
- self: self,
- preNode: preNode,
- rearList: rearList,
- instanceId: this.$route.params.id
- }
- })
- })
+ this.nodeData.id = id
+ this.nodeData.taskType = type
+ this.nodeData.self = self
+ this.nodeData.preNode = preNode
+ this.nodeData.rearList = rearList
+ this.nodeData.instanceId = this.$route.params.id
+
+ this.nodeDrawer = true
+
},
removeEventModelById ($id) {
if(eventModel && this.taskId == $id){
@@ -677,6 +701,50 @@
},
/**
+ * switch version in process definition version list
+ *
+ * @param version the version user want to change
+ * @param processDefinitionId the process definition id
+ * @param fromThis fromThis
+ */
+ mVersionSwitchProcessDefinitionVersion({ version, processDefinitionId, fromThis }) {
+ this.$store.state.dag.isSwitchVersion = true
+ this.switchProcessDefinitionVersion({
+ version: version,
+ processDefinitionId: processDefinitionId
+ }).then(res=>{
+ this.$message.success($t('Switch Version Successfully'))
+ this.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` })
+ }).catch(e => {
+ this.$store.state.dag.isSwitchVersion = false
+ this.$message.error(e.msg || '')
+ })
+ },
+
+ /**
+ * Paging event of process definition versions
+ *
+ * @param pageNo page number
+ * @param pageSize page size
+ * @param processDefinitionId the process definition id of page version
+ * @param fromThis fromThis
+ */
+ mVersionGetProcessDefinitionVersionsPage({ pageNo, pageSize, processDefinitionId, fromThis }) {
+ this.getProcessDefinitionVersionsPage({
+ pageNo: pageNo,
+ pageSize: pageSize,
+ processDefinitionId: processDefinitionId
+ }).then(res=>{
+ this.versionData.processDefinitionVersions = res.data.lists
+ this.versionData.total = res.data.totalCount
+ this.versionData.pageSize = res.data.pageSize
+ this.versionData.pageNo = res.data.currentPage
+ }).catch(e=>{
+ this.$message.error(e.msg || '')
+ })
+ },
+
+ /**
* query the process definition pagination version
*/
_version (item) {
@@ -690,117 +758,15 @@
let total = res.data.totalCount
let pageSize = res.data.pageSize
let pageNo = res.data.currentPage
- if (this.versionsModel) {
- this.versionsModel.remove()
- }
- this.versionsModel = this.$drawer({
- direction: 'right',
- closable: true,
- showMask: true,
- escClose: true,
- render (h) {
- return h(mVersions, {
- on: {
- /**
- * switch version in process definition version list
- *
- * @param version the version user want to change
- * @param processDefinitionId the process definition id
- * @param fromThis fromThis
- */
- mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
-
- self.$store.state.dag.isSwitchVersion = true
-
- self.switchProcessDefinitionVersion({
- version: version,
- processDefinitionId: processDefinitionId
- }).then(res => {
- self.$message.success($t('Switch Version Successfully'))
- setTimeout(() => {
- fromThis.$destroy()
- self.versionsModel.remove()
- }, 0)
- self.$router.push({ path: `/projects/definition/list/${processDefinitionId}?_t=${new Date().getTime()}` })
- }).catch(e => {
- self.$store.state.dag.isSwitchVersion = false
- self.$message.error(e.msg || '')
- })
- },
-
- /**
- * Paging event of process definition versions
- *
- * @param pageNo page number
- * @param pageSize page size
- * @param processDefinitionId the process definition id of page version
- * @param fromThis fromThis
- */
- mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) {
- self.getProcessDefinitionVersionsPage({
- pageNo: pageNo,
- pageSize: pageSize,
- processDefinitionId: processDefinitionId
- }).then(res => {
- fromThis.processDefinitionVersions = res.data.lists
- fromThis.total = res.data.totalCount
- fromThis.pageSize = res.data.pageSize
- fromThis.pageNo = res.data.currentPage
- }).catch(e => {
- self.$message.error(e.msg || '')
- })
- },
-
- /**
- * delete one version of process definition
- *
- * @param version the version need to delete
- * @param processDefinitionId the process definition id user want to delete
- * @param fromThis fromThis
- */
- mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
- self.deleteProcessDefinitionVersion({
- version: version,
- processDefinitionId: processDefinitionId
- }).then(res => {
- self.$message.success(res.msg || '')
- fromThis.$emit('mVersionGetProcessDefinitionVersionsPage', {
- pageNo: 1,
- pageSize: 10,
- processDefinitionId: processDefinitionId,
- fromThis: fromThis
- })
- }).catch(e => {
- self.$message.error(e.msg || '')
- })
- },
-
- /**
- * remove this drawer
- *
- * @param fromThis
- */
- close ({ fromThis }) {
- setTimeout(() => {
- fromThis.$destroy()
- self.versionsModel.remove()
- }, 0)
- }
- },
- props: {
- processDefinition: {
- id: self.urlParam.id,
- version: self.$store.state.dag.version,
- state: self.releaseState
- },
- processDefinitionVersions: processDefinitionVersions,
- total: total,
- pageNo: pageNo,
- pageSize: pageSize
- }
- })
- }
- })
+ this.versionData.processDefinition.id = this.urlParam.id
+ this.versionData.processDefinition.version = this.$store.state.dag.version
+ this.versionData.processDefinition.state = this.releaseState
+ this.versionData.processDefinitionVersions = processDefinitionVersions
+ this.versionData.total = total
+ this.versionData.pageNo = pageNo
+ this.versionData.pageSize = pageSize
+ this.drawer = true
+
}).catch(e => {
this.$message.error(e.msg || '')
})
@@ -869,10 +835,13 @@
computed: {
...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])
},
- components: {}
+ components: { mVersions, mFormModel, mFormLineModel, mUdp, mStart }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import "./dag";
+ .operBtn {
+ padding: 8px 20px;
+ }
</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
index 2b2ed78..7d2c711 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/dependentTimeout.vue
@@ -23,7 +23,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 5px;">
- <x-switch v-model="enable" @on-click="_onSwitch(0, $event)" :disabled="isDetails"></x-switch>
+ <el-switch v-model="enable" size="small" @change="_onSwitch(0, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -35,7 +35,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding: 5px 0;">
- <x-switch v-model="waitStartTimeout.enable" @on-click="_onSwitch(1, $event)" :disabled="isDetails"></x-switch>
+ <el-switch v-model="waitStartTimeout.enable" size="small" @change="_onSwitch(1, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -46,22 +46,22 @@
<span class="text-box">
<span>{{$t('Timeout period')}}</span>
</span>
- <x-input v-model="waitStartTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+ <el-input v-model="waitStartTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
- </x-input>
+ </el-input>
<span class="text-box">
<span>{{$t('Check interval')}}</span>
</span>
- <x-input v-model="waitStartTimeout.checkInterval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+ <el-input v-model="waitStartTimeout.checkInterval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
- </x-input>
+ </el-input>
<span class="text-box">
<span>{{$t('Timeout strategy')}}</span>
</span>
<div style="padding-top: 6px;">
- <x-checkbox-group v-model="waitStartTimeout.strategy">
- <x-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</x-checkbox>
- </x-checkbox-group>
+ <el-checkbox-group size="small" v-model="waitStartTimeout.strategy">
+ <el-checkbox label="FAILED" :disabled="true">{{$t('Timeout failure')}}</el-checkbox>
+ </el-checkbox-group>
</div>
</label>
</div>
@@ -73,7 +73,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding: 5px 0;">
- <x-switch v-model="waitCompleteTimeout.enable" @on-click="_onSwitch(2, $event)" :disabled="isDetails"></x-switch>
+ <el-switch v-model="waitCompleteTimeout.enable" size="small" @change="_onSwitch(2, $event)" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -84,17 +84,17 @@
<span class="text-box">
<span>{{$t('Timeout period')}}</span>
</span>
- <x-input v-model="waitCompleteTimeout.interval" style="width: 100px;" :disabled="isDetails" maxlength="9">
+ <el-input v-model="waitCompleteTimeout.interval" size="small" style="width: 100px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
- </x-input>
+ </el-input>
<span class="text-box">
<span>{{$t('Timeout strategy')}}</span>
</span>
<div style="padding-top: 6px;">
- <x-checkbox-group v-model="waitCompleteTimeout.strategy">
- <x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
- <x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
- </x-checkbox-group>
+ <el-checkbox-group size="small" v-model="waitCompleteTimeout.strategy">
+ <el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
+ <el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
+ </el-checkbox-group>
</div>
</label>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
index 1d3902c..297cfaa 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/selectInput.vue
@@ -15,33 +15,34 @@
* limitations under the License.
*/
<template>
- <x-select
+ <el-select
style="width: 157px;"
:disabled="isDetails"
- @on-change="_onChange"
+ size="small"
+ @change="_onChange"
v-model="value">
- <x-input
+ <el-input
ref="input"
slot="trigger"
v-if="isInput"
:disabled="isDetails"
slot-scope="{ selectedModel }"
maxlength="4"
- @on-blur="_onBlur"
+ @blur="_onBlur"
:placeholder="$t('Please choose')"
:value="selectedModel === null ? '0' : selectedModel.value"
style="width: 100%;"
- @on-click-icon.stop="_ckIcon">
- <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
- <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
- </x-input>
- <x-option
+ @click="_ckIcon">
+ <em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="!isIconState"></em>
+ <em slot="suffix" class="el-icon-arrow-down" style="font-size: 12px;" v-show="isIconState"></em>
+ </el-input>
+ <el-option
v-for="city in list"
:key="city"
:value="city"
:label="city">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
<script>
import _ from 'lodash'
@@ -67,8 +68,8 @@
},
methods: {
_onChange (o) {
- this.$emit('valueEvent', +o.value)
- this._setIconState(+o.value)
+ this.$emit('valueEvent', +o)
+ this._setIconState(+o)
},
_setIconState (value) {
// Whether there is a list
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
index 0dcab3e..0d11a1e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/timeoutAlarm.vue
@@ -23,7 +23,7 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 5px;">
- <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+ <el-switch v-model="enable" size="small" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -35,10 +35,10 @@
<div class="cont-box">
<label class="label-box">
<div style="padding-top: 6px;">
- <x-checkbox-group v-model="strategy">
- <x-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</x-checkbox>
- <x-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</x-checkbox>
- </x-checkbox-group>
+ <el-checkbox-group v-model="strategy" size="small">
+ <el-checkbox label="WARN" :disabled="isDetails">{{$t('Timeout alarm')}}</el-checkbox>
+ <el-checkbox label="FAILED" :disabled="isDetails">{{$t('Timeout failure')}}</el-checkbox>
+ </el-checkbox-group>
</div>
</label>
</div>
@@ -49,9 +49,9 @@
</div>
<div class="cont-box">
<label class="label-box">
- <x-input v-model="interval" style="width: 200px;" :disabled="isDetails" maxlength="9">
+ <el-input v-model="interval" size="small" style="width: 200px;" :disabled="isDetails" maxlength="9">
<span slot="append">{{$t('Minute')}}</span>
- </x-input>
+ </el-input>
</label>
</div>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
index 8efe5c2..4ab4efb 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/_source/workerGroups.vue
@@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
- <x-select
+ <el-select
:disabled="isDetails"
- @on-change="_onChange"
+ @change="_onChange"
v-model="value"
+ size="small"
style="width: 180px">
- <x-option
+ <el-option
v-for="item in workerGroupsList"
:key="item.id"
:value="item.id"
:label="item.name">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
<script>
import disabledState from '@/module/mixin/disabledState'
@@ -50,8 +51,8 @@
},
methods: {
_onChange (o) {
- this.value = o.value
- this.$emit('workerGroupsEvent', o.value)
+ this.value = o
+ this.$emit('workerGroupsEvent', o)
}
},
watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
index 2864b3c..a46057c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
@@ -26,14 +26,14 @@
<div class="text-box"><span>{{$t('Connection name')}}</span></div>
<div class="cont-box">
<label class="label-box">
- <x-input
+ <el-input
type="text"
+ size="small"
v-model="labelName"
:disabled="isDetails"
:placeholder="$t('Please enter name')"
- maxlength="100"
- autocomplete="off">
- </x-input>
+ maxlength="100">
+ </el-input>
</label>
</div>
</div>
@@ -41,8 +41,8 @@
</div>
<div class="bottom-box">
<div class="submit" style="background: #fff;">
- <x-button type="text" @click="cancel()"> {{$t('Cancel')}} </x-button>
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
+ <el-button type="text" size="small" @click="cancel()"> {{$t('Cancel')}} </el-button>
+ <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </el-button>
</div>
</div>
</div>
@@ -66,9 +66,7 @@
},
mixins: [disabledState],
props: {
- id: String,
- sourceId: String,
- targetId: String
+ lineData: Object
},
methods: {
cancel() {
@@ -77,15 +75,15 @@
})
},
ok() {
- if($(`#${this.id}`).prev().attr('class')==='jtk-overlay') {
- $(`#${this.id}`).prev().empty()
+ if($(`#${this.lineData.id}`).prev().attr('class')==='jtk-overlay') {
+ $(`#${this.lineData.id}`).prev().empty()
}
- $(`#${this.id}`).text(this.labelName)
+ $(`#${this.lineData.id}`).text(this.labelName)
this.$emit('addLineInfo', {
item: {
labelName: this.labelName,
- sourceId: this.sourceId,
- targetId: this.targetId
+ sourceId: this.lineData.sourceId,
+ targetId: this.lineData.targetId
},
fromThis: this
})
@@ -95,10 +93,10 @@
},
created () {
- if($(`#${this.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
- this.labelName = $(`#${this.id}`).prev().text()
+ if($(`#${this.lineData.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
+ this.labelName = $(`#${this.lineData.id}`).prev().text()
} else {
- this.labelName = $(`#${this.id}`).text()
+ this.labelName = $(`#${this.lineData.id}`).text()
}
},
mounted () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
index b6c48fe..b602658 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formModel.vue
@@ -21,10 +21,10 @@
<span class="go-subtask">
<!-- Component can't pop up box to do component processing -->
<m-log :item="backfillItem">
- <template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon ans-icon-timer"></em><em>{{$t('View history')}}</em></a></template>
- <template slot="log"><a href="javascript:"><em class="ansicon ans-icon-log"></em><em>{{$t('View log')}}</em></a></template>
+ <template slot="history"><a href="javascript:" @click="_seeHistory" ><em class="ansicon el-icon-alarm-clock"></em><em>{{$t('View history')}}</em></a></template>
+ <template slot="log"><a href="javascript:"><em class="ansicon el-icon-document"></em><em>{{$t('View log')}}</em></a></template>
</m-log>
- <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon ans-icon-node"></em><em>{{$t('Enter this child node')}}</em></a>
+ <a href="javascript:" @click="_goSubProcess" v-if="_isGoSubProcess"><em class="ansicon fa fa-tasks"></em><em>{{$t('Enter this child node')}}</em></a>
</span>
</div>
<div class="content-box" v-if="isContentBox">
@@ -34,15 +34,15 @@
<div class="text-box"><span>{{$t('Node name')}}</span></div>
<div class="cont-box">
<label class="label-box">
- <x-input
+ <el-input
type="text"
v-model="name"
+ size="small"
:disabled="isDetails"
:placeholder="$t('Please enter name (required)')"
maxlength="100"
- @on-blur="_verifName()"
- autocomplete="off">
- </x-input>
+ @blur="_verifName()">
+ </el-input>
</label>
</div>
</div>
@@ -52,10 +52,10 @@
<div class="text-box"><span>{{$t('Run flag')}}</span></div>
<div class="cont-box">
<label class="label-box">
- <x-radio-group v-model="runFlag" >
- <x-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</x-radio>
- <x-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="runFlag" size="small" style="vertical-align: sub;">
+ <el-radio :label="'NORMAL'" :disabled="isDetails">{{$t('Normal')}}</el-radio>
+ <el-radio :label="'FORBIDDEN'" :disabled="isDetails">{{$t('Prohibition execution')}}</el-radio>
+ </el-radio-group>
</label>
</div>
</div>
@@ -67,15 +67,13 @@
</div>
<div class="cont-box">
<label class="label-box">
- <x-input
- resize
- :autosize="{minRows:2}"
+ <el-input
+ :rows="2"
type="textarea"
:disabled="isDetails"
v-model="description"
- :placeholder="$t('Please enter description')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter description')">
+ </el-input>
</label>
</div>
</div>
@@ -95,81 +93,74 @@
</div>
<!-- Number of failed retries -->
- <div class="clearfix list" v-if="taskType !== 'SUB_PROCESS'">
+ <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS'">
<div class="text-box">
<span>{{$t('Number of failed retries')}}</span>
</div>
<div class="cont-box">
- <m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]">
- </m-select-input>
+ <m-select-input v-model="maxRetryTimes" :list="[0,1,2,3,4]"></m-select-input>
<span>({{$t('Times')}})</span>
<span class="text-b">{{$t('Failed retry interval')}}</span>
- <m-select-input v-model="retryInterval" :list="[1,10,30,60,120]">
- </m-select-input>
+ <m-select-input v-model="retryInterval" :list="[1,10,30,60,120]"></m-select-input>
<span>({{$t('Minute')}})</span>
</div>
</div>
<!-- Delay execution time -->
- <div class="clearfix list" v-if="taskType !== 'SUB_PROCESS' && taskType !== 'CONDITIONS' && taskType !== 'DEPENDENT'">
+ <div class="clearfix list" v-if="nodeData.taskType !== 'SUB_PROCESS' && nodeData.taskType !== 'CONDITIONS' && nodeData.taskType !== 'DEPENDENT'">
<div class="text-box">
<span>{{$t('Delay execution time')}}</span>
</div>
<div class="cont-box">
- <m-select-input v-model="delayTime" :list="[0,1,5,10]">
- </m-select-input>
+ <m-select-input v-model="delayTime" :list="[0,1,5,10]"></m-select-input>
<span>({{$t('Minute')}})</span>
</div>
</div>
<!-- Branch flow -->
- <div class="clearfix list" v-if="taskType === 'CONDITIONS'">
+ <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
<div class="text-box">
<span>{{$t('State')}}</span>
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;">
- <x-select style="width: 157px;" v-model="successNode" :disabled="true">
- <x-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select style="width: 157px;" size="small" v-model="successNode" :disabled="true">
+ <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+ </el-select>
</span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
- <x-select style="width: 157px;" v-model="successBranch" clearable>
- <x-option v-for="item in rearList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select style="width: 157px;" size="small" v-model="successBranch" clearable>
+ <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+ </el-select>
</div>
</div>
- <div class="clearfix list" v-if="taskType === 'CONDITIONS'">
+ <div class="clearfix list" v-if="nodeData.taskType === 'CONDITIONS'">
<div class="text-box">
<span>{{$t('State')}}</span>
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;">
- <x-select style="width: 157px;" v-model="failedNode" :disabled="true">
- <x-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select style="width: 157px;" size="small" v-model="failedNode" :disabled="true">
+ <el-option v-for="item in stateList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+ </el-select>
</span>
<span class="text-b" style="padding-left: 38px">{{$t('Branch flow')}}</span>
- <x-select style="width: 157px;" v-model="failedBranch" clearable>
- <x-option v-for="item in rearList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select style="width: 157px;" size="small" v-model="failedBranch" clearable>
+ <el-option v-for="item in nodeData.rearList" :key="item.value" :value="item.value" :label="item.label"></el-option>
+ </el-select>
</div>
</div>
<!-- Task timeout alarm -->
<m-timeout-alarm
- v-if="taskType !== 'DEPENDENT'"
+ v-if="nodeData.taskType !== 'DEPENDENT'"
ref="timeout"
:backfill-item="backfillItem"
@on-timeout="_onTimeout">
</m-timeout-alarm>
<!-- Dependent timeout alarm -->
<m-dependent-timeout
- v-if="taskType === 'DEPENDENT'"
+ v-if="nodeData.taskType === 'DEPENDENT'"
ref="dependentTimeout"
:backfill-item="backfillItem"
@on-timeout="_onDependentTimeout">
@@ -177,7 +168,7 @@
<!-- shell node -->
<m-shell
- v-if="taskType === 'SHELL'"
+ v-if="nodeData.taskType === 'SHELL'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SHELL"
@@ -185,7 +176,7 @@
</m-shell>
<!-- waterdrop node -->
<m-waterdrop
- v-if="taskType === 'WATERDROP'"
+ v-if="nodeData.taskType === 'WATERDROP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="WATERDROP"
@@ -193,7 +184,7 @@
</m-waterdrop>
<!-- sub_process node -->
<m-sub-process
- v-if="taskType === 'SUB_PROCESS'"
+ v-if="nodeData.taskType === 'SUB_PROCESS'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
@on-set-process-name="_onSetProcessName"
@@ -202,7 +193,7 @@
</m-sub-process>
<!-- procedure node -->
<m-procedure
- v-if="taskType === 'PROCEDURE'"
+ v-if="nodeData.taskType === 'PROCEDURE'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="PROCEDURE"
@@ -210,23 +201,23 @@
</m-procedure>
<!-- sql node -->
<m-sql
- v-if="taskType === 'SQL'"
+ v-if="nodeData.taskType === 'SQL'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SQL"
- :create-node-id="id"
+ :create-node-id="nodeData.id"
:backfill-item="backfillItem">
</m-sql>
<!-- spark node -->
<m-spark
- v-if="taskType === 'SPARK'"
+ v-if="nodeData.taskType === 'SPARK'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SPARK"
:backfill-item="backfillItem">
</m-spark>
<m-flink
- v-if="taskType === 'FLINK'"
+ v-if="nodeData.taskType === 'FLINK'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="FLINK"
@@ -234,7 +225,7 @@
</m-flink>
<!-- mr node -->
<m-mr
- v-if="taskType === 'MR'"
+ v-if="nodeData.taskType === 'MR'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="MR"
@@ -242,7 +233,7 @@
</m-mr>
<!-- python node -->
<m-python
- v-if="taskType === 'PYTHON'"
+ v-if="nodeData.taskType === 'PYTHON'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="PYTHON"
@@ -250,44 +241,44 @@
</m-python>
<!-- dependent node -->
<m-dependent
- v-if="taskType === 'DEPENDENT'"
+ v-if="nodeData.taskType === 'DEPENDENT'"
@on-dependent="_onDependent"
@on-cache-dependent="_onCacheDependent"
ref="DEPENDENT"
:backfill-item="backfillItem">
</m-dependent>
<m-http
- v-if="taskType === 'HTTP'"
+ v-if="nodeData.taskType === 'HTTP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="HTTP"
:backfill-item="backfillItem">
</m-http>
<m-datax
- v-if="taskType === 'DATAX'"
+ v-if="nodeData.taskType === 'DATAX'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="DATAX"
:backfill-item="backfillItem">
</m-datax>
<m-sqoop
- v-if="taskType === 'SQOOP'"
+ v-if="nodeData.taskType === 'SQOOP'"
@on-params="_onParams"
@on-cache-params="_onCacheParams"
ref="SQOOP"
:backfill-item="backfillItem">
</m-sqoop>
<m-conditions
- v-if="taskType === 'CONDITIONS'"
+ v-if="nodeData.taskType === 'CONDITIONS'"
ref="CONDITIONS"
@on-dependent="_onDependent"
@on-cache-dependent="_onCacheDependent"
:backfill-item="backfillItem"
- :pre-node="preNode">
+ :pre-node="nodeData.preNode">
</m-conditions>
<!-- Pre-tasks in workflow -->
<m-pre-tasks
- v-if="['SHELL', 'SUB_PROCESS'].indexOf(taskType) > -1"
+ v-if="['SHELL', 'SUB_PROCESS'].indexOf(nodeData.taskType) > -1"
@on-pre-tasks="_onPreTasks"
ref="PRE_TASK"
:backfill-item="backfillItem"></m-pre-tasks>
@@ -295,8 +286,8 @@
</div>
<div class="bottom-box">
<div class="submit" style="background: #fff;">
- <x-button type="text" id="cancelBtn"> {{$t('Cancel')}} </x-button>
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
+ <el-button type="text" size="small" id="cancelBtn"> {{$t('Cancel')}} </el-button>
+ <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </el-button>
</div>
</div>
</div>
@@ -400,12 +391,7 @@
directives: { clickoutside },
mixins: [disabledState],
props: {
- id: Number,
- taskType: String,
- self: Object,
- preNode: Array,
- rearList: Array,
- instanceId: Number
+ nodeData: Object
},
methods: {
...mapActions('dag', ['getTaskInstanceList']),
@@ -452,14 +438,13 @@
* Jump to task instance
*/
_seeHistory () {
- this.self.$router.push({
+ this.nodeData.self.$router.push({
name: 'task-instance',
query: {
- processInstanceId: this.self.$route.params.id,
+ processInstanceId: this.nodeData.self.$route.params.id,
taskName: this.backfillItem.name
}
})
- this.$modal.destroy()
},
/**
* Enter the child node to judge the process instance or the process definition
@@ -471,7 +456,7 @@
return
}
if (this.router.history.current.name === 'projects-instance-details') {
- let stateId = $(`#${this.id}`).attr('data-state-id') || null
+ let stateId = $(`#${this.nodeData.id}`).attr('data-state-id') || null
if (!stateId) {
this.$message.warning(`${i18n.$t('The task has not been executed and cannot enter the sub-Process')}`)
return
@@ -508,8 +493,8 @@
this.conditionResult.failedNode[0] = this.failedBranch
this.$emit('cacheTaskInfo', {
item: {
- type: this.taskType,
- id: this.id,
+ type: this.nodeData.taskType,
+ id: this.nodeData.id,
name: this.name,
params: this.params,
description: this.description,
@@ -574,7 +559,7 @@
return
}
// Verify task alarm parameters
- if (this.taskType === 'DEPENDENT') {
+ if (this.nodeData.taskType === 'DEPENDENT') {
if (!this.$refs['dependentTimeout']._verification()) {
return
}
@@ -585,7 +570,7 @@
}
// Verify node parameters
- if (!this.$refs[this.taskType]._verification()) {
+ if (!this.$refs[this.nodeData.taskType]._verification()) {
return
}
// Verify preTasks and update dag-things
@@ -595,12 +580,12 @@
}
else {
// Sync data-targetarr
- $(`#${this.id}`).attr(
+ $(`#${this.nodeData.id}`).attr(
'data-targetarr', this.preTaskIdsInWorkflow ? this.preTaskIdsInWorkflow.join(',') : '')
// Update JSP connections
let plumbIns = JSP.JspInstance
- var targetId = this.id
+ var targetId = this.nodeData.id
// Update new connections
this.preTasksToAdd.map(sourceId => {
@@ -626,14 +611,14 @@
}
}
- $(`#${this.id}`).find('span').text(this.name)
+ $(`#${this.nodeData.id}`).find('span').text(this.name)
this.conditionResult.successNode[0] = this.successBranch
this.conditionResult.failedNode[0] = this.failedBranch
// Store the corresponding node data structure
this.$emit('addTaskInfo', {
item: {
- type: this.taskType,
- id: this.id,
+ type: this.nodeData.taskType,
+ id: this.nodeData.id,
name: this.name,
params: this.params,
description: this.description,
@@ -666,7 +651,7 @@
* set run flag
*/
_setRunFlag () {
- let dom = $(`#${this.id}`).find('.ban-p')
+ let dom = $(`#${this.nodeData.id}`).find('.ban-p')
dom.html('')
if (this.runFlag === 'FORBIDDEN') {
dom.append(rtBantpl())
@@ -713,13 +698,13 @@
//fillback use cacheTasks
let cacheTasks = this.store.state.dag.cacheTasks
let o = {}
- if (cacheTasks[this.id]) {
- o = cacheTasks[this.id]
- this.backfillItem = cacheTasks[this.id]
+ if (cacheTasks[this.nodeData.id]) {
+ o = cacheTasks[this.nodeData.id]
+ this.backfillItem = cacheTasks[this.nodeData.id]
} else {
if (taskList.length) {
taskList.forEach(v => {
- if (v.id === this.id) {
+ if (v.id === this.nodeData.id) {
o = v
this.backfillItem = v
}
@@ -750,7 +735,7 @@
}
if(o.workerGroup == undefined) {
this.store.dispatch('dag/getTaskInstanceList',{
- pageSize: 10, pageNo: 1, processInstanceId: this.instanceId, name: o.name
+ pageSize: 10, pageNo: 1, processInstanceId: this.nodeData.instanceId, name: o.name
}).then(res => {
this.workerGroup = res.totalList[0].workerGroup
})
@@ -769,7 +754,7 @@
this.isContentBox = true
// Init value of preTask selector
- let preTaskIds = $(`#${this.id}`).attr('data-targetarr')
+ let preTaskIds = $(`#${this.nodeData.id}`).attr('data-targetarr')
if (!_.isEmpty(this.backfillItem)) {
if (preTaskIds && preTaskIds.length) {
this.backfillItem.preTasks = preTaskIds.split(',')
@@ -796,14 +781,14 @@
* Child workflow entry show/hide
*/
_isGoSubProcess () {
- return this.taskType === 'SUB_PROCESS' && this.name
+ return this.nodeData.taskType === 'SUB_PROCESS' && this.name
},
//Define the item model
_item () {
return {
- type: this.taskType,
- id: this.id,
+ type: this.nodeData.taskType,
+ id: this.nodeData.id,
name: this.name,
description: this.description,
runFlag: this.runFlag,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
index 96e560a..aa869c6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/log.vue
@@ -29,16 +29,16 @@
<span>{{$t('View log')}}</span>
<div class="full-screen">
<a href="javascript:" @click="_downloadLog" data-container="body" data-toggle="tooltip" :title="$t('Download Log')">
- <em class="ans-icon-download" style="font-size: 20px"></em>
+ <em class="el-icon-download" style="font-size: 20px"></em>
</a>
<a href="javascript:" class="refresh-log" :class="loading ? 'active' :''" @click="!loading && _refreshLog()" data-container="body" data-toggle="tooltip" :title="$t('Refresh Log')">
- <em class="ans-icon-refresh"></em>
+ <em class="el-icon-refresh"></em>
</a>
<a href="javascript:" @click="_screenOpen" v-show="!isScreen" data-container="body" data-toggle="tooltip" :title="$t('Enter full screen')">
- <em class="ans-icon-max"></em>
+ <em class="el-icon-rank"></em>
</a>
<a href="javascript:" @click="_screenClose" v-show="isScreen" data-container="body" data-toggle="tooltip" :title="$t('Cancel full screen')">
- <em class="ans-icon-min"></em>
+ <em class="el-icon-full-screen"></em>
</a>
</div>
</div>
@@ -48,7 +48,7 @@
</div>
</div>
<div class="operation">
- <x-button type="primary" shape="circle" @click="close"> {{$t('Close')}} </x-button>
+ <el-button type="primary" size="small" round @click="close"> {{$t('Close')}} </el-button>
</div>
</div>
</div>
@@ -118,8 +118,8 @@
},
_ckLog () {
this.isLog = true
+
this.store.dispatch('dag/getLog', this._rtParam).then(res => {
- this.$message.destroy()
if (!res.data) {
this.isData = false
setTimeout(() => {
@@ -138,7 +138,6 @@
}, 800)
}
}).catch(e => {
- this.$message.destroy()
this.$message.error(e.msg || '')
})
},
@@ -169,7 +168,7 @@
* Download log
*/
_downloadLog () {
- downloadFile('log/download-log', {
+ downloadFile('/log/download-log', {
taskInstanceId: this.stateId || this.logId
})
},
@@ -203,11 +202,7 @@
// Listen for scrollbar events
if (($this.scrollTop() + $this.height()) === $this.height()) {
if (self.loadingIndex > 0) {
- self.$message.loading({
- content: `${i18n.$t('Loading Log...')}`,
- duration: 0,
- closable: false
- })
+ self.$message.info(`${i18n.$t('Loading Log...')}`)
self._onUp()
}
}
@@ -215,11 +210,7 @@
if ($this.get(0).scrollHeight === ($this.height() + $this.scrollTop())) {
// No data is not requested
if (self.isData) {
- self.$message.loading({
- content: `${i18n.$t('Loading Log...')}`,
- duration: 0,
- closable: false
- })
+ self.$message.info(`${i18n.$t('Loading Log...')}`)
self._onDown()
}
}
@@ -240,11 +231,7 @@
created () {
// Source is a task instance
if (this.source === 'list') {
- this.$message.loading({
- content: `${i18n.$t('Loading Log...')}`,
- duration: 0,
- closable: false
- })
+ this.$message.info(`${i18n.$t('Loading Log...')}`)
this._ckLog()
}
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
index 05e248f..1344666 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/datasource.vue
@@ -17,28 +17,30 @@
<template>
<div class="datasource-model">
<div class="select-listpp">
- <x-select v-model="type"
+ <el-select v-model="type"
style="width: 160px;"
- @on-change="_handleTypeChanged"
+ size="small"
+ @change="_handleTypeChanged"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in typeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
- <x-select :placeholder="$t('Please select the datasource')"
+ </el-option>
+ </el-select>
+ <el-select :placeholder="$t('Please select the datasource')"
v-model="datasource"
style="width: 288px;"
+ size="small"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in datasourceList"
:key="city.id"
:value="city.id"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</div>
</template>
@@ -101,7 +103,7 @@
/**
* Brush type
*/
- _handleTypeChanged ({ value }) {
+ _handleTypeChanged (value) {
this.type = value
this._getDatasourceData().then(res => {
this.datasource = this.datasourceList.length && this.datasourceList[0].id || ''
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
index abec923..ead747e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/dependItemList.vue
@@ -17,39 +17,39 @@
<template>
<div class="dep-list-model">
<div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
- <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @on-change="_onChangeProjectId">
- <x-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
- <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @on-change="_onChangeDefinitionId">
- <x-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
- <x-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks">
- <x-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
- </x-option>
- </x-select>
- <x-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @on-change="_onChangeCycle">
- <x-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
- <x-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
- <x-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.projectId" @change="_onChangeProjectId" size="small">
+ <el-option v-for="item in projectList" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
+ <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.definitionId" @change="_onChangeDefinitionId" size="small">
+ <el-option v-for="item in el.definitionList" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
+ <el-select filterable :style="{width:isInstance ? '450px' : '450px'}" :disabled="isDetails" v-model="el.depTasks" size="small">
+ <el-option v-for="item in el.depTasksList || []" :key="item" :value="item" :label="item">
+ </el-option>
+ </el-select>
+ <el-select style="width: 150px;" v-model="el.cycle" :disabled="isDetails" @change="_onChangeCycle">
+ <el-option v-for="item in cycleList" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
+ <el-select style="width: 116px;" v-model="el.dateValue" :disabled="isDetails">
+ <el-option v-for="item in el.dateValueList || []" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
<template v-if="isInstance">
<span class="instance-state">
- <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
- <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
- <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
+ <em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+ <em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'WAITING'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+ <em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILED'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
</span>
</template>
<span class="operation">
<a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
</a>
<a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+ <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
</a>
</span>
</div>
@@ -174,7 +174,7 @@
/**
* change process get dependItemList
*/
- _onChangeProjectId ({ value }) {
+ _onChangeProjectId (value) {
this._getProcessByProjectId(value).then(definitionList => {
/*this.$set(this.dependItemList, this.itemIndex, this._dlOldParams(value, definitionList, item))*/
let definitionId = definitionList[0].value
@@ -187,7 +187,7 @@
})
})
},
- _onChangeDefinitionId ({ value }) {
+ _onChangeDefinitionId (value) {
// get depItem list data
this._getDependItemList(value).then(depTasksList => {
let item = this.dependItemList[this.itemIndex]
@@ -197,7 +197,7 @@
this.$set(this.dependItemList, this.itemIndex, this._rtOldParams(value, item.definitionList, depTasksList, item))
})
},
- _onChangeCycle ({ value }) {
+ _onChangeCycle (value) {
let list = _.cloneDeep(dateValueList[value])
this.$set(this.dependItemList[this.itemIndex], 'dateValue', list[0].value)
this.$set(this.dependItemList[this.itemIndex], 'dateValueList', list)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
index de5f781..7f9724c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/httpParams.vue
@@ -20,50 +20,51 @@
v-for="(item,$index) in httpParamsList"
:key="item.id"
@click="_getIndex($index)">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="httpParamsList[$index].prop"
:placeholder="$t('prop(required)')"
- @on-blur="_verifProp()"
+ @blur="_verifProp()"
:style="inputStyle">
- </x-input>
- <x-select
+ </el-input>
+ <el-select
@change="_handlePositionChanged"
v-model="httpParamsList[$index].httpParametersType"
:placeholder="$t('Http Parameters Position')"
:disabled="isDetails"
:style="inputStyle"
>
- <x-option
+ <el-option
v-for="position in positionList"
:key="position.code"
:value="position.id"
:label="position.code">
- </x-option>
- </x-select>
- <x-input
+ </el-option>
+ </el-select>
+ <el-input
:disabled="isDetails"
type="text"
v-model="httpParamsList[$index].value"
:placeholder="$t('value(required)')"
- @on-blur="_handleValue()"
+ @blur="_handleValue()"
:style="inputStyle">
- </x-input>
+ </el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (httpParamsList.length - 1)">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add-dp" v-if="!httpParamsList.length">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
similarity index 90%
copy from dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
copy to dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
index 91e1cb7..71e4d80 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/jsonBox.vue
@@ -27,9 +27,6 @@
</div>
</div>
</m-list-box>
- <a class="ans-modal-box-close">
- <em class="ans-icon-min" @click="closeModal"></em>
- </a>
</div>
</template>
<script>
@@ -51,7 +48,7 @@
},
mixins: [disabledState],
props: {
- item: String
+ jsonItem: String
},
methods: {
/**
@@ -65,7 +62,7 @@
readOnly: this.isDetails
})
editor.on("change",function(){
- self.$emit('getSriptBoxValue',editor.getValue())
+ self.$emit('getJsonBoxValue',editor.getValue())
})
this.keypress = () => {
@@ -83,14 +80,10 @@
return editor
},
- closeModal() {
- let self = this
- self.$emit('closeAble')
- }
},
watch: {},
created () {
- let o = this.item
+ let o = this.jsonItem
// Non-null objects represent backfill
if (!_.isEmpty(o)) {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
index 0bbbb66..ea5f299 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/localParams.vue
@@ -20,64 +20,68 @@
v-for="(item,$index) in localParamsList"
:key="item.id"
@click="_getIndex($index)">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="localParamsList[$index].prop"
:placeholder="$t('prop(required)')"
maxlength="256"
- @on-blur="_verifProp()"
+ @blur="_verifProp()"
:style="inputStyle">
- </x-input>
+ </el-input>
<template v-if="hide">
- <x-select
+ <el-select
style="width: 80px;"
+ size="small"
@change="_handleDirectChanged"
v-model="localParamsList[$index].direct"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in directList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
- <x-select
+ </el-option>
+ </el-select>
+ <el-select
style="width: 118px;"
+ size="small"
@change="_handleTypeChanged"
v-model="localParamsList[$index].type"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in typeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="localParamsList[$index].value"
:placeholder="$t('value(optional)')"
maxlength="256"
- @on-blur="_handleValue()"
+ @blur="_handleValue()"
:style="inputStyle">
- </x-input>
+ </el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeUdp($index)" >
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (localParamsList.length - 1)">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add-dp" v-if="!localParamsList.length">
<a href="javascript:" @click="!isDetails && _addUdp()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
index fe9b28b..3d6d0e6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/nodeStatus.vue
@@ -17,27 +17,27 @@
<template>
<div class="dep-list-model">
<div v-for="(el,$index) in dependItemList" :key='$index' class="list" @click="itemIndex = $index">
- <x-select style="width: 150px;" v-model="el.depTasks" :disabled="isDetails">
- <x-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
- <x-select style="width: 116px;" v-model="el.status" :disabled="isDetails">
- <x-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <el-select style="width: 150px;" size="small" v-model="el.depTasks" :disabled="isDetails">
+ <el-option v-for="item in preNode" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
+ <el-select style="width: 116px;" size="small" v-model="el.status" :disabled="isDetails">
+ <el-option v-for="item in nodeStatusList || []" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
<template v-if="isInstance">
<span class="instance-state">
- <em class="iconfont ans-icon-success-solid" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
- <em class="iconfont ans-icon-clock" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
- <em class="iconfont ans-icon-fail-solid" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
+ <em class="iconfont el-icon-success" :class="'icon-' + el.state" v-if="el.state === 'SUCCESS'" data-toggle="tooltip" data-container="body" :title="$t('success')"></em>
+ <em class="iconfont el-icon-timer" :class="'icon-' + el.state" v-if="el.state === 'RUNNING_EXECUTION'" data-toggle="tooltip" data-container="body" :title="$t('waiting')"></em>
+ <em class="iconfont el-icon-error" :class="'icon-' + el.state" v-if="el.state === 'FAILURE'" data-toggle="tooltip" data-container="body" :title="$t('failed')"></em>
</span>
</template>
<span class="operation">
<a href="javascript:" class="delete" @click="!isDetails && _remove($index)">
- <em class="iconfont ans-icon-trash" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
+ <em class="iconfont el-icon-delete" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('delete')" ></em>
</a>
<a href="javascript:" class="add" @click="!isDetails && _add()" v-if="$index === (dependItemList.length - 1)">
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
+ <em class="iconfont el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" data-container="body" :title="$t('Add')"></em>
</a>
</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
index 8b578c7..99c2816 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/resources.vue
@@ -16,19 +16,20 @@
*/
<template>
<div class="resource-list-model">
- <x-select multiple
+ <el-select multiple
v-model="value"
filterable
+ size="small"
:disabled="isDetails"
:placeholder="$t('Please select resources')"
style="width: 100%;">
- <x-option
+ <el-option
v-for="city in resList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</template>
<script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
index 91e1cb7..c986448 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/scriptBox.vue
@@ -27,9 +27,6 @@
</div>
</div>
</m-list-box>
- <a class="ans-modal-box-close">
- <em class="ans-icon-min" @click="closeModal"></em>
- </a>
</div>
</template>
<script>
@@ -83,10 +80,6 @@
return editor
},
- closeModal() {
- let self = this
- self.$emit('closeAble')
- }
},
watch: {},
created () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
index ecb7d2c..f239c4c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/sqlType.vue
@@ -16,18 +16,19 @@
*/
<template>
<div class="sql-type-model">
- <x-select
+ <el-select
v-model="sqlTypeId"
:disabled="isDetails"
- @on-change="_handleSqlTypeChanged"
- style="width: 120px;">
- <x-option
+ @change="_handleSqlTypeChanged"
+ style="width: 120px;"
+ size="small">
+ <el-option
v-for="city in sqlTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</template>
<script>
@@ -53,7 +54,7 @@
* return sqlType
*/
_handleSqlTypeChanged (val) {
- this.$emit('on-sqlType', val.value)
+ this.$emit('on-sqlType', val)
}
},
watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
index ecd10a9..145bcb9 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/statementList.vue
@@ -20,30 +20,31 @@
v-for="(item,$index) in localStatementList"
:key="item.id"
@click="_getIndex($index)">
- <x-input
+ <el-input
:disabled="isDetails"
type="textarea"
+ size="small"
resize="none"
:autosize="{minRows:1}"
:placeholder="$t('Please enter a non-query SQL statement')"
v-model="localStatementList[$index]"
- @on-blur="_verifProp()"
+ @blur="_verifProp()"
style="width: 525px;">
- </x-input>
+ </el-input>
<span class="lt-add">
<a href="javascript:" style="color:red;" @click="!isDetails && _removeStatement($index)" >
- <em class="ans-icon-trash" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
+ <em class="el-icon-delete" :class="_isDetails" data-toggle="tooltip" :title="$t('delete')" ></em>
</a>
</span>
<span class="add" v-if="$index === (localStatementList.length - 1)">
<a href="javascript:" @click="!isDetails && _addStatement()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
<span class="add" v-if="!localStatementList.length">
<a href="javascript:" @click="!isDetails && _addStatement()" >
- <em class="iconfont ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
index e27a683..c67f344 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/_source/udfs.vue
@@ -16,17 +16,18 @@
*/
<template>
<div class="udfs-model">
- <x-select multiple
+ <el-select multiple
v-model="udfsStr"
:disabled="isDetails"
+ size="small"
style="width: 100%;">
- <x-option
+ <el-option
v-for="city in udfsList"
:key="city.id"
:value="city.id"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</template>
<script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
index 621de81..e475441 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/conditions.vue
@@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
- <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
- <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
- <em class="ans-icon-trash dep-delete"
+ <em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
index 42bd234..56898d3 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/datax.vue
@@ -21,7 +21,7 @@
<div slot="content">
<label class="label-box">
<div style="padding-top: 5px;">
- <x-switch v-model="enable" @on-click="_onSwitch" :disabled="isDetails"></x-switch>
+ <el-switch v-model="enable" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -31,10 +31,10 @@
<div slot="text">{{$t('Datasource')}}</div>
<div slot="content">
<m-datasource
- ref="refDs"
- @on-dsData="_onDsData"
- :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
- :data="{ type:dsType,datasource:datasource }">
+ ref="refDs"
+ @on-dsData="_onDsData"
+ :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
+ :data="{ type:dsType,datasource:datasource }">
</m-datasource>
</div>
</m-list-box>
@@ -48,7 +48,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -57,22 +57,22 @@
<div slot="text">{{$t('TargetDataBase')}}</div>
<div slot="content">
<m-datasource
- ref="refDt"
- @on-dsData="_onDtData"
- :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
- :data="{ type:dtType,datasource:datatarget }">
+ ref="refDt"
+ @on-dsData="_onDtData"
+ :supportType="['MYSQL','POSTGRESQL', 'ORACLE', 'SQLSERVER']"
+ :data="{ type:dtType,datasource:datatarget }">
</m-datasource>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('TargetTable')}}</div>
<div slot="content">
- <x-input
+ <el-input
type="input"
+ size="small"
v-model="targetTable"
- :placeholder="$t('Please enter the table of target')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter the table of target')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -126,9 +126,6 @@
name="code-json-mirror"
style="opacity: 0;">
</textarea>
- <a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setJsonEditorVal"></em>
- </a>
</div>
</div>
</m-list-box>
@@ -159,7 +156,12 @@
<span> G</span>
</div>
</div>
-
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -216,6 +218,8 @@
xms: 1,
//jvm memory xms
xmx: 1,
+ scriptBoxDialog: false,
+ item: '',
}
},
mixins: [disabledState],
@@ -225,60 +229,11 @@
},
methods: {
setEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- editor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: editor.getValue()
- }
- })
- }
- })
+ this.item = editor.getValue()
+ this.scriptBoxDialog = true
},
- setJsonEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- jsonEditor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: jsonEditor.getValue()
- }
- })
- }
- })
+ getSriptBoxValue (val) {
+ editor.setValue(val)
},
_onSwitch (is) {
if(is) {
@@ -566,7 +521,7 @@
}
}
},
- components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput }
+ components: { mListBox, mDatasource, mLocalParams, mStatementList, mSelectInput, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
index 79d127a..46c1c83 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/dependent.vue
@@ -23,8 +23,8 @@
<a href="javascript:"
@click="!isDetails && _addDep()"
class="add-dep">
- <em v-if="!isLoading" class="ans-icon-increase" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
- <em v-if="isLoading" class="ans-icon-spinner2 as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="!isLoading" class="el-icon-circle-plus-outline" :class="_isDetails" data-toggle="tooltip" :title="$t('Add')"></em>
+ <em v-if="isLoading" class="el-icon-loading as as-spin" data-toggle="tooltip" :title="$t('Add')"></em>
</a>
</div>
<div class="dep-box">
@@ -40,7 +40,7 @@
@click="!isDetails && _setRelation($index)">
{{el.relation === 'AND' ? $t('and') : $t('or')}}
</span>
- <em class="ans-icon-trash dep-delete"
+ <em class="el-icon-delete dep-delete"
data-toggle="tooltip"
data-container="body"
:class="_isDetails"
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
index 0fb4ee3..c81f3e6 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/flink.vue
@@ -19,30 +19,31 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="programType"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="mainClass"
- :placeholder="$t('Please enter main class')"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="mainClass"
+ :placeholder="$t('Please enter main class')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -56,76 +57,77 @@
<m-list-box>
<div slot="text">{{$t('Deploy Mode')}}</div>
<div slot="content">
- <x-radio-group v-model="deployMode">
- <x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
- <x-radio :label="'local'" :disabled="isDetails"></x-radio>
- </x-radio-group>
+ <el-radio-group v-model="deployMode" size="small">
+ <el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
+ <el-radio :label="'local'" :disabled="isDetails"></el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box v-if="deployMode === 'cluster'">
<div slot="text">{{$t('Flink Version')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 100px;"
+ size="small"
v-model="flinkVersion"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="version in flinkVersionList"
:key="version.code"
:value="version.code"
:label="version.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<div class="list-box-4p" v-if="deployMode === 'cluster'">
<div class="clearfix list">
<span class="sp1" style="word-break:break-all">{{$t('jobManagerMemory')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="jobManagerMemory"
:placeholder="$t('Please enter jobManager memory')"
- style="width: 200px;"
- autocomplete="off">
- </x-input>
+ style="width: 200px;">
+ </el-input>
</span>
<span class="sp1 sp3">{{$t('taskManagerMemory')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="taskManagerMemory"
:placeholder="$t('Please enter the taskManager memory')"
- style="width: 186px;"
- autocomplete="off">
- </x-input>
+ style="width: 186px;">
+ </el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('slot')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="slot"
:placeholder="$t('Please enter solt number')"
- style="width: 200px;"
- autocomplete="off">
- </x-input>
+ style="width: 200px;">
+ </el-input>
</span>
<div v-if="flinkVersion !== '>=1.10'">
<span class="sp1 sp3">{{$t('taskManager')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="taskManager"
:placeholder="$t('Please enter taskManager number')"
- style="width: 186px;"
- autocomplete="off">
- </x-input>
+ style="width: 186px;">
+ </el-input>
</span>
</div>
</div>
@@ -133,26 +135,27 @@
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="mainArgs"
- :placeholder="$t('Please enter Command-line parameters')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter Command-line parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
+ size="small"
v-model="others"
:placeholder="$t('Please enter other parameters')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -167,10 +170,10 @@
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">
<m-local-params
- ref="refLocalParams"
- @on-local-params="_onLocalParams"
- :udp-list="localParams"
- :hide="false">
+ ref="refLocalParams"
+ @on-local-params="_onLocalParams"
+ :udp-list="localParams"
+ :hide="false">
</m-local-params>
</div>
</m-list-box>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
index 425cb2e..50a9a28 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/http.vue
@@ -19,30 +19,32 @@
<m-list-box>
<div slot="text">{{$t('Http Url')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="url"
:placeholder="$t('Please Enter Http Url')"
autocomplete="off">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Http Method')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 150px;"
+ size="small"
v-model="httpMethod"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in httpMethodList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
@@ -59,30 +61,31 @@
<m-list-box>
<div slot="text">{{$t('Http Check Condition')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 230px;"
+ size="small"
v-model="httpCheckCondition"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in httpCheckConditionList"
:key="city.code"
:value="city.code"
:label="city.value">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Http Condition')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="condition"
- :placeholder="$t('Please Enter Http Condition')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please Enter Http Condition')">
+ </el-input>
</div>
</m-list-box>
@@ -92,10 +95,7 @@
<div slot="content">
<label class="label-box">
<div style="padding-top: 5px;">
- <x-switch
- v-model="timeoutSettings"
- :disabled="isDetails"
- ></x-switch>
+ <el-switch size="small" v-model="timeoutSettings" :disabled="isDetails"></el-switch>
</div>
</label>
</div>
@@ -107,12 +107,12 @@
</div>
<div class="cont-box">
<span class="label-box" style="width: 193px;display: inline-block;" >
- <x-input v-model='connectTimeout' maxlength="7" />
+ <el-input size="small" v-model='connectTimeout' maxlength="7"></el-input>
</span>
<span>{{$t('ms')}}</span>
<span class="text-b">{{$t('Socket Timeout')}}</span>
<span class="label-box" style="width: 193px;display: inline-block;" >
- <x-input v-model='socketTimeout' maxlength="7" />
+ <el-input size="small" v-model='socketTimeout' maxlength="7"></el-input>
</span>
<span>{{$t('ms')}}</span>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
index a53501d..ffeba7c 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/mr.vue
@@ -19,26 +19,26 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
- <x-select v-model="programType" :disabled="isDetails" style="width: 110px;">
- <x-option
+ <el-select v-model="programType" :disabled="isDetails" style="width: 110px;" size="small">
+ <el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="mainClass"
- :placeholder="$t('Please enter main class')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter main class')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -52,27 +52,27 @@
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:autosize="{minRows:2}"
:disabled="isDetails"
type="textarea"
+ size="small"
v-model="mainArgs"
- :placeholder="$t('Please enter Command-line parameters')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter Command-line parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
:autosize="{minRows:2}"
type="textarea"
+ size="small"
v-model="others"
- :placeholder="$t('Please enter other parameters')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter other parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
index adf889e..cb3aedc 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/pre_tasks.vue
@@ -22,21 +22,22 @@
</div>
<div class="cont-box">
<div class="label-box">
- <x-select
+ <el-select
ref="preTasksSelector"
style="width: 100%;"
filterable
multiple
+ size="small"
v-model="preTasks"
:disabled="isDetails"
:id="preTasksSelectorId">
- <x-option
+ <el-option
v-for="task in preTaskList"
:key="task.id"
:value="task.id"
:label="task.name">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</div>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
index e84f37d..be88111 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/procedure.vue
@@ -30,13 +30,13 @@
<m-list-box>
<div slot="text">{{$t('methods')}}</div>
<div slot="content">
- <x-input
- type="input"
- :disabled="isDetails"
- v-model="method"
- :placeholder="$t('Please enter method(optional)')"
- autocomplete="off">
- </x-input>
+ <el-input
+ type="input"
+ size="small"
+ :disabled="isDetails"
+ v-model="method"
+ :placeholder="$t('Please enter method(optional)')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
index c6c2a22..d9aa4ce 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/python.vue
@@ -23,7 +23,7 @@
<textarea id="code-python-mirror" name="code-python-mirror" style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -34,12 +34,6 @@
<treeselect v-model="resourceList" :multiple="true" maxHeight="200" :options="resourceOptions" :normalizer="normalizer" :value-consists-of="valueConsistsOf" :disabled="isDetails" :placeholder="$t('Please select resources')">
<div slot="value-label" slot-scope="{ node }">{{ node.raw.fullName }}</div>
</treeselect>
- <!-- <m-resources
- ref="refResources"
- @on-resourcesData="_onResourcesData"
- @on-cache-resourcesData="_onCacheResourcesData"
- :resource-list="resourceList">
- </m-resources> -->
</div>
</m-list-box>
@@ -54,6 +48,12 @@
</m-local-params>
</div>
</m-list-box>
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -90,7 +90,9 @@
}
},
allNoResources: [],
- noRes: []
+ noRes: [],
+ item: '',
+ scriptBoxDialog: false
}
},
mixins: [disabledState],
@@ -105,32 +107,11 @@
this.localParams = a
},
setEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- editor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: editor.getValue()
- }
- })
- }
- })
+ this.item = editor.getValue()
+ this.scriptBoxDialog = true
+ },
+ getSriptBoxValue (val) {
+ editor.setValue(val)
},
/**
* return resourceList
@@ -362,7 +343,7 @@
editor.toTextArea() // Uninstall
editor.off($('.code-python-mirror'), 'keypress', this.keypress)
},
- components: { mLocalParams, mListBox, mResources,Treeselect }
+ components: { mLocalParams, mListBox, mResources,Treeselect, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss" scope>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
index da94162..3d099d4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/shell.vue
@@ -26,7 +26,7 @@
style="opacity: 0">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -39,17 +39,6 @@
</treeselect>
</div>
</m-list-box>
- <!-- <m-list-box>
- <div slot="text">{{$t('Resources')}}</div>
- <div slot="content">
- <m-resources
- ref="refResources"
- @on-resourcesData="_onResourcesData"
- @on-cache-resourcesData="_onCacheResourcesData"
- :resource-list="resourceList">
- </m-resources>
- </div>
- </m-list-box> -->
<m-list-box>
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">
@@ -61,6 +50,12 @@
</m-local-params>
</div>
</m-list-box>
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ modal-append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -98,7 +93,9 @@
}
},
allNoResources: [],
- noRes: []
+ noRes: [],
+ item: '',
+ scriptBoxDialog: false
}
},
mixins: [disabledState],
@@ -113,32 +110,15 @@
this.localParams = a
},
setEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- editor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: editor.getValue()
- }
- })
- }
- })
+ this.item = editor.getValue()
+ this.scriptBoxDialog = true
+ },
+ getSriptBoxValue (val) {
+ editor.setValue(val)
+ // this.scriptBoxDialog = false
+ },
+ closeAble () {
+ // this.scriptBoxDialog = false
},
/**
* return resourceList
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
index 0948c97..ac37727 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/spark.vue
@@ -19,45 +19,47 @@
<m-list-box>
<div slot="text">{{$t('Program Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="programType"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in programTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Spark Version')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="sparkVersion"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in sparkVersionList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box v-if="programType !== 'PYTHON'">
<div slot="text">{{$t('Main class')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="mainClass"
- :placeholder="$t('Please enter main class')"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="mainClass"
+ :placeholder="$t('Please enter main class')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -71,99 +73,100 @@
<m-list-box>
<div slot="text">{{$t('Deploy Mode')}}</div>
<div slot="content">
- <x-radio-group v-model="deployMode">
- <x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
- <x-radio :label="'client'" :disabled="isDetails"></x-radio>
- <x-radio :label="'local'" :disabled="isDetails"></x-radio>
- </x-radio-group>
+ <el-radio-group v-model="deployMode" size="small">
+ <el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
+ <el-radio :label="'client'" :disabled="isDetails"></el-radio>
+ <el-radio :label="'local'" :disabled="isDetails"></el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<div class="list-box-4p">
<div class="clearfix list">
<span class="sp1">{{$t('Driver core number')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="driverCores"
:placeholder="$t('Please enter driver core number')"
- style="width: 200px;"
- autocomplete="off">
- </x-input>
+ style="width: 200px;">
+ </el-input>
</span>
<span class="sp1 sp3">{{$t('Driver memory use')}}</span>
<span class="sp2">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="driverMemory"
:placeholder="$t('Please enter driver memory use')"
- style="width: 186px;"
- autocomplete="off">
- </x-input>
+ style="width: 186px;">
+ </el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('Number of Executors')}}</span>
<span class="sp2">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="numExecutors"
- :placeholder="$t('Please enter the number of Executor')"
- style="width: 200px;"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="numExecutors"
+ :placeholder="$t('Please enter the number of Executor')"
+ style="width: 200px;">
+ </el-input>
</span>
<span class="sp1 sp3">{{$t('Executor memory')}}</span>
<span class="sp2">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="executorMemory"
- :placeholder="$t('Please enter the Executor memory')"
- style="width: 186px;"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="executorMemory"
+ :placeholder="$t('Please enter the Executor memory')"
+ style="width: 186px;">
+ </el-input>
</span>
</div>
<div class="clearfix list">
<span class="sp1">{{$t('Executor core number')}}</span>
<span class="sp2">
- <x-input
- :disabled="isDetails"
- type="input"
- v-model="executorCores"
- :placeholder="$t('Please enter Executor core number')"
- style="width: 200px;"
- autocomplete="off">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ type="input"
+ size="small"
+ v-model="executorCores"
+ :placeholder="$t('Please enter Executor core number')"
+ style="width: 200px;">
+ </el-input>
</span>
</div>
</div>
<m-list-box>
<div slot="text">{{$t('Command-line parameters')}}</div>
<div slot="content">
- <x-input
- :autosize="{minRows:2}"
- :disabled="isDetails"
- type="textarea"
- v-model="mainArgs"
- :placeholder="$t('Please enter Command-line parameters')"
- autocomplete="off">
- </x-input>
+ <el-input
+ :autosize="{minRows:2}"
+ :disabled="isDetails"
+ type="textarea"
+ size="small"
+ v-model="mainArgs"
+ :placeholder="$t('Please enter Command-line parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Other parameters')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- :autosize="{minRows:2}"
- type="textarea"
- v-model="others"
- :placeholder="$t('Please enter other parameters')">
- </x-input>
+ <el-input
+ :disabled="isDetails"
+ :autosize="{minRows:2}"
+ type="textarea"
+ size="small"
+ v-model="others"
+ :placeholder="$t('Please enter other parameters')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -174,17 +177,6 @@
</treeselect>
</div>
</m-list-box>
- <!-- <m-list-box>
- <div slot="text">{{$t('Resources')}}</div>
- <div slot="content">
- <m-resources
- ref="refResources"
- @on-resourcesData="_onResourcesData"
- @on-cache-resourcesData="_onCacheResourcesData"
- :resource-list="resourceList">
- </m-resources>
- </div>
- </m-list-box> -->
<m-list-box>
<div slot="text">{{$t('Custom Parameters')}}</div>
<div slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
index 94ddaf8..f0542f8 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sql.vue
@@ -36,10 +36,10 @@
</m-sql-type>
</div>
<div v-if="sqlType==0" style="display: inline-block;padding-left: 10px;margin-top: 2px;">
- <x-checkbox-group v-model="showType">
- <x-checkbox :label="'TABLE'" :disabled="isDetails">{{$t('TableMode')}}</x-checkbox>
- <x-checkbox :label="'ATTACHMENT'" :disabled="isDetails">{{$t('Attachment')}}</x-checkbox>
- </x-checkbox-group>
+ <el-checkbox-group v-model="showType" size="small">
+ <el-checkbox :label="'TABLE'" :disabled="isDetails">{{$t('TableMode')}}</el-checkbox>
+ <el-checkbox :label="'ATTACHMENT'" :disabled="isDetails">{{$t('Attachment')}}</el-checkbox>
+ </el-checkbox-group>
</div>
</div>
</m-list-box>
@@ -47,12 +47,12 @@
<m-list-box>
<div slot="text"><strong class='requiredIcon'>*</strong>{{$t('Title')}}</div>
<div slot="content">
- <x-input
+ <el-input
type="input"
+ size="small"
v-model="title"
- :placeholder="$t('Please enter the title of email')"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter the title of email')">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -71,13 +71,13 @@
<m-list-box v-show="type === 'HIVE'">
<div slot="text">{{$t('SQL Parameter')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="connParams"
- :placeholder="$t('Please enter format') + ' key1=value1;key2=value2...'"
- autocomplete="off">
- </x-input>
+ :placeholder="$t('Please enter format') + ' key1=value1;key2=value2...'">
+ </el-input>
</div>
</m-list-box>
<m-list-box>
@@ -90,7 +90,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -136,6 +136,12 @@
</m-statement-list>
</div>
</m-list-box>
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -185,7 +191,9 @@
// recipients
receivers: [],
// copy to
- receiversCc: []
+ receiversCc: [],
+ item: '',
+ scriptBoxDialog: false
}
},
mixins: [disabledState],
@@ -195,32 +203,11 @@
},
methods: {
setEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- editor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: editor.getValue()
- }
- })
- }
- })
+ this.item = editor.getValue()
+ this.scriptBoxDialog = true
+ },
+ getSriptBoxValue (val) {
+ editor.setValue(val)
},
/**
* return sqlType
@@ -519,7 +506,7 @@
}
}
},
- components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail }
+ components: { mListBox, mDatasource, mLocalParams, mUdfs, mSqlType, mStatementList, mEmail, mScriptBox }
}
</script>
<style lang="scss" rel="stylesheet/scss">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
index c852f7f..0686a4e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sqoop.vue
@@ -20,23 +20,14 @@
<m-list-box>
<div slot="text">{{$t('Custom Job')}}</div>
<div slot="content">
- <x-switch
- v-model="isCustomTask"
- @on-click="_onSwitch"
- :disabled="isDetails"
- >
- </x-switch>
+ <el-switch size="small" v-model="isCustomTask" @change="_onSwitch" :disabled="isDetails"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="isCustomTask">
<div slot="text">{{$t('Custom Script')}}</div>
<div slot="content">
<div class="from-mirror">
- <textarea
- id="code-shell-mirror"
- name="code-shell-mirror"
- style="opacity: 0;">
- </textarea>
+ <textarea id="code-shell-mirror" name="code-shell-mirror" style="opacity: 0;"></textarea>
</div>
</div>
</m-list-box>
@@ -44,29 +35,25 @@
<m-list-box>
<div slot="text">{{$t('Sqoop Job Name')}}</div>
<div slot="content">
- <x-input
- :disabled="isDetails"
- type="text"
- v-model="jobName"
- :placeholder="$t('Please enter Job Name(required)')">
- </x-input>
+ <el-input :disabled="isDetails" size="small" type="text" v-model="jobName" :placeholder="$t('Please enter Job Name(required)')"></el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Direct')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="modelType"
:disabled="isDetails"
- @on-change="_handleModelTypeChange">
- <x-option
+ @change="_handleModelTypeChange">
+ <el-option
v-for="city in modelTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<m-list-box>
@@ -100,18 +87,19 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="sourceType"
:disabled="isDetails"
- @on-change="_handleSourceTypeChange">
- <x-option
+ @change="_handleSourceTypeChange">
+ <el-option
v-for="city in sourceTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
@@ -134,10 +122,10 @@
<m-list-box>
<div slot="text">{{$t('ModelType')}}</div>
<div slot="content">
- <x-radio-group v-model="srcQueryType" @on-change="_handleQueryType">
- <x-radio label="0">{{$t('Form')}}</x-radio>
- <x-radio label="1">SQL</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="srcQueryType" size="small" @change="_handleQueryType" style="vertical-align: sub;">
+ <el-radio label="0">{{$t('Form')}}</el-radio>
+ <el-radio label="1">SQL</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
@@ -146,34 +134,36 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceMysqlParams.srcTable"
:placeholder="$t('Please enter Mysql Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ColumnType')}}</div>
<div slot="content">
- <x-radio-group v-model="sourceMysqlParams.srcColumnType">
- <x-radio label="0">{{$t('All Columns')}}</x-radio>
- <x-radio label="1">{{$t('Some Columns')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="sourceMysqlParams.srcColumnType" size="small" style="vertical-align: sub;">
+ <el-radio label="0">{{$t('All Columns')}}</el-radio>
+ <el-radio label="1">{{$t('Some Columns')}}</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box v-if="sourceMysqlParams.srcColumnType=='1'">
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceMysqlParams.srcColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -184,45 +174,49 @@
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -231,12 +225,13 @@
<m-list-box>
<div slot="text">{{$t('Export Dir')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="sourceHdfsParams.exportDir"
:placeholder="$t('Please enter Export Dir(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -251,7 +246,7 @@
style="opacity: 0;">
</textarea>
<a class="ans-modal-box-max">
- <em class="ans-icon-max" @click="setEditorVal"></em>
+ <em class="el-icon-rank" @click="setEditorVal"></em>
</a>
</div>
</div>
@@ -290,91 +285,97 @@
<m-list-box>
<div slot="text">{{$t('Type')}}</div>
<div slot="content">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="targetType"
:disabled="isDetails">
- <x-option
+ <el-option
v-for="city in targetTypeList"
:key="city.code"
:value="city.code"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</m-list-box>
<div v-show="targetType==='HIVE'">
<m-list-box>
<div slot="text">{{$t('Database')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hiveDatabase"
:placeholder="$t('Please enter Hive Database(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hiveTable"
:placeholder="$t('Please enter Hive Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CreateHiveTable')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.createHiveTable"></x-switch>
+ <el-switch v-model="targetHiveParams.createHiveTable" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DropDelimiter')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.dropDelimiter"></x-switch>
+ <el-switch v-model="targetHiveParams.dropDelimiter" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('OverWriteSrc')}}</div>
<div slot="content">
- <x-switch v-model="targetHiveParams.hiveOverWrite"></x-switch>
+ <el-switch v-model="targetHiveParams.hiveOverWrite" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('ReplaceDelimiter')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.replaceDelimiter"
:placeholder="$t('Please enter Replace Delimiter')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Keys')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hivePartitionKey"
:placeholder="$t('Please enter Hive Partition Keys')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Hive partition Values')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHiveParams.hivePartitionValue"
:placeholder="$t('Please enter Hive Partition Values')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</div>
@@ -382,62 +383,65 @@
<m-list-box>
<div slot="text">{{$t('Target Dir')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.targetPath"
:placeholder="$t('Please enter Target Dir(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('DeleteTargetDir')}}</div>
<div slot="content">
- <x-switch v-model="targetHdfsParams.deleteTargetDir"></x-switch>
+ <el-switch v-model="targetHdfsParams.deleteTargetDir" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('CompressionCodec')}}</div>
<div slot="content">
- <x-radio-group v-model="targetHdfsParams.compressionCodec">
- <x-radio label="snappy">snappy</x-radio>
- <x-radio label="lzo">lzo</x-radio>
- <x-radio label="gzip">gzip</x-radio>
- <x-radio label="">no</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetHdfsParams.compressionCodec" size="small">
+ <el-radio label="snappy">snappy</el-radio>
+ <el-radio label="lzo">lzo</el-radio>
+ <el-radio label="gzip">gzip</el-radio>
+ <el-radio label="">no</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FileType')}}</div>
<div slot="content">
- <x-radio-group v-model="targetHdfsParams.fileType">
- <x-radio label="--as-avrodatafile">avro</x-radio>
- <x-radio label="--as-sequencefile">sequence</x-radio>
- <x-radio label="--as-textfile">text</x-radio>
- <x-radio label="--as-parquetfile">parquet</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetHdfsParams.fileType" size="small">
+ <el-radio label="--as-avrodatafile">avro</el-radio>
+ <el-radio label="--as-sequencefile">sequence</el-radio>
+ <el-radio label="--as-textfile">text</el-radio>
+ <el-radio label="--as-parquetfile">parquet</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetHdfsParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
</div>
@@ -458,71 +462,76 @@
<m-list-box>
<div slot="text">{{$t('Table')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetTable"
:placeholder="$t('Please enter Mysql Table(required)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('Column')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetColumns"
:placeholder="$t('Please enter Columns (Comma separated)')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('FieldsTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.fieldsTerminated"
:placeholder="$t('Please enter Fields Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('LinesTerminated')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.linesTerminated"
:placeholder="$t('Please enter Lines Terminated')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box>
<div slot="text">{{$t('IsUpdate')}}</div>
<div slot="content">
- <x-switch v-model="targetMysqlParams.isUpdate"></x-switch>
+ <el-switch v-model="targetMysqlParams.isUpdate" size="small"></el-switch>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateKey')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="targetMysqlParams.targetUpdateKey"
:placeholder="$t('Please enter Update Key')">
- </x-input>
+ </el-input>
</div>
</m-list-box>
<m-list-box v-show="targetMysqlParams.isUpdate">
<div slot="text">{{$t('UpdateMode')}}</div>
<div slot="content">
- <x-radio-group v-model="targetMysqlParams.targetUpdateMode">
- <x-radio label="updateonly">{{$t('OnlyUpdate')}}</x-radio>
- <x-radio label="allowinsert">{{$t('AllowInsert')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="targetMysqlParams.targetUpdateMode" size="small">
+ <el-radio label="updateonly">{{$t('OnlyUpdate')}}</el-radio>
+ <el-radio label="allowinsert">{{$t('AllowInsert')}}</el-radio>
+ </el-radio-group>
</div>
</m-list-box>
@@ -530,13 +539,13 @@
<m-list-box>
<div slot="text">{{$t('Concurrency')}}</div>
<div slot="content">
- <x-input
+ <el-input
:disabled="isDetails"
type="text"
+ size="small"
v-model="concurrency"
:placeholder="$t('Please enter Concurrency')">
-
- </x-input>
+ </el-input>
</div>
</m-list-box>
</template>
@@ -551,6 +560,12 @@
</m-local-params>
</div>
</m-list-box>
+ <el-dialog
+ :visible.sync="scriptBoxDialog"
+ append-to-body="true"
+ width="80%">
+ <m-script-box :item="item" @getSriptBoxValue="getSriptBoxValue" @closeAble="closeAble"></m-script-box>
+ </el-dialog>
</div>
</template>
<script>
@@ -696,8 +711,9 @@
replaceDelimiter:"",
hivePartitionKey:"",
hivePartitionValue:""
-
- }
+ },
+ item: '',
+ scriptBoxDialog: false
}
},
mixins: [disabledState],
@@ -706,32 +722,11 @@
},
methods: {
setEditorVal() {
- let self = this
- let modal = self.$modal.dialog({
- className: 'scriptModal',
- closable: false,
- showMask: true,
- maskClosable: true,
- onClose: function() {
-
- },
- render (h) {
- return h(mScriptBox, {
- on: {
- getSriptBoxValue (val) {
- editor.setValue(val)
- },
- closeAble () {
- // this.$modal.destroy()
- modal.remove()
- }
- },
- props: {
- item: editor.getValue()
- }
- })
- }
- })
+ this.item = editor.getValue()
+ this.scriptBoxDialog = true
+ },
+ getSriptBoxValue (val) {
+ editor.setValue(val)
},
_handleQueryType(o){
this.sourceMysqlParams.srcQueryType = this.srcQueryType
@@ -740,7 +735,7 @@
},
_handleModelTypeChange(a){
- this._getSourceTypeList(a.label)
+ this._getSourceTypeList(a)
this.sourceType = this.sourceTypeList[0].code
this._handleSourceTypeChange({label: this.sourceType, value: this.sourceType})
},
@@ -1267,7 +1262,7 @@
}
}
},
- components: { mListBox, mDatasource, mLocalParams}
+ components: { mListBox, mDatasource, mLocalParams, mScriptBox}
}
</script>
<style lang="scss" rel="stylesheet/scss">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
index e96d409..1f59bfc 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/sub_process.vue
@@ -22,19 +22,20 @@
</div>
<div class="cont-box">
<div class="label-box">
- <x-select
+ <el-select
style="width: 100%;"
+ size="small"
filterable
v-model="wdiCurr"
:disabled="isDetails"
- @on-change="_handleWdiChanged">
- <x-option
- v-for="city in processDefinitionList"
- :key="city.code"
- :value="city.id"
- :label="city.code">
- </x-option>
- </x-select>
+ @change="_handleWdiChanged">
+ <el-option
+ v-for="city in processDefinitionList"
+ :key="city.code"
+ :value="city.id"
+ :label="city.code">
+ </el-option>
+ </el-select>
</div>
</div>
</div>
@@ -77,7 +78,7 @@
* The selected process defines the upper component name padding
*/
_handleWdiChanged (o) {
- this.$emit('on-set-process-name', this._handleName(o.value))
+ this.$emit('on-set-process-name', this._handleName(o))
},
/**
* Return the name according to the process definition id
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
index f67ec6d..9d2feb4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/tasks/waterdrop.vue
@@ -21,22 +21,22 @@
<div class="clearfix list">
<span class="sp1">{{$t('Deploy Mode')}}</span>
<span class="sp2">
- <x-radio-group v-model="deployMode">
- <x-radio :label="'client'" :disabled="isDetails"></x-radio>
- <x-radio :label="'cluster'" :disabled="isDetails"></x-radio>
- <x-radio :label="'local'" :disabled="isDetails"></x-radio>
- </x-radio-group>
+ <el-radio-group size="small" v-model="deployMode">
+ <el-radio :label="'client'" :disabled="isDetails"></el-radio>
+ <el-radio :label="'cluster'" :disabled="isDetails"></el-radio>
+ <el-radio :label="'local'" :disabled="isDetails"></el-radio>
+ </el-radio-group>
</span>
<span class="sp1 sp3">{{$t('Queue')}}</span>
<span class="sp4">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="queue"
:placeholder="$t('Please enter queue value')"
- style="width: 60%;"
- autocomplete="off">
- </x-input>
+ style="width: 60%;">
+ </el-input>
</span>
</div>
</div>
@@ -45,27 +45,28 @@
<div class="clearfix list">
<span class="sp1">{{$t('Master')}}</span>
<span class="sp4">
- <x-select
+ <el-select
style="width: 130px;"
+ size="small"
v-model="master"
:disabled="isDetails">
- <x-option
- v-for="city in masterType"
- :key="city.code"
- :value="city.code"
- :label="city.code">
- </x-option>
- </x-select>
+ <el-option
+ v-for="city in masterType"
+ :key="city.code"
+ :value="city.code"
+ :label="city.code">
+ </el-option>
+ </el-select>
</span>
<span v-if="masterUrlState">
- <x-input
+ <el-input
:disabled="isDetails"
type="input"
+ size="small"
v-model="masterUrl"
:placeholder="$t('Please Enter Url')"
- style="width: 60%;"
- autocomplete="off">
- </x-input>
+ style="width: 60%;">
+ </el-input>
</span>
</div>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
index c1f77f6..9f55265 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/jumpAffirm/index.js
@@ -14,10 +14,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import Vue from 'vue'
-import mAffirm from './jumpAffirm'
import store from '@/conf/home/store'
+import i18n from '@/module/i18n'
import router from '@/conf/home/router'
import { uuid, findComponentDownward } from '@/module/util/'
@@ -81,34 +80,18 @@ Affirm.paramVerification = (name) => {
* Pop-up judgment
*/
Affirm.isPop = (fn) => {
- Vue.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mAffirm, {
- on: {
- ok () {
- // save
- findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
- fn()
- Vue.$modal.destroy()
- }).catch(() => {
- fn()
- Vue.$modal.destroy()
- })
- },
- close () {
- fn()
- Vue.$modal.destroy()
- }
- },
- props: {
- }
- })
- }
+ Vue.prototype.$confirm(`${i18n.$t('Whether to save the DAG graph')}`, '', {
+ confirmButtonText: `${i18n.$t('Save')}`,
+ cancelButtonText: `${i18n.$t('Cancel')}`,
+ type: 'warning'
+ }).then(() => {
+ findComponentDownward($root, 'dag-chart')._save('affirm').then(() => {
+ fn()
+ }).catch(() => {
+ fn()
+ })
+ }).catch(() => {
+ fn()
})
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 03c3d2d..21f0293 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -17,7 +17,6 @@
import 'jquery-ui/ui/widgets/draggable'
import 'jquery-ui/ui/widgets/droppable'
import 'jquery-ui/ui/widgets/resizable'
-import Vue from 'vue'
import _ from 'lodash'
import i18n from '@/module/i18n'
import { jsPlumb } from 'jsplumb'
@@ -34,7 +33,6 @@ import {
rtTargetarrArr,
computeScale
} from './util'
-import mStart from '@/conf/home/pages/projects/pages/definition/pages/list/_source/start'
import multiDrag from './multiDrag'
const JSP = function () {
@@ -88,7 +86,7 @@ JSP.prototype.init = function ({ dag, instance, options }) {
if (this.config.isClick) {
this.connectClick(e)
} else {
- findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId})
+ findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({ id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId })
}
})
@@ -208,8 +206,8 @@ JSP.prototype.jsonHandle = function ({ largeJson, locations }) {
taskType: v.type,
runFlag: v.runFlag,
nodenumber: locations[v.id].nodenumber,
- successNode: v.conditionResult === undefined? '' : v.conditionResult.successNode[0],
- failedNode: v.conditionResult === undefined? '' : v.conditionResult.failedNode[0]
+ successNode: v.conditionResult === undefined ? '' : v.conditionResult.successNode[0],
+ failedNode: v.conditionResult === undefined ? '' : v.conditionResult.failedNode[0]
}))
// contextmenu event
@@ -280,10 +278,10 @@ JSP.prototype.tasksContextmenu = function (event) {
const isTwo = store.state.dag.isDetails
const html = [
- `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="ans-icon-play"></em><span>${i18n.$t('Start')}</span></a>`,
- `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-edit"></em><span>${i18n.$t('Edit')}</span></a>`,
- `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-copy"></em><span>${i18n.$t('Copy')}</span></a>`,
- `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="ans-icon-trash"></em><span>${i18n.$t('Delete')}</span></a>`
+ `<a href="javascript:" id="startRunning" class="${isOne ? '' : 'disbled'}"><em class="el-icon-video-play"></em><span>${i18n.$t('Start')}</span></a>`,
+ `<a href="javascript:" id="editNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-edit-outline"></em><span>${i18n.$t('Edit')}</span></a>`,
+ `<a href="javascript:" id="copyNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-copy-document"></em><span>${i18n.$t('Copy')}</span></a>`,
+ `<a href="javascript:" id="removeNodes" class="${isTwo ? 'disbled' : ''}"><em class="el-icon-delete"></em><span>${i18n.$t('Delete')}</span></a>`
]
const operationHtml = () => {
@@ -310,35 +308,7 @@ JSP.prototype.tasksContextmenu = function (event) {
const name = store.state.dag.name
const id = router.history.current.params.id
store.dispatch('dag/getStartCheck', { processDefinitionId: id }).then(res => {
- const modal = Vue.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mStart, {
- on: {
- onUpdate () {
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- item: {
- id: id,
- name: name
- },
- startNodeList: $name,
- sourceType: 'contextmenu'
- }
- })
- }
- })
- }).catch(e => {
- Vue.$message.error(e.msg || '')
+ this.dag.startRunning({ id: id, name: name }, $name, 'contextmenu')
})
})
}
@@ -370,7 +340,6 @@ JSP.prototype.tasksDblclick = function (e) {
// Untie event
if (this.config.isDblclick) {
const id = $(e.currentTarget.offsetParent).attr('id')
-
findComponentDownward(this.dag.$root, 'dag-chart')._createNodes({
id: id,
type: $(`#${id}`).attr('data-tasks-type')
@@ -499,7 +468,7 @@ JSP.prototype.removeNodes = function ($id) {
// callback onRemoveNodes event
this.options && this.options.onRemoveNodes && this.options.onRemoveNodes($id)
- let connects = []
+ const connects = []
_.map(this.JspInstance.getConnections(), v => {
connects.push({
endPointSourceId: v.sourceId,
@@ -604,10 +573,10 @@ JSP.prototype.copyNodes = function ($id) {
JSP.prototype.handleEventScreen = function ({ item, is }) {
let screenOpen = true
if (is) {
- item.icon = 'ans-icon-min'
+ item.icon = 'el-icon-full-screen'
screenOpen = true
} else {
- item.icon = 'ans-icon-max'
+ item.icon = 'el-icon-rank'
screenOpen = false
}
const $mainLayoutModel = $('.main-layout-model')
@@ -658,7 +627,7 @@ JSP.prototype.saveStore = function () {
tasks.push(tasksParam)
}
})
- if(store.state.dag.connects.length ===this.JspInstance.getConnections().length) {
+ if (store.state.dag.connects.length === this.JspInstance.getConnections().length) {
_.map(store.state.dag.connects, u => {
connects.push({
endPointSourceId: u.endPointSourceId,
@@ -666,7 +635,7 @@ JSP.prototype.saveStore = function () {
label: u.label
})
})
- } else if(store.state.dag.connects.length>0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) {
+ } else if (store.state.dag.connects.length > 0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) {
_.map(this.JspInstance.getConnections(), v => {
connects.push({
endPointSourceId: v.sourceId,
@@ -676,12 +645,12 @@ JSP.prototype.saveStore = function () {
})
_.map(store.state.dag.connects, u => {
_.map(connects, v => {
- if(u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId===v.endPointTargetId) {
+ if (u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId === v.endPointTargetId) {
v.label = u.label
}
})
})
- } else if(store.state.dag.connects.length===0) {
+ } else if (store.state.dag.connects.length === 0) {
_.map(this.JspInstance.getConnections(), v => {
connects.push({
endPointSourceId: v.sourceId,
@@ -690,7 +659,7 @@ JSP.prototype.saveStore = function () {
})
})
}
-
+
_.map(tasksAll(), v => {
locations[v.id] = {
name: v.name,
@@ -783,7 +752,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
_.map(connects, v => {
let sourceId = v.endPointSourceId.split('-')
let targetId = v.endPointTargetId.split('-')
- let labels = v.label
+ const labels = v.label
if (sourceId.length === 4 && targetId.length === 4) {
sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
@@ -791,24 +760,24 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
sourceId = v.endPointSourceId
targetId = v.endPointTargetId
}
-
- if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) {
+
+ if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-successnode') === $(`#${targetId}`).find('.name-p').text()) {
this.JspInstance.connect({
source: sourceId,
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#4caf50' },
- HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
- overlays:[["Label", { label: labels} ]]
+ HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
+ overlays: [['Label', { label: labels }]]
})
- } else if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
+ } else if ($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
this.JspInstance.connect({
source: sourceId,
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#252d39' },
- HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
- overlays:[["Label", { label: labels} ]]
+ HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
+ overlays: [['Label', { label: labels }]]
})
} else {
this.JspInstance.connect({
@@ -816,8 +785,8 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
target: targetId,
type: 'basic',
paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
- HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
- overlays:[["Label", { label: labels} ]]
+ HoverPaintStyle: { stroke: '#ccc', strokeWidth: 3 },
+ overlays: [['Label', { label: labels }]]
})
}
})
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
index f5aacf2..176f852 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/util.js
@@ -37,7 +37,7 @@ const saveTargetarr = (valId, domId) => {
}
const rtBantpl = () => {
- return `<em class="ans-icon-forbidden" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
+ return `<em class="fa fa-ban" data-toggle="tooltip" data-html="true" data-container="body" data-placement="left" title="${i18n.$t('Prohibition execution')}"></em>`
}
/**
@@ -100,13 +100,13 @@ const setSvgColor = (e, color) => {
// Traverse clear all colors
$('.jtk-connector').each((i, o) => {
_.map($(o)[0].childNodes, v => {
- if($(v).attr('fill') ==='#ccc') {
+ if ($(v).attr('fill') === '#ccc') {
$(v).attr('fill', '#2d8cf0')
}
- if($(v).attr('fill') ==='#4caf50') {
- $(v).attr('fill','#4caf50').attr('stroke', '#4caf50').attr('stroke-width', 2)
+ if ($(v).attr('fill') === '#4caf50') {
+ $(v).attr('fill', '#4caf50').attr('stroke', '#4caf50').attr('stroke-width', 2)
$(v).prev().attr('stroke', '#4caf50').attr('stroke-width', 2)
- } else if($(v).attr('fill') ==='#252d39') {
+ } else if ($(v).attr('fill') === '#252d39') {
$(v).attr('stroke', '#252d39').attr('stroke-width', 2)
$(v).prev().attr('stroke', '#252d39').attr('stroke-width', 2)
} else {
@@ -117,7 +117,7 @@ const setSvgColor = (e, color) => {
// Add color to the selection
_.map($(e.canvas)[0].childNodes, (v, i) => {
- if($(v).attr('fill') ==='#2d8cf0') {
+ if ($(v).attr('fill') === '#2d8cf0') {
$(v).attr('fill', '#ccc')
}
$(v).attr('stroke', '#ccc')
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
index 516f03b..07b2774 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/startingParam/index.vue
@@ -18,7 +18,7 @@
<div class="starting-params-dag-index">
<template v-if="isView && isActive">
<div class="box">
- <p class="box-hd"><em class="fa ans-icon-arrow-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
+ <p class="box-hd"><em class="fa fa-chevron-circle-right"></em><strong>{{$t('Startup parameter')}}</strong></p>
<ul class="box-bd">
<li><span class="tab">{{$t('Startup type')}}：</span><span class="content">{{_rtRunningType(startupParam.commandType)}}</span></li>
<li><span class="tab">{{$t('Complement range')}}：</span><span class="content" v-if="startupParam.commandParam && startupParam.commandParam.complementStartDate">{{startupParam.commandParam.complementStartDate}}-{{startupParam.commandParam.complementEndDate}}</span><span class="content" v-else>-</span></li>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
index 33635e8..bb98bec 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/_source/selectTenant.vue
@@ -15,18 +15,19 @@
* limitations under the License.
*/
<template>
- <x-select
+ <el-select
:disabled="isDetails"
- @on-change="_onChange"
+ @change="_onChange"
v-model="value"
+ size="small"
style="width: 180px">
- <x-option
+ <el-option
v-for="item in itemList"
:key="item.id"
:value="item.id"
:label="item.tenantCode">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
<script>
import disabledState from '@/module/mixin/disabledState'
@@ -60,8 +61,8 @@
},
methods: {
_onChange (o) {
- this.value = o.value
- this.$emit('tenantSelectEvent', o.value)
+ this.value = o
+ this.$emit('tenantSelectEvent', o)
}
},
watch: {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
index 18cf86a..b4ce039 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/udp/udp.vue
@@ -17,28 +17,26 @@
<template>
<div class="udp-model">
<div class="scrollbar contpi-boxt">
- <div class="title">
- <span>{{$t('Set the DAG diagram name')}}</span>
- </div>
-
<div>
- <x-input
+ <el-input
type="text"
+ size="small"
v-model="name"
:disabled="router.history.current.name === 'projects-instance-details'"
:placeholder="$t('Please enter name (required)')">
- </x-input>
+ </el-input>
</div>
<template v-if="router.history.current.name !== 'projects-instance-details'">
<div style="padding-top: 12px;">
- <x-input
+ <el-input
type="textarea"
+ size="small"
v-model="description"
:autosize="{minRows:2}"
:placeholder="$t('Please enter description(optional)')"
autocomplete="off">
- </x-input>
+ </el-input>
</div>
</template>
@@ -49,14 +47,14 @@
<div class="title" style="padding-top: 6px;">
<span class="text-b">{{$t('warning of timeout')}}</span>
<span style="padding-left: 6px;">
- <x-switch v-model="checkedTimeout"></x-switch>
+ <el-switch v-model="checkedTimeout" size="small"></el-switch>
</span>
</div>
<div class="content" style="padding-bottom: 10px;" v-if="checkedTimeout">
<span>
- <x-input v-model="timeout" style="width: 160px;" maxlength="9">
+ <el-input v-model="timeout" style="width: 160px;" maxlength="9" size="small">
<span slot="append">{{$t('Minute')}}</span>
- </x-input>
+ </el-input>
</span>
</div>
@@ -78,11 +76,11 @@
<div class="submit">
<template v-if="router.history.current.name === 'projects-instance-details'">
<div class="lint-pt">
- <x-checkbox v-model="syncDefine">{{$t('Whether to update the process definition')}}</x-checkbox>
+ <el-checkbox v-model="syncDefine" size="small">{{$t('Whether to update the process definition')}}</el-checkbox>
</div>
</template>
- <x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
- <x-button type="primary" shape="circle" :disabled="isDetails" @click="ok()">{{$t('Add')}}</x-button>
+ <el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
+ <el-button type="primary" size="small" round :disabled="isDetails" @click="ok()">{{$t('Add')}}</el-button>
</div>
</div>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
index 7209c4d..23e4bdc 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/variable/variablesView.vue
@@ -18,23 +18,23 @@
<div class="variable-model">
<template v-if="list">
<div class="list">
- <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
+ <div class="name"><em class="fa fa-tasks"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Global parameters')}}</strong></div>
<div class="var-cont">
<template v-for="(item,$index) in list.globalParams">
- <x-button
- size="xsmall"
- type="ghost"
+ <el-button
+ size="mini"
+ type="primary"
@click="_copy('gbudp-' + $index)"
:key="$index"
:data-clipboard-text="item.prop + ' = ' +item.value"
:class="'gbudp-' + $index">
<strong style="color: #2A455B;">{{item.prop}}</strong> = {{item.value}}
- </x-button>
+ </el-button>
</template>
</div>
</div>
<div class="list" style="height: 30px;">
- <div class="name"><em class="fa ans-icon-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
+ <div class="name"><em class="fa fa-code"></em><strong style="padding-top: 3px;display: inline-block">{{$t('Local parameters')}}</strong></div>
<div class="var-cont">
</div>
@@ -43,7 +43,7 @@
<div class="task-name">Task({{$index}})：{{key}}</div>
<div class="var-cont" v-if="item.localParamsList.length">
<template v-for="(el,index) in item.localParamsList">
- <x-button size="xsmall" type="ghost" :key="index" @click="_copy('copy-part-' + index)" :data-clipboard-text="_rtClipboard(el,item.taskType)" :class="'copy-part-' + index">
+ <el-button size="mini" type="primary" :key="index" @click="_copy('copy-part-' + index)" :data-clipboard-text="_rtClipboard(el,item.taskType)" :class="'copy-part-' + index">
<span v-for="(e,k,i) in el" :key="i">
<template v-if="item.taskType === 'SQL' || item.taskType === 'PROCEDURE'">
<template v-if="(k !== 'direct' && k !== 'type')">
@@ -54,7 +54,7 @@
<strong style="color: #2A455B;">{{k}}</strong> = {{e}}
</template>
</span>
- </x-button>
+ </el-button>
</template>
</div>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
index adf4753..f578f02 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/createDataSource.vue
@@ -16,139 +16,136 @@
*/
<template>
<div class="datasource-popup-model">
- <div class="top-p">
- <span>{{item ? `${$t('Edit')}` : `${$t('Create')}`}}{{`${$t('Datasource')}`}}</span>
- </div>
<div class="content-p">
<div class="create-datasource-model">
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Datasource')}}</template>
- <template slot="content">
- <x-select style="width: 100%;" v-model="type">
- <x-option v-for="item in datasourceTypeList" :key="item.value" :value="item.value" :label="item.label">
- </x-option>
- </x-select>
+ <template slot="content" size="small">
+ <el-select style="width: 100%;" v-model="type">
+ <el-option v-for="item in datasourceTypeList" :key="item.value" :value="item.value" :label="item.label">
+ </el-option>
+ </el-select>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Datasource Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="name"
maxlength="60"
- :placeholder="$t('Please enter datasource name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter datasource name')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="textarea"
v-model="note"
- :placeholder="$t('Please enter description')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter description')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('IP')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="host"
maxlength="60"
- :placeholder="$t('Please enter IP')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter IP')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Port')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="port"
- :placeholder="$t('Please enter port')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter port')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f :class="{hidden:showPrincipal}">
<template slot="name"><strong>*</strong>Principal</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="principal"
- :placeholder="$t('Please enter Principal')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter Principal')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('User Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="userName"
maxlength="60"
- :placeholder="$t('Please enter user name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter user name')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Password')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="password"
v-model="password"
- :placeholder="$t('Please enter your password')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter your password')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong :class="{hidden:showdDatabase}">*</strong>{{$t('Database Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="database"
maxlength="60"
- :placeholder="$t('Please enter database name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter database name')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f v-if="showConnectType">
<template slot="name"><strong>*</strong>{{$t('Oracle Connect Type')}}</template>
<template slot="content">
- <x-radio-group v-model="connectType" size="small">
- <x-radio :label="'ORACLE_SERVICE_NAME'">{{$t('Oracle Service Name')}}</x-radio>
- <x-radio :label="'ORACLE_SID'">{{$t('Oracle SID')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="connectType" size="small" style="vertical-align: sub;">
+ <el-radio :label="'ORACLE_SERVICE_NAME'">{{$t('Oracle Service Name')}}</el-radio>
+ <el-radio :label="'ORACLE_SID'">{{$t('Oracle SID')}}</el-radio>
+ </el-radio-group>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('jdbc connect parameters')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="textarea"
v-model="other"
:autosize="{minRows:2}"
- :placeholder="_rtOtherPlaceholder()"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="_rtOtherPlaceholder()">
+ </el-input>
</template>
</m-list-box-f>
</div>
</div>
<div class="bottom-p">
- <x-button type="text" @click="_close()"> {{$t('Cancel')}} </x-button>
- <x-button type="success" shape="circle" @click="_testConnect()" :loading="testLoading">{{testLoading ? 'Loading...' : $t('Test Connect')}}</x-button>
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="_ok()">{{spinnerLoading ? 'Loading...' :item ? `${$t('Edit')}` : `${$t('Submit')}`}} </x-button>
+ <el-button type="text" ize="mini" @click="_close()"> {{$t('Cancel')}} </el-button>
+ <el-button type="success" size="mini" round @click="_testConnect()" :loading="testLoading">{{testLoading ? 'Loading...' : $t('Test Connect')}}</el-button>
+ <el-button type="primary" size="mini" round :loading="spinnerLoading" @click="_ok()">{{spinnerLoading ? 'Loading...' :item ? `${$t('Edit')}` : `${$t('Submit')}`}} </el-button>
</div>
</div>
</template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
index a496fe8..eaed955 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/_source/list.vue
@@ -17,97 +17,52 @@
<template>
<div class="list-model">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th scope="col">
- <span>{{$t('#')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Datasource Name')}}</span>
- </th>
- <th scope="col" width="120">
- <span>{{$t('Datasource Type')}}</span>
- </th>
- <th scope="col" width="100">
- <span>{{$t('Datasource Parameter')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Description')}}</span>
- </th>
- <th scope="col" width="150">
- <span>{{$t('Create Time')}}</span>
- </th>
- <th scope="col" width="150">
- <span>{{$t('Update Time')}}</span>
- </th>
- <th scope="col" width="80">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="$index">
- <td>
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td>
- <span class="ellipsis">
- {{item.name}}
- </span>
- </td>
- <td>
- <span>{{item.type}}</span>
- </td>
- <td>
- <m-tooltips-JSON :JSON="JSON.parse(item.connectionParams)" :id="item.id">
- <span slot="reference">
- <a href="javascript:" class="links" style="font-size: 12px;">{{$t('Click to view')}}</a>
- </span>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="name" :label="$t('Datasource Name')"></el-table-column>
+ <el-table-column prop="type" :label="$t('Datasource Type')"></el-table-column>
+ <el-table-column :label="$t('Datasource Parameter')">
+ <template slot-scope="scope">
+ <div>
+ <m-tooltips-JSON :JSON="JSON.parse(scope.row.connectionParams)" :id="scope.row.id">
+ <span slot="reference">
+ <el-button size="small" type="text">{{$t('Click to view')}}</el-button>
+ </span>
</m-tooltips-JSON>
- </td>
- <td>
- <span v-if="item.note" class="ellipsis" v-tooltip.large.top.start.light="{text: item.note, maxWidth: '500px'}">{{item.note}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.createTime">{{item.createTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <x-button
- type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Edit')"
- icon="ans-icon-edit"
- @click="_edit(item)">
- </x-button>
- <x-poptip
- :ref="'poptip-delete-' + $index"
- placement="bottom-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
- </div>
- <template slot="reference">
- <x-button
- type="error"
- shape="circle"
- size="xsmall"
- icon="ans-icon-trash"
- data-toggle="tooltip"
- :title="$t('delete')">
- </x-button>
- </template>
- </x-poptip>
- </td>
- </tr>
- </table>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+ <el-table-column :label="$t('Create Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.createTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Update Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.updateTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Operation')" width="150">
+ <template slot-scope="scope">
+ <el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_delete(scope.row,scope.row.id)"
+ >
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
</div>
</template>
@@ -135,16 +90,9 @@
methods: {
...mapActions('datasource', ['deleteDatasource']),
/**
- * Close delete popup layer
- */
- _closeDelete (i) {
- this.$refs[`poptip-delete-${i}`][0].doClose()
- },
- /**
* Delete current line
*/
_delete (item, i) {
- this.$refs[`poptip-delete-${i}`][0].doClose()
this.deleteDatasource({
id: item.id
}).then(res => {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
index e843558..1c5e41e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/datasource/pages/list/index.vue
@@ -19,7 +19,14 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
- <x-button type="ghost" size="small" @click="_create('')">{{$t('Create Datasource')}}</x-button>
+ <el-button size="mini" @click="_create('')">{{$t('Create Datasource')}}</el-button>
+ <el-dialog
+ :title="item ?($t('Edit')+$t('Datasource')) : ($t('Create')+$t('Datasource'))"
+ :visible.sync="dialogVisible"
+ width="65%"
+ :append-to-body="true">
+ <m-create-data-source :item="item" @onUpdate="onUpdate" @close="close"></m-create-data-source>
+ </el-dialog>
</template>
</m-conditions>
</template>
@@ -27,7 +34,16 @@
<template v-if="datasourcesList.length || total>0">
<m-list @on-update="_onUpdate" :datasources-list="datasourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!datasourcesList.length && total<=0">
@@ -65,8 +81,11 @@
// Number of pages
pageNo: 1,
// Search value
- searchVal: ''
- }
+ searchVal: '',
+
+ },
+ dialogVisible: false,
+ item: {},
}
},
mixins: [listUrlParamHandle],
@@ -77,30 +96,15 @@
* create data source
*/
_create (item) {
- let self = this
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mCreateDataSource, {
- on: {
- onUpdate () {
- self._debounceGET('false')
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- item: item
- }
- })
- }
- })
+ this.item = item
+ this.dialogVisible = true
+ },
+ onUpdate () {
+ this._debounceGET('false')
+ this.dialogVisible = false
+ },
+ close () {
+ this.dialogVisible = false
},
/**
* page
@@ -151,6 +155,6 @@
},
mounted () {
},
- components: { mList, mConditions, mSpin, mListConstruction, mNoData }
+ components: { mList, mConditions, mSpin, mListConstruction, mNoData, mCreateDataSource }
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue
index 2c8e188..6f7d5ae 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/home/index.vue
@@ -25,7 +25,7 @@ export default {
name: 'home',
components: { mProjectHome, mListConstruction },
mounted() {
- this.$modal.destroy()
+
},
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue
index 6a02b09..c1ad81f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/index.vue
@@ -26,7 +26,7 @@
export default {
name: 'monitor-index',
mounted() {
- this.$modal.destroy()
+
},
components: { mSecondaryMenu }
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue
index 1201cb5..ca4f6ad 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperDirectories.vue
@@ -21,25 +21,10 @@
</div>
<div class="table-box" v-if="zkDirectories.length > 0">
- <table class="fixed">
- <caption><!-- placeHolder --></caption>
- <tr>
- <th scope="col" style="min-width: 40px">
- <span>#</span>
- </th>
- <th scope="col" style="min-width: 40px">
- <span>{{$t('zkDirectory')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in zkDirectories" :key="item.id">
- <td>
- <span>{{$index + 1}}</span>
- </td>
- <td>
- <span>{{item.zkDirectory}}</span>
- </td>
- </tr>
- </table>
+ <el-table :data="zkDirectories" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="zkDirectory" :label="$t('zkDirectory')"></el-table-column>
+ </el-table>
</div>
<div v-if="zkDirectories.length === 0">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
index de187dd..88fcfb0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/_source/zookeeperList.vue
@@ -17,92 +17,32 @@
<template>
<div class="list-model zookeeper-list">
<div class="table-box">
- <table>
- <tr>
- <th>
- <span>{{$t('#')}}</span>
- </th>
- <th>
- <span>{{$t('host')}}</span>
- </th>
- <th>
- <span>{{$t('Number of connections')}}</span>
- </th>
- <th>
- <span>watches {{$t('Number')}}</span>
- </th>
- <th>
- <span>{{$t('Sent')}}</span>
- </th>
- <th>
- <span>{{$t('Received')}}</span>
- </th>
- <th>
- <span>leader/follower</span>
- </th>
- <th>
- <span>{{$t('Min latency')}}</span>
- </th>
- <th>
- <span>{{$t('Avg latency')}}</span>
- </th>
- <th>
- <span>{{$t('Max latency')}}</span>
- </th>
- <th>
- <span>{{$t('Node count')}}</span>
- </th>
- <th>
- <span>{{$t('Query time')}}</span>
- </th>
- <th style="text-align: center">
- <span>{{$t('Node self-test status')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="$index">
- <td>
- <span>{{$index + 1}}</span>
- </td>
- <td>
- <span>
- {{item.hostname}}
- </span>
- </td>
- <td><span>{{item.connections}}</span></td>
- <td>
- <span>{{item.watches}}</span>
- </td>
- <td>
- <span>{{item.sent}}</span>
- </td>
- <td>
- <span>{{item.received}}</span>
- </td>
- <td><span>{{item.mode}}</span></td>
- <td>
- <span>{{item.minLatency}}</span>
- </td>
- <td>
- <span>{{item.avgLatency}}</span>
- </td>
- <td>
- <span>{{item.maxLatency}}</span>
- </td>
- <td>
- <span>{{item.nodeCount}}</span>
- </td>
- <td>
- <span v-if="item.date">{{item.date | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="hostname" :label="$t('host')" min-width="130"></el-table-column>
+ <el-table-column prop="connections" :label="$t('Number of connections')"></el-table-column>
+ <el-table-column prop="watches" :label="'watches'+$t('Number')"></el-table-column>
+ <el-table-column prop="sent" :label="$t('Sent')"></el-table-column>
+ <el-table-column prop="received" :label="$t('Received')"></el-table-column>
+ <el-table-column prop="mode" label="leader/follower"></el-table-column>
+ <el-table-column prop="minLatency" :label="$t('Min latency')"></el-table-column>
+ <el-table-column prop="avgLatency" :label="$t('Avg latency')"></el-table-column>
+ <el-table-column prop="maxLatency" :label="$t('Max latency')"></el-table-column>
+ <el-table-column prop="nodeCount" :label="$t('Node count')"></el-table-column>
+ <el-table-column :label="$t('Query time')" min-width="130">
+ <template slot-scope="scope">
+ <span>{{scope.row.date | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Node self-test status')" min-width="90">
+ <template slot-scope="scope">
<span class="state">
- <em class="ans-icon-success-solid success" v-if="item.state"></em>
- <em class="ans-icon-fail-solid error" v-else></em>
+ <em class="el-icon-success success" v-if="scope.row.state"></em>
+ <em class="el-icon-error error" v-else></em>
</span>
- </td>
- </tr>
- </table>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
</div>
</template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue
index 41cd420..4241bbf 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/apiserver.vue
@@ -48,9 +48,3 @@
components: {}
}
</script>
-
-<style lang="scss" rel="stylesheet/scss">
- .apiserver-model {
-
- }
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
index 873cd4a..123d47b 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/db.vue
@@ -30,8 +30,8 @@
</div>
<div class="value-p">
<span class="state">
- <em class="ans-icon-success-solid success" v-if="item.state"></em>
- <em class="ans-icon-fail-solid error" v-else></em>
+ <em class="el-icon-success success" v-if="item.state"></em>
+ <em class="el-icon-error error" v-else></em>
</span>
</div>
<div class="text-1">{{$t('Health status')}}</div>
@@ -59,19 +59,6 @@
<div class="text-1">{{$t('Threads connections')}}</div>
</div>
</div>
- <!-- <div class="col-md-2">
- <div class="text-num-model text">
- <div class="title">
- <span>{{$t('Max used connections')}}</span>
- </div>
- <div class="value-p">
- <strong :style="{color:color[2]}">{{item.maxUsedConnections}}</strong>
- </div>
- <div class="text-1">
- {{$t('Max used connections')}}
- </div>
- </div>
- </div>-->
<div class="col-md-3">
<div class="text-num-model text">
<div class="title">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
index 609987e..c4e2abd 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/monitor/pages/servers/worker.vue
@@ -57,6 +57,11 @@
</div>
</div>
</div>
+ <el-drawer
+ :visible.sync="drawer"
+ :with-header="false">
+ <zookeeper-directories-popup :zkDirectories = zkDirectories></zookeeper-directories-popup>
+ </el-drawer>
<div v-if="!workerList.length">
<m-no-data></m-no-data>
</div>
@@ -81,29 +86,21 @@
return {
isLoading: false,
workerList: [],
- color: themeData.color
+ color: themeData.color,
+ drawer: false,
+ zkDirectories: []
}
},
props: {},
methods: {
...mapActions('monitor', ['getWorkerData']),
_showZkDirectories (item) {
- let zkDirectories = []
item.zkDirectories.forEach(zkDirectory => {
- zkDirectories.push({
+ this.zkDirectories.push({
zkDirectory: zkDirectory
})
})
- this.$drawer({
- direction: 'right',
- render (h) {
- return h(zookeeperDirectoriesPopup, {
- props: {
- zkDirectories: zkDirectories
- }
- })
- }
- })
+ this.drawer = true
}
},
watch: {},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue
index d4c05cf..9f32fcf 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/processInstance.vue
@@ -18,47 +18,39 @@
<m-conditions>
<template slot="search-group">
<div class="list">
- <x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
+ <el-button type="primary" size="small" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
- <x-datepicker
- ref="datepicker"
- @on-change="_onChangeStartStop"
- type="daterange"
- format="YYYY-MM-DD HH:mm:ss"
- placement="bottom-end"
- :value="[searchParams.startDate,searchParams.endDate]"
- :panelNum="2">
- <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
- <em slot="suffix"
- @click.stop="_dateEmpty()"
- class="ans-icon-fail-solid"
- v-show="value"
- style="font-size: 13px;cursor: pointer;margin-top: 1px;">
- </em>
- </x-input>
- </x-datepicker>
+ <el-date-picker
+ style="width: 310px"
+ v-model="dataTime"
+ size="mini"
+ @change="_onChangeStartStop"
+ type="datetimerange"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
<div class="list">
- <x-select style="width: 160px;" @on-change="_onChangeState" :value="searchParams.stateType" >
- <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 160px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
- </x-input>
- <x-option
+ <el-select style="width: 140px;" @change="_onChangeState" :value="searchParams.stateType" :placeholder="$t('State')" size="mini">
+ <el-option
v-for="city in stateTypeList"
:key="city.label"
:value="city.code"
:label="city.label">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.host" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
+ <el-input v-model="searchParams.host" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('host')"></el-input>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.executorName" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('Executor')"></x-input>
+ <el-input v-model="searchParams.executorName" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('Executor')"></el-input>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.searchVal" @on-enterkey="_ckQuery" style="width: 200px;" size="small" :placeholder="$t('name')"></x-input>
+ <el-input v-model="searchParams.searchVal" @keyup.enter.native="_ckQuery" style="width: 200px;" size="mini" :placeholder="$t('name')"></el-input>
</div>
</template>
</m-conditions>
@@ -86,7 +78,8 @@
host: '',
// executor name
executorName: ''
- }
+ },
+ dataTime: []
}
},
props: {},
@@ -100,21 +93,15 @@
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
+ this.dataTime[0] = val[0]
+ this.dataTime[1]= val[1]
},
/**
* change state
*/
_onChangeState (val) {
- this.searchParams.stateType = val.value
+ this.searchParams.stateType = val
},
- /**
- * empty date
- */
- _dateEmpty () {
- this.searchParams.startDate = ''
- this.searchParams.endDate = ''
- this.$refs.datepicker.empty()
- }
},
watch: {
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue
index 08f61a8..9e206a3 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/conditions/instance/taskInstance.vue
@@ -18,50 +18,42 @@
<m-conditions>
<template slot="search-group">
<div class="list">
- <x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
+ <el-button size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
- <x-datepicker
- ref="datepicker"
- @on-change="_onChangeStartStop"
- type="daterange"
- format="YYYY-MM-DD HH:mm:ss"
- placement="bottom-end"
- :value="[searchParams.startDate,searchParams.endDate]"
- :panelNum="2">
- <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
- <em slot="suffix"
- @click.stop="_dateEmpty()"
- class="ans-icon-fail-solid"
- v-show="value"
- style="font-size: 13px;cursor: pointer;margin-top: 1px;">
- </em>
- </x-input>
- </x-datepicker>
+ <el-date-picker
+ style="width: 310px"
+ v-model="dataTime"
+ size="mini"
+ @change="_onChangeStartStop"
+ type="datetimerange"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
<div class="list">
- <x-select style="width: 140px;" @on-change="_onChangeState" :value="searchParams.stateType" >
- <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 140px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down">
- </x-input>
- <x-option
+ <el-select style="width: 140px;" @change="_onChangeState" :value="searchParams.stateType" :placeholder="$t('State')" size="mini">
+ <el-option
v-for="city in stateTypeList"
:key="city.label"
:value="city.code"
:label="city.label">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.host" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('host')"></x-input>
+ <el-input v-model="searchParams.host" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('host')"></el-input>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.executorName" @on-enterkey="_ckQuery" style="width: 140px;" size="small" :placeholder="$t('Executor')"></x-input>
+ <el-input v-model="searchParams.executorName" @keyup.enter.native="_ckQuery" style="width: 140px;" size="mini" :placeholder="$t('Executor')"></el-input>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.processInstanceName" @on-enterkey="_ckQuery" style="width: 160px;" size="small" :placeholder="$t('Process Instance')"></x-input>
+ <el-input v-model="searchParams.processInstanceName" @keyup.enter.native="_ckQuery" style="width: 160px;" size="mini" :placeholder="$t('Process Instance')"></el-input>
</div>
<div class="list">
- <x-input v-model.trim="searchParams.searchVal" @on-enterkey="_ckQuery" style="width: 160px;" size="small" :placeholder="$t('name')"></x-input>
+ <el-input v-model="searchParams.searchVal" @keyup.enter.native="_ckQuery" style="width: 160px;" size="mini" :placeholder="$t('name')"></el-input>
</div>
</template>
</m-conditions>
@@ -90,7 +82,8 @@
// executor name
executorName: '',
processInstanceName: ''
- }
+ },
+ dataTime: [],
}
},
props: {},
@@ -104,21 +97,15 @@
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
this.searchParams.endDate = val[1]
+ this.dataTime[0] = val[0]
+ this.dataTime[1]= val[1]
},
/**
* change state
*/
_onChangeState (val) {
- this.searchParams.stateType = val.value
+ this.searchParams.stateType = val
},
- /**
- * empty date
- */
- _dateEmpty () {
- this.searchParams.startDate = ''
- this.searchParams.endDate = ''
- this.$refs.datepicker.empty()
- }
},
watch: {
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
index a82bd45..fcae664 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/conditions.vue
@@ -18,55 +18,48 @@
<m-conditions>
<template slot="search-group">
<div class="list">
- <x-button type="ghost" size="small" @click="_ckQuery" icon="ans-icon-search"></x-button>
+ <el-button type="ghost" size="mini" @click="_ckQuery" icon="el-icon-search"></el-button>
</div>
<div class="list">
- <x-datepicker
- :value="[searchParams.startDate,searchParams.endDate]"
- ref="datepicker"
- @on-change="_onChangeStartStop"
- type="daterange"
- format="YYYY-MM-DD HH:mm:ss"
- placement="bottom-end"
- :panelNum="2">
- <x-input slot="input" readonly slot-scope="{value}" :value="value" style="width: 310px;" size="small" :placeholder="$t('Select date range')">
- <em slot="suffix"
- @click.stop="_dateEmpty()"
- class="ans-icon-fail-solid"
- v-show="value"
- style="font-size: 13px;cursor: pointer;margin-top: 1px;">
- </em>
- </x-input>
- </x-datepicker>
+ <el-date-picker
+ v-model="dataTime"
+ type="datetimerange"
+ size="mini"
+ @change="_onChangeStartStop"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
<div class="list">
- <x-input v-model="searchParams.destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input>
+ <el-input v-model="searchParams.destTable" style="width: 120px;" size="mini" :placeholder="$t('Target Table')"></el-input>
</div>
<div class="list">
- <x-input v-model="searchParams.sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-input>
+ <el-input v-model="searchParams.sourceTable" style="width: 120px;" size="mini" :placeholder="$t('Source Table')"></el-input>
</div>
<div class="list">
- <x-select style="width: 90px;" @on-change="_onChangeState" :value="searchParams.state">
- <x-input slot="trigger" readonly :value="selectedModel ? selectedModel.label : ''" slot-scope="{ selectedModel }" style="width: 90px;" size="small" :placeholder="$t('State')" suffix-icon="ans-icon-arrow-down"></x-input>
- <x-option
+ <el-select style="width: 90px;" @change="_onChangeState" :value="searchParams.state" :placeholder="$t('State')" size="mini">
+ <el-option
v-for="city in stateList"
:key="city.label"
:value="city.code"
:label="city.label">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
<div class="list">
- <x-datepicker
- v-model="searchParams.taskDate"
- @on-change="_onChangeDate"
- format="YYYY-MM-DD"
- :panelNum="1">
- <x-input slot="input" readonly slot-scope="{value}" style="width: 130px;" :value="value" size="small" :placeholder="$t('Date')"></x-input>
- </x-datepicker>
+ <el-date-picker
+ v-model="searchParams.taskDate"
+ value-format="yyyy-MM-dd"
+ size="mini"
+ @change="_onChangeDate"
+ type="date"
+ :placeholder="$t('Date')">
+ </el-date-picker>
</div>
<div class="list">
- <x-input v-model="searchParams.taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input>
+ <el-input v-model="searchParams.taskName" style="width: 130px;" size="mini" :placeholder="$t('Task Name')"></el-input>
</div>
</template>
</m-conditions>
@@ -111,7 +104,8 @@
taskDate: '',
startDate: '',
endDate: ''
- }
+ },
+ dataTime: [],
}
},
props: {},
@@ -124,13 +118,13 @@
*/
_onChangeStartStop (val) {
this.searchParams.startDate = val[0]
- this.searchParams.endDate = val[1]
+ this.searchParams.endDate = val[1]
},
/**
* change state
*/
_onChangeState (val) {
- this.searchParams.state = val.value
+ this.searchParams.state = val
},
/**
* empty date
@@ -141,7 +135,7 @@
this.$refs.datepicker.empty()
},
_onChangeDate (val) {
- this.searchParams.taskDate = val.replace(/-/g, '')
+ this.searchParams.taskDate = val
}
},
created () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
index a1649a3..b3173b0 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/_source/list.vue
@@ -17,68 +17,40 @@
<template>
<div class="list-model">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th>
- <span>{{$t('#')}}</span>
- </th>
- <th>
- <span>{{$t('Task Name')}}</span>
- </th>
- <th width="66">
- <span>{{$t('Task Date')}}</span>
- </th>
- <th width="150">
- <span>{{$t('Start Time')}}</span>
- </th>
- <th width="150">
- <span>{{$t('End Time')}}</span>
- </th>
- <th width="134">
- <span>{{$t('Duration')}}(s)</span>
- </th>
- <th>
- <span>{{$t('Source Table')}}</span>
- </th>
- <th width="100">
- <span>{{$t('Record Number')}}</span>
- </th>
- <th>
- <span>{{$t('Target Table')}}</span>
- </th>
- <th width="100">
- <span>{{$t('Record Number')}}</span>
- </th>
- <th width="88">
- <span>{{$t('State')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="item.id">
- <td>
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td>
- <span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.procName)" data-html="true">{{item.procName}}</span>
- </td>
- <td><span>{{item.procDate}}</span></td>
- <td>
- <span v-if="item.startTime">{{item.startTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.endTime">{{item.endTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td><span>{{item.duration}}</span></td>
- <td><span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.sourceTab)" data-html="true">{{item.sourceTab}}</span></td>
- <td>
- <span>{{item.sourceRowCount}}</span>
- </td>
- <td><span class="ellipsis" data-toggle="tooltip" data-container="body" :title="_rtTooltip(item.targetTab)" data-html="true">{{item.targetTab}}</span></td>
- <td><span>{{item.targetRowCount}}</span></td>
- <td><span>{{item.note}}</span></td>
- </tr>
- </table>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column :label="$t('Task Name')" min-width="100">
+ <template slot-scope="scope">
+ <el-popover trigger="hover" placement="top">
+ <p>{{ scope.row.procName }}</p>
+ <div slot="reference" class="name-wrapper">
+ {{ scope.row.procName }}
+ </div>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Task Date')">
+ <template slot-scope="scope">
+ <span>{{scope.row.procDate | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Start Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.startTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('End Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.endTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="description" :label="$t('Duration')+'(s)'"></el-table-column>
+ <el-table-column prop="sourceTab" :label="$t('Source Table')"></el-table-column>
+ <el-table-column prop="sourceRowCount" :label="$t('Record Number')"></el-table-column>
+ <el-table-column prop="targetTab" :label="$t('Target Table')"></el-table-column>
+ <el-table-column prop="targetRowCount" :label="$t('Record Number')"></el-table-column>
+ <el-table-column prop="note" :label="$t('State')"></el-table-column>
+ </el-table>
</div>
</div>
</template>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
index 08a964f..59f097f 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/_source/taskRecordList/index.vue
@@ -24,7 +24,16 @@
<m-list :task-record-list="taskRecordList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!taskRecordList.length && total<=0">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
index 2585744..94fb9b4 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/email.vue
@@ -19,9 +19,9 @@
<div class="clearfix input-element" :class="disabled ? 'disabled' : ''">
<span class="tag-wrapper" v-for="(item,$index) in activeList" :key="$index" :class="activeIndex === $index ? 'active' : ''">
<span class="tag-text">{{item}}</span>
- <em class="remove-tag ans-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
+ <em class="remove-tag el-icon-close" @click.stop="_del($index)" v-if="!disabled"></em>
</span>
- <x-poptip
+ <el-popover
placement="bottom-start"
:append-to-body="true"
:visible-arrow="false"
@@ -41,23 +41,23 @@
<span class="label-wrapper" slot="reference" >
<!--@keydown.tab="_emailTab"-->
<input
- class="email-input"
- ref="emailInput"
- :style="{width:emailWidth + 'px'}"
- type="text"
- v-model="email"
- :disabled="disabled"
- :placeholder="$t('Please enter email')"
- @blur="_emailEnter"
- @keydown.tab="_emailTab"
- @keyup.delete="_emailDelete"
- @keyup.enter="_emailEnter"
- @keyup.space="_emailEnter"
- @keyup.186="_emailEnter"
- @keyup.up="_emailKeyup('up')"
- @keyup.down="_emailKeyup('down')">
+ class="email-input"
+ ref="emailInput"
+ :style="{width:emailWidth + 'px'}"
+ type="text"
+ v-model="email"
+ :disabled="disabled"
+ :placeholder="$t('Please enter email')"
+ @blur="_emailEnter"
+ @keydown.tab="_emailTab"
+ @keyup.delete="_emailDelete"
+ @keyup.enter="_emailEnter"
+ @keyup.space="_emailEnter"
+ @keyup.186="_emailEnter"
+ @keyup.up="_emailKeyup('up')"
+ @keyup.down="_emailKeyup('down')">
</span>
- </x-poptip>
+ </el-popover>
</div>
</div>
</template>
@@ -299,6 +299,8 @@
<style lang="scss" rel="stylesheet/scss">
.email-model {
width: 100%;
+ border: 1px solid #dcdfe6;
+ border-radius: 5px;
.input-element {
min-height: 32px;
padding: 1px 8px;
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
index 3caf30a..f1d5bef 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
@@ -17,129 +17,131 @@
<template>
<div class="list-model" style="position: relative;">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th scope="col" style="min-width: 50px">
- <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
- </th>
- <th scope="col" style="min-width: 40px">
- <span>{{$t('#')}}</span>
- </th>
- <th scope="col" style="min-width: 200px;max-width: 300px;">
- <span>{{$t('Process Name')}}</span>
- </th>
- <th scope="col" style="min-width: 50px">
- <span>{{$t('State')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Create Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Update Time')}}</span>
- </th>
- <th scope="col" style="min-width: 150px">
- <span>{{$t('Description')}}</span>
- </th>
- <th scope="col" style="min-width: 70px">
- <span>{{$t('Modify User')}}</span>
- </th>
- <th scope="col" style="min-width: 70px">
- <div style="width: 80px">
- <span>{{$t('Timing state')}}</span>
- </div>
- </th>
- <th scope="col" style="min-width: 300px">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="item.id">
- <td width="50"><x-checkbox v-model="item.isCheck" :disabled="item.releaseState === 'ONLINE'" @on-change="_arrDelChange"></x-checkbox></td>
- <td width="50">
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
- <span class="ellipsis">
- <router-link :to="{ path: '/projects/definition/list/' + item.id}" tag="a" class="links" :title="item.name">
- {{item.name}}
- </router-link>
- </span>
- </td>
- <td><span>{{_rtPublishStatus(item.releaseState)}}</span></td>
- <td>
- <span v-if="item.createTime">{{item.createTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.modifyBy">{{item.modifyBy}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.scheduleReleaseState === 'OFFLINE'">{{$t('offline')}}</span>
- <span v-if="item.scheduleReleaseState === 'ONLINE'">{{$t('online')}}</span>
- <span v-if="!item.scheduleReleaseState">-</span>
- </td>
- <td style="z-index: inherit;">
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Edit')" @click="_edit(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-edit"><!--{{$t('编辑')}}--></x-button>
- <x-button type="success" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Start')" @click="_start(item)" :disabled="item.releaseState !== 'ONLINE'" icon="ans-icon-play"><!--{{$t('启动')}}--></x-button>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Timing')" @click="_timing(item)" :disabled="item.releaseState !== 'ONLINE' || item.scheduleReleaseState !== null" icon="ans-icon-timer"><!--{{$t('定时')}}--></x-button>
- <x-button type="warning" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('online')" @click="_poponline(item)" v-if="item.releaseState === 'OFFLINE'" icon="ans-icon-upward"><!--{{$t('下线')}}--></x-button>
- <x-button type="error" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('offline')" @click="_downline(item)" v-if="item.releaseState === 'ONLINE'" icon="ans-icon-downward"><!--{{$t('上线')}}--></x-button>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Copy Workflow')" @click="_copyProcess(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-copy"><!--{{$t('复制')}}--></x-button>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Cron Manage')" @click="_timingManage(item)" :disabled="item.releaseState !== 'ONLINE'" icon="ans-icon-datetime"><!--{{$t('定时管理')}}--></x-button>
- <x-poptip
- :ref="'poptip-delete-' + $index"
- placement="bottom-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
+ <el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
+ <el-table-column type="selection" width="50" :selectable="selectable"></el-table-column>
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column :label="$t('Process Name')" min-width="200">
+ <template slot-scope="scope">
+ <el-popover trigger="hover" placement="top">
+ <p>{{ scope.row.name }}</p>
+ <div slot="reference" class="name-wrapper">
+ <router-link :to="{ path: '/projects/definition/list/' + scope.row.id}" tag="a" class="links" :title="scope.row.name">
+ {{scope.row.name}}
+ </router-link>
</div>
- <template slot="reference">
- <x-button
- icon="ans-icon-trash"
- type="error"
- shape="circle"
- size="xsmall"
- :disabled="item.releaseState === 'ONLINE'"
- data-toggle="tooltip"
- :title="$t('delete')">
- </x-button>
- </template>
- </x-poptip>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('TreeView')" @click="_treeView(item)" icon="ans-icon-node"><!--{{$t('树形图')}}--></x-button>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Export')" @click="_export(item)" icon="ans-icon-download"><!--{{$t('导出')}}--></x-button>
- <x-button type="info" shape="circle" size="xsmall" data-toggle="tooltip" :title="$t('Version Info')" @click="_version(item)" :disabled="item.releaseState === 'ONLINE'" icon="ans-icon-dependence"><!--{{$t('版本信息')}}--></x-button>
-
- </td>
- </tr>
- </table>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('State')">
+ <template slot-scope="scope">
+ {{_rtPublishStatus(scope.row.releaseState)}}
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Create Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.createTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Update Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.updateTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="description" :label="$t('Description')"></el-table-column>
+ <el-table-column prop="modifyBy" :label="$t('Modify User')"></el-table-column>
+ <el-table-column :label="$t('Timing state')">
+ <template slot-scope="scope">
+ <span v-if="scope.row.scheduleReleaseState === 'OFFLINE'">{{$t('offline')}}</span>
+ <span v-if="scope.row.scheduleReleaseState === 'ONLINE'">{{$t('online')}}</span>
+ <span v-if="!scope.row.scheduleReleaseState">-</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Operation')" width="335" fixed="right">
+ <template slot-scope="scope">
+ <el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
+ <el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.releaseState === 'ONLINE'" @click="_edit(scope.row)" circle></el-button>
+ </el-tooltip>
+ <el-tooltip :content="$t('Start')" placement="top" :enterable="false">
+ <span><el-button type="success" size="mini" :disabled="scope.row.releaseState !== 'ONLINE'" icon="el-icon-video-play" @click="_start(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('Timing')" placement="top" :enterable="false">
+ <el-button type="primary" size="mini" icon="el-icon-time" :disabled="scope.row.releaseState !== 'ONLINE' || scope.row.scheduleReleaseState !== null" @click="_timing(scope.row)" circle></el-button>
+ </el-tooltip>
+ <el-tooltip :content="$t('online')" placement="top" :enterable="false">
+ <span><el-button type="warning" size="mini" v-if="scope.row.releaseState === 'OFFLINE'" icon="el-icon-upload2" @click="_poponline(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('offline')" placement="top" :enterable="false">
+ <el-button type="danger" size="mini" icon="el-icon-download" v-if="scope.row.releaseState === 'ONLINE'" @click="_downline(scope.row)" circle></el-button>
+ </el-tooltip>
+ <el-tooltip :content="$t('Copy Workflow')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" :disabled="scope.row.releaseState === 'ONLINE'" icon="el-icon-document-copy" @click="_copyProcess(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('Cron Manage')" placement="top" :enterable="false">
+ <el-button type="primary" size="mini" icon="el-icon-date" :disabled="scope.row.releaseState !== 'ONLINE'" @click="_timingManage(scope.row)" circle></el-button>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_delete(scope.row,scope.row.id)"
+ >
+ <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="scope.row.releaseState === 'ONLINE'" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ <el-tooltip :content="$t('TreeView')" placement="top" :enterable="false">
+ <el-button type="primary" size="mini" icon="el-icon-s-data" @click="_treeView(scope.row)" circle></el-button>
+ </el-tooltip>
+ <el-tooltip :content="$t('Export')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" icon="el-icon-s-unfold" @click="_export(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('Version Info')" placement="top" :enterable="false">
+ <el-button type="primary" size="mini" icon="el-icon-info" :disabled="scope.row.releaseState === 'ONLINE'" @click="_version(scope.row)" circle></el-button>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
- <x-poptip
- ref="poptipDeleteAll"
- placement="bottom-start"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete(-1)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete({},-1)">{{$t('Confirm')}}</x-button>
- </div>
- <template slot="reference">
- <x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 22px;" >{{$t('Delete')}}</x-button>
- </template>
- </x-poptip>
- <x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 80px;" @click="_batchExport(item)" >{{$t('Export')}}</x-button>
- <x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 140px;" @click="_batchCopy(item)" >{{$t('Batch copy')}}</x-button>
- <x-button size="xsmall" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 225px;" @click="_batchMove(item)" >{{$t('Batch move')}}</x-button>
-
+ <el-tooltip :content="$t('delete')" placement="top">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ :title="$t('Delete?')"
+ @onConfirm="_delete({},-1)"
+ >
+ <el-button style="position: absolute; bottom: -48px; left: 19px;" type="primary" size="mini" :disabled="!strSelectIds" slot="reference">{{$t('Delete')}}</el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ <el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 80px;" @click="_batchExport(item)" >{{$t('Export')}}</el-button>
+ <span><el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 140px;" @click="_batchCopy(item)" >{{$t('Batch copy')}}</el-button></span>
+ <el-button type="primary" size="mini" :disabled="!strSelectIds" style="position: absolute; bottom: -48px; left: 225px;" @click="_batchMove(item)" >{{$t('Batch move')}}</el-button>
+ <el-drawer
+ :visible.sync="drawer"
+ size="35%"
+ :with-header="false">
+ <m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion"></m-versions>
+ </el-drawer>
+ <el-dialog
+ :title="$t('Please set the parameters before starting')"
+ :visible.sync="startDialog"
+ width="65%">
+ <m-start :startData= "startData" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
+ </el-dialog>
+ <el-dialog
+ :title="$t('Set parameters before timing')"
+ :visible.sync="timingDialog"
+ width="65%">
+ <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
+ </el-dialog>
+ <el-dialog
+ title="提示"
+ :visible.sync="relatedItemsDialog"
+ width="30%">
+ <m-related-items :tmp="tmp" @onBatchCopy="onBatchCopy" @onBatchMove="onBatchMove" @closeRelatedItems="closeRelatedItems"></m-related-items>
+ </el-dialog>
</div>
</template>
<script>
@@ -157,7 +159,26 @@
return {
list: [],
strSelectIds: '',
- checkAll: false
+ checkAll: false,
+ drawer: false,
+ versionData: {
+ processDefinition: {},
+ processDefinitionVersions: [],
+ total: null,
+ pageNo: null,
+ pageSize: null
+ },
+ startDialog: false,
+ startData: {},
+ timingDialog: false,
+ timingData: {
+ item: {},
+ receiversD: [],
+ receiversCcD: [],
+ type: ''
+ },
+ relatedItemsDialog: false,
+ tmp: false
}
},
props: {
@@ -168,6 +189,14 @@
methods: {
...mapActions('dag', ['editProcessState', 'getStartCheck', 'getReceiver', 'deleteDefinition', 'batchDeleteDefinition', 'exportDefinition', 'getProcessDefinitionVersionsPage', 'copyProcess', 'switchProcessDefinitionVersion', 'deleteProcessDefinitionVersion', 'moveProcess']),
...mapActions('security', ['getWorkerGroupsAll']),
+
+ selectable(row,index) {
+ if(row.releaseState === 'ONLINE') {
+ return false
+ } else {
+ return true
+ }
+ },
_rtPublishStatus (code) {
return _.filter(publishStatus, v => v.code === code)[0].desc
},
@@ -180,34 +209,19 @@
_start (item) {
this.getWorkerGroupsAll()
this.getStartCheck({ processDefinitionId: item.id }).then(res => {
- let self = this
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mStart, {
- on: {
- onUpdate () {
- self._onUpdate()
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- item: item
- }
- })
- }
- })
+ this.startData = item
+ this.startDialog = true
}).catch(e => {
this.$message.error(e.msg || '')
})
},
+ onUpdateStart () {
+ this._onUpdate()
+ this.startDialog = false
+ },
+ closeStart () {
+ this.startDialog = false
+ },
/**
* get emial
*/
@@ -227,34 +241,20 @@
_timing (item) {
let self = this
this._getReceiver(item.id).then(res => {
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mTiming, {
- on: {
- onUpdate () {
- self._onUpdate()
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- item: item,
- receiversD: res.receivers,
- receiversCcD: res.receiversCc,
- type: 'timing'
- }
- })
- }
- })
+ this.timingData.item = item,
+ this.timingData.receiversD = res.receivers,
+ this.timingData.receiversCcD = res.receiversCc,
+ this.timingData.type = 'timing'
+ this.timingDialog = true
})
},
+ onUpdateTiming () {
+ this._onUpdate()
+ this.timingDialog = false
+ },
+ closeTiming () {
+ this.timingDialog = false
+ },
/**
* Timing manage
*/
@@ -262,18 +262,6 @@
this.$router.push({ path: `/projects/definition/list/timing/${item.id}` })
},
/**
- * Close the delete layer
- */
- _closeDelete (i) {
- // close batch
- if (i < 0) {
- this.$refs['poptipDeleteAll'].doClose()
- return
- }
- // close one
- this.$refs[`poptip-delete-${i}`][0].doClose()
- },
- /**
* delete
*/
_delete (item, i) {
@@ -286,11 +274,9 @@
this.deleteDefinition({
processDefinitionId: item.id
}).then(res => {
- this.$refs[`poptip-delete-${i}`][0].doClose()
this._onUpdate()
this.$message.success(res.msg)
}).catch(e => {
- this.$refs[`poptip-delete-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
@@ -328,7 +314,7 @@
}).then(res => {
this.strSelectIds = ''
this.$message.success(res.msg)
- $('body').find('.tooltip.fade.top.in').remove()
+ // $('body').find('.tooltip.fade.top.in').remove()
this._onUpdate()
}).catch(e => {
this.$message.error(e.msg || '')
@@ -360,7 +346,69 @@
this.$message.error(e.msg || '')
})
},
-
+ /**
+ * switch version in process definition version list
+ *
+ * @param version the version user want to change
+ * @param processDefinitionId the process definition id
+ * @param fromThis fromThis
+ */
+ mVersionSwitchProcessDefinitionVersion({ version, processDefinitionId, fromThis }) {
+ this.switchProcessDefinitionVersion({
+ version: version,
+ processDefinitionId: processDefinitionId
+ }).then(res=>{
+ this.$message.success($t('Switch Version Successfully'))
+ this.$router.push({ path: `/projects/definition/list/${processDefinitionId}` })
+ }).catch(e => {
+ this.$message.error(e.msg || '')
+ })
+ },
+ /**
+ * Paging event of process definition versions
+ *
+ * @param pageNo page number
+ * @param pageSize page size
+ * @param processDefinitionId the process definition id of page version
+ * @param fromThis fromThis
+ */
+ mVersionGetProcessDefinitionVersionsPage({ pageNo, pageSize, processDefinitionId, fromThis }) {
+ this.getProcessDefinitionVersionsPage({
+ pageNo: pageNo,
+ pageSize: pageSize,
+ processDefinitionId: processDefinitionId
+ }).then(res=>{
+ this.versionData.processDefinitionVersions = res.data.lists
+ this.versionData.total = res.data.totalCount
+ this.versionData.pageSize = res.data.pageSize
+ this.versionData.pageNo = res.data.currentPage
+ }).catch(e=>{
+ this.$message.error(e.msg || '')
+ })
+ },
+ /**
+ * delete one version of process definition
+ *
+ * @param version the version need to delete
+ * @param processDefinitionId the process definition id user want to delete
+ * @param fromThis fromThis
+ */
+ mVersionDeleteProcessDefinitionVersion({ version, processDefinitionId, fromThis }) {
+ this.deleteProcessDefinitionVersion({
+ version: version,
+ processDefinitionId: processDefinitionId
+ }).then(res=>{
+ this.$message.success(res.msg || '')
+ this.mVersionGetProcessDefinitionVersionsPage({
+ pageNo: 1,
+ pageSize: 10,
+ processDefinitionId: processDefinitionId,
+ fromThis: fromThis
+ })
+ }).catch(e => {
+ this.$message.error(e.msg || '')
+ })
+ },
_version (item) {
let self = this
this.getProcessDefinitionVersionsPage({
@@ -372,109 +420,14 @@
let total = res.data.totalCount
let pageSize = res.data.pageSize
let pageNo = res.data.currentPage
- if (this.versionsModel) {
- this.versionsModel.remove()
- }
- this.versionsModel = this.$drawer({
- direction: 'right',
- closable: true,
- showMask: true,
- escClose: true,
- render (h) {
- return h(mVersions, {
- on: {
- /**
- * switch version in process definition version list
- *
- * @param version the version user want to change
- * @param processDefinitionId the process definition id
- * @param fromThis fromThis
- */
- mVersionSwitchProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
- self.switchProcessDefinitionVersion({
- version: version,
- processDefinitionId: processDefinitionId
- }).then(res => {
- self.$message.success($t('Switch Version Successfully'))
- setTimeout(() => {
- fromThis.$destroy()
- self.versionsModel.remove()
- }, 0)
- self.$router.push({ path: `/projects/definition/list/${processDefinitionId}` })
- }).catch(e => {
- self.$message.error(e.msg || '')
- })
- },
-
- /**
- * Paging event of process definition versions
- *
- * @param pageNo page number
- * @param pageSize page size
- * @param processDefinitionId the process definition id of page version
- * @param fromThis fromThis
- */
- mVersionGetProcessDefinitionVersionsPage ({ pageNo, pageSize, processDefinitionId, fromThis }) {
- self.getProcessDefinitionVersionsPage({
- pageNo: pageNo,
- pageSize: pageSize,
- processDefinitionId: processDefinitionId
- }).then(res => {
- fromThis.processDefinitionVersions = res.data.lists
- fromThis.total = res.data.totalCount
- fromThis.pageSize = res.data.pageSize
- fromThis.pageNo = res.data.currentPage
- }).catch(e => {
- self.$message.error(e.msg || '')
- })
- },
+
+ this.versionData.processDefinition = item,
+ this.versionData.processDefinitionVersions = processDefinitionVersions,
+ this.versionData.total = total,
+ this.versionData.pageNo = pageNo,
+ this.versionData.pageSize = pageSize
+ this.drawer = true
- /**
- * delete one version of process definition
- *
- * @param version the version need to delete
- * @param processDefinitionId the process definition id user want to delete
- * @param fromThis fromThis
- */
- mVersionDeleteProcessDefinitionVersion ({ version, processDefinitionId, fromThis }) {
- self.deleteProcessDefinitionVersion({
- version: version,
- processDefinitionId: processDefinitionId
- }).then(res => {
- self.$message.success(res.msg || '')
- fromThis.$emit('mVersionGetProcessDefinitionVersionsPage', {
- pageNo: 1,
- pageSize: 10,
- processDefinitionId: processDefinitionId,
- fromThis: fromThis
- })
- }).catch(e => {
- self.$message.error(e.msg || '')
- })
- },
-
- /**
- * remove this drawer
- *
- * @param fromThis
- */
- close ({ fromThis }) {
- setTimeout(() => {
- fromThis.$destroy()
- self.versionsModel.remove()
- }, 0)
- }
- },
- props: {
- processDefinition: item,
- processDefinitionVersions: processDefinitionVersions,
- total: total,
- pageNo: pageNo,
- pageSize: pageSize
- }
- })
- }
- })
}).catch(e => {
this.$message.error(e.msg || '')
})
@@ -498,59 +451,26 @@
* Batch Copy
*/
_batchCopy () {
- let self = this
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mRelatedItems, {
- on: {
- onBatchCopy (item) {
- self._copyProcess({id: self.strSelectIds,projectId: item})
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- tmp: false
- }
- })
- }
- })
+ this.relatedItemsDialog= true
+ this.tmp = false
+ },
+ onBatchCopy (item) {
+ this._copyProcess({id: this.strSelectIds,projectId: item})
+ this.relatedItemsDialog = false
+ },
+ closeRelatedItems () {
+ this.relatedItemsDialog = false
},
/**
* _batchMove
*/
_batchMove() {
- let self = this
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mRelatedItems, {
- on: {
- onBatchMove (item) {
- self._moveProcess({id: self.strSelectIds,projectId: item})
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- tmp: true
- }
- })
- }
- })
+ this.tmp = true
+ this.relatedItemsDialog = true
+ },
+ onBatchMove (item) {
+ this._moveProcess({id: this.strSelectIds,projectId: item})
+ this.relatedItemsDialog = false
},
/**
* Edit state
@@ -568,32 +488,17 @@
this.$emit('on-update')
},
/**
- * click the select-all checkbox
- */
- _topCheckBoxClick (is) {
- _.map(this.list , v => v.isCheck = v.releaseState === 'ONLINE' ? false : is)
- this._arrDelChange()
- },
- /**
* the array that to be delete
*/
_arrDelChange (v) {
let arr = []
- this.list.forEach((item)=>{
- if (item.isCheck) {
- arr.push(item.id)
- }
- })
+ arr = _.map(v, 'id');
this.strSelectIds = _.join(arr, ',')
- if (v === false) {
- this.checkAll = false
- }
},
/**
* batch delete
*/
_batchDelete () {
- this.$refs['poptipDeleteAll'].doClose()
this.batchDeleteDefinition({
processDefinitionIds: this.strSelectIds
}).then(res => {
@@ -628,6 +533,6 @@
},
mounted () {
},
- components: { mVersions }
+ components: { mVersions, mStart, mTiming, mRelatedItems }
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue
index 9090bbd..89fd761 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/relatedItems.vue
@@ -25,14 +25,14 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
<template slot="content">
- <x-select v-model="itemId">
- <x-option
+ <el-select v-model="itemId" size="small">
+ <el-option
v-for="item in itemList"
:key="item.id"
:value="item.id"
:label="item.name">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
</m-list-box-f>
</div>
@@ -62,9 +62,9 @@
_ok () {
if(this._verification()) {
if(this.tmp) {
- this.$emit('onBatchMove',this.itemId)
+ this.$emit('onBatchMove',this.itemId)
} else {
- this.$emit('onBatchCopy',this.itemId)
+ this.$emit('onBatchCopy',this.itemId)
}
}
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
index 87c0f62..e0fc482 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/start.vue
@@ -16,9 +16,6 @@
*/
<template>
<div class="start-process-model">
- <div class="title-box">
- <span>{{$t('Please set the parameters before starting')}}</span>
- </div>
<div class="clearfix list">
<div class="text">
{{$t('Process Name')}}
@@ -30,10 +27,10 @@
{{$t('Failure Strategy')}}
</div>
<div class="cont">
- <x-radio-group v-model="failureStrategy" style="margin-top: 7px;">
- <x-radio :label="'CONTINUE'">{{$t('Continue')}}</x-radio>
- <x-radio :label="'END'">{{$t('End')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="failureStrategy" style="margin-top: 7px;" size="small">
+ <el-radio :label="'CONTINUE'">{{$t('Continue')}}</el-radio>
+ <el-radio :label="'END'">{{$t('End')}}</el-radio>
+ </el-radio-group>
</div>
</div>
<div class="clearfix list" v-if="sourceType === 'contextmenu'" style="margin-top: -8px;">
@@ -41,11 +38,11 @@
{{$t('Node execution')}}
</div>
<div class="cont" style="padding-top: 6px;">
- <x-radio-group v-model="taskDependType">
- <x-radio :label="'TASK_POST'">{{$t('Backward execution')}}</x-radio>
- <x-radio :label="'TASK_PRE'">{{$t('Forward execution')}}</x-radio>
- <x-radio :label="'TASK_ONLY'">{{$t('Execute only the current node')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="taskDependType" size="small">
+ <el-radio :label="'TASK_POST'">{{$t('Backward execution')}}</el-radio>
+ <el-radio :label="'TASK_PRE'">{{$t('Forward execution')}}</el-radio>
+ <el-radio :label="'TASK_ONLY'">{{$t('Execute only the current node')}}</el-radio>
+ </el-radio-group>
</div>
</div>
<div class="clearfix list">
@@ -53,14 +50,14 @@
{{$t('Notification strategy')}}
</div>
<div class="cont">
- <x-select style="width: 200px;" v-model="warningType">
- <x-option
+ <el-select style="width: 200px;" v-model="warningType" size="small">
+ <el-option
v-for="city in warningTypeList"
:key="city.id"
:value="city.id"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</div>
<div class="clearfix list">
@@ -84,21 +81,22 @@
{{$t('Notification group')}}
</div>
<div class="cont">
- <x-select
- style="width: 200px;"
- v-model="warningGroupId"
- :disabled="!notifyGroupList.length">
- <x-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
- <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
- <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId"></em>
- </x-input>
- <x-option
+ <el-select
+ style="width: 200px;"
+ size="small"
+ v-model="warningGroupId"
+ :disabled="!notifyGroupList.length">
+ <el-input slot="trigger" slot-scope="{ selectedModel }" readonly :placeholder="$t('Please select a notification group')" size="small" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = ''">
+ <em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId"></em>
+ <em slot="suffix" class="el-icon-bottom" style="font-size: 12px;" v-show="!warningGroupId"></em>
+ </el-input>
+ <el-option
v-for="city in notifyGroupList"
:key="city.id"
:value="city.id"
:label="city.code">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</div>
</div>
<div class="clearfix list">
@@ -123,7 +121,7 @@
</div>
<div class="cont">
<div style="padding-top: 6px;">
- <x-checkbox v-model="execType">{{$t('Whether it is a complement process?')}}</x-checkbox>
+ <el-checkbox v-model="execType" size="small">{{$t('Whether it is a complement process?')}}</el-checkbox>
</div>
</div>
</div>
@@ -133,10 +131,10 @@
{{$t('Mode of execution')}}
</div>
<div class="cont">
- <x-radio-group v-model="runMode" style="margin-top: 7px;">
- <x-radio :label="'RUN_MODE_SERIAL'">{{$t('Serial execution')}}</x-radio>
- <x-radio :label="'RUN_MODE_PARALLEL'">{{$t('Parallel execution')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="runMode" style="margin-top: 7px;">
+ <el-radio :label="'RUN_MODE_SERIAL'">{{$t('Serial execution')}}</el-radio>
+ <el-radio :label="'RUN_MODE_PARALLEL'">{{$t('Parallel execution')}}</el-radio>
+ </el-radio-group>
</div>
</div>
<div class="clearfix list">
@@ -144,22 +142,23 @@
{{$t('Schedule date')}}
</div>
<div class="cont">
- <x-datepicker
- style="width: 360px;"
- :panel-num="2"
- placement="bottom-start"
- @on-change="_datepicker"
- :value="scheduleTime"
- type="daterange"
- :placeholder="$t('Select date range')"
- format="YYYY-MM-DD HH:mm:ss">
- </x-datepicker>
+ <el-date-picker
+ style="width: 360px"
+ v-model="scheduleTime"
+ size="small"
+ @change="_datepicker"
+ type="datetimerange"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
</div>
</template>
<div class="submit">
- <x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Start')}} </x-button>
+ <el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
+ <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Start')}} </el-button>
</div>
</div>
</template>
@@ -197,7 +196,7 @@
}
},
props: {
- item: Object,
+ startData: Object,
startNodeList: {
type: String,
default: ''
@@ -211,7 +210,7 @@
_start () {
this.spinnerLoading = true
let param = {
- processDefinitionId: this.item.id,
+ processDefinitionId: this.startData.id,
scheduleTime: this.scheduleTime.length && this.scheduleTime.join(',') || '',
failureStrategy: this.failureStrategy,
warningType: this.warningType,
@@ -231,7 +230,7 @@
}
this.store.dispatch('dag/processStart', param).then(res => {
this.$message.success(res.msg)
- this.$emit('onUpdate')
+ this.$emit('onUpdateStart')
setTimeout(() => {
this.spinnerLoading = false
this.close()
@@ -250,7 +249,7 @@
})
},
_getReceiver () {
- this.store.dispatch('dag/getReceiver', { processDefinitionId: this.item.id }).then(res => {
+ this.store.dispatch('dag/getReceiver', { processDefinitionId: this.startData.id }).then(res => {
this.receivers = res.receivers && res.receivers.split(',') || []
this.receiversCc = res.receiversCc && res.receiversCc.split(',') || []
})
@@ -259,7 +258,7 @@
this._start()
},
close () {
- this.$emit('close')
+ this.$emit('closeStart')
}
},
watch: {
@@ -269,7 +268,7 @@
},
created () {
this.warningType = this.warningTypeList[0].id
- this.workflowName = this.item.name
+ this.workflowName = this.startData.name
this._getReceiver()
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
@@ -291,7 +290,7 @@
this.warningGroupId = ''
})
})
- this.workflowName = this.item.name
+ this.workflowName = this.startData.name
},
computed: {},
components: { mEmail, mPriority, mWorkerGroups }
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
index 65b9176..94214f4 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/timing.vue
@@ -16,48 +16,48 @@
*/
<template>
<div class="timing-process-model">
- <div class="title-box">
- <span>{{$t('Set parameters before timing')}}</span>
- </div>
<div class="clearfix list">
<div class="text">
{{$t('Start and stop time')}}
</div>
<div class="cont">
- <x-datepicker
- style="width: 360px;"
- :panel-num="2"
- placement="bottom-start"
- @on-change="_datepicker"
- :value="scheduleTime"
- type="daterange"
- :placeholder="$t('Select date range')"
- format="YYYY-MM-DD HH:mm:ss">
- </x-datepicker>
+ <el-date-picker
+ style="width: 360px"
+ v-model="scheduleTime"
+ size="small"
+ @change="_datepicker"
+ type="datetimerange"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
</div>
<div class="clearfix list">
- <x-button type="info" style="margin-left:20px" shape="circle" :loading="spinnerLoading" @click="preview()">{{$t('Execute time')}}</x-button>
+ <el-button type="info" style="margin-left:20px" size="small" round :loading="spinnerLoading" @click="preview()">{{$t('Execute time')}}</el-button>
<div class="text">
{{$t('Timing')}}
</div>
<div class="cont">
<template>
- <x-poptip :ref="'poptip'" placement="bottom-start">
- <div class="crontab-box">
- <v-crontab v-model="crontab" :locale="i18n"></v-crontab>
- </div>
+ <el-popover
+ placement="bottom-start"
+ trigger="click">
<template slot="reference">
- <x-input
+ <el-input
style="width: 360px;"
type="text"
+ size="small"
readonly
- :value="crontab"
- autocomplete="off">
- </x-input>
+ :value="crontab">
+ </el-input>
</template>
- </x-poptip>
+ <div class="crontab-box">
+ <v-crontab v-model="crontab" :locale="i18n"></v-crontab>
+ </div>
+ </el-popover>
</template>
</div>
</div>
@@ -73,10 +73,10 @@
{{$t('Failure Strategy')}}
</div>
<div class="cont">
- <x-radio-group v-model="failureStrategy" style="margin-top: 7px;">
- <x-radio :label="'CONTINUE'">{{$t('Continue')}}</x-radio>
- <x-radio :label="'END'">{{$t('End')}}</x-radio>
- </x-radio-group>
+ <el-radio-group v-model="failureStrategy" style="margin-top: 7px;" size="small">
+ <el-radio :label="'CONTINUE'">{{$t('Continue')}}</el-radio>
+ <el-radio :label="'END'">{{$t('End')}}</el-radio>
+ </el-radio-group>
</div>
</div>
<div class="clearfix list">
@@ -84,16 +84,17 @@
{{$t('Notification strategy')}}
</div>
<div class="cont">
- <x-select
- style="width: 200px;"
- v-model="warningType">
- <x-option
- v-for="city in warningTypeList"
- :key="city.id"
- :value="city.id"
- :label="city.code">
- </x-option>
- </x-select>
+ <el-select
+ style="width: 200px;"
+ size="small"
+ v-model="warningType">
+ <el-option
+ v-for="city in warningTypeList"
+ :key="city.id"
+ :value="city.id"
+ :label="city.code">
+ </el-option>
+ </el-select>
</div>
</div>
<div class="clearfix list">
@@ -117,21 +118,22 @@
{{$t('Notification group')}}
</div>
<div class="cont">
- <x-select
- style="width: 200px;"
- :disabled="!notifyGroupList.length"
- v-model="warningGroupId">
- <x-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
- <em slot="suffix" class="ans-icon-fail-solid" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
- <em slot="suffix" class="ans-icon-arrow-down" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
- </x-input>
- <x-option
- v-for="city in notifyGroupList"
- :key="city.id"
- :value="city.id"
- :label="city.code">
- </x-option>
- </x-select>
+ <el-select
+ style="width: 200px;"
+ size="small"
+ :disabled="!notifyGroupList.length"
+ v-model="warningGroupId">
+ <el-input slot="trigger" readonly slot-scope="{ selectedModel }" :placeholder="$t('Please select a notification group')" :value="selectedModel ? selectedModel.label : ''" style="width: 200px;" @on-click-icon.stop="warningGroupId = {}">
+ <em slot="suffix" class="el-icon-error" style="font-size: 15px;cursor: pointer;" v-show="warningGroupId.id"></em>
+ <em slot="suffix" class="el-icon-bottom" style="font-size: 12px;" v-show="!warningGroupId.id"></em>
+ </el-input>
+ <el-option
+ v-for="city in notifyGroupList"
+ :key="city.id"
+ :value="city.id"
+ :label="city.code">
+ </el-option>
+ </el-select>
</div>
</div>
<div class="clearfix list">
@@ -151,8 +153,8 @@
</div>
</div>
<div class="submit">
- <x-button type="text" @click="close()"> {{$t('Cancel')}} </x-button>
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : (item.crontab ? $t('Edit') : $t('Create'))}} </x-button>
+ <el-button type="text" size="small" @click="close()"> {{$t('Cancel')}} </el-button>
+ <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : (timingData.item.crontab ? $t('Edit') : $t('Create'))}} </el-button>
</div>
</div>
</template>
@@ -191,10 +193,7 @@
}
},
props: {
- item: Object,
- receiversD: Array,
- receiversCcD: Array,
- type: String
+ timingData: Object
},
methods: {
_datepicker (val) {
@@ -237,19 +236,19 @@
let msg = ''
// edit
- if (this.item.crontab) {
+ if (this.timingData.item.crontab) {
api = 'dag/updateSchedule'
- searchParams.id = this.item.id
+ searchParams.id = this.timingData.item.id
msg = `${i18n.$t('Edit')}${i18n.$t('success')},${i18n.$t('Please go online')}`
} else {
api = 'dag/createSchedule'
- searchParams.processDefinitionId = this.item.id
+ searchParams.processDefinitionId = this.timingData.item.id
msg = `${i18n.$t('Create')}${i18n.$t('success')}`
}
this.store.dispatch(api, searchParams).then(res => {
this.$message.success(msg)
- this.$emit('onUpdate')
+ this.$emit('onUpdateTiming')
}).catch(e => {
this.$message.error(e.msg || '')
})
@@ -294,7 +293,7 @@
this._timing()
},
close () {
- this.$emit('close')
+ this.$emit('closeTiming')
},
preview () {
this._preview()
@@ -303,7 +302,7 @@
watch: {
},
created () {
- if(this.item.workerGroup===undefined) {
+ if(this.timingData.item.workerGroup===undefined) {
let stateWorkerGroupsList = this.store.state.security.workerGroupsListAll || []
if (stateWorkerGroupsList.length) {
this.workerGroup = stateWorkerGroupsList[0].id
@@ -315,12 +314,12 @@
})
}
} else {
- this.workerGroup = this.item.workerGroup
+ this.workerGroup = this.timingData.item.workerGroup
}
- if(this.item.crontab !== null){
- this.crontab = this.item.crontab
+ if(this.timingData.item.crontab !== null){
+ this.crontab = this.timingData.item.crontab
}
- if(this.type == 'timing') {
+ if(this.timingData.type == 'timing') {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
@@ -339,13 +338,13 @@
this.crontab = '0 0 * * * ? *'
this.scheduleTime = times
}
- this.receivers = _.cloneDeep(this.receiversD)
- this.receiversCc = _.cloneDeep(this.receiversCcD)
+ this.receivers = _.cloneDeep(this.timingData.receiversD)
+ this.receiversCc = _.cloneDeep(this.timingData.receiversCcD)
},
mounted () {
- let item = this.item
+ let item = this.timingData.item
// Determine whether to echo
- if (this.item.crontab) {
+ if (this.timingData.item.crontab) {
this.crontab = item.crontab
this.scheduleTime = [formatDate(item.startTime), formatDate(item.endTime)]
this.failureStrategy = item.failureStrategy
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue
index fcc3410..14fe497 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/versions.vue
@@ -21,103 +21,69 @@
<span class="name">{{$t('Version Info')}}</span>
</div>
- <div class="table-box" v-if="processDefinitionVersions.length > 0">
- <table class="fixed">
- <caption><!-- placeHolder --></caption>
- <tr>
- <th scope="col" style="min-width: 40px;text-align: left">
- <span>{{$t('Version')}}</span>
- </th>
- <th scope="col" style="min-width: 30px">
- <span>{{$t('Description')}}</span>
- </th>
- <th scope="col" style="min-width: 50px">
- <span>{{$t('Create Time')}}</span>
- </th>
- <th scope="col" style="min-width: 300px">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in processDefinitionVersions" :key="item.id">
- <td>
- <span v-if="item.version">
- <span v-if="item.version === processDefinition.version" style="color: green"><strong>{{item.version}} {{$t('Current Version')}}</strong></span>
- <span v-else>{{item.version}}</span>
+ <div class="table-box" v-if="versionData.processDefinitionVersions.length > 0">
+ <el-table :data="versionData.processDefinitionVersions" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="userName" :label="$t('Version')">
+ <template slot-scope="scope">
+ <span v-if="scope.row.version">
+ <span v-if="scope.row.version === versionData.processDefinition.version" style="color: green"><strong>{{scope.row.version}} {{$t('Current Version')}}</strong></span>
+ <span v-else>{{scope.row.version}}</span>
</span>
<span v-else>-</span>
- </td>
- <td style="word-break:break-all;">
- <span v-if="item.description">{{item.description}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.createTime">{{item.createTime}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <x-poptip
- :ref="'poptip-switch-version-' + $index"
- placement="top-end"
- width="260">
- <p>{{$t('Confirm Switch To This Version?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeSwitchVersion($index)">
- {{$t('Cancel')}}
- </x-button>
- <x-button type="primary" size="xsmall" shape="circle"
- @click="_mVersionSwitchProcessDefinitionVersion(item)">{{$t('Confirm')}}
- </x-button>
- </div>
- <template slot="reference">
- <x-button
- icon="ans-icon-dependence"
- type="primary"
- shape="circle"
- size="xsmall"
- :disabled="item.version === processDefinition.version || 'ONLINE' === processDefinition.state"
- data-toggle="tooltip"
- :title="$t('Switch To This Version')">
- </x-button>
- </template>
- </x-poptip>
- <x-poptip
- :ref="'poptip-delete-' + $index"
- placement="top-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}
- </x-button>
- <x-button type="primary" size="xsmall" shape="circle"
- @click="_mVersionDeleteProcessDefinitionVersion(item,$index)">{{$t('Confirm')}}
- </x-button>
- </div>
- <template slot="reference">
- <x-button
- icon="ans-icon-trash"
- type="error"
- shape="circle"
- size="xsmall"
- :disabled="item.version === processDefinition.version || 'ONLINE' === processDefinition.state"
- data-toggle="tooltip"
- :title="$t('delete')">
- </x-button>
- </template>
- </x-poptip>
- </td>
- </tr>
- </table>
+ </template>
+ </el-table-column>
+ <el-table-column prop="description" :label="$t('Description')"></el-table-column>
+ <el-table-column :label="$t('Create Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.createTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Operation')" width="100">
+ <template slot-scope="scope">
+ <el-tooltip :content="$t('Switch To This Version')" placement="top">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Confirm Switch To This Version?')"
+ @onConfirm="_mVersionSwitchProcessDefinitionVersion(scope.row)"
+ >
+ <el-button type="primary" size="mini" icon="el-icon-warning" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_mVersionDeleteProcessDefinitionVersion(scope.row,scope.row.id)"
+ >
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
- <div v-if="processDefinitionVersions.length === 0">
+ <div v-if="versionData.processDefinitionVersions.length === 0">
<m-no-data><!----></m-no-data>
</div>
- <div v-if="processDefinitionVersions.length > 0">
+ <div v-if="versionData.processDefinitionVersions.length > 0">
<div class="bottom-box">
- <x-button type="text" @click="_close()"> {{$t('Cancel')}}</x-button>
- <x-page :current="pageNo" :total="total" @on-change="_mVersionGetProcessDefinitionVersionsPage" small>
- <!----></x-page>
+ <el-pagination
+ style="float:right"
+ background
+ @current-change="_mVersionGetProcessDefinitionVersionsPage"
+ layout="prev, pager, next"
+ :total="versionData.total">
+ </el-pagination>
+ <el-button type="text" size="mini" @click="_close()" style="float:right">{{$t('Cancel')}}</el-button>
</div>
</div>
@@ -144,11 +110,7 @@
}
},
props: {
- processDefinition: Object,
- processDefinitionVersions: Array,
- total: Number,
- pageNo: Number,
- pageSize: Number
+ versionData: Object
},
methods: {
/**
@@ -157,7 +119,7 @@
_mVersionSwitchProcessDefinitionVersion (item) {
this.$emit('mVersionSwitchProcessDefinitionVersion', {
version: item.version,
- processDefinitionId: this.processDefinition.id,
+ processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
@@ -168,7 +130,7 @@
_mVersionDeleteProcessDefinitionVersion (item) {
this.$emit('mVersionDeleteProcessDefinitionVersion', {
version: item.version,
- processDefinitionId: this.processDefinition.id,
+ processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
@@ -180,25 +142,10 @@
this.$emit('mVersionGetProcessDefinitionVersionsPage', {
pageNo: val,
pageSize: this.pageSize,
- processDefinitionId: this.processDefinition.id,
+ processDefinitionId: this.versionData.processDefinition.id,
fromThis: this
})
},
-
- /**
- * Close the switch version layer
- */
- _closeSwitchVersion (i) {
- this.$refs[`poptip-switch-version-${i}`][0].doClose()
- },
-
- /**
- * Close the delete layer
- */
- _closeDelete (i) {
- this.$refs[`poptip-delete-${i}`][0].doClose()
- },
-
/**
* Close and destroy component and component internal events
*/
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
index eb5d335..fabd736 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
@@ -20,8 +20,8 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
- <x-button type="ghost" size="small" @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button>
- <x-button type="ghost" size="small" @click="_uploading">{{$t('Import process')}}</x-button>
+ <el-button size="mini" @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</el-button>
+ <el-button size="mini" @click="_uploading">{{$t('Import process')}}</el-button>
</template>
</m-conditions>
</template>
@@ -29,7 +29,16 @@
<template v-if="processListP.length || total>0">
<m-list :process-list="processListP" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!processListP.length && total<=0">
@@ -138,7 +147,7 @@
localStore.removeItem('subProcessId')
},
mounted() {
- this.$modal.destroy()
+
},
beforeDestroy () {
sessionStorage.setItem('isLeft',1)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
index bbc1825..0c80d18 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/tree/index.vue
@@ -18,29 +18,29 @@
<m-list-construction :title="$t('TreeView')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
- <em class="ans-icon-fail-empty" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
+ <em class="el-icon-back" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
</span>
</template>
<template slot="conditions"></template>
<template slot="content">
<div class="tree-view-index-model">
<div class="tree-limit-select">
- <x-select v-model="limit" style="width: 70px;" @on-change="_onChangeSelect">
- <x-option
+ <el-select v-model="limit" style="width: 70px;" @change="_onChangeSelect" size="small">
+ <el-option
v-for="city in [{value:25},{value:50},{value:75},{value:100}]"
:key="city.value"
:value="city.value"
:label="city.value">
- </x-option>
- </x-select>
- <x-button
+ </el-option>
+ </el-select>
+ <el-button
@click="_rtTasksDag"
v-if="$route.query.subProcessIds"
type="primary"
- size="default"
- icon="ans-icon-arrow-to-left">
+ size="small"
+ icon="el-icon-d-arrow-left">
{{$t('Return_1')}}
- </x-button>
+ </el-button>
</div>
<div class="tasks-color">
<div class="toolbar-color-sp">
@@ -48,7 +48,7 @@
<span>Node Type</span>
</a>
<a href="javascript:" v-for="(k,v) in tasksType" :key="v">
- <em class="ans-icon-circle-solid" :style="{color:k.color}"></em>
+ <em class="el-icon-user-solid" :style="{color:k.color}"></em>
<span>{{v}}</span>
</a>
</div>
@@ -57,7 +57,7 @@
<span>{{$t('Task Status')}}</span>
</a>
<a href="javascript:" v-for="(item) in tasksState" :key="item.id">
- <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
+ <em class="fa fa-square" :style="{color:item.color}"></em>
<span>{{item.desc}}</span>
</a>
</div>
@@ -189,7 +189,7 @@
this.$router.push({ path: `/projects/definition/tree/${subProcessId}`, query: { subProcessIds: subProcessIds.join(',') } })
},
_onChangeSelect (o) {
- this.limit = o.value
+ this.limit = o
this._getViewTree()
}
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
index 7b0b2c3..68ec207 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/_source/list.vue
@@ -22,125 +22,74 @@
<div class="list-model" v-if="!isLoading">
<template v-if="list.length">
<div class="table-box">
- <table>
- <tr>
- <th>
- <span>{{$t('#')}}</span>
- </th>
- <th>
- <span>{{$t('Process Name')}}</span>
- </th>
- <th>
- <span>{{$t('Start Time')}}</span>
- </th>
- <th>
- <span>{{$t('End Time')}}</span>
- </th>
- <th>
- <span>{{$t('crontab')}}</span>
- </th>
- <th>
- <span>{{$t('Failure Strategy')}}</span>
- </th>
- <th>
- <span>{{$t('State')}}</span>
- </th>
- <th>
- <span>{{$t('Create Time')}}</span>
- </th>
- <th>
- <span>{{$t('Update Time')}}</span>
- </th>
- <th width="120">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="item.id">
- <td>
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td>
- <span><a href="javascript:">{{item.processDefinitionName}}</a></span>
- </td>
- <td>
- <span>{{item.startTime | formatDate}}</span>
- </td>
- <td>
- <span>{{item.endTime | formatDate}}</span>
- </td>
- <td>
- <span>{{item.crontab}}</span>
- </td>
- <td>
- <span>{{item.failureStrategy}}</span>
- </td>
- <td>
- <span>{{_rtReleaseState(item.releaseState)}}</span>
- </td>
- <td>
- <span>{{item.createTime | formatDate}}</span>
- </td>
- <td>
- <span>{{item.updateTime | formatDate}}</span>
- </td>
- <td>
- <x-button
- type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Edit')"
- @click="_editTiming(item)"
- icon="ans-icon-edit"
- :disabled="item.releaseState === 'ONLINE'" >
- </x-button>
- <x-button
- type="warning"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('online')"
- @click="_online(item)"
- icon="ans-icon-upward"
- v-if="item.releaseState === 'OFFLINE'">
- </x-button>
- <x-button
- type="error"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('offline')"
- icon="ans-icon-downward"
- @click="_offline(item)"
- v-if="item.releaseState === 'ONLINE'">
- </x-button>
- <x-poptip
- :ref="'poptip-delete-' + $index"
- placement="bottom-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
- </div>
- <template slot="reference">
- <x-button
- icon="ans-icon-trash"
- type="error"
- shape="circle"
- size="xsmall"
- :disabled="item.releaseState === 'ONLINE'"
- data-toggle="tooltip"
- :title="$t('delete')">
- </x-button>
- </template>
- </x-poptip>
- </td>
- </tr>
- </table>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="processDefinitionName" :label="$t('Process Name')"></el-table-column>
+ <el-table-column :label="$t('Start Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.startTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('End Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.endTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="crontab" :label="$t('crontab')"></el-table-column>
+ <el-table-column prop="failureStrategy" :label="$t('Failure Strategy')"></el-table-column>
+ <el-table-column :label="$t('State')">
+ <template slot-scope="scope">
+ <span>{{_rtReleaseState(scope.row.releaseState)}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Create Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.createTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Update Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.updateTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Operation')" width="120">
+ <template slot-scope="scope">
+ <el-tooltip :content="$t('Edit')" placement="top">
+ <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.releaseState === 'ONLINE'" @click="_editTiming(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('online')" placement="top" v-if="scope.row.releaseState === 'OFFLINE'">
+ <span><el-button type="warning" size="mini" icon="el-icon-upload2" @click="_online(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('offline')" placement="top" v-if="scope.row.releaseState === 'ONLINE'">
+ <span><el-button type="danger" size="mini" icon="el-icon-download" @click="_offline(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_delete(scope.row,scope.row.id)"
+ >
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
<div class="page-box">
- <x-page :current="pageNo" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="pageSize"
+ :current-page.sync="pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!list.length">
@@ -148,6 +97,12 @@
</template>
</div>
<m-spin :is-spin="isLoading"></m-spin>
+ <el-dialog
+ :title="$t('Set parameters before timing')"
+ :visible.sync="timingDialog"
+ width="65%">
+ <m-timing :timingData="timingData" @onUpdateTiming="onUpdateTiming" @closeTiming="closeTiming"></m-timing>
+ </el-dialog>
</div>
</template>
<script>
@@ -166,7 +121,13 @@
total: null,
pageNo: 1,
pageSize: 10,
- list: []
+ list: [],
+ timingDialog: false,
+ timingData: {
+ item: {},
+ receiversD: [],
+ receiversCcD: []
+ }
}
},
props: {
@@ -285,43 +246,28 @@
* timing
*/
_editTiming (item) {
- let self = this
this._getReceiver(item.processDefinitionId).then(res => {
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mTiming, {
- on: {
- onUpdate () {
- self.pageNo = 1
- self._getScheduleList('false')
- modal.remove()
- },
- close () {
- modal.remove()
- }
- },
- props: {
- item: item,
- receiversD: res.receivers,
- receiversCcD: res.receiversCc
- }
- })
- }
- })
+ this.timingData.item = item
+ this.timingData.receiversD = res.receivers
+ this.timingData.receiversCcD = res.receiversCc
+ this.timingDialog = true
})
- }
+ },
+ onUpdateTiming () {
+ this.pageNo = 1
+ this._getScheduleList('false')
+ this.timingDialog = false
+ },
+ closeTiming () {
+ this.timingDialog = false
+ },
},
watch: {},
created () {
this._getScheduleList()
},
mounted () {},
- components: { mSpin, mNoData }
+ components: { mSpin, mNoData, mTiming }
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue
index efd5489..17a4964 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/timing/index.vue
@@ -18,7 +18,7 @@
<m-list-construction :title="$t('Cron Manage')">
<template slot="operation">
<span style=" float: right; padding-right:50px">
- <em class="ans-icon-fail-empty" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
+ <em class="el-icon-circle-close" style="font-size:20px " data-container="body" data-toggle="tooltip" :title="$t('Return')" @click="_close()"></em>
</span>
</template>
<template slot="content">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
index 7ca6e3a..560b72e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/index/index.vue
@@ -19,15 +19,16 @@
<template slot="content">
<div class="perject-home-content">
<div class="time-model">
- <x-datepicker
- :panel-num="2"
- placement="bottom-end"
- @on-change="_datepicker"
- :value="[searchParams.startDate,searchParams.endDate]"
- type="daterange"
- :placeholder="$t('Select date range')"
- format="YYYY-MM-DD HH:mm:ss">
- </x-datepicker>
+ <el-date-picker
+ v-model="dataTime"
+ type="datetimerange"
+ size="small"
+ @change="_datepicker"
+ range-separator="-"
+ :start-placeholder="$t('startDate')"
+ :end-placeholder="$t('endDate')"
+ value-format="yyyy-MM-dd HH:mm:ss">
+ </el-date-picker>
</div>
<div class="row" >
<div class="col-md-6">
@@ -83,7 +84,8 @@
projectId: null,
startDate: '',
endDate: ''
- }
+ },
+ dataTime: [],
}
},
props: {
@@ -97,8 +99,8 @@
},
created () {
this.searchParams.projectId = this.id === 0 ? 0 : localStore.getItem('projectId')
- this.searchParams.startDate = dayjs().format('YYYY-MM-DD 00:00:00')
- this.searchParams.endDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
+ this.dataTime[0] = dayjs().format('YYYY-MM-DD 00:00:00')
+ this.dataTime[1] = dayjs().format('YYYY-MM-DD HH:mm:ss')
},
components: {
mSecondaryMenu,
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
index e2e7d9b..b39152e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/gantt/index.vue
@@ -24,7 +24,7 @@
<span>{{$t('Task Status')}}</span>
</a>
<a href="javascript:" v-for="(item) in tasksState" :key="item.id">
- <em class="ans-icon-rect-solid" :style="{color:item.color}"></em>
+ <em class="fa fa-square" :style="{color:item.color}"></em>
<span>{{item.desc}}</span>
</a>
</div>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
index cda5996..9e869f5 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/_source/list.vue
@@ -17,289 +17,206 @@
<template>
<div class="list-model" style="position: relative;">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th scope="col" style="min-width: 50px">
- <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
- </th>
- <th scope="col" style="min-width: 30px">
- <span>{{$t('#')}}</span>
- </th>
- <th scope="col" style="min-width: 200px;max-width: 300px;">
- <span>{{$t('Process Name')}}</span>
- </th>
- <th scope="col" style="min-width: 30px">
- <span>{{$t('State')}}</span>
- </th>
- <th scope="col" style="min-width: 70px">
- <span>{{$t('Run Type')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Scheduling Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Start Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('End Time')}}</span>
- </th>
- <th scope="col" style="min-width: 60px">
- <span>{{$t('Duration')}}s</span>
- </th>
- <th scope="col" style="min-width: 60px">
- <span>{{$t('Run Times')}}</span>
- </th>
- <th scope="col" style="min-width: 55px">
- <span>{{$t('fault-tolerant sign')}}</span>
- </th>
- <th scope="col" style="min-width: 135px">
- <span>{{$t('Executor')}}</span>
- </th>
- <th scope="col" style="min-width: 100px">
- <div style="width: 100px">
- <span>{{$t('host')}}</span>
- </div>
- </th>
- <th scope="col" style="min-width: 210px">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="item.id">
- <td width="50"><x-checkbox v-model="item.isCheck" @on-change="_arrDelChange"></x-checkbox></td>
- <td width="50">
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
- <span class="ellipsis" style="padding-left: 4px;"><router-link :to="{ path: '/projects/instance/list/' + item.id , query:{id: item.processDefinitionId}}" tag="a" class="links" :title="item.name">{{item.name}}</router-link></span>
- </td>
- <td>
- <span v-html="_rtState(item.state)" style="cursor: pointer;"></span>
- </td>
- <td><span>{{_rtRunningType(item.commandType)}}</span></td>
- <td>
- <span v-if="item.scheduleTime">{{item.scheduleTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.startTime">{{item.startTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.endTime">{{item.endTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td width="70"><span>{{item.duration || '-'}}</span></td>
- <td width="70"><span>{{item.runTimes}}</span></td>
- <td><span>{{item.recovery}}</span></td>
- <td>
- <span v-if="item.executorName">{{item.executorName}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.host" style="word-break: break-all">{{item.host}}</span>
+ <el-table :data="list" size="mini" style="width: 100%" @selection-change="_arrDelChange">
+ <el-table-column type="selection" width="50"></el-table-column>
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column :label="$t('Process Name')" min-width="200">
+ <template slot-scope="scope">
+ <el-popover trigger="hover" placement="top">
+ <p>{{ scope.row.name }}</p>
+ <div slot="reference" class="name-wrapper">
+ <router-link :to="{ path: '/projects/instance/list/' + scope.row.id , query:{id: scope.row.processDefinitionId}}" tag="a" class="links" :title="scope.row.name">{{scope.row.name}}</router-link>
+ </div>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('State')" width="50">
+ <template slot-scope="scope">
+ <span v-html="_rtState(scope.row.state)" style="cursor: pointer;"></span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Run Type')">
+ <template slot-scope="scope">
+ {{_rtRunningType(scope.row.commandType)}}
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Scheduling Time')" width="135">
+ <template slot-scope="scope">
+ <span v-if="scope.row.scheduleTime">{{scope.row.scheduleTime | formatDate}}</span>
<span v-else>-</span>
- </td>
- <td style="z-index: inherit;">
- <div v-show="item.disabled">
- <x-button type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Edit')"
- @click="_reEdit(item)"
- icon="ans-icon-edit"
- :disabled="item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP'"></x-button>
- <x-button type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Rerun')"
- @click="_reRun(item,$index)"
- icon="ans-icon-refresh"
- :disabled="item.state !== 'SUCCESS' && item.state !== 'PAUSE' && item.state !== 'FAILURE' && item.state !== 'STOP'"></x-button>
- <x-button type="success"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Recovery Failed')"
- @click="_restore(item,$index)"
- icon="ans-icon-fail-empty"
- :disabled="item.state !== 'FAILURE'"></x-button>
- <x-button type="error"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="item.state === 'STOP' ? $t('Recovery Suspend') : $t('Stop')"
- @click="_stop(item,$index)"
- :icon="item.state === 'STOP' ? 'ans-icon-pause-solid' : 'ans-icon-stop'"
- :disabled="item.state !== 'RUNNING_EXECUTION' && item.state != 'STOP'"></x-button>
- <x-button type="warning"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="item.state === 'PAUSE' ? $t('Recovery Suspend') : $t('Pause')"
- @click="_suspend(item,$index)"
- :icon="item.state === 'PAUSE' ? 'ans-icon-pause-solid' : 'ans-icon-pause'"
- :disabled="item.state !== 'RUNNING_EXECUTION' && item.state !== 'PAUSE'"></x-button>
- <x-poptip
- :ref="'poptip-delete-' + $index"
- placement="top-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
- </div>
- <template slot="reference">
- <x-button
- icon="ans-icon-trash"
- type="error"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :disabled="item.state !== 'SUCCESS' && item.state !== 'FAILURE' && item.state !== 'STOP' && item.state !== 'PAUSE'"
- :title="$t('delete')">
- </x-button>
- </template>
- </x-poptip>
-
- <x-button type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Gantt')"
- @click="_gantt(item)"
- icon="ans-icon-gantt">
- </x-button>
-
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Start Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.startTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('End Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.endTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="duration" :label="$t('Duration')"></el-table-column>
+ <el-table-column prop="runTimes" :label="$t('Run Times')"></el-table-column>
+ <el-table-column prop="recovery" :label="$t('fault-tolerant sign')"></el-table-column>
+ <el-table-column prop="executorName" :label="$t('Executor')"></el-table-column>
+ <el-table-column prop="host" :label="$t('host')" width="150"></el-table-column>
+ <el-table-column :label="$t('Operation')" width="240" fixed="right">
+ <template slot-scope="scope">
+ <div v-show="scope.row.disabled">
+ <el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
+ <span>
+ <el-button type="primary" size="mini" icon="el-icon-edit-outline" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'" @click="_reEdit(scope.row)" circle></el-button>
+ </span>
+ </el-tooltip>
+ <el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" :disabled="scope.row.state !== 'SUCCESS' && scope.row.state !== 'PAUSE' && scope.row.state !== 'FAILURE' && scope.row.state !== 'STOP'" icon="el-icon-refresh" @click="_reRun(scope.row,scope.$index)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('Recovery Failed')" placement="top" :enterable="false">
+ <span>
+ <el-button type="success" size="mini" icon="el-icon-circle-close" :disabled="scope.row.state !== 'FAILURE'" @click="_restore(scope.row,scope.$index)" circle></el-button>
+ </span>
+ </el-tooltip>
+ <el-tooltip :content="scope.row.state === 'STOP' ? $t('Recovery Suspend') : $t('Stop')" placement="top" :enterable="false">
+ <span><el-button type="warning" size="mini" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state != 'STOP'" :icon="scope.row.state === 'STOP' ? 'el-icon-video-play' : 'el-icon-close'" @click="_stop(scope.row,scope.$index)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="scope.row.state === 'PAUSE' ? $t('Recovery Suspend') : $t('Pause')" placement="top" :enterable="false">
+ <span><el-button type="error" size="mini" :icon="scope.row.state === 'PAUSE' ? 'el-icon-video-play' : 'el-icon-video-pause'" :disabled="scope.row.state !== 'RUNNING_EXECUTION' && scope.row.state !== 'PAUSE'" @click="_suspend(scope.row,scope.$index)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_delete(scope.row,scope.row.id)">
+ <el-button type="danger" size="mini" icon="el-icon-delete" :disabled="scope.row.releaseState === 'ONLINE'" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ <el-tooltip :content="$t('Gantt')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" icon="el-icon-s-operation" @click="_gantt(scope.row)" circle></el-button></span>
+ </el-tooltip>
</div>
- <div v-show="!item.disabled">
+ <div v-show="!scope.row.disabled">
<!--Edit-->
- <x-button
+ <el-button
type="info"
- shape="circle"
- size="xsmall"
- icon="ans-icon-edit"
- disabled="true">
- </x-button>
+ size="mini"
+ icon="el-icon-edit-outline"
+ disabled="true"
+ circle>
+ </el-button>
<!--Rerun-->
- <x-button
- v-show="buttonType === 'run'"
- type="info"
- shape="circle"
- size="xsmall"
- disabled="true">
- {{item.count}}
- </x-button>
- <x-button
+ <el-tooltip :content="$t('Rerun')" placement="top" :enterable="false">
+ <span>
+ <el-button
+ v-show="buttonType === 'run'"
+ type="info"
+ size="mini"
+ disabled="true"
+ circle>
+ <span style="padding: 0 2px">{{scope.row.count}}</span>
+ </el-button>
+ </span>
+ </el-tooltip>
+ <el-button
v-show="buttonType !== 'run'"
type="info"
- shape="circle"
- size="xsmall"
- icon="ans-icon-refresh"
- disabled="true">
- </x-button>
+ size="mini"
+ icon="el-icon-refresh"
+ disabled="true"
+ circle>
+ </el-button>
- <!--Recovery Failed-->
- <x-button
- v-show="buttonType === 'store'"
- type="success"
- shape="circle"
- size="xsmall"
- disabled="true">
- {{item.count}}
- </x-button>
- <x-button
- v-show="buttonType !== 'store'"
- type="success"
- shape="circle"
- size="xsmall"
- icon="ans-icon-fail-empty"
- disabled="true">
- </x-button>
+ <span>
+ <el-button
+ v-show="buttonType === 'store'"
+ type="success"
+ size="mini"
+ circle
+ disabled="true">
+ <span style="padding: 0 3px">{{scope.row.count}}</span>
+ </el-button>
+ </span>
+ <el-button
+ v-show="buttonType !== 'store'"
+ type="success"
+ size="mini"
+ circle
+ icon="el-icon-circle-close"
+ disabled="true">
+ </el-button>
- <!--Stop-->
- <!--<x-button-->
- <!--type="error"-->
- <!--shape="circle"-->
- <!--size="xsmall"-->
- <!--icon="ans-icon-pause"-->
- <!--disabled="true">-->
- <!--</x-button>-->
-
- <!--倒计时 => Recovery Suspend/Pause-->
- <x-button
- v-show="(item.state === 'PAUSE' || item.state == 'STOP') && buttonType === 'suspend'"
- type="warning"
- shape="circle"
- size="xsmall"
- disabled="true">
- {{item.count}}
- </x-button>
+ <!--Recovery Suspend/Pause-->
+ <span>
+ <el-button
+ style="padding: 0 3px"
+ v-show="(scope.row.state === 'PAUSE' || scope.row.state == 'STOP') && buttonType === 'suspend'"
+ type="warning"
+ size="mini"
+ circle
+ disabled="true">
+ {{scope.row.count}}
+ </el-button>
+ </span>
+
<!--Recovery Suspend-->
- <x-button
- v-show="(item.state === 'PAUSE' || item.state == 'STOP') && buttonType !== 'suspend'"
- type="warning"
- shape="circle"
- size="xsmall"
- icon="ans-icon-pause-solid"
- disabled="true">
- </x-button>
+ <el-button
+ v-show="(scope.row.state === 'PAUSE' || scope.row.state == 'STOP') && buttonType !== 'suspend'"
+ type="warning"
+ size="mini"
+ circle
+ icon="el-icon-video-play"
+ disabled="true">
+ </el-button>
+
<!--Pause-->
- <x-button
- v-show="item.state !== 'PAUSE'"
- type="warning"
- shape="circle"
- size="xsmall"
- icon="ans-icon-stop"
- disabled="true">
- </x-button>
- <!--Stop-->
- <x-button
- v-show="item.state !== 'STOP'"
- type="warning"
- shape="circle"
- size="xsmall"
- icon="ans-icon-pause"
- disabled="true">
- </x-button>
+ <span>
+ <el-button
+ v-show="scope.row.state !== 'PAUSE'"
+ type="warning"
+ size="mini"
+ circle
+ icon="el-icon-close"
+ disabled="true">
+ </el-button>
+ </span>
<!--delete-->
- <x-button
- type="error"
- shape="circle"
- size="xsmall"
- icon="ans-icon-trash"
- :disabled="true">
- </x-button>
+ <el-button
+ type="danger"
+ circle
+ size="mini"
+ icon="el-icon-delete"
+ :disabled="true">
+ </el-button>
<!--Gantt-->
- <x-button
- type="info"
- shape="circle"
- size="xsmall"
- icon="ans-icon-gantt"
- disabled="true">
- </x-button>
+ <el-button
+ type="success"
+ circle
+ size="mini"
+ icon="el-icon-s-operation"
+ disabled="true">
+ </el-button>
</div>
- </td>
- </tr>
- </table>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
- <x-poptip
- ref="poptipDeleteAll"
- placement="bottom-start"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete(-1)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete({},-1)">{{$t('Confirm')}}</x-button>
- </div>
- <template slot="reference">
- <x-button size="xsmall" :disabled="!strDelete" style="position: absolute; bottom: -48px; left: 22px;" >{{$t('Delete')}}</x-button>
- </template>
- </x-poptip>
+ <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ :title="$t('Delete?')"
+ @onConfirm="_delete({},-1)"
+ >
+ <el-button style="position: absolute; bottom: -48px; left: 19px;" type="primary" size="mini" :disabled="!strDelete" slot="reference">{{$t('Delete')}}</el-button>
+ </el-popconfirm>
+ </el-tooltip>
</div>
</template>
<script>
@@ -337,19 +254,7 @@
*/
_rtState (code) {
let o = tasksState[code]
- return `<em class="ansfont ${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
- },
- /**
- * Close the delete layer
- */
- _closeDelete (i) {
- // close batch
- if (i < 0) {
- this.$refs['poptipDeleteAll'].doClose()
- return
- }
- // close one
- this.$refs[`poptip-delete-${i}`][0].doClose()
+ return `<em class="fa ansfont ${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
},
/**
* delete
@@ -364,11 +269,9 @@
this.deleteInstance({
processInstanceId: item.id
}).then(res => {
- this.$refs[`poptip-delete-${i}`][0].doClose()
this._onUpdate()
this.$message.success(res.msg)
}).catch(e => {
- this.$refs[`poptip-delete-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
@@ -383,6 +286,7 @@
* @param REPEAT_RUNNING
*/
_reRun (item, index) {
+ console.log(index)
this._countDownFn({
id: item.id,
executeType: 'REPEAT_RUNNING',
@@ -525,20 +429,25 @@
})
this._arrDelChange()
},
+ // _arrDelChange (v) {
+ // let arr = []
+ // this.list.forEach((item)=>{
+ // if (item.isCheck) {
+ // arr.push(item.id)
+ // }
+ // })
+ // this.strDelete = _.join(arr, ',')
+ // if (v === false) {
+ // this.checkAll = false
+ // }
+ // },
_arrDelChange (v) {
let arr = []
- this.list.forEach((item)=>{
- if (item.isCheck) {
- arr.push(item.id)
- }
- })
+ arr = _.map(v, 'id');
+ console.log(arr)
this.strDelete = _.join(arr, ',')
- if (v === false) {
- this.checkAll = false
- }
},
_batchDelete () {
- this.$refs['poptipDeleteAll'].doClose()
this.batchDeleteInstance({
processInstanceIds: this.strDelete
}).then(res => {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
index e684206..413a37a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
@@ -25,7 +25,16 @@
<m-list :process-instance-list="processInstanceList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!processInstanceList.length && total<=0">
@@ -182,7 +191,6 @@
}
},
mounted () {
- this.$modal.destroy()
// Cycle acquisition status
this.setIntervalP = setInterval(() => {
this._debounceGET('false')
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js
index 117a177..1352e24 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/_source/graphGridOption.js
@@ -14,29 +14,28 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import _ from 'lodash';
+import _ from 'lodash'
import i18n from '@/module/i18n/index.js'
const getCategory = (categoryDic, { workFlowPublishStatus, schedulePublishStatus, id }, sourceWorkFlowId) => {
- if (id === sourceWorkFlowId) return categoryDic['active']
+ if (id === sourceWorkFlowId) return categoryDic.active
switch (true) {
case workFlowPublishStatus === '0':
- return categoryDic['0'];
+ return categoryDic['0']
case workFlowPublishStatus === '1' && schedulePublishStatus === '0':
- return categoryDic['10'];
+ return categoryDic['10']
case workFlowPublishStatus === '1' && schedulePublishStatus === '1':
default:
- return categoryDic['1'];
+ return categoryDic['1']
}
}
export default function (locations, links, sourceWorkFlowId, isShowLabel) {
-
const categoryDic = {
- 'active': { color: '#2D8DF0', category: i18n.$t('KinshipStateActive')},
- '1': { color: '#00C800', category: i18n.$t('KinshipState1')},
- '0': { color: '#999999', category: i18n.$t('KinshipState0')},
- '10': { color: '#FF8F05', category: i18n.$t('KinshipState10')},
+ active: { color: '#2D8DF0', category: i18n.$t('KinshipStateActive') },
+ 1: { color: '#00C800', category: i18n.$t('KinshipState1') },
+ 0: { color: '#999999', category: i18n.$t('KinshipState0') },
+ 10: { color: '#FF8F05', category: i18n.$t('KinshipState10') }
}
const newData = _.map(locations, (item) => {
const { color, category } = getCategory(categoryDic, item, sourceWorkFlowId)
@@ -45,27 +44,27 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
emphasis: {
itemStyle: {
color
- },
+ }
},
category
}
- });
+ })
const categories = [
- { name: categoryDic.active.category},
- { name: categoryDic['1'].category},
- { name: categoryDic['0'].category},
- { name: categoryDic['10'].category},
+ { name: categoryDic.active.category },
+ { name: categoryDic['1'].category },
+ { name: categoryDic['0'].category },
+ { name: categoryDic['10'].category }
]
- let option = {
+ const option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove',
backgroundColor: '#2D303A',
padding: [8, 12],
formatter: (params) => {
- if (!params.data.name) return '';
- const { name, scheduleStartTime, scheduleEndTime, crontab, workFlowPublishStatus, schedulePublishStatus } = params.data;
+ if (!params.data.name) return ''
+ const { name, scheduleStartTime, scheduleEndTime, crontab, workFlowPublishStatus, schedulePublishStatus } = params.data
const str = `
工作流名字：${name}<br/>
调度开始时间：${scheduleStartTime}<br/>
@@ -74,7 +73,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
工作流发布状态：${workFlowPublishStatus}<br/>
调度发布状态：${schedulePublishStatus}<br/>
`
- return str;
+ return str
},
color: '#2D303A',
textStyle: {
@@ -85,16 +84,16 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
lineHeight: 12,
align: 'left',
padding: [4, 4, 4, 4]
- },
+ }
}
- },
+ }
},
color: [categoryDic.active.color, categoryDic['1'].color, categoryDic['0'].color, categoryDic['10'].color],
legend: [{
orient: 'horizontal',
top: 6,
left: 6,
- data: categories,
+ data: categories
}],
series: [{
type: 'graph',
@@ -111,9 +110,9 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
show: isShowLabel,
position: 'inside',
formatter: (params) => {
- if (!params.data.name) return '';
+ if (!params.data.name) return ''
const str = params.data.name.split('_').map(item => `{a|${item}\n}`).join('')
- return str;
+ return str
},
color: '#222222',
textStyle: {
@@ -124,7 +123,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
lineHeight: 12,
align: 'left',
padding: [4, 4, 4, 4]
- },
+ }
}
}
},
@@ -139,7 +138,7 @@ export default function (locations, links, sourceWorkFlowId, isShowLabel) {
color: '#999999'
}
}]
- };
+ }
return option
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue
index 2472a69..ebfb74a 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/kinship/index.vue
@@ -18,33 +18,33 @@
<div class="home-main index-model">
<div class="project-kinship-content">
<div class="search-bar">
- <x-select filterable clearable
+ <el-select filterable clearable
:placeholder="$t('Process Name')"
- @on-change="onChange"
+ @change="onChange"
:style="inputFocusStyle"
v-tooltip="tooltipOption(currentItemName)"
size="small">
- <x-option
+ <el-option
v-for="work in workList"
:key="work.id"
:value="work.id"
:label="work.name"
v-tooltip="tooltipOption(work.name)"
>
- </x-option>
- </x-select>
- <x-button type="primary"
- icon="ans-icon-dot-circle"
- size="small"
+ </el-option>
+ </el-select>
+ <el-button type="primary"
+ icon="fa-dot-circle-o"
+ size="mini"
v-tooltip.small.top.start="$t('Reset')"
@click="reset"
- ></x-button>
- <x-button type="ghost"
- icon="ans-icon-eye"
- size="small"
+ ></el-button>
+ <el-button
+ icon="el-icon-view"
+ size="mini"
v-tooltip.small.top="$t('Dag label display control')"
@click="changeLabel"
- ></x-button>
+ ></el-button>
</div>
<graph-grid v-if="!isLoading && !!locations.length" :isShowLabel="isShowLabel"></graph-grid>
<template v-if="!isLoading && !locations.length">
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
index b5a2c52..8398076 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/createProject.vue
@@ -21,24 +21,24 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Project Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="projectName"
maxlength="60"
- :placeholder="$t('Please enter name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter name')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="textarea"
v-model="description"
- :placeholder="$t('Please enter description')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter description')">
+ </el-input>
</template>
</m-list-box-f>
</div>
@@ -83,8 +83,12 @@
this.$refs['popup'].spinnerLoading = true
this.store.dispatch(`projects/${this.item ? 'updateProjects' : 'createProjects'}`, param).then(res => {
- this.$emit('onUpdate')
- this.$message.success(res.msg)
+ this.$emit('_onUpdate')
+ this.$message({
+ message: res.msg,
+ type: 'success',
+ offset: 70
+ });
setTimeout(() => {
this.$refs['popup'].spinnerLoading = false
}, 800)
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
index 8acee8e..72c0d82 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/_source/list.vue
@@ -17,99 +17,52 @@
<template>
<div class="list-model">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th scope="col">
- <span>{{$t('#')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Project Name')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Owned Users')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Process Define Count')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Process Instance Running Count')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Description')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Create Time')}}</span>
- </th>
- <th scope="col">
- <span>{{$t('Update Time')}}</span>
- </th>
- <th scope="col" width="80">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="$index">
- <td>
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td>
- <span>
- <a href="javascript:" @click="_switchProjects(item)" class="links">{{item.name}}</a>
- </span>
- </td>
- <td>
- <span>{{item.userName || '-'}}</span>
- </td>
- <td>
- <span>{{item.defCount}}</span>
- </td>
- <td>
- <span>{{item.instRunningCount}}</span>
- </td>
- <td>
- <span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.createTime">{{item.createTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.updateTime">{{item.updateTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <x-button
- type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Edit')"
- @click="_edit(item)"
- icon="ans-icon-edit">
- </x-button>
- <x-poptip
- :ref="'poptip-' + $index"
- placement="bottom-end"
- width="90">
- <p>{{$t('Delete?')}}</p>
- <div style="text-align: right; margin: 0;padding-top: 4px;">
- <x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button>
- <x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column :label="$t('Project Name')">
+ <template slot-scope="scope">
+ <el-popover trigger="hover" placement="top">
+ <p>{{ scope.row.name }}</p>
+ <div slot="reference" class="name-wrapper">
+ <a href="javascript:" class="links" @click="_switchProjects(scope.row)">{{ scope.row.name }}</a>
</div>
- <template slot="reference">
- <x-button
- type="error"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('delete')"
- icon="ans-icon-trash">
- </x-button>
- </template>
- </x-poptip>
- </td>
- </tr>
- </table>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column prop="userName" :label="$t('Owned Users')"></el-table-column>
+ <el-table-column prop="defCount" :label="$t('Process Define Count')"></el-table-column>
+ <el-table-column prop="instRunningCount" :label="$t('Process Instance Running Count')"></el-table-column>
+ <el-table-column prop="description" :label="$t('Description')" width="200"></el-table-column>
+ <el-table-column :label="$t('Create Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.createTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Update Time')" min-width="120">
+ <template slot-scope="scope">
+ <span>{{scope.row.updateTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Operation')" width="150">
+ <template slot-scope="scope">
+ <el-tooltip :content="$t('Edit')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_edit(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ <el-tooltip :content="$t('delete')" placement="top" :enterable="false">
+ <el-popconfirm
+ :confirmButtonText="$t('Confirm')"
+ :cancelButtonText="$t('Cancel')"
+ icon="el-icon-info"
+ iconColor="red"
+ :title="$t('Delete?')"
+ @onConfirm="_delete(scope.row,scope.row.id)"
+ >
+ <el-button type="danger" size="mini" icon="el-icon-delete" circle slot="reference"></el-button>
+ </el-popconfirm>
+ </el-tooltip>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
</div>
</template>
@@ -139,9 +92,6 @@
localStore.setItem('projectId', `${item.id}`)
this.$router.push({ path: `/projects/index` })
},
- _closeDelete (i) {
- this.$refs[`poptip-${i}`][0].doClose()
- },
/**
* Delete Project
* @param item Current record
@@ -151,11 +101,9 @@
this.deleteProjects({
projectId: item.id
}).then(res => {
- this.$refs[`poptip-${i}`][0].doClose()
this.$emit('on-update')
this.$message.success(res.msg)
}).catch(e => {
- this.$refs[`poptip-${i}`][0].doClose()
this.$message.error(e.msg || '')
})
},
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
index d9828c0..db92e46 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/list/index.vue
@@ -19,7 +19,12 @@
<template slot="conditions">
<m-conditions @on-conditions="_onConditions">
<template slot="button-group">
- <x-button type="ghost" size="small" @click="_create('')">{{$t('Create Project')}}</x-button>
+ <el-button size="mini" @click="_create('')">{{$t('Create Project')}}</el-button>
+ <el-dialog
+ :visible.sync="createProjectDialog"
+ width="40%">
+ <m-create-project :item="item" @_onUpdate="_onUpdate"></m-create-project>
+ </el-dialog>
</template>
</m-conditions>
</template>
@@ -27,7 +32,16 @@
<template v-if="projectsList.length || total>0">
<m-list :projects-list="projectsList" @on-update="_onUpdate" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"></m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!projectsList.length && total<=0">
@@ -60,7 +74,9 @@
pageSize: 10,
pageNo: 1,
searchVal: ''
- }
+ },
+ createProjectDialog: false,
+ item: {}
}
},
mixins: [listUrlParamHandle],
@@ -82,29 +98,11 @@
this.searchParams.pageSize = val
},
_create (item) {
- let self = this
- let modal = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mCreateProject, {
- on: {
- onUpdate () {
- self._debounceGET()
- modal.remove()
- }
- },
- props: {
- item: item
- }
- })
- }
- })
+ this.createProjectDialog = true
+ this.item = item
},
_onUpdate () {
+ this.createProjectDialog = false
this._debounceGET()
},
_getList (flag) {
@@ -133,7 +131,6 @@
created () {
},
mounted () {
- this.$modal.destroy()
},
components: { mListConstruction, mSpin, mConditions, mList, mCreateProject, mNoData }
}
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
index 9ad09380..596afcf 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
@@ -17,104 +17,66 @@
<template>
<div class="list-model">
<div class="table-box">
- <table class="fixed">
- <tr>
- <th scope="col" style="min-width: 50px">
- <span>{{$t('#')}}</span>
- </th>
- <th scope="col" style="min-width: 200px;max-width: 300px;">
- <span>{{$t('Name')}}</span>
- </th>
- <th scope="col" style="min-width: 200px;max-width: 300px;">
- <span>{{$t('Process Instance')}}</span>
- </th>
- <th scope="col" style="min-width: 60px">
- <span>{{$t('Executor')}}</span>
- </th>
- <th scope="col" style="min-width: 70px">
- <span style="margin-left: 5px">{{$t('Node Type')}}</span>
- </th>
- <th scope="col" style="min-width: 30px">
- <span>{{$t('State')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Submit Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('Start Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('End Time')}}</span>
- </th>
- <th scope="col" style="min-width: 130px">
- <span>{{$t('host')}}</span>
- </th>
- <th scope="col" style="min-width: 70px">
- <span>{{$t('Duration')}}(s)</span>
- </th>
- <th scope="col" style="min-width: 60px">
- <div style="width: 50px">
- <span>{{$t('Retry Count')}}</span>
- </div>
- </th>
- <th scope="col" style="min-width: 60px">
- <span>{{$t('Operation')}}</span>
- </th>
- </tr>
- <tr v-for="(item, $index) in list" :key="item.id">
- <td>
- <span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span>
- </td>
- <td style="min-width: 200px;max-width: 300px;padding-right: 10px;">
- <span class="ellipsis" :title="item.name">{{item.name}}</span>
- </td>
- <td style="min-width: 200px;max-width: 300px;padding-right: 10px;"><a href="javascript:" class="links" @click="_go(item)"><span class="ellipsis" :title="item.processInstanceName">{{item.processInstanceName}}</span></a></td>
- <td>
- <span v-if="item.executorName">{{item.executorName}}</span>
- <span v-else>-</span>
- </td>
- <td><span style="margin-left: 5px">{{item.taskType}}</span></td>
- <td><span v-html="_rtState(item.state)" style="cursor: pointer;"></span></td>
- <td>
- <span v-if="item.submitTime">{{item.submitTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td>
- <span v-if="item.startTime">{{item.startTime | formatDate}}</span>
+ <el-table :data="list" size="mini" style="width: 100%">
+ <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
+ <el-table-column prop="name" :label="$t('Name')"></el-table-column>
+ <el-table-column :label="$t('Process Instance')" min-width="200">
+ <template slot-scope="scope">
+ <el-popover trigger="hover" placement="top">
+ <p>{{ scope.row.processInstanceName }}</p>
+ <div slot="reference" class="name-wrapper">
+ <a href="javascript:" class="links" @click="_go(scope.row)"><span class="ellipsis" :title="scope.row.processInstanceName">{{scope.row.processInstanceName}}</span></a>
+ </div>
+ </el-popover>
+ </template>
+ </el-table-column>
+ <el-table-column prop="executorName" :label="$t('Executor')"></el-table-column>
+ <el-table-column prop="taskType" :label="$t('Node Type')"></el-table-column>
+ <el-table-column :label="$t('State')" width="50">
+ <template slot-scope="scope">
+ <span v-html="_rtState(scope.row.state)" style="cursor: pointer;"></span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Submit Time')" width="135">
+ <template slot-scope="scope">
+ <span v-if="scope.row.scheduleTime">{{scope.row.scheduleTime | formatDate}}</span>
<span v-else>-</span>
- </td>
- <td>
- <span v-if="item.endTime">{{item.endTime | formatDate}}</span>
- <span v-else>-</span>
- </td>
- <td><span>{{item.host || '-'}}</span></td>
- <td><span>{{item.duration}}</span></td>
- <td><span>{{item.retryTimes}}</span></td>
- <td>
- <x-button
- v-if="item.state === 'FAILURE' || item.state === 'NEED_FAULT_TOLERANCE' || item.state === 'KILL'"
- type="error"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('Force success')"
- icon="ans-icon-success-solid"
- @click="_forceSuccess(item)">
- </x-button>
- <x-button
- type="info"
- shape="circle"
- size="xsmall"
- data-toggle="tooltip"
- :title="$t('View log')"
- icon="ans-icon-log"
- :disabled="item.taskType==='SUB_PROCESS'? true: false"
- @click="_refreshLog(item)">
- </x-button>
- </td>
- </tr>
- </table>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('Start Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.startTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column :label="$t('End Time')" width="135">
+ <template slot-scope="scope">
+ <span>{{scope.row.endTime | formatDate}}</span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="host" :label="$t('host')" width="150"></el-table-column>
+ <el-table-column prop="duration" :label="$t('Duration')"></el-table-column>
+ <el-table-column prop="retryTimes" :label="$t('Retry Count')"></el-table-column>
+ <el-table-column :label="$t('Operation')" width="80" fixed="right">
+ <template slot-scope="scope">
+ <div>
+ <el-tooltip :content="$t('Force success')" placement="top" :enterable="false">
+ <span>
+ <el-button type="primary" size="mini" icon="el-icon-success" :disabled="!(scope.row.state === 'FAILURE' || scope.row.state === 'NEED_FAULT_TOLERANCE' || scope.row.state === 'KILL')" @click="_forceSuccess(scope.row)" circle></el-button>
+ </span>
+ </el-tooltip>
+ <el-tooltip :content="$t('View log')" placement="top" :enterable="false">
+ <span><el-button type="primary" size="mini" :disabled="scope.row.taskType==='SUB_PROCESS'? true: false" icon="el-icon-tickets" @click="_refreshLog(scope.row)" circle></el-button></span>
+ </el-tooltip>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
</div>
+ <el-dialog
+ :visible.sync="logDialog"
+ width="30%">
+ <m-log :item="item" :source="source" :logId="logId" @ok="ok" @close="close"></m-log>
+ </el-dialog>
</div>
</template>
<script>
@@ -129,7 +91,11 @@
return {
list: [],
isAuth: Permissions.getAuth(),
- backfillItem: {}
+ backfillItem: {},
+ logDialog: false,
+ item: {},
+ source: '',
+ logId: null
}
},
props: {
@@ -144,31 +110,17 @@
return `<em class="${o.icoUnicode} ${o.isSpin ? 'as as-spin' : ''}" style="color:${o.color}" data-toggle="tooltip" data-container="body" title="${o.desc}"></em>`
},
_refreshLog (item) {
- let self = this
- let instance = this.$modal.dialog({
- closable: false,
- showMask: true,
- escClose: true,
- className: 'v-modal-custom',
- transitionName: 'opacityp',
- render (h) {
- return h(mLog, {
- on: {
- ok () {
- },
- close () {
- instance.remove()
- }
- },
- props: {
- self: self,
- source: 'list',
- logId: item.id
- }
- })
- }
- })
+ this.item = item
+ this.source = 'list'
+ this.logId = item.id
+ this.logDialog = true
},
+ ok () {},
+
+ close () {
+ this.logDialog = false
+ },
+
_forceSuccess (item) {
this.forceTaskSuccess({taskInstanceId: item.id}).then(res => {
if (res.code === 0) {
@@ -197,6 +149,6 @@
mounted () {
this.list = this.taskInstanceList
},
- components: { }
+ components: { mLog}
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
index 1922f9d..00c7b5e 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
@@ -26,7 +26,16 @@
<m-list :task-instance-list="taskInstanceList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize">
</m-list>
<div class="page-box">
- <x-page :current="parseInt(searchParams.pageNo)" :total="total" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page>
+ <el-pagination
+ background
+ @current-change="_page"
+ @size-change="_pageSize"
+ :page-size="searchParams.pageSize"
+ :current-page.sync="searchParams.pageNo"
+ :page-sizes="[10, 30, 50]"
+ layout="sizes, prev, pager, next, jumper"
+ :total="total">
+ </el-pagination>
</div>
</template>
<template v-if="!taskInstanceList.length">
@@ -147,7 +156,6 @@
created () {
},
mounted () {
- this.$modal.destroy()
// Cycle acquisition status
this.setIntervalP = setInterval(() => {
this._debounceGET('false')
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue
index 3e0215c..afed416 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/index.vue
@@ -26,7 +26,6 @@
name: 'resource-index',
components: { mSecondaryMenu },
mounted() {
- this.$modal.destroy()
},
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue
index e47aa57..3a89a53 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/index.vue
@@ -21,7 +21,6 @@
export default {
name: 'file-manage-index',
mounted() {
- this.$modal.destroy()
},
}
</script>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
index fac37a4..9477373 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/create/index.vue
@@ -21,39 +21,39 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="fileName"
maxlength="60"
style="width: 300px;"
- :placeholder="$t('Please enter name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter name')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('File Format')}}</template>
<template slot="content">
- <x-select v-model="suffix" style="width: 100px;" @on-change="_onChange">
- <x-option
+ <el-select v-model="suffix" style="width: 100px;" size="small" @change="_onChange">
+ <el-option
v-for="city in fileTypeList"
:key="city"
:value="city"
:label="city">
- </x-option>
- </x-select>
+ </el-option>
+ </el-select>
</template>
</m-list-box-f>
<m-list-box-f>
<template slot="name">{{$t('Description')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="textarea"
v-model="description"
style="width: 430px;"
- :placeholder="$t('Please enter description')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter description')">
+ </el-input>
</template>
</m-list-box-f>
<m-list-box-f>
@@ -66,8 +66,8 @@
<template slot="name"> </template>
<template slot="content">
<div class="submit">
- <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button>
- <x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button>
+ <el-button type="primary" size="small" round :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </el-button>
+ <el-button type="text" size="small" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </el-button>
</div>
</template>
</m-list-box-f>
@@ -172,7 +172,6 @@
created () {
},
mounted () {
- this.$modal.destroy()
this._handlerEditor()
},
destroyed () {
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue
index be53033..7982f6b 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/resource/pages/file/pages/createFolder/index.vue
@@ -21,47 +21,34 @@
<m-list-box-f>
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template>
<template slot="content">
- <x-input
+ <el-input
type="input"
v-model="name"
maxlength="60"
style="width: 300px;"
- :placeholder="$t('Please enter name')"
- autocomplete="off">
- </x-input>
+ size="small"
+ :placeholder="$t('Please enter name')">
+ </el-input>
</template>
</m-list-box-f>
- <!-- <m-list-box-f>
- <template slot="name"><strong>*</strong>{{$t('Folder Format')}}</template>
- <template slot="content">
- <x-select v-model="type" style="width: 100px;">
- <x-option
- v-for="item in folderList"
- :key="item.value"
- :value="item.value"
- :label="item.label">
- </x-option>
... 7533 lines suppressed ...