feat: ASW-188 Job 新增界面修改

4 files changed, 141 insertions, 57 deletions

diff --git a/src/i18n/en.js b/src/i18n/en.js
index dc3c647..c845e38 100644
--- a/src/i18n/en.js
+++ b/src/i18n/en.js
@@ -113,6 +113,7 @@ export default {
     title: 'Title',
     time: "Time",
     by: 'by',
+    basic: 'Basic',
   },
   application: {
     application: 'Application',
@@ -351,6 +352,13 @@ export default {
     pending_detail_message: 'This job has not been solved yet',
     retry_job: 'Retry this job',
     cancel_job: 'Cancel this job',
+    running_parameters: 'Job running parameters',
+    reInstall: 'Reinstall',
+    clear_cache: 'Clear cache',
+    unInstall: 'Uninstall',
+    reInstall_tips: 'Before running the job, if the application has already been installed, whether to reinstall it',
+    clear_cache_tips: 'Before running the job, whether to clear the application cache',
+    unInstall_tips: 'After the job is completed, whether to uninstall the application',
   },
   playbook: {
     playbook: 'Playbook',
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index cd175fe..0aea239 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -113,6 +113,7 @@ export default {
     title: '标题',
     time: "时间",
     by: '由',
+    basic: '基本信息',
   },
   application: {
     application: '应用',
@@ -351,6 +352,13 @@ export default {
     pending_detail_message: '此任务待处理',
     retry_job: '重试此任务',
     cancel_job: '取消此任务',
+    running_parameters: '任务运行参数',
+    reInstall: '重装',
+    clear_cache: '清除缓存',
+    unInstall: '卸载',
+    reInstall_tips: '运行任务之前，如果应用程序已经安装，是否重新安装',
+    clear_cache_tips: '运行任务之前，是否清除应用缓存',
+    unInstall_tips: '任务运行完毕，是否卸载应用程序',
   },
   playbook: {
     playbook: '脚本',
diff --git a/src/views/jobs/detail.vue b/src/views/jobs/detail.vue
index 5d4d584..27fd4d3 100644
--- a/src/views/jobs/detail.vue
+++ b/src/views/jobs/detail.vue
@@ -13,63 +13,120 @@
           label-position="left"
           label-width="auto"
         >
-          <!-- package -->
-          <el-form-item
-            :label="t('job.package') + ':'"
-            label-width="150"
-            prop="package"
-            size="default"
-          >
-            <el-select
-              ref="selectPackage"
-              v-model="ruleForm.package"
-              @change="changePackage()"
+          <!-- basic -->
+          <div class="form-title">
+            <span>{{ t('overall.basic') }}</span>
+          </div>
+          <div class="detail-form">
+            <!-- package -->
+            <el-form-item
+              :label="t('job.package') + ':'"
+              label-width="150"
+              prop="package"
+              size="default"
             >
-              <el-option
-                v-for="pk in packageList"
-                :key="pk.id"
-                :label="pk.name"
-                :value="pk.id"
+              <el-select
+                ref="selectPackage"
+                v-model="ruleForm.package"
+                @change="changePackage()"
               >
-                <div class="job-package">
-                  {{ pk.name
-                  }}<span class="job-package__version">{{ pk.version }}</span>
-                </div>
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <!-- environment -->
-          <el-form-item
-            :label="t('job.environment') + ':'"
-            label-width="150"
-            prop="environment"
-            size="default"
-          >
-            <el-select v-model="ruleForm.environment">
-              <el-option
-                v-for="env in environmentList"
-                :key="env.id"
-                :label="env.name"
-                :value="env.id"
-              />
-            </el-select>
-          </el-form-item>
-          <!-- playbook -->
-          <el-form-item
-            :label="t('job.playbook') + ':'"
-            label-width="150"
-            prop="playbook"
-            size="default"
-          >
-            <el-select v-model="ruleForm.playbook">
-              <el-option
-                v-for="pb in playbookList"
-                :key="pb.id"
-                :label="pb.name"
-                :value="pb.id"
-              />
-            </el-select>
-          </el-form-item>
+                <el-option
+                  v-for="pk in packageList"
+                  :key="pk.id"
+                  :label="pk.name"
+                  :value="pk.id"
+                >
+                  <div class="job-package">
+                    {{ pk.name
+                    }}<span class="job-package__version">{{ pk.version }}</span>
+                  </div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <!-- environment -->
+            <el-form-item
+              :label="t('job.environment') + ':'"
+              label-width="150"
+              prop="environment"
+              size="default"
+            >
+              <el-select v-model="ruleForm.environment">
+                <el-option
+                  v-for="env in environmentList"
+                  :key="env.id"
+                  :label="env.name"
+                  :value="env.id"
+                />
+              </el-select>
+            </el-form-item>
+            <!-- playbook -->
+            <el-form-item
+              :label="t('job.playbook') + ':'"
+              label-width="150"
+              prop="playbook"
+              size="default"
+            >
+              <el-select v-model="ruleForm.playbook">
+                <el-option
+                  v-for="pb in playbookList"
+                  :key="pb.id"
+                  :label="pb.name"
+                  :value="pb.id"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
+          <!-- job running parameters -->
+          <div class="form-title">
+            <span>{{ t('job.running_parameters') }}</span>
+          </div>
+          <div class="detail-form">
+            <!-- reInstall -->
+            <el-form-item
+                    :label="t('job.reInstall') + ':'"
+                    label-width="150"
+                    prop="parameters.reInstall"
+                    size="default"
+                    class="running-parameters__bottom"
+            >
+              <div class="detail-item-desc">
+                <el-switch v-model="parameters.reInstall" key="reInstall"/>
+                <span class="item-desc">{{
+                    t('job.reInstall_tips')
+                  }}</span>
+              </div>
+            </el-form-item>
+            <!-- clear cache -->
+            <el-form-item
+                    :label="t('job.clear_cache') + ':'"
+                    label-width="150"
+                    prop="parameters.clearCache"
+                    size="default"
+                    class="running-parameters__bottom"
+            >
+              <div class="detail-item-desc">
+                <el-switch v-model="parameters.clearCache" key="clearCache"/>
+                <span class="item-desc">{{
+                    t('job.clear_cache_tips')
+                  }}</span>
+              </div>
+            </el-form-item>
+            <!-- uninstall -->
+            <el-form-item
+                    :label="t('job.unInstall') + ':'"
+                    label-width="150"
+                    prop="parameters.unInstall"
+                    size="default"
+                    class="running-parameters__bottom"
+            >
+              <div class="detail-item-desc">
+                <el-switch v-model="parameters.unInstall" key="unInstall"/>
+                <span class="item-desc">{{
+                    t('job.unInstall_tips')
+                  }}</span>
+              </div>
+            </el-form-item>
+          </div>
         </el-form>
       </div>
     </div>
@@ -118,6 +175,12 @@ const ruleForm = reactive({
   package: '',
   environment: '',
   playbook: '',
+  parameters: ''
+});
+const parameters = reactive({
+  reInstall: false,
+  clearCache: false,
+  unInstall: false
 });
 
 const rules = reactive({
@@ -144,6 +207,7 @@ const save = async () => {
         packageId: ruleForm.package,
         environmentId: ruleForm.environment,
         playbookId: ruleForm.playbook,
+        parameters: JSON.stringify(parameters)
       };
       let res = await jobAddApi(workspace.value.id, params);
 
@@ -240,8 +304,11 @@ onBeforeMount(async () => {
 <style lang="scss">
 .job-content {
   .job-form {
-    padding-left: 50px !important;
-    padding-top: 40px !important;
+    padding-left: 30px !important;
+    padding-top: 4px !important;
+    .running-parameters__bottom {
+      margin-bottom: 2px;
+    }
   }
 }
 .job-package {
diff --git a/src/views/jobs/index.vue b/src/views/jobs/index.vue
index 71f5e78..8bd98e5 100644
--- a/src/views/jobs/index.vue
+++ b/src/views/jobs/index.vue
@@ -349,6 +349,7 @@
         environmentId: get(row, 'environment.id', null),
         packageId: get(row, 'package.id', null),
         playbookId: get(row, 'playbook.id', null),
+        parameters: get(row, 'parameters', null),
         tags: row.tags
       };
       const res = await jobAddApi(workspace.value.id, params);