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

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

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

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

@@ -15,7 +15,7 @@
  * 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 { useForm } from './use-form'
 import type { GridProps, IMeta } from './types'
@@ -54,10 +54,11 @@ const Form = defineComponent({
           <NGrid {...layout}>
             {elements.map((element) => {
               const { span = 24, path, widget, ...formItemProps } = element
+
               return (
                 <NFormItemGi
                   {...formItemProps}
-                  span={isRef(span) ? span.value : span}
+                  span={unref(span) === void 0 ? 24 : unref(span)}
                   path={path}
                 >
                   {h(widget)}

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

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

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

@@ -49,7 +49,7 @@ export function useForm() {
         validator() {
           if (state.profileForm.email === '') {
             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'))
           }
         }

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

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

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

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

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

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

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

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

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

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