├── .gitattributes ├── .gitignore ├── .idea ├── dictionaries │ └── daiyingfeng.xml ├── encodings.xml ├── inspectionProfiles │ └── Project_Default.xml ├── misc.xml ├── modules.xml └── vcs.xml ├── 01.react ├── .babelrc ├── index.html ├── main.js ├── package.json ├── run.js └── webpack.config.js ├── 02.react4pe ├── index.html ├── index4cs.html ├── index4csm.html ├── index4ec.html ├── jsconfig.json ├── package.json ├── project │ ├── demo1 │ │ ├── components │ │ │ ├── Home.js │ │ │ ├── Salary.js │ │ │ ├── SalaryMobile.js │ │ │ ├── SalaryMsg.js │ │ │ └── SalarySet.js │ │ ├── index.css │ │ └── index.js │ └── demo2 │ │ ├── Home.js │ │ ├── Home4ec8.js │ │ ├── README.md │ │ ├── actions │ │ ├── Apps.js │ │ ├── Auth.js │ │ ├── Init.js │ │ ├── Role.js │ │ ├── Sys.js │ │ ├── Util.js │ │ └── index.js │ │ ├── api │ │ ├── Apps.js │ │ ├── Auth.js │ │ ├── Init.js │ │ ├── Role.js │ │ ├── Sys.js │ │ └── index.js │ │ ├── components │ │ ├── Apps │ │ │ ├── App.js │ │ │ ├── AppImage.js │ │ │ ├── AppWeaverMenu.js │ │ │ ├── NewApps.js │ │ │ └── NewAppsDetail.js │ │ ├── Auth.js │ │ ├── Init.js │ │ ├── Role.js │ │ ├── RoleList.js │ │ └── Sys.js │ │ ├── constants │ │ └── ActionTypes.js │ │ ├── index.js │ │ ├── index4ec8.js │ │ ├── plugin.js │ │ ├── reducers │ │ ├── Apps.js │ │ ├── Auth.js │ │ ├── Init.js │ │ ├── Role.js │ │ ├── Sys.js │ │ ├── Util.js │ │ └── index.js │ │ ├── store │ │ └── configureStore.js │ │ └── style │ │ ├── index.css │ │ └── inout.css ├── weaconfig │ ├── weaconfig.js │ └── weapath4e9.js └── webpack.config.js ├── README.md └── Reactjs-Run.iml /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | 45 | /01.react/node_modules 46 | /02.react-mobile/node_modules 47 | /03.react-pc/node_modules 48 | .idea/workspace.xml 49 | 02.react4pe/node_modules/ 50 | -------------------------------------------------------------------------------- /.idea/dictionaries/daiyingfeng.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Android 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 57 | 58 | 59 | 60 | 61 | 62 | 1.8 63 | 64 | 69 | 70 | 71 | 72 | 73 | 74 | 1.8 75 | 76 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /01.react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["transform-react-jsx"], 3 | "presets": ["es2015"] 4 | } -------------------------------------------------------------------------------- /01.react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Hello React! 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01.react/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | class Main extends React.Component { 5 | render() { 6 | return

Hello, world!!

7 | } 8 | } 9 | 10 | ReactDOM.render( 11 |
, 12 | document.getElementById('container') 13 | ); -------------------------------------------------------------------------------- /01.react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactjses6webpack", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "main.js", 6 | "dependencies": { 7 | "babel-core": "^6.3.21", 8 | "babel-loader": "^6.2.0", 9 | "babel-plugin-transform-react-jsx": "^6.3.13", 10 | "babel-preset-react": "^6.3.13", 11 | "babel-preset-es2015": "^6.3.13", 12 | "react": "^0.14.3", 13 | "react-dom": "^0.14.3", 14 | "webpack": "^1.12.9" 15 | }, 16 | "devDependencies": {}, 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "author": "dyf2015", 21 | "license": "ISC" 22 | } 23 | -------------------------------------------------------------------------------- /01.react/webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: { 5 | './run':'./main.js' // 编译后文件:编译前源码 6 | }, 7 | output: { 8 | filename: '[name].js', // 输出文件名 9 | }, 10 | module: { 11 | loaders: [ //js、css、less解析,这里要注意babel必须配置.babelrc文件,其中"presets": ["es2015"]用于支持es6语法,"plugins": ["transform-react-jsx"]用于解析jsx 12 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 13 | { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, 14 | { test: /\.css$/, loader: 'style-loader!css-loader' } 15 | ] 16 | } 17 | } -------------------------------------------------------------------------------- /02.react4pe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 选择环境 6 | 7 | 8 |
9 | 云商店云端PC 10 |
11 |
12 | 云商店云端MOBILE 13 |
14 |
15 | 云商店客户端 16 |
17 | 18 | -------------------------------------------------------------------------------- /02.react4pe/index4cs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 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 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /02.react4pe/index4csm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MobileDemo 7 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 | 44 | 47 | 48 | 51 | 52 | 53 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /02.react4pe/index4ec.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 本地调试 6 | 7 | 8 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | > 25 | 26 | 27 | -------------------------------------------------------------------------------- /02.react4pe/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6" 4 | }, 5 | "exclude": [ 6 | "node_modules" 7 | ] 8 | } -------------------------------------------------------------------------------- /02.react4pe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "entry": { 3 | "index": "./index.jsx" 4 | }, 5 | "dependencies": { 6 | "antd": "^1.11.2", 7 | "antd-mobile": "^0.9.11", 8 | "atool-build": "0.7.x", 9 | "axios": "^0.8.1", 10 | "babel": "^6.5.2", 11 | "babel-cli": "^6.10.1", 12 | "babel-core": "^6.9.1", 13 | "babel-es6-polyfill": "^1.0.1", 14 | "babel-loader": "^6.2.2", 15 | "babel-plugin-antd": "0.4.x", 16 | "babel-plugin-transform-class-properties": "^6.18.0", 17 | "babel-plugin-transform-object-rest-spread": "^6.16.0", 18 | "babel-plugin-transform-react-jsx": "^6.3.13", 19 | "babel-plugin-transform-runtime": "^6.15.0", 20 | "babel-polyfill": "^6.13.0", 21 | "babel-preset-es2015": "^6.3.13", 22 | "babel-preset-es2016": "^6.16.0", 23 | "babel-preset-react": "^6.3.13", 24 | "babel-runtime": "^6.11.6", 25 | "classnames": "^2.2.5", 26 | "console-polyfill": "^0.2.3", 27 | "css-loader": "^0.23.0", 28 | "css-split-webpack-plugin": "^0.2.3", 29 | "es3ify-loader": "^0.2.0", 30 | "es3ify-webpack-plugin": "0.0.1", 31 | "es5-shim": "^4.5.9", 32 | "eslint": "^2.13.1", 33 | "export-from-ie8": "^1.0.5", 34 | "extract-text-webpack-plugin": "^0.8.2", 35 | "fastclick": "^1.0.6", 36 | "fetch-ie8": "^1.4.3", 37 | "fetch-polyfill": "^0.8.2", 38 | "file-loader": "^0.8.5", 39 | "flux": "^2.1.1", 40 | "highlight.js": "^9.10.0", 41 | "history": "^1.16.0", 42 | "js-base64": "^2.1.9", 43 | "keymirror": "^0.1.1", 44 | "less": "^2.5.3", 45 | "less-loader": "^2.2.2", 46 | "lodash": "^4.13.1", 47 | "markdown-it": "^8.3.1", 48 | "markdown-it-toc-and-anchor": "^4.1.2", 49 | "markdown-toc": "^1.1.0", 50 | "marked": "^0.3.6", 51 | "mobx": "^3.1.16", 52 | "mobx-react": "^4.2.1", 53 | "mobx-react-router": "^4.0.1", 54 | "node-libs-browser": "^0.5.3", 55 | "normalize.css": "^4.2.0", 56 | "object-assign": "^4.1.0", 57 | "plupload": "^2.3.2", 58 | "postcss": "^5.2.4", 59 | "postcss-loader": "^0.13.0", 60 | "postcss-pxtorem": "^3.3.1", 61 | "project": "^0.1.6", 62 | "promise": "^7.1.1", 63 | "raw-loader": "^0.5.1", 64 | "rc-form": "^1.0.1", 65 | "rc-queue-anim": "^0.12.5", 66 | "rc-table": "^5.0.3", 67 | "react": "^0.14.9", 68 | "react-addons-css-transition-group": "^15.3.1", 69 | "react-baron": "^0.8.0", 70 | "react-copy-to-clipboard": "^4.2.3", 71 | "react-custom-scrollbars": "^4.0.0", 72 | "react-dom": "^15.3.2", 73 | "react-hot-loader": "^1.3.0", 74 | "react-id-swiper": "^1.3.1", 75 | "react-lazy-load": "^3.0.10", 76 | "react-lazyload": "^2.1.4", 77 | "react-redux": "^4.4.5", 78 | "react-router": "^2.8.1", 79 | "react-router-redux": "^4.0.6", 80 | "react-scrollbar": "^0.4.2", 81 | "redux": "^3.6.0", 82 | "redux-logger": "^2.6.1", 83 | "redux-thunk": "^2.1.0", 84 | "remark": "^7.0.0", 85 | "remark-toc": "^4.0.0", 86 | "remarkable": "^1.7.1", 87 | "style-loader": "^0.12.4", 88 | "todomvc-app-css": "^2.0.5", 89 | "webpack": "^1.12.12", 90 | "webpack-dev-server": "^1.14.1", 91 | "whatwg-fetch": "^0.11.1", 92 | "whatwg-fetch-ie8": "^1.0.0" 93 | }, 94 | "devDependencies": { 95 | "babel-eslint": "^6.0.0", 96 | "babel-plugin-react-transform": "^2.0.2", 97 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 98 | "babel-plugin-transform-remove-strict-mode": "0.0.2", 99 | "dora": "0.3.x", 100 | "dora-plugin-hmr": "0.5.x", 101 | "dora-plugin-livereload": "0.3.x", 102 | "dora-plugin-proxy": "0.6.x", 103 | "dora-plugin-webpack": "0.6.x", 104 | "es3ify-loader": "^0.2.0", 105 | "eslint": "2.x", 106 | "eslint-config-airbnb": "6.x", 107 | "eslint-loader": "^1.7.1", 108 | "eslint-plugin-babel": "^4.1.1", 109 | "eslint-plugin-markdown-antd": "^0.1.0", 110 | "eslint-plugin-react": "4.x", 111 | "extract-text-webpack-plugin": "^1.0.1", 112 | "pre-commit": "1.x", 113 | "react-addons-perf": "^15.4.2", 114 | "react-transform-catch-errors": "^1.0.2", 115 | "redbox-react": "^1.4.2", 116 | "redux-devtools": "^3.3.2", 117 | "redux-devtools-dock-monitor": "^1.1.1", 118 | "redux-devtools-log-monitor": "^1.2.0", 119 | "rollup": "^0.43.0", 120 | "rollup-watch": "^4.0.0", 121 | "webpack": "^1.13.2" 122 | }, 123 | "pre-commit": [ 124 | "lint" 125 | ], 126 | "scripts": { 127 | "test": "echo \"Error: no test specified\" && exit 1", 128 | "build": "rollup -c", 129 | "dev": "rollup -c -w" 130 | }, 131 | "name": "md4pc", 132 | "description": "---", 133 | "version": "1.0.6", 134 | "main": "webpack.config.js", 135 | "author": "dyf", 136 | "license": "ISC" 137 | } 138 | -------------------------------------------------------------------------------- /02.react4pe/project/demo1/components/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react' 2 | import Link from 'react-router/lib/Link' 3 | import {Row,Col,Card} from 'antd' 4 | 5 | class Home extends Component { 6 | render() { 7 | return ( 8 |
9 | 10 | 11 | 12 | 工资查询、移动工资查询 13 | 14 | 15 | 16 | 17 | 工资设置、工资短信 18 | 19 | 20 | 21 |
22 | ) 23 | } 24 | } 25 | 26 | export default Home 27 | -------------------------------------------------------------------------------- /02.react4pe/project/demo1/components/Salary.js: -------------------------------------------------------------------------------- 1 | import { DatePicker,Button,Icon,Input,Form,Row,Col,Tabs,Alert,message } from 'antd'; 2 | const TabPane = Tabs.TabPane; 3 | const FormItem = Form.Item; 4 | const MonthPicker = DatePicker.MonthPicker; 5 | //import Top from '../ComponentsV1/Top'; 6 | import {WeaTop} from 'weaCom'; 7 | 8 | function format(d,fmt) { //author: meizz 9 | let o = { 10 | "M+": d.getMonth() + 1, //月份 11 | "d+": d.getDate(), //日 12 | "h+": d.getHours(), //小时 13 | "m+": d.getMinutes(), //分 14 | "s+": d.getSeconds(), //秒 15 | "q+": Math.floor((d.getMonth() + 3) / 3), //季度 16 | "S": d.getMilliseconds() //毫秒 17 | }; 18 | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length)); 19 | for (let k in o) 20 | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 21 | return fmt; 22 | } 23 | 24 | const Main = React.createClass({ 25 | getInitialState() { 26 | return { 27 | datas:[], 28 | loading:false, 29 | date:"", 30 | }; 31 | }, 32 | getDatas(value) { 33 | const date = format(value,"yyyy-MM"); 34 | let that = this; 35 | this.setState({ 36 | date:date, 37 | loading:true, 38 | }) 39 | $.ajax({ 40 | type:"POST", 41 | url:"/cloudstore/app/no0000005/ControlServlet.jsp?action=Action_DoSalaryDatasGet&date="+date, 42 | success(datas) { 43 | //console.log(datas); 44 | message.success("数据获取成功!"); 45 | that.setState({ 46 | datas:datas, 47 | loading:false, 48 | }); 49 | }, 50 | error(datas) { 51 | message.success("数据获取失败!"); 52 | that.setState({ 53 | loading:false, 54 | }); 55 | }, 56 | dataType: "json" 57 | }); 58 | }, 59 | render() { 60 | let that = this; 61 | return
62 | 63 | 64 | 65 | { 66 | (this.state.datas).length>0&&this.state.date!=""? 67 |
68 |

工资[{this.state.date}]

69 | 70 | { 71 | this.state.datas.map(function(data) { 72 | return
{that.getDetail(data.names,data.values)}
73 | }) 74 | } 75 |
76 |
77 | : 82 | } 83 |
84 | 85 | }, 86 | getDetail(names,values) { 87 | const nameArrTmp = names.split(","); 88 | const valueArrTmp = values.split(","); 89 | let nameArr = new Array(); 90 | let valueArr = new Array(); 91 | for(let i=0;i 108 | 109 | 110 | ) 111 | if(i%4==0) comArr1[comArr1.length] = item; 112 | if(i%4==1) comArr2[comArr2.length] = item; 113 | if(i%4==2) comArr3[comArr3.length] = item; 114 | if(i%4==3) comArr4[comArr4.length] = item; 115 | } 116 | //{comArr} 117 | return ( 118 |
119 | 120 | 121 | {comArr1} 122 | 123 | 124 | {comArr2} 125 | 126 | 127 | {comArr3} 128 | 129 | 130 | {comArr4} 131 | 132 | 133 |
134 | ) 135 | } 136 | }); 137 | 138 | export default Main -------------------------------------------------------------------------------- /02.react4pe/project/demo1/components/SalaryMobile.js: -------------------------------------------------------------------------------- 1 | import { DatePicker,Button,Icon,Input,Form,Row,Col,Tabs,Alert,message } from 'antd'; 2 | const TabPane = Tabs.TabPane; 3 | const FormItem = Form.Item; 4 | const MonthPicker = DatePicker.MonthPicker; 5 | //import Top from '../ComponentsV1/Top'; 6 | import {WeaTop} from 'weaCom'; 7 | 8 | function format(d,fmt) { //author: meizz 9 | let o = { 10 | "M+": d.getMonth() + 1, //月份 11 | "d+": d.getDate(), //日 12 | "h+": d.getHours(), //小时 13 | "m+": d.getMinutes(), //分 14 | "s+": d.getSeconds(), //秒 15 | "q+": Math.floor((d.getMonth() + 3) / 3), //季度 16 | "S": d.getMilliseconds() //毫秒 17 | }; 18 | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length)); 19 | for (let k in o) 20 | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 21 | return fmt; 22 | } 23 | 24 | const Main = React.createClass({ 25 | getInitialState() { 26 | return { 27 | datas:[], 28 | loading:false, 29 | date:"", 30 | }; 31 | }, 32 | componentDidMount() { 33 | const {ym} = this.props.location.query; 34 | ym && ym!="" && this.doGetData(ym); 35 | }, 36 | getDatas(value) { 37 | const date = format(value,"yyyy-MM"); 38 | this.doGetData(date); 39 | }, 40 | doGetData(date) { 41 | let that = this; 42 | this.setState({ 43 | date:date, 44 | loading:true, 45 | }) 46 | $.ajax({ 47 | type:"POST", 48 | url:"/cloudstore/app/no0000005/ControlServlet.jsp?action=Action_DoSalaryDatasGet&date="+date, 49 | success(datas) { 50 | //console.log(datas); 51 | message.success("数据获取成功!"); 52 | that.setState({ 53 | datas:datas, 54 | loading:false, 55 | }); 56 | }, 57 | error(datas) { 58 | message.success("数据获取失败!"); 59 | that.setState({ 60 | loading:false, 61 | }); 62 | }, 63 | dataType: "json" 64 | }); 65 | }, 66 | render() { 67 | //console.log("this.props:",this.props); 68 | //console.log("this.props.datas:",this.props.datas); 69 | const {ym} = this.props.location.query; 70 | let that = this; 71 | return
72 | 73 | 74 | 75 | { 76 | (this.state.datas).length>0&&this.state.date!=""? 77 |
78 |

工资[{this.state.date}]

79 | 80 | { 81 | this.state.datas.map(function(data) { 82 | return
{that.getMobileDetail(data.names,data.values)}
83 | }) 84 | } 85 |
86 |
87 | : 92 | } 93 |
94 | 95 | }, 96 | getMobileDetail(names,values) { 97 | const nameArr = names.split(","); 98 | const valueArr = values.split(","); 99 | return ( 100 | 101 | { 102 | nameArr.map((name,index)=>{ 103 | if(valueArr[index] && parseFloat(valueArr[index])==0) { 104 | return () 105 | } 106 | return ( 107 | 108 | 109 | 110 | 111 | ) 112 | }) 113 | } 114 |
{name}{valueArr[index]}
115 | ) 116 | }, 117 | getDetail(names,values) { 118 | const nameArr = names.split(","); 119 | const valueArr = values.split(","); 120 | //console.log(nameArr); 121 | let comArr1 = new Array(); 122 | let comArr2 = new Array(); 123 | let comArr3 = new Array(); 124 | let comArr4 = new Array(); 125 | for(let i=0;i 131 | 132 | 133 | ) 134 | if(i%4==0) comArr1[comArr1.length] = item; 135 | if(i%4==1) comArr2[comArr2.length] = item; 136 | if(i%4==2) comArr3[comArr3.length] = item; 137 | if(i%4==3) comArr4[comArr4.length] = item; 138 | } 139 | //{comArr} 140 | return ( 141 |
142 | 143 | 144 | {comArr1} 145 | 146 | 147 | {comArr2} 148 | 149 | 150 | {comArr3} 151 | 152 | 153 | {comArr4} 154 | 155 | 156 |
157 | ) 158 | } 159 | }); 160 | 161 | export default Main -------------------------------------------------------------------------------- /02.react4pe/project/demo1/components/SalaryMsg.js: -------------------------------------------------------------------------------- 1 | import {Form,Row,Col,DatePicker,Input,Select,Button,Alert,Table} from 'antd'; 2 | const FormItem = Form.Item; 3 | const MonthPicker = DatePicker.MonthPicker; 4 | const Option = Select.Option; 5 | //import Top from '../ComponentsV1/Top'; 6 | //import WeaInput4Hrm from '../ComponentsV1/Form/WeaInput4Hrm'; 7 | 8 | import {WeaTop,WeaInput4Hrm} from 'weaCom'; 9 | 10 | const createForm = Form.create; 11 | 12 | function format(d,fmt) { //author: meizz 13 | let o = { 14 | "M+": d.getMonth() + 1, //月份 15 | "d+": d.getDate(), //日 16 | "h+": d.getHours(), //小时 17 | "m+": d.getMinutes(), //分 18 | "s+": d.getSeconds(), //秒 19 | "q+": Math.floor((d.getMonth() + 3) / 3), //季度 20 | "S": d.getMilliseconds() //毫秒 21 | }; 22 | if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length)); 23 | for (let k in o) 24 | if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); 25 | return fmt; 26 | } 27 | 28 | let that = null; 29 | 30 | let Main = React.createClass({ 31 | getInitialState() { 32 | that = this; 33 | return { 34 | canGetMsgList:true, 35 | salaryTypeList:[], 36 | salaryMsgList:[], 37 | loadingMsgList:false, 38 | loadingMsgSend:false, 39 | } 40 | }, 41 | render() { 42 | const { getFieldProps, getFieldError, isFieldValidating } = this.props.form; 43 | const columns = [{ 44 | title: '姓名', 45 | dataIndex: 'userName', 46 | key: 'userName', 47 | }, { 48 | title: '部门', 49 | dataIndex: 'depName', 50 | key: 'depName', 51 | }, { 52 | title: '公司', 53 | dataIndex: 'comName', 54 | key: 'comName', 55 | }, { 56 | title: '导入者', 57 | dataIndex: 'hrName', 58 | key: 'hrName', 59 | render(text, row, index) { 60 | if(""==text) { 61 | return
62 | } 63 | else { 64 | return
{text}
65 | } 66 | } 67 | }, { 68 | title: '短信内容', 69 | dataIndex: 'msgContext', 70 | key: 'msgContext' 71 | }, { 72 | title: '工资条', 73 | dataIndex: 'isSend', 74 | key: 'isSend', 75 | render(text, row, index) { 76 | if("-1"==text) { 77 | return
已发送
78 | } 79 | else { 80 | return
未发送
81 | } 82 | } 83 | }, { 84 | title: '短信', 85 | dataIndex: 'isMsgSend', 86 | key: 'isMsgSend', 87 | render(text, row, index) { 88 | //console.log("isMsgSend:"+text); 89 | if("-1"==text) { 90 | return
已发送
91 | } 92 | else if("-2"==text) { 93 | return
失败:无手机号
94 | } 95 | else if("-3"==text) { 96 | return
失败:发送异常
97 | } 98 | else { 99 | return
未发送
100 | } 101 | }, 102 | filters: [{ 103 | text: '已发送', 104 | value: '-1' 105 | }, { 106 | text: '失败:无手机号', 107 | value: '-2' 108 | }, { 109 | text: '失败:发送异常', 110 | value: '-3' 111 | },{ 112 | text: '未发送', 113 | value: '1' 114 | }], 115 | filterMultiple: false, 116 | onFilter(value, record) { 117 | return record.isMsgSend===value; 118 | //return record.address.indexOf(value) === 0; 119 | }, 120 | }]; 121 | const pagination = { 122 | total: this.state.salaryMsgList.length, 123 | showSizeChanger: true 124 | }; 125 | return ( 126 |
127 | 128 |
129 | 130 | 131 | 132 | 133 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 149 | 158 | 159 | 160 | 161 | 162 | 163 | 168 | 175 | 176 | 177 | 178 | 179 | 180 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 196 | 201 | 202 | 203 | 204 | 205 | 206 | 210 | 211 |     212 | 213 | 214 | 215 | 216 | 217 | 218 | 222 | 225 |

(1)[name]等于姓名;

226 |

(2)[date]等于年-月;

227 |

(3)[应发合计]会直接取相应工资列

228 |
} 229 | type="info" /> 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | ); 240 | }, 241 | sendMsg(e) { 242 | e.preventDefault(); 243 | const that = this; 244 | this.props.form.validateFields((errors, values) => { 245 | if (!!errors) { 246 | console.log('Errors in form!!!'); 247 | return; 248 | } 249 | //console.log('Submit!!!'); 250 | //values.date = format(values.date,"yyyy-MM"); 251 | //console.log(values); 252 | const params = values; 253 | let paramsData = ""; 254 | for(var p in params) { 255 | //console.log(typeof(params[p])); 256 | //console.log(params[p]); 257 | const type = typeof(params[p]); 258 | if(type=="string") { 259 | paramsData += p+"="+(typeof(params[p])=="undefined"?"":params[p])+"&"; 260 | } 261 | } 262 | //console.log("paramsData:"+paramsData); 263 | that.setState({ 264 | loadingMsgSend:true 265 | }) 266 | setTimeout(() => { 267 | $.ajax({ 268 | type:"POST", 269 | url:"/cloudstore/app/no0000005/ControlServlet.jsp?action=Action_DoSalaryMsgSend", 270 | data:paramsData, 271 | success(datas) { 272 | console.log(datas); 273 | that.setState({ 274 | salaryMsgList:datas, 275 | loadingMsgSend:false, 276 | }) 277 | }, 278 | error(datas) { 279 | that.setState({ 280 | salaryMsgList:[], 281 | loadingMsgSend:false, 282 | }) 283 | }, 284 | dataType: "json" 285 | }); 286 | }, 500); 287 | }); 288 | }, 289 | getMsgList(e) { 290 | e.preventDefault(); 291 | const that = this; 292 | this.props.form.validateFields((errors, values) => { 293 | if (!!errors) { 294 | console.log('Errors in form!!!'); 295 | return; 296 | } 297 | //console.log('Submit!!!'); 298 | //values.date = format(values.date,"yyyy-MM"); 299 | //console.log(values); 300 | const params = values; 301 | let paramsData = ""; 302 | for(var p in params) { 303 | //console.log(typeof(params[p])); 304 | //console.log(params[p]); 305 | const type = typeof(params[p]); 306 | if(type=="string") { 307 | paramsData += p+"="+(typeof(params[p])=="undefined"?"":params[p])+"&"; 308 | } 309 | } 310 | //console.log("paramsData:"+paramsData); 311 | that.setState({ 312 | loadingMsgList:true 313 | }) 314 | setTimeout(() => { 315 | $.ajax({ 316 | type:"POST", 317 | url:"/cloudstore/app/no0000005/ControlServlet.jsp?action=Action_DoSalaryMsgDatasGet", 318 | data:paramsData, 319 | success(datas) { 320 | that.setState({ 321 | salaryMsgList:datas, 322 | loadingMsgList:false, 323 | }) 324 | }, 325 | error(datas) { 326 | that.setState({ 327 | salaryMsgList:[], 328 | loadingMsgList:false, 329 | }) 330 | }, 331 | dataType: "json" 332 | }); 333 | }, 500); 334 | }); 335 | } 336 | }); 337 | 338 | const options = { 339 | onFieldsChange:function(props,fields) { 340 | //console.log(props); 341 | if(fields.date) fields.date.value = format(fields.date.value,"yyyy-MM"); 342 | that.props.form.validateFields((errors, values) => { 343 | if(!!errors) { 344 | console.log('Errors in form!!!'); 345 | return; 346 | } 347 | //console.log(values); 348 | const date = typeof(values.date)=="undefined"?"":values.date; 349 | const mainKey = typeof(values.mainKey)=="undefined"?"":values.mainKey; 350 | const type = typeof(values.type)=="undefined"?"":values.type; 351 | const userIds = typeof(values.userIds)=="undefined"?"":values.userIds; 352 | //console.log("date:"+date+" mainKey:"+mainKey); 353 | //console.log("fields.date:"+fields.date+" fields.mainKey:"+fields.mainKey); 354 | if(fields.date||fields.mainKey) { 355 | $.ajax({ 356 | type:"POST", 357 | url:"/cloudstore/app/no0000005/ControlServlet.jsp?action=Action_DoSalaryTypesGet&date="+date+"&mainKey="+mainKey, 358 | success(datas) { 359 | //console.log(datas); 360 | //console.log(that.props.form); 361 | that.props.form.setFieldsValue({type:""}); 362 | that.setState({ 363 | salaryTypeList:datas 364 | }) 365 | }, 366 | error(datas) { 367 | that.setState({ 368 | salaryTypeList:[] 369 | }) 370 | that.props.form.setFieldsValue({type:""}); 371 | }, 372 | dataType: "json" 373 | }); 374 | } 375 | if(date!=""&&mainKey!=""&&userIds!=""&&type!="") { 376 | that.setState({ 377 | canGetMsgList:false 378 | }) 379 | } 380 | else { 381 | that.setState({ 382 | canGetMsgList:true 383 | }) 384 | } 385 | }); 386 | } 387 | } 388 | 389 | Main = createForm(options)(Main); 390 | 391 | export default Main 392 | 393 | //ReactDOM.render(
,document.getElementById("container")); -------------------------------------------------------------------------------- /02.react4pe/project/demo1/index.css: -------------------------------------------------------------------------------- 1 | .ant-advanced-search-form { 2 | padding: 16px 8px; 3 | background: #f8f8f8; 4 | border: 1px solid #d9d9d9; 5 | border-radius: 6px; 6 | margin: 8px; 7 | } 8 | 9 | /* 由于输入标签长度不确定,所以需要微调使之看上去居中 */ 10 | .ant-advanced-search-form > .ant-row { 11 | position: relative; 12 | left: -6px; 13 | } 14 | 15 | .ant-advanced-search-form .ant-btn + .ant-btn { 16 | margin-left: 8px; 17 | } 18 | 19 | .code-box-demo .ant-row { 20 | margin-left: -8px; 21 | margin-right: -8px; 22 | } 23 | .code-box-demo .ant-row > div { 24 | padding: 0 8px; 25 | } 26 | 27 | .code-box-demo .ant-card { 28 | margin-bottom: 16px; 29 | } 30 | 31 | .ant-form-item { 32 | margin-bottom:8px !important; 33 | } 34 | 35 | .salary-table th { 36 | text-align: right; 37 | padding-right:10px; 38 | } 39 | 40 | .salary-table td { 41 | text-align: left; 42 | padding-left:10px; 43 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo1/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component, PropTypes } from 'react' 2 | import { render } from 'react-dom' 3 | import Router from 'react-router/lib/Router' 4 | import Route from 'react-router/lib/Route' 5 | import useRouterHistory from 'react-router/lib/useRouterHistory' 6 | 7 | import { createHistory, useBasename, createHashHistory } from 'history' 8 | 9 | import Home from './components/Home' 10 | import Salary from './components/Salary' 11 | import SalaryMobile from './components/SalaryMobile' 12 | import SalarySet from './components/SalarySet' 13 | import SalaryMsg from './components/SalaryMsg' 14 | import './index.css' 15 | 16 | const history = useRouterHistory(createHashHistory)(); 17 | 18 | class Root extends React.Component { 19 | render() { 20 | return ( 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ) 29 | } 30 | } 31 | 32 | //react 33 | //react-router 34 | 35 | render(,document.getElementById("container")) -------------------------------------------------------------------------------- /02.react4pe/project/demo2/Home.js: -------------------------------------------------------------------------------- 1 | import { Provider, connect } from 'react-redux' 2 | 3 | import ReactRouter from 'react-router/lib/index' 4 | import Link from 'react-router/lib/Link'; 5 | import { Breadcrumb, Menu, Icon } from 'antd'; 6 | 7 | import Init from './components/Init'; 8 | import Auth from './components/Auth'; 9 | import AppDetail from './components/Apps/NewAppsDetail'; 10 | import RoleList from './components/RoleList'; 11 | import Role from './components/Role'; 12 | import NewApps from './components/Apps/NewApps'; 13 | import QueueAnim from 'rc-queue-anim'; 14 | 15 | class Home extends React.Component { 16 | render() { 17 | // console.log("render" + this.props.util); 18 | const page = this.props.children; 19 | const key = this.props.location.pathname.replace('/',''); 20 | const keys = key?key:"home"; 21 | return ( 22 |
23 | 24 | 首页 25 | 应用 26 | 初始配置 27 | 授权管理 28 | 角色管理 29 | 系统管理 30 | 31 | {page? 32 |
33 |
34 |
{page}
35 |
36 | : 37 | 38 |
39 | 40 |

泛微 云服务

41 |

客户端 for ECOLOGY

42 |
43 |
44 |
45 | } 46 | 47 | { 48 | (this.props.util && this.props.util.loading) && ( 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | ) 59 | } 60 | 61 |
62 | ); 63 | } 64 | }; 65 | 66 | function mapStateToProps(state) { 67 | return { 68 | util: state.util, 69 | // total: state 70 | } 71 | } 72 | export default connect(mapStateToProps)(Home); -------------------------------------------------------------------------------- /02.react4pe/project/demo2/Home4ec8.js: -------------------------------------------------------------------------------- 1 | import { Provider, connect } from 'react-redux' 2 | 3 | import ReactRouter from 'react-router/lib/index' 4 | import Link from 'react-router/lib/Link'; 5 | import { Breadcrumb, Menu, Icon } from 'antd'; 6 | 7 | import Init from './components/Init'; 8 | import Auth from './components/Auth'; 9 | import AppDetail from './components/Apps/NewAppsDetail'; 10 | import RoleList from './components/RoleList'; 11 | import Role from './components/Role'; 12 | import NewApps from './components/Apps/NewApps'; 13 | import QueueAnim from 'rc-queue-anim'; 14 | 15 | class Home extends React.Component { 16 | render() { 17 | // console.log("render" + this.props.util); 18 | const page = this.props.children; 19 | const key = this.props.location.pathname.replace('/',''); 20 | const keys = key?key:"home"; 21 | return ( 22 |
23 | {page? 24 |
25 |
26 |
{page}
27 |
28 | : 29 | 30 |
31 | 32 |

泛微云应用商店

33 |

客户端 for ECOLOGY

34 |
35 |
36 |
37 | } 38 | 39 | { 40 | (this.props.util && this.props.util.loading) && ( 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | ) 51 | } 52 |
53 | ); 54 | } 55 | }; 56 | 57 | function mapStateToProps(state) { 58 | return { 59 | util: state.util, 60 | // total: state 61 | } 62 | } 63 | export default connect(mapStateToProps)(Home); -------------------------------------------------------------------------------- /02.react4pe/project/demo2/README.md: -------------------------------------------------------------------------------- 1 | #WEAVER_CloudStore_ec_reactjs 2 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Apps.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | import assign from 'object-assign'; 4 | import * as API from '../api/Apps'; 5 | 6 | import { gloading, gloaded } from './Util'; 7 | 8 | function fliter4error(datas) { 9 | message.error("接口发生异常,错误代码["+datas.error+"],错误信息["+datas.msg+"]!",3); 10 | } 11 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 12 | 13 | function receivePosts(applist,loding) { 14 | return { 15 | type: "AUTH", 16 | applist:applist, 17 | loding:loding 18 | } 19 | } 20 | 21 | export const getPartApp = (min,max,params) => { 22 | // console.log("intogetpartApp") 23 | // console.log("params",params) 24 | return (dispatch,getState) => { 25 | dispatch(gloading()); 26 | 27 | 28 | API.getPartApp(min,max).then((datas)=>{ 29 | dispatch({type:"GETPARTAPP",partapp:datas}); 30 | return API.getCount(); 31 | }).catch((msg)=>{ 32 | message.error('获取应用类表执行失败'); 33 | }).then((countData)=>{ 34 | // alert(countData); 35 | dispatch(gloaded()); 36 | dispatch({type:"GETCOUNT",count:countData,params:params}); 37 | }).catch((msg)=>{ 38 | message.error('获取应用数量执行失败'); 39 | }) 40 | } 41 | } 42 | 43 | export const changeTheme = (theme,foottheme) => { 44 | return (dispatch,getState) => { 45 | dispatch({type:"CHANGETHEME",theme:theme,foottheme:foottheme}); 46 | } 47 | } 48 | 49 | 50 | 51 | export const getAppInfo = (code,key,defaultkey) => { 52 | let appDetail = { 53 | data : {}, 54 | url : "", 55 | defaultkey : "", 56 | length : 0, 57 | } 58 | return (dispatch,getState) => { 59 | dispatch(gloading()); 60 | API.getAppInfo(code,key,defaultkey).then((datas)=>{ 61 | 62 | appDetail.data=datas; 63 | if(undefined == key){ 64 | appDetail.url = datas.pl[0].url; 65 | appDetail.defaultkey = datas.pl[0].key; 66 | }else{ 67 | appDetail.url = datas.pl[parseInt(key)].url; 68 | appDetail.defaultkey = defaultkey; 69 | } 70 | appDetail.length = datas.pl.length; 71 | dispatch({type:"GETAPPINFO",appinfo:appDetail}); 72 | }).catch((msg)=>{ 73 | message.error('获取单个应用失败'); 74 | }) 75 | } 76 | } 77 | 78 | export const setAppMenuKey = key =>{ 79 | return {type:'SET_APP_MENU_KEY',data:key} 80 | } 81 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Auth.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | import assign from 'object-assign'; 4 | import * as API from '../api/Auth' 5 | import { gloading, gloaded } from './Util' 6 | function fliter4error(datas) { 7 | message.error("接口发生异常,错误代码["+datas.error+"],错误信息["+datas.msg+"]!",3); 8 | } 9 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 10 | 11 | function receivePosts(applist,loding) { 12 | return { 13 | type: "AUTH", 14 | applist:applist, 15 | loding:loding 16 | } 17 | } 18 | //修改方法,reject不同的值,再进行处理 19 | export const doAppListGet = (params) => { 20 | return (dispatch,getState) => { 21 | dispatch(gloading()) 22 | dispatch(receivePosts([],true)); 23 | API.doAppListGet().then((datas)=>{ 24 | dispatch(gloaded()); 25 | if(datas.status!="false") { 26 | dispatch(receivePosts(datas,false)); 27 | } 28 | else { 29 | fliter4error(datas); 30 | } 31 | }).catch((msg)=>{ 32 | fliter4error(datas4false); 33 | }) 34 | } 35 | } 36 | 37 | export const doKeySave = (params1,params2) => { 38 | return (dispatch,getState) => { 39 | API.doKeySave(params1,params2).then((datas)=>{ 40 | //console.log("datas",datas) 41 | if(datas.status!="false") { 42 | if(datas=="0") { 43 | message.success('授权成功'); 44 | return API.doAppListGet(); 45 | } 46 | else { 47 | message.error("授权码格式有误,请重新提交!"); 48 | } 49 | } 50 | else { 51 | fliter4error(datas); 52 | } 53 | }).catch((msg)=>{ 54 | fliter4error(datas4false); 55 | }).then((datas)=>{ 56 | //console.log("能进来吗") 57 | if(datas.status!="false") { 58 | dispatch(receivePosts(datas,false)); 59 | } 60 | else { 61 | fliter4error(datas); 62 | } 63 | }).catch((msg)=>{ 64 | // fliter4error(datas4false); 65 | }) 66 | } 67 | } 68 | 69 | export const changeValue = (params) => { 70 | return (dispatch,getState) => { 71 | dispatch({type:"CHANGEVALUE",value:params}); 72 | } 73 | } 74 | 75 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Init.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | import * as API from '../api/Init' 4 | import assign from 'object-assign'; 5 | 6 | let configMsgBtn = false; 7 | let configMsgDatas = []; 8 | 9 | function receivePosts(configMsgDatas,configMsgBtn) { 10 | return { 11 | type: "INIT", 12 | msgsArr:configMsgDatas, 13 | msgsBtn:configMsgBtn 14 | } 15 | } 16 | 17 | function changeValue1(datas){ 18 | let configMsgData = { 19 | title:"步骤一:jar包、class文件自动检测", 20 | value:"", 21 | type:"" 22 | }; 23 | var dataInt=parseInt(datas); 24 | if(dataInt==0) { 25 | configMsgData.value = "经过检测jar包、class文件已初始化,将自动进入下一步!"; 26 | configMsgData.type = "success"; 27 | } 28 | else if(dataInt>0 && dataInt<10) { 29 | configMsgData.value = "经过检测jar包、class文件未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 30 | configMsgData.type = "warning"; 31 | configMsgBtn = true; 32 | }else if(dataInt==10) { 33 | configMsgData.value = "经过检测系统中存在jsr-311.jar,请您手动删除系统会自动重启,先做好保存工作再删除!"; 34 | configMsgData.type = "warning"; 35 | configMsgBtn = true; 36 | }else if(dataInt>10) { 37 | configMsgData.value = "经过检测 1、系统中存在jsr-311.jar,请您手动删除!2、jar包、class文件未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 38 | configMsgData.type = "warning"; 39 | configMsgBtn = true; 40 | }else { 41 | configMsgData.value = "jar包、class文件检测程序出现问题,请联系管理员!"; 42 | configMsgData.type = "error"; 43 | } 44 | configMsgDatas[0] = configMsgData; 45 | configMsgBtn = false; 46 | } 47 | 48 | 49 | function changeValue2(datas){ 50 | let configMsgData = { 51 | title:"步骤二:web.xml文件自动检测", 52 | value:"", 53 | type:"" 54 | }; 55 | datas=JSON.parse(datas); 56 | //console.log("changeValue2",datas); 57 | if(datas=="0") { 58 | configMsgData.value = "经过检测web.xml已初始化,将自动进入下一步!"; 59 | configMsgData.type = "success"; 60 | } 61 | else if(datas=="1") { 62 | configMsgData.value = "经过检测web.xml未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 63 | configMsgData.type = "warning"; 64 | configMsgBtn = true; 65 | } 66 | else if(datas.error=="402"){ 67 | configMsgData.value = "没有权限,请登录系统管理员账号!"; 68 | configMsgData.type = "error"; 69 | } 70 | else { 71 | configMsgData.value = "web.xml检测程序出现问题,请联系管理员!"; 72 | configMsgData.type = "error"; 73 | } 74 | configMsgDatas[1] = configMsgData; 75 | configMsgBtn = false; 76 | 77 | } 78 | 79 | function changeValue3(datas){ 80 | // console.log("changeValue3") 81 | let configMsgData = { 82 | title:"步骤三:web.xml自动配置和备份", 83 | value:"", 84 | type:"" 85 | }; 86 | datas=JSON.parse(datas); 87 | if(datas=="0") { 88 | configMsgData.value = "经过检测web.xml已完成配置!"; 89 | configMsgData.type = "success"; 90 | } 91 | else if(datas=="1") { 92 | configMsgData.value = "web.xml已初始化,系统已经重启,重启后请再次进入此界面,如果遇到问题请恢复ecology/WEB-INF/backup/web.xml至ecology/WEB-INF/web.xml,并联系管理员!"; 93 | configMsgData.type = "info"; 94 | } 95 | else if(datas.error=="402"){ 96 | configMsgData.value = "没有权限,请登录系统管理员账号!"; 97 | configMsgData.type = "error"; 98 | } 99 | else { 100 | configMsgData.value = "web.xml配置程序出现问题,请联系管理员!"; 101 | configMsgData.type = "error"; 102 | } 103 | configMsgDatas[2] = configMsgData; 104 | configMsgBtn = false; 105 | } 106 | 107 | function changeValue4(datas){ 108 | 109 | let configMsgData = { 110 | title:"步骤一:jar包、class文件自动检测", 111 | value:"", 112 | type:"" 113 | }; 114 | configMsgData.title = "步骤四:应用数据库脚本执行及检测"; 115 | console.log("changeValue4",datas); 116 | const returnMsg = datas.msg; 117 | const returnError = datas.errorList; 118 | if(returnMsg=="0") { 119 | configMsgData.value = "数据库脚本执行程序执行成功!"; 120 | configMsgData.type = "success"; 121 | } 122 | else if(returnMsg=="1") { 123 | configMsgData.value = "数据库脚本执行执行异常,请联系管理员处理!具体错误的应用如下:"; 124 | for(let i=0;i { 168 | return (dispatch,getState) => { 169 | API.checkJarAndClass().then((datas)=>{ 170 | changeValue1(datas,dispatch); 171 | if(datas==0){ 172 | return API.checkWebXml(); 173 | }else{ 174 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 175 | } 176 | }).then((datas)=>{ 177 | changeValue2(datas,dispatch); 178 | if(datas==0){ 179 | return API.doXmlConfig(); 180 | }else{ 181 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 182 | } 183 | }).then((datas)=>{ 184 | changeValue3(datas,dispatch); 185 | if(datas==0){ 186 | return API.doSqlConfig(); 187 | }else{ 188 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 189 | } 190 | }).then((datas)=> { 191 | changeValue4(datas); 192 | if(datas.msg=="0") { 193 | return API.doAppKeyCheck(); 194 | }else{ 195 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 196 | } 197 | }).then((datas)=> { 198 | changeValue5(datas); 199 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 200 | }).catch((msg)=>{ 201 | handleCatch(msg,dispatch); 202 | }) 203 | } 204 | } 205 | 206 | export const doXmlConfig = (params) => { 207 | return (dispatch,getState) => { 208 | API.doXmlConfig().then((datas)=> { 209 | changeValue3(datas); 210 | if(datas==0){ 211 | return API.doSqlConfig(); 212 | }else{ 213 | // console.log("else2") 214 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 215 | } 216 | // dispatch(receivePosts(configMsgDatas,configMsgBtn)); 217 | }).then((datas)=> { 218 | // console.log("else30") 219 | changeValue4(datas); 220 | if(datas.msg=="0") { 221 | return API.doAppKeyCheck(); 222 | }else{ 223 | // console.log("else3") 224 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 225 | } 226 | // dispatch(receivePosts(configMsgDatas,configMsgBtn)); 227 | }).then((datas)=> { 228 | changeValue5(datas); 229 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 230 | // dispatch(receivePosts(configMsgDatas,configMsgBtn)); 231 | }).catch((msg)=>{ 232 | handleCatch(msg,dispatch); 233 | }) 234 | } 235 | } 236 | 237 | 238 | function handleCatch(msg,dispatch){ 239 | // console.log("msg:",msg); 240 | if(msg.type=="checkJarAndClass"){ 241 | changeValue1(msg.edatas); 242 | }else if(msg.type=="checkWebXml"){ 243 | changeValue2(msg.edatas); 244 | if(msg.edatas==1){//确认进入第三步的按钮需求:阻止接下去的promise链执行且configMsgBtn = true 245 | configMsgBtn = true; 246 | } 247 | }else if(msg.type=="doXmlConfig"){ 248 | changeValue3(msg.edatas); 249 | }else if(msg.type=="doSqlConfig"){ 250 | changeValue4(msg.edatas); 251 | }else if(msg.type=="doAppKeyCheck"){ 252 | changeValue5(msg.edatas); 253 | } 254 | // console.log("configMsgBtn",configMsgBtn) 255 | dispatch(receivePosts(configMsgDatas,configMsgBtn)); 256 | } 257 | 258 | 259 | 260 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Role.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | import * as API from '../api/Role'; 4 | import assign from 'object-assign'; 5 | import RoleList from '../components/RoleList' 6 | 7 | import { gloading, gloaded } from './Util' 8 | // dispatch(gloading()) 9 | // dispatch(gloaded()); 10 | 11 | 12 | function fliter4error(datas) { 13 | message.error("接口发生异常,错误代码["+datas.error+"],错误信息["+datas.msg+"]!",3); 14 | } 15 | 16 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 17 | export const saveMemberTypeMsg = ""; 18 | export const saveMemberObjMsg = ""; 19 | export const saveRoleMsg = ""; 20 | export const saveMemberObjMsgids = "" 21 | function deepCopy(source) { 22 | let result={}; 23 | for(let key in source) { 24 | result[key] = typeof source[key]==='object'? deepCopy(source[key]): source[key]; 25 | } 26 | return result; 27 | } 28 | 29 | 30 | let Deldispatch 31 | export const putDispatch = (params) => { 32 | return (dispatch,getState) => { 33 | Deldispatch = dispatch; 34 | } 35 | } 36 | 37 | 38 | 39 | export const gClean = (params) => { 40 | return (dispatch,getState) => { 41 | dispatch({type:"GCLEAN"}) 42 | } 43 | } 44 | 45 | 46 | let showform = true; 47 | export const showForm = (showForm) => { 48 | return (dispatch,getState) => { 49 | showform = !showform; 50 | dispatch({type:"SHOWFORM",showForm:!showform}) 51 | } 52 | } 53 | 54 | let roleSaveMsg = "-1"; 55 | let isRoleSave = false; 56 | export const doRoleSave = (formId,optype,roleMemberDatas,appCode) => { 57 | return (dispatch,getState) => { 58 | // console.log("roleMemberDatas",roleMemberDatas) 59 | let tmpRml = []; 60 | for(let i=0;i{ 75 | // console.log("appcode",appCode) 76 | // console.log("datas",datas) 77 | if(datas.status!="false") { 78 | roleSaveMsg = datas; 79 | isRoleSave = false; 80 | message.success('保存成功!'); 81 | dispatch({type:"SAVEBASICFORM",roleMemberDatas:roleMemberDatas}) 82 | } 83 | else { 84 | fliter4error(datas); 85 | } 86 | }).catch((msg)=>{ 87 | fliter4error(datas); 88 | }) 89 | } 90 | } 91 | 92 | export const cleanMemberObj = (roles) => { 93 | return (dispatch,getState) => { 94 | roles.memberObj = "", 95 | dispatch({type:"CLEANOBJ",roles:roles}) 96 | } 97 | } 98 | 99 | 100 | 101 | //添加权限 102 | export const doRoleMemberAdd = (roleMember,roleMemberDatas) => { 103 | return (dispatch,getState) => { 104 | 105 | const moIds = roleMember.memberObj.ids.split(","); 106 | const moNames = roleMember.memberObj.names.split(","); 107 | const roIds = roleMember.roleObj.ids.split(","); 108 | const roNames = roleMember.roleObj.names.split(","); 109 | for(let i=0;i { 147 | return (dispatch,getState) => { 148 | // console.log("actions",actions) 149 | let tmpRoleMemberkeys = []; 150 | actions.map(action=>{tmpRoleMemberkeys.push(action.key)}); 151 | // console.log("tmpRoleMemberkeys",tmpRoleMemberkeys) 152 | dispatch({type:"ROLE_MEMBERDEL",tmpRoleMemberkeys:tmpRoleMemberkeys}) 153 | } 154 | } 155 | 156 | export const setSelectDatas = (selectDatas) => { 157 | return (dispatch,getState) => { 158 | dispatch({type:"ROLE_SELECTDATAS",selectDatas:selectDatas}) 159 | } 160 | } 161 | 162 | export const cleanRoleMember = (roleMemberDatas) => { 163 | return (dispatch,getState) => { 164 | dispatch({type:"ROLE_MEMBERDEL",tmpRoleMemberkeys:tmpRoleMemberkeys}) 165 | } 166 | } 167 | 168 | let haveNoSaveDetail = false; 169 | //field:memberType key:1 id:1 name:部门 170 | export const doRoleMemberEdit = (field,key,id,name) => { 171 | return (dispatch,getState) => { 172 | let find = false; 173 | for(let i=0;i { 217 | return (dispatch,getState) => { 218 | //console.log("id:",id,"opType",opType)//0 add 219 | opType = opType; 220 | roleId = id; 221 | roleMemberDatas = []; 222 | dispatch(gloading()) 223 | if(roleId!="0"){ 224 | API.doDataGet(id).then((datas)=>{ 225 | dispatch(gloaded()); 226 | if(datas.status!="false") { 227 | role = datas; 228 | roleMemberDatas = datas.rml; 229 | for(let i=0;i{ 240 | fliter4error(datas4false); 241 | }) 242 | } 243 | API.doAppListGet().then((datas)=>{ 244 | dispatch(gloaded()); 245 | if(datas.status!="false") { 246 | appList = []; 247 | const defaultAppData = { 248 | name:"云商店ECOLOGY端", 249 | value:"0", 250 | }; 251 | appList[appList.length] = defaultAppData; 252 | let tmpAppDatas = datas; 253 | for(let i=0;i{ 267 | fliter4error(datas4false); 268 | }) 269 | } 270 | } 271 | 272 | 273 | 274 | let roleDelMsg = "-1"; 275 | let isRoleDel = false; 276 | 277 | function receivedoRoleDel(isRoleDel,roleDelMsg) { 278 | return { 279 | type: "ROLE_DEL", 280 | isRoleDel:isRoleDel, 281 | roleDelMsg:roleDelMsg 282 | } 283 | } 284 | export const doRoleDel = (id,fun) => { 285 | isRoleDel = true; 286 | roleDelMsg = "-1"; 287 | API.doRoleDel(id).then((datas)=>{ 288 | // console.log("datas",datas) 289 | if(datas.status!="false") { 290 | message.success('删除成功!'); 291 | 292 | // console.dir(Deldispatch) 293 | Deldispatch(receivedoRoleDel(true,datas)); 294 | //未完成,删除完后重新刷新 295 | } 296 | else { 297 | message.error('删除失败,请联系管理员!'); 298 | } 299 | }).catch((msg)=>{ 300 | message.error('删除失败,请联系管理员!'); 301 | }).then(()=>{ 302 | fun(); 303 | }) 304 | } 305 | 306 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Sys.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | 3 | import assign from 'object-assign'; 4 | import * as API from '../api/Sys'; 5 | import { gloading, gloaded } from './Util'; 6 | 7 | //获取基础组件库的版本号action 8 | export const getVersion = (params) => { 9 | return (dispatch,getState) => { 10 | let myVersion; 11 | API.getVersion().then(function(version) { 12 | dispatch(gloading()); 13 | dispatch({type:"GETVERSION",version:version}); 14 | setTimeout(dispatch(gloaded()),500); 15 | }).catch(function(err) { 16 | dispatch(gloading()); 17 | myVersion = '暂无无版本信息'; 18 | dispatch({type:"GETVERSION",version:myVersion}); 19 | setTimeout(dispatch(gloaded()),500); 20 | }); 21 | } 22 | } 23 | //是否绑定服务器-获取状态 24 | export const getTokenStatus = (params) => { 25 | return (dispatch,getState) => { 26 | API.getTokenStatus(params).then(function(data) { 27 | dispatch(gloading()); 28 | dispatch({type:"GETTOKENBINDING",tokenBol:data.status=="0"}); 29 | setTimeout(dispatch(gloaded()),500); 30 | }).catch(function(err) { 31 | dispatch(gloading()); 32 | dispatch({type:"GETTOKENBINDING",tokenBol:"1"}); 33 | setTimeout(dispatch(gloaded()),500); 34 | }); 35 | } 36 | 37 | } 38 | //是否绑定服务器-修改状态 39 | export const GetCloudStoreStatus = (params) => { 40 | return (dispatch,getState) => { 41 | API.GetCloudStoreStatus(params).then(function(data) { 42 | dispatch(gloading()); 43 | dispatch({type:"GETTOKENBINDING",tokenBol:!!data.status}); 44 | setTimeout(dispatch(gloaded()),500); 45 | }).catch(function(err) { 46 | dispatch(gloading()); 47 | dispatch({type:"GETTOKENBINDING",tokenBol:!!data.status}); 48 | setTimeout(dispatch(gloaded()),500); 49 | }); 50 | } 51 | } 52 | 53 | //获取用户联系方式 54 | export const getJoin = () => { 55 | return (dispatch,getState) => { 56 | API.getJoin().then(data => { 57 | if(data.status == 'true'){ 58 | const orderFields = {mail:{name:"mail",value:data.mail},mobile:{name:"mobile",value:data.mobile}}; 59 | dispatch(saveOrderFields(orderFields)); 60 | dispatch({type:'SET_ISJOIN',data:orderFields}); 61 | }else{ 62 | console.log("获取用户联系方式失败"); 63 | } 64 | }).catch(err=> { 65 | console.log('获取用户联系方式失败'); 66 | }); 67 | } 68 | } 69 | 70 | //提交用户联系方式 71 | export const sendToJoin = params => { 72 | return (dispatch,getState) => { 73 | dispatch({type:'SET_LOADING',data:true}); 74 | API.sendToJoin(params).then(data => { 75 | data.status == 'true' ? setTimeout(()=>{dispatch(dispatch({type:'SET_LOADING',data:false}));dispatch(setSuccess(true))},500) : console.log("获取用户联系方式失败,msg:" + data.msg); 76 | }).catch(err=> { 77 | console.log('提交用户联系方式失败' + err); 78 | }); 79 | } 80 | } 81 | 82 | //获取菜单状态 83 | export const getCsMenu = params => { 84 | return (dispatch,getState) => { 85 | API.getCsMenu(params).then(data => { 86 | data.status == 'true' ? dispatch({type:params.type == 'pc' ? 'SET_PCISOPEN' : 'SET_MOBILEISOPEN',data:data.isOpen == 'true'}) : console.log("获取" + params.type + "开关数据失败"); 87 | }).catch(err=> { 88 | console.log('接口失败:' + err); 89 | }); 90 | } 91 | } 92 | 93 | //设置菜单状态 94 | export const setCsMenu = params => { 95 | return (dispatch,getState) => { 96 | API.setCsMenu(params).then(data => { 97 | data.status == 'true' ? dispatch({type:params.type == 'pc' ? 'SET_PCISOPEN' : 'SET_MOBILEISOPEN',data:params.isOpen}) : console.log("设置" + params.type + "开关失败"); 98 | }).catch(err=> { 99 | console.log('接口失败:' + err); 100 | }); 101 | } 102 | } 103 | 104 | 105 | export const setModelVisible = bool => { 106 | return {type:'SET_MODEL_VISIBLE',data:bool} 107 | } 108 | 109 | export const canSubmit = bool => { 110 | return {type:'SET_CANSUBMIT',data:bool} 111 | } 112 | 113 | export const saveOrderFields = field => { 114 | return {type: 'SAVE_APPFIELDS', data:field} 115 | } 116 | 117 | export const setSuccess = bool => { 118 | return {type: 'SET_SUCCESS', data:bool} 119 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/Util.js: -------------------------------------------------------------------------------- 1 | import { message } from 'antd' 2 | //import message from '../_antd1.11.2/message' 3 | //*********************************** 4 | //全局loding 5 | var loadingtimeout; 6 | var enduretimeout; 7 | var loadingStatus = false; 8 | export function gloading() { 9 | // console.log("gloading") 10 | loadingStatus = true; 11 | return function(dispatch) { 12 | if (loadingtimeout) { 13 | clearTimeout(loadingtimeout); 14 | loadingtimeout = 0; 15 | } else { 16 | dispatch(rloading()); 17 | } 18 | enduretimeout = setTimeout(function() { 19 | dispatch(rloaded()); 20 | // message.warn("加载超时,网速不给力。") 21 | }, 20000); //10秒超时上线 22 | loadingtimeout = setTimeout(function() { 23 | if (!loadingStatus) { 24 | dispatch(rloaded()); 25 | } 26 | loadingtimeout = 0; 27 | }, 400); 28 | } 29 | } 30 | export function gloaded() { 31 | // console.log("gloaded") 32 | loadingStatus = false; 33 | if (enduretimeout) { 34 | clearTimeout(enduretimeout); 35 | enduretimeout = 0; 36 | } 37 | return function(dispatch) { 38 | if (!loadingtimeout) { 39 | dispatch(rloaded()); 40 | } 41 | } 42 | } 43 | function rloading() { 44 | return { type: "RLOADING" } 45 | } 46 | function rloaded() { 47 | return { type: "RLOADED" } 48 | } 49 | 50 | 51 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/actions/index.js: -------------------------------------------------------------------------------- 1 | //import Constants from '../constants/ActionTypes' 2 | // 3 | //export function addTask(text) { 4 | // return { type: Constants.ADD_TASK, text } 5 | //} 6 | // 7 | //export function doInit() { 8 | // configMsgDatas = []; 9 | // let configMsgData = { 10 | // title:"", 11 | // value:"", 12 | // type:"" 13 | // }; 14 | // configMsgData.title = "步骤一:web.xml自动检测"; 15 | // changeLoading(true); 16 | // $.ajax({ 17 | // type:"POST", 18 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_CheckWebXml", 19 | // success(edatas) { 20 | // if(edatas.status!="false") { 21 | // const datas = edatas; 22 | // if(datas=="0") { 23 | // configMsgData.value = "经过检测web.xml已初始化,将自动进入下一步!"; 24 | // configMsgData.type = "success"; 25 | // } 26 | // else if(datas=="1") { 27 | // configMsgData.value = "经过检测web.xml未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 28 | // configMsgData.type = "warning"; 29 | // configMsgBtn = true; 30 | // } 31 | // else { 32 | // configMsgData.value = "web.xml检测程序出现问题,请联系管理员!"; 33 | // configMsgData.type = "error"; 34 | // } 35 | // configMsgDatas[0] = configMsgData; 36 | // changeLoading(false); 37 | // configMsgBtn = false; 38 | // if(datas=="0") { 39 | // doXmlConfig(); 40 | // } 41 | // } 42 | // else { 43 | // fliter4error(edatas); 44 | // configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 45 | // configMsgData.type = "error"; 46 | // configMsgDatas[0] = configMsgData; 47 | // changeLoading(false); 48 | // } 49 | // }, 50 | // error(edatas) { 51 | // fliter4error(datas4false); 52 | // configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 53 | // configMsgData.type = "error"; 54 | // configMsgDatas[0] = configMsgData; 55 | // changeLoading(false); 56 | // }, 57 | // dataType: "json" 58 | // }); 59 | //} 60 | ///* 61 | // 62 | // 63 | // return ( dispatch, getStore ) => { 64 | // console.log("getStore:",getStore); 65 | // dispatch({ type: types.ADD_TASK, text }); 66 | // } 67 | // 68 | //export function addTodo(text) { 69 | //return { type: types.ADD_TODO, text } 70 | //} 71 | // 72 | //export function deleteTodo(id) { 73 | //return { type: types.DELETE_TODO, id } 74 | //} 75 | // 76 | //export function editTodo(id, text) { 77 | //return { type: types.EDIT_TODO, id, text } 78 | //} 79 | // 80 | //export function completeTodo(id) { 81 | //return { type: types.COMPLETE_TODO, id } 82 | //} 83 | // 84 | //export function completeAll() { 85 | //return { type: types.COMPLETE_ALL } 86 | //} 87 | // 88 | //export function clearCompleted() { 89 | //return { type: types.CLEAR_COMPLETED } 90 | //} 91 | // 92 | //export const GET_LATEST_DATA = () => { 93 | // return ( dispatch, getStore ) => { 94 | // if(getStore().mainList.length > 0) { 95 | // return; 96 | // } 97 | // getLatestStory().then(data => { 98 | // dispatch(GET_LATEST(data)) 99 | // //首次加载时除了最新的还加载昨天的,因为高度不够无法触发到底部刷新加载历史内容 100 | // dispatch(GET_HISTORY_DATA(getStore().UIState.LoadingDate)) 101 | // dispatch(STOP_LOADING()) 102 | // }) 103 | // } 104 | //} 105 | // 106 | //*/ -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/Apps.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | 4 | 5 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 6 | 7 | const server = window.server||""; 8 | 9 | const getFd = (values) => { 10 | let fd = ""; 11 | //var data = new FormData(); 12 | for(let p in values) { 13 | fd += p+"="+encodeURIComponent(values[p])+"&"; 14 | //data.append(p,values[p]); 15 | } 16 | if(fd!="") { 17 | fd = fd.substring(0,fd.length-1); 18 | } 19 | // console.log("fd",fd) 20 | return fd; 21 | } 22 | 23 | const getFetchParams = (method,params)=>{ 24 | // console.log("App",params); 25 | let obj = { 26 | method:method, 27 | headers: { 28 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 29 | 'X-Requested-With':'XMLHttpRequest' 30 | }, 31 | }; 32 | if(server=="") { 33 | obj.credentials = "include"; 34 | } 35 | // else { 36 | // obj.mode = "no-cors"; 37 | // } 38 | if(params) { 39 | obj.body = getFd(params); 40 | } 41 | // console.log("obj:",obj); 42 | return obj; 43 | } 44 | 45 | export const getCount = () =>{ 46 | return new Promise((resolve,reject) => { 47 | // $.ajax({ 48 | // type:"POST", 49 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppCount", 50 | // // data:"pathname="+window.location.pathname, 51 | // success(datas) { 52 | // resolve(datas); 53 | // }, 54 | // error(datas) { 55 | // reject(datas); 56 | // }, 57 | // dataType: "json" 58 | // }); 59 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetAppCount', 60 | getFetchParams("get","")) 61 | .then(function(response) { 62 | const edatas = response.json(); 63 | resolve(edatas); 64 | }).catch(function(edatas) { 65 | reject(edatas); 66 | }); 67 | }); 68 | } 69 | 70 | export const getPartApp = (min,max) =>{ 71 | return new Promise((resolve,reject) => { 72 | // $.ajax({ 73 | // type:"POST", 74 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetPartApp", 75 | // data:"min="+min+"&max="+max, 76 | // success(datas) { 77 | // resolve(datas); 78 | // }, 79 | // error(datas) { 80 | // reject(datas); 81 | // }, 82 | // dataType: "json" 83 | // }); 84 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetPartApp', 85 | getFetchParams("post",{"min":min,"max":max})) 86 | .then(function(response) { 87 | const edatas = response.json(); 88 | // console.log("Action_GetPartApp2",edatas); 89 | resolve(edatas); 90 | }).catch(function(edatas) { 91 | reject(edatas); 92 | }); 93 | }); 94 | } 95 | 96 | 97 | export const getAppInfo = (code,key,defaultkey) =>{ 98 | return new Promise((resolve,reject) => { 99 | // $.ajax({ 100 | // type:"POST", 101 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppInfo", 102 | // data:"appCode="+code, 103 | // success(datas) { 104 | // 105 | // resolve(datas); 106 | // }, 107 | // error(datas) { 108 | // reject(datas); 109 | // }, 110 | // dataType: "json" 111 | // }); 112 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetAppInfo', 113 | getFetchParams("post",{"appCode":code})) 114 | .then(function(response) { 115 | const edatas = response.json(); 116 | resolve(edatas); 117 | }).catch(function(edatas) { 118 | reject(edatas); 119 | }); 120 | }); 121 | } 122 | 123 | 124 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/Auth.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | //import GetParams from './GetParams' 4 | const server = window.server||""; 5 | 6 | const getFd = (values) => { 7 | let fd = ""; 8 | //var data = new FormData(); 9 | for(let p in values) { 10 | fd += p+"="+encodeURIComponent(values[p])+"&"; 11 | //data.append(p,values[p]); 12 | } 13 | if(fd!="") { 14 | fd = fd.substring(0,fd.length-1); 15 | } 16 | return fd; 17 | } 18 | 19 | const getFetchParams = (method,params)=>{ 20 | let obj = { 21 | method:method, 22 | headers: { 23 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 24 | 'X-Requested-With':'XMLHttpRequest' 25 | }, 26 | }; 27 | if(server=="") { 28 | obj.credentials = "include"; 29 | } 30 | // else { 31 | // obj.mode = "no-cors"; 32 | // } 33 | if(params) { 34 | obj.body = getFd(params); 35 | } 36 | //console.log("obj:",obj); 37 | return obj; 38 | } 39 | 40 | 41 | 42 | 43 | function fliter4error(datas) { 44 | message.error("接口发生异常,错误代码asdf["+datas.error+"],错误信息["+datas.msg+"]!",3); 45 | } 46 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 47 | 48 | 49 | 50 | export const doAppListGet = () =>{ 51 | return new Promise((resolve,reject) => { 52 | // $.ajax({ 53 | // type:"POST", 54 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList", 55 | // success(edatas) { 56 | // // console.log("success ?",edatas) 57 | // 58 | // resolve(edatas); 59 | // }, 60 | // error(edatas) { 61 | // // console.log("error?") 62 | // reject(edatas); 63 | // }, 64 | // dataType: "json" 65 | // }); 66 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList', 67 | getFetchParams("get","")) 68 | .then(function(response) { 69 | // alert("auth1",response); 70 | const edatas = response.json(); 71 | resolve(edatas); 72 | }).catch(function(edatas) { 73 | // alert("auth",edatas); 74 | fliter4error(edatas); 75 | reject(edatas); 76 | }); 77 | }); 78 | } 79 | 80 | export const doKeySave = (code,keyStr) =>{ 81 | return new Promise((resolve,reject) => { 82 | // $.ajax({ 83 | // type:"POST", 84 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_SaveAppKey&code="+code+"&keyStr="+keyStr, 85 | // success(edatas) { 86 | // resolve(edatas); 87 | // }, 88 | // error(edatas) { 89 | // reject(edatas); 90 | // }, 91 | // dataType: "json" 92 | // }); 93 | fetch(server+"/cloudstore/system/ControlServlet.jsp?action=Action_SaveAppKey&code="+code+"&keyStr="+keyStr, 94 | getFetchParams("get",'')) 95 | .then(function(response) { 96 | const edatas = response.json(); 97 | resolve(edatas); 98 | }).catch(function(edatas) { 99 | // fliter4error(edatas); 100 | reject(edatas); 101 | }); 102 | }); 103 | 104 | } 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | //let count = 0; 113 | //let appinfo = {}; 114 | ////逻辑处理start 115 | //export const getCount = () =>{ 116 | // return new Promise((resolve,reject) => { 117 | //// $.ajax({ 118 | //// type:"POST", 119 | //// url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppCount", 120 | //// // data:"pathname="+window.location.pathname, 121 | //// success(datas) { 122 | //// // console.log("datas",datas); 123 | //// count=datas; 124 | //// changeLoading(false); 125 | //// // resolve(datas); 126 | //// }, 127 | //// error(datas) { 128 | //// message.destroy(); 129 | //// message.error('执行失败'); 130 | //// // console.log("error:",datas); 131 | //// // resolve([]); 132 | //// }, 133 | //// dataType: "json" 134 | //// }); 135 | // 136 | // fetch(server+"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppCount",getFetchParams("get",'')) 137 | // .then(function(response) { 138 | // const edatas = response.json(); 139 | // // console.log("edatas",edatas); 140 | // count=edatas; 141 | // changeLoading(false); 142 | // // resolve(edatas); 143 | // }).catch(function(edatas) { 144 | // message.destroy(); 145 | // message.error('执行失败'); 146 | // }); 147 | // }); 148 | //} 149 | //function getAppInfo(action){ 150 | // const min = action.min; 151 | // const max = action.max; 152 | // console.log("min"+min,"max"+max); 153 | //// $.ajax({ 154 | //// type:"POST", 155 | //// url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetPartApp", 156 | //// data:"min="+min+"&max="+max, 157 | //// success(datas) { 158 | //// // console.log("datas",datas); 159 | //// getCount(); 160 | //// appinfo=datas; 161 | //// changeLoading(false); 162 | //// // resolve(datas); 163 | //// 164 | //// }, 165 | //// error(datas) { 166 | //// message.destroy(); 167 | //// message.error('执行失败'); 168 | //// // console.log("error:",datas); 169 | //// // resolve([]); 170 | //// }, 171 | //// dataType: "json" 172 | //// }); 173 | // fetch(server+"/cloudstore/system/ControlServlet.jsp?action=Action_GetPartApp",getFetchParams("get",{"min":min,"max":max})) 174 | // .then(function(response) { 175 | // const edatas = response.json(); 176 | // // console.log("edatas",edatas); 177 | // getCount(); 178 | // appinfo=edatas; 179 | // changeLoading(false); 180 | // // resolve(edatas); 181 | // }).catch(function(edatas) { 182 | // message.destroy(); 183 | // message.error('执行失败'); 184 | // }); 185 | //} 186 | // 187 | //let partapp = {}; 188 | //let url = ""; 189 | //let defaultkey = ""; 190 | //let length = 0; 191 | //function getPartApp(action){ 192 | // const appCode = action.appCode; 193 | // const key = action.key; 194 | // // console.log("appcode",appCode); 195 | // 196 | //// $.ajax({ 197 | //// type:"POST", 198 | //// url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppInfo", 199 | //// data:"appCode="+appCode, 200 | //// success(datas) { 201 | //// partapp=datas; 202 | //// if(undefined == key){ 203 | //// url = datas.pl[0].url; 204 | //// defaultkey = datas.pl[0].key; 205 | //// }else{ 206 | //// url = datas.pl[parseInt(key)].url; 207 | //// defaultkey = action.defaultkey; 208 | //// } 209 | //// length = datas.pl.length; 210 | //// changeLoading(false); 211 | //// // resolve(datas); 212 | //// 213 | //// }, 214 | //// error(datas) { 215 | //// message.destroy(); 216 | //// message.error('执行失败'); 217 | //// // console.log("error:",datas); 218 | //// // resolve([]); 219 | //// }, 220 | //// dataType: "json" 221 | //// }); 222 | // 223 | // fetch(server+"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppInfo",{ 224 | // method: 'POST', 225 | // mode: "no-cors", 226 | // headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'}, 227 | // body:"appCode="+appCode, 228 | // credentials: 'include' 229 | // }).then(function(response) { 230 | // const edatas = response.json(); 231 | // partapp=edatas; 232 | // if(undefined == key){ 233 | // url = edatas.pl[0].url; 234 | // defaultkey = edatas.pl[0].key; 235 | // }else{ 236 | // url = edatas.pl[parseInt(key)].url; 237 | // defaultkey = action.defaultkey; 238 | // } 239 | // length = edatas.pl.length; 240 | // changeLoading(false); 241 | // // resolve(datas); 242 | // }).catch(function(edatas) { 243 | // message.destroy(); 244 | // message.error('执行失败'); 245 | // }); 246 | //} 247 | // 248 | // 249 | // 250 | // 251 | // 252 | //let appList = []; 253 | // 254 | // 255 | // 256 | //function receivePosts(applist,loding) { 257 | //return { 258 | // type: "AUTH", 259 | // applist:applist, 260 | // loding:loding 261 | //} 262 | //} 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/Init.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | 4 | const server = window.server||""; 5 | const getFd = (values) => { 6 | let fd = ""; 7 | //var data = new FormData(); 8 | for(let p in values) { 9 | fd += p+"="+encodeURIComponent(values[p])+"&"; 10 | //data.append(p,values[p]); 11 | } 12 | if(fd!="") { 13 | fd = fd.substring(0,fd.length-1); 14 | } 15 | return fd; 16 | } 17 | 18 | const getFetchParams = (method,params)=>{ 19 | let obj = { 20 | method:method, 21 | headers: { 22 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 23 | 'X-Requested-With':'XMLHttpRequest' 24 | }, 25 | }; 26 | if(server=="") { 27 | obj.credentials = "include"; 28 | } 29 | // else { 30 | // obj.mode = "no-cors"; 31 | // } 32 | if(params) { 33 | obj.body = getFd(params); 34 | } 35 | //console.log("obj:",obj); 36 | return obj; 37 | } 38 | // 39 | function fliter4error(datas) { 40 | message.error("接口发生异常,错误代码["+datas.error+"],错误信息["+datas.msg+"]!",3); 41 | } 42 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 43 | 44 | // let change = false; 45 | 46 | 47 | 48 | export const checkJarAndClass= () =>{ 49 | return new Promise((resolve,reject) => { 50 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_CheckJarAndClass', 51 | getFetchParams("get","")) 52 | .then(function(res){ 53 | return res.text(); 54 | } 55 | ).then(edatas => { 56 | edatas = edatas.replace(/(^\s*)|(\s*$)/g, "");//返回值有一片空白需要处理 57 | 58 | var dataInt=parseInt(edatas); 59 | if(dataInt>0){ 60 | reject({"edatas":dataInt,type:"checkJarAndClass"}); 61 | } 62 | resolve(edatas); 63 | 64 | } 65 | ).catch(function(edatas) { 66 | fliter4error(datas4false); 67 | reject({edatas,type:"checkJarAndClass"}); 68 | }); 69 | }); 70 | } 71 | 72 | // function Init(dispatch) { 73 | export const checkWebXml = () =>{ 74 | return new Promise((resolve,reject) => { 75 | // $.ajax({ 76 | // type:"POST", 77 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_CheckWebXml", 78 | // success(edatas) { 79 | // console.log("ajaxedatas",edatas) 80 | // if(edatas.status!="false") { 81 | // // if(change==false){//测试 82 | // // console.log("---") 83 | // // change=true 84 | // // reject({"edatas":1,type:"init"}); 85 | // // } 86 | // if(edatas==1){ 87 | // reject({"edatas":1,type:"init"}); 88 | // } 89 | // resolve(edatas); 90 | // } 91 | // else { 92 | // fliter4error(edatas); 93 | // reject({edatas,type:"init"}); 94 | // } 95 | // }, 96 | // error(edatas) { 97 | // fliter4error(datas4false); 98 | // reject({edatas,type:"init"}); 99 | // }, 100 | // dataType: "json" 101 | // }); 102 | // 103 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_CheckWebXml', 104 | getFetchParams("get","")) 105 | .then(function(res){ 106 | return res.text(); 107 | } 108 | ).then(edatas => { 109 | // console.log('fetchedatas1',typeof(edatas)); 110 | edatas = edatas.replace(/(^\s*)|(\s*$)/g, "");//返回值有一片空白需要处理 111 | if(edatas.status!="false") { 112 | // if(change==false){//测试 113 | // console.log("---") 114 | // change=true 115 | // reject({"edatas":1,type:"init"}); 116 | // } 117 | if(edatas==1){ 118 | reject({"edatas":1,type:"checkWebXml"}); 119 | } 120 | resolve(edatas); 121 | } 122 | else { 123 | fliter4error(edatas); 124 | reject({edatas,type:"checkWebXml"}); 125 | } 126 | } 127 | ).catch(function(edatas) { 128 | // console.log('ex',ex); 129 | fliter4error(datas4false); 130 | reject({edatas,type:"checkWebXml"}); 131 | }); 132 | }); 133 | } 134 | 135 | 136 | export const doXmlConfig = () => { 137 | return new Promise((resolve,reject) => { 138 | // $.ajax({ 139 | // type:"POST", 140 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_ConfigWebXml", 141 | // success(edatas) { 142 | // 143 | // if(edatas.status!="false") { 144 | // // reject({edatas,type:"doXmlConfig"}); 145 | // resolve(edatas); 146 | // } 147 | // else { 148 | // fliter4error(edatas); 149 | // reject({edatas,type:"doXmlConfig"}); 150 | // } 151 | // }, 152 | // error(edatas) { 153 | // fliter4error(datas4false); 154 | // reject({edatas,type:"doXmlConfig"}); 155 | // }, 156 | // dataType: "json" 157 | // }); 158 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_ConfigWebXml', 159 | getFetchParams("get","")) 160 | .then(function(response) { 161 | return response.text(); 162 | 163 | }).then(edatas => { 164 | edatas = edatas.replace(/(^\s*)|(\s*$)/g, ""); //返回值有一片空白需要处理 165 | if(edatas.status!="false") { 166 | resolve(edatas); 167 | } 168 | else { 169 | fliter4error(edatas); 170 | reject({edatas,type:"doXmlConfig"}); 171 | } 172 | }).catch(function(edatas) { 173 | fliter4error(datas4false); 174 | reject({edatas,type:"doXmlConfig"}); 175 | }); 176 | }); 177 | } 178 | 179 | export const doSqlConfig = () =>{ 180 | // console.log("action3") 181 | return new Promise((resolve,reject) => { 182 | // $.ajax({ 183 | // type:"POST", 184 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_ConfigSql", 185 | // success(edatas) { 186 | // if(edatas.status!="false") { 187 | // resolve(edatas); 188 | // } 189 | // else { 190 | // fliter4error(edatas); 191 | // reject({edatas,type:"doSqlConfig"}); 192 | // } 193 | // }, 194 | // error(edatas) { 195 | // fliter4error(datas4false); 196 | // reject({edatas,type:"doSqlConfig"}); 197 | // }, 198 | // dataType: "json" 199 | // }); 200 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_ConfigSql', 201 | getFetchParams("get","")) 202 | .then(function(response) { 203 | // console.log("Action_ConfigSql",response); 204 | return response.json(); 205 | }).then(edatas=>{ 206 | if(edatas.status!="false") { 207 | // console.log("Action_ConfigSql2",edatas); 208 | 209 | resolve(edatas); 210 | } 211 | else { 212 | fliter4error(edatas); 213 | reject({edatas,type:"doSqlConfig"}); 214 | } 215 | }).catch(function(edatas) { 216 | fliter4error(datas4false); 217 | reject({edatas,type:"doSqlConfig"}); 218 | }); 219 | }); 220 | } 221 | 222 | export const doAppKeyCheck = () => { 223 | // console.log("action4") 224 | return new Promise((resolve,reject) => { 225 | // $.ajax({ 226 | // type:"POST", 227 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList", 228 | // success(edatas) { 229 | // if(edatas.status!="false") { 230 | // resolve(edatas); 231 | // // reject({edatas,type:"doAppKeyCheck"}); 232 | // } 233 | // else { 234 | // fliter4error(edatas); 235 | // reject({edatas,type:"doAppKeyCheck"}); 236 | // } 237 | // }, 238 | // error(edatas) { 239 | // reject({edatas,type:"doAppKeyCheck"}); 240 | // reject(edatas); 241 | // }, 242 | // dataType: "json" 243 | // }); 244 | 245 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList', 246 | getFetchParams("get","")) 247 | .then(function(response) { 248 | // console.log("Action_GetAppList",response) 249 | const edatas = response.json(); 250 | if(edatas.status!="false") { 251 | resolve(edatas); 252 | // reject({edatas,type:"doAppKeyCheck"}); 253 | } 254 | else { 255 | fliter4error(edatas); 256 | reject({edatas,type:"doAppKeyCheck"}); 257 | } 258 | 259 | }).catch(function(edatas) { 260 | reject({edatas,type:"doAppKeyCheck"}); 261 | reject(edatas); 262 | }); 263 | }); 264 | } 265 | 266 | function sleep(numberMillis) { 267 | var now = new Date(); 268 | var exitTime = now.getTime() + numberMillis; 269 | while (true) { 270 | now = new Date(); 271 | if (now.getTime() > exitTime) 272 | return; 273 | } 274 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/Role.js: -------------------------------------------------------------------------------- 1 | import {message} from 'antd'; 2 | //import message from '../_antd1.11.2/message' 3 | import assign from 'object-assign'; 4 | 5 | const server = window.server||""; 6 | 7 | const getFd = (values) => { 8 | let fd = ""; 9 | //var data = new FormData(); 10 | for(let p in values) { 11 | fd += p+"="+encodeURIComponent(values[p])+"&"; 12 | //data.append(p,values[p]); 13 | } 14 | if(fd!="") { 15 | fd = fd.substring(0,fd.length-1); 16 | } 17 | return fd; 18 | } 19 | 20 | const getFetchParams = (method,params)=>{ 21 | let obj = { 22 | method:method, 23 | headers: { 24 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 25 | 'X-Requested-With':'XMLHttpRequest' 26 | }, 27 | }; 28 | if(server=="") { 29 | obj.credentials = "include"; 30 | } 31 | // else { 32 | // obj.mode = "no-cors"; 33 | // } 34 | if(params) { 35 | obj.body = getFd(params); 36 | } 37 | //console.log("obj:",obj); 38 | return obj; 39 | } 40 | 41 | 42 | 43 | function fliter4error(datas) { 44 | message.error("接口发生异常,错误代码["+datas.error+"],错误信息["+datas.msg+"]!",3); 45 | } 46 | 47 | const datas4false = {status:"false",msg:"接口程序异常",error:"000"}; 48 | 49 | export const doDataGet = (id) =>{ 50 | return new Promise((resolve,reject) => { 51 | // changeLoading(true); 52 | // $.ajax({ 53 | // type:"POST", 54 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetRole&id="+id, 55 | // success(edatas) { 56 | // console.log("doDataGet",edatas); 57 | // resolve(edatas); 58 | // }, 59 | // error(edatas) { 60 | // fliter4error(datas4false); 61 | // }, 62 | // dataType: "json" 63 | // }); 64 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetRole&id='+id, 65 | getFetchParams("get",'')) 66 | .then(function(response) { 67 | // console.log("Roldatas:",response); 68 | const datas = response.json(); 69 | // console.log("Roldatas:",datas); 70 | resolve(datas); 71 | }).catch(function(ex) { 72 | // console.log('ex',ex); 73 | reject(ex); 74 | }); 75 | }); 76 | } 77 | 78 | 79 | export const doAppListGet = () =>{ 80 | return new Promise((resolve,reject) => { 81 | // $.ajax({ 82 | // type:"POST", 83 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList", 84 | // success(edatas) { 85 | // resolve(edatas); 86 | // }, 87 | // error(edatas) { 88 | // fliter4error(datas4false); 89 | // }, 90 | // dataType: "json" 91 | // }); 92 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetAppList', 93 | getFetchParams("get","")) 94 | .then(function(response) { 95 | // console.log("Roleresponse:",response); 96 | 97 | const datas = response.json(); 98 | // console.log("RoleDatas:",datas); 99 | resolve(datas); 100 | }).catch(function(ex) { 101 | // console.log('ex',ex); 102 | fliter4error(datas4false); 103 | reject(ex); 104 | }); 105 | }); 106 | } 107 | 108 | 109 | 110 | 111 | export const doRoleSave = (answerStr,formId,roleId,opType,appCode) => { 112 | return new Promise((resolve,reject) => { 113 | // console.log("answerStr",answerStr,"formId",formId,"roleId",roleId,"opType",opType) 114 | let see = $("#"+formId).serialize(); 115 | let url = ""; 116 | if(see.indexOf("appCode=&")==-1){ 117 | url = "/cloudstore/system/ControlServlet.jsp?action=Action_SaveRole&"+see+"&id="+roleId+"&opType="+opType+"&detail="+answerStr 118 | }else{ 119 | url = "/cloudstore/system/ControlServlet.jsp?action=Action_SaveRole&"+see.replace("appCode=","appCode="+appCode)+"&id="+roleId+"&opType="+opType+"&detail="+answerStr; 120 | 121 | } 122 | // $.ajax({ 123 | // type:"POST", //encoding:"GBK", 124 | // url:url, 125 | // success(edatas) { 126 | // resolve(edatas); 127 | // }, 128 | // error(edatas) { 129 | // reject(edatas); 130 | // fliter4error(datas4false); 131 | // }, 132 | // dataType: "json" 133 | // }); 134 | fetch(server+url,getFetchParams("get","")) 135 | .then(function(response) { 136 | const datas = response.json(); 137 | // console.log("datas:",datas); 138 | resolve(datas); 139 | }).catch(function(ex) { 140 | // console.log('ex',ex); 141 | fliter4error(datas4false); 142 | reject(ex); 143 | }); 144 | }); 145 | } 146 | 147 | 148 | 149 | export const doRoleMemberEdit = () =>{ 150 | return new Promise((resolve,reject) => { 151 | const field = action.field; 152 | const key = action.key; 153 | const id = action.id; 154 | const name = action.name; 155 | let find = false; 156 | for(let i=0;i { 192 | // console.log("id",id); 193 | return new Promise((resolve,reject) => { 194 | // $.ajax({ 195 | // type:"POST", 196 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_DelRole&id="+id, 197 | // success(edatas) { 198 | // resolve(edatas); 199 | // }, 200 | // error(edatas) { 201 | // fliter4error(edatas); 202 | // reject(edatas); 203 | // }, 204 | // dataType: "json" 205 | // }); 206 | fetch(server+"/cloudstore/system/ControlServlet.jsp?action=Action_DelRole&id="+id, 207 | getFetchParams("get","")) 208 | .then(function(response) { 209 | const datas = response.json(); 210 | // console.log("datas:",datas); 211 | resolve(datas); 212 | }).catch(function(ex) { 213 | // console.log('ex',ex); 214 | fliter4error(datas4false); 215 | reject(ex); 216 | }); 217 | }); 218 | } 219 | 220 | 221 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/Sys.js: -------------------------------------------------------------------------------- 1 | const server = window.server||""; 2 | 3 | const getFd = (values) => { 4 | let fd = ""; 5 | for(let p in values) { 6 | fd += p+"="+encodeURIComponent(values[p])+"&"; 7 | } 8 | if(fd!="") { 9 | fd = fd.substring(0,fd.length-1); 10 | } 11 | return fd; 12 | } 13 | 14 | const getFetchParams = (method,params)=>{ 15 | let obj = { 16 | method:method, 17 | headers: { 18 | 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 19 | 'X-Requested-With':'XMLHttpRequest' 20 | }, 21 | }; 22 | if(server=="") { 23 | obj.credentials = "include"; 24 | } 25 | if(params) { 26 | obj.body = getFd(params); 27 | } 28 | return obj; 29 | } 30 | 31 | function ParseXML(val) { 32 | if(window.DOMParser) 33 | { 34 | parser=new DOMParser(); 35 | xmlDoc=parser.parseFromString(val,"text/xml"); 36 | } 37 | else // Internet Explorer 38 | { 39 | xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.loadXML(val); 40 | } 41 | return xmlDoc; 42 | } 43 | 44 | 45 | //获取基础组件库的版本号 46 | export const getVersion = () => { 47 | return new Promise((resolve,reject) => { 48 | fetch(server+'/cloudstore/system/version.xml',getFetchParams("get","")) 49 | .then(function(response){ 50 | return response.text(); 51 | }) 52 | .then(function(xmlStr) { 53 | const value = ParseXML(xmlStr).getElementsByTagName('version')[0].childNodes[0].nodeValue; 54 | resolve(value); 55 | }).catch(function(ex) { 56 | reject(ex); 57 | }); 58 | }); 59 | } 60 | 61 | 62 | //是否绑定服务器-获取初始值 63 | export const getTokenStatus = () => { 64 | return new Promise((resolve,reject) => { 65 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetTokenStatus',getFetchParams("get","")) 66 | .then(function(response) { 67 | const datas = response.json(); 68 | resolve(datas); 69 | }).catch(function(ex) { 70 | //console.log('ex',ex); 71 | reject(ex); 72 | }); 73 | }); 74 | } 75 | 76 | 77 | //是否绑定服务器-手动修改 78 | export const GetCloudStoreStatus = (params) => { 79 | return new Promise((resolve,reject) => { 80 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetCloudStoreToken',getFetchParams("post",params)) 81 | .then(function(response) { 82 | const datas = response.json(); 83 | resolve(datas); 84 | }).catch(function(ex) { 85 | //console.log('ex',ex); 86 | reject(ex); 87 | }); 88 | }); 89 | } 90 | 91 | //获取用户联系信息 92 | export const getJoin = params =>{ 93 | return new Promise((resolve,reject) => { 94 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetJoin',getFetchParams("get",params)) 95 | .then(res=> { 96 | const datas = res.json(); 97 | resolve(datas); 98 | }).catch(ex => { 99 | reject(ex); 100 | }); 101 | }); 102 | } 103 | 104 | //提交用户联系信息 105 | export const sendToJoin = params =>{ 106 | return new Promise((resolve,reject) => { 107 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_SendToJoin',getFetchParams("post",params)) 108 | .then(res=> { 109 | const datas = res.json(); 110 | resolve(datas); 111 | }).catch(ex => { 112 | reject(ex); 113 | }); 114 | }); 115 | } 116 | 117 | //获取菜单状态接口 118 | export const getCsMenu = params =>{ 119 | return new Promise((resolve,reject) => { 120 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_GetCsMenu',getFetchParams("post",params)) 121 | .then(res=> { 122 | const datas = res.json(); 123 | resolve(datas); 124 | }).catch(ex => { 125 | reject(ex); 126 | }); 127 | }); 128 | } 129 | 130 | //设置菜单状态接口 131 | export const setCsMenu = params =>{ 132 | return new Promise((resolve,reject) => { 133 | fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_SetCsMenu',getFetchParams("post",params)) 134 | .then(res=> { 135 | const datas = res.json(); 136 | resolve(datas); 137 | }).catch(ex => { 138 | reject(ex); 139 | }); 140 | }); 141 | } 142 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/api/index.js: -------------------------------------------------------------------------------- 1 | //import Constants from '../constants/ActionTypes' 2 | // 3 | //export function addTask(text) { 4 | // return { type: Constants.ADD_TASK, text } 5 | //} 6 | // 7 | //export function doInit() { 8 | // configMsgDatas = []; 9 | // let configMsgData = { 10 | // title:"", 11 | // value:"", 12 | // type:"" 13 | // }; 14 | // configMsgData.title = "步骤一:web.xml自动检测"; 15 | // changeLoading(true); 16 | // $.ajax({ 17 | // type:"POST", 18 | // url:"/cloudstore/system/ControlServlet.jsp?action=Action_CheckWebXml", 19 | // success(edatas) { 20 | // if(edatas.status!="false") { 21 | // const datas = edatas; 22 | // let configMsgBtn = false; 23 | // if(datas=="0") { 24 | // configMsgData.value = "经过检测web.xml已初始化,将自动进入下一步!"; 25 | // configMsgData.type = "success"; 26 | // } 27 | // else if(datas=="1") { 28 | // configMsgData.value = "经过检测web.xml未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 29 | // configMsgData.type = "warning"; 30 | // console.log("系统",configMsgBtn) 31 | // configMsgBtn = true; 32 | // } 33 | // else { 34 | // configMsgData.value = "web.xml检测程序出现问题,请联系管理员!"; 35 | // configMsgData.type = "error"; 36 | // } 37 | // configMsgDatas[0] = configMsgData; 38 | // changeLoading(false); 39 | // //configMsgBtn = false; 40 | // if(datas=="0") { 41 | // doXmlConfig(); 42 | // } 43 | // } 44 | // else { 45 | // fliter4error(edatas); 46 | // configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 47 | // configMsgData.type = "error"; 48 | // configMsgDatas[0] = configMsgData; 49 | // changeLoading(false); 50 | // } 51 | // }, 52 | // error(edatas) { 53 | // fliter4error(datas4false); 54 | // configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 55 | // configMsgData.type = "error"; 56 | // configMsgDatas[0] = configMsgData; 57 | // changeLoading(false); 58 | // }, 59 | // dataType: "json" 60 | // }); 61 | // 62 | // 63 | //// fetch(server+'/cloudstore/system/ControlServlet.jsp?action=Action_CheckWebXml',{ 64 | //// method: 'get', 65 | //// mode: "no-cors", 66 | //// headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'}, 67 | //// credentials: 'include' 68 | //// }).then(function(response) { 69 | //// const edatas = response.json(); 70 | //// if(edatas.status!="false") { 71 | //// const datas = edatas; 72 | //// if(datas=="0") { 73 | //// configMsgData.value = "经过检测web.xml已初始化,将自动进入下一步!"; 74 | //// configMsgData.type = "success"; 75 | //// } 76 | //// else if(datas=="1") { 77 | //// configMsgData.value = "经过检测web.xml未进行初始化,点击确认后系统将自动为您初始化,初始化之后系统将会自动重启,请您先做好保存工作再点击确认!"; 78 | //// configMsgData.type = "warning"; 79 | //// configMsgBtn = true; 80 | //// } 81 | //// else { 82 | //// configMsgData.value = "web.xml检测程序出现问题,请联系管理员!"; 83 | //// configMsgData.type = "error"; 84 | //// } 85 | //// configMsgDatas[0] = configMsgData; 86 | //// changeLoading(false); 87 | //// configMsgBtn = false; 88 | //// if(datas=="0") { 89 | //// doXmlConfig(); 90 | //// } 91 | //// } 92 | //// else { 93 | //// fliter4error(edatas); 94 | //// configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 95 | //// configMsgData.type = "error"; 96 | //// configMsgDatas[0] = configMsgData; 97 | //// changeLoading(false); 98 | //// } 99 | //// 100 | //// }).catch(function(edatas) { 101 | //// fliter4error(datas4false); 102 | //// configMsgData.value = "web.xml检测接口出现问题,请联系管理员!"; 103 | //// configMsgData.type = "error"; 104 | //// configMsgDatas[0] = configMsgData; 105 | //// changeLoading(false); 106 | //// }); 107 | // 108 | //} 109 | ///* 110 | // 111 | // 112 | // return ( dispatch, getStore ) => { 113 | // console.log("getStore:",getStore); 114 | // dispatch({ type: types.ADD_TASK, text }); 115 | // } 116 | // 117 | //export function addTodo(text) { 118 | //return { type: types.ADD_TODO, text } 119 | //} 120 | // 121 | //export function deleteTodo(id) { 122 | //return { type: types.DELETE_TODO, id } 123 | //} 124 | // 125 | //export function editTodo(id, text) { 126 | //return { type: types.EDIT_TODO, id, text } 127 | //} 128 | // 129 | //export function completeTodo(id) { 130 | //return { type: types.COMPLETE_TODO, id } 131 | //} 132 | // 133 | //export function completeAll() { 134 | //return { type: types.COMPLETE_ALL } 135 | //} 136 | // 137 | //export function clearCompleted() { 138 | //return { type: types.CLEAR_COMPLETED } 139 | //} 140 | // 141 | //export const GET_LATEST_DATA = () => { 142 | // return ( dispatch, getStore ) => { 143 | // if(getStore().mainList.length > 0) { 144 | // return; 145 | // } 146 | // getLatestStory().then(data => { 147 | // dispatch(GET_LATEST(data)) 148 | // //首次加载时除了最新的还加载昨天的,因为高度不够无法触发到底部刷新加载历史内容 149 | // dispatch(GET_HISTORY_DATA(getStore().UIState.LoadingDate)) 150 | // dispatch(STOP_LOADING()) 151 | // }) 152 | // } 153 | //} 154 | // 155 | //*/ -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Apps/App.js: -------------------------------------------------------------------------------- 1 | import {Menu, Icon } from 'antd'; 2 | import QueueAnim from 'rc-queue-anim'; 3 | import {WeaMenu} from 'weaCom' 4 | 5 | 6 | import React, { PropTypes, Component } from 'react' 7 | import { bindActionCreators } from 'redux' 8 | import { connect } from 'react-redux' 9 | import * as AppActions from '../../actions/Apps'; 10 | 11 | class Main extends React.Component { 12 | componentDidMount() { 13 | const {actions,params} = this.props; 14 | actions.getAppInfo(params.id); 15 | } 16 | render() { 17 | let {app,actions} = this.props; 18 | !!app && app.pl.sort((a,b)=>{return a.key - b.key}); 19 | return (
20 | {!!app ? ( 21 | app.pl.length == 1 ? 22 | 23 | : 24 |
25 | 26 | { 27 | app.pl.map(o=>{ 28 | return {o.name} 29 | }) 30 | } 31 | 32 | {this.renderIframe()} 33 |
34 | ) 35 | : ""} 36 |
) 37 | } 38 | renderIframe(){ 39 | const {appMenuKey,app} = this.props; 40 | if(!!app){ 41 | return app.pl.map(o=>{ 42 | if(o.key == appMenuKey){ 43 | return 44 | } 45 | }) 46 | } 47 | 48 | } 49 | handleClick(e){ 50 | const {actions} = this.props; 51 | actions.setAppMenuKey(e.key); 52 | } 53 | }; 54 | 55 | function mapStateToProps(state) { 56 | return { 57 | app: state.apps.appinfo.data, 58 | appMenuKey: state.apps.appMenuKey 59 | } 60 | } 61 | 62 | function mapDispatchToProps(dispatch) { 63 | return { 64 | actions: bindActionCreators(AppActions, dispatch) 65 | } 66 | } 67 | 68 | export default connect( 69 | mapStateToProps, 70 | mapDispatchToProps 71 | )(Main) 72 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Apps/AppImage.js: -------------------------------------------------------------------------------- 1 | import {Row,Col,Pagination,Button,Icon,Tag} from 'antd'; 2 | 3 | import QueueAnim from 'rc-queue-anim'; 4 | 5 | 6 | class Main extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | theme:"imgframe", 11 | foottheme:"innerimageFooter", 12 | } 13 | } 14 | componentDidMount() { 15 | // this.props.actions.changeTheme("imgframe","innerimageFooter"); 16 | } 17 | render() { 18 | const {theme,foottheme} = this.state; 19 | const msg = this.props.data; 20 | let innerimage; 21 | let count = 0; 22 | // console.log('msg.imgUrl',msg.imgUrl); 23 | if(msg.imgUrl!=""){ 24 | innerimage =
25 | }else{ 26 | innerimage =
27 | } 28 | return( 29 | 30 |
31 |
32 | {innerimage} 33 |
34 |
35 |

{msg.name}

36 |

{msg.version}

37 |
38 |
39 | 40 |
41 |
42 |
43 | ) 44 | } 45 | isOver(){ 46 | this.setState({ 47 | theme: "imgframemove", 48 | foottheme:"innerimageFooter1", 49 | }); 50 | } 51 | isLeave(){ 52 | this.setState({ 53 | theme: "imgframe", 54 | foottheme:"innerimageFooter", 55 | }); 56 | } 57 | isClick(id,name){ 58 | // console.log("history",this.props.history) 59 | // let ss = id[0].url.split("/"); 60 | // this.props.history.pushState(null,"/newapps/"+ss+"/show"); 61 | let kao = "["+id+"] "+name; 62 | // console.dir(this); 63 | // console.log("kao",kao); 64 | this._reactInternalInstance._context.router.push({ pathname:"/newapps/"+id+"/show",query:{ id: id,name:name }}); 65 | $('html,body').animate({scrollTop:0},'slow'); 66 | } 67 | } 68 | 69 | 70 | export default Main; -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Apps/AppWeaverMenu.js: -------------------------------------------------------------------------------- 1 | import {Menu, Icon } from 'antd'; 2 | import QueueAnim from 'rc-queue-anim'; 3 | import {WeaMenu} from 'weaCom' 4 | 5 | 6 | import React, { PropTypes, Component } from 'react' 7 | import { bindActionCreators } from 'redux' 8 | import { connect } from 'react-redux' 9 | import * as AppActions from '../../actions/Apps'; 10 | 11 | let markIframe = []; 12 | 13 | class Main extends React.Component { 14 | componentDidMount() { 15 | const {actions,params} = this.props; 16 | actions.getAppInfo(params.id); 17 | } 18 | render() { 19 | let {app,actions} = this.props; 20 | // let app = {pl:[{key:'2',name:'2',url:''},{key:'4',name:'4',url:''},{key:'3',name:'3',url:''},{key:'1',name:'1',url:''}]}; 21 | !!app && app.pl.sort((a,b)=>{return a.key - b.key}); 22 | // console.log(app); 23 | const menus = !!app && app.pl.map((o)=>{ 24 | o.id = o.key; 25 | o.icon = '/wui/theme/ecology8/page/images/menuicon/dark/portal01_wev8.png'; 26 | return o; 27 | }); 28 | // let iconType = ['home','setting','file','book','folder','appstore-o','exception']; 29 | return (
30 | {!!app ? ( 31 | app.pl.length == 1 ? 32 | 33 | : 34 |
35 | { 41 | actions.setAppMenuKey(key); 42 | // app.pl.map((o)=>{ 43 | // if(o.key==key) { 44 | // markIframe[o.key] = o.url; 45 | // } 46 | // jQuery("#if"+o.key).hide(); 47 | // }) 48 | // //console.log("key:",key," iframe:",markIframe[key]); 49 | // if(!jQuery("#if"+key).attr("src")) { 50 | // setTimeout(function() { 51 | // console.log("1sa"); 52 | // jQuery("#if"+key).attr("src",markIframe[key] || ""); 53 | // jQuery("#if"+key).show(); 54 | // }, 250); 55 | // } 56 | // else { 57 | // jQuery("#if"+key).show(); 58 | // } 59 | }} 60 | inlineWidth={'100%'} 61 | needSwitch={false} 62 | /> 63 | {this.renderIframe()} 64 |
65 | ) 66 | : ""} 67 |
) 68 | } 69 | // 70 | // 71 | // { 72 | // app.pl.map(o=>{ 73 | // return {o.name} 74 | // }) 75 | // } 76 | // 77 | renderIframe2(){ 78 | const {appMenuKey,app} = this.props; 79 | //console.log("hehe",app,appMenuKey); 80 | if(!!app){ 81 | //console.log("app:",app); 82 | return app.pl.map(o=>{ 83 | // if(o.key == appMenuKey) 84 | // markIframe[o.key] = o.url; 85 | //src={markIframe[o.key]||''} 86 | return 87 | // if(o.key == appMenuKey){ 88 | // return 89 | // } 90 | }) 91 | } 92 | 93 | } 94 | renderIframe(){ 95 | const {appMenuKey,app} = this.props; 96 | //console.log("hehe",app,appMenuKey); 97 | if(!!app){ 98 | return app.pl.map(o=>{ 99 | if(o.key == appMenuKey){ 100 | return 101 | } 102 | }) 103 | } 104 | 105 | } 106 | handleClick(key){ 107 | //console.log("hehekey",key); 108 | 109 | //if(o.key == appMenuKey) 110 | //markIframe[key] 111 | //jQuery("#"+key).attr("") 112 | //console.log("key:",key," iframe:"); 113 | 114 | //const {actions} = this.props; 115 | //actions.setAppMenuKey(key); 116 | } 117 | }; 118 | 119 | function mapStateToProps(state) { 120 | return { 121 | app: state.apps.appinfo.data, 122 | appMenuKey: state.apps.appMenuKey 123 | } 124 | } 125 | 126 | function mapDispatchToProps(dispatch) { 127 | return { 128 | actions: bindActionCreators(AppActions, dispatch) 129 | } 130 | } 131 | 132 | export default connect( 133 | mapStateToProps, 134 | mapDispatchToProps 135 | )(Main) 136 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Apps/NewApps.js: -------------------------------------------------------------------------------- 1 | import { Pagination, Tabs,Menu, Icon ,Row ,Col ,Button,Card } from 'antd'; 2 | import QueueAnim from 'rc-queue-anim'; 3 | //import Row from '../_antd1.11.2/row' 4 | //import Col from '../_antd1.11.2/col' 5 | //import Pagination from '../_antd1.11.2/pagination' 6 | //import Tabs from '../_antd1.11.2/tabs' 7 | //import Menu from '../_antd1.11.2/menu' 8 | //import Button from '../_antd1.11.2/button' 9 | //import Icon from '../_antd1.11.2/icon' 10 | 11 | const TabPane = Tabs.TabPane; 12 | const SubMenu = Menu.SubMenu; 13 | const MenuItemGroup = Menu.ItemGroup; 14 | 15 | import AppImages from './AppImage'; 16 | 17 | import React, { PropTypes, Component } from 'react' 18 | import { bindActionCreators } from 'redux' 19 | import { connect } from 'react-redux' 20 | import * as AppActions from '../../actions/Apps'; 21 | 22 | 23 | 24 | class Apps extends React.Component { 25 | componentDidMount() { 26 | this.props.actions.getPartApp(0,15,{current:1,pageSize:15,}); 27 | } 28 | render() { 29 | const {apps} = this.props; 30 | let params = apps.params; 31 | let partapp = apps.partapp 32 | const that = this; 33 | return ( 34 |
35 | 36 |
37 |
38 | { 39 | partapp && partapp.map(msg=>{ 40 | return ( 41 |
42 | 43 | 44 |
45 |

{msg.name}

46 |

{msg.version}

47 |
48 |
49 |
50 | ) 51 | }) 52 | } 53 |
54 |
55 | 56 |
57 |
58 |
59 |
60 | ) 61 | } 62 | isClick(msg){ 63 | window.open("/cloudstore/system/index.jsp#/"+msg.code+"/set"); 64 | } 65 | handleChange(page){ 66 | let params = this.props.apps.params; 67 | params.current = page; 68 | let pagesize = params.pageSize; 69 | let left = pagesize*(page-1); 70 | let right = page*pagesize 71 | this.props.actions.getPartApp(left,right,params); 72 | } 73 | 74 | }; 75 | 76 | Apps.propTypes = { 77 | apps: PropTypes.object.isRequired, 78 | actions: PropTypes.object.isRequired 79 | } 80 | 81 | function mapStateToProps(state) { 82 | return { 83 | apps: state.apps 84 | } 85 | } 86 | 87 | function mapDispatchToProps(dispatch) { 88 | return { 89 | actions: bindActionCreators(AppActions, dispatch) 90 | } 91 | } 92 | 93 | export default connect( 94 | mapStateToProps, 95 | mapDispatchToProps 96 | )(Apps) 97 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Apps/NewAppsDetail.js: -------------------------------------------------------------------------------- 1 | import {Menu, Tabs ,Row,Col,Pagination,Button,Icon,Tag} from 'antd'; 2 | //import Row from '../_antd1.11.2/row' 3 | //import Col from '../_antd1.11.2/col' 4 | //import Pagination from '../_antd1.11.2/pagination' 5 | //import Tabs from '../_antd1.11.2/tabs' 6 | //import Menu from '../_antd1.11.2/menu' 7 | //import Button from '../_antd1.11.2/button' 8 | //import Icon from '../_antd1.11.2/icon' 9 | //import Tag from '../_antd1.11.2/tag' 10 | 11 | import AppImages from './AppImage'; 12 | import Pro from 'promise'; 13 | const TabPane = Tabs.TabPane; 14 | import React, { PropTypes, Component } from 'react' 15 | import { bindActionCreators } from 'redux' 16 | import { connect,ReactRouter } from 'react-redux' 17 | import * as AppActions from '../../actions/Apps'; 18 | 19 | 20 | class AppDetail extends React.Component { 21 | constructor(props) { 22 | super(props); 23 | } 24 | 25 | componentDidMount() { 26 | this.props.actions.getAppInfo(this.props.params.id); 27 | } 28 | 29 | 30 | render() { 31 | let taht = this; 32 | let {appinfo} = this.props; 33 | return( 34 |
35 |
36 |
37 | {appinfo&&appinfo.length!=1? 38 |
39 | 40 | { 41 | appinfo.data&&appinfo.data.pl.map(function(msg){ 42 | return( 43 | {msg.name} 44 | ) 45 | }) 46 | } 47 | 48 |
49 | : 50 | 51 | } 52 |
53 | 54 |
55 |
56 |
57 | ) 58 | } 59 | handleClick(e){ 60 | this.props.actions.getAppInfo(this.props.params.id,e.item.props.index,e.key); 61 | } 62 | } 63 | 64 | 65 | AppDetail.propTypes = { 66 | // init: PropTypes.array.isRequired, 67 | appinfo: PropTypes.object.isRequired, 68 | actions: PropTypes.object.isRequired 69 | } 70 | 71 | function mapStateToProps(state) { 72 | return { 73 | appinfo: state.apps.appinfo 74 | } 75 | } 76 | 77 | function mapDispatchToProps(dispatch) { 78 | return { 79 | actions: bindActionCreators(AppActions, dispatch) 80 | } 81 | } 82 | 83 | export default connect( 84 | mapStateToProps, 85 | mapDispatchToProps 86 | )(AppDetail) 87 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Auth.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react' 2 | import { bindActionCreators } from 'redux' 3 | import { connect } from 'react-redux' 4 | import * as AuthActions from '../actions/Auth'; 5 | 6 | import { Row,Col,Breadcrumb,Icon,Table,Input,Button,Alert } from 'antd'; 7 | 8 | 9 | const InputGroup = Input.Group; 10 | 11 | import QueueAnim from 'rc-queue-anim'; 12 | 13 | function handleSearch(record,value,actions) { 14 | actions.doKeySave(record.code,value);//applist getApplist 15 | } 16 | 17 | function reSizeHeight() { 18 | // jQuery(".Container").height(jQuery("body").height()); 19 | document.querySelector('.Container').style.height = document.getElementsByTagName('body')[0].style.height; 20 | } 21 | 22 | function expandedRowRender(record) { 23 | //console.log(record); 24 | let pageArr = []; 25 | const pl = record.pl; 26 | for(let i=0;i{page.name}地址:{page.url}

29 | } 30 | return

