# 前端核心框架

## 1. 开始使用
```js
// 在npm项目中的main.js文件中加入以下代码
import Base from "cnetong-core-frontend";

Base.bootstrap({
  init: () =>{}, // 可选，初始化方法，页面初始化前同步执行方法，可用于加载页面数据信息
  routes: [],    // 可选，路由组件，默认已经定义好常用的路由组件，home、login、404等，可覆盖或自定义路由组件
  stores: {},    // 可选，状态机，默认已经定义框架基础的状态信息，可扩展或自定义状态内容
  tabs: {},      // 常用，页面标签页信息，对象的键为页面路由地址，值为组件，配合后台的功能权限模块使用
  config: {},    // 常用，配置文件，默认以精细框架基础的配置信息，可扩展或覆盖现有配置文件
  el: "#app"
});
// 执行以上方法会帮助完成VUE的初始化工作，子项目需删除初始化VUE实例的逻辑。
```

## 2. 目录结构

- base：core-frontend核心前台项目源码
- dev：开发环境参数文件
- lib：本项目打包后发布文件
- public：静态资源文件，图片、视频、图标等
- src：开发demo源码（依赖base文件夹中的项目）
- .editorconfig：编辑器开发格式配置
- babel.config.js：babel（语法兼容）配置文件
- jsconfig.json：js相关配置文件
- package.json：包管理配置文件
- upgrade.md：更新版本说明
- vue.config.js：VUE配置文件

## 3. 命令

```shell
# 运行
npm serve
# 打包
npm build
# 发布(设置版本号及打包完成后)
npm publish --registry http://registry.npmjs.org
```

## 4. base目录说明

- api：用来存放对服务器的 http 请求（历史遗留，实际应该和模块文件放到一起）
- assets：开发代码静态资源，存放图片、json 等
- common：公共组件，项目中多个模块公共使用的常见组件集合
- libs：程序开发使用的工具包
- local：本地化语言资源
- module：系统核心模块
- plugin：自定义插件，必须引入
- router：基础路由配置
- service：本地服务
- store：状态机
- styles：样式表
- views：页面布局及核心页面，首页、异常页、登录页等
- base.js：工程集成框架（组件）的引用及配置
- config.js：工程配置文件
- index.js：项目出口文件，定义了页面实例创建的方法，和组件的导出
- tabs.js：工程路由配置



## 5. 公共组件说明（common）

### 5.1 Cron时间表达式组件

位于`CronTab`文件夹中，使用时需单独引用（`import CronTab from 'cnetong-core-frontend/base/common/CronTab'`）。

### 5.2 操作历史组件

组件包括`OptionHistory.vue`和`PopoverUserInfo.vue`两个文件，使用时使用第一个，使用该组件时需要传递一个数据集（JSON），数据集中包含数据库中所有记录操作信息的字段。

### 5.3 文件上传组件

组件为`Uploader.vue`文件，提供了文件上传与下载的功能，自动调用后台相关接口，一定程度上只是一个文件管理的模块。

### 5.4 树选择器

组件为`SelectorTree.vue`文件，提供了表单形式的树选择器，例如表单中需要选择组织机构或系统角色，选择一个树结构中的某个节点时，需要用到次组件，传入树名即可使用。

## 6. 开发工具包说明（libs）

### 6.1 请求工具

工具为`Ajax.js`文件，其内包含了Ajax请求与响应的拦截器、数据处理、进度条等相关的配置；

1. 引入该文件：`import { Ajax} from 'cnetong-core-frontend';`
2. 使用方法：参考`base/api/base`路径下的文件

`base/api/base/BaseApi.js`文件声明了默认的增删改出对应的方法，使用方式为：

1. 引入该文件：`import { BaseApi } from 'cnetong-core-frontend';`
2. 定义请求方法：`export default BaseApi('', [])`， 第一个参数为接口前缀，第二个参数为自定义的其他请求方法
3. 使用方法：`api.doGet(uuid);`，`api.listAll()`等，详见`BaseApi.js`文件

