bri-components 1.0.0

package/src/components/small/DshDropdown.vue

@@ -0,0 +1,159 @@
+<template>
+    <Dropdown
+        class="DshDropdown"
+        :trigger="trigger"
+        :placement="placement"
+        :transfer="transfer"
+    >
+        <slot>
+            <Icon
+                class="DshDropdown-rel"
+                :type="dropdownObj.icon"
+                :custom="dropdownObj.customIcon ? `bico-font ${dropdownObj.customIcon}` : undefined"
+                :size="dropdownObj.size"
+                :color="dropdownObj.color"
+            />
+        </slot>
+
+        <!-- 下拉面板 -->
+        <div
+            v-if="list.length"
+            slot="list"
+            :class="['DshDropdown-list', menuClass]"
+        >
+            <!-- 搜索 -->
+            <div
+                v-if="useSearch"
+                class="DshDropdown-list-search"
+            >
+                <Input
+                    v-model="searchName"
+                    search
+                    clearable
+                    @click.native.stop="0"
+                />
+            </div>
+
+            <!-- 列表 -->
+            <div
+                class="DshDropdown-list-data"
+                :style="{
+                    maxHeight: useSearch ? '300px' : '340px'
+                }"
+            >
+                <!-- 有数据 -->
+                <DropdownMenu
+                    v-if="showList.length"
+                    class="list"
+                >
+                    <DropdownItem
+                        v-for="dropdownItem in showList"
+                        :key="dropdownItem._id || dropdownItem._key || dropdownItem.type"
+                        :class="{
+                            'list-item': true,
+                            'list-item-disabled': dropdownItem.disabled
+                        }"
+                        :name="dropdownItem.name"
+                        :disabled="dropdownItem.disabled"
+                        :divided="dropdownItem.divided"
+                        :selected="dropdownItem.selected"
+                        @click.native.stop="dispatchEvent(dropdownItem)"
+                    >
+                        <slot
+                            name="dropdownItem"
+                            :dropdownItem="dropdownItem"
+                        >
+                            <dsh-icons
+                                v-if="dropdownItem.icon || dropdownItem.customIcon"
+                                :class="{
+                                    'list-item-icon': true,
+                                    'list-item-disabled': dropdownItem.disabled
+                                }"
+                                :list="[dropdownItem]"
+                            />
+                            <span :class="{
+                                'list-item-name': true,
+                                'list-item-disabled': dropdownItem.disabled
+                            }">
+                                {{ dropdownItem.name || dropdownItem._name }}
+                            </span>
+                        </slot>
+                    </DropdownItem>
+                </DropdownMenu>
+
+                <!-- 无数据 -->
+                <div
+                    v-else
+                    class="nodata"
+                >
+                    暂无数据
+                </div>
+            </div>
+        </div>
+    </Dropdown>
+</template>
+
+<script>
+    export default {
+        name: "DshDropdown",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            dropdownObj: {
+                type: Object,
+                default () {
+                    return {
+                        icon: "ios-more",
+                        size: 18
+                    };
+                }
+            },
+            useSearch: {
+                type: Boolean,
+                default: false
+            },
+
+            placement: {
+                type: String,
+                default: "bottom-start"
+            },
+            trigger: {
+                type: String,
+                default: "hover"
+            },
+            transfer: {
+                type: Boolean,
+                default: true
+            },
+            menuClass: String
+        },
+        data () {
+            return {
+                searchName: ""
+            };
+        },
+        computed: {
+            showList () {
+                return this.useSearch
+                    ? this.list.filter(item => (item.name || item._name).includes(this.searchName))
+                    : this.list;
+            }
+        },
+        created () {},
+        methods: {
+            dispatchEvent (dropdownItem, event) {
+                if (dropdownItem.disabled !== true) {
+                    this.$emit("click", dropdownItem);
+
+                    this.$nextTick(() => {
+                        this.searchName = "";
+                    });
+                }
+            }
+        }
+    };
+</script>

