Browse Source

添加素材的管理

liwei 1 year ago
parent
commit
3fb42251c8

+ 102 - 0
src/modules/editor/components/Viewport/Slider/SliderLeft/SourceItem.tsx

@@ -0,0 +1,102 @@
+import { css, cx } from "@linaria/core";
+import { IconMore } from "@queenjs/icons";
+import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
+import { EyeOutlined } from "@ant-design/icons-vue";
+import dayjs from "dayjs";
+import { defineUI } from "queenjs";
+import { any, bool } from "vue-types";
+import { useAuth } from "@queenjs-modules/auth";
+import Thumbnail from "@/components/Thumbnail";
+
+export default defineUI({
+  props: {
+    record: any(),
+    tagable: bool().def(false),
+  },
+  emits: ["edit", "preview", "menu", "click"],
+  setup(props, { emit }) {
+    const auth = useAuth();
+
+    return () => {
+      const { record } = props;
+
+      //@ts-ignore
+      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;
+
+      return (
+        <div class={cx(itemStyles, "relative")}>
+          <Thumbnail
+            size={240}
+            class="draggable-item"
+            style={{ aspectRatio: 1 }}
+            onClick={() => emit("click")}
+            objectContain={record.fileType == "image" ? true : false}
+            src={
+              record.fileType == "video" ? record.thumbnail : record.file.url
+            }
+          />
+          {isSys && props.tagable && (
+            <Tag
+              color={record.published? "green": "#E88B00" }
+              // color="rgba(0, 0, 0, 0.4)"
+              class="absolute top-0 left-0 z-1 !rounded-none"
+            >
+              {record.published ? "已发布" : "未发布"}
+            </Tag>
+          )}
+
+          {props.tagable && (
+            <div class="item_footer rounded-b-4px flex items-center justify-between p-4px">
+              <div class="flex-1 w-0">
+                {/* <div class="text-white text-bold truncate">{record.title}</div> */}
+                <div class="flex items-center text-opacity-60 text-white text-12px">
+                  {dayjs(record.createTime).format("YYYY.MM.DD")}
+                </div>
+              </div>
+              <Dropdown
+                placement="bottom"
+                overlay={
+                  <Menu class="w-90px">
+                    <Menu.Item>
+                      <div onClick={() => emit("menu", "delete")}>删除</div>
+                    </Menu.Item>
+
+                    {isSys && !record.published && (
+                      <Menu.Item>
+                        <div onClick={() => emit("menu", "publish")}>
+                          发布平台
+                        </div>
+                      </Menu.Item>
+                    )}
+
+                    {isSys && record.published && (
+                      <Menu.Item>
+                        <div onClick={() => emit("menu", "unpublish")}>
+                          取消发布
+                        </div>
+                      </Menu.Item>
+                    )}
+                  </Menu>
+                }
+              >
+                <IconMore class="ml-10px text-22px cursor-pointer" />
+              </Dropdown>
+            </div>
+          )}
+        </div>
+      );
+    };
+  },
+});
+
+const itemStyles = css`
+  .item_footer {
+    background: #414141;
+  }
+  .icon_action {
+    background-color: rgba(0, 0, 0, 0.8);
+    &.orange {
+      background-color: rgba(232, 139, 0, 0.8);
+    }
+  }
+`;

+ 21 - 8
src/modules/editor/components/Viewport/Slider/SliderLeft/Sources.tsx

@@ -7,6 +7,8 @@ import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { Loadmore } from "@queenjs/ui";
 import Empty from "@queenjs/ui/empty";
