github
/
DolphinScheduler
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #2600 from break60/dev 

Workflow definition and task instance page add scroll
pull/2/head
xingchun-chen 5 years ago committed by GitHub
parent
0456ea63e3 50e4b23e1f
commit
99f2a2bfd7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 140 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
  2. 70
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
  3. 32
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
  4. 30
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
  5. 62
      dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue

24
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/_source/list.vue
Unescape View File

@ -19,34 +19,36 @@
<div class="table-box"> <div class="table-box">
<table class="fixed"> <table class="fixed">
<tr> <tr>
<th scope="col" width="50"> <th scope="col" style="min-width: 50px">
<x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox> <x-checkbox @on-change="_topCheckBoxClick" v-model="checkAll"></x-checkbox>
</th> </th>
<th scope="col" width="40"> <th scope="col" style="min-width: 40px">
<span>{{$t('#')}}</span> <span>{{$t('#')}}</span>
</th> </th>
<th scope="col" width="200"> <th scope="col" style="min-width: 200px">
<span>{{$t('Process Name')}}</span> <span>{{$t('Process Name')}}</span>
</th> </th>
<th scope="col" width="50"> <th scope="col" style="min-width: 50px">
<span>{{$t('State')}}</span> <span>{{$t('State')}}</span>
</th> </th>
<th scope="col" width="130"> <th scope="col" style="min-width: 130px">
<span>{{$t('Create Time')}}</span> <span>{{$t('Create Time')}}</span>
</th> </th>
<th scope="col" width="130"> <th scope="col" style="min-width: 130px">
<span>{{$t('Update Time')}}</span> <span>{{$t('Update Time')}}</span>
</th> </th>
<th scope="col" width="150"> <th scope="col" style="min-width: 150px">
<span>{{$t('Description')}}</span> <span>{{$t('Description')}}</span>
</th> </th>
<th scope="col" width="80"> <th scope="col" style="min-width: 70px">
<span>{{$t('Modify User')}}</span> <span>{{$t('Modify User')}}</span>
</th> </th>
<th scope="col" width="80"> <th scope="col" style="min-width: 70px">
<span>{{$t('Timing state')}}</span> <div style="width: 80px">
<span>{{$t('Timing state')}}</span>
</div>
</th> </th>
<th scope="col" width="300"> <th scope="col" style="min-width: 300px">
<span>{{$t('Operation')}}</span> <span>{{$t('Operation')}}</span>
</th> </th>
</tr> </tr>

70
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/definition/pages/list/index.vue
Unescape View File

@ -15,29 +15,30 @@
* limitations under the License. * limitations under the License.
*/ */
<template> <template>
<m-list-construction :title="$t('Process definition')"> <div class="wrap-definition">
<template slot="conditions"> <m-list-construction :title="$t('Process definition')">
<m-conditions @on-conditions="_onConditions"> <template slot="conditions">
<template slot="button-group"> <m-conditions @on-conditions="_onConditions">
<x-button type="ghost" size="small" @click="() => this.$router.push({name: 'definition-create'})">{{$t('Create process')}}</x-button> <template slot="button-group">
<x-button type="ghost" size="small" @click="_uploading">{{$t('Import process')}}</x-button> <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>
</template> </template>
</m-conditions> </m-conditions>
</template>
<template slot="content">
<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>
</div>
</template> </template>
<template v-if="!processListP.length && total<=0"> <template slot="content">
<m-no-data></m-no-data> <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>
</div>
</template>
<template v-if="!processListP.length && total<=0">
<m-no-data></m-no-data>
</template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
</template> </template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin> </m-list-construction>
</template> </div>
</m-list-construction>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
@ -146,3 +147,30 @@
} }
</script> </script>
<style lang="scss" rel="stylesheet/scss">
.wrap-definition {
.table-box {
overflow-y: scroll;
}
.table-box {
.fixed {
table-layout: auto;
tr {
th:last-child,td:last-child {
background: inherit;
width: 300px;
height: 40px;
line-height: 40px;
border-left:1px solid #ecf3ff;
position: absolute;
right: 0;
z-index: 2;
}
th:nth-last-child(2) {
padding-right: 330px;
}
}
}
}
}
</style>

32
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/instance/pages/list/index.vue
Unescape View File

@ -16,24 +16,24 @@
*/ */
<template> <template>
<div class="wrap-table"> <div class="wrap-table">
<m-list-construction :title="$t('Process Instance')"> <m-list-construction :title="$t('Process Instance')">
<template slot="conditions"> <template slot="conditions">
<m-instance-conditions @on-query="_onQuery"></m-instance-conditions> <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
</template>
<template slot="content">
<template v-if="processInstanceList.length || total>0">
<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>
</div>
</template> </template>
<template v-if="!processInstanceList.length && total<=0"> <template slot="content">
<m-no-data></m-no-data> <template v-if="processInstanceList.length || total>0">
<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>
</div>
</template>
<template v-if="!processInstanceList.length && total<=0">
<m-no-data></m-no-data>
</template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
</template> </template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin> </m-list-construction>
</template>
</m-list-construction>
</div> </div>
</template> </template>
<script> <script>

