wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 优化上传表单组件和类型定义

Browse Source
This commit is contained in:
wangqiao
2025-09-06 18:39:16 +08:00
parent 24d2b82221
commit b7d6b37e87
6 changed files with 92 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/upnew/components/DrawForm.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-form-item label-width="110px" :prop="`${props.vaildRules}.files`" :rules="{ required: true, message: '请上传图纸', trigger: ['blur', 'change'] }">
<!-- <el-form-item label-width="110px" :prop="`${props.vaildRules}.files`" :rules="{ required: true, message: '请上传图纸', trigger: ['blur', 'change'] }">
<KlUploader
v-model:file-list="form.files"
:limit="1000"
@ -11,33 +11,44 @@
@preview="handlePreview"
>
</KlUploader>
</el-form-item>
</el-form-item> -->
<el-form-item
label-width="110px"
label="标题："
:prop="`${props.vaildRules}.title`"
:rules="{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }"
:rules="[
{ required: true, message: '20-50 字符，结构可用分类关键词+作品名/资源价值版本/使用场景', trigger: ['blur', 'change'] },
{
validator: (rule: any, value: any, callback: any) => {
if (value && value.length < 20) {
callback(new Error('20-50 字符，结构可用分类关键词+作品名/资源价值版本/使用场景'))
}
callback()
},
trigger: ['blur', 'change'],
},
]"
>
<el-input v-model="form.title" placeholder="请输入标题" class="w-361px!" maxlength="128"></el-input>
<el-input v-model="form.title" placeholder="请输入标题" minlength="20" maxlength="50"></el-input>
</el-form-item>
<el-form-item
label-width="110px"
label="分类："
label="专业分类："
:prop="`${props.vaildRules}.projectType`"
:rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }"
>
<!-- <el-select v-model="form.projectType" placeholder="请选择分类" class="w-361px!" multiple>
<el-option v-for="(item, index) in projectTypeList" :key="index" :label="item.name" :value="item.id" />
</el-select> -->
<el-cascader v-model="form.projectType" class="w-361px!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags />
<el-cascader v-model="form.projectType" class="w-[100%]!" :options="projectTypeList" :props="cascaderProps" clearable collapse-tags />
</el-form-item>
<el-form-item
label-width="110px"
label="软件版本："
label="软件分类："
:prop="`${props.vaildRules}.editions`"
:rules="{ required: true, message: '请选择软件版本', trigger: ['blur', 'change'] }"
>
<el-select v-model="form.editions" placeholder="请选择软件版本" class="w-361px!">
<el-select v-model="form.editions" placeholder="请选择软件版本">
<el-option v-for="(item, index) in editionsList" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
@ -54,20 +65,11 @@
</el-form-item>
<el-form-item
label-width="110px"
label="标签："
label="作品标签："
:prop="`${props.vaildRules}.labels`"
:rules="{ required: true, message: '请选择标签', trigger: ['blur', 'change'] }"
:rules="{ required: false, message: '请选择标签', trigger: ['blur', 'change'] }"
>
<el-select
v-model="form.labels"
:remote-method="remoteMethod"
:loading="loading"
multiple
filterable
remote
placeholder="请输入搜索标签"
class="w-361px!"
>
<el-select v-model="form.labels" :remote-method="remoteMethod" :loading="loading" multiple filterable remote placeholder="请输入搜索标签">
<el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
</el-select>
</el-form-item>
@ -75,11 +77,11 @@
label-width="110px"
label="金币："
:prop="`${props.vaildRules}.points`"
:rules="{ required: true, message: '请输入金币', trigger: ['blur', 'change'] }"
:rules="{ required: true, message: '金币设置分销为0-15,设置0金币为专属资源可直接获利2-15金币', trigger: ['blur', 'change'] }"
>
<el-input-number v-model="form.points" :controls="false" :precision="0" :min="0" placeholder="请输入金币" class="w-361px! text-left!"></el-input-number>
<el-input-number v-model="form.points" :controls="false" :precision="0" :min="0" placeholder="请输入金币" class="w-[100%]! text-left!"></el-input-number>
</el-form-item>
<el-form-item
<!-- <el-form-item
label-width="110px"
label="图形格式："
:prop="`${props.vaildRules}.formatType`"
@ -88,7 +90,7 @@
<el-checkbox-group v-model="form.formatType">
<el-checkbox v-for="(item, index) in formatTypeList" :key="index" :label="item" :value="item"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form-item> -->
<el-form-item
label-width="110px"
label="上传封面："
@ -103,9 +105,9 @@
tips="上传图片支持jpg/gif/png格式、第一张为封面图片、每张图片大小不得超过1M"
@validate="formRef?.validateField(`${props.vaildRules}.coverImages`)"
>
<div class="h-77px w-161px flex items-center justify-center border border-[#cdd0d6] rounded-1px border-dashed bg-[#fafafa]">
<div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
<el-icon class="text-[#999999]"><Plus /></el-icon>
<div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
<div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
</div>
</KlUploader>
</el-form-item>
@ -123,9 +125,9 @@
:show-tip="false"
@validate="formRef?.validateField(`${props.vaildRules}.renderings`)"
>
<div class="h-77px w-161px flex items-center justify-center border border-[#cdd0d6] rounded-1px border-dashed bg-[#fafafa]">
<div class="h-[77px] w-[161px] flex items-center justify-center border border-[#cdd0d6] rounded-[1px] border-dashed bg-[#fafafa]">
<el-icon class="text-[#999999]"><Plus /></el-icon>
<div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
<div class="ml-[4px] mt-[2px] text-[14px] text-[#999999] font-normal">上传图纸</div>
</div>
</KlUploader>
</el-form-item>
@ -134,15 +136,15 @@
</el-form-item>
<el-form-item
label-width="110px"
label="描述："
label="作品描述："
:prop="`${props.vaildRules}.description`"
:rules="[
{ required: true, message: '请输入描述', trigger: ['blur', 'change'] },
{ required: true, message: '简介字数限制60-150 字符，需包含用途、文件介绍、适用场景等', trigger: ['blur', 'change'] },
{
validator: (rule, value, callback) => {
console.log(rule)
if (value.length < 70) {
callback(new Error('输入内容不能少于 70 字'))
if (value.length < 60) {
callback(new Error('简介字数限制60-150 字符，需包含用途、文件介绍、适用场景等'))
} else {
callback()
}
@ -151,7 +153,7 @@
},
]"
>
<el-input v-model="form.description" type="textarea" :rows="6" placeholder="请输入描述" class="w-361px!" minlength="70" show-word-limit></el-input>
<el-input v-model="form.description" type="textarea" :rows="6" placeholder="请输入描述" minlength="60" maxlength="150" show-word-limit></el-input>
</el-form-item>
</div>
</template>
@ -216,7 +218,7 @@
formatTypeList.value = res.data
})
}
getFormatTypeList()
// getFormatTypeList()
const projectTypeList = ref<any>([])
/** 获取分类下拉框 */
@ -225,7 +227,6 @@
projectTypeList.value = res.data
})
}
getParent()
/** 版本 */
const editionsList = ref<any>([])
@ -237,11 +238,15 @@
editionsList.value = res.data
})
}
getEditionsList()
const handlePreview = (val: any) => {
emit('preview', val)
}
onMounted(() => {
getEditionsList()
getParent()
})
</script>
<style lang="scss" scoped>