FEV2 / fw-cms

import React, {useEffect, useState} from 'react';
import { Select, Button, message, Table, Input, Form, Popconfirm, Radio } from 'antd';
import { PlusOutlined, RightOutlined } from '@ant-design/icons';
import ChooseStoreModal from './comonents/ChooseStoreModal';
import {useStore} from '../index';
import {getAlluserList, getmethodApi, methodItem, methodParams, transferMethodid, submitTransfer, transferList, getContactUnit, ContactItem} from '../api';
import usePagination from '@/hooks/usePagination';
import useInitial from '@/hooks/useInitail';
import TransferPartDetailModal from './comonents/TransferPartDetailModal';
import TransferSeqModal from './comonents/TransferSeqModal';
import ImageUpload from '@/pages/pms/comonents/ImageUpload';
import SupplierDealer from './comonents/SupplierDealer';

const {Option} = Select;
const {Column} = Table;
const { TextArea } = Input;
const {Item} = Form;
const layout = {
  labelCol: { sm: {span: 2}},
};

export default function Index({onCancel}:any) {
  const [form] = Form.useForm();
  const {
        storagePagination, 
        setAMvisible, 
        method,
        setMethod,
        transferList,
        setTransferList,
        setAddVisible,
        editTransfer,
        setEditTransfer,
        shopList, 
        setShopList
      } = useStore();
  const {list} = storagePagination;
  const [methodDetail, setMethodDetail] = useState<number>();
  const [userDelay, setUserDelay] = useState(true);
  const {list: userList, setParams: userSetParams} = usePagination(getAlluserList, {}, {delay: userDelay});
  const [methodList, setMethodList] = useState<methodItem[]>();
  const [shopDelay, setShopDelay] = useState(true);
  const {data, setParams: shopSetparams} = useInitial<methodItem[], methodParams>(getmethodApi, [], {}, shopDelay);
  const [shopID, setShopID] = useState<number>();
  const [visible, setVisible] = useState(false);
  const [item, setItem] = useState<{data:any[], storage: any}>();
  const [tsvisible, setTsvisible] = useState(false);
  const [tslist, setTslist]= useState<any[]>([]);
  const [rmark, setRmark] = useState<string>();
  const [btnloading, setBtnloading] = useState(false);
  const {data: contactList} = useInitial<ContactItem[], {compTypes: number}>(getContactUnit, [], {compTypes: 130});
  const [freight, setFreight] = useState<number>();
  const [clear, setClear] = useState(false);
  const [checked, setChecked] = useState(false);
  
  //多库房调运判断出库房是否相同
  const isSameOutstorage = (arr:transferList[]) => {
    let list: (number | undefined)[] = [];
    for (let i = 0; i< arr.length; i++) {
        list.push(arr[i].oSId);
    }
    if (list.length > 0) {
        return !list.some((value) => {
            return value !== list[0];
        });
    } else {
        return true;
    }
  };

  // 编辑时设置初始值
  useEffect(() => {
    if (editTransfer?.transferId && editTransfer?.transfers?.length) {
      setTransferList(editTransfer?.transfers?.map(i => ({oSId: i.outStorageId, iSId: i.inStorageId, parts: i.transferPoolIds, freight: i.freightId, supplierId: i.supplierId, payDealerId: i.payDealerId})) || []);
      setMethod(transferMethodid[editTransfer?.method || 0]);
      setChecked(!editTransfer.isReimburse);
      setMethodDetail(editTransfer.transferUserId);
      setTslist(editTransfer?.transferSeqList?.map(i => i.storageId) || []);
      form.setFieldsValue({remark: editTransfer.remark, transferfile: editTransfer.fids});
    } else {
      form.resetFields();
    }
  }, []);
  
  // 单库房调运且调运方式为指定人员默认调运顺序、摊销门店、结算门店
  useEffect(() => {
    if (method && transferMethodid[method] == "1" && transferList.length == 1) {
      setTslist([transferList[0].oSId, transferList[0].iSId]);
      getmethodApi({type: 88, ids: [transferList[0].iSId]}).then(res => {
        if (res.data?.length) {
          setShopList([{shopId: res.data[0].id, proportion: 100}]);
          setShopID(res.data[0].id);
          form.setFieldsValue({shop: res.data[0].id});
        }
      });
    }
    if (method && transferMethodid[method] == "2" && transferList.length == 1) {
      setTslist([transferList[0].oSId, transferList[0].iSId]);
    }
  }, [method, transferList]);
 
  useEffect(() => {
    if (clear) {
      setMethod(undefined);
      setTslist([]);
      setShopList([]);
      setShopID(undefined);
      setFreight(undefined); 
    }
    setClear(false);
  }, [clear]);

  useEffect(() => {
    if (data.length && editTransfer) {
        form.setFieldsValue({shop: editTransfer.payShopId});
        setShopID(editTransfer.payShopId);
        setShopList(editTransfer?.amountList || []);
    }
  }, [data, editTransfer]);
  
  // 根据调运方式获取具体调运人员或企业列表
  useEffect(() => {
    if (method) {
      if (transferMethodid[method] == "1") {
       setUserDelay(false);
       userSetParams({pageSize: 5000}, true);
      } else if (transferMethodid[method] == 2 && data.length > 0) {
        getmethodApi({type: Number(transferMethodid[method]), ids: data.map(i => i.id), pageSize: 5000}).then(res => {
          setMethodList(res.data);
        }).catch(e => message.error(e.message));
      } else {
        getmethodApi({type: Number(transferMethodid[method]), ids: undefined, pageSize: 500, storageId: transferList[0].oSId}).then(res => {
          setMethodList(res.data);
          if (res.data?.length == 1) { setMethodDetail(res.data[0].id); }
        }).catch(e => message.error(e.message));
        }
    }
  }, [method, data]);

  // 根据选择的调运库房获取门店列表
  useEffect(() => {
    if (transferList.length) {
        setShopDelay(false);
        shopSetparams({type: 88, ids: [...new Set([...transferList.map(it => it.oSId), ...transferList.map(it => it.iSId)])]}, true);
    }
   }, [transferList]);

  // 摊销门店列表
  const handleOk = (storeInfo:any) => {
    setShopList([...shopList, storeInfo]);
  };

  // 调运的库房顺序列表
  const tshandleOk = (tsInfo:any) => {
    setTslist([...tslist, tsInfo]);
  };

  // 提交申请
  const save = (s:any) => {
    form.validateFields().then(fileds => {
      if (s) {
         if (!method) {
          message.error("请先选择调运方式");
          return;
          }
          if (transferMethodid[method] == "1" && !shopID) {
            message.error("请先选择结算门店");
            return;
          }
          if (transferMethodid[method] == "1" && (shopList.length ==0 || shopList.map(i => i.proportion).reduce((prev, cur) => (prev + cur)) != 100)) {
            message.error("请选择摊销门店或门店摊销比例出错");
            return;
          }
      }
     
      const params = {
        transferId: editTransfer?.transferId || undefined,
        method: Number(transferMethodid[method || 0]), //调运方式 
        isReimburse: !checked,
        transferUserId: methodDetail, //调运人员id 
        transferUserName: userList.find(i => i.id == methodDetail)?.name || methodList?.find(i => i.id == methodDetail)?.name, //调运人员名称
        transfers: transferList.map(i => ({
          outStorageId: i.oSId, 
          inStorageId: i.iSId, 
          transferPoolIds: [...new Set(i.parts?.map(it => it.poolId))],
          freightId: i.freight || i.iSId,
          freightName: list.find(it => it.id == (i.freight || i.iSId))?.storageName,
          supplierId: i.supplierId,
          supplierName: contactList.find(it => it.id == i.supplierId)?.compName,
          payDealerId: i.payDealerId,
          payDealerName: i.payDealerName
        })), //调运配件详情
        payShopId: shopID, //结算门店
        isSubmit: !!s, //是否提交申请
        amountList: shopList.length && shopList.map(i => ({shopId: i.shopId, proportion: i.proportion})) || undefined, //摊销门店
        transferSeqList: tslist.length && tslist.map((i, index) => ({seq: index, storageId: i})) || undefined, //调运顺序
        remark: rmark || undefined,
        fids: fileds.transferfile
        };
      setBtnloading(true);
      submitTransfer(params).then(res => {
        message.success('提交成功');
        setMethod(undefined); 
        setTransferList([]);
        setEditTransfer(undefined);
        onCancel();
        setBtnloading(false);
      }).catch(e => {
        message.error(e.message);
        setBtnloading(false);
      });
    });
  };
return (
  <div>
    <Form {...layout} form={form}>
      <Item label="调拨明细">
        <div>
          <div style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
            <Button type="primary" icon={(<PlusOutlined />)} onClick={() => { setAddVisible(true); setClear(true); }}>新增</Button>
          </div>
          {transferList?.map((item, index) => (
            <div key={index} style={{marginBottom: 20}}>
              <div style={{fontWeight: "bold", marginBottom: 5}}>调出库房：{list.find(i => i.id==item.oSId)?.storageName}</div>
              <div style={{fontWeight: "bold", marginBottom: 5}}>调入库房：{list.find(i => i.id==item.iSId)?.storageName}</div>
              {!!method && [3, 4, 5].includes(transferMethodid[method]) && (
              <div style={{display: 'flex', flexDirection: 'row', marginBottom: 5, marginLeft: 20}}>
                <div style={{display: 'flex', alignItems: 'center', marginRight: 20}}>
                  <span>运费承担：</span>
                  <Select
                    style={{width: 200}}
                    defaultValue={item.iSId}
                    value={freight || item.freight}
                    onChange={v => {
                      setTransferList(transferList.map(it => ((it.iSId ==item.iSId && it.oSId == item.oSId) ? ({...it, freight: v}) : it)));
                    }}
                    size="small"
                    showSearch
                    filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    <Option key={item.oSId} value={item.oSId}>{list.find(i => i.id==item.oSId)?.storageName}</Option>
                    <Option key={item.iSId} value={item.iSId}>{list.find(i => i.id==item.iSId)?.storageName}</Option>
                  </Select>
                </div>
                {!!method && [4, 5].includes(transferMethodid[method]) && <SupplierDealer item={item} clear={clear} />}
              </div>
            )}
              <div style={{display: 'flex', marginLeft: 20}}>
                <div 
                  style={{color: "#0000FF", cursor: 'pointer'}}
                  onClick={() => { setVisible(true); setItem({data: [...(item.parts || [])], storage: undefined}); }}
                >查看配件清单<RightOutlined />
                </div>
                <div
                  style={{color: "#FF0000", cursor: 'pointer', marginLeft: 20}}
                  onClick={() => { setTransferList(transferList.filter(i => i.iSId != item.iSId || i.oSId != item.oSId)); setClear(true); }}
                >删除
                </div>
              </div>
            </div>
          ))}
        </div>
      </Item>
      <Item name="transfername" label="调运方式">
        <div style={{display: 'flex', flexDirection: 'column', justifyContent: 'flex-start'}}>
          <div style={{display: 'flex', alignItems: "center"}}>
            <Select
              placeholder="请选择调运方式"
              style={{width: 200}}
              value={method}
              onSelect={(v: string) => {
                setMethod(v);
                setMethodDetail(undefined);
              }}
              onChange={() => { setShopList([]); setTslist([]); setFreight(undefined); }}
              showSearch
              optionFilterProp="children"
            >
              <Option value="DESIGNATED_PERSON" key="1">指定内部员工运输</Option>
              <Option value="THIRD_PARTY_DISPATCH" key="2">第三方调运</Option>
              <Option value="EXPRESS_DELIVERY" key="3" disabled={!isSameOutstorage(transferList)}>快递物流</Option>
              {/* <Option value="DIDI" key="4" disabled={!isSameOutstorage(transferList)}>企业滴滴</Option> */}
              <Option value="LALA" key="5" disabled={!isSameOutstorage(transferList)}>货拉拉</Option>
            </Select>
            {method && (
            <Select
              placeholder="选择人员或调运企业"
              allowClear
              value={methodDetail}
              onChange={setMethodDetail}
              style={{ maxWidth: 300, marginLeft: 10, marginRight: 10}}
              showSearch
              optionFilterProp="children"
            >
              {
              method == "DESIGNATED_PERSON" ? 
              userList.map((i) => <Option key={i.id} value={i.id}>{`${i.name}(${i.shopName}，${!!i.mobile && i.mobile.slice(7)})`}</Option>) :
              methodList?.map((i) => <Option key={i.id} value={i.id}>{i.name}</Option>)
              }
            </Select>
            )}
            {method == "DESIGNATED_PERSON" && (
              <Radio checked={checked} onClick={() => setChecked(!checked)}>顺路，不报销个人运费</Radio>
            )}
          </div>
          <p style={{fontSize: 10, marginTop: 5}}>注：多库房调运时调出方库房相同才能选择快递物流、企业滴滴、货拉拉</p>
        </div>
      </Item>
      {!!method && [1, 2].includes(transferMethodid[method]) && (
      <Item label="调运顺序">
        <div>
          <div style={{display: 'flex', alignItems: 'center', justifyContent: tslist.length >0 ? 'flex-end' : 'flex-start'}}>
            <Button type="primary" onClick={() => setTsvisible(true)}>选择调运顺序</Button>
          </div>
          {tslist.length >0 && (
          <Table
            dataSource={tslist}
            pagination={false}
            rowKey={r => r}
            style={{marginTop: 20}}
          >
            {/* <Column title="序号" render={r => (tslist.lastIndexOf(r) + 1)} /> */}
            <Column title="库房名称" render={r => list.find(item => item.id == r)?.storageName} />
            <Column 
              title="调出配件" 
              render={(t, r, i) => {
              if (transferList.filter(item => item.oSId == r).length > 0 && i != (tslist.length - 1)) {
                return <a onClick={() => { setVisible(true); setItem({data: transferList.filter(item => item.oSId == r) || [], storage: "out"}); }}>查看</a>;
              } else {
                return <>--</>;
              }
            }}
            />
            <Column 
              title="调入配件" 
              render={(t, r, i) => {
              if (transferList.filter(item => item.iSId == r).length > 0 && i != 0) {
                return <a onClick={() => { setVisible(true); setItem({data: transferList.filter(item => item.iSId == r) || [], storage: "in"}); }}>查看</a>;
            } else {
                return <>--</>;
              }
            }}
            />
            <Column title="操作" fixed="right" width="20%" render={r => <a onClick={() => setTslist(tslist.filter((i, index) => index != tslist.lastIndexOf(r)))}>删除</a>} />
          </Table>
      )}
        </div>
      </Item>
      )}
      {!!method && transferMethodid[method] == "1" && (
        <>
          <Item label="费用分摊">
            <div>
              <div style={{display: 'flex', justifyContent: shopList.length > 0 ?'flex-end': 'flex-start', alignItems: 'center'}}>
                <Button type="primary" onClick={() => setAMvisible(true)}>选择摊销门店</Button>
              </div>
              {shopList.length > 0 && (
              <Table
                dataSource={shopList}
                rowKey={r => `${r.shopId}`}
                pagination={false}
                style={{marginTop: 20}}
              >
                <Column title="门店名称" render={r => data.find(i => i.id == r.shopId)?.name} />
                <Column title="分摊比例" dataIndex="proportion" render={t => `${t}%`} />
                <Column 
                  title="操作" 
                  fixed="right"
                  width="20%"
                  render={r => (
                    <a onClick={() => setShopList(shopList.filter(it => it.shopId != r.shopId))}>删除</a>
              )}
                />
              </Table>
              )}
            </div>
          </Item>
          <Item name="shop" label="结算门店">
            <Select
              placeholder="选择结算门店"
              allowClear
              value={shopID}
              onChange={setShopID}
              style={{width: 200}}
              showSearch
              filterOption={(input: any, option: any) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
              {data.map(i => <Option value={i.id} key={i.id}>{i.name}</Option>)}
            </Select>
          </Item>
        </>
      )}
      <Item name="remark" label="备注">
        <TextArea value={rmark} onChange={(e) => setRmark(e.target.value)} rows={2} allowClear style={{width: 250, }} />
      </Item>
      <Item name="transferfile" label="附件">
        <ImageUpload max={6} />
      </Item>
    </Form>

    <div style={{display: 'flex', justifyContent: 'center', marginTop: 20}}>
      <Popconfirm
        title="确认放弃？"
        onConfirm={() => { onCancel(); setTransferList([]); setMethod(undefined); setEditTransfer(undefined); }}
        okText="确认"
        cancelText="取消"
      >
        <Button loading={btnloading}>取消</Button>
      </Popconfirm>
      <Button htmlType="submit" style={{marginRight: 20, marginLeft: 20}} onClick={() => save(0)} loading={btnloading}>暂存</Button>
      <Button htmlType="submit" type="primary" onClick={() => save(1)} loading={btnloading}>提交申请</Button>
    </div>
      
    <ChooseStoreModal total={shopList.length > 0 ? shopList.map(i => i.proportion).reduce((prev, cur) => (prev + cur)) : 0} Ids={[...new Set([...transferList.map(it => it.oSId), ...transferList.map(it => it.iSId)])]} handleOk={(storeInfo:any) => handleOk(storeInfo)} />
    <TransferPartDetailModal visible={visible} item={item} onCancel={() => setVisible(false)} />
    <TransferSeqModal 
      visible={tsvisible} 
      onCancel={() => setTsvisible(false)} 
      tshandleOk={(storeInfo:any) => tshandleOk(storeInfo)} 
      storageList={[...new Set([...transferList.map(it => it.oSId), ...transferList.map(it => it.iSId)])].map(i => ({value: i, title: list.find(item => item.id==i)?.storageName}))}
    />
  </div>
);
}