新建文档

liuwh

2020-04-06 b449aca90c49fe8ee96f1c040c5953fcdd2ca15d

新建文档

 src/components/common/HotListTableView/index.jsx

@@ -30,7 +30,7 @@
        page: 1,
        size: 10,
      },
      loading: false
      loading: true
    };
  }

@@ -116,6 +116,7 @@

  render() {
    let { keywordlist, formData, loading } = this.state;

    let tableParams = {
      url: `api/news/newslist`,
      formData,
@@ -124,30 +125,29 @@
      extraFromData: {
      },
      setFormData: this.setFormData
    }
    };
    return (
      <div className="hot-list-table-view-main">
        {
          loading ? <div style={{ padding: 10 }}>
            <Skeleton />
        <Skeleton loading={loading}>
          <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
          <div className="hot-list-table-view-main-content">
            <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}>
              {
                keywordlist.length &&
                keywordlist.map((key) => (
                  <TabPane tab={key} key={key}>
                  </TabPane>
                ))
              }
            </Tabs>
            {/* 避免请求两遍 */}
            {
              !loading &&
              <TableView {...tableParams} />

            }
          </div>
            :
            <React.Fragment>
              <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
              <div className="hot-list-table-view-main-content">
                <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}>
                  {
                    keywordlist.length &&
                    keywordlist.map((key) => (
                      <TabPane tab={key} key={key}>
                      </TabPane>
                    ))
                  }
                </Tabs>
                <TableView {...tableParams} />
              </div>
            </React.Fragment>
        }
        </Skeleton>
      </div>
    )
  }

 src/components/common/SearchFormView/index.jsx

New file
@@ -0,0 +1,236 @@
/* eslint-disable */
/**柯礼钦
 * 4/3/2020, 3:00:49 PM
 * doc comment for the file goes here
 */

