bri-components 1.0.0

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

@@ -0,0 +1,407 @@
+<template>
+    <div class="DshPanel">
+        <div
+            class="DshPanel-group"
+            v-for="(groupItem, groupIndex) in data"
+            :key="groupIndex"
+        >
+            <!-- 组 标头 -->
+            <div
+                class="DshPanel-group-title"
+                :style="{
+                    backgroundColor: getBgColor(groupItem),
+                    color: colorMap[getBgColor(groupItem)] || '#fff'
+                }"
+            >
+                <span class="DshPanel-group-title-name">
+                    <Ctooltip
+                        class="unit-label"
+                        placement="top"
+                        :transfer="true"
+                        :content="groupItem.name"
+                    >
+                        <span class="dsh-ellipsis">{{ groupItem.name }} &nbsp;</span>
+                    </Ctooltip>
+                </span>
+                <span>
+                    <span class="DshPanel-group-title-number">
+                        {{ groupItem.total }}
+                    </span>
+                    条
+                </span>
+                <span>（已加载{{ groupItem.list.length }}条）</span>
+            </div>
+
+            <!-- 组 数据列 -->
+            <div
+                class="DshPanel-group-list"
+                :style="{
+                    backgroundColor: $getColor(getBgColor(groupItem))
+                }"
+            >
+                <!-- 无数据 -->
+                <div
+                    v-if="!groupItem.list.length"
+                    class="dsh-tip"
+                    style="position: absolute; top: 0px; left: 0px; width: 100%;"
+                >
+                    {{noDataText}}
+                </div>
+
+                <!-- 拖拽 -->
+                <dsh-draggable
+                    v-model="groupItem.list"
+                    group="panel"
+                    animation="300"
+                    class="list-drag"
+                    :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
+                            class="list-item"
+                            v-for="(dataItem, dataIndex) in groupItem.list"
+                            :key="dataItem._id"
+                            :id="dataItem._id"
+                            @click="clickRow(dataItem, dataIndex)"
+                        >
+                            <!-- 下拉操作 -->
+                            <dsh-dropdown
+                                class="list-item-dropdown"
+                                :dropdownObj="dropdownObj"
+                                :list="operationList"
+                                @click="$dshEmit($event, dataItem, dataIndex)"
+                                @click.native.stop="0"
+                            ></dsh-dropdown>
+
+                            <!-- 标题 -->
+                            <div class="list-item-title dsh-ellipsis">{{ dataItem[titleField] }}</div>
+
+                            <!-- 显示字段 -->
+                            <div
+                                class="list-item-cols unit"
+                                v-for="colItem in selfColumns"
+                                :key="colItem._key"
+                            >
+                                <!-- 左 label -->
+                                <Ctooltip
+                                    class="unit-label"
+                                    placement="top"
+                                    :transfer="true"
+                                    maxWidth="200"
+                                    :content="colItem._name"
+                                >
+                                    <span class="dsh-ellipsis">{{ colItem._name }}</span>
+                                </Ctooltip>
+                                <span class="unit-colon">：</span>
+
+                                <!-- 右 val -->
+                                <div class="unit-value dsh-ellipsis">
+                                    <dsh-td-render
+                                        v-if="colItem.render"
+                                        :row="dataItem"
+                                        :column="colItem"
+                                        :index="0"
+                                        :render="colItem.render"
+                                    ></dsh-td-render>
+
+                                    <div
+                                        v-else-if="colItem.formatter"
+                                        v-html="colItem.formatter(dataItem, 0)"
+                                    ></div>
+
+                                    <span
+                                        v-else
+                                        class="unit-value-text"
+                                    >{{ dataItem[colItem._key] }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </transition-group>
+                </dsh-draggable>
+                <!-- 组 操作按钮（添加） -->
+                <dsh-buttons
+                    class="DshPanel-group-list-btns"
+                    :list="groupBtnOperationList"
+                    @click="$dshEmit($event, { [groupField]: groupItem._key })"
+                ></dsh-buttons>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    // 浅色转化为对应深色
+    const colorMap = {
+        "#CDE6FF": "#6DAEF2",
+        "#C1FCFF": "#40CBD2",
+        "#C5FFD9": "#50C979",
+        "#FFEDC8": "#FFC53B",
+        "#FFDCAC": "#FF9300",
+        "#FFD3B6": "#FA6400",
+        "#EEB0FF": "#B620E0",
+        "#D1B3FF": "#7E41DF",
+        "#B1C7FF": "#25428D",
+        "#DCDCDC": "#5D5D5D"
+
+    };
+    export default {
+        name: "DshPanel",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {
+                        titleField: ""
+                    };
+                }
+            },
+            noDataText: {
+                type: String,
+                default: "暂无数据..."
+            },
+
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            extraOperationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                // 下拉菜单的配置
+                dropdownObj: {
+                    icon: "ios-more",
+                    size: 22,
+                    color: "#E9ECF4",
+                    showDropdownItemIcon: false
+                },
+
+                getBgColor (groupItem) {
+                    return this.groupFieldObj._useColor
+                        ? (this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "#ccc" }).color
+                        : "#ccc";
+                },
+                colorMap
+            };
+        },
+        computed: {
+            groupField () {
+                return this.propsObj.groupField;
+            },
+            groupFieldObj () {
+                return this.propsObj.groupFieldObj || {};
+            },
+            titleField () {
+                return this.propsObj.titleField;
+            },
+            selfColumns () {
+                return this.columns
+                    .filter(colItem => ![this.groupField, this.titleField].includes(colItem._key))
+                    .map(colItem => ({
+                        ...colItem,
+                        titleAlign: "left",
+                        columnAlign: "left"
+                    }))
+                    .slice(0, 1);
+            },
+
+            groupBtnOperationList () {
+                return this.extraOperationList
+                    .filter(item => ["canCreate", "canCustomCreate"].includes(item.type) || item.type.includes("canCustomCreate"))
+                    .map(item => ({
+                        ...item,
+                        long: true
+                }));
+            },
+            dragOperationObj () {
+                return this.extraOperationList.find(item => ["canDrag", "canCustomDrag"].includes(item.type) || item.type.includes("canCustomDrag"));
+            }
+        },
+        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.loading !== true &&
+                    groupItem.finished !== true &&
+                    groupElement.children.length === groupItem.list.length &&
+                    groupElement.clientHeight + groupElement.scrollTop > groupElement.scrollHeight - 20
+                ) {
+                    this.$emit("groupLoad", groupItem, groupElement);
+                }
+            },
+
+            // 点击某行
+            clickRow (row) {
+                this.$emit("clickRow", row);
+            }
+        },
+        watch: {
+            data () {
+                this.initGroupScroll();
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshPanel {
+        min-width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+
+        &-group {
+            width: 300px;
+            min-width: 300px;
+            max-width: 300px;
+            height: 100%;
+            padding: 10px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+
+            &-title {
+                width: 100%;
+                height: 50px;
+                padding: 15px 10px;
+                display: flex;
+                border-radius: 10px 10px 0px 0px;
+                font-size: 14px;
+                &-name {
+                    max-width: 120px;
+                }
+                &-number {
+                    font-weight: bold;
+                }
+            }
+
+            &-list {
+                width: 100%;
+                flex: 1;
+                min-height: 0px;
+                border: 1px dashed #cccccc;
+                padding: 10px 10px 40px;
+                border-top: none;
+                position: relative;
+
+                .list-drag {
+                    width: 100%;
+                    height: 100%;
+                    &-transition {
+                        display: block;
+                        width: 100%;
+                        height: 100%;
+                        overflow: auto;
+                    }
+                }
+                .list-item {
+                    margin-bottom: 10px;
+                    height: 60px;
+                    background: #FFFFFF;
+                    border: 1px solid rgba(102, 110, 126, 0.1);
+                    border-radius: 4px;
+                    cursor: pointer;
+                    position: relative;
+                    padding: 10px 17px;
+
+                    &-dropdown {
+                        position: absolute;
+                        top: 5px;
+                        right: 5px;
+                    }
+
+                    &-title {
+                        width: calc(100% - 22px);
+                        font-size: 14px;
+                        font-family: Source Han Sans CN;
+                        font-weight: 500;
+                        color: #515A6E;
+                        margin-bottom: 2px;
+                    }
+
+                    &-cols {
+                    }
+                    .unit {
+                        display: flex;
+                        flex-direction: row;
+                        color: #515A6E;
+                        &-label {
+                            max-width: 60px;
+                        }
+                        &-colon {
+
+                        }
+                        &-value {
+                            flex: 1;
+                        }
+                    }
+                }
+                &-btns {
+                    width: 100%;
+                    text-align: center;
+                    height: 33px;
+                }
+            }
+
+        }
+    }
+</style>
+<style lang="less">
+    .DshPanel {
+        &-group-list-btns {
+            .ivu-btn {
+                background: transparent;
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,82 @@
+<template>
+    <div class="DshSingleData">
+        <dsh-form
+            v-if="formData"
+            class="DshSingleData-form"
+            :canEdit="canEdit"
+            :formData="formData"
+            :formList="columns"
+        ></dsh-form>
+
+        <!-- 暂无数据 -->
+        <div
+            v-else
+            class="DshSingleData-nodata"
+        >
+            <img :src="$imageSrcMap.app.nodata" />
+        </div>
+
+        <!-- 底部编辑按钮 -->
+        <dsh-buttons
+            v-if="btnList.length && formData"
+            class="DshSingleData-footer"
+            :list="btnList"
+            @click="$dshEmit($event, formData)"
+        ></dsh-buttons>
+    </div>
+</template>
+
+<script>
+
+    export default {
+        name: "DshSingleData",
+        components: {},
+        props: {
+            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 [];
+                }
+            }
+        },
+        computed: {
+            formData () {
+                return this.data[0] || undefined;
+            },
+            btnList () {
+                return this.operationList.filter(btnItem => btnItem.type !== "canShow");
+            }
+        },
+        data () {
+            return {
+                canEdit: false
+            };
+        },
+        created () {},
+        methods: {}
+    };
+</script>