1）增加映射分销商

2022-04-13 15:08:46 +08:00 · 2022-04-13 15:08:46 +08:00 · 3643b0faed
parent 9a8c0528b1
commit 3643b0faed
7 changed files with 1988 additions and 1660 deletions
--- a/package.json
+++ b/package.json
@ -66,6 +66,7 @@
    "react-refresh": "^0.8.3",
    "react-router-dom": "^5.3.0",
    "react-validate-framework": "^0.15.6",
+    "react-window": "^1.8.6",
    "resolve": "1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "^10.0.5",
--- a/src/assets/api.js
+++ b/src/assets/api.js
--- a/src/components/UseLazyLoadingSelect/index.js
+++ b/src/components/UseLazyLoadingSelect/index.js
@ -0,0 +1,80 @@
+import { useState } from "react";
+import { Select, InfiniteScroller, InlineLoading } from "zent";
+import "./style.less";
+const UseLazyLoadingSelect = ({
+  options,
+  clearable = false,
+  placeholder = "请输入",
+  value,
+  onChange,
+  width,
+  onChangePage,
+}) => {
+  let firstOpen = true;
+  const [loading, setLoading] = useState(true);
+  const [open, onOpenChange] = useState(false);
+
+  // 处理浮层打开
+  const handleOpenChange = (isOpen) => {
+    onOpenChange(isOpen);
+    // 首次打开浮层加载数据
+    if (isOpen && firstOpen) {
+      firstOpen = false;
+      setLoading(true);
+      setTimeout(() => {
+        setLoading(false);
+      }, 2000);
+    }
+  };
+
+  // 滚动加载
+  const loadMore = (closeLoading) => {
+    setTimeout(() => {
+      onChangePage(closeLoading);
+    }, 2000);
+  };
+
+  // 渲染 opt
+  const renderOptionList = (optionList, renderOption) => {
+    return (
+      <InfiniteScroller
+        hasMore
+        skipLoadOnMount
+        loadMore={loadMore}
+        className="infinite-scroller-demo"
+        loader={
+          <div className="loading-text">
+            <InlineLoading
+              iconSize={18}
+              loading
+              icon="circle"
+              iconText="加载中…"
+              textPosition="right"
+              colorPreset="grey"
+            />
+          </div>
+        }
+      >
+        {optionList.map((item, index) => renderOption(item, index))}
+      </InfiniteScroller>
+    );
+  };
+
+  return (
+    <div>
+      <Select
+        options={options}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        width={width}
+        loading={loading}
+        open={open}
+        onOpenChange={handleOpenChange}
+        renderOptionList={renderOptionList}
+      />
+    </div>
+  );
+};
+
+export default UseLazyLoadingSelect;
--- a/src/components/UseLazyLoadingSelect/style.less
+++ b/src/components/UseLazyLoadingSelect/style.less
@ -0,0 +1,3 @@
+.infinite-scroller-demo{
+    height: 200px;
+}
--- a/src/pages/distributor/add/add.js
+++ b/src/pages/distributor/add/add.js
@ -1,20 +1,24 @@
-import ReactDOM from 'react-dom';
-import React, { Component } from 'react';
+import ReactDOM from "react-dom";
+import React, { Component } from "react";
 import { HashRouter as Router, Route, Link } from "react-router-dom";
