前端组件

1.table组件中，转时间格式         

render: (text, record) => {
        return (
          <span>
            {new Date(Number(record.createTime)).toLocaleString('zh-CN', {
              timeZone: 'Asia/Shanghai',
            })}
          </span>
        )
      },


//text:当前单元格要显示的文本，本需用record获得。可对text在渲染前进行自定义更改。

//record:通过record，可以访问这一行的其他列的数据    index:当前行在此页所在索引，0是起始行索引。

     {

      title: '序号',

      dataIndex: 'id',

      key: 'id',

      align: 'center',

      width: 250,

      render: (text, record, index) => {

        return <span>{pageSize * (cur - 1) + index + 1}</span>

      },

    },

     render: (text, record, index) => { return <span>{index + 1}</span> }

有页码的删除前进行判断：

if ( cur > 1 && tableDate.length % pageSize === 1) {
          console.log('删除单页只有一行的数据', cur)
          fetchData(cur - 1, pageSize, sortOrder)
        } else {
          console.log('删除单页有多行的数据', cur)
          fetchData(cur, pageSize, sortOrder)
        }

2.上传图片

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
 
 

  const [loading, setLoading] = useState(false)
  const [imageUrl, setImageUrl] = useState()
  const [recordtitle, setrecordtitle] = useState('')
  const getBase64 = (img, callback) => {
    const reader = new FileReader()
    reader.addEventListener('load', () => callback(reader.result))
    reader.readAsDataURL(img)
  }
  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!')
    }
    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!')
    }
    return isJpgOrPng && isLt2M
  }
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true)
      return
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url) => {
        setLoading(false)
        //console.log(url)
        //setImageUrl(url)
      })
    }
  }


  const Ttext = async (options) => {
    const formData = new FormData()
    formData.append('files', options.file)
    const res = await $http.post('/api/wms/v1/file', formData)  //向后端发送请求，返回title
    console.log(111, res.data.body)
    if (res.data.code === 200) {
      const image = res.data.body
      setrecordtitle(image)
      setImageUrl(`http://192.168.2.32:9333/${image}`)  //url拼接title，设置到图片url进行回显
      options.onSuccess(res, options.file)
    } else {
      message.error('error')
    }
  }
  const uploadButton = (
    <button
      style={{
        border: 0,
        background: 'none',
      }}
      type="button"
    >
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </button>
  )

return

<div style={{ display: 'flex', marginLeft: 50 }}>
                <span
                  style={{
                    display: 'inline-block',
                    width: '120px',
                    justifyContent: 'center',
                    alignContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  量表图片：
                </span>
                <Upload
                  name="avatar"
                  listType="picture-card"
                  className="avatar-uploader"
                  showUploadList={false}
                  beforeUpload={beforeUpload}
                  onChange={handleChange}
                  customRequest={Ttext}
                >
                  {imageUrl ? (
                    <img
                      src={imageUrl}  //两种显示情况：初次请求文件服务器后 再次请求服务器返回recortitle后的拼接
                      alt="avatar"
                      style={{
                        width: '100%',
                      }}
                    />
                  ) : (
                    uploadButton
                  )}
                </Upload>
              </div>

 3.校验

//是否是数字
const reg = /^\d*(\.\d*)?$/
    if (!reg.test(e.target.value)) {
      message.error('请输入数字')
      return
    }