应用详细描述:{record.desc}

{pageArr}
; 31 | } 32 | // handleSearch.bind(this,this.props.record,this.state.value) 33 | class Save extends React.Component { 34 | 35 | render() { 36 | const {actions,record,auth} = this.props; 37 | return 38 | 39 |
40 | 43 |
44 |
; 45 | } 46 | handleChange(e) { 47 | // console.log("e",e); 48 | this.props.actions.changeValue(e.target.value) 49 | } 50 | }; 51 | 52 | 53 | 54 | class Auth extends React.Component { 55 | 56 | componentDidMount() { 57 | const {actions} = this.props; 58 | actions.doAppListGet(); 59 | } 60 | 61 | 62 | render() { 63 | const {auth,actions} = this.props; 64 | let datas = auth.applist; 65 | let that = this; 66 | const columns = [ 67 | {title: '应用编码', dataIndex: 'code', key: 'code'}, 68 | {title: '应用名称', dataIndex: 'name', key: 'name'}, 69 | {title: '版本', dataIndex: 'version', key: 'version'}, 70 | {title: '授权状态', dataIndex: 'keyDate', key: 'keyDate', render:function(text,record) { 71 | if(""==record.keyDate) 72 | return
未授权
73 | else if(record.keyDate.indexOf("9999")==0) 74 | return
永久授权
75 | else 76 | return
授权至[{record.keyDate}]
77 | }}, 78 | {title: '授权码', dataIndex: 'key', key: 'keyStr', render:function(text,record) { 79 | //if(record.keyDate.indexOf("9999")==0) 80 | //return
{record.key}
81 | return
82 | }} 83 | ]; 84 | return ( 85 | 86 |
87 |
94 | 98 | 99 | 100 | ); 101 | } 102 | }; 103 | 104 | 105 | Auth.propTypes = { 106 | // init: PropTypes.array.isRequired, 107 | auth: PropTypes.object.isRequired, 108 | actions: PropTypes.object.isRequired 109 | } 110 | 111 | function mapStateToProps(state) { 112 | return { 113 | auth: state.auth 114 | } 115 | } 116 | 117 | function mapDispatchToProps(dispatch) { 118 | return { 119 | actions: bindActionCreators(AuthActions, dispatch) 120 | } 121 | } 122 | 123 | export default connect( 124 | mapStateToProps, 125 | mapDispatchToProps 126 | )(Auth) -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Init.js: -------------------------------------------------------------------------------- 1 | //**************************************** 2 | import React, { PropTypes, Component } from 'react' 3 | import { bindActionCreators } from 'redux' 4 | import { connect } from 'react-redux' 5 | import * as InitActions from '../actions/Init'; 6 | // import InitStore from '../reducers/Init'; 7 | // const InitActions = InitStore.Actions; 8 | //**************************************** 9 | import { Row,Col,Breadcrumb,Icon,Steps,Alert,Button } from 'antd'; 10 | 11 | 12 | 13 | const Step = Steps.Step; 14 | 15 | import QueueAnim from 'rc-queue-anim'; 16 | 17 | function reSizeHeight() { 18 | // jQuery(".Container").height(jQuery("body").height()); 19 | document.querySelector('.Container').style.height = document.getElementsByTagName('body')[0].style.height; 20 | } 21 | 22 | class Init extends React.Component { 23 | 24 | componentDidMount() { 25 | reSizeHeight(); 26 | } 27 | 28 | render() { 29 | // console.log("render") 30 | //**************************************** 31 | // const {msgsArr,msgsBtn} = this.state; 32 | const {init,actions} = this.props; 33 | let msgsArr = init.msgsArr; 34 | let msgsBtn = init.msgsBtn; 35 | //**************************************** 36 | 37 | const steps = [{ 38 | title: '步骤一', 39 | description: 'jar包、class文件自动检测' 40 | },{ 41 | title: '步骤二', 42 | description: 'web.xml自动检测' 43 | },{ 44 | title: '步骤三', 45 | description: 'web.xml自动配置和备份' 46 | },{ 47 | title: '步骤四', 48 | description: '应用数据库脚本执行及检测' 49 | }, { 50 | title: '步骤五', 51 | description: '完成初始化并进行授权状态检测' 52 | }].map((s, i) => ); 53 | //console.log("tesss1"); //{steps} 54 | // 55 | return ( 56 | 57 |
58 | 0?(msgsArr.length-1):0}>{steps} 59 |
60 | 61 | { 62 | msgsArr.map(function(data,index) { 63 | return ( 64 |
65 | 69 |
70 | ) 71 | }) 72 | } 73 |
74 |
75 |
76 | {msgsArr.length==0 && ()} 77 | {msgsArr.length==5 && ()} 78 | {msgsBtn && ()} 79 |
80 |
81 |
82 | ) 83 | } 84 | }; 85 | 86 | //**************************************** 87 | //组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求 88 | Init.propTypes = { 89 | // init: PropTypes.array.isRequired, 90 | init: PropTypes.object.isRequired, 91 | actions: PropTypes.object.isRequired 92 | } 93 | //mapStateToProps是一个函数。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系 94 | function mapStateToProps(state) { 95 | return { 96 | init: state.init 97 | } 98 | } 99 | 100 | //mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象 101 | function mapDispatchToProps(dispatch) { 102 | return { 103 | actions: bindActionCreators(InitActions, dispatch) 104 | } 105 | } 106 | 107 | export default connect( 108 | mapStateToProps, 109 | mapDispatchToProps 110 | )(Init) 111 | 112 | // export default Init; 113 | //**************************************** -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/RoleList.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react' 2 | import { bindActionCreators } from 'redux' 3 | import { connect } from 'react-redux' 4 | import * as RoleActions from '../actions/Role'; 5 | // 6 | //const ReactRouter = require('react-router'); 7 | //let {Link} = ReactRouter; 8 | import Link from 'react-router/lib/Link'; 9 | import { Row,Col,Breadcrumb,Icon,Button,Form,Input,Popconfirm,message } from 'antd'; 10 | 11 | 12 | const FormItem = Form.Item; 13 | // import Com from '../../ComponentsV1/index'; 14 | // const WeaInput = Com.Input; 15 | // const WeaInput4Hrm = Com.Input4Hrm; 16 | // const WeaInput4Dep = Com.Input4Dep; 17 | // const WeaInput4Com = Com.Input4Com; 18 | // const WeaTable = Com.Table; 19 | // const WeaTableAction = WeaTable.TableActions; 20 | // const Top = Com.Top; 21 | // const SearchForm = Com.SearchForm; 22 | 23 | import {WeaInput,WeaInput4Hrm,WeaInput4Dep,WeaInput4Com} from 'weaCom'; 24 | import {WeaTable,WeaTop,WeaSearchForm} from 'weaCom'; 25 | const WeaTableAction = WeaTable.TableActions; 26 | // import RoleStore from '../reducers/Role'; 27 | // const RoleActions = RoleStore.Actions; 28 | import QueueAnim from 'rc-queue-anim'; 29 | 30 | 31 | 32 | function doRoleDel(id) { 33 | RoleActions.doRoleDel(id,WeaTableAction.search(tableOptions)); 34 | } 35 | 36 | function reSizeHeight() { 37 | // jQuery(".Container").height(jQuery("body").height()); 38 | document.querySelector('.Container').style.height = document.getElementsByTagName('body')[0].style.height; 39 | } 40 | const columns = [ 41 | { 42 | key: '1', 43 | title: '角色名称', 44 | dataIndex: 'roleName' 45 | }, 46 | { 47 | key: '2', 48 | title: '角色编码', 49 | dataIndex: 'roleCode' 50 | }, 51 | { 52 | key: '3', 53 | title: '应用编号', 54 | dataIndex: 'appCode' 55 | }, 56 | { 57 | key: '6', 58 | title: '操作', 59 | dataIndex: '', 60 | render:function(text,record) { 61 | const id = record.id; 62 | const toEdit = "/roleList/"+id+"/edit"; 63 | const toShow = "/roleList/"+id+"/show"; 64 | return ( 65 | 66 | 删除 67 | 68 | 69 | 编辑 70 | 71 | 查看 72 | 73 | ) 74 | } 75 | } 76 | ]; 77 | 78 | const tableOptions = { 79 | formId:"dyfform", //表单id 80 | dataUrl:"/cloudstore/system/ControlServlet.jsp?action=Action_GetRoles", //数据,返回固定格式json 81 | numUrl:"/cloudstore/system/ControlServlet.jsp?action=Action_GetRolesNum", //最大数量 82 | columns:columns, 83 | pageNum:10, 84 | quickSearch:true, //是否开启快速搜素 85 | maxSearchNum:5000, //开启快速搜索时如果大于maxSearchNum自动转为关闭快速搜索状态 86 | } 87 | 88 | class RoleList extends React.Component { 89 | 90 | componentDidMount() { 91 | reSizeHeight(); 92 | this.doSearch(tableOptions); 93 | this.props.actions.putDispatch() 94 | // this.props.actions.doClean() 95 | } 96 | 97 | render() { 98 | return this.props.children?this.renderChildren():this.renderList(); 99 | } 100 | renderChildren() { 101 | return this.props.children; 102 | } 103 | renderList() { 104 | let {role} = this.props; 105 | // console.dir(role) 106 | // console.log("showForm",role&&role.showForm) 107 | return ( 108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 |
117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | ) 142 | } 143 | doSearch(tableOptions) { 144 | WeaTableAction.search(tableOptions); 145 | } 146 | doShowForm() { 147 | this.props.actions.showForm(); 148 | WeaTableAction.search(tableOptions); 149 | } 150 | 151 | 152 | }; 153 | 154 | RoleList.propTypes = { 155 | // init: PropTypes.array.isRequired, 156 | role: PropTypes.object.isRequired, 157 | actions: PropTypes.object.isRequired 158 | } 159 | 160 | function mapStateToProps(state) { 161 | return { 162 | role: state.role 163 | } 164 | } 165 | 166 | function mapDispatchToProps(dispatch) { 167 | return { 168 | actions: bindActionCreators(RoleActions, dispatch) 169 | } 170 | } 171 | 172 | export default connect( 173 | mapStateToProps, 174 | mapDispatchToProps 175 | )(RoleList) 176 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/components/Sys.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react' 2 | import { bindActionCreators } from 'redux' 3 | import { connect } from 'react-redux' 4 | import { Form, Switch, Row, Col, Alert, Button, Modal, Input } from 'antd'; 5 | import QueueAnim from 'rc-queue-anim'; 6 | 7 | import Pro from 'promise'; 8 | import * as sysActions from '../actions/Sys'; 9 | 10 | class Main extends React.Component { 11 | componentDidMount() { 12 | const {actions} = this.props; 13 | actions.getVersion(); 14 | actions.getTokenStatus(); 15 | actions.getCsMenu({type:'pc'}); 16 | actions.getCsMenu({type:'mobile'}); 17 | actions.getJoin(); 18 | actions.setSuccess(false); 19 | } 20 | render() { 21 | const {version,tokenBol,visible,actions,canSubmit,loading,success,pcIsOpen,mobileIsOpen,orderFields,isJoin} = this.props; 22 | const {getFieldProps} = this.props.form; 23 | const formItemLayout = { 24 | labelCol: { span: 4 }, 25 | wrapperCol: { span: 14 }, 26 | }; 27 | const formModelLayout = { 28 | labelCol: { span: 7 }, 29 | wrapperCol: { span: 14 }, 30 | }; 31 | return ( 32 | 33 |
34 |
35 | 36 | 37 |
38 |
{version}
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 返 回, 54 | 55 | ]}> 56 | 57 | 58 | 59 | 60 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 74 | 75 | 76 | 77 | {success ? 78 | 79 | 80 | 81 | 82 | 83 | 84 | : ""} 85 | 86 | 87 | 88 | 89 | 90 |

