taihu/app/containers/DataManagerView/components/CatalogueModal.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, Spin, Select, Radio } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { ICatalogue, IViewBase } from '../types'
import RadioGroup from 'antd/es/radio/group'

const FormItem = Form.Item

interface ICopyModalProps extends FormComponentProps<ICatalogue> {
  catalogues: ICatalogue[],
  selectedCatalogueKeys: string[],
  visible: boolean,
  loading: boolean,
  fromView: ICatalogue,
  onCheckUniqueName: (
    viewName: string,
    resolve: () => void,
    reject: (err: string) => void
  ) => void,
  onSave: (view: ICatalogue) => void,
  onCancel: () => void,
}

export class CatalogueModal extends React.PureComponent<ICopyModalProps> {
  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 = { ...fieldsValue, id: fromView?.id }
      onSave(copyView)
    })
  }

  private checkName = (_, value, callback) => {
    const { onCheckUniqueName } = this.props
    onCheckUniqueName(
      value,
      () => {
        callback()
      },
      (err) => {
        callback(err)
      }
    )
  }

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

  public render() {
    const { form, visible, loading, fromView, catalogues, selectedCatalogueKeys, 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 ? '编辑' : '新增'}
        wrapClassName='ant-modal-small'
        confirmLoading={loading}
        visible={visible}
        footer={modalButtons}
        onCancel={onCancel}
        afterClose={this.clearFieldsValue}
      >
        <Spin spinning={loading}>
          <Form>
            {!fromView && catalogues?.find((c) => selectedCatalogueKeys.includes(`${c?.id}`)) &&
              <FormItem label='目录' {...this.formItemStyle}>
                {getFieldDecorator<ICatalogue>('parentId', {
                  validateFirst: true,
                  rules: [{ required: true, message: '不能为空' }],
                  initialValue: selectedCatalogueKeys.join()
                })(
                  <RadioGroup>
                    <Radio value={selectedCatalogueKeys.join()}>子目录</Radio>
                    <Radio value={'-1'}>一级目录</Radio>
                  </RadioGroup>
                )}
              </FormItem>}
            <FormItem label="资源名称" {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('name', {
                validateFirst: true,
                rules: [
                  { required: true, message: '不能为空' }
                  // { validator: this.checkName }
                ],
                initialValue: fromView?.name
              })(<Input autoComplete={'off'} />)}
            </FormItem>
            <FormItem label='行业分类' {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('industry', {
                initialValue: fromView?.industry
              })(<Input />)}
            </FormItem>
            <FormItem label='来源部门' {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('originDept', {
                initialValue: fromView?.originDept
              })(<Input />)}
            </FormItem>
            <FormItem label='来源系统' {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('originSystem', {
                initialValue: fromView?.originSystem
              })(<Input />)}
            </FormItem>
            <FormItem label='扩展json' {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('extConfig', {
                initialValue: fromView?.extConfig
              })(<Input />)}
            </FormItem>
            <FormItem label='描述' {...this.formItemStyle}>
              {getFieldDecorator<ICatalogue>('description', {
                initialValue: fromView?.description
              })(<Input />)}
            </FormItem>
          </Form>
        </Spin>

      </Modal>
    )
  }
}

export default Form.create<ICopyModalProps>()(CatalogueModal)