This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 7d5ab53 [Feature][UI Next] Add security yarn queue manage. (#8040)
7d5ab53 is described below
commit 7d5ab53d0d041f93afd6b062400d5e875c7d6be3
Author: songjianet <[email protected]>
AuthorDate: Fri Jan 14 14:29:16 2022 +0800
[Feature][UI Next] Add security yarn queue manage. (#8040)
---
.../src/locales/modules/en_US.ts | 14 +++
.../src/locales/modules/zh_CN.ts | 14 +++
.../src/router/modules/security.ts | 8 ++
.../src/service/modules/queues/index.ts | 4 +-
.../src/service/modules/queues/types.ts | 19 ++-
.../project/list/components/project-modal.tsx | 8 +-
.../src/views/project/list/index.tsx | 14 ++-
.../src/views/project/list/use-table.ts | 7 +-
.../src/views/resource/file/index.tsx | 1 +
.../src/views/security/tenant-manage/index.tsx | 2 +-
.../yarn-queue-manage/components/use-modal.ts | 89 ++++++++++++++
.../components/yarn-queue-modal.tsx | 131 +++++++++++++++++++++
.../security/yarn-queue-manage/index.module.scss} | 34 ++++--
.../{tenant-manage => yarn-queue-manage}/index.tsx | 104 ++++++++--------
.../views/security/yarn-queue-manage/use-table.ts | 122 +++++++++++++++++++
15 files changed, 504 insertions(+), 67 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index ed1bab2..a230b07 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -192,6 +192,7 @@ const resource = {
const project = {
list: {
create_project: 'Create Project',
+ edit_project: 'Edit Project',
project_list: 'Project List',
project_tips: 'Please enter your project',
description_tips: 'Please enter your description',
@@ -232,6 +233,19 @@ const security = {
delete_confirm: 'Delete?',
edit: 'Edit',
delete: 'Delete'
+ },
+ yarn_queue: {
+ create_queue: 'Create Queue',
+ edit_queue: 'Edit Queue',
+ search_tips: 'Please enter keywords',
+ queue_name: 'Queue Name',
+ queue_value: 'Queue Value',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
+ operation: 'Operation',
+ edit: 'Edit',
+ queue_name_tips: 'Please enter your queue name',
+ queue_value_tips: 'Please enter your queue value'
}
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index a01b709..63a8cbb 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -191,6 +191,7 @@ const resource = {
const project = {
list: {
create_project: '创建项目',
+ edit_project: '编辑项目',
project_list: '项目列表',
project_tips: '请输入项目名称',
description_tips: '请输入项目描述',
@@ -231,6 +232,19 @@ const security = {
delete_confirm: '确定删除吗?',
edit: '编辑',
delete: '删除'
+ },
+ yarn_queue: {
+ create_queue: '创建队列',
+ edit_queue: '编辑队列',
+ search_tips: '请输入关键词',
+ queue_name: '队列名',
+ queue_value: '队列值',
+ create_time: '创建时间',
+ update_time: '更新时间',
+ operation: '操作',
+ edit: '编辑',
+ queue_name_tips: '请输入队列名称',
+ queue_value_tips: '请输入队列值'
}
}
diff --git a/dolphinscheduler-ui-next/src/router/modules/security.ts
b/dolphinscheduler-ui-next/src/router/modules/security.ts
index 4b458b3..7e3c161 100644
--- a/dolphinscheduler-ui-next/src/router/modules/security.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/security.ts
@@ -44,6 +44,14 @@ export default {
meta: {
title: '用户管理'
}
+ },
+ {
+ path: '/security/yarn-queue-manage',
+ name: 'yarn-queue-manage',
+ component: components['yarn-queue-manage'],
+ meta: {
+ title: 'Yarn队列管理'
+ }
}
]
}
diff --git a/dolphinscheduler-ui-next/src/service/modules/queues/index.ts
b/dolphinscheduler-ui-next/src/service/modules/queues/index.ts
index 68ce04f..ef93de6 100644
--- a/dolphinscheduler-ui-next/src/service/modules/queues/index.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/queues/index.ts
@@ -49,9 +49,9 @@ export function verifyQueue(data: QueueReq): any {
})
}
-export function updateQueue(data: QueueReq, id: IdReq): any {
+export function updateQueue(data: QueueReq, idReq: IdReq): any {
return axios({
- url: `/queues/${id}`,
+ url: `/queues/${idReq.id}`,
method: 'put',
data
})
diff --git a/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
b/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
index 11b34b8..20d563e 100644
--- a/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
+++ b/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
@@ -30,4 +30,21 @@ interface IdReq {
id: number
}
-export { ListReq, QueueReq, IdReq }
+interface QueueList {
+ id: number
+ queueName: string
+ queue: string
+ createTime: string
+ updateTime: string
+}
+
+interface QueueRes {
+ totalList: QueueList[]
+ total: number
+ totalPage: number
+ pageSize: number
+ currentPage: number
+ start: number
+}
+
+export { ListReq, QueueReq, IdReq, QueueRes }
diff --git
a/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
b/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
index 7a9b54a..60bfae2 100644
---
a/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
+++
b/dolphinscheduler-ui-next/src/views/project/list/components/project-modal.tsx
@@ -68,10 +68,14 @@ const ProjectModal = defineComponent({
return { ...toRefs(state), t, onConfirm, onCancel }
},
render() {
- const { t, onConfirm, onCancel, show } = this
+ const { t, onConfirm, onCancel, show, status } = this
return (
<Modal
- title={t('project.list.create_project')}
+ title={
+ status === 0
+ ? t('project.list.create_project')
+ : t('project.list.edit_project')
+ }
show={show}
onConfirm={onConfirm}
onCancel={onCancel}
diff --git a/dolphinscheduler-ui-next/src/views/project/list/index.tsx
b/dolphinscheduler-ui-next/src/views/project/list/index.tsx
index f767cdb..229e571 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/project/list/index.tsx
@@ -79,6 +79,15 @@ const list = defineComponent({
})
}
+ const onSearch = () => {
+ variables.page = 1
+ getTableData({
+ pageSize: variables.pageSize,
+ pageNo: variables.page,
+ searchVal: variables.searchVal
+ })
+ }
+
const onUpdatePageSize = () => {
variables.page = 1
resetTableData()
@@ -110,6 +119,7 @@ const list = defineComponent({
updateProjectItem,
resetTableData,
onUpdatePageSize,
+ onSearch,
updateProjectData,
modelStatusRef
}
@@ -124,6 +134,7 @@ const list = defineComponent({
updateProjectItem,
resetTableData,
onUpdatePageSize,
+ onSearch,
updateProjectData,
modelStatusRef
} = this
@@ -143,8 +154,9 @@ const list = defineComponent({
size='small'
v-model:value={this.searchVal}
placeholder={t('project.list.project_tips')}
+ clearable
/>
- <NButton size='small' type='primary' onClick={resetTableData}>
+ <NButton size='small' type='primary' onClick={onSearch}>
{{
icon: () => (
<NIcon>
diff --git a/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
b/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
index cd78679..74107c6 100644
--- a/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
+++ b/dolphinscheduler-ui-next/src/views/project/list/use-table.ts
@@ -73,7 +73,12 @@ export function useTable(
render: (row: any) =>
h(TableAction, {
row,
- onResetTableData: () => resetTableData(),
+ onResetTableData: () => {
+ if (variables.page > 1 && variables.tableData.length === 1) {
+ variables.page -= 1
+ }
+ resetTableData()
+ },
onUpdateProjectItem: (code, name, description) =>
updateProjectItem(code, name, description)
})
diff --git a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
index 414ea7f..c21ae0d 100644
--- a/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/resource/file/index.tsx
@@ -149,6 +149,7 @@ export default defineComponent({
watch(
() => router.currentRoute.value.params.id,
+ // @ts-ignore
() => reload()
)
diff --git
a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
index 7b80ca5..86bc241 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
@@ -139,7 +139,7 @@ const tenementManage = defineComponent({
row={this.row}
onCancelModal={this.onCancelModal}
onConfirmModal={this.onConfirmModal}
- ></TenantModal>
+ />
</div>
)
}
diff --git
a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/use-modal.ts
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/use-modal.ts
new file mode 100644
index 0000000..4f12843
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/use-modal.ts
@@ -0,0 +1,89 @@
+/*
+ * 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 { reactive, ref, SetupContext } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { verifyQueue, createQueue, updateQueue } from
'@/service/modules/queues'
+
+export function useModal(
+ props: any,
+ ctx: SetupContext<('cancelModal' | 'confirmModal')[]>
+) {
+ const { t } = useI18n()
+
+ const variables = reactive({
+ yarnQueueFormRef: ref(),
+ model: {
+ id: ref<number>(-1),
+ queue: ref(''),
+ queueName: ref('')
+ },
+ rules: {
+ queue: {
+ required: true,
+ trigger: ['input', 'blur'],
+ validator() {
+ if (variables.model.queue === '') {
+ return new Error(t('security.yarn_queue.queue_value_tips'))
+ }
+ }
+ },
+ queueName: {
+ required: true,
+ trigger: ['input', 'blur'],
+ validator() {
+ if (variables.model.queueName === '') {
+ return new Error(t('security.yarn_queue.queue_name_tips'))
+ }
+ }
+ }
+ }
+ })
+
+ const handleValidate = (statusRef: number) => {
+ variables.yarnQueueFormRef.validate((errors: any) => {
+ if (!errors) {
+ statusRef === 0 ? submitYarnQueueModal() : updateYarnQueueModal()
+ } else {
+ return
+ }
+ })
+ }
+
+ const submitYarnQueueModal = () => {
+ verifyQueue({ ...variables.model }).then(() => {
+ createQueue({ ...variables.model }).then(() => {
+ variables.model.queue = ''
+ variables.model.queueName = ''
+ ctx.emit('confirmModal', props.showModalRef)
+ })
+ })
+ }
+
+ const updateYarnQueueModal = () => {
+ updateQueue({ ...variables.model }, { id: variables.model.id }).then(
+ (res: any) => {
+ ctx.emit('confirmModal', props.showModalRef)
+ }
+ )
+ }
+
+ return {
+ variables,
+ handleValidate
+ }
+}
diff --git
a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
new file mode 100644
index 0000000..7e58534
--- /dev/null
+++
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/components/yarn-queue-modal.tsx
@@ -0,0 +1,131 @@
+/*
+ * 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, watch } from 'vue'
+import Modal from '@/components/modal'
+import { NForm, NFormItem, NInput } from 'naive-ui'
+import { useModal } from './use-modal'
+import { useI18n } from 'vue-i18n'
+
+const YarnQueueModal = defineComponent({
+ name: 'YarnQueueModal',
+ props: {
+ showModalRef: {
+ type: Boolean as PropType<boolean>,
+ default: false
+ },
+ statusRef: {
+ type: Number as PropType<number>,
+ default: 0
+ },
+ row: {
+ type: Object as PropType<any>,
+ default: {}
+ }
+ },
+ emits: ['cancelModal', 'confirmModal'],
+ setup(props, ctx) {
+ const { variables, handleValidate } = useModal(props, ctx)
+ const { t } = useI18n()
+
+ const cancelModal = () => {
+ if (props.statusRef === 0) {
+ variables.model.queue = ''
+ variables.model.queueName = ''
+ }
+ ctx.emit('cancelModal', props.showModalRef)
+ }
+
+ const confirmModal = () => {
+ handleValidate(props.statusRef)
+ }
+
+ watch(
+ () => props.statusRef,
+ () => {
+ if (props.statusRef === 0) {
+ variables.model.queue = ''
+ variables.model.queueName = ''
+ } else {
+ variables.model.id = props.row.id
+ variables.model.queue = props.row.queue
+ variables.model.queueName = props.row.queueName
+ }
+ }
+ )
+
+ watch(
+ () => props.row,
+ () => {
+ variables.model.id = props.row.id
+ variables.model.queue = props.row.queue
+ variables.model.queueName = props.row.queueName
+ }
+ )
+
+ return { t, ...toRefs(variables), cancelModal, confirmModal }
+ },
+ render() {
+ const { t } = this
+ return (
+ <div>
+ <Modal
+ title={
+ this.statusRef === 0
+ ? t('security.yarn_queue.create_queue')
+ : t('security.yarn_queue.edit_queue')
+ }
+ show={this.showModalRef}
+ onCancel={this.cancelModal}
+ onConfirm={this.confirmModal}
+ confirmDisabled={!this.model.queueName || !this.model.queue}
+ >
+ {{
+ default: () => (
+ <NForm
+ model={this.model}
+ rules={this.rules}
+ ref='yarnQueueFormRef'
+ >
+ <NFormItem
+ label={t('security.yarn_queue.queue_name')}
+ path='queueName'
+ >
+ <NInput
+ placeholder={t('security.yarn_queue.queue_name_tips')}
+ v-model={[this.model.queueName, 'value']}
+ />
+ </NFormItem>
+ <NFormItem
+ label={t('security.yarn_queue.queue_value')}
+ path='queue'
+ >
+ <NInput
+ placeholder={t('security.yarn_queue.queue_value_tips')}
+ v-model={[this.model.queue, 'value']}
+ />
+ </NFormItem>
+ </NForm>
+ )
+ }}
+ </Modal>
+ </div>
+ )
+ }
+})
+
+export default YarnQueueModal
diff --git a/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss
similarity index 69%
copy from dolphinscheduler-ui-next/src/service/modules/queues/types.ts
copy to
dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss
index 11b34b8..de6cf70 100644
--- a/dolphinscheduler-ui-next/src/service/modules/queues/types.ts
+++
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.module.scss
@@ -15,19 +15,29 @@
* limitations under the License.
*/
-interface ListReq {
- pageNo: number
- pageSize: number
- searchVal?: string
-}
+.search-card {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
-interface QueueReq {
- queue: string
- queueName: string
-}
+ .box {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 300px;
-interface IdReq {
- id: number
+ button {
+ margin-left: 10px;
+ }
+ }
}
-export { ListReq, QueueReq, IdReq }
+.table-card {
+ margin-top: 8px;
+
+ .pagination {
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ }
+}
diff --git
a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
similarity index 68%
copy from dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
copy to dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
index 7b80ca5..34ae023 100644
--- a/dolphinscheduler-ui-next/src/views/security/tenant-manage/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/index.tsx
@@ -15,27 +15,27 @@
* limitations under the License.
*/
-import { defineComponent, toRefs, onMounted, watch } from 'vue'
+import { defineComponent, onMounted, toRefs, watch } from 'vue'
import {
NButton,
- NInput,
- NIcon,
+ NCard,
NDataTable,
- NPagination,
- NCard
+ NIcon,
+ NInput,
+ NPagination
} from 'naive-ui'
-import styles from './index.module.scss'
-import { useTable } from './use-table'
import { SearchOutlined } from '@vicons/antd'
-import TenantModal from './components/tenant-modal'
import { useI18n } from 'vue-i18n'
+import { useTable } from './use-table'
import Card from '@/components/card'
+import YarnQueueModal from './components/yarn-queue-modal'
+import styles from './index.module.scss'
-const tenementManage = defineComponent({
- name: 'tenement-manage',
+const yarnQueueManage = defineComponent({
+ name: 'yarn-queue-manage',
setup() {
- const { variables, getTableData, createColumns } = useTable()
const { t } = useI18n()
+ const { variables, getTableData, createColumns } = useTable()
const requestData = () => {
getTableData({
@@ -45,6 +45,16 @@ const tenementManage = defineComponent({
})
}
+ const onUpdatePageSize = () => {
+ variables.page = 1
+ requestData()
+ }
+
+ const onSearch = () => {
+ variables.page = 1
+ requestData()
+ }
+
const handleModalChange = () => {
variables.showModalRef = true
variables.statusRef = 0
@@ -59,16 +69,6 @@ const tenementManage = defineComponent({
requestData()
}
- const handleChangePageSize = () => {
- variables.page = 1
- requestData()
- }
-
- const handleSearch = () => {
- variables.page = 1
- requestData()
- }
-
onMounted(() => {
createColumns(variables)
requestData()
@@ -82,43 +82,53 @@ const tenementManage = defineComponent({
t,
...toRefs(variables),
requestData,
- handleModalChange,
onCancelModal,
onConfirmModal,
- handleSearch,
- handleChangePageSize
+ onUpdatePageSize,
+ handleModalChange,
+ onSearch
}
},
render() {
- const { t } = this
+ const {
+ t,
+ requestData,
+ onUpdatePageSize,
+ onCancelModal,
+ onConfirmModal,
+ handleModalChange,
+ onSearch
+ } = this
+
return (
- <div class={styles.container}>
+ <div>
<NCard>
- <div class={styles.header}>
+ <div class={styles['search-card']}>
<div>
- <NButton size='small' onClick={this.handleModalChange}>
- {t('security.tenant.create_tenant')}
+ <NButton size='small' type='primary' onClick={handleModalChange}>
+ {t('security.yarn_queue.create_queue')}
</NButton>
</div>
- <div class={styles.search}>
+ <div class={styles.box}>
<NInput
size='small'
- v-model={[this.searchVal, 'value']}
- placeholder={t('security.tenant.search_tips')}
clearable
+ v-model={[this.searchVal, 'value']}
+ placeholder={t('security.yarn_queue.search_tips')}
/>
- <NButton size='small' onClick={this.handleSearch}>
- <NIcon>
- <SearchOutlined />
- </NIcon>
+ <NButton size='small' type='primary' onClick={onSearch}>
+ {{
+ icon: () => (
+ <NIcon>
+ <SearchOutlined />
+ </NIcon>
+ )
+ }}
</NButton>
</div>
</div>
</NCard>
- <Card
- title={t('security.tenant.tenant_manage')}
- class={styles['table-card']}
- >
+ <Card class={styles['table-card']}>
<NDataTable columns={this.columns} data={this.tableData} />
<div class={styles.pagination}>
<NPagination
@@ -128,21 +138,21 @@ const tenementManage = defineComponent({
show-size-picker
page-sizes={[10, 30, 50]}
show-quick-jumper
- onUpdatePage={this.requestData}
- onUpdatePageSize={this.handleChangePageSize}
+ onUpdatePage={requestData}
+ onUpdatePageSize={onUpdatePageSize}
/>
</div>
</Card>
- <TenantModal
+ <YarnQueueModal
showModalRef={this.showModalRef}
statusRef={this.statusRef}
row={this.row}
- onCancelModal={this.onCancelModal}
- onConfirmModal={this.onConfirmModal}
- ></TenantModal>
+ onCancelModal={onCancelModal}
+ onConfirmModal={onConfirmModal}
+ />
</div>
)
}
})
-export default tenementManage
+export default yarnQueueManage
diff --git
a/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
new file mode 100644
index 0000000..17d6f8a
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/security/yarn-queue-manage/use-table.ts
@@ -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 } from '@vueuse/core'
+import { reactive, h, ref } from 'vue'
+import { NButton, NTooltip } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { queryQueueListPaging } from '@/service/modules/queues'
+import { EditOutlined } from '@vicons/antd'
+import type { QueueRes } from '@/service/modules/queues/types'
+
+export function useTable() {
+ const { t } = useI18n()
+
+ const handleEdit = (row: any) => {
+ variables.showModalRef = true
+ variables.statusRef = 1
+ variables.row = row
+ }
+
+ const createColumns = (variables: any) => {
+ variables.columns = [
+ {
+ title: '#',
+ key: 'index'
+ },
+ {
+ title: t('security.yarn_queue.queue_name'),
+ key: 'queueName'
+ },
+ {
+ title: t('security.yarn_queue.queue_value'),
+ key: 'queue'
+ },
+ {
+ title: t('security.yarn_queue.create_time'),
+ key: 'createTime'
+ },
+ {
+ title: t('security.yarn_queue.update_time'),
+ key: 'updateTime'
+ },
+ {
+ title: t('security.yarn_queue.operation'),
+ key: 'operation',
+ render(row: any) {
+ return h(
+ NTooltip,
+ {},
+ {
+ trigger: () =>
+ h(
+ NButton,
+ {
+ circle: true,
+ type: 'info',
+ size: 'small',
+ onClick: () => {
+ handleEdit(row)
+ }
+ },
+ {
+ icon: () => h(EditOutlined)
+ }
+ ),
+ default: () => t('security.yarn_queue.edit')
+ }
+ )
+ }
+ }
+ ]
+ }
+
+ const variables = reactive({
+ columns: [],
+ tableData: [],
+ page: ref(1),
+ pageSize: ref(10),
+ searchVal: ref(null),
+ totalPage: ref(1),
+ showModalRef: ref(false),
+ statusRef: ref(0),
+ row: {}
+ })
+
+ const getTableData = (params: any) => {
+ const { state } = useAsyncState(
+ queryQueueListPaging({ ...params }).then((res: QueueRes) => {
+ variables.tableData = res.totalList.map((item, index) => {
+ return {
+ index: index + 1,
+ ...item
+ }
+ }) as any
+ variables.totalPage = res.totalPage
+ }),
+ {}
+ )
+
+ return state
+ }
+
+ return {
+ variables,
+ getTableData,
+ createColumns
+ }
+}
