线索到店零售占比配置

舒述军
1 parent 3b916ae7
Showing 8 changed files with 205 additions and 49 deletions
config/routers/order3.ts
src/pages/order3/RetailTaskConfiguration/api.ts
src/pages/order3/RetailTaskConfiguration/components/EditMidal.tsx
src/pages/order3/RetailTaskConfiguration/components/List.tsx
src/pages/order3/RetailTaskConfiguration/components/ShopModal.tsx
src/pages/order3/RetailTaskConfiguration/index.less
src/pages/order3/RetailTaskConfiguration/index.tsx
src/pages/order3/RetailTaskConfiguration/store.ts
@@ -202,4 +202,8 @@ export default [
     path: "/order3/orderSetting/deliveryVideoConfig",
     component: "./order3/OrderSetting/DeliveryVideoConfig",
   },
+    { // 零售线索占比配置
+    path: "/order3/retailTaskConfiguration",
+    component: "./order3/RetailTaskConfiguration",
+  },
 ];
 \ No newline at end of file
@@ -2,11 +2,27 @@ import { http } from &#39;@/typing/http&#39;;
 import request from '@/utils/request';
 import { ORDER3 } from '@/utils/host';
  
+export interface List {
+  id?: number // id
+  retailRate?: number // 线索到店零售占比
+  shopList?: ShopList[] // 门店列表
+}
+
+export interface ShopList {
+  shopId?: number // 门店id
+  shopName?: string // 门店名称
+}
 /** 获取列表 */
