374 lines
11 KiB
Vue
374 lines
11 KiB
Vue
<script setup lang="ts">
|
||
import { commonApi } from "@/api/common";
|
||
import type { FormInst } from "naive-ui";
|
||
import { computed, watch } from "vue";
|
||
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Object,
|
||
required: true,
|
||
},
|
||
});
|
||
const emit = defineEmits(["update:modelValue", "createModelsNext"]);
|
||
const localForm = computed({
|
||
get() {
|
||
return props.modelValue;
|
||
},
|
||
set(value) {
|
||
emit("update:modelValue", value);
|
||
},
|
||
});
|
||
|
||
const options: any[] = [];
|
||
watch(
|
||
() => localForm.value,
|
||
(newVal) => {
|
||
emit("update:modelValue", newVal);
|
||
},
|
||
{ immediate: true, deep: true }
|
||
);
|
||
|
||
const formRef = ref<FormInst | null>(null);
|
||
const rules = {
|
||
"modelProduct.modelName": {
|
||
required: true,
|
||
message: "",
|
||
trigger: "blur",
|
||
},
|
||
"modelProduct.modelType": {
|
||
required: true,
|
||
message: "",
|
||
trigger: "blur",
|
||
},
|
||
};
|
||
|
||
const modelChildCategory = ref([]); // 垂类二级
|
||
const model_category = ref([]); // 模型类型
|
||
const categoryList = ref([]);
|
||
const work_flow_functions = ref([]);
|
||
async function getDictType() {
|
||
try {
|
||
const [res1, res2, res3, res4] = await Promise.all([
|
||
commonApi.dictType({ type: "model_part_category" }),
|
||
commonApi.dictType({ type: "model_child_category" }),
|
||
commonApi.dictType({ type: "model_type" }),
|
||
commonApi.dictType({ type: "work_flow_functions" }),
|
||
]);
|
||
|
||
// modelPartCategory.value = res1.data
|
||
modelChildCategory.value = res2.data;
|
||
model_category.value = res3.data;
|
||
work_flow_functions.value = res4.data;
|
||
categoryList.value = res1.data;
|
||
// 遍历第一个数据数组，检查是否有子项
|
||
categoryList.value.forEach((item: any) => {
|
||
item.dictValue += 99999;
|
||
// 给每个对象添加一个children属性，初始化为空数组
|
||
item.children = [];
|
||
// 遍历第二个数据数组
|
||
modelChildCategory.value.forEach((child) => {
|
||
// 检查parentId是否与dictValue相等
|
||
if (child.partId === item.dictCode) {
|
||
// 将符合条件的子项放入children数组中
|
||
item.children.push(child);
|
||
}
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
getDictType();
|
||
|
||
const activityList = ref([]);
|
||
async function getActivityList() {
|
||
try {
|
||
const res = await request.post("/ToActivity/list", {});
|
||
activityList.value = res.rows;
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
getActivityList();
|
||
|
||
const originalBtnList = ref([
|
||
{
|
||
label: "原创",
|
||
value: 1,
|
||
},
|
||
{
|
||
label: "转载",
|
||
value: 0,
|
||
},
|
||
]);
|
||
function nextStep() {
|
||
formRef.value?.validate((errors) => {
|
||
if (!errors) {
|
||
emit("createModelsNext");
|
||
} else {
|
||
console.log("error", errors);
|
||
}
|
||
});
|
||
}
|
||
function handleIsOriginal(value: number) {
|
||
localForm.value.modelProduct.isOriginal = value;
|
||
// if (value === 0) {
|
||
// localForm.value.modelProduct.originalAuthorName = ''
|
||
// }
|
||
}
|
||
function handleCategoryUpdateValue(value) {
|
||
// 如果需要，可以在这里处理值的格式
|
||
// if (value) {
|
||
// // 确保值的格式正确
|
||
// localForm.value.modelProduct.category = value.includes('-') ? value : `${value}-0`
|
||
// }
|
||
}
|
||
const isPublicList = [
|
||
{
|
||
label: "公开",
|
||
value: 1,
|
||
},
|
||
{
|
||
label: "仅自己可见",
|
||
value: 0,
|
||
},
|
||
];
|
||
|
||
|
||
const isFreeList = ref([
|
||
{
|
||
label: "免费",
|
||
value: 1,
|
||
},
|
||
{
|
||
label: "付费",
|
||
value: 0,
|
||
},
|
||
]);
|
||
|
||
function handleIsFree(value: number) {
|
||
// localForm.value.modelVersionList[index].isFree = value;
|
||
localForm.value.modelProduct.isFree = value;
|
||
}
|
||
// function changeModelType(item){
|
||
// }
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<div class="bg-gray-100 p-4 rounded-lg">
|
||
<n-form
|
||
ref="formRef"
|
||
:label-width="80"
|
||
:model="localForm"
|
||
:rules="rules"
|
||
size="large"
|
||
>
|
||
<n-form-item label="模型名称" path="modelProduct.modelName">
|
||
<n-input
|
||
v-model:value="localForm.modelProduct.modelName"
|
||
placeholder="输入模型名"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="模型类型" path="modelProduct.modelType">
|
||
<!-- @update:value="changeModelType" -->
|
||
<n-select
|
||
v-model:value="localForm.modelProduct.modelType"
|
||
label-field="dictLabel"
|
||
value-field="dictValue"
|
||
placeholder="请选择模型类型"
|
||
:options="model_category"
|
||
/>
|
||
</n-form-item>
|
||
<div>内容类别</div>
|
||
<div class="-mb-5 text-gray-400 text-[12px]">
|
||
填写类别可让模型获得更精准的流量, 平台也有权基于标准修改你的类别标签
|
||
</div>
|
||
<n-form-item path="category">
|
||
<n-cascader
|
||
v-model:value="localForm.modelProduct.category"
|
||
placeholder="垂类"
|
||
:options="categoryList"
|
||
label-field="dictLabel"
|
||
value-field="dictValue"
|
||
check-strategy="child"
|
||
@update:value="handleCategoryUpdateValue"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item
|
||
path="functions"
|
||
class="-mt-12"
|
||
v-if="localForm.modelProduct.modelType !== '0'"
|
||
>
|
||
<n-select
|
||
v-model:value="localForm.modelProduct.functions"
|
||
label-field="dictLabel"
|
||
value-field="dictValue"
|
||
placeholder="功能"
|
||
:options="work_flow_functions"
|
||
/>
|
||
</n-form-item>
|
||
|
||
<div>标签</div>
|
||
<div class="-mb-5 text-gray-400 text-[12px]">
|
||
添加标签将自动推荐给可能感兴趣的人
|
||
</div>
|
||
<n-form-item path="category">
|
||
<!-- <n-select
|
||
v-model:value="localForm.modelProduct.tags"
|
||
:options="options"
|
||
filterable
|
||
tag
|
||
multiple
|
||
placeholder="请选择或输入标签"
|
||
@update:value="handleUpdate"
|
||
/> -->
|
||
|
||
<n-select
|
||
v-model:value="localForm.modelProduct.tagsList"
|
||
filterable
|
||
multiple
|
||
tag
|
||
placeholder="输入，按回车确认"
|
||
:show-arrow="false"
|
||
:show="false"
|
||
/>
|
||
</n-form-item>
|
||
<div>参与活动</div>
|
||
<div class="-mb-5 text-gray-400 text-[12px]">参与特定活动或比赛,下拉选择</div>
|
||
<n-form-item path="activityId">
|
||
<n-select
|
||
v-model:value="localForm.modelProduct.activityId"
|
||
label-field="activityName"
|
||
value-field="id"
|
||
placeholder="请选择参与哪个活动"
|
||
:options="activityList"
|
||
/>
|
||
</n-form-item>
|
||
</n-form>
|
||
|
||
|
||
<div class="">权限设置</div>
|
||
<div class="mt-1 mb-2 text-gray-400 text-[12px]">可见范围</div>
|
||
<div>
|
||
<n-radio-group
|
||
v-model:value="localForm.modelProduct.jurisdiction"
|
||
name="radiogroup"
|
||
>
|
||
<n-space>
|
||
<n-radio
|
||
v-for="(isPublicItem, isPublicIndex) in isPublicList"
|
||
:key="isPublicIndex"
|
||
:value="isPublicItem.value"
|
||
>
|
||
{{ isPublicItem.label }}
|
||
</n-radio>
|
||
</n-space>
|
||
</n-radio-group>
|
||
</div>
|
||
<div v-if="localForm.modelProduct.jurisdiction === 1">
|
||
<div class="mt-4 mb-1 text-gray-400 text-[12px]">付费设置</div>
|
||
<div class="flex justify-center items-center bg-white h-10 rounded-lg">
|
||
<div
|
||
v-for="(item, index) in isFreeList"
|
||
:key="index"
|
||
:style="{
|
||
backgroundColor:
|
||
localForm.modelProduct.isFree === item.value ? 'rgba(49, 98, 255, 0.1)' : '#fff',
|
||
color: localForm.modelProduct.isFree === item.value ? '#3162ff' : '#000',
|
||
}"
|
||
class="flex-1 rounded-lg h-full flex items-center justify-center cursor-pointer"
|
||
@click="handleIsFree(item.value)"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
<!-- <div class="mt-1 mb-2 text-gray-500 text-[12px]">
|
||
选择会员专属或会员下载视为您已经阅读
|
||
<span class="text-[#3162ff] cursor-pointer underline"
|
||
>《会员模型许可协议》</span
|
||
>
|
||
并同意其中条款
|
||
</div> -->
|
||
<div v-if="localForm.modelProduct.isFree === 0" class="text-[12px]">
|
||
<n-form-item size="large">
|
||
<n-input
|
||
v-model:value="localForm.modelProduct.productPrice"
|
||
placeholder="请输入付费金额"
|
||
type="number"
|
||
/>
|
||
</n-form-item>
|
||
<!-- <div>会员下载模型</div>
|
||
<div class="text-gray-500">
|
||
下载模型需购买会员，在线生图对所有人开放，无生图次数限制；会员下载的模型版本生成图片默认可商用。
|
||
</div> -->
|
||
</div>
|
||
<div v-else class="mb-4">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div>原创内容</div>
|
||
<div
|
||
class="flex justify-center items-center mt-5 bg-white h-12 rounded-lg border border-gray-100"
|
||
>
|
||
<div
|
||
v-for="(item, index) in originalBtnList"
|
||
:key="index"
|
||
:style="{
|
||
backgroundColor:
|
||
localForm.modelProduct.isOriginal === item.value
|
||
? 'rgba(49, 98, 255, 0.1)'
|
||
: '#fff',
|
||
color: localForm.modelProduct.isOriginal === item.value ? '#3162ff' : '#000',
|
||
}"
|
||
class="flex-1 rounded-lg h-full flex items-center justify-center cursor-pointer"
|
||
@click="handleIsOriginal(item.value)"
|
||
>
|
||
{{ item.label }}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div v-if="localForm.modelProduct.isOriginal === 1" class="text-[12px]">
|
||
<div class="my-3">魔创未来原创模型加密保护计划</div>
|
||
<div class="text-gray-400">
|
||
原创模型加密保护计划是魔创未来推出的,为维护创作者权益、保障平台健康发展,通过技术手段遏制爬取、盗版、侵权等不法行为,保证创作者的劳动成果得到合理回报,进而激励更多优秀原创模型的诞生。
|
||
</div>
|
||
<div class="text-gray-400">
|
||
谁能加入？ 所有发布原创模型的作者,均可以加入本计划
|
||
</div>
|
||
<div class="my-3 text-gray-400">
|
||
加入后有何好处？ 1.模型加密能力 2.流量扶持 3.创作激励
|
||
</div>
|
||
<div class="text-gray-400">
|
||
详情查看
|
||
<a href="" class="text-[#3162ff] underline">魔创未来原创模型加密保护计划</a>
|
||
</div>
|
||
<div class="my-3">原创声明</div>
|
||
<div class="text-gray-400">
|
||
本人声明并承诺模型是由本人原创,相关的权利和义务由本人承担。
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<n-form-item path="modelProduct.originalAuthorName" size="large">
|
||
<n-input
|
||
v-model:value="localForm.modelProduct.originalAuthorName"
|
||
placeholder="输入原创作者"
|
||
/>
|
||
</n-form-item>
|
||
</div>
|
||
</div>
|
||
<div class="flex w-full justify-center">
|
||
<div
|
||
class="flex justify-center items-center mt-5 text-white w-[200px] h-10 rounded-lg bg-[#3162ff] cursor-pointer"
|
||
@click="nextStep"
|
||
>
|
||
下一步
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped></style>
|