ali_ai_learn_web/src/pages/WorkflowAdd.vue

<template>
  <div class="workflow-add container-height">
    <Breadcrumb />
    <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top">
      <div class="padding16 bg_color_fff border_radius_10">
        <div class="gap10">
          <div class="line_vertical"></div>
          <div class="font_size20 bold">文件上传</div>
          <div class="gray999 font_size14">支持格式：JSON、YAML、ZIP（最大100MB）</div>
        </div>
        <div class="mt10">
          <!-- 上传 -->
          <FileUploader
            ref="fileUploader"
            :upload-url="uploadUrl"
            accept=".json,.yaml,.yml,.zip"
            :max-size="100"
            :multiple="false"
            :auto-upload="true"
            :drag="true"
            :list-type="picture-card"
            v-model="uploadedFiles"
            tip="请上传JSON、YAML、ZIP格式的文件，最大100MB"
            @success="handleUploadSuccess"
            @error="handleUploadError"
            @progress="handleUploadProgress"
          />
        </div>
      </div>
      <div class="padding16 bg_color_fff border_radius_10 mt10">
        <div class="gap10">
          <div class="line_vertical"></div>
          <div class="font_size20 bold">基本信息</div>
        </div>
        <div class="mt10">
          <el-form-item label="工作流标题" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入工作流标题"  maxlength="50"/>
          </el-form-item>
          <el-form-item label="工作流类型" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入工作流标题"  maxlength="50" />
          </el-form-item>
          <el-form-item label="工作流预览">
            <FileUploader
              ref="fileUploader"
              :upload-url="uploadUrl"
              :max-size="100"
              :multiple="true"
              :auto-upload="true"
              :list-type="picture-card"
              buttonText="添加文件"
              v-model="uploadedFiles"
              tip="支持批量上传文件，文件格式不限，最多只能上传 5 份文件"
              @success="handleUploadSuccess"
              @error="handleUploadError"
              @progress="handleUploadProgress"
            />
          </el-form-item>
          <el-form-item label="详情">
            <BlockNoteEditor v-model="editorContent" :editable="true"/>
          </el-form-item>
        </div>
      </div>
      <div class="padding16 bg_color_fff border_radius_10 mt10">
        <div class="gap10 mb20">
          <div class="line_vertical"></div>
          <div class="font_size20 bold">价格设置</div>
        </div>
       
        <el-form-item label="付费设置" style="width: 500px">
          <div class="gap20 mt10 mb20">
            <div class="payType active gap10">
              <div class="checkType"></div>
              <div>付费（用户需付费后使用）</div>
            </div>
            <div class="payType gap10">
              <div class="checkType"></div>
              <div>付费（用户需付费后使用）</div>
            </div>
          </div>
          <el-input v-model="ruleForm.name" placeholder="请输入暴米币数量"  maxlength="50" type="number">
            <template #append>暴米币</template>
          </el-input>
        </el-form-item>
      </div>
      <div class="mt20">
        <el-button type="primary" class="font_size16" @click="submitForm">
          <el-icon><Promotion /></el-icon>
          <span class="ml10">发布工作流</span>
        </el-button>
        <el-button class="font_size16" @click="goBack">
          <el-icon><Close /></el-icon>
          <span class="ml10">取消</span>
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import FileUploader from '@/components/FileUploader.vue'
import DGTMessage from '@/utils/message'
import BlockNoteEditor from '@/components/BlockNoteEditor.vue';
const route = useRoute()

// 从路由参数中获取 activePlatform
const activePlatform = ref(route.query.activePlatform || '');

// 上传文件列表
const uploadedFiles = ref([])
const uploadUrl = ref('/api/upload') // 实际项目中替换为真实的上传接口地址

const editorContent = ref(
  [
    {
      type: "paragraph",
      content: [{ type: "text", text: "只读模式" }]
    },
    {
    "id": "378ce968-02c2-4856-888b-c35a355aa84b",
    "type": "codeBlock",
    "props": {
        "language": "text"
    },
    "content": [],
    "children": []
    }
  ]
);
// 表单实例
const ruleFormRef = ref(null)
const ruleForm = reactive({
  name: '',
})
// 校验规则
const rules = reactive({
  name: [
    { required: true, message: '请输入工作流标题', trigger: 'blur' },
  ],
})



onMounted(() => {
});

// 提交表单
const submitForm = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    console.log(valid, fields)
    if (!valid) {
      DGTMessage.warning(fields.name[0].message)
      return
    }
    DGTMessage.success('表单提交成功')
  })
}

  // 上传成功处理
const handleUploadSuccess = (response, rawFile, uploadedFiles) => {
  DGTMessage.success('文件上传成功')
  console.log('上传成功:', response)
}

// 上传失败处理
const handleUploadError = (error, rawFile, uploadedFiles) => {
  DGTMessage.error('文件上传失败')
  console.error('上传失败:', error)
}

// 上传进度处理
const handleUploadProgress = (event, file, uploadedFiles) => {
  console.log('上传进度:', event.percent)
};
</script>
<style lang="scss">
.workflow-add{
  .inputBg{
    background: #F5F7FA !important;
  }
  .el-form-item__label{
    font-size: 16px;
    color: #333333;
    font-weight: 400;
  }
  .el-input__wrapper {
    background: #F5F7FA !important;
    .el-input__inner{
      height: 44px !important;
      line-height: 44px !important;
    }
  }
  .payType{
    background: #EAF0FF;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid transparent;
    padding: 20px 16px;
    &.active{
      background: #EAF0FF;
      border-color: $primary-color;
      .checkType{
        border-color: $primary-color;
      }
    }
    .checkType{
      width: 14px;
      height: 14px;
      border:4px solid transparent;
      border-radius: 50%;
      background-color: #ffffff;
    }
  }
}
</style>