bri-components 1.6.1 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.1",
+    "version": "1.6.3",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -32,7 +32,7 @@
     "dependencies": {
         "ali-oss": "^6.13.1",
         "axios": "^0.23.0",
-        "bri-datas": "^1.4.7",
+        "bri-datas": "^1.5.4",
         "jshint": "^2.12.0",
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",

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

@@ -23,7 +23,6 @@
         @dragover.prevent="dragOver = true"
         @dragleave.prevent="dragOver = false"
     >
-
         <!-- 编辑 -->
         <div
             v-if="!disabled"
@@ -102,20 +101,7 @@
     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
-    ];
+    import { fileTypes } from "../../../../data/index.js";
 
     export default {
         name: "BriUpload",
@@ -130,7 +116,7 @@
         props: {},
         data () {
             return {
-                prefixCls: prefixCls,
+                prefixCls: "ivu-upload",
                 dragOver: false,
 
                 operationMap: {
@@ -146,20 +132,21 @@
         computed: {
             selfPropsObj () {
                 return {
-                    _fileType: "file", // "file", "image"
+                    _fileType: "file", // "file", "image", "video"
                     _showMode: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在表格字段里的 显示老版
 
-                    _multiple: true,
-                    _useType: "drag",
+                    _multiple: true, // 默认多选
+                    _useType: "drag", // "drag", "select"
                     _maxSize: 1024 * 1024 * 2, // 根据四局要求，限制文件为2G
                     _format: [],
+                    _accept: [], // 限制只能传那些文件类型，_accept有值的话，_fileType就没用了
 
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
             subType () {
-                return this.selfPropsObj._fileType;
+                return this.selfPropsObj._fileType || "file";
             },
             showMode () {
                 return this.isInTable
@@ -179,24 +166,32 @@
             },
             // 限制文件格式
             accept () {
-                return (this.subType === "image" ? imageType : fileTypes)
-                    .map(type => `.${type}`)
-                    .join();
+                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();
             },
             isShowEditIcon () {
                 // 因为编辑name 需要这三个参数，因此没有这三个参数时不显示此按钮
-                return this.compKey && this.appKey && this.modKey && !!(this.$getHttpPathMap({}).file && this.$getHttpPathMap({}).file.updateFileName);
+                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,
+                    [`${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) {
@@ -251,10 +246,7 @@
             },
             dealUpload (files) {
                 if (!this.disabled) {
-                    let postFiles = Array.prototype.slice.call(files);
-                    if (!this.multipleMode) {
-                        postFiles = postFiles.slice(0, 1);
-                    }
+                    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())) &&

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

@@ -10,10 +10,10 @@
             <div
                 v-if="files.length"
                 ref="viewerImage"
-                :class="{
-                    'uploadList-list': true,
-                    [`uploadList-list-${subType}`]: true
-                }"
+                :class="[
+                    'uploadList-list',
+                    `uploadList-list-${subType}`
+                ]"
             >
                 <div
                     v-for="(fileItem, fileIndex) in files"
@@ -39,7 +39,7 @@
                     </div>
 
                     <!-- 展示名称 -->
-                    <p class="item-name-title">{{ fileItem.name }}</p>
+                    <p class="item-name">{{ fileItem.name }}</p>
 
                     <!-- 图标 -->
                     <dsh-icons
@@ -54,7 +54,7 @@
             <!-- 无值 -->
             <div
                 v-else
-                class="uploadList-nodata"
+                class="uploadList-old-odata"
             >
                 <span>{{ emptyShowVal }}</span>
             </div>
@@ -95,7 +95,7 @@
                     </div>
 
                     <!-- 展示名称 -->
-                    <p class="item-name-title">{{ fileItem.name }}</p>
+                    <p class="item-name">{{ fileItem.name }}</p>
 
                     <!-- 图标 -->
                     <dsh-icons
@@ -128,11 +128,11 @@
                     <dsh-dropdown
                         :list="files"
                         trigger="hover"
-                        class="uploadList-fileList"
+                        class="uploadList-inline-dropdown"
                     >
                         <div :class="{
-                            'uploadList-fileList-fileName': true,
-                            'uploadList-fileList-fileName-edit': canEdit
+                            'uploadList-inline-dropdown-fileName': true,
+                            'uploadList-inline-dropdown-fileName-edit': canEdit
                         }">
                             {{ files.length }}个
                             <Icon
@@ -144,49 +144,32 @@
                         <div
                             slot="dropdownItem"
                             slot-scope="{ dropdownItem, dropdownIndex }"
-                            class="uploadList-fileList-fileItem"
+                            class="uploadList-inline-dropdown-item"
                         >
                             <img
                                 v-if="dropdownItem.mimetype.includes('image')"
                                 :data-original="dropdownItem.url"
                                 :src="$imageResize(dropdownItem.url, imageResizeConfig)"
                                 :alt="dropdownItem.name"
-                                class="fileItem-img"
+                                class="item-img"
                             >
                             <img
                                 v-else
                                 :src="getFileImage(dropdownItem)"
                                 :alt="dropdownItem.name"
-                                class="fileItem-img"
+                                class="item-img"
                             >
 
-                            <p class="fileItem-name-title">{{ dropdownItem.name }}</p>
+                            <p class="item-name">{{ dropdownItem.name }}</p>
 
                             <dsh-icons
-                                class="fileItem-action"
-                                item-class="fileItem-action-icon"
+                                class="item-action"
+                                item-class="item-action-icon"
                                 :list="$getOperationList(getBtns(dropdownItem))"
                                 @click="$dispatchEvent($event, dropdownItem, dropdownIndex)"
                             ></dsh-icons>
                         </div>
                     </dsh-dropdown>
-
-                    <div
-                        v-for="(fileItem) in files"
-                        :key="fileItem._key || fileItem._id"
-                        :class="{
-                            'item': subType === 'image',
-                            [`item-${subType}`]: true
-                        }"
-                    >
-                        <img
-                            v-if="fileItem.mimetype.includes('image')"
-                            :data-original="fileItem.url"
-                            :src="$imageResize(fileItem.url, imageResizeConfig)"
-                            :alt="fileItem.name"
-                            style="display: none;"
-                        >
-                    </div>
                 </template>
 
                 <!-- 无值 -->
@@ -256,14 +239,14 @@
             // DshVideoPlayer
         },
         props: {
-            showMode: {
-                type: String,
-                default: "old" // inline, old, normal
-            },
             canEdit: {
                 type: Boolean,
                 default: true
             },
+            showMode: {
+                type: String,
+                default: "old" // old, tableList, inline
+            },
             files: {
                 type: Array,
                 default () {
@@ -330,6 +313,7 @@
                     operations.canDownload.customIcon = "bri-xiazai";
                     operations.canPreview.customIcon = "bri-keshi";
                 }
+
                 return this.canEdit
                     ? this.$categoryMapToMap(
                         operations,
@@ -475,29 +459,11 @@
     };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
     .uploadList {
         width: 100%;
         overflow: auto;
 
-        // 普通文件
-        &-old {
-            margin: 16px;
-        }
-
-        &-nodata {
-            width: 100%;
-            height: 100%;
-            text-align: center;
-            line-height: 120px;
-            color: @placeholderColor;
-            white-space: nowrap;
-
-            span {
-                margin-left: 5px;
-            }
-        }
-
         &-list {
             display: flex;
             flex-wrap: nowrap;
@@ -515,12 +481,6 @@
                 justify-content: space-between;
                 position: relative;
 
-                &:hover {
-                    .item-action {
-                        display: flex !important;
-                    }
-                }
-
                 &-show {
                     display: flex;
                     overflow: hidden;
@@ -536,17 +496,11 @@
                 }
 
                 &-name {
-                    flex: 1;
-                    display: flex;
-                    max-height: 32px;
-
-                    &-title {
-                        padding: 0 8px;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        color: @themeColor;
-                    }
+                    padding: 0 8px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    color: @themeColor;
                 }
 
                 &-action {
@@ -567,11 +521,18 @@
                         color: #fff;
                     }
                 }
+
+                &:hover {
+                    .item-action {
+                        display: flex !important;
+                    }
+                }
             }
 
             // file 模式
             &-file {
                 flex-direction: column;
+
                 .item-file {
                     flex: 0 0 100%;
                     height: auto;
@@ -583,32 +544,57 @@
                     margin: 0px;
                     padding: 2px 0;
                     background: transparent;
-                    &:hover {
-                        background: #f4f5fa;
-                    }
-                    .item-show {
-                        flex: 0 0 22px;
-                        min-height: 20px;
-                        img {
-                            width: 22px;
-                            height: 22px;
+
+                    .item {
+                        &-show {
+                            flex: 0 0 22px;
+                            min-height: 20px;
+                            img {
+                                width: 22px;
+                                height: 22px;
+                            }
                         }
-                    }
-                    .item-name-title {
-                        color: @textColor;
-                        flex: 1;
-                        text-align: left;
-                    }
-                    .item-action {
-                        position: static;
-                        display: flex !important;
-                        background: transparent;
-                        white-space: nowrap;
-                        &-icon {
-                            color: @contentColor;
-                            width: 16px;
+
+                        &-name {
+                            flex: 1;
+                            text-align: left;
+                            color: @textColor;
+                        }
+
+                        &-action {
+                            position: static;
+                            display: flex !important;
+                            background: transparent;
+                            white-space: nowrap;
+
+                            &-icon {
+                                color: @contentColor;
+                                width: 16px;
+                            }
                         }
                     }
+
+                    &:hover {
+                        background: #f4f5fa;
+                    }
+                }
+            }
+        }
+
+        // 普通文件
+        &-old {
+            margin: 16px;
+
+            &-nodata {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                line-height: 120px;
+                color: @placeholderColor;
+                white-space: nowrap;
+
+                span {
+                    margin-left: 5px;
                 }
             }
         }
@@ -617,6 +603,55 @@
             height: 32px;
             line-height: 32px;
 
+            &-dropdown {
+                width: 100%;
+
+                &-fileName {
+                    cursor: pointer;
+
+                    &-edit {
+                        padding: 0 8px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+                }
+
+                &-item {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .item {
+                        &-img {
+                            width: 22px;
+                            height: 22px;
+                        }
+
+                        &-name {
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            margin: 0 8px;
+                            flex: 1;
+                            text-align: left;
+                        }
+
+                        &-action {
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-end;
+
+                            &-icon {
+                                width: 16px;
+                                color: @contentColor;
+                            }
+                        }
+                    }
+                }
+            }
+
             &-list {
                 width: 100%;
                 height: 100%;
@@ -686,53 +721,5 @@
                 color: @placeholderColor;
             }
         }
-
-        &-fileList {
-            width: 100%;
-
-            &-fileName {
-                cursor: pointer;
-
-                &-edit {
-                    padding: 0 8px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-            }
-        }
-    }
-
-    .DshDropdown {
-        .uploadList-fileList-fileItem {
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .fileItem {
-                &-img {
-                    width: 22px;
-                    height: 22px;
-                }
-                &-name-title {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    margin: 0 8px;
-                    flex: 1;
-                    text-align: left;
-                }
-                &-action {
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                    &-icon {
-                        width: 16px;
-                        color: @contentColor;
-                    }
-                }
-            }
-
-        }
     }
 </style>

package/src/components/controls/base/BriUpload/uploadMixin.js

@@ -50,9 +50,7 @@ export default {
         handlePost (file, callback) {
             this.$https({
                 url: this.computedUrlModule,
-                params: {
-                    token: this.$route.query && this.$route.query.token
-                },
+                params: {},
                 callback: res => {
                     this.inputType = "file";
                     if (res.ossType === "ali-oss") {
@@ -79,19 +77,16 @@ export default {
         },
 
         localUpload (file, res, callback) {
-            let fileBody = {
-                groupKey: this.computedGroupKey,
-                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-            };
-
-            const url = `${res.ossHost}${res.uploadPath}`;
             let formData = new FormData();
             formData.append("file_stream", file);
 
-            axios.post(url, formData, {
+            axios.post(`${res.ossHost}${res.uploadPath}`, formData, {
                 headers: {
                     filetoken: res.filetoken,
-                    filebody: JSON.stringify(fileBody)
+                    filebody: JSON.stringify({
+                        groupKey: this.computedGroupKey,
+                        archiveKey: this.archiveKey[this.archiveKey.length - 1]
+                    })
                 },
                 onUploadProgress: progressEvent => {
                     this.inProgress(Number((progressEvent.loaded / progressEvent.total * 100).toFixed(1)));
@@ -100,14 +95,16 @@ export default {
                 this.uploadSuccess = true;
                 this.percent = 100;
                 setTimeout(() => {
-                    this.percent = 0;
                     this.uploadSuccess = false;
+                    this.percent = 0;
                 }, 500);
+
                 this.successCb && this.successCb(response, response.data, file);
                 callback && callback(response.data);
             }).catch(error => {
-                this.percent = 0;
                 this.uploadSuccess = false;
+                this.percent = 0;
+
                 this.handleError && this.handleError(error, {}, file);
                 callback && callback(error);
             });
@@ -247,7 +244,6 @@ export default {
                 callbackBodyType: "application/json",
                 callbackBody: this.transferCallBody(callbackBody)
             };
-
             let newOss = {
                 ...res.ossConfig,
                 refreshSTSToken: async () => {
@@ -275,14 +271,16 @@ export default {
                 this.uploadSuccess = true;
                 this.percent = 100;
                 setTimeout(() => {
-                    this.percent = 0;
                     this.uploadSuccess = false;
+                    this.percent = 0;
                 }, 500);
+
                 this.successCb && this.successCb(response, response.data, file);
                 callback && callback(response.data);
             }).catch((err, response) => {
-                this.percent = 0;
                 this.uploadSuccess = false;
+                this.percent = 0;
+
                 this.handleError && this.handleError(err, response, file);
                 callback && callback(err);
             });
@@ -308,7 +306,6 @@ export default {
                 callbackBodyType: "application/json",
                 callbackBody: this.transferCallBody(callbackBody)
             };
-
             let newOss = {
                 ...res.ossConfig,
                 refreshSTSToken: async () => {
@@ -333,17 +330,19 @@ export default {
                     "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
                 }
             }).then(response => {
-                this.percent = 100;
                 this.uploadSuccess = true;
+                this.percent = 100;
                 setTimeout(() => {
-                    this.percent = 0;
                     this.uploadSuccess = false;
+                    this.percent = 0;
                 }, 500);
+
                 this.successCb && this.successCb(response, response.data, file);
                 callback && callback(response.data);
             }).catch((err, response) => {
-                this.percent = 0;
                 this.uploadSuccess = false;
+                this.percent = 0;
+
                 this.handleError && this.handleError(err, response, file);
                 callback && callback(err);
             });
@@ -377,17 +376,17 @@ export default {
             return JSON.stringify(newObj);
         },
         // base64转换
-        base64Encode (input) {
+        base64Encode (str) {
+            str = this.utf8Encode(str);
             let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-
             let output = "";
             let chr1, chr2, chr3, enc1, enc2, enc3, enc4;
             let i = 0;
-            input = this.utf8Encode(input);
-            while (i < input.length) {
-                chr1 = input.charCodeAt(i++);
-                chr2 = input.charCodeAt(i++);
-                chr3 = input.charCodeAt(i++);
+
+            while (i < str.length) {
+                chr1 = str.charCodeAt(i++);
+                chr2 = str.charCodeAt(i++);
+                chr3 = str.charCodeAt(i++);
                 enc1 = chr1 >> 2;
                 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                 enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
@@ -401,6 +400,7 @@ export default {
                     _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
                     _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
             }
+
             return output;
         },
         utf8Encode (str) {
@@ -420,6 +420,7 @@ export default {
                 }
 
             }
+
             return utftext;
         },
         // base64转blob
@@ -430,13 +431,12 @@ export default {
             } else {
                 byteString = unescape(base64Data.split(",")[1]);
             }
+
             // 获取文件类型
             const mimeString = base64Data.split(";")[0].split(":")[1]; // mime类型
-
             // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
             // let arrayBuffer = new ArrayBuffer(byteString.length) // 创建缓冲数组
             // let uintArr = new Uint8Array(arrayBuffer) // 创建视图
-
             const uintArr = new Uint8Array(byteString.length); // 创建视图
 
             for (let i = 0; i < byteString.length; i += 1) {
@@ -446,6 +446,7 @@ export default {
             const blob = new Blob([uintArr], {
                 type: mimeString
             });
+
             // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
             return blob;
         }

package/src/data/index.js

@@ -1,4 +1,5 @@
 export {
-    resourceData
+    resourceData,
+    fileTypes
     // regionDataMap, userIndustryData, dynDateData
 } from "bri-datas";