antd#Image JavaScript Examples

getPreview() {
    return (
      <Modal
        title="Uploaded Image"
        visible={this.state.showPreview}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <Image width={300} src={this.state.src} fallback={this.state.fall} />
      </Modal>
    );
  }

function ImageDemo() {
  return (
    <Image.PreviewGroup>
      <Image
        width={200}
        src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
      />
      <Image
        width={200}
        src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
      />
    </Image.PreviewGroup>
  );
}

function ImageDemo() {
  const [random, setRandom] = React.useState();
  return (
    <Space size={12}>
      <Image
        width={200}
        src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}
        placeholder={
          <Image
            preview={false}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
            width={200}
          />
        }
      />
      <Button
        type="primary"
        onClick={() => {
          setRandom(Date.now());
        }}
      >
        Reload
      </Button>
    </Space>
  );
}

function ImageDemo() {
  return (
    <Image
      width={200}
      height={200}
      src="error"
      fallback="data:image/png;base64,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"
    />
  );
}

function ImageDemo() {
  return (
    <Image
      width={200}
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
      preview={{
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      }}
    />
  );
}

SupportImage = (props) => {
  const db = useDB();
  if (!db) return null;
  let support = db.get("supports").find({ id: props.id }).value();
  let imgUrl = "";
  if (support) {
    imgUrl = support.imgUrl;
  }
  return <Image src={CDN_SERVER + imgUrl} fallback={IMAGE_FALLBACK} width={80} preview="false" />;
}

CompactLiveFeed.Card.Image = styled(Image)`
  width: 100%;
  height: 112.5px;
  cursor: pointer;
  transition: box-shadow 0.25s ease-in-out;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &:hover {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
  }
`;

PictureThumbnail = styled(Image)`
  width: 100%;
  cursor: pointer;

  img {
    height: 120px;
    object-fit: cover;

    @media (min-width: 580px) {
      height: 220px;
    }
  }
`

Card.Image = styled(Image)`
  width: 100%;
  height: auto;
  cursor: pointer;

  .ant-image-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0 0 2px 2px;
  }
`;

function PictureCardList({ pictures }) {
  const transitions = useTransition(pictures, (picture) => picture?.id, {
    config: config.gentle,
    from: { opacity: 0, transform: 'translate3d(25%, 0%, 0px)' },
    enter: { opacity: 1, transform: 'translate3d(0%, 0px, 0px)' },
    leave: { opacity: 0, height: 0, transform: 'translate3d(-25%, 0px, 0px)' },
  });

  return (
    <>
      {transitions.map(({ item: picture, props, key }) => (
        <Card key={key} style={props}>
          <Card.Info>
            <Link to={`/protest/${picture.protestId}`}>
              <Card.Info.Title>
                {picture.protestName}
                {picture.cityName && `, ${picture.cityName}`}
              </Card.Info.Title>
            </Link>
            {picture.uploaderName && (
              <Card.Info.Subtitle>
                <Avatar size={21} src={picture.userAvatar || 'https://1km.co.il/anonymousPofile.png'} style={{ marginLeft: 6 }} />
                {picture.uploaderName}
              </Card.Info.Subtitle>
            )}
            {picture.description && <Card.Description>{picture.description}</Card.Description>}
            <Card.Info.Timestamp>
              <TimeAgo datetime={picture.createdAt} locale="he" />
            </Card.Info.Timestamp>
          </Card.Info>
          <Card.Image src={picture.imageUrl} alt="" />
        </Card>
      ))}
    </>
  );
}

ImageThumbnail = styled(Image)`
  width: 100%;
  height: 175px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease-in-out;

  img {
    height: 175px;
    object-fit: cover;
  }

  @media (min-width: 1024px) {
    &:hover {
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
      transform: scale(1.075);
    }
  }
`

getDetect() {
    return (
      <Modal
        title="Entity Detection"
        visible={this.state.showDetect}
        onOk={this.handleDetectOk}
        onCancel={this.handleDetectCancel}
      >
        <Image
          width={300}
          src={this.state.resultSrc}
          fallback={this.state.fall}
        />
      </Modal>
    );
  }

getPreview() {
    return (
      <Modal
        title="Uploaded Image"
        visible={this.state.showPreview}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
      >
        <Image width={300} src={this.state.src} fallback={this.state.fall} />
      </Modal>
    );
  }

