Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

package.json

@@ -45,6 +45,7 @@
     "bizcharts": "^4.0.14",
     "copy-to-clipboard": "^3.3.1",
     "god": "0.2.1",
+    "immutability-helper": "^3.1.1",
     "lingxi-design": "^1.0.8",
     "lingxi-design-ui": "^1.1.10",
     "lingxi-editor-core": "^1.0.6",
@@ -59,6 +60,8 @@
     "qrcode": "^1.4.4",
     "query-string": "^6.13.1",
     "react": "^16.12.0",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.12.0",
     "react-fontawesome": "^1.7.1",
     "react-image-crop": "^8.6.4",

src/pages/home/components/Centers/AfterSoldCenter.tsx

@@ -39,7 +39,7 @@ const SettlementAbility: React.FC<Iprops> = () => {
                   {
                     record.list.map((item) => {
                       return (
-                        <Col span={4} key={item}>
+                        <Col span={4} key={item} className={styles.col}>
                           <div className={styles.colTitle}>待提交审核咨询单</div>
                           <div className={styles.colValue}>5</div>
                         </Col>    

src/pages/home/components/Centers/ProcessCenter.tsx

@@ -29,7 +29,7 @@ const ProcessCenter: React.FC<Iprops> = () => {
                 {
                   record.list.map((item) => {
                     return (
-                      <Col span={4} key={item}>
+                      <Col span={4} key={item} className={styles.col}>
                         <div className={styles.colTitle}>待提交审核咨询单</div>
                         <div className={styles.colValue}>5</div>
                       </Col>    

src/pages/home/components/Centers/ProductCenter.tsx

@@ -33,7 +33,7 @@ const ProductCenter: React.FC<Iprops> = () => {
                 {
                   record.list.map((item) => {
                     return (
-                      <Col span={4} key={item}>
+                      <Col span={4} key={item} className={styles.col}>
                         <div className={styles.colTitle}>待提交审核咨询单</div>
                         <div className={styles.colValue}>5</div>
                       </Col>    

src/pages/home/components/Centers/SettlementCenter.tsx

@@ -81,7 +81,7 @@ const SettlementCenter: React.FC<Iprops> = () => {
                     {
                       record.list.map((item) => {
                         return (
-                          <Col span={4} key={item}>
+                          <Col span={4} key={item} className={styles.col}>
                             <div className={styles.colTitle}>待提交审核咨询单</div>
                             <div className={styles.colValue}>5</div>
                           </Col>    

src/pages/home/components/Centers/TradeCenter.tsx

@@ -21,7 +21,7 @@ const TradeCenter: React.FC<Iprops> = () => {
     },
     {
       id: 4,
-      list: [1,2,3,4,5,6]
+      list: [1,2,3,4,5,6,7,8,9,10]
     },
     {
       id: 5,
@@ -51,7 +51,7 @@ const TradeCenter: React.FC<Iprops> = () => {
                 {
                   record.list.map((item) => {
                     return (
-                      <Col span={4} key={item}>
+                      <Col span={4} key={item} className={styles.col}>
                         <div className={styles.colTitle}>待提交审核咨询单</div>
                         <div className={styles.colValue}>5</div>
                       </Col>    

src/pages/home/components/Centers/center.less

 .row {
-  padding: 24px 0;
+  padding: 0px 0px 12px 0;
   .rowTitle {
     font-size: 14;
     font-weight: 400;
     color: #303133;
+    margin-top: 24px;
   }
   
   .colRow {
     display: flex;
+    flex-wrap: wrap;
+
+    .col {
+      margin-top: 24px;
+    }
     .colTitle {
       font-size: 12px;
       font-weight: 400;

src/pages/home/components/CustomWorkBench/Card.tsx

+import React, { useRef } from 'react'
+import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd'
+// import { ItemTypes } from './ItemTypes'
+import { XYCoord } from 'dnd-core'
+import { Checkbox } from 'antd'
+
+const style = {
+  width: '352px',
+  height: '40px',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',  
+  border: '1px solid #EEF0F3',
+  padding: '14px 16px',
+  marginBottom: '12px',
+  backgroundColor: 'white',
+  cursor: 'move',
+}
+
+const ItemTypes = {
+  CARD: 'card'
+}
+
+export interface CardProps {
+  id: any
+  text: string
+  index: number
+  moveCard: (dragIndex: number, hoverIndex: number) => void
+}
+
+interface DragItem {
+  index: number
+  id: string
+  type: string
+}
+export const Card: React.FC<CardProps> = ({ id, text, index, moveCard }) => {
+  const ref = useRef<HTMLDivElement>(null)
+  const [, drop] = useDrop({
+    accept: ItemTypes.CARD,
+    hover(item: DragItem, monitor: DropTargetMonitor) {
+      if (!ref.current) {
+        return
+      }
+      const dragIndex = item.index
+      const hoverIndex = index
+
+      if (dragIndex === hoverIndex) {
+        return
+      }
+
+      const hoverBoundingRect = ref.current?.getBoundingClientRect()
+      const hoverMiddleY =
+        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
+
+      const clientOffset = monitor.getClientOffset()
+      const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return
+      }
+
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return
+      }
+
+      moveCard(dragIndex, hoverIndex)
+      item.index = hoverIndex
+    },
+  })
+
+  const [{ isDragging }, drag] = useDrag({
+    item: { type: ItemTypes.CARD, id, index },
+    collect: (monitor: any) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  })
+
+  const opacity = isDragging ? 0 : 1
+  drag(drop(ref))
+  return (
+    <div ref={ref} style={{ ...style, opacity }}>
+      <span>
+        {text}
+      </span>
+      <Checkbox />
+    </div>
+  )
+}

src/pages/home/components/CustomWorkBench/DragSortList.tsx

+import React, { useState, useCallback, useEffect } from 'react'
+import { Card } from './Card'
+import update from 'immutability-helper'
+
+const style = {
+  height: "500px",
+  display: "flex",
+  flexDirection: "column",
+  flexWrap: "wrap",
+}
+
+export interface Item {
+  id: number
+  text: string
+}
+
+export interface ContainerState {
+  cards: Item[]
+}
+
+interface Iprops {
+  cards: any[],
+  moveCard: (dragIndex: number, hoverIndex: number) => void
+}
+
+const Container: React.FC<Iprops> = (props) => {
+  const { cards } = props;
+
+  const renderCard = (card: { id: number; text: string }, index: number) => {
+    return (
+      <Card
+        key={card.id}
+        index={index}
+        id={card.id}
+        text={card.text}
+        moveCard={props.moveCard}
+      />
+    )
+  }
+
+  return (
+    <>
+      <div style={style}>{cards.map((card, i) => renderCard(card, i))}</div>
+    </>
+  )
+}
+
+export default Container

src/pages/home/components/CustomWorkBench/Draggable.tsx

-import React, {useState, useCallback, useMemo, useEffect} from 'react';
-
-const POSITION = {x: 0, y: 0};
-
-const Draggable = ({children, id, onDrag, onDragEnd}) => {
-  const [state, setState] = useState({
-    isDragging: false,
-    origin: POSITION,
-    translation: POSITION
-  });
-    
-  const handleMouseDown = useCallback(({clientX, clientY}) => {
-    setState(state => ({
-      ...state,
-      isDragging: true,
-      origin: {x: clientX, y: clientY}
-    }));
-  }, []);
-    
-  const handleMouseMove = useCallback(({clientX, clientY}) => {
-    const translation = {x: clientX - state.origin.x, y: clientY - state.origin.y};
-        
-    setState(state => ({
-      ...state,
-      translation
-    }));
-        
-    onDrag({translation, id});
-  }, [state.origin, onDrag, id]);
-    
-  const handleMouseUp = useCallback(() => {
-    setState(state => ({
-      ...state,
-      isDragging: false
-    }));
-        
-    onDragEnd();
-  }, [onDragEnd]);
-    
-  useEffect(() => {
-    if (state.isDragging) {
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('mouseup', handleMouseUp);
-    } else {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
-
-      setState(state => ({...state, translation: {x: 0, y: 0}}));
-    }
-  }, [state.isDragging, handleMouseMove, handleMouseUp]);
-    
-  const styles = useMemo(() => ({
-    cursor: state.isDragging ? '-webkit-grabbing' : '-webkit-grab',
-    transform: `translate(${state.translation.x}px, ${state.translation.y}px)`,
-    transition: state.isDragging ? 'none' : 'transform 500ms',
-    zIndex: state.isDragging ? 2 : 1,
-    
-    position: state.isDragging ? 'absolute' : 'static'
-  }), [state.isDragging, state.translation]);
-    
-  return (
-    <div style={styles} onMouseDown={handleMouseDown}>
-      {children}
-    </div>
-  );
-};
-
-export default Draggable;
\ No newline at end of file

src/pages/home/components/CustomWorkBench/SortedList.tsx

-import React, {useState, useCallback} from 'react';
-import styled from 'styled-components';
-import {range, inRange} from 'lodash';
-import Draggable from './Draggable';
-import { Checkbox } from 'antd';
-
-const MAX = 11;
-const HEIGHT = 40;
-
-const SortedList = () => {
-  const items = range(MAX);
-  const [state, setState] = useState({
-    order: items,
-    dragOrder: items, 
-    draggedIndex: null
-  });
-    
-  const handleDrag = useCallback(({translation, id}) => {
-    const delta = Math.round(translation.y / HEIGHT);
-    const index = state.order.indexOf(id);
-    const dragOrder = state.order.filter(index => index !== id);
-        
-    if (!inRange(index + delta, 0, items.length)) {
-      return;
-    }
-        
-    dragOrder.splice(index + delta, 0, id);
-        
-    setState(state => ({
-      ...state,
-      draggedIndex: id,
-      dragOrder
-    }));
-  }, [state.order, items.length]);
-    
-  const handleDragEnd = useCallback(() => {
-    setState(state => ({
-      ...state,
-      order: state.dragOrder,
-      draggedIndex: null
-    }));
-  }, []);
-    
-  return (
-    <Container>
-      {items.map(index => {
-        const isDragging = state.draggedIndex === index;
-        const top = state.dragOrder.indexOf(index) * (HEIGHT + 10);
-        const draggedTop = state.order.indexOf(index) * (HEIGHT + 10);
-                
-        return (
-          <Draggable
-            key={index}
-            id={index}
-            onDrag={handleDrag}
-            onDragEnd={handleDragEnd}
-          >
-            <Rect
-              isDragging={isDragging}
-              top={isDragging ? draggedTop : top}
-            >
-              <div>交易能力-{`${index}`}</div>
-              <div><Checkbox /></div>
-            </Rect>
-          </Draggable>
-        );
-      })}
-    </Container>
-  );
-};
-
-export default SortedList;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  position: relative;
-  height: 522px;
-`;
-
-const Rect = styled.div.attrs(props => ({
-  style: {
-    transition: props.isDragging ? 'none' : 'all 500ms'
-  }
-}))`
-  width: 352px;
-  user-select: none;
-  height: ${HEIGHT}px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;  
-  border: 1px solid #EEF0F3;
-  padding: 14px 16px;
-  margin-bottom: 12px;
-  background: #fff;
-  position: absolute;
-  top: ${({top}) => top}px;
-  left: 0
-`;
\ No newline at end of file

src/pages/home/components/CustomWorkBench/index.tsx

-import React, { useState} from 'react';
-import { Modal, Button, Checkbox } from 'antd';
-import { AppstoreOutlined } from '@ant-design/icons';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal } from 'antd';
 import styles from './index.less';
 import { CloseOutlined } from '@ant-design/icons';
-import SortedList from './SortedList';
+import { DndProvider } from 'react-dnd'
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import DragSortList from './DragSortList';
+import update from 'immutability-helper'
 
-interface Iprops {}
+interface Iprops {
+  centerOrder: any,
+  handleChangeOrder: (list: any[]) => void
+}
 
-const CustomWorkBench: React.FC<Iprops> = () => {
-  const [visible, setVisible] = useState(false);
+const TEXT = {
+  ["shop"]: '店铺中心',
+  ["trade"]: '交易中心',
+  ["process"]: '加工中心',
+  ["settlement"]: '资金与结算中心',
+  ["afterSold"]: "售后中心",
+  ["logistics"]: '物流中心',
+  ["product"]: '商品中心'
+}
 
+const CustomWorkBench: React.FC<Iprops> = (props) => {
+  const { centerOrder } = props;
+  const [ cards, setCards ] = useState([]); 
+  const [visible, setVisible] = useState<boolean>(false);
   const handleVisible = () => {
     setVisible(true)
   }
@@ -18,6 +34,36 @@ const CustomWorkBench: React.FC<Iprops> = () => {
     setVisible(false)
   }
 
+  useEffect(() => {
+    const data = Object.keys(centerOrder).map((item) => ({
+      id: centerOrder[item],
+      key: item,
+      text: TEXT[item]
+    }))
+    setCards(data)
+  }, [centerOrder])
+
+  
+  const moveCard = useCallback(
+    (dragIndex: number, hoverIndex: number) => {
+      const dragCard = cards[dragIndex]
+      setCards(
+        update(cards, {
+          $splice: [
+            [dragIndex, 1],
+            [hoverIndex, 0, dragCard],
+          ],
+        }),
+      )
+    },
+    [cards],
+  )
+
+  const handleOk = () => {
+    props.handleChangeOrder && props.handleChangeOrder(cards);
+    setVisible(false);
+  }
+
   return (
     <div className={styles.customWorkBench}>
       <div className={styles.btn} onClick={handleVisible}>
@@ -30,6 +76,7 @@ const CustomWorkBench: React.FC<Iprops> = () => {
         onCancel={handleCancel}
         closable={false}
         bodyStyle={{padding: 0}}
+        onOk={handleOk}
       >
         <div className={styles.modalContainer}>
           <div className={styles.header}>
@@ -42,7 +89,9 @@ const CustomWorkBench: React.FC<Iprops> = () => {
             </div>
           </div>
           <div className={styles.content}>
-            <SortedList />
+            <DndProvider backend={HTML5Backend}>
+              <DragSortList cards={cards} moveCard={moveCard} />
+            </DndProvider>
           </div>
           <div className={styles.footer}>
             <div className={styles.sortTips}>

src/pages/home/index.less

@@ -10,6 +10,8 @@
     // flex-basis: 1206px;
     margin-right: 23px;
     flex: 1;
+    display: flex;
+    flex-direction: column;
 
     .ability {
       margin-top: 24px;

src/pages/home/index.tsx

 import React, { useState, useEffect } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
-import { Row, Col } from 'antd';
+import { Row, Col, Button } from 'antd';
 import UseGuaid from './components/UseGuaid';
 import UserCenter from './components/UserCenter';
 import CustomWorkBench from './components/CustomWorkBench';
@@ -13,7 +13,27 @@ import styles from './index.less'
 import { CompassFilled } from '@ant-design/icons';
 
 const Home: React.FC<{}> = () => {
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [centerOrder, setCenterOrder] = useState<any>({
+    trade: 1,
+    shop: 2,
+    product: 3,
+    settlement: 4,
+    afterSold: 5,
+    logistics: 6,
+    process: 7
+  })
+
+  const handleChangeOrder = (list) => {
+    console.log(list);
+    let res = {}
+    list.forEach((item, index) => {
+      res[item.key] = index + 1
+    })
+    console.log(res);
+    setCenterOrder(res);
+  }
+
   return (
     <PageHeaderWrapper>
       <>
@@ -25,31 +45,31 @@ const Home: React.FC<{}> = () => {
             <div>
               <UserCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["trade"]}}>
               <TradeCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["shop"]}}>
               <ShopCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["product"]}}>
               <ProductCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["settlement"]}}>
               <SettlementCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["afterSold"]}}>
               <AfterSoldCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["logistics"]}}>
               <LogisticsCenter />
             </div>
-            <div className={styles.ability}>
+            <div className={styles.ability} style={{order: centerOrder["process"]}}>
               <ProcessCenter />
             </div>
           </div>
           <div className={styles.rightSide}>
             <Row gutter={24}>
-              <Col><CustomWorkBench /></Col>
+              <Col><CustomWorkBench centerOrder={centerOrder} handleChangeOrder={handleChangeOrder} /></Col>
               <Col>
                 <div className={styles.controller} onClick={() => setVisible((state) => !state)}>
                   <CompassFilled className={styles.icon} />