index.tsx 11.9 KB
import React, { useState, useEffect } from 'react';
import { Button, Form, message, InputNumber, Divider, Card, Row, Col, Select} from 'antd';
import ShopSelectNew from '@/components/ShopSelectNew';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { history } from 'umi';
import { SaveParams, fetchOperationApi, getConfigApi, getShopListApi } from '../../api';
import { debounce } from 'lodash';
import currency from 'currency.js';
import useInitail from '@/hooks/useInitail';

enum TitleEnum {
  "新增" =1,
  "编辑"
}

const Option = Select.Option;

export default function ApplyModal() {
  const {id, operationType=1} = history.location.state as SaveParams || {};
  const [form] = Form.useForm();
  const [loading, setLoading] = useState<boolean>(false);
  const tip = "厂家下发线索目标占比+经纪人推荐目标占比+保有客推荐目标占比+员工推荐目标占比+定巡展车展目标占比之和需等于100";
  // const { data: shop } = useInitail(getShopListApi, [], null);

  useEffect(() => {
    if (operationType === 2) {
      getConfigApi(id)
      .then(res => {
        const {clueAimExclusive=0, clueAimManufacturer=0, clueAimBroker=0, clueAimCas=0, clueAimStaff=0, gatherAim=0, gatherAimExclusive=0, gatherLiveAimDirect=0, potentialAim=0, potentialAimExclusive=0, clueAimVisit=0, shopList, clueDealAim=0} = res.data || {};
        form.setFieldsValue({
          clueAimExclusive: (clueAimExclusive*100).toFixed(2),
          clueAimManufacturer: (clueAimManufacturer*100).toFixed(2),
          clueAimBroker: (clueAimBroker*100).toFixed(2),
          clueAimCas: (clueAimCas*100).toFixed(2),
          clueAimStaff: (clueAimStaff*100).toFixed(2),
          clueAimVisit: (clueAimVisit*100).toFixed(2),
          gatherAim: (gatherAim*100).toFixed(2),
          gatherAimExclusive: (gatherAimExclusive*100).toFixed(2),
          gatherLiveAimDirect: (gatherLiveAimDirect*100).toFixed(2),
          potentialAim: (potentialAim*100).toFixed(2),
          potentialAimExclusive: (potentialAimExclusive*100).toFixed(2),
          clueDealAim: (clueDealAim*100).toFixed(2),
          shopList: shopList?.map(v => ({label: v.shopName, value: v.shopId}))
      });
      })
      .catch(e => {
        message.error(e.message);
      });
    }
  }, [operationType]);

  async function onSubmit() {
    const params = await form.validateFields();
    const count = currency(params.clueAimManufacturer)
                        .add(params.clueAimBroker)
                        .add(params.clueAimCas)
                        .add(params.clueAimStaff)
                        .add(params.clueAimVisit).value;
    if (count !=100) {
      message.error(tip);
      return;
    }
    const shopList = params.shopList.map((v:any) => ({shopName: v.label, shopId: v.value}));
    const _params: SaveParams = {
      clueAimExclusive: +(params.clueAimExclusive / 100).toFixed(4),
      clueAimManufacturer: +(params.clueAimManufacturer / 100).toFixed(4),
      clueAimBroker: +(params.clueAimBroker / 100).toFixed(4),
      clueAimCas: +(params.clueAimCas / 100).toFixed(4),
      clueAimStaff: +(params.clueAimStaff /100).toFixed(4),
      clueAimVisit: +(params.clueAimVisit /100).toFixed(4),
      gatherAim: +(params.gatherAim / 100).toFixed(4),
      gatherAimExclusive: +(params.gatherAimExclusive /100).toFixed(4),
      gatherLiveAimDirect: +(params.gatherLiveAimDirect /100).toFixed(4),
      potentialAim: +(params.potentialAim /100).toFixed(4),
      potentialAimExclusive: +(params.potentialAimExclusive /100).toFixed(4),
      clueDealAim: +(params.clueDealAim /100).toFixed(4),
      shopList, 
      id, 
      operationType
    };
    setLoading(true);
    fetchOperationApi(_params)
    .then(res => {
      message.success(res.result);
      setLoading(false);
      history.goBack();
    })
    .catch(e => {
      message.error(e.message);
      setLoading(false);
    });
  }

  function handleBack() {
    history.goBack();
  }

  return (
    <PageHeaderWrapper title={TitleEnum[operationType]}>
      <Card>
        <Form
          form={form}
          labelCol={{ span: 10 }}
          wrapperCol={{ span: 10 }}
        >
          <Form.Item
            label="适用门店"
            name="shopList"
            rules={[{ required: true, message: "请选择门店" }]}
            labelAlign="right"
          >
            <ShopSelectNew defaultOptions={{bizTypes: "1"}} placeholder="请选择门店" multiple />
          </Form.Item>
          {/* <Form.Item
            label="适用门店"
            name="shopList"
            rules={[{ required: true, message: "请选择门店" }]}
          >
            <Select
              optionFilterProp="children"
              mode="multiple"
              labelInValue
              allowClear
              style={{ width: "100%" }}
              placeholder="请选择门店"
            >
              {shop && shop.map((shop: any) => (
                <Option value={shop.id} key={shop.id}>
                  {shop.shopName}
                </Option>
          ))}
            </Select>
          </Form.Item> */}
          <Divider orientation="left" orientationMargin="0">线索</Divider>

          <Form.Item name="clueAimExclusive" labelAlign="right" label="计算线索目标:专属线索转化率" rules={[{ required: true, message: "请输入!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="clueAimManufacturer"
            labelAlign="right"
            label="线索目标占比设置:厂家下发线索目标占比"
            rules={[{ required: true, message: "请输入!" }]}
          >
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="clueAimBroker"
            label="经纪人推荐目标占比"
            labelAlign="right"
            rules={[{ required: true, message: "请输入!" }]}
          >
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="clueAimCas"
            label="保有客推荐目标占比"
            labelAlign="right"
            rules={[{ required: true, message: "请输入!" }]}
          >
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="clueAimStaff"
            label="员工推荐目标占比"
            labelAlign="right"
            rules={[{ required: true, message: "请输入!" }]}
          >
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item
            name="clueAimVisit"
            label="定巡展车展目标占比"
            labelAlign="right"
            rules={[{ required: true, message: "请输入!" }]}
          >
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>

          <Divider orientation="left" orientationMargin="0">集客</Divider>
          <Form.Item name="gatherAim" labelAlign="right" label="计算月集客目标:集客转化率" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item name="gatherAimExclusive" labelAlign="right" label="月集客目标中:专属线索转集客占比" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item name="gatherLiveAimDirect" labelAlign="right" label="直接集客目标中:直播/短视频直接集客目标占比" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>

          <Divider orientation="left" orientationMargin="0">潜客</Divider>
          <Form.Item name="potentialAim" labelAlign="right" label="月潜客目标中:集客转潜客占比" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
          <Form.Item name="potentialAimExclusive" labelAlign="right" label="计算月潜客目标:潜客转化率" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>

          <Form.Item name="clueDealAim" labelAlign="right" label="计算线索到店目标:线索到店成交潜客转化率" rules={[{ required: true, message: "请输入大于0的数!" }]}>
            <InputNumber
              style={{width: '100%'}}
              controls={false}
              min={0.01}
              max={100}
              formatter={value => `${value}%`}
              precision={2}
              parser={value => value?.replace('%', '')}
            />
          </Form.Item>
        </Form>

        <Row align="middle" justify="center">
          <Col span={8} />
          <Col span={8}>
            <Row justify="space-between">
              <Col span={12}>
                <Button type="default" htmlType="button" onClick={handleBack}>
                  返回
                </Button>
              </Col>
              <Col span={12}>
                <Button loading={loading} type="primary" onClick={debounce(onSubmit, 380)}>
                  确定
                </Button>
              </Col>
            </Row>
          </Col>
          <Col span={8} />
        </Row>
      </Card>

    </PageHeaderWrapper>
  );
}