bri-components 1.5.21 → 1.6.0

package/src/components/list/DshBox/DshPanel.vue

@@ -1,669 +1,669 @@
-<template>
-    <div class="DshPanel">
-        <!-- 加载 -->
-        <bri-loading
-            v-if="isLoading"
-            class="DshPanel-loading"
-        ></bri-loading>
-        <template v-else>
-            <!-- 有数据 -->
-            <template v-if="data.length">
-                <div
-                    v-for="(groupItem, groupIndex) in data"
-                    :key="groupIndex"
-                    class="DshPanel-group"
-                >
-                    <!-- 组 标头 -->
-                    <div
-                        class="DshPanel-group-header"
-                        :style="{
-                           'border-color': getBgColor(groupItem)
-                        }"
-                    >
-                        <!-- 左 -->
-                        <Checkbox
-                            v-if="multiple"
-                            class="header-checkbox"
-                            v-model="groupItem.isSelectAll"
-                            @on-change="selectGroupAll(groupItem, $event)"
-                        ></Checkbox>
-
-                        <!-- 左 -->
-                        <div class="header-left">
-                            <bri-tooltip
-                                :content="groupItem.name"
-                                placement="top"
-                                :transfer="true"
-                                class="header-left-tooltip"
-                            >
-                                <span class="header-left-name">
-                                    {{ groupItem.name }}
-                                </span>
-                            </bri-tooltip>
-                            <span
-                                class="header-left-num"
-                                :style="{
-                                    'color': getBgColor(groupItem)
-                                }"
-                            >
-                                {{ groupItem.total }}
-                            </span>
-                        </div>
-
-                        <!-- 右 -->
-                        <span class="header-right">
-                            <dsh-buttons
-                                :list="groupBtnOperationList"
-                                @click="$dshEmit($event, { [groupField]: groupItem._key })"
-                            ></dsh-buttons>
-                        </span>
-                    </div>
-
-                    <!-- 组 数据列 -->
-                    <div class="DshPanel-group-list">
-                        <div :class="{
-                                'list': true,
-                                'list-nodata': !groupItem.list.length
-                            }">
-                            <CheckboxGroup
-                                class="list-drag"
-                                v-model="groupItem.selectIds"
-                                @on-change="selectRow(groupItem, $event)"
-                            >
-                                <dsh-draggable
-                                    class="list-drag-draggable"
-                                    v-model="groupItem.list"
-                                    group="panel"
-                                    animation="300"
-                                    :disabled="!dragOperationObj"
-                                    @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
-                                    @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
-                                >
-                                    <transition-group
-                                        :id="groupItem._key"
-                                        class="list-drag-transition"
-                                        @scroll.native="groupScroll(groupItem, groupIndex, $event)"
-                                    >
-                                        <div
-                                            v-for="(dataItem, dataIndex) in groupItem.list"
-                                            :key="dataItem._id"
-                                            :id="dataItem._id"
-                                            class="row-item"
-                                            @click="clickRow(dataItem, dataIndex)"
-                                        >
-                                            <dsh-icons
-                                                v-if="dragOperationObj"
-                                                class="row-item-move"
-                                                :list="[{
-                                                    customIcon: 'bico-tuodong',
-                                                    size: '14px'
-                                                }]"
-                                            ></dsh-icons>
-                                            <!-- 内容 -->
-                                            <div class="row-item-info">
-                                                <div class="title">
-                                                    <!-- 复选框 -->
-                                                    <Checkbox
-                                                        v-if="multiple"
-                                                        class="title-checkbox"
-                                                        :label="dataItem._id"
-                                                        @click.native.stop="clickRowCheckbox(dataItem)"
-                                                    >{{ "" }}</Checkbox>
-
-                                                    <!-- 标题 -->
-                                                    <bri-tooltip
-                                                        class="title-tooltip"
-                                                        :content="dataItem[titleField]"
-                                                        placement="top"
-                                                        :transfer="true"
-                                                    >
-                                                        <div class="title-name">
-                                                            {{ dataItem[titleField] }}
-                                                        </div>
-                                                    </bri-tooltip>
-                                                    <!-- 下拉操作 -->
-                                                    <dsh-dropdown
-                                                        v-if="operationList.length"
-                                                        class="title-dropdown"
-                                                        :dropdownObj="dropdownObj"
-                                                        :list="operationList"
-                                                        @click="$dshEmit($event, dataItem, dataIndex)"
-                                                        @click.native.stop="0"
-                                                    ></dsh-dropdown>
-                                                </div>
-
-                                                <!-- 显示字段 -->
-                                                <div
-                                                    v-for="colItem in selfColumns"
-                                                    :key="colItem._key"
-                                                    class="unit"
-                                                >
-                                                    <dsh-list-render
-                                                        v-if="colItem.renderBodyCell"
-                                                        :row="dataItem"
-                                                        :column="colItem"
-                                                        :index="0"
-                                                        :render="colItem.renderBodyCell"
-                                                    ></dsh-list-render>
-
-                                                    <div
-                                                        v-else-if="colItem.formatter"
-                                                        v-html="colItem.formatter(dataItem, 0)"
-                                                    ></div>
-
-                                                    <span
-                                                        v-else
-                                                        class="unit-control-text"
-                                                    >
-                                                        {{ dataItem[colItem._key] }}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </transition-group>
-                                </dsh-draggable>
-                            </CheckboxGroup>
-
-                            <!-- 空数据 -->
-                            <bri-loading
-                                v-if="!groupItem.list.length"
-                                class="list-loading"
-                                :value="2"
-                                :noText="selfPropsObj.noDataText"
-                            ></bri-loading>
-                            <!-- 提示语 -->
-                            <div
-                                v-if="groupItem.loading"
-                                class="list-tip"
-                                :style="{
-                                    paddingTop: '3px',
-                                    paddingBottom: '5px'
-                                }"
-                            >
-                                {{ getTip(groupItem) }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </template>
-
-            <!-- 无数据 -->
-            <div
-                v-else
-                class="DshCard-nodata"
-            >
-                {{ noDataText }}
-            </div>
-        </template>
-    </div>
-</template>
-
-<script>
-    import { resourceData } from "../../../data/index.js";
-
-    export default {
-        name: "DshPanel",
-        props: {
-            isLoading: {
-                type: Boolean,
-                default: false
-            },
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            columns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-
-            operationList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            extraOperationList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
-        },
-        data () {
-            return {
-                selections: [],
-                // curRow: null // 可以不声明
-
-                // 下拉菜单的配置
-                dropdownObj: {
-                    icon: "ios-more",
-                    size: 22,
-                    showDropdownItemIcon: false
-                }
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    multiple: false,
-                    groupField: "",
-                    titleField: "",
-                    loadingText: "加载中，请稍等……",
-                    finishedText: "暂无更多数据！",
-                    noDataText: "暂无数据",
-
-                    ...this.propsObj
-                };
-            },
-            multiple () {
-                return !!this.selfPropsObj.multiple;
-            },
-            loadingText () {
-                return this.selfPropsObj.loadingText;
-            },
-            finishedText () {
-                return this.selfPropsObj.finishedText;
-            },
-            noDataText () {
-                return this.selfPropsObj.noDataText;
-            },
-            groupField () {
-                return this.selfPropsObj.groupField;
-            },
-            groupFieldObj () {
-                return this.columns.find(colItem => colItem._key === this.groupField) || {};
-            },
-            groupData () {
-                return this.groupFieldObj._data || [];
-            },
-            titleField () {
-                return this.selfPropsObj.titleField;
-            },
-            // titleFieldObj () {
-            //     return this.columns.find(colItem => colItem._key === this.titleField) || {};
-            // },
-            selfColumns () {
-                return this.columns
-                    .filter(colItem => ![this.groupField, this.titleField].includes(colItem._key))
-                    .slice(0, 1);
-            },
-            groupBtnOperationList () {
-                return this.extraOperationList
-                    .filter(item =>
-                        ["canCreate", "canCustomCreate"].includes(item.type) || item.type.includes("canCustomCreate")
-                    )
-                    .map(item => ({
-                        ...item,
-                        name: "",
-                        btnType: "text",
-                        size: "small"
-                }));
-            },
-            dragOperationObj () {
-                return this.extraOperationList.find(item =>
-                    ["canDrag", "canCustomDrag"].includes(item.type) || item.type.includes("canCustomDrag")
-                );
-            },
-
-            selectIds: {
-                get () {
-                    return this.selections.map(item => item._id);
-                },
-                set (val) {
-                    this.selections = this.data
-                        .reduce((arr, groupItem) => [...arr, ...groupItem.list], [])
-                        .filter(item => val.includes(item._id));
-                }
-            }
-        },
-        created () {},
-        mounted () {
-            this.initGroupScroll();
-        },
-        methods: {
-            // 初始化是否滚动加载
-            initGroupScroll () {
-                const groupDoms = this.$el.querySelectorAll(".list-drag-transition");
-                const groupDomsArr = Array.prototype.slice.call(groupDoms);
-                groupDomsArr.forEach((groupElement, groupIndex) => {
-                    const groupItem = this.data[groupIndex];
-
-                    this.groupLoad(groupItem, groupElement);
-                    groupElement.addEventListener("DOMSubtreeModified", (ele) => {
-                        this.groupLoad(groupItem, groupElement);
-                    }, false);
-                });
-            },
-            // 分组滚动条滚动
-            groupScroll (groupItem, groupIndex, e) {
-                const groupElement = e.srcElement;
-
-                this.$emit("groupScroll", groupItem, e);
-                this.groupLoad(groupItem, groupElement);
-            },
-            // 判断是否要滚动加载
-            groupLoad (groupItem, groupElement) {
-                if (
-                    groupItem &&
-                    groupItem.loading !== true &&
-                    groupItem.finished !== true &&
-                    groupElement.children.length === groupItem.list.length &&
-                    groupElement.clientHeight + groupElement.scrollTop > groupElement.scrollHeight - 80
-                ) {
-                    this.$emit("groupLoad", groupItem, groupElement);
-                }
-            },
-
-            // 点击某行
-            clickRow (row) {
-                this.$emit("clickRow", row);
-            },
-            // 点击某行的选择框
-            clickRowCheckbox (row) {
-                this.curRow = row;
-                this.curRow.bool = !this.selectIds.includes(row._id);
-            },
-
-            // 切换全选
-            selectGroupAll (groupItem, bool) {
-                const groupListIds = groupItem.list.map(item => item._id);
-                groupItem.selectIds = groupItem.isSelectAll === true
-                    ? groupListIds
-                    : [];
-                this.selectIds = groupItem.isSelectAll === true
-                    ? [...new Set([...this.selectIds, ...groupListIds])]
-                    : this.selectIds.filter(id => !groupListIds.includes(id));
-
-                this.$emit("selectAll", this.selectIds, this.selections, groupItem.isSelectAll);
-                this.changeSelect();
-            },
-            // 选择行
-            selectRow (groupItem, ids) {
-                const groupListIds = groupItem.list.map(item => item._id);
-                this.selectIds = [
-                    ...this.selectIds.filter(id => !groupListIds.includes(id)),
-                    ...groupItem.selectIds
-                ];
-                groupItem.isSelectAll = groupListIds.length > 0 && groupItem.selectIds.length === groupListIds.length;
-
-                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
-                this.changeSelect();
-            },
-            // 改变选择项
-            changeSelect () {
-                this.$emit("changeSelect", this.selectIds, this.selections);
-            },
-
-            /* -------- 方法 -------- */
-            getBgColor (groupItem) {
-                const colorType = (this.groupData.find(item => item._key === groupItem._key) || { color: "color-default" }).color;
-                return this.groupFieldObj._useColor
-                    ? resourceData.colorMap[colorType]
-                    : resourceData.colorMap["color-default"];
-            },
-            getTip (groupItem) {
-                return !groupItem.list.length
-                    ? this.noDataText
-                    : groupItem.loading
-                        ? this.loadingText
-                        : groupItem.finished
-                            ? this.finishedText
-                            : "滑动加载更多数据...";
-            }
-        },
-        watch: {
-            data () {
-                this.initGroupScroll();
-                this.data.forEach(groupItem => {
-                    groupItem.isSelectAll = groupItem.list.length > 0 && groupItem.selectIds.length === groupItem.list.length;
-                });
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshPanel {
-        min-width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-        overflow: auto;
-        .bri-scrollbar6();
-
-        &-group {
-            width: 254px;
-            min-width:254px;
-            max-width:254px;
-            height: 100%;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            background: #fff;
-            padding: 0 8px;
-
-            &:first-of-type {
-                padding-left: 0px;
-            }
-            &:last-of-type {
-                padding-right: 0px;
-            }
-
-            &-header {
-                width: 100%;
-                height: 34px;
-                padding-bottom: 10px;
-                margin-bottom: 8px;
-                font-size: 14px;
-                border-bottom: 2px solid @themeColor;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .header {
-                    &-left {
-                        flex: 1;
-                        min-width: 0px;
-                        display: flex;
-                        &-tooltip {
-                            max-width: calc(100% - 20px);
-                            width: auto!important;
-                        }
-
-                        &-name {
-                            .dsh-ellipsis();
-                            font-size: 16px;
-                            font-weight: 500;
-                            line-height: 24px;
-                            color: @textColor;
-                        }
-
-                        &-num {
-                            color: @themeColor;
-                            font-size: 16px;
-                            font-weight: 500;
-                            line-height: 24px;
-                            margin-left: 8px;
-                        }
-                    }
-
-                    &-right {
-                        margin-left: 5px;
-                    }
-                }
-            }
-
-            &-list {
-                width: 100%;
-                flex: 1;
-                min-height: 0px;
-                border-top: none;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-                background: #f5f5f5;
-                border-radius: 4px;
-
-                .list {
-                    width: 100%;
-                    flex: 1;
-                    min-height: 0px;
-                    display: flex;
-                    flex-direction: column;
-
-                    &-drag {
-                        width: 100%;
-                        flex: 1;
-                        min-height: 0px;
-                        overflow: hidden;
-
-                        &-draggable {
-                            width: 100%;
-                            height: 100%;
-                        }
-
-                        &-transition {
-                            display: block;
-                            width: 100%;
-                            height: 100%;
-                            padding: 8px;
-                            overflow: auto;
-                            .bri-scrollbar6();
-
-                            .row-item {
-                                min-height: 70px;
-                                margin-bottom: 8px;
-                                padding: 8px;
-                                border-radius: 4px;
-                                background: #fff;
-                                border: 1px solid #fff;
-                                cursor: pointer;
-                                overflow: hidden;
-                                position: relative;
-                                &:hover {
-                                    border-color: @themeColor;
-                                    .row-item-move {
-                                        display: block;
-                                    }
-                                }
-
-                                &-move {
-                                    position: absolute;
-                                    bottom: 0px;
-                                    right: 0px;
-                                    background: @themeColor;
-                                    color: #fff;
-                                    width: 16px;
-                                    height: 16px;
-                                    border-top-left-radius: 4px;
-                                    line-height: 14px;
-                                    text-align: center;
-                                    display: none;
-                                }
-
-                                &-info {
-                                    .title {
-                                        display: flex;
-                                        align-items: center;
-                                        justify-content: space-around;
-                                        margin-bottom: 4px;
-                                        &-tooltip {
-                                           flex: 1;
-                                           width: auto;
-                                           white-space: nowrap;
-                                           overflow: hidden;
-                                           text-overflow: ellipsis;
-                                        }
-                                        &-name {
-                                            .dsh-ellipsis();
-                                            color: @textColor;
-                                            font-size: 14px;
-                                            line-height: 22px;
-                                        }
-
-                                        &-right {
-                                            margin-left: 4px;
-                                            color: @contentColor;
-                                        }
-                                    }
-
-                                    .unit {
-
-                                    }
-                                }
-
-                                &:last-child {
-                                    margin-bottom: 0px;
-                                }
-                            }
-                        }
-                    }
-
-                    &-tip {
-                        #dsh-nodata-small();
-                        line-height: 16px;
-                    }
-
-                    &-loading {
-                        height: calc(100% - 100px);
-                        margin-bottom: 10px;
-                    }
-
-                    &-nodata {
-                        background: #fff;
-                        border: 1px solid @borderColor;
-                        border-radius: 4px;
-                    }
-                }
-            }
-        }
-    }
-</style>
-<style lang="less">
-    .DshPanel {
-        &-group {
-            &-header {
-                .ivu-tooltip-rel {
-                    width: 100%;
-                }
-                .ivu-checkbox-inner {
-                    outline: none;
-                    box-shadow: none;
-                }
-
-                .BriButton {
-                    width: 24px;
-                    padding: 0px;
-                    color: @contentColor;
-                    span {
-                        display: none;
-                    }
-                }
-            }
-
-            &-list {
-                .list {
-                    &-loading {
-                        svg {
-                            width: 70%;
-                        }
-                    }
-                    .ivu-tooltip-rel {
-                        width: 100%;
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshPanel">
+        <!-- 加载 -->
+        <bri-loading
+            v-if="isLoading"
+            class="DshPanel-loading"
+        ></bri-loading>
+        <template v-else>
+            <!-- 有数据 -->
+            <template v-if="data.length">
+                <div
+                    v-for="(groupItem, groupIndex) in data"
+                    :key="groupIndex"
+                    class="DshPanel-group"
+                >
+                    <!-- 组 标头 -->
+                    <div
+                        class="DshPanel-group-header"
+                        :style="{
+                           'border-color': getBgColor(groupItem)
+                        }"
+                    >
+                        <!-- 左 -->
+                        <Checkbox
+                            v-if="multiple"
+                            class="header-checkbox"
+                            v-model="groupItem.isSelectAll"
+                            @on-change="selectGroupAll(groupItem, $event)"
+                        ></Checkbox>
+
+                        <!-- 左 -->
+                        <div class="header-left">
+                            <bri-tooltip
+                                :content="groupItem.name"
+                                placement="top"
+                                :transfer="true"
+                                class="header-left-tooltip"
+                            >
+                                <span class="header-left-name">
+                                    {{ groupItem.name }}
+                                </span>
+                            </bri-tooltip>
+                            <span
+                                class="header-left-num"
+                                :style="{
+                                    'color': getBgColor(groupItem)
+                                }"
+                            >
+                                {{ groupItem.total }}
+                            </span>
+                        </div>
+
+                        <!-- 右 -->
+                        <span class="header-right">
+                            <dsh-buttons
+                                :list="groupBtnOperationList"
+                                @click="$dshEmit($event, { [groupField]: groupItem._key })"
+                            ></dsh-buttons>
+                        </span>
+                    </div>
+
+                    <!-- 组 数据列 -->
+                    <div class="DshPanel-group-list">
+                        <div :class="{
+                                'list': true,
+                                'list-nodata': !groupItem.list.length
+                            }">
+                            <CheckboxGroup
+                                class="list-drag"
+                                v-model="groupItem.selectIds"
+                                @on-change="selectRow(groupItem, $event)"
+                            >
+                                <dsh-draggable
+                                    class="list-drag-draggable"
+                                    v-model="groupItem.list"
+                                    group="panel"
+                                    animation="300"
+                                    :disabled="!dragOperationObj"
+                                    @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
+                                    @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
+                                >
+                                    <transition-group
+                                        :id="groupItem._key"
+                                        class="list-drag-transition"
+                                        @scroll.native="groupScroll(groupItem, groupIndex, $event)"
+                                    >
+                                        <div
+                                            v-for="(dataItem, dataIndex) in groupItem.list"
+                                            :key="dataItem._id"
+                                            :id="dataItem._id"
+                                            class="row-item"
+                                            @click="clickRow(dataItem, dataIndex)"
+                                        >
+                                            <dsh-icons
+                                                v-if="dragOperationObj"
+                                                class="row-item-move"
+                                                :list="[{
+                                                    customIcon: 'bico-tuodong',
+                                                    size: '14px'
+                                                }]"
+                                            ></dsh-icons>
+                                            <!-- 内容 -->
+                                            <div class="row-item-info">
+                                                <div class="title">
+                                                    <!-- 复选框 -->
+                                                    <Checkbox
+                                                        v-if="multiple"
+                                                        class="title-checkbox"
+                                                        :label="dataItem._id"
+                                                        @click.native.stop="clickRowCheckbox(dataItem)"
+                                                    >{{ "" }}</Checkbox>
+
+                                                    <!-- 标题 -->
+                                                    <bri-tooltip
+                                                        class="title-tooltip"
+                                                        :content="dataItem[titleField]"
+                                                        placement="top"
+                                                        :transfer="true"
+                                                    >
+                                                        <div class="title-name">
+                                                            {{ dataItem[titleField] }}
+                                                        </div>
+                                                    </bri-tooltip>
+                                                    <!-- 下拉操作 -->
+                                                    <dsh-dropdown
+                                                        v-if="operationList.length"
+                                                        class="title-dropdown"
+                                                        :dropdownObj="dropdownObj"
+                                                        :list="operationList"
+                                                        @click="$dshEmit($event, dataItem, dataIndex)"
+                                                        @click.native.stop="0"
+                                                    ></dsh-dropdown>
+                                                </div>
+
+                                                <!-- 显示字段 -->
+                                                <div
+                                                    v-for="colItem in selfColumns"
+                                                    :key="colItem._key"
+                                                    class="unit"
+                                                >
+                                                    <dsh-list-render
+                                                        v-if="colItem.renderBodyCell"
+                                                        :row="dataItem"
+                                                        :column="colItem"
+                                                        :index="0"
+                                                        :render="colItem.renderBodyCell"
+                                                    ></dsh-list-render>
+
+                                                    <div
+                                                        v-else-if="colItem.formatter"
+                                                        v-html="colItem.formatter(dataItem, 0)"
+                                                    ></div>
+
+                                                    <span
+                                                        v-else
+                                                        class="unit-control-text"
+                                                    >
+                                                        {{ dataItem[colItem._key] }}
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </transition-group>
+                                </dsh-draggable>
+                            </CheckboxGroup>
+
+                            <!-- 空数据 -->
+                            <bri-loading
+                                v-if="!groupItem.list.length"
+                                class="list-loading"
+                                :value="2"
+                                :noText="selfPropsObj.noDataText"
+                            ></bri-loading>
+                            <!-- 提示语 -->
+                            <div
+                                v-if="groupItem.loading"
+                                class="list-tip"
+                                :style="{
+                                    paddingTop: '3px',
+                                    paddingBottom: '5px'
+                                }"
+                            >
+                                {{ getTip(groupItem) }}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+
+            <!-- 无数据 -->
+            <div
+                v-else
+                class="DshCard-nodata"
+            >
+                {{ noDataText }}
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    import { resourceData } from "../../../data/index.js";
+
+    export default {
+        name: "DshPanel",
+        props: {
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            extraOperationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                selections: [],
+                // curRow: null // 可以不声明
+
+                // 下拉菜单的配置
+                dropdownObj: {
+                    icon: "ios-more",
+                    size: 22,
+                    showDropdownItemIcon: false
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    multiple: false,
+                    groupField: "",
+                    titleField: "",
+                    loadingText: "加载中，请稍等……",
+                    finishedText: "暂无更多数据！",
+                    noDataText: "暂无数据",
+
+                    ...this.propsObj
+                };
+            },
+            multiple () {
+                return !!this.selfPropsObj.multiple;
+            },
+            loadingText () {
+                return this.selfPropsObj.loadingText;
+            },
+            finishedText () {
+                return this.selfPropsObj.finishedText;
+            },
+            noDataText () {
+                return this.selfPropsObj.noDataText;
+            },
+            groupField () {
+                return this.selfPropsObj.groupField;
+            },
+            groupFieldObj () {
+                return this.columns.find(colItem => colItem._key === this.groupField) || {};
+            },
+            groupData () {
+                return this.groupFieldObj._data || [];
+            },
+            titleField () {
+                return this.selfPropsObj.titleField;
+            },
+            // titleFieldObj () {
+            //     return this.columns.find(colItem => colItem._key === this.titleField) || {};
+            // },
+            selfColumns () {
+                return this.columns
+                    .filter(colItem => ![this.groupField, this.titleField].includes(colItem._key))
+                    .slice(0, 1);
+            },
+            groupBtnOperationList () {
+                return this.extraOperationList
+                    .filter(item =>
+                        ["canCreate", "canCustomCreate"].includes(item.type) || item.type.includes("canCustomCreate")
+                    )
+                    .map(item => ({
+                        ...item,
+                        name: "",
+                        btnType: "text",
+                        size: "small"
+                }));
+            },
+            dragOperationObj () {
+                return this.extraOperationList.find(item =>
+                    ["canDrag", "canCustomDrag"].includes(item.type) || item.type.includes("canCustomDrag")
+                );
+            },
+
+            selectIds: {
+                get () {
+                    return this.selections.map(item => item._id);
+                },
+                set (val) {
+                    this.selections = this.data
+                        .reduce((arr, groupItem) => [...arr, ...groupItem.list], [])
+                        .filter(item => val.includes(item._id));
+                }
+            }
+        },
+        created () {},
+        mounted () {
+            this.initGroupScroll();
+        },
+        methods: {
+            // 初始化是否滚动加载
+            initGroupScroll () {
+                const groupDoms = this.$el.querySelectorAll(".list-drag-transition");
+                const groupDomsArr = Array.prototype.slice.call(groupDoms);
+                groupDomsArr.forEach((groupElement, groupIndex) => {
+                    const groupItem = this.data[groupIndex];
+
+                    this.groupLoad(groupItem, groupElement);
+                    groupElement.addEventListener("DOMSubtreeModified", (ele) => {
+                        this.groupLoad(groupItem, groupElement);
+                    }, false);
+                });
+            },
+            // 分组滚动条滚动
+            groupScroll (groupItem, groupIndex, e) {
+                const groupElement = e.srcElement;
+
+                this.$emit("groupScroll", groupItem, e);
+                this.groupLoad(groupItem, groupElement);
+            },
+            // 判断是否要滚动加载
+            groupLoad (groupItem, groupElement) {
+                if (
+                    groupItem &&
+                    groupItem.loading !== true &&
+                    groupItem.finished !== true &&
+                    groupElement.children.length === groupItem.list.length &&
+                    groupElement.clientHeight + groupElement.scrollTop > groupElement.scrollHeight - 80
+                ) {
+                    this.$emit("groupLoad", groupItem, groupElement);
+                }
+            },
+
+            // 点击某行
+            clickRow (row) {
+                this.$emit("clickRow", row);
+            },
+            // 点击某行的选择框
+            clickRowCheckbox (row) {
+                this.curRow = row;
+                this.curRow.bool = !this.selectIds.includes(row._id);
+            },
+
+            // 切换全选
+            selectGroupAll (groupItem, bool) {
+                const groupListIds = groupItem.list.map(item => item._id);
+                groupItem.selectIds = groupItem.isSelectAll === true
+                    ? groupListIds
+                    : [];
+                this.selectIds = groupItem.isSelectAll === true
+                    ? [...new Set([...this.selectIds, ...groupListIds])]
+                    : this.selectIds.filter(id => !groupListIds.includes(id));
+
+                this.$emit("selectAll", this.selectIds, this.selections, groupItem.isSelectAll);
+                this.changeSelect();
+            },
+            // 选择行
+            selectRow (groupItem, ids) {
+                const groupListIds = groupItem.list.map(item => item._id);
+                this.selectIds = [
+                    ...this.selectIds.filter(id => !groupListIds.includes(id)),
+                    ...groupItem.selectIds
+                ];
+                groupItem.isSelectAll = groupListIds.length > 0 && groupItem.selectIds.length === groupListIds.length;
+
+                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("changeSelect", this.selectIds, this.selections);
+            },
+
+            /* -------- 方法 -------- */
+            getBgColor (groupItem) {
+                const colorType = (this.groupData.find(item => item._key === groupItem._key) || { color: "color-default" }).color;
+                return this.groupFieldObj._useColor
+                    ? resourceData.colorMap[colorType]
+                    : resourceData.colorMap["color-default"];
+            },
+            getTip (groupItem) {
+                return !groupItem.list.length
+                    ? this.noDataText
+                    : groupItem.loading
+                        ? this.loadingText
+                        : groupItem.finished
+                            ? this.finishedText
+                            : "滑动加载更多数据...";
+            }
+        },
+        watch: {
+            data () {
+                this.initGroupScroll();
+                this.data.forEach(groupItem => {
+                    groupItem.isSelectAll = groupItem.list.length > 0 && groupItem.selectIds.length === groupItem.list.length;
+                });
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshPanel {
+        min-width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        overflow: auto;
+        .bri-scrollbar6();
+
+        &-group {
+            width: 254px;
+            min-width:254px;
+            max-width:254px;
+            height: 100%;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            background: #fff;
+            padding: 0 8px;
+
+            &:first-of-type {
+                padding-left: 0px;
+            }
+            &:last-of-type {
+                padding-right: 0px;
+            }
+
+            &-header {
+                width: 100%;
+                height: 34px;
+                padding-bottom: 10px;
+                margin-bottom: 8px;
+                font-size: 14px;
+                border-bottom: 2px solid @themeColor;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .header {
+                    &-left {
+                        flex: 1;
+                        min-width: 0px;
+                        display: flex;
+                        &-tooltip {
+                            max-width: calc(100% - 20px);
+                            width: auto!important;
+                        }
+
+                        &-name {
+                            .dsh-ellipsis();
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 24px;
+                            color: @textColor;
+                        }
+
+                        &-num {
+                            color: @themeColor;
+                            font-size: 16px;
+                            font-weight: 500;
+                            line-height: 24px;
+                            margin-left: 8px;
+                        }
+                    }
+
+                    &-right {
+                        margin-left: 5px;
+                    }
+                }
+            }
+
+            &-list {
+                width: 100%;
+                flex: 1;
+                min-height: 0px;
+                border-top: none;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                background: #f5f5f5;
+                border-radius: 4px;
+
+                .list {
+                    width: 100%;
+                    flex: 1;
+                    min-height: 0px;
+                    display: flex;
+                    flex-direction: column;
+
+                    &-drag {
+                        width: 100%;
+                        flex: 1;
+                        min-height: 0px;
+                        overflow: hidden;
+
+                        &-draggable {
+                            width: 100%;
+                            height: 100%;
+                        }
+
+                        &-transition {
+                            display: block;
+                            width: 100%;
+                            height: 100%;
+                            padding: 8px;
+                            overflow: auto;
+                            .bri-scrollbar6();
+
+                            .row-item {
+                                min-height: 70px;
+                                margin-bottom: 8px;
+                                padding: 8px;
+                                border-radius: 4px;
+                                background: #fff;
+                                border: 1px solid #fff;
+                                cursor: pointer;
+                                overflow: hidden;
+                                position: relative;
+                                &:hover {
+                                    border-color: @themeColor;
+                                    .row-item-move {
+                                        display: block;
+                                    }
+                                }
+
+                                &-move {
+                                    position: absolute;
+                                    bottom: 0px;
+                                    right: 0px;
+                                    background: @themeColor;
+                                    color: #fff;
+                                    width: 16px;
+                                    height: 16px;
+                                    border-top-left-radius: 4px;
+                                    line-height: 14px;
+                                    text-align: center;
+                                    display: none;
+                                }
+
+                                &-info {
+                                    .title {
+                                        display: flex;
+                                        align-items: center;
+                                        justify-content: space-around;
+                                        margin-bottom: 4px;
+                                        &-tooltip {
+                                           flex: 1;
+                                           width: auto;
+                                           white-space: nowrap;
+                                           overflow: hidden;
+                                           text-overflow: ellipsis;
+                                        }
+                                        &-name {
+                                            .dsh-ellipsis();
+                                            color: @textColor;
+                                            font-size: 14px;
+                                            line-height: 22px;
+                                        }
+
+                                        &-right {
+                                            margin-left: 4px;
+                                            color: @contentColor;
+                                        }
+                                    }
+
+                                    .unit {
+
+                                    }
+                                }
+
+                                &:last-child {
+                                    margin-bottom: 0px;
+                                }
+                            }
+                        }
+                    }
+
+                    &-tip {
+                        #dsh-nodata-small();
+                        line-height: 16px;
+                    }
+
+                    &-loading {
+                        height: calc(100% - 100px);
+                        margin-bottom: 10px;
+                    }
+
+                    &-nodata {
+                        background: #fff;
+                        border: 1px solid @borderColor;
+                        border-radius: 4px;
+                    }
+                }
+            }
+        }
+    }
+</style>
+<style lang="less">
+    .DshPanel {
+        &-group {
+            &-header {
+                .ivu-tooltip-rel {
+                    width: 100%;
+                }
+                .ivu-checkbox-inner {
+                    outline: none;
+                    box-shadow: none;
+                }
+
+                .BriButton {
+                    width: 24px;
+                    padding: 0px;
+                    color: @contentColor;
+                    span {
+                        display: none;
+                    }
+                }
+            }
+
+            &-list {
+                .list {
+                    &-loading {
+                        svg {
+                            width: 70%;
+                        }
+                    }
+                    .ivu-tooltip-rel {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+</style>