yujinjin / vue-manager-system Goto Github PK

说明：主界面的整体布局是上（如上图1标示）、下左（如上图2标示）、下右布局（如上图3标示）。
其1固定是logo、打开的页面tabbar、当前登录用户信息；
其2固定放置菜单，菜单可分三级；
其3是页面的操作信息。

其1查询的选项超过一行，会自动隐藏
其2操作按钮超过一行，会自动隐藏
其3数据列表项太多，可以手动隐藏

默认会一行显示3列字段

分组的方式展示表单信息

说明：在elemenet UI中的Upload的基础上进行了扩展，主要是支持图片的裁剪功能，以及针对于图片的上传做了公用的配置，使其业务开发代码更少。

说明：使用elemenet Upload的UI，通过阿里云SDK来上传视频。这里针对于视频上传做了公用的配置和封装，使其业务开发代码更少。

说明：弹窗的方式去播放视频，这里是使用了第三方西瓜视频的插件。

说明：基于第三方插件summernote的扩展，去除了基于boostrap的依赖的样式及JS，在使用的时候发现部分功能有BUG，所以把源代码做了修复改动。因此如果使用该插件就不能再升级版本了，同时根据常用的业务做了自定义视频按钮插入扩展。

说明：手动隐藏不需要展示的列，框架支持自动保存当前数据列的显示或隐藏状态，以便下次进入展示。

说明：默认只显示4个操作按钮，当超过4个时会自动隐藏。

说明：针对对于列数据是一个枚举值，比如：订单状态、性别、启用\禁用状态等，同时也支持修改当前列的枚举值，如果当前的枚举值只有2个默认直接修改。

说明：图片列数据展示，支持点击预览。

说明：当前列数据带有链接，点击直接跳转。

说明：数据列表的标签列

说明：当前列数据点击展示一个二维码。

说明：查询表单组件，默认表单中的值有变化时会自动查询，每行显示4个查询项，多于4个会自动隐藏。

说明：操作栏较多，组件计算当前的按钮超过一行时，会自动隐藏剩下的按钮。

说明：当前数据列表封装分页组件、数据列组件等

说明：封装的表单组件。

说明：显示当前表单的信息

说明：以弹窗形式封装的表单，默认一行显示2个表单字段。本组件是在form表单组件的基础上做的封装。

说明：以页面形式封装的表单，默认一行显示3个表单字段。本组件是在form表单组件的基础上做的封装。

说明：excel导入功能的封装

说明：excel导出功能的封装，可做条件筛选条件、导出的字段选择，2者可任选，如果都没有就直接导出。

|-- dist                                // webapck打包压缩后的文件目录
|-- tests                               // vue-cli测试环境目录
|-- src                                 // 源码目录
|   |-- imgs                            // 存放各种图片文件目录
|       |-- test                        // 存放开发测试的图片文件目录
|           |-- ...                     // 其他测试图片文件
|       |-- fonts                       // 页面引用的字体文件
|       |-- static                      // 静态图片，该目录下图片不会被压缩
|       |-- ...                         // 其他图片等
|   |-- js                              // 存放js文件目录
|       |-- api                         // 后端接口API目录
|           |-- index.js                // 业务后端接口API 入口
|           |-- common.js               // 公用用API接口
|           |-- ...                     // 其他业务模块API接口
|       |-- components                  // 项目全局组件目录
|           |-- icons                   // SVG icon 目录
|           |-- views                   // 全局组件的视图（vue）文件目录
|           |-- index.js                // 全局组件入口
|       |-- config                      // 存放打包各种环境的目录
|           |-- DEV.js                  // DEV环境配置文件
|           |-- UAT.js                  // UAT环境配置文件
|           |-- PRD.js                  // PRD环境配置文件
|           |-- ...                     // 其他环境配置文件
|       |-- data                        // 测试数据目录
|       |-- lib                         // 第三方JS lib目录
|           |-- aliyun                  // 阿里云的插件目录
|           |-- summernote              // 富文本框summernote插件目录
|           |-- qrcode.js               // 生成二维码的插件
|           |-- ...                     // 其他第三方JS插件
|       |-- page-factory                // 创建页面的工厂目录
|           |-- index.js                // 创建页面基类入口页
|           |-- form.js                 // 表单页面类型的基类
|           |-- query.js                // 搜索查询页面类型的基类
|           |-- ...                     // 其他页面类型的基类
|       |-- plugins                     // 项目全局插件目录
|           |-- views                   // 项目全局插件使用的视图(vue)目录
|           |-- index.js                // 项目全局插件目录入口
|           |-- message.js              // 全局消息提示插件
|           |-- ...                     // 其他插件
|       |-- routers                     // 项目页面路由目录
|           |-- index.js                // 项目页面路由入口
|           |-- ...                     // 项目业务模块的路由配置
|       |-- services                    // 项目全局业务目录
|           |-- global-service.js       // 项目全局业务逻辑方法，主要处理登录信息、本地存储等业务逻辑
|           |-- ajax.js                 // 项目全局ajax数据请求封装
|           |-- constants.js            // 项目全局业务的常量集合
|           |-- directives.js           // vue全局自定义指令集合
|           |-- filters.js              // vue全局自定义过滤器集合
|           |-- log.js                  // 项目全局log日志封装
|       |-- store                       // vuex管理webApp的数据状态目录
|           |-- index.js                // 数据管理入口文件
|           |-- data.js                 // 临时数据管理
|           |-- event.js                // 全局自定义事件管理
|           |-- ...                     // 其他数据状态管理
|       |-- utils                       // 项目全局工具方法目录
|           |-- index.js                // 项目全局工具入口文件
|           |-- extend.js               // 对象深复制，创建对象和继承
|           |-- ....                    // 其他工具JS文件
|   		|-- index.js                // 项目的入口文件
|   		|-- site.js                 // 项目中默认业务的配置文件
|   |-- style                           // 项目样式文件目录
|       |-- css                         // 项目css样式文件目录
|       |-- less                        // 项目less样式文件目录
|   		|-- site.less               // 项目基础样式，包含其他less文件的入口
|   		|-- ...                     // 其他less样式文件
|       |-- scss                        // 项目scss样式文件目录
|   |-- views                      		// 项目页面视图目录
|   		|-- components              // 页面内应用的公用组件目录
|   		|-- error                   // 存放错误视图组件目录
|   				|-- not-found.vue   // 404页面视图
|   		|-- ...                     // 其他业务功能模块目录
|   		|-- site.vue                // 整个项目页面入口文件
|   		|-- home.vue                // 整个项目的主页面入口
|   		|-- login.vue               // 登录页
|   |-- index.html                      // 项目html模板页面
|-- .env.XXX                            // vue-cli环境变量配置文件
|-- .eslintignore                       // eslint忽略的文件配置
|-- .eslintrc.js                        // eslint文件配置
|-- .babelrc                            // ES6语法编译配置
|-- .editorconfig                       // 编辑器编码规范配置
|-- .prettierignore                     // 格式化规范配置
|-- .gitignore                          // git忽略文件
|-- index.html                          // webapp的首页加载文件
|-- manifest.json                       // 打包app的配置文件
|-- package.json                        // 配置项目相关信息，通过执行 npm init 命令创建
|-- vue.config.js                       // vue-cli配置文件