taihu/app/containers/DataManagerDictionary/components/DictDataFormModal.tsx

/*
 * <<
 * Davinci
 * ==
 * Copyright (C) 2016 - 2017 EDP
 * ==
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * >>
 */

import React from 'react'
import { Modal, Form, Button, Input, Switch } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { IDictData } from '../types'

const FormItem = Form.Item

interface IDictTypeFormModalProps extends FormComponentProps<IDictData> {
  visible: boolean
  loading: boolean
  fromView: IDictData
  onSave: (view: IDictData) => void
  onCancel: () => void
}

export class DictTypeFormModal extends React.PureComponent<IDictTypeFormModalProps> {
  private formItemStyle = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
  }

  private save = () => {
    const { form, fromView, onSave } = this.props
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) {
        return
      }
      const copyView: IDictData = { ...fieldsValue }
      onSave(copyView)
    })
  }

  private clearFieldsValue = () => {
    this.props.form.resetFields()
  }

  public render() {
    const { form, visible, loading, fromView, onCancel } = this.props
    const { getFieldDecorator } = form

    const modalButtons = [
      <Button key="back" size="large" onClick={onCancel}>
        取 消
      </Button>,
      <Button
        disabled={loading}
        key="submit"
        size="large"
        type="primary"
        onClick={this.save}
      >
        保 存
      </Button>
    ]

    return (
      <Modal
        title={fromView ? '编辑' : '新增'}
        visible={visible}
        footer={modalButtons}
        onCancel={onCancel}
        afterClose={this.clearFieldsValue}
        destroyOnClose
      >
        <Form>
          {/*<FormItem label='字典编码' {...this.formItemStyle}>*/}
          {/*  {getFieldDecorator<IDictData>('dictCode', {*/}
          {/*    validateFirst: true,*/}
          {/*    rules: [*/}
          {/*      { required: true, message: '不能为空' }*/}
          {/*    ],*/}
          {/*    initialValue: fromView?.dictCode*/}
          {/*  })(<Input />)}*/}
          {/*</FormItem>*/}
          <FormItem label="字典标签" {...this.formItemStyle}>
            {getFieldDecorator<IDictData>('dictLabel', {
              initialValue: fromView?.dictLabel
            })(<Input />)}
          </FormItem>
          <FormItem label="字典键值" {...this.formItemStyle}>
            {getFieldDecorator<IDictData>('dictValue', {
              initialValue: fromView?.dictValue
            })(<Input />)}
          </FormItem>
          <FormItem label="状态" {...this.formItemStyle}>
            {getFieldDecorator<IDictData>('status', {
              valuePropName: 'checked',
              initialValue: !fromView ? true : fromView?.status === 0
            })(
              <Switch
                checkedChildren="正常"
                unCheckedChildren="停用"
                defaultChecked
              />
            )}
          </FormItem>
          <FormItem label="备注" {...this.formItemStyle}>
            {getFieldDecorator<IDictData>('remark', {
              initialValue: fromView?.remark
            })(<Input.TextArea />)}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}

export default Form.create<IDictTypeFormModalProps>()(DictTypeFormModal)