cnetong-core-frontend

前端核心框架

1. 开始使用

// 在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. 命令

# 运行
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文件，该工具定义了一套表格页面的元数据，使用时引用工具，指定查询列表的接口方法、参数、是否自动查询等参数，声明后直接引用相关数据即可，代码如下：

// 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的导出，代码如下：

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

7.4 混入组件

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

7.5 表格页面组件（废弃）

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

7.6 面板组件

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

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

7.7 系统代码选择器

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

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

7.8 系统代码显示器

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

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

7.9 标签页插件

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

7.10 表格拖放排序组件

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

8. 本地服务说明（service）

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