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

<script setup lang="ts">
import CreateModels from "@/components/publishModel/CreateModels.vue";
import EditVersion from "@/components/publishModel/EditVersion.vue";
import UploadImg from "@/components/publishModel/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 step2Ref = ref(null);
const currentStep = ref(1);
const formData = ref({
  modelProduct: {},
  modelVersionList: [],
});

async function initFormData() {
  if (type === "add") {
    formData.value = {
      modelProduct: {
        jurisdiction:1, //是否公开
        modelName: "",
        modelType: null, // ,，模型类型
        category: null, // 垂类分类
        functions: null, // '模型功能',
        tags: '', // 标签（最多三个，切割）string
        tagsList:[],
        activityId: null, // 参与活动string
        isOriginal: 1, // 几代表原创
        originalAuthorName: "",
        isFree: 1, //0付费
        productPrice:0, //商品价格
      },

      modelVersionList: [
        {
          objectKey:null,
          id:null,
          isEncrypt:0,
          delFlag: "0", // 0代表存在 2代表删除
          versionName: "", //	版本名称
          modelVersionType: null, // 基础模型
          filePath: "", // 文件路径
          fileName: "", // 文档里没有 ，表里没有
          versionDescription: "", // 版本描述

          sampleImagePaths: [], // 第三部的图片路径最多20张,切割
          triggerWords: "", // 触发词
          isPublic: 1, // 权限是否公开权限 1公开 0自见

          isOnlineUse: 1, // 是否允许在线使用
          allowDownloadImage: 1, // 允许下载生图
          allowSoftwareUse: 1, // 允许在软件旗下使用
          allowFusion: 1, // 允许进行融合
          allowCommercialUse: 1, // 是否允许商用
          // 允许模型转售或者融合手出售字段没找到？
          isExclusiveModel: 0, // 是否为独家模型这个字段
          hideImageGenInfo:0, //隐藏图片生成信息

        },
      ],
    };
  } else {
    try {
      const res = await request.get(`/model/finbyid?id=${id}`);
      formData.value = res.data;
      formData.value.modelProduct.modelType = res.data.modelProduct.modelType.toString();

      if(res.data.modelProduct.activityId != null){
        formData.value.modelProduct.activityId = Number(res.data.modelProduct.activityId);
      }

      if(formData.value.modelProduct.tags){
        formData.value.modelProduct.tagsList = JSON.parse(formData.value.modelProduct.tags);
      }else{
        formData.value.modelProduct.tagsList = []
      }
      if(formData.value.modelVersionList.length > 0){
        for(let i = 0; i < formData.value.modelVersionList.length; i ++){
          formData.value.modelVersionList[i].sampleImagePaths = formData.value.modelVersionList[i].sampleImagePaths.split(',')
          formData.value.modelVersionList[i].modelVersionType = formData.value.modelVersionList[i].modelVersionType.toString()
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
}
initFormData();

const timeLineList = ref([
  {
    name: "创建模型",
    index: 1,
  },
  {
    name: "编辑版本",
    index: 2,
  },
  {
    name: "上传图片",
    index: 3,
  },
]);
async function nextStep() {
  if(currentStep.value === 1 && type === 'add'){
    const name =  formData.value.modelProduct.modelName
    try {
      const res = await request.get(`/model/selectModelByName?name=${name}`);
      if (res.code == 200) {
        if(res.data === 1){ //存在为0 不存在为1
          currentStep.value += 1;
        }else{
          message.warning('该模型名称已存在')
        }
      }
    } catch (err) {
      console.log(err);
    }
  }else{
    currentStep.value += 1;
  }
}
function prevStep() {
  currentStep.value -= 1;
}
function handleAddVersion() {
  if (step2Ref.value) {
    step2Ref.value?.addVersion();
  }
}
</script>

<template>
  <div class="mx-auto py-6">
    <div class="container mx-auto w-[700px]">
      <div class="flex items-center justify-between mb-4">
        <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>
      <div class="form-container">
        <NConfigProvider>
          <NMessageProvider>
            <div v-if="currentStep === 1" class="first-step">
              <CreateModels v-model="formData" @create-models-next="nextStep" />
            </div>

            <div v-if="currentStep === 2" class="second-step">
              <EditVersion
                ref="step2Ref"
                v-model="formData"
                @prev-step="prevStep"
                @next-step="nextStep"
              />
            </div>
            <div v-if="currentStep === 3" class="third-step">
              <UploadImg v-model="formData" @pre-step="prevStep" />
            </div>
          </NMessageProvider>
        </NConfigProvider>
      </div>
    </div>
  </div>
</template>