feat: 新增项目信息修改功能

src/views/chart/ContentHeader/headerTitle/index.vue

@@ -24,32 +24,31 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed } from 'vue'
-import { fetchRouteParams } from '@/utils'
+import { ref, nextTick, computed, watchEffect } from 'vue'
+import { ResultEnum } from '@/enums/httpEnum'
+import { fetchRouteParamsLocation, httpErrorHandle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { updateProjectApi } from '@/api/path/project'
+import { useSync } from '../../hooks/useSync.hook'
 import { icon } from '@/plugins'
+
+const chartEditStore = useChartEditStore()
+const { dataSyncUpdate } = useSync()
 const { FishIcon } = icon.ionicons5
 
 const focus = ref<boolean>(false)
 const inputInstRef = ref(null)
 
-// 根据路由 id 参数获取项目信息
-const fetchProhectInfoById = () => {
-  const routeParamsRes = fetchRouteParams()
-  if (!routeParamsRes) return
-  const { id } = routeParamsRes
-  if (id.length) {
-    return id[0]
-  }
-  return ''
-
-}
-
-const title = ref<string>(fetchProhectInfoById() || '')
+const title = ref<string>(fetchRouteParamsLocation())
 
+watchEffect(() => {
+  title.value = chartEditStore.getEditCanvasConfig.projectName || ''
+})
 
 const comTitle = computed(() => {
-  title.value = title.value.replace(/\s/g, "");
-  return title.value.length ? title.value : '新项目'
+  title.value = title.value && title.value.replace(/\s/g, "")
+  return title.value.length ? title.value : fetchRouteParamsLocation()
 })
 
 const handleFocus = () => {
@@ -59,7 +58,20 @@ const handleFocus = () => {
   })
 }
 
-const handleBlur = () => {
+const handleBlur = async () => {
   focus.value = false
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, title.value || '')
+  const { remarks, backgroundImage, background } = chartEditStore.getEditCanvasConfig
+  const res:any = await updateProjectApi({
+    id: fetchRouteParamsLocation(),
+    projectName: title.value,
+    indexImage: backgroundImage || background,
+    remarks: remarks
+  })
+  if(res.code === ResultEnum.SUCCESS) {
+    dataSyncUpdate()
+  } else {
+    httpErrorHandle()
+  }
 }
 </script>