dashboard/src/views/OPRisk.jsx

import React, { useContext, useState } from 'react';
import { observer } from 'mobx-react';
import { stores_Context } from '../config';
import moment from 'moment';
import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined } from '@ant-design/icons';
import { Row, Col, Table, Select, Space, Typography, Progress, Spin, Divider, Button, Switch } from 'antd';
import SearchForm from './../components/search/SearchForm';

export default observer((props) => {
  const { sale_store, date_picker_store: searchFormStore } = useContext(stores_Context);

  const { formValues, siderBroken } = searchFormStore;

  const riskTableProps = {
    loading: false,
    // sticky: true,
    // scroll: { x: 1000, y: 400 },
    pagination: false,
    columns: [
      { title: '客人姓名', dataIndex: 'WebCode', key: 'WebCode' },
      { title: '团号', dataIndex: 'o_id', key: 'o_id' },
      { title: '表单内容', dataIndex: 'COLI_LineClass', key: 'COLI_LineClass' },
      { title: '顾问', dataIndex: 'SourceType', key: 'SourceType' },
      { title: '预定时间', dataIndex: 'applyDate', key: 'applyDate' },
    ],
  };
  return (
    <>
      <Row gutter={16} className={siderBroken ? '' : 'sticky-top'}>
        <Col md={24} lg={24} xxl={24}>
          <SearchForm
            defaultValue={{
              initialValue: {
                ...formValues,
                ...sale_store.searchValues,
              },
              shows: ['DepartmentList', 'WebCode', 'dates'],
              fieldProps: {
                DepartmentList: { show_all: false, mode: 'multiple', col: 5 },
                WebCode: { show_all: false, mode: 'multiple', col: 5 },
                dates: { hide_vs: true },
              },
            }}
            onSubmit={(_err, obj, form, str) => {
              sale_store.setSearchValues(obj, form);
              // pageRefresh(obj);
            }}
          />
        </Col>
      </Row>
      <section>
        <h3>&gt;24H回复</h3>
        <Table {...riskTableProps} bordered />
      </section>
      <section>
        <h3>首次报价周期&gt;48h</h3>
        <Table {...riskTableProps} bordered />
      </section>
      <section>
        <h3>报价次数&lt;1</h3>
        <Table {...riskTableProps} bordered />
      </section>
      <section>
        <h3>报价次数&lt;2</h3>
        <Table {...riskTableProps} bordered />
      </section>
    </>
  );
});