yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
234 lines (233 loc) • 8.52 kB
JavaScript
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, renderSlot, createVNode, withCtx, createElementVNode, toDisplayString, createBlock, mergeProps, withModifiers, createCommentVNode } from "vue";
import { ElImage, ElProgress, ElIcon } from "element-plus";
import { CloseOutlined, EyeOutlined, EditOutlined, SyncOutlined, FileOutlined } from "../../icons";
const _sfc_main = defineComponent({
name: "ListItem",
components: {
CloseOutlined,
EyeOutlined,
EditOutlined,
SyncOutlined,
FileOutlined,
ElImage,
ElProgress,
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 = 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 = 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);
};
return {
imageUrl,
uploadProgress,
handleItemClick,
handleRemove,
handleEdit,
handlePreview,
handleRetry
};
}
});
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 = resolveComponent("FileOutlined");
const _component_ElIcon = resolveComponent("ElIcon");
const _component_ElImage = resolveComponent("ElImage");
const _component_ElProgress = resolveComponent("ElProgress");
const _component_SyncOutlined = resolveComponent("SyncOutlined");
const _component_EyeOutlined = resolveComponent("EyeOutlined");
const _component_EditOutlined = resolveComponent("EditOutlined");
const _component_CloseOutlined = resolveComponent("CloseOutlined");
return openBlock(), createElementBlock("div", {
title: _ctx.item.name,
class: "ele-upload-item",
onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
}, [
renderSlot(_ctx.$slots, "thumbnail", {
item: _ctx.item,
imageUrl: _ctx.imageUrl
}, () => [
_ctx.listType === "file" || !_ctx.imageUrl ? (openBlock(), createElementBlock("div", _hoisted_2, [
createVNode(_component_ElIcon, { class: "ele-upload-thumbnail-icon" }, {
default: withCtx(() => [
createVNode(_component_FileOutlined)
]),
_: 1
}),
createElementVNode("div", _hoisted_3, toDisplayString(_ctx.item.name || _ctx.item.url), 1)
])) : (openBlock(), createBlock(_component_ElImage, 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" ? (openBlock(), createElementBlock("div", _hoisted_4, [
renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
createElementVNode("div", _hoisted_5, toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
createVNode(_component_ElProgress, 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" ? (openBlock(), createElementBlock("div", {
key: 0,
title: _ctx.locale.retry,
class: "ele-upload-tool ele-upload-retry",
onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleRetry && _ctx.handleRetry(...args), ["stop"]))
}, [
createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: withCtx(() => [
createVNode(_component_SyncOutlined)
]),
_: 1
}),
createElementVNode("div", _hoisted_7, toDisplayString(_ctx.locale.retry), 1)
], 8, _hoisted_6)) : createCommentVNode("", true)
])
])) : _ctx.tools && !_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (openBlock(), createElementBlock("div", _hoisted_8, [
createElementVNode("div", {
title: _ctx.locale.preview,
class: "ele-upload-tool",
onClick: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.handlePreview && _ctx.handlePreview(...args), ["stop"]))
}, [
createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: withCtx(() => [
createVNode(_component_EyeOutlined)
]),
_: 1
}),
createElementVNode("div", _hoisted_10, toDisplayString(_ctx.locale.preview), 1)
], 8, _hoisted_9),
createElementVNode("div", {
title: _ctx.locale.edit,
class: "ele-upload-tool",
onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleEdit && _ctx.handleEdit(...args), ["stop"]))
}, [
createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: withCtx(() => [
createVNode(_component_EditOutlined)
]),
_: 1
}),
createElementVNode("div", _hoisted_12, toDisplayString(_ctx.locale.edit), 1)
], 8, _hoisted_11)
])) : createCommentVNode("", true),
!_ctx.readonly && !_ctx.disabled && !_ctx.item.readonly ? (openBlock(), createElementBlock("div", {
key: 2,
title: _ctx.locale.remove,
class: "ele-upload-tool ele-upload-remove",
onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleRemove && _ctx.handleRemove(...args), ["stop"]))
}, [
renderSlot(_ctx.$slots, "remove", { item: _ctx.item }, () => [
createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
default: withCtx(() => [
createVNode(_component_CloseOutlined)
]),
_: 1
})
])
], 8, _hoisted_13)) : createCommentVNode("", true),
_ctx.sortable ? (openBlock(), createElementBlock("div", _hoisted_14)) : createCommentVNode("", true)
], 8, _hoisted_1);
}
const listItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
listItem as default
};