FEV2 / fw-cms

import React, { useEffect, useState } from "react";
import {
  Button,
  Modal,
  Form,
  Select,
  InputNumber,
  Radio,
  message,
  Spin,
  Input,
  Table,
  Row,
  DatePicker,
  Tabs,
} from "antd";
import { getShopApi } from "@/common/api";
import { useStore } from "../index";
import _ from "lodash";
import useInitail from "@/hooks/useInitail";
import moment from "moment";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { TablePaginationConfig } from 'antd/es/table/interface';

const { TextArea } = Input;
const { TabPane } = Tabs;
const Option = Select.Option;
const { RangePicker } = DatePicker;
interface Props {
  upLoading: boolean;
  dowmLoading: boolean;
  dataSource1: FvmAllowance.WaitCheckListItems[];
  columns1: { [key: string]: any }[];
  columns2: { [key: string]: any }[];
  dataSource2: any[];
  paginationConfig: TablePaginationConfig;
  checkPaginationConfig: TablePaginationConfig;
  // 加入清单;
  addList: (values: any[]) => void;
  //移除清单
  removeList: (values: any[]) => void;
  getConfirmOrder: (searchParams?: Search) => void;
  getNotConfirmOrder: (searchParams?: Search) => void;
}
interface Search {
  vin?: string;
  retailShopId?: number; //下零售门店
  retailBegin?: any; //下零售开始时间
  retailEnd?: any; //下零售结束时间
  subsidyName?: string; //补贴类型
}
export default function TransferTable({
  upLoading,
  dowmLoading,
  dataSource1,
  columns1,
  columns2,
  dataSource2,
  paginationConfig,
  checkPaginationConfig,
  addList,
  removeList,
  getConfirmOrder,
  getNotConfirmOrder,
}: Props) {
  const {
    selectedRowKeys,
    submitSelectedRowKeys,
    setSelectedRowkeys,
    setSubmitSelectedRowkeys,
    subsidyTypeList,
    readOnly,
    currentItem,
    setCarOrderTabkey,
    carOrderTabkey
  } = useStore();
  const { data: shopList } = useInitail<
    CommonApi.OptionVO[],
    CommonApi.ShopParam
  >(getShopApi, [], { bizType: 1 });
  /**
   * 未确认清单 ==》搜索参数
   */
  const [searchParams, setSearchParams] = useState<Search>({});
  /**
   * 提交清单 ==》搜索参数
   */
  const [checkSearchParams, setCheckSearchParams] = useState<Search>({});
  const onSelectChange = (
    selectedRowKeys: React.Key[],
    selectedRows: FvmAllowance.WaitCheckListItems[]
  ) => {
    setSelectedRowkeys(selectedRowKeys);
  };

  const onSelectChange2 = (
    selectedRowKeys: React.Key[],
    selectedRows: FvmAllowance.CheckListItems[]
  ) => {
    setSubmitSelectedRowkeys([...selectedRowKeys]);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const rowSelection2 = {
    selectedRowKeys: submitSelectedRowKeys,
    onChange: onSelectChange2,
  };

  // 加入清单
  const addManifest = () => {
    let inwardName = "";
    if (carOrderTabkey === '2' && currentItem.dimension === 2) {
      Modal.confirm({
        title: '请输入确认车辆代收款名称',
        // icon: <ExclamationCircleOutlined />,
        content: <Input placeholder="请输入" onChange={(v) => { inwardName = v.target.value; }} />,
        onOk() {
          console.log("🚀 ~ file: TransferTable.tsx ~ line 126 ~ returnnewPromise ~ inwardName", inwardName)

          return new Promise((resolve, reject) => {
            // setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
            inwardName ? resolve(addList && addList([{ id: selectedRowKeys[0], inwardName }])) : reject;
            // inwardName ? resolve : reject;
            // }).then(() => addList && addList([{ id: selectedRowKeys[0], inwardName }]))
          }).catch((e) => message.error(e.message || '请输入确认车辆代收款名称后提交'));
        },
        onCancel() {
          console.log('Cancel');
        },
      });
      // addList && addList([{id: selectedRowKeys, inwardName }]);
      return;
    }
    // 交集
    const res = dataSource1.filter((x) =>
      selectedRowKeys.find((y) => y === x.id)
    );
    addList && addList(res);
  };

  // 移出清单
  const removeManifest = () => {
    // 交集
    const res = dataSource2.filter((x) =>
      submitSelectedRowKeys.find((y) => y === x.id)
    );
    removeList && removeList(res);
  };

  function callback(key: string) {
    console.log("🚀 ~ file: TransferTable.tsx ~ line 130 ~ callback ~ key", key)
    console.log(key);
    setCarOrderTabkey(key);
  }

  return (
    <>
      {!readOnly && (
        <div>

          <Row
            justify="space-between"
            style={{ marginBottom: 16, flexWrap: "wrap" }}
          >
            <div>
              <span>VIN：</span>
              <Input
                style={{ width: 200 }}
                allowClear
                placeholder="搜索VIN"
                onChange={(e) => setSearchParams({
                  ...searchParams,
                  vin: e.target.value || undefined,
                })}
              />
            </div>
            <div>
              <span style={{ marginLeft: 15 }}>门店：</span>
              <Select
                optionFilterProp="children"
                showSearch
                allowClear
                style={{ width: 200, marginRight: 15 }}
                placeholder="请选择门店"
                onChange={(v) =>
                  setSearchParams({
                    ...searchParams,
                    retailShopId: v ? Number(v) : undefined,
                  })
                }
              >
                {shopList.map((shop) => (
                  <Select.Option value={shop.id} key={shop.id}>
                    {shop.name}
                  </Select.Option>
                ))}
              </Select>
            </div>
            <div>
              <span>下零售日期范围：</span>
              <RangePicker
                allowClear
                format="YYYY-MM-DD"
                onChange={(v) =>
                  setSearchParams({
                    ...searchParams,
                    retailBegin: v && v[0] && v[0].valueOf(),
                    retailEnd: v && v[1] && v[1].valueOf(),
                  })
                }
              />
            </div>
            {/* 补贴类型 */}
            {currentItem.dimension == 1 && (
              <div>
                <span style={{ marginLeft: 15 }}>补贴类型：</span>
                <Select
                  optionFilterProp="children"
                  showSearch
                  allowClear
                  style={{ width: 200, marginRight: 15 }}
                  placeholder="请选择类型"
                  onChange={(v) =>
                    setSearchParams({
                      ...searchParams,
                      subsidyType: v ? Number(v) : undefined,
                    })
                  }
                >
                  {subsidyTypeList.map((item) => (
                    <Select.Option value={item.subsidyType} key={item.subsidyType}>
                      {item.subsidyName}
                    </Select.Option>
                  ))}
                </Select>
              </div>
            )}
            <Button
              type="primary"
              onClick={() => getNotConfirmOrder && getNotConfirmOrder(searchParams)}
            >
              查询
            </Button>
          </Row>
          <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="已有折让记录中选择" key="1">
              <Table
                loading={upLoading}
                pagination={paginationConfig}
                bordered
                size="small"
                rowKey="id"
                scroll={{ y: 500, x: 1500 }}
                dataSource={dataSource1}
                columns={columns1}
                rowSelection={rowSelection}
              />
            </TabPane>
            <TabPane tab={`从${currentItem.dimension == 3 && currentItem.supportType == 1 ? "启票" : "下零售"}数据车辆选择`} key="2">
              <Table
                loading={upLoading}
                pagination={paginationConfig}
                bordered
                size="small"
                rowKey="id"
                scroll={{ y: 500, x: 1500 }}
                dataSource={dataSource1}
                columns={columns1}
                rowSelection={{ ...rowSelection, type: 'radio' }}
              />
            </TabPane>
          </Tabs>
          {/* <Table
            loading={upLoading}
            // pagination={false}
            bordered
            size="small"
            rowKey="id"
            scroll={{ y: 500, x: 1500 }}
            dataSource={dataSource1}
            columns={columns1}
            rowSelection={rowSelection}
          /> */}
          <div
            style={{
              height: 100,
              margin: 20,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Button
              style={{ marginRight: 50 }}
              size="large"
              icon={<UpOutlined />}
              disabled={!submitSelectedRowKeys.length || readOnly}
              onClick={() => removeManifest()}
            >
              移除清单
            </Button>

            <Button
              type="primary"
              size="large"
              icon={<DownOutlined />}
              disabled={!selectedRowKeys.length || readOnly}
              onClick={() => addManifest()}
            >
              加入清单
            </Button>
          </div>
        </div>
      )}
      <Row
        justify="space-between"
        style={{ marginBottom: 16, flexWrap: "wrap" }}
      >
        <div>
          <span>VIN：</span>
          <Input
            style={{ width: 200 }}
            allowClear
            placeholder="搜索VIN"
            onChange={(e) =>
              setCheckSearchParams({
                ...checkSearchParams,
                vin: e.target.value || undefined,
              })
            }
          />
        </div>
        <div>
          <span style={{ marginLeft: 15 }}>门店：</span>
          <Select
            optionFilterProp="children"
            showSearch
            allowClear
            style={{ width: 200, marginRight: 15 }}
            placeholder="请选择门店"
            onChange={(v) =>
              setCheckSearchParams({
                ...checkSearchParams,
                retailShopId: v ? Number(v) : undefined,
              })
            }
          >
            {shopList.map((shop) => (
              <Select.Option value={shop.id} key={shop.id}>
                {shop.name}
              </Select.Option>
            ))}
          </Select>
        </div>
        <div>
          <span>下零售日期范围：</span>
          <RangePicker
            allowClear
            format="YYYY-MM-DD"
            onChange={(v) =>
              setCheckSearchParams({
                ...checkSearchParams,
                retailBegin: v && v[0] && v[0].valueOf(),
                retailEnd: v && v[1] && v[1].valueOf(),
              })
            }
          />
        </div>
        {/* 补贴类型 */}
        {currentItem.dimension == 1 && (
          <div>
            <span style={{ marginLeft: 15 }}>补贴类型：</span>
            <Select
              optionFilterProp="children"
              showSearch
              allowClear
              style={{ width: 200, marginRight: 15 }}
              placeholder="请选择类型"
              onChange={(v) =>
                setCheckSearchParams({
                  ...checkSearchParams,
                  subsidyType: v ? Number(v) : undefined,
                })
              }
            >
              {subsidyTypeList.map((item) => (
                <Select.Option value={item.subsidyType} key={item.subsidyType}>
                  {item.subsidyName}
                </Select.Option>
              ))}
            </Select>
          </div>
        )}
        <Button
          type="primary"
          onClick={() => getConfirmOrder && getConfirmOrder(searchParams)}
        >
          查询
        </Button>
      </Row>
      <Table
        loading={dowmLoading}
        pagination={checkPaginationConfig}
        size="small"
        bordered
        rowKey="id"
        scroll={{ y: 500, x: 1500 }}
        dataSource={dataSource2}
        columns={columns2}
        rowSelection={rowSelection2}
      />
    </>
  );
}