bri-components 1.0.0

package/src/components/list/easyTable/v-table/src/title-cell-merge-mixin.js

@@ -0,0 +1,115 @@
+export default {
+
+    computed: {
+
+        // 获取表头行合并的数量
+        getTitleRowspanTotalCount () {
+
+            let titleRowspanTotalCount1 = 0;
+            let titleRowspanTotalCount2 = 0;
+            let rowspanCountArr;
+            let minVal;
+
+            // 不能用noFrozenTitleCols 要用原始数据处理
+            this.noFrozenTitleCols.forEach(row => {
+
+                rowspanCountArr = this.getTitleRowspanCountArr(row);
+
+                // 如果每一项的rowspan值都大于1则继续处理
+                if (Array.isArray(rowspanCountArr) && rowspanCountArr.length > 0) {
+
+                    minVal = Math.min.apply(null, rowspanCountArr);
+
+                    titleRowspanTotalCount1 += minVal - 1;
+                }
+            });
+
+            this.frozenTitleCols.forEach(row => {
+
+                rowspanCountArr = this.getTitleRowspanCountArr(row);
+
+                // 如果每一项的rowspan值都大于1则继续处理
+                if (Array.isArray(rowspanCountArr) && rowspanCountArr.length > 0) {
+
+                    minVal = Math.min.apply(null, rowspanCountArr);
+
+                    titleRowspanTotalCount2 += minVal - 1;
+                }
+            });
+
+            return titleRowspanTotalCount1 < titleRowspanTotalCount2 ? titleRowspanTotalCount1 : titleRowspanTotalCount2;
+        }
+
+    },
+    methods: {
+
+        // return array
+        getTitleRowspanCountArr (row) {
+
+            let rowspanCountArr = [];
+
+            let shouldDeal = row.every(col => {
+
+                if (col.rowspan && parseInt(col.rowspan) > 1) {
+
+                    rowspanCountArr.push(parseInt(col.rowspan));
+                    return true;
+                } else {
+                    return false;
+                }
+            });
+
+            if (shouldDeal) {
+                return rowspanCountArr;
+            } else {
+                return [];
+            }
+        },
+
+        /*
+         * row :行信息
+         * rowspan：当前列的rowspan值
+         * */
+        /* dealTitleRowspan(row, rowspan){
+
+         let result = rowspan,
+         rowspanCountArr,
+         minVal;
+
+         rowspanCountArr = this.getTitleRowspanCountArr(row);
+
+         // 如果每一项的rowspan值都大于1则继续处理
+         if (Array.isArray(rowspanCountArr) && rowspanCountArr.length > 0) {
+
+         rowspan = parseInt(rowspan);
+
+         minVal = Math.min.apply(null, rowspanCountArr);
+
+         if (rowspan === minVal) {
+
+         result = 1;
+         } else {
+
+         result = rowspan - minVal + 1;
+         }
+         }
+         return result;
+         }, */
+
+        // 获取最小的 rowspan
+        getMinRowspan (row) {
+
+            let result;
+
+            let rowspanCountArr = this.getTitleRowspanCountArr(row);
+
+            // 如果每一项的rowspan值都大于1则继续处理
+            if (Array.isArray(rowspanCountArr) && rowspanCountArr.length > 0) {
+
+                result = Math.min.apply(null, rowspanCountArr);
+            }
+            return result - 1;
+        }
+    }
+
+};

package/src/components/list/evTable/EvTable.vue

