FEV2 / fw-cms

  import React, {useEffect, useMemo, useState} from 'react';

  import {Modal, Table, Input, message, Button, Select, Switch} from 'antd';

  import Column from 'antd/lib/table/Column';
  import { debounce } from 'lodash';

  import {getPartTypeApi} from '@/pages/pms/part/Repertory/api';
  import useInitail from '@/hooks/useInitail';

  import {planPoolTypeData} from '@/pages/pms/entity';

  
  const Search = Input.Search;
  interface Props {
    onCancel: () => any,
    visible: boolean,
    parts: any[]
    onOk: (parts: any[]) => any

    setParams: Function

    _supplierId: number | undefined

  }

  const {Option} = Select;

  export default function Index({ onCancel, visible, parts = [], onOk, setParams, _supplierId }: Props) {

    const [selectedParts, setSelectedParts] = useState<any[]>([]);
    const [dfParam, setDfParam] = useState<any>({keywords: ''});

    const [partList, setPartList] = useState(parts);

    const [info, setInfo] = useState<{open: boolean, partName: string, poolId?: number}>({open: false, partName: '', poolId: undefined});
    const [partArr, setPartArr] = useState<any[]>([]);

    const shopNames = useMemo(() => {
      return Array.from(new Set(parts.map(it => it.shopName || '').filter(it => !!it)));
    }, [parts]);

    const storageNames = useMemo(() => {
      return Array.from(new Set(parts.map(it => it.storageName || '').filter(it => !!it)));
    }, [parts]);

    const supplierNames = useMemo(() => {
      return Array.from(new Set(parts.map(it => it.supplierName || '').filter(it => !!it)));
    }, [parts]);
  

    const { data: partTypeData } = useInitail(getPartTypeApi, [], {});
    

    useEffect(() => {
      if (!visible) {
        setSelectedParts([]);

        setPartArr([]);

        setPartList(parts);
      }
    }, [visible, parts]);
  
    function handSave() {
      if (selectedParts.length == 0) {
        message.error("请选择配件");
        return;
      }

      if (partArr.some(it => !!it.supplierId)) {
        for (const item of partArr) {
          if (!!item.supplierId && item.supplierId != _supplierId) {
            setInfo({ open: true, partName: item.partName, poolId: item.poolId });
            return;
          }
        }
      }

      onOk && onOk(selectedParts);
      onCancel && onCancel();
    }
  
    const handleChange = debounce((value) => {

      setDfParam({...dfParam, keywords: value || ''});
    }, 500);
  
    useEffect(() => {

      setPartList(parts.filter(it => {

        return (it.partCode || '').includes(dfParam.keywords)
          || (it.partName || '').includes(dfParam.keywords)
          || (it.supplierName || '').includes(dfParam.keywords);

      })
      .filter(it => {

        return (dfParam.partTypeName && it.partTypeName.includes(dfParam.partTypeName)) || !dfParam.partTypeName;

      })
      .filter(it => {
        return (dfParam.storageName && it.storageName == dfParam.storageName) || !dfParam.storageName;
      })
      .filter(it => {
        return (dfParam.shopName && it.shopName == dfParam.shopName) || !dfParam.shopName;
      })

      .filter(it => {
        return (dfParam.supplierName && it.supplierName == dfParam.supplierName) || !dfParam.supplierName;
      })

      .filter(i => (dfParam.typeName && i.typeName == planPoolTypeData.find(item => item.value == dfParam.typeName)?.label) || !dfParam.typeName));

    }, [dfParam]);

    return (
      <Modal

        width={1300}

        visible={visible}

        title="配件采购明细"

        onCancel={onCancel}

        maskClosable={false}

        footer={[
          <Button key="cancel" onClick={onCancel}>取消</Button>,
          <Button
            key="submit"
            disabled={selectedParts.length == 0}
            onClick={handSave}
            type="primary"
            htmlType="submit"
          >
            确认
          </Button>
        ]}
      >

        <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'center', marginBottom: 10}}>

          <Search

            allowClear

            enterButton

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

            onSearch={handleChange}

            style={{ maxWidth: 200, marginRight: 10 }}

          />
          <Select
            allowClear

            style={{ width: 150, marginRight: 10}}

            onChange={(v) => {
              setDfParam({...dfParam, partTypeName: partTypeData.find(i => i.value == v)?.label});

            }}
            placeholder="请选择配件类型"

            showSearch
            optionFilterProp="children"

          >
            {partTypeData.map((item: any) => (
              <Option value={item.value} key={item.value}>{item.label}</Option>
            ))}
          </Select>
          <Select
            allowClear

            style={{ width: 150, marginRight: 10}}

            onChange={(storageName) => {
              setDfParam({...dfParam, storageName});
            }}
            placeholder="请选择库房"

            showSearch
            optionFilterProp="children"

          >
            {storageNames.map((item: any) => (
              <Option value={item} key={item}>{item}</Option>
            ))}
          </Select>
          <Select
            allowClear

            style={{ width: 150, marginRight: 10}}

            onChange={(shopName) => {
              setDfParam({...dfParam, shopName});
            }}
            placeholder="请选择门店"

            showSearch
            optionFilterProp="children"

          >
            {shopNames.map((item: any) => (
              <Option value={item} key={item}>{item}</Option>
            ))}
          </Select>

          <Select
            allowClear

            style={{ width: 150}}

            onChange={(typeName) => {
              setDfParam({...dfParam, typeName});
            }}
            placeholder="配件来源类型"

            showSearch
            optionFilterProp="children"

          >
            {planPoolTypeData.map((item: any) => (
              <Option value={item.value} key={item.value}>{item.label}</Option>
            ))}
          </Select>

          <Select
            allowClear
            style={{ width: 150, marginLeft: 10}}
            onChange={(supplierName) => {
              setDfParam({...dfParam, supplierName});
            }}
            placeholder="上次采购供应商"
            showSearch
            optionFilterProp="children"
          >
            {supplierNames.map((item: any) => (
              <Option value={item} key={item}>{item}</Option>
            ))}
          </Select>
          <Switch
            checkedChildren="油料" 
            unCheckedChildren="非油料" 
            onChange={checked => setParams({isOil: checked}, true)} 
            style={{marginLeft: 10}}
          />

        </div>

        <Table
          dataSource={partList}

          scroll={{y: 400}}

          style={{width: '100%'}}
          pagination={false}
          rowSelection={{
            type: "checkbox",

            selectedRowKeys: selectedParts.map(part => `${part.poolId}`),
            onSelect: (row: any, _selected: boolean) => {
              const index = selectedParts.findIndex(_row => _row.poolId == row.poolId);

              let newData = [...selectedParts];
              if (_selected) {
                newData.unshift(row);
              } else if (index > -1) {
                newData.splice(index, 1);
              }

              setPartArr(newData);

              setSelectedParts([...newData]);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {

              const changedKeys = changeRows.map(row => `${row.poolId}`);

              let newData = [...selectedParts];
              // 全选
              if (selected) {

                newData = selectedParts.concat(changeRows.filter(row => !selectedParts.some(item => item.poolId == row.poolId)),);

              } else {

                newData = selectedParts.filter(row => !changedKeys.includes(`${row.poolId}`));

              }

              setPartArr(newData);

              setSelectedParts(newData);
            },
          }}

          rowKey={(record) => `${record.poolId}`}

        >
          <Column title="配件编码" dataIndex="partCode" />
          <Column title="配件名称" dataIndex="partName" />

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

          <Column title="配件数量" dataIndex="count" />

          <Column title="配件类型" dataIndex="partTypeName" />

          <Column title="配件来源类型" dataIndex="typeName" />

          <Column title="上次采购供应商" dataIndex="supplierName" />
        </Table>

        <Modal
          title="提示"
          open={info.open}
          maskClosable={false}

          closable={false}

          cancelText="重新选择"
          okText="继续"
          onCancel={() => {
            setPartArr(partArr.filter((i => i.poolId != info.poolId)));
            setSelectedParts(selectedParts.filter((i => i.poolId != info.poolId)));
            setInfo({open: false, partName: '', poolId: undefined});
          }}
          onOk={() => {
            setPartArr(partArr.filter((i => i.poolId != info.poolId)));
            setInfo({ open: false, partName: '', poolId: undefined });
          }}
        >

          <p style={{ color: 'red' }}><span style={{ color: '#333333', fontWeight: '500', marginRight: 3}}>【{info.partName}】</span>本次采购供应商和上次采购供应商不一致，是否继续？</p>

        </Modal>

      </Modal>
    );
  }