bri-components 1.4.91 → 1.4.93

package/src/components/controls/base/BriUpload/uploadList.vue

@@ -1,724 +1,724 @@
-<template>
-    <div :class="{
-        uploadList: true,
-        [`uploadList-${showMode}`]: true,
-        [`uploadList-${subType}`]: true
-    }">
-        <!-- 普通文本模式 -->
-        <template v-if="showMode ==='old'">
-            <!-- 有值 -->
-            <div
-                v-if="files.length"
-                ref="viewerImage"
-                :class="{
-                    'uploadList-list': true,
-                    [`uploadList-list-${subType}`]: true
-                }"
-            >
-                <div
-                    v-for="(fileItem, fileIndex) in files"
-                    :key="fileItem._key || fileItem._id"
-                    :class="{
-                        'item': subType === 'image',
-                        [`item-${subType}`]: true
-                    }"
-                >
-                    <!-- 展示图 -->
-                    <div class="item-show">
-                        <img
-                            v-if="fileItem.mimetype.includes('image')"
-                            :data-original="fileItem.url"
-                            :src="$imageResize(fileItem.url, imageResizeConfig)"
-                            :alt="fileItem.name"
-                        >
-                        <img
-                            v-else
-                            :src="getFileImage(fileItem)"
-                            :alt="fileItem.name"
-                        >
-                    </div>
-
-                    <!-- 展示名称 -->
-                    <p class="item-name-title">{{ fileItem.name }}</p>
-
-                    <!-- 图标 -->
-                    <dsh-icons
-                        class="item-action"
-                        item-class="item-action-icon"
-                        :list="$getOperationList(getBtns(fileItem))"
-                        @click="$dispatchEvent($event, fileItem, fileIndex)"
-                    ></dsh-icons>
-                </div>
-            </div>
-
-            <!-- 无值 -->
-            <div
-                v-else
-                class="uploadList-nodata"
-            >
-                <span>{{ emptyShowVal }}</span>
-            </div>
-        </template>
-
-        <!-- 在表格中展开 -->
-        <template v-else-if="showMode ==='tableList'">
-            <!-- 有值 -->
-            <div
-                v-if="files.length"
-                ref="viewerImage"
-                :class="[
-                    'uploadList-list',
-                    `uploadList-list-${subType}`
-                ]"
-            >
-                <div
-                    v-for="(fileItem, fileIndex) in files"
-                    :key="fileItem._key || fileItem._id"
-                    :class="{
-                        'item': subType === 'image',
-                        [`item-${subType}`]: true
-                    }"
-                >
-                    <!-- 展示图 -->
-                    <div class="item-show">
-                        <img
-                            v-if="fileItem.mimetype.includes('image')"
-                            :data-original="fileItem.url"
-                            :src="$imageResize(fileItem.url, imageResizeConfig)"
-                            :alt="fileItem.name"
-                        >
-                        <img
-                            v-else
-                            :src="getFileImage(fileItem)"
-                            :alt="fileItem.name"
-                        >
-                    </div>
-
-                    <!-- 展示名称 -->
-                    <p class="item-name-title">{{ fileItem.name }}</p>
-
-                    <!-- 图标 -->
-                    <dsh-icons
-                        class="item-action"
-                        item-class="item-action-icon"
-                        :list="$getOperationList(getBtns(fileItem))"
-                        @click="$dispatchEvent($event, fileItem, fileIndex)"
-                    ></dsh-icons>
-                </div>
-            </div>
-
-            <!-- 无值 -->
-            <div
-                v-else
-                class="uploadList-inline-nodata"
-            >
-                <span>{{ emptyShowVal }}</span>
-            </div>
-        </template>
-
-        <!-- 新展示方式 -->
-        <template v-else>
-            <!-- 文件类型 -->
-            <div
-                v-if="subType === 'file'"
-                ref="viewerImage"
-            >
-                <!-- 有值 -->
-                <template v-if="files.length">
-                    <dsh-dropdown
-                        :list="files"
-                        trigger="hover"
-                        class="uploadList-fileList"
-                    >
-                        <div :class="{
-                            'uploadList-fileList-fileName': true,
-                            'uploadList-fileList-fileName-edit': canEdit
-                        }">
-                            {{ files.length }}个
-                            <Icon
-                                v-if="canEdit"
-                                type="ios-arrow-down"
-                            />
-                        </div>
-
-                        <div
-                            slot="dropdownItem"
-                            slot-scope="{ dropdownItem, dropdownIndex }"
-                            class="uploadList-fileList-fileItem"
-                        >
-                            <img
-                                v-if="dropdownItem.mimetype.includes('image')"
-                                :data-original="dropdownItem.url"
-                                :src="$imageResize(dropdownItem.url, imageResizeConfig)"
-                                :alt="dropdownItem.name"
-                                class="fileItem-img"
-                            >
-                            <img
-                                v-else
-                                :src="getFileImage(dropdownItem)"
-                                :alt="dropdownItem.name"
-                                class="fileItem-img"
-                            >
-
-                            <p class="fileItem-name-title">{{ dropdownItem.name }}</p>
-
-                            <dsh-icons
-                                class="fileItem-action"
-                                item-class="fileItem-action-icon"
-                                :list="$getOperationList(getBtns(dropdownItem))"
-                                @click="$dispatchEvent($event, dropdownItem, dropdownIndex)"
-                            ></dsh-icons>
-                        </div>
-                    </dsh-dropdown>
-
-                    <div
-                        v-for="(fileItem) in files"
-                        :key="fileItem._key || fileItem._id"
-                        :class="{
-                            'item': subType === 'image',
-                            [`item-${subType}`]: true
-                        }"
-                    >
-                        <img
-                            v-if="fileItem.mimetype.includes('image')"
-                            :data-original="fileItem.url"
-                            :src="$imageResize(fileItem.url, imageResizeConfig)"
-                            :alt="fileItem.name"
-                            style="display: none;"
-                        >
-                    </div>
-                </template>
-
-                <!-- 无值 -->
-                <span
-                    v-else
-                    class="uploadList-inline-nodata"
-                >
-                    {{ emptyShowVal }}
-                </span>
-            </div>
-
-            <!-- 图片类型 -->
-            <template v-else>
-                <!-- 有值 -->
-                <div
-                    v-if="files.length"
-                    ref="viewerImage"
-                    class="uploadList-inline-list"
-                >
-                    <div
-                        v-for="(fileItem, fileIndex) in files"
-                        :key="fileItem.url"
-                        class="item"
-                    >
-                        <img
-                            v-if="fileItem.mimetype.includes('image')"
-                            :data-original="fileItem.url"
-                            :src="$imageResize(fileItem.url, imageResizeConfig)"
-                            :alt="fileItem.name"
-                        >
-                        <img
-                            v-else
-                            :src="getFileImage(fileItem)"
-                            :alt="fileItem.name"
-                        >
-
-                        <dsh-icons
-                            class="item-action"
-                            item-class="item-action-icon"
-                            :list="$getOperationList(getBtns(fileItem))"
-                            @click="$dispatchEvent($event, fileItem, fileIndex)"
-                        ></dsh-icons>
-                    </div>
-                </div>
-
-                <!-- 无值 -->
-                <span
-                    v-else
-                    class="uploadList-inline-nodata"
-                >
-                    {{ emptyShowVal }}
-                </span>
-            </template>
-        </template>
-    </div>
-</template>
-
-<script>
-    import Viewer from "viewerjs";
-    import axios from "axios";
-
-    export default {
-        name: "uploadList",
-        props: {
-            showMode: {
-                type: String,
-                default: "old" // inline, old, normal
-            },
-            canEdit: {
-                type: Boolean,
-                default: true
-            },
-            files: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            isShowEditIcon: Boolean,
-            emptyShowVal: String
-        },
-        data () {
-            return {
-                imageResizeConfig: {}
-            };
-        },
-        computed: {
-            subType () {
-                return this.propsObj._fileType;
-            },
-
-            allOperationMap () {
-                return {
-                    canDelete: {
-                        name: "删除",
-                        type: "canDelete",
-                        customIcon: "bico-shanchu",
-                        size: "14",
-                        event: "clickDeleteItem"
-                    },
-                    canEdit: {
-                        name: "编辑",
-                        type: "canEdit",
-                        customIcon: "bico-bianji",
-                        size: "14",
-                        event: "clickEdit"
-                    },
-                    canDownload: {
-                        name: "下载",
-                        type: "canDownload",
-                        customIcon: "bico-xiazai1",
-                        size: "14",
-                        event: "handleDownload"
-                    },
-                    canPreview: {
-                        name: "预览",
-                        type: "canPreview",
-                        customIcon: "bico-yulan",
-                        size: "16",
-                        event: "clickPreview"
-                    }
-                };
-            },
-            operationMap () {
-                return this.canEdit
-                    ? this.$categoryMapToMap(
-                        this.allOperationMap,
-                        undefined,
-                        this.isShowEditIcon ? [] : ["canEdit"]
-                    )
-                    : this.$categoryMapToMap(
-                        this.allOperationMap,
-                        undefined,
-                        ["canDelete", "canEdit"]
-                );
-            }
-        },
-        methods: {
-            // 点击删除某项
-            clickDeleteItem (operationItem, fileItem, fileIndex) {
-                this.$emit("deleteItem", fileItem, fileIndex);
-            },
-            // 点击文件预览 -file服务器的数据列表
-            clickPreview (operationItem, fileItem, fileIndex) {
-                if (fileItem.mimetype.includes("image")) {
-                    const viewerImage = this.$refs.viewerImage;
-                    const findIndex = this.files
-                        .filter(valItem => valItem.mimetype.includes("image"))
-                        .findIndex(valItem => valItem.url === fileItem.url);
-
-                    const viewer = new Viewer(viewerImage, {
-                        url: "data-original",
-                        hidden: function () {
-                            viewer.destroy();
-                        },
-                        loop: false,
-                        initialViewIndex: findIndex,
-                        zIndex: 2147483647
-                    });
-                    viewer.show();
-                } else {
-                    window.open(fileItem.url);
-                }
-            },
-            // 点击文件编辑
-            clickEdit (operationItem, fileItem) {
-                let fileName = fileItem.name;
-                const lastIndex = fileName.lastIndexOf(".");
-                const formate = fileName.substring(lastIndex);
-                fileName = fileName.substring(0, lastIndex);
-
-                this.$Modal.confirm({
-                    title: "修改名称",
-                    render: (h) => {
-                        // // 第二种方式
-                        // const lastIndex = fileName.lastIndexOf(".");
-                        // const formate = fileName.substring(lastIndex);
-
-                        return h("Input", {
-                            props: {
-                                // value: fileItem.name.substring(0, lastIndex),
-                                value: fileName,
-                                autofocus: true,
-                                placeholder: "请输入名称"
-                            },
-                            scopedSlots: {
-                                append: formate
-                            },
-                            on: {
-                                input: (val) => {
-                                    // fileItem.name = val + formate;
-                                    fileName = val;
-                                }
-                            }
-                        });
-                    },
-                    onOk: () => {
-                        fileItem.name = fileName + formate;
-                        this.$emit("editItemName", fileItem);
-                    },
-                    onCancel: () => {}
-                });
-            },
-            // 接口 -下载
-            handleDownload (operationItem, fileItem, fileIndex) {
-                axios
-                    .get(fileItem.downloadUrl, {
-                        responseType: "blob"
-                    })
-                    .then((res) => {
-                        if (window.navigator.msSaveOrOpenBlob) {
-                            // 兼容IE10
-                            navigator.msSaveBlob(res, fileItem.name);
-                        } else {
-                            const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
-                            const a = document.createElement("a");
-                            a.style.display = "none";
-                            a.href = href; // 指定下载链接
-                            a.download = fileItem.name; // 指定下载文件名
-                            a.click();
-                            URL.revokeObjectURL(a.href); // 释放URL对象
-                            a.remove();
-                        }
-                });
-            },
-            // 获取不同类型文件的图片
-            getFileImage (fileItem) {
-                if (!fileItem.mimetype) {
-                    return this.$imageSrcMap.fileType.other;
-                } else if (fileItem.mimetype.includes("image")) {
-                    return fileItem.url; // 压缩图片：将图片最长的边限制在100像素，短边按比例处理
-                } else if (fileItem.mimetype.includes("text/plain")) {
-                    return this.$imageSrcMap.fileType.text;
-                } else if (fileItem.mimetype.includes("application/pdf")) {
-                    return this.$imageSrcMap.fileType.pdf;
-                } else if (fileItem.mimetype.includes("wordprocessingml.document") || fileItem.mimetype.includes("application/msword")) {
-                    return this.$imageSrcMap.fileType.doc;
-                } else if (fileItem.mimetype.includes("presentationml.presentation") || fileItem.mimetype.includes("application/vnd.ms-powerpoint")) {
-                    return this.$imageSrcMap.fileType.ppt;
-                } else if (fileItem.mimetype.includes("spreadsheetml.sheet")) {
-                    return this.$imageSrcMap.fileType.excel;
-                } else if (fileItem.mimetype.includes("application/x-zip-compressed")) {
-                    return this.$imageSrcMap.fileType.zip;
-                } else if (fileItem.mimetype.includes("application/x-rar-compressed")) {
-                    return this.$imageSrcMap.fileType.rar;
-                } else {
-                    return this.$imageSrcMap.fileType.other;
-                }
-            },
-            getBtns (fileItem) {
-                if (["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type)) ||
-                    fileItem.mimetype.includes("wordprocessingml.document") ||
-                    fileItem.mimetype.includes("application/msword") ||
-                    fileItem.mimetype.includes("presentationml.presentation") ||
-                    fileItem.mimetype.includes("application/vnd.ms-powerpoint") ||
-                    fileItem.mimetype.includes("spreadsheetml.sheet"))
-                {
-                    return undefined;
-                }
-                else {
-                    ["canDelete", "canEdit", "canDownload"];
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .uploadList {
-        width: 100%;
-        overflow: auto;
-
-        // 普通文件
-        &-old {
-            margin: 16px;
-        }
-
-        &-nodata {
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            line-height: 120px;
-            color: @placeholderColor;
-            white-space: nowrap;
-
-            span {
-                margin-left: 5px;
-            }
-        }
-
-        &-list {
-            display: flex;
-            flex-wrap: nowrap;
-
-            .item {
-                flex: 0 0 120px;
-                height: 120px;
-                margin-right: 10px;
-                border-radius: @borderRadius;
-                background: #f4f5fa;
-                text-align: center;
-                overflow: hidden;
-                display: inline-flex;
-                flex-direction: column;
-                justify-content: space-between;
-                position: relative;
-
-                &:hover {
-                    .item-action {
-                        display: flex !important;
-                    }
-                }
-
-                &-show {
-                    display: flex;
-                    overflow: hidden;
-                    align-items: center;
-                    justify-content: center;
-                    flex: 2;
-                    min-height: 50px;
-
-                    img {
-                        max-width: 100%;
-                        max-height: 100%;
-                    }
-                }
-
-                &-name {
-                    flex: 1;
-                    display: flex;
-                    max-height: 32px;
-
-                    &-title {
-                        padding: 0 8px;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        color: @themeColor;
-                    }
-                }
-
-                &-action {
-                    position: absolute;
-                    right: 0px;
-                    top: 0px;
-                    left: 0px;
-                    bottom: 0px;
-                    background-color: @placeholderColor;
-                    display: none !important;
-                    align-items: center;
-                    justify-content: center;
-
-                    &-icon {
-                        width: 22px;
-                        height: 22px;
-                        line-height: 22px;
-                        color: #fff;
-                    }
-                }
-            }
-
-            // file 模式
-            &-file {
-                flex-direction: column;
-                .item-file {
-                    flex: 0 0 100%;
-                    height: auto;
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    align-items: center;
-                    border-radius: 0px;
-                    margin: 0px;
-                    padding: 2px 0;
-                    background: transparent;
-                    &:hover {
-                        background: #f4f5fa;
-                    }
-                    .item-show {
-                        flex: 0 0 22px;
-                        min-height: 20px;
-                        img {
-                            width: 22px;
-                            height: 22px;
-                        }
-                    }
-                    .item-name-title {
-                        color: @textColor;
-                        flex: 1;
-                        text-align: left;
-                    }
-                    .item-action {
-                        position: static;
-                        display: flex !important;
-                        background: transparent;
-                        white-space: nowrap;
-                        &-icon {
-                            color: @contentColor;
-                            width: 16px;
-                        }
-                    }
-                }
-            }
-        }
-
-        &-inline {
-            height: 32px;
-            line-height: 32px;
-
-            &-list {
-                width: 100%;
-                height: 100%;
-                padding-left: 3px;
-                display: flex;
-                flex-wrap: nowrap;
-                overflow-x: auto;
-                overflow-y: hidden;
-
-                .item {
-                    flex: 0 0 32px;
-                    margin-right: 3px;
-                    border-radius: @borderRadius;
-                    background: #f4f5fa;
-                    text-align: center;
-                    position: relative;
-
-                    img {
-                        max-width: 100%;
-                        max-height: 100%;
-                        margin: auto;
-                    }
-
-                    &-action {
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        top: 0;
-                        bottom: 0;
-                        display: none !important;
-                        background-color: @placeholderColor;
-                        color: #fff;
-                        align-items: center;
-                        justify-content: center;
-                        flex-wrap: wrap;
-
-                        &-icon {
-                            width: 16px;
-                            height: 16px;
-                            font-size: 16px !important;
-                            margin: 0px;
-                        }
-                    }
-
-                    @keyframes toTop {
-                        from {
-                            top: 100%;
-                        }
-
-                        to {
-                            top: 0;
-                        }
-                    }
-
-                    &:hover {
-                        .item-action {
-                            display: flex !important;
-                            animation: toTop 0.1s;
-                        }
-                    }
-                }
-            }
-
-            &-nodata {
-                padding-left: 7px;
-                line-height: 32px;
-                color: @placeholderColor;
-            }
-        }
-
-        &-fileList {
-            width: 100%;
-            &-fileName {
-                width: 100%;
-                height: 100%;
-                cursor: pointer;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                &-edit {
-                    padding: 0 8px;
-                }
-            }
-        }
-    }
-
-    .DshDropdown {
-        .uploadList-fileList-fileItem {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .fileItem {
-                &-img {
-                    width: 22px;
-                    height: 22px;
-                }
-                &-name-title {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    margin: 0 8px;
-                    flex: 1;
-                    text-align: left;
-                }
-                &-action {
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                    &-icon {
-                        width: 16px;
-                        color: @contentColor;
-                    }
-                }
-            }
-
-        }
-    }
-</style>
+<template>
+    <div :class="{
+        uploadList: true,
+        [`uploadList-${showMode}`]: true,
+        [`uploadList-${subType}`]: true
+    }">
+        <!-- 普通文本模式 -->
+        <template v-if="showMode ==='old'">
+            <!-- 有值 -->
+            <div
+                v-if="files.length"
+                ref="viewerImage"
+                :class="{
+                    'uploadList-list': true,
+                    [`uploadList-list-${subType}`]: true
+                }"
+            >
+                <div
+                    v-for="(fileItem, fileIndex) in files"
+                    :key="fileItem._key || fileItem._id"
+                    :class="{
+                        'item': subType === 'image',
+                        [`item-${subType}`]: true
+                    }"
+                >
+                    <!-- 展示图 -->
+                    <div class="item-show">
+                        <img
+                            v-if="fileItem.mimetype.includes('image')"
+                            :data-original="fileItem.url"
+                            :src="$imageResize(fileItem.url, imageResizeConfig)"
+                            :alt="fileItem.name"
+                        >
+                        <img
+                            v-else
+                            :src="getFileImage(fileItem)"
+                            :alt="fileItem.name"
+                        >
+                    </div>
+
+                    <!-- 展示名称 -->
+                    <p class="item-name-title">{{ fileItem.name }}</p>
+
+                    <!-- 图标 -->
+                    <dsh-icons
+                        class="item-action"
+                        item-class="item-action-icon"
+                        :list="$getOperationList(getBtns(fileItem))"
+                        @click="$dispatchEvent($event, fileItem, fileIndex)"
+                    ></dsh-icons>
+                </div>
+            </div>
+
+            <!-- 无值 -->
+            <div
+                v-else
+                class="uploadList-nodata"
+            >
+                <span>{{ emptyShowVal }}</span>
+            </div>
+        </template>
+
+        <!-- 在表格中展开 -->
+        <template v-else-if="showMode ==='tableList'">
+            <!-- 有值 -->
+            <div
+                v-if="files.length"
+                ref="viewerImage"
+                :class="[
+                    'uploadList-list',
+                    `uploadList-list-${subType}`
+                ]"
+            >
+                <div
+                    v-for="(fileItem, fileIndex) in files"
+                    :key="fileItem._key || fileItem._id"
+                    :class="{
+                        'item': subType === 'image',
+                        [`item-${subType}`]: true
+                    }"
+                >
+                    <!-- 展示图 -->
+                    <div class="item-show">
+                        <img
+                            v-if="fileItem.mimetype.includes('image')"
+                            :data-original="fileItem.url"
+                            :src="$imageResize(fileItem.url, imageResizeConfig)"
+                            :alt="fileItem.name"
+                        >
+                        <img
+                            v-else
+                            :src="getFileImage(fileItem)"
+                            :alt="fileItem.name"
+                        >
+                    </div>
+
+                    <!-- 展示名称 -->
+                    <p class="item-name-title">{{ fileItem.name }}</p>
+
+                    <!-- 图标 -->
+                    <dsh-icons
+                        class="item-action"
+                        item-class="item-action-icon"
+                        :list="$getOperationList(getBtns(fileItem))"
+                        @click="$dispatchEvent($event, fileItem, fileIndex)"
+                    ></dsh-icons>
+                </div>
+            </div>
+
+            <!-- 无值 -->
+            <div
+                v-else
+                class="uploadList-inline-nodata"
+            >
+                <span>{{ emptyShowVal }}</span>
+            </div>
+        </template>
+
+        <!-- 新展示方式 -->
+        <template v-else>
+            <!-- 文件类型 -->
+            <div
+                v-if="subType === 'file'"
+                ref="viewerImage"
+            >
+                <!-- 有值 -->
+                <template v-if="files.length">
+                    <dsh-dropdown
+                        :list="files"
+                        trigger="hover"
+                        class="uploadList-fileList"
+                    >
+                        <div :class="{
+                            'uploadList-fileList-fileName': true,
+                            'uploadList-fileList-fileName-edit': canEdit
+                        }">
+                            {{ files.length }}个
+                            <Icon
+                                v-if="canEdit"
+                                type="ios-arrow-down"
+                            />
+                        </div>
+
+                        <div
+                            slot="dropdownItem"
+                            slot-scope="{ dropdownItem, dropdownIndex }"
+                            class="uploadList-fileList-fileItem"
+                        >
+                            <img
+                                v-if="dropdownItem.mimetype.includes('image')"
+                                :data-original="dropdownItem.url"
+                                :src="$imageResize(dropdownItem.url, imageResizeConfig)"
+                                :alt="dropdownItem.name"
+                                class="fileItem-img"
+                            >
+                            <img
+                                v-else
+                                :src="getFileImage(dropdownItem)"
+                                :alt="dropdownItem.name"
+                                class="fileItem-img"
+                            >
+
+                            <p class="fileItem-name-title">{{ dropdownItem.name }}</p>
+
+                            <dsh-icons
+                                class="fileItem-action"
+                                item-class="fileItem-action-icon"
+                                :list="$getOperationList(getBtns(dropdownItem))"
+                                @click="$dispatchEvent($event, dropdownItem, dropdownIndex)"
+                            ></dsh-icons>
+                        </div>
+                    </dsh-dropdown>
+
+                    <div
+                        v-for="(fileItem) in files"
+                        :key="fileItem._key || fileItem._id"
+                        :class="{
+                            'item': subType === 'image',
+                            [`item-${subType}`]: true
+                        }"
+                    >
+                        <img
+                            v-if="fileItem.mimetype.includes('image')"
+                            :data-original="fileItem.url"
+                            :src="$imageResize(fileItem.url, imageResizeConfig)"
+                            :alt="fileItem.name"
+                            style="display: none;"
+                        >
+                    </div>
+                </template>
+
+                <!-- 无值 -->
+                <span
+                    v-else
+                    class="uploadList-inline-nodata"
+                >
+                    {{ emptyShowVal }}
+                </span>
+            </div>
+
+            <!-- 图片类型 -->
+            <template v-else>
+                <!-- 有值 -->
+                <div
+                    v-if="files.length"
+                    ref="viewerImage"
+                    class="uploadList-inline-list"
+                >
+                    <div
+                        v-for="(fileItem, fileIndex) in files"
+                        :key="fileItem.url"
+                        class="item"
+                    >
+                        <img
+                            v-if="fileItem.mimetype.includes('image')"
+                            :data-original="fileItem.url"
+                            :src="$imageResize(fileItem.url, imageResizeConfig)"
+                            :alt="fileItem.name"
+                        >
+                        <img
+                            v-else
+                            :src="getFileImage(fileItem)"
+                            :alt="fileItem.name"
+                        >
+
+                        <dsh-icons
+                            class="item-action"
+                            item-class="item-action-icon"
+                            :list="$getOperationList(getBtns(fileItem))"
+                            @click="$dispatchEvent($event, fileItem, fileIndex)"
+                        ></dsh-icons>
+                    </div>
+                </div>
+
+                <!-- 无值 -->
+                <span
+                    v-else
+                    class="uploadList-inline-nodata"
+                >
+                    {{ emptyShowVal }}
+                </span>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script>
+    import Viewer from "viewerjs";
+    import axios from "axios";
+
+    export default {
+        name: "uploadList",
+        props: {
+            showMode: {
+                type: String,
+                default: "old" // inline, old, normal
+            },
+            canEdit: {
+                type: Boolean,
+                default: true
+            },
+            files: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            isShowEditIcon: Boolean,
+            emptyShowVal: String
+        },
+        data () {
+            return {
+                imageResizeConfig: {}
+            };
+        },
+        computed: {
+            subType () {
+                return this.propsObj._fileType;
+            },
+
+            allOperationMap () {
+                return {
+                    canDelete: {
+                        name: "删除",
+                        type: "canDelete",
+                        customIcon: "bico-shanchu",
+                        size: "14",
+                        event: "clickDeleteItem"
+                    },
+                    canEdit: {
+                        name: "编辑",
+                        type: "canEdit",
+                        customIcon: "bico-bianji",
+                        size: "14",
+                        event: "clickEdit"
+                    },
+                    canDownload: {
+                        name: "下载",
+                        type: "canDownload",
+                        customIcon: "bico-xiazai1",
+                        size: "14",
+                        event: "handleDownload"
+                    },
+                    canPreview: {
+                        name: "预览",
+                        type: "canPreview",
+                        customIcon: "bico-yulan",
+                        size: "16",
+                        event: "clickPreview"
+                    }
+                };
+            },
+            operationMap () {
+                return this.canEdit
+                    ? this.$categoryMapToMap(
+                        this.allOperationMap,
+                        undefined,
+                        this.isShowEditIcon ? [] : ["canEdit"]
+                    )
+                    : this.$categoryMapToMap(
+                        this.allOperationMap,
+                        undefined,
+                        ["canDelete", "canEdit"]
+                );
+            }
+        },
+        methods: {
+            // 点击删除某项
+            clickDeleteItem (operationItem, fileItem, fileIndex) {
+                this.$emit("deleteItem", fileItem, fileIndex);
+            },
+            // 点击文件预览 -file服务器的数据列表
+            clickPreview (operationItem, fileItem, fileIndex) {
+                if (fileItem.mimetype.includes("image")) {
+                    const viewerImage = this.$refs.viewerImage;
+                    const findIndex = this.files
+                        .filter(valItem => valItem.mimetype.includes("image"))
+                        .findIndex(valItem => valItem.url === fileItem.url);
+
+                    const viewer = new Viewer(viewerImage, {
+                        url: "data-original",
+                        hidden: function () {
+                            viewer.destroy();
+                        },
+                        loop: false,
+                        initialViewIndex: findIndex,
+                        zIndex: 2147483647
+                    });
+                    viewer.show();
+                } else {
+                    window.open(fileItem.url);
+                }
+            },
+            // 点击文件编辑
+            clickEdit (operationItem, fileItem) {
+                let fileName = fileItem.name;
+                const lastIndex = fileName.lastIndexOf(".");
+                const formate = fileName.substring(lastIndex);
+                fileName = fileName.substring(0, lastIndex);
+
+                this.$Modal.confirm({
+                    title: "修改名称",
+                    render: (h) => {
+                        // // 第二种方式
+                        // const lastIndex = fileName.lastIndexOf(".");
+                        // const formate = fileName.substring(lastIndex);
+
+                        return h("Input", {
+                            props: {
+                                // value: fileItem.name.substring(0, lastIndex),
+                                value: fileName,
+                                autofocus: true,
+                                placeholder: "请输入名称"
+                            },
+                            scopedSlots: {
+                                append: formate
+                            },
+                            on: {
+                                input: (val) => {
+                                    // fileItem.name = val + formate;
+                                    fileName = val;
+                                }
+                            }
+                        });
+                    },
+                    onOk: () => {
+                        fileItem.name = fileName + formate;
+                        this.$emit("editItemName", fileItem);
+                    },
+                    onCancel: () => {}
+                });
+            },
+            // 接口 -下载
+            handleDownload (operationItem, fileItem, fileIndex) {
+                axios
+                    .get(fileItem.downloadUrl, {
+                        responseType: "blob"
+                    })
+                    .then((res) => {
+                        if (window.navigator.msSaveOrOpenBlob) {
+                            // 兼容IE10
+                            navigator.msSaveBlob(res, fileItem.name);
+                        } else {
+                            const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
+                            const a = document.createElement("a");
+                            a.style.display = "none";
+                            a.href = href; // 指定下载链接
+                            a.download = fileItem.name; // 指定下载文件名
+                            a.click();
+                            URL.revokeObjectURL(a.href); // 释放URL对象
+                            a.remove();
+                        }
+                });
+            },
+            // 获取不同类型文件的图片
+            getFileImage (fileItem) {
+                if (!fileItem.mimetype) {
+                    return this.$imageSrcMap.fileType.other;
+                } else if (fileItem.mimetype.includes("image")) {
+                    return fileItem.url; // 压缩图片：将图片最长的边限制在100像素，短边按比例处理
+                } else if (fileItem.mimetype.includes("text/plain")) {
+                    return this.$imageSrcMap.fileType.text;
+                } else if (fileItem.mimetype.includes("application/pdf")) {
+                    return this.$imageSrcMap.fileType.pdf;
+                } else if (fileItem.mimetype.includes("wordprocessingml.document") || fileItem.mimetype.includes("application/msword")) {
+                    return this.$imageSrcMap.fileType.doc;
+                } else if (fileItem.mimetype.includes("presentationml.presentation") || fileItem.mimetype.includes("application/vnd.ms-powerpoint")) {
+                    return this.$imageSrcMap.fileType.ppt;
+                } else if (fileItem.mimetype.includes("spreadsheetml.sheet")) {
+                    return this.$imageSrcMap.fileType.excel;
+                } else if (fileItem.mimetype.includes("application/x-zip-compressed")) {
+                    return this.$imageSrcMap.fileType.zip;
+                } else if (fileItem.mimetype.includes("application/x-rar-compressed")) {
+                    return this.$imageSrcMap.fileType.rar;
+                } else {
+                    return this.$imageSrcMap.fileType.other;
+                }
+            },
+            getBtns (fileItem) {
+                if (["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type)) ||
+                    fileItem.mimetype.includes("wordprocessingml.document") ||
+                    fileItem.mimetype.includes("application/msword") ||
+                    fileItem.mimetype.includes("presentationml.presentation") ||
+                    fileItem.mimetype.includes("application/vnd.ms-powerpoint") ||
+                    fileItem.mimetype.includes("spreadsheetml.sheet"))
+                {
+                    return undefined;
+                }
+                else {
+                    ["canDelete", "canEdit", "canDownload"];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .uploadList {
+        width: 100%;
+        overflow: auto;
+
+        // 普通文件
+        &-old {
+            margin: 16px;
+        }
+
+        &-nodata {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            line-height: 120px;
+            color: @placeholderColor;
+            white-space: nowrap;
+
+            span {
+                margin-left: 5px;
+            }
+        }
+
+        &-list {
+            display: flex;
+            flex-wrap: nowrap;
+
+            .item {
+                flex: 0 0 120px;
+                height: 120px;
+                margin-right: 10px;
+                border-radius: @borderRadius;
+                background: #f4f5fa;
+                text-align: center;
+                overflow: hidden;
+                display: inline-flex;
+                flex-direction: column;
+                justify-content: space-between;
+                position: relative;
+
+                &:hover {
+                    .item-action {
+                        display: flex !important;
+                    }
+                }
+
+                &-show {
+                    display: flex;
+                    overflow: hidden;
+                    align-items: center;
+                    justify-content: center;
+                    flex: 2;
+                    min-height: 50px;
+
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                    }
+                }
+
+                &-name {
+                    flex: 1;
+                    display: flex;
+                    max-height: 32px;
+
+                    &-title {
+                        padding: 0 8px;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        color: @themeColor;
+                    }
+                }
+
+                &-action {
+                    position: absolute;
+                    right: 0px;
+                    top: 0px;
+                    left: 0px;
+                    bottom: 0px;
+                    background-color: @placeholderColor;
+                    display: none !important;
+                    align-items: center;
+                    justify-content: center;
+
+                    &-icon {
+                        width: 22px;
+                        height: 22px;
+                        line-height: 22px;
+                        color: #fff;
+                    }
+                }
+            }
+
+            // file 模式
+            &-file {
+                flex-direction: column;
+                .item-file {
+                    flex: 0 0 100%;
+                    height: auto;
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+                    border-radius: 0px;
+                    margin: 0px;
+                    padding: 2px 0;
+                    background: transparent;
+                    &:hover {
+                        background: #f4f5fa;
+                    }
+                    .item-show {
+                        flex: 0 0 22px;
+                        min-height: 20px;
+                        img {
+                            width: 22px;
+                            height: 22px;
+                        }
+                    }
+                    .item-name-title {
+                        color: @textColor;
+                        flex: 1;
+                        text-align: left;
+                    }
+                    .item-action {
+                        position: static;
+                        display: flex !important;
+                        background: transparent;
+                        white-space: nowrap;
+                        &-icon {
+                            color: @contentColor;
+                            width: 16px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-inline {
+            height: 32px;
+            line-height: 32px;
+
+            &-list {
+                width: 100%;
+                height: 100%;
+                padding-left: 3px;
+                display: flex;
+                flex-wrap: nowrap;
+                overflow-x: auto;
+                overflow-y: hidden;
+
+                .item {
+                    flex: 0 0 32px;
+                    margin-right: 3px;
+                    border-radius: @borderRadius;
+                    background: #f4f5fa;
+                    text-align: center;
+                    position: relative;
+
+                    img {
+                        max-width: 100%;
+                        max-height: 100%;
+                        margin: auto;
+                    }
+
+                    &-action {
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                        display: none !important;
+                        background-color: @placeholderColor;
+                        color: #fff;
+                        align-items: center;
+                        justify-content: center;
+                        flex-wrap: wrap;
+
+                        &-icon {
+                            width: 16px;
+                            height: 16px;
+                            font-size: 16px !important;
+                            margin: 0px;
+                        }
+                    }
+
+                    @keyframes toTop {
+                        from {
+                            top: 100%;
+                        }
+
+                        to {
+                            top: 0;
+                        }
+                    }
+
+                    &:hover {
+                        .item-action {
+                            display: flex !important;
+                            animation: toTop 0.1s;
+                        }
+                    }
+                }
+            }
+
+            &-nodata {
+                padding-left: 7px;
+                line-height: 32px;
+                color: @placeholderColor;
+            }
+        }
+
+        &-fileList {
+            width: 100%;
+            &-fileName {
+                width: 100%;
+                height: 100%;
+                cursor: pointer;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                &-edit {
+                    padding: 0 8px;
+                }
+            }
+        }
+    }
+
+    .DshDropdown {
+        .uploadList-fileList-fileItem {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .fileItem {
+                &-img {
+                    width: 22px;
+                    height: 22px;
+                }
+                &-name-title {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin: 0 8px;
+                    flex: 1;
+                    text-align: left;
+                }
+                &-action {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    &-icon {
+                        width: 16px;
+                        color: @contentColor;
+                    }
+                }
+            }
+
+        }
+    }
+</style>