You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by ki...@apache.org on 2022/09/20 03:45:05 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add user delete, disable and enable function in the project. (#2795)
This is an automated email from the ASF dual-hosted git repository.
kirs 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 6792e538a [Feat][UI] Add user delete, disable and enable function in the project. (#2795)
6792e538a is described below
commit 6792e538a3eac9c31048500cbbe36d052fd8f955
Author: songjianet <17...@qq.com>
AuthorDate: Tue Sep 20 11:44:57 2022 +0800
[Feat][UI] Add user delete, disable and enable function in the project. (#2795)
---
seatunnel-ui/src/service/script/index.ts | 5 +-
seatunnel-ui/src/service/script/types.ts | 5 +-
seatunnel-ui/src/service/service.ts | 4 +-
seatunnel-ui/src/service/task/index.ts | 2 +-
seatunnel-ui/src/service/types.ts | 2 +-
seatunnel-ui/src/service/user/index.ts | 2 +-
seatunnel-ui/src/service/user/types.ts | 2 +-
seatunnel-ui/src/store/user/index.ts | 2 +-
seatunnel-ui/src/store/user/types.ts | 2 +-
seatunnel-ui/src/views/login/index.tsx | 6 +-
.../user-manage/list/components/delete-modal.tsx | 4 +-
.../user-manage/list/components/form-modal.tsx | 11 ++--
.../user-manage/list/components/use-form-modal.ts | 31 +++++++---
seatunnel-ui/src/views/user-manage/list/index.tsx | 7 +--
.../src/views/user-manage/list/use-table.ts | 66 ++++++++++++++--------
15 files changed, 90 insertions(+), 61 deletions(-)
diff --git a/seatunnel-ui/src/service/script/index.ts b/seatunnel-ui/src/service/script/index.ts
index a39d1ba5c..abf8f6280 100644
--- a/seatunnel-ui/src/service/script/index.ts
+++ b/seatunnel-ui/src/service/script/index.ts
@@ -16,10 +16,7 @@
*/
import { axios } from '@/service/service'
-import type {
- ScriptList,
- ScriptAdd
-} from '@/service/script/types'
+import type { ScriptList, ScriptAdd } from '@/service/script/types'
export function scriptList(params: ScriptList): any {
return axios({
diff --git a/seatunnel-ui/src/service/script/types.ts b/seatunnel-ui/src/service/script/types.ts
index dca0cd3ab..0b50f2065 100644
--- a/seatunnel-ui/src/service/script/types.ts
+++ b/seatunnel-ui/src/service/script/types.ts
@@ -27,7 +27,4 @@ interface ScriptAdd {
type: string
}
-export {
- ScriptList,
- ScriptAdd
-}
+export { ScriptList, ScriptAdd }
diff --git a/seatunnel-ui/src/service/service.ts b/seatunnel-ui/src/service/service.ts
index af88099b6..94bb5995a 100644
--- a/seatunnel-ui/src/service/service.ts
+++ b/seatunnel-ui/src/service/service.ts
@@ -44,7 +44,9 @@ const err = (err: AxiosError): Promise<AxiosError> => {
service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
if (Object.keys(userStore.getUserInfo).length > 0) {
- config.headers && (config.headers.token = (userStore.getUserInfo as UserDetail).token as string)
+ config.headers &&
+ (config.headers.token = (userStore.getUserInfo as UserDetail)
+ .token as string)
}
return config
diff --git a/seatunnel-ui/src/service/task/index.ts b/seatunnel-ui/src/service/task/index.ts
index 3b1c3e303..606d7875d 100644
--- a/seatunnel-ui/src/service/task/index.ts
+++ b/seatunnel-ui/src/service/task/index.ts
@@ -66,4 +66,4 @@ export function taskInstanceKill(taskInstanceId: number): any {
url: `/task/${taskInstanceId}`,
method: 'patch'
})
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/service/types.ts b/seatunnel-ui/src/service/types.ts
index 30048548b..ce66f6c24 100644
--- a/seatunnel-ui/src/service/types.ts
+++ b/seatunnel-ui/src/service/types.ts
@@ -33,4 +33,4 @@ type ResponseTable<T> = ResponseBasic<{
data: T
}>
-export { ResponseTable }
\ No newline at end of file
+export { ResponseTable }
diff --git a/seatunnel-ui/src/service/user/index.ts b/seatunnel-ui/src/service/user/index.ts
index 801059b16..d6f9d47c2 100644
--- a/seatunnel-ui/src/service/user/index.ts
+++ b/seatunnel-ui/src/service/user/index.ts
@@ -76,4 +76,4 @@ export function userEnable(userId: number): any {
url: `/user/${userId}/enable`,
method: 'patch'
})
-}
\ No newline at end of file
+}
diff --git a/seatunnel-ui/src/service/user/types.ts b/seatunnel-ui/src/service/user/types.ts
index 1df16fa37..9583b4460 100644
--- a/seatunnel-ui/src/service/user/types.ts
+++ b/seatunnel-ui/src/service/user/types.ts
@@ -36,4 +36,4 @@ interface UserDetail extends UserLogin {
updateTime?: any | null
}
-export { UserList, UserLogin, UserDetail }
\ No newline at end of file
+export { UserList, UserLogin, UserDetail }
diff --git a/seatunnel-ui/src/store/user/index.ts b/seatunnel-ui/src/store/user/index.ts
index 963835fe8..8c10ee38c 100644
--- a/seatunnel-ui/src/store/user/index.ts
+++ b/seatunnel-ui/src/store/user/index.ts
@@ -35,4 +35,4 @@ export const useUserStore = defineStore({
this.userInfo = userInfo
}
}
-})
\ No newline at end of file
+})
diff --git a/seatunnel-ui/src/store/user/types.ts b/seatunnel-ui/src/store/user/types.ts
index a280ee63e..ed746c354 100644
--- a/seatunnel-ui/src/store/user/types.ts
+++ b/seatunnel-ui/src/store/user/types.ts
@@ -21,4 +21,4 @@ interface UserState {
userInfo: UserDetail | {}
}
-export { UserState }
\ No newline at end of file
+export { UserState }
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 0b7a655bd..3d6657359 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -36,7 +36,11 @@ const Login = defineComponent({
},
render() {
return (
- <NSpace justify='center' align='center' class='w-full h-screen bg-blue-400'>
+ <NSpace
+ justify='center'
+ align='center'
+ class='w-full h-screen bg-blue-400'
+ >
<div class='w-96 bg-white px-10 py-8'>
<h2 class='text-2xl mb-6'>{this.t('login.login_to_sea_tunnel')}</h2>
<NForm rules={this.rules} ref='loginFormRef'>
diff --git a/seatunnel-ui/src/views/user-manage/list/components/delete-modal.tsx b/seatunnel-ui/src/views/user-manage/list/components/delete-modal.tsx
index a5d3b481c..4d52eb8ee 100644
--- a/seatunnel-ui/src/views/user-manage/list/components/delete-modal.tsx
+++ b/seatunnel-ui/src/views/user-manage/list/components/delete-modal.tsx
@@ -41,7 +41,9 @@ const DeleteModal = defineComponent({
ctx.emit('cancelModal', props.showModal)
}
- const handleConfirm = () => {}
+ const handleConfirm = () => {
+ ctx.emit('confirmModal')
+ }
return { t, handleCancel, handleConfirm }
},
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 bce4e3ff1..685c21c58 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
@@ -52,12 +52,11 @@ const FormModal = defineComponent({
emits: ['cancelModal', 'confirmModal'],
setup(props, ctx) {
const { t } = useI18n()
- const { state, handleValidate } = useFormModal(props, ctx)
+ const { state, handleValidate, clearForm } = useFormModal(props, ctx)
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim
const handleCancel = () => {
- if (props.status === 0) {
- }
+ clearForm()
ctx.emit('cancelModal', props.showModal)
}
@@ -133,9 +132,9 @@ const FormModal = defineComponent({
</NSpace>
</NFormItem>
<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>
+ <NRadioGroup v-model={[this.model.status, 'value']}>
+ <NRadio value={0}>{this.t('user_manage.enable')}</NRadio>
+ <NRadio value={1}>{this.t('user_manage.disable')}</NRadio>
</NRadioGroup>
</NFormItem>
</NForm>
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 a5cff32a0..ff640c8b0 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
@@ -17,7 +17,7 @@
import { reactive, ref, SetupContext } from 'vue'
import { useI18n } from 'vue-i18n'
-import utils from '@/utils'
+import { userAdd, userUpdate } from '@/service/user'
export function useFormModal(
props: any,
@@ -46,15 +46,30 @@ export function useFormModal(
}
})
- const handleValidate = (status: number) => {
+ const handleValidate = (status: 0 | 1) => {
state.userManageForm.validate((errors: any) => {
- if (!errors) {
- ctx.emit('confirmModal', props.showModal)
- } else {
- return
- }
+ if (errors) return
+
+ status ? handleAdd() : handleUpdate()
+ ctx.emit('confirmModal', props.showModal)
+ clearForm()
})
}
- return { state, handleValidate }
+ const clearForm = () => {
+ state.model.id = ''
+ state.model.username = ''
+ state.model.password = ''
+ state.model.status = 0
+ }
+
+ const handleAdd = () => {
+ //userAdd().then(() => {
+ //
+ //})
+ }
+
+ const handleUpdate = () => {}
+
+ return { state, handleValidate, clearForm }
}
diff --git a/seatunnel-ui/src/views/user-manage/list/index.tsx b/seatunnel-ui/src/views/user-manage/list/index.tsx
index 16fd86877..8d5cb909b 100644
--- a/seatunnel-ui/src/views/user-manage/list/index.tsx
+++ b/seatunnel-ui/src/views/user-manage/list/index.tsx
@@ -25,7 +25,8 @@ import DeleteModal from './components/delete-modal'
const UserManageList = defineComponent({
setup() {
const { t } = useI18n()
- const { state, createColumns, getTableData } = useTable()
+ const { state, createColumns, getTableData, handleConfirmDeleteModal } =
+ useTable()
const handleFormModal = () => {
state.showFormModal = true
@@ -44,10 +45,6 @@ const UserManageList = defineComponent({
state.showDeleteModal = false
}
- const handleConfirmDeleteModal = () => {
- state.showDeleteModal = false
- }
-
const handlePageSize = () => {
state.pageNo = 1
requestData()
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 1722915dd..16eea81a7 100644
--- a/seatunnel-ui/src/views/user-manage/list/use-table.ts
+++ b/seatunnel-ui/src/views/user-manage/list/use-table.ts
@@ -19,7 +19,7 @@ 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 { userList, userDelete, userEnable, userDisable } from '@/service/user'
import type { ResponseTable } from '@/service/types'
import type { UserDetail } from '@/service/user/types'
@@ -44,10 +44,6 @@ export function useTable() {
title: t('user_manage.username'),
key: 'name'
},
- {
- title: t('user_manage.status'),
- key: 'status'
- },
{
title: t('user_manage.create_time'),
key: 'createTime'
@@ -59,10 +55,14 @@ export function useTable() {
{
title: t('user_manage.operation'),
key: 'operation',
- render: (row: any) =>
+ render: (row: UserDetail) =>
h(NSpace, null, {
default: () => [
- h(NButton, { text: true }, t('user_manage.enable')),
+ h(
+ NButton,
+ { text: true, onClick: () => handleStatus(row) },
+ row.status ? t('user_manage.enable') : t('user_manage.disable')
+ ),
h(
NButton,
{ text: true, onClick: () => handleEdit(row) },
@@ -79,39 +79,55 @@ export function useTable() {
]
}
- const handleEdit = (row: any) => {
+ const handleStatus = (row: UserDetail) => {
+ const req = row.status ? userEnable : userDisable
+ req(row.id as number).then(() => {
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo
+ })
+ })
+ }
+
+ const handleEdit = (row: UserDetail) => {
state.showFormModal = true
state.status = 1
state.row = row
}
- 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
- // })
- //})
+ const handleDelete = (row: UserDetail) => {
state.showDeleteModal = true
state.row = row
}
+ const handleConfirmDeleteModal = () => {
+ if (state.tableData.length === 1 && state.pageNo > 1) {
+ --state.pageNo
+ }
+
+ userDelete((state.row as UserDetail).id as number).then(() => {
+ state.showDeleteModal = false
+ getTableData({
+ pageSize: state.pageSize,
+ pageNo: state.pageNo
+ })
+ })
+ }
+
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
- }),
+ userList({ ...params }).then(
+ (res: ResponseTable<Array<UserDetail> | []>) => {
+ state.tableData = res.data.data
+ state.totalPage = res.data.totalPage
+ state.loading = false
+ }
+ ),
{}
)
}
- return { state, createColumns, getTableData }
+ return { state, createColumns, getTableData, handleConfirmDeleteModal }
}