144 lines
4.3 KiB
Vue
144 lines
4.3 KiB
Vue
<template>
|
|
<!-- 导航 -->
|
|
<KlNavTab />
|
|
<!-- 发布图纸 -->
|
|
<div class="ma-auto mt-[30px] w-[1440px] flex">
|
|
<div class="w-[900px]">
|
|
<el-form ref="formRef" :model="form" label-width="120px">
|
|
<!-- 图纸分类 -->
|
|
<DrawType ref="drawTypeRef" v-model="form" />
|
|
<div class="mt-[24px] box-border border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[33px] py-[22px]">
|
|
<el-tabs v-model="form.activeName" class="demo-tabs">
|
|
<el-tab-pane v-for="(item, index) in form.draws" :key="item.type" :label="computLabel(item.type)" :name="item.type">
|
|
<DrawForm v-if="form.draws[index]" v-model="form.draws[index]" :vaild-rules="'draws.' + index" :form-ref="formRef" @preview="handlePreview" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
<el-form-item label-width="110px" class="mt-[20px]">
|
|
<!-- <el-button class="w-121px h-37px!" :loading="loading" @click="handleSubmit">预览</el-button> -->
|
|
<el-button type="primary" class="w-[121px] h-[37px]!" :loading="loading" @click="handleSubmit">发布</el-button>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
<!-- 预览图 -->
|
|
<PreView v-model:preview-url="previewUrl" v-model:preview-name="previewName"></PreView>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import PreView from './components/Preview.vue'
|
|
import DrawType from './components/DrawType.vue'
|
|
import DrawForm from './components/DrawForm.vue'
|
|
import KlNavTab from '~/components/kl-nav-tab/index.vue'
|
|
import { reactive, ref, onMounted, computed } from 'vue'
|
|
|
|
import type { TcreateReq } from '~/api/upnew/types'
|
|
import { create } from '~/api/upnew/index'
|
|
const router = useRouter() // 导入路由实例，用于跳转页面
|
|
|
|
const form = reactive<TcreateReq>({
|
|
activeName: '', // 标签
|
|
id: '', // 图纸id id,示例值(24548)
|
|
type: [], // 图纸类型 类型,示例值(1)
|
|
isDomestic: '', // 是否是国内: 1是 0否
|
|
province: '', // 省份编码
|
|
city: '', // 城市编码
|
|
county: '', // 区县编码
|
|
draws: [], // 图纸信息
|
|
})
|
|
|
|
// const previewForm = reactive({
|
|
// url: '',
|
|
// name: '',
|
|
// })
|
|
|
|
const computLabel = (type: number) => {
|
|
switch (type) {
|
|
case 1:
|
|
return '图纸'
|
|
case 2:
|
|
return '文本'
|
|
case 3:
|
|
return '模型'
|
|
}
|
|
}
|
|
|
|
const previewUrl = computed(() => {
|
|
if (form.draws.length && form.activeName) {
|
|
const info = form.draws.find((c) => c.type === Number(form.activeName))
|
|
if (info && info.coverImages.length) return info.coverImages[0].url
|
|
}
|
|
return ''
|
|
})
|
|
|
|
const previewName = computed(() => {
|
|
if (form.draws.length && form.activeName) {
|
|
const info = form.draws.find((c) => c.type === Number(form.activeName))
|
|
if (info && info.coverImages.length) return info.coverImages[0].name
|
|
}
|
|
return ''
|
|
})
|
|
|
|
/**
|
|
* 提交
|
|
*/
|
|
const loading = ref(false)
|
|
const formRef = ref()
|
|
const handleSubmit = () => {
|
|
formRef.value.validate((valid: boolean, val: any) => {
|
|
if (valid) {
|
|
loading.value = true
|
|
create(form)
|
|
.then((res) => {
|
|
const { code } = res
|
|
if (code === 0) {
|
|
// 弹窗提示
|
|
ElMessage.success('操作成功')
|
|
router.back()
|
|
// 关闭弹窗
|
|
// setTimeout(() => {
|
|
// window.close()
|
|
// }, 300)
|
|
}
|
|
})
|
|
.finally(() => {
|
|
loading.value = false
|
|
})
|
|
} else {
|
|
console.log('error submit!')
|
|
// 弹窗提示
|
|
ElMessage.error('请填写以上信息')
|
|
return false
|
|
}
|
|
})
|
|
}
|
|
|
|
/** 暂时不用了 直接展示封面图 */
|
|
const handlePreview = (val: any) => {
|
|
console.log(val)
|
|
|
|
// previewForm.url = val.url
|
|
// previewForm.name = val.name
|
|
}
|
|
|
|
// 图纸类型
|
|
const drawTypeRef = ref()
|
|
onMounted(() => {
|
|
// 初始化图纸类型
|
|
drawTypeRef.value.handleTypeChange([1])
|
|
// 初始化图纸类型
|
|
form.type = [1]
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.demo-tabs > .el-tabs__content {
|
|
padding: 32px;
|
|
color: #6b778c;
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
::v-deep(.el-tabs__item) {
|
|
font-size: 16px;
|
|
}
|
|
</style>
|