testtest

Posted 2022-07-12 coderlin_

import React,  memo, useEffect, useState, useCallback  from "react";
import  Form, Input, Button, Typography, Upload, message  from "antd";
import  useSelector, useDispatch, shallowEqual  from "react-redux";
import  useNavigate  from "react-router-dom";
import  LoadingOutlined, PlusOutlined  from "@ant-design/icons";

import  ItemActions  from "@/view/Item/reducer/item";
import  StateProps  from "@/reducer";
import  useParams  from "@/utils/usetool/useParams";
import  CateGorySlice  from "@/view/Category/reducer/category";

function getBase64(img: any, callback: any) 
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);


function beforeUpload(file: any) 
  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 Create: React.FC<Record<string, unknown>> = () => 
  //初始化数据
  const  oneData  = useSelector(
    (state: StateProps) => (
      oneData: state.item.oneData,
      listData: state.item.listData,
    ),
    shallowEqual
  );
  const [loading, setloading] = useState<boolean>(false);
  const [imageUrl, setimageUrl] = useState<string>("");
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const id = useParams("id")[0];

  //根据id判断是否获取单个数据
  useEffect(() => 
    if (id) 
      dispatch(ItemActions.findOneAction(id as string));
    
    return () => 
      dispatch(CateGorySlice.actions.clearOne());
    ;
  , [id, dispatch]);
  //表单样式
  const layout = 
    labelCol:  span: 2 ,
    wrapperCol:  span: 14 ,
  ;
  const tailLayout = 
    wrapperCol:  offset: 2, span: 16 ,
  ;
  //业务逻辑
  const onFinish = useCallback(
    (values: any) => 
      if (!id) 
        dispatch(
          ItemActions.createItemAction(
            name: values.username,
            icon: values.img.file.response.url,
          )
        );
       else 
        dispatch(
          ItemActions.editOneAction(
            id: id as string,
            data: 
              name: values.username ? values.username : oneData.name,
              icon: values.img ? values.img.file.response.url : oneData.icon,
            ,
          )
        );
      
      navigate("/items/list");
    ,
    [id, oneData]
  );

  //上传图片成功
  const handleChange = (info: any) => 
    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, () => 
        setimageUrl(info.file.response.url);
        setloading(false);
      );
    
  ;
  const uploadButton = (
    <div>
      loading ? <LoadingOutlined /> : <PlusOutlined />
      <div style= marginTop: 8 >上传图片</div>
    </div>
  );
  return (
    <div style= padding: 30 >
      <Typography.Title level=3>
        id ? "编辑物品" : "新建物品"
      </Typography.Title>
      <Form
        ...layout
        name="basic"
        initialValues= remember: true 
        onFinish=onFinish
        style= marginTop: 20 
      >
        <Form.Item label="名称" name="username">
          <Input
            placeholder=Object.keys(oneData).length ? oneData.name : ""
          ></Input>
        </Form.Item>
        <Form.Item label="图标" name="img">
          <Upload
            name="file"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList=false
            action="http://localhost:5000/api/upload"
            beforeUpload=beforeUpload
            onChange=handleChange
          >
            imageUrl || oneData.icon ? (
              <img
                src=imageUrl ? imageUrl : oneData.icon
                alt="avatar"
                style= width: "100%" 
              />
            ) : (
              uploadButton
            )
          </Upload>
        </Form.Item>
        <Form.Item ...tailLayout>
          <Button type="primary" htmlType="submit">
            id ? "保存" : "提交"
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
;

export default memo(Create);