学习笔记jira项目34-完善项目列表页面样式

最新推荐文章于 2023-01-26 07:10:01 发布

前端歌谣

最新推荐文章于 2023-01-26 07:10:01 发布

阅读量146

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/qq_41632427/article/details/126693141

版权

前端-jira管理系统专栏收录该内容

101 篇文章 3 订阅

订阅专栏

import React from "react";
import { useTasksSearchParams } from "screens/kanban/util";
import { useSetUrlSearchParam } from "utils/url";
import { Row } from "components/lib";
import { Button, Input } from "antd";
import { UserSelect } from "components/user-select";
import { TaskTypeSelect } from "components/task-type-select";

export const SearchPanel = () => {
  const searchParams = useTasksSearchParams();
  const setSearchParams = useSetUrlSearchParam();
  const reset = () => {
    setSearchParams({
      typeId: undefined,
      processorId: undefined,
      tagId: undefined,
      name: undefined,
    });
  };

  return (
    <Row marginBottom={4} gap={true}>
      <Input
        style={{ width: "20rem" }}
        placeholder={"任务名"}
        value={searchParams.name}
        onChange={(evt) => setSearchParams({ name: evt.target.value })}
      />
      <UserSelect
        defaultOptionName={"经办人"}
        value={searchParams.processorId}
        onChange={(value) => setSearchParams({ processorId: value })}
      />
      <TaskTypeSelect
        defaultOptionName={"类型"}
        value={searchParams.typeId}
        onChange={(value) => setSearchParams({ typeId: value })}
      />
      <Button onClick={reset}>清除筛选器</Button>
    </Row>
  );
};