|
@@ -0,0 +1,218 @@
|
|
|
+import React, { Component } from 'react';
|
|
|
+import moment from 'moment';
|
|
|
+import { connect } from 'dva';
|
|
|
+import { routerRedux } from 'dva/router';
|
|
|
+import queryString from 'query-string';
|
|
|
+import { Modal, Card, List, Form, Button, Input, DatePicker } from 'antd';
|
|
|
+import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
|
|
|
+import FooterToolbar from '../../../components/FooterToolbar';
|
|
|
+import TerminalSelectModal from './terminal';
|
|
|
+import { pageSize, Codes } from '../../../utils/config';
|
|
|
+
|
|
|
+@Form.create()
|
|
|
+@connect(state => ({
|
|
|
+ terminal: state.terminal,
|
|
|
+ whitelistDetail: state.whitelistDetail,
|
|
|
+}))
|
|
|
+export default class WhitelistUserCreate extends Component {
|
|
|
+ // 终端选择弹框,显示 -> 加载数据
|
|
|
+ handleTerminalSelectBtnClick = () => {
|
|
|
+ this.props.dispatch({ type: 'whitelistDetail/showModal' });
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'terminal/query',
|
|
|
+ payload: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择终端
|
|
|
+ handleTerminalModalOk = (record) => {
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'whitelistDetail/hideModal',
|
|
|
+ payload: {
|
|
|
+ userId: record.id,
|
|
|
+ code: record.code,
|
|
|
+ merchantName: record.merchantName,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleTerminalModalCancel = () => {
|
|
|
+ this.props.dispatch({ type: 'whitelistDetail/hideModal' });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleTerminalModalSearch = (data) => {
|
|
|
+ const newData = { ...data };
|
|
|
+ if (newData.keyword) {
|
|
|
+ newData[newData.field] = newData.keyword;
|
|
|
+ }
|
|
|
+ delete newData.field;
|
|
|
+ delete newData.keyword;
|
|
|
+ this.props.dispatch({
|
|
|
+ type: 'terminal/query',
|
|
|
+ payload: { ...newData, pageNo: 1, pageSize },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ handleTerminalModalTableChange = (pagination, filterArgs, filters) => {
|
|
|
+ const newFilters = { ...filters };
|
|
|
+ if (newFilters.keyword) {
|
|
|
+ newFilters[newFilters.field] = newFilters.keyword;
|
|
|
+ }
|
|
|
+ delete newFilters.field;
|
|
|
+ delete newFilters.keyword;
|
|
|
+ const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
|
|
|
+ const tableFilters = Object.keys(filterArgs).reduce((obj, key) => {
|
|
|
+ const newObj = { ...obj };
|
|
|
+ newObj[key] = getValue(filterArgs[key]);
|
|
|
+ return newObj;
|
|
|
+ }, {});
|
|
|
+
|
|
|
+ const data = { ...newFilters, ...tableFilters, pageNo: pagination.current, pageSize: pagination.pageSize };
|
|
|
+ Object.keys(data).map(key => (data[key] ? null : delete data[key]));
|
|
|
+ this.props.dispatch({ type: 'terminal/query', payload: data });
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageCancel = () => {
|
|
|
+ const { whitelistDetail, dispatch } = this.props;
|
|
|
+ const { filters } = whitelistDetail;
|
|
|
+ dispatch(routerRedux.push({
|
|
|
+ pathname: '/terminal/whitelist',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ handlePageSubmit = () => {
|
|
|
+ const { form, dispatch, whitelistDetail } = this.props;
|
|
|
+ const { getFieldsValue, validateFields } = form;
|
|
|
+ const { filters, currentItem, operType } = whitelistDetail;
|
|
|
+ const { id, userId, code, status } = currentItem;
|
|
|
+ validateFields((errors) => {
|
|
|
+ if (errors) return;
|
|
|
+ let formData = getFieldsValue();
|
|
|
+
|
|
|
+ if (operType === 'create') {
|
|
|
+ formData = {
|
|
|
+ code,
|
|
|
+ userId,
|
|
|
+ status: Codes.CODE_NORMAL,
|
|
|
+ ...formData,
|
|
|
+ };
|
|
|
+ dispatch({
|
|
|
+ type: 'whitelistDetail/create',
|
|
|
+ payload: formData,
|
|
|
+ callback: () => {
|
|
|
+ dispatch(routerRedux.push({
|
|
|
+ pathname: '/terminal/whitelist',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ formData = {
|
|
|
+ id,
|
|
|
+ code,
|
|
|
+ status,
|
|
|
+ userId,
|
|
|
+ ...formData,
|
|
|
+ };
|
|
|
+ dispatch({
|
|
|
+ type: 'whitelistDetail/update',
|
|
|
+ payload: formData,
|
|
|
+ callback: () => {
|
|
|
+ dispatch(routerRedux.push({
|
|
|
+ pathname: '/terminal/whitelist',
|
|
|
+ search: queryString.stringify(filters),
|
|
|
+ }));
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+ const { whitelistDetail, terminal, form } = this.props;
|
|
|
+ const { getFieldDecorator } = form;
|
|
|
+ const { modalShow, currentItem } = whitelistDetail;
|
|
|
+ const { code, startTime, endTime, merchantName } = currentItem;
|
|
|
+
|
|
|
+ const formItemLayout = {
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 7 },
|
|
|
+ md: { span: 8 },
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 12 },
|
|
|
+ md: { span: 12 },
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <PageHeaderLayout>
|
|
|
+ <Card>
|
|
|
+ <Form>
|
|
|
+ <Form.Item label="选择终端" {...formItemLayout}>
|
|
|
+ <Button onClick={this.handleTerminalSelectBtnClick} type="primary" size="small" icon="plus-circle-o">选择</Button>
|
|
|
+ {code &&
|
|
|
+ <List
|
|
|
+ size="small"
|
|
|
+ bordered
|
|
|
+ style={{ width: '50%' }}
|
|
|
+ dataSource={[
|
|
|
+ `终端编号: ${code}`,
|
|
|
+ `所属渠道: ${merchantName}`,
|
|
|
+ ]}
|
|
|
+ renderItem={item => <List.Item>{item}</List.Item>}
|
|
|
+ />
|
|
|
+ }
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="选择起始时间" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('startTime', {
|
|
|
+ rules: [{ required: true, message: '请选择起始时间' }],
|
|
|
+ initialValue: startTime && moment(startTime)
|
|
|
+ })(
|
|
|
+ <DatePicker
|
|
|
+ showTime
|
|
|
+ placeholder="起始时间"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ <Form.Item label="选择截止时间" {...formItemLayout}>
|
|
|
+ {getFieldDecorator('endTime', {
|
|
|
+ initialValue: endTime && moment(endTime)
|
|
|
+ })(
|
|
|
+ <DatePicker
|
|
|
+ showTime
|
|
|
+ placeholder="截止时间"
|
|
|
+ format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Form.Item>
|
|
|
+ </Form>
|
|
|
+ {/* 终端选择弹框 */}
|
|
|
+ <TerminalSelectModal
|
|
|
+ rowKeyName="id"
|
|
|
+ modalVisible={modalShow}
|
|
|
+ width={660}
|
|
|
+ onOk={this.handleTerminalModalOk}
|
|
|
+ onCancel={this.handleTerminalModalCancel}
|
|
|
+ onSearch={this.handleTerminalModalSearch}
|
|
|
+ fsTableDataSource={terminal.list || []}
|
|
|
+ fsTableLoading={terminal.listLoading}
|
|
|
+ fsTablePagination={terminal.pagination}
|
|
|
+ fsTableOnChange={this.handleTerminalModalTableChange}
|
|
|
+ />
|
|
|
+ </Card>
|
|
|
+ <FooterToolbar>
|
|
|
+ <Button onClick={this.handlePageCancel}>取消</Button>
|
|
|
+ <Button onClick={this.handlePageSubmit} type="primary">提交</Button>
|
|
|
+ </FooterToolbar>
|
|
|
+ </PageHeaderLayout>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|