feat:完成h5店铺和web店铺banner列表页面布局

src/modules/store-manage/StoreDecorationPage.less

@@ -51,4 +51,18 @@
       cursor: pointer;
     }
   }
+  .row-dragging {
+    background: #fafafa;
+    border: 1px solid #ccc;
+  }
+  
+  .row-dragging td {
+    padding: 16px;
+    visibility: hidden;
+  }
+  
+  .row-dragging .drag-visible {
+    visibility: visible !important;
+    opacity: 1 !important;
+  }
 }

src/modules/store-manage/StoreH5DecorationTab.jsx

@@ -2,8 +2,8 @@
  * @Author: wufan
  * @Date: 2020-11-30 10:47:38
  * @LastEditors: wufan
- * @LastEditTime: 2020-12-14 15:19:21
- * @Description: 员工管理页面
+ * @LastEditTime: 2020-12-14 16:48:13
+ * @Description: h5店铺banner页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
 
@@ -29,20 +29,24 @@ const { confirm } = Modal;
 function StoreH5Decoration(props) {
   const [storeDecorationlist, setStoreDecorationlist] = useState([
     {
-      di:1111,
-      banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
+      id:1111,
+      banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
+      index:0
     },
     {
       di:1111,
-      banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg'
+      banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg',
+      index: 1
     },
     {
       di:1111,
-      banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg'
+      banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg',
+      index: 2
     },
     {
       di:1111,
-      banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png'
+      banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png',
+      index: 3
     }
   ]);
   const [query, setQuery] = useState({
@@ -202,7 +206,7 @@ function StoreH5Decoration(props) {
           pagination={false}
           dataSource={storeDecorationlist}
           columns={parseColumn()}
-          rowKey={(item) => item.id}
+          rowKey={(item) => item.index}
           components={{
             body: {
               wrapper: DraggableContainer,

src/modules/store-manage/StoreWebDecorationTab.jsx

+/*
+ * @Author: wufan
+ * @Date: 2020-11-30 10:47:38
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-14 16:56:23
+ * @Description: web店铺banner页面
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React from "react";
+import { withRouter } from "react-router-dom";
+import _ from "underscore";
+import { Table, Modal, message, Button } from "antd";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import StoreService from "@/domains/store-domain/storeService";
+import {
+  sortableContainer,
+  sortableElement,
+  sortableHandle,
+} from "react-sortable-hoc";
+import { MenuOutlined } from "@ant-design/icons";
+import arrayMove from "array-move";
+import "./StoreDecorationPage.less";
+
+const { confirm } = Modal;
+const DragHandle = sortableHandle(() => (
+  <MenuOutlined
+    style={{ cursor: "pointer", color: "#999" }}
+    className="drag-icon"
+  />
+));
+const SortableItem = sortableElement((props) => <tr {...props} />);
+const SortableContainer = sortableContainer((props) => <tbody {...props} />);
+
+class StoreWebDecoration extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      storeDecorationlist: [
+        {
+          id: '1111',
+          banner: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
+          index: 0,
+          key: "0",
+          name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
+        },
+        {
+          id: '222',
+          banner: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
+          index: 1,
+          key: '1',
+          name: '校长'
+        },
+        {
+          id: '333',
+          banner: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
+          index: 2,
+          key: '2'
+        }
+      ],
+      query: {
+        current: 0,
+        size: 10,
+      },
+    };
+  }
+
+  componentDidMount() {
+    // this.getStoreDecorationList();
+  }
+
+  getStoreDecorationList = () => {
+    let _query = _.clone(query);
+    _query.current = query.current + 1;
+    StoreService.getStoreDecorationList(_query).then((res) => {
+      console.log(res.result.records);
+      this.setState({
+        storeDecorationlist: res.result.records,
+      });
+    });
+  };
+
+  parseColumn = () => {
+    return [
+      {
+        title: "Sort",
+        dataIndex: "sort",
+        width: 30,
+        className: "drag-visible",
+        render: () => <DragHandle />,
+      },
+      {
+        title: "index",
+        dataIndex: "index",
+        key: "index",
+        width: 20,
+        className: 'drag-visible',
+        render: (val, record, index) => {
+          return <div className="index-num">{index + 1}</div>;
+        },
+      },
+      {
+        title: "banner",
+        dataIndex: "banner",
+        key: "banner",
+        className: 'drag-visible',
+        render: (val) => {
+          return <img src={val} alt="banner" className="banner-thumbnail" />;
+        },
+      },
+      {
+        title: "操作",
+        dataIndex: "operation",
+        width: "20%",
+        className: 'drag-visible',
+        render: (val, record) => {
+          return (
+            <div className="operation">
+              <span
+                className="edit"
+                onClick={() => handleReplaceDecoration(record)}
+              >
+                替换
+              </span>
+              <span className="divider-line">{" | "}</span>
+              <span
+                className="delete"
+                onClick={() => handleDeleteDecorationConfirm(record)}
+              >
+                删除
+              </span>
+            </div>
+          );
+        },
+      },
+    ];
+  };
+
+  handleReplaceDecoration = (record) => {};
+
+  handleDeleteDecoration = (record) => {};
+
+  handleDeleteDecorationConfirm = (record) => {
+    return confirm({
+      title: "你确定要删除这个banner吗？",
+      icon: <QuestionCircleOutlined />,
+      okText: "删除",
+      cancelText: "取消",
+      onOk: () => {
+        this.handleDeleteDecoration(record);
+      },
+    });
+  };
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { storeDecorationlist } = this.state;
+    if (oldIndex !== newIndex) {
+      const newData = arrayMove(
+        [].concat(storeDecorationlist),
+        oldIndex,
+        newIndex
+      ).filter((el) => !!el);
+      console.log("Sorted items: ", newData);
+      this.setState({ storeDecorationlist: newData });
+    }
+  };
+
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const { storeDecorationlist } = this.state;
+    // function findIndex base on Table rowKey props and should always be a right array index
+    const index = storeDecorationlist.findIndex(
+      (x) => x.index === restProps["data-row-key"]
+    );
+    return <SortableItem index={index} {...restProps} />;
+  };
+
+  render() {
+    const { storeDecorationlist } = this.state;
+    const DraggableContainer = (props) => (
+      <SortableContainer
+        useDragHandle
+        helperClass="row-dragging"
+        onSortEnd={this.onSortEnd}
+        {...props}
+      />
+    );
+    return (
+      <div className="user-manage-page">
+        <div className="box-header">
+          <div className="banner-setting">
+            <div className="title">banner设置</div>
+            <div className="tip">
+              图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750x252像素。
+            </div>
+          </div>
+          <Button
+            onClick={() => {
+              this.handleToAddStoreDecoration();
+            }}
+            type="primary"
+            className="add-show-btn"
+          >
+            添加Banner
+          </Button>
+        </div>
+        <div className="box-body">
+          <Table
+            size={"middle"}
+            pagination={false}
+            dataSource={storeDecorationlist}
+            columns={this.parseColumn()}
+            rowKey={(item) => item.index}
+            components={{
+              body: {
+                wrapper: DraggableContainer,
+                row: this.DraggableBodyRow,
+              },
+            }}
+            bordered
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withRouter(StoreWebDecoration);

src/modules/store-manage/StoreWebDecorationTab.tsx

-/*
- * @Author: wufan
- * @Date: 2020-11-30 10:47:38
- * @LastEditors: wufan
- * @LastEditTime: 2020-12-14 11:44:31
- * @Description: 员工管理页面
- * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
- */
-
-import React, { useEffect, useState } from "react";
-import { withRouter } from "react-router-dom";
-import _ from "underscore";
-import PageControl from "@/components/PageControl";
-import {
-  Table,
-  Modal,
-  message,
-  Row,
-  Col,
-  Input,
-  DatePicker,
-  Button,
-} from "antd";
-import { QuestionCircleOutlined } from "@ant-design/icons";
-import StoreService from "@/domains/store-domain/storeService";
-
-import "./StoreDecorationPage.less";
-import moment from "moment";
-const { confirm } = Modal;
-const { Search } = Input;
-const { RangePicker } = DatePicker;
-
-declare var window: any;
-
-interface RecordTypes {
-  storeUserId: string;
-  role: string;
-}
-
-function StoreWebDecoration() {
-  const [storeDecorationlist, setStoreDecorationlist] = useState([
-    {
-      name: "赵云",
-      phone: "18767118672",
-      role: "0",
-      storeUserId: "",
-    },
-    {
-      name: "吕布",
-      phone: "18767118672",
-      role: "0",
-      storeUserId: "",
-    },
-  ]);
-  const [query, setQuery] = useState({
-    current: 0,
-    size: 10,
-    name: "",
-    phone: "",
-    identity: "ALL",
-    instId: "1837447" || window.currentUserInstInfo.instId,
-    registerStartDate: null,
-    registerEndDate: null,
-  });
-  const [total, setTotal] = useState(0);
-  const [model, setModel] = useState(null);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isManager, setIsManager] = useState(true);
-  const [isNormal, setIsNormal] = useState(true);
-  const [choosedItem, setChooseItem] = useState({});
-
-  useEffect(() => {
-    // getStoreDecorationList();
-  }, [query]);
-
-  function getStoreDecorationList() {
-    let _query = _.clone(query);
-    _query.current = query.current + 1;
-    StoreService.getStoreDecorationList(_query).then((res: any) => {
-      console.log(res.result.records);
-      setStoreDecorationlist(res.result.records);
-      setTotal(res.result.total);
-    });
-  }
-
-  function handleReplaceDecoration(record: RecordTypes) {}
-
-  function handleDeleteDecoration(record: RecordTypes) {}
-
-  function handleDeleteDecorationConfirm(record: RecordTypes) {
-    return confirm({
-      title: "你确定要删除这个banner吗？",
-      icon: <QuestionCircleOutlined />,
-      okText: "删除",
-      cancelText: "取消",
-      onOk: () => {
-        handleDeleteDecoration(record);
-      },
-    });
-  }
-
-  function parseColumn() {
-    return [
-      {
-        title: "用户姓名",
-        dataIndex: "name",
-        render: (val: string) => {
-          return (
-            <div className="coupon-info">
-              <span className="title">{val}</span>
-            </div>
-          );
-        },
-      },
-      {
-        title: "手机号",
-        dataIndex: "phone",
-        key: "phone",
-        render: (val: string) => {
-          return <div>{val}</div>;
-        },
-      },
-      {
-        title: "注册时间",
-        dataIndex: "registerDate",
-        key: "registerDate",
-        render: (val: string) => {
-          return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
-        },
-      },
-      {
-        title: "操作",
-        dataIndex: "operation",
-        render: (val: string, record: RecordTypes) => {
-          return record.role === "" || record.role === "1" ? (
-            <div className="no-operate">-</div>
-          ) : (
-            <div className="operation">
-              <span
-                className="edit"
-                onClick={() => handleReplaceDecoration(record)}
-              >
-                替换
-              </span>
-              <span className="divider-line">{" | "}</span>
-              <span
-                className="delete"
-                onClick={() => handleDeleteDecoration(record)}
-              >
-                删除
-              </span>
-            </div>
-          );
-        },
-      },
-    ];
-  }
-
-  function handleToAddStoreDecoration() {}
-
-  return (
-    <div className="user-manage-page">
-      <div className="box-header">
-        <div className="banner-setting">
-          <div className="title">banner设置</div>
-          <div className="tip">
-            图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232x212像素。
-          </div>
-        </div>
-        <Button
-          onClick={() => {
-            handleToAddStoreDecoration();
-          }}
-          type="primary"
-          className="add-show-btn"
-        >
-          添加Banner
-        </Button>
-      </div>
-      <div className="box-body">
-        <Table
-          size={"middle"}
-          pagination={false}
-          dataSource={storeDecorationlist}
-          columns={parseColumn()}
-          rowKey={(item: any) => item.id}
-          bordered
-        />
-      </div>
-      <div className="box-footer">
-        <PageControl
-          current={query.current}
-          pageSize={query.size}
-          total={total}
-          toPage={(page) => {
-            const queryStates = _.clone(query);
-            queryStates.current = page;
-            setQuery(queryStates);
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default withRouter(StoreWebDecoration);