123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263 |
- /* eslint-disable prefer-destructuring */
- import React, { Component } from 'react';
- import moment from 'moment';
- import { connect } from 'dva';
- import { routerRedux } from 'dva/router';
- import { Card, Modal, Form, Button, message } from 'antd';
- import { StandardTableList } from '../../../components/AXList';
- import AXRemoteSelect from '../../../components/AXRemoteSelect';
- import Ellipsis from '../../../components/Ellipsis';
- import { addRowKey, renderStatus, renderBindStatus } from '../../../utils/utils';
- const Message = message;
- 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, campus, terminal }) => ({
- campus,
- terminal,
- fetching: loading.models.campus,
- loading: loading.models.terminal,
- }))
- export default class PersonalizeListPage extends Component {
- constructor(props) {
- super(props);
- const { state } = props.location;
- this.state = {
- UIParams: (state || {}).UIParams, // 组件的状态参数
- Queryers: (state || {}).Queryers, // 查询的条件参数
- campuses: (state || {}).campuses || [], // 记录筛选的校区
- filterModalDestroy: true,
- };
- }
- componentWillMount() {
- this.props.dispatch({
- type: 'terminal/cleanState',
- });
- }
- componentDidMount() {
- const { campuses } = this.state;
- let campusId;
- if (campuses && campuses.length) {
- campusId = campuses[0].split('||')[1];
- }
- this.props.dispatch({
- type: 'terminal/fetchTerminalList',
- payload: {
- campusId,
- ...this.state.Queryers,
- },
- });
- }
- handleEditOperation = (item) => {
- this.props.dispatch(routerRedux.push({
- pathname: `/frontend/personalize/edit/${item.id}`,
- state: { ...this.state },
- }));
- };
- handleFilterOperation = (params, states) => {
- this.setState({
- UIParams: states,
- Queryers: params,
- });
- const { campuses } = this.state;
- let campusId;
- if (campuses && campuses.length) {
- campusId = campuses[0].split('||')[1];
- }
- this.props.dispatch({
- type: 'terminal/fetchTerminalList',
- payload: {
- campusId,
- ...params,
- },
- });
- };
- handleModalFilterOperation = () => {
- const { getFieldsValue } = this.props.form;
- const { campuses } = getFieldsValue();
- let campusId;
- if (campuses && campuses.length) {
- campusId = campuses[0].split('||')[1];
- }
- this.props.dispatch({
- type: 'terminal/fetchTerminalList',
- payload: {
- ...this.state.Queryers,
- campusId,
- },
- });
- this.setState({ campuses });
- this.handleFilterModalDestroy();
- };
- handleBatchOperation = () => {
- Message.info('暂不支持批量操作!');
- };
- handleFilterModalShow = () => {
- this.setState({ filterModalDestroy: false });
- };
- handleFilterModalDestroy = () => {
- this.setState({ filterModalDestroy: true });
- };
- handleMerchantRemoteSelectSearch = (value) => {
- this.props.dispatch({
- type: 'merchant/fetchMerchantList',
- payload: {
- pageSize: 50,
- name: value,
- },
- });
- };
- handleCampusRemoteSelectSearch = (value) => {
- this.props.dispatch({
- type: 'campus/fetchCampusList',
- payload: {
- pageSize: 50,
- name: value,
- },
- });
- };
- render() {
- const { campuses } = this.state;
- const { loading, fetching, form, campus, terminal } = this.props;
- const { list, totalSize, pageSize, pageNo } = terminal;
- const { getFieldDecorator } = form;
- const renderCampusName = (name) => {
- return (
- <Ellipsis tooltip lines={1}>{name}</Ellipsis>
- );
- };
- const renderOperation = (item) => {
- return (
- <div>
- <Button
- size="small"
- className="editBtn"
- onClick={() => this.handleEditOperation(item)}
- >用户配置
- </Button>
- </div>
- );
- };
- const batchActions = [{
- key: 'config',
- name: '批量配置',
- }];
- const basicSearch = {
- keys: [{
- name: '终端编号',
- field: 'code',
- }, {
- name: '终端名称',
- field: 'name',
- }],
- };
- const pagination = {
- pageNo,
- pageSize,
- totalSize,
- };
- const columns = [{
- title: '终端编号',
- dataIndex: 'code',
- width: '15%',
- }, {
- title: '终端名称',
- dataIndex: 'name',
- width: '15%',
- }, {
- title: '所属校区',
- dataIndex: 'campusName',
- render: text => renderCampusName(text),
- width: '25%',
- }, {
- title: '账号状态',
- dataIndex: 'status',
- render: text => renderStatus(text, '已禁用'),
- width: '8%',
- }, {
- title: '绑定状态',
- dataIndex: 'deviceStatus',
- render: text => renderBindStatus(text),
- width: '9%',
- }, {
- title: '更新时间',
- dataIndex: 'gmtModified',
- render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
- width: '15%',
- }, {
- title: '操作',
- dataIndex: 'operation',
- render: (_, record) => renderOperation(record),
- width: '13%',
- align: 'right',
- }];
- return (
- <Card>
- <StandardTableList
- columns={columns}
- loading={loading}
- dataSource={addRowKey(list)}
- header={{
- basicSearch,
- onAdvanceFilterClick: this.handleFilterModalShow,
- onFilterClick: this.handleFilterOperation,
- onCreateClick: this.handleCreateOperation,
- }}
- footer={{
- pagination,
- batchActions,
- onBatchClick: this.handleBatchOperation,
- }}
- keepUIState={{ ...this.state.UIParams }}
- />
- {!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.handleCampusRemoteSelectSearch}
- />
- )}
- </Form.Item>
- </Form>
- </Modal>
- )}
- </Card>
- );
- }
- }
|