@@ -0,0 +1,323 @@
+<template>
+    <div
+        class="EvTable"
+        ref="EvTable"
+    >
+        <v-table
+            :className="className"
+            :height="height"
+            :table-data="data"
+            :columns="temporaryColumns"
+            :fixTitle="fixTitle"
+            :is-horizontal-resize="true"
+            :column-width-drag="true"
+            :column-width-drag-resize="columnWidthDragResize"
+            :show-sort="showSort"
+            :multiple-sort="multipleSort"
+            :sort-always="sortAlways"
+            style="width:100%"
+            :tableBgColor="tableBgColor"
+            :title-bg-color="titleBgColor"
+            :title-font-color="titleFontColor"
+            :odd-bg-color="oddBgColor"
+            :even-bg-color="evenBgColor"
+            :row-hover-color="rowHoverColor"
+            :row-click-color="rowClickColor"
+            :row-click="rowClick"
+            :row-dblclick="rowDblclick"
+            :column-cell-class-name="columnCellClassName"
+            :show-vertical-border="showVerticalBorder"
+            :show-horizontal-border="showHorizontalBorder"
+            :title-row-height="titleRowHeight"
+            :row-height="rowHeight"
+            :footer-row-height="footerRowHeight"
+            :cell-edit-done="cellEditDone"
+            :select-change="selectChange"
+            :select-all="selectAll"
+            :is-loading="isLoading"
+            :errorContent="noDataText"
+            @click-row="clickRow"
+            @sort-change="sortChange"
+        ></v-table>
+    </div>
+</template>
+<script>
+    // import boxMixin from "../boxMixin.js";
+    import EvTableMixin from "./EvTableMixin.js";
+
+    // const platData = window.platDataMap ? window.platDataMap[window.platDataMap.name] : {};
+    // const tableStyle = platData.evtableStyle || {};
+    export default {
+        name: "EvTable",
+        mixins: [
+            // boxMixin,
+            EvTableMixin
+        ],
+        props: {
+            data: Array,
+            columnsList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columnWidthDragResize: Function,
+            tableBgColor: {
+                type: String,
+                default: () => {
+                    return "#fff";
+                    // return tableStyle.tableBgColor || "#fff";
+                }
+            },
+            titleBgColor: {
+                type: String,
+                default: "#F0F0F0"
+            },
+            // 表格首行字体颜色
+            titleFontColor: {
+                type: String,
+                default: () => {
+                    return "#5d5d5d";
+                }
+            },
+            fixTitle: {
+                type: Boolean,
+                default: true
+            },
+            // 表格自定义class
+            className: {
+                type: String,
+                default: () => {
+                    return "";
+                }
+            },
+            oddBgColor: {
+                type: String,
+                default: () => {
+                    return "";
+                    // return tableStyle.oddBgColor || "#fff";
+                }
+            },
+            evenBgColor: {
+                type: String,
+                default: () => {
+                    return "";
+                    // return tableStyle.evenBgColor || "#F7F9FC";
+                }
+            },
+            rowHoverColor: {
+                type: String,
+                default: () => {
+                    return "";
+                    // return "#F1F4FA";
+                    // return tableStyle.rowHoverColor || "#F1F4FA";
+                }
+            },
+            rowClickColor: {
+                type: String,
+                default: () => {
+                    return "";
+                    // return "#F1F4FA";
+                    // return tableStyle.rowClickColor || "#F1F4FA";
+                }
+            },
+            // 表体单元格设置className
+            columnCellClassName: {
+                type: Function,
+                default: () => {
+                    return () => {
+                        return "column-cell-class-name";
+                    };
+                }
+            },
+            // 是否显示垂直border,false 时列拖动失效
+            showVerticalBorder: {
+                type: Boolean,
+                default: () => {
+                    return true;
+                }
+            },
+            showHorizontalBorder: {
+                type: Boolean,
+                default: () => {
+                    return false;
+                }
+            },
+            titleRowHeight: {
+                type: Number,
+                default: 52
+            },
+            // 内容行高
+            rowHeight: {
+                type: Number,
+                default: 52
+            },
+            footerRowHeight: {
+                type: Number,
+                default: 52
+            },
+            showSort: {
+                type: Boolean,
+                default: false
+            },
+            multipleSort: {
+                type: Boolean,
+                default: false
+            },
+            sortAlways: {
+                type: Boolean,
+                default: false
+            },
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            height: Number,
+            noDataText: {
+                type: String,
+                default: "暂无数据..."
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            temporaryColumns () {
+                return this.columnsList.map(colItem => {
+                    return {
+                        ...colItem,
+                        isFrozen: false,
+                        isFrozenRight: false
+                    };
+                });
+            }
+        },
+        created () {},
+        mounted () {},
+        methods: {
+            clickRow (row, index) {
+                this.$emit("click-row", row, index);
+            }
+        }
+    };
+    </script>
+
+    <style lang="less">
+        .EvTable{
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            font-size: 14px;
+            box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
+            border: 0;
+
+            table {
+                border-spacing: 0;
+                border-collapse: collapse;
+
+                tbody {
+                    td {
+                        .vertical-border {
+                            border-right-width: 0px !important;
+                        }
+                        .v-table-body-cell {
+                            white-space: normal;
+                            overflow: visible; // 有无都可
+                            text-overflow: auto; // 有无都可
+                            word-wrap: break-word;
+                        }
+                    }
+                }
+            }
+
+            .v-table{
+                &-views {
+                    box-shadow:0px 4px 20px 0px rgba(0,0,0,0.1);
+                }
+                .v-table-rightview .vertical-border {
+                    border-right-width: 0px !important;
+                }
+                .v-table-leftview .vertical-border{
+                    border-right-width: 0px !important;
+                }
+                &-title-cell{
+                    padding: 0 15px;
+                    border-color: #F1F4FA;
+                    .table-title{
+                        padding: 0;
+                    }
+                }
+                &-header{
+                    font-weight: 700;
+                    color: rgba(93,93,93,1);
+                    letter-spacing: 2px;
+                    font-size: 14px;
+                }
+                &-body{
+                    font-weight:400;
+                    color:rgba(135,135,135,1);
+                }
+                &-body-cell{
+                    padding: 0 15px;
+                    color: #666666;
+                    border-color: #F1F4FA;
+                }
+                &-empty-inner{
+                    border-top: 1px solid rgba(221, 221, 221, 1);
+                }
+            }
+            .v-scrollbar-wrap{
+                &::-webkit-scrollbar{
+                    width: 12px;
+                    height: 12px;
+                }
+                &::-webkit-scrollbar-thumb{
+                    background: #E1E8ED;
+                    border-radius: 3px;
+                }
+            }
+            .v-table-empty-scroll{
+                &::-webkit-scrollbar{
+                    width: 12px;
+                    height: 12px;
+                }
+                &::-webkit-scrollbar-thumb{
+                    background: #E1E8ED;
+                    border-radius: 3px;
+                }
+            }
+
+            &::-webkit-scrollbar{
+                width: 12px;
+                height: 12px;
+            }
+            &::-webkit-scrollbar-thumb{
+                background: #E1E8ED;
+                border-radius: 3px;
+            }
+            // etable 多条关联等带框的样式
+            .EvTable-box {
+                width: auto;
+                height: 24px;
+                margin-top: 7px;
+                padding: 5px;
+                line-height: 12px;
+                display: inline-block;
+                background: #f2f8ff;
+                border-radius: 2px;
+                border: 1px solid #6daef2;
+                font-size: 12px!important;
+                color: #6DAEF2;
+                cursor: pointer;
+
+                overflow: hidden;
+                word-break: keep-all;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                i {
+                    margin-right: 5px;
+                    font-size: 12px!important;
+                }
+            }
+        }
+    </style>

package/src/components/list/evTable/EvTableMixin.js

@@ -0,0 +1,26 @@
+export default {
+    data () {
+        return {};
+    },
+    props: {
+        rowClick: Function,
+        // 行双击回调
+        rowDblclick: Function,
+        // 表头单元格单击回调
+        titleClick: Function,
+        // 表头单元格双击回调
+        titleDblclick: Function,
+        // 单元格编辑完成回调
+        cellEditDone: Function,
+        // 某一项 checkbox 触发
+        selectChange: Function,
+        // 全选时触发
+        selectAll: Function
+
+    },
+    methods: {
+        sortChange (params) {
+            this.$emit("sort-change", params);
+        }
+    }
+};

package/src/components/other/DshAvatar.vue

@@ -0,0 +1,149 @@
+<template>
+    <div class="DshAvatar">
+        <!-- 无显示 -->
+        <template v-if="users.length == 0">
+
+        </template>
+
+        <!-- 图片堆叠显示 -->
+        <div v-else-if="users.length > maxLength" :style="{...roundStyle}">
+            <span v-for="(user, index) in userList" :key="index" class="DshAvatar-img">
+                <img :src="user && user.avatarurl || avatarSrc">
+            </span>
+            <span :style="{'margin-left': (userList.length + 1) * 12 + 6 + 'px'}">
+                {{userList[userList.length - 1] && userList[userList.length - 1].realname || userList[userList.length - 1] && userList[userList.length - 1].name || "吴明昊"}}
+            </span>
+        </div>
+
+        <!-- 单个显示 -->
+        <template v-else>
+            <div v-for="(user, index) in users" :key="index" class="DshAvatar-round" :style="{...roundStyle}">
+                <div class="DshAvatar-box">
+                    <div class="DshAvatar-img">
+                        <img :src="user && user.avatarurl || avatarSrc">
+                    </div>
+                    <span>
+                        {{user && user.realname || user && user.name || ""}}
+                    </span>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    // 自定义列组件
+    export default {
+        name: "DshAvatar",
+        props: {
+            rowData: {
+                type: Object
+            },
+            field: {
+                type: String
+            },
+            // 最多显示maxlength个，超出后头像重叠显示最后一个人的名字
+            maxLength: {
+                type: Number,
+                default: 2
+            },
+            roundStyle: {
+                type: Object,
+                default: () => {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                avatarSrc: this.$imageSrcMap.system.boy,
+
+                users: []
+            };
+        },
+        computed: {
+            userList () {
+                return this.users.slice(0, 4);
+            }
+        },
+        created () {
+            this.init();
+        },
+        methods: {
+            init () {
+                this.users = this.$dataType(this.rowData[this.field]) === "object" ? [this.rowData[this.field]] : (this.$dataType(this.rowData[this.field]) === "array" ? this.rowData[this.field] : []);
+            }
+        },
+        watch: {
+            rowData: {
+                handler (newVal, oldVal) {
+                    this.init();
+                },
+                immediate: true
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshAvatar {
+        position: relative;
+        span {
+            display: inline-block;
+            margin-left: 20px;
+            line-height: 22px;
+        }
+        &-img {
+            width: 22px;
+            height: 22px;
+            padding: 1px;
+            display: inline-block;
+            line-height: 20px;
+            background: #fff;
+            border-radius: 50%;
+            img {
+                width: 20px;
+                height: 20px;
+                display: inline-block;
+                border-radius: 50%;
+            }
+            &:nth-child(1) {
+                position: absolute;
+                left: 0px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(2) {
+                position: absolute;
+                left: 12px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(3) {
+                position: absolute;
+                left: 24px;
+                top: 50%;
+                margin-top: -10px;
+            }
+            &:nth-child(4) {
+                position: absolute;
+                left: 36px;
+                top: 50%;
+                margin-top: -10px;
+            }
+        }
+        &-round {
+            display: inline-block;
+            margin-right: 8px;
+        }
+        &-box {
+            position: relative;
+            img {
+                width: 20px;
+                height: 20px;
+                display: inline-block;
+                border-radius: 50%;
+            }
+        }
+    }
+</style>

package/src/components/other/DshBtnModal.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="DshBtnModal">
+        <dsh-buttons
+            :list="$getOperationList(['set'])"
+            @click="$dispatchEvent($event)"
+        ></dsh-buttons>
+
+        <div v-if="showModal">
+            <dsh-modal
+                v-model="showModal"
+                :mode="selfModalPropsObj.mode"
+                :propsObj="selfModalPropsObj"
+            >
+                <div style="margin: 10px 30px;">
+                    <slot></slot>
+                </div>
+            </dsh-modal>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshBtnModal",
+        props: {
+            modalPropsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {
+                showModal: false,
+                operationMap: {
+                    set: {
+                        name: "设置默认内容",
+                        type: "set",
+                        btnType: "dashed",
+                        size: "default",
+                        long: true,
+                        event: "clickSet"
+                    }
+                }
+            };
+        },
+        computed: {
+            selfModalPropsObj () {
+                return {
+                    mode: "middle",
+                    ...this.modalPropsObj
+                };
+            }
+        },
+        created () {},
+        methods: {
+            // 点击设置按钮
+            clickSet (operationItem) {
+                this.showModal = true;
+            }
+        }
+    };
+</script>