From 2800a488fc02f73c34cfb4c229f63fc5fdcae729 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 17:29:52 +0800
Subject: [PATCH] feat: add out_param page for create workflow

---
 .../web/src/views/workflow/addWorkflow.vue    |  17 ++-
 .../src/views/workflow/form/AddOutParam.vue   | 111 ++++++++++++++++++
 2 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 automation/web/src/views/workflow/form/AddOutParam.vue

diff --git a/automation/web/src/views/workflow/addWorkflow.vue b/automation/web/src/views/workflow/addWorkflow.vue
index 34dd8fcd..7d8c649d 100644
--- a/automation/web/src/views/workflow/addWorkflow.vue
+++ b/automation/web/src/views/workflow/addWorkflow.vue
@@ -71,7 +71,9 @@
           <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-button class="button-new-tag" size="small" @click="addInParam">
+            +添加基本参数
+          </el-button>
         </el-collapse-item>
         <el-collapse-item title="编排出参" name="out_params">
           <el-tag
@@ -82,8 +84,11 @@
           >
             {{ i.value }}
           </el-tag>
-          <el-button class="button-new-tag" size="small" @click="addOutParam"> + </el-button>
+          <el-button class="button-new-tag" size="small" @click="addOutParam">
+            + 添加输出参数
+          </el-button>
         </el-collapse-item>
+        <el-collapse-item title="编排流程" name="flow"> </el-collapse-item>
       </el-collapse>
     </div>
 
@@ -100,6 +105,7 @@
         :edit-data="editData"
       ></AddTag>
       <AddInParam v-if="rwType === 'add_in_param'" @close="dialogVisible = false"></AddInParam>
+      <AddOutParam v-if="rwType === 'add_out_param'" @close="dialogVisible = false"></AddOutParam>
     </el-dialog>
   </el-card>
 </template>
@@ -110,6 +116,7 @@ import { useRouter } from 'vue-router';
 import { CirclePlus } from '@element-plus/icons-vue';
 import { tagList } from '@/api/tag';
 import AddInParam from './form/AddInParam.vue';
+import AddOutParam from './form/AddOutParam.vue';
 
 const AddTag = defineAsyncComponent(() => import('@/views/scriptLibrary/form/addTag.vue'));
 const router = useRouter();
@@ -182,7 +189,11 @@ const addInParam = () => {
 };
 
 // 新建编排出参
-const addOutParam = () => {};
+const addOutParam = () => {
+  dialogTitle.value = '新建参数';
+  dialogVisible.value = true;
+  rwType.value = 'add_in_param';
+};
 // 关闭弹窗
 const handleCloseDialog = () => {
   dialogVisible.value = false;
diff --git a/automation/web/src/views/workflow/form/AddOutParam.vue b/automation/web/src/views/workflow/form/AddOutParam.vue
new file mode 100644
index 00000000..830edd0e
--- /dev/null
+++ b/automation/web/src/views/workflow/form/AddOutParam.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="parameter-manager">
+    <!-- 已添加的参数列表 -->
+    <div class="parameter-list">
+      <!-- 参数配置 -->
+      <div class="text-parameter">
+        <!-- 参数配置表单 -->
+        <el-form :model="param" ref="formRef" :rules="rules" label-width="auto">
+          <!-- 参数类型 -->
+          <el-form-item label="参数类型" prop="type">
+            <el-radio-group v-model="param.type">
+              <el-radio
+                border
+                v-for="type in parameterTypes"
+                :key="type.value"
+                :value="type.value"
+                style="margin: 2px"
+                >{{ type.label }}</el-radio
+              >
+            </el-radio-group>
+          </el-form-item>
+          <!-- 编排参数名称 -->
+          <el-form-item label="编排参数名称" prop="name">
+            <el-input
+              v-model="param.name"
+              placeholder="请输入参数名称（字母或数字）"
+              maxlength="50"
+              show-word-limit
+            >
+              <template #label>
+                <span class="required-label">*</span>
+                编排参数名称
+              </template>
+            </el-input>
+          </el-form-item>
+
+          <!-- 参数描述 -->
+          <el-form-item label="参数描述" prop="description">
+            <el-input
+              v-model="param.description"
+              type="textarea"
+              placeholder="请输入参数描述"
+              maxlength="1000"
+              show-word-limit
+              :rows="3"
+            />
+          </el-form-item>
+
+          <!-- 是否必填 -->
+          <el-form-item label="是否必填" prop="required">
+            <el-checkbox v-model="param.required"> 必填 </el-checkbox>
+          </el-form-item>
+          <el-form-item>
+            <!--提交 -->
+            <el-button type="primary" @click="submitForm(formRef)"> 确定 </el-button>
+            <el-button @click="handleCancle">取消</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { FormInstance, FormRules } from 'element-plus';
+import { reactive, ref } from 'vue';
+
+// 参数类型定义
+interface ParameterItem {
+  type: string;
+  name: string;
+  defaultValue: string;
+  description: string;
+  required: boolean;
+}
+const formRef = ref<FormInstance>();
+const emit = defineEmits(['close']);
+
+// 参数类型列表
+const parameterTypes = ref([
+  { label: '文本', value: 'text' },
+  { label: '密码', value: 'password' },
+]);
+
+const param = ref<ParameterItem>({
+  name: '',
+  type: '',
+  defaultValue: '',
+  description: '',
+  required: false,
+});
+
+const rules = reactive<FormRules<typeof param>>({
+  name: [{ required: true, message: '请输入参数名（字母或数字）', trigger: 'blur' }],
+  description: [{ required: true, message: '请输入参数描述', trigger: 'blur' }],
+});
+
+// 提交方法
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 补充提交参数流程
+    }
+  });
+};
+// 取消提交
+const handleCancle = () => {
+  emit('close');
+};
+</script>
-- 
Gitee