列表组件

config/webpack.prod.config.js

@@ -15,9 +15,9 @@ module.exports = merge(common, {
     rules: [
       {
         test: /\.css$/,
-        use: [ 
+        use: [
           MiniCssExtractPlugin.loader,
-          'css-loader' 
+          'css-loader'
         ]
       },
       {
@@ -40,39 +40,39 @@ module.exports = merge(common, {
     ]
   },
 
-    optimization: {
-      minimizer: [
-        //new UglifyJsPlugin(),
-        new OptimizeCssAssetsPlugin({
-          assetNameRegExp:/\.css$/g,
-          cssProcessor:require("cssnano"),
-          cssProcessorPluginOptions:{
-            preset:['default', { discardComments: { removeAll:true } }]
-          },
-          canPrint:true
-        })
-  
-      ],
-        splitChunks: {
-          chunks: 'all',
-          minSize: 30000,
-          maxSize: 0,
-          minChunks: 1,
-          cacheGroups: {
-            framework: {
-              test: "framework",
-              name: "framework",
-              enforce: true
-            },
-            vendors: {
-              priority: -10,
-              test: /node_modules/,
-              name: "vendor",
-              enforce: true,
-            },
-          }
-        }
-      },
+  optimization: {
+    minimizer: [
+      //new UglifyJsPlugin(),
+      new OptimizeCssAssetsPlugin({
+        assetNameRegExp: /\.css$/g,
+        cssProcessor: require("cssnano"),
+        cssProcessorPluginOptions: {
+          preset: ['default', { discardComments: { removeAll: true } }]
+        },
+        canPrint: true
+      })
+
+    ],
+    splitChunks: {
+      chunks: 'all',
+      minSize: 30000,
+      maxSize: 0,
+      minChunks: 1,
+      cacheGroups: {
+        framework: {
+          test: "framework",
+          name: "framework",
+          enforce: true
+        },
+        vendors: {
+          priority: -10,
+          test: /node_modules/,
+          name: "vendor",
+          enforce: true,
+        },
+      }
+    }
+  },
 
 
   mode: 'production',
@@ -81,10 +81,17 @@ module.exports = merge(common, {
   },
   mode: 'development',
   devServer: {
-    host:'127.0.0.1',
+    host: '127.0.0.1',
     allowedHosts: [
       'cld2.com'
-  ],
+    ],
+    proxy: { //设置代理
+      "/cld2": {
+        target: "http://cld2.com:7001",
+        pathRewrite: { "^/cld2": "/cld2" },
+        changeOrigin: true
+      }
+    },
     contentBase: path.resolve(__dirname, '../dist'),
     open: true,
     port: 9090,
@@ -92,7 +99,7 @@ module.exports = merge(common, {
     hot: true,
     historyApiFallback: {
       rewrites: [
-        { 
+        {
           from: /^\/company/, to: '/',
           from: /^\/product\/lockStatistics/, to: '/product',
           from: /^\/product/, to: '/product',
@@ -107,7 +114,7 @@ module.exports = merge(common, {
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'public/index.html',
-      chunks:['workbench','framework'],
+      chunks: ['workbench', 'framework'],
       // inject: 'body',
       // minify: {
       //   removeComments: true,

dist/css/app.bundle.css

@@ -1253,12 +1253,11 @@ html body {
       .nav-menu li.active > ul {
         display: block; }
       .nav-menu li.active:not(.open) > a:before {
-        content: '\f413';
-        font-family: 'nextgen-icons';
+        content: '│';
         position: absolute;
-        top: calc(50% - 5px);
-        right: 11px;
-        font-size: 7px;
+        top: calc(50% - 6px);
+        right: 1px;
+        font-size: 20px;
         height: 10px;
         width: auto;
         color: #24b3a4;

public/sub_index.html

@@ -62,8 +62,8 @@
     /**
      * Save to localstorage
      **/
-    var saveSettings = function() {
-      themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function(item) {
+    var saveSettings = function () {
+      themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
         return /^(nav|header|mod|display)-/i.test(item);
       }).join(' ');
       if (document.getElementById('mytheme')) {
@@ -74,7 +74,7 @@
     /**
      * Reset settings
      **/
-    var resetSettings = function() {
+    var resetSettings = function () {
       localStorage.setItem("themeSettings", "");
     }
   </script>
@@ -86,98 +86,111 @@
   </div>
   <!-- END Page Wrapper -->
   <!-- BEGIN应用切换 -->
-  <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog" aria-labelledby="modal-shortcut" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
-          <div class="modal-content">
-              <div class="modal-body">
-                  <ul class="app-list w-auto h-auto p-0 text-left">
-                    <li>
-                      <a href="/" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-11 icon-stack-3x opacity-100 color-primary-700"></i> <i class="base base-7 icon-stack-2x opacity-100 color-primary-500"></i> <i class="fas fa-chess icon-stack-1x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                          工作台
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/contact" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-4 icon-stack-3x opacity-100 color-info-700"></i> <i class="base base-12 icon-stack-2x opacity-100 color-info-500"></i> <i class="fas fa-address-book icon-stack-1x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                         客户
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <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>
-                            <i class="fal fa-box icon-stack-1x text-white"></i>
-                          </span>
-                          <span class="app-list-name">
-                            产品
-                          </span>
-                        </a>
-                    </li>
-                    <li>
-                      <a href="#" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-9 icon-stack-3x opacity-100 color-success-700"></i> <i class="base base-14 icon-stack-2x opacity-100 color-success-500"></i> <i class="fas fa-clipboard-list icon-stack-1x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                            费用
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-3 icon-stack-3x opacity-100 color-warning-700"></i> <i class="base base-9 icon-stack-2x opacity-100 color-warning-500"></i> <i class="fas fa-credit-card-front icon-stack-1x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                            开票
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#" class="app-list-item text-white">
-                        <div class="icon-stack">
-                          <i class="base-18 icon-stack-3x color-info-300"></i>
-                          <span class="position-absolute pos-top pos-left pos-right color-white fs-md mt-2 fw-400">Zz..</span>
-                        </div>
-                        <span class="app-list-name">
-                            假期
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/hr" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-15 icon-stack-3x opacity-100 color-fusion-200"></i> <i class="base base-10 icon-stack-2x opacity-100 color-fusion-500"></i> <i class="fas fa-users icon-stack-1x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                            人资
-                          </span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="#" class="app-list-item text-white">
-                        <div class='icon-stack'>
-                          <i class="base base-5 icon-stack-3x opacity-100 color-danger-300"></i> <i class="base base-14 icon-stack-2x opacity-100 color-danger-200"></i> <i class="fas fa-id-card icon-stack-2x opacity-100 color-white"></i>
-                        </div>
-                        <span class="app-list-name">
-                            我的纵横
-                          </span>
-                      </a>
-                    </li>
-                  </ul>
-              </div>
-          </div>
+  <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
+    aria-labelledby="modal-shortcut" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
+      <div class="modal-content">
+        <div class="modal-body">
+          <ul class="app-list w-auto h-auto p-0 text-left">
+            <li>
+              <a href="/" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-11 icon-stack-3x opacity-100 color-primary-700"></i> <i
+                    class="base base-7 icon-stack-2x opacity-100 color-primary-500"></i> <i
+                    class="fas fa-chess icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  工作台
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="/contact" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-4 icon-stack-3x opacity-100 color-info-700"></i> <i
+                    class="base base-12 icon-stack-2x opacity-100 color-info-500"></i> <i
+                    class="fas fa-address-book icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  客户
+                </span>
+              </a>
+            </li>
+            <li>
+              <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>
+                  <i class="fal fa-box icon-stack-1x text-white"></i>
+                </span>
+                <span class="app-list-name">
+                  产品
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-9 icon-stack-3x opacity-100 color-success-700"></i> <i
+                    class="base base-14 icon-stack-2x opacity-100 color-success-500"></i> <i
+                    class="fas fa-clipboard-list icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  费用
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-3 icon-stack-3x opacity-100 color-warning-700"></i> <i
+                    class="base base-9 icon-stack-2x opacity-100 color-warning-500"></i> <i
+                    class="fas fa-credit-card-front icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  开票
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="app-list-item text-white">
+                <div class="icon-stack">
+                  <i class="base-18 icon-stack-3x color-info-300"></i>
+                  <span class="position-absolute pos-top pos-left pos-right color-white fs-md mt-2 fw-400">Zz..</span>
+                </div>
+                <span class="app-list-name">
+                  假期
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="/hr" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-15 icon-stack-3x opacity-100 color-fusion-200"></i> <i
+                    class="base base-10 icon-stack-2x opacity-100 color-fusion-500"></i> <i
+                    class="fas fa-users icon-stack-1x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  人资
+                </span>
+              </a>
+            </li>
+            <li>
+              <a href="#" class="app-list-item text-white">
+                <div class='icon-stack'>
+                  <i class="base base-5 icon-stack-3x opacity-100 color-danger-300"></i> <i
+                    class="base base-14 icon-stack-2x opacity-100 color-danger-200"></i> <i
+                    class="fas fa-id-card icon-stack-2x opacity-100 color-white"></i>
+                </div>
+                <span class="app-list-name">
+                  我的纵横
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
+    </div>
   </div>
 </body>
 
@@ -185,7 +198,42 @@
 <script src="http://cld2.com:9090/js/app.bundle.js"></script>
 <script src="http://cld2.com:9090/js/cld-custom.js"></script>
 
+
 <script type="text/javascript">
+
+
+  // $(document).ready(function () {
+  //   $('#dt-basic-example').dataTable(
+  //     {
+  //       responsive: true,
+  //       autoWidth: true,
+  //       info: false,
+  //       searching: false,
+  //       lengthChange: false,
+  //       "ajax": {
+  //         "url": "http://cld2.com:9090/cld2/contact/client",
+  //         "dataSrc": "list"
+  //       }
+  //       //scrollX: true,
+  //     });
+
+  //   $('.js-thead-colors a').on('click', function () {
+  //     var theadColor = $(this).attr("data-bg");
+  //     console.log(theadColor);
+  //     $('#dt-basic-example thead').removeClassPrefix('bg-').addClass(theadColor);
+  //   });
+
+  //   $('.js-tbody-colors a').on('click', function () {
+  //     var theadColor = $(this).attr("data-bg");
+  //     console.log(theadColor);
+  //     $('#dt-basic-example').removeClassPrefix('bg-').addClass(theadColor);
+  //   });
+
+  // });
+
+
+
+
   autoFlashHeight();
   $('.slimScroll1').slimScroll({
     position: 'right',
@@ -211,5 +259,6 @@
 <script>
 
 
-  </script>
-</html>
+</script>
+
+</html>

src/common/config.js

@@ -0,0 +1 @@
+export const CLD2API = 'http://cld2.com:9090/cld2';

src/common/dataTable/index.js

@@ -0,0 +1,81 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import * as config from '../config.js';
+const $ = require('jquery');
+$.DataTable = require('datatables.net');
+
+class dataTable extends PureComponent {
+
+
+    render() {
+        return (
+            <div>
+                <table ref={el => this.el = el} className="table table-bordered table-hover table-striped w-100">
+                <thead dangerouslySetInnerHTML={{__html: this.props.thead}} /> 
+                </table>
+            </div>
+        );
+    }
+
+
+    componentDidMount() {
+
+        this.props.onRef(this)
+
+        this.$el = $(this.el);
+        const td2 = this.$el.DataTable(
+            {
+                ordering: false,
+                processing: true,
+                serverSide: true,
+                responsive: true,
+                autoWidth: true,
+                info: false,
+                searching: true,
+                dom: 'lBrtip',
+                lengthChange: false,
+                'ajax': {
+                    url: config.CLD2API + this.props.url,
+                    type: 'get',
+                    // "dataSrc": "list"
+                },
+                columns: this.props.columns,
+            }
+        );
+
+
+        // td2.clear();
+        //console.log(td2.search('123', false, false));
+        td2.search('123').draw();
+
+        //td2.row.add({ 'DT_RowId': '0', 'clientname': '21dd23' });
+        //td2.draw();
+        //console.log($.DataTable.column(2));
+        //this.$el.dataTable().search('123').draw();
+        //dt.search('123').draw();
+
+    }
+    handleSearch() {
+        console.log('ddd3');
+    }
+
+}
+
+const mapStateToProps = (state) => {
+    return {
+        // clientList: state.getIn(['contact', 'clientList']),
+        // dataSet: state.getIn(['contact', 'dataSet']),
+    }
+}
+
+const mapDispathToProps = (dispatch) => {
+    return {
+        handleSearch() {
+            console.log('ddd2');
+        },
+    }
+}
+
+
+export default connect(mapStateToProps, mapDispathToProps)(dataTable);
+//export default dataTable;

src/contact/client/component/clientWrapper.js

@@ -0,0 +1,7 @@
+import React, { PureComponent, Fragment } from 'react';
+
+class clientPage extends PureComponent {
+    render() {
+        
+    }
+}

src/contact/client/store/actionCreators.js

@@ -1,52 +1,53 @@
 import * as constants from './constants';
 import { fromJS } from 'immutable';
-
+import * as config from '../../../common/config.js';
 import axios from '../../../common/axios_auth.js';
 // import axios from 'axios';
 
+export const getClientLIst = () => {
+    return (dispatch) => {
 
 
-//actionType
-export const searchFocus = () => ({
-    type: constants.SEARCH_FOCUS
-});
 
-export const getList = () => {
-    return (dispatch) => {
-        axios.get('/api/submenuList.json').then((res) => {
+
+        axios.get(config.CLD2API+'/contact/client').then((res) => {
             const data = res.data;
-            dispatch(changeList(data.data));
+            if(data.code===200){
+                dispatch(changeList(JSON.parse(data.list)));
+            }else{
+                console.log(data);
+            }
         }).catch(() => {
             console.log('error');
         })
     }
 };
 
-export const changeInputValue = (value) => (  {
-    type: constants.CHANGE_INPUTVALUE,
-    data:fromJS(value),
-});
+//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,
+    type: constants.CHANGE_CLIENT_DATA,
     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/contact/client/store/constants.js

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

src/contact/client/store/reducer.js

@@ -1,19 +1,67 @@
 import * as constants from './constants';
-//锁定state不可修改，导致错误y
 import { fromJS } from 'immutable';
 
-
 const defaultState = fromJS({
-    menu: 'hello submenu-t!!!',
-    list:[],
-    inputValue:'',
+	clientList: [],
+	searchValue: '',
+	columns: [
+		{ data: "clientname" },
+		{ data: "companyname" },
+		{ data: "telephone" },
+		{ data: "phone" },
+		{ data: "qq" },
+		{ data: "department" },
+		{ data: "position" },
+		{ data: "office" },
+		{ data: "local" },
 
-});
+		{ data: "local" },
+		{ data: "local" },
 
+		{ data: "address" },
+		{ data: "ride" },
+		{ data: "landmarks" },
+		{ data: "stay" },
+		{ data: "mark" },
 
-export default (state = defaultState, action) => {
+		{ data: "mark" },
+		{ data: "mark" },
+		{ data: "mark" },
+		{ data: "mark" },
+	],
+	clientThead:`
+		<tr>
+		  <th>联系人</th>
+		  <th>客户名称</th>
+		  <th>手机</th>
+		  <th>电话</th>
+		  <th>QQ</th>
+		  <th>部门</th>
+		  <th>职务</th>
+		  <th>办公室</th>
+		  <th>地区</th>
+		  <th>个人标签</th>
+		  <th>协作标签</th>
+		  <th>地址</th>
+		  <th>乘车</th>
+		  <th>地标</th>
+		  <th>住宿</th>
+		  <th>备注</th>
+		  <th>软件锁</th>
+		  <th>大司空</th>
+		  <th>养护云</th>
+		  <th>创建人</th>
+		</tr>`,
+});
 
-    // switch(action.type) {
+export default (state = defaultState, action) => {
+	switch (action.type) {
+		case constants.CHANGE_CLIENT_DATA:
+			return state.set('clientList', action.data);
+		default:
+			return state;
+	}
+	// switch(action.type) {
 	// 	case constants.SEARCH_FOCUS:
 	// 		return state.set('focused', true);
 	// 	case constants.SEARCH_BLUR:
@@ -32,27 +80,5 @@ export default (state = defaultState, action) => {
 	// 	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;
 }

src/contact/store/reducer.js

@@ -7,7 +7,7 @@ import { reducer as commonReducer } from '../common/store';
 
 const reducer = combineReducers({
     common: commonReducer,
-    client: clientReducer,
+    contact: clientReducer,
 
 });
 

src/contact/style.css

@@ -0,0 +1,7 @@
+.listWidth{
+    min-width: 2000px;
+    
+}
+.width300{
+    width:300px;
+}