{ "name": "@beisen\/Tree", "version": "0.1.63", "description": "Tree", "main": "lib\/index.js", "_storybook": { "default_example": "man\/index.js" }, "scripts": { "build": "npm run build:lib && npm run build:umd && npm run story", "build:lib": "babel src --out-dir lib", "build:umd": "webpack src\/index.js dist\/index.js --config webpack.config.js", "test": "karma start", "dev": "webpack-dev-server --progress --colors --config webpack.dev.config.js", "renew": "git checkout-index -f -a --prefix=..\/$name\/ && cp .\/.gitignore ..\/$name", "story": " babel app --out-dir man\/app && babel story --out-dir man" }, "keywords": [ "beisen", "react-component", "es6", "karma", "jasmine" ], "repository": { "type": "git", "url": "git@gitlab.beisen.co:cnpm\/Tree.git" }, "author": { "name": "xiaosiyu", "email": "xiaosiyu@beisen.com" }, "maintainers": [ { "name": "xiaosiyu", "email": "xiaosiyu@beisen.com" } ], "license": "ISC", "dependencies": { "@beisen\/beisen-scroll-bar": "^1.0.22", "react": "^0.14.6", "react-dom": "^0.14.6" }, "devDependencies": { "babel": "^6.5.2", "babel-cli": "^6.6.5", "babel-core": "^6.7.2", "babel-eslint": "^4.1.3", "babel-loader": "^6.2.4", "case-sensitive-paths-webpack-plugin": "^1.0.1", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-assign": "^6.5.0", "babel-plugin-transform-react-display-name": "^6.3.13", "babel-plugin-transform-runtime": "^6.6.0", "babel-plugin-transform-class-properties": "^6.11.5", "babel-plugin-transform-es2015-classes": "^6.9.0", "babel-plugin-transform-proto-to-assign": "^6.9.0", "babel-preset-airbnb": "^1.0.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.5.0", "babel-runtime": "^6.6.0", "css-loader": "^0.23.1", "enzyme": "^2.0.0", "es6-promise": "^3.1.2", "file-loader": "^0.8.5", "immutable": "^3.7.6", "isomorphic-fetch": "^2.2.0", "jasmine-core": "^2.4.1", "json-loader": "^0.5.4", "karma": "^0.13.19", "karma-babel-preprocessor": "^6.0.1", "karma-chrome-launcher": "^0.2.2", "karma-jasmine": "^0.3.7", "karma-webpack": "^1.7.0", "node-sass": "^3.4.2", "react-addons-test-utils": "^0.14.7", "react-redux": "^4.4.1", "redux": "^3.3.1", "redux-thunk": "^2.0.1", "sass-loader": "^3.2.0", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.12.10", "webpack-dev-server": "^1.14.0" }, "readme": "# Tree \u4f7f\u7528\u8bf4\u660e\n\n## \u9879\u76ee\u8fd0\u884c\n\n1. cnpm install \u6216 npm install cnpm\u4f7f\u7528\u6559\u7a0b\n\n2. npm install -g json-server \u5b89\u88c5json-server \u7528\u4e8e\u6a21\u62df\u83b7\u53d6\u6570\u636e\uff08\u6216\u8005\u5728app\/modules\/BaseTree\u4e0b\uff0c\u62f7\u8d1d\u6839\u76ee\u5f55\u4e0btree.json\u6570\u636e\u5230treeData\u4e2d\uff09\n\n3. json-server -- watch tree.json \u8fd0\u884cjson-server\n\n4. npm run dev \uff08\u5f00\u53d1\u73af\u5883\u6253\u5305 port:8080\uff09\n\n5. npm run test \uff08\u6d4b\u8bd5\u7528\u4f8b\uff09\n\n6. npm run build \uff08\u751f\u4ea7\u73af\u5883\u6253\u5305\uff09\n\n\n## Props ---- width Redux(Initialize)\n\n```\n async: 1, \/\/1\u5f02\u6b65 0\u540c\u6b65\n hidden:false, \/\/\u662f\u5426\u663e\u793a\u6811\u7ec4\u4ef6\n treeData: [], \/\/\u6811\u7684\u6570\u636e\uff0c\u65e0\u9700\u5d4c\u5957\uff0c\u4e00\u7ef4\u6570\u636e\n id:0, \/\/\u5f02\u6b65\u8bf7\u6c42\u7684\u7b2c\u4e00\u5c42\u6570\u636epid\uff0c\u975e\u5fc5\u987b\n initGetData:true, \/\/\u9ed8\u8ba4\u4e3atree,\u662f\u5426\u7ec4\u4ef6\u5728\u9996\u6b21\u6e32\u67d3\u65f6\u8bf7\u6c42\u6570\u636e,\u6811\u7ec4\u4ef6\u9ed8\u8ba4\u4f1a\u5728DidMount\u65f6\u6267\u884cgetTreeData\u65b9\u6cd5\u53bb\u8bf7\u6c42\u6570\u636e\n getTreeData:function(){} \/\/\u5bf9\u5e94reducers\u4e2d\u83b7\u53d6\u6570\u636e\u7684\u65b9\u6cd5\uff0c\u65b9\u6cd5\u5728 app\/modules\/BaseTree.js \u4e2d\n getTreeDataAPI: '' || 'http:\/\/localhost:3001\/getTreeData' \/\/\u8bf7\u6c42\u63a5\u53e3\n ,style:{ \/\/\u81ea\u5b9a\u4e49\u6837\u5f0f\n }\n```\n\n## \u5f02\u6b65\u8bf7\u6c42\u8bf4\u660e\n\n\n\n## \u6570\u636e\u8bf4\u660e\n\n```\n\"id\": \"32025\", \/\/id\n\"name\": \"\u6280\u672f\u4f53\u7cfb\", \/\/\u540d\u79f0\n\"path\": \"32024.32025.\", \/\/\u6811\u7ea7\u8def\u5f84\n\"pid\": \"32024\", \/\/\u7236\u7ea7id\n\"level\": \"1\", \/\/\u5f53\u524d\u5c42\u7ea7\n\"has_child\":true \/\/\u662f\u5426\u6709\u5b50\u6570\u636e,\u53ea\u6709\u5f53\u8be5\u5b57\u6bb5\u4e3atree\u65f6\u624d\u4f1a\u663e\u793a\u5c55\u5f00\u7684\u52a0\u53f7\n```\n\n## \u6d4b\u8bd5\u6570\u636e\n\n\u5c06\u8be5\u6570\u636e\u653e\u5728treeData\u4e2d\u5373\u53ef\n\n```\n[\n {\n \"id\": \"32025\", \n \"name\": \"\u6280\u672f\u4f53\u7cfb\", \n \"path\": \"32025.\", \n \"pid\": \"0\", \n \"level\": \"1\", \n \"has_child\":true\n },\n {\n \"id\": \"1612\", \n \"name\": \"\u4ea7\u54c1\u7ebf\", \n \"path\": \"1612.\", \n \"pid\": \"0\", \n \"level\": \"1\", \n \"has_child\":true\n },\n {\n \"id\": \"32345\", \n \"name\": \"\u9752\u5c9b\u7814\u53d1\u4e2d\u5fc3\", \n \"path\": \"32025.32345.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32038\", \n \"name\": \"\u6280\u672f\u5b66\u9662\", \n \"path\": \"32025.32038.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32037\", \n \"name\": \"\u6280\u672f\u7ba1\u7406\", \n \"path\": \"32025.32037.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32036\", \n \"name\": \"DevOPS\", \n \"path\": \"32025.32034.32036.\", \n \"pid\": \"32034\", \n \"level\": \"3\", \n \"has_child\":false\n }, \n {\n \"id\": \"32035\", \n \"name\": \"SysOPS\", \n \"path\": \"32025.32034.32035.\", \n \"pid\": \"32034\", \n \"level\": \"3\", \n \"has_child\":false\n }, \n {\n \"id\": \"32034\", \n \"name\": \"\u8fd0\u7ef4\u6280\u672f\", \n \"path\": \"32025.32034.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":true\n }, \n {\n \"id\": \"32033\", \n \"name\": \"\u5927\u6570\u636e\", \n \"path\": \"32025.32033.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32032\", \n \"name\": \"\u57fa\u7840\u670d\u52a1\", \n \"path\": \"32025.32032.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32031\", \n \"name\": \"BeisenCloud\", \n \"path\": \"32025.32031.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"32029\", \n \"name\": \"TalentMobile\", \n \"path\": \"32025.32026.32029.\", \n \"pid\": \"32026\", \n \"level\": \"3\", \n \"has_child\":false\n }, \n {\n \"id\": \"32028\", \n \"name\": \"TalentDesign\", \n \"path\": \"32025.32026.32028.\", \n \"pid\": \"32026\", \n \"level\": \"3\", \n \"has_child\":false\n }, \n {\n \"id\": \"32027\", \n \"name\": \"TalentUI\", \n \"path\": \"32025.32026.32027.\", \n \"pid\": \"32026\", \n \"level\": \"3\", \n \"has_child\":false\n }, \n {\n \"id\": \"32026\", \n \"name\": \"\u524d\u7aef\u67b6\u6784&\u7528\u6237\u4f53\u9a8c\", \n \"path\": \"32025.32026.\", \n \"pid\": \"32025\", \n \"level\": \"2\", \n \"has_child\":true\n },\n {\n \"id\": \"1749\", \n \"name\": \"\u7ee7\u4efb\", \n \"path\": \"1612.1749.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1618\", \n \"name\": \"\u5458\u5de5\u8c03\u67e5\", \n \"path\": \"1612.1618.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1617\", \n \"name\": \"360\u00b0\u8bc4\u4f30\", \n \"path\": \"1612.1617.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1616\", \n \"name\": \"\u7ee9\u6548\", \n \"path\": \"1612.1616.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1615\", \n \"name\": \"\u62db\u8058\", \n \"path\": \"1612.1615.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1614\", \n \"name\": \"\u6d4b\u8bc4\", \n \"path\": \"1612.1614.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }, \n {\n \"id\": \"1613\", \n \"name\": \"tita\", \n \"path\": \"1612.1613.\", \n \"pid\": \"1612\", \n \"level\": \"2\", \n \"has_child\":false\n }\n ]\n```\n\n## Tree \u53c2\u6570\n\n\u9700\u590d\u5236app\u3001modules\u76ee\u5f55\u4e0b BaseTree.js\u6587\u4ef6 \u81f3Reducers\u4e2d\uff0c\u8bf7\u6c42\u7684\u6570\u636e\u9700\u62fc\u63a5\u5230\u539f\u6709\u6570\u636e\u4e0a\u5e76\u4f20\u5165\u7ec4\u4ef6\u5185\n\n```\nimport React, {Component, PropTypes} from 'react'\nimport {render} from 'react-dom'\nimport ConfigureStore from '.\/app\/configureStore';\nimport { Provider, connect } from 'react-redux';\nimport usReducers from '.\/app\/modules\/BaseTree';\nimport * as usActions from '.\/app\/modules\/BaseTree';\nimport Immutable from 'immutable';\nimport { toJS } from 'immutable';\n\nconst store = ConfigureStore(usReducers) ;\n\nimport Tree from '.\/src\/index.js';\n\n@connect(\n state => state.toJS(),\n {...usActions}\n)\nclass Demo extends Component{\n\n state = {\n treeShow:true\n }\n\n openTree(){\n this.setState({treeShow:false});\n }\n\n treeClick(val){\n \/\/\u70b9\u51fb\u6811\u8282\u70b9\n console.log(val)\n }\n\n render () {\n\n let tree = this.state.treeShow?\"\":;\n\n return (\n
\n