新增表格复用组件

src/components/EyePreview/index.tsx

+import React from 'react'
+import { Link } from 'umi'
+import { EyeOutlined } from '@ant-design/icons'
+import { Button } from 'antd'
+
+export interface EyePreviewProps {
+  url?: string,
+  type?: 'button' | 'link',
+  handleClick?()
+}
+
+const EyePreview:React.FC<EyePreviewProps> = (props) => {
+  return (
+    props.type === 'link' ?
+    <Link to={props.url || ''}>
+      {props.children} <EyeOutlined />
+    </Link>
+    : 
+    <Button onClick={props.handleClick} type='link'>
+      {props.children} <EyeOutlined />
+    </Button>
+  )
+  
+}
+
+EyePreview.defaultProps = {
+  type: 'link'
+}
+
+export default EyePreview
\ No newline at end of file

src/components/StatusSwitch/index.tsx

+import React from 'react'
+import { Popconfirm, Button } from 'antd'
+import { PlayCircleOutlined } from '@ant-design/icons'
+
+export interface StatusSwitchProps {
+  record: any,
+  handleConfirm?(),
+  handleCancel?()
+}
+
+const StatusSwitch:React.FC<StatusSwitchProps> = (props) => {
+  const { record } = props
+  return (
+    <Popconfirm
+      title="确定要执行这个操作?"
+      onConfirm={props.handleConfirm}
+      onCancel={props.handleCancel}
+      okText="是"
+      cancelText="否"
+    >
+      <Button type="link" style={record.state===1?{color:'#00B37A'}:{color:'red'}}>{record.state===1?'有效':'无效'} <PlayCircleOutlined /></Button>
+    </Popconfirm>
+  )
+}
+
+StatusSwitch.defaultProps = {}
+
+export default StatusSwitch
\ No newline at end of file

src/components/UploadImage/index.less

+.upload_image_wrap {
+  display: flex;
+  align-items: center;
+
+  .size_require {
+    color: #97A0AF;
+  }
+
+  .upload_btn {
+
+    width: 104px;
+    height: 104px;
+    display: flex;
+    margin-right: 24px;
+    align-items: center;
+    justify-content: center;
+    color: #6B778C;
+    flex-direction: column;
+    background: rgba(250, 251, 252, 1);
+    border-radius: 2px;
+    border: 1px solid rgba(223, 225, 230, 1);
+    cursor: pointer;
+    overflow: hidden;
+
+    &.isAdd {
+      border: 1px dashed rgba(223, 225, 230, 1);
+    }
+
+    &>img {
+      height: 100%;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+
+    &>p {
+      margin-top: 12px;
+    }
+  }
+}
\ No newline at end of file

src/components/UploadImage/index.tsx

+import React, { useState, Fragment, forwardRef } from 'react'
+import { Upload, message } from 'antd'
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
+import cx from 'classnames'
+import styles from './index.less'
+
+interface UploadImagePorpsType {
+  imgUrl: string;
+  size?: string;
+  onChange: Function;
+  disabled?: boolean;
+}
+
+const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
+  const { imgUrl, onChange, size = "386x256", disabled = false } = props
+  const [loading, setLoading] = useState<boolean>(false)
+  const beforeUpload = (file: UploadFile) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+    if (!isJpgOrPng) {
+      message.error('仅支持上传JPEG/JPG/PNG文件!');
+    }
+    const isLt200k = file.size / 1024 < 200;
+    if (!isLt200k) {
+      message.error('上传图片不超过200K!');
+    }
+    return isJpgOrPng && isLt200k;
+  }
+
+  const uploadProps = {
+    name: 'file',
+    action: '/api/file/file/upload',
+    headers: {},
+    data: {
+      fileType: 1
+    },
+    disabled: loading || disabled,
+    showUploadList: false,
+    onChange(info: UploadChangeParam) {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return;
+      }
+      if (info.file.status === 'done') {
+        // 图片回显
+        const { code, data } = info.file.response
+        if (code === 1000) {
+          console.log('upload success')
+          onChange(data)
+        }
+        setLoading(false)
+      }
+    },
+    beforeUpload
+  };
+
+  const uploadButton = (
+    <Fragment>
+      {loading ? <LoadingOutlined /> : <PlusOutlined />}
+      <p>上传图片</p>
+    </Fragment>
+  );
+
+  return (
+    <div className={styles.upload_image_wrap}>
+      <Upload {...uploadProps}>
+        {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "")}>
+          {
+            imgUrl ? <img src={imgUrl} /> : uploadButton
+          }
+        </div>}
+      </Upload>
+      <div className={styles.size_require}>
+        <p>支持JPG/PNG/JPEG， <br />最大不超过 200K， <br />尺寸：{size}</p>
+      </div>
+    </div>
+  )
+})
+
+export default UploadImage