taihu/app/containers/DataManagerDictionary/components/DictDatasModal.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, { useEffect, useState } from 'react'
import { Modal, Form, Button, Input, Col, Table, Row, Divider } from 'antd'
import { FormComponentProps } from 'antd/lib/form'
import { ICatalogue, IDictData, IViewBase } from '../types'
import { ColumnProps } from 'antd/lib/table'
import ButtonGroup from 'antd/es/button/button-group'
import api from 'utils/api'
import request from 'utils/request'

interface IDictDatasModalProps {
  visible: boolean
  dictType: string
  onCancel: () => void
}

const DictDatasModal = (props: IDictDatasModalProps) => {

  const { visible, onCancel, dictType } = props

  const [tableLoading, setTableLoading] = useState(false)
  const [dictDatas, setDictDatas] = useState<IDictData[]>([])

  const queryDictDatas = async() => {
    if (!dictType) {
      return
    }
    try {
      setTableLoading(true)
      const data = await request(api.dictDatas + `?dictType=${dictType}`, { method: 'GET' })
      setDictDatas(data?.payload ?? [])
    } finally {
      setTableLoading(false)
    }
  }


  const tableColumns: Array<ColumnProps<IDictData>> = [
    {
      title: '字典编码',
      dataIndex: 'dictCode'
    },
    {
      title: '字典标签',
      dataIndex: 'dictLabel'
    },
    {
      title: '字典键值',
      dataIndex: 'dictValue'
    },
    {
      title: '字典排序',
      dataIndex: 'dictSort'
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (text) => (
        <>
          {text === 0 && <span style={{ padding: '2px 4px', background: 'green', color: '#fff' }}>正常</span>}
          {text === 1 && <span style={{ padding: '2px 4px', background: 'red', color: '#fff' }}>停用</span>}
        </>
      )
    },
    {
      title: '备注',
      dataIndex: 'remark'
    },
    {
      title: '创建时间'
      // dataIndex: 'isDefault'
    },
    {
      title: '操作',
      render: () => {
        return (
          <>
            <a>编辑</a>
            <Divider type='vertical' />
            <a>删除</a>
          </>
        )
      }
    }
  ]
  useEffect(() => {
    queryDictDatas()
  }, [dictType])

  return (
    <Modal
      title='数据字典数据'
      // wrapClassName='ant-modal-small'
      visible={visible}
      footer={null}
      onCancel={onCancel}
      destroyOnClose
      width={'80%'}
    >
      <Row>
        <Col span={24}>
          <Table
            bordered
            rowKey='dictCode'
            loading={tableLoading}
            dataSource={dictDatas}
            columns={tableColumns}
            pagination={false}
            // onChange={this.tableChange}
          />
        </Col>
      </Row>
    </Modal>
  )
}

export default (DictDatasModal)