# # 场景设计器

场景设计器主要用于对组件拖拽定位,并生成一个全新的页面,配置人员可通过不同的配置从而完成对页面进行修改以适应学院的需求,场景设计器细化可分为以下种类:

> - 大数据设计器
> - 门户设计器
> - 后台页面设计器

## # 设计器功能介绍

### # 大数据设计器

大数据设计器采用平面设计,即单页面,所有数据列表不存在分页,配置只需循序主模板排版定位,子模板数据查询和组件展示原则即可, 大数据模板本身并不支持路由切换

### # 门户设计器

门户设计器采用多层次,多梯队设计,支持路由之前切换,并可以获取路由携带的各个参数将其参数参入配置项,执行配置人员所配置的对应流程逻辑,门户设计器提供多个登录模板,个人中心模板,门户模板,并支持多个模板之间指定路由切换

#### # 登录模板

内置账号注册,账号登录,密码修改等功能,配置人员只需修改展示文字logo等

#### # 个人中心模板

内置密码修改,手机绑定,邮箱绑定等功能,且支持配置其他点击项,配置人员可根据需求自由调整,修改

#### # 门户模板

内置顶部和底部,主体内容由子模板接入,配置人员完成子模板配置后,直接将子模板Id嵌入即可正常显示,顶部和底部所有数据都可以在配置中进行修改

### # 后台设计器

提供多个后台设计模板,可通过配置路由,动态生成配置路由,并点击时通过切换不同的子模板Id实现路由之间切换

## # 设计器模板思路

设计器为达到多人协同开发,所以模板有主模板和子模板

### # 主模板

主模板原则上是做页面定位拼接,用以最后形成一个完整的页面,主模板应避免直接进行数据操作,防止页面配置时数据返回错误时导致数据丢失问题.

每个主模板都可以创建各自独有的子模板,然后通过链接类组件进行连接,最后通过拖拽完成页面定位最后生成页面

### # 子模板

子模板作用为数据的接入和配置,用户可根据需要进行对应图表或轮播等组件嵌入,对应子模板只支持修改各自对应数据,子模板之前数据不可通.

## # 组件基础介绍

每个组件都有各自不同的配置项,用户可以根据每个组件提供的配置项进行不同参数的配置,从而达到数据的成功战术,组件也根据使用场景不同分为以下几类组件

> - 门户级组件
> - 链接类组件
> - 普通展示组件

### # 门户级组件

该组件为门户级组件.不支持拖拽,用户可通过配置组件提供的子组件Id,从而将子模板导入内部,门户级组件也可通过配置项进行直接修改门户页面的部分数据展示

门户模板展示

登录模板展示:

个人中心模板展示:

### # 链接类组件

子模板和主模板直接链接的重要组成部分,它可以将子模板内容嵌入主模板中展示,子模板中提供4种模板链接:

- 主模板
- 子模板
- 表单模板
- 事务模板

#### # 主模板&&子模板

配置人员只需要配置主模板Id或者子模板Id即可导入对应模板数据

#### # 表单模板

该模板为模板设计器设计的表单,配置人员需要获取到表单Id并进行Id配置才可导入

#### # 事务模板

该模板不同于表单模板, 该模板指已经配置了流程的,实现了事务流程的模板Id

### # 普通展示组件

原则上数据展示类组件使用模板设计器内提供组件进行编辑,这里展示组件一般表示为大数据类定制性组件(中国地图,世界地图)等,组件内部提供以下三个类型的数据配置

> - 组件定位
> - 样式配置
> - sql配置
> - 数据配置

#### # 组件定位

​ 用户可配置左侧定位,顶部定位,用以微调,进行排列,格式为'1px'

#### # 样式配置

用户可配置宽度,高度

#### # sql配置

​ 组件内部会将数据的配置提供给配置人员,配置人员只需在每个配置项种进行配置并返回对应格式数据,组件即会动态更新

#### # 数据配置

组件的基础配置都存在在数据配置中,例如标题内容,标题颜色等各种各样的配置都将存放在数据配置中

配置实例:

## # 相关问题说明

### # 门户模板的路由切换

门户模板内置相对独立的路由跳转,调用sql配置器自带router进行跳转,方法示例

#### # 子模板切换函数

    // bassicId 为跳转主模板ID
    router.push({
                      pathname:`/portal/previewModule/${bassicId}`,
                      state: {
                            modelId:id, // 子模板id
                            modelKey:'concealModel',// 跳转识别值
                             // 此处可以携带多个参数
                        }
                })

#### # 独立主模板切换函数

    // bassicId 为跳转主模板ID
    router.push({
                    pathname:`/portal/previewModule/${bassicId}`,
                    state: {
                        modelId:id,// 主模板id
                        modelKey:'mainModel',// 跳转识别值
                    }
                })

#### # 内部主模板切换函数

    // bassicId 为跳转主模板ID
    router.push({
                    pathname:`/portal/previewModule/${bassicId}`,
                    state: {
                        modelId:id,// 主模板id
                        modelKey:'mainInSideModel',// 跳转识别值
                        // 此处可以携带多个参数
                    }
                    })

#### # 事务模板切换函数

    // bassicId 为跳转主模板ID
    router.push({
                    pathname:`/portal/previewModule/${bassicId}`,
                    state: {
                        modelId:id,// 事务模板id
                        modelKey:'formModel',// 跳转识别值
                        // 此处可以携带多个参数
                    }
                 })

#### # 表单模板切换函数

    // bassicId 为跳转主模板ID
    router.push({
                    pathname:`/portal/previewModule/${bassicId}`,
                    state: {
                        modelId:id,// 表单模板ID
                        modelKey:'formTwoModel',// 跳转识别值
                        // 此处可以携带多个参数
                    }
                 })

### # 组件内置SQl配置自带变量

#### # utils

该变量为一个对象,内置以下数据

> moment

> 时间格式化函数

> sql

> sql请求函数

> req

> req请求函数

> setValues

> 参数设置方法

> router

> 路由跳转方法

> message

> 消息提示方法

> md5

> 加密方法

#### # $

中台自有函数库

#### # router

为当前路由所携带的路由参数,调用时应注意

####data

所有属性共享参数,当其中一个组件改变了当前变量,则会重新渲染开启了监听的链接组件