|
@@ -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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+`;
|