2020-03-17

king

2020-03-17 5c8860f3cd8921e7eb0da7749628e9dc669b3203

 src/tabviews/tableshare/verifycard/actionform/index.jsx

@@ -1,8 +1,36 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Button, Input } from 'antd'
import { Form, Row, Col, Select, Button, Input, Cascader } from 'antd'
import './index.scss'

const shortkeycode = {
  65: 'A',
  66: 'B',
  67: 'C',
  68: 'D',
  69: 'E',
  70: 'F',
  71: 'G',
  72: 'H',
  73: 'I',
  74: 'J',
  75: 'K',
  76: 'L',
  77: 'M',
  78: 'N',
  79: 'O',
  80: 'P',
  81: 'Q',
  82: 'R',
  83: 'S',
  84: 'T',
  85: 'U',
  86: 'V',
  87: 'W',
  88: 'X',
  89: 'Y',
  90: 'Z'
}

class UniqueForm extends Component {
  static propTpyes = {
@@ -12,22 +40,52 @@

  state = {
    editItem: null, // 编辑元素
    shortcut: ''
    shortcutOptions: null
  }

  UNSAFE_componentWillMount () {
    let keys = ['shift', 'ctrl', 'alt']
    let _options = []

    keys.forEach(item => {
      let _op = {
        value: item,
        label: item,
        children: []
      }
      Object.keys(shortkeycode).forEach(key => {
        if (item === 'ctrl' && (key === '67' || key === '86')) return
        if (item === 'alt' && key === '65') return

        _op.children.push({
          value: +key,
          label: shortkeycode[key]
        })
      })

      _options.push(_op)
    })

    this.setState({
      shortcutOptions: _options
    })
  }

  edit = (record) => {
    this.setState({
      editItem: record,
      shortcut: record.shortcut || ''
      editItem: record
    }, () => {
      let item = {
        label: record.label,
        shortcut: record.shortcut
      let _shortcut = record.shortcut || []

      if (typeof(record.shortcut) !== 'object') {
        _shortcut = []
      }

      if (record.shortcut) {
        item.shortcutkey = record.shortcutkey
      let item = {
        label: record.label,
        shortcut: _shortcut
      }

      if (record.OpenType === 'funcbutton' && record.funcType === 'print') {
        item.printer = record.printer || ''
      }
@@ -44,28 +102,14 @@
        values.uuid = this.state.editItem ? this.state.editItem.uuid : ''

        this.props.actionChange(values)

        this.setState({
          editItem: null,
          shortcut: ''
          editItem: null
        }, () => {
          this.props.form.setFieldsValue({
            shortcut: '',
            shortcut: [],
            label: ''
          })
        })
      }
    })
  }

  shortcutChange = (value) => {
    this.setState({
      shortcut: value
    }, () => {
      let shortkey = this.props.form.getFieldValue('shortcutkey')

      if (shortkey && ((value === 'alt' && shortkey === 65) || (value === 'ctrl' && (shortkey === 67 || shortkey === 86))) ) {
        this.props.form.setFieldsValue({
          shortcutkey: ''
        })
      }
    })
@@ -90,15 +134,34 @@
    return (
      <Form {...formItemLayout} className="verify-form" id="verifycard1">
        <Row gutter={24}>
          <Col span={7}>
          <Col span={10}>
            <Form.Item label={'名称'}>
              {getFieldDecorator('label', {
                initialValue: '',
              })(<Input placeholder="" autoComplete="off" disabled />)}
            </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item label={'快捷键'}>
              {getFieldDecorator('shortcut', {
                initialValue: []
              })(
                <Cascader
                  displayRender={label => label.join(' + ')}
                  options={this.state.shortcutOptions}
                />
              )}
            </Form.Item>
          </Col>
          <Col span={4} className="add">
            <Form.Item label=" " colon={false} >
              <Button onClick={this.handleConfirm} type="primary" className="add-row">
                确定
              </Button>
            </Form.Item>
          </Col>
          {hasprint ? 
            <Col span={7}>
            <Col span={10}>
              <Form.Item label={'打印机'}>
                {getFieldDecorator('printer', {
                  initialValue: '',
@@ -118,75 +181,6 @@
              </Form.Item>
            </Col> : null
          }
          <Col span={7}>
            <Form.Item label={'快捷键'}>
              {getFieldDecorator('shortcut', {
                initialValue: ''
              })(
                <Select onChange={(value) => {this.shortcutChange(value)}}>
                  <Select.Option value=""> 空 </Select.Option>
                  <Select.Option value="shift"> shift </Select.Option>
                  <Select.Option value="ctrl"> ctrl </Select.Option>
                  <Select.Option value="alt"> alt </Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          {hasprint ? <Col span={3} className="add">
            <Button onClick={this.handleConfirm} type="primary" className="add-row">
              确定
            </Button>
          </Col> : null}
          {this.state.shortcut ? 
            <Col span={7}>
              <Form.Item label={'组合键'}>
                {getFieldDecorator('shortcutkey', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请选择组合键!'
                    }
                  ]
                })(
                  <Select>
                    <Select.Option value=""> 空 </Select.Option>
                    {this.state.shortcut !== 'alt' ? <Select.Option value={65}> A </Select.Option> : null}
                    <Select.Option value={66}> B </Select.Option>
                    {this.state.shortcut !== 'ctrl' ? <Select.Option value={67}> C </Select.Option> : null}
                    <Select.Option value={68}> D </Select.Option>
                    <Select.Option value={69}> E </Select.Option>
                    <Select.Option value={70}> F </Select.Option>
                    <Select.Option value={71}> G </Select.Option>
                    <Select.Option value={72}> H </Select.Option>
                    <Select.Option value={73}> I </Select.Option>
                    <Select.Option value={74}> J </Select.Option>
                    <Select.Option value={75}> K </Select.Option>
                    <Select.Option value={76}> L </Select.Option>
                    <Select.Option value={77}> M </Select.Option>
                    <Select.Option value={78}> N </Select.Option>
                    <Select.Option value={79}> O </Select.Option>
                    <Select.Option value={80}> P </Select.Option>
                    <Select.Option value={81}> Q </Select.Option>
                    <Select.Option value={82}> R </Select.Option>
                    <Select.Option value={83}> S </Select.Option>
                    <Select.Option value={84}> T </Select.Option>
                    <Select.Option value={85}> U </Select.Option>
                    {this.state.shortcut !== 'ctrl' ? <Select.Option value={86}> V </Select.Option> : null}
                    <Select.Option value={87}> W </Select.Option>
                    <Select.Option value={88}> X </Select.Option>
                    <Select.Option value={89}> Y </Select.Option>
                    <Select.Option value={90}> Z </Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col> : null
          }
          {!hasprint ? <Col span={3} className="add">
            <Button onClick={this.handleConfirm} type="primary" className="add-row">
              确定
            </Button>
          </Col> : null}
        </Row>
      </Form>
    )