[Feat][UI] Add user delete, disable and enable function in the project.

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({

seatunnel-ui/src/service/script/types.ts

@@ -27,7 +27,4 @@ interface ScriptAdd {
   type: string
 }
 
-export {
-  ScriptList,
-  ScriptAdd
-}
+export { ScriptList, ScriptAdd }

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

seatunnel-ui/src/service/task/index.ts

@@ -66,4 +66,4 @@ export function taskInstanceKill(taskInstanceId: number): any {
     url: `/task/${taskInstanceId}`,
     method: 'patch'
   })
-}
+}

seatunnel-ui/src/service/types.ts

@@ -33,4 +33,4 @@ type ResponseTable<T> = ResponseBasic<{
   data: T
 }>
 
-export { ResponseTable }
+export { ResponseTable }

seatunnel-ui/src/service/user/index.ts

@@ -76,4 +76,4 @@ export function userEnable(userId: number): any {
     url: `/user/${userId}/enable`,
     method: 'patch'
   })
-}
+}

seatunnel-ui/src/service/user/types.ts

@@ -36,4 +36,4 @@ interface UserDetail extends UserLogin {
   updateTime?: any | null
 }
 
-export { UserList, UserLogin, UserDetail }
+export { UserList, UserLogin, UserDetail }

seatunnel-ui/src/store/user/index.ts

@@ -35,4 +35,4 @@ export const useUserStore = defineStore({
       this.userInfo = userInfo
     }
   }
-})
+})

seatunnel-ui/src/store/user/types.ts

@@ -21,4 +21,4 @@ interface UserState {
   userInfo: UserDetail | {}
 }
 
-export { UserState }
+export { UserState }

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'>

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 }
   },

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>

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 }
 }

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()

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 }
 }