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/incubator-seatunnel.git
The following commit(s) were added to refs/heads/dev by this push:
new b4d447bb5 [Feat][UI] Add user list function in the project. (#2780)
b4d447bb5 is described below
commit b4d447bb51c8e3e6c15510095f0a4ae1b0afdc1e
Author: songjianet <[email protected]>
AuthorDate: Mon Sep 19 11:07:03 2022 +0800
[Feat][UI] Add user list function in the project. (#2780)
---
seatunnel-ui/src/locales/en_US/user-manage.ts | 7 ++--
.../src/{utils/regex.ts => service/types.ts} | 20 +++++++--
seatunnel-ui/src/utils/index.ts | 2 -
.../user-manage/list/components/form-modal.tsx | 9 +---
.../user-manage/list/components/use-form-modal.ts | 11 +----
seatunnel-ui/src/views/user-manage/list/index.tsx | 23 ++++++++--
.../src/views/user-manage/list/use-table.ts | 49 ++++++++++++++++------
7 files changed, 78 insertions(+), 43 deletions(-)
diff --git a/seatunnel-ui/src/locales/en_US/user-manage.ts
b/seatunnel-ui/src/locales/en_US/user-manage.ts
index fe8da88bd..e3b956138 100644
--- a/seatunnel-ui/src/locales/en_US/user-manage.ts
+++ b/seatunnel-ui/src/locales/en_US/user-manage.ts
@@ -19,10 +19,9 @@ export default {
user_manage: 'User Manage',
create: 'Create',
username: 'Username',
- state: 'State',
- email: 'Email',
- creation_time: 'Creation Time',
- last_landing_time: 'Last Landing Time',
+ status: 'Status',
+ create_time: 'Create Time',
+ update_time: 'Update Time',
operation: 'Operation',
enable: 'Enable',
disable: 'Disable',
diff --git a/seatunnel-ui/src/utils/regex.ts b/seatunnel-ui/src/service/types.ts
similarity index 71%
rename from seatunnel-ui/src/utils/regex.ts
rename to seatunnel-ui/src/service/types.ts
index c660e8d12..30048548b 100644
--- a/seatunnel-ui/src/utils/regex.ts
+++ b/seatunnel-ui/src/service/types.ts
@@ -15,8 +15,22 @@
* limitations under the License.
*/
-const regex = {
- email: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ //
support Chinese mailbox
+import { UserDetail } from '@/service/user/types'
+
+interface ResponseBasic<T> {
+ code: number
+ failed: boolean
+ success: boolean
+ msg: string | null
+ data: T
}
-export default regex
+type ResponseTable<T> = ResponseBasic<{
+ pageNo: number
+ pageSize: number
+ totalCount: number
+ totalPage: number
+ data: T
+}>
+
+export { ResponseTable }
\ No newline at end of file
diff --git a/seatunnel-ui/src/utils/index.ts b/seatunnel-ui/src/utils/index.ts
index ce97fbae6..d806dfb47 100644
--- a/seatunnel-ui/src/utils/index.ts
+++ b/seatunnel-ui/src/utils/index.ts
@@ -17,13 +17,11 @@
import mapping from './mapping'
import trim from './trim'
-import regex from './regex'
import log from './log'
const utils = {
mapping,
trim,
- regex,
log
}
diff --git a/seatunnel-ui/src/views/user-manage/list/components/form-modal.tsx
b/seatunnel-ui/src/views/user-manage/list/components/form-modal.tsx
index 3b78a01d1..bce4e3ff1 100644
--- a/seatunnel-ui/src/views/user-manage/list/components/form-modal.tsx
+++ b/seatunnel-ui/src/views/user-manage/list/components/form-modal.tsx
@@ -132,14 +132,7 @@ const FormModal = defineComponent({
</NTooltip>
</NSpace>
</NFormItem>
- <NFormItem label={this.t('user_manage.email')} path='email'>
- <NInput
- clearable
- allowInput={this.trim}
- v-model={[this.model.email, 'value']}
- />
- </NFormItem>
- <NFormItem label={this.t('user_manage.state')} path='state'>
+ <NFormItem label={this.t('user_manage.status')} path='status'>
<NRadioGroup v-model={[this.model.state, 'value']}>
<NRadio value={0}>{this.t('user_manage.active')}</NRadio>
<NRadio value={1}>{this.t('user_manage.inactive')}</NRadio>
diff --git
a/seatunnel-ui/src/views/user-manage/list/components/use-form-modal.ts
b/seatunnel-ui/src/views/user-manage/list/components/use-form-modal.ts
index e05546e1f..a5cff32a0 100644
--- a/seatunnel-ui/src/views/user-manage/list/components/use-form-modal.ts
+++ b/seatunnel-ui/src/views/user-manage/list/components/use-form-modal.ts
@@ -30,8 +30,7 @@ export function useFormModal(
id: ref(),
username: ref(''),
password: ref(''),
- email: ref(''),
- state: ref(0)
+ status: ref(0)
},
rules: {
username: {
@@ -43,14 +42,6 @@ export function useFormModal(
required: true,
trigger: ['input', 'blur'],
message: t('user_manage.model_validate_tips')
- },
- email: {
- trigger: ['input', 'blur'],
- validator() {
- if (state.model.email && !utils.regex.email.test(state.model.email))
{
- return new Error(t('user_manage.model_validate_tips'))
- }
- }
}
}
})
diff --git a/seatunnel-ui/src/views/user-manage/list/index.tsx
b/seatunnel-ui/src/views/user-manage/list/index.tsx
index e25b62096..16fd86877 100644
--- a/seatunnel-ui/src/views/user-manage/list/index.tsx
+++ b/seatunnel-ui/src/views/user-manage/list/index.tsx
@@ -25,7 +25,7 @@ import DeleteModal from './components/delete-modal'
const UserManageList = defineComponent({
setup() {
const { t } = useI18n()
- const { state, createColumns } = useTable()
+ const { state, createColumns, getTableData } = useTable()
const handleFormModal = () => {
state.showFormModal = true
@@ -48,18 +48,33 @@ const UserManageList = defineComponent({
state.showDeleteModal = false
}
+ const handlePageSize = () => {
+ state.pageNo = 1
+ requestData()
+ }
+
+ const requestData = () => {
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo
+ })
+ }
+
onMounted(() => {
createColumns(state)
+ requestData()
})
return {
t,
...toRefs(state),
+ requestData,
handleFormModal,
handleCancelFormModal,
handleConfirmFormModal,
handleCancelDeleteModal,
- handleConfirmDeleteModal
+ handleConfirmDeleteModal,
+ handlePageSize
}
},
render() {
@@ -83,12 +98,14 @@ const UserManageList = defineComponent({
/>
<NSpace justify='center'>
<NPagination
- v-model:page={this.page}
+ v-model:page={this.pageNo}
v-model:page-size={this.pageSize}
page-count={this.totalPage}
show-size-picker
page-sizes={[10, 30, 50]}
show-quick-jumper
+ onUpdatePage={this.requestData}
+ onUpdatePageSize={this.handlePageSize}
/>
</NSpace>
</NSpace>
diff --git a/seatunnel-ui/src/views/user-manage/list/use-table.ts
b/seatunnel-ui/src/views/user-manage/list/use-table.ts
index 45c67ade2..1722915dd 100644
--- a/seatunnel-ui/src/views/user-manage/list/use-table.ts
+++ b/seatunnel-ui/src/views/user-manage/list/use-table.ts
@@ -16,15 +16,19 @@
*/
import { reactive, ref, h } from 'vue'
+import { useAsyncState } from '@vueuse/core'
import { useI18n } from 'vue-i18n'
import { NSpace, NButton } from 'naive-ui'
+import { userList, userDelete } from '@/service/user'
+import type { ResponseTable } from '@/service/types'
+import type { UserDetail } from '@/service/user/types'
export function useTable() {
const { t } = useI18n()
const state = reactive({
columns: [],
tableData: [{ username: '' }],
- page: ref(1),
+ pageNo: ref(1),
pageSize: ref(10),
totalPage: ref(1),
row: {},
@@ -38,23 +42,19 @@ export function useTable() {
state.columns = [
{
title: t('user_manage.username'),
- key: 'username'
+ key: 'name'
},
{
- title: t('user_manage.state'),
- key: 'state'
+ title: t('user_manage.status'),
+ key: 'status'
},
{
- title: t('user_manage.email'),
- key: 'email'
+ title: t('user_manage.create_time'),
+ key: 'createTime'
},
{
- title: t('user_manage.creation_time'),
- key: 'creationTime'
- },
- {
- title: t('user_manage.last_landing_time'),
- key: 'lastLandingTime'
+ title: t('user_manage.update_time'),
+ key: 'updateTime'
},
{
title: t('user_manage.operation'),
@@ -86,9 +86,32 @@ export function useTable() {
}
const handleDelete = (row: any) => {
+ //if (state.tableData.length === 1 && state.pageNo > 1) {
+ // --state.pageNo
+ //}
+ //
+ //userDelete(row.id).then(() => {
+ // getTableData({
+ // pageSize: state.pageSize,
+ // pageNo: state.pageNo
+ // })
+ //})
state.showDeleteModal = true
state.row = row
}
- return { state, createColumns }
+ const getTableData = (params: any) => {
+ if (state.loading) return
+ state.loading = true
+ useAsyncState(
+ userList({ ...params }).then((res: ResponseTable<Array<UserDetail> |
[]>) => {
+ state.tableData = res.data.data
+ state.totalPage = res.data.totalPage
+ state.loading = false
+ }),
+ {}
+ )
+ }
+
+ return { state, createColumns, getTableData }
}
