123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234 |
- import React, { Component } from 'react';
- import moment from 'moment';
- import { connect } from 'dva';
- 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}`,
- };
- });
- }
- @Form.create()
- @connect(({ loading, accounts, campus }) => ({
- accounts,
- campus,
- loading: loading.models.accounts,
- fetching: loading.models.campus,
- }))
- export default class TerminalsAccountsPage extends Component {
- constructor(props) {
- super(props);
- const { state } = props.location;
- 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: {
- campusId,
- ...this.state.Queryers,
- },
- });
- }
- handleDownloadOperation = () => {
- this.props.dispatch({
- type: 'accounts/fetchTerminalsExcel',
- });
- };
- handleFilterOperation = (params, states) => {
- this.setState({
- UIParams: states,
- Queryers: params,
- });
- this.props.dispatch({
- type: 'accounts/fetchTerminalsList',
- payload: {
- ...params,
- },
- });
- };
- 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 { campuses } = this.state;
- const { loading, accounts, fetching, campus, form } = this.props;
- const { list, totalSize, pageSize, pageNo } = accounts;
- const { getFieldDecorator } = form;
- const basicSearch = {
- keys: [{
- name: '终端编号',
- field: 'code',
- }],
- };
- const pagination = {
- pageNo,
- pageSize,
- totalSize,
- };
- const columns = [{
- title: '终端编号',
- key: 1,
- dataIndex: 'ucode',
- width: '15%',
- }, {
- title: '课程包编号',
- key: 2,
- dataIndex: 'pcode',
- width: '10%',
- }, {
- title: '课程包名称',
- key: 3,
- dataIndex: 'pname',
- width: '15%',
- }, {
- title: '权限有效期',
- key: 4,
- render: (_, record) => {
- const { startTimeStr, endTimeStr } = record;
- return (
- <div className={styles.authDesc}>
- <p><span>起始时间: </span>{`${startTimeStr}`}</p>
- <p><span>到期时间: </span>{`${endTimeStr}`}</p>
- </div>
- );
- },
- dataIndex: 'cityName',
- width: '15%',
- align: 'center',
- }, {
- title: '权限有效时长',
- key: 5,
- dataIndex: 'endTime',
- render: (text) => {
- const day = moment(text).diff(moment(), 'days');
- if (day < 0) {
- return <Badge status="error" text="已到期" />;
- }
- return <span><span style={{ color: '#52c41a', fontWeight: 'bold' }}>{day}</span>天到期</span>;
- },
- width: '10%',
- }, {
- title: '校区名称',
- key: 6,
- dataIndex: 'campusName',
- width: '16%',
- }, {
- title: '联系电话',
- key: 7,
- dataIndex: 'campusContactWay',
- width: '12%',
- }, {
- title: '联系人',
- key: 8,
- dataIndex: 'campusContactName',
- width: '6%',
- }];
- return (
- <Card>
- <StandardTableList
- columns={columns}
- loading={loading}
- dataSource={addRowKey(list)}
- header={{
- basicSearch,
- onAdvanceFilterClick: this.handleFilterModalShow,
- onFilterClick: this.handleFilterOperation,
- onDownload: this.handleDownloadOperation,
- }}
- footer={{
- pagination,
- }}
- 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>
- );
- }
- }
|