/** 表单搜索组件 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;
import './index.scss';


export default class SearchFormView extends Component {
    constructor(props) {
        super(props);
        this.config = {
        };
        this.state = {
        };
    }

    componentWillMount() { }

    componentDidMount() { }

    onClick = type => {
        const { pathName } = this.props;
        let data;
        switch (type) {
            case 'search':
                data = { ...this.props.formData, __key: Date.now() };
                this.props.setFormData(data);
                return;
            case 'reset':
                data = { __key: Date.now(), page: 1, size: 10 };
                this.props.setFormData(data);
                return;
            case 'build':
                return;
        }
    };

    //各类型表单元素触发事件
    // input输入类型
    handleInput = ({ target: { name, value } }) => {
        this.props.setFormData({ ...this.props.formData, [name]: value });
    };

    // select下拉选择
    handleSelectChange = name => {
        return value => {
            this.handleInput({ target: { name, value } });
        };
    };

    // 时间段区域选择
    rangePickerChange = (name, key, m, d) => {
        if (m.length > 0) {
            this.props.setFormData({
                ...this.props.formData,
                [name]: d.join(','),
                [JSON.parse(key)[0]]: d[0],
                [JSON.parse(key)[1]]: d[1],
            });
        } else {
            this.props.setFormData({
                ...this.props.formData,
                [name]: undefined,
                [JSON.parse(key)[0]]: '',
                [JSON.parse(key)[1]]: '',
            });
        }
    };

    // 时间选择器
    datePickerChange = (name, v) => {
        this.props.setFormData({
            ...this.props.formData,
            [name]: v,
        });
    };


    render() {
        const { formData = {}, data = [], children } = this.props;

        return (
            <div className="search-form-view-main">
                <div className="search-form-view-main-margin-bottom">
                    <Row type="flex" align="middle" gutter={20}>

                        {data.length > 0 &&
                            data.map((item, idx) => (
                                <React.Fragment key={idx}>
                                    {(() => {
                                        switch (item.type) {
                                            case 'select':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Select
                                                                size="small"
                                                                style={{ width: '100%' }}
                                                                placeholder={item.name}
                                                                value={formData[item.key]}
                                                                allowClear
                                                                onChange={this.handleSelectChange(item.key)}>
                                                                {item.list &&
                                                                    item.list.map(item => (
                                                                        <Select.Option
                                                                            value={item.id}
                                                                            key={item.id}>
                                                                            {item.name}
                                                                        </Select.Option>
                                                                    ))}
                                                            </Select>
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'input':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Input
                                                                size="small"
                                                                placeholder={item.name}
                                                                name={item.key}
                                                                value={formData[item.key]}
                                                                onChange={this.handleInput}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'datePicker':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <DatePicker
                                                                size="small"
                                                                style={{ width: '100%' }}
                                                                placeholder={item.name}
                                                                onChange={(date, dateString) => {
                                                                    this.datePickerChange(item.key, dateString);
                                                                }}
                                                                value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'rangePicker':
                                                return (
                                                    <Col span={6}>
                                                        <Form.Item label={item.label}>
                                                            <RangePicker
                                                                size="small"
                                                                ranges={{
                                                                    Today: [moment(), moment()],
                                                                    'This Month': [
                                                                        moment().startOf('month'),
                                                                        moment().endOf('month'),
                                                                    ],
                                                                }}
                                                                value={
                                                                    item.keylistName &&
                                                                        formData[item.keylistName] &&
                                                                        typeof formData[item.keylistName] == 'string'
                                                                        ? formData[item.keylistName]
                                                                            .split(',')
                                                                            .map(item => moment(item, 'YYYY-MM-DD'))
                                                                        : []
                                                                }
                                                                onChange={(date, dateString) => {
                                                                    this.rangePickerChange(
                                                                        item.keylistName,
                                                                        item.key,
                                                                        date,
                                                                        dateString
                                                                    );
                                                                }}
                                                                placeholder={JSON.parse(item.name)}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'br':
                                                return (
                                                    <Col span={24} style={{ marginBottom: '10px' }} />
                                                );
                                            default:
                                                return null;
                                        }
                                    })()}
                                </React.Fragment>
                            ))}

                        <Col>
                            <Row type="flex" gutter={20} align="middle" align="middle">
                                <Col>
                                    <Button
                                        size="small"
                                        type="primary"
                                        onClick={() => {
                                            this.onClick('search');
                                        }}>
                                        查询
                                </Button>
                                </Col>
                                <Col>
                                    <Button
                                        size="small"
                                        onClick={() => {
                                            this.onClick('reset');
                                        }}>
                                        重置
                                </Button>
                                </Col>
                                {
                                    children &&
                                    <Col>
                                        {children}
                                    </Col>
                                }
                            </Row>
                        </Col>
                    </Row>

                </div>

                <Divider />
            </div>
        )
    }
}

 src/components/common/SearchFormView/index.scss

New file
@@ -0,0 +1,22 @@
/* eslint-disable */
/**柯礼钦
 * 4/3/2020, 3:00:49 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
.search-form-view {
  &-main {
    &-margin-bottom{
    margin-bottom: 18px;

    }
    .ant-form-item {
      margin-bottom: 0 !important;
      display: flex;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}

 src/components/common/TopListTableView/index.jsx

@@ -8,6 +8,8 @@
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Table, Row, Col } from 'antd';
import { tagList } from './tagList';
import fetch from '../../../api/request';

import './index.scss';


@@ -22,6 +24,11 @@
  }

  componentWillMount() {
    fetch({
      url: `api/merits/queryMerits`
    }).then(res => {
      console.log('res', res);
    })
    this.setState({
      topList: tagList
    })

 src/components/page/SystemPage/index.jsx

@@ -6,9 +6,9 @@

/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
// import { Link } from 'react-router-dom';
import moment from 'moment'
import { DatePicker, Table, Card, Row, Col, Icon, Form, Input, Button, Select, message } from 'antd';

import './index.scss';

import fetch from '../../../api/request';
@@ -33,9 +33,6 @@
      }
    };
  }




  componentWillMount() { }

@@ -137,7 +134,7 @@
      { title: '通知标题', className: "txt-c", dataIndex: 'documentItle;' },
      { title: '通知内容', className: "txt-c", dataIndex: 'documentContent' },
      // { title: '文档类型', className: "txt-c", dataIndex: 'documentType', render: (text, record) => text == "DT00001" ? "规章制度" : text == "DT00002" ? "通知公告" : text },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{readNumber || 0}/{noticeNumber || 0}</span> },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{record.readNumber || 0}/{record.noticeNumber || 0}</span> },
      { title: '通知时间', className: "txt-c", dataIndex: 'createTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
      // {
      //   title: '操作', className: "txt-c", key: 'operation', render: (text, record) => {

 src/components/page/index/rulesList/index.jsx

New file
@@ -0,0 +1,85 @@
/* eslint-disable */
/**柯礼钦
 * 4/6/2020, 5:17:40 PM
 * doc comment for the file goes here
 */

