feat(mockserver,plugins,controller): 基于模板内容生成页面

mockServer/src/routes/main-routes.js

@@ -71,6 +71,11 @@ router.post('/app-center/api/pages/create', async (ctx) => {
   ctx.body = await mockService.pageService.create(ctx.request.body)
 })
 
+// batch create pages
+router.post('/app-center/api/pages/batch-create', async (ctx) => {
+  ctx.body = await mockService.pageService.createBatch(ctx.request.body)
+})
+
 router.post('/app-center/api/pages/update/:id', async (ctx) => {
   const { id } = ctx.params
   const { body } = ctx.request

mockServer/src/services/pages.js

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2023 - present TinyEngine Authors.
-* Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2023 - present TinyEngine Authors.
+ * Copyright (c) 2023 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 import path from 'path'
 import DateStore from '@seald-io/nedb'
@@ -78,6 +78,19 @@ export default class PageService {
     return getResponseData(result)
   }
 
+  async createBatch(paramsArray) {
+    const pageDataArray = paramsArray.map((params) => {
+      const model = params.isPage ? this.pageModel : this.folderModel
+      return { ...model, ...params }
+    })
+
+    const results = await this.db.insertAsync(pageDataArray)
+
+    await Promise.all(results.map((result) => this.db.updateAsync({ _id: result._id }, { $set: { id: result._id } })))
+
+    return getResponseData(results)
+  }
+
   async update(id, params) {
     await this.db.updateAsync({ _id: id }, { $set: params })
     const result = await this.db.findOneAsync({ _id: id })

packages/controller/js/http.js

@@ -84,6 +84,7 @@ export const handleTemplateUpdate = (templateId, params) => {
 
       templateSettingState.isNew = false
       useNotify({ message: '保存成功!', type: 'success' })
+      templateSettingState.updateTreeData()
 
       setTemplateSaved(true)
       return res
@@ -92,3 +93,22 @@ export const handleTemplateUpdate = (templateId, params) => {
       useNotify({ title: '保存失败', message: `${err?.message || ''}`, type: 'error' })
     })
 }
+
+/**
+ * 添加页面
+ * @param { json } params 页面信息
+ * @returns { Promise }
+ */
+
+export const handleCreatePage = (params) => {
+  return http.post('/app-center/api/pages/create', params)
+}
+
+/**
+ * 批量添加页面
+ * @param { json } params 页面数组信息
+ * @returns { Promise }
+ */
+export const handleBatchCreatePage = (params) => {
+  return http.post('/app-center/api/pages/batch-create', params)
+}

packages/plugins/page/src/http.js

@@ -43,6 +43,9 @@ export const fetchHistoryDetail = (pageId) => http.get(`/app-center/api/pages/hi
 
 export const requestUpdatePage = (pageId, params) => http.post(`/app-center/api/pages/update/${pageId}`, params)
 
+// 批量新增页面
+export const requestBatchCreatePage = (params) => http.post('/app-center/api/pages/batch-create', params)
+
 export default {
   fetchPageList,
   fetchPageDetail,
@@ -53,5 +56,6 @@ export default {
   fetchHistoryDetail,
   handleRouteHomeUpdate,
   requestRestorePageHistory,
-  requestUpdatePage
+  requestUpdatePage,
+  requestBatchCreatePage
 }

packages/plugins/template/src/TemplateGeneral.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="general-config">
     <tiny-form v-if="type !== 'generate'" ref="generalForm" :model="templateSettingState.currentTemplateData"
-      :rules="templateRules" label-width="120px" validate-type="text" :inline-message="true" :label-align="true"
-      label-position="left" class="general-config-form">
+      :rules="templateSettingState.currentTemplateData.type === 'template' ? templateRules : categoryRules"
+      label-width="120px" validate-type="text" :inline-message="true" :label-align="true" label-position="left"
+      class="general-config-form">
       <tiny-form-item v-if="type === 'add'" prop="type" label="新增" class="form-item-page-type">
         <tiny-radio v-model="templateSettingState.currentTemplateData.type" class="page-type-radio" label="category">
           模板类别
@@ -23,17 +24,23 @@
     </tiny-form>
     <div v-else>
       <p>请勾选模版生成页面</p>
-      <tiny-tree :props="{ children: 'children', label: 'name' }" ref="treeRef" show-checkbox check-strictly
+      <tiny-tree :props="{ children: 'children', label: 'name' }" ref="treeRef" show-checkbox :check-strictly="false"
         :data="treeData" node-key="id" current-node-key="1-1" default-expand-all>
       </tiny-tree>
+      <tiny-button class="generate-page-btn" type="primary" @click="generatePage">生成页面</tiny-button>
     </div>
   </div>
 </template>
 
 <script lang="jsx">
 import { ref, computed, watchEffect } from 'vue'
 import { Form, FormItem, Input, Select, Radio, Tree } from '@opentiny/vue'
-import { useTemplate } from '@opentiny/tiny-engine-controller'
+import { useTemplate, usePage, useApp, useNotify } from '@opentiny/tiny-engine-controller'
+import { constants } from '@opentiny/tiny-engine-utils'
+import { Button } from '@opentiny/vue'
+import { handleBatchCreatePage } from '@opentiny/tiny-engine-controller/js/http'
+import { REGEXP_PAGE_NAME } from '@opentiny/tiny-engine-controller/js/verification'
+
 
 export default {
   components: {
@@ -42,7 +49,8 @@ export default {
     TinyInput: Input,
     TinySelect: Select,
     TinyRadio: Radio,
-    TinyTree: Tree
+    TinyTree: Tree,
+    TinyButton: Button
   },
   props: {
     modelValue: {
@@ -59,6 +67,11 @@ export default {
     const ROOT_ID = templateSettingState.ROOT_ID
     const oldParentId = ref(templateSettingState.currentTemplateData.parentId)
 
+    const treeRef = ref(null)
+    const { DEFAULT_PAGE, STATIC_PAGE_GROUP_ID, pageSettingState } = usePage()
+    const { COMPONENT_NAME } = constants
+    const { appInfoState } = useApp()
+
     watchEffect(() => {
       oldParentId.value = templateSettingState.oldParentId
     })
@@ -68,16 +81,24 @@ export default {
     const templateRules = {
       name: [
         { required: true, message: '请输入名称' },
-        // {
-        //   pattern: REGEXP_FOLDER_NAME,
-        //   message: '只允许包含英文字母、数字、下横线_、中横线-, 且以英文字母开头'
-        // },
+        {
+          pattern: REGEXP_PAGE_NAME,
+          message: '只允许包含英文字母，且为大写开头驼峰格式, 如DemoPage'
+        },
         { min: 3, max: 25, message: '长度在 3 到 25 个字符' }
       ],
 
       type: [{ required: true, message: '必须选择新增类型' }]
     }
 
+    const categoryRules = {
+      name: [
+        { required: true, message: '请输入名称' },
+        { min: 2, max: 25, message: '长度在 2 到 25 个字符' }
+      ],
+      type: [{ required: true, message: '必须选择新增类型' }]
+    }
+
     const getFolders = (templates) => {
       const list = []
 
@@ -142,15 +163,65 @@ export default {
       oldParentId.value = value.id
     }
 
+    const transTemplateToPage = (template) => {
+      const { page_content, ...other } = DEFAULT_PAGE
+      const createParams = {
+        ...other,
+        page_content: {
+          ...page_content,
+          ...template.template_content,
+          componentName: COMPONENT_NAME.Page,
+          fileName: template.template_content.fileName
+        },
+        app: appInfoState.selectedId,
+        isPage: true,
+        parentId: STATIC_PAGE_GROUP_ID + '',
+        name: template.name,
+        route: template.name.toLowerCase()
+      }
+
+      if (createParams.id) {
+        delete createParams.id
+        delete createParams._id
+      }
+
+      return createParams
+    }
+
+    const generatePage = () => {
+      const checkedNodes = treeRef.value.getCheckedNodes()
+      const templates = checkedNodes.filter((node) => node.isTemplate)
+      const pagesArr = templates.map((template) => transTemplateToPage(template))
+
+      handleBatchCreatePage(pagesArr)
+        .then(() => {
+          useNotify({
+            type: 'success',
+            message: '生成页面成功，请去页面管理中查看!'
+          })
+          pageSettingState.updateTreeData()
+        })
+        .catch((err) => {
+          useNotify({
+            type: 'error',
+            title: '生成页面失败',
+            message: JSON.stringify(err?.message || err)
+          })
+        })
+    }
+
 
     return {
       templateRules,
+      categoryRules,
       templateSettingState,
       generalForm,
       validGeneralForm,
       treeFolderOp,
       changeParentForderId,
-      treeData
+      treeData,
+      treeRef,
+      generatePage
     }
   }
 }
@@ -210,6 +281,10 @@ export default {
     }
   }
 }
+
+.generate-page-btn {
+  margin-top: 20px;
+}
 </style>
 <style lang="less">
 .tiny-select-dropdown.parent-fold-select-dropdown {

packages/plugins/template/src/TemplateSetting.vue

@@ -3,8 +3,8 @@
     <template #header>
       <button-group>
         <tiny-button v-if="operateType !== 'generate'" type="primary" @click="saveTemplateSetting">保存</tiny-button>
-        <tiny-button v-else-if="operateType !== 'add'" type="primary" @click="generatePage">生成页面</tiny-button>
-        <svg-button v-if="operateType === 'edit'" name="delete" placement="bottom" tips="删除" @click="deleteTemplate"></svg-button>
+        <svg-button v-if="operateType === 'edit'" name="delete" placement="bottom" tips="删除"
+          @click="deleteTemplate"></svg-button>
         <svg-button class="close-plugin-setting-icon" name="close" @click="closeTemplateSetting"></svg-button>
       </button-group>
     </template>