ScopeDetail.tsx 2.81 KB
import React, { useState, useEffect } from "react";
import { CheckCircleOutlined } from '@ant-design/icons';
import {
  Checkbox,
  Form,
  Select,
  Divider,
  Typography,
  Space,
} from "antd";
import useInitial from "@/hooks/useInitail";
import { getShopApi } from "@/common/api";
import CarSelect from "@/pages/mkt/ActivityCreate/ExternalPromotion/components/ActivityScope/CarSelect";
import _ from "lodash";

const { Option } = Select;

export default function Index({ data }: Props) {
  const [form] = Form.useForm();
  const { data: shopsList, loading } = useInitial(getShopApi, [], {});

  useEffect(() => {
    const result = data.authShops.map((item: { shopId?: number; shopName?: string; }) => ({ label: item.shopName, value: item.shopId, key: item.shopId }));
    form.setFieldsValue({
      ...data,
      authShops: result,
    });
  }, [data]);

  return (
    <Form form={form}>
      {data.authCars && (
        <Form.Item
          label="参与门店:"
          name="authShops"
          rules={[{ required: true, message: "请选择门店" }]}
        >
          <Select
            mode="multiple"
            disabled
            optionFilterProp="children"
            loading={loading}
            showSearch
            labelInValue
          >
            {shopsList.map((item) => (
              <Option key={item.id} value={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Form.Item>
      )}
      {/* 部分车辆*/}
      {data.authCars && (
        <Form.Item
          label="车辆"
          name="authCars"
          rules={[{ required: true, message: "选择车辆信息" }]}
        >
          <CarSelect disabled />
        </Form.Item>
      )}
      <div style={{ marginTop: 30, marginBottom: 15 }}>*活动报名资格:</div>
      {/* 滚动进池客户可享受外促政策 */}
      {data.nonGoalJoin != null && (
        <Form.Item name="nonGoalJoin" valuePropName="checked">
          <Checkbox disabled>
            非目标客户可享受外促政策
          </Checkbox>
        </Form.Item>
      )}
      {data.publicity != null && (
        <>
          <div style={{ marginTop: 35, color: '#666' }}>*活动页面展示(C端---{'>'}霏车车小程序)</div>
          <Form.Item name="publicity" valuePropName="checked">
            <Checkbox
              disabled
            >
              在广告区展示
            </Checkbox>
          </Form.Item>
        </>
      )}
      {data.nonGoalBrowse != null && (
        <>
          <div style={{ marginTop: 30, color: '#666' }}>*车系详情中"查看优惠"页面展示活动信息</div>
          <Form.Item name="nonGoalBrowse" valuePropName="checked">
            <Checkbox disabled> 非目标客户可查看</Checkbox>
          </Form.Item>
        </>
      )}
    </Form>
  );
}