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

import { cx } from "@linaria/core";
import { Tag } from "ant-design-vue";
import dayjs from "dayjs";
import { upperFirst } from "lodash";
import { Container, Draggable } from "vue-dndrop";
import { string } from "vue-types";

import Empty from "@/components/Empty";
import { useEditor } from "@/modules/editor";
import { useResource } from "@/modules/resource";
import { useAuth } from "@queenjs-modules/auth";
import { Image } from "@queenjs/ui";
import { defineUI, queenApi } from "queenjs";
import Menu from "./Menu";

export default defineUI({
  props: {
    sourceType: string<"comp" | "text" | "shape">().def("comp"),
  },
  setup(props) {
    const editor = useEditor();
    const auth = useAuth();
    const resource = useResource();

    const listCtrl = getCtrl();
    listCtrl.hasLimit = true;
    listCtrl.loadPage(1);

    //@ts-ignore
    let isSys = (auth.store.userInfo.roles || []).indexOf("system") > -1;

    function getCtrl() {
      const key = `cust${upperFirst(props.sourceType)}ListCtrl`;
      //@ts-ignore
      return resource.controls[key];
    }

    return () => {
      const { sourceType } = props;

      if (listCtrl.state.list.length == 0) return <Empty class="pt-150px" />;

      return (
        <div>
          <Container
            class={cx(
              "grid gap-10px",
              sourceType == "comp" ? "grid-cols-1" : "grid-cols-2"
            )}
            behaviour="copy"
            group-name="canvas"
            animation-duration={0}
            get-child-payload={(index: number) => {
              return {
                type: "CompCard",
                data: { id: listCtrl.state.list[index]._id, isSys: isSys },
              };
            }}
          >
            {listCtrl.state.list.map((item: any) => {
              const items = ["删除"];

              if (isSys) {
                item.published
                  ? items.push("取消发布")
                  : items.push("发布平台");
              }
              return (
                <Draggable>
                  <div
                    class="text-center leading-50px bg-dark-50 rounded draggable-item relative"
                    key={item.compKey}
                    title={item.name}
                  >
                    <Image
                      class="w-full rounded"
                      src={item.thumbnail}
                      onClick={() => {
                        editor.actions.clickCompUserToDesign(item._id, isSys);
                      }}
                      size={240}
                    />
                    {isSys && (
                      <Tag
                        color={item.published ? "green" : "#E88B00"}
                        // color="rgba(0, 0, 0, 0.4)"
                        class="absolute top-0 left-0 z-1 !rounded-none"
                      >
                        {item.published ? "已发布" : "未发布"}
                      </Tag>
                    )}
                    <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(item.createTime).format("YYYY.MM.DD")}
                        </div>
                      </div>
                      <Menu
                        items={items}
                        onMenu={async (name) => {
                          console.log("name", name);
                          if (name == "删除") {
                            await resource.actions.deleteCustomComp(item);
                            listCtrl.fresh();
                            queenApi.messageSuccess("删除成功!");
                            return;
                          }
                          const pub = name == "发布平台";
                          await resource.actions.publishFrame(item, pub);
                          item.published = pub;
                        }}
                      />
                    </div>
                  </div>
                </Draggable>
              );
            })}
          </Container>
        </div>
      );
    };
  },
});