Wizzer's Blog

<template>
    <div class="data-list">
        <transition name="el-fade-in">
            <div v-show="selectRows.length > 0" class="el-selection-bar">
                选择了<span class="el-selection-bar__text">{{ selectRows.length }}</span
                >条数据
                <a class="el-selection-bar__clear" @click="clearSelection">清空</a>
            </div>
        </transition>
        <div v-loading="isRequestIng" class="data-list__table" :element-loading-text="loadingTxt">
            <el-table
                v-bind="$attrs"
                ref="tabList"
                :data="rows"
                v-on="$listeners"
                :border="true"
                :span-method="handleRowSpanMethod"
            >
                <slot />
                <pro-empty slot="empty" />
            </el-table>
        </div>
        <div v-if="pageData.totalCount > pageData.pageSize || pageData.pageSize > 10" class="data-list__pager">
            <el-pagination
                :current-page="pageData.pageNo"
                :page-size="pageData.pageSize"
                :total="pageData.totalCount"
                background
                :page-sizes="pageSizes"
                layout="total, ->, prev, pager, next, sizes, jumper"
                @current-change="doChangePage"
                @size-change="doSizeChange"
            />
        </div>
    </div>
</template>

<script>
import { forIn, findIndex, cloneDeep, remove, uniqBy, concat, isArray, first } from "lodash-es"
export default {
    name: "PlusTableList",
    props: {
        server: {
            type: String,
            require: true,
            default: ""
        },
        methods: {
            type: String,
            default: "post"
        },
        lazy: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => {}
        },
        dataFilter: {
            type: Function,
            default: data => data
        },
        loadingTxt: {
            type: String,
            default: "数据加载中..."
        },
        paramClear: {
            type: Boolean,
            default: false
        },
        selectRows: {
            type: Array,
            default: () => []
        },
        selectable: {
            type: Function,
            default: () => true
        },
        rowKey: {
            type: String,
            default: "id"
        },
        selection: {
            type: Boolean,
            default: true
        },
        pageSizes: {
            type: Array,
            default: () => [10, 20, 30, 50]
        },
        spanName0: {
            type: String,
            default: null
        },
        spanName1: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            pageData: {
                pageNo: 1,
                pageSize: 10,
                totalCount: 0
            },
            rows: [],
            isRequestIng: false
        }
    },
    watch: {
        pageSizes: {
            handler: function (val) {
                if (isArray(val)) {
                    this.pageData.pageSize = first(val)
                }
            },
            immediate: true
        }
    },
    mounted() {
        if (!this.lazy) {
            this.getList()
        }
    },
    methods: {
        // 合并相同值的行
        handleRowSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (!this.spanName0) return
                if (rowIndex > 0 && row[this.spanName0] === this.rows[rowIndex - 1][this.spanName0]) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    let count = 1
                    for (let i = rowIndex + 1; i < this.rows.length; i++) {
                        if (row[this.spanName0] === this.rows[i][this.spanName0]) {
                            count++
                        } else {
                            break
                        }
                    }
                    if(count>1){
                        return {
                            rowspan: count,
                            colspan: 1
                        }
                    }
                }
            }
            if (columnIndex === 1) {
                if (!this.spanName1) return
                // 第一列值相同，且第二列值相同的的情况下合并
                if (rowIndex > 0 && row[this.spanName0] === this.rows[rowIndex-1][this.spanName0] && row[this.spanName1] === this.rows[rowIndex - 1][this.spanName1]) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    }
                } else {
                    let count = 1
                    for (let i = rowIndex + 1; i < this.rows.length; i++) {
                        // 第一列值相同，且第二列值相同的的情况下合并
                        if (row[this.spanName0] === this.rows[i][this.spanName0] && row[this.spanName1] === this.rows[i][this.spanName1]) {
                            count++
                        } else {
                            break
                        }
                    }
                    if(count>1){
                        return {
                            rowspan: count,
                            colspan: 1
                        }
                    }
                }
            }
        },
        // 页码变动事件
        doChangePage(val) {
            this.pageData.pageNo = val
            this.getList()
        },
        // 页大小变动事件
        doSizeChange(val) {
            this.pageData.pageSize = val
            this.pageData.pageNo = 1
            this.getList()
        },
        getList() {
            const { totalCount, ...pager } = this.pageData
            const params = Object.assign({}, this.data, pager)
            if (this.paramClear) {
                forIn(params, (value, key) => {
                    if (value === "") delete params[key]
                })
            }
            this.isRequestIng = true
            this.$get(params)
                .then(({ data }) => {
                    this.rows = this.dataFilter(data.list || [])
                    this.pageData.totalCount = data.totalCount
                    this.$emit("updateTotal", data.totalCount)
                    this.isRequestIng = false
                    this.$nextTick(() => {
                        this.handlePageUpdate()
                    })
                })
                .catch(error => {
                    this.isRequestIng = false
                })
        },
        handlePageUpdate() {
            const list = this.rows
            list.forEach(row => {
                if (
                    findIndex(this.selectRows, el => {
                        return el[this.rowKey] === row[this.rowKey]
                    }) !== -1
                ) {
                    this.$refs.tabList.toggleRowSelection(row, true)
                }
            })
        },
        handleSelectionChange(val) {
            const selectRows = cloneDeep(this.selectRows)
            this.$nextTick(() => {
                const list = this.rows.map(el => el[this.rowKey])
                remove(selectRows, el => {
                    return list.includes(el[this.rowKey])
                })
                this.$emit(
                    "update:selectRows",
                    uniqBy(concat(selectRows, val), el => el[this.rowKey])
                )
            })
        },
        $get(data) {
            if (this.methods === "get") {
                return this.$axios.get(this.server, {
                    params: data
                })
            } else {
                return this.$axios.post(this.server, data)
            }
        },
        reset() {
            this.pageData.pageNo = 1
            this.pageData.totalCount = 0
            this.rows = []
            this.clearSelection()
        },
        async clearSelection() {
            this.$refs.tabList.clearSelection()
            await this.$nextTick()
            this.$emit("update:selectRows", [])
        },
        query() {
            this.reset()
            this.getList()
        }
    }
}
</script>