ele-admin-plus 1.2.1-beta.2 → 1.2.1-beta.4

package/lib/ele-upload-list/components/list-item.cjs

@@ -2,17 +2,17 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const icons = require("../../icons");
-const EleTooltip = require("../../ele-tooltip/index");
 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,
-    EleTooltip
+    ElIcon: elementPlus.ElIcon
   },
   props: {
     /** 数据 */
@@ -24,10 +24,18 @@ const _sfc_main = vue.defineComponent({
     readonly: Boolean,
     /** 是否禁用 */
     disabled: Boolean,
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: Boolean,
+    /** 图片属性 */
     imageProps: Object,
     /** 进度条属性 */
     progressProps: Object,
+    /** 预读图片文件 */
+    imageObjectUrls: Array,
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: Boolean,
+    /** 列表样式 */
+    listType: String,
     /** 国际化 */
     locale: {
       type: Object,
@@ -37,19 +45,52 @@ const _sfc_main = vue.defineComponent({
   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 handleItemClick = () => {
-      emit("itemClick", props.item);
+    const handleEdit = () => {
+      emit("edit", props.item);
+    };
+    const handlePreview = () => {
+      emit("preview", props.item);
     };
     const handleRetry = () => {
       emit("retry", props.item);
     };
-    return { handleRemove, handleItemClick, handleRetry };
+    return {
+      imageUrl,
+      uploadProgress,
+      handleItemClick,
+      handleRemove,
+      handleEdit,
+      handlePreview,
+      handleRetry
+    };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -61,91 +102,130 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1 = ["title"];
 const _hoisted_2 = {
-  key: 1,
+  key: 0,
   class: "ele-upload-thumbnail"
 };
-const _hoisted_3 = {
-  key: 1,
+const _hoisted_3 = { class: "ele-upload-thumbnail-text" };
+const _hoisted_4 = {
+  key: 0,
   class: "ele-upload-progress"
 };
-const _hoisted_4 = { class: "ele-upload-text" };
-const _hoisted_5 = {
-  key: 0,
+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_ElImage = vue.resolveComponent("ElImage");
   const _component_FileOutlined = vue.resolveComponent("FileOutlined");
   const _component_ElIcon = vue.resolveComponent("ElIcon");
-  const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
+  const _component_ElImage = vue.resolveComponent("ElImage");
   const _component_ElProgress = vue.resolveComponent("ElProgress");
   const _component_SyncOutlined = vue.resolveComponent("SyncOutlined");
-  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
+  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[2] || (_cache[2] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
   }, [
-    vue.renderSlot(_ctx.$slots, "thumbnail", { item: _ctx.item }, () => [
-      _ctx.item.url ? (vue.openBlock(), vue.createBlock(_component_ElImage, vue.mergeProps({
-        key: 0,
-        fit: "cover"
-      }, _ctx.imageProps || {}, {
-        src: _ctx.item.url
-      }), null, 16, ["src"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-        vue.createVNode(_component_ElIcon, null, {
+    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, [
+      vue.createElementVNode("div", {
+        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.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: 0,
-      class: "ele-upload-remove",
-      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.handleRemove && _ctx.handleRemove(...args), ["stop"]))
+      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, null, {
+        vue.createVNode(_component_ElIcon, { class: "ele-upload-tool-icon" }, {
           default: vue.withCtx(() => [
-            vue.createVNode(_component_CloseOutlined, { style: { "transform": "scale(0.92)", "transform-origin": "top right" } })
+            vue.createVNode(_component_CloseOutlined)
           ]),
           _: 1
         })
       ])
-    ])) : vue.createCommentVNode("", true),
-    _ctx.item.status === "uploading" || _ctx.item.status === "exception" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-      vue.renderSlot(_ctx.$slots, "progress", { item: _ctx.item }, () => [
-        vue.createElementVNode("div", _hoisted_4, vue.toDisplayString(_ctx.item.status == "exception" ? _ctx.locale.exception : _ctx.locale.uploading), 1),
-        vue.createVNode(_component_ElProgress, vue.mergeProps({ showText: false }, _ctx.progressProps || {}, {
-          percentage: _ctx.item.progress,
-          status: _ctx.item.status === "exception" ? "exception" : void 0
-        }), null, 16, ["percentage", "status"]),
-        !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-          _ctx.item.status === "exception" ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            class: "ele-upload-retry",
-            onClick: _cache[1] || (_cache[1] = vue.withModifiers((...args) => _ctx.handleRetry && _ctx.handleRetry(...args), ["stop"]))
-          }, [
-            vue.createVNode(_component_EleTooltip, {
-              content: _ctx.locale.retry,
-              placement: "top"
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_ElIcon, null, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_SyncOutlined)
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["content"])
-          ])) : vue.createCommentVNode("", true)
-        ])) : vue.createCommentVNode("", true)
-      ])
-    ])) : vue.createCommentVNode("", true)
+    ], 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]]);

package/lib/ele-upload-list/components/list-item.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import { ElProgressProps, ElImageProps } from '../../ele-app/el';
-import { UploadItem, UploadLocale } from '../types';
+import { UploadItem, UploadLocale, ImageObjectUrl, ListType } from '../types';
 
 declare const _default: import('vue').DefineComponent<{
     /** 数据 */
@@ -12,22 +12,36 @@ declare const _default: import('vue').DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: BooleanConstructor;
+    /** 图片属性 */
     imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
+    /** 预读图片文件 */
+    imageObjectUrls: PropType<ImageObjectUrl[]>;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: BooleanConstructor;
+    /** 列表样式 */
+    listType: PropType<ListType>;
     /** 国际化 */
     locale: {
         type: PropType<Partial<UploadLocale>>;
         required: true;
     };
 }, {
-    handleRemove: () => void;
+    imageUrl: import('vue').ComputedRef<string | undefined>;
+    uploadProgress: import('vue').ComputedRef<number>;
     handleItemClick: () => void;
+    handleRemove: () => void;
+    handleEdit: () => void;
+    handlePreview: () => void;
     handleRetry: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     itemClick: (_item: UploadItem) => true;
     remove: (_item: UploadItem) => true;
+    edit: (_item: UploadItem) => true;
+    preview: (_item: UploadItem) => true;
     retry: (_item: UploadItem) => true;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /** 数据 */
@@ -39,21 +53,33 @@ declare const _default: import('vue').DefineComponent<{
     readonly: BooleanConstructor;
     /** 是否禁用 */
     disabled: BooleanConstructor;
-    /** 自定义条目样式 */
+    /** 是否可拖拽排序 */
+    sortable: BooleanConstructor;
+    /** 图片属性 */
     imageProps: PropType<ElImageProps>;
     /** 进度条属性 */
     progressProps: PropType<ElProgressProps>;
+    /** 预读图片文件 */
+    imageObjectUrls: PropType<ImageObjectUrl[]>;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools: BooleanConstructor;
+    /** 列表样式 */
+    listType: PropType<ListType>;
     /** 国际化 */
     locale: {
         type: PropType<Partial<UploadLocale>>;
         required: true;
     };
 }>> & {
+    onEdit?: ((_item: UploadItem) => any) | undefined;
     onRetry?: ((_item: UploadItem) => any) | undefined;
-    onItemClick?: ((_item: UploadItem) => any) | undefined;
     onRemove?: ((_item: UploadItem) => any) | undefined;
+    onPreview?: ((_item: UploadItem) => any) | undefined;
+    onItemClick?: ((_item: UploadItem) => any) | undefined;
 }, {
     disabled: boolean;
     readonly: boolean;
+    sortable: boolean;
+    tools: boolean;
 }, {}>;
 export default _default;