From 99d36426d3028b8b06012a23ba68094d66e9f9b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=AF=97=E6=B4=A5?= <2723065175@qq.com>
Date: Wed, 24 Aug 2022 08:33:00 +0000
Subject: [PATCH] =?UTF-8?q?!1987=20=E4=BC=98=E5=8C=96:=E9=85=B7=E5=AE=B6?=
 =?UTF-8?q?=E4=B9=90=E6=9D=90=E8=B4=A8=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../KJLImportConfig/KJLImportConfigStore.ts   | 69 ++++++++++------
 .../KJL/KJLImportConfig/KJLMaterialMap.tsx    | 80 +++++++++----------
 .../KJLImportConfig/KJLMaterialMapData.tsx    | 30 ++++---
 3 files changed, 103 insertions(+), 76 deletions(-)

diff --git a/src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts b/src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts
index 0a5eaff66..ab6ec2ac8 100644
--- a/src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts
+++ b/src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts
@@ -1,5 +1,6 @@
 import { Intent } from "@blueprintjs/core";
 import { observable, toJS } from "mobx";
+import PQueue from "p-queue";
 import { MaterialUrls } from "../../../Common/HostUrl";
 import { PostJson, RequestStatus } from "../../../Common/Request";
 import { Singleton } from "../../../Common/Singleton";
@@ -16,6 +17,7 @@ export interface MaterialOption
     materialName: string;
     url: string;
     isSelect: boolean;
+    isRender: boolean;
 }
 export class KJLImportConfigStore extends Singleton implements IConfigStore
 {
@@ -23,10 +25,9 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
     @observable configsNames: string[] = [];
     @observable m_Option: KJLImportConfigOption = { ...DefaultKJImportOption };
     @observable materialList: MaterialOption[] = [];
-    @observable isloading = false;
-    KeyIndex: number = 0;
     @observable selectAll = false;
-
+    private queue = new PQueue({ concurrency: 100 });
+    materialMap = new Map<string, Promise<{ materialName: string, url: string; }>>();
     InitOption()
     {
         Object.assign(this.m_Option, DefaultKJImportOption);
@@ -70,35 +71,57 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
 
     LoadMaterials = async () =>
     {
-        this.isloading = false;
         this.materialList = [];
-        this.KeyIndex = 0;
         this.selectAll = false;
 
-        let materialMap = new Map<string, { name: string, logo: string; }>();
-        for (let mtl of this.m_Option.materials)
+        for (let i = 0, length = this.m_Option.materials.length; i < length; i++)
+        {
+            let mtl = this.m_Option.materials[i];
+            this.materialList.push({ keyIndex: i, kjlName: mtl.kjlName, materialName: "", url: "", isSelect: false, isRender: false });
+        }
+
+        this.AsyncLoadMaterials();
+    };
+
+    AsyncLoadMaterials = async () =>
+    {
+        this.queue.clear();
+        for (let i = 0, length = this.m_Option.materials.length; i < length; i++)
         {
-            if (!materialMap.has(mtl.id))
+            let mtl = this.m_Option.materials[i];
+            this.queue.add(async () =>
             {
-                let material_id = mtl.id;
-                let data = await PostJson(MaterialUrls.detail, { material_id });
-                if (data.err_code === RequestStatus.Ok)
+                let promise: Promise<{ materialName: string, url: string; }>;
+                if (this.materialMap.has(mtl.id))
                 {
-                    materialMap.set(mtl.id, data.materials);
+                    promise = this.materialMap.get(mtl.id);
+                }
+                else
+                {
+                    promise = this.GetMaterialInfo(mtl.id);
+                    this.materialMap.set(mtl.id, promise);
                 }
-            }
 
-            if (materialMap.has(mtl.id))
-            {
-                let material = materialMap.get(mtl.id);
-                this.materialList.push({ keyIndex: this.KeyIndex, kjlName: mtl.kjlName, materialName: material.name, url: material.logo, isSelect: false });
-            }
-            else
+                let { materialName, url } = await promise;
+                this.materialList[i] = { keyIndex: i, kjlName: mtl.kjlName, materialName, url, isSelect: false, isRender: true };
+            });
+        }
+    };
+
+    GetMaterialInfo = (material_id: string): Promise<{ materialName: string, url: string; }> =>
+    {
+        return new Promise(async (res) =>
+        {
+            let data = await PostJson(MaterialUrls.detail, { material_id });
+            let materialName = "";
+            let url = "";
+            if (data.err_code === RequestStatus.Ok)
             {
-                this.materialList.push({ keyIndex: this.KeyIndex, kjlName: mtl.kjlName, materialName: "", url: "", isSelect: false });
+                let material = data.materials;
+                materialName = material.name;
+                url = material.logo;
             }
-            this.KeyIndex++;
-        }
-        this.isloading = true;
+            res({ materialName, url });
+        });
     };
 }
diff --git a/src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx b/src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx
index 32c56cf93..e5d09cbd5 100644
--- a/src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx
+++ b/src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Intent, Spinner } from "@blueprintjs/core";
+import { Button, Checkbox, Intent } from "@blueprintjs/core";
 import { observer } from "mobx-react";
 import React from "react";
 import { AppConfirm } from "../../../UI/Components/Common/Confirm";
