线索目标接通配置

舒述军
1 parent 0a763d83
Showing 7 changed files with 333 additions and 1 deletions
config/routers/crm_new.ts
src/pages/crm_new/CluesConnectTargetEffectively/api.ts
src/pages/crm_new/CluesConnectTargetEffectively/components/EditModal.tsx
src/pages/crm_new/CluesConnectTargetEffectively/components/List.tsx
src/pages/crm_new/CluesConnectTargetEffectively/components/ShopModal.tsx
src/pages/crm_new/CluesConnectTargetEffectively/index.tsx
src/pages/crm_new/CluesConnectTargetEffectively/store.ts
@@ -77,8 +77,12 @@ export default [
     path: '/crm/threePartyPlatformClue', // 三方平台线索配置
     component: './crm_new/ThreePartyPlatformClue',
   },
-    {
+  {
     path: '/crm/closeClue', // 暂停区域线索站岗分配
     component: './crm_new/Settings/subpages/CloseClue',
   },
+  {
+    path: '/crm/clueConnect', // 线索有效接通配置
+    component: './crm_new/CluesConnectTargetEffectively',
+  },
 ];
 \ No newline at end of file
+import request from '@/utils/request';
+import { CRM_HOST } from '@/utils/host';
+
+export interface Result {
+  id?: number // 配置id
+  dialAims?: number // 线索接通目标
+  displayName?: string // 显示名称
+  shopList?: ShopList[] // 门店列表
+}
+
+export interface ShopList {
+  shopId?: number // 门店id
+  shopName?: string // 门店名称
+}
+
+/** 查询线索拨通目标配置列表 */
+export function getConfigApi() {
+  return request.get<Result[]>(`${CRM_HOST}/erp/clue/dial/aims/config/list`);
+}
+
+/** 查询线索拨通目标已配置的门店 */
+export function getHaveShopListApi() {
+  return request.get<number[]>(`${CRM_HOST}/erp/clue/dial/aims/config/already/exists/shopIds`);
+}
+
+/** 保存线索拨通目标配置 */
+export function saveConfigApi(params: Result) {
+  return request.post<Result>(`${CRM_HOST}/erp/clue/dial/aims/config/save`, params);
+}
+
+/** 删除线索拨通目标配置 */
+export function deleteConfigApi(id?: number) {
+  return request.post<Result>(`${CRM_HOST}/erp/clue/dial/aims/config/delete`, {id}, {contentType: 'form-urlencoded'});
+}
 \ No newline at end of file
