bri-components 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "bri-components",
-    "version": "1.6.0",
+    "version": "1.6.2",
     "author": "dengshanghui",
     "description": "a component lib for vue project",
     "main": "src/index.js",
@@ -37,6 +37,8 @@
         "jsonlint": "^1.6.3",
         "minio": "7.1.0",
         "stream": "^0.0.2",
+        "video.js": "^8.23.3",
+        "videojs-contrib-hls": "^5.15.0",
         "view-design": "4.7.0",
         "viewerjs": "^1.10.2",
         "vue-codemirror": "^4.0.6",

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

@@ -23,7 +23,6 @@
         @dragover.prevent="dragOver = true"
         @dragleave.prevent="dragOver = false"
     >
-
         <!-- 编辑 -->
         <div
             v-if="!disabled"
@@ -89,6 +88,7 @@
                 :propsObj="propsObj"
                 :emptyShowVal="emptyShowVal"
                 :isShowEditIcon="isShowEditIcon"
+                @click.native.stop="0"
                 @deleteItem="clickDeteItem"
                 @editItemName="handleEditName"
             ></upload-list>
@@ -103,18 +103,18 @@
     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
-    ];
+    const fileTypesMap = {
+        document: ["txt", "doc", "xls", "ppt", "docx", "xlsx", "pptx", "pdf", "xmind"],
+        image: ["jpg", "png", "gif", "jpeg", "tiff", "swf"],
+        video: ["flv", "rmvb", "mp4", "mvb"],
+        audio: ["wma", "mp3", "m4a"],
+        // text: ["log", "csv", "html", "json"],
+        package: ["rar", "zip"]
+    };
+    const allFileTypes = Object.entries(fileTypesMap).reduce((arr, fileTypeArr, fileTypeIndex, map) => [
+        ...arr,
+        ...fileTypeArr[1]
+    ], []);
 
     export default {
         name: "BriUpload",
@@ -145,24 +145,25 @@
         computed: {
             selfPropsObj () {
                 return {
-                    _fileType: "file", // "file", "image"
+                    _fileType: "file", // "file", "image", "video"
                     _showMode: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在表格字段里的 显示老版
 
                     _multiple: true,
                     _useType: "drag",
                     _maxSize: 1024 * 1024 * 2, // 根据四局要求，限制文件为2G
                     _format: [],
+                    _accept: [],
 
                     ...this.propsObj,
                     ...this.commonDealPropsObj
                 };
             },
             subType () {
-                return this.selfPropsObj._fileType;
+                return this.selfPropsObj._fileType || "file";
             },
             showMode () {
                 return this.isInTable
-                    ? this.selfPropsObj._inTableStyle == "list" && this.disabled
+                    ? this.selfPropsObj._inTableStyle === "list" && this.disabled
                         ? "tableList"
                         : "inline"
                     : this.selfPropsObj._showMode;
@@ -178,9 +179,13 @@
             },
             // 限制文件格式
             accept () {
-                return (this.subType === "image" ? imageType : fileTypes)
-                    .map(type => `.${type}`)
-                    .join();
+                const types = this.selfPropsObj._accept && this.selfPropsObj._accept.length
+                    ? this.selfPropsObj._accept
+                    : this.subType === "file"
+                        ? allFileTypes
+                        : fileTypesMap[this.subType];
+
+                return types.map(type => `.${type}`).join();
             },
             isShowEditIcon () {
                 // 因为编辑name 需要这三个参数，因此没有这三个参数时不显示此按钮
@@ -250,10 +255,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/BriUploadImage.vue

@@ -1,23 +1,26 @@
 <template>
     <div class="BriUploadImage">
         <div
-            class="BriUploadImage-set"
             ref="viewerImage"
+            class="BriUploadImage-set"
         >
             <div
-                v-if="value[propsObj._key] || propsObj._default || percent"
-                :class="['BriUploadImage-set-img', isAvatar ? 'BriUploadImage-set-avatar' : '']"
+                v-if="curVal || propsObj._default || percent"
+                :class="{
+                    'BriUploadImage-set-img': true,
+                    'BriUploadImage-set-avatar': isAvatar
+                }"
                 :style="{
-                    backgroundImage: `url(${$imageResize(value[propsObj._key] || propsObj._default, imageResizeConfig)})`,
+                    backgroundImage: `url(${$imageResize(curVal || propsObj._default, imageResizeConfig)})`,
                     borderRadius: propsObj.radius ? '50%' : ''
                 }"
             >
                 <img
-                    :data-original="value[propsObj._key]"
+                    :data-original="curVal"
                     style="display:none"
                 >
                 <div
-                    v-if="value[propsObj._key] && propsObj._canAction"
+                    v-if="curVal && canAction"
                     class="BriUploadImage-set-action"
                 >
                     <Icon
@@ -33,6 +36,7 @@
                         @click.native="handleRemove"
                     ></Icon>
                 </div>
+
                 <!-- 上传进度 -->
                 <div
                     v-if="percent"
@@ -50,8 +54,8 @@
                         <span v-else>{{ percent }}%</span>
                     </i-circle>
                 </div>
-
             </div>
+
             <div class="wrap">
                 <Button type="default">点击上传</Button>
                 <input
@@ -72,8 +76,8 @@
             @on-visible-change="visibleChange"
         >
             <dsh-cropper
-                class="BriUploadImage-cropper"
                 ref="cropper"
+                class="BriUploadImage-cropper"
                 :src="imgSrc"
                 alt="Source Image"
                 :cropmove="cropImage"
@@ -99,17 +103,32 @@
         ],
         components: {},
         props: {
-            value: Object,
-            propsObj: Object,
-            // 上传的是阿里云还是本地
-            requestOssType: {
-                type: String,
-                default: "default"
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
             },
+
             isAvatar: {
                 type: Boolean,
                 default: false
             },
+            // 上传的是阿里云还是本地
+            requestOssType: {
+                type: String,
+                default: "default",
+                validator (val) {
+                    // "default"代表阿里云
+                    return ["default", "local"].includes(val);
+                }
+            },
             // 阿里云上传方式
             ossType: {
                 type: String,
@@ -118,126 +137,143 @@
         },
         data () {
             return {
+                inputType: "file",
+
+                // 头像
+                avatarModal: false,
+                imgSrc: "",
+                cropImg: "",
+
                 operationMap: {
                     cancel: {
                         name: "取消",
                         type: "cancel",
                         btnType: "cancel",
-                        event: "cancelAvatarModal"
+                        event: "closeAvatarModal"
                     },
                     confirm: {
                         name: "确认",
                         type: "confirm",
                         btnType: "primary",
-                        event: "photoSubmit"
+                        event: "submitCropImage"
                     }
-                },
-                // 头像
-                avatarModal: false,
-                inputType: "file",
-                imgSrc: "",
-                cropImg: ""
+                }
             };
         },
         computed: {
-            modalPropsObj () {
+            selfPropsObj () {
                 return {
-                    title: this.propsObj._name || "修改头像",
-                    class: "bri-modal",
-                    width: 450
+                    ...this.propsObj
                 };
             },
+            controlKey () {
+                return this.selfPropsObj._key;
+            },
+            controlName () {
+                return this.selfPropsObj._name;
+            },
+            // 使用操作图标
+            canAction () {
+                return this.selfPropsObj._canAction;
+            },
             imageResizeConfig () {
-                return this.propsObj._imageResizeConfig || {
+                return this.selfPropsObj._imageResizeConfig || {
                     m: "fixed",
                     w: 100,
                     h: 100
                 };
             },
             finalRequestOssType () {
-                return this.propsObj._requestOssType || this.requestOssType || "default";
+                return this.selfPropsObj._requestOssType || this.requestOssType;
             },
             acceptType () {
-                return this.propsObj._acceptType || "*";
-            }
-        },
-        created () {
-        },
-        methods: {
-            // 打开修改头像
-            openAvatar () {
-                this.avatarModal = true;
+                return this.selfPropsObj._acceptType || "*";
             },
-            // 关闭修改头像
-            cancelAvatarModal () {
-                this.avatarModal = false;
-                // this.inputType = "file";
+
+            modalPropsObj () {
+                return {
+                    title: this.controlName || "修改头像",
+                    class: "bri-modal",
+                    width: 450
+                };
             },
-            // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
-            visibleChange (bool) {
-                if (!bool) {
-                    this.inputType = "file";
+
+            curVal: {
+                get () {
+                    return this.value[this.controlKey];
+                },
+                set (val) {
+                    this.value[this.controlKey] = val;
                 }
-            },
+            }
+        },
+        created () {},
+        methods: {
             setImage (e) {
-                if (e.target.files.length != 0) {
+                if (e.target.files.length) {
                     const file = e.target.files[0];
                     if (!file.type.includes("image/")) {
                         this.$Message.error("请选择一张图片");
-                        return;
                     }
-                    if (typeof FileReader === "function") {
+                    else if (typeof FileReader !== "function") {
+                        this.$Message.error("Sorry, FileReader API not supported");
+                    }
+                    else {
                         const reader = new FileReader();
-                        if (this.propsObj._kind == "uploadImage" && !this.propsObj.cropper) {
+                        if (this.propsObj._kind === "uploadImage" && !this.propsObj.cropper) {
                             reader.onload = (event) => {
-                                let data = event.target.result;
                                 this.inputType = "text";
-                                if (this.finalRequestOssType === "local") {
-                                    // base64转文件
-                                    const imgFile = this.dataURLtoFile(data, "");
-                                    this.handlePost(imgFile);
-                                } else {
-                                    data = data.split(",")[1];
-                                    let dataBuffer = Buffer.from(data, "base64");
-                                    this.handlePost(dataBuffer);
-                                }
+                                this.dealPostImage(event.target.result); // event.target.result是base64格式
                             };
                             reader.readAsDataURL(file);
-                        } else {
+                        }
+                        // 使用裁剪
+                        else {
                             reader.onload = (event) => {
-                                this.imgSrc = event.target.result;
-                                // rebuild cropperjs with the updated source
-                                this.$refs.cropper.replace(event.target.result);
                                 this.inputType = "text";
+                                this.imgSrc = event.target.result;
+                                this.$refs.cropper.replace(event.target.result); // event.target.result是base64格式
                             };
                             reader.readAsDataURL(file);
-                            this.avatarModal = true;
+
+                            this.openAvatarModal();
                         }
-                    } else {
-                        alert("Sorry, FileReader API not supported");
                     }
                 }
             },
+            // 提交裁剪后的图片
+            submitCropImage () {
+                this.cropImage();
+                this.dealPostImage(this.cropImg);
+
+                this.closeAvatarModal();
+            },
+
+            // 获取裁剪的图片
             cropImage () {
                 // get image data for post processing, e.g. upload or setting image src
-                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL(); // base64格式
             },
-            // 获取裁剪后的图片，转成file
-            photoSubmit () {
-                this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
+            // 处理图片的提交
+            dealPostImage (data) {
+                // local好像是minio在用
                 if (this.finalRequestOssType === "local") {
                     // base64转文件
-                    const imgFile = this.dataURLtoFile(this.cropImg, "");
+                    // {
+                    //     lastModified: 1752065308269
+                    //     name: ".png"
+                    //     size: 528557
+                    //     type: "image/png"
+                    //     webkitRelativePath: ""
+                    // }
+                    const imgFile = this.dataURLtoFile(data, "");
                     this.handlePost(imgFile);
+                    // console.dir(imgFile); // object类型
                 } else {
-                    let data = this.cropImg;
-                    data = data.split(",")[1];
-
-                    let dataBuffer = Buffer.from(data, "base64");
+                    const dataBuffer = Buffer.from(data.split(",")[1], "base64");
                     this.handlePost(dataBuffer);
+                    // console.dir(dataBuffer); // object类型
                 }
-
-                this.cancelAvatarModal();
             },
             // 将图片Base64 转成文件
             dataURLtoFile (dataurl, filename) {
@@ -251,15 +287,17 @@
                 while (n--) {
                     u8arr[n] = bstr.charCodeAt(n);
                 }
-                return new File([u8arr], `${filename}.${extension}`, {type: mime});
+                return new File([u8arr], `${filename}.${extension}`, { type: mime });
             },
+
             successCb (response, res) {
-                this.value[this.propsObj._key] = res.data.downloadUrl;
+                this.curVal = res.data.downloadUrl;
                 this.$emit("change", res);
             },
             handleError (err) {
                 alert(err);
             },
+
             // 点击文件预览
             handlePreview (file) {
                 let viewerImage = this.$refs.viewerImage;
@@ -276,11 +314,26 @@
             // 点击文件删除 - fileList服务器的数据列表
             handleRemove (file) {
                 this.inputType = "file"; // 删除后可以重新上传
-                this.value[this.propsObj._key] = "";
+                this.curVal = "";
                 this.change(this.value);
             },
             change (...params) {
                 this.$emit("change", ...params);
+            },
+
+            // 打开修改头像
+            openAvatarModal () {
+                this.avatarModal = true;
+            },
+            // 关闭修改头像
+            closeAvatarModal () {
+                this.avatarModal = false;
+            },
+            // 头像模态框状态变化，关闭后改变input框类型，保证上传能够连续上传同一张图片
+            visibleChange (bool) {
+                if (!bool) {
+                    this.inputType = "file";
+                }
             }
         }
     };

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

@@ -247,9 +247,14 @@
 <script>
     import Viewer from "viewerjs";
     import axios from "axios";
+    // import DshVideoPlayer from "../../../other/DshVideoPlayer.vue";
 
     export default {
         name: "uploadList",
+        mixins: [],
+        components: {
+            // DshVideoPlayer
+        },
         props: {
             showMode: {
                 type: String,
@@ -426,6 +431,7 @@
                         }
                 });
             },
+
             // 获取不同类型文件的图片
             getFileImage (fileItem) {
                 if (!fileItem.mimetype) {
@@ -451,12 +457,17 @@
                 }
             },
             getBtns (fileItem) {
-                return ["image", "application/pdf", "text/plain"].some(type => fileItem.mimetype.includes(type)) ||
-                    fileItem.mimetype.includes("wordprocessingml.document") ||
-                    fileItem.mimetype.includes("application/msword") ||
-                    fileItem.mimetype.includes("presentationml.presentation") ||
-                    fileItem.mimetype.includes("application/vnd.ms-powerpoint") ||
-                    fileItem.mimetype.includes("spreadsheetml.sheet")
+                return [
+                    "image", "video/mp4",
+                    "text/plain",
+                    // "text/csv", // 好像是便签，如果预览会直接下载
+                    "application/pdf", "wordprocessingml.document", "spreadsheetml.sheet", // excel
+                    "application/octet-stream", // 日志 .log
+                    // "application/zip",
+                    "application/msword",
+                    "application/vnd.ms-powerpoint",
+                    "presentationml.presentation"
+                ].some(type => fileItem.mimetype.includes(type))
                     ? undefined
                     : ["canDelete", "canEdit", "canDownload"];
             }

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

@@ -43,36 +43,39 @@ export default {
             return this.propsObj._archiveKey || [];
         },
         percentColor () {
-            if (Number(this.percent) === 100) {
-                return "#5cb85c";
-            } else {
-                return "#6090ed";
-            }
+            return Number(this.percent) === 100 ? "#5cb85c" : "#6090ed";
         }
     },
     methods: {
         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") {
                         // 上传到阿里云res
-                        this[this.computedOssType](file, res, callback);
-                    } else if (res.ossType === "local") {
+                        if (this.computedOssType === "binaryMultipartUpload") {
+                            this.binaryMultipartUpload(file, res, callback);
+                        }
+                        else if (this.computedOssType === "multipartUpload") {
+                            this.multipartUpload(file, res, callback);
+                        }
+                    }
+                    else if (res.ossType === "local") {
                         this.localUpload(file, res, callback);
-                    } else if (res.ossType === "minio") {
+                    }
+                    else if (res.ossType === "minio") {
                         this.minioUpload(file, res, callback);
-                    } else {
+                    }
+                    else {
                         console.log(`请开发这种类型‘${res.ossType}’的上传模式`);
                     }
 
                 }
             });
         },
+
         localUpload (file, res, callback) {
             let fileBody = {
                 groupKey: this.computedGroupKey,
@@ -107,92 +110,6 @@ export default {
                 callback && callback(error);
             });
         },
-        multipartUpload (file, res, callback) {
-            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
-            let remoteName = `${this.randomTimeStampFn()}.${type}`;
-            let officeFileDefaultType = "";
-            if (!file.type) {
-                switch (type) {
-                case "xls":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "xlsx":
-                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
-                    break;
-                case "doc":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "docx":
-                    officeFileDefaultType = "application/msword";
-                    break;
-                case "ppt":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                case "pptx":
-                    officeFileDefaultType = "application/vnd.ms-powerpoint";
-                    break;
-                default:
-                    officeFileDefaultType = "";
-                }
-            }
-
-            // 上传成功的回调参数
-            let callbackBody = {
-                name: file.name,
-                mimetype: file.type || officeFileDefaultType,
-                size: file.size,
-                path: remoteName,
-                bucket: res.ossConfig.bucket,
-                filetoken: res.filetoken,
-                groupKey: this.computedGroupKey,
-                archiveKey: this.archiveKey[this.archiveKey.length - 1]
-            };
-
-            let ossCallback = {
-                callbackUrl: res.ossHost + res.confirmPath,
-                callbackBodyType: "application/json",
-                callbackBody: this.transferCallBody(callbackBody)
-            };
-
-            let newOss = {
-                ...res.ossConfig,
-                refreshSTSToken: async () => {
-                    // 向您搭建的STS服务获取临时访问凭证。
-                    return {
-                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
-                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
-                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
-                    };
-                },
-                // 刷新临时访问凭证的时间间隔，单位为毫秒。
-                refreshSTSTokenInterval: 3600 * 1000
-            };
-
-            new Oss(newOss).multipartUpload(remoteName, file, {
-                progress: (percentage) => {
-                    this.inProgress(Number((percentage * 100).toFixed(1)));
-                    this.handleProgress && this.handleProgress(percentage, file);
-                },
-                headers: {
-                    "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
-                    "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
-                }
-            }).then(response => {
-                this.uploadSuccess = true;
-                this.percent = 100;
-                setTimeout(() => {
-                    this.percent = 0;
-                    this.uploadSuccess = false;
-                }, 500);
-                this.successCb && this.successCb(response, response.data, file);
-                callback && callback(response.data);
-            }).catch((err, response) => {
-                this.percent = 0;
-                this.uploadSuccess = false;
-                this.handleError && this.handleError(err, response, file);
-                callback && callback(err);
-            });
-        },
         minioUpload (file, res, callback) {
             let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
             let remoteName = `${this.randomTimeStampFn()}.${type}`;
@@ -282,6 +199,92 @@ export default {
                 };
             };
         },
+        multipartUpload (file, res, callback) {
+            let type = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
+            let remoteName = `${this.randomTimeStampFn()}.${type}`;
+            let officeFileDefaultType = "";
+            if (!file.type) {
+                switch (type) {
+                case "xls":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "xlsx":
+                    officeFileDefaultType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+                    break;
+                case "doc":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "docx":
+                    officeFileDefaultType = "application/msword";
+                    break;
+                case "ppt":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                case "pptx":
+                    officeFileDefaultType = "application/vnd.ms-powerpoint";
+                    break;
+                default:
+                    officeFileDefaultType = "";
+                }
+            }
+
+            // 上传成功的回调参数
+            let callbackBody = {
+                name: file.name,
+                mimetype: file.type || officeFileDefaultType,
+                size: file.size,
+                path: remoteName,
+                bucket: res.ossConfig.bucket,
+                filetoken: res.filetoken,
+                groupKey: this.computedGroupKey,
+                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+            };
+
+            let ossCallback = {
+                callbackUrl: res.ossHost + res.confirmPath,
+                callbackBodyType: "application/json",
+                callbackBody: this.transferCallBody(callbackBody)
+            };
+
+            let newOss = {
+                ...res.ossConfig,
+                refreshSTSToken: async () => {
+                    // 向您搭建的STS服务获取临时访问凭证。
+                    return {
+                        accessKeyId: res.ossConfig.accessKeyId, // 自己账户的accessKeyId或临时秘钥
+                        accessKeySecret: res.ossConfig.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
+                        stsToken: res.ossConfig.stsToken //  从STS服务获取的安全令牌（SecurityToken）。
+                    };
+                },
+                // 刷新临时访问凭证的时间间隔，单位为毫秒。
+                refreshSTSTokenInterval: 3600 * 1000
+            };
+
+            new Oss(newOss).multipartUpload(remoteName, file, {
+                progress: (percentage) => {
+                    this.inProgress(Number((percentage * 100).toFixed(1)));
+                    this.handleProgress && this.handleProgress(percentage, file);
+                },
+                headers: {
+                    "x-oss-callback": this.base64Encode(JSON.stringify(ossCallback)),
+                    "Content-Disposition": type === "pdf" ? `inline;filename=${encodeURI(file.name)}` : `attachment;filename=${encodeURI(file.name)}`
+                }
+            }).then(response => {
+                this.uploadSuccess = true;
+                this.percent = 100;
+                setTimeout(() => {
+                    this.percent = 0;
+                    this.uploadSuccess = false;
+                }, 500);
+                this.successCb && this.successCb(response, response.data, file);
+                callback && callback(response.data);
+            }).catch((err, response) => {
+                this.percent = 0;
+                this.uploadSuccess = false;
+                this.handleError && this.handleError(err, response, file);
+                callback && callback(err);
+            });
+        },
         // bri-upload-image 用的是这种方式
         binaryMultipartUpload (file, res, callback) {
             let type = "jpg";
@@ -342,14 +345,16 @@ export default {
                 this.handleError && this.handleError(err, response, file);
                 callback && callback(err);
             });
-
         },
