@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
150 lines (149 loc) • 6.65 kB
JavaScript
import { defineComponent, toRef, computed, watch, withDirectives, openBlock, createElementBlock, normalizeClass, createVNode, unref, withCtx, createElementVNode, toDisplayString, createBlock, createCommentVNode, Fragment, renderList, vShow, createTextVNode } from "vue";
import { IconDown, IconUp, IconShrink, IconExpand, IconClose } from "@arco-design/web-vue/es/icon";
import { Card, Tooltip, Progress } from "@arco-design/web-vue";
import _sfc_main$1 from "../typeIcons/component.js";
import { useToggle } from "../hooks/toggle.js";
const _hoisted_1 = { class: "panel_header" };
const _hoisted_2 = { class: "title" };
const _hoisted_3 = { class: "opt" };
const _hoisted_4 = { class: "panel_column flex-3" };
const _hoisted_5 = { class: "media_alias ellips" };
const _hoisted_6 = { class: "panel_column percent flex-1" };
var stateEnum = /* @__PURE__ */ ((stateEnum2) => {
stateEnum2[stateEnum2["UPLOADING"] = 3] = "UPLOADING";
stateEnum2[stateEnum2["WATING"] = 5] = "WATING";
stateEnum2[stateEnum2["SUCCESS"] = 2] = "SUCCESS";
stateEnum2[stateEnum2["ERROR"] = -1] = "ERROR";
return stateEnum2;
})(stateEnum || {});
const _sfc_main = defineComponent({
...{ name: "uploadStep" },
__name: "component",
props: {
BASE_API: {},
fileList: {},
visable: { type: Boolean },
global: { type: Boolean }
},
emits: ["update:visable"],
setup(__props, { emit: __emit }) {
const progressEnum = {
UPLOADING: "normal",
WATING: "normal",
SUCCESS: "success",
ERROR: "danger"
};
const stateTxtEnum = {
UPLOADING: "\u4E0A\u4F20\u4E2D",
WATING: "\u6392\u961F\u4E2D",
SUCCESS: "\u4E0A\u4F20\u5B8C\u6210",
ERROR: "\u4E0A\u4F20\u5931\u8D25"
};
const emits = __emit;
const props = __props;
const showList = toRef(props, "fileList");
const { state: expend, toggle: toggleExp } = useToggle(true);
const { state: scale, toggle: toggleSca } = useToggle();
const cardBodyStyle = computed(() => expend.value ? {} : { padding: 0 });
const titleTxt = computed(() => isUploading.value ? "\u6B63\u5728\u5904\u7406" : "\u5904\u7406\u5B8C\u6210");
const successCount = computed(
() => showList.value.filter((it) => !uploadingFilter(it.state)).length
);
const isUploading = computed(
() => !showList.value.some((item) => !uploadingFilter(item.state))
);
watch(
() => scale.value,
(n) => n && !expend.value && toggleExp()
);
const closeListPanel = () => emits("update:visable");
const getSttType = (n) => stateTxtEnum[stateEnum[n]];
const getPrgType = (n) => progressEnum[stateEnum[n]];
const uploadingFilter = (state) => [3, 5].includes(state);
return (_ctx, _cache) => {
return withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass(["panel_wrp", { global: _ctx.global }])
}, [
createVNode(unref(Card), {
hoverable: "",
class: normalizeClass(["panel_card", { expend: unref(scale) }]),
"body-style": cardBodyStyle.value
}, {
cover: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, toDisplayString(titleTxt.value) + "\uFF08" + toDisplayString(successCount.value) + "/" + toDisplayString(showList.value.length) + "\uFF09 ", 1),
createElementVNode("div", _hoisted_3, [
createElementVNode("div", {
class: "bar",
onClick: _cache[0] || (_cache[0] = (...args) => unref(toggleExp) && unref(toggleExp)(...args))
}, [
unref(expend) ? (openBlock(), createBlock(unref(IconDown), { key: 0 })) : (openBlock(), createBlock(unref(IconUp), { key: 1 }))
]),
createElementVNode("div", {
class: "bar",
onClick: _cache[1] || (_cache[1] = (...args) => unref(toggleSca) && unref(toggleSca)(...args))
}, [
unref(scale) ? (openBlock(), createBlock(unref(IconShrink), { key: 0 })) : (openBlock(), createBlock(unref(IconExpand), { key: 1 }))
]),
!isUploading.value ? (openBlock(), createElementBlock("div", {
key: 0,
class: "bar",
onClick: closeListPanel
}, [
createVNode(unref(IconClose))
])) : createCommentVNode("v-if", true)
])
])
]),
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass(["panel_list", { un_expend: !unref(expend) }])
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (file) => {
return openBlock(), createElementBlock("div", {
key: file.id,
class: "panel_item"
}, [
createElementVNode("div", _hoisted_4, [
createVNode(_sfc_main$1, {
doc: true,
resource: true,
type: file.type
}, null, 8, ["type"]),
createVNode(unref(Tooltip), {
content: file.name
}, {
default: withCtx(() => [
createElementVNode("span", _hoisted_5, toDisplayString(file.name), 1)
]),
_: 2
}, 1032, ["content"])
]),
withDirectives(createElementVNode("div", { class: "panel_column flex-1" }, toDisplayString(getSttType(file.state)), 513), [
[vShow, unref(scale)]
]),
createElementVNode("div", _hoisted_6, [
createTextVNode(toDisplayString([2, 0].includes(file.state) ? 100 : file.percent * 100) + " % ", 1),
createVNode(unref(Progress), {
size: "small",
type: "circle",
width: 20,
"stroke-width": 1,
percent: file.percent,
status: getPrgType(file.state),
"show-text": ![3, 5].includes(file.state)
}, null, 8, ["percent", "status", "show-text"])
])
]);
}), 128))
], 2)
]),
_: 1
}, 8, ["class", "body-style"])
], 2)), [
[vShow, _ctx.visable]
]);
};
}
});
export { _sfc_main as default };