├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── SUMMARY.md ├── doc ├── http_show_loading.md ├── img │ └── run.png ├── use_html5_form_validation.md └── webpack_project_description.md ├── package.json ├── src ├── assets │ ├── Common.js │ ├── css │ │ └── app.scss │ ├── html │ │ ├── footer.html │ │ └── head.html │ ├── img │ │ ├── banner-bg.jpg │ │ ├── banner-pic1.png │ │ ├── favicon.ico │ │ ├── logo.png │ │ └── map.png │ ├── js │ │ ├── Constants.js │ │ ├── Helper.js │ │ ├── Http.js │ │ └── Utils.js │ ├── libs │ │ ├── echarts │ │ │ └── echarts.common.min.js │ │ └── jquery-easyui │ │ │ └── 1.5.5.4 │ │ │ ├── extension │ │ │ ├── datagrid-ExportExcel.js │ │ │ ├── datagrid-filter.js │ │ │ └── jquery.base64.js │ │ │ ├── jquery.easyui.min.js │ │ │ ├── locale │ │ │ └── easyui-lang-zh_CN.js │ │ │ └── themes │ │ │ ├── bootstrap │ │ │ ├── easyui.css │ │ │ └── images │ │ │ │ ├── accordion_arrows.png │ │ │ │ ├── blank.gif │ │ │ │ ├── calendar_arrows.png │ │ │ │ ├── combo_arrow.png │ │ │ │ ├── datagrid_icons.png │ │ │ │ ├── datebox_arrow.png │ │ │ │ ├── layout_arrows.png │ │ │ │ ├── linkbutton_bg.png │ │ │ │ ├── loading.gif │ │ │ │ ├── menu_arrows.png │ │ │ │ ├── messager_icons.png │ │ │ │ ├── pagination_icons.png │ │ │ │ ├── panel_tools.png │ │ │ │ ├── passwordbox_close.png │ │ │ │ ├── passwordbox_open.png │ │ │ │ ├── searchbox_button.png │ │ │ │ ├── slider_handle.png │ │ │ │ ├── spinner_arrows.png │ │ │ │ ├── tabs_icons.png │ │ │ │ ├── tagbox_icons.png │ │ │ │ ├── tree_icons.png │ │ │ │ └── validatebox_warning.png │ │ │ ├── icon.css │ │ │ └── icons │ │ │ ├── back.png │ │ │ ├── blank.gif │ │ │ ├── cancel.png │ │ │ ├── clear.png │ │ │ ├── cut.png │ │ │ ├── edit_add.png │ │ │ ├── edit_remove.png │ │ │ ├── filesave.png │ │ │ ├── filter.png │ │ │ ├── help.png │ │ │ ├── large_chart.png │ │ │ ├── large_clipart.png │ │ │ ├── large_picture.png │ │ │ ├── large_shapes.png │ │ │ ├── large_smartart.png │ │ │ ├── lock.png │ │ │ ├── man.png │ │ │ ├── mini_add.png │ │ │ ├── mini_edit.png │ │ │ ├── mini_refresh.png │ │ │ ├── more.png │ │ │ ├── no.png │ │ │ ├── ok.png │ │ │ ├── pencil.png │ │ │ ├── print.png │ │ │ ├── redo.png │ │ │ ├── reload.png │ │ │ ├── search.png │ │ │ ├── sum.png │ │ │ ├── tip.png │ │ │ └── undo.png │ └── setting │ │ ├── easyui.css │ │ ├── easyui.js │ │ ├── sweetalert2.css │ │ └── sweetalert2.js └── views │ ├── charts │ ├── index.html │ ├── index.js │ └── index.scss │ ├── index │ ├── index.html │ ├── index.js │ └── index.scss │ ├── test │ ├── index.html │ ├── index.js │ └── index.scss │ └── views.json ├── webpack.base.conf.js └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = space 8 | indent_size = 4 9 | 10 | # We recommend you to keep these unchanged 11 | end_of_line = lf 12 | charset = utf-8 13 | trim_trailing_whitespace = true 14 | insert_final_newline = true 15 | 16 | [*.md] 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'eslint-config-alloy', 4 | ], 5 | globals: { 6 | // 这里填入你的项目需要的全局变量 7 | // 这里值为 false 表示这个全局变量不允许被重新赋值，比如： 8 | // 9 | jQuery: false, 10 | $: false 11 | }, 12 | rules: { 13 | "/src/assets/libs": "off", 14 | "no-new": "off", // 允许直接new一个对象而不赋值 15 | "no-debugger": "off", // 允许使用debugger 16 | "no-undef": "off",// 允许使用未定义的变量，因为项目中有许多全局变量，如Utils，Helper 17 | // @fixable 一个缩进必须用两个空格替代 18 | 'indent': [ 19 | 'error', 20 | 4, 21 | { 22 | SwitchCase: 1, 23 | flatTernaryExpressions: true 24 | } 25 | ] 26 | } 27 | }; 28 | 29 | 30 | // 自动修复命令 31 | // eslint --fix src/**/*.ts 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *.log 3 | *.tmp 4 | *.tmp.* 5 | log.txt 6 | *.sublime-project 7 | *.sublime-workspace 8 | .vscode/ 9 | npm-debug.log* 10 | 11 | .idea/ 12 | .sass-cache/ 13 | .tmp/ 14 | .versions/ 15 | .sourcemaps/ 16 | coverage/ 17 | node_modules/ 18 | dist/ 19 | tmp/ 20 | temp/ 21 | $RECYCLE.BIN/ 22 | 23 | .DS_Store 24 | Thumbs.db 25 | UserInterfaceState.xcuserstate 26 | _book 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | * 本项目集成了bootstrap4，jquery，easyui(可配置)等 2 | * 采用webpack4多页面(多入口)配置，实现常用webpack配置 3 | * [在线demo](https://www.yanxiaojun617.com/webpack4-bootstrap4-demo/) 4 | * [项目源码](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo) 5 | * [项目文档](https://yanxiaojun617.gitbook.io/webpack4-bootstrap4-demo/) 6 | * 链接——[Bootstrap](https://getbootstrap.com/)、 [jQuery](https://www.jquery123.com/)、[Font Awesome](http://fontawesome.dashgame.com/)、[EasyUi](http://www.jeasyui.com/demo/main/index.php)、[sass/scss](https://www.sass.hk/)， [webpack](https://www.webpackjs.com/configuration/) 7 | 8 | # 项目适用于哪些人 9 | * 想使用bootstrap、jquery开发项目，尤其是简单的门户网站，宣传页面等小项目 10 | * 想学习webpack4配置 11 | > 还不知道webpack是干什么的？ 12 | 它就是一个打包工具，能帮我们压缩代码，处理图片，热启动（开发时修改代码自动刷新浏览器），代码转义（写[es6](http://es6.ruanyifeng.com/)转成es5，写[scss](https://www.sass.hk/)转成css）等 13 | 14 | # 如何运行？ 15 | * 确保已安装nodejs，最好是8.x以上，该项目在v8.9.4上测试。 16 | > 如果不会安装nodejs可以参考[这里](https://www.jianshu.com/p/81072e9be3e4),如果想安装多个nodejs版本可以参考[这里](https://www.jianshu.com/p/17d3249e0619), 17 | > 如果本地网络不好可以安装cnpm,详情看[这里](https://www.jianshu.com/p/79d4430e0a9d) 18 | * 检出项目到本地 19 | ``` 20 | git clone https://github.com/yanxiaojun617/webpack4-bootstrap4-demo.git 21 | ``` 22 | * 进入项目并安装依赖 23 | ``` 24 | cd webpack4-bootstrap4-demo 25 | cnpm i 26 | ``` 27 | * 跑起来 28 | ``` 29 | npm run dev 30 | ``` 31 | * 运行步骤参考图 32 | ![运行步骤.png](./doc/img/run.png) 33 | 34 | # 打包 35 | ``` 36 | npm run build 37 | ``` 38 | > 打包后资源放在dist目录下 39 | 40 | * 了解更多请阅读[项目文档](https://yanxiaojun617.gitbook.io/webpack4-bootstrap4-demo/) 41 | -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | # 目录 2 | 3 | * [webpack4-bootstrap4-demo](README.md) 4 | * [关于本项目webpack配置说明](./doc/webpack_project_description.md) 5 | * [使用html5自带表单验证并且用ajax提交的说明](./doc/use_html5_form_validation.md) 6 | * [Http/Ajax统一显示Loading的说明](./doc/http_show_loading.md) 7 | 8 | -------------------------------------------------------------------------------- /doc/http_show_loading.md: -------------------------------------------------------------------------------- 1 | # 关于Http请求统一显示Loading处理逻辑 2 | > 本项目在[Http.js](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/src/assets/js/Http.js) 3 | 封装了Jquery Ajax，并添加了统一显示/隐藏Loading的逻辑。关于此逻辑的几种处理情况再此记录、说明 4 | 5 | 6 | 7 | * 情况1：同时发出多个请求，loading会同时打开多个，出现loading叠加的情况 8 | > 处理：Helper.showLoading()判断loading已经打开则不再打开，当请求计数等于0才去关闭loading（requestCount===0） 9 | ```javascript 10 | $('#test').bind('click', () => { 11 | Http({ 12 | url: '/v1/demo/map_result_post', 13 | success: function (data) { 14 | 15 | } 16 | }).post(); 17 | 18 | Http({ 19 | url: '/v1/demo/map_result_post', 20 | success: function (data) { 21 | 22 | } 23 | }).post(); 24 | }); 25 | ``` 26 | 27 | * 情况2：嵌套请求，一个请求的回调函数又是一个请求，会出现一个loading刚关闭紧接着又打开一个loading的情况 28 | > 处理：A请求的回调函数又是B请求，A请求的hideLoading()在ajax.complete()中调用，B请求会在A请求的ajax.success()中调用， 29 | 由于ajax.success()优先ajax.complete()执行，所以当A调用hideLoading()时，B会先调用了showLoading()， 30 | 此时requestCount===2，于是A打开的loading不会关闭，直到B请求完成去关闭 31 | ```javascript 32 | $('#test').bind('click', () => { 33 | Http({ 34 | url: '/v1/demo/map_result_post', 35 | success: function (data) { 36 | Http({ 37 | url: '/v1/demo/map_result_post', 38 | success: function (data) { 39 | 40 | } 41 | }).post(); 42 | } 43 | }).post(); 44 | }); 45 | ``` 46 | 47 | * 情况3：有请求isShowLoading===false,有请求isShowLoading===true（默认情况） 48 | > 处理：isShowLoading===false不调用Helper.showLoading(); 49 | ```javascript 50 | $('#test').bind('click', () => { 51 | Http({ 52 | url: '/v1/demo/map_result_post', 53 | isShowLoading: false, 54 | success: function (data) { 55 | 56 | } 57 | }).post(); 58 | 59 | Http({ 60 | url: '/v1/demo/map_result_post', 61 | success: function (data) { 62 | 63 | } 64 | }).post(); 65 | }); 66 | ``` 67 | 68 | * 情况4：如第一种情况，发出多个请求，但不是同时发出，A请求完成需要处理一段时间，才发出B请求，可以使用setTimeout模拟 69 | > A请求完成过了一会出发B请求，类似A请求完成然后用户点击了按钮触发B请求，但是用户没有任何操作，此情况Http没办法处理，需要手动处理； 70 | 把所有请求isShowLoading设置为false，手动调用 Helper.showLoading();在用时最长的请求回调中关闭loading 71 | ```javascript 72 | $('#test').bind('click', () => { 73 | // 打开loading 74 | Helper.showLoading(); 75 | Http({ 76 | url: '/v1/demo/map_result_post', 77 | isShowLoading: false, 78 | success: function (data) { 79 | 80 | }, 81 | error: function () { 82 | // 异常情况关闭loading 83 | Helper.hideLoading(); 84 | } 85 | }).post(); 86 | 87 | // 延迟1秒 88 | setTimeout(() => { 89 | Http({ 90 | url: '/v1/demo/map_result_post2', 91 | isShowLoading: false, 92 | success: function (data) { 93 | // 在处理时间最长处关闭loading 94 | Helper.hideLoading(); 95 | }, 96 | error: function () { 97 | // 异常情况关闭loading 98 | Helper.hideLoading(); 99 | } 100 | }).post(); 101 | },1000) 102 | }); 103 | 104 | // 嵌套请求 105 | $('#test').bind('click', () => { 106 | // 打开loading 107 | Helper.showLoading(); 108 | Http({ 109 | url: '/v1/demo/map_result_post', 110 | isShowLoading: false, 111 | success: function (data) { 112 | // 延迟1秒 113 | setTimeout(() => { 114 | Http({ 115 | url: '/v1/demo/map_result_post2', 116 | isShowLoading: false, 117 | success: function (data) { 118 | // 在最终的回调函数处关闭loading 119 | Helper.hideLoading(); 120 | }, 121 | error: function () { 122 | // 异常情况关闭loading 123 | Helper.hideLoading(); 124 | } 125 | }).post(); 126 | }, 1000) 127 | }, 128 | error: function () { 129 | // 异常情况关闭loading 130 | Helper.hideLoading(); 131 | } 132 | }).post(); 133 | }); 134 | 135 | ``` 136 | -------------------------------------------------------------------------------- /doc/img/run.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/doc/img/run.png -------------------------------------------------------------------------------- /doc/use_html5_form_validation.md: -------------------------------------------------------------------------------- 1 | # 如何使用html默认的表单验证然后用ajax提交数据？ 2 | 3 | ## 方法一 4 | ```html 5 | 6 |
7 | 8 | 9 | 10 | 11 |
12 | ``` 13 | ```javascript 14 | window.login=function(username, password){ 15 | Http({ 16 | url: '/v1/login', 17 | data: data, // 表单数据 18 | success: function (token) { 19 | window.location.href = 'invoice.html'; 20 | } 21 | }).post(); 22 | return false; // 这里必须return false 23 | } 24 | ``` 25 | 26 | ## 方法二，建议使用 27 | ```html 28 |
29 | 30 | 31 | 32 | 33 |
34 | ``` 35 | ```javascript 36 | $('form').on('submit', function (ev) { 37 | Http({ 38 | url: '/v1/login', 39 | data: data, // 表单数据 40 | success: function (token) { 41 | window.location.href = 'invoice.html'; 42 | } 43 | }).post(); 44 | // 阻止submit表单提交 45 | // ev.preventDefault(); 46 | // 或者return false 47 | return false; 48 | }); 49 | ``` 50 | -------------------------------------------------------------------------------- /doc/webpack_project_description.md: -------------------------------------------------------------------------------- 1 | * 如果你刚开始学习webpack请先阅读[官网文档](https://www.webpackjs.com/concepts/)，了解基本的概念和配置 2 | * 本章只讲解本项目中的配置及遇到过的问题 3 | * 本项目webpack配置文件是[webpack.base.conf.js](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/webpack.base.conf.js)和[webpack.config.js](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/webpack.config.js) 4 | 5 | ## module.exports.entry 6 | * entry是配置webpack入口文件，入口文件都是js文件，由于我们是多页面配置,所以entry参数配置为数组 7 | * 配置webpack要有一个认识，所以资源都是围绕js文件展开的，像其他的html，css资源都要导入到js文件中,然后把js文件作为打包入口去打包 8 | * 考虑到js文件存放的目录比较随意并不一定所有js文件都作为打包入口文件，所以在[views.json](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/src/views/views.json) 9 | 中配置入口文件路径目录（这里约定每个文件夹是一个入口）.配置代码如下 10 | ``` 11 | let entry = {}; 12 | dirJSON.forEach(page => { 13 | entry[page.url] = path.resolve(__dirname, `./src/views/${page.url}/index.js`); 14 | }); 15 | ``` 16 | 17 | ## module.exports.output 18 | * output是配置webpack出口文件，对应每个入口文件（在entry配置的js文件），output主要配置js文件的输入路径，文件名称等 19 | 20 | 21 | ## module.exports.plugins 22 | * 该配置以全局的视角处理资源，如删除文件，压缩资源，提取合并资源等 23 | * webpack只处理js文件，对于其他类型的资源要借助插件或者“loader”，如下代码使用[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)插件处理html， 24 | 该插件可以指定html的模版、输出路径、文件名、是否压缩及引用哪些资源（chunks）等，因为我们是多页面，所以需要遍历 25 | [views.json](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/src/views/views.json)对每个html模版添加插件 26 | ``` 27 | let plugins = []; 28 | dirJSON.forEach(page => { 29 | plugins.push( 30 | new HtmlPlugin({ 31 | favicon: path.resolve(__dirname, `./src/assets/img/favicon.ico`), 32 | filename: path.resolve(__dirname, `./dist/${page.url}.html`), 33 | template: path.resolve(__dirname, `./src/views/${page.url}/index.html`), 34 | chunks: chunks, 35 | chunksSortMode: 'manual', 36 | minify: isProd ? { 37 | collapseWhitespace: true, 38 | removeComments: true 39 | } : false, 40 | xhtml: true 41 | }) 42 | ); 43 | }); 44 | ``` 45 | 46 | * 默认情况下css会和js打包在一个文件中，如下代码，使用[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) 47 | 提取样式内容到单独的css文件,可以指定提取后输出的目录，文件名等 48 | ``` 49 | new MiniCssExtractPlugin({ 50 | filename: 'css/' + (isProd ? '[name].[contenthash:8].min.css' : '[name].css'), 51 | chunkFilename: 'css/' + (isProd ? '[name].chunk.[contenthash:8].min.css' : '[name].chunk.css'), 52 | }) 53 | ``` 54 | 55 | ## module.exports.module.rules 56 | * 主要配置项目中的各种类型资源用什么工具处理，如html使用`html-withimg-loader`，图片使用`url-loader`等 57 | * 如下代码所示，处理图片使用`url-loade`和`image-webpack-loader`, 58 | `limit=4096`表示将小于4kb的图片转为base64字符串嵌在html中，limit参数单位是byte，不是kb， 59 | `outputPath=img/`指定图片输出在img目录下； 60 | `image-webpack-loader`用于压缩图片,注意所有的loader都是从后向前执行，对于这里的图片处理，先执行`image-webpack-loader`压缩图片，然后使用`url-loade`处理图片 61 | ``` 62 | { 63 | test: /\.(png|jpg|jpe?g|gif|svg)$/, 64 | use: ['url-loader?limit=4096&name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/', 'image-webpack-loader'] 65 | } 66 | ``` 67 | 68 | * 如下代码是对css文件的处理（scss文件同理，该项目使用scss写样式）。使用[mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)插件提取样式内容，同时需要配置 69 | `MiniCssExtractPlugin.loader`，参数`publicPath: '../'`可以指定css样式中图片的发布路径，如果不配置css中的图片资源会引用不到（background:url('')），因为我们把 70 | 图片放在/img目录下，css放在css目录下，css要引用到图片需要`../img/`。要么使用绝对路径； 71 | `css-hot-loader`用于监听css文件的改变刷新页面 72 | ``` 73 | { 74 | test: /\.(css)$/, 75 | use: [{ 76 | loader: 'css-hot-loader' 77 | }, { 78 | loader: MiniCssExtractPlugin.loader, 79 | options: { 80 | publicPath: '../' 81 | } 82 | }, { 83 | loader: 'css-loader' 84 | }] 85 | } 86 | ``` 87 | 88 | ## module.exports.optimization.splitChunks 89 | * webpack4资源分割配置，默认情况下html所引用的js会放在一个js文件中，但是对于公共的js内容我们想放在一起，于是有了如下配置， 90 | 参数`test`指定打包的资源目录，`name`给资源起个别名，生成的文件叫chunk，如下代码配置， 91 | 我们把'./node_modules'和'./src/assets/libs'目录下用到的js打包在一起并起名为'vendors'，把'./src/assets'目录下的资源打包在一起并起chunk名为'assets' 92 | * 该配置只需在打包环境（production）下使用，开发模式不需要，所以此配置在[webpack.config.js](https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/blob/master/webpack.config.js)文件中 93 | 94 | ``` 95 | splitChunks: { 96 | chunks: 'initial', 97 | minSize: 0, 98 | cacheGroups: { 99 | vendors: { 100 | test: path.resolve(__dirname, './node_modules'), 101 | priority: -1, 102 | name: 'vendors' 103 | }, 104 | libs: { 105 | test: path.resolve(__dirname, './src/assets/libs'), 106 | priority: -5, 107 | name: 'vendors' 108 | }, 109 | assets: { 110 | test: path.resolve(__dirname, './src/assets'), 111 | priority: -10, 112 | name: 'assets' 113 | } 114 | } 115 | } 116 | ``` 117 | 118 | 119 | # 关于文件使用hash命名 120 | * 对于webpack中的hash，chunkhash，contenthash还不了解，请先百度 121 | * 为了使缓存最大化，js、css和图片均使用hash命名，对于每次打包文件内容不变则文件名不变。使用hash命名只在打包环境（production）下，开发环境下不需要 122 | * 图片名为`[name].[hash:8].[ext]` 123 | * css利用mini-css-extract-plugin插件配置文件名为`[name].[contenthash:8].min.css`,chunk名为`[name].chunk.[contenthash:8].min.css` 124 | * js文件命令为`[name].[chunkhash].min.js`，chunk名为`[name].chunk.[chunkhash].min.js`。使用[webpack-plugin-hash-output](https://github.com/scinos/webpack-plugin-hash-output)插件 125 | 生成chunkhash，这里不能使用[chunkhash:8],否则js文件名会每次改变；webpack4对js文件也提供了contenthash但是没有效果，可能是提取css时导致了js文件变化 126 | 127 | 128 | # 关于文件的压缩 129 | > 文件压缩只需在打包情况下使用，开发模式不使用 130 | * html压缩在[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)中配置`minify`参数，该插件依赖`html-minifier` 131 | 具体配置可以看[这里](https://github.com/kangax/html-minifier#options-quick-reference) 132 | * 如下代码配置是取消html中的空格和删除注释 133 | ``` 134 | new HtmlPlugin({ 135 | minify: isProd ? { 136 | collapseWhitespace: true, 137 | removeComments: true 138 | } : false, 139 | }) 140 | ``` 141 | 142 | * css压缩 143 | 使用[optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)插件 144 | 145 | * js压缩 146 | 设置module.exports.optimization.minimize为true，webpack使用[uglifyjs-webpack-plugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin)插件压缩js 147 | 148 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack4-bootstrap4-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=dev webpack-dev-server --config webpack.config.js --progress", 8 | "build": "cross-env NODE_ENV=prod webpack --config webpack.config.js --progress", 9 | "eslint-fix": "eslint --fix ./src/**/index.js & eslint --fix ./src/assets/js/*.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/yanxiaojun617/webpack4-bootstrap4-demo.git" 14 | }, 15 | "author": "xiaojun617", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/yanxiaojun617/webpack4-bootstrap4-demo/issues" 19 | }, 20 | "homepage": "https://github.com/yanxiaojun617/webpack4-bootstrap4-demo#readme", 21 | "devDependencies": { 22 | "autoprefixer": "^9.0.1", 23 | "babel-core": "^6.26.3", 24 | "babel-eslint": "^8.2.6", 25 | "babel-loader": "^7.1.5", 26 | "babel-plugin-transform-runtime": "^6.23.0", 27 | "babel-preset-es2015-nostrict": "^6.6.2", 28 | "clean-webpack-plugin": "^0.1.19", 29 | "cross-env": "^5.2.0", 30 | "css-loader": "^1.0.0", 31 | "eslint": "^5.4.0", 32 | "eslint-config-alloy": "^1.4.2", 33 | "eslint-loader": "^2.1.0", 34 | "file-loader": "^1.1.11", 35 | "html-webpack-plugin": "^3.2.0", 36 | "html-withimg-loader": "^0.1.16", 37 | "image-webpack-loader": "^4.3.1", 38 | "mini-css-extract-plugin": "^0.4.1", 39 | "node-sass": "^4.9.2", 40 | "optimize-css-assets-webpack-plugin": "^5.0.0", 41 | "postcss-loader": "^2.1.6", 42 | "sass-loader": "^7.0.3", 43 | "style-loader": "^0.21.0", 44 | "url-loader": "^1.0.1", 45 | "webpack": "^4.17.0", 46 | "webpack-cli": "^3.1.0", 47 | "webpack-dev-server": "^3.1.5", 48 | "webpack-merge": "^4.1.3", 49 | "webpack-plugin-hash-output": "^3.1.0" 50 | }, 51 | "dependencies": { 52 | "babel-runtime": "^6.26.0", 53 | "bootstrap": "^4.1.3", 54 | "expose-loader": "^0.7.5", 55 | "font-awesome": "^4.7.0", 56 | "jquery": "^3.3.1", 57 | "popper.js": "^1.14.3", 58 | "sweetalert2": "^7.26.9" 59 | }, 60 | "browserslist": [ 61 | "ie > 10", 62 | "> 1%", 63 | "last 2 versions" 64 | ] 65 | } 66 | -------------------------------------------------------------------------------- /src/assets/Common.js: -------------------------------------------------------------------------------- 1 | import 'jquery'; 2 | import 'bootstrap'; 3 | import 'bootstrap/scss/bootstrap.scss'; 4 | import 'font-awesome/scss/font-awesome.scss'; 5 | import './setting/sweetalert2'; 6 | 7 | import './css/app.scss'; 8 | import './js/Constants'; 9 | import './js/Utils'; 10 | import './js/Helper'; 11 | import './js/Http'; 12 | -------------------------------------------------------------------------------- /src/assets/css/app.scss: -------------------------------------------------------------------------------- 1 | /** 2 | 这里放一些自定义的全局css 3 | */ 4 | html, body { 5 | height: 100%; 6 | margin: 0; 7 | padding: 0; 8 | background: #fff; 9 | } 10 | 11 | /* 滚动条默认显示样式 */ 12 | ::-webkit-scrollbar-thumb { 13 | background-color: #ccc; 14 | height: 50px; 15 | outline-offset: -2px; 16 | outline: 2px solid #cddc39; 17 | -webkit-border-radius: 4px; 18 | border: 2px solid #fff; 19 | } 20 | 21 | /* 鼠标点击滚动条显示样式 */ 22 | ::-webkit-scrollbar-thumb:hover { 23 | background-color: #00bcd4; 24 | height: 50px; 25 | -webkit-border-radius: 4px; 26 | } 27 | 28 | /* 滚动条模块大小 */ 29 | ::-webkit-scrollbar { 30 | width: 10px; 31 | height: 10px; 32 | } 33 | 34 | /* 滚动框背景样式 */ 35 | ::-webkit-scrollbar-track-piece { 36 | background-color: #fff; 37 | -webkit-border-radius: 0; 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/html/footer.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /src/assets/html/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/assets/img/banner-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/img/banner-bg.jpg -------------------------------------------------------------------------------- /src/assets/img/banner-pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/img/banner-pic1.png -------------------------------------------------------------------------------- /src/assets/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/img/favicon.ico -------------------------------------------------------------------------------- /src/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/img/logo.png -------------------------------------------------------------------------------- /src/assets/img/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/img/map.png -------------------------------------------------------------------------------- /src/assets/js/Constants.js: -------------------------------------------------------------------------------- 1 | // window.API = 'http://localhost:3724/api/'; 2 | window.API = 'https://yanxiaojun617.com/invoice/api/'; 3 | window.TEST = false; 4 | -------------------------------------------------------------------------------- /src/assets/js/Helper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Helper类存放和业务有关的公共方法；Utils类存放和业务无关的公共方法； 3 | */ 4 | window.Helper = { 5 | /** 6 | * 格式“是”or“否” 7 | */ 8 | formatYesOrNo: function (value) { 9 | return (value === 1 || value === '1') ? '是' : ((value === 0 || value === '0') ? '否' : null); 10 | }, 11 | /** 12 | * 打开loading模态窗口 13 | * */ 14 | showLoading: function () { 15 | if (window.LoadingIsShow) { // loading已经打开 16 | return; 17 | } 18 | let html = ['
']; 19 | html.push(''); 20 | html.push('
'); 21 | $('body').prepend(html.join('')); 22 | window.LoadingIsShow = true; 23 | }, 24 | /** 25 | * 关闭loading模态窗口 26 | * */ 27 | hideLoading: function () { 28 | if (!window.LoadingIsShow) { 29 | return; 30 | } 31 | $('.js-loading').remove(); 32 | window.LoadingIsShow = false; 33 | }, 34 | /** 35 | * 消息提示框，自动关闭，一般用于成功操作消息提示 36 | */ 37 | showToast: function (message, timeout) { 38 | if (swal) { 39 | swal({ 40 | position: 'bottom-end', 41 | type: 'success', 42 | title: message || '操作成功', 43 | showConfirmButton: false, 44 | backdrop: false, 45 | width: '420px', 46 | timer: timeout || 3000 47 | }); 48 | } else { 49 | let html = ['
']; 50 | html.push('
'); 51 | html.push(message || '操作成功'); 52 | html.push('
'); 53 | html.push('
'); 54 | $('body').append(html.join('')); 55 | let $message = $('.js-message'); 56 | let 57 | $warp = $('.js-message-warp'); 58 | $message.animate({ right: 0, bottom: 0 }, 2000, function () { 59 | setTimeout(() => { 60 | $message.animate({ right: '-100%', bottom: '-100%' }, 1500, function () { 61 | $warp.remove(); 62 | }); 63 | }, timeout || 2000); 64 | }); 65 | } 66 | }, 67 | /** 68 | * easyui datagrid 执行查询过滤公共函数 69 | * @param $dg 70 | * @param field 71 | * @param value 72 | * @param op 73 | */ 74 | doFilter: function ($dg, field, value, op) { 75 | if (!value) { 76 | $dg.datagrid('removeFilterRule', field); 77 | } else { 78 | $dg.datagrid('addFilterRule', { 79 | field: field, 80 | op: op || 'equal', 81 | value: value 82 | }); 83 | } 84 | $dg.datagrid('unselectAll').datagrid('doFilter'); 85 | }, 86 | backTop: function backTop(minHeight = 300) { 87 | let backTopHtml = ''; 88 | $('body').append(backTopHtml); 89 | $('#backTopBtn').click(function () { 90 | $('html, body').animate({ scrollTop: 0 }, 700); 91 | }).hover( 92 | function () { 93 | $(this).addClass('hover'); 94 | }, 95 | function () { 96 | $(this).removeClass('hover'); 97 | } 98 | ); 99 | $(window).scroll(function () { 100 | let s = $(window).scrollTop(); 101 | if (s > minHeight) { 102 | $('#backTopBtn').fadeIn(100); 103 | } else { 104 | $('#backTopBtn').fadeOut(100); 105 | } 106 | }); 107 | } 108 | }; 109 | 110 | -------------------------------------------------------------------------------- /src/assets/js/Http.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 封装jquery Ajax 4 | * 1.统一异常处理 5 | * 2.default请求添加默认api，添加权限请求头 6 | * 3.注意post方法的请求头为application/json，不需要此请求头则调用postFormData() 7 | * 示例： 8 | Http({ 9 | url: '', 10 | data: {}, 11 | success: function (data) { 12 | console.log(data); 13 | } 14 | }).post(); 15 | */ 16 | window.Http = function (opts) { 17 | return new JqueryAjax(opts); // 如果不new一个新对象，第一次请求未完成紧接着第二次请求的话参数会污染 18 | }; 19 | 20 | function JqueryAjax(opts) { 21 | this.url = opts.url; 22 | this.type = opts.type || 'POST'; 23 | this.data = opts.data || {}; 24 | this.dataType = opts.dataType || 'json'; 25 | this.headers = opts.headers || { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }; 26 | this.beforeSend = opts.beforeSend; 27 | this.success = opts.success; 28 | this.error = opts.error; 29 | this.complete = opts.complete; 30 | this.isShowLoading = !(opts.isShowLoading === false); // 本次请求是否显示loading，默认显示 31 | this.isDefaultApiRequest = !(opts.isDefaultApiRequest === false); // 是否使用默认api请求，默认请求会添加请求头，会添加默认api 32 | } 33 | 34 | JqueryAjax.prototype = { 35 | request: function () { 36 | let that = this; 37 | $.ajax({ 38 | type: this.type, 39 | url: this.url, 40 | data: this.data, 41 | dataType: this.dataType, 42 | headers: this.headers, 43 | crossDomain: !(document.all), 44 | beforeSend: function (xhr) { 45 | that.showLoading(); 46 | that.beforeSend && that.beforeSend(xhr); 47 | }, 48 | complete: function (xhr, status) { 49 | that.hideLoading(); 50 | that.complete && that.complete(xhr, status); 51 | }, 52 | error: function (xhr, status, error) { 53 | that.error && that.error(xhr, status, error); 54 | let state = xhr.status; 55 | if (state === 404) { 56 | swal('找不到页面', '', 'error'); 57 | } else if (state === 500) { 58 | swal('服务器处理失败', '', 'error'); 59 | } else if (state === 400) { // 业务异常 60 | let result = xhr.responseJSON; 61 | if (result && result.msg) { 62 | // 发票已存在 63 | if (result.code === 601) { 64 | let data = JSON.parse(result.msg); 65 | swal({ 66 | title: '该发票已经存在', 67 | text: '发票号码：' + data.invoiceNumber + '，添加时间：' + Utils.dateFormat(data.createTime, 'yyyy-MM-dd HH:mm:ss'), 68 | type: 'warning' 69 | }); 70 | } else if (result.code === 401) { 71 | swal({ 72 | title: '认证失败，请重新登录', 73 | type: 'warning' 74 | }).then(function () { 75 | window.location.href = document.location.origin; 76 | }); 77 | } else { 78 | swal(result.msg, '', 'warning'); 79 | } 80 | } else { 81 | swal('请求发生异常，请联系管理员', '', 'error'); 82 | } 83 | } else { 84 | swal('请求发生异常', '', 'error'); 85 | console.warn(xhr); 86 | } 87 | }, 88 | success: function (result, status, xhr) { 89 | that.success && that.success(that.isDefaultApiRequest ? result.data : result, status, xhr); 90 | } 91 | }); 92 | }, 93 | defaultApiRequest: function () { 94 | this.headers = this.headers || {}; 95 | this.headers.Authorization = 'Bearer ' + (window.token || Utils.getSessionStorage('token')); 96 | this.url = Utils.formatUrl(this.url.indexOf('http') !== -1 ? this.url : API + this.url); 97 | this.request(); 98 | }, 99 | post: function () { 100 | this.headers = { 'Content-Type': 'application/json; charset=UTF-8' }; 101 | this.data = JSON.stringify(this.data); 102 | this.isDefaultApiRequest ? this.defaultApiRequest() : this.request(); 103 | }, 104 | postFormData: function () { 105 | this.isDefaultApiRequest ? this.defaultApiRequest() : this.request(); 106 | }, 107 | get: function () { 108 | this.type = 'GET'; 109 | this.isDefaultApiRequest ? this.defaultApiRequest() : this.request(); 110 | }, 111 | requestCount: 0, // 记录未完成的请求数量,当请求数为0关闭loading,否则显示loading 112 | // 关于统一显示loading的处理逻辑，请查看/doc/《Http请求统一显示Loading.md》 113 | showLoading: function () { 114 | ++this.requestCount; 115 | this.isShowLoading && Helper.showLoading(); 116 | }, 117 | hideLoading: function () { 118 | --this.requestCount === 0 && Helper.hideLoading(); 119 | } 120 | }; 121 | -------------------------------------------------------------------------------- /src/assets/js/Utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Utils类存放和业务无关的公共方法；Helper类存放和业务有关的公共方法； 3 | */ 4 | 5 | window.Utils = { 6 | /** 7 | * 格式化日期（月和星期） 8 | * @param date：日期参数，默认为new Date()，可以是任何类日期格式，如1533779172927 '1533779172927' '2018-08-09' 9 | * @param sFormat：日期的格式,默认为 yyyy-MM-dd 10 | * @param sLanguage：默认为中文。当为'en'的时候是英文 11 | * 12 | * @example Utils.dateFormat() "2018-08-09" 13 | * @example Utils.dateFormat(new Date(),'yyyy-MM-dd HH:mm:ss') "2018-08-09 09:06:06" 14 | * @example Utils.dateFormat(new Date(),'yy-M-d H:m:s') "18-8-9 9:6:6" 15 | * @example Utils.dateFormat(new Date(),'yyyy年MM月dd日 HH:mm:ss') "2018年08月09日 09:06:06" 16 | * @example Utils.dateFormat(new Date(),'MM月dd日 EEE') "08月09日 星期四" 17 | * @example Utils.dateFormat(new Date(),'MMM') "八月" 18 | * @example Utils.dateFormat(new Date(),'MMM','en') "Aug" 19 | * 20 | */ 21 | dateFormat: function (obj = new Date(), sFormat = 'yyyy-MM-dd', sLanguage) { 22 | let date = Utils.toDate(obj); 23 | let time = {}; 24 | time.Year = date.getFullYear(); 25 | time.TYear = (String(time.Year)).substr(2); 26 | time.Month = date.getMonth() + 1; 27 | time.TMonth = time.Month < 10 ? '0' + time.Month : time.Month; 28 | time.Day = date.getDate(); 29 | time.TDay = time.Day < 10 ? '0' + time.Day : time.Day; 30 | time.Hour = date.getHours(); 31 | time.THour = time.Hour < 10 ? '0' + time.Hour : time.Hour; 32 | time.hour = time.Hour < 13 ? time.Hour : time.Hour - 12; 33 | time.Thour = time.hour < 10 ? '0' + time.hour : time.hour; 34 | time.Minute = date.getMinutes(); 35 | time.TMinute = time.Minute < 10 ? '0' + time.Minute : time.Minute; 36 | time.Second = date.getSeconds(); 37 | time.TSecond = time.Second < 10 ? '0' + time.Second : time.Second; 38 | time.Millisecond = date.getMilliseconds(); 39 | time.Week = date.getDay(); 40 | let MMMArrEn = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 41 | let MMMArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']; 42 | let WeekArrEn = ['Sun', 'Mon', 'Tue', 'Web', 'Thu', 'Fri', 'Sat']; 43 | let WeekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; 44 | let oNumber = time.Millisecond / 1000; 45 | if (sLanguage === 'en') { 46 | MMMArr = MMMArrEn.slice(0); 47 | WeekArr = WeekArrEn.slice(0); 48 | } 49 | return sFormat.replace(/yyyy/ig, time.Year) 50 | .replace(/yy/ig, time.TYear) 51 | .replace(/MMM/g, MMMArr[time.Month - 1]) 52 | .replace(/MM/g, time.TMonth) 53 | .replace(/M/g, time.Month) 54 | .replace(/dd/ig, time.TDay) 55 | .replace(/d/ig, time.Day) 56 | .replace(/HH/g, time.THour) 57 | .replace(/H/g, time.Hour) 58 | .replace(/hh/g, time.Thour) 59 | .replace(/h/g, time.hour) 60 | .replace(/mm/g, time.TMinute) 61 | .replace(/m/g, time.Minute) 62 | .replace(/ss/ig, time.TSecond) 63 | .replace(/s/ig, time.Second) 64 | .replace(/fff/ig, time.Millisecond) 65 | .replace(/ff/ig, oNumber.toFixed(2) * 100) 66 | .replace(/f/ig, oNumber.toFixed(1) * 10) 67 | .replace(/EEE/g, WeekArr[time.Week]); 68 | }, 69 | /** 70 | * 将类日期参数转为Date类型 71 | * @param obj 日期参数 72 | * @example Utils.toDate(1533779172927) 73 | * @example Utils.toDate('1533779172927') 74 | * @example Utils.toDate('2018-08-09') 75 | */ 76 | toDate: function (obj) { 77 | /* eslint-disable no-param-reassign */ 78 | if (!obj) { 79 | throw new Error('obj参数不允许为空'); 80 | } 81 | // 将时间毫秒数string类型转为number类型 82 | !isNaN(obj) && (obj = Number(obj)); 83 | // 兼容Safari和ie8处理，详情：https://www.jianshu.com/p/dc83b45a9480 84 | typeof obj === 'string' && obj.indexOf('-') && (obj = obj.replace(/-/g, '\/')); 85 | try { 86 | obj = new Date(obj); 87 | // 判断obj是否为Invalid Date 88 | if (obj instanceof Date && isNaN(obj.getTime())) { 89 | throw new Error(); 90 | } 91 | return new Date(obj); 92 | } catch (e) { 93 | throw new Error('obj参数格式不正确'); 94 | } 95 | /* eslint-enable */ 96 | }, 97 | /** 98 | * 表单数据序列化，返回数据对象 99 | * @param obj：字符串格式表示表单id，否则表示表单对象 100 | */ 101 | formSerialize: function (obj) { 102 | let form = obj; 103 | if (typeof obj === 'string') { 104 | form = document.getElementById(obj); 105 | } 106 | if (obj instanceof $) { 107 | form = form[0]; 108 | } 109 | let arr = {}; 110 | for (let i = 0; i < form.elements.length; i++) { 111 | let feled = form.elements[i]; 112 | switch (feled.type) { 113 | /* eslint-disable-next-line no-undefined */ 114 | case undefined: 115 | case 'button': 116 | case 'file': 117 | case 'reset': 118 | case 'submit': 119 | break; 120 | case 'checkbox': 121 | case 'radio': 122 | if (!feled.checked) { 123 | break; 124 | } 125 | /* eslint-disable-next-line no-fallthrough */ 126 | default: 127 | if (arr[feled.name]) { 128 | arr[feled.name] = arr[feled.name] + ',' + feled.value; 129 | } else { 130 | arr[feled.name] = feled.value; 131 | } 132 | } 133 | } 134 | return arr; 135 | }, 136 | /** 137 | * 获得字符串的长度，中文字符默认按2个长度 138 | * @param str 字符串参数 139 | * @example Utils.getLength('你好ab') 6 140 | * @example Utils.getLength('你好ab',false) 4 141 | */ 142 | getLength: function (str, chineseDouble) { 143 | if (chineseDouble === false) { 144 | return str.length; 145 | } else { 146 | let chineseRegex = /[\u4E00-\u9FA5\uf900-\ufa2d]/g; 147 | if (chineseRegex.test(str)) { 148 | return str.replace(chineseRegex, 'zz').length; 149 | } 150 | return str.length; 151 | } 152 | }, 153 | /** 154 | * 去除字符串两边空格 155 | */ 156 | trim: function (str) { 157 | return Utils.rTrim(Utils.lTrim(str)); 158 | }, 159 | /** 160 | * 去除字符串左边空格 161 | */ 162 | lTrim: function (str) { 163 | if (!str) return ''; 164 | return str.replace(/^\s*/ig, ''); 165 | }, 166 | /** 167 | * 去除字符串右边空格 168 | */ 169 | rTrim: function (str) { 170 | if (!str) return ''; 171 | return str.replace(/\s*$/ig, ''); 172 | }, 173 | /** 174 | * 将html代码的html修饰去除。 175 | */ 176 | htmlDecode: function (html) { 177 | let div = this.document.createElement('div'); 178 | div.innerHTML = html; 179 | return div.innerText || div.textContent; 180 | }, 181 | /** 182 | * 创建UUID 183 | * @returns {String} 184 | */ 185 | createUuid: function () { 186 | let s = []; 187 | let hexDigits = '0123456789abcdef'; 188 | for (let i = 0; i < 32; i++) { 189 | s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1); 190 | } 191 | s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010 192 | s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01 193 | // s[8] = s[13] = s[18] = s[23] = "-"; 194 | return s.join(''); 195 | }, 196 | /** 197 | * 保存数据到Cookie中 198 | * expireSeconds 过期时间秒数，默认30天 199 | */ 200 | setCookie: function (key, value, expireSeconds) { 201 | if (key && value) { 202 | let expireDate = new Date(); 203 | expireDate.setTime(expireDate.getTime() + (expireSeconds || 60 * 60 * 24 * 30) * 1000); 204 | this.document.cookie = key + '=' + JSON.stringify(value) + ';expires=' + expireDate.toGMTString() + ';'; 205 | } 206 | }, 207 | /** 208 | * 通过key从Cookie中获取内容 209 | */ 210 | getCookie: function (key) { 211 | if (key) { 212 | let cookie = document.cookie; 213 | if (cookie.length > 0) { 214 | let startIndex = cookie.indexOf(key + '='); 215 | if (startIndex !== -1) { 216 | startIndex = startIndex + key.length + 1; 217 | let endIndex = cookie.indexOf(';', startIndex); 218 | if (endIndex === -1) { 219 | endIndex = cookie.length; 220 | } 221 | let result = cookie.substring(startIndex, endIndex); 222 | return result ? JSON.parse(result) : null; 223 | } 224 | } 225 | return null; 226 | } 227 | }, 228 | /** 229 | * 根据key删除Cookie保存的内容 230 | */ 231 | deleteCookie: function (key) { 232 | key && (this.document.cookie = key + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;'); 233 | }, 234 | /** 235 | * 保存数据到Storage中，浏览器不支持Storage则存在Cookie中 236 | */ 237 | setStorage: function (key, value, expireSeconds) { 238 | if (key && value) { 239 | if (window.localStorage) { 240 | localStorage.setItem(key, JSON.stringify(value)); 241 | } else { 242 | this.setCookie(key, value, expireSeconds); 243 | } 244 | } 245 | }, 246 | /** 247 | * 从Storage获取缓存的内容 248 | */ 249 | getStorage: function (key) { 250 | if (key) { 251 | let result = ''; 252 | if (window.localStorage) { 253 | result = localStorage.getItem(key); 254 | } 255 | return result ? JSON.parse(result) : this.getCookie(key); 256 | } 257 | }, 258 | /** 259 | * 根据key从Storage删除缓存内容 260 | */ 261 | deleteStorage: function (key) { 262 | key && (window.localStorage ? localStorage.removeItem(key) : this.deleteCookie(key)); 263 | }, 264 | /** 265 | * 保存数据到SessionStorage中 266 | */ 267 | setSessionStorage: function (key, value) { 268 | if (key && value) { 269 | sessionStorage.setItem(key, JSON.stringify(value)); 270 | } 271 | }, 272 | /** 273 | * 从SessionStorage获取缓存的内容 274 | */ 275 | getSessionStorage: function (key) { 276 | if (key) { 277 | let jsonString = sessionStorage.getItem(key); 278 | return jsonString ? JSON.parse(jsonString) : null; 279 | } 280 | }, 281 | /** 282 | * 根据key从SessionStorage删除缓存内容 283 | */ 284 | deleteSessionStorage: function (key) { 285 | key && sessionStorage.removeItem(key); 286 | }, 287 | /** 288 | * 每次调用递增 289 | * Utils.getSequence()//10001 290 | * Utils.getSequence()//10002 291 | * Utils.getSequence()//10003 292 | */ 293 | getSequence: (function () { 294 | let sequence = 10000; 295 | return function () { 296 | return ++sequence; 297 | }; 298 | })(), 299 | /** 300 | * 把url中的双斜杠替换为单斜杠 301 | * 如:http://localhost:8080//api//demo.替换后http://localhost:8080/api/demo 302 | * @param url 303 | * @returns {string} 304 | */ 305 | formatUrl: function (url) { 306 | let index = 0; 307 | if (url.indexOf('http') !== -1) { 308 | index = 7; 309 | } 310 | return url.substring(0, index) + url.substring(index).replace(/\/\/*/g, '/'); 311 | }, 312 | isIE: function () { 313 | return !!window.ActiveXObject || 'ActiveXObject' in window; 314 | } 315 | 316 | }; 317 | 318 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/extension/datagrid-ExportExcel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created on 2016/9/8. 3 | */ 4 | 5 | /**导出Excel 6 | * def: 配置文件类型、过滤column、文件名 如：{type: 'excel', ignoreField: [], excelName: '值守计划列表'} 7 | * */ 8 | (function ($) { 9 | $.extend($.fn.datagrid.methods, { 10 | ExportExcel: function (jq, def) { 11 | return jq.each(function () { 12 | var $dg = $(this); 13 | var defaults = { 14 | type: 'excel', 15 | ignoreField: [], 16 | excelName: '下载' 17 | }; 18 | $.extend(defaults, def); 19 | var params = {}; 20 | var opts = $dg.datagrid('options'); 21 | // 默认查询条件 22 | $.extend(params, opts.queryParams); 23 | // 范围条件 24 | params.page = 1; 25 | params.rows = 66000; //excel的最大限度 26 | // 排序条件 27 | if (opts.sortName) { 28 | $.extend(params, { sort: opts.sortName, order: opts.sortOrder }); 29 | } 30 | // 过滤条件 31 | var rules = opts.filterRules ? opts.filterRules : []; 32 | for (var i in rules) { 33 | var rule = rules[i]; 34 | params[rule.field] = rule.value; 35 | } 36 | var param = opts.onBeforeLoad(params); 37 | opts.loader(param, function (data) { 38 | var rows = data.rows; 39 | var columns = opts.columns[0]; 40 | var ignoreFields = defaults.ignoreField; 41 | var cols = []; 42 | 43 | //过滤column 44 | for (var i = 0; i < columns.length; i++) { 45 | if (!(columns[i].checkbox || columns[i].hidden)) { 46 | var column = columns[i]; 47 | var j = 0; 48 | for (j = 0; j < ignoreFields.length; j++) { 49 | var igF = ignoreFields[j]; 50 | if (column.field == igF) { 51 | break; 52 | } 53 | } 54 | if (j == ignoreFields.length) { 55 | cols.push(column); 56 | } 57 | } 58 | } 59 | 60 | //创建和导出excel 61 | if (defaults.type == 'excel') { 62 | var excel = ''; 63 | excel += ''; 64 | excel += ''; 65 | excel += ''; 66 | for (var i = 0; i < cols.length; i++) { 67 | excel += ''; 68 | } 69 | excel += ''; 70 | excel += ''; 71 | for (var i = 0; i < rows.length; i++) { 72 | var row = rows[i]; 73 | excel += ''; 74 | excel += ''; 75 | for (var j = 0; j < cols.length; j++) { 76 | var field = cols[j].field; 77 | var value = row[field]; 78 | if (cols[j].formatter) { 79 | var colFormat = cols[j].formatter(value, row, j); // formatter API的参数最多3个 80 | if (value != null && value != undefined) { 81 | // 判断是时间格式，就添加一个空白避免excel对时间的格式化 82 | excel += ''; 85 | } 86 | } else { 87 | // 如果是长度大于15的数字，防止excel把数字转为科学计数法 88 | if (value && !isNaN(value) && String(value).length > 15) { 89 | excel += ''; 90 | } else { 91 | excel += ''; 92 | } 93 | } 94 | } 95 | excel += ''; 96 | } 97 | excel += '
' + cols[i].title + '
' + parseInt(i + 1) + '' + (typeof value == 'number' && String(value).length == 13 ? '　' + colFormat : colFormat); 83 | } else { 84 | excel += '' + ('内容：' + value) + '' + (value || '') + '
'; 98 | var excelFile = ""; 99 | excelFile += ""; 100 | excelFile += ""; 116 | excelFile += ""; 117 | excelFile += ""; 118 | excelFile += excel; 119 | excelFile += ""; 120 | excelFile += ""; 121 | var base64data = "base64," + $.base64.encode(excelFile); 122 | var link = 'data:application/vnd.ms-excel;filename=exportData.doc;' + base64data; 123 | var fileName = (defaults.excelName ? defaults.excelName : '下载') + '.xls'; 124 | var $a = $(''); 125 | $a.attr({ download: fileName, href: link }); 126 | $a.appendTo($dg); 127 | $a[0].click(); 128 | $a.remove(); 129 | } 130 | }); 131 | }); 132 | } 133 | }) 134 | 135 | })(jQuery); 136 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/extension/datagrid-filter.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | function getPluginName(target){ 3 | if ($(target).data('treegrid')){ 4 | return 'treegrid'; 5 | } else { 6 | return 'datagrid'; 7 | } 8 | } 9 | 10 | var autoSizeColumn1 = $.fn.datagrid.methods.autoSizeColumn; 11 | var loadDataMethod1 = $.fn.datagrid.methods.loadData; 12 | var appendMethod1 = $.fn.datagrid.methods.appendRow; 13 | var deleteMethod1 = $.fn.datagrid.methods.deleteRow; 14 | $.extend($.fn.datagrid.methods, { 15 | autoSizeColumn: function(jq, field){ 16 | return jq.each(function(){ 17 | var fc = $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-c'); 18 | fc.hide(); 19 | autoSizeColumn1.call($.fn.datagrid.methods, $(this), field); 20 | fc.show(); 21 | resizeFilter(this, field); 22 | }); 23 | }, 24 | loadData: function(jq, data){ 25 | jq.each(function(){ 26 | $.data(this, 'datagrid').filterSource = null; 27 | }); 28 | return loadDataMethod1.call($.fn.datagrid.methods, jq, data); 29 | }, 30 | appendRow: function(jq, row){ 31 | var result = appendMethod1.call($.fn.datagrid.methods, jq, row); 32 | jq.each(function(){ 33 | var state = $(this).data('datagrid'); 34 | if (state.filterSource){ 35 | state.filterSource.total++; 36 | if (state.filterSource.rows != state.data.rows){ 37 | state.filterSource.rows.push(row); 38 | } 39 | } 40 | }); 41 | return result; 42 | }, 43 | deleteRow: function(jq, index){ 44 | jq.each(function(){ 45 | var state = $(this).data('datagrid'); 46 | var opts = state.options; 47 | if (state.filterSource && opts.idField){ 48 | if (state.filterSource.rows == state.data.rows){ 49 | state.filterSource.total--; 50 | } else { 51 | for(var i=0; i=0 ? state.filterSource.rows[index]._parentId : null; 99 | var rows = translateTreeData(this, [param.data], pid); 100 | var newRows = state.filterSource.rows.splice(0, index>=0 ? (param.before ? index : index+1) : (state.filterSource.rows.length)); 101 | newRows = newRows.concat(rows); 102 | newRows = newRows.concat(state.filterSource.rows); 103 | state.filterSource.total += rows.length; 104 | state.filterSource.rows = newRows; 105 | $(this).treegrid('loadData', state.filterSource); 106 | 107 | function getNodeIndex(id){ 108 | var rows = state.filterSource.rows; 109 | for(var i=0; i').appendTo(container); 281 | }, 282 | getValue: function(target){ 283 | return $(target).html(); 284 | }, 285 | setValue: function(target, value){ 286 | $(target).html(value); 287 | }, 288 | resize: function(target, width){ 289 | $(target)._outerWidth(width)._outerHeight(22); 290 | } 291 | } 292 | }); 293 | $.fn.treegrid.defaults.filters = $.fn.datagrid.defaults.filters; 294 | 295 | // filter operators 296 | $.fn.datagrid.defaults.operators = { 297 | nofilter: { 298 | text: '不过滤' 299 | }, 300 | contains: { 301 | text: 'Contains', 302 | isMatch: function(source, value){ 303 | source = String(source); 304 | value = String(value); 305 | return source.toLowerCase().indexOf(value.toLowerCase()) >= 0; 306 | } 307 | }, 308 | equal: { 309 | text: '等于', 310 | isMatch: function(source, value){ 311 | return source == value; 312 | } 313 | }, 314 | notequal: { 315 | text: 'Not Equal', 316 | isMatch: function(source, value){ 317 | return source != value; 318 | } 319 | }, 320 | beginwith: { 321 | text: 'Begin With', 322 | isMatch: function(source, value){ 323 | source = String(source); 324 | value = String(value); 325 | return source.toLowerCase().indexOf(value.toLowerCase()) == 0; 326 | } 327 | }, 328 | endwith: { 329 | text: 'End With', 330 | isMatch: function(source, value){ 331 | source = String(source); 332 | value = String(value); 333 | return source.toLowerCase().indexOf(value.toLowerCase(), source.length - value.length) !== -1; 334 | } 335 | }, 336 | less: { 337 | text: '小于', 338 | isMatch: function(source, value){ 339 | return source < value; 340 | } 341 | }, 342 | lessorequal: { 343 | text: 'Less Or Equal', 344 | isMatch: function(source, value){ 345 | return source <= value; 346 | } 347 | }, 348 | greater: { 349 | text: '大于', 350 | isMatch: function(source, value){ 351 | return source > value; 352 | } 353 | }, 354 | greaterorequal: { 355 | text: 'Greater Or Equal', 356 | isMatch: function(source, value){ 357 | return source >= value; 358 | } 359 | } 360 | }; 361 | $.fn.treegrid.defaults.operators = $.fn.datagrid.defaults.operators; 362 | 363 | function resizeFilter(target, field){ 364 | var toFixColumnSize = false; 365 | var dg = $(target); 366 | var header = dg.datagrid('getPanel').find('div.datagrid-header'); 367 | var tr = header.find('.datagrid-header-row:not(.datagrid-filter-row)'); 368 | var ff = field ? header.find('.datagrid-filter[name="'+field+'"]') : header.find('.datagrid-filter'); 369 | ff.each(function(){ 370 | var name = $(this).attr('name'); 371 | var col = dg.datagrid('getColumnOption', name); 372 | var cc = $(this).closest('div.datagrid-filter-c'); 373 | var btn = cc.find('a.datagrid-filter-btn'); 374 | var cell = tr.find('td[field="'+name+'"] .datagrid-cell'); 375 | var cellWidth = cell._outerWidth(); 376 | if (cellWidth != _getContentWidth(cc)){ 377 | this.filter.resize(this, cellWidth - btn._outerWidth()); 378 | } 379 | if (cc.width() > col.boxWidth+col.deltaWidth-1){ 380 | col.boxWidth = cc.width() - col.deltaWidth + 1; 381 | col.width = col.boxWidth + col.deltaWidth; 382 | toFixColumnSize = true; 383 | } 384 | }); 385 | if (toFixColumnSize){ 386 | $(target).datagrid('fixColumnSize'); 387 | } 388 | 389 | function _getContentWidth(cc){ 390 | var w = 0; 391 | $(cc).children(':visible').each(function(){ 392 | w += $(this)._outerWidth(); 393 | }); 394 | return w; 395 | } 396 | } 397 | 398 | function getFilterComponent(target, field){ 399 | var header = $(target).datagrid('getPanel').find('div.datagrid-header'); 400 | return header.find('tr.datagrid-filter-row td[field="'+field+'"] .datagrid-filter'); 401 | } 402 | 403 | /** 404 | * get filter rule index, return -1 if not found. 405 | */ 406 | function getRuleIndex(target, field){ 407 | var name = getPluginName(target); 408 | var rules = $(target)[name]('options').filterRules; 409 | for(var i=0; i= 0){ 422 | return rules[index]; 423 | } else { 424 | return null; 425 | } 426 | } 427 | 428 | function addFilterRule(target, param){ 429 | var name = getPluginName(target); 430 | var opts = $(target)[name]('options'); 431 | var rules = opts.filterRules; 432 | 433 | if (param.op == 'nofilter'){ 434 | removeFilterRule(target, param.field); 435 | } else { 436 | var index = getRuleIndex(target, param.field); 437 | if (index >= 0){ 438 | $.extend(rules[index], param); 439 | } else { 440 | rules.push(param); 441 | } 442 | } 443 | 444 | var input = getFilterComponent(target, param.field); 445 | if (input.length){ 446 | if (param.op != 'nofilter'){ 447 | input[0].filter.setValue(input, param.value); 448 | } 449 | var menu = input[0].menu; 450 | if (menu){ 451 | menu.find('.'+opts.filterMenuIconCls).removeClass(opts.filterMenuIconCls); 452 | var item = menu.menu('findItem', opts.operators[param.op]['text']); 453 | menu.menu('setIcon', { 454 | target: item.target, 455 | iconCls: opts.filterMenuIconCls 456 | }); 457 | } 458 | } 459 | } 460 | 461 | function removeFilterRule(target, field){ 462 | var name = getPluginName(target); 463 | var dg = $(target); 464 | var opts = dg[name]('options'); 465 | if (field){ 466 | var index = getRuleIndex(target, field); 467 | if (index >= 0){ 468 | opts.filterRules.splice(index, 1); 469 | } 470 | _clear([field]); 471 | } else { 472 | opts.filterRules = []; 473 | var fields = dg.datagrid('getColumnFields',true).concat(dg.datagrid('getColumnFields')); 474 | _clear(fields); 475 | } 476 | 477 | function _clear(fields){ 478 | for(var i=0; ib?1:-1); 567 | }; 568 | r = sortFunc(r1[sn], r2[sn]) * (so=='asc'?1:-1); 569 | if (r != 0){ 570 | return r; 571 | } 572 | } 573 | return r; 574 | }); 575 | } 576 | data = opts.filterMatcher.call(target, { 577 | total: state.filterSource.total, 578 | rows: state.filterSource.rows 579 | }); 580 | 581 | if (opts.pagination){ 582 | var dg = $(target); 583 | var pager = dg[name]('getPager'); 584 | pager.pagination({ 585 | onSelectPage:function(pageNum, pageSize){ 586 | opts.pageNumber = pageNum; 587 | opts.pageSize = pageSize; 588 | pager.pagination('refresh',{ 589 | pageNumber:pageNum, 590 | pageSize:pageSize 591 | }); 592 | //dg.datagrid('loadData', state.filterSource); 593 | dg[name]('loadData', state.filterSource); 594 | }, 595 | onBeforeRefresh:function(){ 596 | dg[name]('reload'); 597 | return false; 598 | } 599 | }); 600 | if (name == 'datagrid'){ 601 | var start = (opts.pageNumber-1)*parseInt(opts.pageSize); 602 | var end = start + parseInt(opts.pageSize); 603 | data.rows = data.rows.slice(start, end); 604 | } else { 605 | var topRows = []; 606 | var childRows = []; 607 | $.map(data.rows, function(row){ 608 | row._parentId ? childRows.push(row) : topRows.push(row); 609 | }); 610 | data.total = topRows.length; 611 | var start = (opts.pageNumber-1)*parseInt(opts.pageSize); 612 | var end = start + parseInt(opts.pageSize); 613 | data.rows = topRows.slice(start, end).concat(childRows); 614 | } 615 | } 616 | $.map(data.rows, function(row){ 617 | row.children = undefined; 618 | }); 619 | } 620 | return data; 621 | } 622 | 623 | function init(target, filters){ 624 | filters = filters || []; 625 | var name = getPluginName(target); 626 | var state = $.data(target, name); 627 | var opts = state.options; 628 | if (!opts.filterRules.length){ 629 | opts.filterRules = []; 630 | } 631 | opts.filterCache = opts.filterCache || {}; 632 | var dgOpts = $.data(target, 'datagrid').options; 633 | 634 | var onResize = dgOpts.onResize; 635 | dgOpts.onResize = function(width,height){ 636 | resizeFilter(target); 637 | onResize.call(this, width, height); 638 | } 639 | var onBeforeSortColumn = dgOpts.onBeforeSortColumn; 640 | dgOpts.onBeforeSortColumn = function(sort, order){ 641 | var result = onBeforeSortColumn.call(this, sort, order); 642 | if (result != false){ 643 | opts.isSorting = true; 644 | } 645 | return result; 646 | }; 647 | 648 | var onResizeColumn = opts.onResizeColumn; 649 | opts.onResizeColumn = function(field,width){ 650 | var fc = $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-c'); 651 | fc.hide(); 652 | $(target).datagrid('fitColumns'); 653 | if (opts.fitColumns){ 654 | resizeFilter(target); 655 | } else { 656 | resizeFilter(target, field); 657 | } 658 | fc.show(); 659 | onResizeColumn.call(target, field, width); 660 | }; 661 | var onBeforeLoad = opts.onBeforeLoad; 662 | opts.onBeforeLoad = function(param1, param2){ 663 | if (param1){ 664 | param1.filterRules = opts.filterStringify(opts.filterRules); 665 | } 666 | if (param2){ 667 | param2.filterRules = opts.filterStringify(opts.filterRules); 668 | } 669 | var result = onBeforeLoad.call(this, param1, param2); 670 | if (result != false){ 671 | if (name == 'datagrid'){ 672 | state.filterSource = null; 673 | } else if (name == 'treegrid' && state.filterSource){ 674 | if (param1){ 675 | var id = param1[opts.idField]; // the id of the expanding row 676 | var rows = state.filterSource.rows || []; 677 | for(var i=0; i' + 713 | 'a.datagrid-filter-btn{display:inline-block;width:22px;height:22px;margin:0;vertical-align:top;cursor:pointer;opacity:0.6;filter:alpha(opacity=60);}' + 714 | 'a:hover.datagrid-filter-btn{opacity:1;filter:alpha(opacity=100);}' + 715 | '.datagrid-filter-row .textbox,.datagrid-filter-row .textbox .textbox-text{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' + 716 | '.datagrid-filter-row input{margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;}' + 717 | '.datagrid-filter-cache{position:absolute;width:10px;height:10px;left:-99999px;}' + 718 | '' 719 | ); 720 | } 721 | } 722 | 723 | /** 724 | * create filter component 725 | */ 726 | function createFilter(frozen){ 727 | var dc = state.dc; 728 | var fields = $(target).datagrid('getColumnFields', frozen); 729 | if (frozen && opts.rownumbers){ 730 | fields.unshift('_'); 731 | } 732 | var table = (frozen?dc.header1:dc.header2).find('table.datagrid-htable'); 733 | 734 | // clear the old filter component 735 | table.find('.datagrid-filter').each(function(){ 736 | if (this.filter.destroy){ 737 | this.filter.destroy(this); 738 | } 739 | if (this.menu){ 740 | $(this.menu).menu('destroy'); 741 | } 742 | }); 743 | table.find('tr.datagrid-filter-row').remove(); 744 | 745 | var tr = $(''); 746 | if (opts.filterPosition == 'bottom'){ 747 | tr.appendTo(table.find('tbody')); 748 | } else { 749 | tr.prependTo(table.find('tbody')); 750 | } 751 | if (!opts.showFilterBar){ 752 | tr.hide(); 753 | } 754 | 755 | for(var i=0; i').attr('field', field).appendTo(tr); 759 | if (col && col.hidden){ 760 | td.hide(); 761 | } 762 | if (field == '_'){ 763 | continue; 764 | } 765 | if (col && (col.checkbox || col.expander)){ 766 | continue; 767 | } 768 | 769 | var fopts = getFilter(field); 770 | if (fopts){ 771 | $(target)[name]('destroyFilter', field); // destroy the old filter component 772 | } else { 773 | fopts = $.extend({}, { 774 | field: field, 775 | type: opts.defaultFilterType, 776 | options: opts.defaultFilterOptions 777 | }); 778 | } 779 | 780 | var div = opts.filterCache[field]; 781 | if (!div){ 782 | div = $('
').appendTo(td); 783 | var filter = opts.filters[fopts.type]; 784 | var input = filter.init(div, fopts.options||{}); 785 | input.addClass('datagrid-filter').attr('name', field); 786 | input[0].filter = filter; 787 | input[0].menu = createFilterButton(div, fopts.op); 788 | if (fopts.options){ 789 | if (fopts.options.onInit){ 790 | fopts.options.onInit.call(input[0], target); 791 | } 792 | } else { 793 | opts.defaultFilterOptions.onInit.call(input[0], target); 794 | } 795 | opts.filterCache[field] = div; 796 | resizeFilter(target, field); 797 | } else { 798 | div.appendTo(td); 799 | } 800 | } 801 | } 802 | 803 | function createFilterButton(container, operators){ 804 | if (!operators){return null;} 805 | 806 | var btn = $(' ').addClass(opts.filterBtnIconCls); 807 | if (opts.filterBtnPosition == 'right'){ 808 | btn.appendTo(container); 809 | } else { 810 | btn.prependTo(container); 811 | } 812 | 813 | var menu = $('
').appendTo('body'); 814 | $.map(['nofilter'].concat(operators), function(item){ 815 | var op = opts.operators[item]; 816 | if (op){ 817 | $('
').attr('name', item).html(op.text).appendTo(menu); 818 | } 819 | }); 820 | menu.menu({ 821 | alignTo:btn, 822 | onClick:function(item){ 823 | var btn = $(this).menu('options').alignTo; 824 | var td = btn.closest('td[field]'); 825 | var field = td.attr('field'); 826 | var input = td.find('.datagrid-filter'); 827 | var value = input[0].filter.getValue(input); 828 | 829 | if (opts.onClickMenu.call(target, item, btn, field) == false){ 830 | return; 831 | } 832 | 833 | addFilterRule(target, { 834 | field: field, 835 | op: item.name, 836 | value: value 837 | }); 838 | 839 | doFilter(target); 840 | } 841 | }); 842 | 843 | btn[0].menu = menu; 844 | btn.bind('click', {menu:menu}, function(e){ 845 | $(this.menu).menu('show'); 846 | return false; 847 | }); 848 | return menu; 849 | } 850 | 851 | function getFilter(field){ 852 | for(var i=0; i').appendTo(dc.view); 895 | } 896 | for(var field in opts.filterCache){ 897 | $(opts.filterCache[field]).appendTo(div); 898 | } 899 | var data = state.data; 900 | if (state.filterSource){ 901 | data = state.filterSource; 902 | $.map(data.rows, function(row){ 903 | row.children = undefined; 904 | }); 905 | } 906 | $(this)[name]({ 907 | data: data, 908 | loadFilter: (opts.oldLoadFilter||undefined), 909 | oldLoadFilter: null 910 | }); 911 | }); 912 | }, 913 | destroyFilter: function(jq, field){ 914 | return jq.each(function(){ 915 | var name = getPluginName(this); 916 | var state = $.data(this, name); 917 | var opts = state.options; 918 | if (field){ 919 | _destroy(field); 920 | } else { 921 | for(var f in opts.filterCache){ 922 | _destroy(f); 923 | } 924 | $(this).datagrid('getPanel').find('.datagrid-header .datagrid-filter-row').remove(); 925 | $(this).data('datagrid').dc.view.children('.datagrid-filter-cache').remove(); 926 | opts.filterCache = {}; 927 | $(this)[name]('resize'); 928 | $(this)[name]('disableFilter'); 929 | } 930 | 931 | function _destroy(field){ 932 | var c = $(opts.filterCache[field]); 933 | var input = c.find('.datagrid-filter'); 934 | if (input.length){ 935 | var filter = input[0].filter; 936 | if (filter.destroy){ 937 | filter.destroy(input[0]); 938 | } 939 | } 940 | c.find('.datagrid-filter-btn').each(function(){ 941 | $(this.menu).menu('destroy'); 942 | }); 943 | c.remove(); 944 | opts.filterCache[field] = undefined; 945 | } 946 | }); 947 | }, 948 | getFilterRule: function(jq, field){ 949 | return getFilterRule(jq[0], field); 950 | }, 951 | addFilterRule: function(jq, param){ 952 | return jq.each(function(){ 953 | addFilterRule(this, param); 954 | }); 955 | }, 956 | removeFilterRule: function(jq, field){ 957 | return jq.each(function(){ 958 | removeFilterRule(this, field); 959 | }); 960 | }, 961 | doFilter: function(jq){ 962 | return jq.each(function(){ 963 | doFilter(this); 964 | }); 965 | }, 966 | getFilterComponent: function(jq, field){ 967 | return getFilterComponent(jq[0], field); 968 | }, 969 | resizeFilter: function(jq, field){ 970 | return jq.each(function(){ 971 | resizeFilter(this, field); 972 | }); 973 | } 974 | }); 975 | })(jQuery); 976 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/extension/jquery.base64.js: -------------------------------------------------------------------------------- 1 | jQuery.base64 = (function($) { 2 | 3 | // private property 4 | var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 5 | 6 | // private method for UTF-8 encoding 7 | function utf8Encode(string) { 8 | string = string.replace(/\r\n/g,"\n"); 9 | var utftext = ""; 10 | for (var n = 0; n < string.length; n++) { 11 | var c = string.charCodeAt(n); 12 | if (c < 128) { 13 | utftext += String.fromCharCode(c); 14 | } 15 | else if((c > 127) && (c < 2048)) { 16 | utftext += String.fromCharCode((c >> 6) | 192); 17 | utftext += String.fromCharCode((c & 63) | 128); 18 | } 19 | else { 20 | utftext += String.fromCharCode((c >> 12) | 224); 21 | utftext += String.fromCharCode(((c >> 6) & 63) | 128); 22 | utftext += String.fromCharCode((c & 63) | 128); 23 | } 24 | } 25 | return utftext; 26 | } 27 | 28 | function encode(input) { 29 | var output = ""; 30 | var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 31 | var i = 0; 32 | input = utf8Encode(input); 33 | while (i < input.length) { 34 | chr1 = input.charCodeAt(i++); 35 | chr2 = input.charCodeAt(i++); 36 | chr3 = input.charCodeAt(i++); 37 | enc1 = chr1 >> 2; 38 | enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 39 | enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 40 | enc4 = chr3 & 63; 41 | if (isNaN(chr2)) { 42 | enc3 = enc4 = 64; 43 | } else if (isNaN(chr3)) { 44 | enc4 = 64; 45 | } 46 | output = output + 47 | keyStr.charAt(enc1) + keyStr.charAt(enc2) + 48 | keyStr.charAt(enc3) + keyStr.charAt(enc4); 49 | } 50 | return output; 51 | } 52 | 53 | return { 54 | encode: function (str) { 55 | return encode(str); 56 | } 57 | }; 58 | 59 | }(jQuery)); 60 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/locale/easyui-lang-zh_CN.js: -------------------------------------------------------------------------------- 1 | if ($.fn.pagination){ 2 | $.fn.pagination.defaults.beforePageText = '第'; 3 | $.fn.pagination.defaults.afterPageText = '共{pages}页'; 4 | $.fn.pagination.defaults.displayMsg = '显示{from}到{to},共{total}记录'; 5 | } 6 | if ($.fn.datagrid){ 7 | $.fn.datagrid.defaults.loadMsg = '正在处理，请稍待。。。'; 8 | } 9 | if ($.fn.treegrid && $.fn.datagrid){ 10 | $.fn.treegrid.defaults.loadMsg = $.fn.datagrid.defaults.loadMsg; 11 | } 12 | if ($.messager){ 13 | $.messager.defaults.ok = '确定'; 14 | $.messager.defaults.cancel = '取消'; 15 | } 16 | $.map(['validatebox','textbox','passwordbox','filebox','searchbox', 17 | 'combo','combobox','combogrid','combotree', 18 | 'datebox','datetimebox','numberbox', 19 | 'spinner','numberspinner','timespinner','datetimespinner'], function(plugin){ 20 | if ($.fn[plugin]){ 21 | $.fn[plugin].defaults.missingMessage = '该输入项为必输项'; 22 | } 23 | }); 24 | if ($.fn.validatebox){ 25 | $.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址'; 26 | $.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址'; 27 | $.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间'; 28 | $.fn.validatebox.defaults.rules.remote.message = '请修正该字段'; 29 | } 30 | if ($.fn.calendar){ 31 | $.fn.calendar.defaults.weeks = ['日','一','二','三','四','五','六']; 32 | $.fn.calendar.defaults.months = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']; 33 | } 34 | if ($.fn.datebox){ 35 | $.fn.datebox.defaults.currentText = '今天'; 36 | $.fn.datebox.defaults.closeText = '关闭'; 37 | $.fn.datebox.defaults.okText = '确定'; 38 | $.fn.datebox.defaults.formatter = function(date){ 39 | var y = date.getFullYear(); 40 | var m = date.getMonth()+1; 41 | var d = date.getDate(); 42 | return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d); 43 | }; 44 | $.fn.datebox.defaults.parser = function(s){ 45 | if (!s) return new Date(); 46 | var ss = s.split('-'); 47 | var y = parseInt(ss[0],10); 48 | var m = parseInt(ss[1],10); 49 | var d = parseInt(ss[2],10); 50 | if (!isNaN(y) && !isNaN(m) && !isNaN(d)){ 51 | return new Date(y,m-1,d); 52 | } else { 53 | return new Date(); 54 | } 55 | }; 56 | } 57 | if ($.fn.datetimebox && $.fn.datebox){ 58 | $.extend($.fn.datetimebox.defaults,{ 59 | currentText: $.fn.datebox.defaults.currentText, 60 | closeText: $.fn.datebox.defaults.closeText, 61 | okText: $.fn.datebox.defaults.okText 62 | }); 63 | } 64 | if ($.fn.datetimespinner){ 65 | $.fn.datetimespinner.defaults.selections = [[0,4],[5,7],[8,10],[11,13],[14,16],[17,19]] 66 | } 67 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/accordion_arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/accordion_arrows.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/blank.gif -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/calendar_arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/calendar_arrows.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/combo_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/combo_arrow.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/datagrid_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/datagrid_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/datebox_arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/datebox_arrow.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/layout_arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/layout_arrows.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/linkbutton_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/linkbutton_bg.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/loading.gif -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/menu_arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/menu_arrows.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/messager_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/messager_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/pagination_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/pagination_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/panel_tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/panel_tools.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/passwordbox_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/passwordbox_close.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/passwordbox_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/passwordbox_open.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/searchbox_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/searchbox_button.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/slider_handle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/slider_handle.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/spinner_arrows.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/spinner_arrows.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tabs_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tabs_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tagbox_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tagbox_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tree_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/tree_icons.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/validatebox_warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/bootstrap/images/validatebox_warning.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icon.css: -------------------------------------------------------------------------------- 1 | .icon-blank{ 2 | background:url('icons/blank.gif') no-repeat center center; 3 | } 4 | .icon-add{ 5 | background:url('icons/edit_add.png') no-repeat center center; 6 | } 7 | .icon-edit{ 8 | background:url('icons/pencil.png') no-repeat center center; 9 | } 10 | .icon-clear{ 11 | background:url('icons/clear.png') no-repeat center center; 12 | } 13 | .icon-remove{ 14 | background:url('icons/edit_remove.png') no-repeat center center; 15 | } 16 | .icon-save{ 17 | background:url('icons/filesave.png') no-repeat center center; 18 | } 19 | .icon-cut{ 20 | background:url('icons/cut.png') no-repeat center center; 21 | } 22 | .icon-ok{ 23 | background:url('icons/ok.png') no-repeat center center; 24 | } 25 | .icon-no{ 26 | background:url('icons/no.png') no-repeat center center; 27 | } 28 | .icon-cancel{ 29 | background:url('icons/cancel.png') no-repeat center center; 30 | } 31 | .icon-reload{ 32 | background:url('icons/reload.png') no-repeat center center; 33 | } 34 | .icon-search{ 35 | background:url('icons/search.png') no-repeat center center; 36 | } 37 | .icon-print{ 38 | background:url('icons/print.png') no-repeat center center; 39 | } 40 | .icon-help{ 41 | background:url('icons/help.png') no-repeat center center; 42 | } 43 | .icon-undo{ 44 | background:url('icons/undo.png') no-repeat center center; 45 | } 46 | .icon-redo{ 47 | background:url('icons/redo.png') no-repeat center center; 48 | } 49 | .icon-back{ 50 | background:url('icons/back.png') no-repeat center center; 51 | } 52 | .icon-sum{ 53 | background:url('icons/sum.png') no-repeat center center; 54 | } 55 | .icon-tip{ 56 | background:url('icons/tip.png') no-repeat center center; 57 | } 58 | .icon-filter{ 59 | background:url('icons/filter.png') no-repeat center center; 60 | } 61 | .icon-man{ 62 | background:url('icons/man.png') no-repeat center center; 63 | } 64 | .icon-lock{ 65 | background:url('icons/lock.png') no-repeat center center; 66 | } 67 | .icon-more{ 68 | background:url('icons/more.png') no-repeat center center; 69 | } 70 | 71 | 72 | .icon-mini-add{ 73 | background:url('icons/mini_add.png') no-repeat center center; 74 | } 75 | .icon-mini-edit{ 76 | background:url('icons/mini_edit.png') no-repeat center center; 77 | } 78 | .icon-mini-refresh{ 79 | background:url('icons/mini_refresh.png') no-repeat center center; 80 | } 81 | 82 | .icon-large-picture{ 83 | background:url('icons/large_picture.png') no-repeat center center; 84 | } 85 | .icon-large-clipart{ 86 | background:url('icons/large_clipart.png') no-repeat center center; 87 | } 88 | .icon-large-shapes{ 89 | background:url('icons/large_shapes.png') no-repeat center center; 90 | } 91 | .icon-large-smartart{ 92 | background:url('icons/large_smartart.png') no-repeat center center; 93 | } 94 | .icon-large-chart{ 95 | background:url('icons/large_chart.png') no-repeat center center; 96 | } 97 | -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/back.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/blank.gif -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/cancel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/cancel.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/clear.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/cut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/cut.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/edit_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/edit_add.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/edit_remove.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/edit_remove.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/filesave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/filesave.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/filter.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/help.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_chart.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_clipart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_clipart.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_picture.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_shapes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_shapes.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_smartart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/large_smartart.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/lock.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/man.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/man.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_add.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_edit.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_refresh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/mini_refresh.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/more.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/no.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/no.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/ok.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/ok.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/pencil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/pencil.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/print.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/print.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/redo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/redo.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/reload.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/search.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/sum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/sum.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/tip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/tip.png -------------------------------------------------------------------------------- /src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/undo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/assets/libs/jquery-easyui/1.5.5.4/themes/icons/undo.png -------------------------------------------------------------------------------- /src/assets/setting/easyui.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 覆盖easyui默认样式 3 | */ 4 | .window-mask { 5 | opacity: 1.05; 6 | } 7 | 8 | .window-proxy-mask, 9 | .window-mask { 10 | background: rgba(0, 0, 0, 0.4); 11 | } 12 | 13 | .easyui-dialog { 14 | padding-top: 10px; 15 | padding-bottom: 10px; 16 | } 17 | 18 | .easyui-dialog .row { 19 | margin: 0; 20 | } 21 | 22 | .required > label:after { 23 | content: '*'; 24 | color: #DB2828; 25 | padding-left: 3px; 26 | } 27 | 28 | .datagrid-row-selected { 29 | background: #3c8dbc; 30 | } 31 | 32 | .datagrid-editable { 33 | color: #333; 34 | } 35 | 36 | .datagrid-header-row { 37 | height: 40px; 38 | } 39 | 40 | .datagrid-row { 41 | height: 45px; 42 | } 43 | 44 | .datagrid-filter-row { 45 | height: 35px; 46 | } 47 | 48 | .datagrid-row-selected { 49 | background: #77c0f1; 50 | color: #000; 51 | } 52 | 53 | .window-body-noheader { 54 | font-size: 22px; 55 | } 56 | 57 | /* panel中使用label字体大小，一般是在panel中使用form，form内容有label*/ 58 | .panel-body label{ 59 | font-size: 14px; 60 | } 61 | 62 | /* 表格头部字体大小 */ 63 | .datagrid-header .datagrid-cell span { 64 | font-size: 14px; 65 | } 66 | -------------------------------------------------------------------------------- /src/assets/setting/easyui.js: -------------------------------------------------------------------------------- 1 | import '../libs/jquery-easyui/1.5.5.4/themes/bootstrap/easyui.css'; 2 | import '../libs/jquery-easyui/1.5.5.4/themes/icon.css'; 3 | import '../libs/jquery-easyui/1.5.5.4/jquery.easyui.min.js'; 4 | import '../libs/jquery-easyui/1.5.5.4/extension/datagrid-filter.js'; 5 | import '../libs/jquery-easyui/1.5.5.4/extension/jquery.base64.js'; 6 | import '../libs/jquery-easyui/1.5.5.4/extension/datagrid-ExportExcel.js'; 7 | import '../libs/jquery-easyui/1.5.5.4/locale/easyui-lang-zh_CN.js'; 8 | import './easyui.css'; 9 | 10 | /** 11 | * 覆盖easyui默认设置 12 | */ 13 | let dateboxButtons = $.extend([], $.fn.datebox.defaults.buttons); 14 | dateboxButtons.splice(1, 0, { 15 | text: '清空', 16 | handler: function (target) { 17 | $(target).datebox('clear').datebox('hidePanel'); 18 | } 19 | }); 20 | $.fn.datebox.defaults.buttons = dateboxButtons; 21 | 22 | 23 | // 设置easyui datebox默认不可编辑 24 | $.fn.datebox.defaults.editable = false; 25 | 26 | // 设置easyui combobox默认不可编辑 27 | $.fn.combobox.defaults.editable = false; 28 | 29 | // 给easyui combobox添加清空图标 30 | $.fn.combobox.defaults.icons = [{ 31 | iconCls: 'icon-clear', 32 | handler: function (e) { 33 | $(e.data.target).combobox('clear'); 34 | } 35 | }]; 36 | 37 | // easyui datagrid每页默认20条数据 38 | $.fn.datagrid.defaults.pageSize = 20; 39 | $.fn.datagrid.defaults.pageList = [10, 20, 50, 100, 200]; 40 | 41 | // easyui datagrid loading提示内容，设置为空则不会显示loading 42 | $.fn.datagrid.defaults.loadMsg = ''; 43 | 44 | // easyui datagrid 日期范围过滤 45 | $.extend($.fn.datagrid.defaults.filters, { 46 | dateRange: { 47 | init: function (container, options) { 48 | let input = $('').appendTo(container); 49 | input.combo($.extend({ 50 | panelWidth: 330, 51 | panelHeight: 254, 52 | editable: false 53 | }, options, { 54 | onShowPanel: function () { 55 | let dd = input.combo('getText').split(':'); 56 | let d1 = $.fn.datebox.defaults.parser(dd[0]); 57 | let d2 = $.fn.datebox.defaults.parser(dd[1]); 58 | let p = input.combo('panel'); 59 | p.find('.c1').calendar('moveTo', d1); 60 | p.find('.c2').calendar('moveTo', d2); 61 | } 62 | })); 63 | 64 | let p = input.combo('panel'); 65 | $('
').appendTo(p); 66 | let c1 = p.find('.c1').calendar(); 67 | let c2 = p.find('.c2').calendar(); 68 | let footer = $('
').appendTo(p); 69 | let formatter = function (v) { 70 | return $.fn.datebox.defaults.formatter(v); 71 | }; 72 | let setValue = function (v1, v2) { 73 | let v = v1 + '~' + v2; 74 | input.combo('setValue', v).combo('setText', v); 75 | input.combo('hidePanel'); 76 | }; 77 | 78 | let thisMonthBtn = $('').appendTo(footer); 79 | thisMonthBtn.bind('click', function () { 80 | let v1 = formatter(new Date(new Date().setDate(1))); 81 | let v2 = formatter(new Date()); 82 | setValue(v1, v2); 83 | }); 84 | 85 | let monthBtn = $('').appendTo(footer); 86 | monthBtn.bind('click', function () { 87 | let now = new Date(); let 88 | newDate = new Date(now.setDate(now.getDate() - 30)); 89 | let v1 = formatter(newDate); 90 | let v2 = formatter(new Date()); 91 | setValue(v1, v2); 92 | }); 93 | 94 | let weekBtn = $('').appendTo(footer); 95 | weekBtn.bind('click', function () { 96 | let now = new Date(); let 97 | newDate = new Date(now.setDate(now.getDate() - 7)); 98 | let v1 = formatter(newDate); 99 | let v2 = formatter(new Date()); 100 | setValue(v1, v2); 101 | }); 102 | 103 | let yesterdaybtn = $('').appendTo(footer); 104 | yesterdaybtn.bind('click', function () { 105 | let now = new Date(); let 106 | yesterday = new Date(now.setDate(now.getDate() - 1)); 107 | let v1 = formatter(yesterday); 108 | let v2 = formatter(yesterday); 109 | setValue(v1, v2); 110 | }); 111 | 112 | let todayBtn = $('').appendTo(footer); 113 | todayBtn.bind('click', function () { 114 | let now = new Date(); 115 | let v1 = formatter(now); 116 | let v2 = formatter(now); 117 | setValue(v1, v2); 118 | }); 119 | 120 | let clearBtn = $('').appendTo(footer); 121 | clearBtn.bind('click', function () { 122 | input.combo('clear').combo('hidePanel'); 123 | }); 124 | 125 | let okBtn = $('').appendTo(footer); 126 | okBtn.bind('click', function () { 127 | let v1 = formatter(c1.calendar('options').current); 128 | let v2 = formatter(c2.calendar('options').current); 129 | setValue(v1, v2); 130 | }); 131 | return input; 132 | }, 133 | destroy: function (target) { 134 | $(target).combo('destroy'); 135 | }, 136 | getValue: function (target) { 137 | let p = $(target).combo('panel'); 138 | let v1 = $.fn.datebox.defaults.formatter(p.find('.c1').calendar('options').current); 139 | let v2 = $.fn.datebox.defaults.formatter(p.find('.c2').calendar('options').current); 140 | return v1 + ':' + v2; 141 | }, 142 | setValue: function (target, value) { 143 | let dd = value.split(':'); 144 | let d1 = $.fn.datebox.defaults.parser(dd[0]); 145 | let d2 = $.fn.datebox.defaults.parser(dd[1]); 146 | let p = $(target).combo('panel'); 147 | p.find('.c1').calendar('moveTo', d1); 148 | p.find('.c2').calendar('moveTo', d2); 149 | $(target).combo('setValue', value).combo('setText', value); 150 | }, 151 | resize: function (target, width) { 152 | $(target).combo('resize', width); 153 | } 154 | 155 | } 156 | }); 157 | -------------------------------------------------------------------------------- /src/assets/setting/sweetalert2.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 覆盖sweetalert2默认样式 3 | */ 4 | .swal2-container { 5 | z-index: 9999 !important; 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/setting/sweetalert2.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 定义swal默认属性 3 | */ 4 | import './sweetalert2.css'; 5 | import swal from 'sweetalert2'; 6 | 7 | if (!!window.ActiveXObject || 'ActiveXObject' in window) { 8 | /* Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support */ 9 | document.write(''); 10 | } 11 | swal.setDefaults({ 12 | allowOutsideClick: true, 13 | confirmButtonText: '确定', 14 | cancelButtonText: '取消' 15 | }); 16 | 17 | window.swal = function () { 18 | let result = swal.apply(this, arguments); 19 | // swal2-height-auto 这个class会影响页面布局，所以通过js删掉 20 | $('body').removeClass('swal2-height-auto'); 21 | $('html').removeClass('swal2-height-auto'); 22 | return result; 23 | }; 24 | -------------------------------------------------------------------------------- /src/views/charts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #include("../../assets/html/head.html") 5 | 首页 6 | 7 | 8 |
9 |
10 |
11 | 用车费 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 故障情况 25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | 违章情况 38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 任务情况 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /src/views/charts/index.js: -------------------------------------------------------------------------------- 1 | import '../../assets/Common'; 2 | import echarts from '../../assets/libs/echarts/echarts.common.min'; 3 | import './index.scss'; 4 | import './index.html'; 5 | 6 | let option1 = { 7 | tooltip: { 8 | trigger: 'axis' 9 | }, 10 | legend: { 11 | orient: 'horizontal', 12 | left: 'right', 13 | data: ['维修费', '油费', '路桥费'] 14 | }, 15 | xAxis: { 16 | type: 'category', 17 | boundaryGap: false, 18 | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 19 | }, 20 | yAxis: { 21 | type: 'value' 22 | }, 23 | series: [ 24 | { 25 | type: 'line', 26 | name: '维修费', 27 | color: '#d7e4bd', 28 | data: [2010, 2320, 2010, 1540, 2010, 2010, 3100, 2010, 1540, 1900, 3030, 2410] 29 | }, 30 | { 31 | type: 'line', 32 | name: '油费', 33 | color: '#93cddd', 34 | data: [220, 500, 191, 234, 290, 500, 310, 200, 500, 290, 500, 500] 35 | }, 36 | { 37 | type: 'line', 38 | name: '路桥费', 39 | color: '#fac090', 40 | data: [120, 100, 50, 29, 90, 111, 50, 101, 90, 90, 20, 70] 41 | } 42 | ] 43 | }; 44 | echarts.init(document.getElementById('chart1')).setOption(option1); 45 | 46 | let option2 = { 47 | tooltip: { 48 | trigger: 'item', 49 | formatter: '{a}
{b} : {c} ({d}%)' 50 | }, 51 | legend: { 52 | orient: 'horizontal', 53 | left: 'right', 54 | data: ['维修费', '油费', '路桥费'] 55 | }, 56 | color: ['#d7e4bd', '#93cddd', '#fac090'], 57 | series: [ 58 | { 59 | name: '用车费', 60 | type: 'pie', 61 | radius: '55%', 62 | center: ['50%', '60%'], 63 | data: [ 64 | { 65 | value: 6548, 66 | name: '维修费' 67 | }, 68 | { 69 | value: 2000, 70 | name: '油费' 71 | }, 72 | { 73 | value: 1000, 74 | name: '路桥费' 75 | } 76 | ], 77 | itemStyle: { 78 | emphasis: { 79 | shadowBlur: 10, 80 | shadowOffsetX: 0, 81 | shadowColor: 'rgba(0, 0, 0, 0.5)' 82 | } 83 | } 84 | } 85 | ] 86 | }; 87 | echarts.init(document.getElementById('chart2')).setOption(option2); 88 | 89 | 90 | let option3 = { 91 | color: ['#93cddd', '#fac090'], 92 | tooltip: { 93 | trigger: 'axis' 94 | }, 95 | legend: { 96 | orient: 'horizontal', 97 | left: 'right', 98 | data: ['公务车', '生产车'] 99 | }, 100 | xAxis: { 101 | type: 'category', 102 | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 103 | }, 104 | yAxis: { 105 | type: 'value' 106 | }, 107 | series: [{ 108 | data: [5, 10, 6, 6, 7, 9, 12, 5, 10, 6, 9, 12], 109 | name: '公务车', 110 | type: 'line' 111 | }, { 112 | data: [10, 6, 6, 7, 9, 9, 5, 10, 6, 9, 9, 5], 113 | name: '生产车', 114 | type: 'line' 115 | }] 116 | }; 117 | echarts.init(document.getElementById('chart3')).setOption(option3); 118 | 119 | 120 | let option4 = { 121 | tooltip: { 122 | trigger: 'item', 123 | formatter: '{a}
{b} : {c} ({d}%)' 124 | }, 125 | legend: { 126 | orient: 'horizontal', 127 | left: 'right', 128 | data: ['公务车', '生产车'] 129 | }, 130 | color: ['#93cddd', '#fac090'], 131 | series: [ 132 | { 133 | name: '故障情况', 134 | type: 'pie', 135 | radius: '55%', 136 | center: ['50%', '60%'], 137 | data: [ 138 | { 139 | value: 20, 140 | name: '公务车', 141 | color: '#d7e4bd' 142 | }, 143 | { 144 | value: 60, 145 | name: '生产车', 146 | color: '#93cddd' 147 | } 148 | ], 149 | itemStyle: { 150 | emphasis: { 151 | shadowBlur: 10, 152 | shadowOffsetX: 0, 153 | shadowColor: 'rgba(0, 0, 0, 0.5)' 154 | } 155 | } 156 | } 157 | ] 158 | }; 159 | echarts.init(document.getElementById('chart4')).setOption(option4); 160 | 161 | let option5 = { 162 | color: ['#93cddd', '#fac090'], 163 | tooltip: { 164 | trigger: 'axis' 165 | }, 166 | legend: { 167 | orient: 'horizontal', 168 | left: 'right', 169 | data: ['公务车', '生产车'] 170 | }, 171 | xAxis: { 172 | type: 'category', 173 | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 174 | }, 175 | yAxis: { 176 | type: 'value' 177 | }, 178 | series: [{ 179 | data: [3, 2, 3, 3, 2, 3, 3, 2, 3, 3, 2, 1], 180 | name: '公务车', 181 | type: 'line' 182 | }, { 183 | data: [3, 4, 3, 5, 3, 3, 5, 3, 4, 3, 4, 3], 184 | name: '生产车', 185 | type: 'line' 186 | }] 187 | }; 188 | echarts.init(document.getElementById('chart5')).setOption(option5); 189 | 190 | 191 | let option6 = { 192 | tooltip: { 193 | trigger: 'item', 194 | formatter: '{a}
{b} : {c} ({d}%)' 195 | }, 196 | legend: { 197 | orient: 'horizontal', 198 | left: 'right', 199 | data: ['公务车', '生产车'] 200 | }, 201 | color: ['#93cddd', '#fac090'], 202 | series: [ 203 | { 204 | name: '故障情况', 205 | type: 'pie', 206 | radius: '55%', 207 | center: ['50%', '60%'], 208 | data: [ 209 | { 210 | value: 10, 211 | name: '公务车', 212 | color: '#d7e4bd' 213 | }, 214 | { 215 | value: 15, 216 | name: '生产车', 217 | color: '#93cddd' 218 | } 219 | ], 220 | itemStyle: { 221 | emphasis: { 222 | shadowBlur: 10, 223 | shadowOffsetX: 0, 224 | shadowColor: 'rgba(0, 0, 0, 0.5)' 225 | } 226 | } 227 | } 228 | ] 229 | }; 230 | echarts.init(document.getElementById('chart6')).setOption(option6); 231 | 232 | let option7 = { 233 | color: ['#fac090'], 234 | xAxis: { 235 | type: 'category', 236 | data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] 237 | }, 238 | yAxis: { 239 | type: 'value' 240 | }, 241 | series: [{ 242 | data: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130], 243 | type: 'bar' 244 | }] 245 | }; 246 | echarts.init(document.getElementById('chart7')).setOption(option7); 247 | 248 | 249 | let option8 = { 250 | tooltip: { 251 | trigger: 'item', 252 | formatter: '{a}
{b}: {c} ({d}%)' 253 | }, 254 | legend: { 255 | orient: 'horizontal', 256 | left: 'right', 257 | }, 258 | color: ['#8eb4e3', '#fac090'], 259 | series: [ 260 | { 261 | name: '任务情况', 262 | type: 'pie', 263 | radius: ['50%', '70%'], 264 | avoidLabelOverlap: false, 265 | label: { 266 | normal: { 267 | show: false, 268 | position: 'center' 269 | }, 270 | emphasis: { 271 | show: true, 272 | textStyle: { 273 | fontSize: '30', 274 | fontWeight: 'bold' 275 | } 276 | } 277 | }, 278 | labelLine: { 279 | normal: { 280 | show: false 281 | } 282 | }, 283 | data: [ 284 | { value: 50, name: '已完成' }, 285 | { value: 10, name: '未完成' } 286 | ] 287 | } 288 | ] 289 | }; 290 | echarts.init(document.getElementById('chart8')).setOption(option8); 291 | 292 | -------------------------------------------------------------------------------- /src/views/charts/index.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiaosan666/webpack4-bootstrap4-demo/5990956256fdb896a6dbd97075621722a65f1a38/src/views/charts/index.scss -------------------------------------------------------------------------------- /src/views/index/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #include("../../assets/html/head.html") 5 | 广东电能 6 | 7 | 8 |
9 |
10 |
11 | 14 |
15 |
16 | 首页 17 | 主营业务 18 | 关于我们 19 | 联系我们 20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 36 |
37 | 38 |
39 |
40 |
41 |
42 |

主营业务

43 |
44 |
45 |
售电
46 |
47 |
48 |
能效
管理
49 |
50 |
51 |
电能
替代
52 |
53 |
54 |
储能
55 |
56 |
57 |
调频
发电
58 |
59 |
60 |
合同
能源
61 |
62 |
63 |
64 |

关于我们

65 |

66 | 广东电能销售有限公司是一家为互联网互联互通提供技术和服务的高科技企业，通过聚合厂商优势资源和自主研发，为用户设计和交付“交钥匙（Turn-key）系统集成方案”，满足用户在等级保护、安全合规、智能化数据中心、弱电集成、定制化应用开发等方面的咨询和建设需求。 67 |

68 |
69 |
70 |

联系我们

71 |
72 |
73 |
74 |
75 |
联系方式 Contact information
76 |

77 | 020-38917333-1616　　 78 |

79 |

80 | energy.supply@qq.com 81 |

82 |
83 |
84 |
85 |
86 |
公司地址 Company address
87 |

88 | 广州市天河区珠江新城金穗路62号侨鑫国际附楼1616 89 |
90 | 1616, Overseas Chinese Building, No. 62 Jinsui 91 | Road, 92 | Zhujiang New Town, Tianhe District, Guangzhou 93 |

94 |
95 |
96 |
97 |
98 |
99 | 100 | 101 |
102 |
103 |
104 | 105 | #include("../../assets/html/footer.html") 106 | 107 | 108 | -------------------------------------------------------------------------------- /src/views/index/index.js: -------------------------------------------------------------------------------- 1 | import '../../assets/Common'; 2 | import './index.scss'; 3 | import './index.html'; 4 | 5 | // 返回顶部按钮 6 | Helper.backTop(); 7 | 8 | // 监听滚动事件，更改navbar背景色透明度 9 | $(window).scroll(function () { 10 | let s = $(window).scrollTop(); 11 | $('.navbar-warp').css('background-color', `rgba(255, 255, 255, ${s / 120})`); 12 | }); 13 | -------------------------------------------------------------------------------- /src/views/index/index.scss: -------------------------------------------------------------------------------- 1 | .navbar-warp { 2 | position: fixed; 3 | width: 100%; 4 | z-index: 1; 5 | } 6 | 7 | .navbar-logo { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | img { 12 | height: 60px; 13 | } 14 | } 15 | 16 | .navbar-menu { 17 | text-align: right; 18 | display: flex; 19 | align-items: center; 20 | justify-content: space-evenly; 21 | > a { 22 | line-height: 60px; 23 | font-size: 16px; 24 | color: #ed4700; 25 | text-decoration: none; 26 | white-space: nowrap; 27 | &:hover { 28 | //border-bottom: 2px solid #ed4700; 29 | box-shadow: inset 0 -2px 0 #ed4700; 30 | } 31 | } 32 | } 33 | 34 | .content-title { 35 | padding-top: 60px; 36 | margin-bottom: 40px; 37 | } 38 | 39 | .page-banner { 40 | background: url("../../assets/img/banner-bg.jpg") no-repeat top left; 41 | background-size: 100% 550px; 42 | width: 100%; 43 | height: 550px; 44 | .row { 45 | margin: 0; 46 | } 47 | } 48 | 49 | .banner-content { 50 | display: flex; 51 | flex-direction: column; 52 | justify-content: center; 53 | align-items: center; 54 | h1 { 55 | font-size: 24px; 56 | padding-top: 150px; 57 | } 58 | h3 { 59 | font-size: 20px; 60 | } 61 | } 62 | 63 | @media only screen and (min-width: 768px) { 64 | .banner-content { 65 | h1 { 66 | font-size: 40px; 67 | padding-top: 0; 68 | } 69 | h3 { 70 | font-size: 30px; 71 | } 72 | } 73 | } 74 | 75 | .banner-inner-img { 76 | animation: bannerInnerImgMove 5s infinite linear; 77 | } 78 | 79 | @keyframes bannerInnerImgMove { 80 | 0% { 81 | transform: translateY(0); 82 | } 83 | 25% { 84 | transform: translateY(20px); 85 | } 86 | 50% { 87 | transform: translateY(40px); 88 | } 89 | 75% { 90 | transform: translateY(20px); 91 | } 92 | 100% { 93 | transform: translateY(0); 94 | } 95 | } 96 | 97 | .business-type { 98 | font-family: "Microsoft Yahei", serif; 99 | letter-spacing: 5px; 100 | font-size: 30px; 101 | color: #fff3f3; 102 | background: #a14874; 103 | width: 120px; 104 | height: 120px; 105 | border-radius: 50%; 106 | margin: 10px auto; 107 | display: flex; 108 | justify-content: center; 109 | align-items: center; 110 | box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); 111 | cursor: pointer; 112 | } 113 | 114 | @media only screen and (min-width: 768px) { 115 | .business-type { 116 | width: 200px; 117 | height: 200px; 118 | font-size: 40px; 119 | } 120 | } 121 | 122 | .bg1 { 123 | background: #a14874; 124 | } 125 | 126 | .bg2 { 127 | background: #ca4632; 128 | } 129 | 130 | .bg3 { 131 | background: #187881; 132 | } 133 | 134 | .bg4 { 135 | background: #ffb603; 136 | } 137 | 138 | .bg5 { 139 | background: #df89ac; 140 | } 141 | 142 | .bg6 { 143 | background: #00a048; 144 | } 145 | -------------------------------------------------------------------------------- /src/views/test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #include("../../assets/html/head.html") 5 | 测试 6 | 7 | 8 | 9 | 10 |
No shadow
11 |
Small shadow
12 |
Regular shadow
13 |
Larger shadow
14 | 1111 15 | 16 |
17 |
111
18 |
222
19 |
20 | 21 |
333,sdfa,sdf今天。打分a.ad，的发射点发。阿斯蒂芬，。阿斯蒂芬。
22 |
✓
23 |
✗
24 |
✕
25 |
×
26 |
☺ ☻
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/views/test/index.js: -------------------------------------------------------------------------------- 1 | import '../../assets/Common'; 2 | import './index.scss'; 3 | import './index.html'; 4 | 5 | $('#test').bind('click', () => { 6 | // 打开loading 7 | Helper.showLoading(); 8 | Http({ 9 | url: '/v1/demo/map_result_post', 10 | isShowLoading: false, 11 | success: function (data) { 12 | // 延迟1秒 13 | setTimeout(() => { 14 | Http({ 15 | url: '/v1/demo/map_result_post2', 16 | isShowLoading: false, 17 | success: function (data) { 18 | // 在最终的回调函数处关闭loading 19 | Helper.hideLoading(); 20 | }, 21 | error: function () { 22 | // 异常情况关闭loading 23 | Helper.hideLoading(); 24 | } 25 | }).post(); 26 | }, 1000); 27 | }, 28 | error: function () { 29 | // 异常情况关闭loading 30 | Helper.hideLoading(); 31 | } 32 | }).post(); 33 | }); 34 | -------------------------------------------------------------------------------- /src/views/test/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 1rem; 3 | } 4 | 5 | .test:after { 6 | clear: both; 7 | display: block; 8 | height: 0; 9 | content: ''; 10 | } 11 | 12 | .test > div { 13 | float: left; 14 | } 15 | 16 | .t2 { 17 | width: 100px; 18 | height: 50px; 19 | overflow: hidden; 20 | white-space: nowrap; 21 | text-overflow: ellipsis; 22 | } 23 | 24 | .t3{ 25 | font-size: 100px; 26 | } 27 | -------------------------------------------------------------------------------- /src/views/views.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "url": "index" 4 | }, 5 | { 6 | "url": "charts", 7 | "echarts": true 8 | }, 9 | { 10 | "url": "test" 11 | } 12 | ] 13 | 14 | 15 | -------------------------------------------------------------------------------- /webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const dirJSON = require('./src/views/views.json'); 2 | const path = require('path'); 3 | const HtmlPlugin = require('html-webpack-plugin'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | const isProd = (process.env.NODE_ENV === 'prod'); 6 | 7 | let entry = {}; 8 | let plugins = []; 9 | dirJSON.forEach(page => { 10 | entry[page.url] = path.resolve(__dirname, `./src/views/${page.url}/index.js`); 11 | let chunks = [page.url]; 12 | if (isProd) { 13 | chunks.splice(0, 0, 'assets'); 14 | page.easyui && chunks.splice(0, 0, 'easyui'); 15 | page.echarts && chunks.splice(0, 0, 'echarts'); 16 | chunks.splice(0, 0, 'vendors'); 17 | } 18 | plugins.push( 19 | new HtmlPlugin({ 20 | favicon: path.resolve(__dirname, `./src/assets/img/favicon.ico`), 21 | filename: path.resolve(__dirname, `./dist/${page.url}.html`), 22 | template: path.resolve(__dirname, `./src/views/${page.url}/index.html`), 23 | chunks: chunks, 24 | chunksSortMode: 'manual', 25 | minify: isProd ? { 26 | collapseWhitespace: true, 27 | removeComments: true 28 | } : false 29 | }) 30 | ); 31 | }); 32 | 33 | if (isProd) { 34 | plugins.push( 35 | new MiniCssExtractPlugin({ 36 | filename: 'css/' + (isProd ? '[name].[contenthash:8].min.css' : '[name].css'), 37 | chunkFilename: 'css/' + (isProd ? '[name].chunk.[contenthash:8].min.css' : '[name].chunk.css'), 38 | }) 39 | ); 40 | } 41 | 42 | module.exports = { 43 | entry: entry, 44 | output: { 45 | publicPath: isProd ? './' : '', 46 | path: path.resolve(__dirname, './dist'), 47 | filename: 'js/' + (isProd ? '[name].[chunkhash:8].min.js' : '[name].js'), 48 | chunkFilename: 'js/' + (isProd ? '[name].chunk.[chunkhash:8].min.js' : '[name].chunk.js'), 49 | }, 50 | module: { 51 | rules: [ 52 | { 53 | test: require.resolve('jquery'), 54 | use: [{ 55 | loader: 'expose-loader', 56 | options: 'jQuery' 57 | }, { 58 | loader: 'expose-loader', 59 | options: '$' 60 | }] 61 | }, 62 | { 63 | test: /\.(html|htm)$/, 64 | use: ['html-withimg-loader'] 65 | }, 66 | { 67 | test: /\.(png|jpg|jpe?g|gif)$/, 68 | use: ['url-loader?limit=4096&name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/', 'image-webpack-loader'] 69 | }, 70 | { 71 | test: /\.(webp)$/, 72 | use: ['file-loader?&name=[name]' + (isProd ? '.[hash:8]' : '') + '.[ext]&outputPath=img/'] 73 | }, 74 | { 75 | test: /\.(svg|woff|woff2|ttf|eot)(\?.*$|$)/, 76 | loader: 'file-loader?name=font/[name].[hash:8].[ext]' 77 | }, 78 | { 79 | test: /\.(css)$/, 80 | use: [isProd ? ({ 81 | loader: MiniCssExtractPlugin.loader, 82 | options: { 83 | publicPath: '../' 84 | } 85 | }) : 'style-loader', 'css-loader'] 86 | }, 87 | { 88 | test: /\.(scss)$/, 89 | use: [isProd ? ({ 90 | loader: MiniCssExtractPlugin.loader, 91 | options: { 92 | publicPath: '../' 93 | } 94 | }) : 'style-loader', 'css-loader', { 95 | loader: 'postcss-loader', 96 | options: { 97 | plugins: function () { 98 | return [ 99 | require('autoprefixer') 100 | ]; 101 | } 102 | } 103 | }, 'sass-loader'] 104 | }, 105 | { 106 | enforce: 'pre', 107 | test: /\.js$/, 108 | include: [path.resolve(__dirname, 'src/views'), path.resolve(__dirname, 'assets/js')], // 指定eslint检查的目录 109 | loader: 'eslint-loader' 110 | }, 111 | { 112 | test: /\.js$/, 113 | exclude: /node_modules/, 114 | use: { 115 | loader: 'babel-loader', 116 | options: { 117 | presets: ['es2015-nostrict'], 118 | plugins: ['transform-runtime'] 119 | } 120 | } 121 | } 122 | ] 123 | }, 124 | plugins: [ 125 | ...plugins 126 | ] 127 | }; 128 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const baseWebpackConfig = require('./webpack.base.conf'); 2 | const webpack = require('webpack'); 3 | const path = require('path'); 4 | const merge = require('webpack-merge'); 5 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | const CleanWebpackPlugin = require('clean-webpack-plugin'); 7 | const HashOutput = require('webpack-plugin-hash-output'); 8 | 9 | if (process.env.NODE_ENV === 'prod') { 10 | module.exports = merge(baseWebpackConfig, { 11 | mode: 'production', 12 | optimization: { 13 | minimize: true, 14 | splitChunks: { 15 | minSize: 0, 16 | minChunks: 1, 17 | maxAsyncRequests: 50, 18 | maxInitialRequests: 30, 19 | name: true, 20 | cacheGroups: { 21 | vendors: { 22 | test: /[\\/]node_modules[\\/]/, 23 | priority: -1, 24 | chunks: 'all', 25 | name: 'vendors' 26 | }, 27 | easyui: { 28 | test: path.resolve(__dirname, './src/assets/libs/jquery-easyui'), 29 | priority: -5, 30 | chunks: 'initial', 31 | name: 'easyui' 32 | }, 33 | echarts: { 34 | test: path.resolve(__dirname, './src/assets/libs/echarts'), 35 | priority: -6, 36 | chunks: 'initial', 37 | name: 'echarts' 38 | }, 39 | assets: { 40 | test: path.resolve(__dirname, './src/assets'), 41 | priority: -10, 42 | chunks: 'all', 43 | name: 'assets' 44 | } 45 | } 46 | } 47 | }, 48 | plugins: [ 49 | new CleanWebpackPlugin(['dist']), 50 | new OptimizeCssAssetsPlugin(), 51 | new HashOutput(), 52 | new webpack.BannerPlugin('CopyRight © 2015-2028 All Right Reserved GuangzhouYan Technology Co.,Ltd') 53 | ] 54 | }); 55 | } else if (process.env.NODE_ENV === 'dev') { 56 | module.exports = merge(baseWebpackConfig, { 57 | mode: 'development', 58 | plugins: [ 59 | new webpack.HotModuleReplacementPlugin(), 60 | new webpack.NoEmitOnErrorsPlugin(), 61 | new webpack.NamedModulesPlugin() 62 | ], 63 | devtool: 'eval-source-map', 64 | devServer: { 65 | inline: true, 66 | open: true, // 自动打开浏览器 67 | contentBase: path.join(__dirname, 'dist'), 68 | publicPath: '', 69 | compress: true, 70 | hot: true, 71 | host: 'localhost', // 0.0.0.0 localhost 72 | port: 9000, 73 | overlay: { 74 | warnings: false, 75 | errors: true 76 | } 77 | } 78 | }); 79 | } 80 | --------------------------------------------------------------------------------