+import SourceItem from "./SourceItem";
+import { queenApi } from "queenjs";
 
 export const Sources = defineComponent({
   props: {
@@ -70,15 +72,26 @@ export const Sources = defineComponent({
           >
             {dataSource.map((item: any) => (
               <Draggable>
-                <Thumbnail
-                  size={240}
-                  class="draggable-item"
-                  style={{ aspectRatio: 1 }}
+                <SourceItem
+                  record={item}
+                  tagable={props.sourceFrom == "user"}
                   onClick={() => clickToDesign(item.file.url)}
-                  objectContain={item.fileType == "image" ? true : false}
-                  src={
-                    item.fileType == "video" ? item.thumbnail : item.file.url
-                  }
+                  onMenu={async (name)=>{
+                      console.log(name);
+                      if (name == "delete") {
+                        await resource.actions.deleteMaterial(item);
+                        control.fresh();
+                        queenApi.messageSuccess("删除成功!");
+                        return;
+                      }
+
+                      if (name == "publish" || name== "unpublish") {
+                        const pub = name=="publish"
+                        await resource.actions.publishMaterial(item, pub);
+                        item.published = pub; 
+                        queenApi.messageSuccess("操作成功!");
+                      }
+                  }}
                 />
               </Draggable>
             ))}

+ 4 - 0
src/modules/resource/actions/material.ts

@@ -30,6 +30,10 @@ export const materialActions = ResourceModule.action({
     // this.controls.materialListCtrl.fresh();
   },
 
+  publishMaterial(record: any, publish:boolean ) {
+    return this.https.publishResource({_id: record._id, published: publish});
+  },
+
   downloadMaterial(record) {
     window.open(record.file.url);
   },

+ 6 - 0
src/modules/resource/actions/promotion.tsx

@@ -12,6 +12,12 @@ export const promotionAction = ResourceModule.action({
     record.title = title;
   },
 
+  async publishPromotion(record:any, publish: boolean) {
+    await this.https.publishPromotion(record._id, publish);
+    record.published = publish;
+    queenApi.messageSuccess("操作成功!");
+  },
+
   async deletePromotion(record: any) {
     const res = await queenApi.showConfirm({
       content: `删除后无法恢复,确定要删除:${record.title}?`,

+ 9 - 0
src/modules/resource/http.ts

@@ -5,6 +5,11 @@ export const http = ResourceModule.http({
   deleteResource(id: string) {
     return this.request(`/source/delete/${id}`, { method: "POST" });
   },
+  publishResource(data:any) {
+    return this.request(`sys/source/publish`, { method: "POST" , data});
+  },
+
+
   createResource(data: any) {
     return this.request("/source/create", { method: "POST", data });
   },
@@ -34,6 +39,10 @@ export const http = ResourceModule.http({
     return this.request(`/h5/delete/${id}`, { method: "POST" });
   },
 
+  publishPromotion(id: string, publish: boolean) { 
+    return this.request("/sys/h5/publish", { method: "POST",  data:{_id: id, published: publish}});
+  },
+  
   //   comp
   createComp(data: any) {
     return this.request("/frame/create", { method: "POST", data });

+ 35 - 9
src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -1,11 +1,12 @@
 import { css, cx } from "@linaria/core";
 import { IconMore } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { Divider, Dropdown, Menu } from "ant-design-vue";
+import { Divider, Dropdown, Menu , Tag} from "ant-design-vue";
 import { EyeOutlined } from "@ant-design/icons-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
 import { any } from "vue-types";
+import { useAuth } from "@queenjs-modules/auth";
 
 // const ShareBox = defineComponent({
 //   props: {
@@ -40,23 +41,36 @@ export default defineUI({
   },
   emits: ["edit", "preview", "menu"],
   setup(props, { emit }) {
+
+    const auth = useAuth();
+
     return () => {
       const { record } = props;
+  
+      //@ts-ignore
+      const isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1
 
-      return (
+      
+        return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1} class="overflow-hidden relative">
             <Image
               class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
-            {/* <Tag
-              color="#E88B00"
-              // color="rgba(0, 0, 0, 0.4)"
-              class="absolute top-0 left-0 z-1 !rounded-none"
-            >
-              未发布
-            </Tag> */}
+             
+            {
+               isSys && <Tag
+                  color="#E88B00"
+                  // color="rgba(0, 0, 0, 0.4)"
+                  class="absolute top-0 left-0 z-1 !rounded-none"
+                >
+                    {
+                      record.published ? "已发布" : "未发布"
+                    }
+                </Tag>
+            }
+
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
                 class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
@@ -105,6 +119,18 @@ export default defineUI({
                   <Menu.Item>
                     <div onClick={() => emit("menu", "delete")}>删除</div>
                   </Menu.Item>
+
+                  {
+                     isSys && !record.published && <Menu.Item>
+                     <div onClick={() => emit("menu", "publish")}>发布平台</div>
+                   </Menu.Item>
+                  }
+                  
+                  {
+                     isSys && record.published && <Menu.Item>
+                      <div onClick={() => emit("menu", "unpublish")}>取消平台发布</div>
+                    </Menu.Item>
+                  }
                 </Menu>
               }
             >

+ 7 - 0
src/pages/website/Promotion2/controller.tsx

@@ -75,6 +75,13 @@ export function createPromotinController(
       case "send":
         sendPromotion(resource, record);
         break;
+      case "publish":
+        await resource.actions.publishPromotion(record, true);
+        break;
+
+      case "unpublish":
+        await resource.actions.publishPromotion(record, false);
+        break;
     }
   };
 

+ 3 - 2
src/pages/website/components/layout/LeftContent.tsx

@@ -62,7 +62,8 @@ export default defineUI({
 
     return () => {
       const { userInfo } = props.Controller.state;
-
+      const  isSys = (userInfo.roles || []).indexOf("system") > -1;
+    
       return (
         <div class={cx(rootStyles, "px-25px py-16px h-1/1 flex flex-col")}>
           <div>
@@ -71,7 +72,7 @@ export default defineUI({
           <div class="my-50px flex items-center">
             <Avatar size={76} src={userInfo.avatar} />
             <div class="ml-20px flex-1">
-              <p class="mb-10px text-16px font-bold">{userInfo.name}</p>
+              <p class="mb-10px text-16px font-bold">{userInfo.name} {isSys?"(平台账号)":""}</p>
               <div
                 class="text-12px text-gray cursor-pointer"
                 style={{ color: "#E88B00" }}