bri-components 1.0.0

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

@@ -0,0 +1,273 @@
+<template>
+    <div
+        class="DshTable"
+        style="width: 100%; height: 100%;"
+    >
+        <ev-table
+            :className="propsObj.className"
+            :data="data"
+            :columnsList="selfColumns"
+            :fixTitle="fixTitle"
+            :showSort="propsObj.showSort"
+            :tableBgColor="propsObj.tableBgColor"
+            :title-bg-color="propsObj.titleBgColor"
+            :title-font-color="propsObj.titleFontColor"
+            :odd-bg-color="propsObj.oddBgColor"
+            :even-bg-color="propsObj.evenBgColor"
+            :row-hover-color="propsObj.rowHoverColor"
+            :row-click-color="propsObj.rowClickColor"
+            :noDataText="propsObj.noDataText"
+            :is-loading="propsObj.isLoading"
+            :selectChange="changeSelect"
+            :selectAll="changeSelect"
+            @click-row="clickRow"
+            @sort-change="changeSort"
+        ></ev-table>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "DshTable",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            fixTitle: {
+                type: Boolean,
+                default: true
+            },
+            ownColumns: Array,
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {
+            multiple () {
+                return !!this.propsObj.multiple;
+            },
+            selfOperationList () {
+                const getOperationItemMaxWidth = (operationItem) => {
+                    // 字宽
+                    return Math.max(
+                        ...(operationItem._name_ || operationItem.name)
+                            .split("/")
+                            .map(item => item.length * (operationItem.size === "small" ? 12 : 14))
+                    ) +
+                    (operationItem.size === "small" ? 16 : 8); // 按钮的padding,故意多了2px保留余地
+                };
+
+                return this.operationList.map(operationItem => {
+                    return {
+                        ...operationItem,
+                        width: operationItem.width || getOperationItemMaxWidth(operationItem),
+                        style: (operationItem._name_ || operationItem.name).split("/").length > 1
+                            ? `width: ${getOperationItemMaxWidth(operationItem)}px; `
+                            : undefined
+                    };
+                });
+            },
+            selfColumns () {
+                if (this.ownColumns) {
+                    return this.ownColumns;
+                } else {
+                    const maxBtnNum = Math.max(this.propsObj.maxBtnNum || 4, 2);
+
+                    return [
+                        ...(
+                            this.multiple
+                                ? [{
+                                    title: "多选",
+                                    _name: "多选",
+                                    type: "selection",
+                                    width: 45,
+                                    titleAlign: "left",
+                                    columnAlign: "left",
+                                    isFrozen: true
+                                }]
+                                : []
+                        ),
+                        {
+                            field: "custome",
+                            title: "序号",
+                            _name: "序号",
+                            width: 67,
+                            titleAlign: "center",
+                            columnAlign: "center",
+                            isFrozen: true,
+                            formatter: function (rowData, rowIndex, pagingIndex, field) {
+                                return rowIndex + 1;
+                            }
+                        },
+
+                        ...this.columns,
+
+                        ...(
+                            this.selfOperationList.length
+                                ? [
+                                    {
+                                        title: "操作",
+                                        _name: "操作",
+                                        type: "expend",
+                                        width: Math.max(
+                                            // 漏在外部按钮的宽度
+                                            this.selfOperationList
+                                                .slice(0, this.selfOperationList.length > maxBtnNum ? maxBtnNum - 1 : this.selfOperationList.length)
+                                                .reduce((total, operationItem) => total + operationItem.width, 0) +
+                                                (this.selfOperationList.length > maxBtnNum ? 53 : 0) + // 出现更多按钮的宽度
+                                                (this.selfOperationList.length > 0 ? 30 : 0) + // 操作列的padding
+                                                4 // 留出4px空间，避免麻烦问题
+                                            , 80
+                                        ),
+                                        titleAlign: "center",
+                                        columnAlign: "center",
+                                        componentName: "dsh-td-render",
+                                        isFrozenRight: true,
+                                        render: (h, params) => {
+                                            const totalOperationList = this.selfOperationList.map(operationItem => {
+                                                return {
+                                                    ...operationItem,
+                                                    ...(
+                                                        operationItem.operationFunc
+                                                        ? operationItem.operationFunc(operationItem, params.row, params.index)
+                                                        : {}
+                                                    )
+                                                };
+                                            });
+                                            const outFilterOperationList = totalOperationList.slice(0, maxBtnNum - 1);
+                                            const moreFilterOperationList = totalOperationList.slice(maxBtnNum - 1).filter(operationItem => !operationItem.disabled);
+
+                                            // TODO: 注意此处totalOperationList用的一定是表格行显示最多的操作按钮数组，有改动注意看此备注！！！
+                                            return totalOperationList.length <= maxBtnNum
+                                                ? h("dsh-buttons", {
+                                                    props: {
+                                                        list: totalOperationList,
+                                                        itemClass: "table-operation-btn"
+                                                    },
+                                                    on: {
+                                                        click: (operationItem) => {
+                                                            this.$dshEmit(operationItem, params.row, params.row);
+                                                        }
+                                                    },
+                                                    nativeOn: {
+                                                        click: (e) => {
+                                                            e.stopPropagation();
+                                                        }
+                                                    }
+                                                })
+                                                : h("div", [
+                                                    h("dsh-buttons", {
+                                                        style: {
+                                                            display: "inline-block"
+                                                        },
+                                                        props: {
+                                                            list: outFilterOperationList,
+                                                            itemClass: "table-operation-btn"
+                                                        },
+                                                        on: {
+                                                            click: (operationItem) => {
+                                                                this.$dshEmit(operationItem, params.row, params.row);
+                                                            }
+                                                        },
+                                                        nativeOn: {
+                                                            click: (e) => {
+                                                                e.stopPropagation();
+                                                            }
+                                                        }
+                                                    }),
+                                                    h("dsh-dropdown", {
+                                                        props: {
+                                                            dropdownObj: {
+                                                                icon: "ios-more",
+                                                                size: 22,
+                                                                color: "#E9ECF4",
+                                                                showDropdownItemIcon: false
+                                                            },
+                                                            list: moreFilterOperationList
+                                                        },
+                                                        on: {
+                                                            click: (operationItem) => {
+                                                                this.$dshEmit(operationItem, params.row, params.row);
+                                                            }
+                                                        },
+                                                        nativeOn: {
+                                                            click: (e) => {
+                                                                e.stopPropagation();
+                                                            }
+                                                        }
+                                                    }, [
+                                                        h("dsh-buttons", {
+                                                            class: "dsh-margin-left5",
+                                                            props: {
+                                                                list: [
+                                                                    {
+                                                                        name: "更多>>",
+                                                                        type: "more",
+                                                                        btnType: "text",
+                                                                        size: "default",
+                                                                        class: "table-operation-btn",
+                                                                        disabled: !moreFilterOperationList.length
+                                                                    }
+                                                                ]
+                                                            }
+                                                        })
+                                                    ])
+                                            ]);
+                                        }
+                                    }
+                                ]
+                                : []
+                        )
+                    ];
+                }
+            }
+        },
+        created () {
+        },
+        methods: {
+            // 点击某行
+            clickRow (...params) {
+                this.$emit("clickRow", ...params);
+            },
+
+            // 改变选择项
+            changeSort (...params) {
+                this.$emit("sortChange", ...params);
+            },
+            // 改变选择项
+            changeSelect (...params) {
+                this.$emit("selectChange", params[0].map(item => item._id), ...params);
+            }
+            // // 切换全选
+            // selectAll (...params) {
+            //     this.$emit("selectAll", ...params);
+            // },
+            // // 切换选择
+            // select (...params) {
+            //     this.$emit("select", ...params);
+            // },
+        }
+    };
+</script>