front-pc/pages/upnew/index.vue

<template>
  <!-- 导航 -->
  <KlNavTab />
  <!-- 发布图纸 -->
  <div class="ma-auto mt-[30px] w-[1440px] flex">
    <div class="w-[1016px]">
      <el-form ref="formRef" :model="form" label-width="120px" :disabled="type === 'preview'">
        <!-- 图纸分类 -->
        <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" v-if="type !== 'preview'">
            <!-- <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, view, edit } from '~/api/upnew/index'
  const route = useRoute() // 导入路由实例，用于跳转页面
  const router = useRouter() // 导入路由实例，用于跳转页面
  const id = computed(() => {
    return route.query.id as string
  })
  const projectId = computed(() => {
    return route.query.projectId as string
  })

  const type = computed(() => {
    return route.query.type || 'add'
  })

  const form = reactive<TcreateReq>({
    activeName: 1, // 标签
    id: '', // 图纸id  id,示例值(24548)
    type: 1, // 图纸类型 类型,示例值(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(async (valid: boolean, val: any) => {
      if (valid) {
        loading.value = true
        try {
          const res =
            type.value === 'add'
              ? await create(form)
              : await edit({
                  ...form,
                  id: Number(id.value),
                  projectId: Number(projectId.value),
                })
          if (res.code === 0) {
            // 弹窗提示
            ElMessage.success('操作成功')
            if (type.value !== 'add') {
              router.back()
              return
            }
            // 跳转页面
            if (form.type === 1) {
              navigateTo('/drawe')
            } else if (form.type === 2) {
              navigateTo('/text')
            } else if (form.type === 3) {
              navigateTo('/model')
            }
          }
        } 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 getDetail = () => {
    view({ id: id.value, projectId: projectId.value }).then((res) => {
      const { code, data } = res
      if (code === 0) {
        form.isDomestic = data.isDomestic
        form.province = data.province
        form.city = data.city
        form.county = data.county
        form.activeName = form.type = data.draws[0].type
        form.draws = data.draws.map((c) => {
          return {
            ...c,
            coverImages: c.coverImages.map((d) => {
              return {
                ...d,
                name: d.title,
              }
            }),
            otherFiles: c.otherFiles.map((d) => {
              return {
                ...d,
                name: d.title,
              }
            }),
          }
        })
      }
    })
  }

  // 图纸类型
  const drawTypeRef = ref<InstanceType<typeof DrawType>>()
  onMounted(() => {
    // 初始化图纸类型
    drawTypeRef.value?.handleTypeChange(1)
    // 初始化图纸类型
    form.type = 1

    if (type.value !== 'add') {
      getDetail()
    }
  })
</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>