251 lines
8.4 KiB
Vue
251 lines
8.4 KiB
Vue
<template>
|
|
<div>
|
|
<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"
|
|
:show-tip="false"
|
|
:cad-show="true"
|
|
:file-type="computFileType"
|
|
@validate="formRef?.validateField(`${props.vaildRules}.files`)"
|
|
@preview="handlePreview"
|
|
>
|
|
</KlUploader>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="标题："
|
|
:prop="`${props.vaildRules}.title`"
|
|
:rules="{ required: true, message: '请输入标题', trigger: ['blur', 'change'] }"
|
|
>
|
|
<el-input v-model="form.title" placeholder="请输入标题" class="w-361px!" maxlength="128"></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
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-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="软件版本："
|
|
:prop="`${props.vaildRules}.editions`"
|
|
:rules="{ required: true, message: '请选择软件版本', trigger: ['blur', 'change'] }"
|
|
>
|
|
<el-select v-model="form.editions" placeholder="请选择软件版本" class="w-361px!">
|
|
<el-option v-for="(item, index) in editionsList" :key="index" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="作品来源："
|
|
:prop="`${props.vaildRules}.source`"
|
|
:rules="{ required: true, message: '请选择作品来源', trigger: ['blur', 'change'] }"
|
|
>
|
|
<el-radio-group v-model="form.source">
|
|
<el-radio :label="1">原创图纸</el-radio>
|
|
<el-radio :label="2">转载分享</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="标签："
|
|
:prop="`${props.vaildRules}.labels`"
|
|
:rules="{ required: true, message: '请选择标签', trigger: ['blur', 'change'] }"
|
|
>
|
|
<el-select
|
|
v-model="form.labels"
|
|
:remote-method="remoteMethod"
|
|
:loading="loading"
|
|
multiple
|
|
filterable
|
|
remote
|
|
placeholder="请输入搜索标签"
|
|
class="w-361px!"
|
|
>
|
|
<el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="金币："
|
|
:prop="`${props.vaildRules}.points`"
|
|
:rules="{ required: true, message: '请输入金币', 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-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="图形格式："
|
|
:prop="`${props.vaildRules}.formatType`"
|
|
:rules="{ required: true, message: '请选择图形格式', trigger: ['blur', 'change'] }"
|
|
>
|
|
<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
|
|
label-width="110px"
|
|
label="上传封面："
|
|
:prop="`${props.vaildRules}.coverImages`"
|
|
:rules="{ required: true, message: '请上传上传封面', trigger: ['blur', 'change'] }"
|
|
>
|
|
<KlUploader
|
|
v-model:file-list="form.coverImages"
|
|
list-type="picture-card"
|
|
:limit="1000"
|
|
:size="1"
|
|
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]">
|
|
<el-icon class="text-[#999999]"><Plus /></el-icon>
|
|
<div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
|
|
</div>
|
|
</KlUploader>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form?.type === 3"
|
|
label-width="110px"
|
|
label="效果图："
|
|
:prop="`${props.vaildRules}.renderings`"
|
|
:rules="{ required: true, message: '请上传效果图', trigger: ['blur', 'change'] }"
|
|
>
|
|
<KlUploader
|
|
v-model:file-list="form.renderings"
|
|
list-type="picture-card"
|
|
:limit="1000"
|
|
: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]">
|
|
<el-icon class="text-[#999999]"><Plus /></el-icon>
|
|
<div class="ml-4px mt-2px text-14px text-[#999999] font-normal">上传图纸</div>
|
|
</div>
|
|
</KlUploader>
|
|
</el-form-item>
|
|
<el-form-item label-width="110px" label="上传附件：">
|
|
<KlUploader v-model:file-list="form.otherFiles" tips="请将系列文件分别压缩后上传，支持批量上传"> </KlUploader>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label-width="110px"
|
|
label="描述："
|
|
:prop="`${props.vaildRules}.description`"
|
|
:rules="[
|
|
{ required: true, message: '请输入描述', trigger: ['blur', 'change'] },
|
|
{
|
|
validator: (rule, value, callback) => {
|
|
console.log(rule)
|
|
if (value.length < 70) {
|
|
callback(new Error('输入内容不能少于 70 字'))
|
|
} else {
|
|
callback()
|
|
}
|
|
},
|
|
trigger: ['blur', 'change'],
|
|
},
|
|
]"
|
|
>
|
|
<el-input v-model="form.description" type="textarea" :rows="6" placeholder="请输入描述" class="w-361px!" minlength="70" show-word-limit></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, PropType, computed } from 'vue'
|
|
import { Plus } from '@element-plus/icons-vue'
|
|
import KlUploader from '@/components/kl-uploader/index.vue'
|
|
import { parent, keywords, labels, indexTabs } from '@/api/upnew/index'
|
|
import { TcreateReq } from '@/api/upnew/types'
|
|
|
|
const props = defineProps({
|
|
vaildRules: {
|
|
type: String as PropType<string>,
|
|
required: true,
|
|
},
|
|
formRef: {
|
|
type: Object as PropType<any>,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const cascaderProps = { multiple: true, label: 'name', value: 'id', emitPath: false }
|
|
const emit = defineEmits(['preview'])
|
|
|
|
const form = defineModel<TcreateReq['draws'][0]>('modelValue', {
|
|
required: true,
|
|
})
|
|
|
|
const computFileType = computed(() => {
|
|
return form.value.type === 1 ? ['dwg'] : form.value.type === 2 ? ['pdf', 'xlsx', 'docx', 'xls'] : ['max', 'skp']
|
|
})
|
|
|
|
const loading = ref(false)
|
|
/** 获取标签 */
|
|
const labelsList = ref<any>([])
|
|
const remoteMethod = (query: string) => {
|
|
if (query) {
|
|
loading.value = true
|
|
keywords({
|
|
type: 1,
|
|
keywords: query,
|
|
})
|
|
.then((res) => {
|
|
labelsList.value = res.data
|
|
})
|
|
.finally(() => {
|
|
loading.value = false
|
|
})
|
|
} else {
|
|
labelsList.value = []
|
|
}
|
|
}
|
|
|
|
const formatTypeList = ref<any>([])
|
|
const getFormatTypeList = () => {
|
|
labels({
|
|
type: 2,
|
|
}).then((res) => {
|
|
// @ts-ignore
|
|
formatTypeList.value = res.data
|
|
})
|
|
}
|
|
getFormatTypeList()
|
|
|
|
const projectTypeList = ref<any>([])
|
|
/** 获取分类下拉框 */
|
|
const getParent = () => {
|
|
indexTabs().then((res) => {
|
|
projectTypeList.value = res.data
|
|
})
|
|
}
|
|
getParent()
|
|
|
|
/** 版本 */
|
|
const editionsList = ref<any>([])
|
|
const getEditionsList = () => {
|
|
parent({
|
|
type: 2,
|
|
parentId: 0,
|
|
}).then((res) => {
|
|
editionsList.value = res.data
|
|
})
|
|
}
|
|
getEditionsList()
|
|
|
|
const handlePreview = (val: any) => {
|
|
emit('preview', val)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep(.el-form-item__label) {
|
|
// font-size: 16px;
|
|
}
|
|
</style>
|