233 lines
7.0 KiB
Vue
233 lines
7.0 KiB
Vue
<script setup lang="ts">
|
|
// import { uploadFileBatches } from '@/utils/uploadImg.ts';
|
|
import { uploadImagesInBatches } from '@/utils/uploadImg.ts';
|
|
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { Asterisk, Trash } from 'lucide-vue-next';
|
|
import type { FormInst } from 'naive-ui';
|
|
import { computed, ref, watch } from 'vue';
|
|
|
|
// 可接受的文件类型
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'nextStep', 'preStep'])
|
|
|
|
const localForm = computed({
|
|
get() {
|
|
return props.modelValue
|
|
},
|
|
set(value) {
|
|
emit('update:modelValue', value)
|
|
},
|
|
})
|
|
|
|
watch(
|
|
() => localForm.value,
|
|
(newVal) => {
|
|
console.log('newVal', newVal)
|
|
emit('update:modelValue', newVal)
|
|
},
|
|
{ immediate: true, deep: true },
|
|
)
|
|
const message = useMessage()
|
|
|
|
const acceptTypes = '.json,.zip'
|
|
|
|
defineExpose({
|
|
addVersion,
|
|
})
|
|
|
|
const modelVersionItem = {
|
|
versionName: '',
|
|
versionDescription: '', // 富文本
|
|
filePath: '', // 文件路径
|
|
fileName: '', // 文件名
|
|
delFlag: '0',
|
|
imagePaths: [],
|
|
id:null
|
|
}
|
|
const rules = {
|
|
versionName: {
|
|
required: true,
|
|
message: '',
|
|
trigger: 'blur',
|
|
},
|
|
}
|
|
function addVersion() {
|
|
const param = cloneDeep(modelVersionItem)
|
|
localForm.value.workFlowVersionList.unshift(param)
|
|
}
|
|
|
|
const formRefs = ref<(FormInst | null)[]>([])
|
|
function setFormRef(el: FormInst | null, index: number) {
|
|
if (el) {
|
|
formRefs.value[index] = el
|
|
}
|
|
}
|
|
async function nextStep() {
|
|
for (let i = 0; i < localForm.value.workFlowVersionList.length; i++) {
|
|
if (localForm.value.workFlowVersionList[i].delFlag === '0' && localForm.value.workFlowVersionList[i].fileName === '') {
|
|
return message.error('请上传文件')
|
|
}
|
|
const regex = /[\u4E00-\u9FA5]/ // 匹配汉字的正则表达式
|
|
if (localForm.value.workFlowVersionList[i].delFlag === '0' && !regex.test(localForm.value.workFlowVersionList[i].versionDescription)) {
|
|
return message.error('请用中文填写版本介绍')
|
|
}
|
|
}
|
|
try {
|
|
const promises = formRefs.value
|
|
.filter((form): form is FormInst => form !== null)
|
|
.map(form => form.validate())
|
|
|
|
await Promise.all(promises)
|
|
emit('nextStep')
|
|
}
|
|
catch (errors) {
|
|
console.error('部分表单验证失败:', errors)
|
|
}
|
|
// formRef.value?.validate((errors) => {
|
|
// if (!errors) {
|
|
// emit('nextStep')
|
|
// }
|
|
// else {
|
|
// console.log('error', errors)
|
|
// }
|
|
// })
|
|
}
|
|
function preStep() {
|
|
emit('preStep')
|
|
}
|
|
// 上传文件
|
|
const uploadFileIndex = ref(0)
|
|
const fileInput = ref<HTMLInputElement | null>(null)
|
|
function triggerFileInput(index: number) {
|
|
(fileInput.value as HTMLInputElement)?.click()
|
|
uploadFileIndex.value = index
|
|
}
|
|
async function handleFileChange(event: Event) {
|
|
const target = event.target as HTMLInputElement
|
|
const files = target.files
|
|
|
|
if (files && files.length > 0) {
|
|
try{
|
|
const res = await uploadImagesInBatches(files)
|
|
localForm.value.workFlowVersionList[uploadFileIndex.value].filePath = res[0].url
|
|
localForm.value.workFlowVersionList[uploadFileIndex.value].fileName = res[0].fileName
|
|
}catch(err){
|
|
console.log(err);
|
|
}
|
|
// if(res[0].success){
|
|
|
|
// }
|
|
}
|
|
target.value = ''
|
|
}
|
|
|
|
function computedDelFlag() {
|
|
return localForm.value.workFlowVersionList.filter(item => item.delFlag === '0')
|
|
}
|
|
function onDelete(index: number) {
|
|
if (computedDelFlag().length === 1)
|
|
return
|
|
localForm.value.workFlowVersionList[index].delFlag = '2'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center items-center">
|
|
<div class="w-[960px]">
|
|
<template v-for="(item, index) in localForm.workFlowVersionList" :key="index">
|
|
<div v-if="item.delFlag === '0'" class="bg-gray-100 p-4 rounded-lg mt-4 relative">
|
|
<div class="absolute -right-10 top-4 cursor-pointer">
|
|
<Trash class="cursor-pointer" @click="onDelete(index)" />
|
|
</div>
|
|
<n-form
|
|
:ref="(el) => setFormRef(el, index)"
|
|
:label-width="80"
|
|
:model="localForm.workFlowVersionList[index]"
|
|
:rules="rules"
|
|
size="large"
|
|
>
|
|
<n-form-item label="版本名称" path="versionName">
|
|
<n-input v-model:value="item.versionName" placeholder="请输入版本名" />
|
|
</n-form-item>
|
|
<div class="flex">
|
|
版本介绍 <Asterisk :size="10" color="#ff0000" class="mt-1" />
|
|
</div>
|
|
<div class="text-gray-400 text-[12px]">
|
|
填写类别可让模型获得更精准的流量, 平台也有权基于标准修改你的类别标签
|
|
</div>
|
|
<div class="bg-white p-3 mt-2 rounded-lg">
|
|
<client-only>
|
|
<WangEditor v-model="item.versionDescription" />
|
|
</client-only>
|
|
</div>
|
|
<div class="flex mt-4">
|
|
上传文件 <Asterisk :size="10" color="#ff0000" class="mt-1" />
|
|
</div>
|
|
<div v-if="item.fileName" class="flex justify-between items-center bg-white p-3 mt-2 rounded-lg">
|
|
<div class="bg-[#d8e5fd] text-[12px] text-[#3162ff] w-16 h-7 rounded-lg flex justify-center items-center">
|
|
100%
|
|
</div>
|
|
<div class="flex-1 flex items-center line-clamp">
|
|
{{
|
|
item.fileName
|
|
}}
|
|
</div>
|
|
<div>
|
|
<Trash class="cursor-pointer" @click="item.fileName = '', item.filePath = ''" />
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div class="upload-content">
|
|
<div class="flex flex-col justify-center items-center w-30 h-40 border border-dashed mt-2 rounded-lg bg-white">
|
|
<div class="w-24 bg-gradient-to-r from-[#2D28FF] to-[#1A7DFF] h-8 text-white rounded-sm bg-[#3162ff] cursor-pointer flex justify-center items-center" @click="triggerFileInput(index)">
|
|
上传文件
|
|
</div>
|
|
<div class="my-3">
|
|
点击上传文件
|
|
</div>
|
|
<div class="text-[#999999] text-xs">
|
|
.json/.zip
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-form>
|
|
</div>
|
|
</template>
|
|
<div class="flex items-center justify-center mt-5">
|
|
<div class="flex justify-center items-center mt-5 w-[20%] mx-2 h-10 rounded-lg bg-[#f1f2f7] cursor-pointer" @click="preStep">
|
|
上一步
|
|
</div>
|
|
<div class="flex justify-center items-center mt-5 text-white mx-2 w-[20%] h-10 rounded-lg bg-[#3162ff] cursor-pointer" @click="nextStep">
|
|
下一步
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<input
|
|
ref="fileInput"
|
|
type="file"
|
|
class="hidden"
|
|
:accept="acceptTypes"
|
|
@change="handleFileChange"
|
|
>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.line-clamp {
|
|
margin: 0 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
color: rgb(72, 71, 71);
|
|
}
|
|
</style>
|