feat(pageData): 完成数据结构优化

app/controller/editor.ts

@@ -42,6 +42,7 @@ export default class EditorController extends Controller {
         for (let i = 0; i < page.elements.length; i++) {
           delete page.elements[i].schame
         }
+        delete page.scheme;
         pageInfo.page = JSON.stringify(page);
       }
       await ctx.service.redis.set(`pageInfo:${ctx.params.uuid}`, pageInfo);

app/web/page/editor/component/DynamicComponent/index.ts

@@ -61,7 +61,7 @@ export default class DynamicComponent extends Vue {
     const bussinessEleConfig = Object.values(this.eleConfigMap).reduce((pre, cur) => pre.concat(cur.children), []);
     const rawEleConfig = this.type === 'business' ? bussinessEleConfig : this.eleConfig;
     const eleConfig = flatten(rawEleConfig).find(cfg => cfg.eleName === eleName);
-    const { title, config, value, commonStyle, page } = cloneDeep(eleConfig);
+    const { title, value, commonStyle, page } = cloneDeep(eleConfig);
     const id = uuid().slice(19);
     const pointH = eleName === 'freedom-container' ? 360 : 105;
     return {
@@ -70,7 +70,6 @@ export default class DynamicComponent extends Vue {
         name: eleName,
         title,
         point: {x: 0, y: 0, w: this.colNum, h: pointH, i: id},
-        schame: config,
         props: {...value},
         commonStyle
       },

app/web/page/editor/component/DynamicForm/index.ts

@@ -15,8 +15,10 @@ import Textarea from './component/Textarea/index.vue';
 import Number from './component/Number/index.vue';
 import ColumnSelector from './component/ColumnSelector/index.vue';
 import { resizeDiv, getStyle } from '@/service/utils.service';
+import { getAllScheme } from '../../../store/modules/editor/scheme';
 import EventBus from '@service/eventBus.service';
 
+const allComponentsMap = getAllScheme();
 @Component({ components: { Upload, ColorSelector, BaseSelect, FormList, Textarea, Number, ComponentSelect, GoodsTableModal, CouponTableModal, ColumnSelector, DiscountGoodsSelector }, name: 'DynamicForm' })
 export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMixin) {
   @State(state => state.editor.curEleIndex) curEleIndex;
@@ -27,6 +29,7 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
     paddingTop: 0, paddingBottom: 0, paddingLeft: 0, paddingRight: 0
   };
   form: object = {};
+  currentSchame: object[] = [];
   styleSchame: object = {
     curEle: [
       {
@@ -178,12 +181,12 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
   }
 
   get hasGroup() {
-    return this.curElement?.schame?.some(v => v.title);
+    return this.currentSchame.schame?.some(v => v.title);
   }
 
   get curFormKey() {
     const keys = [];
-    this.curElement.schame?.forEach(schame => {
+    this.currentSchame?.forEach(schame => {
       if (schame.children) {
         schame.children.forEach(child => {
           keys.push(child.key);
@@ -234,13 +237,14 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
         element = this.pageData.elements[this.curEleIndex];
       }
     }
+    this.currentSchame = allComponentsMap[element.name] || [];
     return element;
   }
 
   setForm(newVal, type) {
     this.form = { id: `${type}${newVal}` };
     const element = this.getCurElement();
-    element?.schame?.forEach(schame => {
+    this.currentSchame?.forEach(schame => {
       if (schame.children) {
         schame.children.forEach(child => {
           this.$set(this.form, child.key, element.props[child.key]);

app/web/page/editor/component/DynamicForm/index.vue

@@ -4,9 +4,9 @@
       <h2>{{ curElement.title }}</h2>
       <div>{{ `组件ID: ${curElement.id}` }}</div>
     </div>
-    <Form class="dynamic-form-component" @submit.native.prevent :label-width="110" :model="form" v-if="curElement.schame && curElement.schame.length">
+    <Form class="dynamic-form-component" @submit.native.prevent :label-width="110" :model="form" v-if="currentSchame && currentSchame.length">
       <h3 v-if="!hasGroup">组件属性</h3>
-      <template v-for="(item, index) in curElement.schame">
+      <template v-for="(item, index) in currentSchame">
         <div v-if="item.title">
           <h3>{{ item.title }}</h3>
           <FormItem :label="child.name" :key="curElement.id + child.key" v-for="child in item.children">

app/web/page/editor/component/MaterialMenu/index.ts

 import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
 import DynamicComponent from '@editor/component/DynamicComponent/index.vue';
+import { cloneDeep } from 'lodash';
 import { basicComponents, businessComponents } from '@lib/config';
 import { State } from 'vuex-class';
 
-@Component({ components: { DynamicComponent }, name: 'DynamicForm' })
+@Component({ components: { DynamicComponent }, name: 'MaterialMenu' })
 export default class DynamicForm extends Vue {
   @State(state => state.editor.templateList) templateList!: any[];
 

app/web/page/editor/view/dashboard/index.ts

@@ -16,6 +16,7 @@ import EventBus from '@service/eventBus.service';
 import { getStyle } from '@service/utils.service';
 import OperationPanel from '@editor/component/OperationPanel/index.vue';
 import type { PageInfo, Page, GridLayout } from '../../../store/modules/editor/state';
+import { pickAllScheme } from '../../../store/modules/editor/scheme';
 
 @Component({components: { GridLayout: VueGridLayout.GridLayout,
   GridItem: VueGridLayout.GridItem, BasicPageFormModal, RecordModal, MaterialMenu, DynamicFormTabs, OperationPanel }, name: 'DashBoard'})
@@ -93,6 +94,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
         pageData.props.diversion = diversion;
         pageData.props.shareCoverImage = shareCoverImage;
         pageData.props.shareOpenMethod = shareOpenMethod;
+        pageData.scheme = pickAllScheme(pageData.elements);
         const pageInfo = { diversion, page: JSON.stringify(pageData), author: user?.account, isPublish,  pageName, pageDescribe, pageKeywords, coverImage, isTemplate, shareCoverImage, shareOpenMethod } as pageInfo;
         if (this.uuid) { pageInfo.uuid = this.uuid; }
         await this.savePageData({ pageInfo, pageData: this.pageData });

app/web/page/store/modules/editor/index.ts

@@ -21,6 +21,7 @@ import {
 import { v4 as uuid } from 'uuid';
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
+import { separateAllScheme, pickAllScheme } from './scheme';
 
 export default class EditorModule implements Module<EditorState, RootState> {
   state: EditorState;
@@ -59,6 +60,8 @@ export default class EditorModule implements Module<EditorState, RootState> {
       const res = await api.getPageById(condition);
       const { page, ...rest } = res as PageInfo;
       const pageObj = JSON.parse(page as string);
+      pickAllScheme(pageObj.elements);
+      // separateAllScheme(pageObj.elements);
       commit(SET_PAGE_INFO, { ...rest, page: pageObj });
 
       const goodsTabs = {};

app/web/page/store/modules/editor/scheme.ts

+import { basicComponents, businessComponents } from '@lib/config';
+
+// 获取scheme
+export function getAllScheme() {
+  let businessComponentsMap = [];
+  businessComponents.forEach(item => {
+    businessComponentsMap = [...businessComponentsMap, ...item.children];
+  });
+  const schemeMap = {};
+  [...basicComponents, ...businessComponentsMap].forEach(item => {
+    schemeMap[item.eleName] = item.config;
+  });
+  return schemeMap;
+}
+
+// 批量移除schema
+export function separateAllScheme(elements) {
+  elements.forEach(ele => {
+    if (ele.schame) {
+      delete ele.schame;
+    }
+    if (ele.child && ele.child.length) {
+      separateAllScheme(ele.child);
+    }
+  });
+}
+
+// 提取schame
+export function pickAllScheme(elements) {
+  const allScheme = getAllScheme();
+  let scheme = {};
+  elements.forEach(ele => {
+    const { name } = ele;
+    if (name && !scheme[name]) {
+      scheme[name] = allScheme[name];
+    }
+    if (ele.child && ele.child.length) {
+      scheme = Object.assign({}, scheme, pickAllScheme(ele.child));
+    }
+  });
+  return scheme;
+}

app/web/page/store/modules/editor/state.ts

@@ -112,6 +112,7 @@ export const defaultState = {
         ],
       },
       elements: [],
+      scheme: {}
     }
   },
   templateList: [],