millionfor
5 years ago
committed by
GitHub
29 changed files with 458 additions and 398 deletions
@ -0,0 +1,141 @@
|
||||
<template> |
||||
<m-conditions> |
||||
<template slot="search-group"> |
||||
<div class="list"> |
||||
<x-button type="ghost" size="small" @click="_ckQuery" icon="fa fa-search"></x-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')"> |
||||
<i slot="suffix" |
||||
@click.stop="_dateEmpty()" |
||||
class="ans-icon-fail-solid" |
||||
v-show="value" |
||||
style="font-size: 13px;cursor: pointer;margin-top: 1px;"> |
||||
</i> |
||||
</x-input> |
||||
</x-datepicker> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="searchParams.destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="searchParams.sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-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 |
||||
v-for="city in stateList" |
||||
:key="city.label" |
||||
:value="city.code" |
||||
:label="city.label"> |
||||
</x-option> |
||||
</x-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> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="searchParams.taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input> |
||||
</div> |
||||
</template> |
||||
</m-conditions> |
||||
</template> |
||||
<script> |
||||
import _ from 'lodash' |
||||
import mConditions from '@/module/components/conditions/conditions' |
||||
export default { |
||||
name: 'conditions', |
||||
data () { |
||||
return { |
||||
stateList: [ |
||||
{ |
||||
label: `${this.$t('none')}`, |
||||
code: `` |
||||
}, |
||||
{ |
||||
label: `${this.$t('success')}`, |
||||
code: `成功` |
||||
}, |
||||
{ |
||||
label: `${this.$t('waiting')}`, |
||||
code: `等待` |
||||
}, |
||||
{ |
||||
label: `${this.$t('execution')}`, |
||||
code: `执行中` |
||||
}, |
||||
{ |
||||
label: `${this.$t('finish')}`, |
||||
code: `完成` |
||||
}, { |
||||
label: `${this.$t('failed')}`, |
||||
code: `失败` |
||||
} |
||||
], |
||||
searchParams: { |
||||
taskName: '', |
||||
state: '', |
||||
sourceTable: '', |
||||
destTable: '', |
||||
taskDate: '', |
||||
startDate: '', |
||||
endDate: '' |
||||
} |
||||
} |
||||
}, |
||||
props: {}, |
||||
methods: { |
||||
_ckQuery () { |
||||
this.$emit('on-query', this.searchParams) |
||||
}, |
||||
/** |
||||
* change times |
||||
*/ |
||||
_onChangeStartStop (val) { |
||||
this.searchParams.startDate = val[0] |
||||
this.searchParams.endDate = val[1] |
||||
}, |
||||
/** |
||||
* change state |
||||
*/ |
||||
_onChangeState (val) { |
||||
this.searchParams.state = val.value |
||||
}, |
||||
/** |
||||
* empty date |
||||
*/ |
||||
_dateEmpty () { |
||||
this.searchParams.startDate = '' |
||||
this.searchParams.endDate = '' |
||||
this.$refs.datepicker.empty() |
||||
}, |
||||
_onChangeDate (val) { |
||||
this.searchParams.taskDate = val.replace(/-/g, '') |
||||
} |
||||
}, |
||||
created () { |
||||
// Routing parameter merging |
||||
if (!_.isEmpty(this.$route.query)) { |
||||
this.searchParams = _.assign(this.searchParams, this.$route.query) |
||||
} |
||||
}, |
||||
mounted () { |
||||
}, |
||||
components: { mConditions } |
||||
} |
||||
</script> |
||||
@ -0,0 +1,18 @@
|
||||
<template> |
||||
<m-list :config="config"></m-list> |
||||
</template> |
||||
<script> |
||||
import mList from '@/conf/home/pages/projects/pages/_source/taskRecordList' |
||||
export default { |
||||
name: 'history-task-record', |
||||
data () { |
||||
return { |
||||
config: { |
||||
title: `${this.$t('History task record')}`, |
||||
apiFn: 'getHistoryTaskRecordList' |
||||
} |
||||
} |
||||
}, |
||||
components: { mList } |
||||
} |
||||
</script> |
||||
@ -1,8 +1,135 @@
|
||||
<template> |
||||
<router-view></router-view> |
||||
<div class="main-layout-box"> |
||||
<m-secondary-menu :type="'projects'"></m-secondary-menu> |
||||
<m-list-construction :title="$t('Task Instance')"> |
||||
<template slot="conditions"> |
||||
<m-instance-conditions @on-query="_onQuery"></m-instance-conditions> |
||||
</template> |
||||
<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"></x-page> |
||||
</div> |
||||
</template> |
||||
<template v-if="!taskInstanceList.length"> |
||||
<m-no-data></m-no-data> |
||||
</template> |
||||
<m-spin :is-spin="isLoading"></m-spin> |
||||
</template> |
||||
</m-list-construction> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import _ from 'lodash' |
||||
import { mapActions } from 'vuex' |
||||
import mList from './_source/list' |
||||
import mSpin from '@/module/components/spin/spin' |
||||
import { setUrlParams } from '@/module/util/routerUtil' |
||||
import mNoData from '@/module/components/noData/noData' |
||||
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu' |
||||
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||
import mInstanceConditions from '@/conf/home/pages/projects/pages/_source/instanceConditions' |
||||
|
||||
export default { |
||||
name: 'task-instance-index' |
||||
name: 'task-instance-list-index', |
||||
data () { |
||||
return { |
||||
isLoading: true, |
||||
total: null, |
||||
taskInstanceList: [], |
||||
searchParams: { |
||||
// page size |
||||
pageSize: 10, |
||||
// page index |
||||
pageNo: 1, |
||||
// Query name |
||||
searchVal: '', |
||||
// Process instance id |
||||
processInstanceId: '', |
||||
// host |
||||
host: '', |
||||
// state |
||||
stateType: '', |
||||
// start date |
||||
startDate: '', |
||||
// end date |
||||
endDate: '' |
||||
} |
||||
} |
||||
}, |
||||
props: {}, |
||||
methods: { |
||||
...mapActions('dag', ['getTaskInstanceList']), |
||||
/** |
||||
* click query |
||||
*/ |
||||
_onQuery (o) { |
||||
this.searchParams = _.assign(this.searchParams, o) |
||||
if (this.searchParams.taskName) { |
||||
this.searchParams.taskName = '' |
||||
} |
||||
setUrlParams(this.searchParams) |
||||
this._debounceGET() |
||||
}, |
||||
_page (val) { |
||||
this.searchParams.pageNo = val |
||||
setUrlParams(this.searchParams) |
||||
this._debounceGET() |
||||
}, |
||||
/** |
||||
* get list data |
||||
*/ |
||||
_getTaskInstanceList (flag) { |
||||
this.isLoading = !flag |
||||
this.getTaskInstanceList(this.searchParams).then(res => { |
||||
this.taskInstanceList = [] |
||||
this.taskInstanceList = res.totalList |
||||
this.total = res.total |
||||
this.isLoading = false |
||||
}).catch(e => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
/** |
||||
* Anti-shake request interface |
||||
* @desc Prevent function from being called multiple times |
||||
*/ |
||||
_debounceGET: _.debounce(function (flag) { |
||||
this._getTaskInstanceList(flag) |
||||
}, 100, { |
||||
'leading': false, |
||||
'trailing': true |
||||
}) |
||||
}, |
||||
watch: { |
||||
// router |
||||
'$route' (a) { |
||||
// url no params get instance list |
||||
if (_.isEmpty(a.query)) { |
||||
this.searchParams.pageNo = 1 |
||||
this.searchParams.processInstanceId = '' |
||||
} else { |
||||
this.searchParams.pageNo = a.query.pageNo || 1 |
||||
} |
||||
}, |
||||
'searchParams': { |
||||
deep: true, |
||||
handler () { |
||||
this._debounceGET() |
||||
} |
||||
} |
||||
}, |
||||
created () { |
||||
// Routing parameter merging |
||||
if (!_.isEmpty(this.$route.query)) { |
||||
this.searchParams = _.assign(this.searchParams, this.$route.query) |
||||
} |
||||
}, |
||||
mounted () { |
||||
this._debounceGET() |
||||
}, |
||||
components: { mList, mInstanceConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData } |
||||
} |
||||
</script> |
||||
</script> |
||||
@ -1,8 +1,18 @@
|
||||
<template> |
||||
<router-view></router-view> |
||||
<m-list :config="config"></m-list> |
||||
</template> |
||||
<script> |
||||
import mList from '@/conf/home/pages/projects/pages/_source/taskRecordList' |
||||
export default { |
||||
name: 'task-record-index' |
||||
name: 'task-record', |
||||
data () { |
||||
return { |
||||
config: { |
||||
title: `${this.$t('Task record')}`, |
||||
apiFn: 'getTaskRecordList' |
||||
} |
||||
} |
||||
}, |
||||
components: { mList } |
||||
} |
||||
</script> |
||||
|
||||
@ -1,195 +0,0 @@
|
||||
<template> |
||||
<div class="main-layout-box"> |
||||
<m-secondary-menu :type="'projects'"></m-secondary-menu> |
||||
<m-list-construction :title="$t('Task record')"> |
||||
<template slot="conditions"> |
||||
<m-conditions> |
||||
<template slot="search-group"> |
||||
<div class="list"> |
||||
<x-button type="ghost" size="small" @click="_ckQuery" icon="fa fa-search"></x-button> |
||||
</div> |
||||
<div class="list"> |
||||
<x-datepicker |
||||
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')"> |
||||
<i slot="suffix" |
||||
@click.stop="_dateEmpty()" |
||||
class="ans-icon-fail-solid" |
||||
v-show="value" |
||||
style="font-size: 13px;cursor: pointer;margin-top: 1px;"> |
||||
</i> |
||||
</x-input> |
||||
</x-datepicker> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="destTable" style="width: 120px;" size="small" :placeholder="$t('Target Table')"></x-input> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="sourceTable" style="width: 120px;" size="small" :placeholder="$t('Source Table')"></x-input> |
||||
</div> |
||||
<div class="list"> |
||||
<x-select style="width: 90px;" @on-change="_onChangeState"> |
||||
<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 |
||||
v-for="city in stateList" |
||||
:key="city.label" |
||||
:value="city.code" |
||||
:label="city.label"> |
||||
</x-option> |
||||
</x-select> |
||||
</div> |
||||
<div class="list"> |
||||
<x-datepicker |
||||
@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> |
||||
</div> |
||||
<div class="list"> |
||||
<x-input v-model="taskName" style="width: 130px;" size="small" :placeholder="$t('Task Name')"></x-input> |
||||
</div> |
||||
</template> |
||||
</m-conditions> |
||||
</template> |
||||
<template slot="content"> |
||||
<template v-if="taskRecordList.length"> |
||||
<m-list :task-record-list="taskRecordList" @on-update="_onUpdate" :page-no="pageNo" :page-size="pageSize"> |
||||
</m-list> |
||||
<div class="page-box"> |
||||
<x-page :current="pageNo" :total="total" show-elevator @on-change="_page"></x-page> |
||||
</div> |
||||
</template> |
||||
<template v-if="!taskRecordList.length"> |
||||
<m-no-data></m-no-data> |
||||
</template> |
||||
<m-spin :is-spin="isLoading"></m-spin> |
||||
</template> |
||||
</m-list-construction> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import i18n from '@/module/i18n' |
||||
import { mapActions } from 'vuex' |
||||
import mList from './_source/list' |
||||
import mSpin from '@/module/components/spin/spin' |
||||
import mNoData from '@/module/components/noData/noData' |
||||
import mConditions from '@/module/components/conditions/conditions' |
||||
import mSecondaryMenu from '@/module/components/secondaryMenu/secondaryMenu' |
||||
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||
|
||||
export default { |
||||
name: 'task-record-list-index', |
||||
data () { |
||||
return { |
||||
pageSize: 10, |
||||
pageNo: 1, |
||||
total: null, |
||||
taskRecordList: [], |
||||
isLoading: true, |
||||
taskName: '', |
||||
state: '', |
||||
sourceTable: '', |
||||
destTable: '', |
||||
taskDate: '', |
||||
startDate: '', |
||||
endDate: '', |
||||
stateList: [ |
||||
{ |
||||
label: `${i18n.$t('none')}`, |
||||
code: `` |
||||
}, |
||||
{ |
||||
label: `${i18n.$t('success')}`, |
||||
code: `${i18n.$t('success')}` |
||||
}, |
||||
{ |
||||
label: `${i18n.$t('waiting')}`, |
||||
code: `${i18n.$t('waiting')}` |
||||
}, |
||||
{ |
||||
label: `${i18n.$t('In Execution')}`, |
||||
code: `${i18n.$t('In Execution')}` |
||||
}, |
||||
{ |
||||
label: `${i18n.$t('Finish')}`, |
||||
code: `${i18n.$t('Finish')}` |
||||
}, { |
||||
label: `${i18n.$t('failed')}`, |
||||
code: `${i18n.$t('failed')}` |
||||
} |
||||
] |
||||
} |
||||
}, |
||||
props: {}, |
||||
methods: { |
||||
...mapActions('dag', ['getTaskRecordList']), |
||||
/** |
||||
* empty date |
||||
*/ |
||||
_dateEmpty () { |
||||
this.startDate = '' |
||||
this.endDate = '' |
||||
this.$refs.datepicker.empty() |
||||
}, |
||||
_ckQuery () { |
||||
this._getTaskRecordList() |
||||
}, |
||||
_onChangeState (val) { |
||||
this.state = val.value |
||||
}, |
||||
_onChangeStartStop (val) { |
||||
this.startDate = val[0] |
||||
this.endDate = val[1] |
||||
}, |
||||
_onChangeDate (val) { |
||||
this.taskDate = val.replace(/-/g, '') |
||||
}, |
||||
_page (val) { |
||||
this.pageNo = val |
||||
this._getTaskRecordList() |
||||
}, |
||||
/** |
||||
* get list data |
||||
*/ |
||||
_getTaskRecordList (flag) { |
||||
this.isLoading = !flag |
||||
let param = { |
||||
pageSize: this.pageSize, |
||||
pageNo: this.pageNo, |
||||
taskName: this.taskName, |
||||
state: this.state, |
||||
sourceTable: this.sourceTable, |
||||
destTable: this.destTable, |
||||
taskDate: this.taskDate, |
||||
startDate: this.startDate, |
||||
endDate: this.endDate |
||||
} |
||||
this.taskRecordList = [] |
||||
this.getTaskRecordList(param).then(res => { |
||||
this.taskRecordList = res.totalList |
||||
this.total = res.total |
||||
this.isLoading = false |
||||
}).catch(e => { |
||||
this.isLoading = false |
||||
}) |
||||
}, |
||||
_onUpdate () { |
||||
this._getTaskRecordList('false') |
||||
} |
||||
}, |
||||
watch: { |
||||
}, |
||||
created () { |
||||
}, |
||||
mounted () { |
||||
this._getTaskRecordList() |
||||
}, |
||||
components: { mList, mConditions, mSpin, mListConstruction, mSecondaryMenu, mNoData } |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue