产品-锁库相关

config/webpack.common.config.js

@@ -9,6 +9,7 @@ module.exports = {
     staff:'./src/staff/index.js',
     workbench:'./src/workbench/index.js',
     hr:'./src/human-resource/index.js',
+    product:'./src/product/index.js',
   },
   output: {
     filename: 'js/bundle.js',
@@ -67,6 +68,11 @@ module.exports = {
       filename: 'hr/index.html',
       chunks:['hr','framework']
     }),
+    new HtmlWebpackPlugin({
+      template: 'public/sub_index.html',
+      filename: 'product/index.html',
+      chunks:['product','framework']
+    }),
   ]
 
 

public/index.html

@@ -23,6 +23,8 @@
   <link rel="stylesheet" media="screen, print" href="css/fa-solid.css">
   <link rel="stylesheet" media="screen, print" href="css/fa-brands.css">
 
+
+  
   <script src="js/vendors.bundle.js"></script>
 <script src="js/app.bundle.js"></script>
 <script src="js/cld-custom.js"></script>
@@ -2012,7 +2014,7 @@
                       </a>
                     </li>
                     <li>
-                      <a href="#" class="app-list-item text-white">
+                      <a href="/product" class="app-list-item text-white">
                           <span class="icon-stack">
                             <i class="base base-7 icon-stack-3x opacity-100 color-danger-900 "></i>
                             <i class="base base-4 icon-stack-2x opacity-100 color-danger-600 "></i>

public/sub_index.html

@@ -94,25 +94,7 @@
             <i class="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
           </a>
         </div>
-        <!-- 侧栏主菜单 -->
-        <nav id="js-primary-nav" class="primary-nav" role="navigation">
-          <ul id="js-nav-menu" class="nav-menu">
-            <li class="active">
-              <a href="contact.html" title="联系人" data-filter-tags="联系人">
-     							<i class="fal fa-address-book"></i>
-     							<span class="nav-link-text">联系人</span>
-     						</a>
-            </li>
-            <li class="">
-              <a href="company.html" title="公司" data-filter-tags="公司">
-     							<i class="fal fa-building "></i>
-     							<span class="nav-link-text">公司</span>
-     						</a>
-            </li>
-          </ul>
-          <div class="filter-message js-filter-message bg-success-600"></div>
-        </nav>
-        <!-- END 侧栏主菜单 -->
+        
         
       </aside>
       <!-- END 侧栏主菜单 -->
@@ -2012,7 +1994,7 @@
                       </a>
                     </li>
                     <li>
-                      <a href="#" class="app-list-item text-white">
+                      <a href="/product" class="app-list-item text-white">
                           <span class="icon-stack">
                             <i class="base base-7 icon-stack-3x opacity-100 color-danger-900 "></i>
                             <i class="base base-4 icon-stack-2x opacity-100 color-danger-600 "></i>

src/product/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Product from './product';
+
+ReactDOM.render(<Product />, document.getElementById('root'));

src/product/product.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react';
+import { Provider } from 'react-redux';
+import store from './store';
+import Submenu from './submenu';
+// import Content from './content';
+
+//import './product.css';
+
+class Hr extends Component {
+  render() {
+    //console.log(this.props.store);
+    return (
+      <Provider store={store}>
+        <Submenu />
+        {/* <Content /> */}
+      </Provider>
+        
+     
+    );
+  }
+}
+
+export default Hr;
+
+

src/product/store/index.js

@@ -0,0 +1,11 @@
+import { createStore, compose, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import reducer from './reducer';
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+const store = createStore(reducer, composeEnhancers(
+    applyMiddleware(thunk)
+));
+
+export default store;

src/product/store/reducer.js

@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux-immutable';
+import { reducer as submenuReducer } from '../submenu/store';
+
+const reducer = combineReducers({
+    submenu: submenuReducer
+});
+
+export default reducer;

src/product/submenu/index.js

@@ -0,0 +1,121 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import { actionCreators } from './store';
+import { BrowserRouter, Route,Link } from 'react-router-dom';
+
+class Submenu extends PureComponent {
+
+    
+
+
+    render() {
+       // const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
+        return (
+            <nav id="js-primary-nav" class="primary-nav" role="navigation">
+            <ul id="js-nav-menu" class="nav-menu">
+                <li class="active">
+                <a href="contact.html" title="联系人" data-filter-tags="联系人">
+                    <i class="fal fa-address-book"></i>
+                    <span class="nav-link-text">联系人</span>
+                    </a>
+                </li>
+                <li class="">
+                <a href="company.html" title="公司" data-filter-tags="公司">
+                    <i class="fal fa-building "></i>
+                    <span class="nav-link-text">公司</span>
+                    </a>
+                </li>
+            </ul>
+            <div class="filter-message js-filter-message bg-success-600"></div>
+            </nav>
+
+            // <div>
+            //     <BrowserRouter>
+            //     <div>
+                    
+            //         <ul>
+            //             <li><Link to='/'>首页</Link></li>
+            //             <li><Link to='/company'>关于</Link></li>
+            //         </ul>
+
+	      	// 		{/* <Route path='/' exact component={Home}></Route>
+	      	// 		<Route path='/detail' exact component={Detail}></Route> */}
+            //         <Route path='/' exact render={()=><div>联系人</div>} ></Route>
+            //         <Route path='/company' exact render={()=><div>公司</div>} ></Route>
+                    
+	      	// 	</div>
+            //     </BrowserRouter>
+            //     {/* innerRef */}
+            //     <div >{inputValue}</div>
+            //     <input onFocus={() => handleInputFocus(list)} ref={(input)=>{this.ivalue=input}} onChange={()=>handleInputChange(this.ivalue)}  />
+            //     {menu}
+            //     <div>{this.getListArea()}</div>
+            // </div>
+        );
+    }
+
+    //组件即将要被挂在的时候执行的方法--
+    componentDidMount(){
+        //逻辑代码可以写在mapDispathToProps里 this.props.方法
+
+        // axios.get('/api/submenuList.json').then((res) => {
+        //     const data = res.data;
+        //     dispatch(changeList(data.data));
+        // }).catch(() => {
+        //     console.log('error');
+        // })
+    }
+
+}
+
+
+
+/**
+ * store里的数据映射到这个组件里的state
+ * @param {*} state 
+ */
+const mapStateToProps = (state) => {
+
+    return {
+        //menu: state.submenu.menu
+        menu: state.getIn(['submenu', 'menu']),
+        list: state.getIn(['submenu', 'list']),
+        inputValue: state.getIn(['submenu', 'inputValue']),
+    }
+    // return {
+    // 	focused: state.getIn(['header', 'focused']),
+    // 	list: state.getIn(['header', 'list']),
+    // 	page: state.getIn(['header', 'page']),
+    // 	totalPage: state.getIn(['header', 'totalPage']),
+    // 	mouseIn: state.getIn(['header', 'mouseIn'])
+    // }
+}
+
+
+/**
+ * 要改变store里的内容需要调用dispatch方法
+ * @param {*} dispatch 
+ */
+const mapDispathToProps = (dispatch) => {
+    return {
+        handleInputFocus(list) {
+
+            // const action = {
+            //     type: 'aearch_focus'
+            // };
+            //发送给store--提取出action--避免发送重复的ajax请求
+            (list.size === 0) && dispatch(actionCreators.getList());
+            // if(list.size>0){
+            //     dispatch(actionCreators.getList());
+            // }
+            dispatch(actionCreators.searchFocus());
+        },
+        handleInputChange(ivalueElem){
+           
+            dispatch(actionCreators.changeInputValue(ivalueElem.value));
+        },
+    }
+    
+}
+
+export default connect(mapStateToProps, mapDispathToProps)(Submenu);

src/product/submenu/store/actionCreators.js

@@ -0,0 +1,52 @@
+import * as constants from './constants';
+import { fromJS } from 'immutable';
+
+import axios from '../../../common/axios_auth.js';
+// import axios from 'axios';
+
+
+
+//actionType
+export const searchFocus = () => ({
+    type: constants.SEARCH_FOCUS
+});
+
+export const getList = () => {
+    return (dispatch) => {
+        axios.get('/api/submenuList.json').then((res) => {
+            const data = res.data;
+            dispatch(changeList(data.data));
+        }).catch(() => {
+            console.log('error');
+        })
+    }
+};
+
+export const changeInputValue = (value) => (  {
+    type: constants.CHANGE_INPUTVALUE,
+    data:fromJS(value),
+});
+
+const changeList = (data) => ({
+    type: constants.CHANGE_LIST,
+    data: fromJS(data),
+    // totalPage: Math.ceil(data.length / 10)
+});
+
+// export const searchBlur = () => ({
+// 	type: constants.SEARCH_BLUR
+// });
+
+// export const mouseEnter = () => ({
+// 	type: constants.MOUSE_ENTER
+// });
+
+// export const mouseLeave = () => ({
+// 	type: constants.MOUSE_LEAVE
+// });
+
+// export const changePage = (page) => ({
+// 	type: constants.CHANGE_PAGE,
+// 	page
+// });
+

src/product/submenu/store/constants.js

@@ -0,0 +1,5 @@
+export const SEARCH_FOCUS = 'submenu/SEARCH_FOCUS';
+export const CHANGE_LIST ='submenu/CHANGE_LIST';
+export const CHANGE_INPUTVALUE ='submenu/CHANGE_INPUTVALUE';
+
+

src/product/submenu/store/index.js

@@ -0,0 +1,5 @@
+import reducer from './reducer';
+import * as actionCreators from './actionCreators';
+import * as constants from './constants';
+
+export { reducer,actionCreators,constants }

src/product/submenu/store/reducer.js

@@ -0,0 +1,58 @@
+import * as constants from './constants';
+//锁定state不可修改，导致错误y
+import { fromJS } from 'immutable';
+
+
+const defaultState = fromJS({
+    menu: 'hello submenu-t!!!',
+    list:[],
+    inputValue:'',
+
+});
+
+
+export default (state = defaultState, action) => {
+
+    // switch(action.type) {
+	// 	case constants.SEARCH_FOCUS:
+	// 		return state.set('focused', true);
+	// 	case constants.SEARCH_BLUR:
+	// 		return state.set('focused', false);
+	// 	case constants.CHANGE_LIST:
+	// 		return state.merge({
+	// 			list: action.data,
+	// 			totalPage: action.totalPage
+	// 		});
+	// 	case constants.MOUSE_ENTER:
+	// 		return state.set('mouseIn', true);
+	// 	case constants.MOUSE_LEAVE:
+	// 		return state.set('mouseIn', false);
+	// 	case constants.CHANGE_PAGE:
+	// 		return state.set('page', action.page);
+	// 	default:
+	// 		return state;
+	// }
+    if(action.type===constants.CHANGE_INPUTVALUE){
+        return state.set('inputValue',action.data);
+
+    }
+
+
+
+    if(action.type===constants.SEARCH_FOCUS){
+        return state.set('menu','clicke me');
+        // return {
+        //     menu:'clicke me'
+        // }
+    }
+    if(action.type===constants.CHANGE_LIST){
+        return state.set('list',action.data);
+        //return state.set('menu','clicke me');
+
+        // return state.merge({
+        //     list: action.data,
+        //     //totalPage: action.totalPage
+        // });
+    }
+    return state;
+}