feat:添加H5banner列表页

package.json

@@ -77,6 +77,7 @@
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
+    "react-sortable-hoc": "^1.11.0",
     "resolve": "1.15.0",
     "resolve-url-loader": "3.1.1",
     "semver": "6.3.0",
@@ -128,6 +129,7 @@
   "devDependencies": {
     "@types/ali-oss": "^6.0.5",
     "@types/jquery": "^3.5.4",
-    "ali-oss": "^6.12.0"
+    "ali-oss": "^6.12.0",
+    "react-sortable-hoc": "^1.11.0"
   }
 }

src/bu-components/NonCompliantFileModal.jsx

@@ -33,7 +33,7 @@ class NonCompliantFileModal extends React.Component {
         className="prepare-lesson__non-compliant-file-modal"
       >
         <div className="file-list">
-          <div className="file-list__title">以下文件已超出上传限制，无法上传。</div>
+          <div className="file-list__title">以下文件超出上传限制，无法上传，点击继续上传不会上传以下文件。</div>
           <div className="file-list__content">
             {
               fileList.map((file, index) => {

src/bu-components/UploadProgressModal.jsx

@@ -21,7 +21,7 @@ class UploadProgressModal extends React.Component {
     super(props);
     this.state = {
       fileList: [],
-      showFileList: true,    // 默认展开上传进度
+      showFileList: true,    // 默认展开上传进度  
     }
   }
 

src/bu-components/UploadProgressModal.less

@@ -100,7 +100,7 @@
           }
 
           &.fail {
-            color: #EC4B35;
+            color: rgba(255, 79, 79, 1);
           }
         }
       }

src/modules/resource-disk/index.less

@@ -281,4 +281,11 @@
 
 .create-folder-modal .ant-modal-body {
   min-height: 101px !important;
+  .create-tip {
+    width: 322px;
+    height: 20px;
+    font-size: 14px;
+    color: #999999;
+    line-height: 20px;
+  }
 }

src/modules/resource-disk/modal/CreateFolderModal.jsx

@@ -109,6 +109,7 @@ class CreateFolderModal extends React.Component {
           />
           </Form.Item>
         </Form>
+        <div className="create-tip">创建后仅自己可查看，如需其他成员查看请设置权限</div>
       </Modal>
     )
   }

src/modules/store-manage/StoreDecorationPage.less

+.store-decoration-page {
+  thead {
+    display: none;
+  }
+  .ant-table-title {
+      display: none;
+  }
+
+  .banner-setting {
+    width: 100%;
+    height: 65px;
+    background: #f7f8f9;
+    border-radius: 4px;
+    padding: 12px 21px 9px 21px;
+    margin-bottom: 16px;
+    .title {
+      color: #333333;
+      line-height: 22px;
+    }
+    .tip {
+      color: #666;
+      line-height: 22px;
+    }
+  }
+  .banner-thumbnail {
+    width: 230px;
+    height: 79px;    
+  }
+  .index-num {
+    width: 30px;
+    height: 33px;
+    font-size: 24px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 33px;    
+  }
+  .drag-icon {
+    font-size: 24px;
+    line-height: 18px;
+    color: #999999;    
+  }
+
+  .operation {
+    .edit {
+      color: #5289fa;
+      cursor: pointer;
+    }
+    .delete {
+      color: #5289fa;
+      cursor: pointer;
+    }
+  }
+}

src/modules/store-manage/StoreDecorationPage.tsx

+/*
+ * @Author: wufan
+ * @Date: 2020-11-30 10:47:38
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-14 14:16:15
+ * @Description: 员工管理页面
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React, { useEffect, useState } from "react";
+import { withRouter, Switch, Route } from "react-router-dom";
+import _ from "underscore";
+import { Tabs } from "antd";
+import "./StoreDecorationPage.less";
+import StoreH5DecorationTab from "./StoreH5DecorationTab";
+import StoreWebDecorationTab from "./StoreWebDecorationTab";
+
+const { TabPane } = Tabs;
+
+declare var window: any;
+
+interface StoreDecoprationProps {
+  match: {
+    url: string;
+  };
+}
+
+function StoreDecorationPage(props: StoreDecoprationProps) {
+  const [currentTab, setCurrentTab] = useState("h5");
+  const { match } = props;
+
+  return (
+    <div className="page store-decoration-page">
+      <div className="page-content">
+        <div className="content-header">店铺装修</div>
+        <div className="box">
+          <Tabs
+            onChange={(key) => {
+              setCurrentTab(key);
+              // window.RCHistory.push(`${match.url}/store-decoration/${key}`);
+            }}
+            activeKey={currentTab}
+          >
+            <TabPane key="h5" tab="H5店铺"></TabPane>
+
+            <TabPane key="web" tab="网页端店铺"></TabPane>
+          </Tabs>
+          {
+            currentTab === 'h5' && <StoreH5DecorationTab/>
+          }
+          {
+            currentTab === 'web' && <StoreWebDecorationTab/>
+          }
+          
+          {/* <Switch>
+            <Route
+              path="/store-decoration/h5"
+              component={StoreH5DecorationTab}
+            ></Route>
+
+            <Route
+              path="/store-decoration/web"
+              component={StoreWebDecorationTab}
+            ></Route>
+          </Switch> */}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(StoreDecorationPage);

src/modules/store-manage/StoreH5DecorationTab.jsx