getDetect() {
    return (
      <Modal
        title="Entity Detection"
        visible={this.state.showDetect}
        onOk={this.handleDetectOk}
        onCancel={this.handleDetectCancel}
      >
        <Image
          width={300}
          src={this.state.resultSrc}
          fallback={this.state.fall}
        />
      </Modal>
    );
  }

getLink() {
    const columns = [
      {
        title: 'Entity',
        dataIndex: 'entity',
        key: 'entity',
      },
      {
        title: 'Position',
        dataIndex: 'position',
        key: 'position',
      },
      {
        title: 'Confidence',
        dataIndex: 'confidence',
        key: 'confidence',
      },
    ];
    const data = [];
    for (let i = 0; i < this.state.resultEntity.length; i++) {
      let position = '';
      for (let j = 0; j < 4; j++) {
        position += `${this.state.resultPosition[i][j].toFixed(2)} `;
      }
      const confidence = this.state.resultPosition[i][4].toFixed(4);
      data.push({
        key: `'${i + 1}'`,
        entity: this.state.resultEntity[i],
        position,
        confidence,
      });
    }


    return (
      <Modal
        width={1000}
        title="Linking Result"
        visible={this.state.showLink}
        onOk={this.handleLinkOk}
        onCancel={this.handleLinkCancel}
      >
        <Image
          width={300}
          src={this.state.resultSrc}
          fallback={this.state.fall}
        />
        {/* <canvas id="myCanvas" width="500" height="500" style="border: 0px"></canvas> */}
        {/* <Table onRow={(record)=>{
          console.log(record);
        }} size='small' bordered columns={columns} dataSource={data} /> */}
        <Table
          onRow={record => {
            return {
              onClick: event => {}, // 点击行
              onDoubleClick: event => {},
              onContextMenu: event => {},
              onMouseEnter: event => {
                console.log(record);
              }, // 鼠标移入行
              onMouseLeave: event => {
                console.log(record);
              },
            };
          }}
          size="small"
          bordered
          columns={columns}
          dataSource={data}
        />
      </Modal>
    );
  }

SupportInput = ({ value = {}, onChange }) => {
  const [isSupportVisible, setIsSupportVisible] = useState(false);
  const [data, setData] = useState({});
  const showSupport = (index) => {
    setIsSupportVisible(true);
  };
  const closeSupport = () => {
    setIsSupportVisible(false);
  };
  const triggerChange = (changedValue) => {
    setIsSupportVisible(false);
    onChange?.({
      ...data,
      ...value,
      ...changedValue,
    });
  };
  const handleSelectSupport = (data) => {
    setData(data);
    closeSupport();
    triggerChange(data);
  };
  return (
    <>
      <div className="w-16 h-16">
        <Image
          src={data.imgUrl ? CDN_SERVER + data.imgUrl : ""}
          preview="false"
          fallback={IMAGE_FALLBACK}
          onClick={showSupport}
        />
      </div>
      <Modal
        visible={isSupportVisible}
        onOk={closeSupport}
        onCancel={closeSupport}
        width={"100%"}
        bodyStyle={{ height: "80vh" }}
      >
        <div className="w-full h-full overflow-hidden flex relative">
          <SupportListWithFilter
            formName="seedSupMo"
            onClick={handleSelectSupport}
            sortFlag={true}
          />
        </div>
      </Modal>
    </>
  );
}

PlayerInput = ({ value = {}, onChange }) => {
  const [isPlayerVisible, setIsPlayerVisible] = useState(false);
  const [data, setData] = useState({});
  const showPlayer = (index) => {
    setIsPlayerVisible(true);
  };
  const closePlayer = () => {
    setIsPlayerVisible(false);
  };
  const triggerChange = (changedValue) => {
    setIsPlayerVisible(false);
    onChange?.({
      ...data,
      ...value,
      ...changedValue,
    });
  };
  const handleSelectPlayer = (data) => {
    setData(data);
    closePlayer();
    triggerChange(data);
  };
  return (
    <>
      <div className="w-16 h-16">
        <Image
          src={data.imgUrl ? CDN_SERVER + data.imgUrl : ""}
          preview="false"
          fallback={IMAGE_FALLBACK}
          onClick={showPlayer}
        />
      </div>
      <Modal
        visible={isPlayerVisible}
        onOk={closePlayer}
        onCancel={closePlayer}
        width={"100%"}
        bodyStyle={{ maxHeight: "80vh", overflow: "auto" }}
      >
        <PlayerList sortFlag={true} onClick={handleSelectPlayer} />
      </Modal>
    </>
  );
}

