add terminal user manage module

.roadhogrc.mock.js

@@ -1,10 +1,12 @@
 import mockjs from 'mockjs';
 import { format, delay } from 'roadhog-api-doc';
 import { campusList } from './mock/campus';
+import { terminalList } from './mock/terminal';
 import * as api from './src/utils/api';
 
 // mock数据持久化
 global.campusList = campusList;
+global.terminalList = terminalList;
 
 // 操作成功响应内容
 const successMsg = { code: 200, success: true, message: null };
@@ -57,6 +59,33 @@ const update = (dataset, params) => {
   }
 }
 
+// 删除
+const remove = (dataset, params) => {
+  return {
+    ...successMsg,
+  }
+}
+
+const NOTFOUND = { code: 404, message: 'Not Found!' };
+const queryArray = (array, key, keyAlias = 'key') => {
+  if (!(array instanceof Array)) {
+    return null
+  }
+  let data
+
+  for (let item of array) {
+    if (item[keyAlias] === key) {
+      data = item
+      break
+    }
+  }
+
+  if (data) {
+    return data
+  }
+  return null
+}
+
 // mock数据
 const proxy = {
   [`GET ${api.campuses}`]: (req, res) => {
@@ -71,6 +100,28 @@ const proxy = {
     console.log('[CampusUpdate]', req.body);
     res.send(update(global.campusList, req.body));
   },
+  [`GET ${api.terminals}`]: (req, res) => {
+    console.log('[TerminalList]', req.query);
+    res.send(query(global.terminalList, req.query));
+  },
+  [`POST ${api.terminal.replace('/:id', '')}`]: (req, res) => {
+    console.log('[TerminalCreate]', req.body);
+    res.send(create(global.terminalList, req.body));
+  },
+  [`PUT ${api.terminal.replace('/:id', '')}`]: (req, res) => {
+    console.log('[TerminalUpdate]', req.body);
+    res.send(update(global.terminalList, req.body));
+  },
+  [`DELETE ${api.terminal}`]: (req, res) => {
+    const { id } = req.params;
+    const data = queryArray(global.terminalList, id, 'id');
+    if (data) {
+      global.terminalList = global.terminalList.filter(item => item.id !== id);
+      res.status(204).end();
+    } else {
+      res.status(404).json(NOTFOUND);
+    }
+  },
 };
 
 // 是否禁用代理

mock/terminal.js

@@ -0,0 +1,17 @@
+const terminalList = [];
+for (let i = 1; i < 101; i++) {
+  terminalList.push({
+    id: 'd513401461284feea555a3e0abc5974a' + i,
+    name: `中关村科贸${i}班`,
+    code: '150223211102013' + i,
+    campusId: 'd513401461284feea555a3e0abc5974b',
+    campusName: '湖南省-长沙市 天心区-育才中心校区',
+    mobile: '18880991178',
+    contactName: '钱志良',
+    status: 'NORMAL',
+    gmtCreated: 1512960192010,
+    gmtModified: 1512960192010,
+  })
+}
+
+module.exports = { terminalList };

src/common/menu.js

@@ -85,7 +85,7 @@ const menuData = [
     path: 'terminal',
     children: [{
       name: '终端用户',
-      path: 'terminal-user',
+      path: 'user',
     },{
       name: '校区管理',
       path: 'campus',

src/common/router.js

@@ -39,6 +39,9 @@ export const getRouterData = (app) => {
     '/terminal/campus': {
       component: dynamicWrapper(app, ['campus'], () => import('../routes/Campus')),
     },
+    '/terminal/user': {
+      component: dynamicWrapper(app, ['terminal'], () => import('../routes/Terminal')),
+    },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
     },

src/models/terminal.js

@@ -0,0 +1,87 @@
+import { query, create, update, remove } from '../services/terminal';
+import modelExtend from 'dva-model-extend';
+import queryString from 'query-string';
+import { pageModel } from './common';
+import config from '../utils/config';
+import { checkSearchParams } from '../utils/utils';
+
+export default modelExtend(pageModel, {
+  namespace: 'terminal',
+
+  state: {
+    currentItem: {},
+    itemLoading: false,
+    listLoading: false,
+    modalVisible: false,
+    modalType: 'create',
+  },
+
+  subscriptions: {
+    setup({ dispatch, history }) {
+      history.listen((location) => {
+        if (location.pathname === '/terminal/user') {
+          const payload = checkSearchParams(queryString.parse(location.search));
+          dispatch({
+            type: 'query',
+            payload,
+          });
+        }
+      });
+    }
+  },
+
+  effects: {
+    * query ({ payload = {} }, { call, put }) {
+      yield put({ type: 'changeLoading', payload: { listLoading: true }});
+      const { data, success } = yield call(query, payload);
+      if (success) {
+        yield put({
+          type: 'querySuccess',
+          payload: {
+            list: data.list,
+            pagination: {
+              current: Number(payload.pageNo) || 1,
+              pageSize: Number(payload.pageSize) || config.pageSize,
+              total: data.totalSize,
+            }
+          }
+        });
+      }
+      yield put({ type: 'changeLoading', payload: { listLoading: false }});
+    },
+    * create ({ payload }, { call, put }) {
+      const { data, success } = yield call(create, payload);
+      if (success) {
+        yield put({ type: 'hideModal' });
+        yield put({ type: 'query' }, payload: { pageNo: 1, pageSize: config.pageSize });
+      }
+    },
+    * update ({ payload }, { call, put }) {
+      const { data, success } = yield call(update, payload);
+      if (success) {
+        yield put({ type: 'hideModal' });
+        yield put({ type: 'query', payload: { pageNo: 1, pageSize: config.pageSize } });
+      }
+    },
+    * delete ({ payload }, { call, put }) {
+      const { data, success } = yield call(remove, { id: payload });
+      if (success) {
+        yield put({ type: 'query', payload: { pageNo: 1, pageSize: config.pageSize } });
+      }
+    }
+  },
+
+  reducers: {
+    changeLoading(state, { payload }) {
+      return { ...state, ...payload };
+    },
+
+    showModal(state, { payload }) {
+      return { ...state, ...payload, modalVisible: true };
+    },
+
+    hideModal(state) {
+      return { ...state, modalVisible: false };
+    },
+  }
+})

src/models/user.js

@@ -1,4 +1,4 @@
-import { query as queryUsers, queryCurrent } from '../services/user';
+import { query as queryUsers, queryCurrent } from '../services/cmsuser';
 
 export default {
   namespace: 'user',

src/routes/Campus/search.js

@@ -21,7 +21,7 @@ const Search = ({
     },{
       value: 'contactName', name: '联系人'
     },{
-      value: 'mobile', name: '手机号',
+      value: 'mobile', name: '电话',
     }],
     selectProps: {
       defaultValue: field || 'name',

src/routes/GlobalList.less

@@ -1,10 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../utils/utils.less";
-
-.splitLine {
-  background: @border-color-split;
-  display: inline-block;
-  margin: 0 8px;
-  width: 1px;
-  height: 12px;
-}

src/routes/Terminal/CampusList.js

@@ -1,137 +0,0 @@
-import react, { PureComponent } from 'react';
-import { connect } from 'dva';
-import { routerRedux } from 'dva/router';
-import { Card, Row, Col, Table, Select, Input, Button, Form, Popconfirm } from 'antd';
-import moment from 'moment';
-import PageHeaderLayout from '../../layouts/PageHeaderLayout';
-import styles from '../GlobalList.less';
-
-@connect(state => ({
-  campus: state.campus,
-}))
-export default class CampusList extends PureComponent {
-  render() {
-    const { campus } = this.props;
-    const search = ({
-      field,
-      keyword,
-      addPower,
-      onSearch,
-      onAdd
-    }) => {
-      const searchGroupProps = {
-        field,
-        keyword,
-        size: 'large',
-        select: true,
-        selectOptions: [{
-          value: 'name', name: '校区名称'
-        },{
-          value: 'code', name: '校区编号'
-        },{
-          value: 'contactName', name: '联系人'
-        },{
-          value: 'mobile', name: '手机号',
-        },{
-          value: 'address', name: '联系地址'
-        }],
-        selectProps: {
-          defaultValue: field || 'name',
-        },
-        onSearch: (value) => {
-          onSearch(value);
-        },
-      }
-    }
-    const tablePagination = {
-      total: campus.totalSize,
-      current: campus.pageNo,
-      pageSize: campus.pageSize,
-      showSizeChanger: true,
-      showQuickJumper: true,
-      showTotal: (total) => { return `共 ${total} 条` }
-    };
-    const tableColumns = [{
-      title: '校区编号',
-      dataIndex: 'code',
-      key: 'code',
-    },{
-      title: '校区名称',
-      dataIndex: 'name',
-      key: 'name',
-    },{
-      title: '联系人',
-      dataIndex: 'contactName',
-      key: 'contactName',
-    },{
-      title: '电话',
-      dataIndex: 'mobile',
-      key: 'mobile',
-    },{
-      title: '地址',
-      dataIndex: 'address',
-      key: 'address',
-    },{
-      title: '添加时间',
-      dataIndex: 'gmtCreated',
-      key: 'gmtCreated',
-      render: (text, record) => (
-        <div>{moment(text).format('YYYY-MM-DD')}</div>
-      )
-    },{
-      title: '操作',
-      dataIndex: 'operation',
-      key: 'operation',
-      fixed: 'right',
-      render: (text, record) => (
-        <div>
-          <a href="#">详情</a>
-          <span className={styles.splitLine} />
-          <a href="#">编辑</a>
-          <span className={styles.splitLine} />
-          <Popconfirm
-            placement="top"
-            cancelText="取消"
-            okText="确定"
-            title="确定删除？"
-          >
-            <a href="#">删除</a>
-          </Popconfirm>
-        </div>
-      )
-    }];
-    return (
-      <PageHeaderLayout
-      >
-        <Card>
-          {/*
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
-            <Col span={12} style={{ marginBottom: 16 }}>
-              <Input.Group compact>
-                <Select style={{ width: '25%' }} defaultValue="0">
-                  <Option value="0">校区编号</Option>
-                  <Option value="1">校区名称</Option>
-                </Select>
-                <Input style={{ width: '55%' }} placeholder="请输入" />
-                <Button style={{ width: '20%' }} type="primary" icon="search">搜索</Button>
-              </Input.Group>
-            </Col>
-            <Col span={4} offset={8} style={{ marginBottom: 16, textAlign: 'right' }}>
-              <Button type="ghost" icon="plus-circle">新建</Button>
-            </Col>
-          </Row>
-          */}
-          <Table
-            bordered={false}
-            rowKey={record => record.id}
-            loading={campus.listLoading}
-            columns={tableColumns}
-            dataSource={campus.list}
-            pagination={tablePagination}
-            scroll={{ x: 1000 }}
-          />
-        </Card>
-      </PageHeaderLayout>
-    );
-  }
-}

src/routes/Terminal/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import queryString from 'query-string';
+import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
+import { Card } from 'antd';
+import TableList from './table';
+import ModalForm from './modal';
+import Search from './search';
+import PageHeaderLayout from '../../layouts/PageHeaderLayout';
+
+function Terminal({ location, dispatch, terminal }) {
+  location.query = queryString.parse(location.search);
+  const { query, pathname } = location;
+  const { field, keyword } = query;
+  const { list, listLoading, pagination, currentItem, itemLoading, modalVisible, modalType } = terminal;
+
+  const modalProps = {
+    item: modalType === 'create' ? {} : currentItem,
+    visible: modalVisible,
+    maskClosable: false,
+    title: `${modalType === 'create' ? '添加终端' : '编辑终端'}`,
+    wrapClassName: 'vertical-center-modal',
+    onOk (data) {
+      dispatch({
+        type: `terminal/${modalType}`,
+        payload: data,
+      });
+    },
+    onCancel () {
+      dispatch({
+        type: 'terminal/hideModal',
+      });
+    },
+  };
+
+  const searchProps = {
+    field,
+    keyword,
+    onSearch: (payload) => {
+      if (!payload.keyword.length) {
+        delete payload.field;
+        delete payload.keyword;
+      }
+      dispatch(routerRedux.push({
+        pathname,
+        search: queryString.stringify({
+          ...payload
+        })
+      }));
+    },
+    onAdd: () => {
+      dispatch({
+        type: 'terminal/showModal',
+        payload: {
+          modalType: 'create',
+        },
+      });
+    }
+  };
+  const listProps = {
+    dataSource: list,
+    loading: listLoading,
+    pagination,
+    location,
+    onChange: (page) => {
+      dispatch(routerRedux.push({
+        pathname,
+        search: queryString.stringify({
+          ...query,
+          pageNo: page.current,
+          pageSize: page.pageSize,
+        }),
+      }));
+    },
+    onEditItem: (item) => {
+      dispatch({
+        type: 'terminal/showModal',
+        payload: {
+          modalType: 'update',
+          currentItem: item,
+        },
+      })
+    },
+    onDeleteItem: (id) => {
+      dispatch({
+        type: 'terminal/delete',
+        payload: id,
+      });
+    }
+  };
+  return (
+    <PageHeaderLayout>
+      <Card>
+        <Search { ...searchProps } />
+        <TableList { ...listProps } />
+        {modalVisible && <ModalForm { ...modalProps } />}
+      </Card>
+    </PageHeaderLayout>
+  );
+}
+
+Terminal.propTypes = {
+  Terminal: PropTypes.object,
+  location: PropTypes.object,
+  dispatch: PropTypes.func,
+}
+
+export default connect(({ terminal }) => ({ terminal }))(Terminal);

src/routes/Terminal/modal.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Cascader, Switch, Input, Modal, Icon } from 'antd';
+import * as city from '../../utils/city';
+
+const FormItem = Form.Item
+
+const formItemLayout = {
+  labelCol: {
+    span: 7,
+  },
+  wrapperCol: {
+    span: 14,
+  },
+}
+
+const ModalForm = ({
+  item = {},
+  onOk,
+  form: {
+    getFieldDecorator,
+    getFieldsValue,
+    validateFields,
+  },
+  ...modalProps,
+}) => {
+  const handleOk = () => {
+    validateFields((errors) => {
+      if (errors) {
+        return
+      }
+      const data = {
+        ...getFieldsValue(),
+      };
+      data.status ? data.status = 'NORMAL' : data.status = 'DEL';
+      item.id ? data.id = item.id : null;
+      onOk(data);
+    })
+  }
+
+  const modalOpts = {
+    ...modalProps,
+    onOk: handleOk,
+  }
+
+  return (
+    <Modal {...modalOpts}>
+      <Form layout="horizontal">
+        <FormItem label="终端编号：" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('code', {
+            initialValue: item.code,
+          })(<Input disabled={true} placeholder="不填写，根据校区自动生成"/>)}
+        </FormItem>
+        <FormItem label="终端名称：" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('name', {
+            initialValue: item.name,
+          })(<Input placeholder="可选项，为空自动创建教室名"/>)}
+        </FormItem>
+        <FormItem label="终端密码：" hasFeedback {...formItemLayout}>
+          {getFieldDecorator('password', {
+            initialValue: item.password,
+          })(<Input placeholder="修改密码时使用，请谨慎填写！" type="password" addonBefore={<Icon type="edit" />}/>)}
+        </FormItem>
+        <FormItem label="账号状态：" {...formItemLayout}>
+          {getFieldDecorator('status', {
+            valuePropsName: 'checked',
+        })(<Switch defaultChecked={item.status === 'NORMAL' ? true : false} checkedChildren="使用中" unCheckedChildren="禁用中" />)}
+        </FormItem>
+      </Form>
+    </Modal>
+  )
+}
+
+ModalForm.propTypes = {
+  item: PropTypes.object,
+  form: PropTypes.object,
+  type: PropTypes.string,
+  onOk: PropTypes.func,
+}
+
+export default Form.create()(ModalForm);

src/routes/Terminal/search.js

@@ -0,0 +1,53 @@
+import react, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Form, Row, Col, Icon } from 'antd';
+import DataSearch from '../../components/DataSearch';
+
+const Search = ({
+  field,
+  keyword,
+  onSearch,
+  onAdd
+}) => {
+  const searchGroupProps = {
+    field,
+    keyword,
+    size: 'default',
+    select: true,
+    selectOptions: [{
+      value: 'name', name: '终端名称'
+    },{
+      value: 'code', name: '终端编号'
+    },{
+      value: 'merchantId', name: '渠道平台'
+    },{
+      value: 'campusId', name: '校区名称'
+    }],
+    selectProps: {
+      defaultValue: field || 'name',
+    },
+    onSearch: (value) => {
+      onSearch(value);
+    },
+  }
+  return (
+    <Row gutter={24}>
+      <Col lg={10} md={12} sm={16} xs={24} style={{ marginBottom: 16 }}>
+        <DataSearch { ...searchGroupProps } />
+      </Col>
+      <Col lg={{ offset: 7, span: 7 }} md={12} sm={8} xs={24} style={{ marginBottom: 16, textAlign: 'right' }}>
+        <Button type="ghost" onClick={onAdd}><Icon type="plus-circle" />添加</Button>
+      </Col>
+    </Row>
+  )
+}
+
+Search.propTypes = {
+  form: PropTypes.object.isRequired,
+  onSearch: PropTypes.func,
+  onAdd: PropTypes.func,
+  field: PropTypes.string,
+  keyword: PropTypes.string,
+}
+
+export default Form.create()(Search);

src/routes/Terminal/table.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import classnames from 'classnames';
+import queryString from 'query-string';
+import { Modal, Table, Popconfirm, Menu, Icon } from 'antd';
+import AnimTableBody from '../../components/Animation/AnimTableBody';
+import styles from './table.less';
+
+const confirm = Modal.confirm;
+
+const TableList = ({ onDeleteItem, onEditItem, location, pagination, ...tableProps }) => {
+  // 从url中提取查询参数
+  location.query = queryString.parse(location.search);
+  const handleDeleteItem = (record) => {
+    confirm({
+      title: `您确定要${record.status === 'NORMAL' ? '禁用' : '解禁'}该终端账号?`,
+      onOk () {
+        onDeleteItem(record.id);
+      },
+    })
+  }
+  const columns = [{
+    title: '终端编号',
+    dataIndex: 'code',
+    key: 'code',
+  },{
+    title: '终端名称',
+    dataIndex: 'name',
+    key: 'name',
+  },{
+    title: '校区',
+    dataIndex: 'campusName',
+    key: 'campusName',
+  },{
+    title: '添加时间',
+    dataIndex: 'gmtCreated',
+    key: 'gmtCreated',
+    render: (text, record) => (
+      <div>{moment(text).format('YYYY-MM-DD')}</div>
+    )
+  },{
+    title: '操作',
+    dataIndex: 'operation',
+    key: 'operation',
+    render: (text, record) => (
+      <div>
+        <a onClick={() => onEditItem(record)}>编辑</a>
+        <span className={styles.splitLine} />
+          <a onClick={() => handleDeleteItem(record)}>{record.status === 'NORMAL' ? '禁用' : '解禁'}</a>
+      </div>
+    )
+  }];
+  tableProps.pagination = !!pagination && { ...pagination, showSizeChanger: true, showQuickJumper: true, showTotal: total => `共 ${total} 条`};
+  const getBodyWrapperProps = {
+    page: location.query.page,
+    current: tableProps.pagination.current,
+  };
+  const getBodyWrapper = (body) => (<AnimTableBody {...getBodyWrapperProps} body={body} />);
+  return (
+    <Table
+      simple
+      bordered
+      { ...tableProps }
+      columns={columns}
+      className={classnames({ [styles.table]: true, [styles.motion]: true })}
+      rowKey={record => record.id}
+      getBodyWrapper={getBodyWrapper}
+    />
+  );
+}
+
+TableList.propTypes = {
+  location: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onDeleteItem: PropTypes.func.isRequired,
+  onEditItem: PropTypes.func.isRequired,
+}
+
+export default TableList;

src/routes/Terminal/table.less

@@ -0,0 +1,78 @@
+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.table {
+  :global {
+    .ant-table-tbody > tr > td,
+    .ant-table-thead > tr > th {
+      height: 62px;
+    }
+  }
+
+  &.motion {
+    :global {
+      .ant-table-tbody > tr > td,
+      .ant-table-thead > tr > th {
+        &:nth-child(1) {
+          width: 20%;
+        }
+
+        &:nth-child(2) {
+          width: 20%;
+        }
+
+        &:nth-child(3) {
+          width: 30%;
+        }
+
+        &:nth-child(4) {
+          width: 15%;
+        }
+
+        &:nth-child(5) {
+          width: 15%;
+        }
+      }
+
+      .ant-table-thead {
+        & > tr {
+          transition: none;
+          display: block;
+
+          & > th {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+
+      .ant-table-tbody {
+        & > tr {
+          transition: none;
+          display: block;
+          border-bottom: 1px solid #f5f5f5;
+
+          & > td {
+            border-bottom: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          &.ant-table-expanded-row-level-1 > td {
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+.splitLine {
+  background: @border-color-split;
+  display: inline-block;
+  margin: 0 8px;
+  width: 1px;
+  height: 12px;
+}

src/services/terminal.js

@@ -0,0 +1,34 @@
+import { stringify } from 'qs';
+import request from '../utils/request';
+import { terminals, terminal } from '../utils/api';
+
+export async function query(params) {
+  return request(`${terminals}?${stringify(params)}`);
+}
+
+export async function create(params) {
+  const options = {
+    method: 'POST',
+    body: JSON.stringify(params),
+  };
+  return request(`${terminal.replace('/:id', '')}`, options);
+}
+
+export async function update(params) {
+  const options = {
+    method: 'PUT',
+    body: JSON.stringify(params),
+  };
+  return request(`${terminal.replace('/:id', '')}`, options);
+}
+
+export async function remove({ id }) {
+  const options = {
+    method: 'DELETE',
+  }
+  if (id) {
+    return request(`${terminal.replace(':id', id)}`);
+  } else {
+    return {};
+  }
+}

src/utils/api.js

@@ -1,10 +1,12 @@
 import config from './config';
 
 module.exports = {
-  users: `${config.apiHost}/cms/user/list`,
-  currentUser: `${config.apiHost}/cms/user`,
+  cmsUsers: `${config.apiHost}/cms/user/list`,
+  currentCmsUser: `${config.apiHost}/cms/user`,
   userLogin: `${config.apiHost}/login`,
   userLogout: `${config.apiHost}/logout`,
   campuses: `${config.apiHost}/campus/list`,
   campus: `${config.apiHost}/campus/:id`,
+  terminals: `${config.apiHost}/user/list`,
+  terminal: `${config.apiHost}/user/:id`,
 };

src/utils/config.js

@@ -2,6 +2,6 @@
 
 module.exports = {
   // apiHost: 'http://lj.dev.cms.api.com:9100',
-  pageSize: 15,
   apiHost: '',
+  pageSize: 10,
 };