账号资源>已开通列表 添加高级筛选

.eslintrc

@@ -11,6 +11,7 @@
     "jasmine": true
   },
   "rules": {
+    "prefer-destructuring": ["error", {"object": false, "array": false}],
     "generator-star-spacing": [0],
     "consistent-return": [0],
     "react/forbid-prop-types": [0],

.gitignore

@@ -20,3 +20,4 @@ yarn.lock
 package-lock.json
 *bak
 .prettierrc
+.jshintrc

package.json

@@ -4,7 +4,7 @@
   "description": "Enterprise applications - Content Manage System",
   "private": true,
   "scripts": {
-    "_precommit": "npm run lint-staged",
+    "precommit": "npm run lint-staged",
     "start": "cross-env ESLINT=none roadhog dev",
     "start:no-proxy": "cross-env NO_PROXY=true ESLINT=none roadhog dev",
     "build": "cross-env NODE_ENV=production ESLINT=none roadhog build",

src/models/login.js

@@ -31,7 +31,6 @@ export default {
       }
     },
   },
-
   reducers: {
     changeLoginStatus(state, { payload }) {
       if (payload.data) {

src/routes/Campus/CampusList.js

@@ -39,6 +39,7 @@ function merchantDataFormatter(data) {
   fetching: loading.models.merchant,
   loading: loading.models.campus,
 }))
+
 export default class CampusListPage extends Component {
   constructor(props) {
     super(props);

src/routes/Dashboard/Accounts/AccountsTerminals.js

@@ -1,15 +1,38 @@
 import React, { Component } from 'react';
 import moment from 'moment';
 import { connect } from 'dva';
-import { Card, Badge } from 'antd';
+import { Card, Badge, Modal, Form } from 'antd';
 import { StandardTableList } from '../../../components/AXList';
 import { addRowKey } from '../../../utils/utils';
 import styles from './AccountsTerminals.less';
+import AXRemoteSelect from '../../../components/AXRemoteSelect';
 
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 7 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 15 },
+    md: { span: 13 },
+  },
+};
+function arrayDataFormatter(data) {
+  return data.map((item) => {
+    return {
+      text: item.name,
+      value: `${item.name}||${item.id}`,
+    };
+  });
+}
 
-@connect(({ loading, accounts }) => ({
+@Form.create()
+@connect(({ loading, accounts, campus }) => ({
   accounts,
+  campus,
   loading: loading.models.accounts,
+  fetching: loading.models.campus,
 }))
 
 export default class TerminalsAccountsPage extends Component {
@@ -19,21 +42,29 @@ export default class TerminalsAccountsPage extends Component {
     this.state = {
       UIParams: (state || {}).UIParams, // 组件的状态参数
       Queryers: (state || {}).Queryers, // 查询的条件参数
+      campuses: (state || {}).campuses || [], // 记录筛选的校区
+      filterModalDestroy: true,
     };
   }
   componentWillMount() {
+    const { campuses } = this.state;
+    let campusId;
+    if (campuses && campuses.length) {
+      campusId = campuses[0].split('||')[1];
+    }
     this.props.dispatch({
       type: 'accounts/fetchTerminalsList',
-      payload: { ...this.state.Queryers }
-    })
+      payload: {
+        campusId,
+        ...this.state.Queryers,
+      },
+    });
   }
-  // 下载
   handleDownloadOperation = () => {
     this.props.dispatch({
       type: 'accounts/fetchTerminalsExcel',
-    })
+    });
   };
-
   handleFilterOperation = (params, states) => {
     this.setState({
       UIParams: states,
@@ -46,10 +77,43 @@ export default class TerminalsAccountsPage extends Component {
       },
     });
   };
+  handleFilterModalShow = () => {
+    this.setState({ filterModalDestroy: false });
+  };
+  handleFilterModalDestroy = () => {
+    this.setState({ filterModalDestroy: true });
+  };
+  handleModalFilterOperation = () => {
+    const { getFieldsValue } = this.props.form;
+    const { campuses } = getFieldsValue();
+    let campusId;
+    if (campuses && campuses.length) {
+      campusId = campuses[0].split('||')[1];
+    }
+    this.props.dispatch({
+      type: 'accounts/fetchTerminalsList',
+      payload: {
+        campusId,
+        ...this.state.Queryers,
+      },
+    });
+    this.handleFilterModalDestroy();
+    this.setState({ campuses });
+  };
+  handleTerminalsRemoteSelectSearch = (value) => {
+    this.props.dispatch({
+      type: 'campus/fetchCampusList',
+      payload: {
+        pageSize: 50,
+        name: value,
+      },
+    });
+  };
   render() {
-    const { loading,accounts } = this.props;
+    const { campuses } = this.state;
+    const { loading, accounts, fetching, campus, form } = this.props;
     const { list, totalSize, pageSize, pageNo } = accounts;
-
+    const { getFieldDecorator } = form;
     const basicSearch = {
       keys: [{
         name: '终端编号',
@@ -61,7 +125,6 @@ export default class TerminalsAccountsPage extends Component {
       pageSize,
       totalSize,
     };
-
     const columns = [{
       title: '终端编号',
       key: 1,
@@ -129,6 +192,7 @@ export default class TerminalsAccountsPage extends Component {
           dataSource={addRowKey(list)}
           header={{
             basicSearch,
+            onAdvanceFilterClick: this.handleFilterModalShow,
             onFilterClick: this.handleFilterOperation,
             onDownload: this.handleDownloadOperation,
           }}
@@ -138,6 +202,32 @@ export default class TerminalsAccountsPage extends Component {
           keepUIState={{ ...this.state.UIParams }}
           showStatusSelect={false}
         />
+        {!this.state.filterModalDestroy && (
+          <Modal
+            width={600}
+            visible
+            title="高级筛选"
+            okText="筛选"
+            cancelText="取消"
+            maskClosable={false}
+            onCancel={this.handleFilterModalDestroy}
+            onOk={this.handleModalFilterOperation}
+          >
+            <Form>
+              <Form.Item label="所属校区" {...formItemLayout}>
+                {getFieldDecorator('campuses', {
+                    initialValue: campuses,
+                  })(
+                    <AXRemoteSelect
+                      fetching={fetching}
+                      dataSource={arrayDataFormatter(campus.list)}
+                      onSearch={this.handleTerminalsRemoteSelectSearch}
+                    />
+                  )}
+              </Form.Item>
+            </Form>
+          </Modal>
+        )}
       </Card>
     );
   }