bri-components 1.5.22 → 1.6.1

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

@@ -1,404 +1,404 @@
-<template>
-    <div class="DshList">
-        <!-- 表头 -->
-        <div class="list-cols">
-            <!-- 左 -->
-            <div
-                v-if="multiple"
-                class="list-cols-left"
-            >
-                <Checkbox
-                    v-model="isSelectAll"
-                    @on-change="selectAll"
-                ></Checkbox>
-            </div>
-
-            <!-- 右 -->
-            <div
-                class="list-cols-right row"
-                :style="{
-                    paddingLeft: multiple ? '48px' : '0px',
-                }"
-            >
-                <div
-                    v-if="sequence"
-                    class="row-item"
-                    style="minWidth: 60px; textAlign: center;"
-                >
-                    序号
-                </div>
-                <div
-                    v-for="col in selfColumns"
-                    :key="col._key"
-                    class="row-item"
-                    :style="{
-                        flexBasis: (col.width || col.minWidth) + `px`,
-                        textAlign: col._align,
-                        flexGrow: 1,
-                        display: 'flex',
-                        justifyContent: getFlexLayout(col._align)
-                    }"
-                >
-                    <bri-tooltip
-                        transfer
-                        :content="col._name"
-                    >
-                        <span class="dsh-ellipsis">
-                            {{ col._name }}
-                        </span>
-                    </bri-tooltip>
-                </div>
-            </div>
-        </div>
-
-        <!-- 行 -->
-        <div class="list-rows">
-            <!-- 加载 -->
-            <bri-loading
-                v-if="isLoading"
-                class="list-loading"
-            >
-                {{ loadingText }}
-            </bri-loading>
-            <template v-else>
-                <!-- 有数据 -->
-                <template v-if="data.length">
-                    <div
-                        v-if="multiple"
-                        class="list-rows-left"
-                    >
-                        <CheckboxGroup
-                            v-model="selectIds"
-                            @on-change="selectRow"
-                        >
-                            <Checkbox
-                                v-for="row in data"
-                                :key="row._id"
-                                :label="row._id"
-                                @click.native.stop="clickRowCheckbox(row)"
-                            >
-                                {{ "" }}
-                            </Checkbox>
-                        </CheckboxGroup>
-                    </div>
-
-                    <div class="list-rows-right">
-                        <div
-                            v-for="(row, index) in data"
-                            :key="row._id"
-                            class="row"
-                            :style="{
-                                paddingLeft: multiple ? '48px' : '0px'
-                            }"
-                            @click="clickRow(row)"
-                        >
-                            <div
-                                v-if="sequence"
-                                class="row-item"
-                                style="minWidth: 60px; textAlign: center;"
-                            >
-                                <div class="row-item-inner">
-                                    {{ index + 1 }}
-                                </div>
-                            </div>
-
-                            <!-- 单元格 -->
-                            <div
-                                v-for="(col) in selfColumns"
-                                :key="col._key"
-                                class="row-item"
-                                :style="{
-                                    flexBasis: (col.width || col.minWidth) + `px`,
-                                    textAlign: col._align,
-                                    flexGrow: 1,
-                                    display: 'flex',
-                                    justifyContent: getFlexLayout(col._align)
-                                }"
-                            >
-                                <div class="row-item-inner dsh-ellipsis">
-                                    <dsh-list-render
-                                        v-if="col.renderBodyCell"
-                                        class="ms-ellipsis"
-                                        :row="row"
-                                        :column="col"
-                                        :index="index"
-                                        :render="col.renderBodyCell"
-                                    ></dsh-list-render>
-
-                                    <template v-else-if="col.formatter">
-                                        <div v-html="col.formatter(row, index)"></div>
-                                    </template>
-
-                                    <Tooltip
-                                        v-else-if="row[col._key]"
-                                        :transfer="true"
-                                        max-width="200"
-                                        :placement="index === 0 ? 'bottom-start' : 'top-start'"
-                                        :content="row[col._key]"
-                                        class="list-tooltip"
-                                    >
-                                        <div class="list-tooltip-box">{{ row[col._key] }}</div>
-                                    </Tooltip>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-
-                <!-- 无数据 -->
-                <div
-                    v-else
-                    class="DshList-nodata"
-                >
-                    {{ noDataText }}
-                </div>
-            </template>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshList",
-        components: {},
-        props: {
-            isLoading: {
-                type: Boolean,
-                default: false
-            },
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            columns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-
-            propsObj: {
-                type: Object,
-                default () {
-                    return {
-                        multiple: true,
-                        sequence: false
-                    };
-                }
-            },
-            noDataText: {
-                type: String,
-                default: "暂无数据…"
-            }
-        },
-        data () {
-            return {
-                selections: []
-                // curRow: null // 可以不声明
-            };
-        },
-        computed: {
-            selfColumns () {
-                return this.columns;
-            },
-            selectIds: {
-                get () {
-                    return this.selections.map(item => item._id);
-                },
-                set (val) {
-                    this.selections = this.data.filter(item => val.includes(item._id));
-                }
-            },
-            isSelectAll: {
-                get () {
-                    return this.data.length > 0 && this.selectIds.length === this.data.length;
-                },
-                set (bool) {
-                    this.selections = bool ? this.data : [];
-                }
-            },
-
-            multiple () {
-                return this.propsObj.multiple !== false;
-            },
-            sequence () {
-                return this.propsObj.sequence && this.propsObj.sequence !== false;
-            }
-        },
-        created () {},
-        methods: {
-            /* --- 仅供外部调用 ----- */
-            pushSelectIds (ids = []) {
-                this.selectIds = [...this.selectIds, ...ids];
-                this.changeSelect();
-            },
-
-            // 点击某行
-            clickRow (row) {
-                this.$emit("clickRow", row);
-            },
-            // 点击某行的选择框
-            clickRowCheckbox (row) {
-                this.curRow = row;
-                this.curRow.bool = !this.selectIds.includes(row._id);
-            },
-
-            // 切换全选
-            selectAll (bool) {
-                this.$emit("selectAll", this.selectIds, this.selections, bool);
-                this.changeSelect();
-            },
-            // 切换选择
-            selectRow (ids) {
-                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
-                this.changeSelect();
-            },
-            // 改变选择项
-            changeSelect () {
-                this.$emit("changeSelect", this.selectIds, this.selections);
-            },
-
-            getFlexLayout (align) {
-                let map = {
-                    left: "flex-start",
-                    center: "center",
-                    right: "flex-end"
-                };
-                if (align) {
-                    return map[align];
-                } else {
-                    return "flex-start";
-                }
-            }
-        },
-        watch: {
-            data () {
-                this.selections = [];
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshList {
-        @height:44px;
-
-        .list {
-            &-loading {
-                margin-top: 120px;
-            }
-
-            &-cols,
-            &-rows {
-                position: relative;
-
-                &-left {
-                    width: 48px;
-                    text-align: center;
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-
-                    label {
-                        display: inline-block;
-                        height: 36px;
-                        padding: 9px 5px;
-                        margin: 0px;
-                        line-height: 18px;
-                    }
-                }
-
-                .row {
-                    width: 100%;
-                    line-height: 20px;
-                    display: flex;
-                    justify-content: space-between;
-
-                    &-item {
-                        min-width: 120px;
-                        height: 100%;
-                        padding: 0 16px;
-                        font-size: 14px;
-                        align-items: center;
-                    }
-                }
-            }
-
-            &-cols {
-                height: @height;
-                background: #f0f0f0;
-
-                &-left {}
-                &-right {
-
-                }
-
-                .row {
-                    font-weight: 700;
-
-                    &-item {
-                        padding: 10px 16px;
-                        border-top: 1px #e5e5e5 solid;
-                        border-bottom: 1px #f0f0f0 solid;
-                        border-left: 1px #e5e5e5 solid;
-                        background: #f0f0f0;
-
-                        &:last-child{
-                        border-right: 1px #e5e5e5 solid;
-                        }
-
-                        &-inner {
-                            .dsh-ellipsis{
-                                font-size: 14px;
-                                color: #666;
-                                font-weight: 700;
-                                line-height: 24px;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &-rows {
-                &-left {
-                    label {
-                        height: 44px;
-                        line-height: 20px;
-                    }
-                }
-
-                &-right {}
-
-                .row {
-                    height: 44px;
-                    line-height: 20px;
-                    cursor: pointer;
-
-                    &-item {
-                        display: flex;
-                        border: 1px solid #E5E5E5;
-                        border-width: 0 0 1px 1px;
-
-                        &:last-child {
-                            border-width: 0 1px 1px 1px;
-                        }
-
-                        &-inner {
-                            width: 100%;
-                            font-size: 14px;
-                            color: #333;
-                            font-weight: 400;
-                            line-height: 24px;
-                        }
-                    }
-                }
-            }
-
-            &-nodata {
-                #dsh-nodata();
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshList">
+        <!-- 表头 -->
+        <div class="list-cols">
+            <!-- 左 -->
+            <div
+                v-if="multiple"
+                class="list-cols-left"
+            >
+                <Checkbox
+                    v-model="isSelectAll"
+                    @on-change="selectAll"
+                ></Checkbox>
+            </div>
+
+            <!-- 右 -->
+            <div
+                class="list-cols-right row"
+                :style="{
+                    paddingLeft: multiple ? '48px' : '0px',
+                }"
+            >
+                <div
+                    v-if="sequence"
+                    class="row-item"
+                    style="minWidth: 60px; textAlign: center;"
+                >
+                    序号
+                </div>
+                <div
+                    v-for="col in selfColumns"
+                    :key="col._key"
+                    class="row-item"
+                    :style="{
+                        flexBasis: (col.width || col.minWidth) + `px`,
+                        textAlign: col._align,
+                        flexGrow: 1,
+                        display: 'flex',
+                        justifyContent: getFlexLayout(col._align)
+                    }"
+                >
+                    <bri-tooltip
+                        transfer
+                        :content="col._name"
+                    >
+                        <span class="dsh-ellipsis">
+                            {{ col._name }}
+                        </span>
+                    </bri-tooltip>
+                </div>
+            </div>
+        </div>
+
+        <!-- 行 -->
+        <div class="list-rows">
+            <!-- 加载 -->
+            <bri-loading
+                v-if="isLoading"
+                class="list-loading"
+            >
+                {{ loadingText }}
+            </bri-loading>
+            <template v-else>
+                <!-- 有数据 -->
+                <template v-if="data.length">
+                    <div
+                        v-if="multiple"
+                        class="list-rows-left"
+                    >
+                        <CheckboxGroup
+                            v-model="selectIds"
+                            @on-change="selectRow"
+                        >
+                            <Checkbox
+                                v-for="row in data"
+                                :key="row._id"
+                                :label="row._id"
+                                @click.native.stop="clickRowCheckbox(row)"
+                            >
+                                {{ "" }}
+                            </Checkbox>
+                        </CheckboxGroup>
+                    </div>
+
+                    <div class="list-rows-right">
+                        <div
+                            v-for="(row, index) in data"
+                            :key="row._id"
+                            class="row"
+                            :style="{
+                                paddingLeft: multiple ? '48px' : '0px'
+                            }"
+                            @click="clickRow(row)"
+                        >
+                            <div
+                                v-if="sequence"
+                                class="row-item"
+                                style="minWidth: 60px; textAlign: center;"
+                            >
+                                <div class="row-item-inner">
+                                    {{ index + 1 }}
+                                </div>
+                            </div>
+
+                            <!-- 单元格 -->
+                            <div
+                                v-for="(col) in selfColumns"
+                                :key="col._key"
+                                class="row-item"
+                                :style="{
+                                    flexBasis: (col.width || col.minWidth) + `px`,
+                                    textAlign: col._align,
+                                    flexGrow: 1,
+                                    display: 'flex',
+                                    justifyContent: getFlexLayout(col._align)
+                                }"
+                            >
+                                <div class="row-item-inner dsh-ellipsis">
+                                    <dsh-list-render
+                                        v-if="col.renderBodyCell"
+                                        class="ms-ellipsis"
+                                        :row="row"
+                                        :column="col"
+                                        :index="index"
+                                        :render="col.renderBodyCell"
+                                    ></dsh-list-render>
+
+                                    <template v-else-if="col.formatter">
+                                        <div v-html="col.formatter(row, index)"></div>
+                                    </template>
+
+                                    <Tooltip
+                                        v-else-if="row[col._key]"
+                                        :transfer="true"
+                                        max-width="200"
+                                        :placement="index === 0 ? 'bottom-start' : 'top-start'"
+                                        :content="row[col._key]"
+                                        class="list-tooltip"
+                                    >
+                                        <div class="list-tooltip-box">{{ row[col._key] }}</div>
+                                    </Tooltip>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- 无数据 -->
+                <div
+                    v-else
+                    class="DshList-nodata"
+                >
+                    {{ noDataText }}
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshList",
+        components: {},
+        props: {
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {
+                        multiple: true,
+                        sequence: false
+                    };
+                }
+            },
+            noDataText: {
+                type: String,
+                default: "暂无数据…"
+            }
+        },
+        data () {
+            return {
+                selections: []
+                // curRow: null // 可以不声明
+            };
+        },
+        computed: {
+            selfColumns () {
+                return this.columns;
+            },
+            selectIds: {
+                get () {
+                    return this.selections.map(item => item._id);
+                },
+                set (val) {
+                    this.selections = this.data.filter(item => val.includes(item._id));
+                }
+            },
+            isSelectAll: {
+                get () {
+                    return this.data.length > 0 && this.selectIds.length === this.data.length;
+                },
+                set (bool) {
+                    this.selections = bool ? this.data : [];
+                }
+            },
+
+            multiple () {
+                return this.propsObj.multiple !== false;
+            },
+            sequence () {
+                return this.propsObj.sequence && this.propsObj.sequence !== false;
+            }
+        },
+        created () {},
+        methods: {
+            /* --- 仅供外部调用 ----- */
+            pushSelectIds (ids = []) {
+                this.selectIds = [...this.selectIds, ...ids];
+                this.changeSelect();
+            },
+
+            // 点击某行
+            clickRow (row) {
+                this.$emit("clickRow", row);
+            },
+            // 点击某行的选择框
+            clickRowCheckbox (row) {
+                this.curRow = row;
+                this.curRow.bool = !this.selectIds.includes(row._id);
+            },
+
+            // 切换全选
+            selectAll (bool) {
+                this.$emit("selectAll", this.selectIds, this.selections, bool);
+                this.changeSelect();
+            },
+            // 切换选择
+            selectRow (ids) {
+                this.$emit("selectRow", this.selectIds, this.selections, this.curRow.bool, this.curRow);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("changeSelect", this.selectIds, this.selections);
+            },
+
+            getFlexLayout (align) {
+                let map = {
+                    left: "flex-start",
+                    center: "center",
+                    right: "flex-end"
+                };
+                if (align) {
+                    return map[align];
+                } else {
+                    return "flex-start";
+                }
+            }
+        },
+        watch: {
+            data () {
+                this.selections = [];
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshList {
+        @height:44px;
+
+        .list {
+            &-loading {
+                margin-top: 120px;
+            }
+
+            &-cols,
+            &-rows {
+                position: relative;
+
+                &-left {
+                    width: 48px;
+                    text-align: center;
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+
+                    label {
+                        display: inline-block;
+                        height: 36px;
+                        padding: 9px 5px;
+                        margin: 0px;
+                        line-height: 18px;
+                    }
+                }
+
+                .row {
+                    width: 100%;
+                    line-height: 20px;
+                    display: flex;
+                    justify-content: space-between;
+
+                    &-item {
+                        min-width: 120px;
+                        height: 100%;
+                        padding: 0 16px;
+                        font-size: 14px;
+                        align-items: center;
+                    }
+                }
+            }
+
+            &-cols {
+                height: @height;
+                background: #f0f0f0;
+
+                &-left {}
+                &-right {
+
+                }
+
+                .row {
+                    font-weight: 700;
+
+                    &-item {
+                        padding: 10px 16px;
+                        border-top: 1px #e5e5e5 solid;
+                        border-bottom: 1px #f0f0f0 solid;
+                        border-left: 1px #e5e5e5 solid;
+                        background: #f0f0f0;
+
+                        &:last-child{
+                        border-right: 1px #e5e5e5 solid;
+                        }
+
+                        &-inner {
+                            .dsh-ellipsis{
+                                font-size: 14px;
+                                color: #666;
+                                font-weight: 700;
+                                line-height: 24px;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &-rows {
+                &-left {
+                    label {
+                        height: 44px;
+                        line-height: 20px;
+                    }
+                }
+
+                &-right {}
+
+                .row {
+                    height: 44px;
+                    line-height: 20px;
+                    cursor: pointer;
+
+                    &-item {
+                        display: flex;
+                        border: 1px solid #E5E5E5;
+                        border-width: 0 0 1px 1px;
+
+                        &:last-child {
+                            border-width: 0 1px 1px 1px;
+                        }
+
+                        &-inner {
+                            width: 100%;
+                            font-size: 14px;
+                            color: #333;
+                            font-weight: 400;
+                            line-height: 24px;
+                        }
+                    }
+                }
+            }
+
+            &-nodata {
+                #dsh-nodata();
+            }
+        }
+    }
+</style>