From 881c4f3a2932ff4892bf09e6de9f790d5f93d9c6 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Tue, 31 Oct 2023 16:01:22 +0800
Subject: [PATCH] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=201.=20=E6=8B=86=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1=E7=94=A8=E7=9A=84=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=E4=BF=AE=E6=94=B9=E6=8E=A5=E5=8F=A3=202.=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=A8=A1=E6=9D=BF=E7=9A=84=E9=A1=B5=E9=9D=A2=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=203.=20=E5=A2=9E=E5=8A=A0=E5=94=AF=E4=B8=80=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E6=A0=A1=E9=AA=8C=204.=20=E5=A2=9E=E5=8A=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BC=96=E8=BE=91=E5=99=A8=EF=BC=8C=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E7=BB=84=E4=BB=B6=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/diy/page.ts            | 10 +++++
 src/api/mall/promotion/diy/template.ts        | 17 ++++++++
 src/components/DiyEditor/index.vue            | 31 +++++++++++++--
 .../mall/promotion/diy/page/decorate.vue      |  5 ++-
 .../mall/promotion/diy/template/decorate.vue  | 39 ++++++++++++++-----
 5 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/src/api/mall/promotion/diy/page.ts b/src/api/mall/promotion/diy/page.ts
index 255015d2..1cd34282 100644
--- a/src/api/mall/promotion/diy/page.ts
+++ b/src/api/mall/promotion/diy/page.ts
@@ -33,3 +33,13 @@ export const updateDiyPage = async (data: DiyPageVO) => {
 export const deleteDiyPage = async (id: number) => {
   return await request.delete({ url: `/promotion/diy-page/delete?id=` + id })
 }
+
+// 获得装修页面属性
+export const getDiyPageProperty = async (id: number) => {
+  return await request.get({ url: `/promotion/diy-page/get-property?id=` + id })
+}
+
+// 更新装修页面属性
+export const updateDiyPageProperty = async (data: DiyPageVO) => {
+  return await request.put({ url: `/promotion/diy-page/update-property`, data })
+}
diff --git a/src/api/mall/promotion/diy/template.ts b/src/api/mall/promotion/diy/template.ts
index 72eea41c..f8d4bc80 100644
--- a/src/api/mall/promotion/diy/template.ts
+++ b/src/api/mall/promotion/diy/template.ts
@@ -1,4 +1,5 @@
 import request from '@/config/axios'
+import { DiyPageVO } from '@/api/mall/promotion/diy/page'
 
 export interface DiyTemplateVO {
   id?: number
@@ -10,6 +11,10 @@ export interface DiyTemplateVO {
   property: string
 }
 
+export interface DiyTemplatePropertyVO extends DiyTemplateVO {
+  pages: DiyPageVO[]
+}
+
 // 查询装修模板列表
 export const getDiyTemplatePage = async (params: any) => {
   return await request.get({ url: `/promotion/diy-template/page`, params })
@@ -39,3 +44,15 @@ export const deleteDiyTemplate = async (id: number) => {
 export const useDiyTemplate = async (id: number) => {
   return await request.put({ url: `/promotion/diy-template/use?id=` + id })
 }
+
+// 获得装修模板属性
+export const getDiyTemplateProperty = async (id: number) => {
+  return await request.get<DiyTemplatePropertyVO>({
+    url: `/promotion/diy-template/get-property?id=` + id
+  })
+}
+
+// 更新装修模板属性
+export const updateDiyTemplateProperty = async (data: DiyTemplateVO) => {
+  return await request.put({ url: `/promotion/diy-template/update-property`, data })
+}
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 520cd497..f0fed316 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -59,7 +59,7 @@
               }"
             >
               <draggable
-                class="drag-area page-prop-area"
+                class="page-prop-area drag-area"
                 v-model="pageComponents"
                 item-key="index"
                 :animation="200"
@@ -200,18 +200,25 @@ const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_C
 const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
 
 // 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>(unref(pageConfigComponent))
+const selectedComponent = ref<DiyComponent<any>>()
 // 选中的组件索引
 const selectedComponentIndex = ref<number>(-1)
 // 组件列表
 const pageComponents = ref<DiyComponent<any>[]>([])
 // 定义属性
 const props = defineProps<{
+  // 页面配置，支持Json字符串
   modelValue: string | PageConfig
+  // 标题
   title: string
-  libs: DiyComponentLibrary[] // 组件库
+  // 组件库
+  libs: DiyComponentLibrary[]
+  // 是否显示顶部导航栏
   showNavigationBar: boolean
+  // 是否显示底部导航菜单
   showTabBar: boolean
+  // 是否显示页面配置
+  showPageConfig: boolean
 }>()
 
 // 监听传入的页面配置
@@ -255,6 +262,8 @@ const handleSave = () => {
 
 // 处理页面选中：显示属性表单
 const handlePageSelected = (event: any) => {
+  if (!props.showPageConfig) return
+
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (includes(event?.target?.classList, 'page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent))
@@ -351,6 +360,22 @@ const handlePreview = () => {
   message.warning('开发中~')
   emits('preview')
 }
+
+// 设置默认选中的组件
+const setDefaultSelectedComponent = () => {
+  if (props.showPageConfig) {
+    selectedComponent.value = unref(pageConfigComponent)
+  } else if (props.showNavigationBar) {
+    selectedComponent.value = unref(navigationBarComponent)
+  } else if (props.showTabBar) {
+    selectedComponent.value = unref(tabBarComponent)
+  }
+}
+watch(
+  () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
+  () => setDefaultSelectedComponent()
+)
+onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
 .editor {
diff --git a/src/views/mall/promotion/diy/page/decorate.vue b/src/views/mall/promotion/diy/page/decorate.vue
index 76336bc4..54e7206c 100644
--- a/src/views/mall/promotion/diy/page/decorate.vue
+++ b/src/views/mall/promotion/diy/page/decorate.vue
@@ -4,6 +4,7 @@
     v-model="formData.property"
     :title="formData.name"
     :libs="componentLibs"
+    :show-page-config="true"
     :show-navigation-bar="true"
     :show-tab-bar="false"
     @save="submitForm"
@@ -51,7 +52,7 @@ const formRef = ref() // 表单 Ref
 const getPageDetail = async (id: any) => {
   formLoading.value = true
   try {
-    formData.value = await DiyPageApi.getDiyPage(id)
+    formData.value = await DiyPageApi.getDiyPageProperty(id)
   } finally {
     formLoading.value = false
   }
@@ -63,7 +64,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    await DiyPageApi.updateDiyPage(unref(formData)!)
+    await DiyPageApi.updateDiyPageProperty(unref(formData)!)
     message.success('保存成功')
   } finally {
     formLoading.value = false
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
index 9c7500b2..7a3cff2f 100644
--- a/src/views/mall/promotion/diy/template/decorate.vue
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -1,11 +1,12 @@
 <template>
   <DiyEditor
     v-if="formData && !formLoading"
-    v-model="formData.property"
+    v-model="currentFormData!.property"
     :title="templateItems[selectedTemplateItem].name"
     :libs="libs"
+    :show-page-config="selectedTemplateItem !== 0"
     :show-tab-bar="selectedTemplateItem === 0"
-    :show-navigation-bar="selectedTemplateItem > 0"
+    :show-navigation-bar="selectedTemplateItem !== 0"
     @save="submitForm"
   >
     <template #toolBarLeft>
@@ -25,6 +26,7 @@
 </template>
 <script setup lang="ts">
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DiyComponentLibrary } from '@/components/DiyEditor/util'
 
@@ -42,14 +44,17 @@ const templateItems = reactive([
 const message = useMessage() // 消息弹窗
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref<DiyTemplateApi.DiyTemplateVO>()
+const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
 const formRef = ref() // 表单 Ref
+// 当前编辑的属性
+const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
 
 // 获取详情
 const getPageDetail = async (id: any) => {
   formLoading.value = true
   try {
-    formData.value = await DiyTemplateApi.getDiyTemplate(id)
+    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+    currentFormData.value = formData.value
   } finally {
     formLoading.value = false
   }
@@ -82,12 +87,21 @@ const pageLibs = [
 ] as DiyComponentLibrary[]
 // 当前组件库
 const libs = ref<DiyComponentLibrary[]>(templateLibs)
+// 模板选项切换
 const handleTemplateItemChange = () => {
+  // 编辑模板
   if (selectedTemplateItem.value === 0) {
     libs.value = templateLibs
-  } else {
-    libs.value = pageLibs
+    currentFormData.value = formData.value
+    return
   }
+
+  // 编辑页面
+  libs.value = pageLibs
+  currentFormData.value = formData.value!.pages.find(
+    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+  )
+  console.log(currentFormData.value)
 }
 
 // 提交表单
@@ -97,7 +111,13 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    await DiyTemplateApi.updateDiyTemplate(unref(formData)!)
+    if (selectedTemplateItem.value === 0) {
+      // 提交模板属性
+      await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+    } else {
+      // 提交页面属性
+      await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+    }
     message.success('保存成功')
   } finally {
     formLoading.value = false
@@ -113,8 +133,9 @@ const resetForm = () => {
     usedTime: undefined,
     remark: '',
     previewImageUrls: [],
-    property: ''
-  } as DiyTemplateApi.DiyTemplateVO
+    property: '',
+    pages: []
+  } as DiyTemplateApi.DiyTemplatePropertyVO
   formRef.value?.resetFields()
 }