bri-components 1.5.22 → 1.6.0

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

@@ -1,219 +1,219 @@
-<template>
-    <div class="DshBox">
-        <div class="DshBox-list">
-            <component
-                :is="`Dsh${$firstUpperCase(mode)}`"
-                ref="list"
-                :data="data"
-                :columns="columns"
-                :ownColumns="ownColumns"
-                :operationList="dropdownOperationList"
-                :extraOperationList="extraOperationList"
-                :propsObj="listPropsObj"
-                :changedFields="changedFields"
-                :isLoading="isLoading ? isLoading : listPropsObj && listPropsObj.isLoading"
-                :noDataText="listPropsObj && listPropsObj.noDataText || '暂无数据…'"
-                @clickRow="clickRow"
-                @changeSort="changeSort"
-                @changeSelect="changeSelect"
-                @selectAll="selectAll"
-                @select="select"
-                @groupScroll="groupScroll"
-                @groupLoad="groupLoad"
-                @dsh="dshEmit"
-            >
-                <slot
-                    name="list"
-                    slot-scope="{ data }"
-                    :data="data"
-                ></slot>
-
-                <slot
-                    name="col"
-                    slot="col"
-                    slot-scope="{ col }"
-                    :col="col"
-                ></slot>
-            </component>
-        </div>
-
-        <!-- 中间插槽 -->
-        <slot></slot>
-
-        <!-- 分页 -->
-        <div
-            v-if="!['panel', 'singleData'].includes(mode) && pagePropsObj"
-            class="DshBox-page"
-        >
-            <dsh-page
-                :mode="pageMode"
-                :total="total"
-                :propsObj="pagePropsObj"
-                @changePage="changePage"
-                @changePageSize="changePageSize"
-            >
-                <slot name="page"></slot>
-            </dsh-page>
-        </div>
-    </div>
-</template>
-
-<script>
-    // 表格模式、竖向表格模式、卡片模式、看板模式
-    const tableTypes = ["table", "crossTable", "panel", "card", "list", "singleData"];
-    // 得到组件注册对象
-    function registerComponents (types) {
-        return types.reduce((obj, item) => {
-            const componentName = `Dsh${item.toString()[0].toUpperCase()}${item.toString().slice(1)}`;
-            return Object.assign(obj, {
-                [componentName]: () => import(`./${componentName}.vue`)
-            });
-        }, {});
-    };
-
-    export default {
-        name: "DshBox",
-        components: registerComponents(tableTypes),
-        props: {
-            mode: {
-                type: String,
-                default: "list",
-                validator (val) {
-                    return ["table", "crossTable", "panel", "card", "list", "singleData"].includes(val);
-                }
-            },
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            ownColumns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            columns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            changedFields: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            operationList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            isLoading: Boolean,
-            listPropsObj: Object,
-
-            pageMode: String,
-            total: Number,
-            pagePropsObj: Object
-        },
-        data () {
-            return {};
-        },
-        computed: {
-            dropdownOperationList () {
-                return this.operationList.filter(item =>
-                    !(
-                        ["canCreate", "canCustomCreate", "canDrag", "canCustomDrag"].includes(item.type) ||
-                        item.type.includes("canCustomCreate") ||
-                        item.type.includes("canCustomDrag")
-                    )
-                );
-            },
-            extraOperationList () {
-                return this.operationList.filter(item =>
-                    ["canCreate", "canCustomCreate", "canDrag", "canCustomDrag"].includes(item.type) ||
-                    item.type.includes("canCustomCreate") ||
-                    item.type.includes("canCustomDrag")
-                );
-            }
-        },
-        created () {},
-        methods: {
-            // 点击某行
-            clickRow (...params) {
-                this.$emit("clickRow", ...params);
-            },
-
-            // 改变选择项
-            changeSort (...params) {
-                this.$emit("sortChange", ...params);
-            },
-            // 改变选择项
-            changeSelect (...params) {
-                this.$emit("changeSelect", ...params);
-            },
-            // 切换全选
-            selectAll (...params) {
-                this.$emit("selectAll", ...params);
-            },
-            // 切换选择
-            select (...params) {
-                this.$emit("select", ...params);
-            },
-            // 看板分组列表滚动事件
-            groupScroll (...params) {
-                this.$emit("groupScroll", ...params);
-            },
-            // 看板分组列表滚动至底部事件
-            groupLoad (...params) {
-                this.$emit("groupLoad", ...params);
-            },
-
-            // 转发
-            dshEmit (...params) {
-                this.$emit("dsh", ...params);
-            },
-            // 切换分页
-            changePage (...params) {
-                this.$emit("changePage", ...params);
-            },
-            // 切换分页条数
-            changePageSize (...params) {
-                this.$emit("changePageSize", ...params);
-            }
-        },
-        watch: {
-            "listPropsObj.checkboxOption.selectedRowKeys" (newVal) {
-                if (!newVal.length && this.$refs.list && this.$refs.list.selections) {
-                    this.$refs.list.selections = [];
-                }
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshBox {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-
-        &-list {
-            width: 100%;
-            flex: 1;
-            min-height: 60px;
-            background: #fff;
-            overflow: auto;
-        }
-
-        &-page {
-            margin-top: 10px;
-            width: 100%;
-            height: 30px;
-        }
-    }
-</style>
+<template>
+    <div class="DshBox">
+        <div class="DshBox-list">
+            <component
+                :is="`Dsh${$firstUpperCase(mode)}`"
+                ref="list"
+                :data="data"
+                :columns="columns"
+                :ownColumns="ownColumns"
+                :operationList="dropdownOperationList"
+                :extraOperationList="extraOperationList"
+                :propsObj="listPropsObj"
+                :changedFields="changedFields"
+                :isLoading="isLoading ? isLoading : listPropsObj && listPropsObj.isLoading"
+                :noDataText="listPropsObj && listPropsObj.noDataText || '暂无数据…'"
+                @clickRow="clickRow"
+                @changeSort="changeSort"
+                @changeSelect="changeSelect"
+                @selectAll="selectAll"
+                @select="select"
+                @groupScroll="groupScroll"
+                @groupLoad="groupLoad"
+                @dsh="dshEmit"
+            >
+                <slot
+                    name="list"
+                    slot-scope="{ data }"
+                    :data="data"
+                ></slot>
+
+                <slot
+                    name="col"
+                    slot="col"
+                    slot-scope="{ col }"
+                    :col="col"
+                ></slot>
+            </component>
+        </div>
+
+        <!-- 中间插槽 -->
+        <slot></slot>
+
+        <!-- 分页 -->
+        <div
+            v-if="!['panel', 'singleData'].includes(mode) && pagePropsObj"
+            class="DshBox-page"
+        >
+            <dsh-page
+                :mode="pageMode"
+                :total="total"
+                :propsObj="pagePropsObj"
+                @changePage="changePage"
+                @changePageSize="changePageSize"
+            >
+                <slot name="page"></slot>
+            </dsh-page>
+        </div>
+    </div>
+</template>
+
+<script>
+    // 表格模式、竖向表格模式、卡片模式、看板模式
+    const tableTypes = ["table", "crossTable", "panel", "card", "list", "singleData"];
+    // 得到组件注册对象
+    function registerComponents (types) {
+        return types.reduce((obj, item) => {
+            const componentName = `Dsh${item.toString()[0].toUpperCase()}${item.toString().slice(1)}`;
+            return Object.assign(obj, {
+                [componentName]: () => import(`./${componentName}.vue`)
+            });
+        }, {});
+    };
+
+    export default {
+        name: "DshBox",
+        components: registerComponents(tableTypes),
+        props: {
+            mode: {
+                type: String,
+                default: "list",
+                validator (val) {
+                    return ["table", "crossTable", "panel", "card", "list", "singleData"].includes(val);
+                }
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            ownColumns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            changedFields: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            isLoading: Boolean,
+            listPropsObj: Object,
+
+            pageMode: String,
+            total: Number,
+            pagePropsObj: Object
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            dropdownOperationList () {
+                return this.operationList.filter(item =>
+                    !(
+                        ["canCreate", "canCustomCreate", "canDrag", "canCustomDrag"].includes(item.type) ||
+                        item.type.includes("canCustomCreate") ||
+                        item.type.includes("canCustomDrag")
+                    )
+                );
+            },
+            extraOperationList () {
+                return this.operationList.filter(item =>
+                    ["canCreate", "canCustomCreate", "canDrag", "canCustomDrag"].includes(item.type) ||
+                    item.type.includes("canCustomCreate") ||
+                    item.type.includes("canCustomDrag")
+                );
+            }
+        },
+        created () {},
+        methods: {
+            // 点击某行
+            clickRow (...params) {
+                this.$emit("clickRow", ...params);
+            },
+
+            // 改变选择项
+            changeSort (...params) {
+                this.$emit("sortChange", ...params);
+            },
+            // 改变选择项
+            changeSelect (...params) {
+                this.$emit("changeSelect", ...params);
+            },
+            // 切换全选
+            selectAll (...params) {
+                this.$emit("selectAll", ...params);
+            },
+            // 切换选择
+            select (...params) {
+                this.$emit("select", ...params);
+            },
+            // 看板分组列表滚动事件
+            groupScroll (...params) {
+                this.$emit("groupScroll", ...params);
+            },
+            // 看板分组列表滚动至底部事件
+            groupLoad (...params) {
+                this.$emit("groupLoad", ...params);
+            },
+
+            // 转发
+            dshEmit (...params) {
+                this.$emit("dsh", ...params);
+            },
+            // 切换分页
+            changePage (...params) {
+                this.$emit("changePage", ...params);
+            },
+            // 切换分页条数
+            changePageSize (...params) {
+                this.$emit("changePageSize", ...params);
+            }
+        },
+        watch: {
+            "listPropsObj.checkboxOption.selectedRowKeys" (newVal) {
+                if (!newVal.length && this.$refs.list && this.$refs.list.selections) {
+                    this.$refs.list.selections = [];
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshBox {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+
+        &-list {
+            width: 100%;
+            flex: 1;
+            min-height: 60px;
+            background: #fff;
+            overflow: auto;
+        }
+
+        &-page {
+            margin-top: 10px;
+            width: 100%;
+            height: 30px;
+        }
+    }
+</style>