From 87be028fa2099aed7cccad74db764714aa9bb67c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=8C=AF=E8=8A=B3?= <zhaozhenfang@kylinos.cn>
Date: Tue, 9 Dec 2025 16:23:27 +0800
Subject: [PATCH] feat: update create workflow content

---
 .../web/src/views/workflow/addWorkflow.vue    | 135 ++++++++++--------
 1 file changed, 78 insertions(+), 57 deletions(-)

diff --git a/automation/web/src/views/workflow/addWorkflow.vue b/automation/web/src/views/workflow/addWorkflow.vue
index 76a90d9f..e5a01603 100644
--- a/automation/web/src/views/workflow/addWorkflow.vue
+++ b/automation/web/src/views/workflow/addWorkflow.vue
@@ -8,62 +8,72 @@
       <el-breadcrumb-item>新建编排</el-breadcrumb-item>
     </el-breadcrumb>
     <div class="workflow-form">
-      <el-form
-        ref="ruleFormRef"
-        :model="formData"
-        :rules="rules"
-        label-width="100px"
-        class="demo-ruleForm"
-      >
-        <el-form-item label="编排名称" prop="templateName">
-          <el-input v-model="formData.templateName" placeholder="请输入编排名称" />
-        </el-form-item>
-
-        <el-form-item label="场景类型" prop="sceneTag">
-          <el-select v-model="formData.sceneTag" filterable placeholder="请选择场景类型">
-            <el-option
-              v-for="item in tableData"
-              :label="item.name"
-              :value="item.id"
-              :key="item.id"
-            />
-            <template #footer>
-              <div class="add-tag" @click="addTag" :value="'添加标签'" :key="'添加标签'">
-                <span
-                  ><el-icon class="add-icon"><CirclePlus /></el-icon>添加标签</span
-                >
-              </div>
-            </template>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="资源类型" prop="sourceType">
-          <el-select v-model="formData.sourceType" filterable placeholder="请选择资源类型">
-            <el-option></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="维护人" prop="modify_user">
-          <el-input v-model="formData.modify_user" placeholder="请输入维护人" />
-        </el-form-item>
-        <el-form-item label="调度方式" prop="s_type">
-          <el-radio-group v-model="formData.s_type" size="large" fill="#6cf">
-            <el-radio-button label="任务视角" value="task" />
-            <el-radio-button label="设备视角" value="disk" />
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="场景描述" prop="sceneDescription">
-          <el-input
-            v-model="formData.sceneDescription"
-            type="textarea"
-            :rows="4"
-            placeholder="请输入场景描述"
-          />
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="primary" @click="submitForm">提交</el-button>
-          <el-button @click="resetForm">重置</el-button>
-        </el-form-item>
-      </el-form>
+      <el-collapse v-model="activeName" accordion expand-icon-position="left">
+        <el-collapse-item title="基本信息" name="base_info">
+          <el-form
+            ref="ruleFormRef"
+            :model="formData"
+            :rules="rules"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <el-form-item label="编排名称" prop="templateName">
+              <el-input v-model="formData.templateName" placeholder="请输入编排名称" />
+            </el-form-item>
+
+            <el-form-item label="场景类型" prop="sceneTag">
+              <el-select v-model="formData.sceneTag" filterable placeholder="请选择场景类型">
+                <el-option
+                  v-for="item in tableData"
+                  :label="item.name"
+                  :value="item.id"
+                  :key="item.id"
+                />
+                <template #footer>
+                  <div class="add-tag" @click="addTag" :value="'添加标签'" :key="'添加标签'">
+                    <span
+                      ><el-icon class="add-icon"><CirclePlus /></el-icon>添加标签</span
+                    >
+                  </div>
+                </template>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="资源类型" prop="sourceType">
+              <el-select v-model="formData.sourceType" filterable placeholder="请选择资源类型">
+                <el-option></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="维护人" prop="modify_user">
+              <el-input v-model="formData.modify_user" placeholder="请输入维护人" />
+            </el-form-item>
+            <el-form-item label="调度方式" prop="s_type">
+              <el-radio-group v-model="formData.s_type" size="large">
+                <el-radio-button label="任务视角" value="task" />
+                <el-radio-button label="设备视角" value="disk" />
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="场景描述" prop="sceneDescription">
+              <el-input
+                v-model="formData.sceneDescription"
+                type="textarea"
+                :rows="4"
+                placeholder="请输入场景描述"
+              />
+            </el-form-item>
+
+            <!--             <el-form-item>
+              <el-button type="primary" @click="submitForm">提交</el-button>
+              <el-button @click="resetForm">重置</el-button>
+            </el-form-item> -->
+          </el-form>
+        </el-collapse-item>
+        <el-collapse-item title="编排入参" name="in_params">
+          <el-tag v-for="i in dynamicInParams" :key="i.value" closable :disable-transitions="false">
+            {{ i.value }}
+          </el-tag>
+          <el-button class="button-new-tag" size="small" @click="addInParam"> + </el-button>
+        </el-collapse-item>
+      </el-collapse>
     </div>
 
     <el-dialog
@@ -78,6 +88,7 @@
         @close="handleCloseDialog"
         :edit-data="editData"
       ></AddTag>
+      <AddInParam v-if="rwType === 'add_in_param'"></AddInParam>
     </el-dialog>
   </el-card>
 </template>
@@ -87,6 +98,7 @@ import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { CirclePlus } from '@element-plus/icons-vue';
 import { tagList } from '@/api/tag';
+import AddInParam from './form/AddInParam.vue';
 
 const AddTag = defineAsyncComponent(() => import('@/views/scriptLibrary/form/addTag.vue'));
 const router = useRouter();
@@ -96,6 +108,7 @@ const rwType = ref('add_tag');
 const dialogTitle = ref('新建标签');
 const dialogWidth = ref('50%');
 const editData: any = ref(null);
+const activeName = ref('base_info');
 
 // 表单数据
 const formData = reactive({
@@ -103,7 +116,7 @@ const formData = reactive({
   sceneTag: '',
   sourceType: '',
   modify_user: '',
-  s_type: '',
+  s_type: 'task',
   sceneDescription: '',
   targetServer: '',
 });
@@ -147,6 +160,14 @@ const getList = async () => {
     tableData.value = res.data.data;
   }
 };
+
+const dynamicInParams = ref<{ key: string; value: string }[]>([]);
+// 新建编排入参
+const addInParam = () => {
+  dialogTitle.value = '新建参数';
+  dialogVisible.value = true;
+  rwType.value = 'add_in_param';
+};
 // 关闭弹窗
 const handleCloseDialog = () => {
   dialogVisible.value = false;
-- 
Gitee