2020-01-07

king

2020-01-07 ec3cc73f8deaf0b83b0b517e65f949a5a5c496dc

 src/templates/tableshare/verifycard/index.jsx

@@ -1,20 +1,25 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Tabs, Row, Col, Radio, Input, Button, Select, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
import { Form, Tabs, Row, Col, Radio, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber } from 'antd'
import Utils from '@/utils/utils.js'
import UniqueForm from './uniqueform'
import CustomForm from './customform'
import BillcodeForm from './billcodeform'
import Api from '@/api'
import './index.scss'

const { TabPane } = Tabs
const { TextArea } = Input

class VerifyCard extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    card: PropTypes.object
    dict: PropTypes.object,   // 字典项
    card: PropTypes.object,
    columns: PropTypes.array
  }

  state = {
    verify: {}
    verify: {},
    fields: []
  }

  UNSAFE_componentWillMount() {
@@ -23,25 +28,95 @@
    this.setState({
      verify: {
        invalid: _verify.invalid || 'false',
        unique: _verify.unique || 'false',
        uniques: _verify.uniques || [],
        accountdate: _verify.accountdate || 'false',
        customverifys: _verify.customverifys || []
        customverifys: _verify.customverifys || [],
        billCode: _verify.billCode || {}
      }
    })

    if (this.props.card.OpenType === 'pop') {
      Api.getSystemConfig({
        func: 'sPC_Get_LongParam',
        MenuID: this.props.card.uuid
      }).then(res => {
        if (res.status) {
          let _LongParam = ''
          if (res.LongParam) {
            _LongParam = window.decodeURIComponent(window.atob(res.LongParam))
            try {
              _LongParam = JSON.parse(_LongParam)
            } catch (e) {
              _LongParam = ''
            }
          }
  
          if (!_LongParam) return
          
          let _fields = []
          if (_LongParam.groups.length > 0) {
            _LongParam.groups.forEach(group => {
              group.sublist.forEach(field => {
                _fields.push(field)
              })
            })
          } else {
            _fields = _LongParam.fields
          }

          this.setState({
            fields: _fields
          })
        } else {
          notification.warning({
            top: 92,
            message: res.message,
            duration: 10
          })
        }
      })
    }
  }

  uniqueChange = (values) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))

    if (values.uuid) {
      verify.uniques = verify.uniques.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      values.uuid = Utils.getuuid()
      verify.uniques.push(values)
    }

    this.setState({
      verify: verify
    })
  }

  handleConfirm = () => {
  customChange = (values) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))
    // 表单提交时检查输入值是否正确
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.uuid = Utils.getuuid()
        verify.customverifys.push(values)

        this.setState({
          verify: verify
        })
      }
    if (values.uuid) {
      verify.customverifys = verify.customverifys.map(item => {
        if (item.uuid === values.uuid) {
          return values
        } else {
          return item
        }
      })
    } else {
      values.uuid = Utils.getuuid()
      verify.customverifys.push(values)
    }

    this.setState({
      verify: verify
    })
  }

