2020-11-18

king

2020-11-18 d3272e82652361e5e9bd045925222ef042b6731f

 src/templates/zshare/editTable/index.jsx

@@ -1,14 +1,14 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select } from 'antd'
import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader } from 'antd'

import ColorSketch from '@/mob/colorsketch'
// import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import './index.scss'

let eTDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditableContext = React.createContext()

class EditableCell extends Component {
@@ -20,9 +20,21 @@
    } else if (inputType === 'color') {
      return <ColorSketch />
    } else if (inputType === 'select') {
      return <Select>
      return (
        <Select>
        {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))}
      </Select>
      )
    } else if (inputType === 'cascader') {
      return (
        <Cascader options={options} placeholder=""/>
      )
    } else if (inputType === 'radio') {
      return (
        <Radio.Group>
          {options.map((item, i) => (<Radio key={i} value={item.field || item.value}> {item.label || item.text} </Radio>))}
        </Radio.Group>
      )
    } else {
      return <Input onPressEnter={() => this.getValue(form)} />
    }
@@ -40,7 +52,7 @@

  renderCell = (form) => {
    const { getFieldDecorator } = form
    const { editing, dataIndex, title, record, children, className, required } = this.props
    const { editing, dataIndex, title, record, children, className, required, inputType } = this.props

    return (
      <td className={className}>
@@ -50,7 +62,7 @@
              rules: [
                {
                  required: required,
                  message: `Please Input ${title}!`,
                  message: ['number', 'text', 'input'].includes(inputType) ? `${eTDict['form.required.input']} ${title}!` : `${eTDict['form.required.select']} ${title}!`,
                }
              ],
              initialValue: record[dataIndex],
@@ -70,6 +82,9 @@

class EditTable extends Component {
  static propTpyes = {
    actions: PropTypes.any,         // 操作项
    data: PropTypes.any,            // 数据列表
    columns: PropTypes.array,       // 显示列
    onChange: PropTypes.func        // 数据变化
  }

@@ -80,41 +95,40 @@
  }

  UNSAFE_componentWillMount () {
    const { data } = this.props
    const { data, actions } = this.props
    let columns = fromJS(this.props.columns).toJS()
    let dict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS

    columns.push({
      title: dict['model.operation'],
      title: eTDict['model.operation'],
      dataIndex: 'operation',
      width: '140px',
      render: (text, record) => {
        const { editingKey } = this.state
        const editable = this.isEditing(record)
        return editable ? (
          <span>
          <span style={{textAlign: 'center', display: 'block'}}>
            <EditableContext.Consumer>
              {form => (
                <span onClick={() => this.save(form, record.uuid)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}>
                  {dict['model.save']}
                  {eTDict['model.save']}
                </span>
              )}
            </EditableContext.Consumer>
            <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{dict['model.cancel']}</span>
            <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span>
          </span>
        ) : (
          <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}>
            <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span>
            <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span>
            <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span>
            {editingKey === '' ? <Popconfirm
            {!actions || actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null}
            {!actions || actions.includes('up') ? <span className="primary" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'up')}}><Icon type="arrow-up" /></span> : null}
            {!actions || actions.includes('down') ? <span className="danger" onClick={() => {editingKey === '' && this.handleUpDown(record.uuid, 'down')}}><Icon type="arrow-down" /></span> : null}
            {(!actions || actions.includes('del')) && editingKey === '' ? <Popconfirm
              overlayClassName="popover-confirm"
              title={dict['model.query.delete']}
              title={eTDict['model.query.delete']}
              onConfirm={() => this.handleDelete(record.uuid)
            }>
              <span className="danger"><Icon type="delete" /></span>
            </Popconfirm> : null}
            {editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
            {(!actions || actions.includes('del')) && editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null}
          </div>
        )
      }
@@ -122,8 +136,7 @@

    this.setState({
      data: data || [],
      columns,
      dict
      columns
    })
  }