perf: Add default value col in Variable & refactor JobUpdateCreate

src/views/audits/JobPeriodTaskList.vue

@@ -21,11 +21,12 @@ export default {
         columnsShow: {
           min: ['name', 'material'],
           default: [
-            'name', 'material', 'type', 'crontab', 'interval', 'created_by', 'is_periodic'
+            'name', 'material', 'type', 'crontab', 'interval', 'created_by', 'is_periodic_display', 'is_periodic'
           ]
         },
         columns: [
-          'name', 'args', 'material', 'type', 'crontab', 'interval', 'date_last_run', 'summary', 'created_by', 'is_periodic'
+          'name', 'args', 'material', 'type', 'crontab', 'interval', 'date_last_run', 'summary',
+          'created_by', 'is_periodic_display', 'is_periodic'
         ],
         columnsMeta: {
           actions: {
@@ -48,6 +49,10 @@ export default {
               </div>
             }
           },
+          is_periodic_display: {
+            width: '100px',
+            label: this.$t('Periodic')
+          },
           is_periodic: {
             width: '120px',
             label: `${this.$t('Enable')}/${this.$t('Disable')}`,

src/views/ops/Job/JobUpdateCreate.vue

@@ -2,13 +2,6 @@
   <div v-if="ready">
     <VariableHelpDialog :visible.sync="showHelpDialog" />
     <GenericCreateUpdatePage ref="form" v-bind="$data" />
-    <setVariableDialog
-      v-if="showVariableDialog"
-      :form-data="formData"
-      :query-param="queryParam"
-      :visible.sync="showVariableDialog"
-      @submit="setPeriodicParams"
-    />
   </div>
 </template>
 
@@ -22,11 +15,9 @@ import { Required } from '@/components/Form/DataForm/rules'
 import { crontab, interval } from '@/views/accounts/const'
 import LoadTemplateLink from '@/views/ops/Job/components/loadTemplateLink'
 import Variable from '@/views/ops/Template/components/Variable'
-import setVariableDialog from '@/views/ops/Template/components/setVariableDialog.vue'
 
 export default {
   components: {
-    setVariableDialog,
     GenericCreateUpdatePage,
     VariableHelpDialog
   },
@@ -39,8 +30,8 @@ export default {
       fields: [
         [this.$t('Basic'), ['name', 'type', 'instant']],
         [this.$t('Asset'), ['assets', 'nodes', 'runas', 'runas_policy']],
-        [this.$t('Task'), ['module', 'argsLoadFromTemplate', 'args', 'playbook', 'variable', 'chdir', 'timeout']],
+        [this.$t('Task'), ['module', 'argsLoadFromTemplate', 'args', 'playbook', 'variable', 'chdir', 'timeout', 'parameters']],
-        [this.$t('Plan'), ['run_after_save', 'is_periodic', 'interval', 'crontab', 'periodic_variable']],
+        [this.$t('Plan'), ['run_after_save', 'is_periodic', 'interval', 'crontab']],
         [this.$t('Other'), ['comment']]
       ],
       initial: {
@@ -99,20 +90,6 @@ export default {
                 return { label: item.name, value: item.id }
               }
             }
-          },
-          on: {
-            change: ([event], updateForm) => {
-              this.queryParam = `playbook=${event.pk}`
-              this.$axios.get(`/api/v1/ops/playbooks/${event.pk}/`,
-              ).then(data => {
-                data?.variable.map(item => {
-                  delete item.job
-                  delete item.playbook
-                  return item
-                })
-                updateForm({ variable: data.variable })
-              })
-            }
           }
         },
         assets: {
@@ -182,23 +159,7 @@ export default {
           }
         },
         variable: {
-          component: Variable,
+          component: Variable
-          on: {
-            input: ([event], updateForm) => {
-              this.formData = event.map(item => {
-                return item.form_data
-              })
-              if (event.length > 0) {
-                if (event[0].job) {
-                  this.queryParam = `job=${event[0].job}`
-                } else if (event[0].adhoc) {
-                  this.queryParam = `adhoc=${event[0].adhoc}`
-                } else if (event[0].playbook) {
-                  this.queryParam = `playbook=${event[0].playbook}`
-                }
-              }
-            }
-          }
         },
         timeout: {
           helpText: i18n.t('TimeoutHelpText')
@@ -224,16 +185,9 @@ export default {
           type: 'switch',
           hidden: () => {
             return this.instantTask
-          },
-          on: {
-            change: ([event], updateForm) => {
-              if (this.formData.length > 0) {
-                this.showVariableDialog = event
-              }
-            }
           }
         },
-        periodic_variable: {
+        parameters: {
           hidden: () => {
             return true
           }
@@ -252,14 +206,15 @@ export default {
           title: this.$t('ExecuteAfterSaving'),
           callback: (value, form, btn) => {
             form.value.run_after_save = true
+            const parameters = form.value.variable.reduce((acc, item) => {
+              acc[item.var_name] = item.default_value
+              return acc
+            }, {})
+            form.value['parameters'] = parameters
             this.submitForm(form, btn)
           }
         }
-      ],
+      ]
-      formData: [],
-      queryParam: '',
-      showVariableDialog: false,
-      periodicVariableValue: {}
     }
   },
   mounted() {
@@ -304,10 +259,6 @@ export default {
         }
       })
       this.$refs.form.$refs.createUpdateForm.$refs.form.$refs.dataForm.submitForm('form', false)
-    },
-    setPeriodicParams(data) {
-      this.showVariableDialog = false
-      this.periodicVariableValue = data
     }
   }
 }

src/views/ops/Template/components/Variable.vue

@@ -4,6 +4,7 @@
       <el-table :data="variables" class="el-table--fit el-table--border">
         <el-table-column show-overflow-tooltip :label="$tc('Name')" prop="name" />
         <el-table-column show-overflow-tooltip :label="$tc('VariableName')" prop="var_name" />
+        <el-table-column show-overflow-tooltip :label="$tc('DefaultValue')" prop="default_value" />
         <el-table-column :label="$tc('Actions')" align="center" class-name="buttons" fixed="right" width="135">
           <template v-slot="scope">
             <el-button icon="el-icon-minus" size="mini" type="danger" @click="removeVariable(scope.row)" />