1） 增加映射分销商

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",

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;

src/components/UseLazyLoadingSelect/style.less

@@ -0,0 +1,3 @@
+.infinite-scroller-demo{
+    height: 200px;
+}

src/pages/distributor/add/add.js

@@ -1,151 +1,173 @@
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom";
-import React, { Component } from 'react';
+import React, { Component } from "react";
 import { HashRouter as Router, Route, Link } from "react-router-dom";
-import  "./add.less"
+import "./add.less";
-import { Sweetalert,Card,Button,Notify } from 'zent';
+import { Sweetalert, Card, Button, Notify } from "zent";
-import "../../../assets/comm.css"
+import "../../../assets/comm.css";
-import Ipt from "../../../components/input/main"
+import Ipt from "../../../components/input/main";
-import Adddistributor from "../adddistributorinfo/adddistributorinfo"
+import Adddistributor from "../adddistributorinfo/adddistributorinfo";
-import {handelResponse,postCreateReseller,putResellerInfo} from "../../../assets/api.js"
+import {
-import _ from "lodash"
+  handelResponse,
-export default class acclist extends React.Component{
+  postCreateReseller,
-  constructor(props){
+  putResellerInfo,
-    super(props)
+} from "../../../assets/api.js";
+import _ from "lodash";
+export default class acclist extends React.Component {
+  constructor(props) {
+    super(props);
 
-    this.state={
+    this.state = {
-      enumer:0,
+      enumer: 0,
-    }
+    };
   }
   //去调子组件的方法
-  activeFn(){
+  activeFn() {
-    let valiform=this.refs.disbutorForm.submit();
+    let valiform = this.refs.disbutorForm.submit();
 
-    let formInfo=this.refs.disbutorForm.state.model;
+    let formInfo = this.refs.disbutorForm.state.model;
-		let _this=this;
+    let _this = this;
-		if(valiform){
+    if (valiform) {
-		//取消二次弹出框
+      //取消二次弹出框
-		Sweetalert.confirm({
+      Sweetalert.confirm({
-			type:'warning',
+        type: "warning",
-			closeBtn:true,
+        closeBtn: true,
-			title:'确认操作',
+        title: "确认操作",
-		content: _this.state.enumer==0?(<p>是否新增<b>[{formInfo.name}]</b>分销商？</p>):(<p>是否修改<b>[{formInfo.name}]</b>分销商信息？</p>),
+        content:
-			onConfirm:()=>{
+          _this.state.enumer == 0 ? (
-				 	//提交接口
+            <p>
-      let data=_.cloneDeep(formInfo);
+              是否新增<b>[{formInfo.name}]</b>分销商？
-			if(_this.refs.disbutorForm.state.headImg){
+            </p>
-				data.head_img=_this.refs.disbutorForm.state.headImg;
+          ) : (
-      }
+            <p>
-       data.salesman_id=formInfo.salesman_id.key;
+              是否修改<b>[{formInfo.name}]</b>分销商信息？
-       data.salesman_name=formInfo.salesman_id.text;
+            </p>
-       data.company_id=formInfo.company_id.key;
+          ),
-       data.company_name=formInfo.company_id.text;
+        onConfirm: () => {
-       data.identity_type=formInfo.identity_type.key;
+          //提交接口
-       let phoneList=[formInfo.contact_phone];
+          let data = _.cloneDeep(formInfo);
-       phoneList.push(data.phone1);
+          if (_this.refs.disbutorForm.state.headImg) {
-       phoneList.push(data.phone2);
+            data.head_img = _this.refs.disbutorForm.state.headImg;
-       phoneList.push(data.phone3);
+          }
-       phoneList.push(data.phone4);
+          data.salesman_id = formInfo.salesman_id.key;
-       let phoneArr=phoneList.filter(o=>o);
+          data.salesman_name = formInfo.salesman_id.text;
-       data.contact_phone=phoneArr.join(',');
+          data.company_id = formInfo.company_id.key;
-       let emilList=[formInfo.contact_email];
+          data.company_name = formInfo.company_id.text;
-        emilList.push(data.email1);
+          data.identity_type = formInfo.identity_type.key;
-        emilList.push(data.email2);
+          let phoneList = [formInfo.contact_phone];
-        emilList.push(data.email3);
+          phoneList.push(data.phone1);
-        emilList.push(data.email4);
+          phoneList.push(data.phone2);
-       let emailArr=emilList.filter(o=>o);
+          phoneList.push(data.phone3);
-       data.contact_email=emailArr.join(','); 
+          phoneList.push(data.phone4);
-        delete data.phone1;
+          let phoneArr = phoneList.filter((o) => o);
-        delete data.phone2;
+          data.contact_phone = phoneArr.join(",");
-        delete data.phone3;
+          let emilList = [formInfo.contact_email];
-        delete data.phone4;
+          emilList.push(data.email1);
-        delete data.email1;
+          emilList.push(data.email2);
-        delete data.email2;
+          emilList.push(data.email3);
-        delete data.email3;
+          emilList.push(data.email4);
-        delete data.email4;
+          let emailArr = emilList.filter((o) => o);
-		  	if(_this.state.enumer==0){
+          data.contact_email = emailArr.join(",");
-				postCreateReseller(data).then(res=>{
+          delete data.phone1;
-					handelResponse(res,(response,msg)=>{
+          delete data.phone2;
-						 Notify.clear();
+          delete data.phone3;
-						 Notify.success(msg);
+          delete data.phone4;
-						 setTimeout(()=>{
+          delete data.email1;
-              // window.history.back()
+          delete data.email2;
-              window.location.replace('#/home/distributor-list');
+          delete data.email3;
-						 },1000);
+          delete data.email4;
-						},(err)=>{
+          if (_this.state.enumer == 0) {
-              Notify.error(err);
+            postCreateReseller(data)
-						})
+              .then((res) => {
-						}).catch(err=>{
+                handelResponse(
-					});
+                  res,
-			}else{//编辑
+                  (response, msg) => {
-				let id=_this.refs.disbutorForm.state.id;
+                    Notify.clear();
-        delete data.account;
+                    Notify.success(msg);
-        delete data.password;
+                    setTimeout(() => {
-        data.head=_this.state.headImg;
+                      // window.history.back()
-				putResellerInfo(id,data).then(res=>{
+                      window.location.replace("#/home/distributor-list");
-					handelResponse(res,(response,msg)=>{
+                    }, 1000);
-						 Notify.clear();
+                  },
-						 Notify.success(msg);
+                  (err) => {
-						 setTimeout(()=>{
+                    Notify.error(err);
-              // window.history.back()
+                  }
-              window.location.replace('#/home/distributor-list');
+                );
-						 },1000);
+              })
-						},(err)=>{
+              .catch((err) => {});
-              Notify.error(err)
+          } else {
-						})
+            //编辑
-						}).catch(err=>{
+            let id = _this.refs.disbutorForm.state.id;
-					});
+            delete data.account;
-			}
+            delete data.password;
-			},
+            data.head = _this.state.headImg;
-			onCancel: this.onCancel,
+            putResellerInfo(id, data)
-			className:'questModal',
+              .then((res) => {
-			parentComponent: this
+                handelResponse(
-		});
+                  res,
-		}else{
+                  (response, msg) => {
-			Notify.clear();
+                    Notify.clear();
-			Notify.error('请完善表单数据');
+                    Notify.success(msg);
-		}
+                    setTimeout(() => {
+                      // window.history.back()
+                      window.location.replace("#/home/distributor-list");
+                    }, 1000);
+                  },
+                  (err) => {
+                    Notify.error(err);
+                  }
+                );
+              })
+              .catch((err) => {});
+          }
+        },
+        onCancel: this.onCancel,
+        className: "questModal",
+        parentComponent: this,
+      });
+    } else {
+      Notify.clear();
+      Notify.error("请完善表单数据");
+    }
   }
-  componentWillMount(){
+  componentWillMount() {
-    let pagetitle=JSON.parse(sessionStorage.getItem('breaknav'))[0].pagetitle;
+    let pagetitle = JSON.parse(sessionStorage.getItem("breaknav"))[0].pagetitle;
-    let enumer=pagetitle.includes('新建')?0:1;
+    let enumer = pagetitle.includes("新建") ? 0 : 1;
-    this.setState({pagetitle:pagetitle+'分销商',enumer});
+    this.setState({ pagetitle: pagetitle + "分销商", enumer });
-
   }
-  cancel(){
+  cancel() {
-   //取消二次弹出框
+    //取消二次弹出框
-   Sweetalert.confirm({
+    Sweetalert.confirm({
-  	type:'warning',
+      type: "warning",
-  	closeBtn:true,
+      closeBtn: true,
-  	title:'确认操作',
+      title: "确认操作",
-  	content: <p>是否取消本次操作？</p>,
+      content: <p>是否取消本次操作？</p>,
-  	onConfirm:()=>{
+      onConfirm: () => {
-      // window.history.back()
+        // window.history.back()
-      window.location.replace('#/home/distributor-list');
+        window.location.replace("#/home/distributor-list");
-  	},
+      },
-  	onCancel: this.onCancel,
+      onCancel: this.onCancel,
-  	className:'questModal',
+      className: "questModal",
-  	parentComponent: this
+      parentComponent: this,
-  });
+    });
   }
-  render(){
+  render() {
     const { current, pageSize } = this.state;
-    return(
+    return (
       <div className="maincenter">
-         <Card style={{ width:'100%'}} title={this.state.pagetitle} >
+        <Card style={{ width: "100%" }} title={this.state.pagetitle}>
-        <div className="adddistributor">
+          <div className="adddistributor">
-
+            <Adddistributor ref="disbutorForm" enumer={this.state.enumer} />
-     <Adddistributor ref="disbutorForm" enumer={this.state.enumer}/>
+          </div>
+        </Card>
+        <div className="distributorbtn">
+          <Button type="primary" onClick={this.activeFn.bind(this)}>
+            提交
+          </Button>
+          <Button type="normal" onClick={this.cancel.bind(this)}>
+            取消
+          </Button>
         </div>
-  </Card>
-  <div className="distributorbtn">
-        <Button type="primary" onClick={this.activeFn.bind(this)}>
-          提交
-        </Button>
-        <Button type="normal" onClick={this.cancel.bind(this)}>
-          取消
-        </Button>
       </div>
-      </div>
+    );
-    )
   }
-}
+}

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"