bri-components 1.2.23 → 1.2.24

package/package.json

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

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

@@ -6,20 +6,19 @@
         @change="change"
     ></bri-upload-image>
 
+    <!-- 上传 -->
     <div
         v-else
-        :class="[
-            prefixCls,
-            `BriUpload-${showType}`,
-            {
-                'BriUpload': true,
-                'BriUpload-disabled': canEdit && !finalCanEdit,
-                'BriUpload-readonly': !canEdit,
-                'BriUpload-unit': !canEdit && isUnitShow
-            }
-        ]"
+        :class="{
+            [prefixCls]: true,
+            'BriUpload': true,
+            'BriUpload-disabled': canEdit && !finalCanEdit,
+            'BriUpload-readonly': !canEdit,
+            'BriUpload-unit': !canEdit && isInTable,
+            [`BriUpload-${showType}`]: true,
+        }"
     >
-        <!-- 上传 -->
+        <!-- 编辑 -->
         <div
             v-if="finalCanEdit"
             :class="classes"
@@ -35,43 +34,47 @@
                 type="file"
                 :accept="accept"
                 :multiple="multipleMode"
+                :disabled="!finalCanEdit || percent > 0"
                 :webkitdirectory="false"
-                :disabled="finalCanEdit && percent > 0"
                 @change="handleChange"
             >
 
             <slot>
                 <div :class="`BriUpload-${showType}-imageadd`">
+                    <!-- 上传 -->
                     <i-circle
                         v-if="percent"
                         :class="`BriUpload-${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>
                         <dsh-icons
-                            :list="$getOperationList([fileType === 'image' ? 'add' : 'upload'])"
+                            :list="$getOperationList([subType === 'image' ? 'add' : 'upload'])"
                             @click="clickUpload"
                         ></dsh-icons>
 
                         <span v-if="showType !== 'inline'">
-                            点击上传{{ fileType === 'image' ? "图片" : "文件" }}
+                            点击上传{{ subType === 'image' ? "图片" : "文件" }}
                         </span>
                     </template>
                 </div>
             </slot>
         </div>
 
-        <!-- 列表 -->
+        <!-- 编辑和查看 列表 -->
         <slot name="list">
             <upload-list
                 :canEdit="finalCanEdit"
@@ -92,6 +95,19 @@
     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"];
+    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: [
@@ -107,18 +123,17 @@
                 type: String,
                 default: "drag"
             },
