app-base-web/src/pages/config/CfgInternationalization/CfgInternationalizationList.js

web development common base package.

import React, { Suspense, lazy } from 'react';
import { Table, Form, Row, Col, Button, Input, message } from 'antd';
import UtilModal from '../../../library/util-modal';
import api from '../../../library/util-axios';

// 系统配置-国际化
const title = "国际化"
const url = "CfgInternationalization/"
const FormView = lazy(() => import('./CfgInternationalizationView'));
const FormEdit = lazy(() => import('./CfgInternationalizationEdit'));
export default class CfgInternationalizationList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      params: {},
      data: [],
      pagination: {},
      loading: false,
      selected: [],//Table checked
      //显藏控制
      showView: false,
      showEdit: false,
      //values
      values: {},
    }
    this.columns = [{
      title: "序号",
      width: 50,
      fixed: "left",
      render: (text, record, index) => {
        return index + 1
      }
    }, {
      title: "所属应用",
      dataIndex: "app",
      width: 100,
      render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
    },
      {
        title: "关键字",
        dataIndex: "keyword",
        width: 150,
        render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
      },
      {
        title: "中文标签",
        dataIndex: "zh_CN",
        width: 200
      },
      {
        title: "英文标签",
        dataIndex: "en_US",
        width: 200
        // },
        // {
        //     title: "繁体标签",
        //     dataIndex: "zh_TW",
        //     width: 100,
        //     "render": "edit",
        //     render: (text, record) => {
        //         return <a onClick={() => this.onView(record)}>{text}</a>
        //     }
        // },
        // {
        //     title: "以色列标签",
        //     dataIndex: "iw_IL",
        //     width: 100,
        //     "render": "edit",
        //     render: (text, record) => {
        //         return <a onClick={() => this.onView(record)}>{text}</a>
        //     }
      }]
  }

  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,
      params,
      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.key = value
    this.onLoad(params)
  }
  onAdd = () => {
    let values = {}
    Object.keys(this.state.values).forEach(key => values[key] = undefined)
    this.setState({
      showView: false,
      showEdit: true,
      values
    })
  }
  onView = (values) => {
    this.setState({
      showView: true,
      loading: false,
      values
    })
  }
  onEdit = (values) => {
    let me = this
    api.get(url + "getModel?id=" + values.id, {}, function (rs) {
      me.setState({
        showEdit: true,
        showView: false,
        values: rs.data
      })
    })
  }
  onSave = (values) => {
    this.onLoad(this.state.params)
  }
  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)
          }
        })
      }
    })
  }

  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})
          }
        }
      },
      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 className="text-left" 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="text-right" style={{paddingRight: "8px"}} xs={6}>
            <Input placeholder="请输入应用名称" onChange={event => {
              let params = this.state.params
              params.app = event.target.value
              this.setState({params})
            }}/>
          </Col>
          <Col className="text-right" xs={6}>
            <Input.Search placeholder="请输入关键字" onSearch={value => this.onSearch(value)} 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>
  }
}