FEV2 / fw-cms

  import React, {useState} from "react";

  import { Card, ConfigProvider, Select, Table, Button, Divider, Input } from 'antd';

  import { PageHeaderWrapper } from '@ant-design/pro-layout';
  import usePagination from "@/hooks/usePagination";
  import { getList, ListVO } from './api';
  import st from './style.less';
  import zhCN from "antd/lib/locale-provider/zh_CN";
  import moment from 'moment';
  import useInitial from '@/hooks/useInitail';
  import * as API from '@/common/api';
  import { history } from 'umi';

  import DetailModal from "@/pages/pms/partPlan/PlanManage/components/DetailModal";

  
  // 计划状态 1:待审核2:已通过3待付款4已付款9:已拒绝
  const statusName: {[key: number]: string} = {

    0: '草稿',

    1: '待审核',
    2: '已通过',
    3: '待付款',
    4: '已付款',
    9: '已拒绝',

  };

  const { Column } = Table;
  export default function Index() {
    const { list, paginationConfig, loading, setParams, innerParams } = usePagination<ListVO>(getList, {});
    const { data: brands } = useInitial(API.getBrandFilterApi, [], {});

    const [visibleDetail, setVisibleDetail] = useState(false);
    const [item, setItem] = useState<ListVO>({});
  

    return (
      <PageHeaderWrapper title="配件计划管理">
        <ConfigProvider locale={zhCN}>
          <Card className={st.page}>
            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20}}>

              <div style={{display: 'flex', alignItems: 'center'}}>
                <Input.Search
                  allowClear

                  enterButton

                  placeholder="输入配件名称/编码搜索"

                  onSearch={v => setParams({keywords: v}, true)}
                  style={{ maxWidth: 240, marginRight: 20 }}
                />
                <Input.Search
                  allowClear

                  enterButton

                  placeholder="输入计划人员搜索"

                  onSearch={v => setParams({userName: v}, true)}
                  style={{ maxWidth: 200, marginRight: 20 }}
                />
                <Select
                  placeholder="请选择品牌"
                  showSearch
                  allowClear
                  style={{ width: 200, marginRight: 20 }}
                  value={innerParams.brandId}
                  onChange={brandId => setParams({ ...innerParams, brandId, current: 1 }, true)}
                  optionFilterProp="children"
                >
                  {brands.map((item: any) => (
                    <Select.Option value={item.id} key={item.id}>
                      {item.name}
                    </Select.Option>
                  ))}
                </Select>
                <Select
                  placeholder="状态筛选"
                  showSearch
                  allowClear
                  style={{ width: 200, marginRight: 20 }}
                  onChange={v => setParams({status: v }, true)}
                  optionFilterProp="children"
                >

                  <Select.Option value={0} key={0}>草稿</Select.Option>

                  <Select.Option value={1} key={1}>待审核</Select.Option>
                  <Select.Option value={2} key={2}>已通过</Select.Option>
                  <Select.Option value={9} key={9}>已拒绝</Select.Option>
                </Select>
              </div>

              <Button type="primary" onClick={() => history.push('/pms/partPlan/planManage/apply')}>新增</Button>
            </div>
            <Table
              size="small"
              loading={loading}
              pagination={paginationConfig}
              dataSource={list}
              rowKey={(item: ListVO) => `${item.planId}`}
              onChange={(_pagination) => setParams({ ..._pagination }, true)}
            >
              <Column title="计划单号" dataIndex="planNo" />
              <Column title="品牌" dataIndex="brandName" />

              <Column title="计划日期" dataIndex="planDate" render={(t: number) => t && moment(t).format('YYYY-MM-DD HH:mm')} />
              <Column title="计划人员" dataIndex="userName" />

              <Column title="计划总金额（元）" dataIndex="totalAmount" />

              <Column title="状态" dataIndex="status" render={(t: number) => statusName[t]} />
              <Column
                title="操作"
                fixed="right"
                render={(text, _item: ListVO) => (

                  <>

                    {[0, 9].includes(_item.status || 0) ? (
                      <a onClick={() => history.push(`/pms/partPlan/planManage/apply?planId=${_item.planId}`)}>
                        编辑
                      </a>
                  )
                    : (
                      <a onClick={() => history.push(`/pms/partPlan/planManage/detail/${_item.planId}`)}>
                        查看
                      </a>
                  )}

                    <Divider type="vertical" />
                    <a onClick={() => {
                        setItem(_item);
                        setVisibleDetail(true);
                      }}
                    >
                      进度
                    </a>
                  </>

                )}
              />
            </Table>

            <DetailModal
              visible={visibleDetail}
              item={item}
              onCancel={() => setVisibleDetail(false)}
            />

          </Card>
        </ConfigProvider>
      </PageHeaderWrapper>
    );
  }