material

src/modules/resource/actions/material.ts

@@ -2,15 +2,14 @@ import { queenApi } from "queenjs";
 import { ResourceModule } from "..";
 
 export const materialActions = ResourceModule.action({
-  async uploadMaterial() {
-    const files = await this.helper.uploadResource({
+  async createMaterial() {
+    const { successRow, failRow } = await this.helper.uploadMaterials({
       accept: "image/*, video/mp4",
       multiple: true,
     });
 
-    let souceObj = files[0];
-    for (const key in files) {
-      souceObj = files[key];
+    for (const key in successRow) {
+      const souceObj = successRow[key];
       await this.https.createResource(souceObj);
     }
 
@@ -18,7 +17,7 @@ export const materialActions = ResourceModule.action({
       fileType: this.store.type,
     };
     this.controls.materialListCtrl.loadPage(1);
-    return souceObj;
+    return { successRow, failRow };
   },
 
   async deleteMaterial(record) {

src/modules/resource/components/ResourceManager/Toolbar.tsx

@@ -48,7 +48,7 @@ export default defineComponent({
             <Button
               ghost
               type="primary"
-              onClick={resource.actions.uploadMaterial}
+              onClick={resource.actions.createMaterial}
             >
               上传素材
             </Button>

src/modules/resource/helper.ts

@@ -1,8 +1,7 @@
 import { PageListController } from "@queenjs/controllers";
+import { queenApi } from "queenjs";
 import { ResourceModule } from ".";
 import { ComponentController } from "./controllers/ComponentController";
-import { MaterialController } from "./controllers/MaterialController";
-import { queenApi } from "queenjs";
 
 export const helper = ResourceModule.helper({
   createFileName(fileName: string, dir: string) {
@@ -73,7 +72,40 @@ export const helper = ResourceModule.helper({
       };
       result.push(souceObj);
     }
-    
+
+    queenApi.hideLoading();
+    return result;
+  },
+
+  async uploadMaterials(opts?: { accept?: string; multiple?: boolean }) {
+    const result: any = {
+      successRow: [],
+      failRow: [],
+    };
+    const blobs = await queenApi.selectFile(opts);
+
+    queenApi.showLoading("上传中……");
+
+    for (const key in blobs) {
+      const blob = blobs[key];
+      if (blob.type.indexOf("image") !== -1 && blob.size >= 10 * 1024 * 1024) {
+        result.failRow.push(blob);
+      } else if (
+        blob.type.indexOf("video") !== -1 &&
+        blob.size >= 200 * 1024 * 1024
+      ) {
+        result.failRow.push(blob);
+      } else {
+        const file = await this.controls.uploader.uploadFile(blob, "queenshow");
+        const souceObj = {
+          file,
+          fileType: blob.type.split("/")[0],
+          from: "upload",
+        };
+        result.successRow.push(souceObj);
+      }
+    }
+
     queenApi.hideLoading();
     return result;
   },

src/pages/website/Material2/components/Material.tsx

@@ -22,9 +22,9 @@ export default defineUI({
       props.Controller.getCurrControl().loadPage(1);
     });
 
-        return ()=>{
+    return () => {
       const state = props.Controller.state;
-            const control = props.Controller.getCurrControl()
+      const control = props.Controller.getCurrControl();
 
       return (
         <div class={rootStyles}>
@@ -32,13 +32,12 @@ export default defineUI({
             <div class="flex items-baseline">
               <h3 class="text-22px m-0">我的素材</h3>
               <span class="ml-5px text-gray-300 text-12px">
-                (图片支持jpg、png、gif、svg，不超过5M，视频支持mp4，不超过200M)
+                (图片支持jpg、png、gif、svg，不超过10M，视频支持mp4，不超过200M)
               </span>
             </div>
           )}
 
           <slots.Toolbar Controller={props.Controller} />
-
           <slots.AssetsList
             columns={6}
             class="mt-30px"
@@ -46,19 +45,29 @@ export default defineUI({
             item={(record: any) => (
               <slots.MaterialItem
                 record={record}
-                  use={ state.currTab == "task" ? "task" : (state.isSelect? "select": "show")}
+                use={
+                  state.currTab == "task"
+                    ? "task"
+                    : state.isSelect
+                    ? "select"
+                    : "show"
+                }
                 onDelete={() => props.Controller.onItemClick("delete", record)}
-                  onDownload={() =>props.Controller.onItemClick("download", record)}
-                  onUse={()=>props.Controller.onItemClick("use", record)}
-                  onPreview={() =>props.Controller.onItemClick("preview", record)}
+                onDownload={() =>
+                  props.Controller.onItemClick("download", record)
+                }
+                onUse={() => props.Controller.onItemClick("use", record)}
+                onPreview={() =>
+                  props.Controller.onItemClick("preview", record)
+                }
               />
             )}
           />
-          </div>);
-        }
+        </div>
+      );
+    };
   },
-
-})
+});
 
 const rootStyles = css`
   .btn_tab {

src/pages/website/Material2/controller.tsx

@@ -2,79 +2,98 @@ import SelectListItemModal from "./components/SelectListItemModal";
 import { MaterialController } from "../../../modules/resource/controllers/MaterialController";
 import PreviewModal from "../components/PreviewModal";
 import { queenApi } from "queenjs";
+import { ResourceModule } from "@/modules/resource";
 
-export default function createController(resource:any, isSelectModel:boolean, selectType :string) {
-    const {controls, actions} = resource;
-    const  showModal = async (type: string) => {
-        const ctrl = resource.controls.matTempListCtrl;
-        ctrl.state.query = type == "video" ? { hasVideo: true } : {}
-        ctrl.loadPage(1);
-        const record  = await resource.showModal(<SelectListItemModal ListCtrl={ctrl} onPreview={(record) => {
-          showPreviewModal({
-            url:record.thumbnail,
-            fileType:type == "video" ? "video":'image'
-          })
-        }}  />, {
-          title: `${type === "image" ? "图片" : "视频"}模板中心`,
-          width: "1000px",
-        });
-        resource.actions.selectMaterial(record);
-    };
+export default function createController(
+  resource: ResourceModule,
+  isSelectModel: boolean,
+  selectType: string
+) {
+  const { controls, actions } = resource;
 
-    const  showPreviewModal = (data: {
-      url: string;
-      fileType: "image" | "video";
-    }) => {
-      resource.showModal(<PreviewModal data={data}  />, {
-        title: "预览",
+  const showModal = async (type: string) => {
+    const ctrl = resource.controls.matTempListCtrl;
+    ctrl.state.query = type == "video" ? { hasVideo: true } : {};
+    ctrl.loadPage(1);
+    const record = await resource.showModal(
+      <SelectListItemModal
+        ListCtrl={ctrl}
+        onPreview={(record) => {
+          showPreviewModal({
+            url: record.thumbnail,
+            fileType: type == "video" ? "video" : "image",
+          });
+        }}
+      />,
+      {
+        title: `${type === "image" ? "图片" : "视频"}模板中心`,
         width: "1000px",
-        centered: true
-      }); 
+      }
+    );
+    resource.actions.selectMaterial(record);
   };
 
-    const ctrl = new MaterialController();
-    ctrl.imageCtrl = controls.materialImageListCtrl;
-    ctrl.vidoeCtrl = controls.materialVideoListCtrl;
-    ctrl.taskCtrl = controls.renderTaskListCtrl;
-    ctrl.state.isSelect = isSelectModel;
-    if (selectType) ctrl.state.selectType = selectType;
+  const showPreviewModal = (data: {
+    url: string;
+    fileType: "image" | "video";
+  }) => {
+    resource.showModal(<PreviewModal data={data} />, {
+      title: "预览",
+      width: "1000px",
+      centered: true,
+    });
+  };
 
-    ctrl.onBtnClick = async function (name: string) {
-      if (name == "upload") {
-        const uploaded = await resource.actions.uploadMaterial();
-        ctrl.switchTab(uploaded.fileType, false);
+  const ctrl = new MaterialController();
+  ctrl.imageCtrl = controls.materialImageListCtrl;
+  ctrl.vidoeCtrl = controls.materialVideoListCtrl;
+  ctrl.taskCtrl = controls.renderTaskListCtrl;
+  ctrl.state.isSelect = isSelectModel;
+  if (selectType) ctrl.state.selectType = selectType;
 
-        if (uploaded && uploaded.file?.url) {
-           if (ctrl.state.isSelect) {
-            ctrl.onCloseDialog(uploaded.file?.url);
-            return;
-           }
-        }
+  ctrl.onBtnClick = async function (name: string) {
+    if (name == "upload") {
+      const { successRow, failRow } = await resource.actions.createMaterial();
 
-        ctrl.getCurrControl().loadPage(1);
-        return;
+      if (failRow.length > 0) {
+        queenApi.messageError(
+          `${failRow.length}条数据上传失败，超过限制大小。`
+        );
       }
-      queenApi.messageSuccess("功能开发中, 敬请期待!")
-      //showModal(name);
-    };
-    ctrl.onItemClick = async function (name, record) {
-      if (name == "delete") {
-         await actions.deleteMaterial(record);
-         this.getCurrControl().fresh();
-         return;
+
+      const uploaded = successRow[0];
+      if (uploaded && uploaded.file?.url) {
+        ctrl.switchTab(uploaded?.fileType, false);
+        if (ctrl.state.isSelect) {
+          ctrl.onCloseDialog(uploaded.file?.url);
+          return;
+        }
       }
-      else if (name == "preview") return showPreviewModal({
+
+      ctrl.getCurrControl().loadPage(1);
+      return;
+    }
+    queenApi.messageSuccess("功能开发中, 敬请期待!");
+    //showModal(name);
+  };
+  ctrl.onItemClick = async function (name, record) {
+    if (name == "delete") {
+      await actions.deleteMaterial(record);
+      this.getCurrControl().fresh();
+      return;
+    } else if (name == "preview")
+      return showPreviewModal({
         url: record.file.url,
         fileType: record.fileType,
       });
-      else if (name == "use") {
-          console.log(name, record);
-          ctrl.onCloseDialog(record.file.url);
-          return;
-      }
+    else if (name == "use") {
+      // console.log(name, record);
+      ctrl.onCloseDialog(record.file.url);
+      return;
+    }
 
-      return actions.downloadMaterial(record);
-    };
+    return actions.downloadMaterial(record);
+  };
 
-    return ctrl
-}
+  return ctrl;
+}