FEV2 / fw-cms

  import React, { useState} from "react";

  import { PageHeaderWrapper } from "@ant-design/pro-layout";

  import { Card, Table, Popconfirm, message, Button, Input, Popover, Select } from "antd";

  import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";

  import usePagination from "@/hooks/usePagination";

  import { ListVO, getTimeListApi, taskDeleteApi, ItemListVO } from "./api";

  import {TimeUnits } from "./entity";

  import { debounce } from "lodash";
  import CreateModal from "./components/CreateModal";

  
  import { systemListApi } from "@/pages/admin/Privilege/api";

  
  const Column = Table.Column;
  const Search = Input.Search;
  
  export default function TaskConfig() {

    const { list, loading, paginationConfig, setParams, setLoading } = usePagination<ListVO>(getTimeListApi, {}, {});

    const [item, setItem] =useState({});

    const { list: syslist } = usePagination(systemListApi, { current: 1, pageSize: 100 });

    const [modalData, setModalData] = useState<{ visible: boolean; row: ItemListVO }>({ visible: false, row: {} });

    function triggerModal(row: ItemListVO = {}) {
      setModalData({ visible: !modalData.visible, row });
    }
    const _onChange = debounce((val: string) => {
      setParams({ keywords: val.trim(), current: 1 }, true);
    }, 500);
    //根据系统名称搜索
    const _onChangeSys = debounce((e: any) => {
      setParams({ sysId: e, current: 1 }, true);
    }, 500);

    // 删除待办
    const handleDelete = (record: any) => {
      taskDeleteApi(record.id)
        .then((res) => {
          message.success("删除成功！");
          setLoading(true);
        })
        .catch((e) => {

          message.error(e.message);
        });
    };
  

    return (
      <PageHeaderWrapper title="待办时效">
        <Card>
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
              marginBottom: 20,
            }}
          >
            <div style={{ display: "flex" }}>
              <Search allowClear placeholder="搜索待办名" onChange={(e) => _onChange(e.target.value)} style={{ maxWidth: 260, marginRight: 15 }} />

  
              <Select allowClear placeholder="搜索系统名称" style={{ width: 260, marginRight: 5 }} onChange={(e: any) => _onChangeSys(e)}>
                {syslist.map((item) => (
                  <Select.Option value={item.id!} key={item.id}>
                    {item.sysName}
                  </Select.Option>
                ))}
              </Select>

            </div>

            <Button type="primary" icon={<PlusOutlined />} onClick={() => triggerModal()}>
              新增
            </Button>
          </div>

          <Table loading={loading} dataSource={list} pagination={paginationConfig} rowKey={(record: ListVO) => String(record.id || record.configId)}>

            <Column title="待办名称" dataIndex="configName" align="center" />
            <Column
              title="待办时效"
              dataIndex="periodValue"
              align="center"
              render={(text, record: ListVO) => {
                const tempTimeData = record.periodUnit ? `${text}${TimeUnits[record.periodUnit]}` : "--";
                return text ? tempTimeData : "--";
              }}
            />
            <Column

              title={
                <Popover
                  placement="topLeft"
                  content={
                    <>
                      <p> 待办截止时间=待办时效时间+待办延时时间</p>
                      <p>如未配置待办延时时间，则表示待办无结束时间</p>
                    </>
                  }
                >
                  <span>

                    待办延时时间  
                    <ExclamationCircleFilled style={{ color: "#40a9ff" }} />
                  </span>
                </Popover>
              }

              dataIndex="extendValue"
              align="center"
              render={(text, record: ListVO) => {
                const endTimeData = record.extendUnit ? `${text}${TimeUnits[record.extendUnit]}` : "--";

                return text !== null ? endTimeData : "--";

              }}
            />

            <Column
              title="操作"
              align="center"
              render={(val, row: ListVO) => (
                <>

                  <Button type="link" onClick={() => { triggerModal(row); setItem(row); }}>

                    编辑
                  </Button>
                  <Popconfirm placement="top" title="确认删除？" onConfirm={() => handleDelete(row)}>
                    <Button type="link">删除</Button>
                  </Popconfirm>
                </>
              )}
            />
          </Table>

          <CreateModal visible={modalData.visible} onCancel={() => { triggerModal(); setItem({}); }} onRefreshing={() => setLoading(true)} item={item} />

        </Card>
      </PageHeaderWrapper>
    );
  }