+import React, { useState, useEffect } from 'react';
+import { Button, Form, message, InputNumber, Select, Modal} from 'antd';
+import ShopSelectNew from '@/components/ShopSelectNew';
+import { useStore } from '../index';
+import { saveConfigApi, getHaveShopListApi } from '../api';
+import { debounce } from 'lodash';
+
+const Option = Select.Option;
+
+export default function Index() {
+  const [form] = Form.useForm();
+  const { current, setCurrent, setLoading } = useStore();
+  const [confirm, setConfirm] = useState<boolean>(false);
+  const [disabledShopIds, setDisabledShopIds] = useState<number[]>([]);
+
+  useEffect(() => {
+    if (current.visible && current.data.id) {
+      handleSetValue();
+      const shopList = current.data.shopList || [];
+      getHaveShopListApi()
+      .then(res => {
+        const shopIdList = res.data || [];
+        const _shopIds = shopList.map(v => v.shopId) || [];
+        const disabledShop = shopIdList.filter(v => !(_shopIds.includes(v))) || [];
+        setDisabledShopIds(disabledShop);
+      })
+      .catch(e => {
+        message.error(e.message);
+      });
+    } else {
+      getHaveShopListApi()
+      .then(res => {
+        const shopIdList = res.data || [];
+        setDisabledShopIds(shopIdList);
+      })
+      .catch(e => {
+        message.error(e.message);
+      });
+    }
+  }, [current.visible]);
+
+  function handleCancle() {
+    setCurrent({visible: false, data: {}});
+  }
+
+  async function handleSubmit() {
+    const params = await form.validateFields();
+    setConfirm(true);
+    const _params = {
+      id: current.data?.id,
+      dialAims: params.dialAims,
+      shopList: params.shopList?.map((v: any) => ({shopId: v.value, shopName: v.label}))
+    };
+    saveConfigApi(_params)
+    .then(res => {
+      message.success(res.result);
+      setConfirm(false);
+      setCurrent({visible: false, data: {}});
+      setLoading(true);
+    })
+    .catch(e => {
+      message.error(e.message);
+      setConfirm(false);
+    });
+  }
+
+  function handleSetValue() {
+    form.setFieldsValue({
+      dialAims: current.data.dialAims,
+      shopList: current.data.shopList?.map((v: any) => ({label: v.shopName, value: v.shopId}))
+    });
+  }
+
+  function handleResetValue() {
+    form.setFieldsValue({shopList: [], dialAims: undefined});
+  }
+  return (
+    <Modal
+      title={current.data.id ? "编辑" : "新增"}
+      destroyOnClose
+      visible={current.visible}
+      maskClosable={false}
+      onCancel={handleCancle}
+      afterClose={() => handleResetValue()}
+      width="60%"
+      footer={[
+        <Button key="cancel" disabled={confirm} onClick={handleCancle} style={{marginLeft: 10}}>取消</Button>,
+        <Button key="submit" disabled={confirm} onClick={debounce(handleSubmit, 380)} type="primary" htmlType="submit" loading={confirm}>确认</Button>
+        ]}
+    >
+      <Form
+        form={form}
+        labelCol={{ span: 8 }}
+        wrapperCol={{ span: 10 }}
+      >
+
+        <Form.Item
+          label="线索有效接通目标"
+          name="dialAims"
+          rules={[{ required: true, message: "请输入" }]}
+        >
+          <InputNumber
+            style={{width: '100%'}}
+            controls={false}
+            min={0}
+            formatter={value => `${value}条/天`}
+            precision={0}
+            parser={value => value?.replace('条/天', '')}
+          />
+        </Form.Item>
+        <Form.Item
+          label="适用门店"
+          name="shopList"
+          rules={[{ required: true, message: "请选择门店" }]}
+          labelAlign="right"
+        >
+          <ShopSelectNew disabledShopIds={disabledShopIds} defaultOptions={{bizTypes: "1"}} placeholder="请选择门店" multiple />
+        </Form.Item>
+        
+      </Form>
+
+    </Modal>
+  );
+}
 \ No newline at end of file
