create

src/pages/website/CreateMat/components/AttrPanel.tsx

@@ -1,121 +1,30 @@
 import { useResource } from "@/modules/resource";
 import { useQueditor } from "@queenjs-modules/queditor";
-import { Pack, PackMat } from "@queenjs-modules/queditor/objects";
-import { IQueentree } from "@queenjs-modules/queentree";
-import { AssetItemFile } from "@queenjs-modules/queentree-explorer/objects/fileSystem/assetFiles";
-import { Image, List } from "@queenjs/ui";
-import { Button } from "ant-design-vue";
 import { defineComponent } from "vue";
-import { any } from "vue-types";
-import LibraryModal from "./LibraryModal";
 
 export default defineComponent({
   setup() {
     const resource = useResource();
     const queditor = useQueditor();
 
-    const replaceMat = async (record: any) => {
-      // console.error("replace=>", record);
-      const branchFolder = await resource.showModal<AssetItemFile>(
-        <LibraryModal nodeTypes={["matGroupItem", "mat", "packMat"]} />,
-        { width: "900px" }
+    queditor.actions.on("updateCurrPackFormData:success", () => {
+      // queditor.store.currActiveMat
+      console.log(
+        "queditor.store.currActiveMat: ",
+        queditor.store.currActiveMat
       );
-      // console.error("branchFolder: ", branchFolder);
-      const data = await branchFolder.getAssetDetail();
-      // console.error("data: ", data);
-
-      let mat;
-      switch (branchFolder.nodeType) {
-        case "matGroupItem":
-          mat = (data as IQueentree.IAssetMatGroup).source.colorCards.find(
-            (d: PackMat) => d.id == branchFolder.state.id
-          );
-          break;
-        case "packMat":
-          mat = (data.source as Pack["source"]).mats.find(
-            (d: PackMat) => d.id == branchFolder.state.id
-          );
-          break;
-        case "mat":
-          mat = data.source as PackMat;
-          break;
-      }
-
-      if (data && mat) {
-        const matConf = resource.store.matSlots.find(
-          (item) => item.id == record.id
-        );
-        if (matConf) {
-          matConf.material = mat;
-        } else {
-          const matSlot = { id: record.id, material: mat };
-          resource.store.matSlots.push(matSlot);
-        }
-      }
-      // console.error("resource.store.matSlots: ", resource.store.matSlots);
-
-      const targetComp = getTargetProCom();
-      if (!targetComp || !mat) return;
-      queditor.actions.updatePackProductCompMat(targetComp, mat);
-    };
-
-    const getTargetProCom = () => {
-      const source: Pack["source"] = queditor.store.pack;
-      const targetPro = source.products[0];
-      const targetComp = targetPro?.components.find(
-        (c) => c.name == resource.store.currentMesh.meshName
-      );
-      return targetComp;
-    };
+      console.log("resource: ", resource.store);
+    });
 
     return () => {
-      const list = resource.store.currentMats || [];
       return (
         <div class="w-300px flex flex-col">
           <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
-            组件列表
+            面料编辑
+          </div>
+          <div class="px-15px py-15px flex-1 overflow-y-auto scrollbar">
+            <queditor.components.Panel.CurrEdit />
           </div>
-          <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
-            {{
-              item: (record: any) => (
-                <CompItem record={record} onClick={() => replaceMat(record)} />
-              ),
-              loadmore: () => (
-                <div class="text-center py-20px text-12px opacity-80">
-                  没有更多了
-                </div>
-              ),
-            }}
-          </List>
-        </div>
-      );
-    };
-  },
-});
-
-const CompItem = defineComponent({
-  props: {
-    record: any().isRequired,
-  },
-  emits: ["change", "click"],
-  setup(props, { emit }) {
-    return () => {
-      const { record } = props;
-      return (
-        <div
-          class="flex items-center py-6px px-12px rounded-4px"
-          style={{ backgroundColor: "#303030" }}
-        >
-          <Image src={record.thumbnail} class="w-48px rounded-4px" />
-          <div class="ml-10px flex-1 mr-5px w-0">{record.name || "未命名"}</div>
-          <Button
-            ghost
-            type="primary"
-            size="small"
-            onClick={() => emit("click", record)}
-          >
-            替换
-          </Button>
         </div>
       );
     };

src/pages/website/CreateMat/components/LeftPanel.tsx

@@ -2,18 +2,34 @@ import { useResource } from "@/modules/resource";
 import { cx } from "@linaria/core";
 import { useQueditor } from "@queenjs-modules/queditor";
 import { switchSceneProdComp } from "@queenjs-modules/queditor/module/controls/Queen3dCtrl/actions/geom";
-import { Pack } from "@queenjs-modules/queditor/objects";
+import { Pack, PackMat } from "@queenjs-modules/queditor/objects";
 import { AssetItemFile } from "@queenjs-modules/queentree-explorer/objects/fileSystem/assetFiles";
 import { Image, List } from "@queenjs/ui";
 import { Button } from "ant-design-vue";
-import { defineComponent } from "vue";
+import { computed, defineComponent, reactive } from "vue";
 import { any, bool } from "vue-types";
 import LibraryModal from "./LibraryModal";
+import { IQueentree } from "@queenjs-modules/queentree";
 
 export default defineComponent({
   setup() {
-    const resource = useResource();
     const queditor = useQueditor();
+    const resource = useResource();
+    const { store } = resource;
+
+    const state = reactive({
+      treeData: computed(() => {
+        // const data: any = [];
+        store.sourceDetail.webEditor?.meshSlots?.forEach((mesh: any) => {
+          console.error("mesh: ", mesh);
+          mesh.children = store.sourceDetail.webEditor?.matSlots?.filter(
+            (mat: any) => mat.meshSlotId == mesh.Id
+          );
+        });
+
+        return store.sourceDetail.webEditor?.meshSlots;
+      }),
+    });
 
     const replaceMesh = async () => {
       const branchFolder = await resource.showModal<AssetItemFile>(
@@ -30,29 +46,106 @@ export default defineComponent({
       queditor.actions.insertMesh(data);
     };
 
+    const replaceMat = async (record: any) => {
+      // console.error("replace=>", record);
+      const branchFolder = await resource.showModal<AssetItemFile>(
+        <LibraryModal nodeTypes={["matGroupItem", "mat", "packMat"]} />,
+        { width: "900px" }
+      );
+      // console.error("branchFolder: ", branchFolder);
+      const data = await branchFolder.getAssetDetail();
+      // console.error("data: ", data);
+
+      let mat;
+      switch (branchFolder.nodeType) {
+        case "matGroupItem":
+          mat = (data as IQueentree.IAssetMatGroup).source.colorCards.find(
+            (d: PackMat) => d.id == branchFolder.state.id
+          );
+          break;
+        case "packMat":
+          mat = (data.source as Pack["source"]).mats.find(
+            (d: PackMat) => d.id == branchFolder.state.id
+          );
+          break;
+        case "mat":
+          mat = data.source as PackMat;
+          break;
+      }
+
+      if (data && mat) {
+        const matConf = resource.store.matSlots.find(
+          (item) => item.id == record.id
+        );
+        if (matConf) {
+          matConf.material = mat;
+        } else {
+          const matSlot = { id: record.id, material: mat };
+          resource.store.matSlots.push(matSlot);
+        }
+      }
+      // console.error("resource.store.matSlots: ", resource.store.matSlots);
+
+      const targetComp = getTargetProCom();
+      if (!targetComp || !mat) return;
+      queditor.actions.updatePackProductCompMat(targetComp, mat);
+    };
+
+    const getTargetProCom = () => {
+      const source: Pack["source"] = queditor.store.pack;
+      const targetPro = source.products[0];
+      const targetComp = targetPro?.components.find(
+        (c) => c.name == resource.store.currentMesh.meshName
+      );
+      return targetComp;
+    };
+
     return () => {
-      const list = resource.store.sourceDetail.webEditor?.meshSlots || [];
+      const Meshlist = state.treeData || [];
+      // console.error("state.treeData", state.treeData);
+
       return (
         <div class="w-300px flex flex-col">
           <div class="p-15px text-16px text-white border-dark-800 border-0 border-b-1 border-solid">
             模型列表
           </div>
-          <List data={list} gap="10px" class="scrollbar flex-1 py-15px px-15px">
+
+          <List
+            data={Meshlist}
+            gap="10px"
+            class="scrollbar flex-1 py-15px px-15px"
+          >
             {{
               item: (record: any) => (
-                <ProductItem
-                  record={record}
-                  onChange={replaceMesh}
-                  active={record.Id == resource.store.selectedId}
-                  onClick={() => {
-                    switchSceneProdComp.call(
-                      queditor.controls.queen3dCtrl,
-                      queditor.store.pack.scenes[0].products[0].id,
-                      record.meshName
-                    );
-                    resource.store.setSelectedId(record.Id);
-                  }}
-                />
+                <div>
+                  <ProductItem
+                    record={record}
+                    onChange={replaceMesh}
+                    active={record.Id == resource.store.selectedId}
+                    onClick={() => {
+                      switchSceneProdComp.call(
+                        queditor.controls.queen3dCtrl,
+                        queditor.store.pack.scenes[0].products[0].id,
+                        record.meshName
+                      );
+                      resource.store.setSelectedId(record.Id);
+                    }}
+                  />
+                  <List
+                    gap="10px"
+                    class="py-15px pl-15px"
+                    data={record.children}
+                  >
+                    {{
+                      item: (item: any) => (
+                        <CompItem
+                          record={item}
+                          onClick={() => replaceMat(item)}
+                        />
+                      ),
+                    }}
+                  </List>
+                </div>
               ),
               loadmore: () => (
                 <div class="text-center py-20px text-12px opacity-80">
@@ -105,3 +198,32 @@ const ProductItem = defineComponent({
     };
   },
 });
+
+const CompItem = defineComponent({
+  props: {
+    record: any().isRequired,
+  },
+  emits: ["change", "click"],
+  setup(props, { emit }) {
+    return () => {
+      const { record } = props;
+      return (
+        <div
+          class="flex items-center py-6px px-12px rounded-4px"
+          style={{ backgroundColor: "#303030" }}
+        >
+          <Image src={record.thumbnail} class="w-48px rounded-4px" />
+          <div class="ml-10px flex-1 mr-5px w-0">{record.name || "未命名"}</div>
+          <Button
+            ghost
+            type="primary"
+            size="small"
+            onClick={() => emit("click", record)}
+          >
+            替换
+          </Button>
+        </div>
+      );
+    };
+  },
+});