优化图纸编辑功能和提交逻辑

api/upnew/index.ts

@@ -40,7 +40,7 @@ export const indexTabs = () => {
  * @returns
  */
 export const keywords = (params: { type: string | number; keywords: string }) => {
-  return useFetchRequest.get<IResponse<boolean>>('/prod-api/app-api/business/app/dict/label-keywords', {query:params})
+  return useFetchRequest.get<IResponse<boolean>>('/prod-api/app-api/business/app/dict/label-keywords', { query: params })
 }
 /**
  * 获取格式类型字典信息
@@ -80,3 +80,17 @@ export const homeLabel = () => {
 export const getWechat = () => {
   return useDollarFetchRequest.get<IResponse<string>>('/prod-api/app-api/system/index-setting/kefu-wechat')
 }
+
+/**
+ * 查看图纸
+ */
+export const view = (params: { id: string | number; projectId: string | number }) => {
+  return useDollarFetchRequest.get<IResponse<TcreateReq>>('/prod-api/app-api/business/app/project-draw/get', { query: params })
+}
+
+/**
+ * 编辑图纸
+ */
+export const edit = (data: TcreateReq & { projectId: number }) => {
+  return useDollarFetchRequest.put<IResponse<boolean>>('/prod-api/app-api/business/app/project/update', data)
+}

components/kl-uploader/index.vue

@@ -323,7 +323,7 @@
 
   // 判断是否是图片
   const handelFileType = (fileName: string) => {
-    const ext = fileName.split('.').pop()?.toLowerCase() || ''
+    const ext = fileName?.split('.').pop()?.toLowerCase() || ''
     return ['png', 'jpg', 'jpeg'].includes(ext)
   }
 </script>

pages/personal-Center/index/components/upload-table.vue

@@ -37,9 +37,9 @@
     <el-table-column prop="address" label="操作" width="100">
       <template #default="scope">
         <el-link v-if="scope.row.status === 4" type="primary" :underline="false" @click="handleXiaJia(scope.row)">下架</el-link>
-        <el-link type="danger" :underline="false" @click="handleDelete(scope.row)">删除</el-link>
+        <el-link type="danger" :underline="false" @click="handleDelete(scope.row)" class="mr-4px">删除</el-link>
         <el-link type="primary" :underline="false" @click="handlePreview(scope.row)">查看</el-link>
-        <el-link type="primary" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
+        <el-link type="primary" :underline="false" @click="handleEdit(scope.row)" class="mt-4px">编辑</el-link>
       </template>
     </el-table-column>
   </el-table>
@@ -125,11 +125,11 @@
   }
 
   const handlePreview = (row: any) => {
-    window.open(row.url)
+    navigateTo(`/upnew?id=${row.id}&projectId=${row.projectId}&type=preview`)
   }
 
   const handleEdit = (row: any) => {
-    window.open(`/personal-center/edit-resource?id=${row.id}`)
+    navigateTo(`/upnew?id=${row.id}&projectId=${row.projectId}&type=edit`)
   }
 </script>
 

pages/upnew/index.vue

@@ -4,7 +4,7 @@
   <!-- 发布图纸 -->
   <div class="ma-auto mt-[30px] w-[1440px] flex">
     <div class="w-[1016px]">
-      <el-form ref="formRef" :model="form" label-width="120px">
+      <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]">
@@ -13,7 +13,7 @@
               <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">
+          <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>
@@ -32,8 +32,19 @@
   import { reactive, ref, onMounted, computed } from 'vue'
 
   import type { TcreateReq } from '~/api/upnew/types'
-  import { create } from '~/api/upnew/index'
+  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, // 标签
@@ -84,15 +95,25 @@
   const loading = ref(false)
   const formRef = ref()
   const handleSubmit = () => {
-    formRef.value.validate((valid: boolean, val: any) => {
+    formRef.value.validate(async (valid: boolean, val: any) => {
       if (valid) {
         loading.value = true
-        create(form)
-          .then((res) => {
-            const { code } = res
-            if (code === 0) {
+        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')
@@ -102,10 +123,9 @@
               navigateTo('/model')
             }
           }
-          })
-          .finally(() => {
+        } finally {
           loading.value = false
-          })
+        }
       } else {
         console.log('error submit!')
         // 弹窗提示
@@ -123,6 +143,37 @@
     // 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(() => {
@@ -130,6 +181,10 @@
     drawTypeRef.value?.handleTypeChange(1)
     // 初始化图纸类型
     form.type = 1
+
+    if (type.value !== 'add') {
+      getDetail()
+    }
   })
 </script>
 <style lang="scss" scoped>