+import React from "react";
+import { message, Popconfirm, Table, Space } from "antd";
+import { useStore } from '../index';
+import {deleteConfigApi, Result } from '../api';
+
+const Column = Table.Column;
+
+export default function TableList() {
+  const {data, loading, setLoading, setShopData, setCurrent } = useStore();
+
+  function handleDelete(id?: number) {
+    deleteConfigApi(id)
+    .then(res => {
+      message.success(res.result);
+      setLoading(true);
+    })
+    .catch(e => {
+      message.error(e.message);
+    });
+  }
+
+  return (
+    <div>
+      <Table
+        dataSource={data}
+        pagination={false}
+        loading={loading}
+        rowKey="id"
+      >
+        <Column
+          title="上班期间线索有效接通目标(条/天)"
+          align="left"
+          dataIndex="dialAims"
+        />
+        <Column
+          title="适用门店"
+          align="left"
+          dataIndex="displayName"
+          render={(_text: string, record: Result) => <span style={{color: "#4189FD"}} onClick={() => setShopData({visible: true, data: record.shopList || []})}>{_text}</span>}
+        />
+        <Column
+          title="操作"
+          align="left"
+          render={(_text, record: Result) => {
+            return (
+              <Space>
+                <a onClick={() => setCurrent({visible: true, data: record})} style={{ display: "block", color: "#4189FD" }}>编辑</a>
+                <Popconfirm
+                  title="是否删除？"
+                  okText="确定"
+                  cancelText="取消"
+                  onConfirm={() => handleDelete(record.id)}
+                >
+                  <a style={{color: "#EC3F2F"}}>删除</a>
+                </Popconfirm>
+              </Space>
+            );
+          }}
+        />
+      </Table>
+    </div>
+  );
+}
+import React, {useEffect, useState} from 'react';
+import {Modal, Button, List} from 'antd';
+import { useStore } from '../index';
+
+export default function Index() {
+  const {shopData, setShopData } = useStore();
+
+  function handleCancel() {
+    setShopData({visible: false, data: []});
+  }
+
+  return (
+    <Modal
+      destroyOnClose
+      title="适用门店"
+      visible={shopData.visible}
+      maskClosable={false}
+      onCancel={handleCancel}
+      footer={[]}
+    >
+      <List
+        size="large"
+        style={{height: '300px', overflow: 'scroll'}}
+        dataSource={shopData?.data || []}
+        renderItem={(item: any) => <List.Item style={{justifyContent: 'center'}}>{item.shopName}</List.Item>}
+      />
+      <div
+        style={{
+            textAlign: 'center',
+            marginTop: 12,
+            height: 32,
+            lineHeight: '32px',
+          }}
+      ><Button type="primary" onClick={handleCancel}>返回</Button>
+      </div>
+    </Modal>
+  );
+}
 \ No newline at end of file
+import React, {useState} from 'react';
+import { Card, Button, Row, Col } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { createStore } from '@/hooks/moz';
+import store from './store';
+import List from './components/List';
+import EditModal from './components/EditModal';
+import ShopModal from './components/ShopModal';
+// import ShopSelectNew from '@/components/ShopSelectNew';
+
+export const { Provider, useStore } = createStore(store);
+
+function Index() {
+  const { setParams, setCurrent } = useStore();
+  const [selected, setSelected] = useState<any>([]);
+
+  function handleOnChange(value: any) {
+    setParams({shopId: value[0]?.value || undefined}, true);
+    setSelected(value || []);
+  }
+  return (
+    <PageHeaderWrapper title={<Row align="middle"><span style={{width: "5px", height: "20px", backgroundColor: "#448EF7", borderRadius: "3px", display: 'inline-block', marginRight: "10px"}} /><span>线索有效接通目标</span></Row>}>
+      <Card>
+        <Row justify="end" style={{ marginBottom: 20 }}>
+          {/* <Col span={10}>
+            <ShopSelectNew value={selected} onChange={handleOnChange} defaultOptions={{bizTypes: "1"}} placeholder="请选择门店" />
+          </Col> */}
+          <Button onClick={() => setCurrent({visible: true, data: {}})} type="primary">新增</Button>
+        </Row>
+        <List />
+        <EditModal />
+        <ShopModal />
+      </Card>
+    </PageHeaderWrapper>
+  );
+}
+
+export default () => <Provider><Index /></Provider>;
+import React, { useState } from 'react';
+import useInitial from '@/hooks/useInitail';
+import {getConfigApi, Result, ShopList} from './api';
+
+interface Current {
+  visible: boolean
+  data: Result
+}
+
+interface ShopData {
+  visible: boolean
+  data: ShopList[]
+}
+
+export default function useStore() {
+  const { data, loading, errMsg, setLoading, setParams, params } = useInitial(getConfigApi, [], {});
+  const [current, setCurrent] = useState<Current>({visible: false, data: {}});
+  const [shopData, setShopData] = useState<ShopData>({visible: false, data: []});
+  return {
+    data,
+    loading,
+    errMsg,
+    setLoading,
+    setParams,
+    params,
+    current,
+    setCurrent,
+    shopData,
+    setShopData
+  };
+}
 \ No newline at end of file