+
+        // 处理上传进度
         inProgress (percent) {
             if (percent === 100 && !this.uploadSuccess) {
                 this.percent = 99.9;
             } else {
                 this.percent = percent;
             }
+
             if (this.percent >= 100) {
                 this.percent = 100;
                 setTimeout(() => {

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

@@ -170,7 +170,9 @@
             {{ emptyShowVal }}
         </div>
     </div>
-    <div v-else-if="propsObj._enterType === 'calculate'"
+
+    <div
+        v-else-if="propsObj._enterType === 'calculate'"
         class="DshCoordinates-show"
     >
         <span :class="{'nodata': !showVal}">{{ showVal || '暂无内容' }}</span>

package/src/components/controls/base/DshNumber/BriInputNumber/BriInputNumber.vue

@@ -319,7 +319,7 @@
                 }
 
                 // 处理最大值最小值
-                const {min, max} = this;
+                const { min, max } = this;
                 if (val !== null) {
                     if (val > max) {
                         val = max;

package/src/components/controls/base/DshNumber/BriInputNumber/utils/assist.js

@@ -76,7 +76,7 @@ export function getStyle (element, styleName) {
 function firstUpperCase (str) {
     return str.toString()[0].toUpperCase() + str.toString().slice(1);
 }
-export {firstUpperCase};
+export { firstUpperCase };
 
 // Warn
 export function warnProp (component, prop, correctType, wrongType) {
@@ -127,7 +127,7 @@ function deepCopy (data) {
     return o;
 }
 
-export {deepCopy};
+export { deepCopy };
 
 // scrollTop animation
 export function scrollTop (el, from = 0, to, duration = 500, endCallback) {
@@ -181,7 +181,7 @@ function findComponentUpward (context, componentName, componentNames) {
     }
     return parent;
 }
-export {findComponentUpward};
+export { findComponentUpward };
 
 // Find component downward
 export function findComponentDownward (context, componentName) {
@@ -311,8 +311,8 @@ export function setMatchMedia () {
             return {
                 media: mediaQuery,
                 matches: false,
-                on () {},
-                off () {}
+                on () { },
+                off () { }
             };
         };
         window.matchMedia = window.matchMedia || matchMediaPolyfill;

package/src/components/controls/senior/selectDepartments.vue

@@ -159,7 +159,6 @@
 <script>
     import userAndDepartMixin from "../mixins/userAndDepartMixin.js";
     import BriTreeItem from "../../list/BriTreeItem.vue";
-    import BriCard from "../../list/BriCard.vue";
 
     export default {
         name: "selectDepartments",
@@ -167,8 +166,7 @@
             userAndDepartMixin
         ],
         components: {
-            BriTreeItem,
-            BriCard
+            BriTreeItem
         },
         props: {},
         data () {

package/src/components/controls/senior/selectUsers/departMenu.vue

@@ -39,7 +39,10 @@
                         :type="getIcon(depart)"
                         @click.stop="toggleChildren(depart)"
                     />
-                    <span v-else style="margin-right:1px"></span>
+                    <span
+                        v-else
+                        style="margin-right:1px"
+                    ></span>
                     <Icon
                         v-if="useIcon"
                         custom="bico-font bri-qiye bico-qiye"
@@ -199,7 +202,7 @@
                 this.$emit("showAddModal", parent);
             },
             deleteDepart (current) {
-                this.departSelected = {_key: "noDepart"};
+                this.departSelected = { _key: "noDepart" };
                 this.$emit("deleteDepart", current);
             },
             // 提示删除

package/src/components/list/BriTable.vue

@@ -119,7 +119,7 @@
                     headerCellClass: () => {
                         return "bri-table-th";
                     },
-                    bodyCellClass: ({rowIndex}) => {
+                    bodyCellClass: ({ rowIndex }) => {
                         return "bri-table-td";
                     },
                     ...(this.propsObj.cellStyleOption || {})

package/src/components/list/BriTree.vue

@@ -374,7 +374,7 @@
                                     placeholder: "请输入节点名称",
                                     size: "small"
                                 },
-                                directives: [{name: "focus"}],
+                                directives: [{ name: "focus" }],
                                 style: {
                                     width: "200px"
                                 },
@@ -433,7 +433,7 @@
             handleUp (data) {
                 const index = this.treeData.findIndex(item => item._key === data._key);
                 if (index > 0) {
-                    const prevData = {...this.treeData[index - 1]};
+                    const prevData = { ...this.treeData[index - 1] };
                     this.treeData.splice(index - 1, 1);
                     this.treeData.splice(index, 0, prevData);
                     this.onChange();
@@ -442,7 +442,7 @@
             handleDown (data) {
                 const index = this.treeData.findIndex(item => item._key === data._key);
                 if (index < this.treeData.length - 1) {
-                    const nextData = {...this.treeData[index]};
+                    const nextData = { ...this.treeData[index] };
                     this.treeData.splice(index, 1);
                     this.treeData.splice(index + 1, 0, nextData);
                     this.onChange();

package/src/components/list/DshFlatTable.vue

@@ -212,7 +212,6 @@
 <script>
     import tableBaseMixin from "./mixins/tableBaseMixin.js";
     import DshFlatTableMixin from "./mixins/DshFlatTableMixin.js";
-    import DshDivider from "../controls/base/DshDivider.vue";
 
     export default {
         name: "DshFlatTable",
@@ -220,9 +219,7 @@
             tableBaseMixin,
             DshFlatTableMixin
         ],
-        components: {
-            DshDivider
-        },
+        components: {},
         props: {},
         data () {
             return {};

package/src/components/other/BriGantt.vue

@@ -710,7 +710,7 @@
             },
             // 绑定同步滚动
             handleScroll (el, scrollList) {
-                scrollList.forEach(({ref, direction} = item) => {
+                scrollList.forEach(({ ref, direction } = item) => {
                     this.$refs[ref] && (this.$refs[ref][direction] = el.target[direction]);
                 });
             },

package/src/components/other/DshVideoPlayer.vue

@@ -0,0 +1,184 @@
+<template>
+    <div class="video-container">
+        <video
+            ref="videoPlayer"
+            id="videoPlayer"
+            class="video-js vjs-big-play-centered"
+            controls
+            preload="auto"
+            width="100%"
+            height="100%"
+        >
+            <!-- <source
+                :src="src"
+                type="application/x-mpegURL"
+            /> -->
+        </video>
+
+        <!-- <div v-else>
+            <video
+                id="video"
+                width="640"
+                height="360"
+                poster="/video/cover.png"
+                controls
+                autoplay
+                loop
+                preload="auto"
+                playsinline="true"
+                webkit-playsinline="true"
+                x5-video-player-type="h5"
+                x5-video-player-fullscreen="true"
+                x5-video-orientation="portraint"
+                οnclick="play()"
+            >
+                <source
+                    :src="attachmentLink"
+                    type="video/mp4"
+                >
+                <source
+                    src="/video/text.ogg"
+                    type="video/ogg; codecs=dirac, speex"
+                >
+
+                <div class="fallback">
+                    <p>You must have an HTML5 capable browser.</p>
+                </div>
+            </video>
+        </div> -->
+    </div>
+</template>
+
+<script>
+    import videojs from "video.js"; // 视频播放器插件
+    import "video.js/dist/video-js.css";
+    import "videojs-contrib-hls"; // 播放hls流插件
+
+    export default {
+        name: "DshVideoPlayer",
+        props: {
+            // 默认mp4
+            videoType: {
+                type: String
+            },
+            src: {
+                type: String,
+                required: true
+            },
+            options: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        data () {
+            return {
+                player: null
+                // attachmentLink: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8"
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007102.m3u8" // 十二师治超站门口
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007101.m3u8" // 十二师治超站称重位
+                // attachmentLink: "http://10.233.0.231:801/gs/66322263001320007128.m3u8" // 石火山隧道
+                // attachmentLink: "http://staging.bridata.com:6203/api/ossfile/apaas-local/56a2725229d6e59440f77ce47dbd67ab.mp4"
+                // attachmentLink: "http://staging.bridata.com:6203/api/ossfile/apaas-local/6f9f0f4a42be671a47cc31343aef9a20.mp4"
+            };
+        },
+        computed: {
+            sourceType () {
+                return this.videoType === "m3u8"
+                    ? "application/x-mpegURL" // 告诉videojs,这是一个hls流
+                    : "video/mp4";
+            },
+            finalOptions () {
+                return {
+                    autoplay: false, // 设置自动播放
+                    // controls: true, // 显示播放的控件
+                    sources: [
+                        {
+                            // src: this.src || this.attachmentLink, // 地址
+                            src: this.src, // 地址
+                            type: this.sourceType
+                        }
+                    ],
+                    fluid: true,
+                    liveui: true,
+                    html5: {
+                        hls: {
+                            overrideNative: true,
+                            debug: true
+                        }
+                    },
+                    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+                    aspectRatio: "16:9",
+                    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                    preload: "auto", // 预加载
+                    muted: true, // 是否静音，设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
+                    volume: 0.5, // 初始音量 (0-1)
+                    // audioOnlyMode: false, // 是否仅音频模式
+                    // audioPosterMode: false, // 音频海报模式
+                    // breakpoints: {
+                    //     audio: {
+                    //         width: 300 // 音频模式下的播放器宽度
+                    //     }
+                    // },
+
+                    ...this.options
+                };
+            }
+        },
+        watch: {
+            src (newSrc) {
+                if (this.player) {
+                    this.player.src({
+                        src: newSrc,
+                        type: this.sourceType
+                    });
+                }
+            }
+        },
+        mounted () {
+            this.initPlayer();
+            // // 使用 $nextTick 解决vedio报错  The element or ID supplied is not valid. (videojs)
+            // this.$nextTick(() => {
+            //     this.initPlayer();
+            // });
+        },
+        beforeDestroy () {
+            if (this.player) {
+                this.player.dispose();
+            }
+        },
+        methods: {
+            initPlayer () {
+                this.player = videojs(this.$refs.videoPlayer, this.finalOptions, this.onPlayerReady);
+                // this.player = videojs("videoPlayer", this.finalOptions, this.onPlayerReady);
+            },
+            onPlayerReady () {
+                // console.log("Player ready", this.finalOptions);
+            },
+
+            playVideo () {
+                let video = document.getElementById("video");
+                video.play();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .video-container {
+        width: 100%;
+        height: 100%;
+        background-color: #000;
+    }
+</style>
+<style lang="less">
+    .video-js {
+        width: 100%;
+        // height: 100%!important; // 放开也不管用
+    }
+    // 暂停播放按钮居中
+    ::v-deep .video-js .vjs-big-play-button {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>

package/src/index.js

@@ -101,6 +101,7 @@ import DshMenuNav from "./components/other/DshMenuNav.vue";
 import BriCode from "./components/other/BriCode.vue";
 import BriCollapseTree from "./components/other/BriCollapseTree.vue";
 import BriGantt from "./components/other/BriGantt.vue";
+import DshVideoPlayer from "./components/other/DshVideoPlayer.vue";
 
 // small
 import DshBtnModal from "./components/small/DshBtnModal.vue";
@@ -224,6 +225,7 @@ export {
     BriIframe,
     BriSvg,
     DshColorPanel,
+    DshVideoPlayer,
 
     // small
     DshRender,