FEV2 / fw-cms

import React, { useEffect, useState } from "react";
import {
  Button,
  Popconfirm,
  Card,
  Table,
  Modal,
  Form,
  Select,
  Space,
} from "antd";
import useInitial from "@/hooks/useInitail";
import {
  getOnsaleBrandApi,
  getOnsaleSeriesApi,
  getOnsaleSpecApi,
} from "@/pages/stock/Components/api";

interface Props {
  onChange?: (pa: any) => void;
  value?: any[];
  disabled?: boolean;
}

interface Item {
  label: string;
  value: number;
  key?: number;
}
const { Column } = Table;
const { Option } = Select;

export default function index({ onChange, value, disabled }: Props) {
  const [form] = Form.useForm();
  const { data: brandList } = useInitial(getOnsaleBrandApi, [], {});
  // 控制Modal是否可见
  const [visible, setVisible] = useState<boolean>(false);
  // 控制是否可见车型下拉框
  const [specVisible, setSpecVisible] = useState<boolean>(false);
  //存储表格当前车系
  const [currentItem, setCurrentItem] = useState<any>();
  //存储Modal中可选的车系
  const [series, setSeries] = useState<any>([]);
  //存储接口返回的车型
  const [specList, setSpecList] = useState<any>([]);
  //存储Modal选择的品牌和车系作为表格的数据源
  const [savaData, setSavadata] = useState<any>([]);
  // 存储已经选中的车系
  const [selectedSeries, setSelectedSeries] = useState<any[]>([]);

  useEffect(() => {
    if (value && value.length) {
      setSelectedSeries([...value]);
      setSavadata([...value]);
    }
  }, [value]);

  const _onOk = () => {
    form
      .validateFields()
      .then((fileds) => {
        if (specVisible) {
          const { Spec } = fileds;
          const _specs = Spec.map((item: Item) => ({
            specId: item.value,
            specName: item.label,
          }));
          currentItem.specs = _specs;
          currentItem.authType = 2;
          const tempData = savaData.map((item: any) => (item.seriesId === currentItem.seriesId ? currentItem : item)
          );
          setSavadata([...tempData]);
          onChange && onChange(tempData);
          setVisible(false);
          setSpecVisible(false);
          return;
        }
        const { Series, brand } = fileds;

        const tempArray = Series.map((item: any) => ({
          brandName: brand.label,
          brandId: brand.value,
          seriesName: item.label,
          seriesId: Number(item.key),
          authType: 1, //1全部2部分
        }));

        selectedSeries.push(...tempArray);

        savaData.push(...tempArray);
        onChange && onChange(selectedSeries);
        setVisible(false);
      })
      .catch((err) => console.log(err.message));
  };

  // 选择部分车辆表格==》删除车系
  const onDelete = (record: any) => {
    const _savaData = savaData.filter(
      (item: any) => item.seriesId != record.seriesId
    );
    const _selectedSeries = selectedSeries.filter(
      (item) => item.seriesId != record.seriesId
    );
    setSavadata([..._savaData]);
    onChange && onChange(_savaData);
    setSelectedSeries([..._selectedSeries]);
  };

  // 选择部分车辆表格==》编辑选择部分车型
  const onSelectSpec = async (record: any) => {
    const { data } = await getOnsaleSpecApi(record.seriesId);
    setCurrentItem(record);
    setSpecList(data);
    setSpecVisible(true);
    setVisible(true);
  };

  return (
    <>
      <Card>
        <div style={{ display: "flex", justifyContent: "flex-end" }}>
          {!disabled && (
            <Button
              type="link"
              disabled={disabled}
              onClick={() => {
                setVisible(true);
                form.resetFields();
              }}
            >
              新增
            </Button>
          )}
        </div>

        <Table
          dataSource={value}
          rowKey={(record) => String(record.seriesId)}
          bordered
        >
          <Column
            title="品牌"
            dataIndex="brandName"
            key="brandName"
            filters={brandList.map((item) => ({
              text: item.name,
              value: item.name,
            }))}
            onFilter={(value, record: any) => record.brand.indexOf(value) === 0}
          />
          <Column title="车系" dataIndex="seriesName" key="seriesName" />
          <Column
            title="车型"
            dataIndex="specs"
            key="specs"
            render={(_, record: any) => (record.specs && record.specs.length ? (
              <span>
                {record.specs.map((item: any) => item.specName).join(",")}
              </span>
            ) : (
              <span>全部</span>
            ))}
          />
          {!disabled && (
            <Column
              title="操作"
              key="operation"
              render={(_, record) => (
                <Space>
                  <Button
                    type="link"
                    style={{ padding: 0 }}
                    onClick={() => onSelectSpec(record)}
                    disabled={disabled}
                  >
                    编辑车型
                  </Button>

                  <Popconfirm
                    title="确定删除？"
                    okText="确定"
                    style={{ padding: 0 }}
                    cancelText="取消"
                    onConfirm={() => onDelete(record)}
                  >
                    <Button type="link" danger disabled={disabled}>
                      删除
                    </Button>
                  </Popconfirm>
                </Space>
              )}
            />
          )}
        </Table>
      </Card>

      {/* 选择品牌和车系 */}
      <Modal
        title="选择车辆信息"
        visible={visible}
        onOk={() => form.submit()}
        onCancel={() => {
          setVisible(false);
          setSpecVisible(false);
        }}
        afterClose={() => {
          form.resetFields();
          setCurrentItem({});
        }}
      >
        <Form onFinish={_onOk} form={form}>
          {specVisible ? (
            <Form.Item
              label="车型"
              name="Spec"
              rules={[{ required: true, message: "请选择车型" }]}
            >
              <Select labelInValue mode="multiple" allowClear>
                {specList.map((item: any) => (
                  <Option value={item.id} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          ) : (
            <>
              {/* 品牌 */}
              <Form.Item
                label="品牌"
                name="brand"
                rules={[{ required: true, message: "请选择品牌：" }]}
              >
                <Select
                  labelInValue
                  onChange={async (value) => {
                    form.resetFields(["Series"]);
                    const { data: seriesList } = await getOnsaleSeriesApi(
                      value?.key
                    );
                    let tempArray = selectedSeries.map((item) => item.seriesId);
                    const tempData = seriesList?.filter(
                      (value) => !tempArray.includes(value.id)
                    );
                    setSeries(tempData);
                  }}
                >
                  {brandList.map((item) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
              {/* 车系 */}
              <Form.Item
                label="车系"
                name="Series"
                rules={[{ required: true, message: "请选择车系" }]}
              >
                <Select labelInValue mode="multiple" allowClear>
                  {series.map((item: any) => (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
            </>
          )}
        </Form>
      </Modal>
    </>
  );
}