30
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/_source/list.vue
Unescape View File

@ -19,43 +19,45 @@
<div class="table-box"> <div class="table-box">
<table class="fixed"> <table class="fixed">
<tr> <tr>
<th scope="col"> <th scope="col" style="min-width: 50px">
<span>{{$t('#')}}</span> <span>{{$t('#')}}</span>
</th> </th>
<th scope="col"> <th scope="col" style="min-width: 250px">
<span>{{$t('Name')}}</span> <span>{{$t('Name')}}</span>
</th> </th>
<th scope="col"> <th scope="col" style="min-width: 250px">
<span>{{$t('Process Instance')}}</span> <span>{{$t('Process Instance')}}</span>
</th> </th>
<th scope="col" width="70"> <th scope="col" style="min-width: 60px">
<span>{{$t('Executor')}}</span> <span>{{$t('Executor')}}</span>
</th> </th>
<th scope="col" width="90"> <th scope="col" style="min-width: 70px">
<span>{{$t('Node Type')}}</span> <span>{{$t('Node Type')}}</span>
</th> </th>
<th scope="col" width="40"> <th scope="col" style="min-width: 30px">
<span>{{$t('State')}}</span> <span>{{$t('State')}}</span>
</th> </th>
<th scope="col" width="140"> <th scope="col" style="min-width: 130px">
<span>{{$t('Submit Time')}}</span> <span>{{$t('Submit Time')}}</span>
</th> </th>
<th scope="col" width="140"> <th scope="col" style="min-width: 130px">
<span>{{$t('Start Time')}}</span> <span>{{$t('Start Time')}}</span>
</th> </th>
<th scope="col" width="125"> <th scope="col" style="min-width: 130px">
<span>{{$t('End Time')}}</span> <span>{{$t('End Time')}}</span>
</th> </th>
<th scope="col" width="130"> <th scope="col" style="min-width: 130px">
<span>{{$t('host')}}</span> <span>{{$t('host')}}</span>
</th> </th>
<th scope="col" width="70"> <th scope="col" style="min-width: 70px">
<span>{{$t('Duration')}}(s)</span> <span>{{$t('Duration')}}(s)</span>
</th> </th>
<th scope="col" width="84"> <th scope="col" style="min-width: 60px">
<span>{{$t('Retry Count')}}</span> <div style="width: 50px">
<span>{{$t('Retry Count')}}</span>
</div>
</th> </th>
<th scope="col" width="50"> <th scope="col" style="min-width: 50px">
<span>{{$t('Operation')}}</span> <span>{{$t('Operation')}}</span>
</th> </th>
</tr> </tr>

62
dolphinscheduler-ui/src/js/conf/home/pages/projects/pages/taskInstance/index.vue
Unescape View File

@ -15,24 +15,26 @@
* limitations under the License. * limitations under the License.
*/ */
<template> <template>
<m-list-construction :title="$t('Task Instance')"> <div class="wrap-taskInstance">
<template slot="conditions"> <m-list-construction :title="$t('Task Instance')">
<m-instance-conditions @on-query="_onQuery"></m-instance-conditions> <template slot="conditions">
</template> <m-instance-conditions @on-query="_onQuery"></m-instance-conditions>
<template slot="content">
<template v-if="taskInstanceList.length">
<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>
</div>
</template> </template>
<template v-if="!taskInstanceList.length"> <template slot="content">
<m-no-data></m-no-data> <template v-if="taskInstanceList.length">
<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>
</div>
</template>
<template v-if="!taskInstanceList.length">
<m-no-data></m-no-data>
</template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin>
</template> </template>
<m-spin :is-spin="isLoading" :is-left="isLeft"></m-spin> </m-list-construction>
</template> </div>
</m-list-construction>
</template> </template>
<script> <script>
import _ from 'lodash' import _ from 'lodash'
@ -157,3 +159,31 @@
components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData } components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData }
} }
</script> </script>
<style lang="scss" rel="stylesheet/scss">
.wrap-taskInstance {
.table-box {
overflow-y: scroll;
}
.table-box {
.fixed {
table-layout: auto;
tr {
th:last-child,td:last-child {
background: inherit;
width: 50px;
height: 40px;
line-height: 40px;
border-left:1px solid #ecf3ff;
position: absolute;
right: 0;
z-index: 2;
}
th:nth-last-child(2) {
padding-right: 80px;
}
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save