FEV2 / fw-cms

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

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

  import ChoosePartModal from './ChoosePartModal';
  import usePagination from '@/hooks/usePagination';

  import { getStoragePage } from '@/pages/pms/storage/StorageManage/api';
  import { getPageListApi, Item as item } from "@/pages/pms/partPlan/PlanSupplier/api";

  import {getPurchasePool, Item as poolitem} from '@/pages/pms/purchase/PurchasePool/api';

  import PartModal from '@/pages/pms/purchase/PurchasePool/comonents/PartModal';

  import {purchaseApply, getrelationlist, EditItem} from '../api';

  import {getList, ListVO, Params} from '@/pages/pms/partPlan/PlanPool/api';

  import _ from 'lodash';

  import useInitial from '@/hooks/useInitail';

  import PmsSelect from '@/pages/pms/comonents/PmsSelect';
  import { getPartTypeApi } from '@/pages/pms/part/Repertory/api';
  import {planPoolTypeData} from '@/pages/pms/entity';

  
  const Option = Select.Option;
  const {Item} = Form;
  const {Column} = Table;
  const {TabPane} = Tabs;
  interface Props {
    onCancel: () => any,
    visible: boolean,

    itemData?:EditItem,

    setItemData?:Function

  }
  interface Relation{
    value: number,
    name: string

  }
  

  export default function PartStorageModal({ onCancel, visible, itemData, setItemData }: Props) {

    const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, { pageSize: 1000 });

    const { list: suppliers } = usePagination<item>(getPageListApi, { supplierType: 40, pageSize: 500 });
    const [delay, setDelay] = useState(true);
    const {data: planeData, setParams, setData: setPlaneData} = useInitial<ListVO[], Params>(getList, [], {}, delay);
    const {data: casData, setParams: casSetParams, setData: casSetData} = useInitial<poolitem[], Params>(getPurchasePool, [], {}, delay);
    const [planePart, setPlanePart] = useState<ListVO[]>([]);

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

    const [choosePartVisable, setChoosePartVisable] = useState(false);
    const [selectedParts, setSelectedParts] = useState<any[]>([]);
    const [form] = Form.useForm();
    const [btnloading, setBtnloading] = useState(false);

    const [storageid, setStorageid] = useState<number>();
    const [partParams, setPartParams] = useState<{stId?:number, spId?: number}>();
    const [casPart, setCasPart] = useState<poolitem[]>();

    const [listRelation, setListRelation] = useState<Relation[]>();

    const [partvisible, setPartvisible] = useState(false);
    const [item, setItem] = useState();

    const [settlementMethod, setSettlementMethod] = useState<number>();

    
    // 编辑时数据回显

    useEffect(() => {

      if (itemData?.storageId) {
        form.setFieldsValue({
          storageId: itemData.storageId, 
          supplierId: itemData.supplierId,
          settlementMethod: itemData.payType,

          proportion: itemData.proportion,
          isOutSide: itemData.isOutSide ? "1" : "0"

        });

        getrelationlist({tradeCompanyId: itemData.supplierId, compCategory: 1, dealerId: storages.find(i => i.id == itemData.storageId)?.dealerId}).then(res => {

          if (res.success) {
            setListRelation(res.data && res.data[0].settleMethodList);

            form.setFieldsValue({accountCheckPeriod: res.data && res.data[0].accountCheckPeriod});

            }

        }).catch(e => message.error(e.message));

        setPartParams({stId: itemData.storageId, spId: itemData.supplierId});

        setStorageid(itemData.storageId);

        setSelectedParts(itemData.parts || []);
        setCasPart(itemData.poolParts);

        setPlanePart(itemData.planParts || []);

        return;
      }
      if (!visible) {
        form.resetFields();

        setStorageid(undefined);
        setPlaneData([]);
        casSetData([]);

        setSelectedParts([]);

        setCasPart([]);

        setPlanePart([]);

        setListRelation([]);

      }

    }, [visible]);

    //查询计划池配件和工单缺件配件
    useEffect(() => {
      if (storageid) {
        setDelay(false);

        setParams({}, true);

        casSetParams({storageId: storageid}, true);

      }

    }, [storageid]);

    // 提交申请

    function handSave() {

      form.validateFields().then(fields => {
        const supplier = suppliers.find(it => it.supplierId == fields.supplierId) || {};
        const storage = storages.find(it => it.id == fields.storageId) || {};

        const params = {
          storageId: storage.id, 
          storageName: storage.storageName,
          supplierId: supplier.supplierId,
          supplierName: supplier.supplierName,

          proportion: fields.proportion,
          payType: fields.settlementMethod,

          accountCheckPeriod: settlementMethod == 2 ? fields.accountCheckPeriod : undefined,

          parts: [...selectedParts.map(i => ({partId: i.partId, partCnt: i.partCnt, price: i.price, type: 1})),
            ...planePart.map(i => ({poolId: i.poolId, partId: i.partId, partCnt: i.cnt, price: i.price, type: 2})),
            ...(casPart?.map(i => (i.details?.map(it => ({partId: it.partId, partCnt: it.partCnt, poolId: it.poolId, expectInTime: it.expectInTime, price: it.price, type: 3})))).flat() || [])

          ],
          isOutSide: !!fields.isOutSide

        };

        setBtnloading(true);

        purchaseApply(params).then(res => {
          message.success("提交成功");
          setBtnloading(false);
          setItemData && setItemData();
          onCancel && onCancel();

          setPartParams({});

        }).catch(e => {
          message.error(e.message);
          setBtnloading(false);
        });

      });
    }

    return (
      <Modal
        width={1000}
        visible={visible}

        onCancel={() => { onCancel(); setPartParams({}); }}

        maskClosable={false}

        title="新增配件外采申请"

        footer={[

          <Button key="cancel" onClick={() => { onCancel(); setPartParams({}); }} loading={btnloading}>取消</Button>,

          <Button
            key="submit"
            onClick={handSave}
            type="primary"
            htmlType="submit"
            loading={btnloading}

            disabled={!selectedParts.length && !casPart?.length && !planePart.length}

          >
            提交申请
          </Button>
        ]}
      >
        <Form
          form={form}

          labelCol={{span: 4}}

          wrapperCol={{span: 19}}
        >

          <Item label="库房" name="storageId" required rules={[{ required: true, message: '请选择库房' }]}>

            <Select
              style={{ width: 250 }}
              placeholder="请选择库房"

              value={storageid}

              onChange={v => { 
                setStorageid(v);
                form.setFieldsValue({supplierId: '', settlementMethod: undefined, proportion: undefined});
                setListRelation([]);
                setSettlementMethod(undefined);
              }}

              showSearch
              optionFilterProp="children"

            >
              {storages.map((item) => (
                <Option value={item.id} key={item.id}>{item.storageName}</Option>
            ))}
            </Select>
          </Item>
          <Item label="供应商" name="supplierId" required rules={[{ required: true, message: '请选择供应商' }]}>
            <Select
              style={{ width: 250 }}
              placeholder="请选择供应商"

              showSearch
              optionFilterProp="children"

              options={suppliers.filter((item, index, self) => {
                return self.findIndex(el => el.supplierId == item.supplierId) === index;
              }).map((item) => ({ value: item.supplierId, label: item.supplierName }))} 

              onChange={v => {
                setPartParams({stId: storageid, spId: v});

                setListRelation([]);
                form.setFieldsValue({settlementMethod: undefined, proportion: undefined});
                setSettlementMethod(undefined);

                getrelationlist({tradeCompanyId: v, compCategory: 1, dealerId: storages.find(i => i.id == storageid)?.dealerId}).then(res => {

                  if (res.data?.length) {
                    form.setFieldsValue({ proportion: res.data[0].billAmountRatio, accountCheckPeriod: res.data && res.data[0].accountCheckPeriod});
                    setListRelation(res.data && res.data[0].settleMethodList);

                  }

                }).catch(e => message.error(e.message));

              }}

            />

          </Item>
          <Item label="结算方式" name="settlementMethod" required rules={[{ required: true, message: '请选择结算方式' }]}>
            <Select
              style={{ width: 250 }}
              placeholder="请选择结算方式"

              value={settlementMethod}

              showSearch
              optionFilterProp="children"

              onChange={setSettlementMethod}

              onFocus={() => { 
                if (!form.getFieldValue("supplierId")) {

                  message.error("请先选择供应商");

                  return;
                }
                if (!listRelation?.length) { 

                  message.error(`请财务先配置${suppliers.find(i => i.supplierId == form.getFieldValue('supplierId'))?.supplierName}的结算方式`); 

                }
              }}

            >

              {listRelation?.map(i => <Option value={i.value} key={i.value}>{i.name}</Option>)}

            </Select>
          </Item>

          {!!settlementMethod && settlementMethod == 2 && (
          <Item label="对账周期" name="accountCheckPeriod">
            <Input
              style={{ width: 250 }}
              addonAfter="日"
              addonBefore="下月"
              disabled
            />
          </Item>
          )}

          <Item label="发票金额要求比例" name="proportion">
            <Input style={{ width: 250 }} disabled addonAfter="%" />
          </Item>

          <Item label="是否推送外勤资格" name="isOutSide">
            <Select
              style={{ width: 250 }}
              defaultValue="0"
            >
              <Option value="1" key="1">是</Option>
              <Option value="0" key="0">否</Option>
            </Select>
          </Item>

        </Form>

        <Tabs animated>
          <TabPane tab="配件" key="1">
            <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginBottom: 10}}>

              <Button type="primary" onClick={() => setChoosePartVisable(true)} disabled={!partParams?.spId || !partParams.stId}>选择配件</Button>

            </div>
            <Table
              style={{width: '100%'}}
              dataSource={selectedParts}
              pagination={false}

              scroll={{y: 300}}

              rowKey={r => `${r.partCode}`}

            >
              <Column title="配件名称" dataIndex="partName" />
              <Column title="配件编码" dataIndex="partCode" />
              <Column title="采购数量" dataIndex="partCnt" />

              <Column title="单价" dataIndex="price" />

              <Column title="总价" render={r => _.ceil((r.partCnt * r.price), 2)} />

              <Column
                title="操作"

                render={(_item: any) => (

                  <a onClick={() => setSelectedParts(selectedParts.filter(i => i.partCode != _item.partCode))}>
                    删除
                  </a>
            )}
              />
            </Table>
          </TabPane>

          <TabPane tab="计划待外采配件" key="3">
            <div style={{display: 'flex', marginBottom: 10}}>
              <Input.Search
                allowClear

                enterButton

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

                onSearch={e => setParams({keywords: e}, true)}
                style={{ width: 220 }}

              />
              <PmsSelect
                allowClear
                style={{ width: 180, marginRight: 10, marginLeft: 10}}
                onChange={v => {
                  setParams({poolType: v}, true);
                }}
                placeholder="请选择来源类型"
                options={planPoolTypeData.map(i => ({value: i.value, label: i.label}))}
              />
              <PmsSelect
                allowClear
                style={{ width: 180}}
                onChange={v => setParams({partType: v}, true)}
                placeholder="请选择配件类型"
                options={partTypeData.map(i => ({value: i.value, label: i.label}))}

              />

              <PmsSelect
                allowClear
                style={{ width: 180, marginLeft: 10}}
                onChange={v => setParams({storageId: v}, true)}
                placeholder="请选择库房"
                options={storages.map(i => ({value: i.id, label: i.storageName}))}
              />

            </div>
            <Table
              style={{width: '100%'}}
              dataSource={planeData}
              pagination={false}
              scroll={{y: 300}}
              rowKey="poolId"
              rowSelection={{
              type: "checkbox",
              onChange: (selectedRowKeys: any, selectedRows) => {
                setPlanePart(selectedRows);
              },
              selectedRowKeys: [...(planePart?.map(i => i.poolId) || [])]
            }}
            >
              <Column title="配件名称" dataIndex="partName" />
              <Column title="配件编码" dataIndex="partCode" />

              <Column title="数据来源" dataIndex="typeName" />

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

              <Column title="采购单价(元)" dataIndex="price" />
              <Column title="采购数量" dataIndex="cnt" />

              <Column title="库房" dataIndex="storageName" />

              <Column title="总价(元)" render={r => _.ceil((r.cnt * r.price), 2)} />
            </Table>
          </TabPane>

          <TabPane tab="工单缺件配件" key="2">

            <div style={{display: 'flex', marginBottom: 10}}>

              <Input.Search
                allowClear

                enterButton

                placeholder="请输入VIN/工单号"

                onSearch={e => casSetParams({keywords: e}, true)}
                style={{ width: 220 }}

              />
            </div>

            <Table
              style={{width: '100%'}}

              dataSource={casData}

              pagination={false}

              scroll={{y: 300}}

              rowKey="name"

              rowSelection={{
              type: "checkbox",
              onChange: (selectedRowKeys: any, selectedRows) => {

                setCasPart(selectedRows);

              },

              selectedRowKeys: [...(casPart?.map(i => i.name) || [])]

            }}
            > 
              <Column title="工单号" dataIndex="name" />
              <Column title="VIN" dataIndex="id" />

              <Column title="车牌号" dataIndex="plateNo" />

              <Column title="缺件外采品种" render={(r) => <a onClick={() => { setPartvisible(true); setItem(r.details); }}>{r.kind}</a>} />

            </Table>
          </TabPane>

        </Tabs>

        <div style={{display: 'flex', justifyContent: 'flex-end', marginTop: 20, marginBottom: 20}}>

          <span>合计金额：{
          ((selectedParts.reduce((sum, i) => (sum + _.ceil(Number(i.partCnt * i.price), 2)), 0)) +
          casPart?.map(i => i.details).flat().reduce((sum, item) => (sum + (item?.amount || 0)), 0) + 
          planePart.reduce((sum, it) => (sum + _.ceil(Number((it.price || 0) * (it.cnt || 0)), 2)), 0)).toFixed(2)
          }
            元

          </span>
        </div>

        <ChoosePartModal

          partParams={partParams}

          visible={choosePartVisable}
          onCancel={() => setChoosePartVisable(false)}
          onOk={(part) => { 
            const findPart = selectedParts.find(it => it.partId == part.partId);
            if (JSON.stringify(findPart) != undefined) {
              setSelectedParts([...selectedParts.filter(it => it.partId != part.partId), {...part}]);
            } else {
              setSelectedParts([...selectedParts, part]);
            }
          }}
        />

        <PartModal visible={partvisible} item={item} onCancel={() => setPartvisible(false)} />

      </Modal>
    );
  }