PlayerImage = (props) => {
  const db = useDB();
  if (!db) return null;
  let imgUrl = db.get("players").find({ id: props.id }).value().imgUrl;
  return <Image src={CDN_SERVER + imgUrl} fallback={IMAGE_FALLBACK} width={80} preview="false" />;
}

SupportInput = ({ value = {}, onChange }) => {
  const [isSupportVisible, setIsSupportVisible] = useState(false);
  const [data, setData] = useState({});
  const showSupport = (index) => {
    setIsSupportVisible(true);
  };
  const closeSupport = () => {
    setIsSupportVisible(false);
  };
  const triggerChange = (changedValue) => {
    setIsSupportVisible(false);
    onChange?.({
      ...data,
      ...value,
      ...changedValue,
    });
  };
  const handleSelectSupport = (data) => {
    setData(data);
    triggerChange(data);
  };
  return (
    <>
      <Image
        src={data.imgUrl ? CDN_SERVER + data.imgUrl : ""}
        preview="false"
        fallback={IMAGE_FALLBACK}
        width={80}
        onClick={showSupport}
      />
      <Modal
        visible={isSupportVisible}
        onOk={closeSupport}
        onCancel={closeSupport}
        width={"80%"}
        bodyStyle={{ height: "90vh" }}
      >
        <div className="w-full h-full overflow-hidden flex relative">
          <SupportListWithFilter formName="seedSup" onClick={handleSelectSupport} sortFlag={true} />
        </div>
      </Modal>
    </>
  );
}

PlayerInput = ({ value = {}, onChange }) => {
  const [isPlayerVisible, setIsPlayerVisible] = useState(false);
  const [data, setData] = useState({});
  const showPlayer = (index) => {
    setIsPlayerVisible(true);
  };
  const closePlayer = () => {
    setIsPlayerVisible(false);
  };
  const triggerChange = (changedValue) => {
    setIsPlayerVisible(false);
    onChange?.({
      ...data,
      ...value,
      ...changedValue,
    });
  };
  const handleSelectPlayer = (data) => {
    setData(data);
    triggerChange(data);
  };
  return (
    <>
      <Image
        src={data.imgUrl ? CDN_SERVER + data.imgUrl : ""}
        preview="false"
        fallback={IMAGE_FALLBACK}
        width={80}
        onClick={showPlayer}
      />
      <Modal
        visible={isPlayerVisible}
        onOk={closePlayer}
        onCancel={closePlayer}
        width={"80%"}
        bodyStyle={{ maxHeight: "80vh", overflow: "auto" }}
      >
        <PlayerList sortFlag={true} onClick={handleSelectPlayer} />
      </Modal>
    </>
  );
}

getLink() {
    const columns = [
      {
        title: 'Entity',
        dataIndex: 'entity',
        key: 'entity',
      },
      {
        title: 'Position',
        dataIndex: 'position',
        key: 'position',
      },
      {
        title: 'Confidence',
        dataIndex: 'confidence',
        key: 'confidence',
      },
    ];
    const data = [];
    for (let i = 0; i < this.state.resultEntity.length; i++) {
      let position = '';
      for (let j = 0; j < 4; j++) {
        position += `${this.state.resultPosition[i][j].toFixed(2)} `;
      }
      const confidence = this.state.resultPosition[i][4].toFixed(4);
      data.push({
        key: `'${i + 1}'`,
        entity: this.state.resultEntity[i],
        position,
        confidence,
      });
    }


    return (
      <Modal
        width={1000}
        title="Linking Result"
        visible={this.state.showLink}
        onOk={this.handleLinkOk}
        onCancel={this.handleLinkCancel}
      >
        <Image
          width={300}
          src={this.state.resultSrc}
          fallback={this.state.fall}
        />
        {/* <canvas id="myCanvas" width="500" height="500" style="border: 0px"></canvas> */}
        {/* <Table onRow={(record)=>{
          console.log(record);
        }} size='small' bordered columns={columns} dataSource={data} /> */}
        <Table
          onRow={record => {
            return {
              onClick: event => {}, // 点击行
              onDoubleClick: event => {},
              onContextMenu: event => {},
              onMouseEnter: event => {
                console.log(record);
              }, // 鼠标移入行
              onMouseLeave: event => {
                console.log(record);
              },
            };
          }}
          size="small"
          bordered
          columns={columns}
          dataSource={data}
        />
      </Modal>
    );
  }