为了更好的提升服务,我们邀请您一起加入“泛微云”计划。该计划可以完成以下功能:

91 |

1、应用商店中应用功能查阅、申请试用、在线体验及下载

92 |

2、应用商店中应用新版本更新提示、新版本下载

93 |

3、应用商店中应用评论以及查阅评论

94 |

其它服务陆续增加中...

95 |

加入“泛微云”需要您的系统的服务器可以访问外网,我们不会收集您任何信息,仅做连接标识,如果您不能访问外网并且想加入计划,可登录此地址【http://e-cloudstore.com】提交您的注册或者申请意向。

96 | } type="info" /> 97 | 98 | 99 | 100 | 101 | 102 |
103 | {tokenBol?(一键登录/注册):(请进行初始化)} 104 | 105 | 106 | 107 |

初始化配置通过之后,可开启一键注册并登录云商店,此链接管理员使用,管理员登录我们不会收集任何信息。

108 | } type="info" /> 109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 | 117 | 118 | 119 |

开启后将自动配置一个菜单到您的门户顶部菜单中,具体位置为【顶部菜单->商店】,如果您同意开放,贵公司所有账号均可登录云商店,登录时您的以下信息会被收集:

120 |

单位、部门、岗位、姓名,我们承诺您的信息仅用来被登记注册,不会用作其它用途。

