react typescript FunctionComponent antd crud

• Z时代
• 2024-01-10
• 分类：综合

这个界面跟之前VUE做的一样。并无任何不同之处，只是用react重复实现了一遍。

import React, { useState, useEffect } from 'react';
import { Row, Col, Table, Form, Cascader, Input, Button, Modal, message } from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import http from '../../service';
import './post_category.css'
import { PostCategoryTo } from '../../models/PostCategoryTo';
interface PostCategoryProps extends FormComponentProps {
}
const PostCategory: React.FC<PostCategoryProps> = (props) =>  {
  const scroll = { y: window.innerHeight - 200 };
  const columns = [
    { title: '名称', dataIndex: 'name' },
    { title: '路径', dataIndex: 'code' }
  ];
  const rowSelection = {
    onChange: (selectedRowKeys: any, rows: any) => {
      setSelectedRows(rows)
    }
  }
  const { getFieldDecorator } = props.form;
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState([])
  let  [selectedRows, setSelectedRows] = useState([])
  let [formModel, setFormModel] = useState(new PostCategoryTo())
  const fieldNames = { label: 'name', value: 'uid', children: 'children'}
  useEffect(() => {
    loadData()
  }, [])
  function loadData() {
    http.url('v1/post-category')
    .get()
    .json(res => {
      setDataSource(Object.assign([], res))
    })
  }
  function handleAdd () {
    setFormModel(new PostCategoryTo())
    props.form.resetFields()
  }
  function handleModify () {
    if (selectedRows.length !== 1) {
      message.warn('请选择一行数据进行操作')
      return
    }
    setFormModel(PostCategoryTo.fromObject(selectedRows[0]))
  }
  function handleDelete () {
    if (selectedRows.length === 0) {
      message.warn('请选择一行数据进行操作')
      return
    }
    Modal.confirm({
      title: '请确认你要删除这些项目',
      onOk() {
        const list = selectedRows.map((it:any) => it.uid)
        http.url(`v1/post-category/${list.join(',')}`).delete()
          .text(() => {
            loadData()
            message.success('删除成功')
          }).catch(err => message.error(err.message))
      },
      onCancel() {},
    });
  }
  function handleSave() {
    props.form.validateFields((err, values) => {
      if (!err) {
        const param = Object.assign({}, formModel, values)
        console.log(param, formModel, values)
        if (Array.isArray(values.parentUid)) {
          param.parentUid = values.parentUid[values.parentUid.length - 1]
        }
        setLoading(true)
        let resp: any = null
        if (param.uid) {
          resp = http.url(`v1/post-category/${param.uid}`).put(param)
        } else {
          resp = http.url('v1/post-category').post(param)
        }
        resp.json(res => {
          setFormModel(PostCategoryTo.fromObject(res))
          loadData()
          message.success('保存成功')
        })
        .finally(() => {
          setLoading(false)
        })
      }
    });
  }
  return (
    <Row gutter={32}>
      <Col span={6}>
        <h3>新增分类</h3>
        <Form>
          <Form.Item label='名称' help='名称是它显示在网页上。'>
            {getFieldDecorator('name', {initialValue: formModel.name, rules: [{ required: true, message: '请输入账号' }]})(
              <Input id='name' placeholder='请输入名称'></Input>
            )}
          </Form.Item>
          <Form.Item label='路径' help='它通常是地址栏里面的路径，它通常都是小写的，只包含字母、数字和连字符。'>
            {getFieldDecorator('code', {initialValue: formModel.code})(
              <Input ></Input>
            )}
          </Form.Item>
          <Form.Item label='父分类'>
            {getFieldDecorator('parentUid', {initialValue: formModel.parentUid})(
              <Cascader fieldNames={fieldNames}  options={dataSource} placeholder='选择父分类'/>
            )}
          </Form.Item>
          <Form.Item label='描述' help='默认情况下描述不显示;一些主题可能会显示这一点。'>
            {getFieldDecorator('description', {initialValue: formModel.description})(
              <Input.TextArea ></Input.TextArea>
            )}
          </Form.Item>
          <div className="button-save">
            <Button type='primary' loading={loading} onClick={handleSave}>保存</Button>
          </div>
        </Form>
      </Col>
      <Col span={18}>
        <div className='toolbar'>
          <Button size='small' onClick={handleAdd}>新增</Button>
          <Button type='primary' size='small' onClick={handleModify}>修改</Button>
          <Button type='danger' size='small' onClick={handleDelete}>删除</Button>
        </div>
        <Table columns={columns} size="small" rowKey="uid" rowSelection={rowSelection} dataSource={dataSource} pagination={false} scroll={scroll}></Table>
      </Col>
    </Row>
  )
}
export default Form.create()(PostCategory)

以上是 react typescript FunctionComponent antd crud 的全部内容， 来源链接： utcz.com/z/383746.html