### 6.2 Cron时间表达式校验工具

该文件定义了时间表达式的校验方法，使用时正常引入，调用方法即可，详细参照`CronValidator.js`文件。

### 6.3 表格页面工具

工具为`PageTable.js`文件，该工具定义了一套表格页面的元数据，使用时引用工具，指定查询列表的接口方法、参数、是否自动查询等参数，声明后直接引用相关数据即可，代码如下：

```js
// 1.模块中引入工具文件
import { PageTable } from 'cnetong-core-frontend';
// 2.模块中的data中创建表格页面组件对象
pageTable: new PageTable({
    autoLoad: false,     // 是否自动查询
    doLoad: api.doQuery, // 查询列表接口方法（方法后面不可以带括号）
    param: {},           // 可以声明默认的参数
    log: false           // 是否开启调试，打印日志信息
})
// 3.使用对象中的数据信息
pageTable.param         // 请求表单（绑定到查询表单中）
pageTable.data          // 列表数据（绑定到表格中）
pageTable.handleLoad()  // 调用查询方法（查询按钮调用）
pageTable.handleReset() // 重置查询表单方法（重置按钮调用）
pageTable.isLoading     // 加载中状态，绑定到页面、按钮或表格的v-loading属性
```

### 6.4 常用基础配置工具

工具为`UsualConfig.js`和`Util.js`文件，其内定义了常用的基础方法及参数配置，可按需引用。

### 6.5 正则校验工具

工具为`Validate.js`文件，引用文件，按需调用即可

## 7. 自定义插件说明（plugin）

### 7.1 地区选择器

组件为`area.js`和`AreaPicker.vue`文件，一个是源数据，一个是组件

### 7.2 增删改查组件

组件为`CurdPanel.vue`文件，该组件使用时需声明正删改查对应的接口方法，可根据需求配置不同的参数，详细参数参照文件中的props字段属性

### 7.3 数据导出组件

组件为`ExportCtrl.vue`文件，适用于于表格页面下的导出功能，其内包括`excel`、`pdf`的导出，代码如下：

```html
<export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
```

### 7.4 混入组件

组件为`mixin.js`文件，全局混入组件，其内定义的方法、数据、属性都可以全局使用，常用于时间的格式转换（时间戳转日期）、确认框、标签页的控制方法。

### 7.5 表格页面组件（废弃）

组件为`PageTable.js`文件，定义了一个完整的表格组件，该组件封装性强、扩展性弱，已被禁止使用。

### 7.6 面板组件

组件为`Panel.vue`文件，定义了可固定、可伸缩的面板组件，主要是为了统一页面上的样式，代码为：

```html
<!-- 固定 -->
<panel titl="标题">面板内容</panel>
<!-- 带伸缩 -->
<panel titl="标题" collapse>面板内容</panel>
```

### 7.7 系统代码选择器

组件为`SysCodePicker.vue`文件，定义了表单样式的系统字典的选择器，代码为：

```html
<SysCodePicker type="系统字典代码" v-model="绑定值" :disabled="false"></SysCodePicker>
```

### 7.8 系统代码显示器

组件为SysCode.js文件，定义了系统字典代码项的转义显示功能，代码为：

```html
<SysCode value="字典值" type="系统字典代码"></SysCode>
```

### 7.9 标签页插件

组件为`TabView.js`文件，导航标签页渲染组件，点击导航中某个菜单时，找到这个导航路径下的页面组件渲染成一个`TabViewComponent`，并加到ViewList中，在`views/layout/Container.vue`中的控制每个页面表现的显示与隐藏（标签页的切换）。

### 7.10 表格拖放排序组件

组件为`TableSort.js`文件，暂无使用。

## 8. 本地服务说明（service）

主要用于维护前后台的长连接，监听字典代码项与树形代码项的变化通知