@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
241 lines (240 loc) • 11 kB
JavaScript
import { defineComponent, ref, watch, openBlock, createBlock, unref, withCtx, createElementVNode, createCommentVNode, withDirectives, createElementBlock, Fragment, renderList, createVNode, toDisplayString, createTextVNode, vShow, normalizeClass, renderSlot } from "vue";
import { Scrollbar, Tooltip, Button } from "@arco-design/web-vue";
import { IconDoubleDown, IconDoubleUp } from "@arco-iconbox/vue-cmstop-icons";
import _sfc_main$2 from "../typeIcons/component.js";
import _sfc_main$1 from "./components/FileTypeThumb/index.js";
import { timeFormat } from "../utils/filter.js";
import { DEFAULT_BASE_API } from "../config.js";
const _hoisted_1 = { class: "file-wrap" };
const _hoisted_2 = {
key: 0,
class: "folder-list clearfix"
};
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "wrap" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { class: "wrap" };
const _hoisted_7 = { class: "thumb" };
const _hoisted_8 = { class: "folder-more-wrap" };
const _hoisted_9 = { class: "file-list clearfix" };
const _hoisted_10 = ["onClick"];
const _hoisted_11 = { class: "menu-wrap" };
const _hoisted_12 = {
key: 1,
class: "load_more_title"
};
const _hoisted_13 = {
key: 1,
class: "nomore_tips"
};
const _hoisted_14 = {
key: 2,
class: "null-file"
};
const _sfc_main = defineComponent({
...{ name: "resourceGridList" },
__name: "component",
props: {
folderList: {},
fileList: {},
fileListCount: {},
isOver: { type: Boolean },
showFolder: { type: Boolean },
preview: { type: Boolean }
},
emits: ["clickDir", "clickItem", "loadMore"],
setup(__props, { emit: __emit }) {
const props = __props;
const fodStyle = `background: url('${DEFAULT_BASE_API}/static/images/folder.png') no-repeat 13px
center;`;
const thumbStyle = `background: url('${DEFAULT_BASE_API}/static/images/picBg.png')`;
const isFold = ref(true);
watch(
() => {
var _a;
return (_a = props.folderList) == null ? void 0 : _a.length;
},
(n) => {
isFold.value = n > 10;
},
{ immediate: true }
);
const emit = __emit;
const selectedData = ref([]);
const _changeDirectory = (item) => {
emit("clickDir", item);
};
const _clickFileItem = (item) => {
selectedData.value = [item];
emit("clickItem", item);
};
const _loadFileMore = () => {
emit("loadMore");
};
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(Scrollbar), { class: "media-grid-list-scroll" }, {
default: withCtx(() => {
var _a, _b, _c, _d, _e;
return [
createElementVNode("div", _hoisted_1, [
createCommentVNode(" \u6587\u4EF6\u5939 "),
_ctx.folderList ? withDirectives((openBlock(), createElementBlock("div", _hoisted_2, [
createCommentVNode(" \u6587\u4EF6\u5939\u6570\u91CF<10 "),
!isFold.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.folderList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item folder-item",
onClick: ($event) => _changeDirectory(item)
}, [
createElementVNode("div", _hoisted_4, [
createVNode(unref(Tooltip), {
content: item.alias,
"open-delay": 500,
class: "item",
effect: "dark",
placement: "top"
}, {
default: withCtx(() => [
createElementVNode("div", {
class: "thumb",
style: fodStyle
}, [
createElementVNode("h4", null, toDisplayString(item.alias), 1)
])
]),
_: 2
}, 1032, ["content"])
])
], 8, _hoisted_3);
}), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
createCommentVNode(" \u6587\u4EF6\u5939\u6570\u91CF>10 "),
(openBlock(true), createElementBlock(Fragment, null, renderList((_a = _ctx.folderList) == null ? void 0 : _a.slice(0, 9), (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item folder-item",
onClick: ($event) => _changeDirectory(item)
}, [
createElementVNode("div", _hoisted_6, [
createVNode(unref(Tooltip), {
content: item.alias,
"open-delay": 500,
class: "item",
effect: "dark",
placement: "top"
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_7, [
createElementVNode("h4", null, toDisplayString(item.alias), 1)
])
]),
_: 2
}, 1032, ["content"])
])
], 8, _hoisted_5);
}), 128))
], 64)),
((_b = _ctx.folderList) == null ? void 0 : _b.length) > 10 ? (openBlock(), createElementBlock("div", {
key: 2,
class: "folder-more-button",
onClick: _cache[0] || (_cache[0] = ($event) => isFold.value = !isFold.value)
}, [
createElementVNode("div", _hoisted_8, [
isFold.value ? (openBlock(), createBlock(unref(IconDoubleDown), { key: 0 })) : (openBlock(), createBlock(unref(IconDoubleUp), { key: 1 })),
createTextVNode(" " + toDisplayString(isFold.value ? "\u5C55\u5F00\u5168\u90E8" : "\u6536\u7F29\u5168\u90E8"), 1)
])
])) : createCommentVNode("v-if", true)
], 512)), [
[vShow, ((_c = _ctx.folderList) == null ? void 0 : _c.length) !== 0 && _ctx.showFolder]
]) : createCommentVNode("v-if", true),
createCommentVNode(" \u6587\u4EF6 "),
createElementVNode("div", _hoisted_9, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index) => {
return openBlock(), createElementBlock("div", {
key: index,
class: "item"
}, [
createElementVNode("div", {
class: normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"]),
onClick: ($event) => _clickFileItem(item)
}, [
createElementVNode("div", {
class: "thumb-wrap",
style: thumbStyle
}, [
createVNode(_sfc_main$1, {
"item-data": item,
preview: _ctx.preview,
onConfirm: _clickFileItem
}, null, 8, ["item-data", "preview"])
]),
createElementVNode("h4", null, [
createVNode(_sfc_main$2, {
doc: item.catalog !== "image",
resource: item.catalog === "image",
type: item.catalog,
class: "icon"
}, null, 8, ["doc", "resource", "type"]),
createVNode(unref(Tooltip), {
content: item.alias,
"open-delay": 500,
effect: "dark",
placement: "top"
}, {
default: withCtx(() => [
createElementVNode("span", null, toDisplayString(item.alias), 1)
]),
_: 2
}, 1032, ["content"])
]),
createElementVNode("p", null, toDisplayString(unref(timeFormat)(item.updated_at)), 1),
createCommentVNode(" \u83DC\u5355\u63D2\u69FD "),
createElementVNode("div", _hoisted_11, [
renderSlot(_ctx.$slots, "menu", { item })
]),
createCommentVNode(" \u89C6\u9891\u8F6C\u7801\u8FDB\u5EA6 "),
item.task ? (openBlock(), createBlock(unref(Tooltip), {
key: 0,
"open-delay": 2e3,
content: "\u8F6C\u7801\u4E2D\uFF0C\u6682\u4E0D\u53EF\u7528",
effect: "dark",
placement: "bottom"
}, {
default: withCtx(() => _cache[1] || (_cache[1] = [
createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
createElementVNode("div", { class: "transcoding-progress" }, "\u8F6C\u7801\u4E2D\u2026")
], -1)
])),
_: 1,
__: [1]
})) : createCommentVNode("v-if", true)
], 10, _hoisted_10)
]);
}), 128))
]),
_ctx.fileListCount ? (openBlock(), createElementBlock("div", _hoisted_12, [
!_ctx.isOver ? (openBlock(), createBlock(unref(Button), {
key: 0,
class: "loadmore_tips",
size: "small",
type: "text",
onClick: _loadFileMore
}, {
default: withCtx(() => _cache[2] || (_cache[2] = [
createTextVNode("\u52A0\u8F7D\u66F4\u591A\u2026 ")
])),
_: 1,
__: [2]
})) : (openBlock(), createElementBlock("div", _hoisted_13, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
])) : createCommentVNode("v-if", true),
!((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (openBlock(), createElementBlock("div", _hoisted_14, _cache[3] || (_cache[3] = [
createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1)
]))) : createCommentVNode("v-if", true)
])
];
}),
_: 3
});
};
}
});
export { _sfc_main as default };