calvin
2 years ago
committed by
GitHub
19 changed files with 2692 additions and 749 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,92 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
import { |
||||
defineComponent, |
||||
PropType, |
||||
toRefs, |
||||
ref, |
||||
toRaw, |
||||
Ref, |
||||
onMounted |
||||
} from 'vue' |
||||
import { NForm, NFormItem, NInput } from 'naive-ui' |
||||
import { useForm } from '../use-form' |
||||
import Modal from '@/components/modal' |
||||
import { modifyTaskGroupQueuePriority } from '@/service/modules/task-group' |
||||
|
||||
const props = { |
||||
show: { |
||||
type: Boolean as PropType<boolean>, |
||||
default: false |
||||
}, |
||||
data: { |
||||
type: Object as PropType<any> |
||||
} |
||||
} |
||||
|
||||
const FormModal = defineComponent({ |
||||
name: 'FormModal', |
||||
props, |
||||
emits: ['confirm', 'cancel'], |
||||
setup(props, { emit }) { |
||||
const { state, t } = useForm() |
||||
|
||||
onMounted(() => { |
||||
state.formData.queueId = props.data.queueId |
||||
state.formData.priority = props.data.priority |
||||
}) |
||||
|
||||
const onConfirm = () => { |
||||
let value = state.formData.priority + '' |
||||
if (value) { |
||||
modifyTaskGroupQueuePriority(state.formData).then(() => { |
||||
emit('confirm') |
||||
}) |
||||
} |
||||
} |
||||
|
||||
const onCancel = () => { |
||||
state.formData.priority = 0 |
||||
emit('cancel') |
||||
} |
||||
|
||||
return { ...toRefs(state), t, onConfirm, onCancel } |
||||
}, |
||||
render() { |
||||
const { t, onConfirm, onCancel, show } = this |
||||
return ( |
||||
<Modal |
||||
title={t('resource.task_group_queue.edit_priority')} |
||||
show={show} |
||||
onConfirm={onConfirm} |
||||
onCancel={onCancel} |
||||
> |
||||
<NForm rules={this.rules} ref='formRef'> |
||||
<NFormItem |
||||
label={t('resource.task_group_queue.priority')} |
||||
path='priority' |
||||
> |
||||
<NInput v-model:value={this.formData.priority} /> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default FormModal |
||||
@ -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. |
||||
*/ |
||||
|
||||
import { defineComponent, PropType } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { NSpace, NTooltip, NButton, NIcon } from 'naive-ui' |
||||
import { EditOutlined, PlayCircleOutlined } from '@vicons/antd' |
||||
import type { |
||||
TaskGroupQueueIdReq, |
||||
TaskGroupQueuePriorityUpdateReq, |
||||
TaskGroupQueue |
||||
} from '@/service/modules/task-group/types' |
||||
import { forceStartTaskInQueue } from '@/service/modules/task-group' |
||||
|
||||
interface ItemRow extends TaskGroupQueue {} |
||||
|
||||
const props = { |
||||
row: { |
||||
type: Object as PropType<ItemRow>, |
||||
default: {} |
||||
} |
||||
} |
||||
|
||||
const TableAction = defineComponent({ |
||||
name: 'TableAction', |
||||
props, |
||||
emits: ['resetTableData', 'updatePriority'], |
||||
setup(props, { emit }) { |
||||
const { t } = useI18n() |
||||
|
||||
const handleEditPriority = (id: number, priority: number) => { |
||||
emit('updatePriority', id, priority) |
||||
} |
||||
|
||||
const handleStartTask = (id: number) => { |
||||
const params: TaskGroupQueueIdReq = { queueId: id } |
||||
|
||||
forceStartTaskInQueue(params).then(() => { |
||||
emit('resetTableData') |
||||
}) |
||||
} |
||||
|
||||
return { t, handleEditPriority, handleStartTask } |
||||
}, |
||||
render() { |
||||
const { t, handleEditPriority, handleStartTask } = this |
||||
|
||||
return ( |
||||
<NSpace> |
||||
<NTooltip trigger={'hover'}> |
||||
{{ |
||||
default: () => t('resource.task_group_queue.modify_priority'), |
||||
trigger: () => ( |
||||
<NButton |
||||
size='small' |
||||
type='info' |
||||
tag='div' |
||||
onClick={() => |
||||
handleEditPriority(this.row.id, this.row.priority) |
||||
} |
||||
circle |
||||
> |
||||
<NIcon> |
||||
<EditOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
) |
||||
}} |
||||
</NTooltip> |
||||
<NTooltip trigger={'hover'}> |
||||
{{ |
||||
default: () => t('resource.task_group_queue.start_task'), |
||||
trigger: () => ( |
||||
<NButton |
||||
size='small' |
||||
type='primary' |
||||
tag='div' |
||||
onClick={() => handleStartTask(this.row.id)} |
||||
circle |
||||
> |
||||
<NIcon> |
||||
<PlayCircleOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
) |
||||
}} |
||||
</NTooltip> |
||||
</NSpace> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default TableAction |
||||
@ -0,0 +1,55 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.toolbar { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
align-items: center; |
||||
padding: 0 0 0 0; |
||||
.right { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
div { |
||||
margin-left: 5px; |
||||
} |
||||
button { |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.table-card { |
||||
margin-top: 2px; |
||||
|
||||
.table-action { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
button { |
||||
margin: 0 2px 0 0; |
||||
} |
||||
div { |
||||
margin: 0 2px 0 0; |
||||
} |
||||
} |
||||
.pagination { |
||||
margin-top: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
@ -0,0 +1,232 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
import { ref, defineComponent, toRefs, reactive, onMounted, Ref } from 'vue' |
||||
import { |
||||
NButton, |
||||
NIcon, |
||||
NInput, |
||||
NCard, |
||||
NDataTable, |
||||
NPagination, |
||||
NSelect |
||||
} from 'naive-ui' |
||||
import Card from '@/components/card' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import { useI18n } from 'vue-i18n' |
||||
import styles from './index.module.scss' |
||||
import { useTable } from './use-table' |
||||
import FormModal from '@/views/resource/task-group/queue/components/form-modal' |
||||
import { queryTaskGroupListPaging } from '@/service/modules/task-group' |
||||
import { TaskGroupRes } from '@/service/modules/task-group/types' |
||||
import { SelectMixedOption } from 'naive-ui/lib/select/src/interface' |
||||
import { Router, useRouter } from 'vue-router' |
||||
|
||||
const taskGroupQueue = defineComponent({ |
||||
name: 'taskGroupQueue', |
||||
setup() { |
||||
const router: Router = useRouter() |
||||
const { t } = useI18n() |
||||
const { variables, getTableData } = useTable() |
||||
const showModalRef = ref(false) |
||||
const taskGroupOptions: Ref<Array<SelectMixedOption>> = ref([]) |
||||
|
||||
const idRef = ref(Number(router.currentRoute.value.params.id)) |
||||
|
||||
const searchParamRef = reactive({ |
||||
groupId: 0, |
||||
processName: '', |
||||
instanceName: '', |
||||
pageSize: 10, |
||||
pageNo: 1 |
||||
}) |
||||
|
||||
let updateItemData = reactive({ |
||||
queueId: 0, |
||||
priority: 0 |
||||
}) |
||||
|
||||
const requestData = () => { |
||||
getTableData({ |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
groupId: variables.groupId |
||||
}) |
||||
} |
||||
|
||||
const resetTableData = () => { |
||||
getTableData({ |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
groupId: searchParamRef.groupId, |
||||
taskInstanceName: searchParamRef.instanceName, |
||||
processInstanceName: searchParamRef.processName |
||||
}) |
||||
} |
||||
|
||||
const onCancel = () => { |
||||
showModalRef.value = false |
||||
} |
||||
|
||||
const onConfirm = () => { |
||||
showModalRef.value = false |
||||
updateItemData = { |
||||
queueId: 0, |
||||
priority: 0 |
||||
} |
||||
resetTableData() |
||||
} |
||||
|
||||
const onUpdatePageSize = () => { |
||||
variables.page = 1 |
||||
resetTableData() |
||||
} |
||||
|
||||
const updatePriority = (queueId: number, priority: number) => { |
||||
showModalRef.value = true |
||||
updateItemData.queueId = queueId |
||||
updateItemData.priority = priority |
||||
} |
||||
|
||||
const onSearch = () => { |
||||
resetTableData() |
||||
} |
||||
|
||||
onMounted(() => { |
||||
const taskGroupOptionsParams = { |
||||
pageNo: 1, |
||||
pageSize: 2147483647 |
||||
} |
||||
if (idRef.value) { |
||||
searchParamRef.groupId = idRef.value |
||||
} |
||||
queryTaskGroupListPaging(taskGroupOptionsParams).then( |
||||
(res: TaskGroupRes) => { |
||||
res.totalList.map((item) => { |
||||
if (!searchParamRef.groupId) { |
||||
searchParamRef.groupId = item.id |
||||
} |
||||
let option: SelectMixedOption = { label: item.name, value: item.id } |
||||
taskGroupOptions.value.push(option) |
||||
}) |
||||
} |
||||
) |
||||
|
||||
resetTableData() |
||||
}) |
||||
|
||||
return { |
||||
...toRefs(variables), |
||||
t, |
||||
onSearch, |
||||
searchParamRef, |
||||
resetTableData, |
||||
onUpdatePageSize, |
||||
updatePriority, |
||||
onCancel, |
||||
onConfirm, |
||||
showModalRef, |
||||
updateItemData, |
||||
taskGroupOptions |
||||
} |
||||
}, |
||||
render() { |
||||
const { |
||||
t, |
||||
resetTableData, |
||||
onUpdatePageSize, |
||||
updatePriority, |
||||
onCancel, |
||||
onConfirm, |
||||
onSearch, |
||||
showModalRef, |
||||
updateItemData, |
||||
taskGroupOptions |
||||
} = this |
||||
|
||||
const { columns } = useTable(updatePriority, resetTableData) |
||||
|
||||
return ( |
||||
<div> |
||||
<NCard> |
||||
<div class={styles.toolbar}> |
||||
<div class={styles.right}> |
||||
<NSelect |
||||
size='small' |
||||
options={taskGroupOptions} |
||||
v-model:value={this.searchParamRef.groupId} |
||||
placeholder={t('resource.task_group_queue.task_group_name')} |
||||
/> |
||||
<NInput |
||||
size='small' |
||||
v-model={[this.searchParamRef.processName, 'value']} |
||||
placeholder={t('resource.task_group_queue.process_name')} |
||||
></NInput> |
||||
<NInput |
||||
size='small' |
||||
v-model={[this.searchParamRef.instanceName, 'value']} |
||||
placeholder={t( |
||||
'resource.task_group_queue.process_instance_name' |
||||
)} |
||||
></NInput> |
||||
<NButton size='small' type='primary' onClick={onSearch}> |
||||
<NIcon> |
||||
<SearchOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
</div> |
||||
</div> |
||||
</NCard> |
||||
<Card |
||||
class={styles['table-card']} |
||||
title={t('resource.task_group_option.option')} |
||||
> |
||||
<div> |
||||
<NDataTable |
||||
columns={columns} |
||||
size={'small'} |
||||
data={this.tableData} |
||||
striped |
||||
/> |
||||
<div class={styles.pagination}> |
||||
<NPagination |
||||
v-model:page={this.page} |
||||
v-model:page-size={this.pageSize} |
||||
page-count={this.totalPage} |
||||
show-size-picker |
||||
page-sizes={[10, 30, 50]} |
||||
show-quick-jumper |
||||
onUpdatePage={resetTableData} |
||||
onUpdatePageSize={onUpdatePageSize} |
||||
/> |
||||
</div> |
||||
</div> |
||||
</Card> |
||||
{showModalRef && ( |
||||
<FormModal |
||||
show={showModalRef} |
||||
onCancel={onCancel} |
||||
onConfirm={onConfirm} |
||||
data={updateItemData} |
||||
/> |
||||
)} |
||||
</div> |
||||
) |
||||
} |
||||
}) |
||||
|
||||
export default taskGroupQueue |
||||
@ -0,0 +1,49 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
import { useI18n } from 'vue-i18n' |
||||
import { reactive, ref } from 'vue' |
||||
import type { FormRules } from 'naive-ui' |
||||
import type { TaskGroupQueuePriorityUpdateReq } from '@/service/modules/task-group/types' |
||||
import _ from 'lodash' |
||||
|
||||
export function useForm() { |
||||
const { t } = useI18n() |
||||
|
||||
const state = reactive({ |
||||
formRef: ref(), |
||||
formData: { |
||||
queueId: 0, |
||||
priority: 0 |
||||
} as TaskGroupQueuePriorityUpdateReq, |
||||
rules: { |
||||
priority: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
let value = state.formData.priority + '' |
||||
if (value && state.formData.priority >= 0) { |
||||
} else { |
||||
return new Error(t('resource.task_group_queue.priority_not_empty')) |
||||
} |
||||
} |
||||
} |
||||
} as FormRules |
||||
}) |
||||
|
||||
return { state, t } |
||||
} |
||||
@ -0,0 +1,122 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
import { useAsyncState, useAsyncQueue } from '@vueuse/core' |
||||
import { h, reactive, ref } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { format } from 'date-fns' |
||||
import { useRouter } from 'vue-router' |
||||
import type { Router } from 'vue-router' |
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||
import { |
||||
queryTaskGroupListPaging, |
||||
queryTaskListInTaskGroupQueueById |
||||
} from '@/service/modules/task-group' |
||||
import TableAction from './components/table-action' |
||||
import _ from 'lodash' |
||||
|
||||
export function useTable( |
||||
updatePriority = (queueId: number, priority: number): void => {}, |
||||
resetTableData = () => {} |
||||
) { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
|
||||
const columns: TableColumns<any> = [ |
||||
{ title: t('resource.task_group_queue.id'), key: 'index' }, |
||||
{ title: t('resource.task_group_queue.project_name'), key: 'projectName' }, |
||||
{ title: t('resource.task_group_queue.task_name'), key: 'taskName' }, |
||||
{ |
||||
title: t('resource.task_group_queue.process_instance_name'), |
||||
key: 'processInstanceName' |
||||
}, |
||||
{ |
||||
title: t('resource.task_group_queue.task_group_name'), |
||||
key: 'taskGroupName' |
||||
}, |
||||
{ title: t('resource.task_group_queue.priority'), key: 'priority' }, |
||||
{ |
||||
title: t('resource.task_group_queue.force_starting_status'), |
||||
key: 'forceStart' |
||||
}, |
||||
{ title: t('resource.task_group_queue.in_queue'), key: 'inQueue' }, |
||||
{ title: t('resource.task_group_queue.task_status'), key: 'status' }, |
||||
{ title: t('resource.task_group_queue.create_time'), key: 'createTime' }, |
||||
{ title: t('resource.task_group_queue.update_time'), key: 'updateTime' }, |
||||
{ |
||||
title: t('resource.task_group_queue.actions'), |
||||
key: 'actions', |
||||
width: 150, |
||||
render: (row: any) => |
||||
h(TableAction, { |
||||
row, |
||||
onResetTableData: () => { |
||||
if (variables.page > 1 && variables.tableData.length === 1) { |
||||
variables.page -= 1 |
||||
} |
||||
resetTableData() |
||||
}, |
||||
onUpdatePriority: (queueId: number, priority: number) => { |
||||
updatePriority(queueId, priority) |
||||
} |
||||
}) |
||||
} |
||||
] |
||||
|
||||
const variables = reactive({ |
||||
tableData: [], |
||||
page: ref(1), |
||||
pageSize: ref(10), |
||||
groupId: ref(3), |
||||
totalPage: ref(1) |
||||
}) |
||||
|
||||
const getTableData = (params: any) => { |
||||
const taskGroupSearchParams = { |
||||
pageNo: 1, |
||||
pageSize: 2147483647 |
||||
} |
||||
Promise.all([ |
||||
queryTaskListInTaskGroupQueueById(params), |
||||
queryTaskGroupListPaging(taskGroupSearchParams) |
||||
]).then((values: any[]) => { |
||||
const taskGroupList = values[1].totalList |
||||
variables.totalPage = values[0].totalPage |
||||
variables.tableData = values[0].totalList.map( |
||||
(item: any, index: number) => { |
||||
item.taskGroupName = _.find(taskGroupList, { |
||||
id: item.groupId |
||||
}).name |
||||
item.createTime = format( |
||||
new Date(item.createTime), |
||||
'yyyy-MM-dd HH:mm:ss' |
||||
) |
||||
item.updateTime = format( |
||||
new Date(item.updateTime), |
||||
'yyyy-MM-dd HH:mm:ss' |
||||
) |
||||
return { |
||||
index: index + 1, |
||||
...item |
||||
} |
||||
} |
||||
) |
||||
}) |
||||
} |
||||
|
||||
return { getTableData, variables, columns } |
||||
} |
||||
Loading…
Reference in new issue