Browse Source

[Fix][UI Next] Fix vue-tsc errors and optimize code. (#8358)

3.0.0/version-upgrade
Amy0104 3 years ago committed by GitHub
parent
commit
840ac22555
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 16
      dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts
  2. 5
      dolphinscheduler-ui-next/src/components/form/index.tsx
  3. 8
      dolphinscheduler-ui-next/src/components/form/types.ts
  4. 2
      dolphinscheduler-ui-next/src/views/profile/use-form.ts
  5. 2
      dolphinscheduler-ui-next/src/views/projects/node/detail-modal.tsx
  6. 2
      dolphinscheduler-ui-next/src/views/projects/node/detail.tsx
  7. 3
      dolphinscheduler-ui-next/src/views/projects/node/fields/use-environment-name.ts
  8. 1
      dolphinscheduler-ui-next/src/views/projects/node/use-data.ts
  9. 22
      dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx

16
dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts

@ -15,12 +15,12 @@
* limitations under the License. * limitations under the License.
*/ */
import { toRef } from 'vue' import { toRef, Ref } from 'vue'
import { formatValidate } from './utils' import { formatValidate } from './utils'
import getField from './fields/get-field' import getField from './fields/get-field'
import { omit } from 'lodash' import { omit } from 'lodash'
import type { FormRules } from 'naive-ui' import type { FormRules } from 'naive-ui'
import type { IJsonItem } from './types' import type { IFormItem, IJsonItem } from './types'
export default function getElementByJson( export default function getElementByJson(
json: IJsonItem[], json: IJsonItem[],
@ -28,23 +28,23 @@ export default function getElementByJson(
) { ) {
const rules: FormRules = {} const rules: FormRules = {}
const initialValues: { [field: string]: any } = {} const initialValues: { [field: string]: any } = {}
const elements = [] const elements: IFormItem[] = []
for (let item of json) { for (let item of json) {
const { name, value, field, span, children, validate, ...rest } = item const { name, value, field, span = 24, children, validate, ...rest } = item
if (value || value === 0) { if (value || value === 0) {
fields[field] = value fields[field] = value
initialValues[field] = value initialValues[field] = value
} }
if (validate) rules[field] = formatValidate(validate) if (validate) rules[field] = formatValidate(validate)
const spanRef = span === void 0 ? 24 : toRef(item, 'span') const element: IFormItem = {
elements.push({
showLabel: !!name, showLabel: !!name,
...omit(rest, ['type', 'props', 'options']), ...omit(rest, ['type', 'props', 'options']),
label: name, label: name,
path: !children ? field : '', path: !children ? field : '',
widget: () => getField(item, fields, rules), widget: () => getField(item, fields, rules),
span: spanRef span: toRef(item, 'span') as Ref<number>
}) }
elements.push(element)
} }
return { rules, elements, initialValues } return { rules, elements, initialValues }
} }

5
dolphinscheduler-ui-next/src/components/form/index.tsx

@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { defineComponent, PropType, toRefs, h, toRef, isRef } from 'vue' import { defineComponent, PropType, toRefs, h, unref } from 'vue'
import { NSpin, NGrid, NForm, NFormItemGi } from 'naive-ui' import { NSpin, NGrid, NForm, NFormItemGi } from 'naive-ui'
import { useForm } from './use-form' import { useForm } from './use-form'
import type { GridProps, IMeta } from './types' import type { GridProps, IMeta } from './types'
@ -54,10 +54,11 @@ const Form = defineComponent({
<NGrid {...layout}> <NGrid {...layout}>
{elements.map((element) => { {elements.map((element) => {
const { span = 24, path, widget, ...formItemProps } = element const { span = 24, path, widget, ...formItemProps } = element
return ( return (
<NFormItemGi <NFormItemGi
{...formItemProps} {...formItemProps}
span={isRef(span) ? span.value : span} span={unref(span) === void 0 ? 24 : unref(span)}
path={path} path={path}
> >
{h(widget)} {h(widget)}

8
dolphinscheduler-ui-next/src/components/form/types.ts

@ -18,7 +18,6 @@ import { Ref } from 'vue'
import type { import type {
GridProps, GridProps,
FormProps, FormProps,
FormItemGiProps,
FormItemRule, FormItemRule,
FormRules, FormRules,
SelectOption, SelectOption,
@ -40,9 +39,12 @@ interface IOption extends SelectOption, TreeSelectOption {
label: string label: string
} }
interface IFormItem extends Omit<FormItemGiProps, 'span'> { interface IFormItem {
showLabel?: boolean
path: string
label?: string
widget: any widget: any
span?: any span?: number | Ref<number>
} }
interface IMeta extends Omit<FormProps, 'model'> { interface IMeta extends Omit<FormProps, 'model'> {

2
dolphinscheduler-ui-next/src/views/profile/use-form.ts

@ -49,7 +49,7 @@ export function useForm() {
validator() { validator() {
if (state.profileForm.email === '') { if (state.profileForm.email === '') {
return new Error(t('profile.email_tips')) return new Error(t('profile.email_tips'))
} else if (!utils.regex.email.test(state.profileForm.email)) { } else if (!utils.regex.email.test(state.profileForm.email || '')) {
return new Error(t('profile.email_correct_tips')) return new Error(t('profile.email_correct_tips'))
} }
} }

2
dolphinscheduler-ui-next/src/views/projects/node/detail-modal.tsx

@ -70,7 +70,7 @@ const NodeDetailModal = defineComponent({
title={`${t('project.node.current_node_settings')}`} title={`${t('project.node.current_node_settings')}`}
onConfirm={onConfirm} onConfirm={onConfirm}
confirmLoading={false} confirmLoading={false}
onCancel={() => void onCancel()} onCancel={onCancel}
> >
<Detail ref='detailRef' taskType='SHELL' projectCode={111} /> <Detail ref='detailRef' taskType='SHELL' projectCode={111} />
</Modal> </Modal>

2
dolphinscheduler-ui-next/src/views/projects/node/detail.tsx

@ -65,7 +65,7 @@ const NodeDetail = defineComponent({
layout={{ layout={{
xGap: 10 xGap: 10
}} }}
></Form> />
) )
} }
}) })

3
dolphinscheduler-ui-next/src/views/projects/node/fields/use-environment-name.ts

@ -52,8 +52,7 @@ export function useEnvironmentName(
const filterByWorkerGroup = (option: IEnvironmentNameOption) => { const filterByWorkerGroup = (option: IEnvironmentNameOption) => {
if (!model.workerGroup) return false if (!model.workerGroup) return false
if (!option?.workerGroups?.length) return false if (!option?.workerGroups?.length) return false
if (option.workerGroups.indexOf(model.workerGroup) === -1) return false return option.workerGroups.indexOf(model.workerGroup) !== -1
return true
} }
watch( watch(

1
dolphinscheduler-ui-next/src/views/projects/node/use-data.ts

@ -37,7 +37,6 @@ export function useData({
data.backfill = formatBackfill(taskDefinition, nodeData.taskType) data.backfill = formatBackfill(taskDefinition, nodeData.taskType)
data.isCreate = false data.isCreate = false
} }
} else {
} }
return { return {

22
dolphinscheduler-ui-next/src/views/security/alarm-instance-manage/detail.tsx

@ -15,7 +15,15 @@
* limitations under the License. * limitations under the License.
*/ */
import { defineComponent, PropType, toRefs, watch, onMounted, ref } from 'vue' import {
defineComponent,
PropType,
toRefs,
watch,
onMounted,
ref,
Ref
} from 'vue'
import { NSelect, NInput } from 'naive-ui' import { NSelect, NInput } from 'naive-ui'
import Modal from '@/components/modal' import Modal from '@/components/modal'
import Form from '@/components/form' import Form from '@/components/form'
@ -25,6 +33,10 @@ import { useDetail } from './use-detail'
import getElementByJson from '@/components/form/get-elements-by-json' import getElementByJson from '@/components/form/get-elements-by-json'
import type { IRecord, FormRules, IFormItem } from './types' import type { IRecord, FormRules, IFormItem } from './types'
interface IElements extends Omit<Ref, 'value'> {
value: IFormItem[]
}
const props = { const props = {
show: { show: {
type: Boolean as PropType<boolean>, type: Boolean as PropType<boolean>,
@ -35,7 +47,6 @@ const props = {
default: {} default: {}
} }
} }
const DetailModal = defineComponent({ const DetailModal = defineComponent({
name: 'DetailModal', name: 'DetailModal',
props, props,
@ -44,7 +55,7 @@ const DetailModal = defineComponent({
const { t } = useI18n() const { t } = useI18n()
const rules = ref<FormRules>({}) const rules = ref<FormRules>({})
const elements = ref<IFormItem[]>([]) const elements = ref<IFormItem[]>([]) as IElements
const { const {
meta, meta,
@ -60,6 +71,8 @@ const DetailModal = defineComponent({
const onCancel = () => { const onCancel = () => {
resetForm() resetForm()
rules.value = {}
elements.value = []
ctx.emit('cancel') ctx.emit('cancel')
} }
@ -71,7 +84,6 @@ const DetailModal = defineComponent({
ctx.emit('update') ctx.emit('update')
} }
} }
const onChangePlugin = changePlugin const onChangePlugin = changePlugin
watch( watch(
@ -83,7 +95,7 @@ const DetailModal = defineComponent({
watch( watch(
() => state.json, () => state.json,
() => { () => {
if (state.json?.length) return if (!state.json?.length) return
state.json.forEach((item) => { state.json.forEach((item) => {
item.name = t('security.alarm_instance' + '.' + item.field) item.name = t('security.alarm_instance' + '.' + item.field)
}) })

Loading…
Cancel
Save