-            format: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             maxSize: {
-                type: Number
+                type: Number,
+                default: 1024
             }
         },
         data () {
             return {
+                prefixCls: prefixCls,
+                dragOver: false,
+                tempIndex: 1,
+
                 operationMap: {
                     upload: {
                         customIcon: "bico-upload1"
@@ -126,73 +141,69 @@
                     add: {
                         icon: "md-add"
                     }
-                },
-                prefixCls: prefixCls,
-                dragOver: false,
-                tempIndex: 1
+                }
             };
         },
         computed: {
-            showType () {
-                // 宽度不为100%,级联表格或内部表格中显示新版
-                return this.propsObj.showType
-                    ? this.propsObj.showType
-                    : ((!this.isFullRow || this.isInTable) ? "inline" : "old");
+            selfPropsObj () {
+                return {
+                    _fileType: "file",
+                    _showType: this.isFullRow && !this.isInTable ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
+                    // _multiple: true,
+                    _format: [],
+
+                    ...this.propsObj,
+                    ...this.commonDealPropsObj,
+
+                    _multiple: true // TODO: 解决后端返回的配置数据里，内部表格里的上传字段有脏属性_multiple且为false，早晚要删除这行用上面的那行
+                };
             },
-            fileType () {
-                // 宽度不为100%,级联表格或内部表格中显示新版
-                return this.propsObj._fileType;
+            subType () {
+                return this.selfPropsObj._fileType;
             },
-            multipleMode () {
-                return this.propsObj._multiple !== false;
+            showType () {
+                return this.selfPropsObj._showType;
+            },
+            format () {
+                return this.selfPropsObj._format;
             },
 
+            // 限制文件格式
             accept () {
-                const documentType = ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf"];
-                const imageType = ["jpg", "png", "gif", "jpeg", "tiff", "swf"];
-                const videoType = ["flv", "rmvb", "mp4", "mvb"];
-                const audioType = ["wma", "mp3", "m4a"];
-                const packageType = ["rar", "zip"];
-
-                // 限制文件格式
-                return (
-                    this.fileType === "image"
-                        ? imageType
-                        : [
-                            ...documentType,
-                            ...imageType,
-                            ...videoType,
-                            ...audioType,
-                            ...packageType
-                        ]
-                ).map(item => `.${item}`).join();
+                return (this.subType === "image" ? imageType : fileTypes)
+                    .map(type => `.${type}`)
+                    .join();
             },
             classes () {
-                return [
-                    `${prefixCls}`,
-                    {
-                        [`${prefixCls}-select`]: this.type === "select",
-                        [`${prefixCls}-drag`]: this.type === "drag",
-                        [`${prefixCls}-dragOver`]: this.type === "drag" && this.dragOver,
-                        [`BriUpload-${this.showType}-wrapper`]: true
-                    }
-                ];
+                return {
+                    [`${prefixCls}`]: true,
+                    [`${prefixCls}-select`]: this.type === "select",
+                    [`${prefixCls}-drag`]: this.type === "drag",
+                    [`${prefixCls}-dragOver`]: this.type === "drag" && this.dragOver,
+                    [`BriUpload-${this.showType}-wrapper`]: true
+                };
             }
         },
         methods: {
             clickUpload () {
                 this.$refs.input.click();
             },
-            clickDeteItem (fileItem) {
-                this.curValList.splice(this.curValList.indexOf(fileItem), 1);
+            clickDeteItem (fileItem, fileIndex) {
+                this.curValList.splice(fileIndex, 1);
                 this.curValList = [...this.curValList];
             },
             successCb (res, data) {
                 if (data.res === 0) {
-                    this.curValList = [
-                        ...this.curValList,
-                        data.data
-                    ];
+                    if (this.multipleMode) {
+                        this.curValList = [
+                            ...this.curValList,
+                            data.data
+                        ];
+                    } else {
+                        this.curValList = [
+                            data.data
+                        ];
+                    }
                 } else {
                     this.$Message.error({
                         content: `操作失败！${this.$getMsgText(data.msg)}`,
@@ -223,12 +234,9 @@
 
                     postFiles.forEach(fileItem => {
                         if (
-                            (this.format.length && !this.format.some(item => item.toLocaleLowerCase() === fileItem.name.split(".").pop().toLocaleLowerCase())) ||
-                            (this.maxSize && (fileItem.size > this.maxSize * 1024))
+                            !this.format.every(item => item.toLocaleLowerCase() !== fileItem.name.split(".").pop().toLocaleLowerCase()) &&
+                            (fileItem.size <= this.maxSize * 1024)
                         ) {
-                            return false;
-                        } else {
-                            // 上传接口
                             this.handlePost(fileItem);
                         }
                     });

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

@@ -12,14 +12,14 @@
                 class="uploadList-list"
             >
                 <div
-                    v-for="fileItem in files"
+                    v-for="(fileItem, fileIndex) in files"
                     :key="fileItem._key || fileItem._id"
                     class="item"
                 >
                     <!-- 展示图 -->
                     <div class="item-show">
                         <img
-                            v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
+                            v-if="fileItem.mimetype.includes('image')"
                             :data-original="fileItem.url"
                             :src="$imageResize(fileItem.url, imageResizeConfig)"
                             :alt="fileItem.name"
@@ -32,23 +32,14 @@
                     </div>
 
                     <!-- 展示名称 -->
-                    <bri-tooltip
-                        v-if="propsObj._fileType != 'image'"
-                        class="item-name"
-                        :content="fileItem.name"
-                        :transfer="true"
-                        placement="top-start"
-                        max-width="300"
-                    >
-                        <p class="item-name-title">{{ fileItem.name }}</p>
-                    </bri-tooltip>
+                    <p class="item-name-title">{{ fileItem.name }}</p>
 
                     <!-- 图标 -->
                     <dsh-icons
                         class="item-action"
                         item-class="item-action-icon"
-                        :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1)))"
-                        @click="$dispatchEvent($event,fileItem)"
+                        :list="$getOperationList(getBtns(fileItem))"
+                        @click="$dispatchEvent($event, fileItem, fileIndex)"
                     ></dsh-icons>
                 </div>
             </div>
@@ -63,7 +54,7 @@
             </div>
         </template>
 
-        <!-- 自定义新的展示方式 -->
+        <!-- 新展示方式 -->
         <template v-else>
             <!-- 有值 -->
             <div
@@ -72,12 +63,12 @@
                 class="uploadList-inline-list"
             >
                 <div
-                    v-for="fileItem in files"
+                    v-for="(fileItem, fileIndex) in files"
                     :key="fileItem.url"
                     class="item"
                 >
                     <img
-                        v-if="propsObj._fileType === 'image' || (fileItem.mimetype.indexOf('image') > -1)"
+                        v-if="fileItem.mimetype.includes('image')"
                         :data-original="fileItem.url"
                         :src="$imageResize(fileItem.url, imageResizeConfig)"
                         :alt="fileItem.name"
@@ -91,8 +82,8 @@
                     <dsh-icons
                         class="item-action"
                         item-class="item-action-icon"
-                        :list="$getOperationList(getBtns((fileItem.mimetype.indexOf('image') > -1) || (fileItem.mimetype.indexOf('application/pdf') > -1) || (fileItem.mimetype=='text/plain')))"
-                        @click="$dispatchEvent($event,fileItem)"
+                        :list="$getOperationList(getBtns(fileItem))"
+                        @click="$dispatchEvent($event, fileItem, fileIndex)"
                     ></dsh-icons>
                 </div>
             </div>
@@ -138,91 +129,83 @@
             }
         },
         computed: {
-            operationMap () {
+            imageResizeConfig () {
+                return {};
+            },
+            noText () {
+                return this.canEdit
+                    ? `未上传${this.propsObj._fileType === "image" ? "图片" : "文件"}`
+                    : this.emptyShowVal;
+            },
+
+            allOperationMap () {
                 return {
-                    remove: {
+                    canDelete: {
                         name: "删除",
+                        type: "canDelete",
                         icon: "ios-trash-outline",
                         size: "16",
-                        event: "clickDeleteItem",
-                        canShow: this.canEdit
+                        event: "clickDeleteItem"
                     },
-                    download: {
+                    canDownload: {
                         name: "下载",
+                        type: "canDownload",
                         icon: "ios-cloud-download-outline",
                         size: "14",
-                        event: "handleDownload",
-                        canShow: true
+                        event: "handleDownload"
                     },
-                    preview: {
+                    canPreview: {
                         name: "预览",
+                        type: "canPreview",
                         icon: "ios-eye-outline",
                         size: "22",
-                        type: "updateColor",
-                        event: "clickPreview",
-                        canShow: undefined
+                        event: "clickPreview"
                     }
                 };
             },
-            imageResizeConfig () {
-                return {};
-            },
-            noText () {
-                if (this.files && this.files.length) {
-                    return "";
-                } else {
-                    if (this.canEdit) {
-                        return `未上传${this.propsObj._fileType === "image" ? "图片" : "文件"} `;
-                    } else {
-                        return this.emptyShowVal;
-                    }
-                }
+            operationMap () {
+                return this.canEdit
+                    ? this.allOperationMap
+                    : this.$categoryMapToMap(
+                        this.allOperationMap,
+                        undefined,
+                        ["canDelete"]
+                );
             }
         },
         data () {
             return {};
         },
         methods: {
-            getBtns (canPreview) {
-                this.operationMap.preview.canShow = canPreview;
-                return Object.keys(this.operationMap).filter(attr => this.operationMap[attr].canShow);
-            },
-
             // 点击删除某项
-            clickDeleteItem (operationItem, fileItem) {
-                this.$emit("deleteItem", fileItem);
+            clickDeleteItem (operationItem, fileItem, fileIndex) {
+                this.$emit("deleteItem", fileItem, fileIndex);
             },
             // 点击文件预览 -file服务器的数据列表
-            clickPreview (operationItem, fileItem) {
-                if (this.propsObj._fileType === "image") {
-                    this.previewImage(fileItem.url);
-                } else if (fileItem.mimetype.indexOf("image") > -1) {
-                    this.previewImage(fileItem.url);
+            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);
                 }
             },
-            // 图片预览
-            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 (operationItem, fileItem) {
+            // 接口 -下载
+            handleDownload (operationItem, fileItem, fileIndex) {
                 axios
                     .get(fileItem.url, {
                         responseType: "blob"
@@ -243,55 +226,34 @@
                         }
                 });
             },
-
-            // format (fileItem) {
-            //     const format = fileItem.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) {
+            getFileImage (fileItem) {
+                if (!fileItem.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) {
+                } else if (fileItem.mimetype.includes("image")) {
+                    return fileItem.url; // 压缩图片：将图片最长的边限制在100像素，短边按比例处理
+                } else if (fileItem.mimetype.includes("text/plain")) {
                     return this.$imageSrcMap.fileType.text;
-                } else if (item.mimetype.indexOf("application/pdf") > -1) {
+                } else if (fileItem.mimetype.includes("application/pdf")) {
                     return this.$imageSrcMap.fileType.pdf;
-                } else if (item.mimetype.indexOf("wordprocessingml.document") > -1 || item.mimetype.indexOf("application/msword") > -1) {
+                } else if (fileItem.mimetype.includes("wordprocessingml.document") || fileItem.mimetype.includes("application/msword")) {
                     return this.$imageSrcMap.fileType.doc;
-                } else if (item.mimetype.indexOf("presentationml.presentation") > -1 || item.mimetype.indexOf("application/vnd.ms-powerpoint") > -1) {
+                } else if (fileItem.mimetype.includes("presentationml.presentation") || fileItem.mimetype.includes("application/vnd.ms-powerpoint")) {
                     return this.$imageSrcMap.fileType.ppt;
-                } else if (item.mimetype.indexOf("spreadsheetml.sheet") > -1) {
+                } else if (fileItem.mimetype.includes("spreadsheetml.sheet")) {
                     return this.$imageSrcMap.fileType.excel;
-                } else if (item.mimetype.indexOf("application/x-zip-compressed") > -1) {
+                } else if (fileItem.mimetype.includes("application/x-zip-compressed")) {
                     return this.$imageSrcMap.fileType.zip;
-                } else if (item.mimetype.indexOf("application/x-rar-compressed") > -1) {
+                } else if (fileItem.mimetype.includes("application/x-rar-compressed")) {
                     return this.$imageSrcMap.fileType.rar;
                 } else {
                     return this.$imageSrcMap.fileType.other;
                 }
+            },
+            getBtns (fileItem) {
+                return ["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type))
+                    ? undefined
+                    : ["canDelete", "canDownload"];
             }
         }
     };

package/src/components/controls/controlMixin.js

@@ -84,7 +84,7 @@ export default {
             return this.canEdit && (this.propsObj.canEdit == undefined ? true : this.propsObj.canEdit);
         },
         multipleMode () {
-            return !!this.propsObj._multiple;
+            return this.selfPropsObj ? !!this.selfPropsObj._multiple : !!this.propsObj._multiple;
         },
         commonDealPropsObj () {
             const selectControlTypes = ["date", "switch", "select", "checkbox", "file", "region", "regions", "cascader", "cascaders", "coordinates", "users", "departments"];

package/src/components/small/DshDropdown.vue

@@ -124,7 +124,7 @@
             },
             trigger: {
                 type: String,
-                default: "hover"
+                default: "click"
             },
             transfer: {
                 type: Boolean,

package/src/components/unit/DshFormUnit.vue

@@ -79,7 +79,7 @@
             <slot>
                 <component
                     ref="control"
-                    :is="componentNameMap[formItem._type] || 'DshUndeveloped'"
+                    :is="curComponentName"
                     :canEdit="canEdit"
                     :value="formData"
                     :propsObj="formItem"

package/src/components/unit/DshListUnit.vue

@@ -15,7 +15,7 @@
 
         <template v-else>
             <component
-                :is="componentNameMap[formItem._type]"
+                :is="curComponentName"
                 :canEdit="canEdit"
                 :value="formData"
                 :propsObj="{

package/src/components/unit/unitMixin.js

@@ -21,11 +21,13 @@ export default {
         }
     },
     data () {
-        return {
-            componentNameMap
-        };
+        return {};
+    },
+    computed: {
+        curComponentName () {
+            return componentNameMap[this.formItem._type] || "DshUndeveloped";
+        }
     },
-    computed: {},
     created () { },
     methods: {
         change (...params) {

package/src/styles/components/controls/base/DshEditor.less

@@ -1,6 +1,10 @@
 .DshEditor {
     width: 100%;
+
     #show {
+        white-space: pre-wrap;
+        word-break: break-word;
+
         p {
             font-size: 14px !important;
         }
@@ -24,7 +28,7 @@
         min-height: 32px;
         padding: 4px 7px;
         border-radius: @borderRadius;
-        
+
         &.bri-control-nodata {
             line-height: 24px;
         }
@@ -38,13 +42,14 @@
         &-toolbar {
             margin-top: 5px;
         }
-    
+
         &-text {
             min-height: 130px;
+
             ul li {
                 list-style: disc;
             }
-    
+
             ol li {
                 list-style: auto;
             }
@@ -62,5 +67,9 @@
 
     &-show {
         #show();
+
+        &-nodata {
+            .bri-control-nodata();
+        }
     }
 }