-export function getRetailListApi(params?: any): http.PromiseResp<any> {
-  return request.get(`${ORDER3}/erp/sales/task/detail`, { params });
+export function getRetailListApi(): http.PromiseResp<any> {
+  return request.get(`${ORDER3}/erp/clue/deal/rate/config/list`);
 }
-// /*提交 */
-// export function save(id?: number) {
-//   return request.post(`${ORDER3}/erp/sales/task/submit`, { id }, { contentType: 'form-urlencoded' });
-// }
 \ No newline at end of file
+
+/* 新增编辑线索到店零售占比配置*/
+export function saveRetailConfigApi(params?: List) {
+  return request.post(`${ORDER3}/erp/clue/deal/rate/config/save`, params);
+}
+
+/* 删除线索到店零售占比配置*/
+export function fetchDeleteConfigApi(id?: number) {
+  return request.post(`${ORDER3}/erp/clue/deal/rate/config/delete`, { id }, { contentType: 'form-urlencoded' });
+}
 \ No newline at end of file
@@ -5,38 +5,63 @@ import { debounce } from &#39;lodash&#39;;
 import currency from 'currency.js';
 import useInitail from '@/hooks/useInitail';
 import { useStore } from '../index';
+import { saveRetailConfigApi } from '../api';
  
 const Option = Select.Option;
  
 export default function Index() {
   const [form] = Form.useForm();
-  const { visible, setVisible } = useStore();
+  const { visible, setVisible, current, setCurrent, setLoading } = useStore();
   const [confirm, setConfirm] = useState<boolean>(false);
  
   useEffect(() => {
-    if (visible) {
+    if (visible && current.id) {
       handleSetValue();
     }
   }, [visible]);
  
   function handleCancle() {
     setVisible(false);
+    setCurrent({});
   }
  
   async function handleSubmit() {
     const params = await form.validateFields();
     setConfirm(true);
+    const _params = {
+      id: current.id,
+      retailRate: params.retailRate,
+      shopList: params.shopList?.map((v: any) => ({shopId: v.value, shopName: v.label}))
+    };
+    saveRetailConfigApi(_params)
+    .then(res => {
+      message.success(res.result);
+      setVisible(false);
+      setConfirm(false);
+      setLoading(true);
+      setCurrent({});
+    })
+    .catch(e => {
+      message.error(e.message);
+      setConfirm(false);
+    });
   }
  
   function handleSetValue() {
-    form.setFieldsValue({});
+    form.setFieldsValue({
+      retailRate: current.retailRate,
+      shopList: current.shopList?.map(v => ({label: v.shopName, value: v.shopId}))
+    });
   }
   return (
     <Modal
+      title={current.id ? "编辑" : "新增"}
       destroyOnClose
       visible={visible}
       maskClosable={false}
       onCancel={handleCancle}
+      afterClose={() => form.setFieldsValue({shopList: [], retailRate: undefined})}
+      style={{minWidth: "500px"}}
       footer={[
         <Button key="cancel" onClick={handleCancle} style={{marginLeft: 10}}>取消</Button>,
         <Button key="submit" onClick={handleSubmit} type="primary" htmlType="submit" loading={confirm}>确认</Button>
@@ -55,29 +80,10 @@ export default function Index() {
         >
           <ShopSelectNew 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> */}
+
         <Form.Item
           label="线索到店零售台数占比"
-          name="shopList"
+          name="retailRate"
           rules={[{ required: true, message: "请选择门店" }]}
         >
           <InputNumber
 import React, { useState } from "react";
-import { message, Popconfirm, Table, Tooltip } from "antd";
+import { message, Popconfirm, Table, Space } from "antd";
 import moment from "moment";
+import { useStore } from '../index';
+import { fetchDeleteConfigApi, List } from '../api';
+import { isNil } from 'lodash';
  
 const Column = Table.Column;
  
-export default function List() {
+export default function TableList() {
+  const {data, loading, setLoading, setVisible, setCurrent, setStatusData } = useStore();
+
+  function handleDelete(id?: number) {
+    fetchDeleteConfigApi(id)
+    .then(res => {
+      message.success(res.result);
+      setLoading(true);
+    })
+    .catch(e => {
+      message.error(e.message);
+    });
+  }
+
+  function handleEdit(value?: List) {
+    setCurrent(value || {});
+    setVisible(true);
+  }
+
+  function handleLookShop(value: any = {}) {
+    setStatusData({visible: true, data: value.shopList || []});
+  }
+
   return (
     <div>
       <Table
-        // dataSource={list}
-        // pagination={paginationConfig}
-        // loading={loading}
+        dataSource={data}
+        pagination={false}
+        loading={loading}
         rowKey="id"
       >
         <Column
           title="适用门店"
           align="left"
-          dataIndex="brandName"
+          dataIndex="shopList"
+          render={(_text, record) => <span onClick={() => handleLookShop(record)} style={{color: "#4189FD"}}>查看</span>}
         />
         <Column
           title="线索到店零售台数占比"
           align="left"
-          dataIndex="brandName"
+          dataIndex="retailRate"
+          render={(_text, record: any) => <span>{isNil(record?.retailRate) ? "--" : `${record.retailRate}%`}</span>}
         />
         <Column
           title="操作"
           align="left"
           render={(_text, record: any) => {
             return (
-              <>
-                <a style={{ display: "block" }}>编辑</a>
+              <Space>
+                <a onClick={() => handleEdit(record)} style={{ display: "block", color: "#4189FD" }}>编辑</a>
                 <Popconfirm
                   title="是否删除？"
                   okText="确定"
                   cancelText="取消"
+                  onConfirm={() => handleDelete(record.id)}
                 >
-                  <a>删除</a>
+                  <a style={{color: "#EC3F2F"}}>删除</a>
                 </Popconfirm>
-              </>
+              </Space>
             );
           }}
         />
+import React, {useEffect, useState} from 'react';
+import {Modal, Button, List} from 'antd';
+import { useStore } from '../index';
+import styles from '../index.less';
+
+export default function Index() {
+  const { statusData, setStatusData } = useStore();
+  function handleCancel() {
+    setStatusData({visible: false, data: []});
+  }
+
+  return (
+    <Modal
+      destroyOnClose
+      title={<div className={styles.lineWrap}><span className={styles.line} /><span className={styles.lineText}>适用门店</span></div>}
+      visible={statusData.visible}
+      maskClosable={false}
+      onCancel={handleCancel}
+      footer={[]}
+      className={styles.modal}
+    >
+      <List
+        size="large"
+        style={{height: '300px', overflow: 'scroll'}}
+        dataSource={statusData?.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
+.title {
+  font-size: 18px;
+  color: #333;
+  font-weight: 600;
+}
+
+.warp {
+  display: flex;
+  direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.wrapItem {
+  display: inline-block;
+}
+
+.text {
+  color: #333;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.modal {
+  height: 400px;
+}
+
+.line {
+  width: 4px;
+  height: 20px;
+  background-color: #4189FD;
+  border-radius: 2px;
+  display: inline-block;
+}
+
+.lineText {
+  font-size: 18px;
+  color: #262626;
+  font-weight: bold;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.lineWrap {
+  display: flex;
+  align-items: center;
+}
+
+.lineSpace {
+  margin-bottom: 10px;
+}
 \ No newline at end of file
@@ -4,6 +4,8 @@ import { PageHeaderWrapper } from &#39;@ant-design/pro-layout&#39;;
 import { createStore } from '@/hooks/moz';
 import store from './store';
 import List from './components/List';
+import ShopModal from './components/ShopModal';
+import EditModal from './components/EditMidal';
  
 export const { Provider, useStore } = createStore(store);
  
@@ -12,10 +14,12 @@ function SubsidizedInterest() {
   return (
     <PageHeaderWrapper title="线索到店零售占比配置">
       <Card>
-        <Row justify="space-between" style={{ marginBottom: 20 }}>
+        <Row justify="end" style={{ marginBottom: 20 }}>
           <Button type="primary" onClick={() => setVisible(true)}>新增</Button>
         </Row>
         <List />
+        <ShopModal />
+        <EditModal />
       </Card>
     </PageHeaderWrapper>
   );
 import React, { useState } from 'react';
 import usePagination from '@/hooks/usePagination';
 import useInitial from '@/hooks/useInitail';
-import { getRetailListApi} from './api';
-import {getShopApi} from '@/common/api';
+import { getRetailListApi, List, ShopList} from './api';
+
+interface StatusData {
+  visible: boolean
+  data: ShopList[]
+}
  
 export default function useStore() {
-  const { list, setParams, setLoading, loading, paginationConfig, innerParams } = usePagination(getRetailListApi, {});
+  const { data, setParams, setLoading, loading } = useInitial(getRetailListApi, [], null);
   const [visible, setVisible] = useState<boolean>(false);
+  const [current, setCurrent] = useState<List>({});
+  const [statusData, setStatusData] = useState<StatusData>({visible: false, data: []});
   return {
-    list,
+    data,
     setParams,
-    innerParams,
     setLoading,
     loading,
-    paginationConfig,
     visible,
-    setVisible
+    setVisible,
+    current, 
+    setCurrent,
+    statusData,
+    setStatusData
   };
 }
 \ No newline at end of file