package/src/components/small/DshFileShow.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="dsh-file-show">
+        <!-- image类型 -->
+        <img
+            v-for="item in list"
+            :key="item._id"
+            class="dsh-file-show-img"
+            :style="{
+                cursor: isClick ? 'pointer' : 'auto'
+            }"
+            :src="getFileImage(item)"
+            :title="item.name"
+            :alt="item.name"
+            :width="width"
+            :height="height"
+            @click.stop="clickFile(item)"
+        >
+
+        <!-- 预览 -->
+        <div
+            :class="{
+                'dsh-file-show-wrap': true,
+                'dsh-file-show-wrap-show': showModal
+            }"
+            @click.stop="closeModal()"
+        >
+            <div
+                class="dsh-file-show-wrap-preview"
+                :style="{
+                    backgroundImage: `url(${curFile.url})`
+                }"
+            ></div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import axios from "axios";
+
+    export default {
+        name: "DshFileShow",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            width: {
+                type: Number,
+                default: 24
+            },
+            height: {
+                type: Number,
+                default: 28
+            },
+            isClick: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+                showModal: false,
+                curFile: {}
+            };
+        },
+        created () {},
+        methods: {
+            // 获取不同类型文件的图片
+            getFileImage (item) {
+                const imageMap = this.$imageSrcMap.fileType;
+
+                if (!item.mimetype) {
+                    return imageMap.other;
+                } else if (item.mimetype.indexOf("image") > -1) {
+                    return item.url; // 压缩图片：将图片最长的边限制在100像素，短边按比例处理
+                } else if (item.mimetype.indexOf("text/plain") > -1) {
+                    return imageMap.text;
+                } else if (item.mimetype.indexOf("application/pdf") > -1) {
+                    return imageMap.pdf;
+                } else if (item.mimetype.indexOf("wordprocessingml.document") > -1 || item.mimetype.indexOf("application/msword") > -1) {
+                    return imageMap.doc;
+                } else if (item.mimetype.indexOf("presentationml.presentation") > -1 || item.mimetype.indexOf("application/vnd.ms-powerpoint") > -1) {
+                    return imageMap.ppt;
+                } else if (item.mimetype.indexOf("spreadsheetml.sheet") > -1) {
+                    return imageMap.excel;
+                } else if (item.mimetype.indexOf("application/x-zip-compressed") > -1) {
+                    return imageMap.zip;
+                } else if (item.mimetype.indexOf("application/x-rar-compressed") > -1) {
+                    return imageMap.rar;
+                } else {
+                    return imageMap.other;
+                }
+            },
+            // 点击文件，跳转对应地址
+            clickFile (item) {
+                if (this.isClick) {
+                    if (item.mimetype.indexOf("image/") > -1) {
+                        this.showModal = true;
+                        this.curFile = item;
+                    } else if (item.mimetype === "application/pdf") {
+                        window.open(item.url);
+                        // window.open(item.url + "?response-content-type=application/octet-stream");
+                    } else {
+                        window.open(item.url);
+                        // this.downloadFile(item);
+                    }
+                }
+            },
+            downloadFile (file) {
+                axios
+                    .get(file.url, {
+                        responseType: "blob"
+                    })
+                    .then((res) => {
+                        if (window.navigator.msSaveOrOpenBlob) {
+                            // 兼容IE10
+                            navigator.msSaveBlob(res, file.name);
+                        } else {
+                            const href = URL.createObjectURL(res.data); // 创建新的URL表示指定的blob对象
+                            const a = document.createElement("a");
+                            a.style.display = "none";
+                            a.href = href; // 指定下载链接
+                            a.download = file.name; // 指定下载文件名
+                            a.click();
+                            URL.revokeObjectURL(a.href); // 释放URL对象
+                            a.remove();
+                        }
+                });
+            },
+            closeModal () {
+                this.showModal = false;
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .dsh-file-show {
+        display: block;
+        overflow: hidden;
+        word-break: keep-all;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: flex;
+
+        &-img {
+            margin-right: 3px;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+
+        // 遮罩层
+        &-wrap {
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0px;
+            left: 0px;
+            bottom: 0px;
+            right: 0px;
+            z-index: 9999;
+            text-align: center;
+            overflow: auto;
+            display: none;
+            background: rgba(0,0,0,0);
+
+            &-show {
+                display: block;
+                background: rgba(0,0,0,.6);
+                animation: animate-show .3s linear;
+            }
+
+            &-preview {
+                position: absolute;
+                width: 90%;
+                height: 90%;
+                top: 5%;
+                left: 5%;
+                left: 5%;
+                right: 5%;
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+
+            // &-roll {
+            //     height: 100%;
+            //     position: absolute;
+            //     top: 0;
+            //     bottom: 0;
+            //     left: 0;
+            //     right: 0;
+            //     margin: auto;
+            // }
+        }
+
+        @keyframes animate-show {
+            from {
+                display: none;
+                background: rgba(0,0,0,0);
+            }
+            to {
+                display: block;
+                background: rgba(0,0,0,.6);
+            }
+        }
+    }
+</style>

package/src/components/small/DshIcons.vue

@@ -0,0 +1,63 @@
+<template>
+    <div
+        v-if="list.length"
+        class="DshIcons"
+    >
+        <Icon
+            v-for="(operationItem, index) in list"
+            :key="operationItem._key || operationItem._id || operationItem.customIcon || operationItem.icon"
+            :style="operationItem.style"
+            :class="[
+                'DshIcons-item',
+                index ? 'dsh-margin-left5' : undefined,
+                itemClass,
+                operationItem.class
+            ]"
+            :title="operationItem.name"
+            :type="operationItem.icon"
+            :custom="operationItem.customIcon ? `bico-font ${operationItem.customIcon}` : undefined"
+            :color="operationItem.color"
+            :size="typeof parseInt(operationItem.size) === 'number' && parseInt(operationItem.size) || 18"
+            @click.stop="click(operationItem, index)"
+        />
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshIcons",
+        props: {
+            list: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            itemClass: String
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            click (...params) {
+                this.$emit("click", ...params);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshIcons {
+        display: inline-block;
+        &-item {
+            cursor: pointer;
+        }
+    }
+</style>
+<style lang="less">
+    .DshIcons {
+
+    }
+</style>

package/src/components/small/DshModal.vue

@@ -0,0 +1,255 @@
+<template>
+    <Modal
+        :class="selfPropsObj.class"
+        :value="showModal"
+        :title="selfPropsObj.title"
+        :closable="selfPropsObj.closable"
+        :mask-closable="selfPropsObj.maskClosable"
+        :loading="selfPropsObj.loading"
+        :scrollable="selfPropsObj.scrollable"
+        :fullscreen="selfPropsObj.fullscreen"
+        :draggable="selfPropsObj.draggable"
+        :sticky="selfPropsObj.sticky"
+        :sticky-distance="selfPropsObj.stickyDistance"
+        :mask="selfPropsObj.mask"
+        :ok-text="selfPropsObj.okText"
+        :cancel-text="selfPropsObj.cancelText"
+        :footer-hide="selfPropsObj.footerHide"
+        :styles="selfPropsObj.styles"
+        :class-name="selfPropsObj.className"
+        :z-index="selfPropsObj.zIndex"
+        :width="modalWidth"
+        :transfer="selfPropsObj.transfer"
+        @on-visible-change="visibleChange"
+        @on-ok="ok"
+        @on-cancel="cancel"
+    >
+        <div
+            slot="header"
+            class="DshModal-header"
+        >
+            <slot name="header">
+                <div class="ivu-modal-header-inner ">
+                    {{ selfPropsObj.title }}
+                </div>
+            </slot>
+
+            <slot name="header-right"></slot>
+        </div>
+
+        <!-- 删除按钮 -->
+        <Icon
+            v-if="selfPropsObj.showSlotClose !== false"
+            class="DshModal-close"
+            type="md-close"
+            size="20"
+            @click.native.stop="visibleChange(false)"
+        />
+
+        <slot v-if="showSlot"></slot>
+
+        <slot
+            slot="footer"
+            name="footer"
+        ></slot>
+    </Modal>
+</template>
+
+<script>
+    export default {
+        name: "DshModal",
+        props: {
+            value: Boolean,
+            mode: {
+                type: String,
+                default: "default",
+                validator: function (value) {
+                    return ["small", "default", "middle", "large", "custom", "auto"].indexOf(value) !== -1;
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                showSlot: false
+            };
+        },
+        computed: {
+            showModal () {
+                this.changeShowSlot(this.value);
+                return this.value;
+            },
+
+            selfPropsObj () {
+                return {
+                    title: "标题",
+                    closable: false,
+                    maskClosable: false,
+                    okText: "确定",
+                    cancelText: "取消",
+                    footerHide: true,
+                    // sticky: true, // 拖拽时，是否吸附屏幕边缘
+                    // stickyDistance: 30, // 拖拽时，自动吸附屏幕边缘的临界距离
+                    // resetDragPosition: false, // Modal 再次打开时，是否重置拖拽的位置
+                    transfer: true,
+                    ...this.propsObj,
+                    class: [
+                        "DshModal",
+                        `DshModal-${this.mode}`,
+                        ...(
+                            Array.isArray(this.propsObj.class)
+                                ? this.propsObj.class
+                                : [this.propsObj.class]
+                        )
+                    ]
+                };
+            },
+            modalWidth () {
+                // 初始化ivu-modal宽度
+                const widthOBj = {
+                    default: "750",
+                    small: "500",
+                    middle: "1000px",
+                    large: this.propsObj.draggable ? "100%" : "80%",
+                    auto: "auto"
+                };
+
+                return this.selfPropsObj.width ? this.selfPropsObj.width : widthOBj[this.mode];
+            }
+        },
+        created () {},
+        methods: {
+            changeShowSlot (bool) {
+                setTimeout(() => {
+                    bool === true && (this.showSlot = bool);
+                }, 0);
+            },
+
+            ok (...parmas) {
+                this.$emit("ok", ...parmas);
+            },
+            cancel (...parmas) {
+                this.$emit("cancel", ...parmas);
+            },
+            visibleChange (bool = false) {
+                this.$emit("on-visible-change", bool);
+                this.$emit("input", bool);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshModal {
+        &-header {
+            width: 100%;
+            height: 100%;
+        }
+        &-close {
+            padding: 2px;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            cursor: pointer;
+        }
+
+        &-default,
+        &-middle,
+        &-large,
+        &-small {
+            .ivu-modal-wrap {
+                .ivu-modal {
+                    padding: 20px;
+                    margin: auto;
+                    position: absolute;
+                    top: 0px;
+                    bottom: 0px;
+                    left: 0px;
+                    right: 0px;
+                    .ivu-modal-content {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        .ivu-modal-close {}
+
+                        .ivu-modal-header {
+                            width: 100%;
+                            height: 44px;
+                            padding: 10px 40px 10px 16px;
+                        }
+                        .ivu-modal-body {
+                            width: 100%;
+                            flex: 1;
+                            min-height: 200px;
+                            padding: 0px;
+                            overflow: auto;
+                        }
+                        .ivu-modal-footer {
+                            width: 100%;
+                            height: 50px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-default {
+            .ivu-modal-wrap {
+                .ivu-modal {
+                    width: 750px !important;
+                    height: 550px !important;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
+        &-small {
+             .ivu-modal-wrap {
+                 .ivu-modal {
+                    width: 500px !important;
+                    height: 400px !important;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
+        &-middle {
+             .ivu-modal-wrap {
+                 .ivu-modal {
+                    width: 1000px !important;
+                    height: 800px !important;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
+        &-large {
+             .ivu-modal-wrap {
+                 .ivu-modal {
+                    width: 80% !important;
+                    height: 90% !important;
+                    min-width: 1000px !important;
+                    max-height: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
+        &-auto {
+             .ivu-modal-wrap {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                 .ivu-modal {
+                    top: 0px;
+                    max-height: 100%;
+                }
+            }
+        }
+    }
+</style>