287 lines
8.5 KiB
Vue
287 lines
8.5 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_category' }),
|
||
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`
|
||
// }
|
||
}
|
||
// function changeModelType(item){
|
||
// debugger
|
||
// }
|
||
</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>
|
||
原创内容
|
||
</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>
|