category edit

src/modules/editor/components/Viewport/Slider/SliderLeft/CompsUser.tsx

@@ -66,7 +66,7 @@ export default defineUI({
         <div>
           <ListFilter
             class={"my-16px"}
-            sourceType={props.sourceType}
+            sourceType={sourceType}
             isSys={false}
             onChange={filterChange}
           />
@@ -86,7 +86,7 @@ export default defineUI({
             }}
           >
             {dataSource.map((item: compType) => {
-              const items = ["删除"];
+              const items = ["删除", "编辑"];
 
               if (isSys) {
                 item.published
@@ -129,7 +129,7 @@ export default defineUI({
                       <Menu
                         items={items}
                         onMenu={async (name) => {
-                          console.log("name", item);
+                          console.log("name", name);
                           if (name == "删除") {
                             const title = {
                               comp: "组合",
@@ -157,6 +157,10 @@ export default defineUI({
 
                             return;
                           }
+                          if (name == "编辑") {
+                            await resource.actions.editSource(item, sourceType);
+                            return;
+                          }
 
                           const pub = name == "发布平台";
                           await resource.actions.publishFrame(item, pub);

src/modules/editor/components/Viewport/Slider/SliderLeft/ListFilter/index.tsx

@@ -1,10 +1,10 @@
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import { css } from "@linaria/core";
+import { cloneDeep } from "lodash";
 import { defineComponent, reactive } from "vue";
 import { bool, string } from "vue-types";
 import CateFilter from "./CateFilter";
 import CateSelect from "./CateSelect";
-import { cloneDeep } from "lodash";
 
 export default defineComponent({
   props: {
@@ -13,7 +13,7 @@ export default defineComponent({
   },
   emits: ["change"],
   setup(props, { emit }) {
-    const { controls } = useEditor();
+    const { controls } = useResource();
     const state = reactive({
       limitLen: 2,
       values: {} as any,
@@ -57,7 +57,6 @@ export default defineComponent({
       });
       state.values = values;
       const categories = Object.values(values);
-
       emit(
         "change",
         categories && categories.length > 0 ? categories : undefined

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/List.tsx

@@ -113,7 +113,10 @@ export const Sources = defineComponent({
                         queenApi.messageSuccess("删除成功!");
                         return;
                       }
-
+                      if (name == "edit") {
+                        await resource.actions.editSource(item, sourceType);
+                        return;
+                      }
                       if (name == "publish" || name == "unpublish") {
                         const pub = name == "publish";
                         await resource.actions.publishMaterial(item, pub);

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/SourceItem.tsx

@@ -144,9 +144,9 @@ export default defineUI({
                     <Menu.Item>
                       <div onClick={() => emit("menu", "delete")}>删除</div>
                     </Menu.Item>
-                    {/* <Menu.Item>
-                      <div onClick={() => emit("menu", "category")}>编辑分类</div>
-                    </Menu.Item> */}
+                    <Menu.Item>
+                      <div onClick={() => emit("menu", "edit")}>编辑</div>
+                    </Menu.Item>
                     {isSys && !record.published && (
                       <Menu.Item>
                         <div onClick={() => emit("menu", "publish")}>

src/modules/editor/module/https/index.ts

@@ -48,20 +48,4 @@ export const https = EditorModule.http({
       data,
     });
   },
-  getCategories() {
-    return this.request("/category", {
-      method: "GET",
-    });
-  },
-  updateCategories(data: any) {
-    return this.request("/category", {
-      method: "POST",
-      data,
-    });
-  },
-  getSysCategories() {
-    return this.request("/sys/category", {
-      method: "GET",
-    });
-  },
 });

src/modules/editor/module/index.ts

@@ -13,21 +13,20 @@ import { initActions } from "./actions/init";
 import { helpers } from "./helpers";
 import { editHelpers } from "./helpers/edit";
 
-import { https } from "./https";
-import { store } from "./stores";
-import { DragAddCtrl } from "../controllers/DragAddCtrl";
-import { SelectCtrl } from "../controllers/SelectCtrl";
-import { CompObject } from "../controllers/SelectCtrl/compObj";
-import { manualActions } from "./actions/editWithManualHistory";
 import { wxController } from "@/controllers/wxController";
+import { AnimCtrl } from "../controllers/AnimCtrl";
 import { ImageCropperCtrl } from "../controllers/CropperCtrl";
+import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
+import { DragAddCtrl } from "../controllers/DragAddCtrl";
+import { EditorCtrl } from "../controllers/EditorCtrl";
 import { MediaCtrl } from "../controllers/MediaCtrl/indext";
-import { AnimCtrl } from "../controllers/AnimCtrl";
-import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
 import { ScreenCtrl } from "../controllers/ScreenCtrl";
-import { EditorCtrl } from "../controllers/EditorCtrl";
-import { CtxMenuCtrl } from "../controllers/CtxMenuCtrl";
-import { CategoryCtrl } from "../controllers/CategoryCtrl";
+import { SelectCtrl } from "../controllers/SelectCtrl";
+import { CompObject } from "../controllers/SelectCtrl/compObj";
+import { TextEditorCtrl } from "../controllers/TextEditorCtrl";
+import { manualActions } from "./actions/editWithManualHistory";
+import { https } from "./https";
+import { store } from "./stores";
 
 export class EditorModule extends ModuleRoot {
   config = this.setConfig({
@@ -73,7 +72,6 @@ export class EditorModule extends ModuleRoot {
     screenCtrl: new ScreenCtrl(this),
     editorCtrl: new EditorCtrl(this),
     menuCtrl: new CtxMenuCtrl(this),
-    categoryCtrl: new CategoryCtrl(this),
   };
 
   compObjsMap = new Map<string, CompObject>();
@@ -83,7 +81,6 @@ export class EditorModule extends ModuleRoot {
     // this.controls.animCtrl.initEvent();
     this.controls.screenCtrl.initEvent();
     this.controls.menuCtrl.initEvent();
-    this.controls.categoryCtrl.init();
   }
 
   jumpIndexHtml(route = "#/") {

src/modules/resource/actions/promotion.tsx

@@ -44,6 +44,29 @@ export const promotionAction = ResourceModule.action({
     if (!res) return;
     await this.https.deleteComp(record._id);
   },
+  async editSource(record: any, sourceType: string) {
+    // const itemRes = await this.https.detailComp(record._id);
+    // if (itemRes.errorNo != 200) {
+    //   queenApi.messageWarn("未查询到数据！");
+    //   return;
+    // }
+    let type = sourceType.toLowerCase();
+    const res = await this.showModal(
+      <this.components.SouceModal item={record} sourceType={type} />,
+      {
+        width: "360px",
+        title: "编辑",
+        maskClosable: false,
+      }
+    );
+
+    if (type == "image" || type == "video") {
+      await this.https.updateResouce(res);
+    } else {
+      await this.https.updateComp(res);
+    }
+    queenApi.messageSuccess("保存成功");
+  },
 
   async createPromotion() {
     const title = await queenApi.showInput({

src/modules/resource/components/SouceModal.tsx

@@ -0,0 +1,172 @@
+import { css } from "@linaria/core";
+import { Image } from "@queenjs/ui";
+import { Button, Form, Input, TreeSelect } from "ant-design-vue";
+import { useModal } from "queenjs";
+import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";
+import { any, string } from "vue-types";
+import { useResource } from "..";
+export default defineComponent({
+  props: {
+    item: any(),
+    sourceType: string().isRequired,
+  },
+  setup(props) {
+    const { controls } = useResource();
+    let data = props.item
+      ? { ...props.item }
+      : {
+          title: "",
+          categories: [],
+        };
+    if (!data.categories) {
+      data.categories = [];
+    }
+    const formState: { [name: string]: any } = reactive({ ...data });
+    const sourceTitle = ["comp", "shape", "text"];
+    const state = reactive({
+      categoriesVal: {} as any,
+      categoryList: [] as any,
+      categoryMap: new Map<string, any>(),
+    });
+
+    const getCate = () => {
+      const categories = controls.categoryCtrl.state.categories;
+      const currCate: any = categories.find((e: any) => {
+        return e.value == props.sourceType;
+      });
+      initCateMap(currCate?.children || []);
+      state.categoryList = currCate?.children || [];
+    };
+    const initCateMap = (options: any, parent = "") => {
+      options.map((e: any) => {
+        state.categoryMap.set(e.id, {
+          parent: parent,
+          children: e.children || undefined,
+        });
+        if (e.children) {
+          initCateMap(e.children, e.id);
+        }
+      });
+    };
+    onMounted(() => {
+      getCate();
+      nextTick(() => {
+        initCateValue();
+      });
+    });
+
+    const initCateValue = () => {
+      let values: any = {};
+      formState.categories.map((id: string) => {
+        const rootId = getRootParent(id);
+        if (rootId) {
+          values[rootId] || (values[rootId] = []);
+          values[rootId].push(id);
+        }
+      });
+
+      state.categoriesVal = values;
+    };
+    const getRootParent = (id: string): string => {
+      const item = state.categoryMap.get(id);
+      if (!item.parent) {
+        return id;
+      } else {
+        return getRootParent(item.parent);
+      }
+    };
+    const rules = ref({
+      title: [
+        {
+          required: sourceTitle.includes(props.sourceType) ? true : false,
+          message: "名称不能为空！",
+        },
+      ],
+    });
+
+    const { validate, validateInfos } = Form.useForm(formState, rules);
+
+    const modal = useModal();
+
+    const submit = () => {
+      validate().then(async (values) => {
+        let categoriesVal: any = [];
+        Object.values(state.categoriesVal).forEach((e: any) => {
+          categoriesVal = [...categoriesVal, ...e];
+        });
+        formState.categories = categoriesVal;
+        modal.submit(formState);
+      });
+    };
+
+    return () => {
+      const thumbnail =
+        props.sourceType != "image" ? formState.thumbnail : formState.file.url;
+      return (
+        <div class={configFormStyle}>
+          <div class="modal_form">
+            <Form name="basic">
+              <Form.Item name="thumbnail">
+                <div class={"h-180px bg-light-50"}>
+                  <Image
+                    class="w-1/1 h-1/1 !object-contain"
+                    src={thumbnail}
+                    style={{ aspectRatio: 1 }}
+                    size={240}
+                  />
+                </div>
+              </Form.Item>
+              {sourceTitle.includes(props.sourceType) && (
+                <Form.Item name="title" {...validateInfos.title}>
+                  <Input v-model={[formState.title, "value"]} />
+                </Form.Item>
+              )}
+              {state.categoryList.map((item: any, index: number) => {
+                return (
+                  <Form.Item key={index} name={`categories.${index}`}>
+                    <TreeSelect
+                      value={state.categoriesVal[item.id]}
+                      allowClear
+                      treeCheckable
+                      dropdownStyle={{ maxHeight: "500px", overflow: "auto" }}
+                      placeholder={`请选择${item.name}`}
+                      treeData={item?.children}
+                      replaceFields={{
+                        children: "children",
+                        label: "name",
+                        value: "id",
+                      }}
+                      onChange={(v) => {
+                        state.categoriesVal[item.id] = v;
+                      }}
+                    />
+                  </Form.Item>
+                );
+              })}
+            </Form>
+          </div>
+          <div class="modal_footer">
+            <Button onClick={modal.cancel}>取消</Button>
+            <Button type="primary" onClick={submit}>
+              确定
+            </Button>
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+const configFormStyle = css`
+  .thumb_wapper {
+    height: 180px;
+  }
+  .modal_footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 0;
+    .ant-btn + .ant-btn {
+      margin-left: 10px;
+    }
+  }
+`;

src/modules/resource/components/index.ts

@@ -1,6 +1,7 @@
 import MaterialItem from "./MaterialItem";
 import PromotionItem from "./PromotionItem";
 import ResourceManager from "./ResourceManager";
+import SouceModal from "./SouceModal";
 import CollectionEditModal from "./Collection/CollectionEditModal";
 import CollectionListModal from "./Collection/CollectionListModal";
 
@@ -10,4 +11,5 @@ export const compoents = {
   ResourceManager,
   CollectionEditModal,
   CollectionListModal,
+  SouceModal,
 };

src/modules/editor/controllers/CategoryCtrl/index.ts → src/modules/resource/controllers/CategoryCtrl/index.ts

@@ -1,8 +1,8 @@
 import { ModuleControl } from "queenjs";
 import { reactive } from "vue";
-import { EditorModule } from "../../module";
+import { ResourceModule } from "../../index";
 import { nanoid } from "nanoid";
-export class CategoryCtrl extends ModuleControl<EditorModule> {
+export class CategoryCtrl extends ModuleControl<ResourceModule> {
   state = reactive({
     result: {} as any,
     categories: [],

src/modules/resource/http.ts

@@ -67,6 +67,9 @@ export const http = ResourceModule.http({
   updateComp(data: any) {
     return this.request("/frame/update", { method: "POST", data });
   },
+  detailComp(id: string) {
+    return this.request(`/frame/detail/${id}`, { method: "GET" });
+  },
 
   deleteComp(id: string) {
     return this.request(`/frame/delete/${id}`, { method: "POST" });
@@ -103,6 +106,22 @@ export const http = ResourceModule.http({
   deleteCommitData(data: any) {
     return this.request(`/wk/h5/delete`, { method: "POST", data });
   },
+  getCategories() {
+    return this.request("/category", {
+      method: "GET",
+    });
+  },
+  updateCategories(data: any) {
+    return this.request("/category", {
+      method: "POST",
+      data,
+    });
+  },
+  getSysCategories() {
+    return this.request("/sys/category", {
+      method: "GET",
+    });
+  },
 });
 
 /**

src/modules/resource/index.ts

@@ -8,6 +8,7 @@ import { compoents } from "./components";
 import { helper } from "./helper";
 import { http } from "./http";
 import { store } from "./store";
+import { CategoryCtrl } from "./controllers/CategoryCtrl";
 
 export class ResourceModule extends ModuleRoot {
   config = this.setConfig({
@@ -57,11 +58,13 @@ export class ResourceModule extends ModuleRoot {
     sysTextListCtrl: new PageListController<compType, any>(
       this.config?.httpConfig
     ),
+    categoryCtrl: new CategoryCtrl(this),
   };
   natsBus = new BusController();
   treeController = new TreeController(this.natsBus);
 
   onReady() {
+    this.controls.categoryCtrl.init();
     this.controls.promotionListCtrl.setCrudPrefix("/h5");
     this.controls.promotionListCtrl.state.size = 12;
     this.controls.materialListCtrl.setCrudPrefix("/source");

src/pages/website/Category/CategoryTree.tsx

@@ -1,4 +1,4 @@
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import {
   DeleteOutlined,
   FormOutlined,
@@ -52,7 +52,7 @@ const TreeNode = defineComponent({
     item: any().isRequired,
   },
   setup(props) {
-    const { controls } = useEditor();
+    const { controls } = useResource();
     const addItem = async (parent = "_") => {
       const name = await queenApi.showInput({
         title: "分类名称",

src/pages/website/Category/index.tsx

@@ -2,12 +2,12 @@ import { css } from "@linaria/core";
 
 import { defineComponent } from "vue";
 
-import { useEditor } from "@/modules/editor";
+import { useResource } from "@/modules/resource";
 import CategoryTree from "./CategoryTree";
 
 export default defineComponent({
   setup() {
-    const { controls } = useEditor();
+    const { controls } = useResource();
 
     return () => {
       return (