CompanyProject/滴滴淘/admin/src/pages/PromotionEffect.tsx

import React, { Component } from 'react';
import { UserServiceImp } from '@service/userServiceImp';
import { connect, ConnectProps, UserModelState, history } from 'umi';
import { LoadDemand } from '@annotation/index';
import style from '@/assets/less/page/TeamManagement.less';
import { Layout, Menu, Breadcrumb, Rate, Row, Col, Select, Input, DatePicker, Button, Table } from 'antd';
import NavTitle  from "@/components/NavTitle";
import {  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined, } from '@ant-design/icons';
import { Utils } from '@/core/utils/utils';
const { RangePicker } = DatePicker;
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;

@LoadDemand
export default class PromotionEffect extends Component{

  state = {
    disabledType: false,
    params: {
      text_field: '', // 精确搜索的select
      text_value: '', // 精确搜索的input值
      model_type: '', // 一级
      sub_type: '',   // 二级subtype的数组，为空时查询所有
      dateField: 'create_time',  // 时间字段
      dateRange: '',  // 时间段
      limit: 10,      // 每页显示数量
      page: 1,        // 页码
      loading: false
    },
    options: [
      {
        value: 'task',
        label: '任务',
        children: [
          {
            value: '1',
            label: '任务本金',
          },
          {
            value: '2',
            label: '任务佣金',
          },
          {
            value: '3',
            label: '评价佣金',
          },
          {
            value: '4',
            label: '推广收益',
          },
          {
            value: '5',
            label: '押款本金',
          },
          {
            value: '6',
            label: '押款佣金',
          },
          {
            value: '7',
            label: '押款评价佣金',
          },
          {
            value: '8',
            label: '快递',
          },
        ],
      },
      {
        value: 'charge',
        label: '充值',
        children: [
          {
            value: '1',
            label: '银行卡',
          },
        ],
      },
    ],
    tableCol: [
      {
        title: '流水号',
        dataIndex: 'model_id',
        key: 'model_id',
      },
      {
        title: '发生金额',
        dataIndex: 'amount',
        key: 'amount',
      },
      {
        title: '变化前',
        dataIndex: 'before_balance',
        key: 'before_balance',
      },
      {
        title: '变化后',
        dataIndex: 'after_balance',
        key: 'after_balance',
      },
      {
        title: '发生时间',
        dataIndex: 'create_time',
        key: 'create_time',
      },
      {
        title: '是由',
        dataIndex: 'sub_type_text',
        key: 'sub_type_text',
      },
      {
        title: '备注',
        dataIndex: 'remark',
        key: 'remark',
      },
    ],
    currentTypeIndex: 0,
    recordListData: [],
    PageCount: 0,  // 总页数
  }

  async componentDidMount() {
    await this.recordList()
  }

  async recordList() {
    this.setState({ loading: true })
    let res = await UserServiceImp.recordList(this.state.params);
    if (res != null && res.hasOwnProperty("list")) {
      res.list.forEach((val: any, i: number) => {
        val.before_balance = Utils.conversionMoney(val.before_balance);
        val.after_balance = Utils.conversionMoney(val.after_balance);
        val.amount = Utils.conversionMoney(val.amount);
        val.key = i
      });
      this.setState({ recordListData: res.list, PageCount: res.count })
    }
    this.setState({ loading: false })
  }

  render() {
    return (
      <div>
        <NavTitle title="推广效果"></NavTitle>
        <div className="items">
          <p className='cTitle'>详情列表</p>
          <Row>
            {/*任务编号*/}
            <Col span={2}>
              <Select
                defaultValue="资金流水号"
                style={{ width: '100%' }}
                onChange={(value: any) => {
                  this.state.params.text_field = value
                }}>
                <Option value="record">资金流水号</Option>
                <Option value="task">任务编号</Option>
                <Option value="charge">充值流水号</Option>
              </Select>
            </Col>

            {/*输入搜索内容*/}
            <Col span={4} style={{ marginRight: '10px' }}>
              <Input
                placeholder="请输入搜索内容"
                onChange={e => {
                  if (e.target.value.length != 0) {
                    this.setState({ disabledType: true });
                    this.state.params.model_type = '';
                    this.state.params.sub_type = '';
                    this.state.params.text_value = e.target.value;
                  } else {
                    this.setState({ disabledType: false });
                  }
                }}
              />
            </Col>

            {/*任务的交易类型*/}
            <Col span={2}>
              <Select
                defaultValue="交易类型"
                disabled={this.state.disabledType}
                style={{ width: '100%' }}
                onChange={(index: any) => {
                  this.state.params.model_type = this.state.options[index]['value'];
                  this.state.params.text_value = '';
                  this.state.params.text_field = '';
                  this.setState({ currentTypeIndex: index });
                }}>

                {this.state.options.map((val, index) => {
                  return (
                    <Option key={index} value={index}>
                      {val.label}
                    </Option>
                  );
                })}

              </Select>
            </Col>

            <Col span={2} style={{ marginRight: '10px' }}>
              <Select
                defaultValue="交易类型"
                disabled={this.state.disabledType}
                style={{ width: '100%' }}
                onChange={(value: any) => {
                  this.state.params.sub_type = value;

                  this.state.params.text_value = '';
                  this.state.params.text_field = '';
                }}>

                {this.state.options[this.state.currentTypeIndex]['children'].map((val, index) => {
                  return (
                    <Option key={index} value={val.value}>
                      {val.label}
                    </Option>
                  );
                })}

              </Select>
            </Col>

            {/*选择事件范围*/}
            <Col span={3} style={{ marginRight: '10px' }}>
              <RangePicker
                // @ts-ignore
                onChange={(date: Date, dateString: Array<any>) => {
                  if (dateString.join(' - ') != ' - ') {
                    this.state.params.dateRange = dateString.join(' - ');
                  } else {
                    this.state.params.dateRange = '';
                  }
                }}/>
            </Col>

            {/*搜索按钮*/}
            <Col span={2}>
              <Button
                type="primary"
                onClick={async () => {
                  await this.recordList()
                }}>
                搜 索
              </Button>
            </Col>

          </Row>
          <br/>
          {/*数据展示的表格*/}
          <div className=''>
            <Table
              loading={this.state.loading}
              dataSource={this.state.recordListData}
              pagination={{
                showSizeChanger: true,
                showQuickJumper: false,
                current: this.state.params.page,
                showTotal: () => `共${this.state.PageCount}条`,
                total: this.state.PageCount,
                pageSize: this.state.params.limit,
                onShowSizeChange: async (current, size) => {
                  this.state.params.page = current;
                  this.state.params.limit = size;
                  await this.recordList();
                },
                onChange: async (current)=> {
                  this.state.params.page = current;
                  await this.recordList();
                  console.log("current: ", current);
                }
              }}
              columns={this.state.tableCol}
            />
          </div>
        </div>
      </div>
    );
  }
}