bri-components 1.6.6 → 1.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.6",
+    "version": "1.6.8",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",

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

@@ -12,40 +12,47 @@
         :class="{
             [prefixCls]: true,
             'BriUpload': true,
+            [`BriUpload-${showMode}`]: true,
             'BriUpload-disabled': canEdit && disabled,
             'BriUpload-readonly': !canEdit,
             'BriUpload-unit': !canEdit && isInTable,
-            [`BriUpload-${showMode}`]: true,
+            [`control-show-${showStatusMode}${isTagShow ? '-tag' : ''}`]: isDetailShow
         }"
         @click="clickUpload"
-        @drop.prevent="handleDrop"
-        @paste="handlePaste"
+        @drop.prevent="dropCb"
+        @paste="pasteCb"
         @dragover.prevent="dragOver = true"
         @dragleave.prevent="dragOver = false"
     >
-        <!-- 编辑 -->
+        <!-- 上传部分 -->
         <div
-            v-if="!disabled"
-            :class="classes"
+            v-if="!disabled && !(maxNum === 1 && curValList.length)"
+            :class="{
+                [`${prefixCls}`]: true,
+                [`${prefixCls}-select`]: useType === 'select',
+                [`${prefixCls}-drag`]: useType === 'drag',
+                [`${prefixCls}-dragOver`]: useType === 'drag' && dragOver,
+                wrapper: true
+            }"
         >
             <input
                 ref="input"
                 :class="[prefixCls + '-input']"
                 type="file"
-                :accept="accept"
+                :accept="acceptStr"
                 :multiple="multipleMode"
-                :disabled="disabled || percent > 0"
+                :disabled="uploadDisabled"
                 :webkitdirectory="false"
-                @change="handleChange"
+                @change="changeCb"
             >
 
-            <!-- 上传按钮 -->
+            <!-- 按钮 -->
             <slot>
-                <div :class="`BriUpload-${showMode}-add`">
-                    <!-- 上传 -->
+                <div class="add">
+                    <!-- 上传过程 -->
                     <i-circle
                         v-if="percent"
-                        :class="`BriUpload-${showMode}-circle`"
+                        class="add-circle"
                         :percent="percent"
                         :stroke-color="percentColor"
                     >
@@ -54,8 +61,12 @@
                             v-if="Number(percent) === 100"
                             type="ios-checkmark"
                         ></Icon>
+
                         <!-- 上传中 -->
-                        <span v-else-if="showMode === 'old'">
+                        <span
+                            v-else
+                            class="add-circle-title"
+                        >
                             {{ percent }}%
                         </span>
                     </i-circle>
@@ -63,32 +74,36 @@
                     <!-- 未上传 -->
                     <template v-else>
                         <dsh-icons
-                            :list="$getOperationList([subType === 'image' ? 'add' : 'upload'])"
+                            item-class="add-upload-icon"
+                            :list="$getOperationList(['upload'])"
                             @click="clickUpload"
                         ></dsh-icons>
 
-                        <span v-if="showMode !== 'inline'">
-                            点击上传{{ subType === 'image' ? "图片" : "文件" }}
+                        <span
+                            v-if="!showMode.includes('inline')"
+                            class="add-upload-title"
+                        >
+                            点击上传{{ subTypeName }}
                         </span>
                     </template>
                 </div>
             </slot>
         </div>
 
-        <!-- 编辑和查看 列表 -->
-        <slot name="list">
+        <!-- 文件列表 -->
+        <slot
+            v-if="!(maxNum === 1 && !curValList.length)"
+            name="list"
+        >
             <upload-list
-                :class="{
-                    ...commonClass,
-                    'bri-control-edit': false
-                }"
-                :showMode="showMode"
+                class="BriUpload-list"
+                :mode="showMode"
                 :canEdit="!disabled"
                 :files="curValList"
                 :propsObj="propsObj"
-                :emptyShowVal="emptyShowVal"
+                :listPadding="!isInTable ? '16px' : undefined"
                 :isShowEditIcon="isShowEditIcon"
-                @click.native.stop="0"
+                :emptyShowVal="emptyShowVal"
                 @deleteItem="clickDeteItem"
                 @editItemName="handleEditName"
             ></upload-list>
