bri-components 1.0.0

package/src/components/controls/base/ZUpload/index.vue

@@ -0,0 +1,356 @@
+<template>
+    <y-upload-image
+        v-if="propsObj._kind === 'uploadImage'"
+        :propsObj="propsObj"
+        :value="value"
+        ossType="putUpload"
+        @change="change"
+    ></y-upload-image>
+
+    <div
+        v-else
+        :class="[
+            prefixCls,
+            'ycFormItem',
+            'ZUpload',
+            `ZUpload-${showType}`,
+            { 'ZUpload-readonly': mode === 'default' && $isReadonly(canEdit, propsObj) },
+            { 'ZUpload-disabled': mode === 'default' && $isDisabled(canEdit, propsObj) },
+            commonClass
+        ]"
+    >
+        <!-- 上传 -->
+        <div
+            v-if="finalCanEdit"
+            :class="classes"
+            @click="handleClick"
+            @drop.prevent="onDrop"
+            @paste="handlePaste"
+            @dragover.prevent="dragOver = true"
+            @dragleave.prevent="dragOver = false"
+        >
+            <input
+                ref="input"
+                type="file"
+                :class="[prefixCls + '-input']"
+                @change="handleChange"
+                :multiple="multiple"
+                :webkitdirectory="webkitdirectory"
+                :accept="accept"
+                :disabled="!canClickUpload"
+            >
+            <slot>
+                <div :class="`ZUpload-${showType}-imageadd`">
+
+                    <i-circle
+                        v-if="percent"
+                        :class="`ZUpload-${showType}-circle`"
+                        :percent="percent"
+                        :stroke-color="percentColor"
+                    >
+                        <Icon
+                            v-if="percent == 100"
+                            type="ios-checkmark"
+                        ></Icon>
+                        <span v-else-if="showType=='old'">{{ percent }}%</span>
+                    </i-circle>
+                    <template v-else>
+                        <Icon
+                            v-if="['inline'].includes(showType)"
+                            custom="bico-font bico-upload1"
+                        />
+                        <span>上传</span>
+                    </template>
+                </div>
+            </slot>
+        </div>
+        <!-- 列表 -->
+        <slot name="list">
+            <upload-list
+                v-if="showUploadList"
+                :propsObj="propsObj"
+                :showType="showType"
+                :files="val"
+                :isReadonly="$isReadonly(canEdit, propsObj)"
+                :isDisabled="$isDisabled(canEdit, propsObj)"
+                :finalCanEdit="finalCanEdit"
+                @on-file-remove="handleRemove"
+                @on-file-preview="handlePreview"
+            ></upload-list>
+        </slot>
+    </div>
+</template>
+
+<script>
+    import YUploadImage from "./YUploadImage.vue";
+    import uploadList from "./upload-list.vue";
+    import controlMixin from "../../controlMixin.js";
+    import uploadMixin from "./uploadMixin.js";
+
+    const prefixCls = "ivu-upload";
+    export default {
+        name: "Upload",
+        mixins: [controlMixin, uploadMixin],
+        components: {
+            YUploadImage,
+            uploadList
+        },
+        props: {
+            showUploadList: {
+                type: Boolean,
+                default: true
+            },
+            type: {
+                type: String,
+                default: "drag"
+            },
+            format: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            maxSize: {
+                type: Number
+            },
+            beforeUpload: Function,
+            onProgress: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onSuccess: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onError: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onRemove: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onPreview: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onExceededSize: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            onFormatError: {
+                type: Function,
+                default () {
+                    return {};
+                }
+            },
+            paste: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            webkitdirectory: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                dragOver: false,
+                tempIndex: 1
+            };
+        },
+        computed: {
+            val: {
+                get () {
+                    return this.value[this.propsObj._key] || [];
+                },
+                set (val) {
+                    this.value[this.propsObj._key] = val;
+                }
+            },
+            itemDisabled () {
+                return !this.finalCanEdit;
+            },
+            showType () {
+                // 宽度不为100%,级联表格或内部表格中显示新版
+                return this.propsObj.showType || ((this.propsObj._span < 24 && this.propsObj._span > 0 || this.propsObj.inTable) ? "inline" : "old");
+            },
+            multiple () {
+                return this.propsObj._multiple !== false;
+            },
+            accept () {
+                let documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf"];
+                let imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
+                let videoType = ["flv", "rmvb", "mp4", "mvb"];
+                let audioType = ["wma", "mp3", "m4a"];
+                let packageType = ["rar", "zip"];
+
+                // 限制文件格式
+                let format = [];
+                if (this.propsObj._fileType === "image") {
+                    format = imageType;
+                } else {
+                    format = [...documentType, ...imageType, ...videoType, ...audioType, ...packageType];
+                }
+                format = format.map(item => {
+                    return `.${item}`;
+                });
+                return format.join();
+            },
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-select`]: this.type === "select",
+                        [`${prefixCls}-drag`]: this.type === "drag",
+                        [`${prefixCls}-dragOver`]: this.type === "drag" && this.dragOver,
+                        [`ZUpload-${this.showType}-wrapper`]: true
+                    }
+                ];
+            }
+
+        },
+        methods: {
+            handleClick () {
+                if (this.itemDisabled) return;
+                this.$refs.input.click();
+            },
+            handleChange (e) {
+                const files = e.target.files;
+
+                if (!files) {
+                    return;
+                }
+                this.uploadFiles(files);
+                this.$refs.input.value = null;
+            },
+            onDrop (e) {
+                this.dragOver = false;
+                if (this.itemDisabled) return;
+                this.uploadFiles(e.dataTransfer.files);
+            },
+            handlePaste (e) {
+                if (this.itemDisabled) return;
+                if (this.paste) {
+                    this.uploadFiles(e.clipboardData.files);
+                }
+            },
+            uploadFiles (files) {
+                let postFiles = Array.prototype.slice.call(files);
+                if (!this.multiple) postFiles = postFiles.slice(0, 1);
+
+                if (postFiles.length === 0) return;
+                postFiles.forEach(file => {
+                    this.upload(file);
+                });
+            },
+            upload (file) {
+                if (!this.beforeUpload) {
+                    return this.post(file);
+                }
+
+                const before = this.beforeUpload(file);
+                if (before && before.then) {
+                    before.then(processedFile => {
+                        if (Object.prototype.toString.call(processedFile) === "[object File]") {
+                            this.post(processedFile);
+                        } else {
+                            this.post(file);
+                        }
+                    }, () => {
+                    });
+                } else if (before !== false) {
+                    this.post(file);
+                } else {
+                }
+            },
+            post (file) {
+                // check format
+                if (this.format.length) {
+                    const fileFormat = file.name.split(".").pop().toLocaleLowerCase();
+                    const checked = this.format.some(item => item.toLocaleLowerCase() === fileFormat);
+                    if (!checked) {
+                        this.onFormatError(file, this.value[this.propsObj._key]);
+                        return false;
+                    }
+                }
+
+                // check maxSize
+                if (this.maxSize) {
+                    if (file.size > this.maxSize * 1024) {
+                        this.onExceededSize(file, this.value[this.propsObj._key]);
+                        return false;
+                    }
+                }
+
+                // 上传接口
+                this.handlePost(file);
+            },
+            getFile (file) {
+                const fileList = this.value[this.propsObj._key];
+                let target;
+                fileList.every(item => {
+                    target = file.uid === item.uid ? item : null;
+                    return !target;
+                });
+                return target;
+            },
+            handleProgress (percentage, file) {
+                this.onProgress(percentage, file, this.value[this.propsObj._key]);
+            },
+            handleSuccess (res, data, file) {
+                if (data.res === 0) {
+
+                    if (!this.value[this.propsObj._key]) {
+                        this.$set(this.value, this.propsObj._key, []);
+                    }
+                    this.value[this.propsObj._key].push(data.data);
+                    this.onSuccess(res, file, this.value[this.propsObj._key]);
+
+                    this.change();
+
+                } else {
+                    this.$Message.error({
+                        content: `操作失败！${this.$getMsgText(data.msg)}`,
+                        duration: 4
+                    });
+                    this.handleError && this.handleError(res, data, file);
+                }
+            },
+            handleError (err, response, file) {
+                this.onError(err, response, file);
+            },
+            handleRemove (file) {
+                const fileList = this.value[this.propsObj._key];
+                fileList.splice(fileList.indexOf(file), 1);
+                this.onRemove(file, fileList);
+                this.change();
+            },
+            handlePreview (file) {
+                if (file.status === "finished") {
+                    this.onPreview(file);
+                }
+            },
+            clearFiles () {
+                this.value[this.propsObj._key] = [];
+            }
+        }
+    };
+</script>

package/src/components/controls/base/ZUpload/upload-list.vue

@@ -0,0 +1,277 @@
+<template>
+    <div
+        class="uploadList"
+        :class="`uploadList-${showType}`"
+    >
+        <!-- 普通文本模式 -->
+        <template v-if="showType ==='old'">
+            <div
+                v-if="files && files.length > 0"
+                class="uploadList-list"
+                ref="viewerImage"
+            >
+                <div
+                    v-for="fileItem in files"
+                    :key="fileItem.url"
+                    class="uploadList-listItem"
+                >
+                    <!-- 展示图 -->
+                    <div class="uploadList-listItem-show">
+                        <img
+                            v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
+                            :data-original="fileItem.url"
+                            :src="$imageResize(fileItem.url, imageResizeConfig)"
+                            :alt="fileItem.name"
+                        >
+                        <img
+                            v-else
+                            :src="getFileImage(fileItem)"
+                            :alt="fileItem.name"
+                        >
+                    </div>
+
+                    <!-- 展示名称 -->
+                    <Ctooltip
+                        v-if="propsObj._fileType != 'image'"
+                        class="uploadList-listItem-name"
+                        :content="fileItem.name"
+                        :transfer="true"
+                        placement="top-start"
+                        max-width="300"
+                    >
+                        <p class="uploadList-listItem-name-title">{{ fileItem.name }}</p>
+                    </Ctooltip>
+
+                    <!-- 图标 -->
+                    <dsh-icons
+                        class="uploadList-listItem-action"
+                        item-class="uploadList-listItem-action-icon"
+                        :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1)))"
+                        @click="$dispatchEvent($event,fileItem)"
+                    ></dsh-icons>
+                </div>
+            </div>
+            <div
+                v-else
+                class="uploadList-nodata"
+            >
+                <Icon type="ios-time" />
+                <span>未上传文件</span>
+            </div>
+        </template>
+        <!-- 自定义新的展示方式 -->
+        <template v-else>
+            <div
+                v-if="files && files.length > 0"
+                class="uploadList-inline-list bri-scrollbar6"
+                ref="viewerImage"
+            >
+                <div
+                    class="uploadList-inline-listItem"
+                    v-for="fileItem in files"
+                    :key="fileItem.url"
+                >
+                    <img
+                        v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
+                        :data-original="fileItem.url"
+                        :src="$imageResize(fileItem.url, imageResizeConfig)"
+                        :alt="fileItem.name"
+                    >
+                    <img
+                        v-else
+                        :src="getFileImage(fileItem)"
+                        :alt="fileItem.name"
+                    >
+                    <dsh-icons
+                        class="uploadList-inline-listItem-action"
+                        item-class="uploadList-inline-listItem-action-icon"
+                        :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1) || (fileItem.mimetype=='text/plain')))"
+                        @click="$dispatchEvent($event,fileItem)"
+                    ></dsh-icons>
+                </div>
+            </div>
+            <span v-else>未上传文件</span>
+        </template>
+    </div>
+</template>
+<script>
+    import Viewer from "viewerjs";
+    import axios from "axios";
+
+    export default {
+        name: "uploadList",
+        props: {
+            files: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            showType: {
+                type: String,
+                default: "old" // inline, old, normal
+            },
+            isReadonly: Boolean,
+            isDisabled: Boolean,
+            finalCanEdit: Boolean,
+            propsObj: Object
+        },
+        computed: {
+            operationMap () {
+                return {
+                    remove: {
+                        name: "删除",
+                        icon: "ios-trash-outline",
+                        size: "16",
+                        event: "handleRemove",
+                        canShow: this.finalCanEdit
+                    },
+                    download: {
+                        name: "下载",
+                        icon: "ios-cloud-download-outline",
+                        size: "14",
+                        event: "handleDownload",
+                        canShow: true
+                    },
+                    preview: {
+                        name: "预览",
+                        icon: "ios-eye-outline",
+                        size: "22",
+                        type: "updateColor",
+                        event: "handlePreview",
+                        canShow: undefined
+                    }
+                };
+            },
+            imageResizeConfig () {
+                return {};
+                // this.propsObj._imageResizeConfig || (this.showType == "inline" ? {
+                //     m: "lfit",
+                //     w: 34,
+                //     h: 37
+                // } : {
+                //     m: "lfit",
+                //     w: 76,
+                //     h: 50
+                // });
+            }
+        },
+        data () {
+            return {
+            };
+        },
+        methods: {
+            getBtns (canPreview) {
+                this.operationMap.preview.canShow = canPreview;
+                return Object.keys(this.operationMap).filter(attr => this.operationMap[attr].canShow);
+            },
+
+            // 点击文件预览 -file服务器的数据列表
+            handlePreview (operation, file) {
+                if (this.propsObj._fileType === "image") {
+                    this.previewImage(file.url);
+                } else if (file.mimetype.indexOf("image") > -1) {
+                    this.previewImage(file.url);
+                } else {
+                    window.open(file.url);
+                }
+                this.$emit("on-file-preview", file);
+            },
+            // 图片预览
+            previewImage (src) {
+                let viewerImage = this.$refs.viewerImage;
+                let findIndex = this.files
+                    .filter(valItem => valItem.mimetype.indexOf("image") > -1)
+                    .findIndex(valItem => valItem.url === src);
+
+                let viewer = new Viewer(viewerImage, {
+                    url: "data-original",
+                    hidden: function () {
+                        viewer.destroy();
+                    },
+                    loop: false,
+                    initialViewIndex: findIndex,
+                    zIndex: 2147483647
+                });
+                viewer.show();
+            },
+
+            handleDownload (operation, file) {
+                this.downloadFile(file.url, file);
+            },
+            downloadFile (url, file) {
+                axios
+                    .get(url, {
+                        responseType: "blob"
+                    })
+                    .then((res) => {
+                        if (window.navigator.msSaveOrOpenBlob) {
+                            // 兼容IE10
+                            navigator.msSaveBlob(res, file.name);
+                        } else {
+                            const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
+                            const a = document.createElement("a");
+                            a.style.display = "none";
+                            a.href = href; // 指定下载链接
+                            a.download = file.name; // 指定下载文件名
+                            a.click();
+                            URL.revokeObjectURL(a.href); // 释放URL对象
+                            a.remove();
+                        }
+                });
+            },
+            handleRemove (operation, file) {
+                this.$emit("on-file-remove", file);
+            },
+            format (file) {
+                const format = file.name.split(".").pop().toLocaleLowerCase() || "";
+                let type = "ios-document-outline";
+
+                if (["gif", "jpg", "jpeg", "png", "bmp", "webp"].indexOf(format) > -1) {
+                    type = "ios-image";
+                }
+                if (["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"].indexOf(format) > -1) {
+                    type = "ios-film";
+                }
+                if (["mp3", "wav", "wma", "ogg", "aac", "flac"].indexOf(format) > -1) {
+                    type = "ios-musical-notes";
+                }
+                if (["doc", "txt", "docx", "pages", "epub", "pdf"].indexOf(format) > -1) {
+                    type = "md-document";
+                }
+                if (["numbers", "csv", "xls", "xlsx"].indexOf(format) > -1) {
+                    type = "ios-stats";
+                }
+                if (["keynote", "ppt", "pptx"].indexOf(format) > -1) {
+                    type = "ios-videocam";
+                }
+
+                return type;
+            },
+            // 获取不同类型文件的图片
+            getFileImage (item) {
+                if (!item.mimetype) {
+                    return this.$imageSrcMap.fileType.other;
+                } else if (item.mimetype.indexOf("image") > -1) {
+                    return item.url; // 压缩图片：将图片最长的边限制在100像素，短边按比例处理
+                } else if (item.mimetype.indexOf("text/plain") > -1) {
+                    return this.$imageSrcMap.fileType.text;
+                } else if (item.mimetype.indexOf("application/pdf") > -1) {
+                    return this.$imageSrcMap.fileType.pdf;
+                } else if (item.mimetype.indexOf("wordprocessingml.document") > -1 || item.mimetype.indexOf("application/msword") > -1) {
+                    return this.$imageSrcMap.fileType.doc;
+                } else if (item.mimetype.indexOf("presentationml.presentation") > -1 || item.mimetype.indexOf("application/vnd.ms-powerpoint") > -1) {
+                    return this.$imageSrcMap.fileType.ppt;
+                } else if (item.mimetype.indexOf("spreadsheetml.sheet") > -1) {
+                    return this.$imageSrcMap.fileType.excel;
+                } else if (item.mimetype.indexOf("application/x-zip-compressed") > -1) {
+                    return this.$imageSrcMap.fileType.zip;
+                } else if (item.mimetype.indexOf("application/x-rar-compressed") > -1) {
+                    return this.$imageSrcMap.fileType.rar;
+                } else {
+                    return this.$imageSrcMap.fileType.other;
+                }
+            }
+        }
+    };
+</script>