index.tsx 2.74 KB
import useInitial from "@/hooks/useInitail";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { Button, Card, Row, Table, Popconfirm, message } from "antd";
import React, { useState } from "react";
import * as API from "./api";
import Modal from "./components/Modal";
import FeeModal from './components/FeeModal';

const Column = Table.Column;

const CateringSubsidies = () => {
  const { data, loading, setLoading } = useInitial(API.fetchList, [], "");
  const [visiable, setVisiable] = useState(false);
  const [current, setCurrent] = useState<any>();
  const [feeVisible, setFeeVisible] = useState(false);

  const onEdit = (row: any) => {
    setCurrent(row);
    setVisiable(true);
  };

  const onAdd = () => {
    setVisiable(true);
    setCurrent(undefined);
  };

   const onDelete = (row: any) => {
    API.deleteApi(row.id)
      .then((res) => {
        message.success("删除成功");
        setLoading(true);
      })
      .catch((err) => {
        message.error("删除失败", err);
      });
  };

  return (
    <PageHeaderWrapper title="外勤报销">
      <Card>
        <Row style={{ justifyContent: "flex-end", marginBottom: 20 }}>
          <Button type="primary" onClick={() => onAdd()}>
            新增
          </Button>
        </Row>
        <Table
          dataSource={data}
          rowKey="id"
          loading={loading}
          pagination={false}
        >
          <Column title="外勤类型" dataIndex="outsideTypeName" align="center" />
          <Column title="是否允许报销" align="center" render={r => (r.isAllowReimburse ? '允许' : '不允许')} />
          <Column 
            title="餐费补贴" 
            align="center" 
            render={r => (r.mealFee ? <a onClick={() => { setFeeVisible(true); setCurrent(r); }}>查看</a> : '无')} 
          />    
          <Column
            title="操作"
            align="center"
            render={(text, row: any) => (
              <div>
                <Button type="link" onClick={() => onEdit(row)}>
                  编辑
                </Button>
                <Popconfirm
                  title="是否删除"
                  onConfirm={() => onDelete(row)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button type="link" danger>
                    删除
                  </Button>
                </Popconfirm>
              </div>
            )}
          />
        </Table>
      </Card>
      <Modal
        visiable={visiable}
        setVisiable={setVisiable}
        setLoading={setLoading}
        current={current}
      />
      <FeeModal visiable={feeVisible} setVisiable={setFeeVisible} current={current} />
    </PageHeaderWrapper>
  );
};

export default CateringSubsidies;