[Fix][UI Next][V1.0.0-Beta] Fix cannot select the workload scheduling time bug (#9762)

dolphinscheduler-ui-next/src/components/crontab/index.module.scss

@@ -24,6 +24,7 @@
     vertical-align: middle;
     align-items: center;
     width: 460px;
+    margin: 0 8px 0 8px;
     > div {
       margin: 5px;
     }

dolphinscheduler-ui-next/src/components/crontab/modules/day.tsx

@@ -470,12 +470,14 @@ export default defineComponent({
         v-model:value={this.radioRef}
         onUpdateValue={this.updateRadioDay}
       >
-        <NRadio class={styles['crontab-list']} value={'everyDay'}>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'everyDay'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.every_day')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'WkintervalWeek'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'WkintervalWeek'} />
           <div class={styles['crontab-list-item']}>
             <div class={styles['item-text']}>{t('crontab.every')}</div>
             <div class={styles['number-input']}>
@@ -500,8 +502,9 @@ export default defineComponent({
             </div>
             <div>{t('crontab.start')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'intervalDay'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'intervalDay'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.every')}</div>
             <div class={styles['number-input']}>
@@ -525,8 +528,9 @@ export default defineComponent({
             </div>
             <div>{t('crontab.day_start')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'WkspecificWeek'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'WkspecificWeek'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.specific_week')}</div>
             <div>
@@ -540,8 +544,9 @@ export default defineComponent({
               />
             </div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'specificDay'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'specificDay'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.specific_day')}</div>
             <div>
@@ -555,18 +560,21 @@ export default defineComponent({
               />
             </div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'monthLastDays'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'monthLastDays'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.last_day_of_month')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'monthLastWorkingDays'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'monthLastWorkingDays'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.last_work_day_of_month')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'monthLastWeeks'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'monthLastWeeks'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.last_of_month')}</div>
             <div>
@@ -579,8 +587,9 @@ export default defineComponent({
               />
             </div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'monthTailBefore'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'monthTailBefore'} />
           <div class={styles['crontab-list-item']}>
             <div class={styles['number-input']}>
               <NInputNumber
@@ -593,11 +602,9 @@ export default defineComponent({
             </div>
             <div>{t('crontab.before_end_of_month')}</div>
           </div>
-        </NRadio>
-        <NRadio
-          class={styles['crontab-list']}
-          value={'recentlyWorkingDaysMonth'}
-        >
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'recentlyWorkingDaysMonth'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.recent_business_day_to_month')}</div>
             <div class={styles['number-input']}>
@@ -612,8 +619,9 @@ export default defineComponent({
             </div>
             <div style={{ width: '50px' }}>{t('crontab.one_day')}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'WkmonthNumWeeks'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'WkmonthNumWeeks'} />
           <div class={styles['crontab-list-item']}>
             <div>{t('crontab.in_this_months')}</div>
             <div class={styles['number-input']}>
@@ -635,7 +643,7 @@ export default defineComponent({
               />
             </div>
           </div>
-        </NRadio>
+        </div>
       </NRadioGroup>
     )
   }

dolphinscheduler-ui-next/src/components/crontab/modules/time.tsx

@@ -220,12 +220,14 @@ export default defineComponent({
         v-model:value={this.radioRef}
         onUpdateValue={this.updateRadioTime}
       >
-        <NRadio class={styles['crontab-list']} value={'everyTime'}>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'everyTime'} />
           <div class={styles['crontab-list-item']}>
             <div>{t(this.timeI18n!.everyTime)}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'intervalTime'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'intervalTime'} />
           <div class={styles['crontab-list-item']}>
             <div class={styles['item-text']}>{t(this.timeI18n!.every)}</div>
             <div class={styles['number-input']}>
@@ -251,8 +253,9 @@ export default defineComponent({
             </div>
             <div class={styles['item-text']}>{t(this.timeI18n!.timeStart)}</div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'specificTime'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'specificTime'} />
           <div class={styles['crontab-list-item']}>
             <div>{t(this.timeI18n!.specificTime)}</div>
             <div class={styles['select-input']}>
@@ -265,8 +268,9 @@ export default defineComponent({
               />
             </div>
           </div>
-        </NRadio>
-        <NRadio class={styles['crontab-list']} value={'cycleTime'}>
+        </div>
+        <div class={styles['crontab-list']}>
+          <NRadio value={'cycleTime'} />
           <div class={styles['crontab-list-item']}>
             <div>{t(this.timeI18n!.cycleFrom)}</div>
             <div class={styles['number-input']}>
@@ -290,7 +294,7 @@ export default defineComponent({
             </div>
             <div>{t(this.timeI18n!.time)}</div>
           </div>
-        </NRadio>
+        </div>
       </NRadioGroup>
     )
   }