update

src/modules/resource/actions.ts

@@ -1,5 +0,0 @@
-import { ResourceModule } from ".";
-
-export const actions = ResourceModule.action({
-  //
-});

src/modules/resource/actions/index.ts

@@ -0,0 +1,3 @@
+import { materialActions } from "./material";
+
+export const actions = [materialActions];

src/modules/resource/actions/material.ts

@@ -0,0 +1,22 @@
+import { queenApi } from "queenjs";
+import { ResourceModule } from "..";
+
+export const materialActions = ResourceModule.action({
+  uploadMaterial() {
+    //
+  },
+  async deleteMaterial(record) {
+    const res = await queenApi.showConfirm({
+      content: `删除后不可恢复，是否要删除:${record.name}`,
+      type: "danger",
+    });
+    if (!res) return;
+    console.log("record: ", record);
+  },
+  downloadMaterial(record) {
+    console.log("record: ", record);
+  },
+  selectMaterial(record) {
+    console.log("record: ", record);
+  },
+});

src/pages/website/Material/components/MaterialItem.tsx → src/modules/resource/components/MaterialItem.tsx

@@ -12,7 +12,7 @@ export default defineComponent({
   setup(props, { emit }) {
     return () => {
       const { record } = props;
-      console.log("record: ", record);
+      // console.log("record: ", record);
       return (
         <div class={itemStyles}>
           <div class="waiting flex items-center justify-center text-white">

src/modules/resource/components/index.ts

@@ -0,0 +1,5 @@
+import MaterialItem from "./MaterialItem";
+
+export const compoents = {
+  MaterialItem,
+};

src/modules/resource/index.ts

@@ -1,10 +1,23 @@
+import { PageListController } from "@queenjs/controllers";
 import { ModuleRoot } from "queenjs";
 import { actions } from "./actions";
+import { compoents } from "./components";
 import { store } from "./store";
 
 export class ResourceModule extends ModuleRoot {
-  actions = this.createActions([actions]);
+  actions = this.createActions(actions);
   store = this.createStore([store]);
+  components = this.useComponents(compoents);
+
+  controls = {
+    materialListCtrl: new PageListController(this.config?.httpConfig),
+    matTempListCtrl: new PageListController(this.config?.httpConfig),
+  };
+
+  onReady() {
+    this.controls.materialListCtrl.setCrudPrefix("/");
+    this.controls.matTempListCtrl.setCrudPrefix("/");
+  }
 }
 
 export const { useResource, initResource } = ResourceModule.hook("Resource");

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

@@ -1,6 +1,7 @@
+import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
 import { useModal } from "queenjs";
-import { defineComponent } from "vue";
+import { defineComponent, onMounted } from "vue";
 import { string } from "vue-types";
 import AssetsList from "../../components/AssetsList";
 
@@ -8,13 +9,29 @@ export default defineComponent({
   props: {
     type: string(),
   },
-  setup() {
+  setup(props) {
     const modal = useModal();
+    const resource = useResource();
+
+    onMounted(() => {
+      resource.controls.matTempListCtrl.state.query = {
+        type: props.type,
+      };
+      resource.controls.matTempListCtrl.loadPage(1);
+    });
 
     return () => {
       return (
         <div class={rootStyles}>
-          <AssetsList />
+          <AssetsList
+            control={resource.controls.matTempListCtrl}
+            item={(record: any) => (
+              <resource.components.MaterialItem
+                record={record}
+                onSelect={() => resource.actions.selectMaterial(record)}
+              />
+            )}
+          />
         </div>
       );
     };

src/pages/website/Material/index.tsx

@@ -1,10 +1,15 @@
 import { useResource } from "@/modules/resource";
 import { css, cx } from "@linaria/core";
 import { Button, Space } from "ant-design-vue";
-import { defineComponent, reactive } from "vue";
+import { defineComponent, onMounted, reactive } from "vue";
 import AssetsList from "../components/AssetsList";
 import MaterialTemplateModal from "./components/MaterialTemplateModal";
 
+const materialType = [
+  { name: "视频", key: "video" },
+  { name: "图片", key: "image" },
+];
+
 export default defineComponent({
   setup() {
     const resource = useResource();
@@ -20,14 +25,11 @@ export default defineComponent({
       });
     };
 
-    const uploadMaterial = () => {
-      //
-    };
+    onMounted(() => {
+      resource.controls.materialListCtrl.state.query = { type: state.type };
+      // resource.controls.materialListCtrl.loadPage(1);
+    });
 
-    const materialType = [
-      { name: "视频", key: "video" },
-      { name: "图片", key: "image" },
-    ];
     return () => {
       return (
         <div class={rootStyles}>
@@ -52,20 +54,24 @@ export default defineComponent({
               </Space>
             </div>
             <div>
-              <Button type="primary" ghost onClick={uploadMaterial}>
+              <Button
+                ghost
+                type="primary"
+                onClick={resource.actions.uploadMaterial}
+              >
                 上传素材
               </Button>
               <Button
-                type="primary"
                 ghost
+                type="primary"
                 class="ml-25px"
                 onClick={() => showModal("image")}
               >
                 生成图片
               </Button>
               <Button
-                type="primary"
                 ghost
+                type="primary"
                 class="ml-15px"
                 onClick={() => showModal("video")}
               >
@@ -73,7 +79,17 @@ export default defineComponent({
               </Button>
             </div>
           </div>
-          <AssetsList class="mt-30px" />
+          <AssetsList
+            class="mt-30px"
+            control={resource.controls.materialListCtrl}
+            item={(record: any) => (
+              <resource.components.MaterialItem
+                record={record}
+                onDelete={() => resource.actions.deleteMaterial(record)}
+                onDownload={() => resource.actions.downloadMaterial(record)}
+              />
+            )}
+          />
         </div>
       );
     };

src/pages/website/components/AssetsList.tsx

@@ -1,28 +1,38 @@
-import { Pagination } from "ant-design-vue";
-import { defineComponent } from "vue";
-import { number, string } from "vue-types";
-import { List } from "@queenjs/ui";
-import MaterialItem from "../Material/components/MaterialItem";
 import { css } from "@linaria/core";
+import { List } from "@queenjs/ui";
+import { Empty, Pagination } from "ant-design-vue";
+import { nanoid } from "nanoid";
+import { defineComponent } from "vue";
+import { any, number, string } from "vue-types";
 
 export default defineComponent({
   props: {
     columns: number().def(5),
     gap: string().def("15px"),
+    item: any().isRequired,
+    control: any().isRequired,
   },
   setup(props) {
     return () => {
-      const { columns, gap } = props;
-      const data = new Array(20).fill({ id: "" });
+      const { control, columns, gap } = props;
+      const data =
+        //  control.state.list ||
+        new Array(20).fill({ id: nanoid() });
       return (
         <div class={styles}>
           <List data={data} columns={columns} gap={gap}>
             {{
-              item: () => <MaterialItem />,
+              item: (record: any) => props.item?.(record),
+              empty: () => <Empty class="py-50px" description="暂无数据" />,
             }}
           </List>
           <div class="text-center my-30px">
-            <Pagination size="default" />
+            <Pagination
+              size="default"
+              hideOnSinglePage
+              total={control.state.total}
+              onChange={control.loadPage}
+            />
           </div>
         </div>
       );