src/pages/crm_new/Settings/index.tsx

/*
 * @Date: 2021-03-25 14:07:57
 * @LastEditors: wangqiang@feewee.cn
 * @LastEditTime: 2021-03-29 17:58:06
 */
import React, { useState } from 'react';
import { history } from 'umi';
import { Card, ConfigProvider, List, Input, message, Row, Modal, Col } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
  getFollowDeregulationTimesApi,
  saveFollowDeregulationTimesApi,
  getFindTakeAwayTimesApi,
  saveFindTakeAwayTimesApi,
  getFindInviteTimeApi,
  saveFindInviteTimeApi,
  getLegworkVisitApi,
  saveLegworkVisitApi,
  getTestDriveDay,
  saveTestDriveDay,
} from './api';
import Item from './components/Item';
enum Type {
  '邀约设置' = 1,
  '外勤拜访设置'
}
export default function Settings() {
  const [modalParams, setModalParams] = useState<{ title?: string, visible: boolean, type?: 1 | 2, value?: string | number }>({ visible: false });
  const [confirmLoading, setConfirmLoading] = useState(false);
  // Modal相关
  const getModalInfo = (type: 1 | 2) => {
    if (type === Type['邀约设置']) {
      getFindInviteTimeApi().then(res => {
        setModalParams({
          ...modalParams,
          type,
          title: Type[type],
          visible: true,
          value: `${res.data || ''}`
        });
      }).catch(error => {
        message.error(error.message);
      });
    }
    if (type === Type['外勤拜访设置']) {
      getLegworkVisitApi().then(res => {
        setModalParams({
          ...modalParams,
          type,
          title: Type[type],
          visible: true,
          value: `${res.data}`
        });
      }).catch(error => {
        message.error(error.message);
      });
    }
  };
  const onOk = () => {
    if (!modalParams.value) {
      message.error("请填写后再进行提交!");
      return false;
    }
    setConfirmLoading(true);
    if (modalParams.type === Type['邀约设置']) {
      saveFindInviteTimeApi({ inviteTime: +modalParams.value! }).then(res => {
        message.success(res.result);
        setModalParams({ ...modalParams, visible: false });
        setConfirmLoading(false);
      }).catch(error => {
        message.error(error.message);
        setConfirmLoading(false);
      });
    }
    if (modalParams.type === Type['外勤拜访设置']) {
      saveLegworkVisitApi({ legworkVisit: +modalParams.value! }).then(res => {
        message.success(res.result);
        setModalParams({ ...modalParams, visible: false });
        setConfirmLoading(false);
      }).catch(error => {
        message.error(error.message);
        setConfirmLoading(false);
      });
    }
  };
  const onCancel = () => {
    setModalParams({ ...modalParams, visible: false });
  };
  return (
    <PageHeaderWrapper title="设置">
      <ConfigProvider locale={zhCN}>
        <Card bordered={false}> 
          <List itemLayout="horizontal">
            {/* <Item title="销售线索转化有效时长(超期将被划走)" name="followChannelValidTime" suffix="&nbsp;&nbsp;小时" saveApi={saveFollowChannel} getApi={getFollowChannel} /> */}
            {/* 集客跟进 */}
            {/* <List.Item actions={[<a onClick={() => history.push('/crm/collectionFollowSetting')}>查看</a>]}>
              <List.Item.Meta title="集客跟进" />
            </List.Item> */}
            {/* 潜客跟进 */}
            {/* <List.Item actions={[<a onClick={() => history.push('/crm/potentialCollectionFollowSetting')}>查看</a>]}>
              <List.Item.Meta title="潜客跟进" />
            </List.Item> */}
            {/* 龚昆修改整合：集客跟进，潜客跟进到一个新的页面 */}
            <div style={{ width: '100%', height: 40 }} />
            <List.Item actions={[<a onClick={() => history.push('/crm/closeClue')}>查看</a>]}>
              <List.Item.Meta title="暂停区域线索站岗分配资格设置" />
            </List.Item>
            <List.Item actions={[<a onClick={() => history.push('/crm/followUpSettings')}>查看</a>]}>
              <List.Item.Meta title="跟进设置" />
            </List.Item>
            {/* 龚昆新增：员工分享成交奖励设置 */}
            <List.Item actions={[<a onClick={() => history.push('/crm/RewardForEmployeeRecruitment')}>查看</a>]}>
              <List.Item.Meta title="员工分享成交奖励设置" />
            </List.Item>
            {/* 龚昆新增：首客推荐奖励设置 */}
            <List.Item actions={[<a onClick={() => history.push('/crm/FirstCustomerRecommendationReward')}>查看</a>]}>
              <List.Item.Meta title="销顾首客推荐线索奖励设置" />
            </List.Item>
            {/* 跟进违规X次划走 */}
            <Item title="跟进违规X次划走" name="followDeregulationTimes" suffix="&nbsp;&nbsp;次" saveApi={saveFollowDeregulationTimesApi} getApi={getFollowDeregulationTimesApi} />
            {/* 划走X次放入公共池 */}
            <Item title="划走X次放入公共池" name="takeAwayTimes" suffix="&nbsp;&nbsp;次" saveApi={saveFindTakeAwayTimesApi} getApi={getFindTakeAwayTimesApi} />
            <div style={{ width: '100%', height: 40 }} />
            {/* 邀约设置 */}
            <List.Item actions={[<a onClick={() => getModalInfo(Type['邀约设置'])}>编辑</a>]}>
              <List.Item.Meta title="邀约设置" />
            </List.Item>
            {/* 外勤拜访设置 */}
            <List.Item actions={[<a onClick={() => getModalInfo(Type['外勤拜访设置'])}>编辑</a>]}>
              <List.Item.Meta title="外勤拜访设置" />
            </List.Item>
            {/* 集客归属地设置 */}
            <List.Item actions={[<a onClick={() => history.push('/crm/collectionRegionSetting')}>查看</a>]}>
              <List.Item.Meta title="集客归属地设置" />
            </List.Item>
            <Item title="首次接待试驾≥" name="days" suffix="&nbsp;&nbsp;天后下定或成交" saveApi={saveTestDriveDay} getApi={getTestDriveDay} />
            <div style={{ width: '100%', height: 40 }} />
            {/* 销售顾问站岗轮换时间 */}
            {/* <Item title="销售顾问站岗轮换时间" name="standGuardRotate" suffix="&nbsp;&nbsp;小时" saveApi={saveStandGuardRotateApi} getApi={getStandGuardRotateApi} /> */}
            {/* 直接集客销售顾问奖励设置 */}
            {/* <Item title="直接集客销售顾问奖励" name="bonus" suffix="&nbsp;&nbsp;元/人" saveApi={saveGatherConsultantBonusApi} getApi={getGatherConsultantBonusApi} /> */}
          </List>
          <Modal
            title={modalParams.title}
            visible={modalParams.visible}
            maskClosable={false}
            onOk={onOk}
            onCancel={onCancel}
            confirmLoading={confirmLoading}
            afterClose={() => setModalParams({ ...modalParams, title: undefined, type: undefined, value: undefined })}
          >
            {modalParams.type === Type['邀约设置'] ? (
              <Row justify="space-between" align="middle">
                <Col><span>邀约时间设置</span></Col>
                <Col>
                  <Input
                    allowClear
                    type="number"
                    value={modalParams.value}
                    onChange={e => setModalParams({ ...modalParams, value: e.target.value })}
                    prefix="到店前"
                    suffix="&nbsp;&nbsp;小时"
                  />
                </Col>
              </Row>
            ) : null}
            {modalParams.type === Type['外勤拜访设置'] ? (
              <Row justify="space-between" align="middle">
                <Col><span>客户拜访次数限制</span></Col>
                <Col>
                  <Input
                    allowClear
                    type="number"
                    value={modalParams.value}
                    onChange={e => setModalParams({ ...modalParams, value: e.target.value })}
                    suffix="&nbsp;&nbsp;次"
                  />
                </Col>
              </Row>
            ) : null}
          </Modal>
        </Card>
      </ConfigProvider>
    </PageHeaderWrapper>
  );
}