Merge branch 'feature/pageData' into 'master'

Feature/page data

See merge request !59

app/controller/editor.ts

@@ -14,9 +14,16 @@ export default class EditorController extends Controller {
 
   public async save(ctx: Context) {
     const pageInfo = ctx.request.body;
-    const result = await ctx.model.PageInfo.create({ ...pageInfo, uuid: uuidv1().replace(/-/g, ''), tenantId: ctx.headers['qg-tenant-id']});
-    await ctx.service.redis.set(`pageInfo:${result.dataValues.uuid}`, result.dataValues);
-    ctx.body = ctx.helper.ok(result);
+    try {
+      const result = await ctx.model.PageInfo.create({ ...pageInfo, uuid: uuidv1().replace(/-/g, ''), tenantId: ctx.headers['qg-tenant-id']});
+      ctx.body = ctx.helper.ok(result);
+      await ctx.service.redis.set(`pageInfo:${result.dataValues.uuid}`, result.dataValues);
+    } catch (error) {
+      if (error.message.indexOf('Data too long') > -1 && error.message.indexOf('page_data') > -1) {
+        error.message = '配置组件过多，请对组件进行删减';
+      }
+      ctx.body = ctx.helper.fail(error);
+    }
   }
 
   public async update(ctx: Context) {
@@ -27,10 +34,17 @@ export default class EditorController extends Controller {
     if (ctx.headers['qg-tenant-id']) {
       pageInfo.tenantId = +ctx.headers['qg-tenant-id'];
     }
-    const result = await ctx.model.PageInfo.update(pageInfo, {where: { uuid: pageInfo.uuid, tenantId: ctx.headers['qg-tenant-id'] }});
-    await ctx.service.redis.set(`pageInfo:${pageInfo.uuid}`, pageInfo);
-    await ctx.service.redis.del(`page:${pageInfo.uuid}`);
+    try {
+      const result = await ctx.model.PageInfo.update(pageInfo, {where: { uuid: pageInfo.uuid, tenantId: ctx.headers['qg-tenant-id'] }});
+      await ctx.service.redis.set(`pageInfo:${pageInfo.uuid}`, pageInfo);
+      await ctx.service.redis.del(`page:${pageInfo.uuid}`);
     ctx.body = ctx.helper.ok(result);
+    } catch (error) {
+      if (error.message.indexOf('Data too long') > -1 && error.message.indexOf('page_data') > -1) {
+        error.message = '配置组件过多，请对组件进行删减';
+      }
+      ctx.body = ctx.helper.fail(error);
+    }
   }
   // todo 编辑器获取跳过redis，但需要注意
   public async get(ctx: Context) {
@@ -38,10 +52,14 @@ export default class EditorController extends Controller {
     if (!pageInfo) {
       let pageInfo = await ctx.model.PageInfo.findOne({where: { uuid: ctx.params.uuid }});
       if (ctx.query.lite && pageInfo) {
+        // 如果存在sheme移除掉
         const page = JSON.parse(pageInfo.page || []);
         for (let i = 0; i < page.elements.length; i++) {
           delete page.elements[i].schame
         }
+        if (page.scheme) {
+          delete page.scheme;
+        }
         pageInfo.page = JSON.stringify(page);
       }
       await ctx.service.redis.set(`pageInfo:${ctx.params.uuid}`, pageInfo);

app/web/config/dev.config.ts

@@ -3,14 +3,14 @@ const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
 const hostMap = {
   apiHost: `http://localhost:7002/`,
   // apiHost: `http://192.168.28.199:7001/`,
-  // apiHost: 'https://quantum-blocks-vcc2.liangkebang.net/',
-  h5Host: 'https://quantum-h5-vcc2.liangkebang.net',
+  // apiHost: 'https://quantum-blocks-test1.liangkebang.net/',
+  h5Host: 'https://quantum-h5-test1.liangkebang.net',
   qiniuHost: `https://appsync.lkbang.net`,
   shenceUrl: `${protocol}//bn.xyqb.com/sa?project=default`,
-  opapiHost: `https://opapi-vcc2.liangkebang.net`,
+  opapiHost: `https://opapi-test1.liangkebang.net`,
   qiniuUpHost: `${protocol}//up-z0.qiniup.com`,
-  // kdspHost: 'https://kdsp-api-vcc2.liangkebang.net',
-  kdspHost: 'https://talos-vcc2.liangkebang.net',
+  // kdspHost: 'https://kdsp-api-test1.liangkebang.net',
+  kdspHost: 'https://talos-test1.liangkebang.net',
   yxmTenantId: 560761,
   appIdMap: {
     560761: 'wxe16bf9293671506c',

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

@@ -15,7 +15,8 @@ import localStorage from '@service/localStorage.service';
 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 type { PageInfo, Page, GridLayout } from '../../../store/modules/editor/state';
+import { pickAllScheme, separateAllScheme } from '../../../store/modules/editor/scheme';
 
 @Component({components: { GridLayout: VueGridLayout.GridLayout,
   GridItem: VueGridLayout.GridItem, BasicPageFormModal, RecordModal, MaterialMenu, DynamicFormTabs, OperationPanel }, name: 'DashBoard'})
@@ -93,6 +94,10 @@ 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);
+        // 如果存在sheme， 移除页面中的sacheme
+        delete pageData.scheme;
+        separateAllScheme(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/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: [],

package-lock.json

@@ -2176,9 +2176,9 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.3.29-beta3",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.29-beta3.tgz",
-      "integrity": "sha512-Pwz8tlhTIwz79hDNChS77LSG7SHp+J+2WcB3BWzlEHik1077ooI/7x8iRnZaNGJ6ub1Y5Qb27EXlYEsaFxwjZA==",
+      "version": "0.3.31",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.3.31.tgz",
+      "integrity": "sha512-CUNXdrUVPX2JYnxq4EbR/bsPegbnAFIqJpE1XF4AeTcZXbtcM+VHJx9PMKwC84xCI6m3g68J9/er8RVzv/b9vA==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
         "@qg/cherry-ui": "^2.23.9",