Browse Source
* Performance optimization of DEPENDENT task * fix eslint * [Feature] Improve task definition list * feat: Task definition list * change update interface3.0.0/version-upgrade
wangyizhi
3 years ago
committed by
GitHub
12 changed files with 1170 additions and 183 deletions
@ -0,0 +1,91 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-dialog :title="$t('Delete')" :visible.sync="visible" width="500px"> |
||||||
|
<div class="content" v-if="taskRow"> |
||||||
|
<template v-if="taskRow.processDefinitionCode"> |
||||||
|
<span>{{ |
||||||
|
$t("Delete task {taskName} from process {processName}?", { |
||||||
|
processName: taskRow.processDefinitionName, |
||||||
|
taskName: taskRow.taskName, |
||||||
|
}) |
||||||
|
}}</span> |
||||||
|
<el-checkbox class="remove-checkbox" v-model="removeCompletely">{{ |
||||||
|
$t("Delete task completely") |
||||||
|
}}</el-checkbox> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<span>{{ |
||||||
|
$t("Delete {taskName}?", { |
||||||
|
taskName: taskRow.taskName, |
||||||
|
}) |
||||||
|
}}</span> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="close">{{ $t("Cancel") }}</el-button> |
||||||
|
<el-button size="small" type="primary" @click="submit">{{ |
||||||
|
$t("Confirm") |
||||||
|
}}</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
taskRow: Object |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
// Whether to delete the task completely |
||||||
|
removeCompletely: false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
show () { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
submit () { |
||||||
|
this.$emit('deleteTask', { |
||||||
|
completely: this.taskRow.processDefinitionCode ? this.removeCompletely : true, |
||||||
|
taskCode: this.taskRow.taskCode, |
||||||
|
processDefinitionCode: this.taskRow.processDefinitionCode |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.content { |
||||||
|
margin: 20px; |
||||||
|
color: #333; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.remove-checkbox { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,107 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-dialog :title="$t('Move task')" :visible.sync="visible" width="500px"> |
||||||
|
<div class="content" v-if="taskRow"> |
||||||
|
<el-form ref="form" :model="form" label-width="100px" size="mini"> |
||||||
|
<el-form-item :label="$t('Process Name')"> |
||||||
|
<el-select v-model="form.processCode"> |
||||||
|
<el-option |
||||||
|
:label="process.name" |
||||||
|
:value="process.code" |
||||||
|
v-for="process in processListS" |
||||||
|
:key="process.code" |
||||||
|
>{{ process.name }}</el-option |
||||||
|
> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button size="small" @click="close">{{ $t("Cancel") }}</el-button> |
||||||
|
<el-button size="small" type="primary" @click="submit">{{ |
||||||
|
$t("Confirm") |
||||||
|
}}</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { mapState } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
props: { |
||||||
|
taskRow: Object |
||||||
|
}, |
||||||
|
data () { |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
form: { |
||||||
|
processCode: -1 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
...mapState('dag', ['processListS']) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
show () { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.visible = false |
||||||
|
}, |
||||||
|
submit () { |
||||||
|
if (this.taskRow.processDefinitionCode === this.form.processCode) { |
||||||
|
this.visible = false |
||||||
|
return |
||||||
|
} |
||||||
|
if (!this.form.processCode) { |
||||||
|
this.$message.error(this.$t('Please select a process (required)')) |
||||||
|
return |
||||||
|
} |
||||||
|
this.$emit('moveTask', { |
||||||
|
taskCode: this.taskRow.taskCode, |
||||||
|
processDefinitionCode: this.taskRow.processDefinitionCode, |
||||||
|
targetProcessDefinitionCode: this.form.processCode |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
taskRow (val) { |
||||||
|
if (val) { |
||||||
|
this.form.processCode = val.processDefinitionCode || '' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.content { |
||||||
|
margin: 20px; |
||||||
|
color: #333; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.remove-checkbox { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,253 @@ |
|||||||
|
/* |
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one or more |
||||||
|
* contributor license agreements. See the NOTICE file distributed with |
||||||
|
* this work for additional information regarding copyright ownership. |
||||||
|
* The ASF licenses this file to You under the Apache License, Version 2.0 |
||||||
|
* (the "License"); you may not use this file except in compliance with |
||||||
|
* the License. You may obtain a copy of the License at |
||||||
|
* |
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||||
|
* |
||||||
|
* Unless required by applicable law or agreed to in writing, software |
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||||
|
* See the License for the specific language governing permissions and |
||||||
|
* limitations under the License. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<el-drawer |
||||||
|
:title="$t('Version Info')" |
||||||
|
:visible.sync="visible" |
||||||
|
:with-header="false" |
||||||
|
size="" |
||||||
|
> |
||||||
|
<!-- fix the bug that Element-ui(2.13.2) auto focus on the first input --> |
||||||
|
<div style="width: 0px; height: 0px; overflow: hidden"> |
||||||
|
<el-input type="text" /> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<div class="versions-header"> |
||||||
|
<span class="name">{{ $t("Version Info") }}</span> |
||||||
|
</div> |
||||||
|
<div class="table-box" v-if="taskVersions.length > 0"> |
||||||
|
<el-table :data="taskVersions" 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 === taskRow.taskVersion" |
||||||
|
style="color: green" |
||||||
|
><strong |
||||||
|
>V{{ scope.row.version }} |
||||||
|
{{ $t("Current Version") }}</strong |
||||||
|
></span |
||||||
|
> |
||||||
|
<span v-else>V{{ scope.row.version }}</span> |
||||||
|
</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</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.updateTime | 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="swtichVersion(scope.row)" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
:disabled=" |
||||||
|
taskRow.processReleaseState === 'ONLINE' || |
||||||
|
scope.row.version === taskRow.taskVersion |
||||||
|
" |
||||||
|
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="deleteVersion(scope.row)" |
||||||
|
> |
||||||
|
<el-button |
||||||
|
:disabled="scope.row.version === taskRow.taskVersion" |
||||||
|
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="taskVersions.length === 0"> |
||||||
|
<m-no-data /> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div v-if="taskVersions.length > 0"> |
||||||
|
<div class="versions-footer"> |
||||||
|
<el-button size="mini" @click="close()">{{ $t("Cancel") }}</el-button> |
||||||
|
<el-pagination |
||||||
|
background |
||||||
|
@current-change="changePageNo" |
||||||
|
layout="prev, pager, next" |
||||||
|
:total="total" |
||||||
|
:page-size="pageSize" |
||||||
|
> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-drawer> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import mNoData from '@/module/components/noData/noData' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'task-definition-versions', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
visible: false, |
||||||
|
taskVersions: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
total: 0 |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
taskRow: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions('dag', [ |
||||||
|
'getTaskVersions', |
||||||
|
'switchTaskVersion', |
||||||
|
'deleteTaskVersion' |
||||||
|
]), |
||||||
|
show () { |
||||||
|
this.visible = true |
||||||
|
}, |
||||||
|
close () { |
||||||
|
this.visible = false |
||||||
|
this.taskVersions = [] |
||||||
|
}, |
||||||
|
changePageNo (val) { |
||||||
|
this.pageNo = val |
||||||
|
this.reload() |
||||||
|
}, |
||||||
|
reload () { |
||||||
|
this.getTaskVersions({ |
||||||
|
taskCode: this.taskRow.taskCode, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize |
||||||
|
}).then((res) => { |
||||||
|
this.taskVersions = res.totalList |
||||||
|
this.total = res.total |
||||||
|
}) |
||||||
|
}, |
||||||
|
swtichVersion (row) { |
||||||
|
this.switchTaskVersion({ taskCode: row.code, version: row.version }) |
||||||
|
.then((res) => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
this.$emit('reloadList') |
||||||
|
this.close() |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
this.$message.error(err.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
deleteVersion (row) { |
||||||
|
this.deleteTaskVersion({ taskCode: row.code, version: row.version }) |
||||||
|
.then((res) => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
this.$emit('reloadList') |
||||||
|
this.close() |
||||||
|
}) |
||||||
|
.catch((err) => { |
||||||
|
this.$message.error(err.msg || '') |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
components: { mNoData }, |
||||||
|
watch: { |
||||||
|
visible (bool, a, b) { |
||||||
|
if (bool && this.taskRow) { |
||||||
|
this.reload() |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.container { |
||||||
|
width: 500px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.versions-header { |
||||||
|
height: 60px; |
||||||
|
position: relative; |
||||||
|
line-height: 60px; |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.versions-footer { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
border-top: 1px solid #dcdedc; |
||||||
|
background: #fff; |
||||||
|
display: flex; |
||||||
|
padding: 20px; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-end; |
||||||
|
|
||||||
|
.ans-page { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.table-box { |
||||||
|
overflow-y: scroll; |
||||||
|
height: calc(100vh - 61px); |
||||||
|
padding-bottom: 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue