[Refactor][UI] Refactor task group queue using NSpace component. (#11341)
* [Refactor][UI] Refactor task group queue using NSpace component. * [Refactor][UI] Refactor token manage using NSpace component.
This commit is contained in:
songjianet
GitHub
parent
d16c63528f
commit
cfb5918e74
|
|
@ -30,7 +30,6 @@ import {
|
|||
import { execute } from '@/service/modules/executors'
|
||||
import TableAction from './components/table-action'
|
||||
import { renderTableTime, runningType } from '@/common/common'
|
||||
import styles from './index.module.scss'
|
||||
import { renderStateCell } from '../../task/instance/use-table'
|
||||
import {
|
||||
COLUMN_WIDTH_CONFIG,
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
/*
|
||||
* 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,27 +15,27 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ref, defineComponent, toRefs, reactive, onMounted, Ref, getCurrentInstance } from 'vue'
|
||||
import { ref, defineComponent, toRefs, reactive, onMounted, getCurrentInstance } from 'vue'
|
||||
import {
|
||||
NButton,
|
||||
NIcon,
|
||||
NInput,
|
||||
NCard,
|
||||
NDataTable,
|
||||
NPagination,
|
||||
NSelect,
|
||||
NSpace
|
||||
} 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'
|
||||
import { useRouter } from 'vue-router'
|
||||
import FormModal from '@/views/resource/task-group/queue/components/form-modal'
|
||||
import Card from '@/components/card'
|
||||
import type { Ref } from 'vue'
|
||||
import type { Router } from 'vue-router'
|
||||
|
||||
const taskGroupQueue = defineComponent({
|
||||
name: 'taskGroupQueue',
|
||||
|
|
@ -158,45 +158,40 @@ const taskGroupQueue = defineComponent({
|
|||
const { columns } = useTable(updatePriority, resetTableData)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<NCard>
|
||||
<div class={styles.toolbar}>
|
||||
<NSpace>
|
||||
<NSelect
|
||||
size='small'
|
||||
options={taskGroupOptions}
|
||||
clearable
|
||||
style={{ width: '180px' }}
|
||||
v-model:value={this.searchParamRef.groupId}
|
||||
placeholder={t('resource.task_group_queue.task_group_name')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.processName, 'value']}
|
||||
placeholder={t(
|
||||
'resource.task_group_queue.workflow_instance_name'
|
||||
)}
|
||||
></NInput>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.instanceName, 'value']}
|
||||
placeholder={t('resource.task_group_queue.task_instance_name')}
|
||||
></NInput>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</div>
|
||||
</NCard>
|
||||
<Card
|
||||
class={styles['table-card']}
|
||||
title={t('resource.task_group_queue.queue')}
|
||||
>
|
||||
<div>
|
||||
<NSpace vertical>
|
||||
<Card>
|
||||
<NSpace justify='end'>
|
||||
<NSelect
|
||||
size='small'
|
||||
options={taskGroupOptions}
|
||||
clearable
|
||||
style={{ width: '180px' }}
|
||||
v-model:value={this.searchParamRef.groupId}
|
||||
placeholder={t('resource.task_group_queue.task_group_name')}
|
||||
/>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.processName, 'value']}
|
||||
placeholder={t(
|
||||
'resource.task_group_queue.workflow_instance_name'
|
||||
)}
|
||||
></NInput>
|
||||
<NInput
|
||||
allowInput={this.trim}
|
||||
size='small'
|
||||
v-model={[this.searchParamRef.instanceName, 'value']}
|
||||
placeholder={t('resource.task_group_queue.task_instance_name')}
|
||||
></NInput>
|
||||
<NButton size='small' type='primary' onClick={onSearch}>
|
||||
<NIcon>
|
||||
<SearchOutlined />
|
||||
</NIcon>
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</Card>
|
||||
<Card title={t('resource.task_group_queue.queue')}>
|
||||
<NSpace vertical>
|
||||
<NDataTable
|
||||
loading={loadingRef}
|
||||
columns={columns}
|
||||
|
|
@ -205,7 +200,7 @@ const taskGroupQueue = defineComponent({
|
|||
striped
|
||||
scrollX={this.tableWidth}
|
||||
/>
|
||||
<div class={styles.pagination}>
|
||||
<NSpace justify='center'>
|
||||
<NPagination
|
||||
v-model:page={this.page}
|
||||
v-model:page-size={this.pageSize}
|
||||
|
|
@ -216,8 +211,8 @@ const taskGroupQueue = defineComponent({
|
|||
onUpdatePage={resetTableData}
|
||||
onUpdatePageSize={onUpdatePageSize}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</NSpace>
|
||||
</NSpace>
|
||||
</Card>
|
||||
{showModalRef && (
|
||||
<FormModal
|
||||
|
|
@ -227,7 +222,7 @@ const taskGroupQueue = defineComponent({
|
|||
data={updateItemData}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</NSpace>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue