yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
241 lines (240 loc) • 9.16 kB
JavaScript
"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../../icons");
const _sfc_main = vue.defineComponent({
name: "ListItem",
components: {
CloseOutlined: icons.CloseOutlined,
EyeOutlined: icons.EyeOutlined,
EditOutlined: icons.EditOutlined,
SyncOutlined: icons.SyncOutlined,
FileOutlined: icons.FileOutlined,
ElImage: elementPlus.ElImage,
ElProgress: elementPlus.ElProgress,
ElIcon: elementPlus.ElIcon
},
props: {
/** 数据 */
item: {
type: Object,
required: true
},
/** 是否只读 */
readonly: Boolean,
/** 是否禁用 */
disabled: Boolean,
/** 是否可拖拽排序 */
sortable: Boolean,
/** 图片属性 */
imageProps: Object,
/** 进度条属性 */
progressProps: Object,
/** 预读图片文件 */
imageObjectUrls: Array,
/** 是否开启底部预览和修改的操作按钮 */
tools: Boolean,
/** 列表样式 */
listType: String,
/** 国际化 */
locale: {
type: Object,
required: true
}
},
emits: {
itemClick: (_item) => true,
remove: (_item) => true,
edit: (_item) => true,
preview: (_item) => true,
retry: (_item) => true
},
setup(props, { emit }) {
const imageUrl = vue.computed(() => {
var _a;
if (props.item.url) {
return props.item.url;
}
if (!props.item.file || !props.imageObjectUrls) {
return;
}
return (_a = props.imageObjectUrls.find((d) => d.file === props.item.file)) == null ? void 0 : _a.url;
});
const uploadProgress = vue.computed(() => {
const progress = props.item.progress;
if (!progress || progress < 0) {
return 0;
}
return progress > 100 ? 100 : progress;
});
const handleItemClick = () => {
emit("itemClick", props.item);
};
const handleRemove = () => {
emit("remove", props.item);
};
const handleEdit = () => {
emit("edit", props.item);
};
const handlePreview = () => {
emit("preview", props.item);
};
const handleRetry = () => {
emit("retry", props.item);
};
const isImage = (url) => {
var _a, _b;
const parts = url ? url.split(".") : [];
const suffix = parts.length <= 1 || parts[0] === "" && parts.length === 2 ? "" : (_b = (_a = parts.pop()) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a);
return suffix && ["png", "jpg", "jpeg", "gif", "svg"].includes(suffix);
};
return {
imageUrl,
uploadProgress,
handleItemClick,
handleRemove,
handleEdit,
handlePreview,
handleRetry,
isImage
};
}
});
const _export_sfc = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
const _hoisted_1 = ["title"];
const _hoisted_2 = {
key: 0,
class: "ele-upload-thumbnail"
};
const _hoisted_3 = { class: "ele-upload-thumbnail-text" };
const _hoisted_4 = {
key: 0,
class: "ele-upload-progress"
};
const _hoisted_5 = { class: "ele-upload-text" };
const _hoisted_6 = ["title"];
const _hoisted_7 = { class: "ele-upload-tool-text" };
const _hoisted_8 = {
key: 1,
class: "ele-upload-tools"
};
const _hoisted_9 = ["title"];
const _hoisted_10 = { class: "ele-upload-tool-text" };
const _hoisted_11 = ["title"];
const _hoisted_12 = { class: "ele-upload-tool-text" };
const _hoisted_13 = ["title"];
const _hoisted_14 = {
key: 3,
class: "ele-upload-handle"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_FileOutlined = vue.resolveComponent("FileOutlined");
const _component_ElIcon = vue.resolveComponent("ElIcon");
const _component_ElImage = vue.resolveComponent("ElImage");
const _component_ElProgress = vue.resolveComponent("ElProgress");
const _component_SyncOutlined = vue.resolveComponent("SyncOutlined");
const _component_EyeOutlined = vue.resolveComponent("EyeOutlined");
const _component_EditOutlined = vue.resolveComponent("EditOutlined");
const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
return vue.openBlock(), vue.createElementBlock("div", {
title: _ctx.item.name,
class: "ele-upload-item",
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
}, [
vue.renderSlot(_ctx.$slots, "thumbnail", {
item: _ctx.item,
imageUrl: _ctx.imageUrl
}, () => [
_ctx.listType === "file" || !_ctx.imageUrl ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.createVNode(_component_ElIcon, { class: "ele-upload-thumbnail-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_FileOutlined)
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(_ctx.item.name || _ctx.item.url), 1)
])) : (vue.openBlock(), vue.createBlock(_component_ElImage, vue.mergeProps({
key: 1,
fit: "contain",
class: "ele-upload-image"
}, _ctx.imageProps || {}, { src: _ctx.imageUrl }), null, 16, ["src"]))
]),
_ctx.item.status === "uploading" || _ctx.item.status === "exception" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
vue.renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
vue.createVNode(_component_ElProgress, vue.mergeProps({
showText: false,
strokeWidth: _ctx.listType === "file" ? 2 : void 0,
status: _ctx.item.status === "exception" ? "exception" : void 0,
class: "ele-upload-progress-bar"
}, _ctx.progressProps || {}, { percentage: _ctx.uploadProgress }), null, 16, ["strokeWidth", "status", "percentage"]),
!_ctx.disabled && _ctx.item.status === "exception" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
title: _ctx.locale.retry,
class: "ele-upload-tool ele-upload-retry",
onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.handleRetry && _ctx.handleRetry(...args), ["stop"]))
}, [
vue.createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_SyncOutlined)
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_7, vue.toDisplayString(_ctx.locale.retry), 1)
], 8, _hoisted_6)) : vue.createCommentVNode("", true)
])
])) : _ctx.tools && !_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
_ctx.isImage(_ctx.item.url) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
title: _ctx.locale.preview,
class: "ele-upload-tool",
onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handlePreview && _ctx.handlePreview(...args), ["stop"]))
}, [
vue.createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_EyeOutlined)
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_10, vue.toDisplayString(_ctx.locale.preview), 1)
], 8, _hoisted_9)) : vue.createCommentVNode("", true),
vue.createElementVNode("div", {
title: _ctx.locale.edit,
class: "ele-upload-tool",
onClick: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleEdit && _ctx.handleEdit(...args), ["stop"]))
}, [
vue.createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_EditOutlined)
]),
_: 1
}),
vue.createElementVNode("div", _hoisted_12, vue.toDisplayString(_ctx.locale.edit), 1)
], 8, _hoisted_11)
])) : vue.createCommentVNode("", true),
!_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (vue.openBlock(), vue.createElementBlock("div", {
key: 2,
title: _ctx.locale.remove,
class: "ele-upload-tool ele-upload-remove",
onClick: _cache[3] || (_cache[3] = vue.withModifiers((...args) => _ctx.handleRemove && _ctx.handleRemove(...args), ["stop"]))
}, [
vue.renderSlot(_ctx.$slots, "remove", { item: _ctx.item }, () => [
vue.createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_CloseOutlined)
]),
_: 1
})
])
], 8, _hoisted_13)) : vue.createCommentVNode("", true),
_ctx.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14)) : vue.createCommentVNode("", true)
], 8, _hoisted_1);
}
const listItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = listItem;