fix: parent form field in page settings do not display (opentiny#1069)

Author: gene9831

packages/plugins/page/src/PageGeneral.vue

@@ -32,7 +32,7 @@
         prop="parentId"
       >
         <tiny-select
-          v-model="pageSettingState.currentPageData.parentId"
+          v-model="pageParentId"
           value-field="id"
           render-type="tree"
           :tree-op="treeFolderOp"
@@ -94,15 +94,25 @@ export default {
   setup() {
     const { pageSettingState, changeTreeData, STATIC_PAGE_GROUP_ID } = usePage()
     const ROOT_ID = pageSettingState.ROOT_ID
-    const oldParentId = ref(pageSettingState.currentPageData.parentId)
+
+    const pageParentId = computed({
+      get() {
+        return String(pageSettingState.currentPageData.parentId)
+      },
+      set(value) {
+        pageSettingState.currentPageData.parentId = value
+      }
+    })
+
+    const oldParentId = ref(pageParentId.value)
 
     watchEffect(() => {
       oldParentId.value = pageSettingState.oldParentId
     })
 
     const currentRoute = computed(() => {
       let route = pageSettingState.currentPageData.route || ''
-      let parentId = pageSettingState.currentPageData.parentId
+      let parentId = pageParentId
 
       while (parentId !== ROOT_ID) {
         const parent = pageSettingState.treeDataMapping[parentId]
@@ -233,6 +243,7 @@ export default {
       pageRules,
       folderRules,
       pageSettingState,
+      pageParentId,
       generalForm,
       validGeneralForm,
       treeFolderOp,

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

@@ -75,6 +75,9 @@ const isTemporaryPage = reactive({
   saved: false
 })
 
+const STATIC_PAGE_GROUP_ID = 0
+const COMMON_PAGE_GROUP_ID = 1
+
 const generateCssString = (pageOptions, materialsOptions) => {
   if (!pageOptions?.pageBaseStyle?.className || !pageOptions?.pageBaseStyle?.style) {
     return ''
@@ -151,10 +154,21 @@ const isCurrentDataSame = () => {
   return isEqual
 }
 
+const getParentNode = (parentId) => {
+  return parentId === pageSettingState.ROOT_ID
+    ? { id: pageSettingState.ROOT_ID, children: pageSettingState.pages[STATIC_PAGE_GROUP_ID].data }
+    : pageSettingState.treeDataMapping[parentId]
+}
+
 const changeTreeData = (newParentId, oldParentId) => {
-  if (newParentId && oldParentId && newParentId !== oldParentId) {
-    const folderData = pageSettingState.treeDataMapping[newParentId]
-    const parentData = pageSettingState.treeDataMapping[oldParentId]
+  if (newParentId && oldParentId && String(newParentId) !== String(oldParentId)) {
+    const folderData = getParentNode(newParentId)
+    const parentData = getParentNode(oldParentId)
+
+    if (!folderData || !parentData) {
+      return
+    }
+
     const currentPageDataId = pageSettingState.currentPageData.id
     const curDataIndex = parentData.children?.findIndex?.(({ id }) => id === currentPageDataId)
 
@@ -187,9 +201,6 @@ const resetPageData = () => {
 // 判断当前页面内容是否有修改
 const isChangePageData = () => !isEqual(pageSettingState.currentPageData, pageSettingState.currentPageDataCopy)
 
-const STATIC_PAGE_GROUP_ID = 0
-const COMMON_PAGE_GROUP_ID = 1
-
 /**
  *
  * @typedef {Object} PageData