seg_yinzy
/
DolphinScheduler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[Feature][UI Next]Added loading state to all tables (#9215) 

* Added loading state to all tables

* Delete useless variables
migrate-dev-docs-to-main
labbomb 2022-03-27 13:54:00 +08:00 committed by GitHub
parent 0841ccacc0
commit aea0025035
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
53 changed files with 231 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dolphinscheduler-ui-next/src/views/data-quality/rule/components/rule-modal.tsx
View File

@ -19,7 +19,6 @@ import { defineComponent, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { NDataTable } from 'naive-ui'
import Modal from '@/components/modal'
import styles from '../index.module.scss'
import { TableColumns } from 'naive-ui/es/data-table/src/interface'
const props = {
@ -94,7 +93,6 @@ export default defineComponent({
data={this.ruleInputEntryList}
striped
size={'small'}
class={styles.table}
/>
</Modal>
)

5
dolphinscheduler-ui-next/src/views/data-quality/rule/index.tsx
View File

@ -100,7 +100,8 @@ const TaskResult = defineComponent({
onCancel,
onConfirm,
viewRuleEntry,
ruleEntryData
ruleEntryData,
loadingRef
} = this
const { columns } = useTable(viewRuleEntry)
@ -127,7 +128,7 @@ const TaskResult = defineComponent({
</NSpace>
</NCard>
<Card class={styles['table-card']}>
<NDataTable columns={columns} data={this.tableData} />
<NDataTable loading={loadingRef} columns={columns} data={this.tableData} />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}

8
dolphinscheduler-ui-next/src/views/data-quality/rule/use-table.ts
View File

@ -35,7 +35,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
pageSize: ref(10),
state: ref(null),
searchVal: ref(null),
totalPage: ref(1)
totalPage: ref(1),
loadingRef: ref(false)
})
const columns: TableColumns<any> = [
@ -97,6 +98,8 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
]
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const data = {
pageSize: params.pageSize,
pageNo: params.pageNo,
@ -129,12 +132,15 @@ export function useTable(viewRuleEntry = (unusedRuleJson: string): void => {}) {
'yyyy-MM-dd HH:mm:ss'
)
return {
...item,
ruleName: ruleNameLocale,
ruleTypeName: ruleTypeName
}
}) as any
variables.loadingRef = false
}),
{}
)

3
dolphinscheduler-ui-next/src/views/data-quality/task-result/index.tsx
View File

@ -77,7 +77,7 @@ const TaskResult = defineComponent({
}
},
render() {
const { t, requestTableData, onUpdatePageSize, onSearch } = this
const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
return (
<>
@ -156,6 +156,7 @@ const TaskResult = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
scrollX={this.tableWidth}

7
dolphinscheduler-ui-next/src/views/data-quality/task-result/use-table.ts
View File

@ -44,7 +44,8 @@ export function useTable() {
state: ref(null),
searchVal: ref(null),
datePickerRange: ref(null),
totalPage: ref(1)
totalPage: ref(1),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -191,6 +192,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const data = {
pageSize: params.pageSize,
pageNo: params.pageNo,
@ -212,6 +215,8 @@ export function useTable() {
...item
}
}) as any
variables.loadingRef = false
}),
{}
)

8
dolphinscheduler-ui-next/src/views/home/components/state-card.tsx
View File