-import  "./add.less"
-import { Sweetalert,Card,Button,Notify } from 'zent';
-import "../../../assets/comm.css"
-import Ipt from "../../../components/input/main"
-import Adddistributor from "../adddistributorinfo/adddistributorinfo"
-import {handelResponse,postCreateReseller,putResellerInfo} from "../../../assets/api.js"
-import _ from "lodash"
+import "./add.less";
+import { Sweetalert, Card, Button, Notify } from "zent";
+import "../../../assets/comm.css";
+import Ipt from "../../../components/input/main";
+import Adddistributor from "../adddistributorinfo/adddistributorinfo";
+import {
+  handelResponse,
+  postCreateReseller,
+  putResellerInfo,
+} from "../../../assets/api.js";
+import _ from "lodash";
 export default class acclist extends React.Component {
  constructor(props) {
-    super(props)
+    super(props);

    this.state = {
      enumer: 0,
-    }
+    };
  }
  //去调子组件的方法
  activeFn() {
@ -25,10 +29,19 @@ export default class acclist extends React.Component{
    if (valiform) {
      //取消二次弹出框
      Sweetalert.confirm({
-			type:'warning',
+        type: "warning",
        closeBtn: true,
-			title:'确认操作',
-		content: _this.state.enumer==0?(<p>是否新增<b>[{formInfo.name}]</b>分销商？</p>):(<p>是否修改<b>[{formInfo.name}]</b>分销商信息？</p>),
+        title: "确认操作",
+        content:
+          _this.state.enumer == 0 ? (
+            <p>
+              是否新增<b>[{formInfo.name}]</b>分销商？
+            </p>
+          ) : (
+            <p>
+              是否修改<b>[{formInfo.name}]</b>分销商信息？
+            </p>
+          ),
        onConfirm: () => {
          //提交接口
          let data = _.cloneDeep(formInfo);
@ -45,15 +58,15 @@ export default class acclist extends React.Component{
          phoneList.push(data.phone2);
          phoneList.push(data.phone3);
          phoneList.push(data.phone4);
-       let phoneArr=phoneList.filter(o=>o);
-       data.contact_phone=phoneArr.join(',');
+          let phoneArr = phoneList.filter((o) => o);
+          data.contact_phone = phoneArr.join(",");
          let emilList = [formInfo.contact_email];
          emilList.push(data.email1);
          emilList.push(data.email2);
          emilList.push(data.email3);
          emilList.push(data.email4);
-       let emailArr=emilList.filter(o=>o);
-       data.contact_email=emailArr.join(','); 
+          let emailArr = emilList.filter((o) => o);
+          data.contact_email = emailArr.join(",");
          delete data.phone1;
          delete data.phone2;
          delete data.phone3;
@ -63,77 +76,86 @@ export default class acclist extends React.Component{
          delete data.email3;
          delete data.email4;
          if (_this.state.enumer == 0) {
-				postCreateReseller(data).then(res=>{
-					handelResponse(res,(response,msg)=>{
+            postCreateReseller(data)
+              .then((res) => {
+                handelResponse(
+                  res,
+                  (response, msg) => {
                    Notify.clear();
                    Notify.success(msg);
                    setTimeout(() => {
                      // window.history.back()
-              window.location.replace('#/home/distributor-list');
+                      window.location.replace("#/home/distributor-list");
                    }, 1000);
-						},(err)=>{
+                  },
+                  (err) => {
                    Notify.error(err);
+                  }
+                );
              })
-						}).catch(err=>{
-					});
-			}else{//编辑
+              .catch((err) => {});
+          } else {
+            //编辑
            let id = _this.refs.disbutorForm.state.id;
            delete data.account;
            delete data.password;
            data.head = _this.state.headImg;
-				putResellerInfo(id,data).then(res=>{
-					handelResponse(res,(response,msg)=>{
+            putResellerInfo(id, data)
+              .then((res) => {
+                handelResponse(
+                  res,
+                  (response, msg) => {
                    Notify.clear();
                    Notify.success(msg);
                    setTimeout(() => {
                      // window.history.back()
-              window.location.replace('#/home/distributor-list');
+                      window.location.replace("#/home/distributor-list");
                    }, 1000);
-						},(err)=>{
-              Notify.error(err)
+                  },
+                  (err) => {
+                    Notify.error(err);
+                  }
+                );
              })
-						}).catch(err=>{
-					});
+              .catch((err) => {});
          }
        },
        onCancel: this.onCancel,
-			className:'questModal',
-			parentComponent: this
+        className: "questModal",
+        parentComponent: this,
      });
    } else {
      Notify.clear();
-			Notify.error('请完善表单数据');
+      Notify.error("请完善表单数据");
    }
  }
  componentWillMount() {
-    let pagetitle=JSON.parse(sessionStorage.getItem('breaknav'))[0].pagetitle;
-    let enumer=pagetitle.includes('新建')?0:1;
-    this.setState({pagetitle:pagetitle+'分销商',enumer});
-
+    let pagetitle = JSON.parse(sessionStorage.getItem("breaknav"))[0].pagetitle;
+    let enumer = pagetitle.includes("新建") ? 0 : 1;
+    this.setState({ pagetitle: pagetitle + "分销商", enumer });
  }
  cancel() {
    //取消二次弹出框
    Sweetalert.confirm({
-  	type:'warning',
+      type: "warning",
      closeBtn: true,
-  	title:'确认操作',
+      title: "确认操作",
      content: <p>是否取消本次操作？</p>,
      onConfirm: () => {
        // window.history.back()
-      window.location.replace('#/home/distributor-list');
+        window.location.replace("#/home/distributor-list");
      },
      onCancel: this.onCancel,
-  	className:'questModal',
-  	parentComponent: this
+      className: "questModal",
+      parentComponent: this,
    });
  }
  render() {
    const { current, pageSize } = this.state;
    return (
      <div className="maincenter">
-         <Card style={{ width:'100%'}} title={this.state.pagetitle} >
+        <Card style={{ width: "100%" }} title={this.state.pagetitle}>
          <div className="adddistributor">
-
            <Adddistributor ref="disbutorForm" enumer={this.state.enumer} />
          </div>
        </Card>
@ -146,6 +168,6 @@ export default class acclist extends React.Component{
          </Button>
        </div>
      </div>
-    )
+    );
  }
 }
--- a/src/pages/distributor/adddistributorinfo/adddistributorinfo.js
+++ b/src/pages/distributor/adddistributorinfo/adddistributorinfo.js
--- a/yarn.lock
+++ b/yarn.lock
@ -1104,6 +1104,13 @@
  dependencies:
    regenerator-runtime "^0.13.4"

+"@babel/runtime@^7.0.0":
+  version "7.17.9"
+  resolved "https://repo.huaweicloud.com/repository/npm/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
+  integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
  version "7.15.4"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
@ -7419,6 +7426,11 @@ media-typer@0.3.0:
  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=

+"memoize-one@>=3.1.1 <6":
+  version "5.2.1"
+  resolved "https://repo.huaweicloud.com/repository/npm/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
  version "0.4.1"
  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -9555,6 +9567,14 @@ react-validate-framework@^0.15.6:
    prop-types "^15.5.10"
    validate-framework-utils "^0.6.4"

+react-window@^1.8.6:
+  version "1.8.6"
+  resolved "https://repo.huaweicloud.com/repository/npm/react-window/-/react-window-1.8.6.tgz#d011950ac643a994118632665aad0c6382e2a112"
+  integrity sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^17.0.2:
  version "17.0.2"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"