mcwl-pc/app/pages/publish-workflow/index.vue

<script setup lang="ts">
import EditVersion from "@/components/publishWorkFlow/EditVersion.vue";
import EditWorkFlow from "@/components/publishWorkFlow/EditWorkFlow.vue";
import UploadImg from "@/components/publishWorkFlow/UploadImg.vue";
import { CirclePlus } from "lucide-vue-next";
import { NConfigProvider, NMessageProvider } from "naive-ui";
import { useRoute } from "vue-router";
const message = useMessage();

const route = useRoute();
const { type, id } = route.query;
const formData = ref();

async function initFormData() {
  if (type === "add") {
    formData.value = {
      workFlow: {
        jurisdiction: 1, // auditStatus	（0全部状态 1已发布-公开 2已发布-仅自己可见 3审核中 4审核未通过）
        original: 0, // original	0原创 1转载
        onlineUse: 0, // 是否允许在线使用(0允许 1不允许)
        download: 0, // 是否允许下载工作流(0允许 1不允许)
        sell: 1, // 是否允许出售或商用(0允许 1不允许)
        typeList: [],
      },
      workFlowVersionList: [
        {
          id:null,
          versionName: "",
          hideGenInfo: 0, // 是否隐藏图片生成信息
          versionDescription: "", // 富文本
          filePath: "", // 文件路径
          fileName: "", // 文件名
          delFlag: "0", // 是否删除 0存在 2删除
          imagePaths: [],
        },
      ],
    };
  } else {
    // type参数 1翻译
    try {
      const res = await request.get(`/WorkFlow/selectWorkFlowVersionById?id=${id}`);
      formData.value = res.data;
      if (formData.value.workFlow.type) {
        formData.value.workFlow.typeList = formData.value.workFlow.type.split(",");
      } else {
        formData.value.workFlow.typeList = [];
      }
      if (formData.value.workFlow.activityParticipation) {
        formData.value.workFlow.activityParticipation = Number(
          formData.value.workFlow.activityParticipation
        );
      }
      if (formData.value.workFlowVersionList.length > 0) {
        for (let i = 0; i < formData.value.workFlowVersionList.length; i++) {
          if (formData.value.workFlowVersionList[i].imagePaths) {
            formData.value.workFlowVersionList[
              i
            ].imagePaths = formData.value.workFlowVersionList[i].imagePaths.split(",");
          }
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
}
initFormData();
const EditVersionRef = ref();
const currentStep = ref(1);

function handleAddVersion() {
  EditVersionRef.value.addVersion();
}
async function nextStep() {
  // currentStep.value += 1;
  if(currentStep.value === 1 && type === 'add'){
    const name =  formData.value.workFlow.workflowName
    try {
      const res = await request.get(`/WorkFlow/selectWorkFlowByName?name=${name}`);
      if (res.code == 200) {
        if(res.data === 0 ){
          currentStep.value += 1;
        }else{
          message.warning('该工作流名称已存在')
        }
      }
    } catch (err) {
      console.log(err);
    }
  }else{
    currentStep.value += 1;
  }
}
function preStep() {
  currentStep.value -= 1;
}
const timeLineList = ref([
  {
    name: "编辑工作流",
    index: 1,
  },
  {
    name: "编辑版本",
    index: 2,
  },
  {
    name: "上传图片",
    index: 3,
  },
]);
</script>

<template>
  <div class="mx-auto py-6">
    <div class="mx-auto flex justify-center">
      <div class="form-container mx-auto">
        <div class="flex items-center justify-between">
          <div class="w-[60%]">
            <TimeLine :time-line-list="timeLineList" :current-step="currentStep" />
          </div>
          <div
            v-if="currentStep === 2"
            class="cursor-pointer flex items-center justify-center rounded-full border border-solid border-[#000] px-4 py-1"
            @click="handleAddVersion"
          >
            <CirclePlus class="mr-2" />
            添加版本
          </div>
        </div>

        <NConfigProvider>
          <NMessageProvider>
            <div v-if="currentStep === 1" class="first-step mx-auto">
              <EditWorkFlow v-model="formData" @next-step="nextStep" />
            </div>
            <div v-if="currentStep === 2" class="second-step">
              <EditVersion
                ref="EditVersionRef"
                v-model="formData"
                @pre-step="preStep"
                @next-step="nextStep"
              />
            </div>

            <div v-if="currentStep === 3" class="third-step">
              <UploadImg v-model="formData" @pre-step="preStep" />
            </div>
          </NMessageProvider>
        </NConfigProvider>
      </div>
    </div>
  </div>
</template>