121 | } type="warning" /> 122 | 123 | 124 | 125 | 126 | 127 |
128 | 129 | 130 | 131 | 132 |

开启后将自动配置一个菜单到您的移动APP中,注意需要在emobile端重启,并手动开启菜单权限,具体位置【APP应用首页->商店】。

133 | } type="warning" /> 134 | 135 | 136 | 137 | 138 | 139 |
140 |
2783225228
141 | 142 | 143 | 144 |

如果您应用部署/使用、客户端使用或者加入“云计划”过程中遇到困难,请通过此QQ联系我们。

145 | } type="info" /> 146 | 147 | 148 | 149 | 150 | 151 | 152 | ) 153 | } 154 | shutDown(){ 155 | const {actions,success} = this.props; 156 | actions.setModelVisible(false); 157 | success && actions.getJoin(); 158 | actions.setSuccess(false) 159 | } 160 | handleOk(){ 161 | const {actions} = this.props; 162 | const {getFieldsValue,validateFields} = this.props.form; 163 | validateFields((errors,valus)=>{ 164 | if(!!errors){ 165 | return 166 | }else{ 167 | let params = getFieldsValue(); 168 | actions.sendToJoin(params); 169 | setTimeout(()=>{actions.canSubmit(false)},500) 170 | } 171 | }) 172 | } 173 | onChangeTokenbinding(type,bool){ 174 | const {actions} = this.props; 175 | actions.setCsMenu({type:type,isOpen:bool}); 176 | // let bol = checked; 177 | // let params = bol? {"config":0}:{"config":1}; 178 | // actions.getVersion(); 179 | // actions.getTokenStatus(); 180 | // actions.GetCloudStoreStatus(params); 181 | } 182 | checkMail(rule,value,callback){ 183 | checkMail(value) ? callback() : callback([new Error('请输入正确的邮箱')]) ; 184 | } 185 | checkPhoneNum(rule,value,callback){ 186 | checkPhoneNum(value) ? callback() : callback([new Error('请输入正确的电话号码')]); 187 | } 188 | } 189 | 190 | 191 | const checkMail = value => { 192 | return /^([a-z0-9_\-\.]+)@(([a-z0-9]+[_\-]?)\.)+[a-z]{2,3}$/.test(value) 193 | } 194 | 195 | const checkPhoneNum = value => { 196 | return /^(1(([3,8][0-9])|(4[5,7])|(5[^4])|(7[0,6,7,8])))\d{8}$/.test(value) 197 | } 198 | 199 | Main.propTypes = { 200 | version: PropTypes.string.isRequired, 201 | actions: PropTypes.object.isRequired, 202 | tokenBol: PropTypes.bool.isRequired, 203 | visible: PropTypes.bool.isRequired, 204 | canSubmit: PropTypes.bool.isRequired, 205 | loading: PropTypes.bool.isRequired, 206 | success: PropTypes.bool.isRequired, 207 | pcIsOpen: PropTypes.bool.isRequired, 208 | mobileIsOpen: PropTypes.bool.isRequired, 209 | isJoin: PropTypes.bool.isRequired, 210 | } 211 | 212 | 213 | function mapStateToProps(state) { 214 | //console.log("state:",state); 215 | return { 216 | version: state.sys.version, 217 | tokenBol: state.sys.tokenBol, 218 | visible: state.sys.modelVisible, 219 | orderFields: state.sys.orderFields, 220 | canSubmit: state.sys.canSubmit, 221 | loading: state.sys.loading, 222 | success: state.sys.success, 223 | pcIsOpen: state.sys.pcIsOpen, 224 | mobileIsOpen: state.sys.mobileIsOpen, 225 | isJoin: state.sys.isJoin, 226 | } 227 | } 228 | 229 | function mapDispatchToProps(dispatch) { 230 | return { 231 | actions: bindActionCreators(sysActions, dispatch) 232 | } 233 | } 234 | 235 | 236 | export default connect( 237 | mapStateToProps, 238 | mapDispatchToProps 239 | )(Form.create({ 240 | onFieldsChange: (props, fields) => { 241 | const orderFields = Object.assign({},props.orderFields,fields); 242 | props.actions.saveOrderFields(orderFields); 243 | const mail = orderFields["mail"] ? orderFields["mail"].value:""; 244 | const mobile = orderFields["mobile"] ? orderFields["mobile"].value:""; 245 | checkMail(mail) && checkPhoneNum(mobile) ? props.actions.canSubmit(true) : props.actions.canSubmit(false); 246 | }, 247 | mapPropsToFields: props => { 248 | const {orderFields} = props; 249 | return orderFields; 250 | } 251 | })(Main)) -------------------------------------------------------------------------------- /02.react4pe/project/demo2/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | import keyMirror from 'keymirror'; 2 | 3 | const Constants = keyMirror({ 4 | INIT: null, 5 | AUTH: null, 6 | ROLE_DEL:null, 7 | ROLE_INIT:null, 8 | ROLE_DATEGET:null, 9 | ROLE_MEMBERADD:null, 10 | ROLE_MEMBERDEL:null, 11 | SAVEBASICFORM:null, 12 | ROLE_GET:null, 13 | GETPARTAPP:null, 14 | GETCOUNT:null, 15 | GETAPPINFO:null, 16 | GETVERSION:null, 17 | GETTOKENBINDING:null, 18 | ROLE_PUTHAVENOSAVE:null, 19 | ROLE_SELECTDATAS:null, 20 | ROLE_CLEAN:null, 21 | SHOWFORM:null, 22 | CHANGEVALUE:null, 23 | CHANGETHEME:null, 24 | CLEANOBJ:null, 25 | RLOADING:null, 26 | RLOADED:null, 27 | GCLEAN:null, 28 | SET_MODEL_VISIBLE:null, //用户联系方式弹框 29 | SET_CANSUBMIT:null, //用户联系方式提交权限 30 | SAVE_APPFIELDS:null, //表单绑定redux实时监测 31 | SET_SUCCESS:null, //提交成功标志 32 | SET_PCISOPEN:null, //设置pc地址开启状态 33 | SET_MOBILEISOPEN:null, //设置mobile地址开启状态 34 | SET_LOADING:null, //设置提交loading 35 | SET_APP_MENU_KEY:null, //app菜单 36 | SET_ISJOIN:null //设置是否已经加入过 37 | }); 38 | export default Constants 39 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/index.js: -------------------------------------------------------------------------------- 1 | //import 'babel-polyfill' 2 | //import 'fetch-polyfill' 3 | //import 'fetch-ie8' 4 | //require('es6-promise').polyfill(); 5 | //import 'es5-shim' 6 | //import 'es6-promise' 7 | import React from 'react' 8 | import { render } from 'react-dom' 9 | import {combineReducers,applyMiddleware} from 'redux'; 10 | import { Provider, connect } from 'react-redux' 11 | 12 | //import Provider from 'react-redux/lib/components/Provider' 13 | //import connect from 'react-redux/lib/components/connect' 14 | 15 | import configureStore from './store/configureStore' 16 | import rootReducer from './reducers/index' 17 | import thunkMiddleware from 'redux-thunk/lib/index' 18 | 19 | 20 | //const ReactRouter = require('react-router'); 21 | //let { Router, Route, Link, useRouterHistory, IndexRedirect } = ReactRouter; 22 | import Router from 'react-router/lib/Router' 23 | import Route from 'react-router/lib/Route' 24 | import Link from 'react-router/lib/Link' 25 | import useRouterHistory from 'react-router/lib/useRouterHistory' 26 | import IndexRedirect from 'react-router/lib/IndexRedirect' 27 | 28 | import { createHistory, useBasename, createHashHistory } from 'history' 29 | //browserHistory 30 | import { Breadcrumb, Menu, Icon } from 'antd'; 31 | 32 | 33 | import './style/index.css'; 34 | 35 | import Init from './components/Init'; 36 | import Auth from './components/Auth'; 37 | import AppDetail from './components/Apps/NewAppsDetail'; 38 | import RoleList from './components/RoleList'; 39 | import Role from './components/Role'; 40 | import NewApps from './components/Apps/NewApps'; 41 | import QueueAnim from 'rc-queue-anim'; 42 | import Home from './Home'; 43 | import Sys from './components/Sys'; 44 | import App from './components/Apps/App'; 45 | import AppWeaverMenu from './components/Apps/AppWeaverMenu'; 46 | 47 | const store = configureStore( 48 | rootReducer, 49 | applyMiddleware(//无需返回对象,只需返回一个带dispatch的函数 50 | thunkMiddleware 51 | ) 52 | ); 53 | 54 | store.subscribe(()=>{ 55 | //console.log("redux,state监听:",store.getState()); 56 | }); 57 | 58 | 59 | const browserHistory = useRouterHistory(createHashHistory)({ 60 | 61 | }); 62 | 63 | //browserHistory.basename="/cloudstore/system"; 64 | function requireCredentials(nextState, replace, next) { 65 | // console.log("nextstate",nextState); 66 | const query = nextState.location.query; 67 | // console.log("querytitle",query.title); 68 | nextState.routes[2].breadcrumbName = query.id+" "+query.name; 69 | next();//跳转函数 70 | } 71 | 72 | class Root extends React.Component { 73 | render() { 74 | return ( 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | ); 95 | } 96 | }; 97 | // 98 | 99 | 100 | 101 | 102 | ReactDOM.render(, document.getElementById('container')); 103 | 104 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/index4ec8.js: -------------------------------------------------------------------------------- 1 | //import 'babel-polyfill' 2 | //import 'fetch-polyfill' 3 | //import 'fetch-ie8' 4 | //require('es6-promise').polyfill(); 5 | //import 'es5-shim' 6 | //import 'es6-promise' 7 | import React from 'react' 8 | import { render } from 'react-dom' 9 | import {combineReducers,applyMiddleware} from 'redux'; 10 | import { Provider, connect } from 'react-redux' 11 | 12 | //import Provider from 'react-redux/lib/components/Provider' 13 | //import connect from 'react-redux/lib/components/connect' 14 | 15 | import configureStore from './store/configureStore' 16 | import rootReducer from './reducers/index' 17 | import thunkMiddleware from 'redux-thunk/lib/index' 18 | 19 | //const ReactRouter = require('react-router'); 20 | //let { Router, Route, Link, useRouterHistory, IndexRedirect } = ReactRouter; 21 | import Router from 'react-router/lib/Router' 22 | import Route from 'react-router/lib/Route' 23 | import Link from 'react-router/lib/Link' 24 | import useRouterHistory from 'react-router/lib/useRouterHistory' 25 | import IndexRedirect from 'react-router/lib/IndexRedirect' 26 | 27 | import { createHistory, useBasename, createHashHistory } from 'history' 28 | //browserHistory 29 | import { Breadcrumb, Menu, Icon } from 'antd'; 30 | import './style/index.css'; 31 | 32 | import Init from './components/Init'; 33 | import Auth from './components/Auth'; 34 | import AppDetail from './components/Apps/NewAppsDetail'; 35 | import RoleList from './components/RoleList'; 36 | import Role from './components/Role'; 37 | import NewApps from './components/Apps/NewApps'; 38 | import QueueAnim from 'rc-queue-anim'; 39 | import Home from './Home4ec8'; 40 | import Sys from './components/Sys'; 41 | 42 | const store = configureStore( 43 | rootReducer, 44 | applyMiddleware(//无需返回对象,只需返回一个带dispatch的函数 45 | thunkMiddleware 46 | ) 47 | ); 48 | 49 | // store.subscribe(() => 50 | // console.log(store.getState()) 51 | // ); 52 | 53 | 54 | const browserHistory = useRouterHistory(createHashHistory)({ 55 | 56 | }); 57 | 58 | //browserHistory.basename="/cloudstore/system"; 59 | function requireCredentials(nextState, replace, next) { 60 | // console.log("nextstate",nextState); 61 | const query = nextState.location.query; 62 | // console.log("querytitle",query.title); 63 | nextState.routes[2].breadcrumbName = query.id+" "+query.name; 64 | next();//跳转函数 65 | } 66 | 67 | class Root extends React.Component { 68 | render() { 69 | return ( 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | ); 91 | } 92 | }; 93 | 94 | ReactDOM.render(, document.getElementById('container')); 95 | 96 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/plugin.js: -------------------------------------------------------------------------------- 1 | var innerCom = { 2 | indexCb:function(value) {} 3 | } 4 | 5 | var params = document.getElementById("csplugin").getAttribute("params"); 6 | var paramArr = params?params.split(","):[]; 7 | 8 | function findApp(s) { 9 | var find = false; 10 | for(var i=0;i0) { 75 | loadJs("/cloudstore/resource/pc/shim/shim.min.js",function() { 76 | loadResource(); 77 | }); 78 | } 79 | else { 80 | loadResource(); 81 | } 82 | 83 | } 84 | 85 | function loadJs(url, callback) { 86 | //console.log(url); 87 | var script = document.createElement("script"); 88 | script.type = "text/javascript"; 89 | script.charset = "utf-8"; 90 | // IE 91 | if (script.readyState) { 92 | script.onreadystatechange = function () { 93 | if (script.readyState == "loaded" || script.readyState == "complete") { 94 | script.onreadystatechange = null; 95 | callback(); 96 | } 97 | }; 98 | } else { // others 99 | script.onload = function () { 100 | callback(); 101 | }; 102 | } 103 | //console.log("url1:",url); 104 | script.src = url; 105 | //if(!isIE8()) 106 | //document.head.appendChild(script); 107 | //else 108 | document.getElementsByTagName('head')[0].appendChild(script); 109 | } 110 | 111 | function loadCss(url, callback) { 112 | //console.log(url); 113 | var css = document.createElement("link"); 114 | css.setAttribute('rel', 'stylesheet'); 115 | css.setAttribute('type', 'text/css'); 116 | css.setAttribute('href', url); 117 | // IE 118 | if (css.readyState) { 119 | css.onreadystatechange = function () { 120 | if (css.readyState == "loaded" || css.readyState == "complete") { 121 | css.onreadystatechange = null; 122 | callback(); 123 | } 124 | }; 125 | } else { // others 126 | css.onload = function () { 127 | callback(); 128 | }; 129 | } 130 | css.src = url; 131 | document.getElementsByTagName('head')[0].appendChild(css); 132 | } 133 | 134 | function loadMeta(callback) { 135 | var obj = document.createElement("meta"); 136 | obj.setAttribute('http-equiv','X-UA-Compatible'); 137 | obj.setAttribute('content','IE=8'); 138 | if (obj.readyState) { 139 | obj.onreadystatechange = function () { 140 | if (obj.readyState == "loaded" || obj.readyState == "complete") { 141 | obj.onreadystatechange = null; 142 | callback(); 143 | } 144 | }; 145 | } else { // others 146 | obj.onload = function () { 147 | callback(); 148 | }; 149 | } 150 | document.getElementsByTagName('head')[0].appendChild(obj); 151 | } 152 | 153 | module.exports = innerCom; -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Apps.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | partapp:[], 7 | count:0, 8 | appinfo:{}, 9 | params:{}, 10 | appMenuKey: '1' 11 | } 12 | //init初始化值要和return值格式相同,否则assign后变成空了 13 | export default function task(state = initialState, action) { 14 | // console.log("action:",action); 15 | switch (action.type) { 16 | case Constants.SET_APP_MENU_KEY: 17 | return objectAssign({}, state, { 18 | appMenuKey:action.data, 19 | }) 20 | case Constants.GETPARTAPP: 21 | return objectAssign({}, state, { 22 | partapp:action.partapp, 23 | }) 24 | case Constants.GETCOUNT: 25 | return objectAssign({}, state, { 26 | count:action.count, 27 | params:action.params, 28 | }) 29 | case Constants.GETAPPINFO: 30 | return objectAssign({}, state, { 31 | appinfo:action.appinfo, 32 | }) 33 | case Constants.CHANGETHEME: 34 | return objectAssign({}, state, { 35 | theme:theme, 36 | foottheme:foottheme, 37 | }) 38 | 39 | default: 40 | return state 41 | } 42 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Auth.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | // id: 0, 7 | applist:[], 8 | loding:false, 9 | value:"", 10 | } 11 | //init初始化值要和return值格式相同,否则assign后变成空了 12 | export default function task(state = initialState, action) { 13 | // console.log("action:",action); 14 | // console.dir(state) 15 | // console.log(Constants.AUTH); 16 | switch (action.type) { 17 | case Constants.AUTH: 18 | return objectAssign({}, state, { 19 | // id: state.init.reduce((maxId,todo) => Math.max(todo.id, maxId),0)+1, 20 | applist:action.applist, 21 | loding:action.loding 22 | }) 23 | case Constants.CHANGEVALUE: 24 | return objectAssign({}, state, { 25 | // id: state.init.reduce((maxId,todo) => Math.max(todo.id, maxId),0)+1, 26 | value:action.value 27 | }) 28 | default: 29 | return state 30 | } 31 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Init.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | // id: 0, 7 | msgsArr:[], 8 | msgsBtn:false, 9 | 10 | } 11 | //init初始化值要和return值格式相同,否则assign后变成空了 12 | 13 | 14 | export default function task(state = initialState, action) { 15 | switch (action.type) { 16 | case Constants.INIT: 17 | return objectAssign({}, state, { 18 | // id: state.init.reduce((maxId,todo) => Math.max(todo.id, maxId),0)+1, 19 | msgsArr:action.msgsArr, 20 | msgsBtn:action.msgsBtn 21 | }) 22 | 23 | default: 24 | return state 25 | } 26 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Role.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | // id: 0, 7 | isRoleDel:false, 8 | roleDelMsg:"", 9 | //ROLE_INIT 10 | appList:[], 11 | 12 | //ROLE_DATEGET 13 | roleMemberDatas:[], 14 | // SAVEBASICFORM 15 | opType:"", 16 | // id:0, 17 | roles:{}, 18 | haveNoSaveDetail:false, 19 | selectDatas:[], 20 | showForm:false, 21 | } 22 | 23 | 24 | 25 | //init初始化值要和return值格式相同,否则assign后变成空了 26 | export default function task(state = window.deepClone(initialState), action) { 27 | // console.log("action:",action); 28 | // console.dir(state) 29 | // console.log(Constants.INIT); 30 | switch (action.type) { 31 | case Constants.GCLEAN: 32 | return window.deepClone(initialState) 33 | case Constants.ROLE_DEL: 34 | return objectAssign({}, state, { 35 | // id: state.init.reduce((maxId,todo) => Math.max(todo.id, maxId),0)+1, 36 | isRoleDel:action.isRoleDel, 37 | roleDelMsg:action.roleDelMsg 38 | }) 39 | case Constants.ROLE_INIT: 40 | return objectAssign({}, state, { 41 | // id: state.init.reduce((maxId,todo) => Math.max(todo.id, maxId),0)+1, 42 | appList:action.appList, 43 | opType:action.opType, 44 | }) 45 | case Constants.ROLE_DATEGET: 46 | // console.log("rolessaa",action) 47 | return objectAssign({}, state, { 48 | roleMemberDatas:action.roleMemberDatas, 49 | roles:action.roles, 50 | 51 | }) 52 | case Constants.ROLE_MEMBERADD: 53 | return objectAssign({}, state, { 54 | roleMemberDatas: action.roleMemberDatas, 55 | // selectDatas:action.selectDatas 56 | }) 57 | case Constants.ROLE_MEMBERDEL: 58 | let vv = true; 59 | return objectAssign({}, state, { 60 | roleMemberDatas: state.roleMemberDatas.filter(function(roleMember){ 61 | return !action.tmpRoleMemberkeys.some(function(el) { 62 | return roleMember.key == el 63 | }) 64 | }) 65 | }) 66 | case Constants.ROLE_GET: 67 | return objectAssign({}, state, { 68 | role: action.role 69 | }) 70 | case Constants.ROLE_PUTHAVENOSAVE: 71 | return objectAssign({}, state, { 72 | haveNoSaveDetail: action.haveNoSaveDetail 73 | }) 74 | case Constants.ROLE_SELECTDATAS: 75 | return objectAssign({}, state, { 76 | selectDatas: action.selectDatas 77 | }) 78 | case Constants.SAVEBASICFORM: 79 | return objectAssign({}, state, { 80 | roleMemberDatas: action.roleMemberDatas 81 | }) 82 | case Constants.SHOWFORM: 83 | return objectAssign({}, state, { 84 | showForm: action.showForm 85 | }) 86 | case Constants.CLEANOBJ: 87 | return objectAssign({}, state, { 88 | roles: action.roles 89 | }) 90 | 91 | case Constants.ROLE_CLEAN: 92 | return window.deepClone(initialState) 93 | default: 94 | return state 95 | } 96 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Sys.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | modelVisible: false, 7 | tokenBol: false, 8 | canSubmit: false, 9 | success: false, 10 | orderFields: [], 11 | pcIsOpen: false, 12 | mobileIsOpen: false, 13 | loading: false, 14 | isJoin: false 15 | } 16 | export default function task(state = initialState, action) { 17 | // console.log("action:",action); 18 | switch (action.type) { 19 | case Constants.SET_LOADING: 20 | return objectAssign({}, state, {loading:action.data}) 21 | case Constants.SET_PCISOPEN: 22 | return objectAssign({}, state, {pcIsOpen:action.data}) 23 | case Constants.SET_MOBILEISOPEN: 24 | return objectAssign({}, state, {mobileIsOpen:action.data}) 25 | case Constants.SET_SUCCESS: 26 | return objectAssign({}, state, {success:action.data}) 27 | case Constants.SET_ISJOIN: 28 | return objectAssign({}, state, {isJoin: !!action.data.mail.value && !!action.data.mobile.value}) 29 | case Constants.SAVE_APPFIELDS: 30 | return objectAssign({}, state, {orderFields:action.data}) 31 | case Constants.SET_CANSUBMIT: 32 | return objectAssign({}, state, {canSubmit:action.data}) 33 | case Constants.SET_MODEL_VISIBLE: 34 | return objectAssign({}, state, {modelVisible:action.data}) 35 | //获取基础组件版本号: 36 | case Constants.GETVERSION: 37 | return objectAssign({}, state, {version:action.version}) 38 | case Constants.GETTOKENBINDING: 39 | return objectAssign({}, state, {tokenBol:action.tokenBol}) 40 | default: 41 | return state 42 | } 43 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/Util.js: -------------------------------------------------------------------------------- 1 | import Constants from '../constants/ActionTypes' 2 | 3 | import objectAssign from 'object-assign' 4 | 5 | const initialState = { 6 | loading: false 7 | } 8 | 9 | export default function task(state = initialState, action) { 10 | switch (action.type) { 11 | case Constants.RLOADING: 12 | return objectAssign({}, state, { 13 | loading: true 14 | }) 15 | case Constants.RLOADED: 16 | return objectAssign({}, state, { 17 | loading: false 18 | }) 19 | default: 20 | return state 21 | } 22 | } -------------------------------------------------------------------------------- /02.react4pe/project/demo2/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | //import { routerReducer } from 'react-router-redux' 3 | import {routerReducer} from 'react-router-redux/lib/reducer' 4 | 5 | import init from './Init' 6 | import auth from './Auth' 7 | import role from './Role' 8 | import apps from './Apps' 9 | import util from './Util' 10 | import sys from './Sys' 11 | 12 | /** 13 | * reducer深克隆 14 | */ 15 | function deepClone(obj) { 16 | var result,oClass=isClass(obj); 17 | //确定result的类型 18 | if(oClass==="Object"){ 19 | result={}; 20 | }else if(oClass==="Array"){ 21 | result=[]; 22 | }else{ 23 | return obj; 24 | } 25 | for(var key in obj){ 26 | var copy=obj[key]; 27 | if(isClass(copy)=="Object"||"Array"){ 28 | result[key]=deepClone(copy);//递归调用 29 | }else{ 30 | result[key]=obj[key]; 31 | } 32 | } 33 | return result; 34 | } 35 | function isClass(o){ 36 | if(o===null) return "Null"; 37 | if(o===undefined) return "Undefined"; 38 | return Object.prototype.toString.call(o).slice(8,-1); 39 | } 40 | window.deepClone = deepClone; 41 | 42 | 43 | const rootReducer = combineReducers({ 44 | apps, 45 | init, 46 | auth, 47 | role, 48 | util, 49 | sys, 50 | routing:routerReducer 51 | }) 52 | 53 | export default rootReducer 54 | 55 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/store/configureStore.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import thunkMiddleware from 'redux-thunk' 3 | //import createLogger from 'redux-logger' 4 | //import rootReducer1 from '../reducers' 5 | 6 | export default function configureStore(rootReducer,preloadedState) { 7 | 8 | const store = createStore( 9 | rootReducer, 10 | preloadedState, 11 | // applyMiddleware(thunkMiddleware, createLogger()) 12 | applyMiddleware(thunkMiddleware) 13 | ) 14 | //window.store = store; 15 | 16 | // if (module.hot) { 17 | // module.hot.accept('../reducers', () => { 18 | // const nextReducer = require('../reducers').default 19 | // store.replaceReducer(nextReducer) 20 | // }) 21 | // } 22 | 23 | return store 24 | } 25 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/style/index.css: -------------------------------------------------------------------------------- 1 | html,body{ 2 | overflow: hidden; 3 | } 4 | #container{ 5 | min-width: 1200px; 6 | height: 100%; 7 | } 8 | .Breadcrumb { 9 | padding-top:20px; 10 | padding-left:10px; 11 | padding-right:20px; 12 | margin-left: 30px; 13 | } 14 | 15 | .Container { 16 | padding:10px; 17 | } 18 | 19 | .Banner { 20 | padding:50px; 21 | width:100%; 22 | height:697px; 23 | background-image:url("/cloudstore/images/store/banner.jpg"); 24 | background-position:50% 50%; 25 | } 26 | 27 | .appImg { 28 | width: 42px; 29 | height: 42px; 30 | border-radius: 6px; 31 | background: #eee; 32 | display: inline-block; 33 | } 34 | 35 | .appRow { 36 | border: 1px solid #d9d9d9; 37 | border-radius: 6px; 38 | } 39 | 40 | .appContainer { 41 | padding-right: 15px; 42 | padding-bottom: 15px; 43 | } 44 | 45 | .appCol { 46 | padding: 10px; 47 | } 48 | 49 | .appDivHead { 50 | text-align:center; 51 | margin:0 auto; 52 | /*border-right: 1px solid #d9d9d9;*/ 53 | } 54 | 55 | .NAContainer{ 56 | width:1170; 57 | margin: 0px auto; 58 | } 59 | #mydiv{ 60 | border: 1px solid #e9e9e9; 61 | padding: 30px 15px 50px 30px; 62 | border-radius:15px; 63 | } 64 | .innerimage{ 65 | width:152px; 66 | height: 152px; 67 | background-size: 100%; 68 | background-position: center; 69 | -moz-border-radius: 15px; 70 | -webkit-border-radius: 15px; 71 | border-radius: 15px; 72 | } 73 | .innerimageBody{ 74 | width: 100%; 75 | height: 49px; 76 | padding: 10px; 77 | font-weight: 600; 78 | 79 | } 80 | .innerimageBody p:first-of-type{ 81 | text-align: left; 82 | } 83 | .innerimageBody p:last-of-type{ 84 | text-align: right; 85 | } 86 | /*.innerimageBody p { 87 | display: inline-block; 88 | 89 | }*/ 90 | .innerimageFooter{ 91 | /*position:relative; 92 | width: 100%; 93 | height: 49px;*/ 94 | border-bottom: 1px solid #d2d2d2; 95 | 96 | } 97 | 98 | .innerimageFooter1{ 99 | /*position:relative;*/ 100 | border-bottom: 1px solid #d2d2d2; 101 | /*background-color:#f9f9f9; 102 | width:100%; 103 | height:49px;*/ 104 | } 105 | .imgframe{ 106 | width:152px; 107 | margin: 0px auto; 108 | height: 152px; 109 | /*border-bottom: 1px solid #d2d2d2;*/ 110 | 111 | } 112 | 113 | .imgframemove{ 114 | width:152px; 115 | margin: 0px auto; 116 | height: 152px; 117 | /*border: 1px solid #d2d2d2;*/ 118 | cursor:pointer; 119 | } 120 | .imgbody{ 121 | background-color: rgb(255,255,255); 122 | width:20%; 123 | height:275px; 124 | margin: 0px auto; 125 | float: left; 126 | } 127 | 128 | 129 | 130 | 131 | .imgdiv{ 132 | background-color: rgb(255,255,255); 133 | width:98%; 134 | margin-top: 10px; 135 | margin-left: auto; 136 | margin-right: auto; 137 | height:auto; 138 | padding: 30px 0px; 139 | border-radius:15px; 140 | } 141 | 142 | .cs-pagination{ 143 | display:inline-block; 144 | margin-top: 40px; 145 | margin-left:5%; 146 | width:100%; 147 | } 148 | 149 | .showbackground{ 150 | background-color: red; 151 | } 152 | .tabDiv{ 153 | height: auto; 154 | background-color: rgb(255,255,255); 155 | 156 | } 157 | .tabStyle{ 158 | background-color: #f9f9f9; 159 | box-sizing:border-box; 160 | border:1px solid #e9e9e9; 161 | border-radius:15px; 162 | padding:15px 15px 15px 15px; 163 | 164 | } 165 | 166 | .foottheme{ 167 | text-align: right; 168 | margin-right: 20px; 169 | } 170 | 171 | /*.version{ 172 | line-height: 49px; 173 | color: green; 174 | position: absolute; 175 | left: 5px; 176 | }*/ 177 | 178 | div[data-reactid=".0.$newapps"]{ 179 | background-color: #f9f9f9; 180 | height: 100%; 181 | } 182 | 183 | .codetitle{ 184 | font-size: 13px; 185 | font-weight:bold; 186 | } 187 | 188 | .test{ 189 | padding-left: 10px; 190 | } 191 | 192 | .paddingtext{ 193 | padding-left: 0px; 194 | height: 40px; 195 | line-height: 40px; 196 | } 197 | 198 | div[data-reactid=".0.$init"]{ 199 | background-color: #f9f9f9; 200 | height: 100%; 201 | } 202 | 203 | .initdiv{ 204 | width: 98%; 205 | margin-top: 10px; 206 | margin-left: auto; 207 | margin-right: auto; 208 | height: auto; 209 | padding: 30px 15px; 210 | border-radius: 15px; 211 | background-color: white; 212 | } 213 | 214 | div[data-reactid=".0.$auth"]{ 215 | background-color: #f9f9f9; 216 | height: 100%; 217 | } 218 | .Authdiv{ 219 | width: 98%; 220 | margin-left: auto; 221 | margin-right: auto; 222 | height: auto; 223 | padding: 30px 15px; 224 | border-radius: 15px; 225 | background-color: white; 226 | } 227 | 228 | div[data-reactid=".0.$roleList"]{ 229 | background-color: #f9f9f9; 230 | height: 100%; 231 | } 232 | .RoleListdiv{ 233 | width: 98%; 234 | margin-left: auto; 235 | margin-right: auto; 236 | height: auto; 237 | padding: 20px 15px; 238 | border-radius: 15px; 239 | background-color: white; 240 | } 241 | 242 | div[data-reactid=".0.$mode"]{ 243 | background-color: #f9f9f9; 244 | height: 100%; 245 | } 246 | 247 | .inoutdiv{ 248 | width: 98%; 249 | margin-left: auto; 250 | margin-right: auto; 251 | height: auto; 252 | padding: 20px 15px; 253 | border-radius: 15px; 254 | background-color: white; 255 | } 256 | 257 | div[data-reactid=".0.$roleList/add"]{ 258 | background-color: #f9f9f9; 259 | height: 100%; 260 | } 261 | .rolediv{ 262 | width: 98%; 263 | margin-left: auto; 264 | margin-right: auto; 265 | height: auto; 266 | padding: 30px 15px; 267 | border-radius: 15px; 268 | background-color: white; 269 | } 270 | 271 | /* loadding */ 272 | .cs-gloading { 273 | position: fixed; 274 | width: 100%; 275 | height: 100%; 276 | left: 0; 277 | top: 0; 278 | background: rgba(255, 255, 255, .4); 279 | z-index: 111111111 280 | } 281 | 282 | .cs-gloading div{ 283 | animation-iteration-count: infinite; 284 | background: #fcc03b; 285 | border-radius: 60%; 286 | position: absolute; 287 | left: 50%; 288 | top: 30%;; 289 | margin-left: -3rem; 290 | margin-top: -3rem; 291 | width: 5.9375rem; 292 | height: 5.9375rem; 293 | animation-name: zoomIn; 294 | animation-duration: 1s; 295 | animation-fill-mode: both; 296 | } 297 | @keyframes zoomIn { 298 | from { 299 | opacity: 0; 300 | transform: scale3d(0.2, 0.2, 0.2) 301 | } 302 | 303 | to { 304 | opacity: 1 305 | } 306 | } 307 | .spinnerWrapper { 308 | position: fixed; 309 | z-index: 999; 310 | left: 50%; 311 | top: 50%; 312 | width: 84px; 313 | height:84px; 314 | background: rgba(0, 0, 0, .24); 315 | border-radius: 6px; 316 | margin-top: -38px; 317 | margin-left: -38px; 318 | } 319 | .spinner { 320 | position: absolute; 321 | left: 15px; 322 | top: 17px; 323 | width: 50px; 324 | height: 50px; 325 | text-align: center; 326 | font-size: 10px; 327 | } 328 | 329 | .spinner > div { 330 | background-color: #278ddc; 331 | height: 100%; 332 | width: 6px; 333 | display: inline-block; 334 | margin-left: 4px; 335 | -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 336 | animation: stretchdelay 1.2s infinite ease-in-out; 337 | } 338 | 339 | .spinner .rect2 { 340 | -webkit-animation-delay: -1.1s; 341 | animation-delay: -1.1s; 342 | } 343 | 344 | .spinner .rect3 { 345 | -webkit-animation-delay: -1.0s; 346 | animation-delay: -1.0s; 347 | } 348 | 349 | .spinner .rect4 { 350 | -webkit-animation-delay: -0.9s; 351 | animation-delay: -0.9s; 352 | } 353 | 354 | .spinner .rect5 { 355 | -webkit-animation-delay: -0.8s; 356 | animation-delay: -0.8s; 357 | } 358 | 359 | @-webkit-keyframes stretchdelay { 360 | 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 361 | 20% { -webkit-transform: scaleY(1.0) } 362 | } 363 | 364 | @keyframes stretchdelay { 365 | 0%, 40%, 100% { 366 | transform: scaleY(0.4); 367 | -webkit-transform: scaleY(0.4); 368 | } 20% { 369 | transform: scaleY(1.0); 370 | -webkit-transform: scaleY(1.0); 371 | } 372 | } 373 | /* loadding */ 374 | #container { 375 | background-color: #f9f9f9; 376 | height:100%; 377 | } 378 | 379 | .testtesttest>div>div{ 380 | width:15%; 381 | float: left; 382 | } 383 | -------------------------------------------------------------------------------- /02.react4pe/project/demo2/style/inout.css: -------------------------------------------------------------------------------- 1 | 2 | div#clearfix{ 3 | margin:5,20; 4 | } 5 | 6 | .ant-badge-count { 7 | margin-left: 11px; 8 | } 9 | 10 | .form-item-full .ant-form-item { 11 | width:100%; 12 | } 13 | 14 | .form-item-full .ant-search-input { 15 | width:100%; 16 | } 17 | 18 | div#modal{ 19 | background-color:rgb(244,244,244); 20 | margin-bottom: 5px; 21 | 22 | } 23 | 24 | 25 | input.required{border:#999 1px solid; height:16px; width:120px;} 26 | label{text-align:right;margin-left: 0px; float:left;} 27 | 28 | 29 | 30 | span.InputGroup{ 31 | text-align: right; 32 | display: inline-block; 33 | width:80px; 34 | font-size:12px; 35 | } 36 | 37 | #fuck{ 38 | line-height: 32px; 39 | } 40 | 41 | .formcenter { 42 | vertical-align: middle; 43 | } 44 | 45 | #why{ 46 | padding-bottom: 15px; 47 | line-height: 63px; 48 | } 49 | 50 | .file { 51 | position: relative; 52 | display: inline-block; 53 | background: rgb(247,247,247); 54 | border: 1px solid rgb(232,232,232); 55 | border-radius: 4px; 56 | padding: 5px 23px; 57 | overflow: hidden; 58 | color: rgb(102,102,102); 59 | text-decoration: none; 60 | text-indent: 0; 61 | line-height: 20px; 62 | } 63 | .file input { 64 | position: absolute; 65 | font-size: 120px; 66 | right: 0; 67 | top: 0; 68 | opacity: 0; 69 | } 70 | .file:hover { 71 | background: #AADFFD; 72 | border-color: #78C3F3; 73 | color: #004974; 74 | text-decoration: none; 75 | } 76 | 77 | 78 | #btt{ 79 | border-bottom: 1px solid #d9d9d9; 80 | } 81 | 82 | #yellowfont{ 83 | color: blue; 84 | } -------------------------------------------------------------------------------- /02.react4pe/weaconfig/weaconfig.js: -------------------------------------------------------------------------------- 1 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 2 | var path = require('path'); 3 | var webpack = require('webpack'); 4 | var marked = require("marked"); 5 | 6 | var CSSSplitWebpackPlugin = require("css-split-webpack-plugin").default; 7 | 8 | var es3ifyPlugin = require('es3ify-webpack-plugin'); 9 | 10 | exports.create = function (obj, mode, node_env) { 11 | 12 | node_env = node_env==""?null:node_env; 13 | 14 | var output = obj.output.split("/"); 15 | 16 | marked.setOptions({ 17 | gfm: true, 18 | tables: true, 19 | breaks: false, 20 | pedantic: false, 21 | sanitize: false, 22 | smartLists: true, 23 | smartypants: false 24 | }); 25 | 26 | marked.setOptions({ 27 | highlight: function (code) { 28 | //console.log("code:",code); 29 | return require('highlight.js').highlightAuto(code, ["javascript", "html", "java", "json"]).value; 30 | } 31 | }); 32 | 33 | var renderer = new marked.Renderer(); 34 | 35 | var plugins = []; 36 | 37 | if(node_env!="development") { 38 | plugins.push(new webpack.optimize.UglifyJsPlugin({ 39 | compress: { 40 | warnings: false, 41 | screw_ie8: false 42 | }, 43 | sourceMap: true, 44 | mangle: { screw_ie8: false }, 45 | output: { screw_ie8: false } 46 | })); 47 | } 48 | 49 | var styleUrl = obj.isOutput2Custom?obj.style2Custom:obj.styleUrl; 50 | 51 | plugins.push(new ExtractTextPlugin(styleUrl, { 52 | disable: obj.styleUrl ? false : true, 53 | allChunks: true, 54 | })); 55 | 56 | if(!node_env) node_env = "production"; 57 | //console.log(node_env); 58 | plugins.push(new webpack.DefinePlugin({ 59 | 'process.env.NODE_ENV': "'"+node_env+"'" //production 60 | })); 61 | 62 | if(obj.isCssSplit) plugins.push(new CSSSplitWebpackPlugin( 63 | { 64 | size: 3500, 65 | filename:styleUrl.substring(0,styleUrl.length-4)+"-[part].[ext]" 66 | } 67 | )); 68 | 69 | if(!obj.ismobile) plugins.push(new es3ifyPlugin()); 70 | 71 | let babelQuery = { 72 | "plugins": [ 73 | "transform-react-jsx", 74 | "transform-es2015-modules-commonjs", 75 | "transform-remove-strict-mode", 76 | "transform-decorators-legacy" 77 | ], 78 | "presets": ["es2015","react","stage-0"], 79 | "compact" : true 80 | } 81 | 82 | if(node_env==="development") { 83 | babelQuery["env"] = { 84 | // only enable it when process.env.NODE_ENV is 'development' or undefined 85 | "development": { 86 | "plugins": [["react-transform", { 87 | "transforms": [{ 88 | "transform": "react-transform-catch-errors", 89 | // now go the imports! 90 | "imports": [ 91 | 92 | // the first import is your React distribution 93 | // (if you use React Native, pass "react-native" instead) 94 | 95 | "react", 96 | 97 | // the second import is the React component to render error 98 | // (it can be a local path too, like "./src/ErrorReporter") 99 | 100 | "redbox-react" 101 | 102 | // the third import is OPTIONAL! 103 | // when specified, its export is used as options to the reporter. 104 | // see specific reporter's docs for the options it needs. 105 | 106 | // it will be imported from different files so it either has to be a Node module 107 | // or a file that you configure with Webpack/Browserify/SystemJS to resolve correctly. 108 | // for example, see https://github.com/gaearon/babel-plugin-react-transform/pull/28#issuecomment-144536185 109 | 110 | // , "my-reporter-options" 111 | ] 112 | }] 113 | // note: you can put more transforms into array 114 | // this is just one of them! 115 | }]] 116 | } 117 | } 118 | } 119 | 120 | var wp4ec = { 121 | entry: obj.entry, 122 | output: { 123 | filename: obj.isOutput2Custom?obj.output2Custom:obj.output 124 | }, 125 | devtool:'source-map', 126 | plugins: plugins, 127 | externals: [ 128 | { 'react': 'React' }, 129 | { 'react-dom': 'ReactDOM' }, 130 | { 'antd': 'antd' }, 131 | { 'weaCom': 'weaCom' }, 132 | { 'ecCom': 'ecCom' }, 133 | { 'weaWorkflow': 'weaWorkflow' }, 134 | { 'weaPortal': 'weaPortal' }, 135 | { 'jquery': 'jQuery' }, 136 | { '$': '$'} 137 | ], 138 | module: { 139 | // preLoaders: [ 140 | // { 141 | // test: /\.(js|jsx)$/, 142 | // exclude: /node_modules/, 143 | // loader: 'eslint', 144 | // //include: paths.appSrc, 145 | // } 146 | // ], 147 | loaders: [ 148 | { test: /\.md$/, loader: "html!markdown" }, 149 | { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader', query: babelQuery }, 150 | { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader"+(obj.ismobile?"!postcss-loader?sourceMap=inline":"")) }, 151 | //{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader" + (obj.ismobile ? "!postcss-loader" : ""), "css-loader" + (obj.ismobile ? "!postcss-loader" : "")) }, 152 | { test: /\.jpe?g$|\.gif$|\.eot$|\.png$|\.svg$|\.woff$|\.woff2$|\.ttf$/, loader: "file" }, 153 | { test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader"+(obj.ismobile?"!postcss-loader":"")+"!less-loader") } 154 | //{ test: /\.less$/, loader: ExtractTextPlugin.extract("css!less" + (obj.ismobile ? "" : "")) } 155 | ], 156 | postLoaders: [ 157 | { 158 | test: /\.(js|jsx)$/, 159 | loader: 'export-from-ie8/loader' 160 | } 161 | ] 162 | }, 163 | resolve: { 164 | extensions: ['', '.web.js', '.js', '.jsx', '.json'], 165 | }, 166 | babel: { 167 | plugins: [] 168 | }, 169 | postcss: [], 170 | markdownLoader: { 171 | renderer: renderer 172 | } 173 | }; 174 | 175 | const pxtorem = require('postcss-pxtorem'); 176 | 177 | if (obj.outputlib) { 178 | wp4ec.output.library = obj.outputlib.library; 179 | wp4ec.output.libraryTarget = obj.outputlib.libraryTarget; 180 | } 181 | 182 | if (obj.ismobile) { 183 | wp4ec.babel.plugins.push('transform-runtime'); 184 | wp4ec.babel.plugins.push(['antd', { 185 | style: 'css', // if true, use less 186 | libraryName: 'antd-mobile' 187 | }]); 188 | wp4ec.postcss.push(pxtorem({ 189 | rootValue: 100, 190 | propWhiteList: [], 191 | })); 192 | //console.log("wp4ec:",wp4ec); 193 | } 194 | else { 195 | wp4ec.babel.plugins.push(['antd', { 196 | style: 'style', // if true, use less 197 | libraryName: 'newporject' 198 | }]); 199 | } 200 | return "release" === mode ? wp4ec : function (webpackConfig) { 201 | webpackConfig.entry = { index: obj.entry }; 202 | webpackConfig.externals = [ 203 | { 'react': 'React' }, 204 | { 'react-dom': 'ReactDOM' }, 205 | { 'antd': 'antd' }, 206 | { 'weaCom': 'weaCom' } 207 | ]; 208 | if (obj.ismobile) { 209 | webpackConfig.babel.plugins.push('transform-runtime'); 210 | webpackConfig.babel.plugins.push(['antd', { 211 | style: 'css', // if true, use less 212 | libraryName: 'antd-mobile' 213 | }]); 214 | webpackConfig.postcss.push(pxtorem({ 215 | rootValue: 100, 216 | propWhiteList: [], 217 | })); 218 | } 219 | else { 220 | //移除common.js 221 | if (webpackConfig.plugins[0].chunkNames === 'common') { 222 | webpackConfig.plugins.shift(); 223 | } 224 | webpackConfig.babel.plugins.push('antd'); 225 | } 226 | webpackConfig.module.loaders[0].query.cacheDirectory = "./tmp"; 227 | webpackConfig.module.loaders[1].query.cacheDirectory = "./tmp"; 228 | //console.log(webpackConfig); 229 | return webpackConfig; 230 | }; 231 | } -------------------------------------------------------------------------------- /02.react4pe/weaconfig/weapath4e9.js: -------------------------------------------------------------------------------- 1 | 2 | exports.getPath = function(config) { 3 | const apps = { 4 | //前台主入口 5 | "main":{ 6 | entry:config.srcPath+"/src4js/pc/main/index.js", 7 | output:config.runPath+"/wui/theme/ecology9/js/index.js", 8 | styleUrl:config.runPath+"/wui/theme/ecology9/css/index.css" 9 | }, 10 | //流程弹出页公共文件整合包 11 | "coms_global":{ 12 | entry:config.srcPath+"/src4js/pc/coms/global/js/index.js", 13 | output:config.runPath+"/spa/workflow/global.js", 14 | styleUrl:config.runPath+"/spa/workflow/global.css" 15 | }, 16 | //流程 17 | "workflow":{ 18 | entry:config.srcPath+"/src4js/pc/workflow/index.js", 19 | output:config.runPath+"/spa/workflow/index.js", 20 | styleUrl:config.runPath+"/spa/workflow/index.css", 21 | outputlib:{ 22 | library:"weaWorkflow", 23 | libraryTarget: "umd" 24 | } 25 | }, 26 | //流程(开发版,用于表单编辑) 27 | "workflow4dev":{ 28 | entry:config.srcPath+"/src4js/pc/workflow4dev/index.js", 29 | output:config.runPath+"/spa/workflow/index.js", 30 | styleUrl:config.runPath+"/spa/workflow/index.css", 31 | outputlib:{ 32 | library:"weaWorkflow", 33 | libraryTarget: "umd" 34 | } 35 | }, 36 | //支持流程独立运行的入口 37 | "workflow4dev_single":{ 38 | entry:config.srcPath+"/src4js/pc/workflow4dev/single.js", 39 | output:config.runPath+"/spa/workflow/index4single.js" 40 | }, 41 | //门户 42 | "portal": { 43 | entry: config.srcPath+"/src4js/pc/portal/index.js", 44 | output: config.runPath+"/spa/portal/index.js", 45 | styleUrl: config.runPath+"/spa/portal/index.css", 46 | outputlib: { 47 | library: 'weaPortal', 48 | libraryTarget: 'umd' 49 | } 50 | }, 51 | //文档 52 | "document":{ 53 | entry:config.srcPath+"/src4js/pc/document/index.js", 54 | output:config.runPath+"/spa/document/index.js", 55 | styleUrl:config.runPath+"/spa/document/index.css", 56 | outputlib:{ 57 | library:"weaDoc", 58 | libraryTarget: "umd" 59 | } 60 | }, 61 | //微博 62 | "blog":{ 63 | entry:config.srcPath+"/src4js/pc/blog/index.js", 64 | output:config.runPath+"/spa/blog/index.js", 65 | styleUrl:config.runPath+"/spa/blog/index.css", 66 | outputlib:{ 67 | library:"weaDoc", 68 | libraryTarget: "umd" 69 | } 70 | }, 71 | //财务 72 | "fna":{ 73 | entry:config.srcPath+"/src4js/pc/fna/index.js", 74 | output:config.runPath+"/spa/fna/index.js", 75 | styleUrl:config.runPath+"/spa/fna/index.css", 76 | outputlib:{ 77 | library:"weaFna", 78 | libraryTarget: "umd" 79 | } 80 | }, 81 | //会议 82 | "meeting":{ 83 | entry:config.srcPath+"/src4js/pc/meeting/index.js", 84 | output:config.runPath+"/spa/meeting/index.js", 85 | styleUrl:config.runPath+"/spa/meeting/index.css", 86 | outputlib:{ 87 | library:"weaMeeting", 88 | libraryTarget: "umd" 89 | } 90 | }, 91 | //人力 92 | "hrm":{ 93 | entry:config.srcPath+"/src4js/pc/hrm/index.js", 94 | output:config.runPath+"/spa/hrm/index.js", 95 | styleUrl:config.runPath+"/spa/hrm/index.css", 96 | outputlib:{ 97 | library:"weaHrm", 98 | libraryTarget: "umd" 99 | } 100 | }, 101 | //集成 102 | "inte":{ 103 | entry:config.srcPath+"/src4js/pc/inte/index.js", 104 | output:config.runPath+"/spa/inte/index.js", 105 | styleUrl:config.runPath+"/spa/inte/index.css", 106 | outputlib:{ 107 | library:"weaInte", 108 | libraryTarget: "umd" 109 | } 110 | }, 111 | //后台入口 112 | "bs_main":{ 113 | entry:config.srcPath+"/src4js/pc4backstage/main/index.js", 114 | output:config.runPath+"/wui/theme/ecology9/js/engine.js", 115 | styleUrl:config.runPath+"/wui/theme/ecology9/css/engine.css" 116 | } 117 | } 118 | return apps[config.name]; 119 | } -------------------------------------------------------------------------------- /02.react4pe/webpack.config.js: -------------------------------------------------------------------------------- 1 | let config = require('./weaconfig/weaconfig'); 2 | let e9path = require('./weaconfig/weapath4e9'); 3 | 4 | //是否热部署 5 | let mode = "release"; 6 | mode = "debug" 7 | 8 | //编译模式,是按发布版编译还是按开发版编译 9 | let node_env = "production"; 10 | //node_env = "development"; 11 | 12 | let custom = false; //是否是自定义路径模式 13 | 14 | if(custom) { //自定义配置 15 | 16 | const apps = { 17 | "ecology9":{ 18 | entry:"./project/WEAVER_E9/src4js/pc/main/index.js", 19 | output:"./project/WEAVER_E9/WebRoot/ecology/wui/theme/ecology9/js/index.js", 20 | styleUrl:"./project/WEAVER_E9/WebRoot/ecology/wui/theme/ecology9/css/index.css" 21 | } 22 | } 23 | 24 | let obj = apps['ecology9']; 25 | 26 | module.exports = config.create(obj,mode,node_env); 27 | } 28 | else { //已内置配置 29 | 30 | const pathConfig = { 31 | name:"workflow", //打包的功能名 32 | srcPath:"./project/WEAVER_E9", //本地源代码路径src4js的上一层,比如main的完整的路径为:./project/WEAVER_E9/src4js/pc/main/index.js 33 | //srcPath:"./project/WEAVER_CloudStore_ec", 34 | //runPath:"./project/WEAVER_E9/WebRoot/ecology", //本地编译后路径ecology一层,比如main的完整的路径为:./project/WEAVER_E9/WebRoot/ecology/wui/theme/ecology9/js/index.js 35 | runPath:"./DEMO/weaver_e9/ecology", //也可以直接输出到demo中 36 | mode:mode 37 | } 38 | 39 | let obj = e9path.getPath(pathConfig); 40 | 41 | module.exports = config.create(obj,mode,node_env); 42 | } 43 | /* 44 | E9模块对应配置说明 45 | main - 主入口 46 | bs_main - 后台主入口 47 | coms_global - 流程弹出页目前的老js整体打包压缩 48 | workflow - 流程 49 | workflow4dev - 流程(开发版) 50 | workflow4dev_single - 流程入口(支持流程弹窗打开) 51 | portal - 门户 52 | document - 文档 53 | blog - 微博 54 | fna - 财务 55 | meeting - 会议 56 | hrm - 人力 57 | inte - 集成 58 | 59 | */ 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 一、E9前端开发手册 2 | #### 1、E9下如何开始一个react项目 3 | ##### (1)安装nodejs 4 | ##### (2)下载脚手架:https://github.com/dyf2015/Reactjs-Run/tree/master/02.react4pe 5 | ##### (3)安装依赖库:npm install、npm install webpack@1.13.2 -g--save,部分环境会出现安装不全的问题,需要手工把没安装成功的一个个装上去 6 | ##### (4)配置webpack,制定你打包路径,源码entry和输出output 7 | ##### (5)写页面jsp、html,参考本文档【PC端发布环境html、JSP】,e9流程页面svn:/spa/workflow/index.html 8 | ##### (6)定义一个div id=container 9 | ##### (7)写react js代码,在entry指向的位置 10 | ##### (8)cmd下执行webpack 11 | ##### (9)在页面上看到结果 12 | 13 | #### 2、入门学习脚手架(ES6、React) 14 | 15 | ##### (1)安装 [nodejs](https://nodejs.org/en/ "Title") 16 | 17 | * 借助nodejs进行前端模块化项目构建,所以需要在开发环境先安装 18 | 19 | ##### (2)下载此项目并通过cmd 到工程下(01.react)并输入:npm install 20 | 21 | * 部分windows环境需要先执行 npm install webpack -g ,不然会出现无法找到命令的问题 22 | 23 | ##### (3)执行打包命令:webpack 24 | 25 | * 执行后生成可运行文件run.js 26 | 27 | ##### (4)打开index.html即可看到运行结果**** 28 | 29 | * 本示例供初学者入门使用,使用记得star,谢谢! 30 | 31 | --- 32 | 33 | #### 3、EC生产环境脚手架(ES6、React、Router、Redux) 34 | 35 | ##### (1)安装方式与入门脚手架的(1)~(2)相同 36 | 37 | ##### (2)【推荐方式】仅热编译、热部署(mode='release') 38 | * 打包命令:webpack --watch 39 | * 打包配置(必要): 40 | 41 | 参数 | 说明 42 | ---|--- 43 | entry | 前端源码位置,注意此位置必须在脚手架目录内 44 | output | 编译后可运行js文件位置,通常是你生产环境位置 45 | isOutput2Custom | 是否导出到自定义路径 46 | output2Custom | 导出的自定义路径地址 47 | 48 | * 打包配置(扩展): 49 | 50 | 参数 | 说明 51 | ---|--- 52 | styleUrl | 编译后后可运行css文件位置,通常是你生产环境的位置 53 | outputlib | webpack打包后的js都是一个大的闭包,如果需要将某些API暴露,则配置此参数即可 54 | ismobile | 是否是mobile应用,不填则默认为否 55 | 56 | * 其它webpack配置(只需了解) 57 | 58 | 参数 | 说明 59 | ---|--- 60 | externals | 将某些库踢出打包后的js,使之能在全局引入,并且webpack会自动去除相关代码 61 | .babelrc | 存放babel插件的配置,用于es6、jsx等等 62 | 63 | * 移动端发布环境html、JSP(放于ecology): 64 | ``` 65 | 66 | 67 | 68 | 69 | MobileDemo 70 | 99 | 100 | 101 | 102 | 103 |
104 | 105 | 106 | var data = [ 107 | {name: "homepagejs",type: "js",version: "v1.0.0",url: "/portal/project/index.js"}, 108 | {name: "homepagecss",type: "css",version: "v1.0.0",url: "/portal/project/index.css"} 109 | ]; 110 | LS.load(data); 111 | 112 | /* 113 | 以上js脚本是localStorage缓存方案: 114 | 其中react、react-dom、fastclick已经默认加载,这里只需加载你项目上需要的文件 115 | */ 116 | 117 | 118 | 119 | 120 | 121 | ``` 122 | 123 | 124 | * PC端发布环境html、JSP(放于ecology): 125 | 126 | ``` 127 | 128 | 129 | 130 | 131 | 本地调试 132 | 133 | 134 | 138 | 139 | 140 | 141 |
142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | ``` 151 | 152 | 153 | 154 | ##### (3)【非必要,可选方式】本地无需启动后台服务、热编译、热更新(mode='debug'),此模式下必须跨域访问才能获取服务器数据 155 | * 启动命令:npm start 156 | * 移动端debug html编写: 157 | 158 | ``` 159 | 160 | 161 | 162 | 163 | MobileDemo 164 | 195 | 196 | 197 | 198 | 199 |
200 | 201 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | ``` 213 | 214 | 移动debug html相关资源 | 说明 215 | ---|--- 216 | fastclick | 提升点击体验 217 | react-with-addons、react-dom | react相关库 218 | common.js、index.js、index.css | 源码打包后的文件 219 | 220 | * PC端debug html编写: 221 | 222 | ``` 223 | 224 | 225 | 226 | 227 | 本地调试 228 | 229 | 230 | 234 | 235 | 236 | 237 |
238 | 239 | 240 | 241 | 242 | 243 | 247 | 248 | 249 | 250 | 251 | ``` 252 | 253 | PC端debug html相关资源 | 说明 254 | ---|--- 255 | antd.min.css、antd.min.js | 蚂蚁金服前端组件库,使用的版本必须在[antd1.x](http://1x.ant.design/changelog) 256 | shim.min.js | antd兼容IE8、IE9 257 | jQuery.js | antd兼容IE8 258 | promise.js、fetch.js | 兼容IE8的fetch和promise 259 | com/index.js | 泛微根据业务封装的组件库 260 | common.js、index.js、index.css | 源码打包后的文件 261 | window.server | 跨域服务器,在代码里可以引用这个地址来用于快速切换跨域路径 262 | --- 263 | 264 | #### 3、实例 265 | 266 | ##### (1)demo1:react、react-router 267 | 268 | ##### (2)demo2:react、react-router、redux 269 | 270 | #### 4、相关技术栈 271 | 272 | 技术 | 作用 273 | ---|--- 274 | [react](https://facebook.github.io/react/) | 基于vdom、组件化的前端View库 275 | [react-router](https://github.com/ReactTraining/react-router) | 基于react的前端路由库,当页面较多时使用 276 | [redux](https://github.com/reactjs/redux) | 前端数据管理库,当模块较多时使用 277 | [babel](http://babeljs.io/) | 支持jsx、es6等语法解析 278 | [webpack](http://webpack.github.io/) | 前端工程化打包、部署工具 279 | [promise](https://github.com/then/promise) | 异步编程库,让多异步请求业务更稳定易维护 280 | [fetch](https://github.com/github/fetch) | 默认集成promise的ajax库 281 | [antd](http://1x.ant.design/changelog) | antd组件库的PC版1.x,最低兼容到IE8 282 | [antd-mobile](https://mobile.ant.design/) | antd组件库MOBILE版 283 | -------------------------------------------------------------------------------- /Reactjs-Run.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | --------------------------------------------------------------------------------