@@ -97,11 +112,11 @@
 </template>
 
 <script>
+    import { fileTypes } from "../../../../data/index.js";
     import controlMixin from "../../mixins/controlMixin.js";
     import uploadMixin from "./uploadMixin.js";
     import BriUploadImage from "./BriUploadImage.vue";
     import uploadList from "./uploadList.vue";
-    import { fileTypes } from "../../../../data/index.js";
 
     export default {
         name: "BriUpload",
@@ -133,129 +148,172 @@
             selfPropsObj () {
                 return {
                     _fileType: "file", // "file", "image", "video"
-                    _showMode: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在表格字段里的 显示老版
+                    _accept: [], // 限制只能传那些文件类型，_accept有值的话，还会根据_fileType包含的类型再过滤下
+                    _maxNum: undefined, // 上传文件的最大数量
 
-                    _multiple: true, // 默认多选
+                    _inTableStyle: "fold", // 单元格内的展示方式
                     _useType: "drag", // "drag", "select"
                     _maxSize: 1024 * 1024 * 2, // 根据四局要求，限制文件为2G
-                    _format: [],
-                    _accept: [], // 限制只能传那些文件类型，_accept有值的话，_fileType就没用了
 
                     ...this.propsObj,
-                    ...this.commonDealPropsObj
+                    ...this.commonDealPropsObj,
+
+                    // 默认多选
+                    _multiple: typeof this.propsObj._maxNum === "number"
+                        ? this.propsObj._maxNum !== 1
+                        : true
                 };
             },
-            subType () {
-                return this.selfPropsObj._fileType || "file";
-            },
-            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;
+            maxNum () {
+                return this.selfPropsObj._maxNum || 0; // 可以为0，为0代表数量随便选
             },
             maxSize () {
                 return this.selfPropsObj._maxSize;
             },
+            accepts () {
+                return this.selfPropsObj._accept;
+            },
+            subType () {
+                const imageFormats = this.getTypeFormats("image");
+                const videoFormats = this.getTypeFormats("video");
+
+                return ["file"].includes(this.selfPropsObj._fileType)
+                    ? this.accepts.length
+                        ? this.accepts.every(format => imageFormats.includes(format))
+                            ? "image"
+                            : this.accepts.every(format => videoFormats.includes(format))
+                                ? "video"
+                                : "file"
+                        : "file"
+                    : this.selfPropsObj._fileType;
+            },
+            subTypeName () {
+                return this.subType === "image"
+                    ? "图片"
+                    : this.subType === "video"
+                        ? "视频"
+                        : "文件";
+            },
             // 限制文件格式
-            accept () {
-                const types = this.selfPropsObj._accept.length
-                    ? this.selfPropsObj._accept
-                    : (
-                        this.subType === "file"
-                            ? fileTypes
-                            : fileTypes.filter(fileTypeItem => fileTypeItem.type === this.subType)
-                    ).map(fileTypeItem => fileTypeItem._key);
-
-                return types.map(type => `.${type}`).join();
+            acceptFormats () {
+                const allFormats = this.getTypeFormats("file");
+                const subTypeHasFormats = this.getTypeFormats(this.subType);
+
+                return this.accepts.length
+                    // _fileTyp为非“file”时处理：如果_accept传了，需要过滤保证严谨，不在fileTypes.json里的类型，直接留下；在json里的，属于subType所包含的文件类型留下，其他的过滤掉（排除误传的影响）
+                    ? !["file"].includes(this.selfPropsObj._fileType)
+                        ? this.accepts.filter(format => !allFormats.includes(format) || subTypeHasFormats.includes(format))
+                        : this.accepts
+                    : subTypeHasFormats;
+            },
+            acceptStr () {
+                return this.acceptFormats.map(format => `.${format}`).join();
+            },
+            showMode () {
+                return this.isHeightAuto && this.maxNum === 1 && !this.isInTable
+                    ? "single"
+                    : this.isInTable
+                        ? this.selfPropsObj._inTableStyle === "list" && this.disabled
+                            ? this.subType === "image" ? "imageinline" : "file"
+                            : this.subType === "image" ? "imageinline" : "fileinline"
+                        : this.isHeightAuto
+                            ? this.subType === "image" ? "image" : "file"
+                            : this.subType === "image" ? "imageinline" : "fileinline";
+            },
+
+            uploadDisabled () {
+                return this.disabled || this.percent > 0;
             },
             isShowEditIcon () {
                 // 因为编辑name 需要这三个参数，因此没有这三个参数时不显示此按钮
                 return this.compKey && this.appKey && this.modKey &&
                     !!(this.$getHttpPathMap({}).file && this.$getHttpPathMap({}).file.updateFileName);
-            },
-            classes () {
-                return {
-                    [`${this.prefixCls}`]: true,
-                    [`${this.prefixCls}-select`]: this.useType === "select",
-                    [`${this.prefixCls}-drag`]: this.useType === "drag",
-                    [`${this.prefixCls}-dragOver`]: this.useType === "drag" && this.dragOver,
-                    [`BriUpload-${this.showMode}-wrapper`]: true
-                };
             }
         },
         created () {},
         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.finalUrlModule,
-                        name: "updateFileName"
-                    },
-                    params: fileItem
+                this.$Modal.confirm({
+                    title: "提示",
+                    content: `确定删除${fileItem.name || "此文件"}吗？`,
+                    onOk: () => {
+                        this.curValList.splice(fileIndex, 1);
+                        this.curValList = [...this.curValList];
+                    }
                 });
             },
