✨ 计划任务选择模板.

orion-ops-ui/src/views/exec/exec-job/components/exec-job-form-drawer.vue

@@ -69,11 +69,20 @@
           </a-col>
           <!-- 执行命令 -->
           <a-col :span="24">
-            <a-form-item field="command"
+            <a-form-item class="command-item"
+                         field="command"
                          label="执行命令"
                          :hide-label="true"
                          :wrapper-col-props="{ span: 24 }"
                          :help="'使用 @{{ xxx }} 来替换参数, 输入_可以获取全部变量'">
+              <template #extra>
+                <span v-permission="['asset:exec-template:query']"
+                      class="span-blue usn pointer"
+                      @click="emits('openTemplate')">
+                  从模板中选择
+                </span>
+              </template>
+              <!-- 命令框 -->
               <exec-editor v-model="formModel.command"
                            container-class="command-editor"
                            theme="vs-dark"
@@ -94,6 +103,7 @@
 
 <script lang="ts" setup>
   import type { ExecJobUpdateRequest } from '@/api/exec/exec-job';
+  import type { ExecTemplateQueryResponse } from '@/api/exec/exec-template';
   import { onUnmounted, ref } from 'vue';
   import useLoading from '@/hooks/loading';
   import useVisible from '@/hooks/visible';
@@ -104,7 +114,7 @@
   import { useDictStore } from '@/store';
   import ExecEditor from '@/components/view/exec-editor/index.vue';
 
-  const emits = defineEmits(['added', 'updated', 'openHost', 'testCron']);
+  const emits = defineEmits(['added', 'updated', 'openHost', 'openTemplate', 'testCron']);
 
   const { visible, setVisible } = useVisible();
   const { loading, setLoading } = useLoading();
@@ -170,7 +180,13 @@
     formModel.value.hostIdList = hosts;
   };
 
-  defineExpose({ openAdd, openUpdate, setSelectedHost });
+  // 通过模板设置
+  const setWithTemplate = (template: ExecTemplateQueryResponse) => {
+    formModel.value.command = template.command;
+    formModel.value.timeout = template.timeout;
+  };
+
+  defineExpose({ openAdd, openUpdate, setSelectedHost, setWithTemplate });
 
   // 打开选择主机
   const openSelectHost = () => {
@@ -249,6 +265,14 @@
     }
   }
 
+  .command-item {
+    :deep(.arco-form-item-extra) {
+      margin-top: -18px;
+      width: 100%;
+      text-align: end;
+    }
+  }
+
   .command-editor {
     width: 100%;
     height: calc(100vh - 264px);

orion-ops-ui/src/views/exec/exec-job/index.vue

@@ -11,11 +11,15 @@
                           @added="modalAddCallback"
                           @updated="modalUpdateCallback"
                           @open-host="(e) => hostModal.open(e)"
+                          @open-template="() => templateModal.open()"
                           @test-cron="openNextCron" />
-    <!-- 详情模态框 -->
+    <!-- 任务详情模态框 -->
     <exec-job-detail-drawer ref="detail" />
     <!-- cron 执行时间模态框 -->
     <next-cron-modal ref="nextCron" />
+    <!-- 执行模板模态框 -->
+    <exec-template-modal ref="templateModal"
+                         @selected="(e) => drawer.setWithTemplate(e)" />
     <!-- 主机模态框 -->
     <authorized-host-modal ref="hostModal"
                            @selected="(e) => drawer.setSelectedHost(e)" />
@@ -37,12 +41,14 @@
   import ExecJobDetailDrawer from './components/exec-job-detail-drawer.vue';
   import AuthorizedHostModal from '@/components/asset/host/authorized-host-modal/index.vue';
   import NextCronModal from '@/components/meta/expression/next-cron-modal/index.vue';
+  import ExecTemplateModal from '@/components/exec/template/modal/index.vue';
 
   const render = ref(false);
   const table = ref();
   const drawer = ref();
   const detail = ref();
   const nextCron = ref();
+  const templateModal = ref();
   const hostModal = ref();
 
   // 添加回调