FormattedImage = styled(Image)`
    margin-top: 16px;
`

function ImageDemo() {
  return (
    <Image
      width={200}
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  );
}

User = memo(function User({ dispatch, getUserList, loading }) {

  const columns = [
    {
      key: 'index',
      align: 'center',
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      align: 'center',
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      align: 'center',
      title: 'email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      align: 'center',
      title: '名称',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '介绍',
      dataIndex: 'introduct',
      key: 'introduct',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '头像',
      dataIndex: 'iconUrl',
      key: 'iconUrl',
      render: (text) => (
        <>
          {text.length ? <Image src={text} alt="头像" style={{ cursor: 'pointer' }} width={50} height={50} /> : <NoData data={text} />}
        </>
      )
    }
  ];

  const [ dowmLoading,setDowmLoading ] = useState(false);

  const initFetch = useCallback(() => dispatch({ type: SAGA_GET_USER_LIST}), [dispatch]);

  useEffect(() => {
    initFetch()
  }, [initFetch]);

  const datas = {
    btnGrounp: [{
      title:  '下载zip',
      onClick: (e) => dowmZip(),
      iconClass: 'zip',
      loading:dowmLoading
    }],
    tableProps: { columns, dataSource: getUserList },
    receive: () => initFetch(),
    loading
  }

  const dowmZip = async ()=>{
    setDowmLoading(true);
    await export_txt_to_zip(tHeader, fileDataformat(getUserList,filterVal), 'user','user');
    setDowmLoading(false);
  }

  return (
    <>
      <LayoutTableComponent {...datas} />
    </>
  )
})

Login = () => {
  const history = useHistory();
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");

  const { signin } = useContext(GlobalContext);

  const onSubmit = async () => {
    signin(email, password);
  };

  return (
    <div>
      <Form
        style={{ position: "absolute" }}
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
        }}
      >
        <div className="logo-login">
          <Image alt="logo" src={logo} width={300} preview={false} />
        </div>
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: "Please input your Email!",
            },
          ]}
        >
          <Input
            style={{ width: 300 }}
            prefix={<UserOutlined className="site-form-item-icon" />}
            placeholder="Email"
            onChange={(e) => setEmail(e.target.value)}
          />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "Please input your Password!",
            },
          ]}
        >
          <Input.Password
            style={{ width: 300 }}
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
            iconRender={(visible) =>
              visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
            }
            onChange={(e) => setPassword(e.target.value)}
          />
        </Form.Item>

        <Form.Item>
          <Button
            type="primary"
            htmlType="submit"
            className="login-form-button"
            onClick={() => {
              onSubmit();
              setTimeout(() => history.push("/"), 1000);
            }}
          >
            Log in
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export function MessageBubble({
    w,
    h,
    backgroundColor = '#d9d9d9',
    color = '#000',
    isFile = false,
    url = '',
    content = '',
}) {
    if (isFile) {
        return (
            <Image
                id="file-image"
                src={url}
                width={w}
                height={h}
                fallback="data:image/png;base64,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"
                preview
            />
        )
    }
    return (
        <div
            style={{
                backgroundColor,
                borderRadius: 12,
                padding: '6px 12px 6px',
                width: w,
                height: h,
            }}
        >
            <Text
                style={{
                    color,
                }}
            >
                {content}
            </Text>
        </div>
    )
}