+/*
+ * @Author: wufan
+ * @Date: 2020-11-30 10:47:38
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-14 15:19:21
+ * @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, 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";
+import moment from "moment";
+const { confirm } = Modal;
+
+function StoreH5Decoration(props) {
+  const [storeDecorationlist, setStoreDecorationlist] = useState([
+    {
+      di:1111,
+      banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
+    },
+    {
+      di:1111,
+      banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg'
+    },
+    {
+      di:1111,
+      banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg'
+    },
+    {
+      di:1111,
+      banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png'
+    }
+  ]);
+  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 DragHandle = sortableHandle(() => (
+    <MenuOutlined style={{ cursor: "pointer", color: "#999" }} className="drag-icon"/>
+  ));
+  const SortableItem = sortableElement((props) => <tr {...props} />);
+  const SortableContainer = sortableContainer((props) => <tbody {...props} />);
+
+  useEffect(() => {
+    // getStoreDecorationList();
+  }, [query]);
+
+  function getStoreDecorationList() {
+    let _query = _.clone(query);
+    _query.current = query.current + 1;
+    StoreService.getStoreDecorationList(_query).then((res) => {
+      console.log(res.result.records);
+      setStoreDecorationlist(res.result.records);
+      setTotal(res.result.total);
+    });
+  }
+
+  function handleReplaceDecoration(record) {}
+
+  function handleDeleteDecoration(record) {}
+
+  function handleDeleteDecorationConfirm(record) {
+    return confirm({
+      title: "你确定要删除这个banner吗？",
+      icon: <QuestionCircleOutlined />,
+      okText: "删除",
+      cancelText: "取消",
+      onOk: () => {
+        handleDeleteDecoration(record);
+      },
+    });
+  }
+
+  function onSortEnd({ oldIndex, newIndex }) {
+    if (oldIndex !== newIndex) {
+      const newData = arrayMove(
+        [].concat(storeDecorationlist),
+        oldIndex,
+        newIndex
+      ).filter((el) => !!el);
+      console.log("Sorted items: ", newData);
+      setStoreDecorationlist(newData);
+    }
+  }
+
+  function DraggableBodyRow({ className, style, ...restProps }) {
+    const index = storeDecorationlist.findIndex(
+      (x) => x.index === restProps["data-row-key"]
+    );
+    return <SortableItem index={index} {...restProps} />;
+  }
+
+  function parseColumn() {
+    return [
+      {
+        title: "Sort",
+        dataIndex: "sort",
+        width: 30,
+        className: "drag-visible",
+        render: () => <DragHandle />,
+      },
+      {
+        title: "index",
+        dataIndex: "index",
+        key: "index",
+        width: 20,
+        render: (val, record, index) => {
+          return <div className="index-num">{index + 1}</div>;
+        },
+      },
+      {
+        title: "banner",
+        dataIndex: "banner",
+        key: "banner",
+        render: (val) => {
+          return <img src={val} alt="banner" className="banner-thumbnail" />;
+        },
+      },
+      {
+        title: "操作",
+        dataIndex: "operation",
+        width: '20%',
+        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>
+          );
+        },
+      },
+    ];
+  }
+
+  function handleToAddStoreDecoration() {}
+
+  const DraggableContainer = (props) => (
+    <SortableContainer
+      useDragHandle
+      helperClass="row-dragging"
+      onSortEnd={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={() => {
+            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) => item.id}
+          components={{
+            body: {
+              wrapper: DraggableContainer,
+              row: DraggableBodyRow,
+            },
+          }}
+          bordered
+        />
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(StoreH5Decoration);

src/modules/store-manege/StoreDecorationPage.tsx → src/modules/store-manage/StoreWebDecorationTab.tsx

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-11-30 10:47:38
  * @LastEditors: wufan
- * @LastEditTime: 2020-11-30 17:35:24
+ * @LastEditTime: 2020-12-14 11:44:31
  * @Description: 员工管理页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -37,7 +37,7 @@ interface RecordTypes {
   role: string;
 }
 
-function StoreDecorationPage() {
+function StoreWebDecoration() {
   const [storeDecorationlist, setStoreDecorationlist] = useState([
     {
       name: "赵云",
@@ -156,66 +156,51 @@ function StoreDecorationPage() {
     ];
   }
 
-  function handleQuery(name: string, value: any) {
-    const _query = _.clone(query);
-    // _query[name] = value;
-    setQuery(_query);
-  }
-
   function handleToAddStoreDecoration() {}
 
   return (
-    <div className="page user-manage-page">
-      <div className="page-content">
-        <div className="content-header">店铺装修</div>
-        <div className="box">
-          <div className="box-header">
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                padding: "15px 0 10px",
-              }}
-            >
-              <div style={{ flex: 1 }}>banner设置</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 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(StoreDecorationPage);
+export default withRouter(StoreWebDecoration);

src/routes/config/mainRoutes.tsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-04-29 10:26:32
- * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-11 19:10:35
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-14 11:13:16
  * @Description: 内容线路由配置
  */
-import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
+import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage';
 import personalInfoPage from '@/modules/personalInfo';
-import UserManagePage from '@/modules/store-manege/UserManagePage';
-import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage';
-import CourseCatalogPage from '@/modules/store-manege/CourseCatalogPage';
+import UserManagePage from '@/modules/store-manage/UserManagePage';
+import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
+import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
 import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
 import AddLivePage from '@/modules/course-manage/AddLive'
 import DataList from '@/modules/course-manage/DataList/DataList';

src/routes/config/menuList.tsx

@@ -51,6 +51,16 @@ export const menuList: any = [
         groupName: "店铺装修",
         groupCode: "ShopDecoration",
         link: '/store-decoration'
+      },
+      {
+        groupName: "H5店铺",
+        groupCode: "ShopDecorationH5",
+        link: '/store-decoration/h5'
+      },
+      {
+        groupName: "网页端店铺",
+        groupCode: "ShopDecorationWeb",
+        link: '/store-decoration/web'
       }
     ]
   },