app-base-web/src/pages/right/Safeinfo/SafeinfoList.js

web development common base package.

import React, { Suspense, lazy } from 'react';
import { Layout, Table, Form, Modal, Row, Col, Button, Input,Switch, message } from 'antd';
import api from '../../../library/util-axios';
import UtilModal from "../../../library/util-modal"
const FormView = lazy(() => import('./SafeinfoView'));
const FormEdit = lazy(() => import('./SafeinfoEdit'));
// 维权信息
const title = "维权信息";
const url = "Safeinfo/";
export default class SafeinfoList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			params: {},
			data: [],
			pagination: {},
			loading: false,
			selected: [],//Table checked
			height: 0,
			//显藏控制
			showView: false,
			showEdit: false,
			//values
			values: {},
		};
		this.columns = [{
			title: "请求人姓名",
			dataIndex: "applicantName",
			width: 100,
      render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
		},
		{
			title: "请求人信息",
			dataIndex: "applicant",
			width: 100,
      render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
		},
		{
			title: "专利号",
			dataIndex: "ano",
			width: 100
		},
		{
			title: "被请求人信息",
			dataIndex: "defendant",
			width: 100
		}];
	}
	componentDidMount() {
		this.onLoad(this.state.params);
	}
	/*** Table ***/
	async onLoad(params) {
		this.setState({ loading: true });
		let rs = await api.get(url + "getList", params);
		let pagination = {
			pageSizeOptions: ["20", "100", "200", "500", "1000"],
			pageSize: params.pageSize || 20,
			defaultPageSize: params.pageSize || 20,
			showSizeChanger: true,
			showQuickJumper: true,
			total: rs.total,
			showTotal: (total) => { return `总记录 ${total} ` }
		};
		this.setState({
			loading: false,
			showEdit: false,
			data: rs.data,
			pagination
		});
	}
	onChange = (pagination, filters, sorter) => {
		let params = this.state.params;
		params.pageSize = pagination.pageSize;
		params.pageIndex = pagination.current;
		this.onLoad(params);
	}
	onSearch = (value) => {
		let params = this.state.params;
		params.name = value;
		this.onLoad(params);
	}
	onAdd = () => {
		let values = {};
		Object.keys(this.state.values).forEach(key => values[key] = undefined);
		this.setState({
			showView: false,
			showEdit: true,
			values
		});
	}
	async onView(values) {
		let rs = await api.get(url + "getModel?id=" + values.id);
		this.setState({
			showView: true,
			values: rs.data
		});
	}
	onEdit = (values) => {
    let me = this;
    api.get(url + "getModel?id=" + values.id, {}, function (rs) {
      me.setState({
        showEdit: true,
        showView: false,
        showEditBatch: false,
        values: rs.data
      });
    });
	}
  onDel = () => {
    let me = this;
    if (me.state.selected.length == 0) {
      message.error('请选择记录！');
      return;
    }
    UtilModal.confirm({
      content: '确定删除？',
      onOk: function () {
        api.delete(url + "delete?id=" + me.state.selected).then(function (rs) {
          if (rs.success) {
            message.info(rs.msg);
            me.onLoad(me.state.params || {});
          } else { message.error(rs.msg); }
        });
      }
    })
  }
	onSave = (values) => {
		this.onLoad(this.state.params);
	}
	render() {
		var tableCfg = {
			scroll: { y: this.props.height - 210 },
			size: "middle",
			rowKey: "id",
			columns: this.columns,
			rowSelection: {
				selectedRowKeys: this.state.selected,
				onChange: (selectedRowKeys, selectedRows) => {
					this.setState({
						selected: selectedRowKeys
					});
				}
			},
			rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },
			onRow: (record) => {
				return {
					onClick: event => {
						this.setState({ selectedRowId: record.id });
						this.props.onSetOutId( record.id);
					}
				}
			},
			dataSource: this.state.data,
			pagination: this.state.pagination,
			loading: this.state.loading,
			onChange: this.onChange
		}
		return (
			<div className="app-admin">
				<div className={this.state.showView || this.state.showEdit ? "hide" : ""}>
          <Row>
            <Col className="main-title" ><i className="iconfont icon-title"></i>{title}</Col>
          </Row>
          <Row className="main-toolbar">
            <Col xs={12}>
              <Button className="btn-add" onClick={this.onAdd}><i className="iconfont icon-add"></i>录入</Button>
              <Button className="btn-del" onClick={this.onDel}><i className="iconfont icon-del"></i>删除</Button>
            </Col>
            <Col className="query-filed" xs={12}>
              <Input.Search placeholder="请输入名称" onSearch={value => this.onSearch(value.trim())} enterButton />
            </Col>
          </Row>
					<Table {...tableCfg} />
				</div>
        <Suspense fallback={<div></div>}>
          {this.state.showView ? <FormView
            height={this.props.height - 140}
            values={this.state.values}
            onEdit={this.onEdit}
            onReturn={() => { this.setState({ showView: false }) }}
          /> : ""}
          {this.state.showEdit ? <FormEdit
            height={this.props.height - 140}
            values={this.state.values}
            onSave={this.onSave}
            onCancel={() => { this.setState({ showEdit: false }) }}
            onEditReturn={() => { this.setState({ showEdit: false, showView: true }) }}
          /> : ""}
        </Suspense>
			</div>
		);
	}
}