FEV2 / fw-cms

  import React, { useState } from "react";

  import { Card, ConfigProvider, DatePicker, Divider, Table, Dropdown, Menu } from 'antd';
  import { DownOutlined } from '@ant-design/icons';

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

  import DetailModal from './components/ConfirmDetailModal';

  import { getList, Item } 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 UploadExcel from './components/UploadExcel';

  import PmsSelect from '@/pages/pms/comonents/PmsSelect';
  import * as api from "@/pages/pms/storage/partShop/api";

  
  const { Column } = Table;
  export default function PartPriceCoefficient() {
    const { list, paginationConfig, loading, setParams, innerParams } = usePagination<Item>(getList, {});
    const { data: brands } = useInitial(API.getBrandFilterApi, [], {});
    const [importVisible, setImportVisible] = useState(false);

    const [visibleConfirm, setVisibleConfirm] = useState(false);

    const [confirm, setConfirm] = useState(false);

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

    const { data: shops } = useInitial<PmsStoragePartShop.Option[], {}>(api.getShopApi, [], {});

    const menu = (
      <Menu
        items={
        [
          {
            label: <a href="/api/pms/erp/part/template/shipping">通用模板</a>,
            key: '0',
          },
          {
            label: <a href="/api/pms/erp/part/template/shipping/ca">长安模板</a>,
            key: '1',
          },
        ]
      }
      />
  );
  

    return (
      <PageHeaderWrapper title="发运单">
        <ConfigProvider locale={zhCN}>
          <Card className={st.page}>
            <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>

              <div style={{ display: 'flex', flexDirection: 'row'}}>

                <DatePicker

                  value={innerParams.month == undefined ? moment(new Date().toLocaleDateString(), 'YYYY-MM') : moment(innerParams.month)}

                  picker="month"

                  allowClear={false}

                  style={{ marginRight: 20 }}
                  onChange={(v) => setParams({...innerParams, month: v && v.valueOf(), current: 1}, true)}
                />

                <PmsSelect

                  placeholder="请选择品牌"

                  showSearch

                  style={{ width: 200, marginRight: 20 }}
                  value={innerParams.brandId}
                  onChange={brandId => setParams({ ...innerParams, brandId, current: 1 }, true)}

                  options={brands.map((i: any) => ({value: i.id, label: i.name}))}
                />
                <PmsSelect
                  style={{ width: 200}}
                  allowClear
                  value={innerParams.shopId}
                  onChange={value => {
                    setParams({ ...innerParams, current: 1, shopId: value}, true);
                  }}
                  placeholder="请选择服务站"
                  options={shops.map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
                />

              </div>

              <div style={{ display: 'flex', flexDirection: 'row'}}>

                <Dropdown overlay={menu} trigger={['click']} placement="bottomLeft" arrow overlayStyle={{width: 120}}>
                  <a style={{display: 'flex', alignItems: 'center'}}>导入模板<DownOutlined style={{fontSize: 14, marginLeft: 3}} /></a>
                </Dropdown>
                <div style={{marginLeft: 20}}><a onClick={() => { setImportVisible(true); }}>导入数据</a></div>

              </div>

            </div>
            <Table
              size="small"
              loading={loading}
              pagination={paginationConfig}
              dataSource={list}

              rowKey={(item: Item) => `${item.shippingNo}`}

              onChange={(_pagination) => setParams({ ..._pagination }, true)}
            >

              <Column title="发运单号" dataIndex="shippingNo" />

              <Column title="品牌" dataIndex="brandName" />
              <Column title="供应商" dataIndex="supplierName" />

              <Column title="库房" dataIndex="storageName" />
              <Column title="门店" dataIndex="shopName" />

              <Column title="结算商家" dataIndex="settleDealerName" />

              <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number) => t.toFixed(2) || 0} />
              <Column title="导入时间" dataIndex="shippingDate" render={(t: number) => t && moment(t).format('YYYY-MM-DD HH:mm')} />
              <Column title="导入人员" dataIndex="importUserName" />
              <Column title="入库人员" dataIndex="inStorageUserName" render={t => t || '--'} />
              <Column title="状态" dataIndex="status" render={(t: number) => ['待确认', '待入库', '已完成'][t]} />

              <Column
                title="操作"

                className={st.edit}

                render={(text, _item: Item) => (
                  <>

                    <a onClick={() => { setVisibleConfirm(true); setConfirm(false); setItem(_item); }}>查看</a>
                    {_item.status == 0 && (
                      <>
                        <Divider type="vertical" />
                        <a onClick={() => { setVisibleConfirm(true); setConfirm(true); setItem(_item); }}>导入确认</a>
                      </>
                    )}

                  </>
                )}
              />
            </Table>
          </Card>
          <DetailModal

            visible={visibleConfirm}
            item={item}

            confirm={confirm}

            onCancel={() => setVisibleConfirm(false)}

            fetchList={() => setParams({ current: 1 }, true)}

          />

          <UploadExcel
            importVisible={importVisible}
            setImportVisible={setImportVisible}

            brands={brands}

            getList={() => setParams({ current: 1 }, true)}
          />
        </ConfigProvider>
      </PageHeaderWrapper>
    );
  }