bri-components 1.0.0

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

@@ -0,0 +1,624 @@
+<template>
+    <div class="DshCrossTable">
+        <!-- 左 表头列 -->
+        <div
+            class="DshCrossTable-left"
+            :style="renderTableBoxStyle"
+        >
+            <!-- 多选框 和 序号 -->
+            <div
+                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
+                class="DshCrossTable-left-header"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                >
+                    <!-- 多选框 -->
+                    <tr
+                        v-if="selfPropsObj.showCheck"
+                        class="DshCrossTable-row"
+                    >
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-checkbox"
+                            :style="{
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <Checkbox
+                                v-model="isSelectAll"
+                                @on-change="selectAll"
+                            ></Checkbox>
+                        </td>
+                    </tr>
+
+                    <!-- 序号 -->
+                    <tr
+                        v-if="selfPropsObj.showIndex"
+                        class="DshCrossTable-row"
+                    >
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-index"
+                            :style="{
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <div class="td-content">序号</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 表头s -->
+            <div class="DshCrossTable-left-body">
+                <div :style="{
+                        height: '10000px'
+                    }">
+                    <table
+                        cellspacing="0"
+                        cellpadding="0"
+                    >
+                        <!-- 头部 -->
+                        <tr
+                            v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
+                            :key="colItem._key"
+                        >
+                            <td
+                                class="DshCrossTable-col DshCrossTable-col-content"
+                                :style="{
+                                    background: '#f4f4f4',
+                                    textAlign: 'center',
+                                    fontWeight: 500
+                                }"
+                            >
+                                <Ctooltip
+                                    transfer
+                                    :content="colItem.title"
+                                >
+                                    <div class="td-content dsh-ellipsis">
+                                        {{ colItem.title }}
+                                    </div>
+                                </Ctooltip>
+                            </td>
+                        </tr>
+
+                        <!-- 字段项 -->
+                        <tr
+                            v-for="colItem in columnList.filter(colItem => !colItem.isHead)"
+                            :key="colItem._key"
+                        >
+                            <td
+                                class="DshCrossTable-col DshCrossTable-col-content"
+                                :style="{
+                                    background: '#F7F9FD'
+                                }"
+                            >
+                                <Ctooltip
+                                    transfer
+                                    :content="colItem.title"
+                                >
+                                    <div class="td-content dsh-ellipsis">
+                                        <slot
+                                            name="col"
+                                            :col="colItem"
+                                        >
+                                            <div
+                                                v-if="changedFields.includes(colItem._key)"
+                                                class="crossTable-col"
+                                            >
+                                                <span class="crossTable-col-title">{{ colItem.title }}</span>
+                                                <span class="crossTable-col-sign">变更</span>
+                                            </div>
+
+                                            <template v-else>
+                                                {{ colItem.title }}
+                                            </template>
+                                        </slot>
+                                    </div>
+                                </Ctooltip>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+            <!-- 操作 -->
+            <div
+                v-if="operationCol && selfPropsObj.showAction"
+                class="DshCrossTable-left-footer"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                >
+                    <tr class="DshCrossTable-row">
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-operation"
+                            :style="{
+                                background: '#f4f4f4'
+                            }"
+                        >
+                            <div class="td-content">操作</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+
+        <!-- 右 -数据 -->
+        <div
+            ref="DshCrossTable-right"
+            id="DshCrossTable-right"
+            :style="renderTableBoxStyle"
+            class="DshCrossTable-right"
+        >
+            <!-- 多选框 和 序号 -->
+            <div
+                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
+                class="DshCrossTable-right-header"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 10 + 'px',
+                    }"
+                >
+                    <!-- 多选框 -->
+                    <tr
+                        v-if="selfPropsObj.showCheck"
+                        class="DshCrossTable-row"
+                    >
+                        <CheckboxGroup
+                            v-model="selectIds"
+                            @on-change="select"
+                            style="height:40px"
+                        >
+                            <td
+                                v-for="(dataItem, dataIndex) in data"
+                                :key="dataItem._id"
+                                class="DshCrossTable-td-checkbox"
+                                :style="{
+                                    background: '#f4f4f4',
+                                    textAlign: 'center'
+                                }"
+                            >
+                                <Checkbox
+                                    class="td-content"
+                                    style="display: inline-block; width: 100%;"
+                                    :label="dataItem._id"
+                                    @click.native="clickRowCheckbox(dataItem, dataIndex)"
+                                >{{ "" }}</Checkbox>
+                            </td>
+                        </CheckboxGroup>
+                    </tr>
+
+                    <!-- 序号 -->
+                    <tr v-if="selfPropsObj.showIndex">
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-index"
+                            :style="{
+                                background: '#f4f4f4',
+                                textAlign: 'center'
+                            }"
+                            @click="clickRow(dataItem, dataIndex)"
+                        >
+                            <div class="td-content">{{ dataIndex + 1 }}</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 内容 -->
+            <div
+                v-if="showTable"
+                class="DshCrossTable-right-body"
+                @scroll="tableScroll($event)"
+            >
+                <!-- 无数据 -->
+                <div
+                    v-if="!data.length"
+                    class="dsh-subtip"
+                >{{ noDataText }}</div>
+
+                <!-- 存在数据 -->
+                <table
+                    v-else
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 'px'
+                    }"
+                >
+                    <!-- 头部 -->
+                    <tr
+                        v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
+                        :key="colItem._key"
+                    >
+                        <td
+                            v-for="dataItem in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-content"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: '#f4f4f4',
+                                textAlign: 'center',
+                                fontWeight: 500
+                            }"
+                        >
+                            <div class="td-content">
+                                {{ dataItem[colItem._key] }}
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- 字段项 -->
+                    <tr
+                        v-for="(colItem, colIndex) in columnList.filter(colItem => !colItem.isHead)"
+                        :key="colItem._key"
+                    >
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-content"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1
+                                    ? '#FFECED'
+                                    : dataIndex % 2 === 0 ?  '' : '#F7F9FD',
+                                color: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1 ? 'red' : undefined
+                            }"
+                            @click="clickRow(dataItem, dataIndex)"
+                        >
+                            <div
+                                v-if="colItem.render"
+                                class="td-content"
+                            >
+                                <dsh-td-render
+                                    :row="dataItem"
+                                    :index="dataIndex"
+                                    :render="colItem.render"
+                                ></dsh-td-render>
+                            </div>
+
+                            <div
+                                v-else-if="colItem.formatter"
+                                class="td-content"
+                                v-html="colItem.formatter(dataItem, colIndex, 0, colItem._key)"
+                            ></div>
+
+                            <div
+                                v-else
+                                class="td-content"
+                            >{{ dataItem[colItem._key] }}</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 操作 -->
+            <div
+                v-if="operationCol && selfPropsObj.showAction"
+                class="DshCrossTable-right-footer"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 10 + 'px'
+                    }"
+                >
+                    <tr class="DshCrossTable-row">
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-operation"
+                            :style="{
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <div class="td-content">
+                                <dsh-td-render
+                                    :row="dataItem"
+                                    :index="dataIndex"
+                                    :render="operationCol.render"
+                                ></dsh-td-render>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import elementResizeDetectorMaker from "element-resize-detector";
+
+    export default {
+        name: "DshCrossTable",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            noDataText: {
+                type: String,
+                default: "暂无数据..."
+            },
+            changedFields: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                selections: [],
+                // curRow: null // 可以不声明
+
+                allChecked: false,
+                selectionList: [],
+                rowWidth: 0,
+                colWidth: 0,
+                titleWidth: 200,
+                showTable: false,
+                currentPage: 1,
+                pagesize: 10,
+                pagesizeOpts: [50, 30, 20, 15, 10], // pagesize选择下拉
+                showTotal: true,
+                total: 0,
+                pageHeightScreen: [5, 10, 15] // 根据大中小屏，设置内部height，pagesize最多出现几个然后滚动
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    showCheck: true,
+                    showIndex: true,
+                    showAction: true,
+                    ...this.propsObj
+                };
+            },
+            columnList () {
+                return this.columns.filter(item => item.type !== "operation");
+            },
+            operationCol () {
+                return {
+                    title: "操作",
+                    _name: "操作",
+                    type: "expend",
+                    width: 150,
+                    titleAlign: "center",
+                    columnAlign: "center",
+                    componentName: "dsh-td-render",
+                    isFrozenRight: true,
+                    render: (h, params) => {
+                        return this.operationList.length < 3
+                            ? h("dsh-buttons", {
+                                props: {
+                                    list: this.operationList
+                                },
+                                on: {
+                                    click: (operationItem) => {
+                                        this.$dshEmit(operationItem, params.row, params.row);
+                                    }
+                                }
+                            })
+                            : h("div", {
+                                style: {
+                                    display: "flex",
+                                    justifyContent: "center"
+                                }
+                            }, [
+                                h("dsh-buttons", {
+                                    style: {
+                                        display: "inline-block"
+                                    },
+                                    props: {
+                                        list: this.operationList.slice(0, 2)
+                                    },
+                                    on: {
+                                        click: (operationItem) => {
+                                            this.$dshEmit(operationItem, params.row, params.row);
+                                        }
+                                    }
+                                }),
+                                h("dsh-dropdown", {
+                                    props: {
+                                        dropdownObj: {
+                                            icon: "ios-more",
+                                            size: 22,
+                                            color: "#E9ECF4",
+                                            showDropdownItemIcon: false
+                                        },
+                                        list: this.operationList.slice(2)
+                                    },
+                                    on: {
+                                        click: (operationItem) => {
+                                            this.$dshEmit(operationItem, params.row, params.row);
+                                        }
+                                    }
+                                }, [
+                                    h("dsh-buttons", {
+                                        props: {
+                                            list: [
+                                                {
+                                                    name: "更多>>",
+                                                    type: "more",
+                                                    btnType: "text",
+                                                    size: "small"
+                                                }
+                                            ]
+                                        }
+                                    })
+                                ])
+                        ]);
+                    }
+                };
+            },
+            renderTableBoxStyle () {
+                let styleStr = "";
+                if (this.tableExpend) {
+                    styleStr += "padding-bottom:38px;";
+                } else {
+                    styleStr += "padding-bottom:0px;";
+                }
+                if (this.tableSelection && this.tableIndex) {
+                    styleStr += "padding-top:77px";
+                } else if (this.tableSelection || this.tableIndex) {
+                    styleStr += "padding-top:39px";
+                } else {
+                    styleStr += "padding-top:0px";
+                }
+                return styleStr;
+            },
+            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 () {},
+        mounted () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.initTableData();
+            },
+            initTableData () {
+                // dom加载完成之后设置主要内容区域的宽，并且绑定监测滚动事件
+                this.$nextTick(() => {
+                    this.initTableWidth();
+                });
+            },
+            initTableWidth () {
+                // 创建实例，无参数
+                let erd = elementResizeDetectorMaker();
+                // 创建实例带参数
+                /* let erdUltraFast = elementResizeDetectorMaker({
+                    strategy: "scroll",
+                    callOnAdd: true,
+                    debug: true
+                }); */
+                // 监听id为CrossTable-right的元素 大小变化
+                let that = this;
+                erd.listenTo(document.getElementById("DshCrossTable-right"), function (element) {
+                    // 计算宽度
+                    let tableWidth = that.$refs["DshCrossTable-right"].clientWidth;
+                    let nums = tableWidth / 240;
+                    let dataTotal = that.data.length;
+                    if (nums >= dataTotal) {
+                        that.rowWidth = tableWidth;
+                        that.colWidth = (tableWidth - 10) / dataTotal;
+                    } else {
+                        that.rowWidth = dataTotal * 240;
+                    }
+
+                    // that.rowWidth = 200 * that.data.length;
+                    /* if (that.selfPropsObj.colWidth === "half") { //
+                        that.colWidth = (tableWidth - 10) / dataTotal;
+                    } */
+
+                    that.showTable = true;
+                });
+            },
+            // 竖向滚动监测,赋值给左侧表头滚动，保持同步
+            tableScroll (event) {
+                const leftEle = document.getElementsByClassName("DshCrossTable-left")[0]; // 左侧内容表头
+                const leftBodyEle = document.getElementsByClassName("DshCrossTable-left-body")[0]; // 左侧
+                const rightHeaderEle = document.getElementsByClassName("DshCrossTable-right-header")[0] || {}; // 右头
+                const rightFooterEle = document.getElementsByClassName("DshCrossTable-right-footer")[0] || {}; // 右低
+
+                // 上下滚动
+                leftBodyEle.scrollTop = event.srcElement.scrollTop;
+                if (this.selfPropsObj.showCheck && this.selfPropsObj.showIndex) {
+                    if (event.srcElement.scrollTop !== 0) {
+                        rightHeaderEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
+                        rightFooterEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
+                    } else {
+                        rightHeaderEle.style.boxShadow = rightFooterEle.style.boxShadow = "none";
+                    }
+                }
+
+                // 左右滚动
+                rightHeaderEle.scrollLeft = rightFooterEle.scrollLeft = event.srcElement.scrollLeft;
+                if (event.srcElement.scrollLeft !== 0) {
+                    leftEle.style.boxShadow = "0px 0px 3px 0px #dddddd";
+                } else {
+                    leftEle.style.boxShadow = "none";
+                }
+            },
+
+            // 点击某行
+            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 (selectIds) {
+                this.$emit("select", this.selectIds, this.selections, this.curRow, this.curRow.bool);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("selectChange", this.selectIds, this.selections);
+            }
+            // change (...params) {
+            //     this.$emit("change", ...params);
+            // }
+        },
+        watch: {
+            data (newVal, oldVal) {
+                this.init();
+            }
+        }
+    };
+</script>