/** 工作制度 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import TableView from '../../../common/TableView';
import SearchFormView from '../../../common/SearchFormView';
import moment from 'moment';

import './index.scss';


export default class RulesList extends Component {
  constructor(props) {
    super(props);
    this.config = {
    };
    this.state = {
      formData: {
        __key: Date.now(),
        type: '',
        title: '',
        page: 1,
        size: 10,
      },
    };
  }

  componentWillMount() { }

  componentDidMount() { }

  renderColumns = () => {
    return [
      { title: '通知标题', dataIndex: 'documentItle;' },
      { title: '通知内容', dataIndex: 'documentContent' },
      { title: '接受情况', dataIndex: 'groupType', render: (cur, item) => <span>{item.readNumber || 0}/{item.noticeNumber || 0}</span> },
      { title: '通知时间', dataIndex: 'createTime', render: (cur, item) => cur !== "" && cur != null ? moment(cur).format("YYYY-MM-DD HH:mm") : "" },
    ];
  }

  setFormData = data => {
    console.log('form', data);
    this.setState({
      formData: data,
    });
  }

  render() {
    const { formData } = this.state;

    let tableParams = {
      url: `api/document/getNotice`,
      formData,
      key: formData.__key,
      columns: this.renderColumns(),
      extraFromData: {
        type: '',
      },
      setFormData: this.setFormData
    }
    return (
      <div className="rules-list-main">
        <SearchFormView
          formData={formData}
          setFormData={this.setFormData}
          data={[
            { type: 'input', name: '标题', label: '标题', key: 'title' },
            {
              type: 'rangePicker',
              label: '发布时间',
              name: JSON.stringify(['开始时间', '结束时间']),
              key: JSON.stringify(['startTime', 'endTime']),
              keylistName: 'rangeTimelist',
            },
          ]} />
        <TableView {...tableParams} />
      </div>
    )
  }
}


 src/components/page/index/rulesList/index.scss

New file
@@ -0,0 +1,14 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 5:17:40 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
.rules-list {
  &-main {
    background: #fff;
    margin: 20px;
    padding: 20px;
  }
}

 src/components/page/index/workbench/index.jsx

File was renamed from src/components/page/workbench/index.jsx
@@ -6,9 +6,9 @@

/** 首页--工作台 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import NotifyList from '../../common/NotifyList'; //通知列表
import TopListTableView from '../../common/TopListTableView'; //榜单列表
import HotListTableView from '../../common/HotListTableView'; //行业热点知识库
import NotifyList from '../../../common/NotifyList'; //通知列表
import TopListTableView from '../../../common/TopListTableView'; //榜单列表
import HotListTableView from '../../../common/HotListTableView'; //行业热点知识库

import './index.scss';


 src/components/page/index/workbench/index.scss

 src/index.js

@@ -51,23 +51,19 @@
              {/* 新建文档 */}
              <Route path="/document/create" component={DocumentEdit} />


              {/* 全部通知 */}
              <Route path="/index/workbench/announcement" component={Announcement} />
              {/* 首页 */}
              <Route path="/index/workbench" component={Workbench} />
              {/* 规章制度 */}
              <Route path="/index/rules" component={System} />



              {/* 首页 */}
              <Route path="/index" component={Workbench} />


              <Route path="/login" component={Login} />

              <Route path="/" component={Index} />
              <Route path="/" component={Workbench} />
              {/* 路由的页面重定向 */}
              <Redirect to="/" component={Index} />
              <Redirect to="/" component={Workbench} />
            </Switch>
          </Content>
        </Layout>

 src/pages/index/System.jsx

@@ -8,6 +8,7 @@
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../../components/common/BreadcrumbView';
import SystemPage from '../../components/page/SystemPage'
import RulesList from '../../components/page/index/rulesList'

export default class System extends Component {
  constructor(props) {
@@ -27,16 +28,11 @@
  render() {
    return (
      <div className="System-main">
        <BreadcrumbView data={[{ name: '工作制度'}]} />
        <SystemPage />
        <BreadcrumbView data={[{ name: '工作制度' }]} />
        {/* <SystemPage /> */}
        <RulesList {...this.prosp} />
      </div>
    )
  }
}
//export default function System({  }) {
//    return (
//     <div className="System-main">
//
//      </div>
//    )
//}


 src/pages/index/workbench.jsx

@@ -7,7 +7,7 @@
/** 首页 -- 工作台 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../../components/common/BreadcrumbView';
import WorkbenchPage from '../../components/page/workbench'
import WorkbenchPage from '../../components/page/index/workbench'

export default class Workbench extends Component {
  constructor(props) {