[Feature-7785][UI Next] Rectify the issue about missing type in the feature of task group option. (#8083)

* prettier the codes

* fix a little issue

dolphinscheduler-ui-next/src/service/modules/task-group/types.ts

@@ -27,8 +27,9 @@ interface TaskGroupIdReq {
 
 interface TaskGroupReq {
   name: string
-  projectCode: string
+  projectCode: number
   groupSize: number
+  status: number
   description: string
 }
 

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/components/form-modal.tsx

@@ -15,12 +15,21 @@
  * limitations under the License.
  */
 
-import { defineComponent, PropType, toRefs, onMounted, ref, toRaw } from 'vue'
+import {
+  defineComponent,
+  PropType,
+  toRefs,
+  onMounted,
+  ref,
+  toRaw,
+  Ref
+} from 'vue'
 import { NForm, NFormItem, NInput, NSelect } from 'naive-ui'
 import { useForm } from '../use-form'
 import Modal from '@/components/modal'
 import { createTaskGroup, updateTaskGroup } from '@/service/modules/task-group'
 import { queryAllProjectList } from '@/service/modules/projects'
+import { SelectMixedOption } from 'naive-ui/lib/select/src/interface'
 
 const props = {
   show: {
@@ -42,12 +51,13 @@ const FormModal = defineComponent({
   emits: ['confirm', 'cancel'],
   setup(props, { emit }) {
     const { state, t } = useForm()
-    const projectOptions = ref([])
+    const projectOptions: Ref<Array<SelectMixedOption>> = ref([])
 
     onMounted(() => {
-      queryAllProjectList().then((res: any) => {
+      queryAllProjectList().then((res: any[]) => {
         res.map((item) => {
-          projectOptions.value.push({ label: item.name, value: item.code })
+          let option: SelectMixedOption = { label: item.name, value: item.code }
+          projectOptions.value.push(option)
         })
       })
       if (props.status === 1) {
@@ -110,7 +120,7 @@ const FormModal = defineComponent({
           >
             <NSelect
               options={projectOptions}
-              v-model={[this.formData.projectCode, 'value']}
+              v-model:value={this.formData.projectCode}
               placeholder={t(
                 'resource.task_group_option.please_select_project'
               )}
@@ -121,7 +131,7 @@ const FormModal = defineComponent({
             path='groupSize'
           >
             <NInput
-              v-model={[this.formData.groupSize, 'value']}
+              v-model:value={this.formData.groupSize}
               placeholder={t(
                 'resource.task_group_option.please_enter_resource_pool_size'
               )}

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/use-form.ts

@@ -18,6 +18,7 @@
 import { useI18n } from 'vue-i18n'
 import { reactive, ref } from 'vue'
 import type { FormRules } from 'naive-ui'
+import type { TaskGroupUpdateReq } from '@/service/modules/task-group/types'
 
 export function useForm() {
   const { t } = useI18n()
@@ -31,7 +32,7 @@ export function useForm() {
       groupSize: 0,
       status: 1,
       description: ''
-    },
+    } as TaskGroupUpdateReq,
     rules: {
       name: {
         required: true,

dolphinscheduler-ui-next/src/views/resource/taskGroupOption/use-table.ts

@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
+import { useAsyncState, useAsyncQueue } from '@vueuse/core'
 import { h, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useAsyncState } from '@vueuse/core'
 import { format } from 'date-fns'
 import { useRouter } from 'vue-router'
 import type { Router } from 'vue-router'
@@ -92,31 +92,30 @@ export function useTable(
   })
 
   const getTableData = (params: any) => {
-    const { state } = useAsyncState(
-      Promise.all([
-        queryTaskGroupListPaging(params),
-        queryAllProjectList()
-      ]).then((values) => {
+    Promise.all([queryTaskGroupListPaging(params), queryAllProjectList()]).then(
+      (values: any[]) => {
         variables.totalPage = values[0].totalPage
-        variables.tableData = values[0].totalList.map((item, index) => {
-          item.projectName = _.find(values[1], { code: item.projectCode }).name
-          item.createTime = format(
-            new Date(item.createTime),
-            'yyyy-MM-dd HH:mm:ss'
-          )
-          item.updateTime = format(
-            new Date(item.updateTime),
-            'yyyy-MM-dd HH:mm:ss'
-          )
-          return {
-            index: index + 1,
-            ...item
+        variables.tableData = values[0].totalList.map(
+          (item: any, index: number) => {
+            item.projectName = _.find(values[1], {
+              code: item.projectCode
+            }).name
+            item.createTime = format(
+              new Date(item.createTime),
+              'yyyy-MM-dd HH:mm:ss'
+            )
+            item.updateTime = format(
+              new Date(item.updateTime),
+              'yyyy-MM-dd HH:mm:ss'
+            )
+            return {
+              index: index + 1,
+              ...item
+            }
           }
-        }) as any
-      }),
-      {}
+        )
+      }
     )
-    return state
   }
 
   return { getTableData, variables, columns }

dolphinscheduler-ui-next/src/views/resource/udf/resource/index.module.scss

@@ -43,7 +43,8 @@
       tr {
         height: 40px;
         font-size: 12px;
-        th,td{
+        th,
+        td {
           &:nth-child(1) {
             width: 50px;
             text-align: center;
@@ -54,7 +55,7 @@
             width: 60px;
             text-align: center;
           }
-          >span {
+          > span {
             font-size: 12px;
             color: #555;
           }
@@ -76,6 +77,5 @@
     &:hover {
       text-decoration: underline;
     }
-  }  
+  }
 }
-