bri-components 1.0.0

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

@@ -0,0 +1,442 @@
+<template>
+    <div
+        class="DshList"
+        v-show="showData"
+    >
+        <!-- 表头 -->
+        <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',
+                    background: useColBg ? '#f0f0f0' : 'none'
+                }"
+            >
+                <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)
+                    }"
+                >
+                    <Ctooltip
+                        transfer
+                        :content="col._name"
+                    >
+                        <span class="dsh-ellipsis">
+                            {{ col._name }}
+                        </span>
+                    </Ctooltip>
+                </div>
+            </div>
+        </div>
+
+        <!-- 行 -->
+        <div class="list-rows">
+            <!-- 加载中 -->
+            <div
+                v-if="isLoading"
+                class="list-loading"
+            >
+                <div
+                    class="v-table-loading"
+                    :style="{'opacity': 0.6}"
+                ></div>
+                <div class="v-table-loading-content" style="top: 30px">
+                    <span>
+                        <i
+                            class="v-icon-spin5 animate-loading-23"
+                            style="font-size: 28px;opacity:0.6;"
+                        ></i>
+                    </span>
+                </div>
+            </div>
+
+            <!-- 加载完 -->
+            <template v-else>
+                <!-- 有数据 -->
+                <template v-if="data.length">
+                    <div
+                        v-if="multiple"
+                        class="list-rows-left"
+                    >
+                        <CheckboxGroup
+                            v-model="selectIds"
+                            @on-change="select"
+                        >
+                            <Checkbox
+                                v-for="row in data"
+                                :key="row._id"
+                                :label="row._id"
+                                @click.native="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-td-render
+                                        v-if="col.render"
+                                        class="ms-ellipsis"
+                                        :row="row"
+                                        :column="col"
+                                        :index="index"
+                                        :render="col.render"
+                                    ></dsh-td-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>
+                                    <!-- <dsh-unit
+                                        :key="col._key"
+                                        :mode="mode"
+                                        :canEdit="false"
+                                        :formData="row"
+                                        :formItem="col"
+                                        :rowIndex="index"
+                                        @change="change(row, col, arguments)"
+                                    ></dsh-unit> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- 无数据 -->
+                <div
+                    v-else
+                    class="list-noData"
+                >
+                    {{noDataText}}
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import DshUnit from "../../unit/DshUnit.vue";
+
+    export default {
+        name: "DshList",
+        components: {
+            // DshUnit
+        },
+        props: {
+            // mode: {
+            //     type: String,
+            //     default: "default",
+            //     validator: function (value) {
+            //         return ["default"].indexOf(value) !== -1;
+            //     }
+            // },
+            isLoading: {
+                type: Boolean,
+                default: false
+            },
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {
+                        multiple: true,
+                        useColBg: true,
+                        sequence: false
+                    };
+                }
+            },
+            noDataText: {
+                type: String,
+                default: "暂无数据..."
+            }
+        },
+        data () {
+            return {
+                showData: true,
+                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 : [];
+                }
+            },
+
+            // isLoading () {
+            //     return this.propsObj.isLoading;
+            // },
+            multiple () {
+                return this.propsObj.multiple !== false;
+            },
+            useColBg () {
+                return this.propsObj.useColBg !== 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();
+            },
+            // 切换选择
+            select (ids) {
+                this.$emit("select", this.selectIds, this.selections, this.curRow.bool, this.curRow);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("selectChange", this.selectIds, this.selections);
+            },
+
+            change (...params) {
+                this.$emit("change", ...params);
+            },
+            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" scoped>
+    @height:44px;
+    .DshList {
+        .list {
+            &-loading {
+                min-height: 100px;
+            }
+
+            &-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%;
+                    // height: 36px;
+                    // padding: 9px 5px;
+                    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;
+
+                        &: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 {
+                padding: 10px 0px;
+                text-align: center;
+            }
+        }
+    }
+</style>