Browse Source

refactor: Refactor Login to better match the composition API implementation (#7519)

3.0.0/version-upgrade
labbomb 3 years ago committed by GitHub
parent
commit
ed6a3b6c87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      dolphinscheduler-ui-next/src/router/routes.ts
  2. 4
      dolphinscheduler-ui-next/src/utils/index.ts
  3. 4
      dolphinscheduler-ui-next/src/utils/mapping.ts
  4. 58
      dolphinscheduler-ui-next/src/views/login/index.tsx
  5. 39
      dolphinscheduler-ui-next/src/views/login/use-login.ts
  6. 27
      dolphinscheduler-ui-next/src/views/login/use-translate.ts
  7. 53
      dolphinscheduler-ui-next/src/views/login/use-validate.ts

2
dolphinscheduler-ui-next/src/router/routes.ts

@ -21,7 +21,7 @@ import utils from '@/utils'
// All TSX files under the views folder automatically generate mapping relationship // All TSX files under the views folder automatically generate mapping relationship
const modules = import.meta.glob('/src/views/**/**.tsx') const modules = import.meta.glob('/src/views/**/**.tsx')
const components: { [key: string]: Component } = utils.classification(modules) const components: { [key: string]: Component } = utils.mapping(modules)
/** /**
* Basic page * Basic page

4
dolphinscheduler-ui-next/src/utils/index.ts

@ -15,10 +15,10 @@
* limitations under the License. * limitations under the License.
*/ */
import classification from './classification' import mapping from './mapping'
const utils = { const utils = {
classification, mapping
} }
export default utils export default utils

4
dolphinscheduler-ui-next/src/utils/classification.ts → dolphinscheduler-ui-next/src/utils/mapping.ts

@ -17,7 +17,7 @@
import type { Component } from 'vue' import type { Component } from 'vue'
const classification = (modules: any) => { const mapping = (modules: any) => {
const components: { [key: string]: Component } = {} const components: { [key: string]: Component } = {}
// All TSX files under the views folder automatically generate mapping relationship // All TSX files under the views folder automatically generate mapping relationship
Object.keys(modules).forEach((key: string) => { Object.keys(modules).forEach((key: string) => {
@ -39,4 +39,4 @@ const classification = (modules: any) => {
return components return components
} }
export default classification export default mapping

58
dolphinscheduler-ui-next/src/views/login/index.tsx

@ -15,63 +15,23 @@
* limitations under the License. * limitations under the License.
*/ */
import { defineComponent, reactive, ref, toRefs, withKeys } from 'vue' import { defineComponent, toRefs, withKeys } from 'vue'
import styles from './index.module.scss' import styles from './index.module.scss'
import { useI18n } from 'vue-i18n' import { NInput, NButton, NSwitch, NForm, NFormItem } from 'naive-ui'
import { NInput, NButton, NSwitch, NForm, NFormItem, FormRules } from 'naive-ui' import { useValidate } from './use-validate'
import { useRouter } from 'vue-router' import { useTranslate } from './use-translate'
import type { Router } from 'vue-router' import { useLogin } from './use-login'
import { queryLog } from '@/service/modules/login'
const login = defineComponent({ const login = defineComponent({
name: 'login', name: 'login',
setup() { setup() {
const { t, locale } = useI18n() const { state, t, locale } = useValidate()
const state = reactive({
loginFormRef: ref(),
loginForm: {
userName: '',
userPassword: '',
},
rules: {
userName: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.userName === '') {
return new Error(`${t('login.userName_tips')}`)
}
},
},
userPassword: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.userPassword === '') {
return new Error(`${t('login.userPassword_tips')}`)
}
},
},
} as FormRules,
})
const handleChange = (value: string) => { const { handleChange } = useTranslate(locale)
locale.value = value
}
const router: Router = useRouter() const { handleLogin } = useLogin(state)
const handleLogin = () => {
state.loginFormRef.validate((valid: any) => {
if (!valid) {
queryLog({ ...state.loginForm }).then((res: Response) => {
console.log('res', res)
router.push({ path: 'home' })
})
} else {
console.log('Invalid')
}
})
}
return { t, locale, handleChange, handleLogin, ...toRefs(state) } return { t, handleChange, handleLogin, ...toRefs(state) }
}, },
render() { render() {
return ( return (

39
dolphinscheduler-ui-next/src/views/login/use-login.ts

@ -0,0 +1,39 @@
/*
* 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 { useRouter } from 'vue-router'
import type { Router } from 'vue-router'
import { queryLog } from '@/service/modules/login'
export function useLogin (state) {
const router: Router = useRouter()
const handleLogin = () => {
state.loginFormRef.validate((valid: any) => {
if (!valid) {
queryLog({...state.loginForm}).then((res: Response) => {
console.log('res', res)
router.push({ path: 'home' })
})
} else {
console.log('Invalid')
}
})
}
return {
handleLogin
}
}

27
dolphinscheduler-ui-next/src/views/login/use-translate.ts

@ -0,0 +1,27 @@
/*
* 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 { WritableComputedRef } from "vue"
export function useTranslate (locale: WritableComputedRef<string>) {
const handleChange = (value: string) => {
locale.value = value
}
return {
handleChange
}
}

53
dolphinscheduler-ui-next/src/views/login/use-validate.ts

@ -0,0 +1,53 @@
/*
* 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 } from 'vue'
import { FormRules } from 'naive-ui'
import { useI18n } from 'vue-i18n'
export function useValidate () {
const { t, locale } = useI18n()
const state = reactive({
loginFormRef: ref(),
loginForm: {
userName: '',
userPassword: '',
},
rules: {
userName: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.userName === '') {
return new Error(`${t('login.userName_tips')}`)
}
},
},
userPassword: {
trigger: ['input', 'blur'],
validator() {
if (state.loginForm.userPassword === '') {
return new Error(`${t('login.userPassword_tips')}`)
}
},
},
} as FormRules,
})
return {
state, t, locale
}
}
Loading…
Cancel
Save