@@ -8,6 +8,10 @@ import { KJLMaterialMapData } from "./KJLMaterialMapData";
 @observer
 export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStore; }>
 {
+    componentWillUnmount(): void
+    {
+        this.props.store.materialMap.clear();
+    }
     render()
     {
         let store = this.props.store;
@@ -15,55 +19,49 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
             <div className="KJLMaterialMap frame">
                 <div>酷家乐材质映射</div>
                 <div>
+                    <div className="info-header">
+                        <Checkbox
+                            label="全选"
+                            checked={store.selectAll}
+                            onChange={() =>
+                            {
+                                store.selectAll = !store.selectAll;
+                                this.handleSelectAll();
+                            }}
+                        />
+                        <div>酷家乐材质名称</div>
+                        <div>引用材质</div>
+                        <div>操作</div>
+                    </div>
                     <div>
-                        <div className="info-header">
-                            <Checkbox
-                                label="全选"
-                                checked={store.selectAll}
-                                onChange={() =>
+                        {
+                            store.materialList.map((material, i) =>
+                                <KJLMaterialMapData
+                                    key={material.keyIndex}
+                                    store={store}
+                                    material={material}
+                                    index={i}
+                                />)
+                        }
+                        <div style={{ height: 52, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                            <Button
+                                icon="plus"
+                                style={{ width: 42, height: 42 }}
+                                onClick={() =>
                                 {
-                                    store.selectAll = !store.selectAll;
-                                    this.handleSelectAll();
+                                    store.m_Option.materials.push({ kjlName: "", id: "" });
+                                    let index = store.materialList.length;
+                                    store.materialList.push({ keyIndex: index, kjlName: "", materialName: "", url: "", isSelect: store.selectAll ? true : false, isRender: true });
                                 }}
-                            />
-                            <div>酷家乐材质名称</div>
-                            <div>引用材质</div>
-                            <div>操作</div>
+                            >
+                            </Button>
                         </div>
-                        {
-                            store.isloading ?
-                                <div>
-                                    {
-                                        store.materialList.map((material, i) =>
-                                            <KJLMaterialMapData
-                                                key={material.keyIndex}
-                                                store={store}
-                                                material={material}
-                                                index={i}
-                                            />)
-                                    }
-                                    <div style={{ height: 52, display: "flex", justifyContent: "center", alignItems: "center" }}>
-                                        <Button
-                                            icon="plus"
-                                            style={{ width: 42, height: 42 }}
-                                            onClick={() =>
-                                            {
-                                                store.m_Option.materials.push({ kjlName: "", id: "" });
-                                                store.materialList.push({ keyIndex: store.KeyIndex, kjlName: "", materialName: "", url: "", isSelect: store.selectAll ? true : false });
-                                                store.KeyIndex += 1;
-                                            }}
-                                        >
-                                        </Button>
-                                    </div>
-                                </div>
-                                : <Spinner />
-                        }
                     </div>
                     <Button
                         text="一键删除"
                         intent={Intent.DANGER}
                         style={{ position: "absolute", bottom: 11, right: 75 }}
-                        disabled={store.materialList.some(mtl => mtl.isSelect === true) ? false : true}
+                        disabled={!store.materialList.some(mtl => mtl.isRender === false) && store.materialList.some(mtl => mtl.isSelect === true) ? false : true}
                         onClick={() => { this.handleOnekeyDelete(); }}
                     />
                 </div>
diff --git a/src/Add-on/KJL/KJLImportConfig/KJLMaterialMapData.tsx b/src/Add-on/KJL/KJLImportConfig/KJLMaterialMapData.tsx
index 8ca069ed2..81964a31e 100644
--- a/src/Add-on/KJL/KJLImportConfig/KJLMaterialMapData.tsx
+++ b/src/Add-on/KJL/KJLImportConfig/KJLMaterialMapData.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Checkbox, Classes, Dialog, InputGroup, Intent } from "@blueprintjs/core";
+import { Button, Card, Checkbox, Classes, Dialog, InputGroup, Intent, Spinner } from "@blueprintjs/core";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
@@ -120,17 +120,22 @@ export class KJLMaterialMapData extends React.Component<MaterialDataProps>
                         />
                     </div>
                     <div>
-                        <div
-                            className="mtl-select-hint"
-                            onDoubleClick={() => { this.isOpenImgList.set(true); }}
-                            style={{ border: material.url ? "none" : "1px solid #ccc" }}
-                        >
-                            {
-                                material.url ?
-                                    <img src={`${CURRENT_HOST}/${material.url}`} />
-                                    : "双击选择材质"
-                            }
-                        </div>
+                        {
+                            material.isRender ?
+                                <div
+                                    className="mtl-select-hint"
+                                    onDoubleClick={() => { this.isOpenImgList.set(true); }}
+                                    style={{ border: material.url ? "none" : "1px solid #ccc" }}
+                                >
+                                    {
+                                        material.url ?
+                                            <img src={`${CURRENT_HOST}/${material.url}`} />
+                                            : "双击修改材质"
+                                    }
+                                </div>
+                                :
+                                <div><Spinner /></div>
+                        }
                         <div style={{ width: "100%", alignSelf: "center" }}>
                             {
                                 material.materialName &&
@@ -142,6 +147,7 @@ export class KJLMaterialMapData extends React.Component<MaterialDataProps>
                         <Button
                             icon="trash"
                             intent={Intent.DANGER}
+                            disabled={material.isRender ? false : true}
                             onClick={() => { this.handleDeleteMaterial(this.props.index); }}
                         />
                     </div>