@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
151 lines (150 loc) • 6.71 kB
JavaScript
;
var vue = require("vue");
var icon = require("@arco-design/web-vue/es/icon");
var webVue = require("@arco-design/web-vue");
var component = require("../typeIcons/component.js");
var toggle = require("../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 = vue.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 = vue.toRef(props, "fileList");
const { state: expend, toggle: toggleExp } = toggle.useToggle(true);
const { state: scale, toggle: toggleSca } = toggle.useToggle();
const cardBodyStyle = vue.computed(() => expend.value ? {} : { padding: 0 });
const titleTxt = vue.computed(() => isUploading.value ? "\u6B63\u5728\u5904\u7406" : "\u5904\u7406\u5B8C\u6210");
const successCount = vue.computed(
() => showList.value.filter((it) => !uploadingFilter(it.state)).length
);
const isUploading = vue.computed(
() => !showList.value.some((item) => !uploadingFilter(item.state))
);
vue.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 vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["panel_wrp", { global: _ctx.global }])
}, [
vue.createVNode(vue.unref(webVue.Card), {
hoverable: "",
class: vue.normalizeClass(["panel_card", { expend: vue.unref(scale) }]),
"body-style": cardBodyStyle.value
}, {
cover: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(titleTxt.value) + "\uFF08" + vue.toDisplayString(successCount.value) + "/" + vue.toDisplayString(showList.value.length) + "\uFF09 ", 1),
vue.createElementVNode("div", _hoisted_3, [
vue.createElementVNode("div", {
class: "bar",
onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(toggleExp) && vue.unref(toggleExp)(...args))
}, [
vue.unref(expend) ? (vue.openBlock(), vue.createBlock(vue.unref(icon.IconDown), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(icon.IconUp), { key: 1 }))
]),
vue.createElementVNode("div", {
class: "bar",
onClick: _cache[1] || (_cache[1] = (...args) => vue.unref(toggleSca) && vue.unref(toggleSca)(...args))
}, [
vue.unref(scale) ? (vue.openBlock(), vue.createBlock(vue.unref(icon.IconShrink), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(icon.IconExpand), { key: 1 }))
]),
!isUploading.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "bar",
onClick: closeListPanel
}, [
vue.createVNode(vue.unref(icon.IconClose))
])) : vue.createCommentVNode("v-if", true)
])
])
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", {
class: vue.normalizeClass(["panel_list", { un_expend: !vue.unref(expend) }])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.fileList, (file) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: file.id,
class: "panel_item"
}, [
vue.createElementVNode("div", _hoisted_4, [
vue.createVNode(component, {
doc: true,
resource: true,
type: file.type
}, null, 8, ["type"]),
vue.createVNode(vue.unref(webVue.Tooltip), {
content: file.name
}, {
default: vue.withCtx(() => [
vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(file.name), 1)
]),
_: 2
}, 1032, ["content"])
]),
vue.withDirectives(vue.createElementVNode("div", { class: "panel_column flex-1" }, vue.toDisplayString(getSttType(file.state)), 513), [
[vue.vShow, vue.unref(scale)]
]),
vue.createElementVNode("div", _hoisted_6, [
vue.createTextVNode(vue.toDisplayString([2, 0].includes(file.state) ? 100 : file.percent * 100) + " % ", 1),
vue.createVNode(vue.unref(webVue.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)), [
[vue.vShow, _ctx.visable]
]);
};
}
});
module.exports = _sfc_main;