feat: 默认页调整为由父级页面下拉选择

Author: lichunn

packages/common/js/http.js

@@ -37,7 +37,7 @@ export const requestEvent = (url, params) => {
  * @returns { Promise }
  *
  */
-export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage) => {
+export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage, isShowNotify = true) => {
   return getMetaApi(META_SERVICE.Http)
     .post(`/app-center/api/pages/update/${pageId}`, params)
     .then((res) => {
@@ -57,7 +57,9 @@ export const handlePageUpdate = (pageId, params, routerChange, isCurEditPage) =>
         }
       }
 
-      useNotify({ message: '保存成功!', type: 'success' })
+      if (isShowNotify) {
+        useNotify({ message: '保存成功!', type: 'success' })
+      }
 
       // 更新 页面状态 标志
       setSaved(true)

packages/plugins/page/src/Main.vue

@@ -136,9 +136,6 @@ export default {
             .catch(() => {
               useNotify({ message: '主页设置失败！', type: 'error' })
             })
-        },
-        cancel: () => {
-          state.checked = false
         }
       })
     }

packages/plugins/page/src/PageGeneral.vue

@@ -53,16 +53,26 @@
           </span>
         </div>
       </tiny-form-item>
-      <tiny-form-item v-if="pageSettingState.currentPageData.group !== 'publicPages'" prop="isDefault">
-        <tiny-checkbox v-model="pageSettingState.currentPageData.isDefault">设为默认页</tiny-checkbox>
+      <tiny-form-item
+        v-if="pageSettingState.currentPageData.group !== 'publicPages' && !isFolder"
+        label="设置默认跳转页"
+        prop="isDefault"
+      >
+        <tiny-select
+          v-model="state.defaultPageId"
+          :options="state.childPageOp"
+          placeholder="请选择默认跳转页"
+          @change="changeDefaultPage"
+        ></tiny-select>
       </tiny-form-item>
     </tiny-form>
   </div>
 </template>
 
 <script lang="jsx">
-import { ref, computed, watchEffect } from 'vue'
-import { Form, FormItem, Input, Select, Radio, Checkbox } from '@opentiny/vue'
+import { ref, computed, watchEffect, reactive } from 'vue'
+import { Form, FormItem, Input, Select, Radio } from '@opentiny/vue'
+import { iconFile } from '@opentiny/vue-icon'
 import { usePage } from '@opentiny/tiny-engine-meta-register'
 import { REGEXP_PAGE_NAME, REGEXP_FOLDER_NAME, REGEXP_ROUTE } from '@opentiny/tiny-engine-common/js/verification'
 
@@ -72,8 +82,7 @@ export default {
     TinyFormItem: FormItem,
     TinyInput: Input,
     TinySelect: Select,
-    TinyRadio: Radio,
-    TinyCheckbox: Checkbox
+    TinyRadio: Radio
   },
   props: {
     modelValue: {
@@ -86,7 +95,7 @@ export default {
     }
   },
   setup() {
-    const { pageSettingState, changeTreeData, STATIC_PAGE_GROUP_ID } = usePage()
+    const { pageSettingState, changeTreeData, STATIC_PAGE_GROUP_ID, getPageChildren, setDefaultPage } = usePage()
     const ROOT_ID = pageSettingState.ROOT_ID
 
     const pageParentId = computed({
@@ -99,9 +108,40 @@ export default {
     })
 
     const oldParentId = ref(pageParentId.value)
+    const state = reactive({
+      childPageList: [],
+      childPageOp: [],
+      defaultPageId: ''
+    })
+
+    const setChildAndDefaultPage = async (id) => {
+      if (pageSettingState.isNew) {
+        state.childPageList = []
+        state.childPageOp = []
+        state.defaultPageId = ''
+      } else {
+        state.childPageList = await getPageChildren(id)
+        if (state.childPageList?.length) {
+          state.defaultPageId = state.childPageList?.find((item) => item.isDefault)?.id
+          state.childPageOp = state.childPageList.map((item) => {
+            return {
+              value: item.id,
+              label: item.name,
+              icon: iconFile()
+            }
+          })
+          setDefaultPage(state.childPageList, state.defaultPageId)
+        }
+      }
+    }
+
+    const changeDefaultPage = () => {
+      setDefaultPage(state.childPageList, state.defaultPageId)
+    }
 
     watchEffect(() => {
       oldParentId.value = pageSettingState.oldParentId
+      setChildAndDefaultPage(pageSettingState.currentPageData?.id)
     })
 
     const currentRoute = computed(() => {
@@ -242,7 +282,9 @@ export default {
       validGeneralForm,
       treeFolderOp,
       currentRoute,
-      changeParentForderId
+      changeParentForderId,
+      state,
+      changeDefaultPage
     }
   }
 }

packages/plugins/page/src/PageSetting.vue

@@ -208,11 +208,11 @@ export default {
         })
     }
 
-    const updatePage = (id, params) => {
+    const updatePage = (id, params, isShowNotify = true) => {
       const routerChange = pageSettingState.currentPageDataCopy.route !== pageSettingState.currentPageData.route
       const isCurEditPage = pageState?.currentPage?.id === id
 
-      return handlePageUpdate(id, params, routerChange, isCurEditPage)
+      return handlePageUpdate(id, params, routerChange, isCurEditPage, isShowNotify)
     }
 
     const restorePage = (pageData) => {
@@ -273,6 +273,7 @@ export default {
       copyData.route = `${copyData.route}Copy`
       pageSettingState.currentPageData = copyData
       pageSettingState.currentPageDataCopy = extend(true, {}, copyData)
+      pageSettingState.defaultPage = null
     }
 
     const copyPage = () => {
@@ -291,6 +292,11 @@ export default {
       }
     }
 
+    const settingDefaultPage = () => {
+      const params = { ...pageSettingState.defaultPage, isDefault: true }
+      updatePage(pageSettingState.defaultPage?.id, params, false)
+    }
+
     const createHistoryMessage = () => {
       if (pageSettingState.isNew) {
         pageSettingState.currentPageData.message = 'Page auto save'
@@ -303,6 +309,7 @@ export default {
         const exec = () => {
           pageSettingState.currentPageData.message = state.historyMessage.trim() || 'Page auto save'
           editPage()
+          settingDefaultPage()
           state.historyMessage = ''
         }
 

packages/plugins/page/src/composable/usePage.js

@@ -65,7 +65,8 @@ const pageSettingState = reactive({
   isNew: false,
   ROOT_ID: '0', // 根节点ID
   updateTreeData: null,
-  treeDataMapping: {}
+  treeDataMapping: {},
+  defaultPage: null // 当前页设置的默认页
 })
 
 const isTemporaryPage = reactive({
@@ -193,6 +194,7 @@ const resetPageData = () => {
   pageSettingState.currentPageData = {}
   pageSettingState.currentPageDataCopy = {}
   pageSettingState.oldParentId = null
+  pageSettingState.defaultPage = null
 }
 
 // 判断当前页面内容是否有修改
@@ -488,6 +490,12 @@ const getFamily = async (previewParams) => {
   return familyPages
 }
 
+const setDefaultPage = (childPageList, id) => {
+  if (childPageList?.length && id) {
+    pageSettingState.defaultPage = childPageList.find((item) => item.id === id)
+  }
+}
+
 export default () => {
   return {
     getDefaultPage,
@@ -507,6 +515,7 @@ export default () => {
     getFamily,
     getPageChildren,
     STATIC_PAGE_GROUP_ID,
-    COMMON_PAGE_GROUP_ID
+    COMMON_PAGE_GROUP_ID,
+    setDefaultPage
   }
 }