bri-components 1.0.0

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

@@ -0,0 +1,397 @@
+import axios from "axios";
+const minio = require("minio");
+const stream = require("stream");
+export default {
+    props: {
+        groupKey: {
+            type: String
+        },
+        urlModule: {
+            type: Object,
+            default: function () {
+                return {
+                    module: "file",
+                    name: "ossToken"
+                };
+            }
+        },
+        ossType: {
+            type: String,
+            default: "multipartUpload"
+        }
+    },
+    data () {
+        return {
+            percent: 0
+        };
+    },
+    created () {
+    },
+    computed: {
+        computedGroupKey () {
+            return this.propsObj.groupKey || this.groupKey;
+        },
+        computedUrlModule () {
+            return this.propsObj.urlModule || this.urlModule;
+        },
+        computedOssType () {
+            return this.propsObj.ossType || this.ossType;
+        },
+        archiveKey () {
+            return this.propsObj._archiveKey || [];
+        },
+        percentColor () {
+            if (this.percent === 100) {
+                return "#5cb85c";
+            } else {
+                return "#6090ed";
+            }
+        },
+        // 是否允许点击
+        canClickUpload () {
+            if (this.percent > 0) {
+                return false;
+            } else {
+                return this.finalCanEdit;
+            }
+        }
+    },
+    methods: {
+        handlePost (file, callback) {
+            this.$https({
+                url: this.computedUrlModule,
+                params: {token: this.$route.query && this.$route.query.token},
+                callback: res => {
+                    this.inputType = "file";
+                    if (res.ossType === "ali-oss") {
+                        // 上传到阿里云
+                        this[this.computedOssType](file, res, callback);
+                    } else if (res.ossType === "local") {
+                        this.localUpload(file, res, callback);
+                    } else if (res.ossType === "minio") {
+                        this.minioUpload(file, res, callback);
+                    } else {
+                        console.log(`请开发这种类型‘${res.ossType}’的上传模式`);
+                    }
+
+                }
+            });
+        },
+        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, {
+                headers: {
+                    filetoken: res.filetoken,
+                    filebody: JSON.stringify(fileBody)
+                },
+                onUploadProgress: progressEvent => {
+                    this.inProgress(Number((progressEvent.loaded / progressEvent.total * 100).toFixed(0)));
+                }
+            })
+                .then(response => {
+                    const newResponse = {
+                        data: response,
+                        res: {}
+                    };
+                    this.handleSuccess && this.handleSuccess(newResponse, newResponse.data, file);
+                    callback && callback(response.data);
+                }).catch(error => {
+                    this.handleError && this.handleError(error, {}, file);
+                    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)
+            };
+            new this.$aliOss(res.ossConfig).multipartUpload(remoteName, file, {
+                progress: (percentage) => {
+                    this.inProgress(Number((percentage * 100).toFixed(0)));
+                    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.handleSuccess && this.handleSuccess(response, response.data, file);
+                callback && callback(response.data);
+            }).catch((err, response) => {
+                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}`;
+            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 = "";
+                }
+            }
+            const minioClient = new minio.Client({
+                endPoint: res.ossConfig.endPoint,
+                port: res.ossConfig.port,
+                useSSL: res.ossConfig.useSSL,
+                accessKey: window.config.minioAccessKey,
+                secretKey: window.config.minioSecretKey
+            });
+            // 获取文件类型及大小
+            const fileSize = file.size;
+            // 将文件转换为minio可接收的格式
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onloadend = e => {
+                const dataurl = e.target.result;
+                // base64转blob
+                const blob = this.toBlob(dataurl);
+                // blob转arrayBuffer
+                const reader2 = new FileReader();
+                reader2.readAsArrayBuffer(blob);
+                // 参数
+                let metadata = {
+                    "content-type": file.type || officeFileDefaultType,
+                    "content-length": fileSize
+                };
+                reader2.onload = ex => {
+                    // 定义流
+                    const bufferStream = new stream.PassThrough();
+                    // 将buffer写入
+                    bufferStream.end(Buffer.from(ex.target.result));
+                    // 上传
+                    minioClient.putObject(res.ossConfig.bucket, remoteName, bufferStream, fileSize, metadata, (err, etag) => {
+                        if (err == null) {
+                            // if (file.type.startsWith("image")) {
+                            //     let img = new Image();
+                            //     // 改变图片的src
+                            //     img.src = url;
+                            //     // 加载完成执行
+                            //     img.onload = function () {
+                            //         // 打印
+                            //         alert("width:" + img.width + ",height:" + img.height);
+                            //     };
+                            // }
+                            let callbackBody = {
+                                name: file.name,
+                                mimetype: file.type || officeFileDefaultType,
+                                size: fileSize,
+                                path: remoteName,
+                                bucket: res.ossConfig.bucket,
+                                filetoken: res.filetoken,
+                                groupKey: this.computedGroupKey,
+                                archiveKey: this.archiveKey[this.archiveKey.length - 1]
+                            };
+                            axios.post(res.ossHost + res.confirmPath, {...callbackBody}).then(response => {
+                                this.handleSuccess && this.handleSuccess(null, response, null);
+                            });
+                        }
+                    });
+                };
+            };
+        },
+        putUpload (file, res, callback) {
+            let type = "jpg";
+            let remoteName = `${this.randomTimeStampFn()}.${type}`;
+
+            // 上传成功的回调参数
+            let callbackBody = {
+                name: remoteName,
+                mimetype: "image/jpeg",
+                size: file.length,
+                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)
+            };
+
+            new this.$aliOss(res.ossConfig).put(remoteName, file, {
+                progress: (percentage) => {
+                    this.inProgress(Number((percentage * 100).toFixed(0)));
+                    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.handleSuccess && this.handleSuccess(response, response.data, file);
+                callback && callback(response.data);
+            }).catch((err, response) => {
+                this.handleError && this.handleError(err, response, file);
+                callback && callback(err);
+            });
+
+        },
+        inProgress (percent) {
+            this.percent = percent;
+            if (percent >= 100) {
+                this.percent = 100;
+                setTimeout(() => {
+                    this.percent = 0;
+                }, 500);
+            }
+        },
+        // 以下为数据转换方法
+        randomTimeStampFn () {
+            let randomTimeStamp = new Date().getTime() + "" + Math.floor(Math.random() * 10000);
+            return this.$md5(randomTimeStamp);
+        },
+        transferCallBody (obj) {
+            let newObj = {};
+            for (let attr in obj) {
+                newObj[attr] = obj[attr];
+            }
+            return JSON.stringify(newObj);
+        },
+        // base64转换
+        base64Encode (input) {
+            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++);
+                enc1 = chr1 >> 2;
+                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+                enc4 = chr3 & 63;
+                if (isNaN(chr2)) {
+                    enc3 = enc4 = 64;
+                } else if (isNaN(chr3)) {
+                    enc4 = 64;
+                }
+                output = output +
+                    _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
+                    _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
+            }
+            return output;
+        },
+        utf8Encode (str) {
+            str = str.replace(/\r\n/g, "\n");
+            let utftext = "";
+            for (let n = 0; n < str.length; n++) {
+                let c = str.charCodeAt(n);
+                if (c < 128) {
+                    utftext += String.fromCharCode(c);
+                } else if ((c > 127) && (c < 2048)) {
+                    utftext += String.fromCharCode((c >> 6) | 192);
+                    utftext += String.fromCharCode((c & 63) | 128);
+                } else {
+                    utftext += String.fromCharCode((c >> 12) | 224);
+                    utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+                    utftext += String.fromCharCode((c & 63) | 128);
+                }
+
+            }
+            return utftext;
+        },
+        // base64转blob
+        toBlob (base64Data) {
+            let byteString = base64Data;
+            if (base64Data.split(",")[0].indexOf("base64") >= 0) {
+                byteString = atob(base64Data.split(",")[1]); // base64 解码
+            } 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) {
+                uintArr[i] = byteString.charCodeAt(i);
+            }
+            // 生成blob
+            const blob = new Blob([uintArr], {
+                type: mimeString
+            });
+            // 使用 Blob 创建一个指向类型化数组的URL, URL.createObjectURL是new Blob文件的方法,可以生成一个普通的url,可以直接使用,比如用在img.src上
+            return blob;
+        }
+    }
+};

package/src/components/controls/base/selectMixin.js

@@ -0,0 +1,110 @@
+export default {
+    data () {
+        return {
+            initListData: [],
+            showTipTpl: false,
+            showTipModal: false,
+            dynamicContent: ""
+        };
+    },
+    computed: {
+        modalTipContent () {
+            return this.propsObj._tipContent || this.dynamicContent || "暂无信息";
+        }
+    },
+    created () {
+        this.getTipData();
+    },
+    methods: {
+        getTipData () {
+            if (
+                (this.propsObj._key !== "_default") &&
+                this.finalCanEdit &&
+                this.propsObj._openTip
+            ) {
+                let tipObj = {
+                    _key: "openTip",
+                    _name: this.propsObj._tipName || "其他",
+                    __isTip__: true,
+                    _disabled: true,
+                    color: "#6991cc",
+                    class: `Dsh${this.propsObj._type}-tip`
+                };
+                this.initListData.push(tipObj);
+            }
+        },
+        // 是否打开tip弹窗
+        clickOpenTip (item) {
+            if (item.__isTip__) {
+                if (this.propsObj._tipKind === "dynamic" && !this.propsObj._tipContent) {
+                    this.getTipUrl();
+                } else {
+                    this.showTipTpl = true;
+                    this.showTipModal = true;
+                }
+            }
+        },
+        getTipUrl () {
+            if (this.propsObj._tipUrl) {
+                this.$https({
+                    url: {
+                        module: "customPath",
+                        name: this.propsObj._tipUrl
+                    },
+                    params: {
+                        formData: this.value,
+                        propsObj: this.propsObj
+                    },
+                    callback: res => {
+                        this.dynamicContent = res;
+                        this.showTipTpl = true;
+                        this.showTipModal = true;
+                    }
+                });
+            } else {
+                this.$Message.info("请配置接口路径！");
+            }
+        },
+        tipModalRender (h) {
+            return this.showTipTpl
+                ? h("dsh-modal", {
+                    props: {
+                        value: this.showTipModal,
+                        mode: "custom",
+                        propsObj: {
+                            title: "温馨提示",
+                            maskClosable: true,
+                            class: "DshSelect-modal"
+                        }
+                    },
+                    on: {
+                        input: bool => {
+                            this.showTipModal = bool;
+                        }
+                    }
+                }, [
+                    h("div", {
+                        class: "DshSelect-modal-content",
+                        domProps: {
+                            innerHTML: this.modalTipContent
+                        }
+                    }),
+                    h("div", {
+                        class: "DshSelect-modal-footer"
+                    }, [
+                        h("Button", {
+                            props: {
+                                type: "primary"
+                            },
+                            on: {
+                                click: () => {
+                                    this.showTipModal = false;
+                                }
+                            }
+                        }, "我知道了")
+                    ])
+                ])
+                : undefined;
+        }
+    }
+};

package/src/components/controls/base/textMultiple/DshTextMultiple.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="DshTextMultiple ycFormItem">
+        <Input
+            class="DshTextMultiple-control"
+            v-model="text"
+            :placeholder="$showPlaceholder(canEdit, propsObj) ? `请输入${propsObj._name}` : ''"
+            :type="'text'"
+            :readonly="!canEdit"
+            :disabled="propsObj.canEdit === false"
+            :clearable="true"
+            :size="propsObj._size"
+        />
+        <dsh-buttons
+            class="DshTextMultiple-create"
+            :list="$getOperationList(['createTag'])"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+
+        <!-- 标签列表 -->
+        <dsh-tags
+            class="dsh-margin-top5"
+            :list="value[propsObj._key]"
+            @delete="$dispatchEvent(operationMap.deleteTag, arguments)"
+        ></dsh-tags>
+    </div>
+</template>
+
+<script>
+    import controlMixin from "../../controlMixin.js";
+
+    export default {
+        name: "DshTextMultiple",
+        mixins: [controlMixin],
+        props: {},
+        data () {
+            return {
+                text: "",
+
+                operationMap: {
+                    createTag: {
+                        name: "添加",
+                        type: "createTag",
+                        size: "default",
+                        event: "createTag"
+                    },
+                    deleteTag: {
+                        name: "删除",
+                        type: "deleteTag",
+                        event: "deleteTag"
+                    }
+                }
+            };
+        },
+        computed: {},
+        created () {},
+        methods: {
+            createTag () {
+                if (this.text && this.text.trim()) {
+                    if (this.value[this.propsObj._key].some(item => item === this.text.trim())) {
+                        this.$Message.error({
+                            content: `搜索文字 "${this.text.trim()}" 已存在！`,
+                            duration: 5
+                        });
+                    } else {
+                        this.value[this.propsObj._key].push(this.text.trim());
+                        this.change();
+                    }
+
+                }
+                this.text = "";
+            },
+            // 删除
+            deleteTag (operationItem, params) {
+                this.change();
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshTextMultiple {
+        width: 100%;
+
+        &-control {
+            display: inline-block;
+            width: calc(100% - 65px);
+        }
+
+        &-create {
+            display: inline-block;
+            width: 60px;
+        }
+    }
+</style>