# aolie_front

**Repository Path**: bluesky_long/aolie_front

## Basic Information

- **Project Name**: aolie_front
- **Description**: Init project!
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-28
- **Last Updated**: 2021-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前端核心模块

部署方法请参见说明工程：https://github.com/blueskylong/aolie_illustrate

前端框架基本于JQuery框架,风格是bootstrap，本框架使用TS语言和面向对象的思想，将控件进行封装，将后台设计的界面，按要求展现。
### 1. 前端的主要控件对象有：
> JQBaseComponent 基于jquery的简单控件的基类,基子类包括 TextInput、Select、CheckBox、Button等等。开发人员可以自己定义基础组件，并注册到系统中，这样，就可以在界面设计时使用。

> Form 表单。表单上的控件为一树状结构，其中容器类别的控件，可以包括子控件。Form的子控件，由设计器设计完成，当然也可以在代码中手动拼成。Form负责处理行数据的设值，取值，公式计算，使能条件和可以条件的计算及响应

> Table 表格。表格基于Free-JQGrid 插件封装，由于原控件原因，最多只支持二层表头。表格引用过滤插件和分页插件。表格的应用还没完全展开。

> PageUI 页面。包含一个布局管理器（BorderLayout)，是一个容器，将界面分隔成东南西北中五个部分。各部分间由可拖动的分隔条分隔。此布局在传统应用界面中，应用很广泛。PageUI可以嵌套使用，以实现更复杂的界面结构。

> CardList 卡片。它是Form的一个变体，内容上可以说是用多个Form来显示表格中的多行数据。

> TreeUI 树界面，树界面是树和一搜索框的组合组件，树的基础组件是JsTree.

> Managed系列管理包括类。除JQBaseComponent基础组件外。下面几个控件，都有管理包装类。所谓管理，就是受到数据源关系，状态的约束的类。
如果一个功能完成配置完成，最终菜单实现类为 ManagedFunc,则系统会根据配置信息，生成相应的受管理控件。功能在创建时，会生成一个控制中心，负责收集和分发数据源的变动及状态信息，各受管理控件根据变动通知，选择处理信息。
例如：一个主数据选择发生变化，通过控制中心，通知到子数据控件，则子数据控件需要刷新本身的数据显示。一数据正在编辑，则其它数据控件则可能需要设置成不可编辑状态等.
 
### 2.方案设计
方案设计是本模块的核心,界面化展示各数据表间的关系,各字段属性和约束等.方案设计主要用到了jsplumb插件,用于拖拽和连线.其它界面都使用界面设计器配置完成.

### 3. 界面设计
界面设计,是将方案中的数据表,以合适的方式展示出来的,如表格,表单,树,卡片等.其中表单可以使用固定位置布局和BootStrap12列的布局.控件可以设置显示和使能的条件,这样面板在编辑过程中,可以通过计算条件来动态控制控件状态.

### 4. 页面设计
也可以称之为功能设计,其目标是设计出可以直接供菜单使用的界面.页面设计器,其实是一个布局管理器,将各相关的界面分配到不同的位置中.页面的五个位置,可以摆放界面设计器设计出的界面,用户自定义的界面类(后面详细说明),还可以嵌套其它页面.

### 5. 系统管理
系统管理中的菜单功能都使用设计器设计出来,某些需要特殊处理的逻辑,继承 MenuFunction 后修改逻辑.这里不再详解.

### 注册自定义控件
自定义控件的目的,是在界面设计器中可以选择使用,注册控件需要前后端配合,后端需要在数据库中增加相应的选项,即通过通用选项功能,增加类型ID为"componentType"的新数据.开发控件类,类须要继承后BaseComponent,类上增加注解@RegComponent(xxx),其中xxx要和通用选项中的ID相对应,输出此控件(一般在index中引入输出)

### 注册自定义界面
自定义界面须有如下结构 
```typescript
@CustomUi("aUi")
class AUi<T extends PageDetailDto> extends BaseComponent<T> implements AutoManagedUI{
    ......
}
```
PageDetailDto是ManagedPage传递的页面信息, AutoManagedUI接口是接收控制中心传递的消息.使用@CustomUi("aUi")进行注册,其中aUi需要和配置界面中的"自定义类"属性项的值保持一致.
使用自定义界面的方法如下: 在页面定义中,拖放"视图"下的"自定义视图"到要放置的位置,在属性面板里,找到"自定义类"属性,并填写对应的注册名.

### 注册自定义菜单功能
定义菜单时,如果引用的功能是通过页面配置的,则在"功能名"中填写"ManagedFunc"即可,如果是指定自定义的功能,则这里需要填写注册的功能的名称,定义的过程如下:
**可参考类UserManageUI**
首先定义类:
```typescript
@MenuFunc("aFunc")
export class AFunc extends ManagedFunc<MenuInfo>{
   ......
}
```
也不是必须继承ManagedFunc类,但这个类搞定了大多数的问题.如果是其它类,基类需要是BaseUI<MenuInfo>,需要接收菜单配置的信息(MenuInfo).注册功能类,通过@MenuFunc注解,后面的参数是功能名,要与配置界面的"功能名"保持一致
一般情况下,功能的配置能解决大部分的问题,少数不能自动实现的逻辑,则通过继承管理类,然后加特殊的控制逻辑即可.