render() {

        const onFinish = (value) => {
            post("/mark/addTradeMark", {
                name: value.name,
                price: value.price,
                img: this.base64_encode(this.state.buffer)
            }).then(res => {
                if (res.data !== "success") {
                    message.error("图片太大,请勿超过64kb");
                } else {
                    message.info("添加成功");
                    this.queryAllTradeMark()
                }
            })
                .catch(err => {
                    message.error("出错");
                    console.error(err);
                })
        };

        const addMortgage = () => {
            this.setState({
                isModalVisible: true,
            });
        }

        const handleOk = () => {
            this.setState({
                isModalVisible: false,
            });
        };

        const handleCancel = () => {
            this.setState({
                isModalVisible: false,
            });
        };

        const columns = [
            {
                title: '商标名称',
                dataIndex: 'name',
                key: 'name',
                render: text => <a>{text}</a>,
            },
            {
                title: '商标图片',
                dataIndex: 'img',
                key: 'img',
            },
            {
                title: '贷款额度',
                dataIndex: 'loanCount',
                key: 'loanCount',
            },
            {
                title: '还款状态',
                key: 'tags',
                dataIndex: 'tags',
                render: tags => (
                    <>
                        {tags.map(tag => {
                            let color = 'green';
                            if (tag === '已还完贷款') {
                                color = 'geekblue';
                            } else if (tag === "有违约") {
                                color = 'volcano';
                            }

                            return (
                                <Tag color={color} key={tag}>
                                    {tag.toUpperCase()}
                                </Tag>
                            );
                        })}
                    </>
                ),
            },
            {
                title: '操作',
                key: 'action',
                render: () => (
                    <Space size="middle">
                        <a>详情</a>
                    </Space>
                ),
            },
        ];
        const demos = [
            {
                title: "商标A",
                url: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=320469340,3459560807&fm=26&gp=0.jpg",
                price: "500000"
            },
            {
                title: "商标B",
                url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1682242192,1564971825&fm=26&gp=0.jpg",
                price: "2100000"
            },
            {
                title: "商标C",
                url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1138007205,593731000&fm=26&gp=0.jpg",
                price: "800000"
            },
            {
                title: "商标D",
                url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2212606782,3586395335&fm=26&gp=0.jpg",
                price: "1000000"
            }
        ];

        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="商标抵押" key="1">
                    <Card title="抵押列表" extra={<Button type="primary" onClick={addMortgage}>新增抵押</Button>}>
                        <Table columns={columns} dataSource={this.state.trades} />
                        <Modal title="新增商标抵押" visible={this.state.isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                            <Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
                                <Form.Item name="name" label="商标名称">
                                    <Input />
                                </Form.Item>
                                <Form.Item name="price" label="价格">
                                    <InputNumber min={10} max={99999999999} />
                                </Form.Item>
                                <Form.Item name="img" label="商标图片">
                                    <input type="file" onChange={this.captureFile} />
                                </Form.Item>
                                <Form.Item
                                    wrapperCol={{
                                        xs: { span: 24, offset: 0 },
                                        sm: { span: 16, offset: 8 },
                                    }}
                                >
                                    <Button type="primary" htmlType="submit">
                                        提交
                                    </Button>
                                </Form.Item>
                            </Form>

                        </Modal>
                    </Card>
                </TabPane>
                <TabPane tab="商标查询" key="2">
                    <Card title="商标查询" extra={<Search placeholder="请输入商标名称" onSearch={this.onSearch} enterButton />}>
                        <Descriptions bordered  style={{display: this.state.searchShow}}>
                            <Descriptions.Item label="商标名称">
                                相机生产企业公司
                            </Descriptions.Item>
                            <Descriptions.Item label="商标" span={2}><Image
                                width={200}
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADwklEQVRYR+2WTWhcVRTHf+dNmoABP6p17owuqujCVqWYigrRpi6kFelCKYgVMndcFDcVRFxoUQSNlViiLsQUM2+SCGKDEFdZFGnjB1K0qNEUK0i7iMl7DfFjUS2deffKe+NM3mRmMlMn2E3f8r5zzv3d//m4V7jEn1zi/bkM0LoC42dvoRjMgnS2njZ7HpwD6OQrjXxaB3A9i5itZNInKsHchb66gXXqWGU9550jq7rXBkCrZeAQCJmoDWxmsZImq/ZG/0K7uN8Kh4tToDWAkyDb0Gr7GgP4v6OT11QOMOrfiTHrm6YgUspuJ56WmFNM0tNXQ1cfOM+U/ttRSHwHxXBtAOSN1YqpYWF+sHQjhcIvWPKImUKnJ+O28Zy+jnCajDoUGYwuPoIpfgzsR6cGW6/8Bpa5pU3IhW/Rqa5GAEW06qhyd/0fsTJI9vrRmrDD81fQyWOQuAPMZqzMgf0BMafQNxypi1GnIOMKHK0UTkibvfYkrncUzCfo9FtVAfPzPVjnC7AvYe0MnV1fERiFDXqwshOxHWTUEzUQIYC1U4hzvJzOagAxz2Gdb4AzIHmwfTUAOf9pxN6GVvsapsVd2A1yuKb9ygrElFgBwIdYSeE4JzDBAWCxCmD4t6vovPApWm0ttZj/MrAH7K0VmHKrjnm3E0gvOvne8uD6dyY0BAh7Nwpqd0PxSegYqgLIewUMvWTVcVxvBJhBq7eXp15YaIXZysnDjYxs4ank91UzYVWAuK4ra8D1z6GT3bhemN/X0OqmmjS8/+d6En8vRRDu3BboeBitBtoHGPHvI2HvJqPeIe8dwZoxdHq8abXnvAJZta59gCg1ZjqaaE3mO65/GMwEOjVRZdu0CMvzu3yseAriCrj+JGKnyaih/0+BUtWXaqDUDX/UveVy3j0IB9Gqd21rIALwAgh2RJMu7+3Csh9kAJ2cZHwxRcE+hGP6yagHI2XC/Cekh/7kTPs1UEmLH6CTidIGi9twgkex7AOZBw5VLqzwLgmCbrLqo4ubA6u1YUmFe7GM45jHq15HVX7+GLABndxZfbe0MoiaAYT/h+06Os8Ogb0O5DOsmQC5GZEdwIsIL5BJvln3Lojmw/Irqf5lVJF7YQprvySbfrV+tS9shMQmCDYjMoc4P3G+eIq96b8adgccA/s1OvV8aBMDiPV5lN9f7wJnGiGUcxCdOlM3aKuL0QNWnkWrXXGXGEBo4PSD3VgykAfA7kG4EngXy+et7lVjJ9yPYYRE4iD9G36uD/Cfo7fn2PqruL19GnpfBvgHJ4sUPz8WKJQAAAAASUVORK5CYII="
                            />
                            </Descriptions.Item>
                            <Descriptions.Item label="国际分类">制造业</Descriptions.Item>
                            <Descriptions.Item label="申请注册号">51326585</Descriptions.Item>
                            <Descriptions.Item label="申请日期" span={2}>
                                2021-3-15
    </Descriptions.Item>
                            <Descriptions.Item label="状态">
                                <Badge status="processing" text="尚未还款" />
                            </Descriptions.Item>
                            <Descriptions.Item label="商标有效期" span={2}>
                                十年
                            </Descriptions.Item>
                            <Descriptions.Item label="商标估值">￥100,000.00</Descriptions.Item>
                            <Descriptions.Item label="贷款比例">50%</Descriptions.Item>
                            <Descriptions.Item label="抵押贷款金额">￥60,000.00</Descriptions.Item>
                            <Descriptions.Item label="商标交易记录">
                                2020-4-1 09:12:00
                                <br />
                                <a>商标拍卖</a>：A企业拍卖本商标
                                <br />
                                2020-5-8 19:12:00
                                <br />
                                <a>商标权变更</a>: A企业转移至相机生产公司
                            </Descriptions.Item>
                        </Descriptions>
                    </Card>
                </TabPane>
                {/* <TabPane tab="商标拍卖" key="3">
                    <Card title="拍卖列表" extra={<Button type="primary">新增拍卖</Button>}>
                        <Space size={[50, 40]} wrap>
                            {listItems}
                        </Space>
                    </Card>
                </TabPane> */}
            </Tabs>
        )
    }