-            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
-                    });
+            clickUpload () {
+                if (!this.uploadDisabled) {
+                    this.$refs.input.click();
                 }
             },
 
-            handleChange (event) {
+            changeCb (event) {
                 if (event.target.files) {
                     this.dealUpload(event.target.files);
                     this.$refs.input.value = null;
                 }
             },
-            handleDrop (event) {
+            dropCb (event) {
                 this.dragOver = false;
                 this.dealUpload(event.dataTransfer.files);
             },
-            handlePaste (event) {
+            pasteCb (event) {
                 this.dealUpload(event.clipboardData.files);
             },
             dealUpload (files) {
-                if (!this.disabled) {
-                    let postFiles = this.multipleMode ? [...files] : [...files].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)
-                        ) {
+                if (!this.uploadDisabled) {
+                    [...files].slice(-this.maxNum).forEach(fileItem => {
+                        if (!this.acceptFormats.some(fileFormat => fileFormat.toLocaleLowerCase() === fileItem.name.split(".").pop().toLocaleLowerCase())) {
+                            this.$Message.error({
+                                content: `“${fileItem.name}”文件格式不符合要求！`,
+                                duration: 3
+                            });
+                        }
+                        else if (fileItem.size > this.maxSize * 1024) {
+                            this.$Message.error({
+                                content: `“${fileItem.name}”文件大小不符合要求！`,
+                                duration: 3
+                            });
+                        }
+                        else {
                             this.handlePost(fileItem);
                         }
                     });
                 }
+            },
+            successCb (res, data) {
+                if (data.res === 0) {
+                    this.curValList = [
+                        ...this.curValList,
+                        data.data
+                    ].slice(-this.maxNum);
+                } else {
+                    this.$Message.error({
+                        content: `操作失败！${this.$getMsgText(data.msg)}`,
+                        duration: 3
+                    });
+                }
+            },
+
+            handleEditName (fileItem) {
+                this.$https({
+                    url: {
+                        ...this.finalUrlModule,
+                        name: "updateFileName"
+                    },
+                    params: fileItem
+                });
+            },
+            getTypeFormats (subType = "file") {
+                return subType === "file"
+                    ? fileTypes.map(fileTypeItem => fileTypeItem._key)
+                    : fileTypes
+                        .filter(fileTypeItem => fileTypeItem.type === subType)
+                        .map(fileTypeItem => fileTypeItem._key);
             }
         }
     };
@@ -270,103 +328,146 @@
         background-color: @white;
         overflow: hidden;
         position: relative;
+        display: flex;
+        flex-direction: row;
+
+        .wrapper {
+            border: none!important;
+            border-radius: 0px !important;
 
-        &-old,
-        &-new,
-        &-inline {
-            display: flex;
+            .add {
+                .dsh-flex-col-center-center();
+                cursor: pointer;
+                position: relative;
 
-            &-wrapper {
-                border: none!important;
-                border-radius: 0px !important;
+                &-circle {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    bottom: 0;
+                    right: 0;
+                    margin: auto;
+                    border-radius: 50%;
+                }
 
                 &:hover {
-                    border: none;
+                    color: @themeColor;
+                    background-color: @theme-focus;
                 }
             }
 
-            &-add {
-                .dsh-flex-col-center-center();
-                cursor: pointer;
-                position: relative;
+            &:hover {
+                border: none;
             }
+        }
 
-            &-circle {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-                margin: auto;
-                border-radius: 50%;
-            }
+        &-list {
+            flex: 1;
+            min-width: 0px;
         }
 
-        &-old {
-            overflow: hidden;
+        &-single {
+            .wrapper {
+                width: 100%;
 
-            &-wrapper {
-                min-width: 120px;
-                height: 100%;
-                margin: 16px 0px 16px 16px;
-            }
+                .add {
+                    width: 100%;
+                    height: 100%;
+                    color: @themeColor;
 
-            &-add {
-                width: 120px;
-                height: 120px;
-                border: 1px @borderColor dashed;
-                border-radius: @borderRadius;
-                color: @themeColor;
+                    &-circle {
+                        width: 60px!important;
+                        height: 60px!important;
+                        background-color: @inputBg-readonly;
+                        color: @themeColor;
 
-                &:hover {
-                    border-color: @themeColor;
-                    background-color: @theme-focus;
+                        &-title {
+                            font-size: 18px;
+                        }
+
+                        i {
+                            color: @scuess-color;
+                            font-size: 50px;
+                        }
+                    }
+
+                    &-upload {
+                        &-title {
+                            margin-top: 5px;
+                            font-size: 16px;
+                        }
+                    }
                 }
             }
+        }
+
+        &-image,
+        &-file {
+            .wrapper {
+                width: 136px;
+                padding: 16px 0px 16px 16px;
+
+                .add {
+                    width: 100%;
+                    height: 100%;
+                    border: 1px @borderColor dashed;
+                    border-radius: @borderRadius;
+                    color: @themeColor;
 
-            &-circle {
-                width: 50px!important;
-                height: 50px!important;
-                background-color: @inputBg-readonly;
-                color: @themeColor;
+                    &-circle {
+                        width: 50px!important;
+                        height: 50px!important;
+                        background-color: @inputBg-readonly;
+                        color: @themeColor;
 
-                i {
-                    color: @scuess-color;
-                    font-size: 40px;
+                        &-title {
+                            font-size: 16px;
+                        }
+
+                        i {
+                            color: @scuess-color;
+                            font-size: 40px;
+                        }
+                    }
+
+                    &:hover {
+                        border: 1px @themeColor dashed;
+                    }
                 }
             }
         }
 
-        &-new,
-        &-inline {
-            &-wrapper {
-                min-width: 32px;
+        &-imageinline,
+        &-fileinline {
+            .wrapper {
+                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;
+                .add {
+                    width: 100%;
+                    height: 100%;
+                    border: none;
+                    border-radius: 0px;
+                    background-color: @btn-hover;
+                    color: @textColor;
+
+                    &-circle {
+                        width: 24px!important;
+                        height: 24px!important;
+                        background-color: #f4f5fa;
+
+                        &-title {
+                            display: none; // 圈太小，字超出了，先不显示
+                            font-size: 12px;
+                        }
 
-                i {
-                    color: @scuess-color;
-                    font-size: 24px;
+                        i {
+                            color: @scuess-color;
+                            font-size: 24px;
+                        }
+                    }
                 }
             }
         }
@@ -375,42 +476,14 @@
             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 {
+                &-nodata,
+                &-nodata-inline {
                     color: @placeholder-disabled-color;
                 }
             }
@@ -418,10 +491,24 @@
 
         &-unit {
             .uploadList {
-                &-inline-nodata {
+                &-nodata,
+                &-nodata-inline {
                     .bri-control-nodata();
                 }
             }
         }
     }
 </style>
+<style lang="less">
+    .BriUpload {
+        &-single {
+            .add {
+                &-upload {
+                    &-icon {
+                        font-size: 32px!important;
+                    }
+                }
+            }
+        }
+    }
+</style>