bri-components 1.5.14 → 1.5.15

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

@@ -1,446 +1,446 @@
-<template>
-    <div class="DshCard">
-        <!-- 加载 -->
-        <bri-loading
-            v-if="isLoading"
-            class="DshCard-loading"
-        ></bri-loading>
-        <template v-else>
-            <!-- 有数据 -->
-            <CheckboxGroup
-                v-if="data.length"
-                class="DshCard-list"
-                v-model="selectIds"
-                @on-change="selectRow"
-            >
-                <Row :gutter="16">
-                    <i-col
-                        v-for="(row, dataIndex) in data"
-                        :key="dataIndex"
-                        :xs="24"
-                        :sm="subMode === 'logo' ? 24 : 12"
-                        :md="12"
-                        :lg="subMode === 'logo' ? 12 : 8"
-                        :xl="subMode === 'logo' ? 8 : 6"
-                        :xxl="subMode === 'logo' ? 6 : 4"
-                    >
-                        <div
-                            :class="{
-                                'row-item': true,
-                                'row-item-logo': subMode === 'logo',
-                            }"
-                            @click="clickRow(row)"
-                        >
-                            <!-- 复选框 -->
-                            <Checkbox
-                                v-if="multiple"
-                                class="row-item-checkbox"
-                                :label="row._id"
-                                @click.native.stop="clickRowCheckbox(row)"
-                            >
-                                {{ "" }}
-                            </Checkbox>
-
-                            <!-- 下拉操作（定位css） -->
-                            <dsh-dropdown
-                                v-if="operationList.length"
-                                class="row-item-dropdown"
-                                :dropdownObj="dropdownObj"
-                                :list="operationList"
-                                @click="$dshEmit($event, row, dataIndex)"
-                                @click.native.stop="0"
-                            ></dsh-dropdown>
-
-                            <!-- 图片 -->
-                            <div class="row-item-image">
-                                <img
-                                    :src="getCardBgImgSrc(row)"
-                                    alt=""
-                                >
-                            </div>
-
-                            <!-- 内容 -->
-                            <div class="row-item-info">
-                                <!-- 标题 -->
-                                <bri-tooltip
-                                    class="title"
-                                    :content="row[propsObj.titleField]"
-                                    placement="top"
-                                    :transfer="true"
-                                >
-                                    <div class="title-name">
-                                        {{ row[propsObj.titleField] }}
-                                    </div>
-                                </bri-tooltip>
-
-                                <!-- 显示字段 -->
-                                <div
-                                    v-for="colItem in selfColumns"
-                                    :key="colItem._key"
-                                    class="unit"
-                                >
-                                    <!-- 左 label -->
-                                    <bri-tooltip
-                                        class="unit-label-tooltip"
-                                        :content="colItem._name"
-                                        :transfer="true"
-                                    >
-                                        <div class="unit-label">
-                                            <span class="unit-label-name">
-                                                {{ colItem._name }}
-                                            </span>
-                                            <span class="unit-label-colon">
-                                                ：
-                                            </span>
-                                        </div>
-                                    </bri-tooltip>
-
-                                    <!-- 右 val -->
-                                    <div class="unit-control">
-                                        <dsh-list-render
-                                            v-if="colItem.renderBodyCell"
-                                            :row="row"
-                                            :column="colItem"
-                                            :index="0"
-                                            :render="colItem.renderBodyCell"
-                                        ></dsh-list-render>
-
-                                        <div
-                                            v-else-if="colItem.formatter"
-                                            v-html="colItem.formatter(row, 0)"
-                                        ></div>
-
-                                        <span
-                                            v-else
-                                            class="unit-control-text"
-                                        >
-                                            {{ row[colItem._key] }}
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </i-col>
-                </Row>
-            </CheckboxGroup>
-
-            <!-- 无数据 -->
-            <div
-                v-else
-                class="DshCard-nodata"
-            >
-                <img :src="$imageSrcMap.app.nodata" />
-            </div>
-        </template>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "DshCard",
-        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 [];
-                }
-            }
-        },
-        data () {
-            return {
-                selections: [],
-                // curRow: null // 可以不声明
-
-                // 下拉菜单的配置
-                dropdownObj: {
-                    icon: "ios-more",
-                    size: 22,
-                    showDropdownItemIcon: false
-                },
-
-                getCardBgImgSrc (row) {
-                    const fileList = row[this.imageField] || [];
-                    const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || {
-                        url: this.$imageSrcMap.app.projectCard
-                    };
-                    return imgObj.url;
-                }
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    subMode: "default", // "default", "logo"
-                    multiple: false,
-                    imageField: "",
-                    titleField: "",
-                    loadingText: "加载中，请稍等……",
-                    finishedText: "暂无更多数据！",
-                    noDataText: "暂无数据…",
-
-                    ...this.propsObj
-                };
-            },
-            subMode () {
-                return this.selfPropsObj.subMode;
-            },
-            multiple () {
-                return !!this.selfPropsObj.multiple;
-            },
-            loadingText () {
-                return this.selfPropsObj.loadingText;
-            },
-            finishedText () {
-                return this.selfPropsObj.finishedText;
-            },
-            noDataText () {
-                return this.selfPropsObj.noDataText;
-            },
-            imageField () {
-                return this.propsObj.imageField;
-            },
-            // imageFieldObj () {
-            //     return this.columns.find(colItem => colItem._key === this.imageField) || {};
-            // },
-            titleField () {
-                return this.propsObj.titleField;
-            },
-            // titleFieldObj () {
-            //     return this.columns.find(colItem => colItem._key === this.titleField) || {};
-            // },
-            selfColumns () {
-                return this.columns
-                    .filter(colItem => ![this.imageField, this.titleField].includes(colItem._key))
-                    .slice(0, this.subMode === "logo" ? 5 : 2);
-            },
-
-            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 : [];
-                }
-            }
-        },
-        created () {},
-        methods: {
-            // 点击某行
-            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);
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .DshCard {
-        width: 100%;
-        height: 100%;
-        padding: 10px;
-        background-color: #ffffff;
-        overflow: auto;
-
-        &-list {
-            .row-item {
-                box-sizing: border-box;
-                width: 100%;
-                margin-bottom: 20px;
-                border-radius: 4px;
-                box-shadow: 0 4px 5px 5px rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
-                background: #FFFFFF;
-                cursor: pointer;
-                overflow: hidden;
-                position: relative;
-
-                display: flex;
-                flex-direction: column;
-
-                &-checkbox {
-                    margin-top: 0px;
-                    padding-right: 4px;
-                    padding-bottom: 4px;
-                    position: absolute;
-                    top: -3px;
-                    left: 0px;
-                }
-
-                &-dropdown {
-                    position: absolute;
-                    top: 5px;
-                    right: 5px;
-                }
-
-                &-image {
-                    height: 122px;
-                    overflow: hidden;
-
-                    img {
-                        width: 100%;
-                    }
-                }
-
-                &-info {
-                    flex: 1;
-                    min-height: 0px;
-                    padding: 8px;
-                    padding-bottom: 10px;
-                    background: #F7FBFF;
-                    overflow: hidden;
-
-                    .title {
-                        height: 24px;
-                        font-size: 14px;
-                        font-weight: 600;
-
-                        &-name {
-                            .dsh-ellipsis();
-                        }
-                    }
-
-                    .unit {
-                        height: 32px;
-                        display: flex;
-                        flex-direction: row;
-                        align-items: center;
-
-                        &-label {
-                            &-tooltip {
-                                width: auto;
-                            }
-
-                            font-weight: 400;
-                            color: #515A6E;
-                            display: flex;
-                            flex-direction: row;
-                            align-items: center;
-
-                            &-name {
-                                .dsh-ellipsis();
-                                display: inline-block;
-                                min-width: 29px;
-                                max-width: 71px;
-                            }
-
-                            &-colon {
-
-                            }
-                        }
-
-                        &-control {
-                            flex: 1;
-                            min-width: 0px;
-
-                            &-text {
-
-                            }
-                        }
-                    }
-                }
-
-                &-logo {
-                    padding: 10px;
-                    border-radius: 6px;
-                    flex-direction: row;
-
-                    .row-item {
-                        &-image {
-                            width: 64px;
-                            height: 64px;
-                            margin-top: 8px;
-                            border: 1px solid #e5e5e5;
-                            border-radius: 8px;
-
-                            img {
-                                width: 100%;
-                                height: 100%;
-                            }
-                        }
-
-                        &-info {
-                            background-color: #ffffff;
-                        }
-                    }
-
-                    &:hover {
-
-                    }
-                }
-            }
-
-        }
-
-        &-nodata {
-            #dsh-nodata();
-        }
-    }
-</style>
-<style lang="less">
-    .DshCard {
-        &-list {
-            .ivu-checkbox-inner {
-                border: none;
-                // border-radius: 4px;
-                box-shadow: 0px 1px 2px 0px rgba(222, 222, 222, 0.75);
-            }
-
-            .ivu-checkbox-checked {
-                .ivu-checkbox-inner:after {
-                    top: 3px;
-                    left: 6px;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshCard">
+        <!-- 加载 -->
+        <bri-loading
+            v-if="isLoading"
+            class="DshCard-loading"
+        ></bri-loading>
+        <template v-else>
+            <!-- 有数据 -->
+            <CheckboxGroup
+                v-if="data.length"
+                class="DshCard-list"
+                v-model="selectIds"
+                @on-change="selectRow"
+            >
+                <Row :gutter="16">
+                    <i-col
+                        v-for="(row, dataIndex) in data"
+                        :key="dataIndex"
+                        :xs="24"
+                        :sm="subMode === 'logo' ? 24 : 12"
+                        :md="12"
+                        :lg="subMode === 'logo' ? 12 : 8"
+                        :xl="subMode === 'logo' ? 8 : 6"
+                        :xxl="subMode === 'logo' ? 6 : 4"
+                    >
+                        <div
+                            :class="{
+                                'row-item': true,
+                                'row-item-logo': subMode === 'logo',
+                            }"
+                            @click="clickRow(row)"
+                        >
+                            <!-- 复选框 -->
+                            <Checkbox
+                                v-if="multiple"
+                                class="row-item-checkbox"
+                                :label="row._id"
+                                @click.native.stop="clickRowCheckbox(row)"
+                            >
+                                {{ "" }}
+                            </Checkbox>
+
+                            <!-- 下拉操作（定位css） -->
+                            <dsh-dropdown
+                                v-if="operationList.length"
+                                class="row-item-dropdown"
+                                :dropdownObj="dropdownObj"
+                                :list="operationList"
+                                @click="$dshEmit($event, row, dataIndex)"
+                                @click.native.stop="0"
+                            ></dsh-dropdown>
+
+                            <!-- 图片 -->
+                            <div class="row-item-image">
+                                <img
+                                    :src="getCardBgImgSrc(row)"
+                                    alt=""
+                                >
+                            </div>
+
+                            <!-- 内容 -->
+                            <div class="row-item-info">
+                                <!-- 标题 -->
+                                <bri-tooltip
+                                    class="title"
+                                    :content="row[propsObj.titleField]"
+                                    placement="top"
+                                    :transfer="true"
+                                >
+                                    <div class="title-name">
+                                        {{ row[propsObj.titleField] }}
+                                    </div>
+                                </bri-tooltip>
+
+                                <!-- 显示字段 -->
+                                <div
+                                    v-for="colItem in selfColumns"
+                                    :key="colItem._key"
+                                    class="unit"
+                                >
+                                    <!-- 左 label -->
+                                    <bri-tooltip
+                                        class="unit-label-tooltip"
+                                        :content="colItem._name"
+                                        :transfer="true"
+                                    >
+                                        <div class="unit-label">
+                                            <span class="unit-label-name">
+                                                {{ colItem._name }}
+                                            </span>
+                                            <span class="unit-label-colon">
+                                                ：
+                                            </span>
+                                        </div>
+                                    </bri-tooltip>
+
+                                    <!-- 右 val -->
+                                    <div class="unit-control">
+                                        <dsh-list-render
+                                            v-if="colItem.renderBodyCell"
+                                            :row="row"
+                                            :column="colItem"
+                                            :index="0"
+                                            :render="colItem.renderBodyCell"
+                                        ></dsh-list-render>
+
+                                        <div
+                                            v-else-if="colItem.formatter"
+                                            v-html="colItem.formatter(row, 0)"
+                                        ></div>
+
+                                        <span
+                                            v-else
+                                            class="unit-control-text"
+                                        >
+                                            {{ row[colItem._key] }}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </i-col>
+                </Row>
+            </CheckboxGroup>
+
+            <!-- 无数据 -->
+            <div
+                v-else
+                class="DshCard-nodata"
+            >
+                <img :src="$imageSrcMap.app.nodata" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshCard",
+        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 [];
+                }
+            }
+        },
+        data () {
+            return {
+                selections: [],
+                // curRow: null // 可以不声明
+
+                // 下拉菜单的配置
+                dropdownObj: {
+                    icon: "ios-more",
+                    size: 22,
+                    showDropdownItemIcon: false
+                },
+
+                getCardBgImgSrc (row) {
+                    const fileList = row[this.imageField] || [];
+                    const imgObj = fileList.find(fileItem => fileItem.mimetype.includes("image")) || {
+                        url: this.$imageSrcMap.app.projectCard
+                    };
+                    return imgObj.url;
+                }
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    subMode: "default", // "default", "logo"
+                    multiple: false,
+                    imageField: "",
+                    titleField: "",
+                    loadingText: "加载中，请稍等……",
+                    finishedText: "暂无更多数据！",
+                    noDataText: "暂无数据…",
+
+                    ...this.propsObj
+                };
+            },
+            subMode () {
+                return this.selfPropsObj.subMode;
+            },
+            multiple () {
+                return !!this.selfPropsObj.multiple;
+            },
+            loadingText () {
+                return this.selfPropsObj.loadingText;
+            },
+            finishedText () {
+                return this.selfPropsObj.finishedText;
+            },
+            noDataText () {
+                return this.selfPropsObj.noDataText;
+            },
+            imageField () {
+                return this.propsObj.imageField;
+            },
+            // imageFieldObj () {
+            //     return this.columns.find(colItem => colItem._key === this.imageField) || {};
+            // },
+            titleField () {
+                return this.propsObj.titleField;
+            },
+            // titleFieldObj () {
+            //     return this.columns.find(colItem => colItem._key === this.titleField) || {};
+            // },
+            selfColumns () {
+                return this.columns
+                    .filter(colItem => ![this.imageField, this.titleField].includes(colItem._key))
+                    .slice(0, this.subMode === "logo" ? 5 : 2);
+            },
+
+            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 : [];
+                }
+            }
+        },
+        created () {},
+        methods: {
+            // 点击某行
+            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);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .DshCard {
+        width: 100%;
+        height: 100%;
+        padding: 10px;
+        background-color: #ffffff;
+        overflow: auto;
+
+        &-list {
+            .row-item {
+                box-sizing: border-box;
+                width: 100%;
+                margin-bottom: 20px;
+                border-radius: 4px;
+                box-shadow: 0 4px 5px 5px rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
+                background: #FFFFFF;
+                cursor: pointer;
+                overflow: hidden;
+                position: relative;
+
+                display: flex;
+                flex-direction: column;
+
+                &-checkbox {
+                    margin-top: 0px;
+                    padding-right: 4px;
+                    padding-bottom: 4px;
+                    position: absolute;
+                    top: -3px;
+                    left: 0px;
+                }
+
+                &-dropdown {
+                    position: absolute;
+                    top: 5px;
+                    right: 5px;
+                }
+
+                &-image {
+                    height: 122px;
+                    overflow: hidden;
+
+                    img {
+                        width: 100%;
+                    }
+                }
+
+                &-info {
+                    flex: 1;
+                    min-height: 0px;
+                    padding: 8px;
+                    padding-bottom: 10px;
+                    background: #F7FBFF;
+                    overflow: hidden;
+
+                    .title {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: 600;
+
+                        &-name {
+                            .dsh-ellipsis();
+                        }
+                    }
+
+                    .unit {
+                        height: 32px;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
+                        &-label {
+                            &-tooltip {
+                                width: auto;
+                            }
+
+                            font-weight: 400;
+                            color: #515A6E;
+                            display: flex;
+                            flex-direction: row;
+                            align-items: center;
+
+                            &-name {
+                                .dsh-ellipsis();
+                                display: inline-block;
+                                min-width: 29px;
+                                max-width: 71px;
+                            }
+
+                            &-colon {
+
+                            }
+                        }
+
+                        &-control {
+                            flex: 1;
+                            min-width: 0px;
+
+                            &-text {
+
+                            }
+                        }
+                    }
+                }
+
+                &-logo {
+                    padding: 10px;
+                    border-radius: 6px;
+                    flex-direction: row;
+
+                    .row-item {
+                        &-image {
+                            width: 64px;
+                            height: 64px;
+                            margin-top: 8px;
+                            border: 1px solid #e5e5e5;
+                            border-radius: 8px;
+
+                            img {
+                                width: 100%;
+                                height: 100%;
+                            }
+                        }
+
+                        &-info {
+                            background-color: #ffffff;
+                        }
+                    }
+
+                    &:hover {
+
+                    }
+                }
+            }
+
+        }
+
+        &-nodata {
+            #dsh-nodata();
+        }
+    }
+</style>
+<style lang="less">
+    .DshCard {
+        &-list {
+            .ivu-checkbox-inner {
+                border: none;
+                // border-radius: 4px;
+                box-shadow: 0px 1px 2px 0px rgba(222, 222, 222, 0.75);
+            }
+
+            .ivu-checkbox-checked {
+                .ivu-checkbox-inner:after {
+                    top: 3px;
+                    left: 6px;
+                }
+            }
+        }
+    }
+</style>