@ -36,6 +36,10 @@ const props = {
chartData: {
type: Array as PropType<Array<StateChartData>>,
default: () => []
},
loadingRef: {
type: Boolean as PropType<boolean>,
default: false
}
}
@ -51,9 +55,8 @@ const StateCard = defineComponent({
return { onUpdateDatePickerValue }
},
render() {
const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
const { columnsRef } = useTable()
return (
<Card title={title}>
{{
@ -63,6 +66,7 @@ const StateCard = defineComponent({
<NGi>
{tableData && (
<NDataTable
loading={loadingRef}
columns={columnsRef}
data={tableData}
striped

14
dolphinscheduler-ui-next/src/views/home/index.tsx
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { defineComponent, onMounted, ref, watch } from 'vue'
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
import { NGrid, NGi } from 'naive-ui'
import { startOfToday, getTime } from 'date-fns'
import { useI18n } from 'vue-i18n'
@ -31,8 +31,8 @@ export default defineComponent({
const dateRef = ref([getTime(startOfToday()), Date.now()])
const taskStateRef = ref()
const processStateRef = ref()
const { getTaskState } = useTaskState()
const { getProcessState } = useProcessState()
const { getTaskState, taskVariables } = useTaskState()
const { getProcessState, processVariables } = useProcessState()
const initData = () => {
taskStateRef.value = getTaskState(dateRef.value)
@ -62,11 +62,13 @@ export default defineComponent({
handleTaskDate,
handleProcessDate,
taskStateRef,
processStateRef
processStateRef,
...toRefs(taskVariables),
...toRefs(processVariables),
}
},
render() {
const { t, dateRef, handleTaskDate, handleProcessDate } = this
const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef } = this
return (
<div>
@ -78,6 +80,7 @@ export default defineComponent({
tableData={this.taskStateRef?.value.table}
chartData={this.taskStateRef?.value.chart}
onUpdateDatePickerValue={handleTaskDate}
loadingRef={taskLoadingRef}
/>
</NGi>
<NGi>
@ -87,6 +90,7 @@ export default defineComponent({
tableData={this.processStateRef?.value.table}
chartData={this.processStateRef?.value.chart}
onUpdateDatePickerValue={handleProcessDate}
loadingRef={processLoadingRef}
/>
</NGi>
</NGrid>

13
dolphinscheduler-ui-next/src/views/home/use-process-state.ts
View File

@ -22,11 +22,17 @@ import { toLower } from 'lodash'
import { useI18n } from 'vue-i18n'
import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
import type { StateData } from './types'
import { reactive, ref } from 'vue'
export function useProcessState() {
const { t } = useI18n()
const processVariables = reactive({
processLoadingRef: ref(false)
})
const getProcessState = (date: Array<number>) => {
if (processVariables.processLoadingRef) return
processVariables.processLoadingRef = true
const { state } = useAsyncState(
countProcessInstanceState({
startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@ -46,14 +52,15 @@ export function useProcessState() {
name: t('home.' + toLower(item.taskStateType))
}
})
processVariables.processLoadingRef = false
return { table, chart }
}),
{ table: [], chart: [] }
)
)
return state
}
return { getProcessState }
return { getProcessState, processVariables }
}

9
dolphinscheduler-ui-next/src/views/home/use-task-state.ts
View File

@ -22,11 +22,17 @@ import { useI18n } from 'vue-i18n'
import { countTaskState } from '@/service/modules/projects-analysis'
import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
import type { StateData } from './types'
import { reactive, ref } from 'vue'
export function useTaskState() {
const { t } = useI18n()
const taskVariables = reactive({
taskLoadingRef: ref(false)
})
const getTaskState = (date: Array<any>) => {
if (taskVariables.taskLoadingRef) return
taskVariables.taskLoadingRef = true
const { state } = useAsyncState(
countTaskState({
startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@ -46,6 +52,7 @@ export function useTaskState() {
name: t('home.' + toLower(item.taskStateType))
}
})
taskVariables.taskLoadingRef = false
return { table, chart }
}),
@ -55,5 +62,5 @@ export function useTaskState() {
return state
}
return { getTaskState }
return { getTaskState, taskVariables }
}

4
dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/index.tsx
View File

@ -77,7 +77,7 @@ const AuditLog = defineComponent({
}
},
render() {
const { t, requestTableData, onUpdatePageSize, onSearch } = this
const { t, requestTableData, onUpdatePageSize, onSearch, loadingRef } = this
return (
<>
@ -139,7 +139,7 @@ const AuditLog = defineComponent({
</NSpace>
</NCard>
<Card class={styles['table-card']}>
<NDataTable columns={this.columns} data={this.tableData} />
<NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}

6
dolphinscheduler-ui-next/src/views/monitor/statistics/audit-log/use-table.ts
View File

@ -35,7 +35,8 @@ export function useTable() {
operationType: ref(null),
userName: ref(null),
datePickerRange: ref(null),
totalPage: ref(1)
totalPage: ref(1),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -69,6 +70,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const data = {
pageSize: params.pageSize,
pageNo: params.pageNo,
@ -90,6 +93,7 @@ export function useTable() {
...item
}
}) as any
variables.loadingRef = false
}),
{}
)

3
dolphinscheduler-ui-next/src/views/projects/list/index.tsx
View File

@ -91,7 +91,7 @@ const list = defineComponent({
}
},
render() {
const { t } = this
const { t, loadingRef } = this
return (
<div>
<NCard>
@ -124,6 +124,7 @@ const list = defineComponent({
class={styles['table-card']}
>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
scrollX={this.tableWidth}

6
dolphinscheduler-ui-next/src/views/projects/list/use-table.ts
View File

@ -218,10 +218,13 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryProjectListPaging(params).then((res: ProjectRes) => {
variables.totalPage = res.totalPage
@ -238,6 +241,7 @@ export function useTable() {
...item
}
}) as any
variables.loadingRef = false
}),
{}
)

8
dolphinscheduler-ui-next/src/views/projects/overview/components/state-card.tsx
View File

@ -36,6 +36,10 @@ const props = {
chartData: {
type: Array as PropType<Array<StateChartData>>,
default: () => []
},
loadingRef: {
type: Boolean as PropType<boolean>,
default: false
}
}
@ -51,9 +55,8 @@ const StateCard = defineComponent({
return { onUpdateDatePickerValue }
},
render() {
const { title, date, tableData, chartData, onUpdateDatePickerValue } = this
const { title, date, tableData, chartData, onUpdateDatePickerValue, loadingRef } = this
const { columnsRef } = useTable()
return (
<Card title={title}>
{{
@ -63,6 +66,7 @@ const StateCard = defineComponent({
<NGi>
{tableData && (
<NDataTable
loading={loadingRef}
columns={columnsRef}
data={tableData}
striped

14
dolphinscheduler-ui-next/src/views/projects/overview/index.tsx
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { defineComponent, onMounted, ref, watch } from 'vue'
import { defineComponent, onMounted, ref, toRefs, watch } from 'vue'
import { NGrid, NGi } from 'naive-ui'
import { startOfToday, getTime } from 'date-fns'
import { useI18n } from 'vue-i18n'
@ -31,8 +31,8 @@ const workflowMonitor = defineComponent({
const dateRef = ref([getTime(startOfToday()), Date.now()])
const taskStateRef = ref()
const processStateRef = ref()
const { getTaskState } = useTaskState()
const { getProcessState } = useProcessState()
const { getTaskState, taskVariables } = useTaskState()
const { getProcessState, processVariables } = useProcessState()
const handleTaskDate = (val: any) => {
taskStateRef.value = getTaskState(val)
@ -62,11 +62,13 @@ const workflowMonitor = defineComponent({
handleTaskDate,
handleProcessDate,
taskStateRef,
processStateRef
processStateRef,
...toRefs(taskVariables),
...toRefs(processVariables),
}
},
render() {
const { t, dateRef, handleTaskDate, handleProcessDate } = this
const { t, dateRef, handleTaskDate, handleProcessDate, taskLoadingRef, processLoadingRef } = this
return (
<div>
@ -78,6 +80,7 @@ const workflowMonitor = defineComponent({
tableData={this.taskStateRef?.value.table}
chartData={this.taskStateRef?.value.chart}
onUpdateDatePickerValue={handleTaskDate}
loadingRef={taskLoadingRef}
/>
</NGi>
<NGi>
@ -87,6 +90,7 @@ const workflowMonitor = defineComponent({
tableData={this.processStateRef?.value.table}
chartData={this.processStateRef?.value.chart}
onUpdateDatePickerValue={handleProcessDate}
loadingRef={processLoadingRef}
/>
</NGi>
</NGrid>

9
dolphinscheduler-ui-next/src/views/projects/overview/use-process-state.ts
View File

@ -23,12 +23,18 @@ import { toLower } from 'lodash'
import { useI18n } from 'vue-i18n'
import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
import type { StateData } from './types'
import { reactive, ref } from 'vue'
export function useProcessState() {
const route = useRoute()
const { t } = useI18n()
const processVariables = reactive({
processLoadingRef: ref(false)
})
const getProcessState = (date: Array<number>) => {
if (processVariables.processLoadingRef) return
processVariables.processLoadingRef = true
const { state } = useAsyncState(
countProcessInstanceState({
startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@ -48,6 +54,7 @@ export function useProcessState() {
name: t('home.' + toLower(item.taskStateType))
}
})
processVariables.processLoadingRef = false
return { table, chart }
}),
@ -57,5 +64,5 @@ export function useProcessState() {
return state
}
return { getProcessState }
return { getProcessState, processVariables }
}

9
dolphinscheduler-ui-next/src/views/projects/overview/use-task-state.ts
View File

@ -23,12 +23,18 @@ import { useI18n } from 'vue-i18n'
import { countTaskState } from '@/service/modules/projects-analysis'
import type { TaskStateRes } from '@/service/modules/projects-analysis/types'
import type { StateData } from './types'
import { reactive, ref } from 'vue'
export function useTaskState() {
const route = useRoute()
const { t } = useI18n()
const taskVariables = reactive({
taskLoadingRef: ref(false)
})
const getTaskState = (date: Array<number>) => {
if (taskVariables.taskLoadingRef) return
taskVariables.taskLoadingRef = true
const { state } = useAsyncState(
countTaskState({
startDate: !date ? '' : format(date[0], 'yyyy-MM-dd HH:mm:ss'),
@ -48,6 +54,7 @@ export function useTaskState() {
name: t('home.' + toLower(item.taskStateType))
}
})
taskVariables.taskLoadingRef = false
return { table, chart }
}),
@ -57,5 +64,5 @@ export function useTaskState() {
return state
}
return { getTaskState }
return { getTaskState, taskVariables }
}

6
dolphinscheduler-ui-next/src/views/projects/task/definition/components/use-version.ts
View File

@ -158,7 +158,8 @@ export function useVersion() {
taskVersion: ref(null),
taskCode: ref(null),
refreshTaskDefinition: ref(false),
row: {}
row: {},
loadingRef: ref(false)
})
const handleSwitchVersion = (row: TaskDefinitionVersionItem) => {
@ -182,6 +183,8 @@ export function useVersion() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryTaskVersions(
{ ...params },
@ -194,6 +197,7 @@ export function useVersion() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

4
dolphinscheduler-ui-next/src/views/projects/task/definition/components/version-modal.tsx
View File

@ -77,7 +77,7 @@ const VersionModal = defineComponent({
return { t, ...toRefs(variables), requestData, onConfirm }
},
render() {
const { t, requestData, onConfirm, show } = this
const { t, requestData, onConfirm, show, loadingRef } = this
return (
<Modal
@ -86,7 +86,7 @@ const VersionModal = defineComponent({
cancelShow={false}
onConfirm={onConfirm}
>
<NDataTable columns={this.columns} data={this.tableData} />
<NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}

3
dolphinscheduler-ui-next/src/views/projects/task/definition/index.tsx
View File

@ -114,7 +114,7 @@ const TaskDefinition = defineComponent({
}
},
render() {
const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate } =
const { t, onSearch, requestData, onUpdatePageSize, onRefresh, onCreate, loadingRef } =
this
return (
@ -163,6 +163,7 @@ const TaskDefinition = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
scrollX={this.tableWidth}

6
dolphinscheduler-ui-next/src/views/projects/task/definition/use-table.ts
View File

@ -266,7 +266,8 @@ export function useTable(onEdit: Function) {
taskType: ref(null),
showVersionModalRef: ref(false),
showMoveModalRef: ref(false),
row: {}
row: {},
loadingRef: ref(false)
})
const handleDelete = (row: any) => {
@ -285,6 +286,8 @@ export function useTable(onEdit: Function) {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryTaskDefinitionListPaging({ ...params }, { projectCode }).then(
(res: TaskDefinitionRes) => {
@ -302,6 +305,7 @@ export function useTable(onEdit: Function) {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}
),
{}

3
dolphinscheduler-ui-next/src/views/projects/task/instance/index.tsx
View File

@ -86,7 +86,7 @@ const TaskInstance = defineComponent({
}
},
render() {
const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal } =
const { t, requestTableData, onUpdatePageSize, onSearch, onConfirmModal, loadingRef } =
this
return (
@ -183,6 +183,7 @@ const TaskInstance = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
scrollX={this.tableWidth}

6
dolphinscheduler-ui-next/src/views/projects/task/instance/use-table.ts
View File

@ -62,7 +62,8 @@ export function useTable() {
processInstanceName: ref(null),
totalPage: ref(1),
showModalRef: ref(false),
row: {}
row: {},
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -268,6 +269,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const data = {
pageSize: params.pageSize,
pageNo: params.pageNo,
@ -306,6 +309,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}
),
{}

6
dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/use-table.ts
View File

@ -152,10 +152,13 @@ export function useTable(
page: ref(1),
totalPage: ref(1),
pageSize: ref(10),
projectCode: ref(Number(router.currentRoute.value.params.projectCode))
projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
loadingRef: ref(false)
})
const getTableData = (row: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
variables.row = row
queryVersions(
{
@ -168,6 +171,7 @@ export function useTable(
variables.tableData = res.totalList.map((item: any) => ({ ...item }))
variables.totalPage = res.totalPage
variables.loadingRef = false
})
}

3
dolphinscheduler-ui-next/src/views/projects/workflow/definition/components/version-modal.tsx
View File

@ -80,7 +80,7 @@ export default defineComponent({
render() {
const { t } = useI18n()
const { requestData } = this
const { requestData, loadingRef } = this
return (
<Modal
@ -90,6 +90,7 @@ export default defineComponent({
onConfirm={this.hideModal}
>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped

2
dolphinscheduler-ui-next/src/views/projects/workflow/definition/index.tsx
View File

@ -112,6 +112,7 @@ export default defineComponent({
},
render() {
const { t } = useI18n()
const { loadingRef } = this
return (
<div class={styles.content}>
@ -150,6 +151,7 @@ export default defineComponent({
</Card>
<Card title={t('project.workflow.workflow_definition')}>
<NDataTable
loading={loadingRef}
rowKey={(row) => row.code}
columns={this.columns}
data={this.tableData}

2
dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/index.tsx
View File

@ -73,6 +73,7 @@ export default defineComponent({
render() {
const { t } = useI18n()
const router: Router = useRouter()
const { loadingRef } = this
return (
<div class={styles.content}>
@ -87,6 +88,7 @@ export default defineComponent({
</Card>
<Card title={t('project.workflow.cron_manage')}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped

6
dolphinscheduler-ui-next/src/views/projects/workflow/definition/timing/use-table.ts
View File

@ -55,7 +55,8 @@ export function useTable() {
pageSize: ref(10),
searchVal: ref(),
totalPage: ref(1),
showRef: ref(false)
showRef: ref(false),
loadingRef: ref(false)
})
const renderTime = (time: string, timeZone: string) => {
@ -243,6 +244,8 @@ export function useTable() {
}
const getTableData = (params: ISearchParam) => {
if (variables.loadingRef) return
variables.loadingRef = true
const definitionCode = Number(
router.currentRoute.value.params.definitionCode
)
@ -254,6 +257,7 @@ export function useTable() {
variables.tableData = res.totalList.map((item: any) => {
return { ...item }
})
variables.loadingRef = false
})
}

6
dolphinscheduler-ui-next/src/views/projects/workflow/definition/use-table.ts
View File

@ -60,7 +60,8 @@ export function useTable() {
startShowRef: ref(false),
timingShowRef: ref(false),
versionShowRef: ref(false),
copyShowRef: ref(false)
copyShowRef: ref(false),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -337,12 +338,15 @@ export function useTable() {
}
const getTableData = (params: IDefinitionParam) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryListPaging({ ...params }, variables.projectCode).then((res: any) => {
variables.totalPage = res.totalPage
variables.tableData = res.totalList.map((item: any) => {
return { ...item }
})
variables.loadingRef = false
}),
{ total: 0, table: [] }
)

2
dolphinscheduler-ui-next/src/views/projects/workflow/instance/index.tsx
View File

@ -89,6 +89,7 @@ export default defineComponent({
},
render() {
const { t } = useI18n()
const { loadingRef } = this
return (
<div class={styles.content}>
@ -99,6 +100,7 @@ export default defineComponent({
</Card>
<Card title={t('project.workflow.workflow_instance')}>
<NDataTable
loading={loadingRef}
rowKey={(row) => row.id}
columns={this.columns}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/projects/workflow/instance/use-table.ts
View File

@ -61,7 +61,8 @@ export function useTable() {
stateType: ref(),
startDate: ref(),
endDate: ref(),
projectCode: ref(Number(router.currentRoute.value.params.projectCode))
projectCode: ref(Number(router.currentRoute.value.params.projectCode)),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -236,6 +237,8 @@ export function useTable() {
}
const getTableData = () => {
if (variables.loadingRef) return
variables.loadingRef = true
const params = {
pageNo: variables.page,
pageSize: variables.pageSize,
@ -252,6 +255,7 @@ export function useTable() {
variables.tableData = res.totalList.map((item: any) => {
return { ...item }
})
variables.loadingRef = false
}
)
}

4
dolphinscheduler-ui-next/src/views/resource/task-group/option/index.tsx
View File

@ -136,7 +136,8 @@ const taskGroupOption = defineComponent({
resetTableData,
onUpdatePageSize,
updateItem,
onSearch
onSearch,
loadingRef
} = this
const { columns } = useTable(updateItem, resetTableData)
@ -176,6 +177,7 @@ const taskGroupOption = defineComponent({
>
<div>
<NDataTable
loading={loadingRef}
columns={columns}
size={'small'}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/resource/task-group/option/use-table.ts
View File

@ -118,10 +118,13 @@ export function useTable(
page: ref(1),
pageSize: ref(10),
name: ref(null),
totalPage: ref(1)
totalPage: ref(1),
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
Promise.all([queryTaskGroupListPaging(params), queryAllProjectList()]).then(
(values: any[]) => {
variables.totalPage = values[0].totalPage
@ -149,6 +152,7 @@ export function useTable(
}
}
)
variables.loadingRef = false
}
)
}

4
dolphinscheduler-ui-next/src/views/resource/task-group/queue/index.tsx
View File

@ -150,7 +150,8 @@ const taskGroupQueue = defineComponent({
onSearch,
showModalRef,
updateItemData,
taskGroupOptions
taskGroupOptions,
loadingRef
} = this
const { columns } = useTable(updatePriority, resetTableData)
@ -192,6 +193,7 @@ const taskGroupQueue = defineComponent({
>
<div>
<NDataTable
loading={loadingRef}
columns={columns}
size={'small'}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/resource/task-group/queue/use-table.ts
View File

@ -121,10 +121,13 @@ export function useTable(
page: ref(1),
pageSize: ref(10),
groupId: ref(3),
totalPage: ref(1)
totalPage: ref(1),
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const taskGroupSearchParams = {
pageNo: 1,
pageSize: 2147483647
@ -159,6 +162,7 @@ export function useTable(
}
}
)
variables.loadingRef = false
})
}

2
dolphinscheduler-ui-next/src/views/resource/udf/function/index.tsx
View File

@ -88,6 +88,7 @@ export default defineComponent({
},
render() {
const { t } = useI18n()
const { loadingRef } = this
return (
<div class={styles.content}>
@ -123,6 +124,7 @@ export default defineComponent({
</Card>
<Card title={t('resource.function.udf_function')}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped

6
dolphinscheduler-ui-next/src/views/resource/udf/function/use-table.ts
View File

@ -48,7 +48,8 @@ export function useTable() {
pageSize: ref(10),
searchVal: ref(),
totalPage: ref(1),
showRef: ref(false)
showRef: ref(false),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -162,12 +163,15 @@ export function useTable() {
}
const getTableData = (params: IUdfFunctionParam) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryUdfFuncListPaging({ ...params }).then((res: any) => {
variables.totalPage = res.totalPage
variables.tableData = res.totalList.map((item: any) => {
return { ...item }
})
variables.loadingRef = false
}),
{ total: 0, table: [] }
)

2
dolphinscheduler-ui-next/src/views/resource/udf/resource/index.tsx
View File

@ -109,6 +109,7 @@ export default defineComponent({
},
render() {
const { t } = useI18n()
const { loadingRef } = this
return (
<div class={styles.content}>
@ -155,6 +156,7 @@ export default defineComponent({
default: () => (
<div>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
striped

6
dolphinscheduler-ui-next/src/views/resource/udf/resource/use-table.ts
View File

@ -66,7 +66,8 @@ export function useTable() {
searchVal: ref(),
totalPage: ref(1),
folderShowRef: ref(false),
uploadShowRef: ref(false)
uploadShowRef: ref(false),
loadingRef: ref(false)
})
const createColumns = (variables: any) => {
@ -224,6 +225,8 @@ export function useTable() {
}
const getTableData = (params: IUdfResourceParam) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => {
const breadList =
@ -237,6 +240,7 @@ export function useTable() {
variables.tableData = res.totalList.map((item: any) => {
return { ...item }
})
variables.loadingRef = false
}),
{ total: 0, table: [] }
)

5
dolphinscheduler-ui-next/src/views/security/alarm-group-manage/index.tsx
View File

@ -97,7 +97,8 @@ const alarmGroupManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -129,7 +130,7 @@ const alarmGroupManage = defineComponent({
</div>
</NCard>
<Card class={styles['table-card']}>
<NDataTable columns={this.columns} data={this.tableData} />
<NDataTable loading={loadingRef} columns={this.columns} data={this.tableData} />
<div class={styles.pagination}>
<NPagination
v-model:page={this.page}

6
dolphinscheduler-ui-next/src/views/security/alarm-group-manage/use-table.ts
View File

@ -139,7 +139,8 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const handleDelete = (row: any) => {
@ -156,6 +157,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryAlertGroupListPaging({ ...params }).then((res: AlarmGroupRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -172,6 +175,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

4
dolphinscheduler-ui-next/src/views/security/environment-manage/index.tsx
View File

@ -97,7 +97,8 @@ const environmentManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -135,6 +136,7 @@ const environmentManage = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/security/environment-manage/use-table.ts
View File

@ -181,7 +181,8 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const handleDelete = (row: any) => {
@ -198,6 +199,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryEnvironmentListPaging({ ...params }).then((res: EnvironmentRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -214,6 +217,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

4
dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/index.tsx
View File

@ -98,7 +98,8 @@ const k8sNamespaceManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -131,6 +132,7 @@ const k8sNamespaceManage = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
scrollX={this.tableWidth}

6
dolphinscheduler-ui-next/src/views/security/k8s-namespace-manage/use-table.ts
View File

@ -190,10 +190,13 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryNamespaceListPaging({ ...params }).then((res: NamespaceListRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -210,6 +213,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

3
dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
View File

@ -91,7 +91,7 @@ const tenementManage = defineComponent({
}
},
render() {
const { t } = this
const { t, loadingRef } = this
return (
<div class={styles.container}>
<NCard>
@ -124,6 +124,7 @@ const tenementManage = defineComponent({
class={styles['table-card']}
>
<NDataTable
loading={loadingRef}
columns={this.columns}
data={this.tableData}
row-class-name='items'

8
dolphinscheduler-ui-next/src/views/security/tenant-manage/use-table.ts
View File

@ -172,10 +172,13 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryTenantListPaging({ ...params }).then((res: any) => {
variables.tableData = res.totalList.map((item: any, unused: number) => {
@ -184,9 +187,10 @@ export function useTable() {
}
})
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)
)
return state
}

4
dolphinscheduler-ui-next/src/views/security/token-manage/index.tsx
View File

@ -97,7 +97,8 @@ const tokenManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -135,6 +136,7 @@ const tokenManage = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/security/token-manage/use-table.ts
View File

@ -144,7 +144,8 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const handleDelete = (row: any) => {
@ -161,6 +162,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryAccessTokenList({ ...params }).then((res: TokenRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -181,6 +184,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

4
dolphinscheduler-ui-next/src/views/security/worker-group-manage/index.tsx
View File

@ -98,7 +98,8 @@ const workerGroupManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -136,6 +137,7 @@ const workerGroupManage = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/security/worker-group-manage/use-table.ts
View File

@ -160,7 +160,8 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const handleDelete = (row: any) => {
@ -177,6 +178,8 @@ export function useTable() {
}
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryAllWorkerGroupsPaging({ ...params }).then((res: WorkerGroupRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -185,6 +188,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)

4
dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
View File

@ -98,7 +98,8 @@ const yarnQueueManage = defineComponent({
onCancelModal,
onConfirmModal,
handleModalChange,
onSearch
onSearch,
loadingRef
} = this
return (
@ -136,6 +137,7 @@ const yarnQueueManage = defineComponent({
</NCard>
<Card class={styles['table-card']}>
<NDataTable
loading={loadingRef}
row-class-name='items'
columns={this.columns}
data={this.tableData}

6
dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
View File

@ -98,10 +98,13 @@ export function useTable() {
totalPage: ref(1),
showModalRef: ref(false),
statusRef: ref(0),
row: {}
row: {},
loadingRef: ref(false)
})
const getTableData = (params: any) => {
if (variables.loadingRef) return
variables.loadingRef = true
const { state } = useAsyncState(
queryQueueListPaging({ ...params }).then((res: QueueRes) => {
variables.tableData = res.totalList.map((item, unused) => {
@ -110,6 +113,7 @@ export function useTable() {
}
}) as any
variables.totalPage = res.totalPage
variables.loadingRef = false
}),
{}
)