@@ -54,11 +129,73 @@
    })
  }

  handleDelete = (uuid) => {
  handleDelete = (record, type) => {
    const { verify } = this.state
    verify.customverifys = verify.customverifys.filter(item => item.uuid !== uuid)

    if (type === 'customverify') {
      verify.customverifys = verify.customverifys.filter(item => item.uuid !== record.uuid)
    } else if (type === 'unique') {
      verify.uniques = verify.uniques.filter(item => item.uuid !== record.uuid)
    }

    this.setState({ verify: verify })
  }

  handleEdit = (record, type) => {
    if (type === 'customverify') {
      this.customForm.edit(record)
    } else if (type === 'unique') {
      this.uniqueForm.edit(record)
    }
  }

  handleUpDown = (record, type, direction) => {
    let verify = JSON.parse(JSON.stringify(this.state.verify))
    let index = 0

    if (type === 'customverify') {
      verify.customverifys = verify.customverifys.filter((item, i) => {
        if (item.uuid === record.uuid) {
          index = i
        }

        return item.uuid !== record.uuid
      })
      if ((index === 0 && direction === 'up') || (index === verify.customverifys.length && direction === 'down')) {
        return
      }

      if (direction === 'up') {
        verify.customverifys.splice(index - 1, 0, record)
      } else {
        verify.customverifys.splice(index + 1, 0, record)
      }
  
      this.setState({
        verify: verify
      })
    } else if (type === 'unique') {
      verify.uniques = verify.uniques.filter((item, i) => {
        if (item.uuid === record.uuid) {
          index = i
        }

        return item.uuid !== record.uuid
      })
      if ((index === 0 && direction === 'up') || (index === verify.uniques.length && direction === 'down')) {
        return
      }

      if (direction === 'up') {
        verify.uniques.splice(index - 1, 0, record)
      } else {
        verify.uniques.splice(index + 1, 0, record)
      }
  
      this.setState({
        verify: verify
      })
    }
  }

  showError = (errorType) => {
@@ -92,16 +229,15 @@

  timeChange = (val, type) => {
    const { verify } = this.state
    console.log(val)
    console.log(type)

    this.setState({
      verify: {...verify, [type]: val}
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { verify } = this.state
    // const { getFieldDecorator } = this.props.form
    const { verify, fields } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -112,6 +248,39 @@
        sm: { span: 16 }
      }
    }
    let uniqueColumns = [
      {
        title: '字段名',
        dataIndex: 'field',
        width: '50%'
      },
      {
        title: 'ErrorMessage',
        dataIndex: 'errmsg',
        width: '25%'
      },
      {
        title: 'ErrorCode',
        dataIndex: 'errorCode',
        width: '10%'
      },
      {
        title: '操作',
        align: 'center',
        width: '15%',
        dataIndex: 'operation',
        render: (text, record) =>
          (<div>
            <span className="operation-btn" onClick={() => this.handleEdit(record, 'unique')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record, 'unique')}>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
            </Popconfirm>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'unique', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'unique', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
          </div>)
      }
    ]

    let columns = [
      {
        title: 'SQL',
@@ -134,11 +303,14 @@
        width: '15%',
        dataIndex: 'operation',
        render: (text, record) =>
          (
            <Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record.uuid)}>
              <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span>
          (<div>
            <span className="operation-btn" onClick={() => this.handleEdit(record, 'customverify')} style={{color: '#1890ff'}}><Icon type="edit" /></span>
            <Popconfirm title="确定删除吗?" onConfirm={() => this.handleDelete(record, 'customverify')}>
              <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span>
            </Popconfirm>
          )
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'customverify', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span>
            <span className="operation-btn" onClick={() => this.handleUpDown(record, 'customverify', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span>
          </div>)
      }
    ]

@@ -148,24 +320,16 @@
          <Form {...formItemLayout}>
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item label={'失效验证'}>
                  <Radio.Group value={verify.invalid} onChange={(e) => {this.onOptionChange(e, 'invalid')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={'唯一性验证'}>
                  <Radio.Group value={verify.unique} onChange={(e) => {this.onOptionChange(e, 'unique')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={'账期验证'}>
                  <Radio.Group value={verify.accountdate} onChange={(e) => {this.onOptionChange(e, 'accountdate')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label={'失效验证'}>
                  <Radio.Group value={verify.invalid} onChange={(e) => {this.onOptionChange(e, 'invalid')}}>
                    <Radio value="true">开启</Radio>
                    <Radio value="false">不开启</Radio>
                  </Radio.Group>
@@ -174,61 +338,28 @@
            </Row>
          </Form>
        </TabPane>
        <TabPane tab="自定义验证" key="2">
          <Form {...formItemLayout} className="custom-verify-form" id="verifycard1">
            <Row gutter={24}>
              <Col span={10} className="sql">
                <Form.Item label={'sql'}>
                  {getFieldDecorator('sql', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.input'] + 'sql!'
                      }
                    ]
                  })(<TextArea rows={3} />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label={'报错信息'}>
                  {getFieldDecorator('errmsg', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.input'] + '报错信息!'
                      }
                    ]
                  })(<Input placeholder="" autoComplete="off" />)}
                </Form.Item>
              </Col>
              <Col span={6}>
                <Form.Item label={'报错编码'}>
                  {getFieldDecorator('errorCode', {
                    initialValue: 'E',
                    rules: [
                      {
                        required: true,
                        message: this.props.dict['form.required.select'] + '报错编码!'
                      }
                    ]
                  })(
                    <Select
                      getPopupContainer={() => document.getElementById('verifycard1')}
                    >
                      <Select.Option value="E"> E </Select.Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={2} className="add">
                <Button onClick={this.handleConfirm} type="primary" className="add-row">
                  添加
                </Button>
              </Col>
            </Row>
          </Form>
        <TabPane tab="唯一性验证" key="2">
          <UniqueForm
            fields={fields}
            dict={this.props.dict}
            uniqueChange={this.uniqueChange}
            wrappedComponentRef={(inst) => this.uniqueForm = inst}
          />
          <Table
            bordered
            rowKey="uuid"
            className="custom-table"
            dataSource={verify.uniques}
            columns={uniqueColumns}
            pagination={false}
          />
        </TabPane>
        <TabPane tab="自定义验证" key="3">
          <CustomForm
            dict={this.props.dict}
            customChange={this.customChange}
            wrappedComponentRef={(inst) => this.customForm = inst}
          />
          <Table
            bordered
            rowKey="uuid"
@@ -238,7 +369,10 @@
            pagination={false}
          />
        </TabPane>
        <TabPane tab="信息提示" key="3">
        <TabPane tab="单号生成" key="4">
          {verify.billCode ? <BillcodeForm dict={this.props.dict} billCode={verify.billCode} /> : null}
        </TabPane>
        <TabPane tab="信息提示" key="5">
          <Form {...formItemLayout}>
            <Row gutter={24}>
              <Col offset={6} span={6}>