gongzijian
6 years ago
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> |
<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> |
</template> |
||||||
<script> |
<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 { |
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> |
<template> |
||||||
<router-view></router-view> |
<m-list :config="config"></m-list> |
||||||
</template> |
</template> |
||||||
<script> |
<script> |
||||||
|
import mList from '@/conf/home/pages/projects/pages/_source/taskRecordList' |
||||||
export default { |
export default { |
||||||
name: 'task-record-index' |
name: 'task-record', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
config: { |
||||||
|
title: `${this.$t('Task record')}`, |
||||||
|
apiFn: 'getTaskRecordList' |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { mList } |
||||||
} |
} |
||||||
</script> |
</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