User = memo(function User() {
  const columns = [
    {
      key: 'index',
      align: 'center',
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      align: 'center',
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      align: 'center',
      title: 'email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      align: 'center',
      title: '名称',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '介绍',
      dataIndex: 'introduct',
      key: 'introduct',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '头像',
      dataIndex: 'iconUrl',
      key: 'iconUrl',
      render: (text) => (
        <>
          {text.length ? <Image src={text} alt="头像" style={{ cursor: 'pointer' }} width={50} height={50} /> : <NoData data={text} />}
        </>
      )
    },
    {
      align: 'center',
      title: '操作',
      render: (text, record) => (
        <>
          <a onClick={() => handle(record)}>编辑</a>
        </>
      ),
    }
  ];

  const tools = new Tools();

  const [editData, setEditData] = useSetState({ visible: false, detailData: {} });

  const { Search } = Input;

  const [username, setUsername] = useState(undefined);

  const selectNumOfDoneTodos = createSelector( // 只计算，给的数据，其他的数据不会重新计算
    [(state) => state.user, (state) => state.other],
    (user, other) => [user.getUserList, other.loading]
  );

  const dispatch = useDispatch(); // 这里取代connect里面的dispatch

  const [getUserList, loading] = useSelector(selectNumOfDoneTodos); // 获取redux里面的数据，这里取代了connect函数

  const initFetch = useCallback((username) => dispatch({ type: SAGA_GET_USER_LIST, payload: { username } }), [dispatch]);

  useEffect(() => {
    initFetch(username)
  }, [initFetch, username])

  const downFile = async () => {
    let res = await xlsxFileDown();
    if (res.code === requestCode.successCode) {
      let delBuffer = Buffer.from(res.data, "binary");
      const blob = new Blob([delBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      let url = window.URL.createObjectURL(blob);
      tools.createALabel(url);
    }
  }

  const datas = {
    btnGrounp: [{
      component: <Search
        enterButton
        placeholder="请输入用户名"
        onSearch={(value) => setUsername(value ? value : undefined)}
        style={{ width: 200 }}
        allowClear
      />
    }],
    iconGrounp: [
      {
        component: (<Tooltip title='下载' placement="bottom">
          <ArrowDownOutlined className='svg-fontSize' onClick={downFile} />
        </Tooltip>)
      }
    ],
    tableProps: { columns, dataSource: getUserList },
    receive: () => initFetch(username),
    loading
  }

  const handle = (detailData) => {
    setEditData({
      visible: true, detailData: Object.assign({}, detailData, {
        iconUrl: detailData.iconUrl.length ? detailData.iconUrl.split(',').map((item) => ({ uid: Math.random() * 100, url: item, response: { code: requestCode.successCode, data: { url: item } } })) : []
      })
    });
  }

  return (
    <>
      <LayoutTableComponent {...datas}>
        <UserSearch setUsername={setUsername} />
      </LayoutTableComponent>
      <EditComponent {...editData} onCancel={() => setEditData({ visible: false })} sucessCallback={() => initFetch(username)} />
    </>
  )
})

User = memo(function User({ dispatch, getUserList, loading }) {

  const columns = [
    {
      key: 'index',
      align: 'center',
      title: '序号',
      render: (text, record, index) => `${index + 1}`,
    },
    {
      align: 'center',
      title: 'id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      align: 'center',
      title: 'email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      align: 'center',
      title: '名称',
      dataIndex: 'username',
      key: 'username',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '介绍',
      dataIndex: 'introduct',
      key: 'introduct',
      render: (text) => <NoData data={text} />
    },
    {
      align: 'center',
      title: '头像',
      dataIndex: 'iconUrl',
      key: 'iconUrl',
      render: (text) => (
        <>
          {text.length ? <Image src={text} alt="头像" style={{ cursor: 'pointer' }} width={50} height={50} /> : <NoData data={text} />}
        </>
      )
    },
    {
      align: 'center',
      title: '操作',
      render: (text, record) => (
        <>
          <a onClick={() => handle(record)}>编辑</a>
        </>
      ),
    }
  ];

  const [editData, setEditData] = useSetState({ visible: false, detailData: {} });

  const { Search } = Input;

  const [username, setUsername] = useState(undefined);

  const initFetch = useCallback((username) => dispatch({ type: SAGA_GET_USER_LIST, payload: { username } }), [dispatch]);

  useEffect(() => {
    initFetch(username)
  }, [initFetch, username]);

  const datas = {
    btnGrounp: [{
      component: <Search
        enterButton
        placeholder="请输入用户名"
        onSearch={(value) => setUsername(value ? value : undefined)}
        style={{ width: 200 }}
        allowClear
      />
    }],
    tableProps: { columns, dataSource: getUserList },
    pagaTionProps: {
      total: getUserList.length,
      onChanges: (page, size) => { console.log('page,size', page, size) }
    },
    receive: () => initFetch(username),
    loading
  }

  const handle = (detailData) => {
    setEditData({
      visible: true, detailData: Object.assign({}, detailData, {
        iconUrl: detailData.iconUrl.length ? detailData.iconUrl.split(',').map((item) => ({ uid: Math.random() * 100, url: item, response: { code: requestCode.successCode, data: { url: item } } })) : []
      })
    });
  }

  return (
    <>
      <LayoutTableComponent {...datas}>
        <>
          <p style={{ color: '#F56C6C' }}>还有一些配置项，具体的请看源码和案例。</p>
          <UserSearch setUsername={setUsername} />
        </>
      </LayoutTableComponent>
      <EditComponent {...editData} onCancel={() => setEditData({ visible: false })} sucessCallback={() => initFetch(username)} />
    </>
  )
})