FEV2 / fw-cms

  import React, { useEffect, useState } from 'react';
  import { Button, Card, ConfigProvider, Form, InputNumber, message, Row, Switch, Space } from 'antd';
  import zhCN from 'antd/lib/locale-provider/zh_CN';
  import { PageHeaderWrapper } from '@ant-design/pro-layout';
  import { getInfoApi, saveInfoApi, Result } from './api';
  import './style.less';
  import { history } from 'umi';

  import { debounce } from 'lodash';

  
  export default function CollectionFollowSetting() {
    const [edit, setEdit] = useState(false);
    const [loading, setLoading] = useState<boolean>(true);

    const [confirmLoading, setConfirmLoading]= useState<boolean>(false);

    const [form] = Form.useForm();
    const [stageMinAssignCount, setStageMinAssignCount] = useState<number>(0);
    const [dailyMinAssignCount, setDailyMinAssignCount] = useState<number>(0);
    const [increaseCount, setIncreaseCount] = useState<number>(0);

    const [checked, setChecked] = useState<boolean>(false);

  
    useEffect(() => {

      getInfo();
    }, []);
  
    const getInfo = () => {

      getInfoApi().then(res => {
        if (res.data) {
          form.setFieldsValue({...res.data});
          setDailyMinAssignCount(res.data?.dailyMinAssignCount || 0);
          setStageMinAssignCount(res.data?.stageMinAssignCount || 0);
          setIncreaseCount(res.data?.increaseCount || 0);

          setChecked(res.data.onlineSaleShopAssignClue || false);

        }
        setLoading(false);
      }).catch(error => {
        message.error(error.message);
        setLoading(false);
      });

    };
  
    const onCancle = () => {
      getInfo();
      setEdit(false);
    };

  
    const onOk = async () => {
      const params: any = await form.validateFields();
      const _params: Result = {
        exclusiveClueConvertRate: params.exclusiveClueConvertRate,
        stageMinAssignCount,
        dailyMinAssignCount,
        increaseCount,

        onlineSaleShopAssignClue: checked,

      };

      setConfirmLoading(true);

      saveInfoApi(_params).then(res => {
        message.success(res.result);
        setEdit(false);

        setConfirmLoading(false);
        history.goBack();

      }).catch(error => {
        message.error(error.message);

        setConfirmLoading(false);

      });
    };
  
    return (
      <PageHeaderWrapper title="暂停区域线索站岗分配资格">
        <ConfigProvider locale={zhCN}>

          <Card style={{paddingLeft: "60px", justifyContent: 'center'}} bordered={false} loading={loading}>

            {/* <Spin> */}
            <Form

              labelCol={{ span: 2 }}
              wrapperCol={{ span: 18 }} 

              form={form}
            >

              <Form.Item labelCol={{offset: 0}} label="区域站岗分配线索转化率标准" name="exclusiveClueConvertRate" labelAlign="right" rules={[{ required: true, message: '请输入' }]}>

                <InputNumber
                  style={{width: '100%'}}
                  controls={false}
                  min={0}
                  max={100}
                  formatter={value => `${value}%`}
                  precision={2}
                  disabled={!edit}
                  parser={value => value?.replace('%', '')}
                />
              </Form.Item>
  

              <Form.Item labelCol={{offset: 2}} label=" " name="stageMinAssignCount" colon={false} labelAlign="right">
                <span>{`(1)每阶段滚动判定，低于"区域站岗分配线索转化率标准"，下一阶段线索每日仅分配`}</span>

                <InputNumber
                  controls={false}
                  min={0}
                  disabled={!edit}
                  value={stageMinAssignCount}
                  onChange={(e) => setStageMinAssignCount(e || 0)}
                  formatter={value => `${value}个`}
                  precision={0}
                  parser={value => value?.replace('个', '')}
                />

                <br />
                <span style={{color: "#F4333C"}}>（最低要求）；阶段：1～10号；11～20号；21～月末</span>

              </Form.Item>
  

              <Form.Item labelCol={{offset: 2}} className="feewee-settings-form-closeClue" label=" " colon={false}>

                <Form.Item colon={false} name="dailyMinAssignCount">
                  <span>(2)从</span>
                  <InputNumber
                    controls={false}
                    value={dailyMinAssignCount}
                    onChange={(e) => setDailyMinAssignCount(e || 0)}
                    min={0}
                    disabled={!edit}
                    formatter={value => `${value}个`}
                    precision={0}
                    parser={value => value?.replace('个', '')}
                  />

                  <span>线索起，当天区域站岗分配线索跟进数每增加</span>

                </Form.Item>
                <Form.Item colon={false} name="increaseCount">

                  <InputNumber
                    controls={false}
                    min={0}
                    value={increaseCount}
                    onChange={(e) => setIncreaseCount(e || 0)}
                    formatter={value => `${value}个`}
                    precision={0}
                    disabled={!edit}
                    parser={value => value?.replace('个', '')}
                  />

                  <span>，低于{`"区域站岗分配线索转化率标准"`}，暂停当天资格；</span>

                </Form.Item>
              </Form.Item>

              <Form.Item labelCol={{offset: 0}} label="网销门店是否参与区域线索站岗分配" name="onlineSaleShopAssignClue" labelAlign="right">

                <Switch

                  disabled={!edit}
                  checked={checked}

                  checkedChildren="是"
                  unCheckedChildren="否"
                  size="default"

                  onChange={(e) => setChecked(e)}

                />
              </Form.Item>
   
            </Form>
            <Row justify="space-around" align="middle">
              <Space>

                {
                  !edit ? <Button disabled={confirmLoading} type="default" onClick={() => setEdit(true)}>编辑</Button> : <Button disabled={confirmLoading} type="default" onClick={onCancle}>取消</Button>
                }
                <Button disabled={confirmLoading} loading={confirmLoading} type="primary" onClick={debounce(onOk, 380)}>确认</Button>
                <Button disabled={confirmLoading} type="link" onClick={() => { history.goBack(); }}>返回上一级</Button>

              </Space>
            </Row>
            {/* </Spin> */}
          </Card>
        </ConfigProvider>
      </PageHeaderWrapper>
    );
  }