From 97ca431ddbf6fd327937d0a9b2022ab9d9f3843d Mon Sep 17 00:00:00 2001
From: wanghaohao <wanghaohao@kylinos.cn>
Date: Tue, 9 Dec 2025 16:34:01 +0800
Subject: [PATCH] add script create form

---
 .../web/src/views/scriptLibrary/addScript.vue | 263 ++++++++++++++++++
 1 file changed, 263 insertions(+)
 create mode 100644 automation/web/src/views/scriptLibrary/addScript.vue

diff --git a/automation/web/src/views/scriptLibrary/addScript.vue b/automation/web/src/views/scriptLibrary/addScript.vue
new file mode 100644
index 00000000..f709e254
--- /dev/null
+++ b/automation/web/src/views/scriptLibrary/addScript.vue
@@ -0,0 +1,263 @@
+<template>
+    <div>
+      <el-card class="box-card">
+        <!-- 添加面包屑 -->
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>
+            <router-link to="/script_library">脚本库</router-link>
+          </el-breadcrumb-item>
+          <el-breadcrumb-item>新建脚本</el-breadcrumb-item>
+        </el-breadcrumb>
+        <h2>新建脚本</h2>
+        <!-- 绑定 rules 属性 -->
+        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
+          <!-- 脚本名称输入框 -->
+          <el-form-item label="脚本名称" prop="name" style="width: 500px;">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入脚本名称"
+              maxlength="60"
+              show-word-limit
+            />
+          </el-form-item>
+          <!-- 场景标签选择框 -->
+          <el-form-item label="场景标签" prop="tag" style="width: 500px;">
+            <el-select v-model="formData.tag" placeholder="请选择场景标签">
+              <el-option
+                v-for="item in sceneOptions"
+                :key="item.name"
+                :label="item.name"
+                :value="item.name"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 描述文本框 -->
+          <el-form-item label="描述" prop="description" style="width: 500px;">
+            <el-input
+              v-model="formData.description"
+              type="textarea"
+              placeholder="请输入描述"
+            />
+          </el-form-item>
+          <!-- 版本号输入框 -->
+          <el-form-item label="版本号" prop="version" style="width: 500px;">
+            <el-input
+              v-model="formData.version"
+              placeholder="请输入版本号"
+            />
+          </el-form-item>
+          <!-- 使用类型输入框 -->
+          <el-form-item label="使用类型" prop="usage_type" style="width: 500px;">
+            <el-input
+              v-model="formData.usage_type"
+              placeholder="请输入使用类型"
+              show-word-limit
+            />
+          </el-form-item>
+          <!-- 语言选择 -->
+          <el-form-item label="编程语言" style="width: 500px;">
+            <el-select v-model="selectedLanguage" placeholder="请选择编程语言">
+              <el-option
+                v-for="item in languageOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <!-- 编辑器 -->
+          <el-form-item label="脚本内容" prop="content">
+            <Editor
+              v-model="formData.content"
+              :language="selectedLanguage"
+              :title="'脚本内容'"
+              height="400px"
+              width="100%"
+            />
+          </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-card>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
+import { seriptAdd, tagList } from '@/api/scriptLibrary';
+import Editor from '@/components/Editor/index.vue';
+import { getUserName } from '@/utils/auth';
+
+const router = useRouter()
+const formRef = ref<FormInstance>();
+
+// 表单数据
+const formData:any = ref({
+  name: '',
+  tag: '',
+  description: '',
+  version: '',
+  content: '',
+  usage_type: '',
+  parameters: []
+});
+
+// 支持的编程语言选项
+const languageOptions = [
+  { label: 'Shell', value: 'Shell' },
+  { label: 'Perl', value: 'Perl' },
+  { label: 'Python', value: 'Python' },
+  { label: 'SQL', value: 'SQL' },
+];
+// 当前选择的语言
+const selectedLanguage = ref('Shell');
+
+// 场景标签选项
+const sceneOptions: any = ref([]);
+const getTagList = async () => {
+  const res = await tagList();
+  if (res.data.code === 200) {
+    sceneOptions.value = res.data.data;
+  }
+};
+
+// 表单验证规则
+const rules = ref<FormRules>({
+  name: [
+    { required: true, message: '请输入脚本名称', trigger: 'blur' },
+    { max: 60, message: '长度不能超过 60 个字符', trigger: 'blur' }
+  ],
+  tag: [],
+  version: [
+    { required: true, message: '请输入版本号', trigger: 'blur' }
+  ],
+  usage_type: [
+    { required: true, message: '请输入使用类型', trigger: 'blur' }
+  ],
+  content: [
+    { required: true, message: '请输入脚本内容', trigger: 'blur' }
+  ]
+});
+
+// 提交表单
+const submitForm = async () => {
+  if (!formRef.value) return;
+  try {
+    await formRef.value.validate();
+    const data = {
+      script: {
+        name: formData.value.name,
+        script_type: selectedLanguage.value, // 脚本类型
+        description: formData.value.description,
+        tag: formData.value.tag, // 单选模式下直接使用标签值
+        usage_type: formData.value.usage_type,
+        modify_user: getUserName()
+      },
+      first_version: {
+        content: formData.value.content,
+        version_desc: formData.value.version,
+        // 确保parameters是数组，即使为空
+        params: formData.value.parameters || []
+      },
+    };
+    
+    const res = await seriptAdd(data);
+    if (res.data.code === 200) {
+      ElMessage.success('提交成功');
+      router.push('/script_library')
+    }
+  } catch (error) {
+    ElMessage.error('表单验证失败');
+  }
+};
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+    // 重置为空
+    formData.value = {
+      name: '',
+      tag: [],
+      description: '',
+      version: '',
+      content: '',
+      parameters: []
+    };
+  }
+};
+
+onMounted(() => {
+  getTagList();
+});
+</script>
+
+<style scoped>
+.box-card {
+  margin: 20px;
+}
+/* 添加面包屑样式 */
+.el-breadcrumb {
+  margin-bottom: 20px;
+  margin-left: 20px;
+}
+
+/* 参数组样式 */
+.param-group {
+  margin-bottom: 15px;
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-radius: 4px;
+}
+
+.param-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.param-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+
+/* 调整输入框和选择框的高度 */
+.el-form-item {
+  margin-bottom: 10px;
+}
+
+.el-input,
+.el-select {
+  height: 32px;
+}
+
+.el-input__wrapper,
+.el-select__wrapper {
+  height: 100%;
+}
+
+/* 调整开关的位置 */
+.el-switch {
+  margin-top: 5px;
+}
+.addParamBtn{
+  margin-left: 10px;
+}
+
+/* 响应式调整 */
+@media (max-width: 1200px) {
+  .param-fields {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
\ No newline at end of file
-- 
Gitee