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>

79
pages/upnew/components/DrawType.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="box-border border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-33px py-22px pb-10px!">
<div class="box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[33px] py-[22px] pb-[10px]!">
<el-form-item
label="选择上传资料类型："
label-width="170px"
@ -7,37 +7,40 @@
prop="type"
:rules="[{ required: true, message: '请选择上传资料类型', trigger: 'change' }]"
>
<el-checkbox-group v-model="form.type" @change="handleTypeChange">
<el-checkbox :value="1">图纸</el-checkbox>
<el-checkbox :value="3">模型</el-checkbox>
<el-checkbox :value="2">文本</el-checkbox>
</el-checkbox-group>
<el-radio-group v-model="form.type" @change="handleTypeChange(form.type)">
<el-radio :value="1">图纸</el-radio>
<el-radio :value="3">模型</el-radio>
<el-radio :value="2">文本</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="选择国家："
label-width="110px"
label-position="left"
prop="isDomestic"
:rules="[{ required: true, message: '请选择国家', trigger: 'change' }]"
>
<el-select v-model="form.isDomestic" placeholder="请选择" class="w-200px!" @change="handleCountryChange">
<el-option label="国内" :value="1"></el-option>
<el-option label="国外" :value="0"></el-option>
</el-select>
</el-form-item>
<div class="flex">
<div class="flex gap-[20px]">
<el-form-item
label="选择国家："
label-width="110px"
label-position="left"
prop="isDomestic"
:rules="[{ required: true, message: '请选择国家', trigger: 'change' }]"
>
<el-select v-model="form.isDomestic" placeholder="请选择" class="w-[200px]!" @change="handleCountryChange">
<el-option label="国内" :value="1"></el-option>
<el-option label="国外" :value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="form.isDomestic === 0"
label="所在地区："
label-width="110px"
label-position="left"
prop="province"
:rules="[{ required: true, message: '请选择所在地区', trigger: 'change' }]"
>
<el-select v-model="form.province" placeholder="请选择" class="w-200px!" @change="handleProvinceChange">
<el-select v-model="form.province" filterable placeholder="请选择" class="w-[200px]!">
<el-option v-for="(item, index) in provinceList" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label-width="10px" label-position="left" prop="city" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
</div>
<!-- <div class="flex"> -->
<!-- <el-form-item label-width="10px" label-position="left" prop="city" :rules="[{ required: true, message: '请选择地址', trigger: 'change' }]">
<el-select v-model="form.city" placeholder="请选择" class="w-200px!" @change="handleCityChange">
<el-option v-for="(item, index) in cityList" :key="index" :label="item.name" :value="item.id" />
</el-select>
@ -46,8 +49,8 @@
<el-select v-model="form.county" placeholder="请选择" class="w-200px!">
<el-option v-for="(item, index) in countyList" :key="index" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
</el-form-item> -->
<!-- </div> -->
</div>
</template>
@ -63,32 +66,16 @@
// 添加旧值引用
const oldTypeValue = ref<(number | string)[]>([])
const handleTypeChange = (val: any) => {
console.log(val, 'val')
// 新增的项（当前值有但旧值没有的）
const added = val.filter((item: number | string) => !oldTypeValue.value.includes(item))
// 减少的项（旧值有但当前值没有的）
const removed = oldTypeValue.value.filter((item) => !val.includes(item))
if (added.length) {
form.value.draws.push({
const handleTypeChange = (val: number) => {
form.value.draws = [
{
...JSON.parse(JSON.stringify(DrawsEnmu)),
type: added[0],
})
} else if (removed.length) {
form.value.draws = form.value.draws.filter((item) => item.type !== removed[0])
}
// 更新旧值
oldTypeValue.value = [...val]
// 更新当前activeName值
if (!val?.length) {
form.value.activeName = ''
}
type: val,
},
]
nextTick(() => {
form.value.activeName = val[val.length - 1]
form.value.activeName = val
})
}

20
pages/upnew/components/Preview.vue
View File

@ -1,20 +1,18 @@
<template>
<div class="ml-[23px] box-border min-h-[930px] w-[516px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[33px] py-[22px]">
<div class="flex items-center">
<img src="~/assets/images/preview.png" alt="" srcset="" width="16px" height="19px" /><span class="ml-[7px] text-[18px] text-[#333333] font-normal"
>预览</span
></div
>
<div class="mt-[20px]">
<!-- <div class="flex items-center">
<img src="~/assets/images/preview.png" alt="" srcset="" width="16px" height="19px" /><span class="ml-[7px] text-[18px] text-[#333333] font-normal">
预览
</span>
</div> -->
<!-- <div class="mt-[20px]">
<el-image :src="previewUrl" class="mb-[16px] max-h-[320px] max-w-[460px] min-h-[200px]" fit="contain"></el-image>
<span class="text-[16px] text-[#333333] font-normal">{{ previewName || '图纸标题' }}</span></div
>
<div class="my-[30px] h-[1px] w-[460px] rounded-[1px] bg-[#EEEEEE]"></div>
> -->
<!-- <div class="my-[30px] h-[1px] w-[460px] rounded-[1px] bg-[#EEEEEE]"></div> -->
<div class="flex items-center">
<img src="~/assets/images/tip.png" width="20px" height="20px" />
<span class="ml-[7px] text-[18px] text-[#333333] font-normal">
上传遇到问题可以咨询
</span>
<span class="ml-[7px] text-[18px] text-[#333333] font-normal"> 上传遇到问题可以咨询 </span>
</div>
<div class="mt-[20px] text-center"><el-image src="https://picsum.photos/290/290?_t" alt="" srcset="" class="h-[290px] w-[290px]" /></div>
<div class="mt-[30px] text-center text-[16px] text-[#333333] font-normal">

10
pages/upnew/index.vue
View File

@ -36,9 +36,9 @@
const router = useRouter() // 导入路由实例，用于跳转页面
const form = reactive<TcreateReq>({
activeName: '', // 标签
activeName: 1, // 标签
id: '', // 图纸id id,示例值(24548)
type: [], // 图纸类型 类型,示例值(1)
type: 1, // 图纸类型 类型,示例值(1)
isDomestic: '', // 是否是国内: 1是 0否
province: '', // 省份编码
city: '', // 城市编码
@ -121,12 +121,12 @@
}
// 图纸类型
const drawTypeRef = ref()
const drawTypeRef = ref<InstanceType<typeof DrawType>>()
onMounted(() => {
// 初始化图纸类型
drawTypeRef.value.handleTypeChange([1])
drawTypeRef.value?.handleTypeChange(1)
// 初始化图纸类型
form.type = [1]
form.type = 1
})
</script>
<style lang="scss" scoped>