bri-components 1.5.22 → 1.6.1

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

@@ -1,434 +1,435 @@
-<template>
-    <bri-upload-image
-        v-if="propsObj._kind === 'uploadImage'"
-        :value="value"
-        :propsObj="propsObj"
-        @change="change"
-    ></bri-upload-image>
-
-    <!-- 上传 -->
-    <div
-        v-else
-        :class="{
-            [prefixCls]: true,
-            'BriUpload': true,
-            'BriUpload-disabled': canEdit && disabled,
-            'BriUpload-readonly': !canEdit,
-            'BriUpload-unit': !canEdit && isInTable,
-            [`BriUpload-${showMode}`]: true,
-        }"
-        @click="clickUpload"
-        @drop.prevent="handleDrop"
-        @paste="handlePaste"
-        @dragover.prevent="dragOver = true"
-        @dragleave.prevent="dragOver = false"
-    >
-
-        <!-- 编辑 -->
-        <div
-            v-if="!disabled"
-            :class="classes"
-        >
-            <input
-                ref="input"
-                :class="[prefixCls + '-input']"
-                type="file"
-                :accept="accept"
-                :multiple="multipleMode"
-                :disabled="disabled || percent > 0"
-                :webkitdirectory="false"
-                @change="handleChange"
-            >
-
-            <!-- 上传按钮 -->
-            <slot>
-                <div :class="`BriUpload-${showMode}-add`">
-                    <!-- 上传 -->
-                    <i-circle
-                        v-if="percent"
-                        :class="`BriUpload-${showMode}-circle`"
-                        :percent="percent"
-                        :stroke-color="percentColor"
-                    >
-                        <!-- 上传完 -->
-                        <Icon
-                            v-if="Number(percent) === 100"
-                            type="ios-checkmark"
-                        ></Icon>
-                        <!-- 上传中 -->
-                        <span v-else-if="showMode === 'old'">
-                            {{ percent }}%
-                        </span>
-                    </i-circle>
-
-                    <!-- 未上传 -->
-                    <template v-else>
-                        <dsh-icons
-                            :list="$getOperationList([subType === 'image' ? 'add' : 'upload'])"
-                            @click="clickUpload"
-                        ></dsh-icons>
-
-                        <span v-if="showMode !== 'inline'">
-                            点击上传{{ subType === 'image' ? "图片" : "文件" }}
-                        </span>
-                    </template>
-                </div>
-            </slot>
-        </div>
-
-        <!-- 编辑和查看 列表 -->
-        <slot name="list">
-            <upload-list
-                :class="{
-                    ...commonClass,
-                    'bri-control-edit': false
-                }"
-                :showMode="showMode"
-                :canEdit="!disabled"
-                :files="curValList"
-                :propsObj="propsObj"
-                :emptyShowVal="emptyShowVal"
-                :isShowEditIcon="isShowEditIcon"
-                @deleteItem="clickDeteItem"
-                @editItemName="handleEditName"
-            ></upload-list>
-        </slot>
-    </div>
-</template>
-
-<script>
-    import controlMixin from "../../mixins/controlMixin.js";
-    import uploadMixin from "./uploadMixin.js";
-    import BriUploadImage from "./BriUploadImage.vue";
-    import uploadList from "./uploadList.vue";
-
-    const prefixCls = "ivu-upload";
-    const imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
-    const documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf", "xmind"];
-    const videoType = ["flv", "rmvb", "mp4", "mvb"];
-    const audioType = ["wma", "mp3", "m4a"];
-    const packageType = ["rar", "zip"];
-    const fileTypes = [
-        ...documentType,
-        ...imageType,
-        ...videoType,
-        ...audioType,
-        ...packageType
-    ];
-
-    export default {
-        name: "BriUpload",
-        mixins: [
-            controlMixin,
-            uploadMixin
-        ],
-        components: {
-            BriUploadImage,
-            uploadList
-        },
-        props: {},
-        data () {
-            return {
-                prefixCls: prefixCls,
-                dragOver: false,
-
-                operationMap: {
-                    upload: {
-                        customIcon: "bico-upload1"
-                    },
-                    add: {
-                        icon: "md-add"
-                    }
-                }
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    _fileType: "file", // "file", "image"
-                    _showMode: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在表格字段里的 显示老版
-
-                    _multiple: true,
-                    _useType: "drag",
-                    _maxSize: 1024 * 1024 * 2, // 根据四局要求，限制文件为2G
-                    _format: [],
-
-                    ...this.propsObj,
-                    ...this.commonDealPropsObj
-                };
-            },
-            subType () {
-                return this.selfPropsObj._fileType;
-            },
-            showMode () {
-                return this.isInTable
-                    ? this.selfPropsObj._inTableStyle == "list" && this.disabled
-                        ? "tableList"
-                        : "inline"
-                    : this.selfPropsObj._showMode;
-            },
-            useType () {
-                return this.selfPropsObj._useType;
-            },
-            format () {
-                return this.selfPropsObj._format;
-            },
-            maxSize () {
-                return this.selfPropsObj._maxSize;
-            },
-            // 限制文件格式
-            accept () {
-                return (this.subType === "image" ? imageType : fileTypes)
-                    .map(type => `.${type}`)
-                    .join();
-            },
-            isShowEditIcon () {
-                // 因为编辑name 需要这三个参数，因此没有这三个参数时不显示此按钮
-                return this.compKey && this.appKey && this.modKey && !!(this.$getHttpPathMap({}).file && this.$getHttpPathMap({}).file.updateFileName);
-            },
-            classes () {
-                return {
-                    [`${prefixCls}`]: true,
-                    [`${prefixCls}-select`]: this.useType === "select",
-                    [`${prefixCls}-drag`]: this.useType === "drag",
-                    [`${prefixCls}-dragOver`]: this.useType === "drag" && this.dragOver,
-                    [`BriUpload-${this.showMode}-wrapper`]: true
-                };
-            }
-        },
-        methods: {
-            clickUpload () {
-                if (!this.disabled) {
-                    this.$refs.input.click();
-                }
-            },
-            clickDeteItem (fileItem, fileIndex) {
-                this.curValList.splice(fileIndex, 1);
-                this.curValList = [...this.curValList];
-            },
-            handleEditName (fileItem) {
-                this.$https({
-                    url: {
-                        ...this.computedUrlModule,
-                        name: "updateFileName"
-                    },
-                    params: fileItem
-                });
-            },
-            successCb (res, data) {
-                if (data.res === 0) {
-                    if (this.multipleMode) {
-                        this.curValList = [
-                            ...this.curValList,
-                            data.data
-                        ];
-                    } else {
-                        this.curValList = [
-                            data.data
-                        ];
-                    }
-                } else {
-                    this.$Message.error({
-                        content: `操作失败！${this.$getMsgText(data.msg)}`,
-                        duration: 4
-                    });
-                }
-            },
-
-            handleChange (e) {
-                if (e.target.files) {
-                    this.dealUpload(e.target.files);
-                    this.$refs.input.value = null;
-                }
-            },
-            handleDrop (e) {
-                this.dragOver = false;
-                this.dealUpload(e.dataTransfer.files);
-            },
-            handlePaste (e) {
-                this.dealUpload(e.clipboardData.files);
-            },
-            dealUpload (files) {
-                if (!this.disabled) {
-                    let postFiles = Array.prototype.slice.call(files);
-                    if (!this.multipleMode) {
-                        postFiles = postFiles.slice(0, 1);
-                    }
-                    postFiles.forEach(fileItem => {
-                        if (
-                            (!this.format.length || this.format.some(item => item.toLocaleLowerCase() === fileItem.name.split(".").pop().toLocaleLowerCase())) &&
-                            (fileItem.size <= this.maxSize * 1024)
-                        ) {
-                            this.handlePost(fileItem);
-                        }
-                    });
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .BriUpload {
-        width: 100%;
-        height: 100%;
-        border: 1px solid @borderColor;
-        border-radius: @borderRadius;
-        background-color: @white;
-        overflow: hidden;
-        position: relative;
-
-        &-old,
-        &-new,
-        &-inline {
-            display: flex;
-
-            &-wrapper {
-                border: none!important;
-                border-radius: 0px !important;
-
-                &:hover {
-                    border: none;
-                }
-            }
-
-            &-add {
-                .dsh-flex-col-center-center();
-                cursor: pointer;
-                position: relative;
-            }
-
-            &-circle {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                margin: auto;
-                border-radius: 50%;
-            }
-        }
-
-        &-old {
-            overflow: hidden;
-
-            &-wrapper {
-                min-width: 120px;
-                height: 100%;
-                margin: 16px 0px 16px 16px;
-            }
-
-            &-add {
-                width: 120px;
-                height: 120px;
-                border: 1px @borderColor dashed;
-                border-radius: @borderRadius;
-                color: @themeColor;
-
-                &:hover {
-                    border-color: @themeColor;
-                    background-color: @theme-focus;
-                }
-            }
-
-            &-circle {
-                width: 50px!important;
-                height: 50px!important;
-                background-color: @inputBg-readonly;
-                color: @themeColor;
-
-                i {
-                    color: @scuess-color;
-                    font-size: 40px;
-                }
-            }
-        }
-
-        &-new,
-        &-inline {
-            &-wrapper {
-                min-width: 32px;
-                height: 32px;
-                line-height: 32px;
-                background-color: @border-readonly;
-            }
-
-            &-add {
-                height: 32px;
-                border: none;
-                border-radius: 0px;
-                background-color: @btn-hover;
-                color: @textColor;
-
-                &:hover {
-                    color: @themeColor;
-                    background-color: @theme-focus;
-                }
-            }
-
-            &-circle {
-                width: 24px!important;
-                height: 24px!important;
-                background-color: #f4f5fa;
-
-                i {
-                    color: @scuess-color;
-                    font-size: 24px;
-                }
-            }
-        }
-
-        &-readonly {
-            border: none;
-            border-radius: 0px;
-            background-color: transparent;
-
-            .uploadList {
-                &-old {
-                    margin: 0px;
-                }
-
-                &-list {
-                    .item {
-                        flex: 0 0 80px;
-                        height: 80px;
-                    }
-                }
-            }
-        }
-
-        &-disabled {
-            .bri-control-disabled();
-
-            .uploadList {
-                &-old {
-                    margin: 0px;
-                }
-
-                &-list {
-                    .item {
-                        flex: 0 0 80px;
-                        height: 80px;
-                    }
-                }
-
-                &-nodata {
-                    color: @placeholder-disabled-color;
-                    text-indent: 7px;
-                    text-align: left;
-                }
-                &-inline-nodata {
-                    color: @placeholder-disabled-color;
-                }
-            }
-        }
-
-        &-unit {
-            .uploadList {
-                &-inline-nodata {
-                    .bri-control-nodata();
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <bri-upload-image
+        v-if="propsObj._kind === 'uploadImage'"
+        :value="value"
+        :propsObj="propsObj"
+        @change="change"
+    ></bri-upload-image>
+
+    <!-- 上传 -->
+    <div
+        v-else
+        :class="{
+            [prefixCls]: true,
+            'BriUpload': true,
+            'BriUpload-disabled': canEdit && disabled,
+            'BriUpload-readonly': !canEdit,
+            'BriUpload-unit': !canEdit && isInTable,
+            [`BriUpload-${showMode}`]: true,
+        }"
+        @click="clickUpload"
+        @drop.prevent="handleDrop"
+        @paste="handlePaste"
+        @dragover.prevent="dragOver = true"
+        @dragleave.prevent="dragOver = false"
+    >
+
+        <!-- 编辑 -->
+        <div
+            v-if="!disabled"
+            :class="classes"
+        >
+            <input
+                ref="input"
+                :class="[prefixCls + '-input']"
+                type="file"
+                :accept="accept"
+                :multiple="multipleMode"
+                :disabled="disabled || percent > 0"
+                :webkitdirectory="false"
+                @change="handleChange"
+            >
+
+            <!-- 上传按钮 -->
+            <slot>
+                <div :class="`BriUpload-${showMode}-add`">
+                    <!-- 上传 -->
+                    <i-circle
+                        v-if="percent"
+                        :class="`BriUpload-${showMode}-circle`"
+                        :percent="percent"
+                        :stroke-color="percentColor"
+                    >
+                        <!-- 上传完 -->
+                        <Icon
+                            v-if="Number(percent) === 100"
+                            type="ios-checkmark"
+                        ></Icon>
+                        <!-- 上传中 -->
+                        <span v-else-if="showMode === 'old'">
+                            {{ percent }}%
+                        </span>
+                    </i-circle>
+
+                    <!-- 未上传 -->
+                    <template v-else>
+                        <dsh-icons
+                            :list="$getOperationList([subType === 'image' ? 'add' : 'upload'])"
+                            @click="clickUpload"
+                        ></dsh-icons>
+
+                        <span v-if="showMode !== 'inline'">
+                            点击上传{{ subType === 'image' ? "图片" : "文件" }}
+                        </span>
+                    </template>
+                </div>
+            </slot>
+        </div>
+
+        <!-- 编辑和查看 列表 -->
+        <slot name="list">
+            <upload-list
+                :class="{
+                    ...commonClass,
+                    'bri-control-edit': false
+                }"
+                :showMode="showMode"
+                :canEdit="!disabled"
+                :files="curValList"
+                :propsObj="propsObj"
+                :emptyShowVal="emptyShowVal"
+                :isShowEditIcon="isShowEditIcon"
+                @click.native.stop="0"
+                @deleteItem="clickDeteItem"
+                @editItemName="handleEditName"
+            ></upload-list>
+        </slot>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../../mixins/controlMixin.js";
+    import uploadMixin from "./uploadMixin.js";
+    import BriUploadImage from "./BriUploadImage.vue";
+    import uploadList from "./uploadList.vue";
+
+    const prefixCls = "ivu-upload";
+    const imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
+    const documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf", "xmind"];
+    const videoType = ["flv", "rmvb", "mp4", "mvb"];
+    const audioType = ["wma", "mp3", "m4a"];
+    const packageType = ["rar", "zip"];
+    const fileTypes = [
+        ...documentType,
+        ...imageType,
+        ...videoType,
+        ...audioType,
+        ...packageType
+    ];
+
+    export default {
+        name: "BriUpload",
+        mixins: [
+            controlMixin,
+            uploadMixin
+        ],
+        components: {
+            BriUploadImage,
+            uploadList
+        },
+        props: {},
+        data () {
+            return {
+                prefixCls: prefixCls,
+                dragOver: false,
+
+                operationMap: {
+                    upload: {
+                        customIcon: "bico-upload1"
+                    },
+                    add: {
+                        icon: "md-add"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    _fileType: "file", // "file", "image"
+                    _showMode: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在表格字段里的 显示老版
+
+                    _multiple: true,
+                    _useType: "drag",
+                    _maxSize: 1024 * 1024 * 2, // 根据四局要求，限制文件为2G
+                    _format: [],
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj
+                };
+            },
+            subType () {
+                return this.selfPropsObj._fileType;
+            },
+            showMode () {
+                return this.isInTable
+                    ? this.selfPropsObj._inTableStyle === "list" && this.disabled
+                        ? "tableList"
+                        : "inline"
+                    : this.selfPropsObj._showMode;
+            },
+            useType () {
+                return this.selfPropsObj._useType;
+            },
+            format () {
+                return this.selfPropsObj._format;
+            },
+            maxSize () {
+                return this.selfPropsObj._maxSize;
+            },
+            // 限制文件格式
+            accept () {
+                return (this.subType === "image" ? imageType : fileTypes)
+                    .map(type => `.${type}`)
+                    .join();
+            },
+            isShowEditIcon () {
+                // 因为编辑name 需要这三个参数，因此没有这三个参数时不显示此按钮
+                return this.compKey && this.appKey && this.modKey && !!(this.$getHttpPathMap({}).file && this.$getHttpPathMap({}).file.updateFileName);
+            },
+            classes () {
+                return {
+                    [`${prefixCls}`]: true,
+                    [`${prefixCls}-select`]: this.useType === "select",
+                    [`${prefixCls}-drag`]: this.useType === "drag",
+                    [`${prefixCls}-dragOver`]: this.useType === "drag" && this.dragOver,
+                    [`BriUpload-${this.showMode}-wrapper`]: true
+                };
+            }
+        },
+        methods: {
+            clickUpload () {
+                if (!this.disabled) {
+                    this.$refs.input.click();
+                }
+            },
+            clickDeteItem (fileItem, fileIndex) {
+                this.curValList.splice(fileIndex, 1);
+                this.curValList = [...this.curValList];
+            },
+            handleEditName (fileItem) {
+                this.$https({
+                    url: {
+                        ...this.computedUrlModule,
+                        name: "updateFileName"
+                    },
+                    params: fileItem
+                });
+            },
+            successCb (res, data) {
+                if (data.res === 0) {
+                    if (this.multipleMode) {
+                        this.curValList = [
+                            ...this.curValList,
+                            data.data
+                        ];
+                    } else {
+                        this.curValList = [
+                            data.data
+                        ];
+                    }
+                } else {
+                    this.$Message.error({
+                        content: `操作失败！${this.$getMsgText(data.msg)}`,
+                        duration: 4
+                    });
+                }
+            },
+
+            handleChange (e) {
+                if (e.target.files) {
+                    this.dealUpload(e.target.files);
+                    this.$refs.input.value = null;
+                }
+            },
+            handleDrop (e) {
+                this.dragOver = false;
+                this.dealUpload(e.dataTransfer.files);
+            },
+            handlePaste (e) {
+                this.dealUpload(e.clipboardData.files);
+            },
+            dealUpload (files) {
+                if (!this.disabled) {
+                    let postFiles = Array.prototype.slice.call(files);
+                    if (!this.multipleMode) {
+                        postFiles = postFiles.slice(0, 1);
+                    }
+                    postFiles.forEach(fileItem => {
+                        if (
+                            (!this.format.length || this.format.some(item => item.toLocaleLowerCase() === fileItem.name.split(".").pop().toLocaleLowerCase())) &&
+                            (fileItem.size <= this.maxSize * 1024)
+                        ) {
+                            this.handlePost(fileItem);
+                        }
+                    });
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .BriUpload {
+        width: 100%;
+        height: 100%;
+        border: 1px solid @borderColor;
+        border-radius: @borderRadius;
+        background-color: @white;
+        overflow: hidden;
+        position: relative;
+
+        &-old,
+        &-new,
+        &-inline {
+            display: flex;
+
+            &-wrapper {
+                border: none!important;
+                border-radius: 0px !important;
+
+                &:hover {
+                    border: none;
+                }
+            }
+
+            &-add {
+                .dsh-flex-col-center-center();
+                cursor: pointer;
+                position: relative;
+            }
+
+            &-circle {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                margin: auto;
+                border-radius: 50%;
+            }
+        }
+
+        &-old {
+            overflow: hidden;
+
+            &-wrapper {
+                min-width: 120px;
+                height: 100%;
+                margin: 16px 0px 16px 16px;
+            }
+
+            &-add {
+                width: 120px;
+                height: 120px;
+                border: 1px @borderColor dashed;
+                border-radius: @borderRadius;
+                color: @themeColor;
+
+                &:hover {
+                    border-color: @themeColor;
+                    background-color: @theme-focus;
+                }
+            }
+
+            &-circle {
+                width: 50px!important;
+                height: 50px!important;
+                background-color: @inputBg-readonly;
+                color: @themeColor;
+
+                i {
+                    color: @scuess-color;
+                    font-size: 40px;
+                }
+            }
+        }
+
+        &-new,
+        &-inline {
+            &-wrapper {
+                min-width: 32px;
+                height: 32px;
+                line-height: 32px;
+                background-color: @border-readonly;
+            }
+
+            &-add {
+                height: 32px;
+                border: none;
+                border-radius: 0px;
+                background-color: @btn-hover;
+                color: @textColor;
+
+                &:hover {
+                    color: @themeColor;
+                    background-color: @theme-focus;
+                }
+            }
+
+            &-circle {
+                width: 24px!important;
+                height: 24px!important;
+                background-color: #f4f5fa;
+
+                i {
+                    color: @scuess-color;
+                    font-size: 24px;
+                }
+            }
+        }
+
+        &-readonly {
+            border: none;
+            border-radius: 0px;
+            background-color: transparent;
+
+            .uploadList {
+                &-old {
+                    margin: 0px;
+                }
+
+                &-list {
+                    .item {
+                        flex: 0 0 80px;
+                        height: 80px;
+                    }
+                }
+            }
+        }
+
+        &-disabled {
+            .bri-control-disabled();
+
+            .uploadList {
+                &-old {
+                    margin: 0px;
+                }
+
+                &-list {
+                    .item {
+                        flex: 0 0 80px;
+                        height: 80px;
+                    }
+                }
+
+                &-nodata {
+                    color: @placeholder-disabled-color;
+                    text-indent: 7px;
+                    text-align: left;
+                }
+                &-inline-nodata {
+                    color: @placeholder-disabled-color;
+                }
+            }
+        }
+
+        &-unit {
+            .uploadList {
+                &-inline-nodata {
+                    .bri-control-nodata();
+                }
+            }
+        }
+    }
+</style>